fix(Designer): Updated HTML Editor to support newline and carriage return characters (for dynamic content)

libs/designer-ui/src/lib/editor/base/EditorWrapper.tsx

@@ -18,6 +18,7 @@ export const EditorWrapper = ({ ...props }: BaseEditorProps) => {
  const options: SegmentParserOptions = {
  readonly,
  tokensEnabled: tokens,
+ convertSpaceToNewline: true,
  };
  htmlEditor === 'rich-html' ? parseHtmlSegments(initialValue, options) : parseSegments(initialValue, options);
  }),

libs/designer-ui/src/lib/editor/base/utils/editorToSegment.ts

@@ -6,6 +6,7 @@ import type { SegmentParserOptions } from './parsesegments';
 import { guid } from '@microsoft/logic-apps-shared';
 import type { EditorState, ElementNode } from 'lexical';
 import { $getNodeByKey, $getRoot, $isElementNode, $isLineBreakNode, $isTextNode } from 'lexical';
+import { removeAllNewlines, removeAllSpaces } from '../../../utils';
 
 export function serializeEditorState(editorState: EditorState, trimLiteral = false): ValueSegment[] {
  const segments: ValueSegment[] = [];
@@ -89,7 +90,27 @@ export const convertStringToSegments = (
  segmentSoFar += currChar;
 
  if (!isInQuotedString && currChar === '}' && currSegmentType === ValueSegmentType.TOKEN) {
- const token = nodeMap.get(segmentSoFar);
+ let token: ValueSegment | undefined = undefined;
+
+ // removes formatting compatibility issues between nodemap and HTML text in the editor
+ // when opening an action with an HTML editor
+ if (options?.convertSpaceToNewline) {
+ // modifiedSegmentSoFar -> in segmentSoFar, replace spaces with no space
+ const modifiedSegmentSoFar = removeNewlinesAndSpaces(segmentSoFar);
+ // for each key in nodeMap
+ for (const key of nodeMap.keys()) {
+ // keyNoNewline = key, but replace all newlines with no space
+ const keyNoNewline = removeNewlinesAndSpaces(key);
+ // if the nodemap key and modified HTML segment match,
+ // take the corresponding HTML node in the nodemap
+ if (keyNoNewline === modifiedSegmentSoFar) {
+ token = nodeMap.get(key);
+ break;
+ }
+ }
+ } else {
+ token = nodeMap.get(segmentSoFar);
+ }
  if (token) {
  // If remove quotes param is set, remove the quotes from previous and next segments if it's a single token
  if (options?.removeSingleTokenQuotesWrapping && doubleQuotesStarted && returnSegments.length > 0) {
@@ -142,3 +163,10 @@ const collapseLiteralSegments = (segments: ValueSegment[]): void => {
  index++;
  }
 };
+
+const removeNewlinesAndSpaces = (inputStr: string): string => {
+ const noSpaces = removeAllSpaces(inputStr);
+ const noNewlinesAndNoSpaces = removeAllNewlines(noSpaces);
+
+ return noNewlinesAndNoSpaces;
+};

libs/designer-ui/src/lib/editor/base/utils/parsesegments.ts

@@ -38,6 +38,7 @@ export interface SegmentParserOptions {
  readonly?: boolean;
  tokensEnabled?: boolean;
  removeSingleTokenQuotesWrapping?: boolean;
+ convertSpaceToNewline?: boolean;
 }
 
 export const isEmptySegments = (segments: ValueSegment[]): boolean => {

libs/designer-ui/src/lib/html/plugins/toolbar/helper/HTMLChangePlugin.tsx

@@ -18,6 +18,7 @@ import { $generateHtmlFromNodes } from '@lexical/html';
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
 import type { EditorState, LexicalEditor } from 'lexical';
 import { $getRoot } from 'lexical';
+import { removeAllNewlines } from '../../../../utils';
 
 export interface HTMLChangePluginProps {
  isValuePlaintext: boolean;
@@ -63,6 +64,7 @@ export const convertEditorState = (
  // Create a temporary DOM element to parse the HTML string
  const tempElement = getDomFromHtmlEditorString(htmlEditorString, nodeMap);
 
+ const idValues: string[] = [];
  // Loop through all elements and remove unwanted attributes
  const elements = tempElement.querySelectorAll('*');
  // biome-ignore lint/style/useForOf: Node List isn't iterable
@@ -77,6 +79,7 @@ export const convertEditorState = (
  if (attribute.name === 'id' && !isValuePlaintext) {
  // If we're in the rich HTML editor, encoding occurs at the element level since they are all wrapped in <span>.
  const idValue = element.getAttribute('id') ?? ''; // e.g., "@{concat('&lt;', '"')}"
+ idValues.push(idValue);
  const encodedIdValue = encodeSegmentValueInLexicalContext(idValue); // e.g., "@{concat('%26lt;', '%22')}"
  element.setAttribute('id', encodedIdValue);
  continue;
@@ -94,15 +97,35 @@ export const convertEditorState = (
  const decodedLexicalString = decodeStringSegmentTokensInLexicalContext(decodedHtmlString, nodeMap);
 
  // Replace `<span id="..."></span>` with the captured `id` value if it is found in the viable IDs map.
- const spanIdPattern = /<span id="(.*?)"><\/span>/g;
- const noTokenSpansString = decodedLexicalString.replace(spanIdPattern, (match, idValue) => {
- if (nodeMap.get(idValue)) {
- return idValue;
+ const spanIdPattern = /<span id="(.*?)"><\/span>/;
+ let noTokenSpansString = decodedLexicalString;
+ let decodedLexicalStringWithoutNewlines = decodedLexicalString.replace(/\n/g, '');
+ let replacedSpan = false;
+ for (const idValue of idValues) {
+ if (canReplaceSpanWithId(idValue, nodeMap)) {
+ replacedSpan = true;
+ decodedLexicalStringWithoutNewlines = decodedLexicalStringWithoutNewlines.replace(spanIdPattern, idValue);
  }
- return match;
+ }
+ if (replacedSpan) {
+ noTokenSpansString = decodedLexicalStringWithoutNewlines;
+ }
+ const valueSegments: ValueSegment[] = convertStringToSegments(noTokenSpansString, nodeMap, {
+ tokensEnabled: true,
+ convertSpaceToNewline: true,
  });
- const valueSegments: ValueSegment[] = convertStringToSegments(noTokenSpansString, nodeMap, { tokensEnabled: true });
  resolve(valueSegments);
  });
  });
 };
+
+export const canReplaceSpanWithId = (idValue: string, nodeMap: Map<string, ValueSegment>): boolean => {
+ const processedId = removeAllNewlines(idValue);
+ for (const [key, value] of nodeMap) {
+ const processedKey = removeAllNewlines(key);
+ if (processedId === processedKey && value !== undefined) {
+ return true;
+ }
+ }
+ return false;
+};

libs/designer-ui/src/lib/html/plugins/toolbar/helper/__test__/HtmlChangePlugin.spec.ts

@@ -1,5 +1,6 @@
-import { HTMLChangePlugin } from '../HTMLChangePlugin';
-import { test } from 'vitest';
+import { ValueSegment } from '../../../../../editor/models/parameter';
+import { canReplaceSpanWithId, HTMLChangePlugin } from '../HTMLChangePlugin';
+import { expect, it, test } from 'vitest';
 
 test('HTMLChangePlugin can be used', () => {
  const mockProps = {
@@ -15,3 +16,25 @@ test('HTMLChangePlugin can be used', () => {
  throw new Error(`HTMLChangePlugin could not be used: ${e}`);
  }
 });
+
+const getTestToken = (): ValueSegment => ({
+ id: 'test id',
+ type: 'token',
+ value: 'test value',
+});
+
+it('canReplaceSpanWithId returns true', () => {
+ let idValue = 't\n\n\re\nstK\re\r\ryM\nat\r\rch';
+ const nodeMap = new Map<string, ValueSegment>();
+ nodeMap.set(`\rte\nst\n\rKey\nMatch\r\n`, { ...getTestToken() });
+
+ expect(canReplaceSpanWithId(idValue, nodeMap)).toBe(true);
+});
+
+it('canReplaceSpanWithId returns false', () => {
+ let idValue = 't\n\n\re\nstK\re\rNo\ryM\nat\r\rch';
+ const nodeMap = new Map<string, ValueSegment>();
+ nodeMap.set(`\rte\nst\n\rKey\nMatch\r\n`, { ...getTestToken() });
+
+ expect(canReplaceSpanWithId(idValue, nodeMap)).toBe(false);
+});

libs/designer-ui/src/lib/utils/__test__/utils.spec.ts

@@ -1,6 +1,6 @@
 import Constants from '../../constants';
-import { getDurationString, getDurationStringPanelMode, getStatusString } from '../index';
-import { describe, vi, beforeEach, afterEach, beforeAll, afterAll, it, test, expect } from 'vitest';
+import { getDurationString, getDurationStringPanelMode, getStatusString, removeAllNewlines, removeAllSpaces } from '../index';
+import { describe, it, expect } from 'vitest';
 describe('ui/utils/utils', () => {
  describe('getDurationString', () => {
  it(`returns -- if you try to get a duration for NaN milliseconds`, () => {
@@ -105,4 +105,22 @@ describe('ui/utils/utils', () => {
  expect(getStatusString(status, hasRetries)).toBe(expectedValue);
  });
  }
+
+ it(`should remove newlines`, () => {
+ let inputStr = '\n\nThis\nstringhas\n\nnewlines\n';
+ let inputStrWithoutNewlines = 'Thisstringhasnewlines';
+ expect(removeAllNewlines(inputStr)).toEqual(inputStrWithoutNewlines);
+ });
+
+ it(`should remove carriage return characters - newline equivalents`, () => {
+ let inputStr = '\rThis\r\rstringhas\rcarriagereturns\r';
+ let inputStrWithoutCarriageReturns = 'Thisstringhascarriagereturns';
+ expect(removeAllNewlines(inputStr)).toEqual(inputStrWithoutCarriageReturns);
+ });
+
+ it(`should remove spaces`, () => {
+ let inputStr = ' This string has spaces ';
+ let inputStrWithoutSpaces = 'Thisstringhasspaces';
+ expect(removeAllSpaces(inputStr)).toEqual(inputStrWithoutSpaces);
+ });
 });

libs/designer-ui/src/lib/utils/utils.ts

@@ -424,3 +424,11 @@ export const getPreviewTag = (status: string | undefined): string | undefined =>
  })
  : undefined;
 };
+
+export const removeAllNewlines = (inputStr: string): string => {
+ return inputStr.replace(/\n/g, '').replace(/\r/g, '');
+};
+
+export const removeAllSpaces = (inputStr: string): string => {
+ return inputStr.replace(/\s+/g, '');
+};