{"record":{"id":"6929bd54f862b415","repo":"ianstormtaylor/slate","slug":"the-useslatestatic-hook-must-be-used-inside-the","errorCode":null,"errorMessage":"The `useSlateStatic` hook must be used inside the <Slate> component's context.","messagePattern":"The `useSlateStatic` 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-slate-static.tsx","lineNumber":19,"sourceCode":"import { createContext, useContext } from 'react'\nimport { Editor } from 'slate'\nimport { ReactEditor } from '../plugin/react-editor'\n\n/**\n * A React context for sharing the editor object.\n */\n\nexport const EditorContext = createContext<ReactEditor | null>(null)\n\n/**\n * Get the current editor object from the React context.\n */\n\nexport const useSlateStatic = (): Editor => {\n  const editor = useContext(EditorContext)\n\n  if (!editor) {\n    throw new Error(\n      `The \\`useSlateStatic\\` hook must be used inside the <Slate> component's context.`\n    )\n  }\n\n  return editor\n}\n","sourceCodeStart":1,"sourceCodeEnd":26,"githubUrl":"https://github.com/ianstormtaylor/slate/blob/72a37c701e5da4bb13a305d416d9c070d19d3a45/packages/slate-react/src/hooks/use-slate-static.tsx#L1-L26","documentation":"useSlateStatic() reads the editor from EditorContext, provided only by the <Slate> component. If the hook runs outside that provider the context is null and it throws — by design, to fail fast rather than hand back undefined.","triggerScenarios":"Calling useSlateStatic() in a component mounted outside <Slate>...</Slate>; testing such a component without wrapping it; portals or separate render roots that bypass the provider tree.","commonSituations":"Utility components (buttons, menus) rendered outside the editor tree; RTL/Jest tests rendering components bare; refactors promoting a component above the <Slate> provider; micro-frontends mounting widgets separately.","solutions":["Move the component inside the <Slate> subtree, or pass the editor down as a prop for out-of-tree components","Wrap test renders with a <Slate editor={editor} initialValue={...}> helper","For portals, re-provide the context inside portal content"],"exampleFix":"// before\nconst editor = useSlateStatic() // component outside <Slate>\n\n// after\n// inside <Slate> subtree:\nfunction MyButton(){ const editor = useSlateStatic(); ... }\n// or pass editor as prop from a context-consuming parent","handlingStrategy":"validation","validationCode":"// only call inside provider tree\n<Slate editor={editor} initialValue={value}>\n  <Toolbar />\n</Slate>","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Keep useSlateStatic calls inside <Slate> children","Use a Slate-wrapped render helper in tests","Pass the editor as a prop to external widgets instead of using context"],"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"}