Lexical: Updated toolbar & text node exporting

- Updated toolbar to match existing editor, including dynamic RTL/LTR
  controls.
- Updated text node handling to not include spans and extra classes when
  not needed. Added & update tests to cover.

resources/js/wysiwyg/lexical/core/nodes/LexicalTextNode.ts

@@ -624,7 +624,28 @@ export class TextNode extends LexicalNode {
       element !== null && isHTMLElement(element),
       'Expected TextNode createDOM to always return a HTMLElement',
     );
-    element.style.whiteSpace = 'pre-wrap';
+
+    // Wrap up to retain space if head/tail whitespace exists
+    const text = this.getTextContent();
+    if (/^\s|\s$/.test(text)) {
+      element.style.whiteSpace = 'pre-wrap';
+    }
+
+    // Strip editor theme classes
+    for (const className of Array.from(element.classList.values())) {
+      if (className.startsWith('editor-theme-')) {
+        element.classList.remove(className);
+      }
+    }
+    if (element.classList.length === 0) {
+      element.removeAttribute('class');
+    }
+
+    // Remove placeholder tag if redundant
+    if (element.nodeName === 'SPAN' && !element.getAttribute('style')) {
+      element = document.createTextNode(text);
+    }
+
     // This is the only way to properly add support for most clients,
     // even if it's semantically incorrect to have to resort to using
     // <b>, <u>, <s>, <i> elements.
@@ -632,7 +653,7 @@ export class TextNode extends LexicalNode {
       element = wrapElementWith(element, 'b');
     }
     if (this.hasFormat('italic')) {
-      element = wrapElementWith(element, 'i');
+      element = wrapElementWith(element, 'em');
     }
     if (this.hasFormat('strikethrough')) {
       element = wrapElementWith(element, 's');
@@ -1329,6 +1350,10 @@ function applyTextFormatFromStyle(
   // Google Docs uses span tags + vertical-align to specify subscript and superscript
   const verticalAlign = style.verticalAlign;
 
+  // Styles to copy to node
+  const color = style.color;
+  const backgroundColor = style.backgroundColor;
+
   return (lexicalNode: LexicalNode) => {
     if (!$isTextNode(lexicalNode)) {
       return lexicalNode;
@@ -1355,6 +1380,18 @@ function applyTextFormatFromStyle(
       lexicalNode.toggleFormat('superscript');
     }
 
+    // Apply styles
+    let style = lexicalNode.getStyle();
+    if (color) {
+      style += `color: ${color};`;
+    }
+    if (backgroundColor && backgroundColor !== 'transparent') {
+      style += `background-color: ${backgroundColor};`;
+    }
+    if (style) {
+      lexicalNode.setStyle(style);
+    }
+
     if (shouldApply && !lexicalNode.hasFormat(shouldApply)) {
       lexicalNode.toggleFormat(shouldApply);
     }

resources/js/wysiwyg/lexical/core/nodes/__tests__/unit/LexicalTabNode.test.ts

@@ -107,7 +107,7 @@ describe('LexicalTabNode tests', () => {
         $insertDataTransferForRichText(dataTransfer, selection, editor);
       });
       expect(testEnv.innerHTML).toBe(
-        '<p><span data-lexical-text="true">Hello</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">world</span></p><p><span data-lexical-text="true">Hello</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">world</span></p>',
+        '<p><span style="color: rgb(0, 0, 0);" data-lexical-text="true">Hello</span><span data-lexical-text="true">\t</span><span style="color: rgb(0, 0, 0);" data-lexical-text="true">world</span></p><p><span style="color: rgb(0, 0, 0);" data-lexical-text="true">Hello</span><span data-lexical-text="true">\t</span><span style="color: rgb(0, 0, 0);" data-lexical-text="true">world</span></p>',
       );
     });
 

resources/js/wysiwyg/lexical/core/nodes/__tests__/unit/LexicalTextNode.test.ts

@@ -8,7 +8,7 @@
 
 import {
   $createParagraphNode,
-  $createTextNode,
+  $createTextNode, $getEditor,
   $getNodeByKey,
   $getRoot,
   $getSelection,
@@ -41,6 +41,9 @@ import {
   $setCompositionKey,
   getEditorStateTextContent,
 } from '../../../LexicalUtils';
+import {Text} from "@codemirror/state";
+import {$generateHtmlFromNodes} from "@lexical/html";
+import {formatBold} from "@lexical/selection/__tests__/utils";
 
 const editorConfig = Object.freeze({
   namespace: '',
@@ -792,6 +795,58 @@ describe('LexicalTextNode tests', () => {
     );
   });
 
+  describe('exportDOM()', () => {
+
+    test('simple text exports as a text node', async () => {
+      await update(() => {
+        const paragraph = $getRoot().getFirstChild<ElementNode>()!;
+        const textNode = $createTextNode('hello');
+        paragraph.append(textNode);
+
+        const html = $generateHtmlFromNodes($getEditor(), null);
+        expect(html).toBe('<p>hello</p>');
+      });
+    });
+
+    test('simple text wrapped in span if leading or ending spacing', async () => {
+
+      const textByExpectedHtml = {
+        'hello ': '<p><span style="white-space: pre-wrap;">hello </span></p>',
+        ' hello': '<p><span style="white-space: pre-wrap;"> hello</span></p>',
+        ' hello ': '<p><span style="white-space: pre-wrap;"> hello </span></p>',
+      }
+
+      await update(() => {
+        const paragraph = $getRoot().getFirstChild<ElementNode>()!;
+        for (const [text, expectedHtml] of Object.entries(textByExpectedHtml)) {
+          paragraph.getChildren().forEach(c => c.remove(true));
+          const textNode = $createTextNode(text);
+          paragraph.append(textNode);
+
+          const html = $generateHtmlFromNodes($getEditor(), null);
+          expect(html).toBe(expectedHtml);
+        }
+      });
+    });
+
+    test('text with formats exports using format elements instead of classes', async () => {
+      await update(() => {
+        const paragraph = $getRoot().getFirstChild<ElementNode>()!;
+        const textNode = $createTextNode('hello');
+        textNode.toggleFormat('bold');
+        textNode.toggleFormat('subscript');
+        textNode.toggleFormat('italic');
+        textNode.toggleFormat('underline');
+        textNode.toggleFormat('code');
+        paragraph.append(textNode);
+
+        const html = $generateHtmlFromNodes($getEditor(), null);
+        expect(html).toBe('<p><u><em><b><code spellcheck="false"><strong>hello</strong></code></b></em></u></p>');
+      });
+    });
+
+  });
+
   test('mergeWithSibling', async () => {
     await update(() => {
       const paragraph = $getRoot().getFirstChild<ElementNode>()!;

resources/js/wysiwyg/lexical/headless/__tests__/unit/LexicalHeadlessEditor.test.ts

@@ -206,7 +206,7 @@ describe('LexicalHeadlessEditor', () => {
     cleanup();
 
     expect(html).toBe(
-      '<p dir="ltr"><span style="white-space: pre-wrap;">hello world</span></p>',
+      '<p>hello world</p>',
     );
   });
 });

resources/js/wysiwyg/lexical/html/__tests__/unit/LexicalHtml.test.ts

@@ -102,7 +102,7 @@ describe('HTML', () => {
       html = $generateHtmlFromNodes(editor, selection);
     });
 
-    expect(html).toBe('<span style="white-space: pre-wrap;">World</span>');
+    expect(html).toBe('World');
   });
 
   test(`[Lexical -> HTML]: Default selection (undefined) should serialize entire editor state`, () => {
@@ -145,7 +145,7 @@ describe('HTML', () => {
     });
 
     expect(html).toBe(
-      '<p><span style="white-space: pre-wrap;">Hello</span></p><p><span style="white-space: pre-wrap;">World</span></p>',
+      '<p>Hello</p><p>World</p>',
     );
   });
 
@@ -175,7 +175,7 @@ describe('HTML', () => {
     });
 
     expect(html).toBe(
-      '<p style="text-align: center;"><span style="white-space: pre-wrap;">Hello world!</span></p>',
+      '<p style="text-align: center;">Hello world!</p>',
     );
   });
 
@@ -205,7 +205,7 @@ describe('HTML', () => {
     });
 
     expect(html).toBe(
-      '<p style="text-align: center;"><span style="white-space: pre-wrap;">Hello world!</span></p>',
+      '<p style="text-align: center;">Hello world!</p>',
     );
   });
 });

resources/js/wysiwyg/lexical/table/__tests__/unit/LexicalTableNode.test.ts

@@ -115,7 +115,7 @@ describe('LexicalTableNode tests', () => {
         // Make sure paragraph is inserted inside empty cells
         const emptyCell = '<td><p><br></p></td>';
         expect(testEnv.innerHTML).toBe(
-          `<table><tr><td><p><span data-lexical-text="true">Hello there</span></p></td><td><p><span data-lexical-text="true">General Kenobi!</span></p></td></tr><tr><td><p><span data-lexical-text="true">Lexical is nice</span></p></td>${emptyCell}</tr></table>`,
+          `<table><tr><td><p><span style="color: rgb(0, 0, 0);" data-lexical-text="true">Hello there</span></p></td><td><p><span style="color: rgb(0, 0, 0);" data-lexical-text="true">General Kenobi!</span></p></td></tr><tr><td><p><span style="color: rgb(0, 0, 0);" data-lexical-text="true">Lexical is nice</span></p></td>${emptyCell}</tr></table>`,
         );
       });
 

resources/js/wysiwyg/lexical/utils/__tests__/unit/LexicalEventHelpers.test.ts

@@ -330,7 +330,7 @@ describe('LexicalEventHelpers', () => {
       const suite = [
         {
           expectedHTML:
-            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><span data-lexical-text="true">Get schwifty!</span></p></div>',
+            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><span style="color: rgb(0, 0, 0);" data-lexical-text="true">Get schwifty!</span></p></div>',
           inputs: [
             pasteHTML(
               `<b style="font-weight:normal;" id="docs-internal-guid-2c706577-7fff-f54a-fe65-12f480020fac"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Get schwifty!</span></b>`,
@@ -340,7 +340,7 @@ describe('LexicalEventHelpers', () => {
         },
         {
           expectedHTML:
-            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><strong class="editor-text-bold" data-lexical-text="true">Get schwifty!</strong></p></div>',
+            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><strong class="editor-text-bold" style="color: rgb(0, 0, 0);" data-lexical-text="true">Get schwifty!</strong></p></div>',
           inputs: [
             pasteHTML(
               `<b style="font-weight:normal;" id="docs-internal-guid-9db03964-7fff-c26c-8b1e-9484fb3b54a4"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Get schwifty!</span></b>`,
@@ -350,7 +350,7 @@ describe('LexicalEventHelpers', () => {
         },
         {
           expectedHTML:
-            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><em class="editor-text-italic" data-lexical-text="true">Get schwifty!</em></p></div>',
+            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><em class="editor-text-italic" style="color: rgb(0, 0, 0);" data-lexical-text="true">Get schwifty!</em></p></div>',
           inputs: [
             pasteHTML(
               `<b style="font-weight:normal;" id="docs-internal-guid-9db03964-7fff-c26c-8b1e-9484fb3b54a4"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Get schwifty!</span></b>`,
@@ -360,7 +360,7 @@ describe('LexicalEventHelpers', () => {
         },
         {
           expectedHTML:
-            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><span class="editor-text-strikethrough" data-lexical-text="true">Get schwifty!</span></p></div>',
+            '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p class="editor-paragraph"><span class="editor-text-strikethrough" style="color: rgb(0, 0, 0);" data-lexical-text="true">Get schwifty!</span></p></div>',
           inputs: [
             pasteHTML(
               `<b style="font-weight:normal;" id="docs-internal-guid-9db03964-7fff-c26c-8b1e-9484fb3b54a4"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:line-through;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Get schwifty!</span></b>`,

resources/js/wysiwyg/lexical/utils/__tests__/unit/LexicalUtilsSplitNode.test.ts

@@ -38,7 +38,7 @@ describe('LexicalUtils#splitNode', () => {
     {
       _: 'split paragraph in between two text nodes',
       expectedHtml:
-        '<p><span style="white-space: pre-wrap;">Hello</span></p><p><span style="white-space: pre-wrap;">world</span></p>',
+        '<p>Hello</p><p>world</p>',
       initialHtml: '<p><span>Hello</span><span>world</span></p>',
       splitOffset: 1,
       splitPath: [0],
@@ -46,7 +46,7 @@ describe('LexicalUtils#splitNode', () => {
     {
       _: 'split paragraph before the first text node',
       expectedHtml:
-        '<p><br></p><p><span style="white-space: pre-wrap;">Hello</span><span style="white-space: pre-wrap;">world</span></p>',
+        '<p><br></p><p>Helloworld</p>',
       initialHtml: '<p><span>Hello</span><span>world</span></p>',
       splitOffset: 0,
       splitPath: [0],
@@ -54,7 +54,7 @@ describe('LexicalUtils#splitNode', () => {
     {
       _: 'split paragraph after the last text node',
       expectedHtml:
-        '<p><span style="white-space: pre-wrap;">Hello</span><span style="white-space: pre-wrap;">world</span></p><p><br></p>',
+        '<p>Helloworld</p><p><br></p>',
       initialHtml: '<p><span>Hello</span><span>world</span></p>',
       splitOffset: 2, // Any offset that is higher than children size
       splitPath: [0],
@@ -62,8 +62,8 @@ describe('LexicalUtils#splitNode', () => {
     {
       _: 'split list items between two text nodes',
       expectedHtml:
-        '<ul><li><span style="white-space: pre-wrap;">Hello</span></li></ul>' +
-        '<ul><li><span style="white-space: pre-wrap;">world</span></li></ul>',
+        '<ul><li>Hello</li></ul>' +
+        '<ul><li>world</li></ul>',
       initialHtml: '<ul><li><span>Hello</span><span>world</span></li></ul>',
       splitOffset: 1, // Any offset that is higher than children size
       splitPath: [0, 0],
@@ -72,7 +72,7 @@ describe('LexicalUtils#splitNode', () => {
       _: 'split list items before the first text node',
       expectedHtml:
         '<ul><li></li></ul>' +
-        '<ul><li><span style="white-space: pre-wrap;">Hello</span><span style="white-space: pre-wrap;">world</span></li></ul>',
+        '<ul><li>Helloworld</li></ul>',
       initialHtml: '<ul><li><span>Hello</span><span>world</span></li></ul>',
       splitOffset: 0, // Any offset that is higher than children size
       splitPath: [0, 0],
@@ -81,12 +81,12 @@ describe('LexicalUtils#splitNode', () => {
       _: 'split nested list items',
       expectedHtml:
         '<ul>' +
-        '<li><span style="white-space: pre-wrap;">Before</span></li>' +
-        '<li><ul><li><span style="white-space: pre-wrap;">Hello</span></li></ul></li>' +
+        '<li>Before</li>' +
+        '<li><ul><li>Hello</li></ul></li>' +
         '</ul>' +
         '<ul>' +
-        '<li><ul><li><span style="white-space: pre-wrap;">world</span></li></ul></li>' +
-        '<li><span style="white-space: pre-wrap;">After</span></li>' +
+        '<li><ul><li>world</li></ul></li>' +
+        '<li>After</li>' +
         '</ul>',
       initialHtml:
         '<ul>' +

resources/js/wysiwyg/lexical/utils/__tests__/unit/LexlcaiUtilsInsertNodeToNearestRoot.test.ts

@@ -46,7 +46,7 @@ describe('LexicalUtils#insertNodeToNearestRoot', () => {
     {
       _: 'insert into paragraph in between two text nodes',
       expectedHtml:
-        '<p><span style="white-space: pre-wrap;">Hello</span></p><test-decorator></test-decorator><p><span style="white-space: pre-wrap;">world</span></p>',
+        '<p>Hello</p><test-decorator></test-decorator><p>world</p>',
       initialHtml: '<p><span>Helloworld</span></p>',
       selectionOffset: 5, // Selection on text node after "Hello" world
       selectionPath: [0, 0],
@@ -55,13 +55,13 @@ describe('LexicalUtils#insertNodeToNearestRoot', () => {
       _: 'insert into nested list items',
       expectedHtml:
         '<ul>' +
-        '<li><span style="white-space: pre-wrap;">Before</span></li>' +
-        '<li><ul><li><span style="white-space: pre-wrap;">Hello</span></li></ul></li>' +
+        '<li>Before</li>' +
+        '<li><ul><li>Hello</li></ul></li>' +
         '</ul>' +
         '<test-decorator></test-decorator>' +
         '<ul>' +
-        '<li><ul><li><span style="white-space: pre-wrap;">world</span></li></ul></li>' +
-        '<li><span style="white-space: pre-wrap;">After</span></li>' +
+        '<li><ul><li>world</li></ul></li>' +
+        '<li>After</li>' +
         '</ul>',
       initialHtml:
         '<ul>' +
@@ -82,7 +82,7 @@ describe('LexicalUtils#insertNodeToNearestRoot', () => {
     {
       _: 'insert in the end of paragraph',
       expectedHtml:
-        '<p><span style="white-space: pre-wrap;">Hello world</span></p>' +
+        '<p>Hello world</p>' +
         '<test-decorator></test-decorator>' +
         '<p><br></p>',
       initialHtml: '<p>Hello world</p>',
@@ -94,7 +94,7 @@ describe('LexicalUtils#insertNodeToNearestRoot', () => {
       expectedHtml:
         '<p><br></p>' +
         '<test-decorator></test-decorator>' +
-        '<p><span style="white-space: pre-wrap;">Hello world</span></p>',
+        '<p>Hello world</p>',
       initialHtml: '<p>Hello world</p>',
       selectionOffset: 0, // Selection on text node after "Hello" world
       selectionPath: [0, 0],
@@ -104,8 +104,8 @@ describe('LexicalUtils#insertNodeToNearestRoot', () => {
       expectedHtml:
         '<test-decorator></test-decorator>' +
         '<test-decorator></test-decorator>' +
-        '<p><span style="white-space: pre-wrap;">Before</span></p>' +
-        '<p><span style="white-space: pre-wrap;">After</span></p>',
+        '<p>Before</p>' +
+        '<p>After</p>',
       initialHtml:
         '<test-decorator></test-decorator>' +
         '<p><span>Before</span></p>' +
@@ -116,9 +116,9 @@ describe('LexicalUtils#insertNodeToNearestRoot', () => {
     {
       _: 'insert with selection on root child',
       expectedHtml:
-        '<p><span style="white-space: pre-wrap;">Before</span></p>' +
+        '<p>Before</p>' +
         '<test-decorator></test-decorator>' +
-        '<p><span style="white-space: pre-wrap;">After</span></p>',
+        '<p>After</p>',
       initialHtml: '<p>Before</p><p>After</p>',
       selectionOffset: 1,
       selectionPath: [],
@@ -126,7 +126,7 @@ describe('LexicalUtils#insertNodeToNearestRoot', () => {
     {
       _: 'insert with selection on root end',
       expectedHtml:
-        '<p><span style="white-space: pre-wrap;">Before</span></p>' +
+        '<p>Before</p>' +
         '<test-decorator></test-decorator>',
       initialHtml: '<p>Before</p>',
       selectionOffset: 1,