[lexical-list][lexical-react] Refactor: Create registerList Function …

…Separate from React Shared Utils (#6560) Co-authored-by: Bob Ippolito <bob@redivi.com>
facebook · Sep 3, 2024 · 45991dc · 45991dc
1 parent f07f0d6
commit 45991dc
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 51 deletions.
diff --git a/packages/lexical-list/src/index.ts b/packages/lexical-list/src/index.ts
@@ -8,9 +8,14 @@
 
 import type {SerializedListItemNode} from './LexicalListItemNode';
 import type {ListType, SerializedListNode} from './LexicalListNode';
-import type {LexicalCommand} from 'lexical';
+import type {LexicalCommand, LexicalEditor} from 'lexical';
 
-import {createCommand} from 'lexical';
+import {mergeRegister} from '@lexical/utils';
+import {
+  COMMAND_PRIORITY_LOW,
+  createCommand,
+  INSERT_PARAGRAPH_COMMAND,
+} from 'lexical';
 
 import {$handleListInsertParagraph, insertList, removeList} from './formatList';
 import {
@@ -48,3 +53,46 @@ export const INSERT_CHECK_LIST_COMMAND: LexicalCommand<void> = createCommand(
 export const REMOVE_LIST_COMMAND: LexicalCommand<void> = createCommand(
   'REMOVE_LIST_COMMAND',
 );
+
+export function registerList(editor: LexicalEditor): () => void {
+  const removeListener = mergeRegister(
+    editor.registerCommand(
+      INSERT_ORDERED_LIST_COMMAND,
+      () => {
+        insertList(editor, 'number');
+        return true;
+      },
+      COMMAND_PRIORITY_LOW,
+    ),
+    editor.registerCommand(
+      INSERT_UNORDERED_LIST_COMMAND,
+      () => {
+        insertList(editor, 'bullet');
+        return true;
+      },
+      COMMAND_PRIORITY_LOW,
+    ),
+    editor.registerCommand(
+      REMOVE_LIST_COMMAND,
+      () => {
+        removeList(editor);
+        return true;
+      },
+      COMMAND_PRIORITY_LOW,
+    ),
+    editor.registerCommand(
+      INSERT_PARAGRAPH_COMMAND,
+      () => {
+        const hasHandledInsertParagraph = $handleListInsertParagraph();
+
+        if (hasHandledInsertParagraph) {
+          return true;
+        }
+
+        return false;
+      },
+      COMMAND_PRIORITY_LOW,
+    ),
+  );
+  return removeListener;
+}
diff --git a/packages/lexical-react/src/shared/useList.ts b/packages/lexical-react/src/shared/useList.ts
@@ -8,58 +8,11 @@
 
 import type {LexicalEditor} from 'lexical';
 
-import {
-  $handleListInsertParagraph,
-  INSERT_ORDERED_LIST_COMMAND,
-  INSERT_UNORDERED_LIST_COMMAND,
-  insertList,
-  REMOVE_LIST_COMMAND,
-  removeList,
-} from '@lexical/list';
-import {mergeRegister} from '@lexical/utils';
-import {COMMAND_PRIORITY_LOW, INSERT_PARAGRAPH_COMMAND} from 'lexical';
+import {registerList} from '@lexical/list';
 import {useEffect} from 'react';
 
 export function useList(editor: LexicalEditor): void {
   useEffect(() => {
-    return mergeRegister(
-      editor.registerCommand(
-        INSERT_ORDERED_LIST_COMMAND,
-        () => {
-          insertList(editor, 'number');
-          return true;
-        },
-        COMMAND_PRIORITY_LOW,
-      ),
-      editor.registerCommand(
-        INSERT_UNORDERED_LIST_COMMAND,
-        () => {
-          insertList(editor, 'bullet');
-          return true;
-        },
-        COMMAND_PRIORITY_LOW,
-      ),
-      editor.registerCommand(
-        REMOVE_LIST_COMMAND,
-        () => {
-          removeList(editor);
-          return true;
-        },
-        COMMAND_PRIORITY_LOW,
-      ),
-      editor.registerCommand(
-        INSERT_PARAGRAPH_COMMAND,
-        () => {
-          const hasHandledInsertParagraph = $handleListInsertParagraph();
-
-          if (hasHandledInsertParagraph) {
-            return true;
-          }
-
-          return false;
-        },
-        COMMAND_PRIORITY_LOW,
-      ),
-    );
+    return registerList(editor);
   }, [editor]);
 }