Using Listeners

facebook · Jan 12, 2025 · af615a0 · af615a0
1 parent 7080a79
commit af615a0
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 5 deletions.
diff --git a/packages/lexical-list/src/LexicalListItemNode.ts b/packages/lexical-list/src/LexicalListItemNode.ts
@@ -95,9 +95,6 @@ export class ListItemNode extends ElementNode {
     // @ts-expect-error - this is always HTMLListItemElement
     dom.value = this.__value;
     $setListItemThemeClassNames(dom, config.theme, this);
-    if (dom.childNodes.length > 0) {
-      dom.style.color = dom.lastChild.style.color;
-    }
     return false;
   }
 

diff --git a/packages/lexical-list/src/index.ts b/packages/lexical-list/src/index.ts
@@ -8,13 +8,17 @@
 
 import type {SerializedListItemNode} from './LexicalListItemNode';
 import type {ListType, SerializedListNode} from './LexicalListNode';
-import type {LexicalCommand, LexicalEditor} from 'lexical';
+import type {LexicalCommand, LexicalEditor, LexicalNode} from 'lexical';
 
-import {mergeRegister} from '@lexical/utils';
+import {$findMatchingParent, mergeRegister} from '@lexical/utils';
 import {
+  $getNodeByKey,
+  $getSelection,
+  $isRangeSelection,
   COMMAND_PRIORITY_LOW,
   createCommand,
   INSERT_PARAGRAPH_COMMAND,
+  TextNode,
 } from 'lexical';
 
 import {
@@ -97,6 +101,74 @@ export function registerList(editor: LexicalEditor): () => void {
       },
       COMMAND_PRIORITY_LOW,
     ),
+    editor.registerMutationListener(
+      ListItemNode,
+      (mutations) => {
+        editor.update(() => {
+          for (const [key, type] of mutations) {
+            if (type === 'created') {
+              const listItemElement = editor.getElementByKey(key);
+              if (listItemElement !== null) {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                  listItemElement.setAttribute('style', selection.style || '');
+                }
+              }
+            }
+            if (type === 'updated') {
+              const node = $getNodeByKey<ListItemNode>(key);
+              const listItemElement = editor.getElementByKey(key);
+              if (node !== null) {
+                const firstChild = node.getFirstChild<LexicalNode>();
+                if (firstChild) {
+                  const textElement = editor.getElementByKey(
+                    firstChild.getKey(),
+                  );
+                  if (listItemElement && textElement) {
+                    listItemElement.setAttribute(
+                      'style',
+                      textElement.style.cssText,
+                    );
+                  }
+                }
+              }
+            }
+          }
+        });
+      },
+      {skipInitialization: false},
+    ),
+    editor.registerMutationListener(
+      TextNode,
+      (mutations) => {
+        editor.update(() => {
+          for (const [key, type] of mutations) {
+            if (type === 'updated') {
+              const node = $getNodeByKey<ListItemNode>(key);
+              if (node) {
+                const listItemParentNode = $findMatchingParent(
+                  node,
+                  $isListItemNode,
+                );
+                if (listItemParentNode) {
+                  const textElement = editor.getElementByKey(key);
+                  const listItemElement = editor.getElementByKey(
+                    listItemParentNode.getKey(),
+                  );
+                  if (listItemElement && textElement) {
+                    listItemElement.setAttribute(
+                      'style',
+                      textElement.style.cssText,
+                    );
+                  }
+                }
+              }
+            }
+          }
+        });
+      },
+      {skipInitialization: false},
+    ),
   );
   return removeListener;
 }