{"record":{"id":"ab333d003f5b718d","repo":"ianstormtaylor/slate","slug":"a-hyperscriptrangeref-must-be-passed-as-the-ref-pr","errorCode":null,"errorMessage":"A HyperscriptRangeRef must be passed as the ref prop of an <anchor /> tag that is used inside an <editor>.","messagePattern":"A HyperscriptRangeRef must be passed as the ref prop of an <anchor /> tag that is used inside an <editor>\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/slate-hyperscript/src/refs.ts","lineNumber":38,"sourceCode":"\n    return { path, offset }\n  }\n}\n\n/**\n * 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":20,"sourceCodeEnd":52,"githubUrl":"https://github.com/ianstormtaylor/slate/blob/72a37c701e5da4bb13a305d416d9c070d19d3a45/packages/slate-hyperscript/src/refs.ts#L20-L52","documentation":"In slate-hyperscript, a <anchor ref={...}/> tag's ref stores the anchor Point only when it is rendered inside an <editor> element. Calling .range() on a HyperscriptRangeRef throws this error when the anchor Point was never populated — i.e., the <anchor/> tag was used outside an <editor> or the ref was never attached to an <anchor/> tag at all. The range() method requires both anchor and focus to build a Range.","triggerScenarios":"Using <anchor ref={r}/> inside <fragment>/<element> instead of <editor>; calling r.current.range() before the hyperscript tree containing the anchor is rendered; attaching the ref to a different tag (e.g. <text>) so it never receives an anchor.","commonSituations":"Test setup where selections are built from fragments; ref variable mixups between anchor and focus; migrating tests that previously used explicit path props on the ref.","solutions":["Place the <anchor ref={r}/> tag inside an <editor> element","Verify the ref is passed to an <anchor/> tag, not to <focus/> or another tag","Make sure both <anchor ref={r}/> and <focus ref={r}/> (or the same ref) appear inside the same editor before calling range()"],"exampleFix":"// before\n<fragment>\n  <anchor ref={r} />\n  <text>a</text>\n  <focus ref={r} />\n</fragment>\nr.current.range() // throws (no anchor)\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 = anchorRef.current\nif (r?.anchor != null) {\n  const range = r.range()\n}","typeGuard":"const hasAnchor = (r) => r != null && r.anchor != null","tryCatchPattern":null,"preventionTips":["Put <anchor ref/> inside <editor>","Use the same ref for anchor and focus when you need a range"],"tags":["slate-hyperscript","selection","anchor","range","testing"],"backgroundTag":"invalid-hyperscript-usage","analyzedSha":"72a37c701e5da4bb13a305d416d9c070d19d3a45","analyzedAt":"2026-08-27T23:04:51.145Z","schemaVersion":2},"datasetVersion":"2026-08-28T00:17:15.603Z"}