fix(designer-ui): Add support for <img src=> in raw HTML editor (#4422

) Add support for `<img src=''>` in raw HTML editor
Azure · Mar 27, 2024 · f52a2e9 · f52a2e9
1 parent 4e07343
commit f52a2e9
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 10 deletions.
diff --git a/libs/designer-ui/src/lib/html/plugins/toolbar/helper/HTMLChangePlugin.tsx b/libs/designer-ui/src/lib/html/plugins/toolbar/helper/HTMLChangePlugin.tsx
@@ -11,7 +11,7 @@ import {
   cleanStyleAttribute,
   encodeSegmentValueInLexicalContext,
   getDomFromHtmlEditorString,
-  isAttributeSupportedByLexical,
+  isAttributeSupportedByHtmlEditor,
   isHtmlStringValueSafeForLexical,
 } from './util';
 import { $generateHtmlFromNodes } from '@lexical/html';
@@ -81,7 +81,7 @@ export const convertEditorState = (
         const attributes = Array.from(element.attributes);
         for (let j = 0; j < attributes.length; j++) {
           const attribute = attributes[j];
-          if (!isAttributeSupportedByLexical(element.tagName, attribute.name)) {
+          if (!isAttributeSupportedByHtmlEditor(element.tagName, attribute.name)) {
             element.removeAttribute(attribute.name);
             continue;
           }

diff --git a/libs/designer-ui/src/lib/html/plugins/toolbar/helper/__test__/util.spec.ts b/libs/designer-ui/src/lib/html/plugins/toolbar/helper/__test__/util.spec.ts
@@ -5,7 +5,7 @@ import {
   decodeSegmentValueInLexicalContext,
   encodeSegmentValueInDomContext,
   encodeSegmentValueInLexicalContext,
-  isAttributeSupportedByLexical,
+  isAttributeSupportedByHtmlEditor,
   isHtmlStringValueSafeForLexical,
   isTagNameSupportedByLexical,
 } from '../util';
@@ -107,7 +107,7 @@ describe('lib/html/plugins/toolbar/helper/util', () => {
     });
   });
 
-  describe('isAttributeSupportedByLexical', () => {
+  describe('isAttributeSupportedByHtmlEditor', () => {
     it.each<[string, string, boolean]>([
       ['', 'href', false],
       ['a', '', false],
@@ -120,8 +120,12 @@ describe('lib/html/plugins/toolbar/helper/util', () => {
       ['p', 'href', false],
       ['p', 'id', true],
       ['p', 'style', true],
+      ['img', 'id', true],
+      ['img', 'alt', true],
+      ['img', 'script', false],
+      ['img', 'src', true],
     ])('should return <%s %s="..." /> as supported=%p', (inputTag, inputAttr, expected) => {
-      expect(isAttributeSupportedByLexical(inputTag, inputAttr)).toBe(expected);
+      expect(isAttributeSupportedByHtmlEditor(inputTag, inputAttr)).toBe(expected);
     });
   });
 
@@ -162,6 +166,7 @@ describe('lib/html/plugins/toolbar/helper/util', () => {
       ['h5', true],
       ['h6', true],
       ['i', true],
+      ['img', false],
       ['li', true],
       ['ol', true],
       ['p', true],

diff --git a/libs/designer-ui/src/lib/html/plugins/toolbar/helper/util.ts b/libs/designer-ui/src/lib/html/plugins/toolbar/helper/util.ts
@@ -41,9 +41,10 @@ const lexicalSupportedTagNames = new Set([
   'u',
   'ul',
 ]);
-const lexicalSupportedAttributes: { '*': string[] } & Record<string, string[]> = {
+const htmlEditorSupportedAttributes: { '*': string[] } & Record<string, string[]> = {
   '*': ['id', 'style'],
   a: ['href'],
+  img: ['alt', 'src'],
 };
 
 export interface Position {
@@ -102,19 +103,19 @@ export const getDomFromHtmlEditorString = (htmlEditorString: string, nodeMap: Ma
   return tempElement;
 };
 
-export const isAttributeSupportedByLexical = (tagName: string, attribute: string): boolean => {
+export const isAttributeSupportedByHtmlEditor = (tagName: string, attribute: string): boolean => {
   if (tagName.length === 0 || attribute.length === 0) {
     return false;
   }
 
   const tagNameLower = tagName.toLowerCase();
   const attributeLower = attribute.toLowerCase();
 
-  if (lexicalSupportedAttributes[tagNameLower]?.includes(attributeLower)) {
+  if (htmlEditorSupportedAttributes[tagNameLower]?.includes(attributeLower)) {
     return true;
   }
 
-  return lexicalSupportedAttributes['*'].includes(attributeLower);
+  return htmlEditorSupportedAttributes['*'].includes(attributeLower);
 };
 
 export const isHtmlStringValueSafeForLexical = (htmlEditorString: string, nodeMap: Map<string, ValueSegment>): boolean => {
@@ -130,7 +131,7 @@ export const isHtmlStringValueSafeForLexical = (htmlEditorString: string, nodeMa
     const attributes = Array.from(element.attributes);
     for (let j = 0; j < attributes.length; j++) {
       const attribute = attributes[j];
-      if (!isAttributeSupportedByLexical(element.tagName, attribute.name)) {
+      if (!isAttributeSupportedByHtmlEditor(element.tagName, attribute.name)) {
         return false;
       }
     }