4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:T8eb,'use client' import 'prosekit/basic/style.css' import 'prosekit/basic/typography.css' import './style.css' import { createEditor, type NodeJSON } from 'prosekit/core' import { ProseKit } from 'prosekit/react' import { useMemo, useState } from 'react' import { defineExtension } from './extension.ts' const defaultContent: NodeJSON = { type: 'doc', content: [ { type: 'paragraph', content: [{ type: 'text', text: 'Select the first paragraph below, then blur the editor.' }], }, { type: 'nestedEditable', content: [ { type: 'paragraph', content: [{ type: 'text', text: 'Selected text inside the nested editable NodeView.' }], }, { type: 'paragraph', content: [{ type: 'text', text: 'Click this target paragraph after blurring.' }], }, ], }, ], } export default function Editor() { const [legacy, setLegacy] = useState(false) const editor = useMemo(() => { return createEditor({ extension: defineExtension(legacy), defaultContent }) }, [legacy]) return (

{legacy ? 'Legacy mode removes the decoration only on focus. Its failure is browser and DOM-shape dependent.' : 'Fixed mode removes the decoration on pointerdown before focus.'}

Select the first nested paragraph, click “Blur editor”, then click the target paragraph once.

) } 52:T942,import { defineBasicExtension } from 'prosekit/basic' import { defineNodeSpec, definePlugin, union } from 'prosekit/core' import { PluginKey, ProseMirrorPlugin, type Transaction } from 'prosekit/pm/state' import { Decoration, DecorationSet } from 'prosekit/pm/view' import { defineReactNodeView } from 'prosekit/react' import { NestedEditableView } from './nested-editable-view.tsx' const legacyVirtualSelectionKey = new PluginKey('virtual-selection-repro-legacy') function getLegacyFocusMeta(tr: Transaction): boolean | undefined { return tr.getMeta(legacyVirtualSelectionKey) as boolean | undefined } function defineLegacyVirtualSelection() { return definePlugin( new ProseMirrorPlugin({ key: legacyVirtualSelectionKey, state: { init: () => false, apply: (tr, value) => getLegacyFocusMeta(tr) ?? value, }, props: { handleDOMEvents: { focus: (view) => { view.dispatch(view.state.tr.setMeta(legacyVirtualSelectionKey, false)) }, blur: (view) => { const { dom, root } = view const domSelection = 'getSelection' in root ? root.getSelection() : window.getSelection() if (domSelection?.anchorNode && dom.contains(domSelection.anchorNode)) { domSelection.removeAllRanges() } view.dispatch(view.state.tr.setMeta(legacyVirtualSelectionKey, true)) }, }, decorations: (state) => { const { selection } = state if (!legacyVirtualSelectionKey.getState(state) || selection.empty || !selection.visible) { return null } return DecorationSet.create(state.doc, [ Decoration.inline(selection.from, selection.to, { class: 'prosekit-virtual-selection-repro-legacy', }), ]) }, }, }), ) } export function defineExtension(legacy: boolean) { return union( defineBasicExtension(), ...(legacy ? [defineLegacyVirtualSelection()] : []), defineNodeSpec({ name: 'nestedEditable', content: 'block+', group: 'block', toDOM: () => ['div', 0], }), defineReactNodeView({ name: 'nestedEditable', component: NestedEditableView, }), ) } export type EditorExtension = ReturnType 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","prosekit@^0.22.0",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/prosekit","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"prosekit@^0.22.0"}]]}]}]]}],["$","$L4e",null,{"registryDependencies":[]}]]}],["$","$L4f",null,{"sourceUrl":"https://prosekit.dev/r/react-example-virtual-selection-repro.json","proxyUrl":"https://shadcnregistry.com/r/prosekit/react-example-virtual-selection-repro","itemId":"@prosekit/react-example-virtual-selection-repro"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"registry/src/react/examples/virtual-selection-repro/editor.tsx","content":"$51","type":"registry:component","target":"components/editor/examples/virtual-selection-repro/editor.tsx"},{"path":"registry/src/react/examples/virtual-selection-repro/extension.ts","content":"$52","type":"registry:component","target":"components/editor/examples/virtual-selection-repro/extension.ts"},{"path":"registry/src/react/examples/virtual-selection-repro/index.ts","content":"export { default as ExampleEditor } from './editor.tsx'\n","type":"registry:component","target":"components/editor/examples/virtual-selection-repro/index.ts"},{"path":"registry/src/react/examples/virtual-selection-repro/nested-editable-view.tsx","content":"'use client'\n\nimport type { ReactNodeViewProps } from 'prosekit/react'\n\nexport function NestedEditableView(props: ReactNodeViewProps) {\n return (\n

\n \n

\n )\n}\n","type":"registry:component","target":"components/editor/examples/virtual-selection-repro/nested-editable-view.tsx"},{"path":"registry/src/react/examples/virtual-selection-repro/style.css","content":".prosekit-virtual-selection-repro-legacy {\n background: color-mix(in srgb, red 35%, transparent);\n}\n","type":"registry:component","target":"components/editor/examples/virtual-selection-repro/style.css"}]}]]}],"$L53"]}]

React Example Virtual Selection Repro

Installation

Files

components

Styles