{"record":{"id":"d5af83c4e7c3b1a9","repo":"ianstormtaylor/slate","slug":"a-hyperscriptrangeref-must-be-passed-as-the-ref-pr-d5af83","errorCode":null,"errorMessage":"A HyperscriptRangeRef must be passed as the ref prop of a <focus /> tag that is used inside an <editor>.","messagePattern":"A HyperscriptRangeRef must be passed as the ref prop of a <focus /> tag that is used inside an <editor>\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/slate-hyperscript/src/refs.ts","lineNumber":44,"sourceCode":" * Hyperscript range refs can be used to construct arbitrary range using the ref\n * props of <anchor /> and <focus /> tags.\n */\n\nexport class HyperscriptRangeRef {\n  anchor?: Point\n  focus?: Point\n\n  range(): Range {\n    const { anchor, focus } = this\n\n    if (anchor == null) {\n      throw new Error(\n        'A HyperscriptRangeRef must be passed as the ref prop of an <anchor /> tag that is used inside an <editor>.'\n      )\n    }\n\n    if (focus == null) {\n      throw new Error(\n        'A HyperscriptRangeRef must be passed as the ref prop of a <focus /> tag that is used inside an <editor>.'\n      )\n    }\n\n    return { anchor, focus }\n  }\n}\n","sourceCodeStart":26,"sourceCodeEnd":52,"githubUrl":"https://github.com/ianstormtaylor/slate/blob/72a37c701e5da4bb13a305d416d9c070d19d3a45/packages/slate-hyperscript/src/refs.ts#L26-L52","documentation":"In slate-hyperscript, a <focus ref={...}/> tag's ref stores the focus Point only when rendered inside an <editor> element. The range() method on HyperscriptRangeRef throws this error when the focus Point is missing — the anchor was captured but the focus never was, because the <focus/> tag was outside an editor, missing entirely, or attached to a different ref. A Slate Range requires both endpoints.","triggerScenarios":"Using <anchor ref={r}/> inside an <editor> but placing <focus ref={r}/> in a fragment; omitting the <focus/> tag while still calling range(); passing a second ref to <focus/> so the first ref has an anchor but no focus.","commonSituations":"Copy-paste test markup where the focus tag landed outside the editor; using two different refs and calling range() on only one; refactoring selection tests.","solutions":["Ensure a <focus ref={r}/> tag exists inside the same <editor> as the <anchor ref={r}/> tag","Check that anchor and focus use the same ref object when you intend to call range() on it","If you only need a single point, call .point() on a point ref instead of range()"],"exampleFix":"// before\n<editor>\n  <anchor ref={r} />\n  <text>a</text>\n</editor>\n// no <focus ref={r}/> anywhere\nr.current.range() // throws\n\n// after\n<editor>\n  <anchor ref={r} />\n  <text>a</text>\n  <focus ref={r} />\n</editor>\nr.current.range() // works","handlingStrategy":"validation","validationCode":"const r = focusRef.current\nif (r?.anchor != null && r?.focus != null) {\n  const range = r.range()\n}","typeGuard":"const hasRange = (r) =>\n  r != null && r.anchor != null && r.focus != null","tryCatchPattern":null,"preventionTips":["Include both <anchor ref={r}/> and <focus ref={r}/> inside the editor","Call range() only after the hyperscript tree is fully rendered"],"tags":["slate-hyperscript","selection","focus","range","testing"],"backgroundTag":"invalid-hyperscript-usage","analyzedSha":"72a37c701e5da4bb13a305d416d9c070d19d3a45","analyzedAt":"2026-08-27T23:04:51.145Z","schemaVersion":2},"datasetVersion":"2026-08-28T00:17:15.603Z"}