fix(dcd): pull apart ToolbarPlugin

src/components/lexical/plugins/ToolbarPlugin/ToolbarPlugin.tsx

@@ -23,7 +23,7 @@ import {
   $createQuoteNode,
   $isHeadingNode,
 } from "@lexical/rich-text"
-import { $isAtNodeEnd, $wrapNodes } from "@lexical/selection"
+import { $wrapNodes } from "@lexical/selection"
 import { $getNearestNodeOfType, mergeRegister } from "@lexical/utils"
 import {
   ArrowClockwise,
@@ -56,8 +56,7 @@ import {
 import { useCallback, useEffect, useRef, useState } from "react"
 import ImageEditor from "./components/ImageEditor"
 import LinkEditor from "./components/LinkEditor"
-
-export const LOW_PRIORITY = 1
+import { LOW_PRIORITY } from "./constants"
 
 const supportedBlockTypes = [
   "paragraph",
@@ -94,25 +93,6 @@ const blockTypeToBlockIcon: Record<
   code: Code,
 }
 
-export const getSelectedNode = (selection) => {
-  const anchor = selection.anchor
-  const focus = selection.focus
-  const anchorNode = selection.anchor.getNode()
-  const focusNode = selection.focus.getNode()
-
-  if (anchorNode === focusNode) {
-    return anchorNode
-  }
-
-  const isBackward = selection.isBackward()
-
-  if (isBackward) {
-    return $isAtNodeEnd(focus) ? anchorNode : focusNode
-  } else {
-    return $isAtNodeEnd(anchor) ? focusNode : anchorNode
-  }
-}
-
 const BlockOptionsMenuList = ({
   editor,
   blockType,

src/components/lexical/plugins/ToolbarPlugin/components/LinkEditor.tsx

@@ -21,7 +21,8 @@ import { $getSelection, $isRangeSelection, SELECTION_CHANGE_COMMAND } from "lexi
 import { useCallback, useEffect, useRef, useState } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { ensureUrlProtocol } from "utils/ensureUrlProtocol"
-import { LOW_PRIORITY, getSelectedNode } from "../ToolbarPlugin"
+import { LOW_PRIORITY } from "../ToolbarPlugin/constants"
+import { getSelectedNode } from "../ToolbarPlugin/utils"
 
 type LinkEditorProps = {
   isOpen: boolean

src/components/lexical/plugins/ToolbarPlugin/constants.ts

@@ -0,0 +1 @@
+export const LOW_PRIORITY = 1

src/components/lexical/plugins/ToolbarPlugin/utils.ts

@@ -0,0 +1,18 @@
+export const getSelectedNode = (selection) => {
+  const anchor = selection.anchor
+  const focus = selection.focus
+  const anchorNode = selection.anchor.getNode()
+  const focusNode = selection.focus.getNode()
+
+  if (anchorNode === focusNode) {
+    return anchorNode
+  }
+
+  const isBackward = selection.isBackward()
+
+  if (isBackward) {
+    return $isAtNodeEnd(focus) ? anchorNode : focusNode
+  } else {
+    return $isAtNodeEnd(anchor) ? focusNode : anchorNode
+  }
+}