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

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

@@ -37,7 +37,8 @@ const getChildrenNodesToSegments = (node: ElementNode, segments: ValueSegment[],
 export const convertStringToSegments = (
  value: string,
  nodeMap: Map<string, ValueSegment>,
- options?: SegmentParserOptions
+ options?: SegmentParserOptions,
+ convertSpaceToNewline?: boolean
 ): ValueSegment[] => {
  if (!value) {
  return [];
@@ -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 (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,19 @@ const collapseLiteralSegments = (segments: ValueSegment[]): void => {
  index++;
  }
 };
+
+const removeNewlinesAndSpaces = (inputStr: string): string => {
+ return inputStr.replace(/\s+/g, '').replaceAll(/\n/g, '').replaceAll(/\r/g, '');
+};
+
+export const getTokenFromNodeMap = (segmentSoFar: string, nodeMap: Map<string, ValueSegment>): string | undefined => {
+ const copyOfSegment = segmentSoFar;
+ const processedId = copyOfSegment.replace(/\n/g, '');
+ for (const [key, value] of nodeMap) {
+ const processedKey = key.replace(/[\n\r]/g, '');
+ if (processedId === processedKey && value !== undefined) {
+ return value.value;
+ }
+ }
+ return undefined;
+};

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);
+ const contentAsParameter = convertStringToSegments(decodedTextContent, nodeMap, options, true);
  contentAsParameter.forEach((segment) => {
  const tokenNode = createTokenNodeFromSegment(segment, options, nodeMap);
  if (tokenNode) {

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

@@ -63,6 +63,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 +78,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 +96,33 @@ 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;
- });
- const valueSegments: ValueSegment[] = convertStringToSegments(noTokenSpansString, nodeMap, { tokensEnabled: true });
+ }
+ if (replacedSpan) {
+ noTokenSpansString = decodedLexicalStringWithoutNewlines;
+ }
+ const valueSegments: ValueSegment[] = convertStringToSegments(noTokenSpansString, nodeMap, { tokensEnabled: true }, true);
  resolve(valueSegments);
  });
  });
 };
+
+export const canReplaceSpanWithId = (idValue: string, nodeMap: Map<string, ValueSegment>): boolean => {
+ const copyOfIdValue = idValue;
+ const processedId = copyOfIdValue.replace(/\n/g, '');
+ for (const [key, value] of nodeMap) {
+ const processedKey = key.replace(/[\n\r]/g, '');
+ if (processedId === processedKey && value !== undefined) {
+ return true;
+ }
+ }
+ return false;
+};