[{"data":1,"prerenderedAt":316},["ShallowReactive",2],{"quirekit-doc:\u002Fen\u002Fconcepts\u002Fselection":3},{"id":4,"title":5,"body":6,"description":304,"extension":305,"keywords":306,"locale":307,"meta":308,"navigation":309,"order":310,"path":311,"section":312,"seo":313,"stem":314,"__hash__":315},"docs\u002Fconcepts\u002Fselection.en.md","Selections and document positions",{"type":7,"value":8,"toc":298},"minimark",[9,13,18,121,140,165,169,214,233,240,244,259,275,279,294],[10,11,12],"p",{},"A selection identifies the target of the next edit: a caret, text range or complete node. It belongs to Editor state; the View projects it into visible highlighting.",[14,15,17],"h2",{"id":16},"read-the-current-selection","Read the current selection",[19,20,26],"pre",{"className":21,"code":22,"filename":23,"language":24,"meta":25,"style":25},"language-ts shiki shiki-themes github-light github-light github-dark","const { doc, selection } = editor.state.pm\nconst { from, to, empty } = selection\nconst text = doc.textBetween(from, to, '\\n')\n","Read selected text","ts","",[27,28,29,61,88],"code",{"__ignoreMap":25},[30,31,34,38,42,46,49,52,55,58],"span",{"class":32,"line":33},"line",1,[30,35,37],{"class":36},"sDD9d","const",[30,39,41],{"class":40},"sVPnS"," { ",[30,43,45],{"class":44},"sUNQB","doc",[30,47,48],{"class":40},", ",[30,50,51],{"class":44},"selection",[30,53,54],{"class":40}," } ",[30,56,57],{"class":36},"=",[30,59,60],{"class":40}," editor.state.pm\n",[30,62,64,66,68,71,73,76,78,81,83,85],{"class":32,"line":63},2,[30,65,37],{"class":36},[30,67,41],{"class":40},[30,69,70],{"class":44},"from",[30,72,48],{"class":40},[30,74,75],{"class":44},"to",[30,77,48],{"class":40},[30,79,80],{"class":44},"empty",[30,82,54],{"class":40},[30,84,57],{"class":36},[30,86,87],{"class":40}," selection\n",[30,89,91,93,96,99,102,106,109,113,116,118],{"class":32,"line":90},3,[30,92,37],{"class":36},[30,94,95],{"class":44}," text",[30,97,98],{"class":36}," =",[30,100,101],{"class":40}," doc.",[30,103,105],{"class":104},"sgQzM","textBetween",[30,107,108],{"class":40},"(from, to, ",[30,110,112],{"class":111},"s-HEn","'",[30,114,115],{"class":44},"\\n",[30,117,112],{"class":111},[30,119,120],{"class":40},")\n",[10,122,123,125,126,128,129,131,132,135,136,139],{},[27,124,80],{}," reports whether the range is collapsed; an ordinary caret has equal ",[27,127,70],{}," and ",[27,130,75],{}," positions. These boundaries follow document order. Read ",[27,133,134],{},"anchor"," \u002F ",[27,137,138],{},"head"," when drag direction matters.",[10,141,142,143,146,147,150,151,154,155,158,159,164],{},"Positions use ProseMirror's document coordinates, rather than plain-text indexes or pixels. In a document containing one paragraph with ",[27,144,145],{},"Hello",", the paragraph starts at ",[27,148,149],{},"0"," and text starts at ",[27,152,153],{},"1","; select the word with ",[27,156,157],{},"{ from: 1, to: 6 }",". Container boundaries also consume positions, so string lengths cannot locate arbitrary nested content. Use ",[160,161,163],"a",{"href":162},"\u002Fen\u002Fapi\u002Fview","mounted View geometry"," to translate screen coordinates.",[14,166,168],{"id":167},"set-a-text-or-node-selection","Set a text or node selection",[19,170,173],{"className":21,"code":171,"filename":172,"language":24,"meta":25,"style":25},"editor.chain().setTextSelection({ from: 1, to: 6 }).focus().run()\n","Select the word in the Hello document above",[27,174,175],{"__ignoreMap":25},[30,176,177,180,183,186,189,192,194,197,200,203,206,208,211],{"class":32,"line":33},[30,178,179],{"class":40},"editor.",[30,181,182],{"class":104},"chain",[30,184,185],{"class":40},"().",[30,187,188],{"class":104},"setTextSelection",[30,190,191],{"class":40},"({ from: ",[30,193,153],{"class":44},[30,195,196],{"class":40},", to: ",[30,198,199],{"class":44},"6",[30,201,202],{"class":40}," }).",[30,204,205],{"class":104},"focus",[30,207,185],{"class":40},[30,209,210],{"class":104},"run",[30,212,213],{"class":40},"()\n",[10,215,216,217,220,221,224,225,228,229,232],{},"A number passed to ",[27,218,219],{},"setTextSelection(position)"," places a caret; ",[27,222,223],{},"{ from, to }"," selects a range. Use ",[27,226,227],{},"setNodeSelection(position)"," for a selectable image or other complete node, with the position immediately before that node. ",[27,230,231],{},"selectAll()"," selects the document. A node selection is generally nonempty but does not represent an ordinary text range.",[10,234,235,236,239],{},"Do not reuse numeric positions from another document or an earlier transaction without validation. Commands in a chain share a transaction. When a complex command changes structure before using later positions, map those positions through ",[27,237,238],{},"tr.mapping",". Asynchronous work must also validate its document, target and task lifetime.",[14,241,243],{"id":242},"preserve-the-toolbar-target","Preserve the toolbar target",[10,245,246,247,250,251,254,255,258],{},"A bold button can call ",[27,248,249],{},"editor.chain().focus().toggleBold().run()",". Without a position, ",[27,252,253],{},"focus()"," restores the current selection rather than moving to the end. Avoid hardcoding ",[27,256,257],{},"focus('end')"," on every toolbar click.",[10,260,261,262,265,266,269,270,274],{},"Use ",[27,263,264],{},"editor.isActive('bold')"," for active formatting and ",[27,267,268],{},"editor.getAttributes('heading').level"," for heading attributes. Both are read-only queries. Word's effective formatting can also inherit from styles and needs the corresponding Word reader; see ",[160,271,273],{"href":272},"\u002Fen\u002Fbuild\u002Fcommands","toolbar integration",".",[14,276,278],{"id":277},"subscribe-to-changes","Subscribe to changes",[10,280,261,281,284,285,288,289,293],{},[27,282,283],{},"selectionUpdate"," for selection statistics. Toolbars also depend on content changes and stored formatting at the caret, so they can observe ",[27,286,287],{},"transaction"," and read a bounded set of values. Moving the caret should not serialize or save the whole document. See ",[160,290,292],{"href":291},"\u002Fen\u002Fconcepts\u002Flifecycle","lifecycle and events"," for subscription cleanup.",[295,296,297],"style",{},"html pre.shiki code .sDD9d, html code.shiki .sDD9d{--shiki-default:#D73A49;--shiki-light:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVPnS, html code.shiki .sVPnS{--shiki-default:#24292E;--shiki-light:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sUNQB, html code.shiki .sUNQB{--shiki-default:#005CC5;--shiki-light:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sgQzM, html code.shiki .sgQzM{--shiki-default:#6F42C1;--shiki-light:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s-HEn, html code.shiki .s-HEn{--shiki-default:#032F62;--shiki-light:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":25,"searchDepth":63,"depth":63,"links":299},[300,301,302,303],{"id":16,"depth":63,"text":17},{"id":167,"depth":63,"text":168},{"id":242,"depth":63,"text":243},{"id":277,"depth":63,"text":278},"Read caret ranges, select text or nodes, and preserve the toolbar's editing target.","md",null,"en",{},true,6,"\u002Fen\u002Fconcepts\u002Fselection","Core concepts",{"title":5,"description":304},"concepts\u002Fselection.en","vHlitWWZpBcpsl5XW8vJMYmQkA41214KdH6Gn9_FCgo",1793045208528]