fix lg editing when multiple editors on the same page

Composer/packages/client/src/ShellApi.ts

@@ -75,7 +75,7 @@ export const ShellApi: React.FC = () => {
   const updateDialog = actions.updateDialog;
   const updateLuFile = actions.updateLuFile; //if debounced, error can't pass to form
   const updateLgFile = actions.updateLgFile;
-  const updateLgTemplate = useDebouncedFunc(actions.updateLgTemplate);
+  const updateLgTemplate = actions.updateLgTemplate;
   const createLuFile = actions.createLuFile;
   const createLgFile = actions.createLgFile;
 
@@ -102,6 +102,7 @@ export const ShellApi: React.FC = () => {
     apiClient.registerApi('createLuFile', ({ id, content }, event) => fileHandler(LU, CREATE, { id, content }, event));
     apiClient.registerApi('createLgFile', ({ id, content }, event) => fileHandler(LU, CREATE, { id, content }, event));
     apiClient.registerApi('updateLgTemplate', updateLgTemplateHandler);
+    apiClient.registerApi('removeLgTemplate', removeLgTemplateHandler);
     apiClient.registerApi('getLgTemplates', ({ id }, event) => getLgTemplates({ id }, event));
     apiClient.registerApi('navTo', navTo);
     apiClient.registerApi('onFocusEvent', focusEvent);
@@ -244,7 +245,7 @@ export const ShellApi: React.FC = () => {
    *
    * @param {*} event
    */
-  async function updateLgTemplateHandler({ id, templateName, template }, event) {
+  function updateLgTemplateHandler({ id, templateName, template }, event) {
     if (isEventSourceValid(event) === false) return false;
     const file = lgFiles.find(file => file.id === id);
     if (!file) throw new Error(`lg file ${id} not found`);
@@ -255,13 +256,25 @@ export const ShellApi: React.FC = () => {
     const content = updateTemplateInContent({ content: file.content, templateName, template });
     checkLgContent(content);
 
-    await updateLgTemplate({
+    return updateLgTemplate({
       file,
       templateName,
       template,
     });
   }
 
+  function removeLgTemplateHandler({ id, templateName }, event) {
+    if (isEventSourceValid(event) === false) return false;
+    const file = lgFiles.find(file => file.id === id);
+    if (!file) throw new Error(`lg file ${id} not found`);
+    if (!templateName) throw new Error(`templateName is missing or empty`);
+
+    return actions.removeLgTemplate({
+      file,
+      templateName,
+    });
+  }
+
   async function fileHandler(fileTargetType, fileChangeType, { id, content }, event) {
     if (isEventSourceValid(event) === false) return false;
 

Composer/packages/extensions/obiformeditor/src/Form/widgets/LgEditorWidget.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { LgEditor } from 'code-editor';
 import debounce from 'lodash.debounce';
 
@@ -30,41 +29,57 @@ interface LgEditorWidgetProps {
 
 export const LgEditorWidget: React.FC<LgEditorWidgetProps> = props => {
   const { formContext, name, value, height = 250 } = props;
-  const lgId = `bfd${name}-${formContext.dialogId}`;
   const [errorMsg, setErrorMsg] = useState('');
-
+  const lgId = `bfd${name}-${formContext.dialogId}`;
   const lgFileId = formContext.currentDialog.lgFile || 'common';
   const lgFile = formContext.lgFiles.find(file => file.id === lgFileId);
-  const template = lgFile
-    ? lgFile.templates.find(template => {
-        return template.Name === lgId;
-      })
-    : undefined;
+
+  const updateLgTemplate = useMemo(
+    () =>
+      debounce((body: string) => {
+        formContext.shellApi
+          .updateLgTemplate(lgFileId, lgId, body)
+          .then(() => setErrorMsg(''))
+          .catch(error => setErrorMsg(error));
+      }, 500),
+    [lgId, lgFileId]
+  );
+
+  const template = (lgFile &&
+    lgFile.templates.find(template => {
+      return template.Name === lgId;
+    })) || {
+    Name: lgId,
+    Body: getInitialTemplate(name, value),
+    Parameters: '',
+    Range: {
+      startLineNumber: 1,
+      endLineNumber: 1,
+    },
+  };
 
   // template body code range
-  const codeRange = template
-    ? {
-        startLineNumber: template.Range.startLineNumber + 1, // cut template name
-        endLineNumber: template.Range.endLineNumber,
-      }
-    : -1;
+  const codeRange = {
+    startLineNumber: 2,
+    endLineNumber: template.Body.split('\n').length + 1,
+  };
 
-  let content = lgFile ? lgFile.content : '';
-  if (!template) {
-    const newTemplateBody = getInitialTemplate(name, value || '-');
-    content += ['\n', '# ' + lgId, newTemplateBody].join('\n');
-  }
+  const [localContent, setLocalContent] = useState(template.Body);
+  const content = `#${template.Name}\n${localContent}`;
 
-  const onChange = debounce((data): void => {
-    // hit the lg api and replace it's Body with data
+  const onChange = (newTemplate: string) => {
+    const body = newTemplate.slice(newTemplate.indexOf('\n') + 1);
     if (formContext.dialogId) {
-      formContext.shellApi
-        .updateLgFile(lgFileId, data)
-        .then(() => setErrorMsg(''))
-        .catch(error => setErrorMsg(error));
+      if (body) {
+        updateLgTemplate(body);
+      } else {
+        updateLgTemplate.flush();
+        formContext.shellApi.removeLgTemplate(lgFileId, lgId);
+      }
       props.onChange(`[${lgId}]`);
     }
-  }, 200);
+    setLocalContent(body);
+  };
 
   return (
     <LgEditor

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

@@ -1,4 +1,4 @@
-import React, { Fragment, useMemo } from 'react';
+import React, { Fragment, useMemo, useState } from 'react';
 import { SharedColors, NeutralColors } from '@uifabric/fluent-theme';
 import formatMessage from 'format-message';
 
@@ -15,6 +15,7 @@ export interface RichEditorProps extends BaseEditorProps {
 export function RichEditor(props: RichEditorProps) {
   const { errorMsg, helpURL, placeholder, hidePlaceholder = false, height, ...rest } = props;
   const isInvalid = !!errorMsg;
+  const [hovered, setHovered] = useState(false);
 
   const errorHelp = formatMessage.rich(
     'This text cannot be saved because there are errors in the syntax. Refer to the syntax documentation <a>here</a>.',
@@ -45,15 +46,28 @@ export function RichEditor(props: RichEditorProps) {
     return `${height}px`;
   };
 
+  let borderColor = NeutralColors.gray120;
+
+  if (hovered) {
+    borderColor = NeutralColors.gray160;
+  }
+
+  if (isInvalid) {
+    borderColor = SharedColors.red20;
+  }
+
   return (
     <Fragment>
       <div
         style={{
           height: getHeight(),
-          border: '1px solid transparent',
-          borderColor: isInvalid ? SharedColors.red20 : NeutralColors.gray30,
-          transition: `border-color 0.1s ${isInvalid ? 'ease-out' : 'ease-in'}`,
+          borderWidth: '1px',
+          borderStyle: 'solid',
+          borderColor,
+          transition: 'border-color 0.1s linear',
         }}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
       >
         {props.codeRange ? memoEditor : baseEditor}
       </div>