fix: lg template display wrong in visual & form editor

Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx

@@ -47,6 +47,7 @@ export const SingleLineDiv = styled.div<DivProps>`
 export const TextDiv = styled.div`
   ${StandardFontCSS};
   ${MultilineCSS};
+  white-space: pre-wrap;
   line-height: 16px;
   display: inline-block;
 `;

Composer/packages/extensions/visual-designer/src/utils/hooks.ts

@@ -7,6 +7,8 @@ import { LgTemplateRef } from '@bfc/shared';
 
 import { NodeRendererContext } from '../store/NodeRendererContext';
 
+import { normalizeLgTemplate } from './normalizeLgTemplate';
+
 export const useLgTemplate = (str?: string, dialogId?: string) => {
   const { getLgTemplates } = useContext(NodeRendererContext);
   const [templateText, setTemplateText] = useState('');
@@ -33,8 +35,7 @@ export const useLgTemplate = (str?: string, dialogId?: string) => {
       }
 
       if (template && template.body) {
-        const [firstLine] = template.body.split('\n');
-        setTemplateText(firstLine.startsWith('-') ? firstLine.substring(1) : firstLine);
+        setTemplateText(normalizeLgTemplate(template));
       } else {
         setTemplateText('');
       }

Composer/packages/extensions/visual-designer/src/utils/normalizeLgTemplate.ts

@@ -0,0 +1,16 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { LGTemplate } from 'botbuilder-lg';
+
+export function normalizeLgTemplate(template: LGTemplate): string {
+  const templateTexts = template.body.split('\n').map(line => (line.startsWith('-') ? line.substring(1) : line));
+  let showText = '';
+
+  if (templateTexts[0] && templateTexts[0].trim() === '[Activity') {
+    showText = templateTexts.find(text => text.includes('Text = '))?.split('Text = ')[1] || '';
+  } else {
+    showText = templateTexts.join('\n');
+  }
+  return showText;
+}

Composer/packages/server/assets/projects/ToDoBotWithLuisSample/ComposerDialogs/Main/Main.dialog

@@ -314,15 +314,15 @@
             {
               "$type": "Microsoft.SendActivity",
               "$designer": {
-                "id": "684852",
+                "id": "212971",
                 "name": "Send a response"
               },
               "activity": "${bfdactivity-212971()}"
             },
             {
               "$type": "Microsoft.TextInput",
               "$designer": {
-                "id": "038757",
+                "id": "879447",
                 "name": "Text input"
               },
               "prompt": "${bfdprompt-879447()}",
@@ -346,7 +346,7 @@
             {
               "$type": "Microsoft.SendActivity",
               "$designer": {
-                "id": "593087",
+                "id": "056974",
                 "name": "Send a response"
               },
               "activity": "${bfdactivity-056974()}"
@@ -356,7 +356,7 @@
             {
               "$type": "Microsoft.SendActivity",
               "$designer": {
-                "id": "253146",
+                "id": "084161",
                 "name": "Send a response"
               },
               "activity": "${bfdactivity-084161()}"