[{"data":1,"prerenderedAt":424},["ShallowReactive",2],{"quirekit-doc:\u002Fen\u002Fconcepts\u002Flifecycle":3},{"id":4,"title":5,"body":6,"description":414,"extension":415,"keywords":416,"locale":417,"meta":418,"navigation":217,"order":221,"path":419,"section":420,"seo":421,"stem":422,"__hash__":423},"docs\u002Fconcepts\u002Flifecycle.en.md","Lifecycle and events",{"type":7,"value":8,"toc":408},"minimark",[9,13,18,30,50,75,79,172,175,179,341,365,387,391,394,404],[10,11,12],"p",{},"A page normally creates one Editor until the user leaves. Input changes its state; application code observes events without recreating the instance.",[14,15,17],"h2",{"id":16},"create-mount-and-exit","Create, mount and exit",[10,19,20,21,25,26,29],{},"In Vue, create a view-backed Editor after ",[22,23,24],"code",{},"onMounted"," and call ",[22,27,28],{},"destroy()"," on exit. Release application subscriptions and asynchronous tasks too.",[10,31,32,33,38,39,42,43,46,47,49],{},"See ",[34,35,37],"a",{"href":36},"\u002Fen\u002Fguide\u002Fvue","Vue integration"," for one complete component. A headless instance can be mounted later with ",[22,40,41],{},"mount()",". ",[22,44,45],{},"unmount()"," keeps content; ",[22,48,28],{}," ends the instance.",[10,51,52,55,56,59,60,63,64,66,67,70,71,74],{},[22,53,54],{},"beforeCreate"," and ",[22,57,58],{},"create"," fire synchronously during construction. Register ",[22,61,62],{},"onCreate({ editor })"," through creation options and use its supplied instance. Subscribing to ",[22,65,58],{}," after construction misses the event. ",[22,68,69],{},"mount"," fires when the primary View is ready, and ",[22,72,73],{},"unmount"," when released; mode changes also pass through these phases.",[14,76,78],{"id":77},"choose-an-event","Choose an event",[80,81,82,98],"table",{},[83,84,85],"thead",{},[86,87,88,92,95],"tr",{},[89,90,91],"th",{},"Concern",[89,93,94],{},"Event",[89,96,97],{},"Typical use",[99,100,101,115,128,141,158],"tbody",{},[86,102,103,107,112],{},[104,105,106],"td",{},"Content changes",[104,108,109],{},[22,110,111],{},"update",[104,113,114],{},"Mark unsaved changes",[86,116,117,120,125],{},[104,118,119],{},"Selection changes",[104,121,122],{},[22,123,124],{},"selectionUpdate",[104,126,127],{},"Refresh selection-related interface",[86,129,130,133,138],{},[104,131,132],{},"Accepted transaction",[104,134,135],{},[22,136,137],{},"transaction",[104,139,140],{},"Refresh toolbar state centrally",[86,142,143,146,155],{},[104,144,145],{},"Focus changes",[104,147,148,151,152],{},[22,149,150],{},"focus"," \u002F ",[22,153,154],{},"blur",[104,156,157],{},"Focus appearance and interface visibility",[86,159,160,163,169],{},[104,161,162],{},"Primary View mounted\u002Freleased",[104,164,165,151,167],{},[22,166,69],{},[22,168,73],{},[104,170,171],{},"Bind and release resources owned by that View",[10,173,174],{},"Subscribe only where needed. Moving the cursor is not a content edit and does not require serializing the document.",[14,176,178],{"id":177},"keep-the-listener-for-cleanup","Keep the listener for cleanup",[180,181,187],"pre",{"className":182,"code":183,"filename":184,"language":185,"meta":186,"style":186},"language-ts shiki shiki-themes github-light github-light github-dark","import type { QuireEditorUpdateEvent } from '@quirekit\u002Fcore'\n\nconst onUpdate = ({ editor, previousState }: QuireEditorUpdateEvent) => {\n  if (!previousState.doc.eq(editor.state.doc)) dirty = true\n}\neditor.on('update', onUpdate)\n\n\u002F\u002F When the page exits:\neditor.off('update', onUpdate)\n","Register and remove the same function","ts","",[22,188,189,212,219,263,291,297,315,320,327],{"__ignoreMap":186},[190,191,194,198,201,205,208],"span",{"class":192,"line":193},"line",1,[190,195,197],{"class":196},"sDD9d","import",[190,199,200],{"class":196}," type",[190,202,204],{"class":203},"sVPnS"," { QuireEditorUpdateEvent } ",[190,206,207],{"class":196},"from",[190,209,211],{"class":210},"s-HEn"," '@quirekit\u002Fcore'\n",[190,213,215],{"class":192,"line":214},2,[190,216,218],{"emptyLinePlaceholder":217},true,"\n",[190,220,222,225,229,232,235,239,242,245,248,251,254,257,260],{"class":192,"line":221},3,[190,223,224],{"class":196},"const",[190,226,228],{"class":227},"sgQzM"," onUpdate",[190,230,231],{"class":196}," =",[190,233,234],{"class":203}," ({ ",[190,236,238],{"class":237},"sde8i","editor",[190,240,241],{"class":203},", ",[190,243,244],{"class":237},"previousState",[190,246,247],{"class":203}," }",[190,249,250],{"class":196},":",[190,252,253],{"class":227}," QuireEditorUpdateEvent",[190,255,256],{"class":203},") ",[190,258,259],{"class":196},"=>",[190,261,262],{"class":203}," {\n",[190,264,266,269,272,275,278,281,284,287],{"class":192,"line":265},4,[190,267,268],{"class":196},"  if",[190,270,271],{"class":203}," (",[190,273,274],{"class":196},"!",[190,276,277],{"class":203},"previousState.doc.",[190,279,280],{"class":227},"eq",[190,282,283],{"class":203},"(editor.state.doc)) dirty ",[190,285,286],{"class":196},"=",[190,288,290],{"class":289},"sUNQB"," true\n",[190,292,294],{"class":192,"line":293},5,[190,295,296],{"class":203},"}\n",[190,298,300,303,306,309,312],{"class":192,"line":299},6,[190,301,302],{"class":203},"editor.",[190,304,305],{"class":227},"on",[190,307,308],{"class":203},"(",[190,310,311],{"class":210},"'update'",[190,313,314],{"class":203},", onUpdate)\n",[190,316,318],{"class":192,"line":317},7,[190,319,218],{"emptyLinePlaceholder":217},[190,321,323],{"class":192,"line":322},8,[190,324,326],{"class":325},"sqmzS","\u002F\u002F When the page exits:\n",[190,328,330,332,335,337,339],{"class":192,"line":329},9,[190,331,302],{"class":203},[190,333,334],{"class":227},"off",[190,336,308],{"class":203},[190,338,311],{"class":210},[190,340,314],{"class":203},[10,342,343,346,347,350,351,353,354,357,358,361,362,364],{},[22,344,345],{},"dirty"," is application-owned unsaved state. ",[22,348,349],{},"setEditable()"," also emits ",[22,352,111],{}," by default; compare documents to avoid treating read-only changes as edits. Content replacement with ",[22,355,356],{},"emitUpdate: false"," skips the event, so restoration establishes its baseline explicitly. Do not unconditionally call ",[22,359,360],{},"setContent()"," inside ",[22,363,111],{},", repeatedly replacing the user's content.",[10,366,367,369,370,373,374,377,378,381,382,386],{},[22,368,137],{}," carries the root transaction and ",[22,371,372],{},"appendedTransactions",". Its ",[22,375,376],{},"editor.state"," includes accepted plugin appends. Looking only at the root's ",[22,379,380],{},"docChanged"," misses appended edits; treating every transaction as content worth saving also overcounts. See the ",[34,383,385],{"href":384},"\u002Fen\u002Fapi\u002Foptions","complete event map",".",[14,388,390],{"id":389},"asynchronous-results-have-a-lifecycle-too","Asynchronous results have a lifecycle too",[10,392,393],{},"When loading or saving finishes, verify the page and task are still current. Older results must not overwrite drafts or recreate an unmounted instance.",[10,395,396,397,399,400,386],{},"Classic product configuration updates differ from Core content ",[22,398,111],{},"; see ",[34,401,403],{"href":402},"\u002Fen\u002Fclassic\u002Fconfiguration","Classic configuration",[405,406,407],"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 .s-HEn, html code.shiki .s-HEn{--shiki-default:#032F62;--shiki-light:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sgQzM, html code.shiki .sgQzM{--shiki-default:#6F42C1;--shiki-light:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sde8i, html code.shiki .sde8i{--shiki-default:#E36209;--shiki-light:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sUNQB, html code.shiki .sUNQB{--shiki-default:#005CC5;--shiki-light:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sqmzS, html code.shiki .sqmzS{--shiki-default:#6A737D;--shiki-light:#6A737D;--shiki-dark:#6A737D}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":186,"searchDepth":214,"depth":214,"links":409},[410,411,412,413],{"id":16,"depth":214,"text":17},{"id":77,"depth":214,"text":78},{"id":177,"depth":214,"text":178},{"id":389,"depth":214,"text":390},"Own Editor in a component and subscribe to content, selection or transaction changes as needed.","md",null,"en",{},"\u002Fen\u002Fconcepts\u002Flifecycle","Core concepts",{"title":5,"description":414},"concepts\u002Flifecycle.en","qMZkV9zQj0egKb-v7rVKVguj-AhvhCLOvutrX_md9f4",1793045210458]