[Editor] Support inline lg editing

Composer/packages/client/package.json

@@ -14,7 +14,7 @@
     "babel-plugin-named-asset-import": "^0.3.1",
     "babel-preset-react-app": "^7.0.1",
     "bfj": "6.1.1",
-    "botbuilder-lg": "https://botbuilder.myget.org/F/botbuilder-declarative/npm/botbuilder-lg/-/4.6.6.tgz",
+    "botbuilder-lg": "https://botbuilder.myget.org/F/botbuilder-declarative/npm/botbuilder-lg/-/4.6.8.tgz",
     "case-sensitive-paths-webpack-plugin": "2.2.0",
     "code-editor": "*",
     "codemirror": "^5.45.0",

Composer/packages/client/src/ShellApi.ts

@@ -74,7 +74,7 @@ export const ShellApi: React.FC = () => {
   const { dialogs, schemas, lgFiles, luFiles, designPageLocation, focusPath, breadcrumb } = state;
   const updateDialog = actions.updateDialog;
   const updateLuFile = actions.updateLuFile; //if debounced, error can't pass to form
-  const updateLgFile = useDebouncedFunc(actions.updateLgFile);
+  const updateLgFile = actions.updateLgFile;
   const updateLgTemplate = useDebouncedFunc(actions.updateLgTemplate);
   const createLuFile = actions.createLuFile;
   const createLgFile = actions.createLgFile;

Composer/packages/client/src/extension-container/ExtensionContainer.tsx

@@ -72,6 +72,10 @@ const shellApi = {
     return apiClient.apiCall('updateLuFile', luFile);
   },
 
+  updateLgFile: (id: string, content: string) => {
+    return apiClient.apiCall('updateLgFile', { id, content });
+  },
+
   getLgTemplates: (id: string) => {
     return apiClient.apiCall('getLgTemplates', { id });
   },

Composer/packages/client/src/pages/language-generation/code-editor.js

@@ -7,7 +7,7 @@ import { get, debounce, isEmpty } from 'lodash';
 import * as lgUtil from '../../utils/lgUtil';
 
 export default function CodeEditor(props) {
-  const { file } = props;
+  const { file, codeRange } = props;
   const onChange = debounce(props.onChange, 500);
   const [diagnostics, setDiagnostics] = useState(get(file, 'diagnostics', []));
   const [content, setContent] = useState(get(file, 'content', ''));
@@ -41,6 +41,7 @@ export default function CodeEditor(props) {
         lineDecorationsWidth: undefined,
         lineNumbersMinChars: false,
       }}
+      codeRange={codeRange}
       errorMsg={errorMsg}
       value={content}
       onChange={_onChange}
@@ -51,4 +52,5 @@ export default function CodeEditor(props) {
 CodeEditor.propTypes = {
   file: PropTypes.object,
   onChange: PropTypes.func,
+  codeRange: PropTypes.object,
 };

Composer/packages/client/src/pages/language-generation/index.js

@@ -2,6 +2,7 @@ import React, { useContext, Fragment, useEffect, useState, useMemo } from 'react
 import formatMessage from 'format-message';
 import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
 import { Nav } from 'office-ui-fabric-react/lib/Nav';
+import get from 'lodash.get';
 
 import { OpenAlertModal, DialogStyle } from '../../components/Modal';
 import { StoreContext } from '../../store';
@@ -25,6 +26,7 @@ export const LGPage = props => {
   const { state, actions } = useContext(StoreContext);
   const { lgFiles, dialogs } = state;
   const [editMode, setEditMode] = useState(false);
+  const [codeRange, setCodeRange] = useState(null);
 
   const subPath = props['*'];
   const isRoot = subPath === '';
@@ -96,6 +98,11 @@ export const LGPage = props => {
     }
   }
 
+  function onToggleEditMode() {
+    setEditMode(!editMode);
+    setCodeRange(null);
+  }
+
   async function onChange(newContent) {
     const payload = {
       id: lgFile.id,
@@ -113,7 +120,11 @@ export const LGPage = props => {
 
   // #TODO: get line number from lg parser, then deep link to code editor this
   // Line
-  function onTableViewClickEdit() {
+  function onTableViewClickEdit(template) {
+    setCodeRange({
+      startLineNumber: get(template, 'ParseTree._start._line', 0),
+      endLineNumber: get(template, 'ParseTree._stop._line', 0),
+    });
     navigateTo(`/language-generation`);
     setEditMode(true);
   }
@@ -139,7 +150,7 @@ export const LGPage = props => {
             offText={formatMessage('Edit mode')}
             checked={editMode}
             disabled={!isRoot && editMode === false}
-            onChange={() => setEditMode(!editMode)}
+            onChange={onToggleEditMode}
           />
         </div>
       </div>
@@ -175,7 +186,7 @@ export const LGPage = props => {
         </div>
         <div css={contentEditor}>
           {editMode ? (
-            <CodeEditor file={lgFile} onChange={onChange} />
+            <CodeEditor file={lgFile} codeRange={codeRange} onChange={onChange} />
           ) : (
             <TableView file={lgFile} activeDialog={activeDialog} onClickEdit={onTableViewClickEdit} />
           )}

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

@@ -1,14 +1,15 @@
 import React from 'react';
-import { useState, useEffect } from 'react';
-import { RichEditor } from 'code-editor';
+import { useState } from 'react';
+import { LgEditor } from 'code-editor';
+import debounce from 'lodash.debounce';
 
 import { FormContext } from '../types';
 
 const LG_HELP =
   'https://github.com/microsoft/BotBuilder-Samples/blob/master/experimental/language-generation/docs/lg-file-format.md';
 
 const getInitialTemplate = (fieldName: string, formData?: string): string => {
-  let newTemplate = formData || '';
+  let newTemplate = formData || '- ';
 
   if (newTemplate.includes(`bfd${fieldName}-`)) {
     return '';
@@ -29,57 +30,50 @@ interface LgEditorWidgetProps {
 
 export const LgEditorWidget: React.FC<LgEditorWidgetProps> = props => {
   const { formContext, name, value, height = 250 } = props;
-  const [templateToRender, setTemplateToRender] = useState({ Name: '', Body: '' });
   const lgId = `bfd${name}-${formContext.dialogId}`;
   const [errorMsg, setErrorMsg] = useState('');
 
-  const ensureTemplate = async (newBody?: string): Promise<void> => {
-    const templates = await formContext.shellApi.getLgTemplates('common');
-    const template = templates.find(template => {
-      return template.Name === lgId;
-    });
-    if (template === null || template === undefined) {
-      const newTemplate = getInitialTemplate(name, newBody);
+  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;
 
-      if (formContext.dialogId && newTemplate) {
-        formContext.shellApi.updateLgTemplate('common', lgId, newTemplate);
-        props.onChange(`[${lgId}]`);
+  // template body code range
+  const codeRange = template
+    ? {
+        startLineNumber: template.Range.startLineNumber + 1, // cut template name
+        endLineNumber: template.Range.endLineNumber,
       }
-      setTemplateToRender({ Name: `# ${lgId}`, Body: newTemplate });
-    } else {
-      if (templateToRender.Name === '') {
-        setTemplateToRender({ Name: `# ${lgId}`, Body: template.Body });
-      }
-    }
-  };
+    : -1;
+
+  let content = lgFile ? lgFile.content : '';
+  if (!template) {
+    const newTemplateBody = getInitialTemplate(name, value || '-');
+    content += ['\n', '# ' + lgId, newTemplateBody].join('\n');
+  }
 
-  const onChange = (data): void => {
+  const onChange = debounce((data): void => {
     // hit the lg api and replace it's Body with data
     if (formContext.dialogId) {
-      let dataToEmit = data.trim();
-      if (dataToEmit.length > 0 && dataToEmit[0] !== '-') {
-        dataToEmit = `-${dataToEmit}`;
-      }
-
-      if (dataToEmit.length > 0) {
-        setTemplateToRender({ Name: templateToRender.Name, Body: data });
-        formContext.shellApi
-          .updateLgTemplate('common', lgId, dataToEmit)
-          .then(() => setErrorMsg(''))
-          .catch(error => setErrorMsg(error));
-        props.onChange(`[${lgId}]`);
-      } else {
-        setTemplateToRender({ Name: templateToRender.Name, Body: '' });
-        formContext.shellApi.removeLgTemplate('common', lgId);
-        props.onChange(undefined);
-      }
+      formContext.shellApi
+        .updateLgFile(lgFileId, data)
+        .then(() => setErrorMsg(''))
+        .catch(error => setErrorMsg(error));
+      props.onChange(`[${lgId}]`);
     }
-  };
-
-  useEffect(() => {
-    ensureTemplate(value);
-  }, [formContext.dialogId]);
+  }, 200);
 
-  const { Body } = templateToRender;
-  return <RichEditor errorMsg={errorMsg} value={Body} onChange={onChange} helpURL={LG_HELP} height={height} />;
+  return (
+    <LgEditor
+      codeRange={codeRange}
+      errorMsg={errorMsg}
+      value={content}
+      onChange={onChange}
+      helpURL={LG_HELP}
+      height={height}
+    />
+  );
 };

Composer/packages/extensions/obiformeditor/src/types.ts

@@ -50,14 +50,22 @@ export interface LuFile {
   };
 }
 
+export interface CodeRange {
+  startLineNumber: number;
+  endLineNumber: number;
+}
+
 export interface LgFile {
   id: string;
   relativePath: string;
   content: string;
+  templates: [LgTemplate];
 }
 export interface LgTemplate {
   Name: string;
   Body: string;
+  Parameters: string;
+  Range: CodeRange;
 }
 
 export interface FormData {
@@ -74,6 +82,7 @@ export interface ShellApi {
   onFocusEvent: (eventId: string) => Promise<void>;
   createLuFile: (id: string) => Promise<void>;
   updateLuFile: (id: string, content: string) => Promise<void>;
+  updateLgFile: (id: string, content: string) => Promise<void>;
   getLgTemplates: (id: string) => Promise<LgTemplate[]>;
   createLgTemplate: (id: string, template: LgTemplate, position: number) => Promise<void>;
   updateLgTemplate: (id: string, templateName: string, templateStr: string) => Promise<void>;

Composer/packages/lib/code-editor/demo/src/App.tsx

@@ -5,14 +5,24 @@ import { RichEditor } from '../../src';
 const LU_HELP =
   'https://github.com/Microsoft/botbuilder-tools/blob/master/packages/Ludown/docs/lu-file-format.md#lu-file-format';
 
+const content = `# Greeting
+-Good morning
+-Good afternoon
+-Good evening`;
+
 export default function App() {
-  const [value, setValue] = useState<string>('');
+  const [value, setValue] = useState<string>(content);
   const [showError, setShowError] = useState(true);
 
   const placeholder = `> To learn more about the LU file format, read the documentation at
 > ${LU_HELP}`;
   const errorMsg = showError ? 'example error' : undefined;
 
+  const codeRange = {
+    startLineNumber: 2,
+    endLineNumber: 3,
+  };
+
   return (
     <div style={{ height: '99vh', width: '100%' }}>
       <div style={{ marginBottom: '10px' }}>
@@ -21,6 +31,7 @@ export default function App() {
       <RichEditor
         onChange={newVal => setValue(newVal)}
         value={value}
+        codeRange={codeRange}
         placeholder={placeholder}
         errorMsg={errorMsg}
         helpURL="https://dev.botframework.com"

Composer/packages/lib/code-editor/package.json

@@ -55,7 +55,7 @@
   },
   "dependencies": {
     "@bfcomposer/monaco-editor-webpack-plugin": "^1.7.2",
-    "@bfcomposer/react-monaco-editor": "^0.30.4",
+    "@bfcomposer/react-monaco-editor": "^0.30.5",
     "lodash.throttle": "^4.1.1"
   }
 }