dragon-editor 3.1.1 → 3.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -0
- package/dist/module.d.ts +1 -1
- package/dist/module.json +1 -1
- package/dist/runtime/components/DragonEditor.vue +480 -36
- package/dist/runtime/components/DragonEditorViewer.vue +265 -9
- package/dist/runtime/scss/editor.css +317 -11
- package/dist/runtime/scss/viewer.css +251 -3
- package/dist/runtime/store.d.ts +3 -0
- package/dist/runtime/store.mjs +18 -0
- package/dist/runtime/type.d.ts +26 -9
- package/dist/runtime/utils/block.d.ts +4 -2
- package/dist/runtime/utils/block.mjs +40 -7
- package/dist/runtime/utils/content.mjs +10 -6
- package/dist/runtime/utils/controlBar.d.ts +9 -0
- package/dist/runtime/utils/controlBar.mjs +168 -0
- package/dist/runtime/utils/convertor.mjs +26 -33
- package/dist/runtime/utils/keyboardEvent.d.ts +2 -2
- package/dist/runtime/utils/keyboardEvent.mjs +89 -30
- package/dist/runtime/utils/style.mjs +288 -281
- package/package.json +2 -1
- package/dist/runtime/utils/ui.d.ts +0 -0
- package/dist/runtime/utils/ui.mjs +0 -0
- /package/{License.txt → LICENSE} +0 -0
|
@@ -9,13 +9,15 @@
|
|
|
9
9
|
<h3 v-if="item.level === 3" class="de-block de-heading-block" :class="item.classList" :data-level="item.level" v-html="item.textContent"></h3>
|
|
10
10
|
</template>
|
|
11
11
|
|
|
12
|
-
<
|
|
13
|
-
<
|
|
14
|
-
|
|
12
|
+
<template v-if="item.type === 'list'">
|
|
13
|
+
<ul v-if="item.element === 'ul'" class="de-block de-list-block" :data-style="item.style">
|
|
14
|
+
<li v-for="li in item.child" class="de-item" :class="li.classList" v-html="li.textContent"></li>
|
|
15
|
+
</ul>
|
|
15
16
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
<ol v-if="item.element === 'ol'" class="de-block de-list-block" :data-style="item.style">
|
|
18
|
+
<li v-for="li in item.child" class="de-item" :class="li.classList" v-html="li.textContent"></li>
|
|
19
|
+
</ol>
|
|
20
|
+
</template>
|
|
19
21
|
|
|
20
22
|
<div v-if="item.type === 'image'" class="de-block de-image-block" :class="item.classList">
|
|
21
23
|
<div class="de-image-area" :data-maxwidth="item.maxWidth">
|
|
@@ -25,6 +27,12 @@
|
|
|
25
27
|
<p v-if="item.caption" class="de-caption">{{ item.caption }}</p>
|
|
26
28
|
</div>
|
|
27
29
|
|
|
30
|
+
<div v-if="item.type === 'code'" class="de-block de-code-block" :data-theme="item.theme">
|
|
31
|
+
<p class="de-filename">{{ item.filename }}</p>
|
|
32
|
+
<p class="de-language">{{ item.language }}</p>
|
|
33
|
+
<pre class="de-pre"><code class="de-code-content" v-html="item.textContent"></code></pre>
|
|
34
|
+
</div>
|
|
35
|
+
|
|
28
36
|
<div v-if="item.type === 'custom'" class="de-block de-custom-block" :class="item.classList" v-html="item.textContent"></div>
|
|
29
37
|
</template>
|
|
30
38
|
</div>
|
|
@@ -179,6 +187,9 @@ const props = defineProps<{
|
|
|
179
187
|
padding: 20px;
|
|
180
188
|
line-height: 1.6;
|
|
181
189
|
}
|
|
190
|
+
.dragon-editor-viewer .de-block {
|
|
191
|
+
width: 100%;
|
|
192
|
+
}
|
|
182
193
|
.dragon-editor-viewer .de-text-block {
|
|
183
194
|
min-height: 1.6em;
|
|
184
195
|
outline: 0;
|
|
@@ -201,16 +212,33 @@ const props = defineProps<{
|
|
|
201
212
|
flex-direction: column;
|
|
202
213
|
row-gap: 4px;
|
|
203
214
|
padding-left: 24px;
|
|
215
|
+
}
|
|
216
|
+
.dragon-editor-viewer .de-list-block[data-style=disc] {
|
|
204
217
|
list-style: disc;
|
|
205
218
|
}
|
|
219
|
+
.dragon-editor-viewer .de-list-block[data-style=square] {
|
|
220
|
+
list-style: square;
|
|
221
|
+
}
|
|
222
|
+
.dragon-editor-viewer .de-list-block[data-style=decimal] {
|
|
223
|
+
list-style: decimal;
|
|
224
|
+
}
|
|
225
|
+
.dragon-editor-viewer .de-list-block[data-style=lower-alpha] {
|
|
226
|
+
list-style: lower-alpha;
|
|
227
|
+
}
|
|
228
|
+
.dragon-editor-viewer .de-list-block[data-style=upper-alpha] {
|
|
229
|
+
list-style: upper-alpha;
|
|
230
|
+
}
|
|
231
|
+
.dragon-editor-viewer .de-list-block[data-style=lower-roman] {
|
|
232
|
+
list-style: lower-roman;
|
|
233
|
+
}
|
|
234
|
+
.dragon-editor-viewer .de-list-block[data-style=upper-roman] {
|
|
235
|
+
list-style: upper-roman;
|
|
236
|
+
}
|
|
206
237
|
.dragon-editor-viewer .de-list-block .de-item {
|
|
207
238
|
min-height: 1.6em;
|
|
208
239
|
outline: 0;
|
|
209
240
|
list-style: inherit;
|
|
210
241
|
}
|
|
211
|
-
.dragon-editor-viewer ol.de-list-block {
|
|
212
|
-
list-style: decimal;
|
|
213
|
-
}
|
|
214
242
|
.dragon-editor-viewer .de-image-block {
|
|
215
243
|
display: flex;
|
|
216
244
|
align-items: center;
|
|
@@ -490,6 +518,234 @@ const props = defineProps<{
|
|
|
490
518
|
text-align: center;
|
|
491
519
|
outline: 0;
|
|
492
520
|
}
|
|
521
|
+
.dragon-editor-viewer .de-code-block {
|
|
522
|
+
display: flex;
|
|
523
|
+
flex-wrap: wrap;
|
|
524
|
+
}
|
|
525
|
+
.dragon-editor-viewer .de-code-block .de-filename {
|
|
526
|
+
flex: 1;
|
|
527
|
+
padding: 5px 10px;
|
|
528
|
+
box-sizing: border-box;
|
|
529
|
+
outline: 0;
|
|
530
|
+
}
|
|
531
|
+
.dragon-editor-viewer .de-code-block .de-language {
|
|
532
|
+
width: 120px;
|
|
533
|
+
text-align: right;
|
|
534
|
+
padding: 5px 10px;
|
|
535
|
+
box-sizing: border-box;
|
|
536
|
+
}
|
|
537
|
+
.dragon-editor-viewer .de-code-block .de-pre {
|
|
538
|
+
width: 100%;
|
|
539
|
+
padding: 10px;
|
|
540
|
+
box-sizing: border-box;
|
|
541
|
+
white-space: pre-wrap;
|
|
542
|
+
}
|
|
543
|
+
.dragon-editor-viewer .de-code-block .de-pre .de-code-content {
|
|
544
|
+
display: block;
|
|
545
|
+
min-height: 1.6em;
|
|
546
|
+
width: 100%;
|
|
547
|
+
font-family: Inconsolata, monospace, sans-serif;
|
|
548
|
+
word-break: break-word;
|
|
549
|
+
outline: 0;
|
|
550
|
+
}
|
|
551
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] {
|
|
552
|
+
color: #24292e;
|
|
553
|
+
background: #f1f1f1;
|
|
554
|
+
}
|
|
555
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .de-filename {
|
|
556
|
+
color: #24292e;
|
|
557
|
+
background: #ccc;
|
|
558
|
+
}
|
|
559
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .de-language {
|
|
560
|
+
color: #24292e;
|
|
561
|
+
background: #ccc;
|
|
562
|
+
}
|
|
563
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-doctag,
|
|
564
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-keyword,
|
|
565
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-meta .hljs-keyword,
|
|
566
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-template-tag,
|
|
567
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-template-variable,
|
|
568
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-type,
|
|
569
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-variable.language_ {
|
|
570
|
+
/* prettylights-syntax-keyword */
|
|
571
|
+
color: #d73a49;
|
|
572
|
+
}
|
|
573
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-title,
|
|
574
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-title.class_,
|
|
575
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-title.class_.inherited__,
|
|
576
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-title.function_ {
|
|
577
|
+
/* prettylights-syntax-entity */
|
|
578
|
+
color: #6f42c1;
|
|
579
|
+
}
|
|
580
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-attr,
|
|
581
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-attribute,
|
|
582
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-literal,
|
|
583
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-meta,
|
|
584
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-number,
|
|
585
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-operator,
|
|
586
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-variable,
|
|
587
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-selector-attr,
|
|
588
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-selector-class,
|
|
589
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-selector-id {
|
|
590
|
+
/* prettylights-syntax-constant */
|
|
591
|
+
color: #005cc5;
|
|
592
|
+
}
|
|
593
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-regexp,
|
|
594
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-string,
|
|
595
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-meta .hljs-string {
|
|
596
|
+
/* prettylights-syntax-string */
|
|
597
|
+
color: #032f62;
|
|
598
|
+
}
|
|
599
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-built_in,
|
|
600
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-symbol {
|
|
601
|
+
/* prettylights-syntax-variable */
|
|
602
|
+
color: #e36209;
|
|
603
|
+
}
|
|
604
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-comment,
|
|
605
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-code,
|
|
606
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-formula {
|
|
607
|
+
/* prettylights-syntax-comment */
|
|
608
|
+
color: #6a737d;
|
|
609
|
+
}
|
|
610
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-name,
|
|
611
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-quote,
|
|
612
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-selector-tag,
|
|
613
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-selector-pseudo {
|
|
614
|
+
/* prettylights-syntax-entity-tag */
|
|
615
|
+
color: #22863a;
|
|
616
|
+
}
|
|
617
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-subst {
|
|
618
|
+
/* prettylights-syntax-storage-modifier-import */
|
|
619
|
+
color: #24292e;
|
|
620
|
+
}
|
|
621
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-section {
|
|
622
|
+
/* prettylights-syntax-markup-heading */
|
|
623
|
+
color: #005cc5;
|
|
624
|
+
font-weight: bold;
|
|
625
|
+
}
|
|
626
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-bullet {
|
|
627
|
+
/* prettylights-syntax-markup-list */
|
|
628
|
+
color: #735c0f;
|
|
629
|
+
}
|
|
630
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-emphasis {
|
|
631
|
+
/* prettylights-syntax-markup-italic */
|
|
632
|
+
color: #24292e;
|
|
633
|
+
font-style: italic;
|
|
634
|
+
}
|
|
635
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-strong {
|
|
636
|
+
/* prettylights-syntax-markup-bold */
|
|
637
|
+
color: #24292e;
|
|
638
|
+
font-weight: bold;
|
|
639
|
+
}
|
|
640
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-addition {
|
|
641
|
+
/* prettylights-syntax-markup-inserted */
|
|
642
|
+
color: #22863a;
|
|
643
|
+
background-color: #f0fff4;
|
|
644
|
+
}
|
|
645
|
+
.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-deletion {
|
|
646
|
+
/* prettylights-syntax-markup-deleted */
|
|
647
|
+
color: #b31d28;
|
|
648
|
+
background-color: #ffeef0;
|
|
649
|
+
}
|
|
650
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] {
|
|
651
|
+
color: #adbac7;
|
|
652
|
+
background: #22272e;
|
|
653
|
+
}
|
|
654
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .de-filename {
|
|
655
|
+
color: #adbac7;
|
|
656
|
+
background: #494e54;
|
|
657
|
+
}
|
|
658
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .de-language {
|
|
659
|
+
color: #adbac7;
|
|
660
|
+
background: #494e54;
|
|
661
|
+
}
|
|
662
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-doctag,
|
|
663
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-keyword,
|
|
664
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-meta .hljs-keyword,
|
|
665
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-template-tag,
|
|
666
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-template-variable,
|
|
667
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-type,
|
|
668
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-variable.language_ {
|
|
669
|
+
/* prettylights-syntax-keyword */
|
|
670
|
+
color: #f47067;
|
|
671
|
+
}
|
|
672
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-title,
|
|
673
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-title.class_,
|
|
674
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-title.class_.inherited__,
|
|
675
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-title.function_ {
|
|
676
|
+
/* prettylights-syntax-entity */
|
|
677
|
+
color: #dcbdfb;
|
|
678
|
+
}
|
|
679
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-attr,
|
|
680
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-attribute,
|
|
681
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-literal,
|
|
682
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-meta,
|
|
683
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-number,
|
|
684
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-operator,
|
|
685
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-variable,
|
|
686
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-selector-attr,
|
|
687
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-selector-class,
|
|
688
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-selector-id {
|
|
689
|
+
/* prettylights-syntax-constant */
|
|
690
|
+
color: #6cb6ff;
|
|
691
|
+
}
|
|
692
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-regexp,
|
|
693
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-string,
|
|
694
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-meta .hljs-string {
|
|
695
|
+
/* prettylights-syntax-string */
|
|
696
|
+
color: #96d0ff;
|
|
697
|
+
}
|
|
698
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-built_in,
|
|
699
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-symbol {
|
|
700
|
+
/* prettylights-syntax-variable */
|
|
701
|
+
color: #f69d50;
|
|
702
|
+
}
|
|
703
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-comment,
|
|
704
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-code,
|
|
705
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-formula {
|
|
706
|
+
/* prettylights-syntax-comment */
|
|
707
|
+
color: #768390;
|
|
708
|
+
}
|
|
709
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-name,
|
|
710
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-quote,
|
|
711
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-selector-tag,
|
|
712
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-selector-pseudo {
|
|
713
|
+
/* prettylights-syntax-entity-tag */
|
|
714
|
+
color: #8ddb8c;
|
|
715
|
+
}
|
|
716
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-subst {
|
|
717
|
+
/* prettylights-syntax-storage-modifier-import */
|
|
718
|
+
color: #adbac7;
|
|
719
|
+
}
|
|
720
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-section {
|
|
721
|
+
/* prettylights-syntax-markup-heading */
|
|
722
|
+
color: #316dca;
|
|
723
|
+
font-weight: bold;
|
|
724
|
+
}
|
|
725
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-bullet {
|
|
726
|
+
/* prettylights-syntax-markup-list */
|
|
727
|
+
color: #eac55f;
|
|
728
|
+
}
|
|
729
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-emphasis {
|
|
730
|
+
/* prettylights-syntax-markup-italic */
|
|
731
|
+
color: #adbac7;
|
|
732
|
+
font-style: italic;
|
|
733
|
+
}
|
|
734
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-strong {
|
|
735
|
+
/* prettylights-syntax-markup-bold */
|
|
736
|
+
color: #adbac7;
|
|
737
|
+
font-weight: bold;
|
|
738
|
+
}
|
|
739
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-addition {
|
|
740
|
+
/* prettylights-syntax-markup-inserted */
|
|
741
|
+
color: #b4f1b4;
|
|
742
|
+
background-color: #1b4721;
|
|
743
|
+
}
|
|
744
|
+
.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-deletion {
|
|
745
|
+
/* prettylights-syntax-markup-deleted */
|
|
746
|
+
color: #ffd8d3;
|
|
747
|
+
background-color: #78191b;
|
|
748
|
+
}
|
|
493
749
|
.dragon-editor-viewer .de-bold {
|
|
494
750
|
font-weight: 700;
|
|
495
751
|
}
|