{"record":{"id":"bf520c2d1e482392","repo":"ianstormtaylor/slate","slug":"the-useeditor-hook-must-be-used-inside-the-slat","errorCode":null,"errorMessage":"The `useEditor` hook must be used inside the <Slate> component's context.","messagePattern":"The `useEditor` hook must be used inside the <Slate> component's context\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/slate-react/src/hooks/use-editor.tsx","lineNumber":14,"sourceCode":"import { useContext } from 'react'\n\nimport { EditorContext } from './use-slate-static'\n\n/**\n * Get the current editor object from the React context.\n * @deprecated Use useSlateStatic instead.\n */\n\nexport const useEditor = () => {\n  const editor = useContext(EditorContext)\n\n  if (!editor) {\n    throw new Error(\n      `The \\`useEditor\\` hook must be used inside the <Slate> component's context.`\n    )\n  }\n\n  return editor\n}\n","sourceCodeStart":1,"sourceCodeEnd":21,"githubUrl":"https://github.com/ianstormtaylor/slate/blob/72a37c701e5da4bb13a305d416d9c070d19d3a45/packages/slate-react/src/hooks/use-editor.tsx#L1-L21","documentation":"useEditor() requires the React context provided by <Slate>. Calling it in a component rendered outside a <Slate> provider yields a null context, and the hook throws to surface the mistake early instead of returning undefined and crashing later.","triggerScenarios":"Calling useEditor() (or a component that uses it) outside of <Slate>...</Slate>; rendering editor-dependent components as siblings rather than children of <Slate>; testing components with render() but no Slate wrapper; portals rendered outside the provider tree.","commonSituations":"Component trees reorganized so a leaf ends up outside <Slate>; unit tests (Jest/RTL) rendering leaves without the provider; portals to document.body escaping the context.","solutions":["Move the component inside the <Slate>...</Slate> subtree","In tests, wrap rendered components in a <Slate editor={editor} initialValue={...}> helper","For portals, wrap portal content in the same context provider or use a custom render target inside the tree"],"exampleFix":"// before\nfunction Toolbar(){ const editor = useEditor(); ... }\nrender(<Toolbar/>) // no provider\n\n// after\nrender(\n  <Slate editor={editor} initialValue={initialValue}>\n    <Toolbar/>\n  </Slate>\n)","handlingStrategy":"validation","validationCode":"// render helper\nfunction renderWithSlate(ui) {\n  const editor = withReact(createEditor())\n  return render(<Slate editor={editor} initialValue={[{type:'paragraph',children:[{text:''}]}]}>{ui}</Slate>)\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Keep editor-consuming components inside the <Slate> subtree","Create a shared test wrapper providing <Slate>","Re-provide context inside portals"],"tags":["react","context","hooks","provider","slate"],"backgroundTag":"missing-react-context-provider","analyzedSha":"72a37c701e5da4bb13a305d416d9c070d19d3a45","analyzedAt":"2026-08-27T23:04:51.145Z","schemaVersion":2},"datasetVersion":"2026-08-28T00:17:15.603Z"}