[{"data":1,"prerenderedAt":372},["ShallowReactive",2],{"msfe-doc:\u002Fen\u002Fguide\u002Fquick-start":3},{"id":4,"title":5,"body":6,"description":359,"extension":360,"keywords":361,"locale":365,"meta":366,"navigation":124,"order":35,"path":367,"section":368,"seo":369,"stem":370,"__hash__":371},"docs\u002Fguide\u002Fquick-start.en.md","Quick start",{"type":7,"value":8,"toc":352},"minimark",[9,13,18,21,38,49,64,67,71,82,275,279,282,300,304,308,327,331,338,341,348],[10,11,12],"p",{},"This page puts Markdown editing in your application: create an instance, type, read the source and clean up on exit.",[14,15,17],"h2",{"id":16},"_1-prepare-dependencies","1. Prepare dependencies",[10,19,20],{},"The development version is consumed through workspace packages or locally packed artifacts. A stable public npm release is not yet promised. In a pnpm workspace containing the MSFE packages, add these dependencies to your application:",[22,23,28],"pre",{"className":24,"code":25,"language":26,"meta":27,"style":27},"language-sh shiki shiki-themes github-light github-light github-dark","pnpm add '@quirekit\u002Fmsfe-core@workspace:*' '@quirekit\u002Fmsfe-starter-kit@workspace:*'\n","sh","",[29,30,31],"code",{"__ignoreMap":27},[32,33,36],"span",{"class":34,"line":35},"line",1,[32,37,25],{},[10,39,40,41,44,45,48],{},"For Vue, also add ",[29,42,43],{},"@quirekit\u002Fmsfe-vue","; for React, use ",[29,46,47],{},"@quirekit\u002Fmsfe-react",". Install the peer dependencies matching the framework version in your application.",[10,50,51,52,55,56,59,60,63],{},"Install local tarballs through the package manager and retain their published ",[29,53,54],{},"dist"," and ",[29,57,58],{},"types"," directories. StarterKit's type entry includes the command declarations from its installed plugins, so methods such as ",[29,61,62],{},"editor.commands.toggleBold()"," require no additional plugin imports for typing.",[10,65,66],{},"Plain installations may use different dependencies from this repository. Release preparation remains incomplete; use the acquired version’s support boundaries for long sessions and diagram behavior.",[14,68,70],{"id":69},"_2-create-an-instance","2. Create an instance",[10,72,73,74,77,78,81],{},"Provide a mounted DOM element. ",[29,75,76],{},"markdown"," supplies the initial text, and ",[29,79,80],{},"extensions"," selects the installed features.",[22,83,87],{"className":84,"code":85,"language":86,"meta":27,"style":27},"language-ts shiki shiki-themes github-light github-light github-dark","import { createMsfeEditor } from '@quirekit\u002Fmsfe-core'\nimport { StarterKit } from '@quirekit\u002Fmsfe-starter-kit'\n\nconst parent = document.querySelector\u003CHTMLElement>('#editor')!\nconst editor = createMsfeEditor({\n  parent,\n  markdown: '# Hello, Markdown\\n\\nStart writing.',\n  mode: 'live',\n  extensions: [StarterKit],\n})\n\n\u002F\u002F Read on save; there is no need to serialize the document on every keystroke.\nconst markdown = editor.getMarkdown()\n\n\u002F\u002F Clean up when the host leaves the page.\n\u002F\u002F editor.destroy()\n","ts",[29,88,89,106,119,126,164,180,186,204,215,221,227,232,239,258,263,269],{"__ignoreMap":27},[32,90,91,95,99,102],{"class":34,"line":35},[32,92,94],{"class":93},"sDD9d","import",[32,96,98],{"class":97},"sVPnS"," { createMsfeEditor } ",[32,100,101],{"class":93},"from",[32,103,105],{"class":104},"s-HEn"," '@quirekit\u002Fmsfe-core'\n",[32,107,109,111,114,116],{"class":34,"line":108},2,[32,110,94],{"class":93},[32,112,113],{"class":97}," { StarterKit } ",[32,115,101],{"class":93},[32,117,118],{"class":104}," '@quirekit\u002Fmsfe-starter-kit'\n",[32,120,122],{"class":34,"line":121},3,[32,123,125],{"emptyLinePlaceholder":124},true,"\n",[32,127,129,132,136,139,142,146,149,152,155,158,161],{"class":34,"line":128},4,[32,130,131],{"class":93},"const",[32,133,135],{"class":134},"sUNQB"," parent",[32,137,138],{"class":93}," =",[32,140,141],{"class":97}," document.",[32,143,145],{"class":144},"sgQzM","querySelector",[32,147,148],{"class":97},"\u003C",[32,150,151],{"class":144},"HTMLElement",[32,153,154],{"class":97},">(",[32,156,157],{"class":104},"'#editor'",[32,159,160],{"class":97},")",[32,162,163],{"class":93},"!\n",[32,165,167,169,172,174,177],{"class":34,"line":166},5,[32,168,131],{"class":93},[32,170,171],{"class":134}," editor",[32,173,138],{"class":93},[32,175,176],{"class":144}," createMsfeEditor",[32,178,179],{"class":97},"({\n",[32,181,183],{"class":34,"line":182},6,[32,184,185],{"class":97},"  parent,\n",[32,187,189,192,195,198,201],{"class":34,"line":188},7,[32,190,191],{"class":97},"  markdown: ",[32,193,194],{"class":104},"'# Hello, Markdown",[32,196,197],{"class":134},"\\n\\n",[32,199,200],{"class":104},"Start writing.'",[32,202,203],{"class":97},",\n",[32,205,207,210,213],{"class":34,"line":206},8,[32,208,209],{"class":97},"  mode: ",[32,211,212],{"class":104},"'live'",[32,214,203],{"class":97},[32,216,218],{"class":34,"line":217},9,[32,219,220],{"class":97},"  extensions: [StarterKit],\n",[32,222,224],{"class":34,"line":223},10,[32,225,226],{"class":97},"})\n",[32,228,230],{"class":34,"line":229},11,[32,231,125],{"emptyLinePlaceholder":124},[32,233,235],{"class":34,"line":234},12,[32,236,238],{"class":237},"sqmzS","\u002F\u002F Read on save; there is no need to serialize the document on every keystroke.\n",[32,240,242,244,247,249,252,255],{"class":34,"line":241},13,[32,243,131],{"class":93},[32,245,246],{"class":134}," markdown",[32,248,138],{"class":93},[32,250,251],{"class":97}," editor.",[32,253,254],{"class":144},"getMarkdown",[32,256,257],{"class":97},"()\n",[32,259,261],{"class":34,"line":260},14,[32,262,125],{"emptyLinePlaceholder":124},[32,264,266],{"class":34,"line":265},15,[32,267,268],{"class":237},"\u002F\u002F Clean up when the host leaves the page.\n",[32,270,272],{"class":34,"line":271},16,[32,273,274],{"class":237},"\u002F\u002F editor.destroy()\n",[14,276,278],{"id":277},"_3-add-vue-and-controls","3. Add Vue and controls",[10,280,281],{},"Type in the example, switch source and live modes, then read the current Markdown.",[10,283,284,287,288,291,292,295,296,299],{},[29,285,286],{},"basic\u002Feditor.vue"," owns the interface and instance, ",[29,289,290],{},"shared\u002Fappearance.ts"," configures appearance, ",[29,293,294],{},"shared\u002Fmessages.ts"," supplies example labels, and ",[29,297,298],{},"shared\u002Ftypes.ts"," defines locale types. Choose the file you need in Source.",[301,302],"msfe-demo",{"name":303},"basic\u002Feditor",[14,305,307],{"id":306},"next-steps","Next steps",[10,309,310,311,316,317,321,322,326],{},"Read ",[312,313,315],"a",{"href":314},"\u002Fen\u002Fguide\u002Fvue","Vue integration"," or ",[312,318,320],{"href":319},"\u002Fen\u002Fguide\u002Freact","React integration"," for framework lifecycle and custom components. To connect existing storage, continue to ",[312,323,325],{"href":324},"\u002Fen\u002Fguide\u002Fsaving","Reading and saving",".",[14,328,330],{"id":329},"before-considering-integration-complete","Before considering integration complete",[10,332,333,334,326],{},"Give the parent a real width and reasonable minimum height, label the editor and connect cleanup to route\u002Fcomponent lifetime. Feature defaults are not your complete product theme; follow ",[312,335,337],{"href":336},"\u002Fen\u002Fcustomization\u002Ftheme","UI and themes",[10,339,340],{},"Keep one CodeMirror state\u002Fview dependency identity when linking workspace source. Production consumers should use public entries and their own built packages, not private source paths. This site's aliases are repository-development configuration.",[10,342,343,344,326],{},"Verify typing, modes, readonly, saving and teardown, then choose optional capabilities from the ",[312,345,347],{"href":346},"\u002Fen\u002Ffeatures\u002Fcatalog","feature catalog",[349,350,351],"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}html pre.shiki code .sqmzS, html code.shiki .sqmzS{--shiki-default:#6A737D;--shiki-light:#6A737D;--shiki-dark:#6A737D}",{"title":27,"searchDepth":108,"depth":108,"links":353},[354,355,356,357,358],{"id":16,"depth":108,"text":17},{"id":69,"depth":108,"text":70},{"id":277,"depth":108,"text":278},{"id":306,"depth":108,"text":307},{"id":329,"depth":108,"text":330},"Create your first editor through public package exports, then edit, read, and clean up.","md",[362,363,364],"install","starter kit","introduction","en",{},"\u002Fen\u002Fguide\u002Fquick-start","Getting started",{"title":5,"description":359},"guide\u002Fquick-start.en","r3xBDIpU1EySjH1_rtYT3hkT0BRIh5ejvFfbhwpd8IQ",1793046311195]