Use the LinkFloatingToolbar to prompt useEditorRef must be used inside a Plate or PlateController

[jiahao-jayden]

Description

I wanted to insert a link in insertmenu and interact with it using the LinkFloatingToolbar, but an unexpected error occurred

Steps to Reproduce

1. Add the link plugin and element

 pnpm add @udecode/plate-link
pnpm dlx link-element

2. Add a linkfloat plugin and element

pnpm add @udecode/plate-floating
pnpm dlx @udecode/plate-ui@latest add link-floating-toolbar

3. Configure my plugin

export const plugins = createPlugins(
  [
    ...other plugins,

    createLinkPlugin({
      renderAfterEditable: LinkFloatingToolbar as RenderAfterEditable
    })
  ],
{
    components: {
      ...other element,
      [ELEMENT_LINK]: LinkElement
    }
  })

4. Configure insert menu

const item = [
      {
        value: ELEMENT_LINK,
        label: 'Link',
        description: 'Link',
        icon: Icons.link,
      },
]
... 
  onSelect={async () => {
   case ELEMENT_LINK: {
      triggerFloatingLink(editor, { focused: true })

      break
    }}

5. My editor code

import { Plate } from '@udecode/plate-common'
import { Editor } from '@/components/ui/editor'
import { FixedToolbar } from '@/components/ui/fixed-toolbar'
import { plugins } from './plugins'
import { FixedToolbarButtons } from '../ui/fixed-toolbar-buttons'
import { TooltipProvider } from '@/components/ui/tooltip'

const initialValue = [
  {
    id: '1',
    type: 'p',
    children: [{ text: 'Hello, World!' }]
  }
]

export default function PlateEditor() {
  return (
    <div className='relative top-0'>
      <TooltipProvider>
        <Plate plugins={plugins} initialValue={initialValue}>
          <Editor />
          <FixedToolbar>
            <FixedToolbarButtons />
          </FixedToolbar>
        </Plate>
      </TooltipProvider>
    </div>
  )
}

6. see the error

Uncaught Error: useEditorRef must be used inside a Plate or PlateController
    at usePlateEditorStore (createPlateStore.ts:129:11)
    at usePlateSelectors (createPlateStore.ts:141:17)
    at useEditorRef (useEditorRef.ts:20:3)
    at useFloatingLinkInsertState (useFloatingLinkInsert.ts:34:18)
    at LinkFloatingToolbar (link-floating-toolbar.tsx:36:23)
    at renderWithHooks (react-dom.development.js:15486:18)
    at mountIndeterminateComponent (react-dom.development.js:20103:13)
    at beginWork (react-dom.development.js:21626:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
usePlateEditorStore @ createPlateStore.ts:129
usePlateSelectors @ createPlateStore.ts:141
useEditorRef @ useEditorRef.ts:20
useFloatingLinkInsertState @ useFloatingLinkInsert.ts:34
LinkFloatingToolbar @ link-floating-toolbar.tsx:36
renderWithHooks @ react-dom.development.js:15486
mountIndeterminateComponent @ react-dom.development.js:20103
beginWork @ react-dom.development.js:21626
callCallback2 @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27490
performUnitOfWork @ react-dom.development.js:26596
workLoopSync @ react-dom.development.js:26505
renderRootSync @ react-dom.development.js:26473
performConcurrentWorkOnRoot @ react-dom.development.js:25777
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533

createPlateStore.ts:129 Uncaught Error: useEditorRef must be used inside a Plate or PlateController
    at usePlateEditorStore (createPlateStore.ts:129:11)
    at usePlateSelectors (createPlateStore.ts:141:17)
    at useEditorRef (useEditorRef.ts:20:3)
    at useFloatingLinkInsertState (useFloatingLinkInsert.ts:34:18)
    at LinkFloatingToolbar (link-floating-toolbar.tsx:36:23)
    at renderWithHooks (react-dom.development.js:15486:18)
    at mountIndeterminateComponent (react-dom.development.js:20103:13)
    at beginWork (react-dom.development.js:21626:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
usePlateEditorStore @ createPlateStore.ts:129
usePlateSelectors @ createPlateStore.ts:141
useEditorRef @ useEditorRef.ts:20
useFloatingLinkInsertState @ useFloatingLinkInsert.ts:34
LinkFloatingToolbar @ link-floating-toolbar.tsx:36
renderWithHooks @ react-dom.development.js:15486
mountIndeterminateComponent @ react-dom.development.js:20103
beginWork @ react-dom.development.js:21626
callCallback2 @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27490
performUnitOfWork @ react-dom.development.js:26596
workLoopSync @ react-dom.development.js:26505
renderRootSync @ react-dom.development.js:26473
recoverFromConcurrentError @ react-dom.development.js:25889
performConcurrentWorkOnRoot @ react-dom.development.js:25789
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533

react-dom.development.js:18704 The above error occurred in the <LinkFloatingToolbar> component:

    at LinkFloatingToolbar (http://localhost:5173/src/components/ui/link-floating-toolbar.tsx:43:39)
    at Slate (http://localhost:5173/node_modules/.vite/deps/chunk-KSEB4NZS.js?v=1dea6a05:5697:5)
    at PlateSlate (http://localhost:5173/node_modules/.vite/deps/chunk-KSEB4NZS.js?v=1dea6a05:9750:3)
    at http://localhost:5173/node_modules/.vite/deps/chunk-KSEB4NZS.js?v=1dea6a05:9766:20
    at div
    at _c (http://localhost:5173/src/components/ui/editor.tsx:59:5)
    at PlateEffects (http://localhost:5173/node_modules/.vite/deps/chunk-KSEB4NZS.js?v=1dea6a05:9616:18)
    at HydrateAtoms (http://localhost:5173/node_modules/.vite/deps/chunk-KSEB4NZS.js?v=1dea6a05:173:5)
    at http://localhost:5173/node_modules/.vite/deps/chunk-KSEB4NZS.js?v=1dea6a05:194:20
    at PlateInner (http://localhost:5173/node_modules/.vite/deps/chunk-KSEB4NZS.js?v=1dea6a05:9621:26)
    at Plate (http://localhost:5173/node_modules/.vite/deps/chunk-KSEB4NZS.js?v=1dea6a05:9700:11)
    at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-G7ULGPZV.js?v=1dea6a05:55:15)
    at $a093c7e1ec25a057$export$f78649fb9ca566b8 (http://localhost:5173/node_modules/.vite/deps/@radix-ui_react-tooltip.js?v=1dea6a05:76:11)
    at div
    at PlateEditor
    at div
    at Home
    at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=1dea6a05:3653:5)
    at Outlet (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=1dea6a05:4024:26)
    at div
    at div
    at Layout
    at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=1dea6a05:3653:5)
    at Routes (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=1dea6a05:4088:5)
    at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=1dea6a05:4031:15)
    at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=1dea6a05:4774:5)
    at ThemeProvider (http://localhost:5173/src/components/ThemeProvider/index.tsx:25:3)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18704
update.callback @ react-dom.development.js:18737
callCallback @ react-dom.development.js:15036
commitUpdateQueue @ react-dom.development.js:15057
commitLayoutEffectOnFiber @ react-dom.development.js:23430
commitLayoutMountEffects_complete @ react-dom.development.js:24727
commitLayoutEffects_begin @ react-dom.development.js:24713
commitLayoutEffects @ react-dom.development.js:24651
commitRootImpl @ react-dom.development.js:26862
commitRoot @ react-dom.development.js:26721
finishConcurrentRender @ react-dom.development.js:25931
performConcurrentWorkOnRoot @ react-dom.development.js:25848
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533

react-dom.development.js:26962 Uncaught Error: useEditorRef must be used inside a Plate or PlateController
    at usePlateEditorStore (createPlateStore.ts:129:11)
    at usePlateSelectors (createPlateStore.ts:141:17)
    at useEditorRef (useEditorRef.ts:20:3)
    at useFloatingLinkInsertState (useFloatingLinkInsert.ts:34:18)
    at LinkFloatingToolbar (link-floating-toolbar.tsx:36:23)
    at renderWithHooks (react-dom.development.js:15486:18)
    at mountIndeterminateComponent (react-dom.development.js:20103:13)
    at beginWork (react-dom.development.js:21626:16)
    at beginWork$1 (react-dom.development.js:27465:14)
    at performUnitOfWork (react-dom.development.js:26596:12)

Sandbox

Expected Behavior

Links can be inserted, and a floating window is displayed

Environment

• slate: 0.103.0
• slate-react: 0.102.0
• browser: chrome

Bounty

Click here to add a bounty via Algora.

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

[zbeyens]

This is probably a dependency issue. Could you update all plate deps to latest?

[jiahao-jayden]

It does not seem to be the version cause, I have installed the latest related dependencies

    "@udecode/cn": "^31.0.0",
    "@udecode/plate-basic-marks": "^32.0.0",
    "@udecode/plate-block-quote": "^32.0.0",
    "@udecode/plate-code-block": "^32.0.0",
    "@udecode/plate-common": "^32.0.1",
    "@udecode/plate-floating": "^32.0.0",
    "@udecode/plate-heading": "^32.0.0",
    "@udecode/plate-link": "^32.0.0",
    "@udecode/plate-list": "^32.0.0",
    "@udecode/plate-paragraph": "^32.0.0",
    "@udecode/plate-ui": "^31.0.0",
    "slate": "^0.103.0",
    "slate-history": "^0.100.0",
    "slate-hyperscript": "^0.100.0",
    "slate-react": "^0.102.0",

[jiahao-jayden]

i cloned the official playground to get the relevant link code, and re-executed pnpm i, which has been running normally, which is very exciting. But now there is a problem that is not a bug, but a problem of user experience. On the mobile side, users may not know that they need to press enter to confirm. I added a confirmation button via the API and wanted to add a cancel button for the link float toolbar, but I can't seem to find the right API to hide the float toolbar

[zbeyens]

You can use floatingLinkActions.hide()

[felixfeng33]

const onCancel = () => { const event = new KeyboardEvent('keydown', { key: 'Escape', code: 'Escape', }); document.dispatchEvent(event); };

[felixfeng33]

A way to cheat is simulated press down the Esc

[jiahao-jayden]

This is an interesting solution that I tried in my code and it worked really well