[{"data":1,"prerenderedAt":1421},["ShallowReactive",2],{"navigation_docs":3,"-getting-started-usage":278,"-getting-started-usage-surround":1416},[4,26,57,73,94,237,257],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":25},"Getting started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15,20],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"icon":24},"Usage","\u002Fgetting-started\u002Fusage","1.getting-started\u002F3.usage","i-lucide-play",false,{"title":27,"icon":28,"path":29,"stem":30,"children":31,"page":25},"Autocomplete","i-lucide-list-tree","\u002Fautocomplete","2.autocomplete",[32,37,42,47,52],{"title":33,"path":34,"stem":35,"icon":36},"Tour","\u002Fautocomplete\u002Ftour","2.autocomplete\u002F1.tour","i-lucide-map",{"title":38,"path":39,"stem":40,"icon":41},"Contexts","\u002Fautocomplete\u002Fcontexts","2.autocomplete\u002F2.contexts","i-lucide-crosshair",{"title":43,"path":44,"stem":45,"icon":46},"Chaining","\u002Fautocomplete\u002Fchaining","2.autocomplete\u002F3.chaining","i-lucide-link",{"title":48,"path":49,"stem":50,"icon":51},"Configuration","\u002Fautocomplete\u002Fconfiguration","2.autocomplete\u002F4.configuration","i-lucide-settings",{"title":53,"path":54,"stem":55,"icon":56},"Theming","\u002Fautocomplete\u002Ftheming","2.autocomplete\u002F5.theming","i-lucide-palette",{"title":58,"icon":59,"path":60,"stem":61,"children":62,"page":25},"Components","i-lucide-component","\u002Fcomponents","3.components",[63,68],{"title":64,"path":65,"stem":66,"icon":67},"Manifest","\u002Fcomponents\u002Fmanifest","3.components\u002F1.manifest","i-lucide-file-json",{"title":69,"path":70,"stem":71,"icon":72},"Vite plugin","\u002Fcomponents\u002Fvite-plugin","3.components\u002F2.vite-plugin","i-simple-icons-vite",{"title":74,"icon":75,"path":76,"stem":77,"children":78,"page":25},"Bindings","i-lucide-braces","\u002Fbindings","4.bindings",[79,84,89],{"title":80,"path":81,"stem":82,"icon":83},"Roots","\u002Fbindings\u002Froots","4.bindings\u002F1.roots","i-lucide-git-branch",{"title":85,"path":86,"stem":87,"icon":88},"Data and meta","\u002Fbindings\u002Fdata-and-meta","4.bindings\u002F2.data-and-meta","i-lucide-database",{"title":90,"path":91,"stem":92,"icon":93},"Component scopes","\u002Fbindings\u002Fcomponent-scopes","4.bindings\u002F3.component-scopes","i-lucide-repeat",{"title":95,"icon":96,"path":97,"stem":98,"children":99},"Plugins","i-lucide-puzzle","\u002Fplugins","5.plugins",[100,102,107,137,211],{"title":95,"path":97,"stem":101,"icon":96},"5.plugins\u002Findex",{"title":103,"path":104,"stem":105,"icon":106},"Authoring","\u002Fplugins\u002Fauthoring","5.plugins\u002F1.authoring","i-lucide-pencil",{"title":108,"icon":109,"path":110,"stem":111,"children":112,"page":25},"Defaults","i-lucide-package-check","\u002Fplugins\u002Fdefaults","5.plugins\u002F2.defaults",[113,117,121,125,129,133],{"title":114,"path":115,"stem":116},"alert","\u002Fplugins\u002Fdefaults\u002Falert","5.plugins\u002F2.defaults\u002F0.alert",{"title":118,"path":119,"stem":120},"attributes","\u002Fplugins\u002Fdefaults\u002Fattributes","5.plugins\u002F2.defaults\u002F1.attributes",{"title":122,"path":123,"stem":124},"components","\u002Fplugins\u002Fdefaults\u002Fcomponents","5.plugins\u002F2.defaults\u002F2.components",{"title":126,"path":127,"stem":128},"frontmatter","\u002Fplugins\u002Fdefaults\u002Ffrontmatter","5.plugins\u002F2.defaults\u002F3.frontmatter",{"title":130,"path":131,"stem":132},"html","\u002Fplugins\u002Fdefaults\u002Fhtml","5.plugins\u002F2.defaults\u002F4.html",{"title":134,"path":135,"stem":136},"task-list","\u002Fplugins\u002Fdefaults\u002Ftask-list","5.plugins\u002F2.defaults\u002F5.task-list",{"title":138,"icon":139,"path":140,"stem":141,"children":142,"page":25},"Built-in","i-lucide-package","\u002Fplugins\u002Fbuilt-in","5.plugins\u002F3.built-in",[143,147,151,155,159,163,167,171,175,179,183,187,191,195,199,203,207],{"title":144,"path":145,"stem":146},"binding","\u002Fplugins\u002Fbuilt-in\u002Fbinding","5.plugins\u002F3.built-in\u002F0.binding",{"title":148,"path":149,"stem":150},"breaks","\u002Fplugins\u002Fbuilt-in\u002Fbreaks","5.plugins\u002F3.built-in\u002F1.breaks",{"title":152,"path":153,"stem":154},"punctuation","\u002Fplugins\u002Fbuilt-in\u002Fpunctuation","5.plugins\u002F3.built-in\u002F10.punctuation",{"title":156,"path":157,"stem":158},"rangi","\u002Fplugins\u002Fbuilt-in\u002Frangi","5.plugins\u002F3.built-in\u002F11.rangi",{"title":160,"path":161,"stem":162},"security","\u002Fplugins\u002Fbuilt-in\u002Fsecurity","5.plugins\u002F3.built-in\u002F12.security",{"title":164,"path":165,"stem":166},"shiki","\u002Fplugins\u002Fbuilt-in\u002Fshiki","5.plugins\u002F3.built-in\u002F13.shiki",{"title":168,"path":169,"stem":170},"summary","\u002Fplugins\u002Fbuilt-in\u002Fsummary","5.plugins\u002F3.built-in\u002F14.summary",{"title":172,"path":173,"stem":174},"toc","\u002Fplugins\u002Fbuilt-in\u002Ftoc","5.plugins\u002F3.built-in\u002F15.toc",{"title":176,"path":177,"stem":178},"twoslash","\u002Fplugins\u002Fbuilt-in\u002Ftwoslash","5.plugins\u002F3.built-in\u002F16.twoslash",{"title":180,"path":181,"stem":182},"code-blocks","\u002Fplugins\u002Fbuilt-in\u002Fcode-blocks","5.plugins\u002F3.built-in\u002F2.code-blocks",{"title":184,"path":185,"stem":186},"emoji","\u002Fplugins\u002Fbuilt-in\u002Femoji","5.plugins\u002F3.built-in\u002F3.emoji",{"title":188,"path":189,"stem":190},"footnotes","\u002Fplugins\u002Fbuilt-in\u002Ffootnotes","5.plugins\u002F3.built-in\u002F4.footnotes",{"title":192,"path":193,"stem":194},"headings","\u002Fplugins\u002Fbuilt-in\u002Fheadings","5.plugins\u002F3.built-in\u002F5.headings",{"title":196,"path":197,"stem":198},"json-render","\u002Fplugins\u002Fbuilt-in\u002Fjson-render","5.plugins\u002F3.built-in\u002F6.json-render",{"title":200,"path":201,"stem":202},"math","\u002Fplugins\u002Fbuilt-in\u002Fmath","5.plugins\u002F3.built-in\u002F7.math",{"title":204,"path":205,"stem":206},"mermaid","\u002Fplugins\u002Fbuilt-in\u002Fmermaid","5.plugins\u002F3.built-in\u002F8.mermaid",{"title":208,"path":209,"stem":210},"model","\u002Fplugins\u002Fbuilt-in\u002Fmodel","5.plugins\u002F3.built-in\u002F9.model",{"title":212,"icon":213,"path":214,"stem":215,"children":216,"page":25},"Ecosystem","i-lucide-boxes","\u002Fplugins\u002Fecosystem","5.plugins\u002F4.ecosystem",[217,221,225,229,233],{"title":218,"path":219,"stem":220},"email","\u002Fplugins\u002Fecosystem\u002Femail","5.plugins\u002F4.ecosystem\u002F0.email",{"title":222,"path":223,"stem":224},"etiket","\u002Fplugins\u002Fecosystem\u002Fetiket","5.plugins\u002F4.ecosystem\u002F1.etiket",{"title":226,"path":227,"stem":228},"flint","\u002Fplugins\u002Fecosystem\u002Fflint","5.plugins\u002F4.ecosystem\u002F2.flint",{"title":230,"path":231,"stem":232},"page-break","\u002Fplugins\u002Fecosystem\u002Fpage-break","5.plugins\u002F4.ecosystem\u002F3.page-break",{"title":234,"path":235,"stem":236},"vega","\u002Fplugins\u002Fecosystem\u002Fvega","5.plugins\u002F4.ecosystem\u002F4.vega",{"title":238,"icon":239,"path":240,"stem":241,"children":242,"page":25},"Agents","i-lucide-bot","\u002Fagents","6.agents",[243,247,252],{"title":244,"path":245,"stem":246,"icon":239},"Overview","\u002Fagents\u002Foverview","6.agents\u002F1.overview",{"title":248,"path":249,"stem":250,"icon":251},"Tools","\u002Fagents\u002Ftools","6.agents\u002F2.tools","i-lucide-wrench",{"title":253,"path":254,"stem":255,"icon":256},"Targets","\u002Fagents\u002Ftargets","6.agents\u002F3.targets","i-lucide-target",{"title":258,"icon":259,"path":260,"stem":261,"children":262,"page":25},"Reference","i-lucide-book-open","\u002Freference","7.reference",[263,268,273],{"title":264,"path":265,"stem":266,"icon":267},"Options","\u002Freference\u002Foptions","7.reference\u002F1.options","i-lucide-sliders-horizontal",{"title":269,"path":270,"stem":271,"icon":272},"API","\u002Freference\u002Fapi","7.reference\u002F2.api","i-lucide-code",{"title":274,"path":275,"stem":276,"icon":277},"Commands","\u002Freference\u002Fcommands","7.reference\u002F3.commands","i-lucide-terminal",{"id":279,"title":21,"body":280,"description":1409,"extension":1410,"links":1411,"meta":1412,"navigation":1413,"path":22,"seo":1414,"stem":23,"__hash__":1415},"docs\u002F1.getting-started\u002F3.usage.md",{"type":281,"value":282,"toc":1402},"minimark",[283,288,712,732,736,1164,1168,1259,1263,1276,1385,1389,1398],[284,285,287],"h2",{"id":286},"vanilla","Vanilla",[289,290,295],"pre",{"className":291,"code":292,"language":293,"meta":294,"style":294},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { basicSetup } from 'codemirror'\nimport { EditorView } from '@codemirror\u002Fview'\nimport { comark } from 'comark-codemirror'\nimport { presetBuiltins } from 'comark-codemirror\u002Fpresets\u002Fbuiltins'\n\nconst view = new EditorView({\n  parent: document.querySelector('#editor')!,\n  doc: '# Hello\\n',\n  extensions: [\n    basicSetup,\n    comark({\n      plugins: presetBuiltins(),\n      components: [\n        { name: 'card', kind: 'block', props: { title: { type: 'string', required: true }, variant: { enum: ['soft', 'outline'] } }, slots: [{ name: 'footer' }] },\n      ],\n    }),\n  ],\n})\n","ts","",[296,297,298,331,352,373,394,401,426,461,482,493,501,511,526,536,678,686,696,704],"code",{"__ignoreMap":294},[299,300,303,307,311,315,318,321,324,328],"span",{"class":301,"line":302},"line",1,[299,304,306],{"class":305},"s7zQu","import",[299,308,310],{"class":309},"sMK4o"," {",[299,312,314],{"class":313},"sTEyZ"," basicSetup",[299,316,317],{"class":309}," }",[299,319,320],{"class":305}," from",[299,322,323],{"class":309}," '",[299,325,327],{"class":326},"sfazB","codemirror",[299,329,330],{"class":309},"'\n",[299,332,334,336,338,341,343,345,347,350],{"class":301,"line":333},2,[299,335,306],{"class":305},[299,337,310],{"class":309},[299,339,340],{"class":313}," EditorView",[299,342,317],{"class":309},[299,344,320],{"class":305},[299,346,323],{"class":309},[299,348,349],{"class":326},"@codemirror\u002Fview",[299,351,330],{"class":309},[299,353,355,357,359,362,364,366,368,371],{"class":301,"line":354},3,[299,356,306],{"class":305},[299,358,310],{"class":309},[299,360,361],{"class":313}," comark",[299,363,317],{"class":309},[299,365,320],{"class":305},[299,367,323],{"class":309},[299,369,370],{"class":326},"comark-codemirror",[299,372,330],{"class":309},[299,374,376,378,380,383,385,387,389,392],{"class":301,"line":375},4,[299,377,306],{"class":305},[299,379,310],{"class":309},[299,381,382],{"class":313}," presetBuiltins",[299,384,317],{"class":309},[299,386,320],{"class":305},[299,388,323],{"class":309},[299,390,391],{"class":326},"comark-codemirror\u002Fpresets\u002Fbuiltins",[299,393,330],{"class":309},[299,395,397],{"class":301,"line":396},5,[299,398,400],{"emptyLinePlaceholder":399},true,"\n",[299,402,404,408,411,414,417,420,423],{"class":301,"line":403},6,[299,405,407],{"class":406},"spNyl","const",[299,409,410],{"class":313}," view ",[299,412,413],{"class":309},"=",[299,415,416],{"class":309}," new",[299,418,340],{"class":419},"s2Zo4",[299,421,422],{"class":313},"(",[299,424,425],{"class":309},"{\n",[299,427,429,433,436,439,442,445,447,450,453,455,458],{"class":301,"line":428},7,[299,430,432],{"class":431},"swJcz","  parent",[299,434,435],{"class":309},":",[299,437,438],{"class":313}," document",[299,440,441],{"class":309},".",[299,443,444],{"class":419},"querySelector",[299,446,422],{"class":313},[299,448,449],{"class":309},"'",[299,451,452],{"class":326},"#editor",[299,454,449],{"class":309},[299,456,457],{"class":313},")",[299,459,460],{"class":309},"!,\n",[299,462,464,467,469,471,474,477,479],{"class":301,"line":463},8,[299,465,466],{"class":431},"  doc",[299,468,435],{"class":309},[299,470,323],{"class":309},[299,472,473],{"class":326},"# Hello",[299,475,476],{"class":313},"\\n",[299,478,449],{"class":309},[299,480,481],{"class":309},",\n",[299,483,485,488,490],{"class":301,"line":484},9,[299,486,487],{"class":431},"  extensions",[299,489,435],{"class":309},[299,491,492],{"class":313}," [\n",[299,494,496,499],{"class":301,"line":495},10,[299,497,498],{"class":313},"    basicSetup",[299,500,481],{"class":309},[299,502,504,507,509],{"class":301,"line":503},11,[299,505,506],{"class":419},"    comark",[299,508,422],{"class":313},[299,510,425],{"class":309},[299,512,514,517,519,521,524],{"class":301,"line":513},12,[299,515,516],{"class":431},"      plugins",[299,518,435],{"class":309},[299,520,382],{"class":419},[299,522,523],{"class":313},"()",[299,525,481],{"class":309},[299,527,529,532,534],{"class":301,"line":528},13,[299,530,531],{"class":431},"      components",[299,533,435],{"class":309},[299,535,492],{"class":313},[299,537,539,542,545,547,549,552,554,557,560,562,564,567,569,571,574,576,578,581,583,585,588,590,592,595,597,599,602,604,608,611,614,616,618,621,623,626,628,631,633,635,637,640,642,645,648,650,653,655,657,660,662,664,666,669,671,673,675],{"class":301,"line":538},14,[299,540,541],{"class":309},"        {",[299,543,544],{"class":431}," name",[299,546,435],{"class":309},[299,548,323],{"class":309},[299,550,551],{"class":326},"card",[299,553,449],{"class":309},[299,555,556],{"class":309},",",[299,558,559],{"class":431}," kind",[299,561,435],{"class":309},[299,563,323],{"class":309},[299,565,566],{"class":326},"block",[299,568,449],{"class":309},[299,570,556],{"class":309},[299,572,573],{"class":431}," props",[299,575,435],{"class":309},[299,577,310],{"class":309},[299,579,580],{"class":431}," title",[299,582,435],{"class":309},[299,584,310],{"class":309},[299,586,587],{"class":431}," type",[299,589,435],{"class":309},[299,591,323],{"class":309},[299,593,594],{"class":326},"string",[299,596,449],{"class":309},[299,598,556],{"class":309},[299,600,601],{"class":431}," required",[299,603,435],{"class":309},[299,605,607],{"class":606},"sfNiH"," true",[299,609,610],{"class":309}," },",[299,612,613],{"class":431}," variant",[299,615,435],{"class":309},[299,617,310],{"class":309},[299,619,620],{"class":431}," enum",[299,622,435],{"class":309},[299,624,625],{"class":313}," [",[299,627,449],{"class":309},[299,629,630],{"class":326},"soft",[299,632,449],{"class":309},[299,634,556],{"class":309},[299,636,323],{"class":309},[299,638,639],{"class":326},"outline",[299,641,449],{"class":309},[299,643,644],{"class":313},"] ",[299,646,647],{"class":309},"}",[299,649,610],{"class":309},[299,651,652],{"class":431}," slots",[299,654,435],{"class":309},[299,656,625],{"class":313},[299,658,659],{"class":309},"{",[299,661,544],{"class":431},[299,663,435],{"class":309},[299,665,323],{"class":309},[299,667,668],{"class":326},"footer",[299,670,449],{"class":309},[299,672,317],{"class":309},[299,674,644],{"class":313},[299,676,677],{"class":309},"},\n",[299,679,681,684],{"class":301,"line":680},15,[299,682,683],{"class":313},"      ]",[299,685,481],{"class":309},[299,687,689,692,694],{"class":301,"line":688},16,[299,690,691],{"class":309},"    }",[299,693,457],{"class":313},[299,695,481],{"class":309},[299,697,699,702],{"class":301,"line":698},17,[299,700,701],{"class":313},"  ]",[299,703,481],{"class":309},[299,705,707,709],{"class":301,"line":706},18,[299,708,647],{"class":309},[299,710,711],{"class":313},")\n",[713,714,715,718,719,723,724,727,728,441],"p",{},[296,716,717],{},"comark()"," adds the language, the completion menus, the keymap, lint, hover and the theme. It registers its completion source through language data, so ",[720,721,722],"strong",{},"do not"," pass ",[296,725,726],{},"autocompletion({ override })"," — that would replace it. Add your own sources as ",[729,730,731],"a",{"href":104},"plugins",[284,733,735],{"id":734},"vue","Vue",[289,737,740],{"className":738,"code":739,"language":734,"meta":294,"style":294},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { EditorView } from '@codemirror\u002Fview'\nimport { basicSetup } from 'codemirror'\nimport { comark } from 'comark-codemirror'\n\nconst model = defineModel\u003Cstring>({ default: '' })\nconst el = ref\u003CHTMLElement>()\nlet view: EditorView | undefined\n\nonMounted(() => {\n  view = new EditorView({\n    parent: el.value!,\n    doc: model.value,\n    extensions: [\n      basicSetup,\n      comark(),\n      EditorView.updateListener.of(u => u.docChanged && (model.value = u.state.doc.toString())),\n    ],\n  })\n})\nonBeforeUnmount(() => view?.destroy())\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv ref=\"el\" \u002F>\n\u003C\u002Ftemplate>\n",[296,741,742,768,786,804,822,826,862,884,902,906,921,937,954,970,979,986,995,1062,1069,1077,1084,1107,1117,1122,1132,1155],{"__ignoreMap":294},[299,743,744,747,750,753,756,758,761,763,765],{"class":301,"line":302},[299,745,746],{"class":309},"\u003C",[299,748,749],{"class":431},"script",[299,751,752],{"class":406}," setup",[299,754,755],{"class":406}," lang",[299,757,413],{"class":309},[299,759,760],{"class":309},"\"",[299,762,293],{"class":326},[299,764,760],{"class":309},[299,766,767],{"class":309},">\n",[299,769,770,772,774,776,778,780,782,784],{"class":301,"line":333},[299,771,306],{"class":305},[299,773,310],{"class":309},[299,775,340],{"class":313},[299,777,317],{"class":309},[299,779,320],{"class":305},[299,781,323],{"class":309},[299,783,349],{"class":326},[299,785,330],{"class":309},[299,787,788,790,792,794,796,798,800,802],{"class":301,"line":354},[299,789,306],{"class":305},[299,791,310],{"class":309},[299,793,314],{"class":313},[299,795,317],{"class":309},[299,797,320],{"class":305},[299,799,323],{"class":309},[299,801,327],{"class":326},[299,803,330],{"class":309},[299,805,806,808,810,812,814,816,818,820],{"class":301,"line":375},[299,807,306],{"class":305},[299,809,310],{"class":309},[299,811,361],{"class":313},[299,813,317],{"class":309},[299,815,320],{"class":305},[299,817,323],{"class":309},[299,819,370],{"class":326},[299,821,330],{"class":309},[299,823,824],{"class":301,"line":396},[299,825,400],{"emptyLinePlaceholder":399},[299,827,828,830,833,835,838,840,843,846,848,850,853,855,858,860],{"class":301,"line":403},[299,829,407],{"class":406},[299,831,832],{"class":313}," model ",[299,834,413],{"class":309},[299,836,837],{"class":419}," defineModel",[299,839,746],{"class":309},[299,841,594],{"class":842},"sBMFI",[299,844,845],{"class":309},">",[299,847,422],{"class":313},[299,849,659],{"class":309},[299,851,852],{"class":431}," default",[299,854,435],{"class":309},[299,856,857],{"class":309}," ''",[299,859,317],{"class":309},[299,861,711],{"class":313},[299,863,864,866,869,871,874,876,879,881],{"class":301,"line":428},[299,865,407],{"class":406},[299,867,868],{"class":313}," el ",[299,870,413],{"class":309},[299,872,873],{"class":419}," ref",[299,875,746],{"class":309},[299,877,878],{"class":842},"HTMLElement",[299,880,845],{"class":309},[299,882,883],{"class":313},"()\n",[299,885,886,889,892,894,896,899],{"class":301,"line":463},[299,887,888],{"class":406},"let",[299,890,891],{"class":313}," view",[299,893,435],{"class":309},[299,895,340],{"class":842},[299,897,898],{"class":309}," |",[299,900,901],{"class":842}," undefined\n",[299,903,904],{"class":301,"line":484},[299,905,400],{"emptyLinePlaceholder":399},[299,907,908,911,913,915,918],{"class":301,"line":495},[299,909,910],{"class":419},"onMounted",[299,912,422],{"class":313},[299,914,523],{"class":309},[299,916,917],{"class":406}," =>",[299,919,920],{"class":309}," {\n",[299,922,923,926,929,931,933,935],{"class":301,"line":503},[299,924,925],{"class":313},"  view",[299,927,928],{"class":309}," =",[299,930,416],{"class":309},[299,932,340],{"class":419},[299,934,422],{"class":431},[299,936,425],{"class":309},[299,938,939,942,944,947,949,952],{"class":301,"line":513},[299,940,941],{"class":431},"    parent",[299,943,435],{"class":309},[299,945,946],{"class":313}," el",[299,948,441],{"class":309},[299,950,951],{"class":313},"value",[299,953,460],{"class":309},[299,955,956,959,961,964,966,968],{"class":301,"line":528},[299,957,958],{"class":431},"    doc",[299,960,435],{"class":309},[299,962,963],{"class":313}," model",[299,965,441],{"class":309},[299,967,951],{"class":313},[299,969,481],{"class":309},[299,971,972,975,977],{"class":301,"line":538},[299,973,974],{"class":431},"    extensions",[299,976,435],{"class":309},[299,978,492],{"class":431},[299,980,981,984],{"class":301,"line":680},[299,982,983],{"class":313},"      basicSetup",[299,985,481],{"class":309},[299,987,988,991,993],{"class":301,"line":688},[299,989,990],{"class":419},"      comark",[299,992,523],{"class":431},[299,994,481],{"class":309},[299,996,997,1000,1002,1005,1007,1010,1012,1016,1018,1021,1023,1026,1029,1032,1034,1036,1038,1040,1042,1044,1047,1049,1052,1054,1057,1060],{"class":301,"line":698},[299,998,999],{"class":313},"      EditorView",[299,1001,441],{"class":309},[299,1003,1004],{"class":313},"updateListener",[299,1006,441],{"class":309},[299,1008,1009],{"class":419},"of",[299,1011,422],{"class":431},[299,1013,1015],{"class":1014},"sHdIc","u",[299,1017,917],{"class":406},[299,1019,1020],{"class":313}," u",[299,1022,441],{"class":309},[299,1024,1025],{"class":313},"docChanged",[299,1027,1028],{"class":309}," &&",[299,1030,1031],{"class":431}," (",[299,1033,208],{"class":313},[299,1035,441],{"class":309},[299,1037,951],{"class":313},[299,1039,928],{"class":309},[299,1041,1020],{"class":313},[299,1043,441],{"class":309},[299,1045,1046],{"class":313},"state",[299,1048,441],{"class":309},[299,1050,1051],{"class":313},"doc",[299,1053,441],{"class":309},[299,1055,1056],{"class":419},"toString",[299,1058,1059],{"class":431},"()))",[299,1061,481],{"class":309},[299,1063,1064,1067],{"class":301,"line":706},[299,1065,1066],{"class":431},"    ]",[299,1068,481],{"class":309},[299,1070,1072,1075],{"class":301,"line":1071},19,[299,1073,1074],{"class":309},"  }",[299,1076,711],{"class":431},[299,1078,1080,1082],{"class":301,"line":1079},20,[299,1081,647],{"class":309},[299,1083,711],{"class":313},[299,1085,1087,1090,1092,1094,1096,1098,1101,1104],{"class":301,"line":1086},21,[299,1088,1089],{"class":419},"onBeforeUnmount",[299,1091,422],{"class":313},[299,1093,523],{"class":309},[299,1095,917],{"class":406},[299,1097,891],{"class":313},[299,1099,1100],{"class":309},"?.",[299,1102,1103],{"class":419},"destroy",[299,1105,1106],{"class":313},"())\n",[299,1108,1110,1113,1115],{"class":301,"line":1109},22,[299,1111,1112],{"class":309},"\u003C\u002F",[299,1114,749],{"class":431},[299,1116,767],{"class":309},[299,1118,1120],{"class":301,"line":1119},23,[299,1121,400],{"emptyLinePlaceholder":399},[299,1123,1125,1127,1130],{"class":301,"line":1124},24,[299,1126,746],{"class":309},[299,1128,1129],{"class":431},"template",[299,1131,767],{"class":309},[299,1133,1135,1138,1141,1143,1145,1147,1150,1152],{"class":301,"line":1134},25,[299,1136,1137],{"class":309},"  \u003C",[299,1139,1140],{"class":431},"div",[299,1142,873],{"class":406},[299,1144,413],{"class":309},[299,1146,760],{"class":309},[299,1148,1149],{"class":326},"el",[299,1151,760],{"class":309},[299,1153,1154],{"class":309}," \u002F>\n",[299,1156,1158,1160,1162],{"class":301,"line":1157},26,[299,1159,1112],{"class":309},[299,1161,1129],{"class":431},[299,1163,767],{"class":309},[284,1165,1167],{"id":1166},"react","React",[289,1169,1173],{"className":1170,"code":1171,"language":1172,"meta":294,"style":294},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { EditorView } from '@codemirror\u002Fview'\nimport { basicSetup } from 'codemirror'\nimport { comark } from 'comark-codemirror'\nimport { useEffect, useRef } from 'react'\n\nexport function Editor({ value, onChange }: { value: string, onChange: (v: string) => void }) {\n  const el = useRef\u003CHTMLDivElement>(null)\n  useEffect(() => {\n    const view = new EditorView({\n      parent: el.current!,\n      doc: value,\n      extensions: [basicSetup, comark(), EditorView.updateListener.of(u => u.docChanged && onChange(u.state.doc.toString()))],\n    })\n    return () => view.destroy()\n  }, [])\n  return \u003Cdiv ref={el} \u002F>\n}\n","tsx",[296,1174,1175,1180,1185,1190,1195,1199,1204,1209,1214,1219,1224,1229,1234,1239,1244,1249,1254],{"__ignoreMap":294},[299,1176,1177],{"class":301,"line":302},[299,1178,1179],{},"import { EditorView } from '@codemirror\u002Fview'\n",[299,1181,1182],{"class":301,"line":333},[299,1183,1184],{},"import { basicSetup } from 'codemirror'\n",[299,1186,1187],{"class":301,"line":354},[299,1188,1189],{},"import { comark } from 'comark-codemirror'\n",[299,1191,1192],{"class":301,"line":375},[299,1193,1194],{},"import { useEffect, useRef } from 'react'\n",[299,1196,1197],{"class":301,"line":396},[299,1198,400],{"emptyLinePlaceholder":399},[299,1200,1201],{"class":301,"line":403},[299,1202,1203],{},"export function Editor({ value, onChange }: { value: string, onChange: (v: string) => void }) {\n",[299,1205,1206],{"class":301,"line":428},[299,1207,1208],{},"  const el = useRef\u003CHTMLDivElement>(null)\n",[299,1210,1211],{"class":301,"line":463},[299,1212,1213],{},"  useEffect(() => {\n",[299,1215,1216],{"class":301,"line":484},[299,1217,1218],{},"    const view = new EditorView({\n",[299,1220,1221],{"class":301,"line":495},[299,1222,1223],{},"      parent: el.current!,\n",[299,1225,1226],{"class":301,"line":503},[299,1227,1228],{},"      doc: value,\n",[299,1230,1231],{"class":301,"line":513},[299,1232,1233],{},"      extensions: [basicSetup, comark(), EditorView.updateListener.of(u => u.docChanged && onChange(u.state.doc.toString()))],\n",[299,1235,1236],{"class":301,"line":528},[299,1237,1238],{},"    })\n",[299,1240,1241],{"class":301,"line":538},[299,1242,1243],{},"    return () => view.destroy()\n",[299,1245,1246],{"class":301,"line":680},[299,1247,1248],{},"  }, [])\n",[299,1250,1251],{"class":301,"line":688},[299,1252,1253],{},"  return \u003Cdiv ref={el} \u002F>\n",[299,1255,1256],{"class":301,"line":698},[299,1257,1258],{},"}\n",[284,1260,1262],{"id":1261},"changing-options-later","Changing options later",[713,1264,1265,1266,1268,1269,1275],{},"Options are part of the extension. Put ",[296,1267,717],{}," in a ",[729,1270,1274],{"href":1271,"rel":1272},"https:\u002F\u002Fcodemirror.net\u002Fexamples\u002Fconfig\u002F",[1273],"nofollow","compartment"," and reconfigure it when your component manifest or data change:",[289,1277,1279],{"className":291,"code":1278,"language":293,"meta":294,"style":294},"import { Compartment } from '@codemirror\u002Fstate'\n\nconst comarkConfig = new Compartment()\n\u002F\u002F extensions: [basicSetup, comarkConfig.of(comark({ components }))]\nview.dispatch({ effects: comarkConfig.reconfigure(comark({ components: await loadComponents() })) })\n",[296,1280,1281,1301,1305,1320,1326],{"__ignoreMap":294},[299,1282,1283,1285,1287,1290,1292,1294,1296,1299],{"class":301,"line":302},[299,1284,306],{"class":305},[299,1286,310],{"class":309},[299,1288,1289],{"class":313}," Compartment",[299,1291,317],{"class":309},[299,1293,320],{"class":305},[299,1295,323],{"class":309},[299,1297,1298],{"class":326},"@codemirror\u002Fstate",[299,1300,330],{"class":309},[299,1302,1303],{"class":301,"line":333},[299,1304,400],{"emptyLinePlaceholder":399},[299,1306,1307,1309,1312,1314,1316,1318],{"class":301,"line":354},[299,1308,407],{"class":406},[299,1310,1311],{"class":313}," comarkConfig ",[299,1313,413],{"class":309},[299,1315,416],{"class":309},[299,1317,1289],{"class":419},[299,1319,883],{"class":313},[299,1321,1322],{"class":301,"line":375},[299,1323,1325],{"class":1324},"sHwdD","\u002F\u002F extensions: [basicSetup, comarkConfig.of(comark({ components }))]\n",[299,1327,1328,1331,1333,1336,1338,1340,1343,1345,1348,1350,1353,1355,1358,1360,1362,1365,1367,1370,1373,1376,1378,1381,1383],{"class":301,"line":396},[299,1329,1330],{"class":313},"view",[299,1332,441],{"class":309},[299,1334,1335],{"class":419},"dispatch",[299,1337,422],{"class":313},[299,1339,659],{"class":309},[299,1341,1342],{"class":431}," effects",[299,1344,435],{"class":309},[299,1346,1347],{"class":313}," comarkConfig",[299,1349,441],{"class":309},[299,1351,1352],{"class":419},"reconfigure",[299,1354,422],{"class":313},[299,1356,1357],{"class":419},"comark",[299,1359,422],{"class":313},[299,1361,659],{"class":309},[299,1363,1364],{"class":431}," components",[299,1366,435],{"class":309},[299,1368,1369],{"class":305}," await",[299,1371,1372],{"class":419}," loadComponents",[299,1374,1375],{"class":313},"() ",[299,1377,647],{"class":309},[299,1379,1380],{"class":313},")) ",[299,1382,647],{"class":309},[299,1384,711],{"class":313},[284,1386,1388],{"id":1387},"dark-mode","Dark mode",[713,1390,1391,1392,1395,1396,441],{},"The theme reads CodeMirror's light\u002Fdark flag. With a dark theme such as ",[296,1393,1394],{},"@codemirror\u002Ftheme-one-dark",", the menus and syntax colors switch automatically. See ",[729,1397,53],{"href":54},[1399,1400,1401],"style",{},"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 .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 .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 .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":294,"searchDepth":333,"depth":333,"links":1403},[1404,1405,1406,1407,1408],{"id":286,"depth":333,"text":287},{"id":734,"depth":333,"text":735},{"id":1166,"depth":333,"text":1167},{"id":1261,"depth":333,"text":1262},{"id":1387,"depth":333,"text":1388},"Add the comark() extension to a CodeMirror 6 editor in vanilla JavaScript, Vue, or React, with presets, plugins, and a live playground example.","md",null,{},{"icon":24},{"title":21,"description":1409},"rAUs3RhvEChKW9O03aJt06xT_C-DWfn5WosA_wm4hnk",[1417,1419],{"title":16,"path":17,"stem":18,"description":1418,"icon":19,"children":-1},"Install comark-codemirror with pnpm, npm, or yarn, plus the CodeMirror peer packages and optional rangi or Shiki peers for fence highlighting.",{"title":33,"path":34,"stem":35,"description":1420,"icon":36,"children":-1},"Try every kind of menu in a few keystrokes.",1791246302093]