1import{u as g,S as m,P as f,U as k,E as b}from"./index-WTXpLQuH.js";import{T as v}from"./index-CuNykZcq.js";import{V as n}from"./VChip-BuMHR0L2.js";import{V as C}from"./VDivider-niEB_qmK.js";import{o as d,c,m as o,b as t,e as r,t as a,y,r as V,aM as x,f as A}from"./index-BJiotQ1y.js";import{_ as B}from"./AppCardCode-CcXt1CXD.js";import{_ as w}from"./TiptapEditor-GgU3QJTG.js";import{V as E}from"./VRow-BaWP5n9q.js";import{V as h}from"./VCol-Bwtue8I5.js";import"./VSlideGroup-Bo6MUhyT.js";import"./VAvatar-Bj_eSgFO.js";import"./VImg-CEdg-vTA.js";import"./vue3-perfect-scrollbar-C2zm10Dz.js";import"./VCard-ImMJge73.js";import"./VCardText-Ds77CzhY.js";/* empty css */const H={class:"border pa-2 rounded custom-editor"},$={key:0,class:"d-flex flex-wrap gap-x-4 gap-y-2 mb-2"},I={__name:"DemoEditorCustomEditor",setup(p){const e=g({content:` 2 <h2> 3 Hi there, 4 </h2> 5 <p> 6 this is a <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you'd probably expect from a text editor. But wait until you see the lists: 7 </p> 8 <ul> 9 <li> 10 That's a bullet list with one ⦠11 </li> 12 <li> 13 ⦠or two list items. 14 </li> 15 </ul> 16 <p> 17 Isn't that great? And all of that is editable. But wait, there's more. Let's try a code block: 18 </p> 19 <pre><code class="language-css">body { 20 display: none; 21}</code></pre> 22 <p> 23 I know, I know, this is impressive. It's only the tip of the iceberg though. Give it a try and click a little bit around. Don't forget to check the other examples too. 24 </p> 25 <blockquote> 26 Wow, that's amazing. Good work, boy! ð 27 <br /> 28 â Mom 29 </blockquote> 30 `,extensions:[m,v.configure({types:["heading","paragraph"]}),f.configure({placeholder:"Write something here..."}),k]});return(u,i)=>(d(),c("div",H,[o(e)?(d(),c("div",$,[t(n,{disabled:!o(e).can().chain().focus().toggleBold().run(),color:o(e).isActive("bold")?"primary":"",onClick:i[0]||(i[0]=l=>o(e).chain().focus().toggleBold().run())},{default:r(()=>i[21]||(i[21]=[a(" bold ")])),_:1},8,["disabled","color"]),t(n,{disabled:!o(e).can().chain().focus().toggleItalic().run(),color:o(e).isActive("italic")?"primary":"",onClick:i[1]||(i[1]=l=>o(e).chain().focus().toggleItalic().run())},{default:r(()=>i[22]||(i[22]=[a(" italic ")])),_:1},8,["disabled","color"]),t(n,{disabled:!o(e).can().chain().focus().toggleStrike().run(),color:o(e).isActive("strike")?"primary":"",onClick:i[2]||(i[2]=l=>o(e).chain().focus().toggleStrike().run())},{default:r(()=>i[23]||(i[23]=[a(" strike ")])),_:1},8,["disabled","color"]),t(n,{disabled:!o(e).can().chain().focus().toggleCode().run(),color:o(e).isActive("code")?"primary":"",onClick:i[3]||(i[3]=l=>o(e).chain().focus().toggleCode().run())},{default:r(()=>i[24]||(i[24]=[a(" code ")])),_:1},8,["disabled","color"]),t(n,{onClick:i[4]||(i[4]=l=>o(e).chain().focus().unsetAllMarks().run())},{default:r(()=>i[25]||(i[25]=[a(" clear marks ")])),_:1}),t(n,{onClick:i[5]||(i[5]=l=>o(e).chain().focus().clearNodes().run())},{default:r(()=>i[26]||(i[26]=[a(" clear nodes ")])),_:1}),t(n,{color:o(e).isActive("paragraph")?"primary":"",onClick:i[6]||(i[6]=l=>o(e).chain().focus().setParagraph().run())},{default:r(()=>i[27]||(i[27]=[a(" paragraph ")])),_:1},8,["color"]),t(n,{color:o(e).isActive("heading",{level:1})?"primary":"",onClick:i[7]||(i[7]=l=>o(e).chain().focus().toggleHeading({level:1}).run())},{default:r(()=>i[28]||(i[28]=[a(" h1 ")])),_:1},8,["color"]),t(n,{color:o(e).isActive("heading",{level:2})?"primary":"",onClick:i[8]||(i[8]=l=>o(e).chain().focus().toggleHeading({level:2}).run())},{default:r(()=>i[29]||(i[29]=[a(" h2 ")])),_:1},8,["color"]),t(n,{color:o(e).isActive("heading",{level:3})?"primary":"",onClick:i[9]||(i[9]=l=>o(e).chain().focus().toggleHeading({level:3}).run())},{default:r(()=>i[30]||(i[30]=[a(" h3 ")])),_:1},8,["color"]),t(n,{color:o(e).isActive("heading",{level:4})?"primary":"",onClick:i[10]||(i[10]=l=>o(e).chain().focus().toggleHeading({level:4}).run())},{default:r(()=>i[31]||(i[31]=[a(" h4 ")])),_:1},8,["color"]),t(n,{color:o(e).isActive("heading",{level:5})?"primary":"",onClick:i[11]||(i[11]=l=>o(e).chain().focus().toggleHeading({level:5}).run())},{default:r(()=>i[32]||(i[32]=[a(" h5 ")])),_:1},8,["color"]),t(n,{color:o(e).isActive("heading",{level:6})?"primary":"",onClick:i[12]||(i[12]=l=>o(e).chain().focus().toggleHeading({level:6}).run())},{default:r(()=>i[33]||(i[33]=[a(" h6 ")])),_:1},8,["color"]),t(n,{color:o(e).isActive("bulletList")?"primary":"",onClick:i[13]||(i[13]=l=>o(e).chain().focus().toggleBulletList().run())},{default:r(()=>i[34]||(i[34]=[a(" bullet list ")])),_:1},8,["color"]),t(n,{color:o(e).isActive("orderedList")?"primary":"",onClick:i[14]||(i[14]=l=>o(e).chain().focus().toggleOrderedList().run())},{default:r(()=>i[35]||(i[35]=[a(" ordered list ")])),_:1},8,["color"]),t(n,{color:o(e).isActive("codeBlock")?"primary":"",onClick:i[15]||(i[15]=l=>o(e).chain().focus().toggleCodeBlock().run())},{default:r(()=>i[36]||(i[36]=[a(" code block ")])),_:1},8,["color"]),t(n,{color:o(e).isActive("blockquote")?"primary":"",onClick:i[16]||(i[16]=l=>o(e).chain().focus().toggleBlockquote().run())},{default:r(()=>i[37]||(i[37]=[a(" blockquote ")])),_:1},8,["color"]),t(n,{onClick:i[17]||(i[17]=l=>o(e).chain().focus().setHorizontalRule().run())},{default:r(()=>i[38]||(i[38]=[a(" horizontal rule ")])),_:1}),t(n,{onClick:i[18]||(i[18]=l=>o(e).chain().focus().setHardBreak().run())},{default:r(()=>i[39]||(i[39]=[a(" hard break ")])),_:1}
30),t(n,{disabled:!o(e).can().chain().focus().undo().run(),onClick:i[19]||(i[19]=l=>o(e).chain().focus().undo().run())},{default:r(()=>i[40]||(i[40]=[a(" undo ")])),_:1},8,["disabled"]),t(n,{disabled:!o(e).can().chain().focus().redo().run(),onClick:i[20]||(i[20]=l=>o(e).chain().focus().redo().run())},{default:r(()=>i[41]||(i[41]=[a(" redo ")])),_:1},8,["disabled"])])):y("",!0),t(C,{class:"my-4"}),t(o(b),{editor:o(e)},null,8,["editor"])]))}},T={__name:"DemoEditorBasicEditor",setup(p){const e=V(` 31<p> 32 This is a radically reduced version of tiptap. It has support for a document, with paragraphs and text. That's it. It's probably too much for real minimalists though. 33</p> 34<p> 35 The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different. 36</p> 37`);return(u,i)=>{const l=w;return d(),c("div",null,[t(l,{modelValue:o(e),"onUpdate:modelValue":i[0]||(i[0]=s=>x(e)?e.value=s:null),class:"border rounded basic-editor"},null,8,["modelValue"])])}}},q={ts:`<script setup lang="ts"> 38const basicEditorContent = ref(\` 39<p> 40 This is a radically reduced version of tiptap. It has support for a document, with paragraphs and text. That's it. It's probably too much for real minimalists though. 41</p> 42<p> 43 The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different. 44</p> 45\`) 46<\/script> 47 48<template> 49 <div> 50 <TiptapEditor 51 v-model="basicEditorContent" 52 class="border rounded basic-editor" 53 /> 54 </div> 55</template> 56 57<style lang="scss"> 58.basic-editor { 59 .ProseMirror { 60 block-size: 200px; 61 outline: none; 62 overflow-y: auto; 63 padding-inline: 0.5rem; 64 } 65} 66</style> 67`,js:`<script setup> 68const basicEditorContent = ref(\` 69<p> 70 This is a radically reduced version of tiptap. It has support for a document, with paragraphs and text. That's it. It's probably too much for real minimalists though. 71</p> 72<p> 73 The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different. 74</p> 75\`) 76<\/script> 77 78<template> 79 <div> 80 <TiptapEditor 81 v-model="basicEditorContent" 82 class="border rounded basic-editor" 83 /> 84 </div> 85</template> 86 87<style lang="scss"> 88.basic-editor { 89 .ProseMirror { 90 block-size: 200px; 91 outline: none; 92 overflow-y: auto; 93 padding-inline: 0.5rem; 94 } 95} 96</style> 97`},S={ts:`<script setup lang="ts"> 98import { Placeholder } from '@tiptap/extension-placeholder' 99import { TextAlign } from '@tiptap/extension-text-align' 100import { Underline } from '@tiptap/extension-underline' 101import { StarterKit } from '@tiptap/starter-kit' 102import { EditorContent, useEditor } from '@tiptap/vue-3' 103 104const editor = useEditor({ 105 content: \` 106 <h2> 107 Hi there, 108 </h2> 109 <p> 110 this is a <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you'd probably expect from a text editor. But wait until you see the lists: 111 </p> 112 <ul> 113 <li> 114 That's a bullet list with one ⦠115 </li> 116 <li> 117 ⦠or two list items. 118 </li> 119 </ul> 120 <p> 121 Isn't that great? And all of that is editable. But wait, there's more. Let's try a code block: 122 </p> 123 <pre><code class="language-css">body { 124 display: none; 125}</code></pre> 126 <p> 127 I know, I know, this is impressive. It's only the tip of the iceberg though. Give it a try and click a little bit around. Don't forget to check the other examples too. 128 </p> 129 <blockquote> 130 Wow, that's amazing. Good work, boy! ð 131 <br /> 132 â Mom 133 </blockquote> 134 \`, 135 extensions: [ 136 StarterKit, 137 TextAlign.configure({ 138 types: ['heading', 'paragraph'], 139 }), 140 Placeholder.configure({ 141 placeholder: 'Write something here...', 142 }), 143 Underline, 144 ], 145}) 146<\/script> 147 148<template> 149 <div class="border pa-2 rounded custom-editor"> 150 <div 151 v-if="editor" 152 class="d-flex flex-wrap gap-x-4 gap-y-2 mb-2" 153 > 154 <VChip 155 :disabled="!editor.can().chain().focus().toggleBold().run()" 156 :color="editor.isActive('bold') ? 'primary' : ''" 157 @click="editor.chain().focus().toggleBold().run()" 158 > 159 bold 160 </VChip> 161 162 <VChip 163 :disabled="!editor.can().chain().focus().toggleItalic().run()" 164 :color="editor.isActive('italic') ? 'primary' : ''" 165 @click="editor.chain().focus().toggleItalic().run()" 166 > 167 italic 168 </VChip> 169 170 <VChip 171 :disabled="!editor.can().chain().focus().toggleStrike().run()" 172 :color="editor.isActive('strike') ? 'primary' : ''" 173 @click="editor.chain().focus().toggleStrike().run()" 174 >
175 strike 176 </VChip> 177 178 <VChip 179 :disabled="!editor.can().chain().focus().toggleCode().run()" 180 :color="editor.isActive('code') ? 'primary' : ''" 181 @click="editor.chain().focus().toggleCode().run()" 182 > 183 code 184 </VChip> 185 186 <VChip @click="editor.chain().focus().unsetAllMarks().run()"> 187 clear marks 188 </VChip> 189 190 <VChip @click="editor.chain().focus().clearNodes().run()"> 191 clear nodes 192 </VChip> 193 194 <VChip 195 :color="editor.isActive('paragraph') ? 'primary' : ''" 196 @click="editor.chain().focus().setParagraph().run()" 197 > 198 paragraph 199 </VChip> 200 201 <VChip 202 :color="editor.isActive('heading', { level: 1 }) ? 'primary' : ''" 203 @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" 204 > 205 h1 206 </VChip> 207 208 <VChip 209 :color="editor.isActive('heading', { level: 2 }) ? 'primary' : ''" 210 @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" 211 > 212 h2 213 </VChip> 214 215 <VChip 216 :color="editor.isActive('heading', { level: 3 }) ? 'primary' : ''" 217 @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" 218 > 219 h3 220 </VChip> 221 222 <VChip 223 :color="editor.isActive('heading', { level: 4 }) ? 'primary' : ''" 224 @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" 225 > 226 h4 227 </VChip> 228 229 <VChip 230 :color="editor.isActive('heading', { level: 5 }) ? 'primary' : ''" 231 @click="editor.chain().focus().toggleHeading({ level: 5 }).run()" 232 > 233 h5 234 </VChip> 235 236 <VChip 237 :color="editor.isActive('heading', { level: 6 }) ? 'primary' : ''" 238 @click="editor.chain().focus().toggleHeading({ level: 6 }).run()" 239 > 240 h6 241 </VChip> 242 243 <VChip 244 :color="editor.isActive('bulletList') ? 'primary' : ''" 245 @click="editor.chain().focus().toggleBulletList().run()" 246 > 247 bullet list 248 </VChip> 249 250 <VChip 251 :color="editor.isActive('orderedList') ? 'primary' : ''" 252 @click="editor.chain().focus().toggleOrderedList().run()" 253 > 254 ordered list 255 </VChip> 256 257 <VChip 258 :color="editor.isActive('codeBlock') ? 'primary' : ''" 259 @click="editor.chain().focus().toggleCodeBlock().run()" 260 > 261 code block 262 </VChip> 263 264 <VChip 265 :color="editor.isActive('blockquote') ? 'primary' : ''" 266 @click="editor.chain().focus().toggleBlockquote().run()" 267 > 268 blockquote 269 </VChip> 270 271 <VChip @click="editor.chain().focus().setHorizontalRule().run()"> 272 horizontal rule 273 </VChip> 274 275 <VChip @click="editor.chain().focus().setHardBreak().run()"> 276 hard break 277 </VChip> 278 279 <VChip 280 :disabled="!editor.can().chain().focus().undo().run()" 281 @click="editor.chain().focus().undo().run()" 282 > 283 undo 284 </VChip> 285 286 <VChip 287 :disabled="!editor.can().chain().focus().redo().run()" 288 @click="editor.chain().focus().redo().run()" 289 > 290 redo 291 </VChip> 292 </div> 293 <VDivider class="my-4" /> 294 <EditorContent :editor="editor" /> 295 </div> 296</template> 297 298<style lang="scss"> 299/* Basic editor styles */ 300 301.custom-editor { 302 .ProseMirror { 303 > * + * { 304 margin-block-start: 0.75em; 305 } 306 307 outline: none; 308 overflow-y: auto; 309 padding-inline: 0.5rem; 310 311 ul, 312 ol { 313 padding-block: 0; 314 padding-inline: 1rem; 315 } 316 317 h1, 318 h2, 319 h3, 320 h4, 321 h5, 322 h6 { 323 line-height: 1.1; 324 } 325 326 code { 327 background-color: rgba(#616161, 0.1); 328 color: #616161; 329 } 330 331 pre { 332 border-radius: 0.5rem; 333 background: #0d0d0d; 334 color: #fff; 335 font-family: JetBrainsMono, monospace; 336 padding-block: 0.75rem; 337 padding-inline: 1rem; 338 339 code { 340 padding: 0; 341 background: none; 342 color: inherit; 343 font-size: 0.8rem; 344 } 345 } 346 347 img { 348 block-size: auto; 349 max-inline-size: 100%; 350 } 351 352 blockquote { 353 border-inline-start: 2px solid rgba(#0d0d0d, 0.1); 354 padding-inline-start: 1rem; 355 } 356 357 hr { 358 border: none; 359 border-block-start: 2px solid rgba(#0d0d0d, 0.1); 360 margin-block: 2rem; 361 margin-inline: 0; 362 } 363 } 364} 365</style> 366`,js:`<script setup> 367import { Placeholder } from '@tiptap/extension-placeholder' 368import { TextAlign } from '@tiptap/extension-text-align' 369import { Underline } from '@tiptap/extension-underline' 370import { StarterKit } from '@tiptap/starter-kit' 371import { 372 EditorContent, 373 useEditor, 374} from '@tiptap/vue-3' 375 376const editor = useEditor({ 377 content: \` 378 <h2> 379 Hi there, 380 </h2> 381 <p> 382 this is a <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you'd probably expect from a text editor. But wait until you see the lists: 383 </p> 384 <ul> 385 <li> 386 That's a bullet list with one ⦠387 </li> 388 <li>
389 ⦠or two list items. 390 </li> 391 </ul> 392 <p> 393 Isn't that great? And all of that is editable. But wait, there's more. Let's try a code block: 394 </p> 395 <pre><code class="language-css">body { 396 display: none; 397}</code></pre> 398 <p> 399 I know, I know, this is impressive. It's only the tip of the iceberg though. Give it a try and click a little bit around. Don't forget to check the other examples too. 400 </p> 401 <blockquote> 402 Wow, that's amazing. Good work, boy! ð 403 <br /> 404 â Mom 405 </blockquote> 406 \`, 407 extensions: [ 408 StarterKit, 409 TextAlign.configure({ 410 types: [ 411 'heading', 412 'paragraph', 413 ], 414 }), 415 Placeholder.configure({ placeholder: 'Write something here...' }), 416 Underline, 417 ], 418}) 419<\/script> 420 421<template> 422 <div class="border pa-2 rounded custom-editor"> 423 <div 424 v-if="editor" 425 class="d-flex flex-wrap gap-x-4 gap-y-2 mb-2" 426 > 427 <VChip 428 :disabled="!editor.can().chain().focus().toggleBold().run()" 429 :color="editor.isActive('bold') ? 'primary' : ''" 430 @click="editor.chain().focus().toggleBold().run()" 431 > 432 bold 433 </VChip> 434 435 <VChip 436 :disabled="!editor.can().chain().focus().toggleItalic().run()" 437 :color="editor.isActive('italic') ? 'primary' : ''" 438 @click="editor.chain().focus().toggleItalic().run()" 439 > 440 italic 441 </VChip> 442 443 <VChip 444 :disabled="!editor.can().chain().focus().toggleStrike().run()" 445 :color="editor.isActive('strike') ? 'primary' : ''" 446 @click="editor.chain().focus().toggleStrike().run()" 447 > 448 strike 449 </VChip> 450 451 <VChip 452 :disabled="!editor.can().chain().focus().toggleCode().run()" 453 :color="editor.isActive('code') ? 'primary' : ''" 454 @click="editor.chain().focus().toggleCode().run()" 455 > 456 code 457 </VChip> 458 459 <VChip @click="editor.chain().focus().unsetAllMarks().run()"> 460 clear marks 461 </VChip> 462 463 <VChip @click="editor.chain().focus().clearNodes().run()"> 464 clear nodes 465 </VChip> 466 467 <VChip 468 :color="editor.isActive('paragraph') ? 'primary' : ''" 469 @click="editor.chain().focus().setParagraph().run()" 470 > 471 paragraph 472 </VChip> 473 474 <VChip 475 :color="editor.isActive('heading', { level: 1 }) ? 'primary' : ''" 476 @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" 477 > 478 h1 479 </VChip> 480 481 <VChip 482 :color="editor.isActive('heading', { level: 2 }) ? 'primary' : ''" 483 @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" 484 > 485 h2 486 </VChip> 487 488 <VChip 489 :color="editor.isActive('heading', { level: 3 }) ? 'primary' : ''" 490 @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" 491 > 492 h3 493 </VChip> 494 495 <VChip 496 :color="editor.isActive('heading', { level: 4 }) ? 'primary' : ''" 497 @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" 498 > 499 h4 500 </VChip> 501 502 <VChip 503 :color="editor.isActive('heading', { level: 5 }) ? 'primary' : ''" 504 @click="editor.chain().focus().toggleHeading({ level: 5 }).run()" 505 > 506 h5 507 </VChip> 508 509 <VChip 510 :color="editor.isActive('heading', { level: 6 }) ? 'primary' : ''" 511 @click="editor.chain().focus().toggleHeading({ level: 6 }).run()" 512 > 513 h6 514 </VChip> 515 516 <VChip 517 :color="editor.isActive('bulletList') ? 'primary' : ''" 518 @click="editor.chain().focus().toggleBulletList().run()" 519 > 520 bullet list 521 </VChip> 522 523 <VChip 524 :color="editor.isActive('orderedList') ? 'primary' : ''" 525 @click="editor.chain().focus().toggleOrderedList().run()" 526 > 527 ordered list 528 </VChip> 529 530 <VChip 531 :color="editor.isActive('codeBlock') ? 'primary' : ''" 532 @click="editor.chain().focus().toggleCodeBlock().run()" 533 > 534 code block 535 </VChip> 536 537 <VChip 538 :color="editor.isActive('blockquote') ? 'primary' : ''" 539 @click="editor.chain().focus().toggleBlockquote().run()" 540 > 541 blockquote 542 </VChip> 543 544 <VChip @click="editor.chain().focus().setHorizontalRule().run()"> 545 horizontal rule 546 </VChip> 547 548 <VChip @click="editor.chain().focus().setHardBreak().run()"> 549 hard break 550 </VChip> 551 552 <VChip
553 :disabled="!editor.can().chain().focus().undo().run()" 554 @click="editor.chain().focus().undo().run()" 555 > 556 undo 557 </VChip> 558 559 <VChip 560 :disabled="!editor.can().chain().focus().redo().run()" 561 @click="editor.chain().focus().redo().run()" 562 > 563 redo 564 </VChip> 565 </div> 566 <VDivider class="my-4" /> 567 <EditorContent :editor="editor" /> 568 </div> 569</template> 570 571<style lang="scss"> 572/* Basic editor styles */ 573 574.custom-editor { 575 .ProseMirror { 576 > * + * { 577 margin-block-start: 0.75em; 578 } 579 580 outline: none; 581 overflow-y: auto; 582 padding-inline: 0.5rem; 583 584 ul, 585 ol { 586 padding-block: 0; 587 padding-inline: 1rem; 588 } 589 590 h1, 591 h2, 592 h3, 593 h4, 594 h5, 595 h6 { 596 line-height: 1.1; 597 } 598 599 code { 600 background-color: rgba(#616161, 0.1); 601 color: #616161; 602 } 603 604 pre { 605 border-radius: 0.5rem; 606 background: #0d0d0d; 607 color: #fff; 608 font-family: JetBrainsMono, monospace; 609 padding-block: 0.75rem; 610 padding-inline: 1rem; 611 612 code { 613 padding: 0; 614 background: none; 615 color: inherit; 616 font-size: 0.8rem; 617 } 618 } 619 620 img { 621 block-size: auto; 622 max-inline-size: 100%; 623 } 624 625 blockquote { 626 border-inline-start: 2px solid rgba(#0d0d0d, 0.1); 627 padding-inline-start: 1rem; 628 } 629 630 hr { 631 border: none; 632 border-block-start: 2px solid rgba(#0d0d0d, 0.1); 633 margin-block: 2rem; 634 margin-inline: 0; 635 } 636 } 637} 638</style> 639`},X={__name:"editors",setup(p){return(e,u)=>{const i=T,l=B,s=I;return d(),A(E,null,{default:r(()=>[t(h,{cols:"12"},{default:r(()=>[t(l,{title:"Basic Editor",code:q},{default:r(()=>[t(i)]),_:1},8,["code"])]),_:1}),t(h,{cols:"12"},{default:r(()=>[t(l,{title:"Custom Editor",code:S},{default:r(()=>[t(s)]),_:1},8,["code"])]),_:1})]),_:1})}}};export{X as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.