[{"data":1,"prerenderedAt":4381},["ShallowReactive",2],{"navigation_docs":3,"-tutorial-own-block-path-a":412,"-tutorial-own-block-path-a-surround":4376},[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":60,"body":414,"description":4369,"extension":4370,"links":4371,"meta":4372,"navigation":4373,"path":61,"seo":4374,"stem":62,"__hash__":4375},"docs\u002F2.tutorial\u002F4.own-block-path-a.md",{"type":415,"value":416,"toc":4357},"minimark",[417,446,449,537,544,549,669,672,676,681,694,697,1036,1046,1187,1202,1624,1631,2131,2134,2421,2425,2453,2626,2651,2669,2673,2679,2866,2880,2887,3483,3502,3926,3934,3958,4072,4092,4221,4231,4234,4237,4297,4324,4328,4344,4348,4353],[418,419,420,421,425,426,430,431,434,435,438,439,438,442,445],"p",{},"Meeting notes need a block the library does not ship: a coloured box for a hint, a warning or a decision. In this chapter you write it as the ",[422,423,424],"strong",{},"„Hinweis“ block"," (",[427,428,429],"code",{},"callout",", attribute ",[427,432,433],{},"tone"," = ",[427,436,437],{},"info"," | ",[427,440,441],{},"warning",[427,443,444],{},"success",") and add it to the simple editor through two props. The chapter after this one turns the same node into a full feature.",[418,447,448],{},"The example exists twice on purpose, so each runnable app is self-contained; both copies are identical:",[450,451,452,468],"table",{},[453,454,455],"thead",{},[456,457,458,462,465],"tr",{},[459,460,461],"th",{},"Copy",[459,463,464],{},"Files",[459,466,467],{},"Used by",[469,470,471,512],"tbody",{},[456,472,473,477,502],{},[474,475,476],"td",{},"Simple playground",[474,478,479,488,489,492,493,492,496,492,499],{},[480,481,485],"a",{"href":482,"rel":483},"https:\u002F\u002Fgithub.com\u002Fskaile-ai\u002Fforge-editor\u002Ftree\u002Fmain\u002Fexamples\u002Fvue-simple\u002Fsrc\u002Fcallout",[484],"nofollow",[427,486,487],{},"examples\u002Fvue-simple\u002Fsrc\u002Fcallout\u002F",": ",[427,490,491],{},"node.ts",", ",[427,494,495],{},"CalloutView.vue",[427,497,498],{},"index.ts",[427,500,501],{},"callout.css",[474,503,504,505],{},"Path A, wired in ",[480,506,509],{"href":507,"rel":508},"https:\u002F\u002Fgithub.com\u002Fskaile-ai\u002Fforge-editor\u002Fblob\u002Fmain\u002Fexamples\u002Fvue-simple\u002Fsrc\u002FApp.vue",[484],[427,510,511],{},"examples\u002Fvue-simple\u002Fsrc\u002FApp.vue",[456,513,514,517,534],{},[474,515,516],{},"Advanced kitchen sink",[474,518,519,526,527,530,531],{},[480,520,523],{"href":521,"rel":522},"https:\u002F\u002Fgithub.com\u002Fskaile-ai\u002Fforge-editor\u002Ftree\u002Fmain\u002Fapp\u002Feditor\u002Fcallout",[484],[427,524,525],{},"app\u002Feditor\u002Fcallout\u002F",": the same four files plus ",[427,528,529],{},"feature.ts"," and ",[427,532,533],{},"convert.ts",[474,535,536],{},"Path B, chapter 5",[418,538,539,540,543],{},"Start the simple playground with ",[427,541,542],{},"bun run --cwd examples\u002Fvue-simple dev"," (port 3040) and pick the sample „Hinweise“. The UI strings of the examples are German, the code and this guide are English.",[545,546,548],"h2",{"id":547},"two-ways-to-add-a-block","Two ways to add a block",[450,550,551,563],{},[453,552,553],{},[456,554,555,557,560],{},[459,556],{},[459,558,559],{},"Path A: props",[459,561,562],{},"Path B: a feature",[469,564,565,601,633,658],{},[456,566,567,570,577],{},[474,568,569],{},"What you write",[474,571,572,573,576],{},"A TipTap node, plus a ",[427,574,575],{},"commands"," transformer",[474,578,579,580,425,583,492,586,492,589,492,591,492,594,492,597,600],{},"An ",[427,581,582],{},"EditorFeature",[427,584,585],{},"id",[427,587,588],{},"extensions",[427,590,575],{},[427,592,593],{},"toolbarGroups",[427,595,596],{},"blockActions",[427,598,599],{},"conversions",", …)",[456,602,603,606,624],{},[474,604,605],{},"Where it plugs in",[474,607,608,609,530,611,613,614,492,617,620,621],{},"The ",[427,610,588],{},[427,612,575],{}," props of ",[427,615,616],{},"SimpleEditor",[427,618,619],{},"AdvancedEditor"," or ",[427,622,623],{},"EditorSurface",[474,625,626,627,630,631],{},"A preset: ",[427,628,629],{},"defineEditor({ features: [...] })"," mounted with ",[427,632,623],{},[456,634,635,638,648],{},[474,636,637],{},"You get",[474,639,640,641,644,645],{},"The node in the schema, its commands, input rules and shortcuts, its Markdown form, a ",[427,642,643],{},"\u002F"," menu entry, block IDs when the node declares ",[427,646,647],{},"editorBlock",[474,649,650,651,653,654,657],{},"Everything of path A, plus a toolbar button, ability-gated ",[427,652,643],{}," entries, hover actions, „Umwandeln in …“ targets and a ",[427,655,656],{},"requires"," check of the features it builds on",[456,659,660,663,666],{},[474,661,662],{},"You do not get",[474,664,665],{},"A toolbar button, hover actions, conversion targets: the toolbar renders what features contribute",[474,667,668],{},"—",[418,670,671],{},"Both paths share the same node. Start with path A; move to path B when the block needs a toolbar button, hover actions or conversion.",[545,673,675],{"id":674},"anatomy-of-a-block-the-editor-understands","Anatomy of a block the editor understands",[677,678,680],"h3",{"id":679},"the-node","The node",[418,682,683,685,686,689,690,693],{},[427,684,491],{}," is the complete, Vue-free definition: schema, commands, shortcut and Markdown form. It imports only ",[427,687,688],{},"@tiptap\u002Fcore"," and the Vue-free ",[427,691,692],{},"@skaile\u002Fforge-editor\u002Fcore\u002Fschema",", so a server can import it without loading a component. Four things in order: the tones, the typed commands, the schema, the Markdown form.",[418,695,696],{},"The tones and their labels are plain data, shared with the node view:",[698,699,705],"pre",{"className":700,"code":701,"filename":702,"language":703,"meta":704,"style":704},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { mergeAttributes, Node } from '@tiptap\u002Fcore'\nimport { ABILITY } from '@skaile\u002Fforge-editor\u002Fcore\u002Fschema'\n\n\u002F\u002F Vue-free and server-importable: the callout's schema, commands and Markdown form. The Vue node view is attached in\n\u002F\u002F `index.ts`, so a server (`getSchema([...advancedSchemaExtensions(), Callout])`, or the simple schema) never loads a\n\u002F\u002F component.\n\nexport type Tone = 'info' | 'warning' | 'success'\n\nexport const TONES: readonly { value: Tone, label: string, icon: string }[] = [\n  { value: 'info', label: 'Hinweis', icon: 'i-lucide-info' },\n  { value: 'warning', label: 'Warnung', icon: 'i-lucide-triangle-alert' },\n  { value: 'success', label: 'Erledigt', icon: 'i-lucide-circle-check' },\n]\n","examples\u002Fvue-simple\u002Fsrc\u002Fcallout\u002Fnode.ts","ts","",[427,706,707,745,765,772,779,785,791,796,837,842,899,944,987,1030],{"__ignoreMap":704},[708,709,712,716,720,724,727,730,733,736,739,742],"span",{"class":710,"line":711},"line",1,[708,713,715],{"class":714},"s7zQu","import",[708,717,719],{"class":718},"sMK4o"," {",[708,721,723],{"class":722},"sTEyZ"," mergeAttributes",[708,725,726],{"class":718},",",[708,728,729],{"class":722}," Node",[708,731,732],{"class":718}," }",[708,734,735],{"class":714}," from",[708,737,738],{"class":718}," '",[708,740,688],{"class":741},"sfazB",[708,743,744],{"class":718},"'\n",[708,746,748,750,752,755,757,759,761,763],{"class":710,"line":747},2,[708,749,715],{"class":714},[708,751,719],{"class":718},[708,753,754],{"class":722}," ABILITY",[708,756,732],{"class":718},[708,758,735],{"class":714},[708,760,738],{"class":718},[708,762,692],{"class":741},[708,764,744],{"class":718},[708,766,768],{"class":710,"line":767},3,[708,769,771],{"emptyLinePlaceholder":770},true,"\n",[708,773,775],{"class":710,"line":774},4,[708,776,778],{"class":777},"sHwdD","\u002F\u002F Vue-free and server-importable: the callout's schema, commands and Markdown form. The Vue node view is attached in\n",[708,780,782],{"class":710,"line":781},5,[708,783,784],{"class":777},"\u002F\u002F `index.ts`, so a server (`getSchema([...advancedSchemaExtensions(), Callout])`, or the simple schema) never loads a\n",[708,786,788],{"class":710,"line":787},6,[708,789,790],{"class":777},"\u002F\u002F component.\n",[708,792,794],{"class":710,"line":793},7,[708,795,771],{"emptyLinePlaceholder":770},[708,797,799,802,806,810,813,815,817,820,823,825,827,829,831,833,835],{"class":710,"line":798},8,[708,800,801],{"class":714},"export",[708,803,805],{"class":804},"spNyl"," type",[708,807,809],{"class":808},"sBMFI"," Tone",[708,811,812],{"class":718}," =",[708,814,738],{"class":718},[708,816,437],{"class":741},[708,818,819],{"class":718},"'",[708,821,822],{"class":718}," |",[708,824,738],{"class":718},[708,826,441],{"class":741},[708,828,819],{"class":718},[708,830,822],{"class":718},[708,832,738],{"class":718},[708,834,444],{"class":741},[708,836,744],{"class":718},[708,838,840],{"class":710,"line":839},9,[708,841,771],{"emptyLinePlaceholder":770},[708,843,845,847,850,853,856,859,861,865,867,869,871,874,876,879,881,884,886,888,890,893,896],{"class":710,"line":844},10,[708,846,801],{"class":714},[708,848,849],{"class":804}," const",[708,851,852],{"class":722}," TONES",[708,854,855],{"class":718},":",[708,857,858],{"class":804}," readonly",[708,860,719],{"class":718},[708,862,864],{"class":863},"swJcz"," value",[708,866,855],{"class":718},[708,868,809],{"class":808},[708,870,726],{"class":718},[708,872,873],{"class":863}," label",[708,875,855],{"class":718},[708,877,878],{"class":808}," string",[708,880,726],{"class":718},[708,882,883],{"class":863}," icon",[708,885,855],{"class":718},[708,887,878],{"class":808},[708,889,732],{"class":718},[708,891,892],{"class":722},"[] ",[708,894,895],{"class":718},"=",[708,897,898],{"class":722}," [\n",[708,900,902,905,907,909,911,913,915,917,919,921,923,926,928,930,932,934,936,939,941],{"class":710,"line":901},11,[708,903,904],{"class":718},"  {",[708,906,864],{"class":863},[708,908,855],{"class":718},[708,910,738],{"class":718},[708,912,437],{"class":741},[708,914,819],{"class":718},[708,916,726],{"class":718},[708,918,873],{"class":863},[708,920,855],{"class":718},[708,922,738],{"class":718},[708,924,925],{"class":741},"Hinweis",[708,927,819],{"class":718},[708,929,726],{"class":718},[708,931,883],{"class":863},[708,933,855],{"class":718},[708,935,738],{"class":718},[708,937,938],{"class":741},"i-lucide-info",[708,940,819],{"class":718},[708,942,943],{"class":718}," },\n",[708,945,947,949,951,953,955,957,959,961,963,965,967,970,972,974,976,978,980,983,985],{"class":710,"line":946},12,[708,948,904],{"class":718},[708,950,864],{"class":863},[708,952,855],{"class":718},[708,954,738],{"class":718},[708,956,441],{"class":741},[708,958,819],{"class":718},[708,960,726],{"class":718},[708,962,873],{"class":863},[708,964,855],{"class":718},[708,966,738],{"class":718},[708,968,969],{"class":741},"Warnung",[708,971,819],{"class":718},[708,973,726],{"class":718},[708,975,883],{"class":863},[708,977,855],{"class":718},[708,979,738],{"class":718},[708,981,982],{"class":741},"i-lucide-triangle-alert",[708,984,819],{"class":718},[708,986,943],{"class":718},[708,988,990,992,994,996,998,1000,1002,1004,1006,1008,1010,1013,1015,1017,1019,1021,1023,1026,1028],{"class":710,"line":989},13,[708,991,904],{"class":718},[708,993,864],{"class":863},[708,995,855],{"class":718},[708,997,738],{"class":718},[708,999,444],{"class":741},[708,1001,819],{"class":718},[708,1003,726],{"class":718},[708,1005,873],{"class":863},[708,1007,855],{"class":718},[708,1009,738],{"class":718},[708,1011,1012],{"class":741},"Erledigt",[708,1014,819],{"class":718},[708,1016,726],{"class":718},[708,1018,883],{"class":863},[708,1020,855],{"class":718},[708,1022,738],{"class":718},[708,1024,1025],{"class":741},"i-lucide-circle-check",[708,1027,819],{"class":718},[708,1029,943],{"class":718},[708,1031,1033],{"class":710,"line":1032},14,[708,1034,1035],{"class":722},"]\n",[418,1037,1038,1039,1041,1042,1045],{},"The commands are declared on TipTap's ",[427,1040,374],{}," interface so ",[427,1043,1044],{},"editor.commands.setCallout()"," is typed everywhere:",[698,1047,1049],{"className":700,"code":1048,"filename":702,"language":703,"meta":704,"style":704},"declare module '@tiptap\u002Fcore' {\n  interface Commands\u003CReturnType> {\n    callout: {\n      \u002F** Wrap the selected blocks in a callout of `tone` (default `info`). *\u002F\n      setCallout: (tone?: Tone) => ReturnType\n      \u002F** Wrap the selection in a callout, or lift it out when it already is inside one. *\u002F\n      toggleCallout: () => ReturnType\n      \u002F** Change the tone of the callout around the selection. *\u002F\n      setCalloutTone: (tone: Tone) => ReturnType\n    }\n  }\n}\n",[427,1050,1051,1068,1087,1096,1101,1127,1132,1146,1151,1172,1177,1182],{"__ignoreMap":704},[708,1052,1053,1056,1059,1061,1063,1065],{"class":710,"line":711},[708,1054,1055],{"class":804},"declare",[708,1057,1058],{"class":804}," module",[708,1060,738],{"class":718},[708,1062,688],{"class":741},[708,1064,819],{"class":718},[708,1066,1067],{"class":718}," {\n",[708,1069,1070,1073,1076,1079,1082,1085],{"class":710,"line":747},[708,1071,1072],{"class":804},"  interface",[708,1074,1075],{"class":808}," Commands",[708,1077,1078],{"class":718},"\u003C",[708,1080,1081],{"class":808},"ReturnType",[708,1083,1084],{"class":718},">",[708,1086,1067],{"class":718},[708,1088,1089,1092,1094],{"class":710,"line":767},[708,1090,1091],{"class":863},"    callout",[708,1093,855],{"class":718},[708,1095,1067],{"class":718},[708,1097,1098],{"class":710,"line":774},[708,1099,1100],{"class":777},"      \u002F** Wrap the selected blocks in a callout of `tone` (default `info`). *\u002F\n",[708,1102,1103,1106,1108,1110,1113,1116,1118,1121,1124],{"class":710,"line":781},[708,1104,1105],{"class":863},"      setCallout",[708,1107,855],{"class":718},[708,1109,425],{"class":718},[708,1111,433],{"class":1112},"sHdIc",[708,1114,1115],{"class":718},"?:",[708,1117,809],{"class":808},[708,1119,1120],{"class":718},")",[708,1122,1123],{"class":804}," =>",[708,1125,1126],{"class":808}," ReturnType\n",[708,1128,1129],{"class":710,"line":787},[708,1130,1131],{"class":777},"      \u002F** Wrap the selection in a callout, or lift it out when it already is inside one. *\u002F\n",[708,1133,1134,1137,1139,1142,1144],{"class":710,"line":793},[708,1135,1136],{"class":863},"      toggleCallout",[708,1138,855],{"class":718},[708,1140,1141],{"class":718}," ()",[708,1143,1123],{"class":804},[708,1145,1126],{"class":808},[708,1147,1148],{"class":710,"line":798},[708,1149,1150],{"class":777},"      \u002F** Change the tone of the callout around the selection. *\u002F\n",[708,1152,1153,1156,1158,1160,1162,1164,1166,1168,1170],{"class":710,"line":839},[708,1154,1155],{"class":863},"      setCalloutTone",[708,1157,855],{"class":718},[708,1159,425],{"class":718},[708,1161,433],{"class":1112},[708,1163,855],{"class":718},[708,1165,809],{"class":808},[708,1167,1120],{"class":718},[708,1169,1123],{"class":804},[708,1171,1126],{"class":808},[708,1173,1174],{"class":710,"line":844},[708,1175,1176],{"class":718},"    }\n",[708,1178,1179],{"class":710,"line":901},[708,1180,1181],{"class":718},"  }\n",[708,1183,1184],{"class":710,"line":946},[708,1185,1186],{"class":718},"}\n",[418,1188,1189,1190,1193,1194,1196,1197,530,1199,855],{},"The schema part of the node. A callout holds one or more blocks (",[427,1191,1192],{},"content: 'block+'","), carries a ",[427,1195,433],{}," attribute, and declares two fields the library reads: ",[427,1198,647],{},[427,1200,1201],{},"abilities",[698,1203,1205],{"className":700,"code":1204,"filename":702,"language":703,"meta":704,"style":704},"export const Callout = Node.create({\n  name: 'callout',\n  group: 'block',\n  content: 'block+',\n  defining: true,\n  \u002F\u002F Carries a block ID like a paragraph: block flash\u002Freveal, paste de-duplication, the server's ID backfill.\n  editorBlock: true,\n  \u002F\u002F A callout holds plain text blocks: no headings, Typed blocks, media, records or speaker lines inside it.\n  abilities: {\n    revokes: [ABILITY.headings, ABILITY.composite, ABILITY.media, ABILITY.record, ABILITY.transcript],\n  },\n  addAttributes: () => ({\n    tone: {\n      default: 'info',\n      parseHTML: el => el.getAttribute('data-tone') ?? 'info',\n      renderHTML: attrs => ({ 'data-tone': attrs.tone }),\n    },\n  }),\n  parseHTML: () => [{ tag: 'div[data-type=\"callout\"]' }],\n  renderHTML: ({ HTMLAttributes }) => ['div', mergeAttributes(HTMLAttributes, { 'data-type': 'callout' }), 0],\n",[427,1206,1207,1233,1249,1265,1281,1294,1299,1310,1315,1324,1377,1382,1397,1406,1421,1464,1504,1510,1520,1556],{"__ignoreMap":704},[708,1208,1209,1211,1213,1216,1218,1220,1223,1227,1230],{"class":710,"line":711},[708,1210,801],{"class":714},[708,1212,849],{"class":804},[708,1214,1215],{"class":722}," Callout ",[708,1217,895],{"class":718},[708,1219,729],{"class":722},[708,1221,1222],{"class":718},".",[708,1224,1226],{"class":1225},"s2Zo4","create",[708,1228,1229],{"class":722},"(",[708,1231,1232],{"class":718},"{\n",[708,1234,1235,1238,1240,1242,1244,1246],{"class":710,"line":747},[708,1236,1237],{"class":863},"  name",[708,1239,855],{"class":718},[708,1241,738],{"class":718},[708,1243,429],{"class":741},[708,1245,819],{"class":718},[708,1247,1248],{"class":718},",\n",[708,1250,1251,1254,1256,1258,1261,1263],{"class":710,"line":767},[708,1252,1253],{"class":863},"  group",[708,1255,855],{"class":718},[708,1257,738],{"class":718},[708,1259,1260],{"class":741},"block",[708,1262,819],{"class":718},[708,1264,1248],{"class":718},[708,1266,1267,1270,1272,1274,1277,1279],{"class":710,"line":774},[708,1268,1269],{"class":863},"  content",[708,1271,855],{"class":718},[708,1273,738],{"class":718},[708,1275,1276],{"class":741},"block+",[708,1278,819],{"class":718},[708,1280,1248],{"class":718},[708,1282,1283,1286,1288,1292],{"class":710,"line":781},[708,1284,1285],{"class":863},"  defining",[708,1287,855],{"class":718},[708,1289,1291],{"class":1290},"sfNiH"," true",[708,1293,1248],{"class":718},[708,1295,1296],{"class":710,"line":787},[708,1297,1298],{"class":777},"  \u002F\u002F Carries a block ID like a paragraph: block flash\u002Freveal, paste de-duplication, the server's ID backfill.\n",[708,1300,1301,1304,1306,1308],{"class":710,"line":793},[708,1302,1303],{"class":863},"  editorBlock",[708,1305,855],{"class":718},[708,1307,1291],{"class":1290},[708,1309,1248],{"class":718},[708,1311,1312],{"class":710,"line":798},[708,1313,1314],{"class":777},"  \u002F\u002F A callout holds plain text blocks: no headings, Typed blocks, media, records or speaker lines inside it.\n",[708,1316,1317,1320,1322],{"class":710,"line":839},[708,1318,1319],{"class":863},"  abilities",[708,1321,855],{"class":718},[708,1323,1067],{"class":718},[708,1325,1326,1329,1331,1334,1336,1339,1341,1343,1345,1348,1350,1352,1354,1357,1359,1361,1363,1366,1368,1370,1372,1375],{"class":710,"line":844},[708,1327,1328],{"class":863},"    revokes",[708,1330,855],{"class":718},[708,1332,1333],{"class":722}," [ABILITY",[708,1335,1222],{"class":718},[708,1337,1338],{"class":722},"headings",[708,1340,726],{"class":718},[708,1342,754],{"class":722},[708,1344,1222],{"class":718},[708,1346,1347],{"class":722},"composite",[708,1349,726],{"class":718},[708,1351,754],{"class":722},[708,1353,1222],{"class":718},[708,1355,1356],{"class":722},"media",[708,1358,726],{"class":718},[708,1360,754],{"class":722},[708,1362,1222],{"class":718},[708,1364,1365],{"class":722},"record",[708,1367,726],{"class":718},[708,1369,754],{"class":722},[708,1371,1222],{"class":718},[708,1373,1374],{"class":722},"transcript]",[708,1376,1248],{"class":718},[708,1378,1379],{"class":710,"line":901},[708,1380,1381],{"class":718},"  },\n",[708,1383,1384,1387,1389,1391,1393,1395],{"class":710,"line":946},[708,1385,1386],{"class":1225},"  addAttributes",[708,1388,855],{"class":718},[708,1390,1141],{"class":718},[708,1392,1123],{"class":804},[708,1394,425],{"class":722},[708,1396,1232],{"class":718},[708,1398,1399,1402,1404],{"class":710,"line":989},[708,1400,1401],{"class":863},"    tone",[708,1403,855],{"class":718},[708,1405,1067],{"class":718},[708,1407,1408,1411,1413,1415,1417,1419],{"class":710,"line":1032},[708,1409,1410],{"class":863},"      default",[708,1412,855],{"class":718},[708,1414,738],{"class":718},[708,1416,437],{"class":741},[708,1418,819],{"class":718},[708,1420,1248],{"class":718},[708,1422,1424,1427,1429,1432,1434,1436,1438,1441,1443,1445,1448,1450,1453,1456,1458,1460,1462],{"class":710,"line":1423},15,[708,1425,1426],{"class":1225},"      parseHTML",[708,1428,855],{"class":718},[708,1430,1431],{"class":1112}," el",[708,1433,1123],{"class":804},[708,1435,1431],{"class":722},[708,1437,1222],{"class":718},[708,1439,1440],{"class":1225},"getAttribute",[708,1442,1229],{"class":722},[708,1444,819],{"class":718},[708,1446,1447],{"class":741},"data-tone",[708,1449,819],{"class":718},[708,1451,1452],{"class":722},") ",[708,1454,1455],{"class":718},"??",[708,1457,738],{"class":718},[708,1459,437],{"class":741},[708,1461,819],{"class":718},[708,1463,1248],{"class":718},[708,1465,1467,1470,1472,1475,1477,1479,1482,1484,1486,1488,1490,1492,1494,1497,1500,1502],{"class":710,"line":1466},16,[708,1468,1469],{"class":1225},"      renderHTML",[708,1471,855],{"class":718},[708,1473,1474],{"class":1112}," attrs",[708,1476,1123],{"class":804},[708,1478,425],{"class":722},[708,1480,1481],{"class":718},"{",[708,1483,738],{"class":718},[708,1485,1447],{"class":863},[708,1487,819],{"class":718},[708,1489,855],{"class":718},[708,1491,1474],{"class":722},[708,1493,1222],{"class":718},[708,1495,1496],{"class":722},"tone ",[708,1498,1499],{"class":718},"}",[708,1501,1120],{"class":722},[708,1503,1248],{"class":718},[708,1505,1507],{"class":710,"line":1506},17,[708,1508,1509],{"class":718},"    },\n",[708,1511,1513,1516,1518],{"class":710,"line":1512},18,[708,1514,1515],{"class":718},"  }",[708,1517,1120],{"class":722},[708,1519,1248],{"class":718},[708,1521,1523,1526,1528,1530,1532,1535,1537,1540,1542,1544,1547,1549,1551,1554],{"class":710,"line":1522},19,[708,1524,1525],{"class":1225},"  parseHTML",[708,1527,855],{"class":718},[708,1529,1141],{"class":718},[708,1531,1123],{"class":804},[708,1533,1534],{"class":722}," [",[708,1536,1481],{"class":718},[708,1538,1539],{"class":863}," tag",[708,1541,855],{"class":718},[708,1543,738],{"class":718},[708,1545,1546],{"class":741},"div[data-type=\"callout\"]",[708,1548,819],{"class":718},[708,1550,732],{"class":718},[708,1552,1553],{"class":722},"]",[708,1555,1248],{"class":718},[708,1557,1559,1562,1564,1567,1570,1573,1575,1577,1579,1582,1584,1586,1588,1591,1593,1595,1597,1600,1602,1604,1606,1608,1610,1612,1614,1616,1620,1622],{"class":710,"line":1558},20,[708,1560,1561],{"class":1225},"  renderHTML",[708,1563,855],{"class":718},[708,1565,1566],{"class":718}," ({",[708,1568,1569],{"class":1112}," HTMLAttributes",[708,1571,1572],{"class":718}," })",[708,1574,1123],{"class":804},[708,1576,1534],{"class":722},[708,1578,819],{"class":718},[708,1580,1581],{"class":741},"div",[708,1583,819],{"class":718},[708,1585,726],{"class":718},[708,1587,723],{"class":1225},[708,1589,1590],{"class":722},"(HTMLAttributes",[708,1592,726],{"class":718},[708,1594,719],{"class":718},[708,1596,738],{"class":718},[708,1598,1599],{"class":863},"data-type",[708,1601,819],{"class":718},[708,1603,855],{"class":718},[708,1605,738],{"class":718},[708,1607,429],{"class":741},[708,1609,819],{"class":718},[708,1611,732],{"class":718},[708,1613,1120],{"class":722},[708,1615,726],{"class":718},[708,1617,1619],{"class":1618},"sbssI"," 0",[708,1621,1553],{"class":722},[708,1623,1248],{"class":718},[418,1625,1626,1627,1630],{},"The Markdown form, in both directions. ",[427,1628,1629],{},"@tiptap\u002Fmarkdown"," reads these four fields; the AI and the Markdown export both depend on them (chapter 7):",[698,1632,1634],{"className":700,"code":1633,"filename":702,"language":703,"meta":704,"style":704},"  \u002F\u002F Markdown: `!!! \u003Ctone>` followed by the body up to the next blank line. `:::` belongs to Typed blocks. The body blocks\n  \u002F\u002F are joined by a single newline (without a separator `renderChildren` would glue them: „text- item“), so a body\n  \u002F\u002F with several paragraphs reads back as one; a blank line would end the callout for the tokenizer below.\n  renderMarkdown: (node, h) => `!!! ${node.attrs?.tone ?? 'info'}\\n${h.renderChildren(node.content ?? [], '\\n')}`,\n  markdownTokenName: 'callout',\n  markdownTokenizer: {\n    name: 'callout',\n    level: 'block',\n    start: src => src.indexOf('!!! '),\n    tokenize(src, _tokens, lexer) {\n      const match = \u002F^!!! (info|warning|success)\\n([\\s\\S]+?)(?:\\n{2,}|$)\u002F.exec(src)\n      if (!match) return\n      return { type: 'callout', raw: match[0], tone: match[1], tokens: lexer.blockTokens(match[2]!) }\n    },\n  },\n  parseMarkdown: (token, h) => h.createNode('callout', { tone: typeof token.tone === 'string' ? token.tone : 'info' }, h.parseChildren(token.tokens ?? [])),\n",[427,1635,1636,1641,1646,1651,1743,1758,1767,1782,1797,1828,1852,1919,1937,2018,2022,2026],{"__ignoreMap":704},[708,1637,1638],{"class":710,"line":711},[708,1639,1640],{"class":777},"  \u002F\u002F Markdown: `!!! \u003Ctone>` followed by the body up to the next blank line. `:::` belongs to Typed blocks. The body blocks\n",[708,1642,1643],{"class":710,"line":747},[708,1644,1645],{"class":777},"  \u002F\u002F are joined by a single newline (without a separator `renderChildren` would glue them: „text- item“), so a body\n",[708,1647,1648],{"class":710,"line":767},[708,1649,1650],{"class":777},"  \u002F\u002F with several paragraphs reads back as one; a blank line would end the callout for the tokenizer below.\n",[708,1652,1653,1656,1658,1660,1663,1665,1668,1670,1672,1675,1678,1681,1683,1685,1688,1691,1693,1695,1697,1699,1702,1705,1707,1710,1712,1715,1718,1720,1723,1725,1728,1730,1732,1734,1736,1738,1741],{"class":710,"line":774},[708,1654,1655],{"class":808},"  renderMarkdown",[708,1657,855],{"class":718},[708,1659,425],{"class":718},[708,1661,1662],{"class":1112},"node",[708,1664,726],{"class":718},[708,1666,1667],{"class":1112}," h",[708,1669,1120],{"class":718},[708,1671,1123],{"class":804},[708,1673,1674],{"class":718}," `",[708,1676,1677],{"class":741},"!!! ",[708,1679,1680],{"class":718},"${",[708,1682,1662],{"class":722},[708,1684,1222],{"class":718},[708,1686,1687],{"class":722},"attrs",[708,1689,1690],{"class":718},"?.",[708,1692,1496],{"class":722},[708,1694,1455],{"class":718},[708,1696,738],{"class":718},[708,1698,437],{"class":741},[708,1700,1701],{"class":718},"'}",[708,1703,1704],{"class":722},"\\n",[708,1706,1680],{"class":718},[708,1708,1709],{"class":722},"h",[708,1711,1222],{"class":718},[708,1713,1714],{"class":1225},"renderChildren",[708,1716,1717],{"class":722},"(node",[708,1719,1222],{"class":718},[708,1721,1722],{"class":722},"content ",[708,1724,1455],{"class":718},[708,1726,1727],{"class":722}," []",[708,1729,726],{"class":718},[708,1731,738],{"class":718},[708,1733,1704],{"class":722},[708,1735,819],{"class":718},[708,1737,1120],{"class":722},[708,1739,1740],{"class":718},"}`",[708,1742,1248],{"class":718},[708,1744,1745,1748,1750,1752,1754,1756],{"class":710,"line":781},[708,1746,1747],{"class":808},"  markdownTokenName",[708,1749,855],{"class":718},[708,1751,738],{"class":718},[708,1753,429],{"class":741},[708,1755,819],{"class":718},[708,1757,1248],{"class":718},[708,1759,1760,1763,1765],{"class":710,"line":787},[708,1761,1762],{"class":808},"  markdownTokenizer",[708,1764,855],{"class":718},[708,1766,1067],{"class":718},[708,1768,1769,1772,1774,1776,1778,1780],{"class":710,"line":793},[708,1770,1771],{"class":808},"    name",[708,1773,855],{"class":718},[708,1775,738],{"class":718},[708,1777,429],{"class":741},[708,1779,819],{"class":718},[708,1781,1248],{"class":718},[708,1783,1784,1787,1789,1791,1793,1795],{"class":710,"line":798},[708,1785,1786],{"class":808},"    level",[708,1788,855],{"class":718},[708,1790,738],{"class":718},[708,1792,1260],{"class":741},[708,1794,819],{"class":718},[708,1796,1248],{"class":718},[708,1798,1799,1802,1804,1807,1809,1811,1813,1816,1818,1820,1822,1824,1826],{"class":710,"line":839},[708,1800,1801],{"class":808},"    start",[708,1803,855],{"class":718},[708,1805,1806],{"class":1112}," src",[708,1808,1123],{"class":804},[708,1810,1806],{"class":722},[708,1812,1222],{"class":718},[708,1814,1815],{"class":1225},"indexOf",[708,1817,1229],{"class":863},[708,1819,819],{"class":718},[708,1821,1677],{"class":741},[708,1823,819],{"class":718},[708,1825,1120],{"class":863},[708,1827,1248],{"class":718},[708,1829,1830,1833,1835,1838,1840,1843,1845,1848,1850],{"class":710,"line":844},[708,1831,1832],{"class":1225},"    tokenize",[708,1834,1229],{"class":863},[708,1836,1837],{"class":722},"src",[708,1839,726],{"class":718},[708,1841,1842],{"class":722}," _tokens",[708,1844,726],{"class":718},[708,1846,1847],{"class":722}," lexer",[708,1849,1452],{"class":863},[708,1851,1232],{"class":718},[708,1853,1854,1857,1860,1862,1865,1868,1870,1872,1874,1877,1879,1881,1883,1885,1887,1890,1893,1896,1898,1901,1904,1907,1909,1912,1914,1916],{"class":710,"line":901},[708,1855,1856],{"class":804},"      const",[708,1858,1859],{"class":722}," match",[708,1861,812],{"class":718},[708,1863,1864],{"class":718}," \u002F",[708,1866,1867],{"class":714},"^",[708,1869,1677],{"class":741},[708,1871,1229],{"class":718},[708,1873,437],{"class":741},[708,1875,1876],{"class":718},"|",[708,1878,441],{"class":741},[708,1880,1876],{"class":718},[708,1882,444],{"class":741},[708,1884,1120],{"class":718},[708,1886,1704],{"class":741},[708,1888,1889],{"class":718},"([",[708,1891,1892],{"class":741},"\\s\\S",[708,1894,1895],{"class":718},"]+?)(?:",[708,1897,1704],{"class":741},[708,1899,1900],{"class":718},"{2,}|",[708,1902,1903],{"class":714},"$",[708,1905,1906],{"class":718},")\u002F",[708,1908,1222],{"class":718},[708,1910,1911],{"class":1225},"exec",[708,1913,1229],{"class":863},[708,1915,1837],{"class":722},[708,1917,1918],{"class":863},")\n",[708,1920,1921,1924,1926,1929,1932,1934],{"class":710,"line":946},[708,1922,1923],{"class":714},"      if",[708,1925,425],{"class":863},[708,1927,1928],{"class":718},"!",[708,1930,1931],{"class":722},"match",[708,1933,1452],{"class":863},[708,1935,1936],{"class":714},"return\n",[708,1938,1939,1942,1944,1946,1948,1950,1952,1954,1956,1959,1961,1963,1966,1969,1971,1973,1976,1978,1980,1982,1985,1987,1989,1992,1994,1996,1998,2001,2003,2005,2007,2010,2012,2014,2016],{"class":710,"line":989},[708,1940,1941],{"class":714},"      return",[708,1943,719],{"class":718},[708,1945,805],{"class":863},[708,1947,855],{"class":718},[708,1949,738],{"class":718},[708,1951,429],{"class":741},[708,1953,819],{"class":718},[708,1955,726],{"class":718},[708,1957,1958],{"class":863}," raw",[708,1960,855],{"class":718},[708,1962,1859],{"class":722},[708,1964,1965],{"class":863},"[",[708,1967,1968],{"class":1618},"0",[708,1970,1553],{"class":863},[708,1972,726],{"class":718},[708,1974,1975],{"class":863}," tone",[708,1977,855],{"class":718},[708,1979,1859],{"class":722},[708,1981,1965],{"class":863},[708,1983,1984],{"class":1618},"1",[708,1986,1553],{"class":863},[708,1988,726],{"class":718},[708,1990,1991],{"class":863}," tokens",[708,1993,855],{"class":718},[708,1995,1847],{"class":722},[708,1997,1222],{"class":718},[708,1999,2000],{"class":1225},"blockTokens",[708,2002,1229],{"class":863},[708,2004,1931],{"class":722},[708,2006,1965],{"class":863},[708,2008,2009],{"class":1618},"2",[708,2011,1553],{"class":863},[708,2013,1928],{"class":718},[708,2015,1452],{"class":863},[708,2017,1186],{"class":718},[708,2019,2020],{"class":710,"line":1032},[708,2021,1509],{"class":718},[708,2023,2024],{"class":710,"line":1423},[708,2025,1381],{"class":718},[708,2027,2028,2031,2033,2035,2038,2040,2042,2044,2046,2048,2050,2053,2055,2057,2059,2061,2063,2065,2067,2069,2072,2075,2077,2079,2082,2084,2087,2089,2092,2094,2096,2098,2100,2102,2104,2106,2109,2111,2113,2116,2119,2121,2124,2126,2129],{"class":710,"line":1466},[708,2029,2030],{"class":808},"  parseMarkdown",[708,2032,855],{"class":718},[708,2034,425],{"class":718},[708,2036,2037],{"class":1112},"token",[708,2039,726],{"class":718},[708,2041,1667],{"class":1112},[708,2043,1120],{"class":718},[708,2045,1123],{"class":804},[708,2047,1667],{"class":722},[708,2049,1222],{"class":718},[708,2051,2052],{"class":1225},"createNode",[708,2054,1229],{"class":722},[708,2056,819],{"class":718},[708,2058,429],{"class":741},[708,2060,819],{"class":718},[708,2062,726],{"class":718},[708,2064,719],{"class":718},[708,2066,1975],{"class":863},[708,2068,855],{"class":718},[708,2070,2071],{"class":718}," typeof",[708,2073,2074],{"class":722}," token",[708,2076,1222],{"class":718},[708,2078,1496],{"class":722},[708,2080,2081],{"class":718},"===",[708,2083,738],{"class":718},[708,2085,2086],{"class":741},"string",[708,2088,819],{"class":718},[708,2090,2091],{"class":718}," ?",[708,2093,2074],{"class":722},[708,2095,1222],{"class":718},[708,2097,1496],{"class":722},[708,2099,855],{"class":718},[708,2101,738],{"class":718},[708,2103,437],{"class":741},[708,2105,819],{"class":718},[708,2107,2108],{"class":718}," },",[708,2110,1667],{"class":722},[708,2112,1222],{"class":718},[708,2114,2115],{"class":1225},"parseChildren",[708,2117,2118],{"class":722},"(token",[708,2120,1222],{"class":718},[708,2122,2123],{"class":722},"tokens ",[708,2125,1455],{"class":718},[708,2127,2128],{"class":722}," []))",[708,2130,1248],{"class":718},[418,2132,2133],{},"The commands and the keyboard shortcut close the node:",[698,2135,2137],{"className":700,"code":2136,"filename":702,"language":703,"meta":704,"style":704},"  addCommands() {\n    return {\n      setCallout: tone => ({ commands }) => commands.wrapIn(this.name, { tone: tone ?? 'info' }),\n      toggleCallout: () => ({ editor, commands }) =>\n        editor.isActive(this.name) ? commands.lift(this.name) : commands.wrapIn(this.name, { tone: 'info' }),\n      setCalloutTone: tone => ({ commands }) => commands.updateAttributes(this.name, { tone }),\n    }\n  },\n  addKeyboardShortcuts() {\n    \u002F\u002F Mod-Alt-c is the code block; Mod-Shift-s \u002F -m \u002F -k belong to the transcript, mention and tag features.\n    return { 'Mod-Shift-h': () => this.editor.commands.toggleCallout() }\n  },\n})\n",[427,2138,2139,2149,2156,2215,2239,2309,2352,2356,2360,2369,2374,2412,2416],{"__ignoreMap":704},[708,2140,2141,2144,2147],{"class":710,"line":711},[708,2142,2143],{"class":1225},"  addCommands",[708,2145,2146],{"class":722},"() ",[708,2148,1232],{"class":718},[708,2150,2151,2154],{"class":710,"line":747},[708,2152,2153],{"class":714},"    return",[708,2155,1067],{"class":718},[708,2157,2158,2160,2162,2164,2166,2168,2171,2173,2175,2177,2179,2182,2184,2187,2190,2192,2194,2196,2198,2200,2203,2205,2207,2209,2211,2213],{"class":710,"line":767},[708,2159,1105],{"class":1225},[708,2161,855],{"class":718},[708,2163,1975],{"class":1112},[708,2165,1123],{"class":804},[708,2167,1566],{"class":718},[708,2169,2170],{"class":1112}," commands",[708,2172,1572],{"class":718},[708,2174,1123],{"class":804},[708,2176,2170],{"class":722},[708,2178,1222],{"class":718},[708,2180,2181],{"class":1225},"wrapIn",[708,2183,1229],{"class":863},[708,2185,2186],{"class":718},"this.",[708,2188,2189],{"class":722},"name",[708,2191,726],{"class":718},[708,2193,719],{"class":718},[708,2195,1975],{"class":863},[708,2197,855],{"class":718},[708,2199,1975],{"class":722},[708,2201,2202],{"class":718}," ??",[708,2204,738],{"class":718},[708,2206,437],{"class":741},[708,2208,819],{"class":718},[708,2210,732],{"class":718},[708,2212,1120],{"class":863},[708,2214,1248],{"class":718},[708,2216,2217,2219,2221,2223,2225,2227,2230,2232,2234,2236],{"class":710,"line":774},[708,2218,1136],{"class":1225},[708,2220,855],{"class":718},[708,2222,1141],{"class":718},[708,2224,1123],{"class":804},[708,2226,1566],{"class":718},[708,2228,2229],{"class":1112}," editor",[708,2231,726],{"class":718},[708,2233,2170],{"class":1112},[708,2235,1572],{"class":718},[708,2237,2238],{"class":804}," =>\n",[708,2240,2241,2244,2246,2249,2251,2253,2255,2257,2260,2262,2264,2267,2269,2271,2273,2275,2277,2279,2281,2283,2285,2287,2289,2291,2293,2295,2297,2299,2301,2303,2305,2307],{"class":710,"line":781},[708,2242,2243],{"class":722},"        editor",[708,2245,1222],{"class":718},[708,2247,2248],{"class":1225},"isActive",[708,2250,1229],{"class":863},[708,2252,2186],{"class":718},[708,2254,2189],{"class":722},[708,2256,1452],{"class":863},[708,2258,2259],{"class":718},"?",[708,2261,2170],{"class":722},[708,2263,1222],{"class":718},[708,2265,2266],{"class":1225},"lift",[708,2268,1229],{"class":863},[708,2270,2186],{"class":718},[708,2272,2189],{"class":722},[708,2274,1452],{"class":863},[708,2276,855],{"class":718},[708,2278,2170],{"class":722},[708,2280,1222],{"class":718},[708,2282,2181],{"class":1225},[708,2284,1229],{"class":863},[708,2286,2186],{"class":718},[708,2288,2189],{"class":722},[708,2290,726],{"class":718},[708,2292,719],{"class":718},[708,2294,1975],{"class":863},[708,2296,855],{"class":718},[708,2298,738],{"class":718},[708,2300,437],{"class":741},[708,2302,819],{"class":718},[708,2304,732],{"class":718},[708,2306,1120],{"class":863},[708,2308,1248],{"class":718},[708,2310,2311,2313,2315,2317,2319,2321,2323,2325,2327,2329,2331,2334,2336,2338,2340,2342,2344,2346,2348,2350],{"class":710,"line":787},[708,2312,1155],{"class":1225},[708,2314,855],{"class":718},[708,2316,1975],{"class":1112},[708,2318,1123],{"class":804},[708,2320,1566],{"class":718},[708,2322,2170],{"class":1112},[708,2324,1572],{"class":718},[708,2326,1123],{"class":804},[708,2328,2170],{"class":722},[708,2330,1222],{"class":718},[708,2332,2333],{"class":1225},"updateAttributes",[708,2335,1229],{"class":863},[708,2337,2186],{"class":718},[708,2339,2189],{"class":722},[708,2341,726],{"class":718},[708,2343,719],{"class":718},[708,2345,1975],{"class":722},[708,2347,732],{"class":718},[708,2349,1120],{"class":863},[708,2351,1248],{"class":718},[708,2353,2354],{"class":710,"line":793},[708,2355,1176],{"class":718},[708,2357,2358],{"class":710,"line":798},[708,2359,1381],{"class":718},[708,2361,2362,2365,2367],{"class":710,"line":839},[708,2363,2364],{"class":1225},"  addKeyboardShortcuts",[708,2366,2146],{"class":722},[708,2368,1232],{"class":718},[708,2370,2371],{"class":710,"line":844},[708,2372,2373],{"class":777},"    \u002F\u002F Mod-Alt-c is the code block; Mod-Shift-s \u002F -m \u002F -k belong to the transcript, mention and tag features.\n",[708,2375,2376,2378,2380,2382,2385,2387,2389,2391,2393,2396,2399,2401,2403,2405,2408,2410],{"class":710,"line":901},[708,2377,2153],{"class":714},[708,2379,719],{"class":718},[708,2381,738],{"class":718},[708,2383,2384],{"class":863},"Mod-Shift-h",[708,2386,819],{"class":718},[708,2388,855],{"class":718},[708,2390,1141],{"class":718},[708,2392,1123],{"class":804},[708,2394,2395],{"class":718}," this.",[708,2397,2398],{"class":722},"editor",[708,2400,1222],{"class":718},[708,2402,575],{"class":722},[708,2404,1222],{"class":718},[708,2406,2407],{"class":1225},"toggleCallout",[708,2409,2146],{"class":863},[708,2411,1186],{"class":718},[708,2413,2414],{"class":710,"line":946},[708,2415,1381],{"class":718},[708,2417,2418],{"class":710,"line":989},[708,2419,2420],{"class":722},"})\n",[677,2422,2424],{"id":2423},"fields-the-library-reads","Fields the library reads",[418,2426,2427,2428,492,2430,492,2433,492,2436,492,2439,492,2442,530,2445,2448,2449,2452],{},"Besides the plain TipTap fields (",[427,2429,2189],{},[427,2431,2432],{},"group",[427,2434,2435],{},"content",[427,2437,2438],{},"defining",[427,2440,2441],{},"addAttributes",[427,2443,2444],{},"parseHTML",[427,2446,2447],{},"renderHTML",", commands, shortcuts) the package reads these ",[427,2450,2451],{},"NodeConfig"," fields:",[450,2454,2455,2468],{},[453,2456,2457],{},[456,2458,2459,2462,2465],{},[459,2460,2461],{},"Field",[459,2463,2464],{},"Read by",[459,2466,2467],{},"Meaning",[469,2469,2470,2545,2572,2603],{},[456,2471,2472,2476,2499],{},[474,2473,2474],{},[427,2475,647],{},[474,2477,2478,425,2481,2488,2489,425,2492,1120],{},[427,2479,2480],{},"NodeFlags",[480,2482,2485],{"href":2483,"rel":2484},"https:\u002F\u002Fgithub.com\u002Fskaile-ai\u002Fforge-editor\u002Fblob\u002Fmain\u002Fpackages\u002Feditor\u002Fsrc\u002Fcore\u002Fschema\u002Fnode-flags.ts",[484],[427,2486,2487],{},"node-flags.ts",") and ",[427,2490,2491],{},"BlockId",[480,2493,2496],{"href":2494,"rel":2495},"https:\u002F\u002Fgithub.com\u002Fskaile-ai\u002Fforge-editor\u002Fblob\u002Fmain\u002Fpackages\u002Feditor\u002Fsrc\u002Fcore\u002Fschema\u002Fblock-ids.ts",[484],[427,2497,2498],{},"block-ids.ts",[474,2500,2501,2502,2504,2505,2508,2509,2512,2513,2516,2517,2520,2521,425,2527,2530,2531,2534,2535,2537,2538,2541,2542,2544],{},"The node is an addressable block: it gets the ",[427,2503,585],{}," attribute (rendered ",[427,2506,2507],{},"data-id",") the built-in blocks have. Block IDs are what block flash and reveal look up (",[427,2510,2511],{},"findBlockById","), what paste de-duplication and the server's ID backfill (",[427,2514,2515],{},"assignBlockIds",") iterate, and what the AI chat addresses: a text block with an ID is a ",[427,2518,2519],{},"[\u003Cid>] …"," line of the chat's document view and can be updated, deleted, extended or converted by that ID. ",[422,2522,2523,2524],{},"Built-in block nodes default to ",[427,2525,2526],{},"true",[427,2528,2529],{},"BLOCK_ID_TYPES","); every other node defaults to ",[427,2532,2533],{},"false"," and then has no ",[427,2536,585],{}," attribute. ",[427,2539,2540],{},"isEditorBlock(node)"," (from ",[427,2543,692],{},") reads the flag.",[456,2546,2547,2555,2560],{},[474,2548,2549,492,2552],{},[427,2550,2551],{},"editorBlockContainer",[427,2553,2554],{},"editorChrome",[474,2556,2557,2559],{},[427,2558,2480],{},", block conversion and drag targeting",[474,2561,2562,2563,2567,2568,2571],{},"A ",[2564,2565,2566],"em",{},"Container block"," (the document, a Typed block) holds blocks that are individually convertible and draggable; ",[2564,2569,2570],{},"chrome"," is fixed header rows of such a block. The callout declares neither: it is one block, its inner paragraphs are not offered separately.",[456,2573,2574,2578,2597],{},[474,2575,2576],{},[427,2577,1201],{},[474,2579,2580,2581,2584,2585,488,2588,492,2591,492,2594,1120],{},"the ",[427,2582,2583],{},"Abilities"," extension (",[427,2586,2587],{},"AbilityRule",[427,2589,2590],{},"grants",[427,2592,2593],{},"revokes",[427,2595,2596],{},"own",[474,2598,2599,2600,2602],{},"What editing abilities hold inside the node. The callout revokes headings, Typed blocks, media, recording and speaker lines for its content. Ability ids are plain strings; host rules passed through the ",[427,2601,1201],{}," prop replace a node's own rule (chapter 5 grants a custom ability).",[456,2604,2605,2619,2623],{},[474,2606,2607,492,2610,492,2613,492,2616],{},[427,2608,2609],{},"renderMarkdown",[427,2611,2612],{},"markdownTokenName",[427,2614,2615],{},"markdownTokenizer",[427,2617,2618],{},"parseMarkdown",[474,2620,2621],{},[427,2622,1629],{},[474,2624,2625],{},"The Markdown form of the block, in both directions.",[418,2627,2628,2634,2635,2638,2639,2642,2643,2646,2647,2650],{},[422,2629,2630,2631,1222],{},"Why ",[427,2632,2633],{},"!!!"," The Markdown form is the form the model reads and writes, and the one ",[427,2636,2637],{},"getMarkdown()"," exports. Pick syntax that no other stage claims: ",[427,2640,2641],{},":::"," fences belong to Typed blocks, and ",[427,2644,2645],{},"**Name:**"," lines are turned into speaker segments by the transcript feature's ",[427,2648,2649],{},"segment"," stage.",[2652,2653,2654,2657,2658,2660,2661,2664,2665,2668],"note",{},[422,2655,2656],{},"Limitation of this example."," ",[427,2659,2609],{}," joins the body blocks with ",[427,2662,2663],{},"'\\n'"," and the tokenizer ends a callout at the first blank line. A callout with several paragraphs therefore exports without blank lines and re-imports as ",[422,2666,2667],{},"one"," paragraph. Keep callouts to one paragraph when the Markdown round trip matters, or extend the tokenizer.",[677,2670,2672],{"id":2671},"node-view-and-styles","Node view and styles",[418,2674,2675,2676,2678],{},"The node view is attached in a second file, so ",[427,2677,491],{}," stays free of Vue:",[698,2680,2683],{"className":700,"code":2681,"filename":2682,"language":703,"meta":704,"style":704},"import type { NodeViewRenderer } from '@tiptap\u002Fcore'\nimport { VueNodeViewRenderer } from '@tiptap\u002Fvue-3'\nimport CalloutView from '.\u002FCalloutView.vue'\nimport { Callout } from '.\u002Fnode'\n\nexport { Callout, TONES, type Tone } from '.\u002Fnode'\n\n\u002F\u002F The schema node plus its Vue node view; node.ts stays Vue-free so a server can import it on its own.\nexport const CalloutBlock = Callout.extend({\n  \u002F\u002F Explicit return type: keeps the declaration independent of the Vue view's inferred types.\n  addNodeView(): NodeViewRenderer {\n    return VueNodeViewRenderer(CalloutView)\n  },\n})\n","examples\u002Fvue-simple\u002Fsrc\u002Fcallout\u002Findex.ts",[427,2684,2685,2706,2726,2743,2763,2767,2795,2799,2804,2826,2831,2843,2856,2860],{"__ignoreMap":704},[708,2686,2687,2689,2691,2693,2696,2698,2700,2702,2704],{"class":710,"line":711},[708,2688,715],{"class":714},[708,2690,805],{"class":714},[708,2692,719],{"class":718},[708,2694,2695],{"class":722}," NodeViewRenderer",[708,2697,732],{"class":718},[708,2699,735],{"class":714},[708,2701,738],{"class":718},[708,2703,688],{"class":741},[708,2705,744],{"class":718},[708,2707,2708,2710,2712,2715,2717,2719,2721,2724],{"class":710,"line":747},[708,2709,715],{"class":714},[708,2711,719],{"class":718},[708,2713,2714],{"class":722}," VueNodeViewRenderer",[708,2716,732],{"class":718},[708,2718,735],{"class":714},[708,2720,738],{"class":718},[708,2722,2723],{"class":741},"@tiptap\u002Fvue-3",[708,2725,744],{"class":718},[708,2727,2728,2730,2733,2736,2738,2741],{"class":710,"line":767},[708,2729,715],{"class":714},[708,2731,2732],{"class":722}," CalloutView ",[708,2734,2735],{"class":714},"from",[708,2737,738],{"class":718},[708,2739,2740],{"class":741},".\u002FCalloutView.vue",[708,2742,744],{"class":718},[708,2744,2745,2747,2749,2752,2754,2756,2758,2761],{"class":710,"line":774},[708,2746,715],{"class":714},[708,2748,719],{"class":718},[708,2750,2751],{"class":722}," Callout",[708,2753,732],{"class":718},[708,2755,735],{"class":714},[708,2757,738],{"class":718},[708,2759,2760],{"class":741},".\u002Fnode",[708,2762,744],{"class":718},[708,2764,2765],{"class":710,"line":781},[708,2766,771],{"emptyLinePlaceholder":770},[708,2768,2769,2771,2773,2775,2777,2779,2781,2783,2785,2787,2789,2791,2793],{"class":710,"line":787},[708,2770,801],{"class":714},[708,2772,719],{"class":718},[708,2774,2751],{"class":722},[708,2776,726],{"class":718},[708,2778,852],{"class":722},[708,2780,726],{"class":718},[708,2782,805],{"class":714},[708,2784,809],{"class":722},[708,2786,732],{"class":718},[708,2788,735],{"class":714},[708,2790,738],{"class":718},[708,2792,2760],{"class":741},[708,2794,744],{"class":718},[708,2796,2797],{"class":710,"line":793},[708,2798,771],{"emptyLinePlaceholder":770},[708,2800,2801],{"class":710,"line":798},[708,2802,2803],{"class":777},"\u002F\u002F The schema node plus its Vue node view; node.ts stays Vue-free so a server can import it on its own.\n",[708,2805,2806,2808,2810,2813,2815,2817,2819,2822,2824],{"class":710,"line":839},[708,2807,801],{"class":714},[708,2809,849],{"class":804},[708,2811,2812],{"class":722}," CalloutBlock ",[708,2814,895],{"class":718},[708,2816,2751],{"class":722},[708,2818,1222],{"class":718},[708,2820,2821],{"class":1225},"extend",[708,2823,1229],{"class":722},[708,2825,1232],{"class":718},[708,2827,2828],{"class":710,"line":844},[708,2829,2830],{"class":777},"  \u002F\u002F Explicit return type: keeps the declaration independent of the Vue view's inferred types.\n",[708,2832,2833,2836,2839,2841],{"class":710,"line":901},[708,2834,2835],{"class":863},"  addNodeView",[708,2837,2838],{"class":718},"():",[708,2840,2695],{"class":808},[708,2842,1067],{"class":718},[708,2844,2845,2847,2849,2851,2854],{"class":710,"line":946},[708,2846,2153],{"class":714},[708,2848,2714],{"class":1225},[708,2850,1229],{"class":863},[708,2852,2853],{"class":722},"CalloutView",[708,2855,1918],{"class":863},[708,2857,2858],{"class":710,"line":989},[708,2859,1381],{"class":718},[708,2861,2862,2864],{"class":710,"line":1032},[708,2863,1499],{"class":718},[708,2865,1918],{"class":722},[418,2867,2868,2869,2872,2873,2876,2877,2879],{},"On a React surface the same second file attaches ",[427,2870,2871],{},"ReactNodeViewRenderer(CalloutView)"," from ",[427,2874,2875],{},"@tiptap\u002Freact"," instead; ",[427,2878,491],{}," stays unchanged and framework-free.",[418,2881,2882,2883,2886],{},"The view renders a non-editable header (tone icon and a ",[427,2884,2885],{},"USelect",") above the editable body:",[698,2888,2893],{"className":2889,"code":2890,"filename":2891,"language":2892,"meta":704,"style":704},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { NodeViewContent, nodeViewProps, NodeViewWrapper } from '@tiptap\u002Fvue-3'\nimport { computed } from 'vue'\nimport { type Tone, TONES } from '.\u002Fnode'\n\nconst props = defineProps(nodeViewProps)\n\nconst tone = computed(() => TONES.find(t => t.value === props.node.attrs.tone) ?? TONES[0])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CNodeViewWrapper as=\"div\" class=\"callout\" :data-tone=\"node.attrs.tone\">\n    \u003Cdiv class=\"callout-header\" contenteditable=\"false\">\n      \u003CUIcon :name=\"tone?.icon ?? 'i-lucide-info'\" class=\"size-4 shrink-0\" \u002F>\n      \u003CUSelect\n        :items=\"[...TONES]\"\n        value-key=\"value\"\n        label-key=\"label\"\n        :model-value=\"node.attrs.tone\"\n        size=\"xs\"\n        variant=\"ghost\"\n        :disabled=\"!editor.isEditable\"\n        @update:model-value=\"(value: Tone) => updateAttributes({ tone: value })\"\n      \u002F>\n    \u003C\u002Fdiv>\n    \u003CNodeViewContent as=\"div\" class=\"callout-body\" \u002F>\n  \u003C\u002FNodeViewWrapper>\n\u003C\u002Ftemplate>\n","examples\u002Fvue-simple\u002Fsrc\u002Fcallout\u002FCalloutView.vue","vue",[427,2894,2895,2920,2949,2968,2992,2996,3012,3016,3084,3093,3097,3106,3159,3190,3237,3244,3267,3281,3295,3318,3332,3347,3370,3417,3423,3433,3464,3474],{"__ignoreMap":704},[708,2896,2897,2899,2902,2905,2908,2910,2913,2915,2917],{"class":710,"line":711},[708,2898,1078],{"class":718},[708,2900,2901],{"class":863},"script",[708,2903,2904],{"class":804}," setup",[708,2906,2907],{"class":804}," lang",[708,2909,895],{"class":718},[708,2911,2912],{"class":718},"\"",[708,2914,703],{"class":741},[708,2916,2912],{"class":718},[708,2918,2919],{"class":718},">\n",[708,2921,2922,2924,2926,2929,2931,2934,2936,2939,2941,2943,2945,2947],{"class":710,"line":747},[708,2923,715],{"class":714},[708,2925,719],{"class":718},[708,2927,2928],{"class":722}," NodeViewContent",[708,2930,726],{"class":718},[708,2932,2933],{"class":722}," nodeViewProps",[708,2935,726],{"class":718},[708,2937,2938],{"class":722}," NodeViewWrapper",[708,2940,732],{"class":718},[708,2942,735],{"class":714},[708,2944,738],{"class":718},[708,2946,2723],{"class":741},[708,2948,744],{"class":718},[708,2950,2951,2953,2955,2958,2960,2962,2964,2966],{"class":710,"line":767},[708,2952,715],{"class":714},[708,2954,719],{"class":718},[708,2956,2957],{"class":722}," computed",[708,2959,732],{"class":718},[708,2961,735],{"class":714},[708,2963,738],{"class":718},[708,2965,2892],{"class":741},[708,2967,744],{"class":718},[708,2969,2970,2972,2974,2976,2978,2980,2982,2984,2986,2988,2990],{"class":710,"line":774},[708,2971,715],{"class":714},[708,2973,719],{"class":718},[708,2975,805],{"class":714},[708,2977,809],{"class":722},[708,2979,726],{"class":718},[708,2981,852],{"class":722},[708,2983,732],{"class":718},[708,2985,735],{"class":714},[708,2987,738],{"class":718},[708,2989,2760],{"class":741},[708,2991,744],{"class":718},[708,2993,2994],{"class":710,"line":781},[708,2995,771],{"emptyLinePlaceholder":770},[708,2997,2998,3001,3004,3006,3009],{"class":710,"line":787},[708,2999,3000],{"class":804},"const",[708,3002,3003],{"class":722}," props ",[708,3005,895],{"class":718},[708,3007,3008],{"class":1225}," defineProps",[708,3010,3011],{"class":722},"(nodeViewProps)\n",[708,3013,3014],{"class":710,"line":793},[708,3015,771],{"emptyLinePlaceholder":770},[708,3017,3018,3020,3023,3025,3027,3029,3032,3034,3036,3038,3041,3043,3046,3048,3051,3053,3056,3058,3061,3063,3065,3067,3069,3071,3074,3076,3079,3081],{"class":710,"line":798},[708,3019,3000],{"class":804},[708,3021,3022],{"class":722}," tone ",[708,3024,895],{"class":718},[708,3026,2957],{"class":1225},[708,3028,1229],{"class":722},[708,3030,3031],{"class":718},"()",[708,3033,1123],{"class":804},[708,3035,852],{"class":722},[708,3037,1222],{"class":718},[708,3039,3040],{"class":1225},"find",[708,3042,1229],{"class":722},[708,3044,3045],{"class":1112},"t",[708,3047,1123],{"class":804},[708,3049,3050],{"class":722}," t",[708,3052,1222],{"class":718},[708,3054,3055],{"class":722},"value ",[708,3057,2081],{"class":718},[708,3059,3060],{"class":722}," props",[708,3062,1222],{"class":718},[708,3064,1662],{"class":722},[708,3066,1222],{"class":718},[708,3068,1687],{"class":722},[708,3070,1222],{"class":718},[708,3072,3073],{"class":722},"tone) ",[708,3075,1455],{"class":718},[708,3077,3078],{"class":722}," TONES[",[708,3080,1968],{"class":1618},[708,3082,3083],{"class":722},"])\n",[708,3085,3086,3089,3091],{"class":710,"line":839},[708,3087,3088],{"class":718},"\u003C\u002F",[708,3090,2901],{"class":863},[708,3092,2919],{"class":718},[708,3094,3095],{"class":710,"line":844},[708,3096,771],{"emptyLinePlaceholder":770},[708,3098,3099,3101,3104],{"class":710,"line":901},[708,3100,1078],{"class":718},[708,3102,3103],{"class":863},"template",[708,3105,2919],{"class":718},[708,3107,3108,3111,3114,3117,3119,3121,3123,3125,3128,3130,3132,3134,3136,3139,3141,3143,3145,3147,3149,3151,3153,3155,3157],{"class":710,"line":946},[708,3109,3110],{"class":718},"  \u003C",[708,3112,3113],{"class":863},"NodeViewWrapper",[708,3115,3116],{"class":804}," as",[708,3118,895],{"class":718},[708,3120,2912],{"class":718},[708,3122,1581],{"class":741},[708,3124,2912],{"class":718},[708,3126,3127],{"class":804}," class",[708,3129,895],{"class":718},[708,3131,2912],{"class":718},[708,3133,429],{"class":741},[708,3135,2912],{"class":718},[708,3137,3138],{"class":718}," :",[708,3140,1447],{"class":804},[708,3142,895],{"class":718},[708,3144,2912],{"class":718},[708,3146,1662],{"class":722},[708,3148,1222],{"class":718},[708,3150,1687],{"class":722},[708,3152,1222],{"class":718},[708,3154,433],{"class":722},[708,3156,2912],{"class":718},[708,3158,2919],{"class":718},[708,3160,3161,3164,3166,3168,3170,3172,3175,3177,3180,3182,3184,3186,3188],{"class":710,"line":989},[708,3162,3163],{"class":718},"    \u003C",[708,3165,1581],{"class":863},[708,3167,3127],{"class":804},[708,3169,895],{"class":718},[708,3171,2912],{"class":718},[708,3173,3174],{"class":741},"callout-header",[708,3176,2912],{"class":718},[708,3178,3179],{"class":804}," contenteditable",[708,3181,895],{"class":718},[708,3183,2912],{"class":718},[708,3185,2533],{"class":741},[708,3187,2912],{"class":718},[708,3189,2919],{"class":718},[708,3191,3192,3195,3198,3200,3202,3204,3206,3208,3210,3213,3216,3218,3220,3223,3225,3227,3229,3232,3234],{"class":710,"line":1032},[708,3193,3194],{"class":718},"      \u003C",[708,3196,3197],{"class":863},"UIcon",[708,3199,3138],{"class":718},[708,3201,2189],{"class":804},[708,3203,895],{"class":718},[708,3205,2912],{"class":718},[708,3207,433],{"class":722},[708,3209,1690],{"class":718},[708,3211,3212],{"class":722},"icon",[708,3214,3215],{"class":718}," ?? ",[708,3217,819],{"class":718},[708,3219,938],{"class":741},[708,3221,3222],{"class":718},"'\"",[708,3224,3127],{"class":804},[708,3226,895],{"class":718},[708,3228,2912],{"class":718},[708,3230,3231],{"class":741},"size-4 shrink-0",[708,3233,2912],{"class":718},[708,3235,3236],{"class":718}," \u002F>\n",[708,3238,3239,3241],{"class":710,"line":1423},[708,3240,3194],{"class":718},[708,3242,3243],{"class":863},"USelect\n",[708,3245,3246,3249,3252,3254,3256,3259,3262,3264],{"class":710,"line":1466},[708,3247,3248],{"class":718},"        :",[708,3250,3251],{"class":804},"items",[708,3253,895],{"class":718},[708,3255,2912],{"class":718},[708,3257,3258],{"class":718},"[...",[708,3260,3261],{"class":722},"TONES",[708,3263,1553],{"class":718},[708,3265,3266],{"class":718},"\"\n",[708,3268,3269,3272,3274,3276,3279],{"class":710,"line":1506},[708,3270,3271],{"class":804},"        value-key",[708,3273,895],{"class":718},[708,3275,2912],{"class":718},[708,3277,3278],{"class":741},"value",[708,3280,3266],{"class":718},[708,3282,3283,3286,3288,3290,3293],{"class":710,"line":1512},[708,3284,3285],{"class":804},"        label-key",[708,3287,895],{"class":718},[708,3289,2912],{"class":718},[708,3291,3292],{"class":741},"label",[708,3294,3266],{"class":718},[708,3296,3297,3299,3302,3304,3306,3308,3310,3312,3314,3316],{"class":710,"line":1522},[708,3298,3248],{"class":718},[708,3300,3301],{"class":804},"model-value",[708,3303,895],{"class":718},[708,3305,2912],{"class":718},[708,3307,1662],{"class":722},[708,3309,1222],{"class":718},[708,3311,1687],{"class":722},[708,3313,1222],{"class":718},[708,3315,433],{"class":722},[708,3317,3266],{"class":718},[708,3319,3320,3323,3325,3327,3330],{"class":710,"line":1558},[708,3321,3322],{"class":804},"        size",[708,3324,895],{"class":718},[708,3326,2912],{"class":718},[708,3328,3329],{"class":741},"xs",[708,3331,3266],{"class":718},[708,3333,3335,3338,3340,3342,3345],{"class":710,"line":3334},21,[708,3336,3337],{"class":804},"        variant",[708,3339,895],{"class":718},[708,3341,2912],{"class":718},[708,3343,3344],{"class":741},"ghost",[708,3346,3266],{"class":718},[708,3348,3350,3352,3355,3357,3359,3361,3363,3365,3368],{"class":710,"line":3349},22,[708,3351,3248],{"class":718},[708,3353,3354],{"class":804},"disabled",[708,3356,895],{"class":718},[708,3358,2912],{"class":718},[708,3360,1928],{"class":718},[708,3362,2398],{"class":722},[708,3364,1222],{"class":718},[708,3366,3367],{"class":722},"isEditable",[708,3369,3266],{"class":718},[708,3371,3373,3376,3379,3381,3383,3385,3387,3389,3391,3393,3396,3398,3401,3404,3407,3409,3411,3413,3415],{"class":710,"line":3372},23,[708,3374,3375],{"class":718},"        @",[708,3377,3378],{"class":804},"update",[708,3380,855],{"class":718},[708,3382,3301],{"class":804},[708,3384,895],{"class":718},[708,3386,2912],{"class":718},[708,3388,1229],{"class":718},[708,3390,3278],{"class":1112},[708,3392,488],{"class":718},[708,3394,3395],{"class":808},"Tone",[708,3397,1452],{"class":718},[708,3399,3400],{"class":804},"=>",[708,3402,3403],{"class":1225}," updateAttributes",[708,3405,3406],{"class":718},"({ ",[708,3408,433],{"class":863},[708,3410,488],{"class":718},[708,3412,3278],{"class":722},[708,3414,1572],{"class":718},[708,3416,3266],{"class":718},[708,3418,3420],{"class":710,"line":3419},24,[708,3421,3422],{"class":718},"      \u002F>\n",[708,3424,3426,3429,3431],{"class":710,"line":3425},25,[708,3427,3428],{"class":718},"    \u003C\u002F",[708,3430,1581],{"class":863},[708,3432,2919],{"class":718},[708,3434,3436,3438,3441,3443,3445,3447,3449,3451,3453,3455,3457,3460,3462],{"class":710,"line":3435},26,[708,3437,3163],{"class":718},[708,3439,3440],{"class":863},"NodeViewContent",[708,3442,3116],{"class":804},[708,3444,895],{"class":718},[708,3446,2912],{"class":718},[708,3448,1581],{"class":741},[708,3450,2912],{"class":718},[708,3452,3127],{"class":804},[708,3454,895],{"class":718},[708,3456,2912],{"class":718},[708,3458,3459],{"class":741},"callout-body",[708,3461,2912],{"class":718},[708,3463,3236],{"class":718},[708,3465,3467,3470,3472],{"class":710,"line":3466},27,[708,3468,3469],{"class":718},"  \u003C\u002F",[708,3471,3113],{"class":863},[708,3473,2919],{"class":718},[708,3475,3477,3479,3481],{"class":710,"line":3476},28,[708,3478,3088],{"class":718},[708,3480,3103],{"class":863},[708,3482,2919],{"class":718},[418,3484,3485,3486,3489,3490,3493,3494,3497,3498,3501],{},"The styles are plain CSS with Nuxt UI's colour variables, one rule set per tone. Import them ",[422,3487,3488],{},"after"," the core stylesheet (",[427,3491,3492],{},"@import \".\u002Fcallout\u002Fcallout.css\";"," right below ",[427,3495,3496],{},"core.css",", as in the example's ",[427,3499,3500],{},"style.css","):",[698,3503,3508],{"className":3504,"code":3505,"filename":3506,"language":3507,"meta":704,"style":704},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F* The „Hinweis“ block: a tinted box per tone; the tone colours come from Nuxt UI's colour variables. *\u002F\n.callout {\n  --callout-color: var(--ui-info);\n  border-left: 3px solid var(--callout-color);\n  border-radius: 0.375rem;\n  padding: 0.5rem 0.75rem;\n  margin: 0.5rem 0;\n  background: color-mix(in oklab, var(--callout-color) 8%, transparent);\n}\n\n.callout[data-tone='info'] {\n  --callout-color: var(--ui-info);\n}\n\n.callout[data-tone='warning'] {\n  --callout-color: var(--ui-warning);\n}\n\n.callout[data-tone='success'] {\n  --callout-color: var(--ui-success);\n}\n\n.callout-header {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n  color: var(--callout-color);\n}\n\n.callout-body > :first-child {\n  margin-top: 0;\n}\n\n.callout-body > :last-child {\n  margin-bottom: 0;\n}\n","examples\u002Fvue-simple\u002Fsrc\u002Fcallout\u002Fcallout.css","css",[427,3509,3510,3515,3523,3541,3565,3578,3593,3606,3644,3648,3652,3674,3688,3692,3696,3718,3733,3737,3741,3763,3778,3782,3786,3794,3806,3818,3830,3845,3849,3854,3871,3883,3888,3893,3909,3921],{"__ignoreMap":704},[708,3511,3512],{"class":710,"line":711},[708,3513,3514],{"class":777},"\u002F* The „Hinweis“ block: a tinted box per tone; the tone colours come from Nuxt UI's colour variables. *\u002F\n",[708,3516,3517,3519,3521],{"class":710,"line":747},[708,3518,1222],{"class":718},[708,3520,429],{"class":808},[708,3522,1067],{"class":718},[708,3524,3525,3528,3530,3533,3535,3538],{"class":710,"line":767},[708,3526,3527],{"class":722},"  --callout-color",[708,3529,855],{"class":718},[708,3531,3532],{"class":1225}," var",[708,3534,1229],{"class":718},[708,3536,3537],{"class":722},"--ui-info",[708,3539,3540],{"class":718},");\n",[708,3542,3543,3547,3549,3552,3555,3558,3560,3563],{"class":710,"line":774},[708,3544,3546],{"class":3545},"sqsOY","  border-left",[708,3548,855],{"class":718},[708,3550,3551],{"class":1618}," 3px",[708,3553,3554],{"class":722}," solid ",[708,3556,3557],{"class":1225},"var",[708,3559,1229],{"class":718},[708,3561,3562],{"class":722},"--callout-color",[708,3564,3540],{"class":718},[708,3566,3567,3570,3572,3575],{"class":710,"line":781},[708,3568,3569],{"class":3545},"  border-radius",[708,3571,855],{"class":718},[708,3573,3574],{"class":1618}," 0.375rem",[708,3576,3577],{"class":718},";\n",[708,3579,3580,3583,3585,3588,3591],{"class":710,"line":787},[708,3581,3582],{"class":3545},"  padding",[708,3584,855],{"class":718},[708,3586,3587],{"class":1618}," 0.5rem",[708,3589,3590],{"class":1618}," 0.75rem",[708,3592,3577],{"class":718},[708,3594,3595,3598,3600,3602,3604],{"class":710,"line":793},[708,3596,3597],{"class":3545},"  margin",[708,3599,855],{"class":718},[708,3601,3587],{"class":1618},[708,3603,1619],{"class":1618},[708,3605,3577],{"class":718},[708,3607,3608,3611,3613,3616,3618,3621,3624,3626,3628,3630,3632,3634,3637,3639,3642],{"class":710,"line":798},[708,3609,3610],{"class":3545},"  background",[708,3612,855],{"class":718},[708,3614,3615],{"class":1225}," color-mix",[708,3617,1229],{"class":718},[708,3619,3620],{"class":1112},"in",[708,3622,3623],{"class":1112}," oklab",[708,3625,726],{"class":718},[708,3627,3532],{"class":1225},[708,3629,1229],{"class":718},[708,3631,3562],{"class":722},[708,3633,1120],{"class":718},[708,3635,3636],{"class":1618}," 8%",[708,3638,726],{"class":718},[708,3640,3641],{"class":722}," transparent",[708,3643,3540],{"class":718},[708,3645,3646],{"class":710,"line":839},[708,3647,1186],{"class":718},[708,3649,3650],{"class":710,"line":844},[708,3651,771],{"emptyLinePlaceholder":770},[708,3653,3654,3656,3658,3660,3662,3664,3666,3668,3670,3672],{"class":710,"line":901},[708,3655,1222],{"class":718},[708,3657,429],{"class":808},[708,3659,1965],{"class":718},[708,3661,1447],{"class":804},[708,3663,895],{"class":718},[708,3665,819],{"class":718},[708,3667,437],{"class":741},[708,3669,819],{"class":718},[708,3671,1553],{"class":718},[708,3673,1067],{"class":718},[708,3675,3676,3678,3680,3682,3684,3686],{"class":710,"line":946},[708,3677,3527],{"class":722},[708,3679,855],{"class":718},[708,3681,3532],{"class":1225},[708,3683,1229],{"class":718},[708,3685,3537],{"class":722},[708,3687,3540],{"class":718},[708,3689,3690],{"class":710,"line":989},[708,3691,1186],{"class":718},[708,3693,3694],{"class":710,"line":1032},[708,3695,771],{"emptyLinePlaceholder":770},[708,3697,3698,3700,3702,3704,3706,3708,3710,3712,3714,3716],{"class":710,"line":1423},[708,3699,1222],{"class":718},[708,3701,429],{"class":808},[708,3703,1965],{"class":718},[708,3705,1447],{"class":804},[708,3707,895],{"class":718},[708,3709,819],{"class":718},[708,3711,441],{"class":741},[708,3713,819],{"class":718},[708,3715,1553],{"class":718},[708,3717,1067],{"class":718},[708,3719,3720,3722,3724,3726,3728,3731],{"class":710,"line":1466},[708,3721,3527],{"class":722},[708,3723,855],{"class":718},[708,3725,3532],{"class":1225},[708,3727,1229],{"class":718},[708,3729,3730],{"class":722},"--ui-warning",[708,3732,3540],{"class":718},[708,3734,3735],{"class":710,"line":1506},[708,3736,1186],{"class":718},[708,3738,3739],{"class":710,"line":1512},[708,3740,771],{"emptyLinePlaceholder":770},[708,3742,3743,3745,3747,3749,3751,3753,3755,3757,3759,3761],{"class":710,"line":1522},[708,3744,1222],{"class":718},[708,3746,429],{"class":808},[708,3748,1965],{"class":718},[708,3750,1447],{"class":804},[708,3752,895],{"class":718},[708,3754,819],{"class":718},[708,3756,444],{"class":741},[708,3758,819],{"class":718},[708,3760,1553],{"class":718},[708,3762,1067],{"class":718},[708,3764,3765,3767,3769,3771,3773,3776],{"class":710,"line":1558},[708,3766,3527],{"class":722},[708,3768,855],{"class":718},[708,3770,3532],{"class":1225},[708,3772,1229],{"class":718},[708,3774,3775],{"class":722},"--ui-success",[708,3777,3540],{"class":718},[708,3779,3780],{"class":710,"line":3334},[708,3781,1186],{"class":718},[708,3783,3784],{"class":710,"line":3349},[708,3785,771],{"emptyLinePlaceholder":770},[708,3787,3788,3790,3792],{"class":710,"line":3372},[708,3789,1222],{"class":718},[708,3791,3174],{"class":808},[708,3793,1067],{"class":718},[708,3795,3796,3799,3801,3804],{"class":710,"line":3419},[708,3797,3798],{"class":3545},"  display",[708,3800,855],{"class":718},[708,3802,3803],{"class":722}," flex",[708,3805,3577],{"class":718},[708,3807,3808,3811,3813,3816],{"class":710,"line":3425},[708,3809,3810],{"class":3545},"  align-items",[708,3812,855],{"class":718},[708,3814,3815],{"class":722}," center",[708,3817,3577],{"class":718},[708,3819,3820,3823,3825,3828],{"class":710,"line":3435},[708,3821,3822],{"class":3545},"  gap",[708,3824,855],{"class":718},[708,3826,3827],{"class":1618}," 0.25rem",[708,3829,3577],{"class":718},[708,3831,3832,3835,3837,3839,3841,3843],{"class":710,"line":3466},[708,3833,3834],{"class":3545},"  color",[708,3836,855],{"class":718},[708,3838,3532],{"class":1225},[708,3840,1229],{"class":718},[708,3842,3562],{"class":722},[708,3844,3540],{"class":718},[708,3846,3847],{"class":710,"line":3476},[708,3848,1186],{"class":718},[708,3850,3852],{"class":710,"line":3851},29,[708,3853,771],{"emptyLinePlaceholder":770},[708,3855,3857,3859,3861,3864,3866,3869],{"class":710,"line":3856},30,[708,3858,1222],{"class":718},[708,3860,3459],{"class":808},[708,3862,3863],{"class":718}," >",[708,3865,3138],{"class":718},[708,3867,3868],{"class":804},"first-child",[708,3870,1067],{"class":718},[708,3872,3874,3877,3879,3881],{"class":710,"line":3873},31,[708,3875,3876],{"class":3545},"  margin-top",[708,3878,855],{"class":718},[708,3880,1619],{"class":1618},[708,3882,3577],{"class":718},[708,3884,3886],{"class":710,"line":3885},32,[708,3887,1186],{"class":718},[708,3889,3891],{"class":710,"line":3890},33,[708,3892,771],{"emptyLinePlaceholder":770},[708,3894,3896,3898,3900,3902,3904,3907],{"class":710,"line":3895},34,[708,3897,1222],{"class":718},[708,3899,3459],{"class":808},[708,3901,3863],{"class":718},[708,3903,3138],{"class":718},[708,3905,3906],{"class":804},"last-child",[708,3908,1067],{"class":718},[708,3910,3912,3915,3917,3919],{"class":710,"line":3911},35,[708,3913,3914],{"class":3545},"  margin-bottom",[708,3916,855],{"class":718},[708,3918,1619],{"class":1618},[708,3920,3577],{"class":718},[708,3922,3924],{"class":710,"line":3923},36,[708,3925,1186],{"class":718},[545,3927,3929,3930,530,3932],{"id":3928},"path-a-extensions-and-commands","Path A: ",[427,3931,588],{},[427,3933,575],{},[418,3935,3936,3937,3939,3940,530,3942,3944,3945,3947,3948,3950,3951,3954,3955,3957],{},"The simple playground adds the node to a ",[427,3938,616],{}," with two props. The same props exist on ",[427,3941,619],{},[427,3943,623],{},". ",[427,3946,588],{}," adds TipTap extensions after the built-in ones; ",[427,3949,575],{}," transforms the whole command list, and a command with a ",[427,3952,3953],{},"slash"," placement joins the ",[427,3956,643],{}," menu. Both are read once at setup, so pass a constant and a module-level function:",[698,3959,3961],{"className":2889,"code":3960,"filename":511,"language":2892,"meta":704,"style":704},"\u002F\u002F Added to the simple schema through the `extensions` prop (constant: read once at setup).\nconst extensions = [CalloutBlock]\n\n\u002F\u002F Host commands next to the simple editor's own (the `\u002Fh1` … `\u002Frule` block entries and the toolbar): `\u002Fdatum`, `\u002Fhinweis`.\nfunction hostCommands(defaults: CommandDef[]): CommandDef[] {\n  return [\n    ...defaults,\n    {\n      id: 'datum',\n      label: 'Datum',\n      icon: 'i-lucide-calendar',\n      slash: {},\n      run: editor => editor.chain().focus().insertContent(new Date().toLocaleDateString('de-DE')).run(),\n    },\n    {\n      id: 'hinweis',\n      label: 'Hinweis',\n      icon: 'i-lucide-info',\n      slash: {},\n      run: editor => editor.chain().focus().setCallout('info').run(),\n    },\n  ]\n}\n",[427,3962,3963,3968,3973,3977,3982,3987,3992,3997,4002,4007,4012,4017,4022,4027,4031,4035,4040,4045,4050,4054,4059,4063,4068],{"__ignoreMap":704},[708,3964,3965],{"class":710,"line":711},[708,3966,3967],{"class":722},"\u002F\u002F Added to the simple schema through the `extensions` prop (constant: read once at setup).\n",[708,3969,3970],{"class":710,"line":747},[708,3971,3972],{"class":722},"const extensions = [CalloutBlock]\n",[708,3974,3975],{"class":710,"line":767},[708,3976,771],{"emptyLinePlaceholder":770},[708,3978,3979],{"class":710,"line":774},[708,3980,3981],{"class":722},"\u002F\u002F Host commands next to the simple editor's own (the `\u002Fh1` … `\u002Frule` block entries and the toolbar): `\u002Fdatum`, `\u002Fhinweis`.\n",[708,3983,3984],{"class":710,"line":781},[708,3985,3986],{"class":722},"function hostCommands(defaults: CommandDef[]): CommandDef[] {\n",[708,3988,3989],{"class":710,"line":787},[708,3990,3991],{"class":722},"  return [\n",[708,3993,3994],{"class":710,"line":793},[708,3995,3996],{"class":722},"    ...defaults,\n",[708,3998,3999],{"class":710,"line":798},[708,4000,4001],{"class":722},"    {\n",[708,4003,4004],{"class":710,"line":839},[708,4005,4006],{"class":722},"      id: 'datum',\n",[708,4008,4009],{"class":710,"line":844},[708,4010,4011],{"class":722},"      label: 'Datum',\n",[708,4013,4014],{"class":710,"line":901},[708,4015,4016],{"class":722},"      icon: 'i-lucide-calendar',\n",[708,4018,4019],{"class":710,"line":946},[708,4020,4021],{"class":722},"      slash: {},\n",[708,4023,4024],{"class":710,"line":989},[708,4025,4026],{"class":722},"      run: editor => editor.chain().focus().insertContent(new Date().toLocaleDateString('de-DE')).run(),\n",[708,4028,4029],{"class":710,"line":1032},[708,4030,1509],{"class":722},[708,4032,4033],{"class":710,"line":1423},[708,4034,4001],{"class":722},[708,4036,4037],{"class":710,"line":1466},[708,4038,4039],{"class":722},"      id: 'hinweis',\n",[708,4041,4042],{"class":710,"line":1506},[708,4043,4044],{"class":722},"      label: 'Hinweis',\n",[708,4046,4047],{"class":710,"line":1512},[708,4048,4049],{"class":722},"      icon: 'i-lucide-info',\n",[708,4051,4052],{"class":710,"line":1522},[708,4053,4021],{"class":722},[708,4055,4056],{"class":710,"line":1558},[708,4057,4058],{"class":722},"      run: editor => editor.chain().focus().setCallout('info').run(),\n",[708,4060,4061],{"class":710,"line":3334},[708,4062,1509],{"class":722},[708,4064,4065],{"class":710,"line":3349},[708,4066,4067],{"class":722},"  ]\n",[708,4069,4070],{"class":710,"line":3372},[708,4071,1186],{"class":722},[418,4073,4074,4077,4078,4080,4081,4083,4084,4087,4088,4091],{},[427,4075,4076],{},"slash.id"," (default: the command ",[427,4079,585],{},") is what the user types after ",[427,4082,643],{},"; the query matches it or the label as a prefix, case-insensitively. ",[427,4085,4086],{},"run"," is called after the ",[427,4089,4090],{},"\u002Fquery"," text is deleted. The two props reach the editor in the template:",[698,4093,4095],{"className":2889,"code":4094,"filename":511,"language":2892,"meta":704,"style":704},"            \u003CSimpleEditor\n              :model-value=\"content\"\n              :editable=\"editable\"\n              :extensions=\"extensions\"\n              :commands=\"hostCommands\"\n              @ready=\"onReady\"\n              @update:model-value=\"onUpdate\"\n              @content-error=\"onContentError\"\n            \u002F>\n",[427,4096,4097,4105,4120,4135,4149,4164,4181,4200,4216],{"__ignoreMap":704},[708,4098,4099,4102],{"class":710,"line":711},[708,4100,4101],{"class":718},"            \u003C",[708,4103,4104],{"class":863},"SimpleEditor\n",[708,4106,4107,4110,4112,4114,4116,4118],{"class":710,"line":747},[708,4108,4109],{"class":718},"              :",[708,4111,3301],{"class":804},[708,4113,895],{"class":718},[708,4115,2912],{"class":718},[708,4117,2435],{"class":722},[708,4119,3266],{"class":718},[708,4121,4122,4124,4127,4129,4131,4133],{"class":710,"line":767},[708,4123,4109],{"class":718},[708,4125,4126],{"class":804},"editable",[708,4128,895],{"class":718},[708,4130,2912],{"class":718},[708,4132,4126],{"class":722},[708,4134,3266],{"class":718},[708,4136,4137,4139,4141,4143,4145,4147],{"class":710,"line":774},[708,4138,4109],{"class":718},[708,4140,588],{"class":804},[708,4142,895],{"class":718},[708,4144,2912],{"class":718},[708,4146,588],{"class":722},[708,4148,3266],{"class":718},[708,4150,4151,4153,4155,4157,4159,4162],{"class":710,"line":781},[708,4152,4109],{"class":718},[708,4154,575],{"class":804},[708,4156,895],{"class":718},[708,4158,2912],{"class":718},[708,4160,4161],{"class":722},"hostCommands",[708,4163,3266],{"class":718},[708,4165,4166,4169,4172,4174,4176,4179],{"class":710,"line":787},[708,4167,4168],{"class":718},"              @",[708,4170,4171],{"class":804},"ready",[708,4173,895],{"class":718},[708,4175,2912],{"class":718},[708,4177,4178],{"class":722},"onReady",[708,4180,3266],{"class":718},[708,4182,4183,4185,4187,4189,4191,4193,4195,4198],{"class":710,"line":793},[708,4184,4168],{"class":718},[708,4186,3378],{"class":804},[708,4188,855],{"class":718},[708,4190,3301],{"class":804},[708,4192,895],{"class":718},[708,4194,2912],{"class":718},[708,4196,4197],{"class":722},"onUpdate",[708,4199,3266],{"class":718},[708,4201,4202,4204,4207,4209,4211,4214],{"class":710,"line":798},[708,4203,4168],{"class":718},[708,4205,4206],{"class":804},"content-error",[708,4208,895],{"class":718},[708,4210,2912],{"class":718},[708,4212,4213],{"class":722},"onContentError",[708,4215,3266],{"class":718},[708,4217,4218],{"class":710,"line":839},[708,4219,4220],{"class":722},"            \u002F>\n",[418,4222,4223,4224,4227,4228,4230],{},"Try it. The demo loads the „Hinweise“ sample; type ",[427,4225,4226],{},"\u002Fhinweis"," and press Enter, or press ",[427,4229,2384],{},", and change the tone with the select in the callout's header:",[4232,4233],"demo-callout-path-a",{},[418,4235,4236],{},"What the user gets:",[4238,4239,4240,4253,4267,4285],"ul",{},[4241,4242,4243,4244,4246,4247,4249,4250,4252],"li",{},"Typing ",[427,4245,4226],{}," Enter wraps the paragraph at the caret in an ",[427,4248,437],{}," callout; ",[427,4251,2384],{}," toggles it (wrap, or lift out of the callout).",[4241,4254,4255,4256,4258,4259,4262,4263,4266],{},"The tone ",[427,4257,2885],{}," in the callout's header changes ",[427,4260,4261],{},"attrs.tone","; the Markdown form then reads ",[427,4264,4265],{},"!!! success"," for that block.",[4241,4268,4269,4270,4273,4274,4276,4277,4280,4281,4284],{},"Nodes with ",[427,4271,4272],{},"editorBlock: true"," get an ",[427,4275,585],{},". The JSON pane of the example shows ",[427,4278,4279],{},"editor.getJSON()"," (not the ",[427,4282,4283],{},"v-model"," value) so you can see the IDs the editor adds.",[4241,4286,608,4287,4289,4290,4293,4294,4296],{},[427,4288,643],{}," entry has no ",[427,4291,4292],{},"ability",", so it is listed wherever the ",[427,4295,643],{}," menu opens. A toolbar button needs path B: the toolbar renders what features contribute, and a prop cannot add to it.",[418,4298,4299,4300,4303,4304,4311,4312,4315,4316,4319,4320,4323],{},"The simple editor rejects documents with unknown nodes, so the „Hinweise“ sample (",[427,4301,4302],{},"callouts"," in ",[480,4305,4308],{"href":4306,"rel":4307},"https:\u002F\u002Fgithub.com\u002Fskaile-ai\u002Fforge-editor\u002Fblob\u002Fmain\u002Fexamples\u002Fvue-simple\u002Fsrc\u002Fsamples.ts",[484],[427,4309,4310],{},"samples.ts",") loads only because ",[427,4313,4314],{},"CalloutBlock"," is in the schema. Content with a ",[427,4317,4318],{},"typedBlock"," still ends up in ",[427,4321,4322],{},"contentError"," (chapter 2).",[545,4325,4327],{"id":4326},"what-you-have-now","What you have now",[418,4329,2562,4330,4332,4333,4335,4336,530,4338,4340,4341,4343],{},[427,4331,429],{}," node with schema, commands, a shortcut, a Markdown form and a Vue node view, plugged into ",[427,4334,616],{}," through the ",[427,4337,588],{},[427,4339,575],{}," props. The block shows up in ",[427,4342,643],{}," and the Markdown export, but not in the toolbar, in hover actions or in the conversion menu.",[545,4345,4347],{"id":4346},"next","Next",[418,4349,4350,4352],{},[480,4351,65],{"href":66}," gives the block a toolbar button, a hover menu and „Umwandeln in …“.",[4354,4355,4356],"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 .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 .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}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}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}",{"title":704,"searchDepth":747,"depth":747,"links":4358},[4359,4360,4365,4367,4368],{"id":547,"depth":747,"text":548},{"id":674,"depth":747,"text":675,"children":4361},[4362,4363,4364],{"id":679,"depth":767,"text":680},{"id":2423,"depth":767,"text":2424},{"id":2671,"depth":767,"text":2672},{"id":3928,"depth":747,"text":4366},"Path A: extensions and commands",{"id":4326,"depth":747,"text":4327},{"id":4346,"depth":747,"text":4347},"Write the „Hinweis“ callout as a TipTap node and plug it into SimpleEditor through the extensions and commands props.","md",null,{},{"icon":63},{"title":60,"description":4369},"PBLSQGJQW1o8RMvBpZBRV8ghv9Y8sYQcbs9XJvBlbBg",[4377,4379],{"title":55,"path":56,"stem":57,"description":4378,"icon":58,"children":-1},"Replace SimpleEditor with EditorSurface over defineEditor and add mentions, media, tables and block UI as features.",{"title":65,"path":66,"stem":67,"description":4380,"icon":68,"children":-1},"Turn the callout into an EditorFeature with a toolbar button, a hover menu for the tone, „Umwandeln in …“ and its own ability.",1793178229224]