Add $insertBlockNode (facebook#2633)

yuanyan · Jul 12, 2022 · 7bbe260 · 7bbe260
1 parent de71663
commit 7bbe260
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 63 deletions.
diff --git a/packages/lexical-playground/src/plugins/TwitterPlugin.ts b/packages/lexical-playground/src/plugins/TwitterPlugin.ts
@@ -7,17 +7,8 @@
  */
 
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import {
-  $createParagraphNode,
-  $getRoot,
-  $getSelection,
-  $isGridSelection,
-  $isNodeSelection,
-  $isRangeSelection,
-  COMMAND_PRIORITY_EDITOR,
-  createCommand,
-  LexicalCommand,
-} from 'lexical';
+import {$insertBlockNode} from '@lexical/utils';
+import {COMMAND_PRIORITY_EDITOR, createCommand, LexicalCommand} from 'lexical';
 import {useEffect} from 'react';
 
 import {$createTweetNode, TweetNode} from '../nodes/TweetNode';
@@ -35,23 +26,8 @@ export default function TwitterPlugin(): JSX.Element | null {
     return editor.registerCommand<string>(
       INSERT_TWEET_COMMAND,
       (payload) => {
-        const selection = $getSelection();
         const tweetNode = $createTweetNode(payload);
-        if ($isRangeSelection(selection)) {
-          const focusNode = selection.focus.getNode();
-          focusNode.getTopLevelElementOrThrow().insertAfter(tweetNode);
-        } else if ($isNodeSelection(selection) || $isGridSelection(selection)) {
-          const nodes = selection.getNodes();
-          nodes[nodes.length - 1]
-            .getTopLevelElementOrThrow()
-            .insertAfter(tweetNode);
-        } else {
-          const root = $getRoot();
-          root.append(tweetNode);
-        }
-        const paragraphNode = $createParagraphNode();
-        tweetNode.insertAfter(paragraphNode);
-        paragraphNode.select();
+        $insertBlockNode(tweetNode);
 
         return true;
       },

diff --git a/packages/lexical-playground/src/plugins/YouTubePlugin.ts b/packages/lexical-playground/src/plugins/YouTubePlugin.ts
@@ -7,17 +7,8 @@
  */
 
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import {
-  $createParagraphNode,
-  $getRoot,
-  $getSelection,
-  $isGridSelection,
-  $isNodeSelection,
-  $isRangeSelection,
-  COMMAND_PRIORITY_EDITOR,
-  createCommand,
-  LexicalCommand,
-} from 'lexical';
+import {$insertBlockNode} from '@lexical/utils';
+import {COMMAND_PRIORITY_EDITOR, createCommand, LexicalCommand} from 'lexical';
 import {useEffect} from 'react';
 
 import {$createYouTubeNode, YouTubeNode} from '../nodes/YouTubeNode';
@@ -35,23 +26,8 @@ export default function YouTubePlugin(): JSX.Element | null {
     return editor.registerCommand<string>(
       INSERT_YOUTUBE_COMMAND,
       (payload) => {
-        const selection = $getSelection();
         const youTubeNode = $createYouTubeNode(payload);
-        if ($isRangeSelection(selection)) {
-          const focusNode = selection.focus.getNode();
-          focusNode.getTopLevelElementOrThrow().insertAfter(youTubeNode);
-        } else if ($isNodeSelection(selection) || $isGridSelection(selection)) {
-          const nodes = selection.getNodes();
-          nodes[nodes.length - 1]
-            .getTopLevelElementOrThrow()
-            .insertAfter(youTubeNode);
-        } else {
-          const root = $getRoot();
-          root.append(youTubeNode);
-        }
-        const paragraphNode = $createParagraphNode();
-        youTubeNode.insertAfter(paragraphNode);
-        paragraphNode.select();
+        $insertBlockNode(youTubeNode);
 
         return true;
       },

diff --git a/packages/lexical-utils/flow/LexicalUtils.js.flow b/packages/lexical-utils/flow/LexicalUtils.js.flow
@@ -63,3 +63,5 @@ declare export function $restoreEditorState(
   editor: LexicalEditor,
   editorState: EditorState,
 ): void;
+
+declare export function $insertBlockNode<T: LexicalNode>(node: T): T;
diff --git a/packages/lexical-utils/src/index.ts b/packages/lexical-utils/src/index.ts
@@ -6,21 +6,23 @@
  *
  */
 
-import type {
-  EditorState,
-  ElementNode,
-  Klass,
-  LexicalEditor,
-  LexicalNode,
-  NodeKey,
-} from 'lexical';
-
 import {
+  $createParagraphNode,
   $getRoot,
+  $getSelection,
   $isElementNode,
+  $isGridSelection,
+  $isNodeSelection,
+  $isRangeSelection,
   $isTextNode,
   $setSelection,
   createEditor,
+  EditorState,
+  ElementNode,
+  Klass,
+  LexicalEditor,
+  LexicalNode,
+  NodeKey,
 } from 'lexical';
 import invariant from 'shared/invariant';
 
@@ -406,3 +408,21 @@ export function $restoreEditorState(
   const selection = editorState._selection;
   $setSelection(selection === null ? null : selection.clone());
 }
+
+export function $insertBlockNode<T extends LexicalNode>(node: T): T {
+  const selection = $getSelection();
+  if ($isRangeSelection(selection)) {
+    const focusNode = selection.focus.getNode();
+    focusNode.getTopLevelElementOrThrow().insertAfter(node);
+  } else if ($isNodeSelection(selection) || $isGridSelection(selection)) {
+    const nodes = selection.getNodes();
+    nodes[nodes.length - 1].getTopLevelElementOrThrow().insertAfter(node);
+  } else {
+    const root = $getRoot();
+    root.append(node);
+  }
+  const paragraphNode = $createParagraphNode();
+  node.insertAfter(paragraphNode);
+  paragraphNode.select();
+  return node.getLatest();
+}