[{"data":1,"prerenderedAt":307},["ShallowReactive",2],{"quirekit-doc:\u002Fen\u002Fguide\u002Fquick-start":3},{"id":4,"title":5,"body":6,"description":297,"extension":298,"keywords":299,"locale":300,"meta":301,"navigation":120,"order":39,"path":302,"section":303,"seo":304,"stem":305,"__hash__":306},"docs\u002Fguide\u002Fquick-start.en.md","Quick start",{"type":7,"value":8,"toc":291},"minimark",[9,19,24,42,45,49,56,198,212,216,219,223,241,245,262,269,287],[10,11,12,13,18],"p",{},"Create an editable text area with Core, common extensions and the browser's native DOM view. For Vue, you can follow the ",[14,15,17],"a",{"href":16},"\u002Fen\u002Fbuild\u002Fproject","single-component tutorial",".",[20,21,23],"h2",{"id":22},"install-the-basics","Install the basics",[25,26,32],"pre",{"className":27,"code":28,"filename":29,"language":30,"meta":31,"style":31},"language-sh shiki shiki-themes github-light github-light github-dark","pnpm add @quirekit\u002Fcore@alpha @quirekit\u002Fstarter-kit@alpha @quirekit\u002Fdom-view@alpha @quirekit\u002Fpm-view@alpha\n","Terminal","sh","",[33,34,35],"code",{"__ignoreMap":31},[36,37,40],"span",{"class":38,"line":39},"line",1,[36,41,28],{},[10,43,44],{},"These packages are MIT; use matching releases. Core provides the instance and commands, StarterKit common content, DOM View browser input, and PM styles whitespace and selection presentation.",[20,46,48],{"id":47},"create-an-editor","Create an editor",[10,50,51,52,55],{},"Add an element with ",[33,53,54],{},"id=\"editor\""," and create the instance after that element exists:",[25,57,62],{"className":58,"code":59,"filename":60,"language":61,"meta":31,"style":31},"language-ts shiki shiki-themes github-light github-light github-dark","import { Editor } from '@quirekit\u002Fcore'\nimport { StarterKit } from '@quirekit\u002Fstarter-kit'\nimport { DomViewExtension } from '@quirekit\u002Fdom-view'\nimport '@quirekit\u002Fpm-view\u002Fstyle\u002Fprosemirror.css'\n\nconst editor = new Editor({\n  element: document.getElementById('editor'),\n  mode: 'dom',\n  extensions: [StarterKit, DomViewExtension],\n  content: '\u003Cp>Hello, QuireKit.\u003C\u002Fp>',\n})\n","Create an instance","ts",[33,63,64,81,94,107,115,122,145,163,175,181,192],{"__ignoreMap":31},[36,65,66,70,74,77],{"class":38,"line":39},[36,67,69],{"class":68},"sDD9d","import",[36,71,73],{"class":72},"sVPnS"," { Editor } ",[36,75,76],{"class":68},"from",[36,78,80],{"class":79},"s-HEn"," '@quirekit\u002Fcore'\n",[36,82,84,86,89,91],{"class":38,"line":83},2,[36,85,69],{"class":68},[36,87,88],{"class":72}," { StarterKit } ",[36,90,76],{"class":68},[36,92,93],{"class":79}," '@quirekit\u002Fstarter-kit'\n",[36,95,97,99,102,104],{"class":38,"line":96},3,[36,98,69],{"class":68},[36,100,101],{"class":72}," { DomViewExtension } ",[36,103,76],{"class":68},[36,105,106],{"class":79}," '@quirekit\u002Fdom-view'\n",[36,108,110,112],{"class":38,"line":109},4,[36,111,69],{"class":68},[36,113,114],{"class":79}," '@quirekit\u002Fpm-view\u002Fstyle\u002Fprosemirror.css'\n",[36,116,118],{"class":38,"line":117},5,[36,119,121],{"emptyLinePlaceholder":120},true,"\n",[36,123,125,128,132,135,138,142],{"class":38,"line":124},6,[36,126,127],{"class":68},"const",[36,129,131],{"class":130},"sUNQB"," editor",[36,133,134],{"class":68}," =",[36,136,137],{"class":68}," new",[36,139,141],{"class":140},"sgQzM"," Editor",[36,143,144],{"class":72},"({\n",[36,146,148,151,154,157,160],{"class":38,"line":147},7,[36,149,150],{"class":72},"  element: document.",[36,152,153],{"class":140},"getElementById",[36,155,156],{"class":72},"(",[36,158,159],{"class":79},"'editor'",[36,161,162],{"class":72},"),\n",[36,164,166,169,172],{"class":38,"line":165},8,[36,167,168],{"class":72},"  mode: ",[36,170,171],{"class":79},"'dom'",[36,173,174],{"class":72},",\n",[36,176,178],{"class":38,"line":177},9,[36,179,180],{"class":72},"  extensions: [StarterKit, DomViewExtension],\n",[36,182,184,187,190],{"class":38,"line":183},10,[36,185,186],{"class":72},"  content: ",[36,188,189],{"class":79},"'\u003Cp>Hello, QuireKit.\u003C\u002Fp>'",[36,191,174],{"class":72},[36,193,195],{"class":38,"line":194},11,[36,196,197],{"class":72},"})\n",[10,199,200,203,204,207,208,211],{},[33,201,202],{},"element"," chooses the location, ",[33,205,206],{},"extensions"," the supported content and behavior, and ",[33,209,210],{},"content"," the initial text. Click to type and use shortcuts for formatting and undo.",[20,213,215],{"id":214},"try-controls-and-content","Try controls and content",[10,217,218],{},"This example adds Bold, Undo and download controls to the same editor. Format selected text, undo, then download actual document JSON.",[220,221],"docs-demo",{"name":222},"core\u002Feditor",[10,224,225,228,229,232,233,236,237,240],{},[33,226,227],{},"core\u002Feditor.vue"," owns controls, ",[33,230,231],{},"core\u002Fcreate.ts"," creates Editor, ",[33,234,235],{},"core\u002Fshortcuts.ts"," adds a shortcut, and ",[33,238,239],{},"shared\u002Fdownload.ts"," handles downloading. Choose files individually in Source. This UI example also needs theme and control styles.",[20,242,244],{"id":243},"release-on-exit","Release on exit",[25,246,249],{"className":58,"code":247,"filename":248,"language":61,"meta":31,"style":31},"editor.destroy()\n","When the page or component exits",[33,250,251],{"__ignoreMap":31},[36,252,253,256,259],{"class":38,"line":39},[36,254,255],{"class":72},"editor.",[36,257,258],{"class":140},"destroy",[36,260,261],{"class":72},"()\n",[10,263,264,265,18],{},"Call this on unmount or when finished, rather than immediately after creation. Example edits last for this session; products add ",[14,266,268],{"href":267},"\u002Fen\u002Fguide\u002Fpersistence","persistence",[10,270,271,272,276,277,281,282,286],{},"Continue with ",[14,273,275],{"href":274},"\u002Fen\u002Fguide\u002Fvue","Vue",", ",[14,278,280],{"href":279},"\u002Fen\u002Fconcepts\u002Fdocument","documents and Schema",", or ",[14,283,285],{"href":284},"\u002Fen\u002Fbuild","build your own editor"," for Canvas and a product interface.",[288,289,290],"style",{},"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 .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 .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}",{"title":31,"searchDepth":83,"depth":83,"links":292},[293,294,295,296],{"id":22,"depth":83,"text":23},{"id":47,"depth":83,"text":48},{"id":214,"depth":83,"text":215},{"id":243,"depth":83,"text":244},"Install the basics, create an editor and try input, formatting and undo.","md",null,"en",{},"\u002Fen\u002Fguide\u002Fquick-start","Getting started",{"title":5,"description":297},"guide\u002Fquick-start.en","_CmtBqL9TqNlJBpRSbL0-INOnyNrNOmXUU_n4piKsaE",1793045208527]