[{"data":1,"prerenderedAt":309},["ShallowReactive",2],{"quirekit-doc:\u002Fen\u002Fbuild\u002Fcommands":3},{"id":4,"title":5,"body":6,"description":297,"extension":298,"keywords":299,"locale":300,"meta":301,"navigation":302,"order":303,"path":304,"section":305,"seo":306,"stem":307,"__hash__":308},"docs\u002Fbuild\u002Fcommands.en.md","Connect your toolbar",{"type":7,"value":8,"toc":291},"minimark",[9,13,16,21,64,78,89,93,96,158,178,189,193,200,241,252,256,274,287],[10,11,12],"p",{},"The workspace accepts input. Add a Bold button: select text, click to change it through Core, then reflect its current formatting in the button.",[10,14,15],{},"Buttons, shortcuts and application code all call the same Editor commands rather than modifying document JSON themselves.",[17,18,20],"h2",{"id":19},"_1-run-an-action","1. Run an action",[22,23,29],"pre",{"className":24,"code":25,"filename":26,"language":27,"meta":28,"style":28},"language-ts shiki shiki-themes github-light github-light github-dark","editor.chain().focus().toggleBold().run()\n","Bold click handler","ts","",[30,31,32],"code",{"__ignoreMap":28},[33,34,37,41,45,48,51,53,56,58,61],"span",{"class":35,"line":36},"line",1,[33,38,40],{"class":39},"sVPnS","editor.",[33,42,44],{"class":43},"sgQzM","chain",[33,46,47],{"class":39},"().",[33,49,50],{"class":43},"focus",[33,52,47],{"class":39},[33,54,55],{"class":43},"toggleBold",[33,57,47],{"class":39},[33,59,60],{"class":43},"run",[33,62,63],{"class":39},"()\n",[10,65,66,69,70,73,74,77],{},[30,67,68],{},"focus()"," returns input focus, ",[30,71,72],{},"toggleBold()"," changes the current selection, and ",[30,75,76],{},"run()"," submits the chain. Use the existing selection rather than moving to the end of the document.",[10,79,80,81,84,85,88],{},"Use ",[30,82,83],{},"editor.commands.toggleBold()"," for an immediate single action; use ",[30,86,87],{},"chain()"," to combine focus, insertion or formatting.",[17,90,92],{"id":91},"_2-separate-active-and-disabled-state","2. Separate active and disabled state",[10,94,95],{},"A button answers two questions: is this text bold, and can Bold run now?",[22,97,100],{"className":24,"code":98,"filename":99,"language":27,"meta":28,"style":28},"const active = editor.isActive('bold')\nconst enabled = editor.isEditable && editor.can().toggleBold()\n","Ordinary Bold extension state",[30,101,102,131],{"__ignoreMap":28},[33,103,104,108,112,115,118,121,124,128],{"class":35,"line":36},[33,105,107],{"class":106},"sDD9d","const",[33,109,111],{"class":110},"sUNQB"," active",[33,113,114],{"class":106}," =",[33,116,117],{"class":39}," editor.",[33,119,120],{"class":43},"isActive",[33,122,123],{"class":39},"(",[33,125,127],{"class":126},"s-HEn","'bold'",[33,129,130],{"class":39},")\n",[33,132,134,136,139,141,144,147,149,152,154,156],{"class":35,"line":133},2,[33,135,107],{"class":106},[33,137,138],{"class":110}," enabled",[33,140,114],{"class":106},[33,142,143],{"class":39}," editor.isEditable ",[33,145,146],{"class":106},"&&",[33,148,117],{"class":39},[33,150,151],{"class":43},"can",[33,153,47],{"class":39},[33,155,55],{"class":43},[33,157,63],{"class":39},[10,159,160,163,164,167,168,171,172,177],{},[30,161,162],{},"isActive()"," reads formatting; ",[30,165,166],{},"can()"," checks execution without changing content. Call ",[30,169,170],{},"editor.setEditable(false)"," to stop user editing input in the View; disabling controls alone does not stop keyboard editing. Programmatic commands still require application write-permission checks; see ",[173,174,176],"a",{"href":175},"\u002Fen\u002Fconcepts\u002Fcommands","commands and transactions",".",[10,179,180,181,184,185,188],{},"Word formatting may inherit paragraph styles. Its assembly uses ",[30,182,183],{},"readEffectiveDirectEmphasisState()"," for effective bold state; the generic model uses ",[30,186,187],{},"isActive('bold')",". Match button queries to the installed formatting extension.",[17,190,192],{"id":191},"_3-refresh-controls-after-changes","3. Refresh controls after changes",[10,194,195,196,199],{},"Keep one Editor instance and expose only the booleans Vue needs. Subscribe to ",[30,197,198],{},"transaction"," and remove the same listener when exiting.",[22,201,204],{"className":24,"code":202,"filename":203,"language":27,"meta":28,"style":28},"editor.on('transaction', refreshToolbar)\n\u002F\u002F When the component exits:\neditor.off('transaction', refreshToolbar)\n","Subscribe and clean up",[30,205,206,221,227],{"__ignoreMap":28},[33,207,208,210,213,215,218],{"class":35,"line":36},[33,209,40],{"class":39},[33,211,212],{"class":43},"on",[33,214,123],{"class":39},[33,216,217],{"class":126},"'transaction'",[33,219,220],{"class":39},", refreshToolbar)\n",[33,222,223],{"class":35,"line":133},[33,224,226],{"class":225},"sqmzS","\u002F\u002F When the component exits:\n",[33,228,230,232,235,237,239],{"class":35,"line":229},3,[33,231,40],{"class":39},[33,233,234],{"class":43},"off",[33,236,123],{"class":39},[33,238,217],{"class":126},[33,240,220],{"class":39},[10,242,243,244,247,248,251],{},"Implement ",[30,245,246],{},"refreshToolbar"," to read a small set of formatting and history facts. Do not serialize the whole document with ",[30,249,250],{},"getJSON()"," on every selection movement. Saving status, file errors and page counts come from their respective workflows.",[17,253,255],{"id":254},"where-to-look-in-the-complete-project","Where to look in the complete project",[10,257,258,261,262,265,266,269,270,177],{},[30,259,260],{},"workspace.vue"," owns controls and handlers, ",[30,263,264],{},"session.ts"," publishes their state, and ",[30,267,268],{},"assembly\u002F"," supplies model-specific format queries. Inspect them individually in the ",[173,271,273],{"href":272},"\u002Fen\u002Fbuild\u002Freference","reference",[10,275,276,277,281,282,286],{},"A command's boolean result means it handled the action, not that a file was saved. Next, use the same mechanism to ",[173,278,280],{"href":279},"\u002Fen\u002Fbuild\u002Fextension","insert custom content",". See ",[173,283,285],{"href":284},"\u002Fen\u002Fapi\u002Feditor","Editor API"," for details.",[288,289,290],"style",{},"html pre.shiki code .sVPnS, html code.shiki .sVPnS{--shiki-default:#24292E;--shiki-light:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sgQzM, html code.shiki .sgQzM{--shiki-default:#6F42C1;--shiki-light:#6F42C1;--shiki-dark:#B392F0}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);}html pre.shiki code .sDD9d, html code.shiki .sDD9d{--shiki-default:#D73A49;--shiki-light:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sUNQB, html code.shiki .sUNQB{--shiki-default:#005CC5;--shiki-light:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s-HEn, html code.shiki .s-HEn{--shiki-default:#032F62;--shiki-light:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sqmzS, html code.shiki .sqmzS{--shiki-default:#6A737D;--shiki-light:#6A737D;--shiki-dark:#6A737D}",{"title":28,"searchDepth":133,"depth":133,"links":292},[293,294,295,296],{"id":19,"depth":133,"text":20},{"id":91,"depth":133,"text":92},{"id":191,"depth":133,"text":192},{"id":254,"depth":133,"text":255},"Start with a Bold button, then understand commands, enabled state and interface updates.","md",null,"en",{},true,4,"\u002Fen\u002Fbuild\u002Fcommands","Build a product",{"title":5,"description":297},"build\u002Fcommands.en","2crm38RUSj-4LUrrxN06w1Qhvc4-MssmvOLv6tldDi8",1793045210221]