[{"data":1,"prerenderedAt":1565},["ShallowReactive",2],{"navigation_docs":3,"-getting-started-quick-start-vue":412,"-getting-started-quick-start-vue-surround":1560},[4,38,84,326,386],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":37},"Getting started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15,20,24,28,32],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-book-open",{"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":6},"Quick start: Nuxt","\u002Fgetting-started\u002Fquick-start-nuxt","1.getting-started\u002F3.quick-start-nuxt",{"title":25,"path":26,"stem":27,"icon":6},"Quick start: plain Vue","\u002Fgetting-started\u002Fquick-start-vue","1.getting-started\u002F4.quick-start-vue",{"title":29,"path":30,"stem":31,"icon":6},"Quick start: React","\u002Fgetting-started\u002Fquick-start-react","1.getting-started\u002F5.quick-start-react",{"title":33,"path":34,"stem":35,"icon":36},"Glossary","\u002Fgetting-started\u002Fglossary","1.getting-started\u002F6.glossary","i-lucide-book-a",false,{"title":39,"icon":40,"path":41,"stem":42,"children":43,"page":37},"Tutorial","i-lucide-graduation-cap","\u002Ftutorial","2.tutorial",[44,49,54,59,64,69,74,79],{"title":45,"path":46,"stem":47,"icon":48},"Tutorial: overview","\u002Ftutorial\u002Foverview","2.tutorial\u002F1.overview","i-lucide-map",{"title":50,"path":51,"stem":52,"icon":53},"Chapter 2: A simple editor","\u002Ftutorial\u002Fsimple-editor","2.tutorial\u002F2.simple-editor","i-lucide-pencil",{"title":55,"path":56,"stem":57,"icon":58},"Chapter 3: Compose features","\u002Ftutorial\u002Fcompose-features","2.tutorial\u002F3.compose-features","i-lucide-blocks",{"title":60,"path":61,"stem":62,"icon":63},"Chapter 4: Your own block, path A","\u002Ftutorial\u002Fown-block-path-a","2.tutorial\u002F4.own-block-path-a","i-lucide-square-plus",{"title":65,"path":66,"stem":67,"icon":68},"Chapter 5: Your own feature, path B","\u002Ftutorial\u002Fown-feature-path-b","2.tutorial\u002F5.own-feature-path-b","i-lucide-puzzle",{"title":70,"path":71,"stem":72,"icon":73},"Chapter 6: Backend and collaboration","\u002Ftutorial\u002Fbackend-and-collaboration","2.tutorial\u002F6.backend-and-collaboration","i-lucide-users",{"title":75,"path":76,"stem":77,"icon":78},"Chapter 7: AI","\u002Ftutorial\u002Fai","2.tutorial\u002F7.ai","i-lucide-sparkles",{"title":80,"path":81,"stem":82,"icon":83},"Chapter 8: The React surface","\u002Ftutorial\u002Freact-surface","2.tutorial\u002F8.react-surface","i-lucide-atom",{"title":85,"icon":14,"path":86,"stem":87,"children":88,"page":37},"Guides","\u002Fguides","3.guides",[89,93,98,103,108,112,116,121,126,130,134,139,144,149,154,159,164,169,174,179,184,189,194,199,204,209,213,218,223,228,233,237,242,247,251,256,261,266,271,276,281,286,291,295,302,307,311,316,321],{"title":90,"path":91,"stem":92,"icon":58},"Feature composition and entries","\u002Fguides\u002Fcomposition","3.guides\u002F1.composition",{"title":94,"path":95,"stem":96,"icon":97},"Media, mentions and transcript features","\u002Fguides\u002Fmedia-mentions-transcript","3.guides\u002F10.media-mentions-transcript","i-lucide-image",{"title":99,"path":100,"stem":101,"icon":102},"Authors and comments","\u002Fguides\u002Fauthors-and-comments","3.guides\u002F11.authors-and-comments","i-lucide-message-square-text",{"title":104,"path":105,"stem":106,"icon":107},"Themes (Obsidian)","\u002Fguides\u002Fthemes","3.guides\u002F12.themes","i-lucide-palette",{"title":109,"path":110,"stem":111,"icon":58},"Composites and the settings UI","\u002Fguides\u002Fcomposites","3.guides\u002F13.composites",{"title":113,"path":114,"stem":115,"icon":78},"AI","\u002Fguides\u002Fai","3.guides\u002F14.ai",{"title":117,"path":118,"stem":119,"icon":120},"Document tree","\u002Fguides\u002Fdocument-tree","3.guides\u002F15.document-tree","i-lucide-folder-tree",{"title":122,"path":123,"stem":124,"icon":125},"Markdown and code","\u002Fguides\u002Fmarkdown-and-code","3.guides\u002F16.markdown-and-code","i-lucide-file-code",{"title":127,"path":128,"stem":129,"icon":83},"Advanced editor in React","\u002Fguides\u002Fadvanced-react","3.guides\u002F17.advanced-react",{"title":131,"path":132,"stem":133,"icon":6},"Kitchen sink: learning path","\u002Fguides\u002Fadvanced-nuxt-example","3.guides\u002F18.advanced-nuxt-example",{"title":135,"path":136,"stem":137,"icon":138},"Production","\u002Fguides\u002Fproduction","3.guides\u002F19.production","i-lucide-server",{"title":140,"path":141,"stem":142,"icon":143},"Register the Nuxt module","\u002Fguides\u002Fnuxt-module","3.guides\u002F2.nuxt-module","i-lucide-package",{"title":145,"path":146,"stem":147,"icon":148},"Storage adapters, comment stores, Nitro host","\u002Fguides\u002Fstorage-adapters","3.guides\u002F20.storage-adapters","i-lucide-database",{"title":150,"path":151,"stem":152,"icon":153},"Migrating from #tiptap-editor","\u002Fguides\u002Fmigration","3.guides\u002F21.migration","i-lucide-arrow-right-left",{"title":155,"path":156,"stem":157,"icon":158},"Content tree mechanics","\u002Fguides\u002Fcontent-tree","3.guides\u002F22.content-tree","i-lucide-git-fork",{"title":160,"path":161,"stem":162,"icon":163},"Block capabilities, abilities and actions","\u002Fguides\u002Fblock-capabilities","3.guides\u002F23.block-capabilities","i-lucide-shield-check",{"title":165,"path":166,"stem":167,"icon":168},"Block types in code and JSON","\u002Fguides\u002Fblock-types","3.guides\u002F24.block-types","i-lucide-shapes",{"title":170,"path":171,"stem":172,"icon":173},"Derive methods and the Derivation index","\u002Fguides\u002Fderive-methods","3.guides\u002F25.derive-methods","i-lucide-git-branch-plus",{"title":175,"path":176,"stem":177,"icon":178},"Block properties and Property definitions","\u002Fguides\u002Fblock-properties","3.guides\u002F26.block-properties","i-lucide-sliders-horizontal",{"title":180,"path":181,"stem":182,"icon":183},"Image studio","\u002Fguides\u002Fimage-studio","3.guides\u002F27.image-studio","i-lucide-image-plus",{"title":185,"path":186,"stem":187,"icon":188},"Prüfung and Freigabestatus","\u002Fguides\u002Fpruefung","3.guides\u002F28.pruefung","i-lucide-stamp",{"title":190,"path":191,"stem":192,"icon":193},"Workspace: find, read, reference and embed Blocks across Documents","\u002Fguides\u002Fworkspace","3.guides\u002F29.workspace","i-lucide-network",{"title":195,"path":196,"stem":197,"icon":198},"EditorPorts: auth and storage","\u002Fguides\u002Feditor-ports","3.guides\u002F3.editor-ports","i-lucide-plug",{"title":200,"path":201,"stem":202,"icon":203},"Collections: an ordered list of Blocks","\u002Fguides\u002Fcollections","3.guides\u002F30.collections","i-lucide-list-checks",{"title":205,"path":206,"stem":207,"icon":208},"Data views: a query shown as table, list or board","\u002Fguides\u002Fdata-views","3.guides\u002F31.data-views","i-lucide-table-properties",{"title":210,"path":211,"stem":212,"icon":193},"Explore: backlinks, related Blocks and the trail","\u002Fguides\u002Fexplore","3.guides\u002F32.explore",{"title":214,"path":215,"stem":216,"icon":217},"Render: export a Block or a Document to a file","\u002Fguides\u002Frender","3.guides\u002F33.render","i-lucide-file-output",{"title":219,"path":220,"stem":221,"icon":222},"Importers: what a dropped file becomes","\u002Fguides\u002Fimporters","3.guides\u002F34.importers","i-lucide-file-input",{"title":224,"path":225,"stem":226,"icon":227},"Templates: start a Document from a Dokumentvorlage","\u002Fguides\u002Ftemplates","3.guides\u002F35.templates","i-lucide-file-stack",{"title":229,"path":230,"stem":231,"icon":232},"Citations","\u002Fguides\u002Fcitations","3.guides\u002F36.citations","i-lucide-quote",{"title":234,"path":235,"stem":236,"icon":163},"AI proposals and the export check","\u002Fguides\u002Fexport-check","3.guides\u002F37.export-check",{"title":238,"path":239,"stem":240,"icon":241},"Query: filter, sort, group and total Blocks","\u002Fguides\u002Fquery","3.guides\u002F38.query","i-lucide-list-filter",{"title":243,"path":244,"stem":245,"icon":246},"Edges: backlinks and authored connections","\u002Fguides\u002Fedges","3.guides\u002F39.edges","i-lucide-link-2",{"title":248,"path":249,"stem":250,"icon":163},"Server routes and authentication","\u002Fguides\u002Froutes-and-auth","3.guides\u002F4.routes-and-auth",{"title":252,"path":253,"stem":254,"icon":255},"Speech: text to audio, and subtitle files","\u002Fguides\u002Fspeech","3.guides\u002F41.speech","i-lucide-audio-lines",{"title":257,"path":258,"stem":259,"icon":260},"Graph: the Edges around a Block","\u002Fguides\u002Fgraph","3.guides\u002F42.graph","i-lucide-waypoints",{"title":262,"path":263,"stem":264,"icon":265},"PDF viewer: passages, anchors and quotes","\u002Fguides\u002Fpdf-viewer","3.guides\u002F43.pdf-viewer","i-lucide-file-search",{"title":267,"path":268,"stem":269,"icon":270},"Obsidian: import and export a vault","\u002Fguides\u002Fobsidian","3.guides\u002F44.obsidian","i-lucide-folder-input",{"title":272,"path":273,"stem":274,"icon":275},"Typst: render a Document as a PDF with citations","\u002Fguides\u002Ftypst","3.guides\u002F45.typst","i-lucide-file-text",{"title":277,"path":278,"stem":279,"icon":280},"Audio: read aloud, mixdown and ElevenLabs","\u002Fguides\u002Faudio","3.guides\u002F46.audio","i-lucide-audio-waveform",{"title":282,"path":283,"stem":284,"icon":285},"Slides: decks, slide layouts and exports","\u002Fguides\u002Fslides","3.guides\u002F47.slides","i-lucide-presentation",{"title":287,"path":288,"stem":289,"icon":290},"Knowledge graph: sources and concepts beside the Documents","\u002Fguides\u002Fknowledge-graph","3.guides\u002F49.knowledge-graph","i-lucide-share-2",{"title":292,"path":293,"stem":294,"icon":78},"AI configuration and secrets","\u002Fguides\u002Fai-configuration","3.guides\u002F5.ai-configuration",{"title":296,"path":297,"stem":298,"children":299,"icon":301},"Index on Postgres: typos, meaning and SQL pushdown","\u002Fguides\u002Findex-pg","3.guides\u002F50.index-pg",[300],{"title":296,"path":297,"stem":298,"icon":301},"i-lucide-database-zap",{"title":303,"path":304,"stem":305,"icon":306},"Charts: bar, line, pie and scatter over a query","\u002Fguides\u002Fcharts","3.guides\u002F51.charts","i-lucide-chart-column",{"title":308,"path":309,"stem":310,"icon":73},"Collaboration on the client","\u002Fguides\u002Fcollaboration","3.guides\u002F6.collaboration",{"title":312,"path":313,"stem":314,"icon":315},"Block UI (drag handle, hover actions)","\u002Fguides\u002Fblock-ui","3.guides\u002F7.block-ui","i-lucide-grip-vertical",{"title":317,"path":318,"stem":319,"icon":320},"Settings and app lifetime","\u002Fguides\u002Fsettings","3.guides\u002F8.settings","i-lucide-settings",{"title":322,"path":323,"stem":324,"icon":325},"Language","\u002Fguides\u002Flanguage","3.guides\u002F9.language","i-lucide-languages",{"title":327,"icon":14,"path":328,"stem":329,"children":330,"page":37},"Reference","\u002Freference","4.reference",[331,335,339,344,348,352,356,360,364,368,373,378,382],{"title":332,"path":333,"stem":334,"icon":143},"Public exports","\u002Freference\u002Fexports","4.reference\u002F1.exports",{"title":336,"path":337,"stem":338,"icon":173},"Derive method contract","\u002Freference\u002Fderive-methods","4.reference\u002F10.derive-methods",{"title":340,"path":341,"stem":342,"icon":343},"Changelog","\u002Freference\u002Fchangelog","4.reference\u002F11.changelog","i-lucide-history",{"title":345,"path":346,"stem":347,"icon":217},"Renderer port","\u002Freference\u002Frenderer-port","4.reference\u002F12.renderer-port",{"title":349,"path":350,"stem":351,"icon":255},"Speech port","\u002Freference\u002Fspeech-port","4.reference\u002F13.speech-port",{"title":353,"path":354,"stem":355,"icon":58},"Presets and features","\u002Freference\u002Fpresets-and-features","4.reference\u002F2.presets-and-features",{"title":357,"path":358,"stem":359,"icon":68},"Feature contract","\u002Freference\u002Ffeature-contract","4.reference\u002F3.feature-contract",{"title":361,"path":362,"stem":363,"icon":107},"CSS and UI-provider requirements","\u002Freference\u002Fcss-and-ui","4.reference\u002F4.css-and-ui",{"title":365,"path":366,"stem":367,"icon":148},"Vue-free advanced schema","\u002Freference\u002Fadvanced-schema","4.reference\u002F5.advanced-schema",{"title":369,"path":370,"stem":371,"icon":372},"Dependency rules","\u002Freference\u002Fdependency-rules","4.reference\u002F6.dependency-rules","i-lucide-git-branch",{"title":374,"path":375,"stem":376,"icon":377},"Commands","\u002Freference\u002Fcommands","4.reference\u002F7.commands","i-lucide-terminal",{"title":379,"path":380,"stem":381,"icon":163},"Block capability contract","\u002Freference\u002Fblock-capabilities","4.reference\u002F8.block-capabilities",{"title":383,"path":384,"stem":385,"icon":168},"Block type contract","\u002Freference\u002Fblock-types","4.reference\u002F9.block-types",{"title":387,"path":388,"stem":389,"children":390,"icon":393},"AI agents","\u002Fai-agents","5.ai-agents\u002F1.index",[391,394,398,402,407],{"title":392,"path":388,"stem":389,"icon":393},"Overview","i-lucide-bot",{"title":395,"path":396,"stem":397,"icon":198},"Integrate the editor","\u002Fai-agents\u002Fintegrate","5.ai-agents\u002F2.integrate",{"title":399,"path":400,"stem":401,"icon":68},"Add a block or feature","\u002Fai-agents\u002Fextend","5.ai-agents\u002F3.extend",{"title":403,"path":404,"stem":405,"icon":406},"Pitfalls and invariants","\u002Fai-agents\u002Finvariants","5.ai-agents\u002F4.invariants","i-lucide-shield-alert",{"title":408,"path":409,"stem":410,"icon":411},"Verify","\u002Fai-agents\u002Fverify","5.ai-agents\u002F5.verify","i-lucide-check-check",{"id":413,"title":25,"body":414,"description":1553,"extension":1554,"links":1555,"meta":1556,"navigation":1557,"path":26,"seo":1558,"stem":27,"__hash__":1559},"docs\u002F1.getting-started\u002F4.quick-start-vue.md",{"type":415,"value":416,"toc":1548},"minimark",[417,466,471,480,606,625,630,775,789,925,1003,1047,1068,1124,1134,1138,1518,1525,1528,1532,1544],[418,419,420,424,425,428,429,432,433,442,443,446,447,450,451,454,455,428,458,461,462,465],"p",{},[421,422,423],"code",{},"SimpleEditor"," is the two core features alone (",[421,426,427],{},"core-content"," and ",[421,430,431],{},"core-ui","): bold\u002Fitalic\u002Funderline\u002Fstrike\u002Fcode\u002Flink, headings, lists, quotes, code blocks, horizontal rule, undo\u002Fredo. No backend requests, no Yjs, no feature code. The runnable reference is ",[434,435,439],"a",{"href":436,"rel":437},"https:\u002F\u002Fgithub.com\u002Fskaile-ai\u002Fforge-editor\u002Ftree\u002Fmain\u002Fexamples\u002Fvue-simple",[438],"nofollow",[421,440,441],{},"examples\u002Fvue-simple","; start it with ",[421,444,445],{},"bun run --cwd examples\u002Fvue-simple dev"," (port 3040). Its sample picker loads five demo documents — „Start“, „Formatierung“ (marks, lists, quote, code block, rule), „Gliederung“ (three outline levels), „Hinweise“ (the own „Hinweis“ block) and „Ungültig (Block-JSON)“ (advanced JSON, rejected through ",[421,448,449],{},"contentError",") — beside the toolbar and outline, with the JSON and Markdown of the document next to the editor. The ",[421,452,453],{},"\u002Fhinweis"," entry and the callout behind it are an own block added through the ",[421,456,457],{},"extensions",[421,459,460],{},"commands"," props; the ",[434,463,464],{"href":61},"tutorial"," shows how, and how to go further with a full feature.",[467,468,470],"h2",{"id":469},"setup","Setup",[418,472,473,474,479],{},"Starting a new app from nothing? The files below plus these three are all that ",[434,475,477],{"href":436,"rel":476},[438],[421,478,441],{}," has:",[481,482,483,566,578],"ul",{},[484,485,486,489,490,493,494,497,498,501,502,501,505,501,508,501,511,501,514,501,517,501,520,501,523,526,527,501,530,501,533,501,536,539,540,493,543,545,546,493,549,545,552,493,555,558,559,565],"li",{},[421,487,488],{},"package.json"," dependencies: ",[421,491,492],{},"@skaile\u002Fforge-editor"," (",[421,495,496],{},"workspace:*"," inside this repository), ",[421,499,500],{},"vue",", ",[421,503,504],{},"@nuxt\u002Fui",[421,506,507],{},"tailwindcss",[421,509,510],{},"@iconify-json\u002Flucide",[421,512,513],{},"@tiptap\u002Fcore",[421,515,516],{},"@tiptap\u002Fpm",[421,518,519],{},"@tiptap\u002Fvue-3",[421,521,522],{},"yjs",[421,524,525],{},"@hocuspocus\u002Fprovider","; dev dependencies ",[421,528,529],{},"vite",[421,531,532],{},"@vitejs\u002Fplugin-vue",[421,534,535],{},"typescript",[421,537,538],{},"vue-tsc","; scripts ",[421,541,542],{},"dev",[421,544,529],{},"), ",[421,547,548],{},"build",[421,550,551],{},"vite build",[421,553,554],{},"typecheck",[421,556,557],{},"vue-tsc --noEmit -p tsconfig.json","). Use the exact version ranges of the example's ",[434,560,563],{"href":561,"rel":562},"https:\u002F\u002Fgithub.com\u002Fskaile-ai\u002Fforge-editor\u002Fblob\u002Fmain\u002Fexamples\u002Fvue-simple\u002Fpackage.json",[438],[421,564,488],{},".",[484,567,568,571,572,428,575,565],{},[421,569,570],{},"index.html"," with ",[421,573,574],{},"\u003Cdiv id=\"app\">\u003C\u002Fdiv>",[421,576,577],{},"\u003Cscript type=\"module\" src=\"\u002Fsrc\u002Fmain.ts\">\u003C\u002Fscript>",[484,579,580,571,583,501,586,501,589,501,592,428,595,598,599,605],{},[421,581,582],{},"tsconfig.json",[421,584,585],{},"moduleResolution: \"Bundler\"",[421,587,588],{},"types: [\"vite\u002Fclient\"]",[421,590,591],{},"strict",[421,593,594],{},"verbatimModuleSyntax",[421,596,597],{},"include: [\"src\u002F**\u002F*.ts\", \"src\u002F**\u002F*.vue\", \"vite.config.ts\"]"," (see the example's ",[434,600,603],{"href":601,"rel":602},"https:\u002F\u002Fgithub.com\u002Fskaile-ai\u002Fforge-editor\u002Fblob\u002Fmain\u002Fexamples\u002Fvue-simple\u002Ftsconfig.json",[438],[421,604,582],{},").",[418,607,608,609,612,613,620,621,624],{},"Optional: Nuxt UI resolves ",[421,610,611],{},"i-lucide-*"," icons at build time, but a workspace library lies outside the Vite root it scans, so without the extra config the page fetches the toolbar's icons from the Iconify API at runtime. The example's ",[434,614,617],{"href":615,"rel":616},"https:\u002F\u002Fgithub.com\u002Fskaile-ai\u002Fforge-editor\u002Fblob\u002Fmain\u002Fexamples\u002Fvue-simple\u002Fvite.config.ts",[438],[421,618,619],{},"vite.config.ts"," collects the library's icon names into ",[421,622,623],{},"ui({ icon: { clientBundle: { scan: true, icons } } })"," to bundle them.",[418,626,627,629],{},[421,628,619],{}," — Nuxt UI's Vite plugin without a router:",[631,632,637],"pre",{"className":633,"code":634,"language":635,"meta":636,"style":636},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import ui from '@nuxt\u002Fui\u002Fvite'\nimport vue from '@vitejs\u002Fplugin-vue'\nimport { defineConfig } from 'vite'\n\nexport default defineConfig({ plugins: [vue(), ui({ router: false })] })\n","ts","",[421,638,639,666,682,705,712],{"__ignoreMap":636},[640,641,644,648,652,655,659,663],"span",{"class":642,"line":643},"line",1,[640,645,647],{"class":646},"s7zQu","import",[640,649,651],{"class":650},"sTEyZ"," ui ",[640,653,654],{"class":646},"from",[640,656,658],{"class":657},"sMK4o"," '",[640,660,662],{"class":661},"sfazB","@nuxt\u002Fui\u002Fvite",[640,664,665],{"class":657},"'\n",[640,667,669,671,674,676,678,680],{"class":642,"line":668},2,[640,670,647],{"class":646},[640,672,673],{"class":650}," vue ",[640,675,654],{"class":646},[640,677,658],{"class":657},[640,679,532],{"class":661},[640,681,665],{"class":657},[640,683,685,687,690,693,696,699,701,703],{"class":642,"line":684},3,[640,686,647],{"class":646},[640,688,689],{"class":657}," {",[640,691,692],{"class":650}," defineConfig",[640,694,695],{"class":657}," }",[640,697,698],{"class":646}," from",[640,700,658],{"class":657},[640,702,529],{"class":661},[640,704,665],{"class":657},[640,706,708],{"class":642,"line":707},4,[640,709,711],{"emptyLinePlaceholder":710},true,"\n",[640,713,715,718,721,724,727,730,734,737,740,742,745,748,751,753,755,758,760,764,766,769,772],{"class":642,"line":714},5,[640,716,717],{"class":646},"export",[640,719,720],{"class":646}," default",[640,722,692],{"class":723},"s2Zo4",[640,725,726],{"class":650},"(",[640,728,729],{"class":657},"{",[640,731,733],{"class":732},"swJcz"," plugins",[640,735,736],{"class":657},":",[640,738,739],{"class":650}," [",[640,741,500],{"class":723},[640,743,744],{"class":650},"()",[640,746,747],{"class":657},",",[640,749,750],{"class":723}," ui",[640,752,726],{"class":650},[640,754,729],{"class":657},[640,756,757],{"class":732}," router",[640,759,736],{"class":657},[640,761,763],{"class":762},"sfNiH"," false",[640,765,695],{"class":657},[640,767,768],{"class":650},")] ",[640,770,771],{"class":657},"}",[640,773,774],{"class":650},")\n",[418,776,777,780,781,784,785,788],{},[421,778,779],{},"main.ts"," — Nuxt UI and the editor context. ",[421,782,783],{},"createEditor()"," (from the Vue layer, ",[421,786,787],{},"@skaile\u002Fforge-editor\u002Fvue",") owns the settings of this app and is required by every editor component:",[631,790,792],{"className":633,"code":791,"language":635,"meta":636,"style":636},"import ui from '@nuxt\u002Fui\u002Fvue-plugin'\nimport { createEditor } from '@skaile\u002Fforge-editor\u002Fvue'\nimport { createApp } from 'vue'\nimport App from '.\u002FApp.vue'\nimport '.\u002Fstyle.css'\n\ncreateApp(App).use(ui).use(createEditor()).mount('#app')\n",[421,793,794,809,828,847,863,874,879],{"__ignoreMap":636},[640,795,796,798,800,802,804,807],{"class":642,"line":643},[640,797,647],{"class":646},[640,799,651],{"class":650},[640,801,654],{"class":646},[640,803,658],{"class":657},[640,805,806],{"class":661},"@nuxt\u002Fui\u002Fvue-plugin",[640,808,665],{"class":657},[640,810,811,813,815,818,820,822,824,826],{"class":642,"line":668},[640,812,647],{"class":646},[640,814,689],{"class":657},[640,816,817],{"class":650}," createEditor",[640,819,695],{"class":657},[640,821,698],{"class":646},[640,823,658],{"class":657},[640,825,787],{"class":661},[640,827,665],{"class":657},[640,829,830,832,834,837,839,841,843,845],{"class":642,"line":684},[640,831,647],{"class":646},[640,833,689],{"class":657},[640,835,836],{"class":650}," createApp",[640,838,695],{"class":657},[640,840,698],{"class":646},[640,842,658],{"class":657},[640,844,500],{"class":661},[640,846,665],{"class":657},[640,848,849,851,854,856,858,861],{"class":642,"line":707},[640,850,647],{"class":646},[640,852,853],{"class":650}," App ",[640,855,654],{"class":646},[640,857,658],{"class":657},[640,859,860],{"class":661},".\u002FApp.vue",[640,862,665],{"class":657},[640,864,865,867,869,872],{"class":642,"line":714},[640,866,647],{"class":646},[640,868,658],{"class":657},[640,870,871],{"class":661},".\u002Fstyle.css",[640,873,665],{"class":657},[640,875,877],{"class":642,"line":876},6,[640,878,711],{"emptyLinePlaceholder":710},[640,880,882,885,888,890,893,896,898,900,902,905,908,910,913,915,918,921,923],{"class":642,"line":881},7,[640,883,884],{"class":723},"createApp",[640,886,887],{"class":650},"(App)",[640,889,565],{"class":657},[640,891,892],{"class":723},"use",[640,894,895],{"class":650},"(ui)",[640,897,565],{"class":657},[640,899,892],{"class":723},[640,901,726],{"class":650},[640,903,904],{"class":723},"createEditor",[640,906,907],{"class":650},"())",[640,909,565],{"class":657},[640,911,912],{"class":723},"mount",[640,914,726],{"class":650},[640,916,917],{"class":657},"'",[640,919,920],{"class":661},"#app",[640,922,917],{"class":657},[640,924,774],{"class":650},[418,926,927,929,930,933,934,937,938,941,942,945,946,949,950,501,953,956,957,960,961,964,965,968,969,493,972,975,976,964,979,982,983,545,986,989,990,992,993,493,996,999,1000,565],{},[421,928,783],{}," loads and saves the settings per account through its backend: with the default backend (",[421,931,932],{},"createFetchBackend",", the HTTP routes of the Nuxt module over the platform ",[421,935,936],{},"fetch",") the first ",[421,939,940],{},"useEditorSettings()"," asks ",[421,943,944],{},"GET \u002Fapi\u002Feditor\u002Fsettings"," and every change is sent with ",[421,947,948],{},"PUT",". They are local-only (",[421,951,952],{},"localStorage",[421,954,955],{},"tiptap-editor:settings",") when the backend offers no ",[421,958,959],{},"settings"," capability: ",[421,962,963],{},"createEditor({ backend: createMemoryBackend() })",". ",[421,966,967],{},"createEditor({ backend })"," swaps the whole data layer of all features (documents, uploads, mention lookups, settings, themes, AI); ",[421,970,971],{},"createHttpBackend({ fetch })",[421,973,974],{},"@skaile\u002Fforge-editor\u002Fadapters\u002Fhttp",") lets a host hand in its own HTTP client such as Nuxt's ",[421,977,978],{},"$fetch",[421,980,981],{},"createEditor({ locale: 'en' })"," switches every string the editor renders to English (default ",[421,984,985],{},"'de'",[421,987,988],{},"createEditor({ messages: { 'toolbar.bold': 'Strong' } })"," overrides single messages; see ",[434,991,322],{"href":323},". Components read ",[421,994,995],{},"useEditorI18n()",[421,997,998],{},"{ t, locale }","); the Nuxt module takes the same two options as ",[421,1001,1002],{},"tiptapEditor: { locale, messages }",[418,1004,1005,1007,1008,1011,1012,1015,1016,1018,1019,501,1022,501,1025,501,1028,1031,1032,428,1035,1038,1039,1041,1042,1044,1045,565],{},[421,1006,783],{}," is a thin Vue plugin. The headless core (",[421,1009,1010],{},"@skaile\u002Fforge-editor\u002Fcore",") imports no Vue: ",[421,1013,1014],{},"createEditorContext(options)"," returns the framework-free context with the same options, whose ",[421,1017,959],{}," is a store (",[421,1020,1021],{},"get()",[421,1023,1024],{},"set(value)",[421,1026,1027],{},"update(recipe)",[421,1029,1030],{},"subscribe(listener)",") and whose ",[421,1033,1034],{},"ready",[421,1036,1037],{},"synced"," are read-only stores. ",[421,1040,783],{}," creates that context, provides it to the app and disposes it on unmount; Vue components read the settings through ",[421,1043,940],{}," (reactive refs) from ",[421,1046,787],{},[418,1048,1049,1052,1053,1056,1057,1060,1061,1063,1064,1067],{},[421,1050,1051],{},"style.css"," — Tailwind, Nuxt UI, then the core CSS, and let Tailwind scan the library's whole ",[421,1054,1055],{},"dist"," (the Features' ",[421,1058,1059],{},"features\u002F*\u002Fcomponents"," sit beside ",[421,1062,500],{},"; in this repository the examples scan the sibling's ",[421,1065,1066],{},"src"," instead):",[631,1069,1073],{"className":1070,"code":1071,"language":1072,"meta":636,"style":636},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","@import \"tailwindcss\";\n@import \"@nuxt\u002Fui\";\n@import \"@skaile\u002Fforge-editor\u002Fstyles\u002Fcore.css\";\n@source \"..\u002Fnode_modules\u002F@skaile\u002Fforge-editor\u002Fdist\"; \u002F* relative path from this CSS file to the installed package's dist *\u002F\n","css",[421,1074,1075,1091,1103,1116],{"__ignoreMap":636},[640,1076,1077,1080,1083,1085,1088],{"class":642,"line":643},[640,1078,1079],{"class":646},"@import",[640,1081,1082],{"class":657}," \"",[640,1084,507],{"class":661},[640,1086,1087],{"class":657},"\"",[640,1089,1090],{"class":657},";\n",[640,1092,1093,1095,1097,1099,1101],{"class":642,"line":668},[640,1094,1079],{"class":646},[640,1096,1082],{"class":657},[640,1098,504],{"class":661},[640,1100,1087],{"class":657},[640,1102,1090],{"class":657},[640,1104,1105,1107,1109,1112,1114],{"class":642,"line":684},[640,1106,1079],{"class":646},[640,1108,1082],{"class":657},[640,1110,1111],{"class":661},"@skaile\u002Fforge-editor\u002Fstyles\u002Fcore.css",[640,1113,1087],{"class":657},[640,1115,1090],{"class":657},[640,1117,1118,1121],{"class":642,"line":707},[640,1119,1120],{"class":646},"@source",[640,1122,1123],{"class":650}," \"..\u002Fnode_modules\u002F@skaile\u002Fforge-editor\u002Fdist\"; \u002F* relative path from this CSS file to the installed package's dist *\u002F\n",[418,1125,1126,1129,1130,1133],{},[421,1127,1128],{},"App.vue"," wraps everything in ",[421,1131,1132],{},"\u003CUApp>"," (overlays, tooltips, toasts).",[467,1135,1137],{"id":1136},"mount-the-editor","Mount the editor",[631,1139,1142],{"className":1140,"code":1141,"language":500,"meta":636,"style":636},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref, shallowRef } from 'vue'\nimport type { Editor, JSONContent } from '@tiptap\u002Fcore'\nimport { SimpleEditor } from '@skaile\u002Fforge-editor\u002Fvue\u002Fsimple'\nimport { EditorToolbar } from '@skaile\u002Fforge-editor\u002Fvue'\nimport { EditorOutline } from '@skaile\u002Fforge-editor\u002Foutline\u002Fvue'\n\nconst editor = shallowRef\u003CEditor>()\nconst content = ref\u003CJSONContent>({ type: 'doc', content: [{ type: 'paragraph' }] })\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUApp>\n    \u003CEditorToolbar :editor=\"editor\" \u002F>\n    \u003CSimpleEditor v-model=\"content\" @ready=\"editor = $event\" \u002F>\n    \u003CEditorOutline :editor=\"editor\" \u002F>\n  \u003C\u002FUApp>\n\u003C\u002Ftemplate>\n",[421,1143,1144,1171,1195,1222,1242,1261,1281,1285,1310,1375,1385,1390,1400,1411,1437,1477,1499,1509],{"__ignoreMap":636},[640,1145,1146,1149,1152,1156,1159,1162,1164,1166,1168],{"class":642,"line":643},[640,1147,1148],{"class":657},"\u003C",[640,1150,1151],{"class":732},"script",[640,1153,1155],{"class":1154},"spNyl"," setup",[640,1157,1158],{"class":1154}," lang",[640,1160,1161],{"class":657},"=",[640,1163,1087],{"class":657},[640,1165,635],{"class":661},[640,1167,1087],{"class":657},[640,1169,1170],{"class":657},">\n",[640,1172,1173,1175,1177,1180,1182,1185,1187,1189,1191,1193],{"class":642,"line":668},[640,1174,647],{"class":646},[640,1176,689],{"class":657},[640,1178,1179],{"class":650}," ref",[640,1181,747],{"class":657},[640,1183,1184],{"class":650}," shallowRef",[640,1186,695],{"class":657},[640,1188,698],{"class":646},[640,1190,658],{"class":657},[640,1192,500],{"class":661},[640,1194,665],{"class":657},[640,1196,1197,1199,1202,1204,1207,1209,1212,1214,1216,1218,1220],{"class":642,"line":684},[640,1198,647],{"class":646},[640,1200,1201],{"class":646}," type",[640,1203,689],{"class":657},[640,1205,1206],{"class":650}," Editor",[640,1208,747],{"class":657},[640,1210,1211],{"class":650}," JSONContent",[640,1213,695],{"class":657},[640,1215,698],{"class":646},[640,1217,658],{"class":657},[640,1219,513],{"class":661},[640,1221,665],{"class":657},[640,1223,1224,1226,1228,1231,1233,1235,1237,1240],{"class":642,"line":707},[640,1225,647],{"class":646},[640,1227,689],{"class":657},[640,1229,1230],{"class":650}," SimpleEditor",[640,1232,695],{"class":657},[640,1234,698],{"class":646},[640,1236,658],{"class":657},[640,1238,1239],{"class":661},"@skaile\u002Fforge-editor\u002Fvue\u002Fsimple",[640,1241,665],{"class":657},[640,1243,1244,1246,1248,1251,1253,1255,1257,1259],{"class":642,"line":714},[640,1245,647],{"class":646},[640,1247,689],{"class":657},[640,1249,1250],{"class":650}," EditorToolbar",[640,1252,695],{"class":657},[640,1254,698],{"class":646},[640,1256,658],{"class":657},[640,1258,787],{"class":661},[640,1260,665],{"class":657},[640,1262,1263,1265,1267,1270,1272,1274,1276,1279],{"class":642,"line":876},[640,1264,647],{"class":646},[640,1266,689],{"class":657},[640,1268,1269],{"class":650}," EditorOutline",[640,1271,695],{"class":657},[640,1273,698],{"class":646},[640,1275,658],{"class":657},[640,1277,1278],{"class":661},"@skaile\u002Fforge-editor\u002Foutline\u002Fvue",[640,1280,665],{"class":657},[640,1282,1283],{"class":642,"line":881},[640,1284,711],{"emptyLinePlaceholder":710},[640,1286,1288,1291,1294,1296,1298,1300,1304,1307],{"class":642,"line":1287},8,[640,1289,1290],{"class":1154},"const",[640,1292,1293],{"class":650}," editor ",[640,1295,1161],{"class":657},[640,1297,1184],{"class":723},[640,1299,1148],{"class":657},[640,1301,1303],{"class":1302},"sBMFI","Editor",[640,1305,1306],{"class":657},">",[640,1308,1309],{"class":650},"()\n",[640,1311,1313,1315,1318,1320,1322,1324,1327,1329,1331,1333,1335,1337,1339,1342,1344,1346,1349,1351,1353,1355,1357,1359,1361,1364,1366,1368,1371,1373],{"class":642,"line":1312},9,[640,1314,1290],{"class":1154},[640,1316,1317],{"class":650}," content ",[640,1319,1161],{"class":657},[640,1321,1179],{"class":723},[640,1323,1148],{"class":657},[640,1325,1326],{"class":1302},"JSONContent",[640,1328,1306],{"class":657},[640,1330,726],{"class":650},[640,1332,729],{"class":657},[640,1334,1201],{"class":732},[640,1336,736],{"class":657},[640,1338,658],{"class":657},[640,1340,1341],{"class":661},"doc",[640,1343,917],{"class":657},[640,1345,747],{"class":657},[640,1347,1348],{"class":732}," content",[640,1350,736],{"class":657},[640,1352,739],{"class":650},[640,1354,729],{"class":657},[640,1356,1201],{"class":732},[640,1358,736],{"class":657},[640,1360,658],{"class":657},[640,1362,1363],{"class":661},"paragraph",[640,1365,917],{"class":657},[640,1367,695],{"class":657},[640,1369,1370],{"class":650},"] ",[640,1372,771],{"class":657},[640,1374,774],{"class":650},[640,1376,1378,1381,1383],{"class":642,"line":1377},10,[640,1379,1380],{"class":657},"\u003C\u002F",[640,1382,1151],{"class":732},[640,1384,1170],{"class":657},[640,1386,1388],{"class":642,"line":1387},11,[640,1389,711],{"emptyLinePlaceholder":710},[640,1391,1393,1395,1398],{"class":642,"line":1392},12,[640,1394,1148],{"class":657},[640,1396,1397],{"class":732},"template",[640,1399,1170],{"class":657},[640,1401,1403,1406,1409],{"class":642,"line":1402},13,[640,1404,1405],{"class":657},"  \u003C",[640,1407,1408],{"class":732},"UApp",[640,1410,1170],{"class":657},[640,1412,1414,1417,1420,1423,1426,1428,1430,1432,1434],{"class":642,"line":1413},14,[640,1415,1416],{"class":657},"    \u003C",[640,1418,1419],{"class":732},"EditorToolbar",[640,1421,1422],{"class":657}," :",[640,1424,1425],{"class":1154},"editor",[640,1427,1161],{"class":657},[640,1429,1087],{"class":657},[640,1431,1425],{"class":650},[640,1433,1087],{"class":657},[640,1435,1436],{"class":657}," \u002F>\n",[640,1438,1440,1442,1444,1447,1449,1451,1454,1456,1459,1461,1463,1465,1467,1470,1473,1475],{"class":642,"line":1439},15,[640,1441,1416],{"class":657},[640,1443,423],{"class":732},[640,1445,1446],{"class":1154}," v-model",[640,1448,1161],{"class":657},[640,1450,1087],{"class":657},[640,1452,1453],{"class":650},"content",[640,1455,1087],{"class":657},[640,1457,1458],{"class":657}," @",[640,1460,1034],{"class":1154},[640,1462,1161],{"class":657},[640,1464,1087],{"class":657},[640,1466,1425],{"class":650},[640,1468,1469],{"class":657}," = ",[640,1471,1472],{"class":650},"$event",[640,1474,1087],{"class":657},[640,1476,1436],{"class":657},[640,1478,1480,1482,1485,1487,1489,1491,1493,1495,1497],{"class":642,"line":1479},16,[640,1481,1416],{"class":657},[640,1483,1484],{"class":732},"EditorOutline",[640,1486,1422],{"class":657},[640,1488,1425],{"class":1154},[640,1490,1161],{"class":657},[640,1492,1087],{"class":657},[640,1494,1425],{"class":650},[640,1496,1087],{"class":657},[640,1498,1436],{"class":657},[640,1500,1502,1505,1507],{"class":642,"line":1501},17,[640,1503,1504],{"class":657},"  \u003C\u002F",[640,1506,1408],{"class":732},[640,1508,1170],{"class":657},[640,1510,1512,1514,1516],{"class":642,"line":1511},18,[640,1513,1380],{"class":657},[640,1515,1397],{"class":732},[640,1517,1170],{"class":657},[418,1519,1520,1521,1524],{},"Try it here: type, use the toolbar, switch to read-only and watch the JSON ",[421,1522,1523],{},"v-model"," and the outline.",[1526,1527],"demo-simple-editor",{},[467,1529,1531],{"id":1530},"next-steps","Next steps",[418,1533,1534,1535,1537,1538,1540,1541,565],{},"The ",[434,1536,464],{"href":51}," continues from this editor; the props and events of ",[421,1539,423],{}," are covered there. To add features such as mentions, media, tables and block UI, see ",[434,1542,1543],{"href":56},"Compose features",[1545,1546,1547],"style",{},"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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":636,"searchDepth":668,"depth":668,"links":1549},[1550,1551,1552],{"id":469,"depth":668,"text":470},{"id":1136,"depth":668,"text":1137},{"id":1530,"depth":668,"text":1531},"Set up the simple editor in a Vite and Vue app: peers, Nuxt UI plugin, CSS and a mounted SimpleEditor with toolbar and outline.","md",null,{},{"icon":6},{"title":25,"description":1553},"p7wC7y9gPvZe86wgIVE92gp148hgghq8IY0siBnG_AM",[1561,1563],{"title":21,"path":22,"stem":23,"description":1562,"icon":6,"children":-1},"Register the Nuxt module, provide EditorPorts and mount the simple and the advanced editor in a Nuxt app.",{"title":29,"path":30,"stem":31,"description":1564,"icon":6,"children":-1},"Set up the simple editor in a Vite and React app: peers, Tailwind and shadcn tokens, EditorContextProvider, EditorSurface and SimpleEditor.",1793213896826]