Lexical: Merged custom paragraph node, removed old format/indent refs

Start of work to merge custom nodes into lexical, removing old unused
format/indent core logic while extending common block elements where
possible.

Author: ssddanbrown

resources/js/wysiwyg/lexical/core/LexicalEvents.ts

@@ -355,7 +355,6 @@ function onSelectionChange(
               lastNode instanceof ParagraphNode &&
               lastNode.getChildrenSize() === 0
             ) {
-              selection.format = lastNode.getTextFormat();
               selection.style = lastNode.getTextStyle();
             } else {
               selection.format = 0;
@@ -578,7 +577,6 @@ function onBeforeInput(event: InputEvent, editor: LexicalEditor): void {
           if ($isRangeSelection(selection)) {
             const anchorNode = selection.anchor.getNode();
             anchorNode.markDirty();
-            selection.format = anchorNode.getFormat();
             invariant(
               $isTextNode(anchorNode),
               'Anchor node must be a TextNode',
@@ -912,7 +910,6 @@ function onCompositionStart(
         // need to invoke the empty space heuristic below.
         anchor.type === 'element' ||
         !selection.isCollapsed() ||
-        node.getFormat() !== selection.format ||
         ($isTextNode(node) && node.getStyle() !== selection.style)
       ) {
         // We insert a zero width character, ready for the composition

resources/js/wysiwyg/lexical/core/LexicalMutations.ts

@@ -96,15 +96,6 @@ function shouldUpdateTextNodeFromMutation(
   targetDOM: Node,
   targetNode: TextNode,
 ): boolean {
-  if ($isRangeSelection(selection)) {
-    const anchorNode = selection.anchor.getNode();
-    if (
-      anchorNode.is(targetNode) &&
-      selection.format !== anchorNode.getFormat()
-    ) {
-      return false;
-    }
-  }
   return targetDOM.nodeType === DOM_TEXT_TYPE && targetNode.isAttached();
 }
 

resources/js/wysiwyg/lexical/core/LexicalReconciler.ts

@@ -17,7 +17,6 @@ import type {NodeKey, NodeMap} from './LexicalNode';
 import type {ElementNode} from './nodes/LexicalElementNode';
 
 import invariant from 'lexical/shared/invariant';
-import normalizeClassNames from 'lexical/shared/normalizeClassNames';
 
 import {
   $isDecoratorNode,
@@ -117,51 +116,6 @@ function setTextAlign(domStyle: CSSStyleDeclaration, value: string): void {
   domStyle.setProperty('text-align', value);
 }
 
-const DEFAULT_INDENT_VALUE = '40px';
-
-function setElementIndent(dom: HTMLElement, indent: number): void {
-  const indentClassName = activeEditorConfig.theme.indent;
-
-  if (typeof indentClassName === 'string') {
-    const elementHasClassName = dom.classList.contains(indentClassName);
-
-    if (indent > 0 && !elementHasClassName) {
-      dom.classList.add(indentClassName);
-    } else if (indent < 1 && elementHasClassName) {
-      dom.classList.remove(indentClassName);
-    }
-  }
-
-  const indentationBaseValue =
-    getComputedStyle(dom).getPropertyValue('--lexical-indent-base-value') ||
-    DEFAULT_INDENT_VALUE;
-
-  dom.style.setProperty(
-    'padding-inline-start',
-    indent === 0 ? '' : `calc(${indent} * ${indentationBaseValue})`,
-  );
-}
-
-function setElementFormat(dom: HTMLElement, format: number): void {
-  const domStyle = dom.style;
-
-  if (format === 0) {
-    setTextAlign(domStyle, '');
-  } else if (format === IS_ALIGN_LEFT) {
-    setTextAlign(domStyle, 'left');
-  } else if (format === IS_ALIGN_CENTER) {
-    setTextAlign(domStyle, 'center');
-  } else if (format === IS_ALIGN_RIGHT) {
-    setTextAlign(domStyle, 'right');
-  } else if (format === IS_ALIGN_JUSTIFY) {
-    setTextAlign(domStyle, 'justify');
-  } else if (format === IS_ALIGN_START) {
-    setTextAlign(domStyle, 'start');
-  } else if (format === IS_ALIGN_END) {
-    setTextAlign(domStyle, 'end');
-  }
-}
-
 function $createNode(
   key: NodeKey,
   parentDOM: null | HTMLElement,
@@ -185,22 +139,14 @@ function $createNode(
   }
 
   if ($isElementNode(node)) {
-    const indent = node.__indent;
     const childrenSize = node.__size;
 
-    if (indent !== 0) {
-      setElementIndent(dom, indent);
-    }
     if (childrenSize !== 0) {
       const endIndex = childrenSize - 1;
       const children = createChildrenArray(node, activeNextNodeMap);
       $createChildren(children, node, 0, endIndex, dom, null);
     }
-    const format = node.__format;
 
-    if (format !== 0) {
-      setElementFormat(dom, format);
-    }
     if (!node.isInline()) {
       reconcileElementTerminatingLineBreak(null, node, dom);
     }
@@ -349,10 +295,8 @@ function reconcileParagraphFormat(element: ElementNode): void {
   if (
     $isParagraphNode(element) &&
     subTreeTextFormat != null &&
-    subTreeTextFormat !== element.__textFormat &&
     !activeEditorStateReadOnly
   ) {
-    element.setTextFormat(subTreeTextFormat);
     element.setTextStyle(subTreeTextStyle);
   }
 }
@@ -563,17 +507,6 @@ function $reconcileNode(
 
   if ($isElementNode(prevNode) && $isElementNode(nextNode)) {
     // Reconcile element children
-    const nextIndent = nextNode.__indent;
-
-    if (nextIndent !== prevNode.__indent) {
-      setElementIndent(dom, nextIndent);
-    }
-
-    const nextFormat = nextNode.__format;
-
-    if (nextFormat !== prevNode.__format) {
-      setElementFormat(dom, nextFormat);
-    }
     if (isDirty) {
       $reconcileChildrenWithDirection(prevNode, nextNode, dom);
       if (!$isRootNode(nextNode) && !nextNode.isInline()) {

resources/js/wysiwyg/lexical/core/__tests__/utils/index.ts

@@ -129,8 +129,6 @@ export class TestElementNode extends ElementNode {
     serializedNode: SerializedTestElementNode,
   ): TestInlineElementNode {
     const node = $createTestInlineElementNode();
-    node.setFormat(serializedNode.format);
-    node.setIndent(serializedNode.indent);
     node.setDirection(serializedNode.direction);
     return node;
   }
@@ -195,8 +193,6 @@ export class TestInlineElementNode extends ElementNode {
     serializedNode: SerializedTestInlineElementNode,
   ): TestInlineElementNode {
     const node = $createTestInlineElementNode();
-    node.setFormat(serializedNode.format);
-    node.setIndent(serializedNode.indent);
     node.setDirection(serializedNode.direction);
     return node;
   }
@@ -241,8 +237,6 @@ export class TestShadowRootNode extends ElementNode {
     serializedNode: SerializedTestShadowRootNode,
   ): TestShadowRootNode {
     const node = $createTestShadowRootNode();
-    node.setFormat(serializedNode.format);
-    node.setIndent(serializedNode.indent);
     node.setDirection(serializedNode.direction);
     return node;
   }
@@ -322,8 +316,6 @@ export class TestExcludeFromCopyElementNode extends ElementNode {
     serializedNode: SerializedTestExcludeFromCopyElementNode,
   ): TestExcludeFromCopyElementNode {
     const node = $createTestExcludeFromCopyElementNode();
-    node.setFormat(serializedNode.format);
-    node.setIndent(serializedNode.indent);
     node.setDirection(serializedNode.direction);
     return node;
   }

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

@@ -0,0 +1,54 @@
+import {ElementNode} from "./LexicalElementNode";
+import {CommonBlockAlignment, SerializedCommonBlockNode} from "../../../nodes/_common";
+
+
+export class CommonBlockNode extends ElementNode {
+    __id: string = '';
+    __alignment: CommonBlockAlignment = '';
+    __inset: number = 0;
+
+    setId(id: string) {
+        const self = this.getWritable();
+        self.__id = id;
+    }
+
+    getId(): string {
+        const self = this.getLatest();
+        return self.__id;
+    }
+
+    setAlignment(alignment: CommonBlockAlignment) {
+        const self = this.getWritable();
+        self.__alignment = alignment;
+    }
+
+    getAlignment(): CommonBlockAlignment {
+        const self = this.getLatest();
+        return self.__alignment;
+    }
+
+    setInset(size: number) {
+        const self = this.getWritable();
+        self.__inset = size;
+    }
+
+    getInset(): number {
+        const self = this.getLatest();
+        return self.__inset;
+    }
+
+    exportJSON(): SerializedCommonBlockNode {
+        return {
+            ...super.exportJSON(),
+            id: this.__id,
+            alignment: this.__alignment,
+            inset: this.__inset,
+        };
+    }
+}
+
+export function copyCommonBlockProperties(from: CommonBlockNode, to: CommonBlockNode): void {
+    to.__id = from.__id;
+    to.__alignment = from.__alignment;
+    to.__inset = from.__inset;
+}

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

@@ -42,8 +42,6 @@ export type SerializedElementNode<
   {
     children: Array<T>;
     direction: 'ltr' | 'rtl' | null;
-    format: ElementFormatType;
-    indent: number;
   },
   SerializedLexicalNode
 >;
@@ -74,22 +72,16 @@ export class ElementNode extends LexicalNode {
   /** @internal */
   __size: number;
   /** @internal */
-  __format: number;
-  /** @internal */
   __style: string;
   /** @internal */
-  __indent: number;
-  /** @internal */
   __dir: 'ltr' | 'rtl' | null;
 
   constructor(key?: NodeKey) {
     super(key);
     this.__first = null;
     this.__last = null;
     this.__size = 0;
-    this.__format = 0;
     this.__style = '';
-    this.__indent = 0;
     this.__dir = null;
   }
 
@@ -98,28 +90,14 @@ export class ElementNode extends LexicalNode {
     this.__first = prevNode.__first;
     this.__last = prevNode.__last;
     this.__size = prevNode.__size;
-    this.__indent = prevNode.__indent;
-    this.__format = prevNode.__format;
     this.__style = prevNode.__style;
     this.__dir = prevNode.__dir;
   }
 
-  getFormat(): number {
-    const self = this.getLatest();
-    return self.__format;
-  }
-  getFormatType(): ElementFormatType {
-    const format = this.getFormat();
-    return ELEMENT_FORMAT_TO_TYPE[format] || '';
-  }
   getStyle(): string {
     const self = this.getLatest();
     return self.__style;
   }
-  getIndent(): number {
-    const self = this.getLatest();
-    return self.__indent;
-  }
   getChildren<T extends LexicalNode>(): Array<T> {
     const children: Array<T> = [];
     let child: T | null = this.getFirstChild();
@@ -301,13 +279,6 @@ export class ElementNode extends LexicalNode {
     const self = this.getLatest();
     return self.__dir;
   }
-  hasFormat(type: ElementFormatType): boolean {
-    if (type !== '') {
-      const formatFlag = ELEMENT_TYPE_TO_FORMAT[type];
-      return (this.getFormat() & formatFlag) !== 0;
-    }
-    return false;
-  }
 
   // Mutators
 
@@ -378,21 +349,11 @@ export class ElementNode extends LexicalNode {
     self.__dir = direction;
     return self;
   }
-  setFormat(type: ElementFormatType): this {
-    const self = this.getWritable();
-    self.__format = type !== '' ? ELEMENT_TYPE_TO_FORMAT[type] : 0;
-    return this;
-  }
   setStyle(style: string): this {
     const self = this.getWritable();
     self.__style = style || '';
     return this;
   }
-  setIndent(indentLevel: number): this {
-    const self = this.getWritable();
-    self.__indent = indentLevel;
-    return this;
-  }
   splice(
     start: number,
     deleteCount: number,
@@ -528,8 +489,6 @@ export class ElementNode extends LexicalNode {
     return {
       children: [],
       direction: this.getDirection(),
-      format: this.getFormatType(),
-      indent: this.getIndent(),
       type: 'element',
       version: 1,
     };