Move withSubscriptions to utils (facebook#1565)

* Move withSubscriptions to utils * Fix tests
yuanyan · Apr 9, 2022 · cdb5178 · cdb5178
1 parent 1616879
commit cdb5178
Show file tree

Hide file tree

Showing 28 changed files with 88 additions and 355 deletions.
diff --git a/.flowconfig b/.flowconfig
@@ -55,7 +55,6 @@ module.name_mapper='^@lexical/react/useLexicalIsTextContentEmpty' -> '<PROJECT_R
 module.name_mapper='^@lexical/react/useLexicalDecoratorMap' -> '<PROJECT_ROOT>/packages/lexical-react/flow/useLexicalDecoratorMap.js.flow'
 module.name_mapper='^@lexical/react/useLexicalNodeSelection' -> '<PROJECT_ROOT>/packages/lexical-react/flow/useLexicalNodeSelection.js.flow'
 module.name_mapper='^@lexical/react/useLexicalTextEntity' -> '<PROJECT_ROOT>/packages/lexical-react/flow/useLexicalTextEntity.js.flow'
-module.name_mapper='^@lexical/react/withSubscriptions' -> '<PROJECT_ROOT>/packages/lexical-react/flow/withSubscriptions.js.flow'
 
 # Composer Plugins
 module.name_mapper='^@lexical/react/LexicalPlainTextPlugin' -> '<PROJECT_ROOT>/packages/lexical-react/flow/LexicalPlainTextPlugin.js.flow'

diff --git a/jest.config.js b/jest.config.js
@@ -61,8 +61,6 @@ module.exports = {
           '<rootDir>/packages/lexical-react/src/useLexicalDecorators.js',
         '^@lexical/react/useLexicalEditor$':
           '<rootDir>/packages/lexical-react/src/useLexicalEditor.js',
-        '^@lexical/react/withSubscriptions$':
-          '<rootDir>/packages/lexical-react/src/withSubscriptions.js',
         '^@lexical/rich-text$':
           '<rootDir>/packages/lexical-rich-text/src/index.js',
         '^@lexical/selection$':

diff --git a/packages/lexical-code/src/index.js b/packages/lexical-code/src/index.js
@@ -36,6 +36,7 @@ import type {
 import {
   addClassNamesToElement,
   removeClassNamesFromElement,
+  mergeRegister,
 } from '@lexical/utils';
 import {
   $createLineBreakNode,
@@ -732,16 +733,14 @@ function handleShiftLines(
   return true;
 }
 
-export function registerCodeHighlighting(
-  editor: LexicalEditor,
-): Array<() => void> {
+export function registerCodeHighlighting(editor: LexicalEditor): () => void {
   if (!editor.hasNodes([CodeNode, CodeHighlightNode])) {
     throw new Error(
       'CodeHighlightPlugin: CodeNode or CodeHighlightNode not registered on editor',
     );
   }
 
-  return [
+  return mergeRegister(
     editor.addNodeTransform(CodeNode, (node) =>
       codeNodeTransform(node, editor),
     ),
@@ -771,5 +770,5 @@ export function registerCodeHighlighting(
       (payload): boolean => handleShiftLines('keyArrowDown', payload),
       1,
     ),
-  ];
+  );
 }
diff --git a/packages/lexical-history/package.json b/packages/lexical-history/package.json
@@ -17,6 +17,9 @@
   "peerDependencies": {
     "lexical": "0.1.16"
   },
+  "dependencies": {
+    "@lexical/utils": "0.1.16"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/facebook/lexical",

diff --git a/packages/lexical-history/src/index.js b/packages/lexical-history/src/index.js
@@ -19,7 +19,7 @@ import type {
   RangeSelection,
 } from 'lexical';
 
-import withSubscriptions from '@lexical/react/withSubscriptions';
+import {mergeRegister} from '@lexical/utils';
 import {
   $getSelection,
   $isRangeSelection,
@@ -363,7 +363,7 @@ export function registerHistory(
     };
   };
 
-  const unregisterCommandListener = withSubscriptions(
+  const unregisterCommandListener = mergeRegister(
     editor.registerCommandListener(
       'undo',
       () => {

diff --git a/packages/lexical-plain-text/package.json b/packages/lexical-plain-text/package.json
@@ -15,6 +15,7 @@
   "main": "LexicalPlainText.js",
   "peerDependencies": {
     "lexical": "0.1.16",
+    "@lexical/utils": "0.1.16",
     "@lexical/selection": "0.1.16",
     "@lexical/clipboard": "0.1.16"
   },

diff --git a/packages/lexical-plain-text/src/index.js b/packages/lexical-plain-text/src/index.js
@@ -13,11 +13,11 @@ import {
   $insertDataTransferForPlainText,
   getHtmlContent,
 } from '@lexical/clipboard';
-import withSubscriptions from '@lexical/react/withSubscriptions';
 import {
   $moveCharacter,
   $shouldOverrideDefaultCharacterSelection,
 } from '@lexical/selection';
+import {mergeRegister} from '@lexical/utils';
 import {
   $createParagraphNode,
   $getRoot,
@@ -127,7 +127,7 @@ export function registerPlainText(
   editor: LexicalEditor,
   initialEditorState?: InitialEditorStateType,
 ): () => void {
-  const removeListener = withSubscriptions(
+  const removeListener = mergeRegister(
     editor.registerCommandListener(
       'deleteCharacter',
       (payload) => {

diff --git a/packages/lexical-playground/src/nodes/EquationNode.jsx b/packages/lexical-playground/src/nodes/EquationNode.jsx
@@ -16,7 +16,7 @@ import type {
 } from 'lexical';
 
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import withSubscriptions from '@lexical/react/withSubscriptions';
+import {mergeRegister} from '@lexical/utils';
 import {$getNodeByKey, DecoratorNode} from 'lexical';
 import * as React from 'react';
 import {useCallback, useEffect, useRef, useState} from 'react';
@@ -60,7 +60,7 @@ function EquationComponent({
 
   useEffect(() => {
     if (showEquationEditor) {
-      return withSubscriptions(
+      return mergeRegister(
         editor.registerCommandListener(
           'selectionChange',
           (payload) => {

diff --git a/packages/lexical-playground/src/nodes/ImageNode.jsx b/packages/lexical-playground/src/nodes/ImageNode.jsx
@@ -32,7 +32,7 @@ import RichTextPlugin from '@lexical/react/LexicalRichTextPlugin';
 import TablesPlugin from '@lexical/react/LexicalTablePlugin';
 import useLexicalDecoratorMap from '@lexical/react/useLexicalDecoratorMap';
 import useLexicalNodeSelection from '@lexical/react/useLexicalNodeSelection';
-import withSubscriptions from '@lexical/react/withSubscriptions';
+import {mergeRegister} from '@lexical/utils';
 import {
   $getNodeByKey,
   $getSelection,
@@ -242,8 +242,7 @@ function ImageResizer({
           ref={buttonRef}
           onClick={() => {
             setShowCaption(!showCaption);
-          }}
-        >
+          }}>
           Add Caption
         </button>
       )}
@@ -329,7 +328,7 @@ function ImageComponent({
   );
 
   useEffect(() => {
-    return withSubscriptions(
+    return mergeRegister(
       editor.registerUpdateListener(({editorState}) => {
         setSelection(editorState.read(() => $getSelection()));
       }),
@@ -427,8 +426,7 @@ function ImageComponent({
             <LexicalNestedComposer
               initialConfig={{
                 decoratorEditor: decoratorEditor,
-              }}
-            >
+              }}>
               <MentionsPlugin />
               <TablesPlugin />
               <TableCellActionMenuPlugin />

diff --git a/packages/lexical-playground/src/plugins/ActionsPlugin.jsx b/packages/lexical-playground/src/plugins/ActionsPlugin.jsx
@@ -12,7 +12,7 @@ import type {CommandListenerEditorPriority} from 'lexical';
 import {exportFile, importFile} from '@lexical/file';
 import {useCollaborationContext} from '@lexical/react/LexicalCollaborationPlugin';
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import withSubscriptions from '@lexical/react/withSubscriptions';
+import {mergeRegister} from '@lexical/utils';
 import {$getRoot} from 'lexical';
 import * as React from 'react';
 import {useCallback, useEffect, useState} from 'react';
@@ -35,7 +35,7 @@ export default function ActionsPlugins({
   const isCollab = yjsDocMap.get('main') !== undefined;
 
   useEffect(() => {
-    return withSubscriptions(
+    return mergeRegister(
       editor.registerCommandListener(
         'readOnly',
         (payload) => {
@@ -76,15 +76,13 @@ export default function ActionsPlugins({
           className={
             'action-button action-button-mic ' +
             (isSpeechToText ? 'active' : '')
-          }
-        >
+          }>
           <i className="mic" />
         </button>
       )}
       <button
         className="action-button import"
-        onClick={() => importFile(editor)}
-      >
+        onClick={() => importFile(editor)}>
         <i className="import" />
       </button>
       <button
@@ -94,8 +92,7 @@ export default function ActionsPlugins({
             fileName: `Playground ${new Date().toISOString()}`,
             source: 'Playground',
           })
-        }
-      >
+        }>
         <i className="export" />
       </button>
       <button className="action-button sticky" onClick={insertSticky}>
@@ -106,25 +103,22 @@ export default function ActionsPlugins({
         onClick={() => {
           editor.execCommand('clearEditor');
           editor.focus();
-        }}
-      >
+        }}>
         <i className="clear" />
       </button>
       <button
         className="action-button lock"
         onClick={() => {
           editor.setReadOnly(!editor.isReadOnly());
-        }}
-      >
+        }}>
         <i className={isReadOnly ? 'unlock' : 'lock'} />
       </button>
       {isCollab && (
         <button
           className="action-button connect"
           onClick={() => {
             editor.execCommand('toggleConnect', !connected);
-          }}
-        >
+          }}>
           <i className={connected ? 'disconnect' : 'connect'} />
         </button>
       )}

diff --git a/packages/lexical-playground/src/plugins/CharacterStylesPopupPlugin.jsx b/packages/lexical-playground/src/plugins/CharacterStylesPopupPlugin.jsx
@@ -11,8 +11,8 @@ import type {ElementNode, LexicalEditor, RangeSelection} from 'lexical';
 
 import {$isLinkNode} from '@lexical/link';
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import withSubscriptions from '@lexical/react/withSubscriptions';
 import {$isAtNodeEnd} from '@lexical/selection';
+import {mergeRegister} from '@lexical/utils';
 import {$getSelection, $isRangeSelection, $isTextNode, TextNode} from 'lexical';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 // $FlowFixMe
@@ -96,7 +96,7 @@ function FloatingCharacterStylesEditor({
   }, [editor]);
 
   useEffect(() => {
-    return withSubscriptions(
+    return mergeRegister(
       editor.registerUpdateListener(({editorState}) => {
         editorState.read(() => {
           updateCharacterStylesEditor();
@@ -121,51 +121,45 @@ function FloatingCharacterStylesEditor({
           editor.execCommand('formatText', 'bold');
         }}
         className={'popup-item spaced ' + (isBold ? 'active' : '')}
-        aria-label="Format Bold"
-      >
+        aria-label="Format Bold">
         <i className="format bold" />
       </button>
       <button
         onClick={() => {
           editor.execCommand('formatText', 'italic');
         }}
         className={'popup-item spaced ' + (isItalic ? 'active' : '')}
-        aria-label="Format Italics"
-      >
+        aria-label="Format Italics">
         <i className="format italic" />
       </button>
       <button
         onClick={() => {
           editor.execCommand('formatText', 'underline');
         }}
         className={'popup-item spaced ' + (isUnderline ? 'active' : '')}
-        aria-label="Format Underline"
-      >
+        aria-label="Format Underline">
         <i className="format underline" />
       </button>
       <button
         onClick={() => {
           editor.execCommand('formatText', 'strikethrough');
         }}
         className={'popup-item spaced ' + (isStrikethrough ? 'active' : '')}
-        aria-label="Format Strikethrough"
-      >
+        aria-label="Format Strikethrough">
         <i className="format strikethrough" />
       </button>
       <button
         onClick={() => {
           editor.execCommand('formatText', 'code');
         }}
         className={'popup-item spaced ' + (isCode ? 'active' : '')}
-        aria-label="Insert Code"
-      >
+        aria-label="Insert Code">
         <i className="format code" />
       </button>
       <button
         onClick={insertLink}
         className={'popup-item spaced ' + (isLink ? 'active' : '')}
-        aria-label="Insert Link"
-      >
+        aria-label="Insert Link">
         <i className="format link" />
       </button>
     </div>

diff --git a/packages/lexical-playground/src/plugins/CodeHighlightPlugin.js b/packages/lexical-playground/src/plugins/CodeHighlightPlugin.js
@@ -9,13 +9,12 @@
 
 import {registerCodeHighlighting} from '@lexical/code';
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import withSubscriptions from '@lexical/react/withSubscriptions';
 import {useEffect} from 'react';
 
 export default function CodeHighlightPlugin(): React$Node {
   const [editor] = useLexicalComposerContext();
   useEffect(() => {
-    return withSubscriptions(...registerCodeHighlighting(editor));
+    return registerCodeHighlighting(editor);
   }, [editor]);
   return null;
 }
diff --git a/packages/lexical-playground/src/plugins/MentionsPlugin.jsx b/packages/lexical-playground/src/plugins/MentionsPlugin.jsx
@@ -14,7 +14,7 @@ import type {
 } from 'lexical';
 
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import withSubscriptions from '@lexical/react/withSubscriptions';
+import {mergeRegister} from '@lexical/utils';
 import {$getSelection, $isRangeSelection, $isTextNode} from 'lexical';
 import React, {
   startTransition,
@@ -596,8 +596,7 @@ function MentionsTypeaheadItem({
       id={'typeahead-item-' + index}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
-      onClick={onClick}
-    >
+      onClick={onClick}>
       {result}
     </li>
   );
@@ -679,7 +678,7 @@ function MentionsTypeahead({
   }, [results, selectedIndex, updateSelectedIndex]);
 
   useEffect(() => {
-    return withSubscriptions(
+    return mergeRegister(
       editor.registerCommandListener(
         'keyArrowDown',
         (payload) => {
@@ -774,8 +773,7 @@ function MentionsTypeahead({
       aria-label="Suggested mentions"
       id="mentions-typeahead"
       ref={divRef}
-      role="listbox"
-    >
+      role="listbox">
       <ul>
         {results.slice(0, SUGGESTION_LIST_LENGTH_LIMIT).map((result, i) => (
           <MentionsTypeaheadItem