Lexical: Source code input changes

- Increased default source code view size.
- Updated HTML generation to output each top-level block on its own
  line.

Author: ssddanbrown

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

@@ -146,7 +146,7 @@ describe('HTML', () => {
     });
 
     expect(html).toBe(
-      '<p>Hello</p><p>World</p>',
+      '<p>Hello</p>\n<p>World</p>',
     );
   });
 

resources/js/wysiwyg/lexical/html/index.ts

@@ -85,7 +85,18 @@ export function $generateHtmlFromNodes(
     $appendNodesToHTML(editor, topLevelNode, container, selection);
   }
 
-  return container.innerHTML;
+  const nodeCode = [];
+  for (const node of container.childNodes) {
+    if ("outerHTML" in node) {
+      nodeCode.push(node.outerHTML)
+    } else {
+      const wrap = document.createElement('div');
+      wrap.appendChild(node.cloneNode(true));
+      nodeCode.push(wrap.innerHTML);
+    }
+  }
+
+  return nodeCode.join('\n');
 }
 
 function $appendNodesToHTML(

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

@@ -38,31 +38,31 @@ describe('LexicalUtils#splitNode', () => {
     {
       _: 'split paragraph in between two text nodes',
       expectedHtml:
-        '<p>Hello</p><p>world</p>',
+        '<p>Hello</p>\n<p>world</p>',
       initialHtml: '<p><span>Hello</span><span>world</span></p>',
       splitOffset: 1,
       splitPath: [0],
     },
     {
       _: 'split paragraph before the first text node',
       expectedHtml:
-        '<p><br></p><p>Helloworld</p>',
+        '<p><br></p>\n<p>Helloworld</p>',
       initialHtml: '<p><span>Hello</span><span>world</span></p>',
       splitOffset: 0,
       splitPath: [0],
     },
     {
       _: 'split paragraph after the last text node',
       expectedHtml:
-        '<p>Helloworld</p><p><br></p>',
+        '<p>Helloworld</p>\n<p><br></p>',
       initialHtml: '<p><span>Hello</span><span>world</span></p>',
       splitOffset: 2, // Any offset that is higher than children size
       splitPath: [0],
     },
     {
       _: 'split list items between two text nodes',
       expectedHtml:
-        '<ul><li>Hello</li></ul>' +
+        '<ul><li>Hello</li></ul>\n' +
         '<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
@@ -71,7 +71,7 @@ describe('LexicalUtils#splitNode', () => {
     {
       _: 'split list items before the first text node',
       expectedHtml:
-        '<ul><li></li></ul>' +
+        '<ul><li></li></ul>\n' +
         '<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
@@ -83,7 +83,7 @@ describe('LexicalUtils#splitNode', () => {
         '<ul>' +
         '<li>Before</li>' +
         '<li style="list-style: none;"><ul><li>Hello</li></ul></li>' +
-        '</ul>' +
+        '</ul>\n' +
         '<ul>' +
         '<li style="list-style: none;"><ul><li>world</li></ul></li>' +
         '<li>After</li>' +

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>Hello</p><test-decorator></test-decorator><p>world</p>',
+        '<p>Hello</p>\n<test-decorator></test-decorator>\n<p>world</p>',
       initialHtml: '<p><span>Helloworld</span></p>',
       selectionOffset: 5, // Selection on text node after "Hello" world
       selectionPath: [0, 0],
@@ -57,8 +57,8 @@ describe('LexicalUtils#insertNodeToNearestRoot', () => {
         '<ul>' +
         '<li>Before</li>' +
         '<li style="list-style: none;"><ul><li>Hello</li></ul></li>' +
-        '</ul>' +
-        '<test-decorator></test-decorator>' +
+        '</ul>\n' +
+        '<test-decorator></test-decorator>\n' +
         '<ul>' +
         '<li style="list-style: none;"><ul><li>world</li></ul></li>' +
         '<li>After</li>' +
@@ -74,16 +74,16 @@ describe('LexicalUtils#insertNodeToNearestRoot', () => {
     },
     {
       _: 'insert into empty paragraph',
-      expectedHtml: '<p><br></p><test-decorator></test-decorator><p><br></p>',
+      expectedHtml: '<p><br></p>\n<test-decorator></test-decorator>\n<p><br></p>',
       initialHtml: '<p></p>',
       selectionOffset: 0, // Selection on text node after "Hello" world
       selectionPath: [0],
     },
     {
       _: 'insert in the end of paragraph',
       expectedHtml:
-        '<p>Hello world</p>' +
-        '<test-decorator></test-decorator>' +
+        '<p>Hello world</p>\n' +
+        '<test-decorator></test-decorator>\n' +
         '<p><br></p>',
       initialHtml: '<p>Hello world</p>',
       selectionOffset: 12, // Selection on text node after "Hello" world
@@ -92,8 +92,8 @@ describe('LexicalUtils#insertNodeToNearestRoot', () => {
     {
       _: 'insert in the beginning of paragraph',
       expectedHtml:
-        '<p><br></p>' +
-        '<test-decorator></test-decorator>' +
+        '<p><br></p>\n' +
+        '<test-decorator></test-decorator>\n' +
         '<p>Hello world</p>',
       initialHtml: '<p>Hello world</p>',
       selectionOffset: 0, // Selection on text node after "Hello" world
@@ -102,9 +102,9 @@ describe('LexicalUtils#insertNodeToNearestRoot', () => {
     {
       _: 'insert with selection on root start',
       expectedHtml:
-        '<test-decorator></test-decorator>' +
-        '<test-decorator></test-decorator>' +
-        '<p>Before</p>' +
+        '<test-decorator></test-decorator>\n' +
+        '<test-decorator></test-decorator>\n' +
+        '<p>Before</p>\n' +
         '<p>After</p>',
       initialHtml:
         '<test-decorator></test-decorator>' +
@@ -116,8 +116,8 @@ describe('LexicalUtils#insertNodeToNearestRoot', () => {
     {
       _: 'insert with selection on root child',
       expectedHtml:
-        '<p>Before</p>' +
-        '<test-decorator></test-decorator>' +
+        '<p>Before</p>\n' +
+        '<test-decorator></test-decorator>\n' +
         '<p>After</p>',
       initialHtml: '<p>Before</p><p>After</p>',
       selectionOffset: 1,
@@ -126,7 +126,7 @@ describe('LexicalUtils#insertNodeToNearestRoot', () => {
     {
       _: 'insert with selection on root end',
       expectedHtml:
-        '<p>Before</p>' +
+        '<p>Before</p>\n' +
         '<test-decorator></test-decorator>',
       initialHtml: '<p>Before</p>',
       selectionOffset: 1,

resources/sass/_editor.scss

@@ -681,6 +681,14 @@ textarea.editor-form-field-input {
   }
 }
 
+// Specific field styles
+textarea.editor-form-field-input[name="source"] {
+  width: 1000px;
+  height: 600px;
+  max-height: 60vh;
+  max-width: 80vw;
+}
+
 // Editor theme styles
 .editor-theme-bold {
   font-weight: bold;