fix(Designer): Revert - Updated HTML Editor to support newline characters (#4808)

* cherry-pick

* Revert "fix(Designer): Updated HTML Editor to support newline characters (for dynamic content) (#4635)"

This reverts commit f4e1f8b.

Author: Eric-B-Wu

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

@@ -37,8 +37,7 @@ const getChildrenNodesToSegments = (node: ElementNode, segments: ValueSegment[],
 export const convertStringToSegments = (
   value: string,
   nodeMap: Map<string, ValueSegment>,
-  options?: SegmentParserOptions,
-  convertSpaceToNewline?: boolean
+  options?: SegmentParserOptions
 ): ValueSegment[] => {
   if (!value) {
     return [];
@@ -90,28 +89,7 @@ export const convertStringToSegments = (
     segmentSoFar += currChar;
 
     if (!isInQuotedString && currChar === '}' && currSegmentType === ValueSegmentType.TOKEN) {
-      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 (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);
-      }
-
+      const 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) {
@@ -164,7 +142,3 @@ const collapseLiteralSegments = (segments: ValueSegment[]): void => {
     index++;
   }
 };
-
-const removeNewlinesAndSpaces = (inputStr: string): string => {
-  return inputStr.replace(/\s+/g, '').replaceAll(/\n/g, '');
-};

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

@@ -143,7 +143,7 @@ const appendChildrenNode = (
     const childNodeFormat = childNode.getFormat();
 
     if (tokensEnabled && nodeMap) {
-      const contentAsParameter = convertStringToSegments(decodedTextContent, nodeMap, options, true);
+      const contentAsParameter = convertStringToSegments(decodedTextContent, nodeMap, options);
       contentAsParameter.forEach((segment) => {
         const tokenNode = createTokenNodeFromSegment(segment, options, nodeMap);
         if (tokenNode) {

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

@@ -7,7 +7,6 @@ import {
   encodeStringSegmentTokensInLexicalContext,
 } from '../../../../editor/base/utils/parsesegments';
 import {
-  canReplaceSpanWithId,
   cleanHtmlString,
   cleanStyleAttribute,
   encodeSegmentValueInLexicalContext,
@@ -75,7 +74,6 @@ export const convertEditorState = (
       // Create a temporary DOM element to parse the HTML string
       const tempElement = getDomFromHtmlEditorString(htmlEditorString, nodeMap);
 
-      let idValue = '';
       // Loop through all elements and remove unwanted attributes
       const elements = tempElement.querySelectorAll('*');
       // biome-ignore lint/style/useForOf: Node List isn't iterable
@@ -89,7 +87,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>.
-            idValue = element.getAttribute('id') ?? ''; // e.g., "@{concat('&lt;', '"')}"
+            const idValue = element.getAttribute('id') ?? ''; // e.g., "@{concat('&lt;', '"')}"
             const encodedIdValue = encodeSegmentValueInLexicalContext(idValue); // e.g., "@{concat('%26lt;', '%22')}"
             element.setAttribute('id', encodedIdValue);
             continue;
@@ -108,11 +106,12 @@ export const convertEditorState = (
 
       // Replace `<span id="..."></span>` with the captured `id` value if it is found in the viable IDs map.
       const spanIdPattern = /<span id="(.*?)"><\/span>/g;
-      let noTokenSpansString = decodedLexicalString;
-      const decodedLexicalStringWithoutNewlines = decodedLexicalString.replace(/\n/g, '');
-      if (canReplaceSpanWithId(idValue, nodeMap)) {
-        noTokenSpansString = decodedLexicalStringWithoutNewlines.replace(spanIdPattern, idValue);
-      }
+      const noTokenSpansString = decodedLexicalString.replace(spanIdPattern, (match, idValue) => {
+        if (nodeMap.get(idValue)) {
+          return idValue;
+        }
+        return match;
+      });
       const valueSegments: ValueSegment[] = convertStringToSegments(noTokenSpansString, nodeMap, { tokensEnabled: true });
       resolve(valueSegments);
     });

libs/designer-ui/src/lib/html/plugins/toolbar/helper/util.ts

@@ -65,11 +65,6 @@ export const cleanHtmlString = (html: string): string => {
   return cleanedHtmlString;
 };
 
-// If we can find the id in the nodemap, return true.
-export const canReplaceSpanWithId = (idValue: string, nodeMap: Map<string, ValueSegment>): boolean => {
-  return nodeMap.get(idValue) !== undefined;
-};
-
 export const cleanStyleAttribute = (styleAttributeValue: string): string | undefined => {
   const newValue = styleAttributeValue.replace('white-space: pre-wrap;', '').trim();
   return newValue.length ? newValue : undefined;