retry setting editor dimensions if container is 0x0

Composer/packages/extensions/obiformeditor/src/Form/fields/RecognizerField/InlineLuEditor.tsx

@@ -19,8 +19,8 @@ const InlineLuEditor: React.FC<InlineLuEditorProps> = props => {
   };
 
   return (
-    <div style={{ height: '500px', padding: '0 18px', paddingBottom: errorMsg ? '19px' : 0 }}>
-      <LuEditor value={content} onChange={commitChanges} errorMsg={errorMsg} />
+    <div style={{ margin: '10px 0', padding: '0 18px' }}>
+      <LuEditor value={content} onChange={commitChanges} errorMsg={errorMsg} height={450} />
     </div>
   );
 };

Composer/packages/extensions/obiformeditor/src/ObiFormEditor.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import ErrorBoundary, { FallbackProps } from 'react-error-boundary';
 import { MessageBar, MessageBarType } from 'office-ui-fabric-react';
-import { debounce } from 'lodash';
+import debounce from 'lodash.debounce';
+import get from 'lodash.get';
 
 import { FormEditor, FormEditorProps } from './FormEditor';
 
@@ -32,9 +33,10 @@ const ObiFormEditor: React.FC<FormEditorProps> = props => {
   };
 
   const debouncedOnChange = debounce(onChange, 750);
+  const key = get(props.data, '$designer.id', props.focusPath);
 
   return (
-    <ErrorBoundary key={props.focusPath} FallbackComponent={ErrorInfo}>
+    <ErrorBoundary key={key} FallbackComponent={ErrorInfo}>
       <FormEditor {...props} onChange={debouncedOnChange} />
     </ErrorBoundary>
   );

Composer/packages/lib/code-editor/src/BaseEditor.tsx

@@ -41,6 +41,9 @@ export function BaseEditor(props: BaseEditorProps) {
         requestAnimationFrame(() => {
           setRect({ height, width });
         });
+      } else if (height + width === 0) {
+        // try again
+        setTimeout(updateRect, 50);
       }
     }
   }, 0);