Lexical: Merged list nodes

Author: ssddanbrown

resources/js/wysiwyg/lexical/list/LexicalListItemNode.ts

@@ -13,7 +13,6 @@ import type {
   DOMConversionOutput,
   DOMExportOutput,
   EditorConfig,
-  EditorThemeClasses,
   LexicalNode,
   NodeKey,
   ParagraphNode,
@@ -22,10 +21,6 @@ import type {
   Spread,
 } from 'lexical';
 
-import {
-  addClassNamesToElement,
-  removeClassNamesFromElement,
-} from '@lexical/utils';
 import {
   $applyNodeReplacement,
   $createParagraphNode,
@@ -36,11 +31,11 @@ import {
   LexicalEditor,
 } from 'lexical';
 import invariant from 'lexical/shared/invariant';
-import normalizeClassNames from 'lexical/shared/normalizeClassNames';
 
 import {$createListNode, $isListNode} from './';
-import {$handleIndent, $handleOutdent, mergeLists} from './formatList';
+import {mergeLists} from './formatList';
 import {isNestedListNode} from './utils';
+import {el} from "../../utils/dom";
 
 export type SerializedListItemNode = Spread<
   {
@@ -74,11 +69,17 @@ export class ListItemNode extends ElementNode {
   createDOM(config: EditorConfig): HTMLElement {
     const element = document.createElement('li');
     const parent = this.getParent();
+
     if ($isListNode(parent) && parent.getListType() === 'check') {
-      updateListItemChecked(element, this, null, parent);
+      updateListItemChecked(element, this);
     }
+
     element.value = this.__value;
-    $setListItemThemeClassNames(element, config.theme, this);
+
+    if ($hasNestedListWithoutLabel(this)) {
+      element.style.listStyle = 'none';
+    }
+
     return element;
   }
 
@@ -89,11 +90,12 @@ export class ListItemNode extends ElementNode {
   ): boolean {
     const parent = this.getParent();
     if ($isListNode(parent) && parent.getListType() === 'check') {
-      updateListItemChecked(dom, this, prevNode, parent);
+      updateListItemChecked(dom, this);
     }
+
+    dom.style.listStyle = $hasNestedListWithoutLabel(this) ? 'none' : '';
     // @ts-expect-error - this is always HTMLListItemElement
     dom.value = this.__value;
-    $setListItemThemeClassNames(dom, config.theme, this);
 
     return false;
   }
@@ -132,6 +134,20 @@ export class ListItemNode extends ElementNode {
 
   exportDOM(editor: LexicalEditor): DOMExportOutput {
     const element = this.createDOM(editor._config);
+
+    if (element.classList.contains('task-list-item')) {
+      const input = el('input', {
+        type: 'checkbox',
+        disabled: 'disabled',
+      });
+      if (element.hasAttribute('checked')) {
+        input.setAttribute('checked', 'checked');
+        element.removeAttribute('checked');
+      }
+
+      element.prepend(input);
+    }
+
     return {
       element,
     };
@@ -390,89 +406,33 @@ export class ListItemNode extends ElementNode {
   }
 }
 
-function $setListItemThemeClassNames(
-  dom: HTMLElement,
-  editorThemeClasses: EditorThemeClasses,
-  node: ListItemNode,
-): void {
-  const classesToAdd = [];
-  const classesToRemove = [];
-  const listTheme = editorThemeClasses.list;
-  const listItemClassName = listTheme ? listTheme.listitem : undefined;
-  let nestedListItemClassName;
-
-  if (listTheme && listTheme.nested) {
-    nestedListItemClassName = listTheme.nested.listitem;
-  }
-
-  if (listItemClassName !== undefined) {
-    classesToAdd.push(...normalizeClassNames(listItemClassName));
-  }
-
-  if (listTheme) {
-    const parentNode = node.getParent();
-    const isCheckList =
-      $isListNode(parentNode) && parentNode.getListType() === 'check';
-    const checked = node.getChecked();
-
-    if (!isCheckList || checked) {
-      classesToRemove.push(listTheme.listitemUnchecked);
-    }
-
-    if (!isCheckList || !checked) {
-      classesToRemove.push(listTheme.listitemChecked);
-    }
+function $hasNestedListWithoutLabel(node: ListItemNode): boolean {
+  const children = node.getChildren();
+  let hasLabel = false;
+  let hasNestedList = false;
 
-    if (isCheckList) {
-      classesToAdd.push(
-        checked ? listTheme.listitemChecked : listTheme.listitemUnchecked,
-      );
+  for (const child of children) {
+    if ($isListNode(child)) {
+      hasNestedList = true;
+    } else if (child.getTextContent().trim().length > 0) {
+      hasLabel = true;
     }
   }
 
-  if (nestedListItemClassName !== undefined) {
-    const nestedListItemClasses = normalizeClassNames(nestedListItemClassName);
-
-    if (node.getChildren().some((child) => $isListNode(child))) {
-      classesToAdd.push(...nestedListItemClasses);
-    } else {
-      classesToRemove.push(...nestedListItemClasses);
-    }
-  }
-
-  if (classesToRemove.length > 0) {
-    removeClassNamesFromElement(dom, ...classesToRemove);
-  }
-
-  if (classesToAdd.length > 0) {
-    addClassNamesToElement(dom, ...classesToAdd);
-  }
+  return hasNestedList && !hasLabel;
 }
 
 function updateListItemChecked(
   dom: HTMLElement,
   listItemNode: ListItemNode,
-  prevListItemNode: ListItemNode | null,
-  listNode: ListNode,
 ): void {
-  // Only add attributes for leaf list items
-  if ($isListNode(listItemNode.getFirstChild())) {
-    dom.removeAttribute('role');
-    dom.removeAttribute('tabIndex');
-    dom.removeAttribute('aria-checked');
+  // Only set task list attrs for leaf list items
+  const shouldBeTaskItem = !$isListNode(listItemNode.getFirstChild());
+  dom.classList.toggle('task-list-item', shouldBeTaskItem);
+  if (listItemNode.__checked) {
+    dom.setAttribute('checked', 'checked');
   } else {
-    dom.setAttribute('role', 'checkbox');
-    dom.setAttribute('tabIndex', '-1');
-
-    if (
-      !prevListItemNode ||
-      listItemNode.__checked !== prevListItemNode.__checked
-    ) {
-      dom.setAttribute(
-        'aria-checked',
-        listItemNode.getChecked() ? 'true' : 'false',
-      );
-    }
+    dom.removeAttribute('checked');
   }
 }
 

resources/js/wysiwyg/lexical/list/LexicalListNode.ts

@@ -36,9 +36,11 @@ import {
   updateChildrenListItemValue,
 } from './formatList';
 import {$getListDepth, $wrapInListItem} from './utils';
+import {extractDirectionFromElement} from "../../nodes/_common";
 
 export type SerializedListNode = Spread<
   {
+    id: string;
     listType: ListType;
     start: number;
     tag: ListNodeTagType;
@@ -58,15 +60,18 @@ export class ListNode extends ElementNode {
   __start: number;
   /** @internal */
   __listType: ListType;
+  /** @internal */
+  __id: string = '';
 
   static getType(): string {
     return 'list';
   }
 
   static clone(node: ListNode): ListNode {
-    const listType = node.__listType || TAG_TO_LIST_TYPE[node.__tag];
-
-    return new ListNode(listType, node.__start, node.__key);
+    const newNode = new ListNode(node.__listType, node.__start, node.__key);
+    newNode.__id = node.__id;
+    newNode.__dir = node.__dir;
+    return newNode;
   }
 
   constructor(listType: ListType, start: number, key?: NodeKey) {
@@ -81,6 +86,16 @@ export class ListNode extends ElementNode {
     return this.__tag;
   }
 
+  setId(id: string) {
+    const self = this.getWritable();
+    self.__id = id;
+  }
+
+  getId(): string {
+    const self = this.getLatest();
+    return self.__id;
+  }
+
   setListType(type: ListType): void {
     const writable = this.getWritable();
     writable.__listType = type;
@@ -108,6 +123,14 @@ export class ListNode extends ElementNode {
     dom.__lexicalListType = this.__listType;
     $setListThemeClassNames(dom, config.theme, this);
 
+    if (this.__id) {
+      dom.setAttribute('id', this.__id);
+    }
+
+    if (this.__dir) {
+      dom.setAttribute('dir', this.__dir);
+    }
+
     return dom;
   }
 
@@ -116,7 +139,11 @@ export class ListNode extends ElementNode {
     dom: HTMLElement,
     config: EditorConfig,
   ): boolean {
-    if (prevNode.__tag !== this.__tag) {
+    if (
+        prevNode.__tag !== this.__tag
+        || prevNode.__dir !== this.__dir
+        || prevNode.__id !== this.__id
+    ) {
       return true;
     }
 
@@ -148,8 +175,7 @@ export class ListNode extends ElementNode {
 
   static importJSON(serializedNode: SerializedListNode): ListNode {
     const node = $createListNode(serializedNode.listType, serializedNode.start);
-    node.setFormat(serializedNode.format);
-    node.setIndent(serializedNode.indent);
+    node.setId(serializedNode.id);
     node.setDirection(serializedNode.direction);
     return node;
   }
@@ -177,6 +203,7 @@ export class ListNode extends ElementNode {
       tag: this.getTag(),
       type: 'list',
       version: 1,
+      id: this.__id,
     };
   }
 
@@ -277,28 +304,21 @@ function $setListThemeClassNames(
 }
 
 /*
- * This function normalizes the children of a ListNode after the conversion from HTML,
- * ensuring that they are all ListItemNodes and contain either a single nested ListNode
- * or some other inline content.
+ * This function is a custom normalization function to allow nested lists within list item elements.
+ * Original taken from https://github.com/facebook/lexical/blob/6e10210fd1e113ccfafdc999b1d896733c5c5bea/packages/lexical-list/src/LexicalListNode.ts#L284-L303
+ * With modifications made.
  */
 function $normalizeChildren(nodes: Array<LexicalNode>): Array<ListItemNode> {
   const normalizedListItems: Array<ListItemNode> = [];
-  for (let i = 0; i < nodes.length; i++) {
-    const node = nodes[i];
+
+  for (const node of nodes) {
     if ($isListItemNode(node)) {
       normalizedListItems.push(node);
-      const children = node.getChildren();
-      if (children.length > 1) {
-        children.forEach((child) => {
-          if ($isListNode(child)) {
-            normalizedListItems.push($wrapInListItem(child));
-          }
-        });
-      }
     } else {
       normalizedListItems.push($wrapInListItem(node));
     }
   }
+
   return normalizedListItems;
 }
 
@@ -334,6 +354,14 @@ function $convertListNode(domNode: HTMLElement): DOMConversionOutput {
     }
   }
 
+  if (domNode.id && node) {
+    node.setId(domNode.id);
+  }
+
+  if (domNode.dir && node) {
+    node.setDirection(extractDirectionFromElement(domNode));
+  }
+
   return {
     after: $normalizeChildren,
     node,