[lexical][lexical-devtools-core][lexical-playground] Bug Fix: fix TextNode importDom highlight formatting

packages/lexical-devtools-core/src/generateContent.ts

@@ -67,6 +67,8 @@ const FORMAT_PREDICATES = [
     node.hasFormat('superscript') && 'Superscript',
   (node: TextNode | RangeSelection) =>
     node.hasFormat('underline') && 'Underline',
+  (node: TextNode | RangeSelection) =>
+    node.hasFormat('highlight') && 'Highlight',
 ];
 
 const FORMAT_PREDICATES_PARAGRAPH = [
@@ -78,6 +80,7 @@ const FORMAT_PREDICATES_PARAGRAPH = [
   (node: ParagraphNode) => node.hasTextFormat('subscript') && 'Subscript',
   (node: ParagraphNode) => node.hasTextFormat('superscript') && 'Superscript',
   (node: ParagraphNode) => node.hasTextFormat('underline') && 'Underline',
+  (node: ParagraphNode) => node.hasTextFormat('highlight') && 'Highlight',
 ];
 
 const DETAIL_PREDICATES = [

packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/TextFormatHTMLCopyAndPaste.spec.mjs

@@ -70,4 +70,39 @@ test.describe('HTML CopyAndPaste', () => {
       `,
     );
   });
+
+  test('Copy + paste html with highlight formatting', async ({
+    page,
+    isPlainText,
+  }) => {
+    test.skip(isPlainText);
+    await focusEditor(page);
+    const clipboardData = {
+      'text/html': `<meta charset='utf-8'><p><b>Bold</b><mark>Highlight</mark><b><mark>Bold&amp;Highlight</mark></b></p>`,
+    };
+    await pasteFromClipboard(page, clipboardData);
+    await assertHTML(
+      page,
+      html`
+        <p
+          class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+          dir="ltr">
+          <strong
+            class="PlaygroundEditorTheme__textBold"
+            data-lexical-text="true">
+            Bold
+          </strong>
+          <mark data-lexical-text="true">
+            <span class="PlaygroundEditorTheme__textHighlight">Highlight</span>
+          </mark>
+          <mark data-lexical-text="true">
+            <strong
+              class="PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textHighlight">
+              Bold&amp;Highlight
+            </strong>
+          </mark>
+        </p>
+      `,
+    );
+  });
 });

packages/lexical-playground/src/index.css

@@ -406,6 +406,10 @@ i.superscript {
   background-image: url(images/icons/type-superscript.svg);
 }
 
+i.highlight {
+  background-image: url(images/icons/highlighter.svg);
+}
+
 i.link {
   background-image: url(images/icons/link.svg);
 }

packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx

@@ -539,6 +539,7 @@ export default function ToolbarPlugin({
   const [isStrikethrough, setIsStrikethrough] = useState(false);
   const [isSubscript, setIsSubscript] = useState(false);
   const [isSuperscript, setIsSuperscript] = useState(false);
+  const [isHighlight, setIsHighlight] = useState(false);
   const [isCode, setIsCode] = useState(false);
   const [canUndo, setCanUndo] = useState(false);
   const [canRedo, setCanRedo] = useState(false);
@@ -585,6 +586,7 @@ export default function ToolbarPlugin({
       setIsStrikethrough(selection.hasFormat('strikethrough'));
       setIsSubscript(selection.hasFormat('subscript'));
       setIsSuperscript(selection.hasFormat('superscript'));
+      setIsHighlight(selection.hasFormat('highlight'));
       setIsCode(selection.hasFormat('code'));
       setIsRTL($isParentElementRTL(selection));
 
@@ -1052,6 +1054,16 @@ export default function ToolbarPlugin({
               <i className="icon superscript" />
               <span className="text">Superscript</span>
             </DropDownItem>
+            <DropDownItem
+              onClick={() => {
+                activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'highlight');
+              }}
+              className={'item ' + dropDownActiveClass(isHighlight)}
+              title="Highlight"
+              aria-label="Format text with a highlight">
+              <i className="icon highlight" />
+              <span className="text">Highlight</span>
+            </DropDownItem>
             <DropDownItem
               onClick={clearFormatting}
               className="item"

packages/lexical-playground/src/themes/PlaygroundEditorTheme.css

@@ -51,6 +51,13 @@
 .PlaygroundEditorTheme__textBold {
   font-weight: bold;
 }
+.PlaygroundEditorTheme__paragraph mark {
+  background-color: unset;
+}
+.PlaygroundEditorTheme__textHighlight {
+  background: rgba(255, 212, 0, 0.14);
+  border-bottom: 2px solid rgba(255, 212, 0, 0.3);
+}
 .PlaygroundEditorTheme__textItalic {
   font-style: italic;
 }

packages/lexical-playground/src/themes/PlaygroundEditorTheme.ts

@@ -107,6 +107,7 @@ const theme: EditorThemeClasses = {
   text: {
     bold: 'PlaygroundEditorTheme__textBold',
     code: 'PlaygroundEditorTheme__textCode',
+    highlight: 'PlaygroundEditorTheme__textHighlight',
     italic: 'PlaygroundEditorTheme__textItalic',
     strikethrough: 'PlaygroundEditorTheme__textStrikethrough',
     subscript: 'PlaygroundEditorTheme__textSubscript',

packages/lexical/src/nodes/LexicalTextNode.ts

@@ -579,6 +579,10 @@ export class TextNode extends LexicalNode {
         conversion: convertTextFormatElement,
         priority: 0,
       }),
+      mark: () => ({
+        conversion: convertTextFormatElement,
+        priority: 0,
+      }),
       s: () => ({
         conversion: convertTextFormatElement,
         priority: 0,
@@ -1284,6 +1288,7 @@ const nodeNameToTextFormat: Record<string, TextFormatType> = {
   code: 'code',
   em: 'italic',
   i: 'italic',
+  mark: 'highlight',
   s: 'strikethrough',
   strong: 'bold',
   sub: 'subscript',