dragon-editor 3.5.8 → 3.5.10

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.
Files changed (14) hide show
  1. package/README.md +0 -9
  2. package/dist/module.json +1 -1
  3. package/dist/module.mjs +1 -3
  4. package/dist/runtime/components/DragonEditor.vue +51 -49
  5. package/dist/runtime/components/DragonEditorViewer.vue +43 -43
  6. package/dist/runtime/scss/editor.css +46 -46
  7. package/dist/runtime/scss/viewer.css +43 -43
  8. package/dist/runtime/type.d.ts +5 -2
  9. package/dist/runtime/utils/event/data.js +7 -15
  10. package/dist/runtime/utils/node/block.js +22 -7
  11. package/dist/runtime/utils/node/element.d.ts +0 -4
  12. package/package.json +2 -2
  13. package/dist/runtime/plugin.d.ts +0 -2
  14. package/dist/runtime/plugin.js +0 -6
package/README.md CHANGED
@@ -29,10 +29,6 @@ I just made the DragonEditor because I needed the WYSIWYG Editor to write on my
29
29
 
30
30
  This module support only Nuxt3.
31
31
 
32
- # Dependencies
33
-
34
- - highlight.js
35
-
36
32
  # Font
37
33
 
38
34
  If you use Codeblock. I recommented use `Inconsolata` font. [(link)](https://fonts.google.com/specimen/Inconsolata?query=Inconsolata)
@@ -54,11 +50,6 @@ First. Set module
54
50
  ```typescript
55
51
  export default defineNuxtConfig({
56
52
  modules: ["dragon-editor"],
57
- vite: {
58
- optimizeDeps: {
59
- include: ["highlight.js/lib/core"],
60
- },
61
- },
62
53
  });
63
54
  ```
64
55
 
package/dist/module.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "nuxt": ">=3.0.0"
5
5
  },
6
6
  "configKey": "dragon-editor",
7
- "version": "3.5.8",
7
+ "version": "3.5.10",
8
8
  "builder": {
9
9
  "@nuxt/module-builder": "0.8.4",
10
10
  "unbuild": "2.0.0"
package/dist/module.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import { defineNuxtModule, createResolver, addComponent, addTypeTemplate, addPlugin } from '@nuxt/kit';
1
+ import { defineNuxtModule, createResolver, addComponent, addTypeTemplate } from '@nuxt/kit';
2
2
 
3
3
 
4
4
 
@@ -31,8 +31,6 @@ const module = defineNuxtModule({
31
31
  src: resolver.resolve(__dirname, "./runtime/type.d.ts"),
32
32
  write: true
33
33
  });
34
- addPlugin(resolver.resolve(__dirname, "./runtime/plugin"));
35
- nuxt.options.build.transpile.push("highlight.js");
36
34
  }
37
35
  });
38
36
 
package/dist/runtime/components/DragonEditor.vue CHANGED
@@ -9,6 +9,7 @@ import { _eidtorMountEvent, _eidtorUnmountEvent, _editorMousemoveEvent, _editorM
9
9
  import { _addBlock } from "../utils/node";
10
10
  import { _setDecoration, _setTextAlign } from "../utils/style";
11
11
  import type { VNode } from "vue";
12
+ import { codeToHtml } from "shiki";
12
13
  import "../type.d.ts";
13
14
 
14
15
  interface DEOption {
@@ -56,7 +57,7 @@ const editorStore = ref<DragonEditorStore>({
56
57
  controlStatus: {
57
58
  isMobile: false,
58
59
  currentBlockType: "text",
59
- codeBlockTheme: "github",
60
+ codeBlockTheme: "github-light",
60
61
  codeBlockLang: "text",
61
62
  listBlockStyle: "disc",
62
63
  anchorTabType: "url",
@@ -69,8 +70,8 @@ const editorStore = ref<DragonEditorStore>({
69
70
  },
70
71
  codeBlockTheme: [
71
72
  {
72
- text: "GitHub",
73
- code: "github",
73
+ text: "GitHub Ligth",
74
+ code: "github-light",
74
75
  },
75
76
  {
76
77
  text: "GitHub Dark Dimmed",
@@ -113,6 +114,7 @@ const editorStore = ref<DragonEditorStore>({
113
114
  $body: null,
114
115
  $controlBar: null,
115
116
  $parentWrap: null,
117
+ codeToHtml: codeToHtml,
116
118
  emit: emit,
117
119
  windowClickEvent: function (event: MouseEvent) {
118
120
  _checkOthersideClick(event, editorStore);
@@ -944,110 +946,110 @@ defineExpose({
944
946
  content: "Type a Code";
945
947
  cursor: text;
946
948
  }
947
- .dragon-editor .de-code-block[data-theme=github] {
949
+ .dragon-editor .de-code-block[data-theme=github-light] {
948
950
  color: #24292e;
949
951
  background: #f1f1f1;
950
952
  }
951
- .dragon-editor .de-code-block[data-theme=github] .de-filename {
953
+ .dragon-editor .de-code-block[data-theme=github-light] .de-filename {
952
954
  color: #24292e;
953
955
  background: #ccc;
954
956
  }
955
- .dragon-editor .de-code-block[data-theme=github] .de-filename:empty:hover::before, .dragon-editor .de-code-block[data-theme=github] .de-filename:empty:focus::before {
957
+ .dragon-editor .de-code-block[data-theme=github-light] .de-filename:empty:hover::before, .dragon-editor .de-code-block[data-theme=github-light] .de-filename:empty:focus::before {
956
958
  color: #8b8d8f;
957
959
  }
958
- .dragon-editor .de-code-block[data-theme=github] .de-language {
960
+ .dragon-editor .de-code-block[data-theme=github-light] .de-language {
959
961
  color: #24292e;
960
962
  background: #ccc;
961
963
  }
962
- .dragon-editor .de-code-block[data-theme=github] .de-language:empty:hover::before, .dragon-editor .de-code-block[data-theme=github] .de-language:empty:focus::before {
964
+ .dragon-editor .de-code-block[data-theme=github-light] .de-language:empty:hover::before, .dragon-editor .de-code-block[data-theme=github-light] .de-language:empty:focus::before {
963
965
  color: #8b8d8f;
964
966
  }
965
- .dragon-editor .de-code-block[data-theme=github] .de-code-content:empty:hover::before, .dragon-editor .de-code-block[data-theme=github] .de-code-content:empty:focus::before {
967
+ .dragon-editor .de-code-block[data-theme=github-light] .de-code-content:empty:hover::before, .dragon-editor .de-code-block[data-theme=github-light] .de-code-content:empty:focus::before {
966
968
  color: #8b8d8f;
967
969
  }
968
- .dragon-editor .de-code-block[data-theme=github] .hljs-doctag,
969
- .dragon-editor .de-code-block[data-theme=github] .hljs-keyword,
970
- .dragon-editor .de-code-block[data-theme=github] .hljs-meta .hljs-keyword,
971
- .dragon-editor .de-code-block[data-theme=github] .hljs-template-tag,
972
- .dragon-editor .de-code-block[data-theme=github] .hljs-template-variable,
973
- .dragon-editor .de-code-block[data-theme=github] .hljs-type,
974
- .dragon-editor .de-code-block[data-theme=github] .hljs-variable.language_ {
970
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-doctag,
971
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-keyword,
972
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-meta .hljs-keyword,
973
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-template-tag,
974
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-template-variable,
975
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-type,
976
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-variable.language_ {
975
977
  /* prettylights-syntax-keyword */
976
978
  color: #d73a49;
977
979
  }
978
- .dragon-editor .de-code-block[data-theme=github] .hljs-title,
979
- .dragon-editor .de-code-block[data-theme=github] .hljs-title.class_,
980
- .dragon-editor .de-code-block[data-theme=github] .hljs-title.class_.inherited__,
981
- .dragon-editor .de-code-block[data-theme=github] .hljs-title.function_ {
980
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-title,
981
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-title.class_,
982
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-title.class_.inherited__,
983
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-title.function_ {
982
984
  /* prettylights-syntax-entity */
983
985
  color: #6f42c1;
984
986
  }
985
- .dragon-editor .de-code-block[data-theme=github] .hljs-attr,
986
- .dragon-editor .de-code-block[data-theme=github] .hljs-attribute,
987
- .dragon-editor .de-code-block[data-theme=github] .hljs-literal,
988
- .dragon-editor .de-code-block[data-theme=github] .hljs-meta,
989
- .dragon-editor .de-code-block[data-theme=github] .hljs-number,
990
- .dragon-editor .de-code-block[data-theme=github] .hljs-operator,
991
- .dragon-editor .de-code-block[data-theme=github] .hljs-variable,
992
- .dragon-editor .de-code-block[data-theme=github] .hljs-selector-attr,
993
- .dragon-editor .de-code-block[data-theme=github] .hljs-selector-class,
994
- .dragon-editor .de-code-block[data-theme=github] .hljs-selector-id {
987
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-attr,
988
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-attribute,
989
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-literal,
990
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-meta,
991
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-number,
992
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-operator,
993
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-variable,
994
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-selector-attr,
995
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-selector-class,
996
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-selector-id {
995
997
  /* prettylights-syntax-constant */
996
998
  color: #005cc5;
997
999
  }
998
- .dragon-editor .de-code-block[data-theme=github] .hljs-regexp,
999
- .dragon-editor .de-code-block[data-theme=github] .hljs-string,
1000
- .dragon-editor .de-code-block[data-theme=github] .hljs-meta .hljs-string {
1000
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-regexp,
1001
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-string,
1002
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-meta .hljs-string {
1001
1003
  /* prettylights-syntax-string */
1002
1004
  color: #032f62;
1003
1005
  }
1004
- .dragon-editor .de-code-block[data-theme=github] .hljs-built_in,
1005
- .dragon-editor .de-code-block[data-theme=github] .hljs-symbol {
1006
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-built_in,
1007
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-symbol {
1006
1008
  /* prettylights-syntax-variable */
1007
1009
  color: #e36209;
1008
1010
  }
1009
- .dragon-editor .de-code-block[data-theme=github] .hljs-comment,
1010
- .dragon-editor .de-code-block[data-theme=github] .hljs-code,
1011
- .dragon-editor .de-code-block[data-theme=github] .hljs-formula {
1011
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-comment,
1012
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-code,
1013
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-formula {
1012
1014
  /* prettylights-syntax-comment */
1013
1015
  color: #6a737d;
1014
1016
  }
1015
- .dragon-editor .de-code-block[data-theme=github] .hljs-name,
1016
- .dragon-editor .de-code-block[data-theme=github] .hljs-quote,
1017
- .dragon-editor .de-code-block[data-theme=github] .hljs-selector-tag,
1018
- .dragon-editor .de-code-block[data-theme=github] .hljs-selector-pseudo {
1017
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-name,
1018
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-quote,
1019
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-selector-tag,
1020
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-selector-pseudo {
1019
1021
  /* prettylights-syntax-entity-tag */
1020
1022
  color: #22863a;
1021
1023
  }
1022
- .dragon-editor .de-code-block[data-theme=github] .hljs-subst {
1024
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-subst {
1023
1025
  /* prettylights-syntax-storage-modifier-import */
1024
1026
  color: #24292e;
1025
1027
  }
1026
- .dragon-editor .de-code-block[data-theme=github] .hljs-section {
1028
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-section {
1027
1029
  /* prettylights-syntax-markup-heading */
1028
1030
  color: #005cc5;
1029
1031
  font-weight: bold;
1030
1032
  }
1031
- .dragon-editor .de-code-block[data-theme=github] .hljs-bullet {
1033
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-bullet {
1032
1034
  /* prettylights-syntax-markup-list */
1033
1035
  color: #735c0f;
1034
1036
  }
1035
- .dragon-editor .de-code-block[data-theme=github] .hljs-emphasis {
1037
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-emphasis {
1036
1038
  /* prettylights-syntax-markup-italic */
1037
1039
  color: #24292e;
1038
1040
  font-style: italic;
1039
1041
  }
1040
- .dragon-editor .de-code-block[data-theme=github] .hljs-strong {
1042
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-strong {
1041
1043
  /* prettylights-syntax-markup-bold */
1042
1044
  color: #24292e;
1043
1045
  font-weight: bold;
1044
1046
  }
1045
- .dragon-editor .de-code-block[data-theme=github] .hljs-addition {
1047
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-addition {
1046
1048
  /* prettylights-syntax-markup-inserted */
1047
1049
  color: #22863a;
1048
1050
  background-color: #f0fff4;
1049
1051
  }
1050
- .dragon-editor .de-code-block[data-theme=github] .hljs-deletion {
1052
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-deletion {
1051
1053
  /* prettylights-syntax-markup-deleted */
1052
1054
  color: #b31d28;
1053
1055
  background-color: #ffeef0;
package/dist/runtime/components/DragonEditorViewer.vue CHANGED
@@ -565,101 +565,101 @@ function structure(): VNode {
565
565
  word-break: break-word;
566
566
  outline: 0;
567
567
  }
568
- .dragon-editor-viewer .de-code-block[data-theme=github] {
568
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] {
569
569
  color: #24292e;
570
570
  background: #f1f1f1;
571
571
  }
572
- .dragon-editor-viewer .de-code-block[data-theme=github] .de-filename {
572
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .de-filename {
573
573
  color: #24292e;
574
574
  background: #ccc;
575
575
  }
576
- .dragon-editor-viewer .de-code-block[data-theme=github] .de-language {
576
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .de-language {
577
577
  color: #24292e;
578
578
  background: #ccc;
579
579
  }
580
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-doctag,
581
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-keyword,
582
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-meta .hljs-keyword,
583
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-template-tag,
584
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-template-variable,
585
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-type,
586
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-variable.language_ {
580
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-doctag,
581
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-keyword,
582
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-meta .hljs-keyword,
583
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-template-tag,
584
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-template-variable,
585
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-type,
586
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-variable.language_ {
587
587
  /* prettylights-syntax-keyword */
588
588
  color: #d73a49;
589
589
  }
590
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-title,
591
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-title.class_,
592
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-title.class_.inherited__,
593
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-title.function_ {
590
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-title,
591
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-title.class_,
592
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-title.class_.inherited__,
593
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-title.function_ {
594
594
  /* prettylights-syntax-entity */
595
595
  color: #6f42c1;
596
596
  }
597
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-attr,
598
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-attribute,
599
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-literal,
600
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-meta,
601
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-number,
602
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-operator,
603
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-variable,
604
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-selector-attr,
605
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-selector-class,
606
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-selector-id {
597
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-attr,
598
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-attribute,
599
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-literal,
600
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-meta,
601
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-number,
602
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-operator,
603
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-variable,
604
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-selector-attr,
605
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-selector-class,
606
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-selector-id {
607
607
  /* prettylights-syntax-constant */
608
608
  color: #005cc5;
609
609
  }
610
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-regexp,
611
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-string,
612
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-meta .hljs-string {
610
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-regexp,
611
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-string,
612
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-meta .hljs-string {
613
613
  /* prettylights-syntax-string */
614
614
  color: #032f62;
615
615
  }
616
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-built_in,
617
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-symbol {
616
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-built_in,
617
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-symbol {
618
618
  /* prettylights-syntax-variable */
619
619
  color: #e36209;
620
620
  }
621
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-comment,
622
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-code,
623
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-formula {
621
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-comment,
622
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-code,
623
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-formula {
624
624
  /* prettylights-syntax-comment */
625
625
  color: #6a737d;
626
626
  }
627
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-name,
628
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-quote,
629
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-selector-tag,
630
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-selector-pseudo {
627
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-name,
628
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-quote,
629
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-selector-tag,
630
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-selector-pseudo {
631
631
  /* prettylights-syntax-entity-tag */
632
632
  color: #22863a;
633
633
  }
634
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-subst {
634
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-subst {
635
635
  /* prettylights-syntax-storage-modifier-import */
636
636
  color: #24292e;
637
637
  }
638
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-section {
638
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-section {
639
639
  /* prettylights-syntax-markup-heading */
640
640
  color: #005cc5;
641
641
  font-weight: bold;
642
642
  }
643
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-bullet {
643
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-bullet {
644
644
  /* prettylights-syntax-markup-list */
645
645
  color: #735c0f;
646
646
  }
647
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-emphasis {
647
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-emphasis {
648
648
  /* prettylights-syntax-markup-italic */
649
649
  color: #24292e;
650
650
  font-style: italic;
651
651
  }
652
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-strong {
652
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-strong {
653
653
  /* prettylights-syntax-markup-bold */
654
654
  color: #24292e;
655
655
  font-weight: bold;
656
656
  }
657
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-addition {
657
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-addition {
658
658
  /* prettylights-syntax-markup-inserted */
659
659
  color: #22863a;
660
660
  background-color: #f0fff4;
661
661
  }
662
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-deletion {
662
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-deletion {
663
663
  /* prettylights-syntax-markup-deleted */
664
664
  color: #b31d28;
665
665
  background-color: #ffeef0;
package/dist/runtime/scss/editor.css CHANGED
@@ -733,110 +733,110 @@
733
733
  content: "Type a Code";
734
734
  cursor: text;
735
735
  }
736
- .dragon-editor .de-code-block[data-theme=github] {
736
+ .dragon-editor .de-code-block[data-theme=github-light] {
737
737
  color: #24292e;
738
738
  background: #f1f1f1;
739
739
  }
740
- .dragon-editor .de-code-block[data-theme=github] .de-filename {
740
+ .dragon-editor .de-code-block[data-theme=github-light] .de-filename {
741
741
  color: #24292e;
742
742
  background: #ccc;
743
743
  }
744
- .dragon-editor .de-code-block[data-theme=github] .de-filename:empty:hover::before, .dragon-editor .de-code-block[data-theme=github] .de-filename:empty:focus::before {
744
+ .dragon-editor .de-code-block[data-theme=github-light] .de-filename:empty:hover::before, .dragon-editor .de-code-block[data-theme=github-light] .de-filename:empty:focus::before {
745
745
  color: #8b8d8f;
746
746
  }
747
- .dragon-editor .de-code-block[data-theme=github] .de-language {
747
+ .dragon-editor .de-code-block[data-theme=github-light] .de-language {
748
748
  color: #24292e;
749
749
  background: #ccc;
750
750
  }
751
- .dragon-editor .de-code-block[data-theme=github] .de-language:empty:hover::before, .dragon-editor .de-code-block[data-theme=github] .de-language:empty:focus::before {
751
+ .dragon-editor .de-code-block[data-theme=github-light] .de-language:empty:hover::before, .dragon-editor .de-code-block[data-theme=github-light] .de-language:empty:focus::before {
752
752
  color: #8b8d8f;
753
753
  }
754
- .dragon-editor .de-code-block[data-theme=github] .de-code-content:empty:hover::before, .dragon-editor .de-code-block[data-theme=github] .de-code-content:empty:focus::before {
754
+ .dragon-editor .de-code-block[data-theme=github-light] .de-code-content:empty:hover::before, .dragon-editor .de-code-block[data-theme=github-light] .de-code-content:empty:focus::before {
755
755
  color: #8b8d8f;
756
756
  }
757
- .dragon-editor .de-code-block[data-theme=github] .hljs-doctag,
758
- .dragon-editor .de-code-block[data-theme=github] .hljs-keyword,
759
- .dragon-editor .de-code-block[data-theme=github] .hljs-meta .hljs-keyword,
760
- .dragon-editor .de-code-block[data-theme=github] .hljs-template-tag,
761
- .dragon-editor .de-code-block[data-theme=github] .hljs-template-variable,
762
- .dragon-editor .de-code-block[data-theme=github] .hljs-type,
763
- .dragon-editor .de-code-block[data-theme=github] .hljs-variable.language_ {
757
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-doctag,
758
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-keyword,
759
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-meta .hljs-keyword,
760
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-template-tag,
761
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-template-variable,
762
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-type,
763
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-variable.language_ {
764
764
  /* prettylights-syntax-keyword */
765
765
  color: #d73a49;
766
766
  }
767
- .dragon-editor .de-code-block[data-theme=github] .hljs-title,
768
- .dragon-editor .de-code-block[data-theme=github] .hljs-title.class_,
769
- .dragon-editor .de-code-block[data-theme=github] .hljs-title.class_.inherited__,
770
- .dragon-editor .de-code-block[data-theme=github] .hljs-title.function_ {
767
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-title,
768
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-title.class_,
769
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-title.class_.inherited__,
770
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-title.function_ {
771
771
  /* prettylights-syntax-entity */
772
772
  color: #6f42c1;
773
773
  }
774
- .dragon-editor .de-code-block[data-theme=github] .hljs-attr,
775
- .dragon-editor .de-code-block[data-theme=github] .hljs-attribute,
776
- .dragon-editor .de-code-block[data-theme=github] .hljs-literal,
777
- .dragon-editor .de-code-block[data-theme=github] .hljs-meta,
778
- .dragon-editor .de-code-block[data-theme=github] .hljs-number,
779
- .dragon-editor .de-code-block[data-theme=github] .hljs-operator,
780
- .dragon-editor .de-code-block[data-theme=github] .hljs-variable,
781
- .dragon-editor .de-code-block[data-theme=github] .hljs-selector-attr,
782
- .dragon-editor .de-code-block[data-theme=github] .hljs-selector-class,
783
- .dragon-editor .de-code-block[data-theme=github] .hljs-selector-id {
774
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-attr,
775
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-attribute,
776
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-literal,
777
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-meta,
778
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-number,
779
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-operator,
780
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-variable,
781
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-selector-attr,
782
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-selector-class,
783
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-selector-id {
784
784
  /* prettylights-syntax-constant */
785
785
  color: #005cc5;
786
786
  }
787
- .dragon-editor .de-code-block[data-theme=github] .hljs-regexp,
788
- .dragon-editor .de-code-block[data-theme=github] .hljs-string,
789
- .dragon-editor .de-code-block[data-theme=github] .hljs-meta .hljs-string {
787
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-regexp,
788
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-string,
789
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-meta .hljs-string {
790
790
  /* prettylights-syntax-string */
791
791
  color: #032f62;
792
792
  }
793
- .dragon-editor .de-code-block[data-theme=github] .hljs-built_in,
794
- .dragon-editor .de-code-block[data-theme=github] .hljs-symbol {
793
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-built_in,
794
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-symbol {
795
795
  /* prettylights-syntax-variable */
796
796
  color: #e36209;
797
797
  }
798
- .dragon-editor .de-code-block[data-theme=github] .hljs-comment,
799
- .dragon-editor .de-code-block[data-theme=github] .hljs-code,
800
- .dragon-editor .de-code-block[data-theme=github] .hljs-formula {
798
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-comment,
799
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-code,
800
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-formula {
801
801
  /* prettylights-syntax-comment */
802
802
  color: #6a737d;
803
803
  }
804
- .dragon-editor .de-code-block[data-theme=github] .hljs-name,
805
- .dragon-editor .de-code-block[data-theme=github] .hljs-quote,
806
- .dragon-editor .de-code-block[data-theme=github] .hljs-selector-tag,
807
- .dragon-editor .de-code-block[data-theme=github] .hljs-selector-pseudo {
804
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-name,
805
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-quote,
806
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-selector-tag,
807
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-selector-pseudo {
808
808
  /* prettylights-syntax-entity-tag */
809
809
  color: #22863a;
810
810
  }
811
- .dragon-editor .de-code-block[data-theme=github] .hljs-subst {
811
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-subst {
812
812
  /* prettylights-syntax-storage-modifier-import */
813
813
  color: #24292e;
814
814
  }
815
- .dragon-editor .de-code-block[data-theme=github] .hljs-section {
815
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-section {
816
816
  /* prettylights-syntax-markup-heading */
817
817
  color: #005cc5;
818
818
  font-weight: bold;
819
819
  }
820
- .dragon-editor .de-code-block[data-theme=github] .hljs-bullet {
820
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-bullet {
821
821
  /* prettylights-syntax-markup-list */
822
822
  color: #735c0f;
823
823
  }
824
- .dragon-editor .de-code-block[data-theme=github] .hljs-emphasis {
824
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-emphasis {
825
825
  /* prettylights-syntax-markup-italic */
826
826
  color: #24292e;
827
827
  font-style: italic;
828
828
  }
829
- .dragon-editor .de-code-block[data-theme=github] .hljs-strong {
829
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-strong {
830
830
  /* prettylights-syntax-markup-bold */
831
831
  color: #24292e;
832
832
  font-weight: bold;
833
833
  }
834
- .dragon-editor .de-code-block[data-theme=github] .hljs-addition {
834
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-addition {
835
835
  /* prettylights-syntax-markup-inserted */
836
836
  color: #22863a;
837
837
  background-color: #f0fff4;
838
838
  }
839
- .dragon-editor .de-code-block[data-theme=github] .hljs-deletion {
839
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-deletion {
840
840
  /* prettylights-syntax-markup-deleted */
841
841
  color: #b31d28;
842
842
  background-color: #ffeef0;
package/dist/runtime/scss/viewer.css CHANGED
@@ -530,101 +530,101 @@
530
530
  word-break: break-word;
531
531
  outline: 0;
532
532
  }
533
- .dragon-editor-viewer .de-code-block[data-theme=github] {
533
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] {
534
534
  color: #24292e;
535
535
  background: #f1f1f1;
536
536
  }
537
- .dragon-editor-viewer .de-code-block[data-theme=github] .de-filename {
537
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .de-filename {
538
538
  color: #24292e;
539
539
  background: #ccc;
540
540
  }
541
- .dragon-editor-viewer .de-code-block[data-theme=github] .de-language {
541
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .de-language {
542
542
  color: #24292e;
543
543
  background: #ccc;
544
544
  }
545
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-doctag,
546
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-keyword,
547
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-meta .hljs-keyword,
548
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-template-tag,
549
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-template-variable,
550
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-type,
551
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-variable.language_ {
545
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-doctag,
546
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-keyword,
547
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-meta .hljs-keyword,
548
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-template-tag,
549
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-template-variable,
550
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-type,
551
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-variable.language_ {
552
552
  /* prettylights-syntax-keyword */
553
553
  color: #d73a49;
554
554
  }
555
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-title,
556
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-title.class_,
557
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-title.class_.inherited__,
558
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-title.function_ {
555
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-title,
556
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-title.class_,
557
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-title.class_.inherited__,
558
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-title.function_ {
559
559
  /* prettylights-syntax-entity */
560
560
  color: #6f42c1;
561
561
  }
562
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-attr,
563
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-attribute,
564
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-literal,
565
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-meta,
566
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-number,
567
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-operator,
568
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-variable,
569
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-selector-attr,
570
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-selector-class,
571
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-selector-id {
562
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-attr,
563
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-attribute,
564
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-literal,
565
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-meta,
566
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-number,
567
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-operator,
568
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-variable,
569
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-selector-attr,
570
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-selector-class,
571
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-selector-id {
572
572
  /* prettylights-syntax-constant */
573
573
  color: #005cc5;
574
574
  }
575
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-regexp,
576
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-string,
577
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-meta .hljs-string {
575
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-regexp,
576
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-string,
577
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-meta .hljs-string {
578
578
  /* prettylights-syntax-string */
579
579
  color: #032f62;
580
580
  }
581
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-built_in,
582
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-symbol {
581
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-built_in,
582
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-symbol {
583
583
  /* prettylights-syntax-variable */
584
584
  color: #e36209;
585
585
  }
586
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-comment,
587
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-code,
588
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-formula {
586
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-comment,
587
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-code,
588
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-formula {
589
589
  /* prettylights-syntax-comment */
590
590
  color: #6a737d;
591
591
  }
592
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-name,
593
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-quote,
594
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-selector-tag,
595
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-selector-pseudo {
592
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-name,
593
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-quote,
594
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-selector-tag,
595
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-selector-pseudo {
596
596
  /* prettylights-syntax-entity-tag */
597
597
  color: #22863a;
598
598
  }
599
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-subst {
599
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-subst {
600
600
  /* prettylights-syntax-storage-modifier-import */
601
601
  color: #24292e;
602
602
  }
603
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-section {
603
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-section {
604
604
  /* prettylights-syntax-markup-heading */
605
605
  color: #005cc5;
606
606
  font-weight: bold;
607
607
  }
608
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-bullet {
608
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-bullet {
609
609
  /* prettylights-syntax-markup-list */
610
610
  color: #735c0f;
611
611
  }
612
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-emphasis {
612
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-emphasis {
613
613
  /* prettylights-syntax-markup-italic */
614
614
  color: #24292e;
615
615
  font-style: italic;
616
616
  }
617
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-strong {
617
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-strong {
618
618
  /* prettylights-syntax-markup-bold */
619
619
  color: #24292e;
620
620
  font-weight: bold;
621
621
  }
622
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-addition {
622
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-addition {
623
623
  /* prettylights-syntax-markup-inserted */
624
624
  color: #22863a;
625
625
  background-color: #f0fff4;
626
626
  }
627
- .dragon-editor-viewer .de-code-block[data-theme=github] .hljs-deletion {
627
+ .dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-deletion {
628
628
  /* prettylights-syntax-markup-deleted */
629
629
  color: #b31d28;
630
630
  background-color: #ffeef0;
package/dist/runtime/type.d.ts CHANGED
@@ -1,3 +1,5 @@
1
+ import type { codeToHtml } from "shiki";
2
+
1
3
  type DEContentData = DEBlockData[];
2
4
 
3
5
  type DEBlockData = DETextBlock | DEHeadingBlock | DEListBlock | DEImageBlock | DECodeBlock | DECustomBlock;
@@ -14,9 +16,9 @@ type DEBlockMenutype = "text" | "heading1" | "heading2" | "heading3" | "ul" | "o
14
16
 
15
17
  type DEListStyle = "disc" | "square" | "decimal" | "lower-alpha" | "upper-alpha" | "lower-roman" | "upper-roman";
16
18
 
17
- type DECodeblockTheme = "github" | "github-dark-dimmed";
19
+ type DECodeblockTheme = "github-light" | "github-dark-dimmed";
18
20
 
19
- type DECodeblockLang = "text" | "bash" | "csharp" | "c" | "cpp" | "css" | "django" | "dockerfile" | "go" | "html" | "json" | "java" | "js" | "ts" | "kotlin" | "lua" | "md" | "nginx" | "php" | "python" | "ruby" | "scss" | "sql" | "shell" | "swift" | "yml";
21
+ type DECodeblockLang = "text" | "csharp" | "c" | "cpp" | "css" | "django" | "dockerfile" | "go" | "html" | "json" | "java" | "javascript" | "typescript" | "kotlin" | "lua" | "markdown" | "nginx" | "php" | "python" | "ruby" | "scss" | "sql" | "shellscript" | "swift" | "yaml";
20
22
 
21
23
  type DEBlockElement = HTMLParagraphElement | HTMLHeadingElement | HTMLElement | HTMLDivElement;
22
24
 
@@ -62,6 +64,7 @@ interface DragonEditorStore {
62
64
  $anchorInput: HTMLInputElement | null;
63
65
  $currentBlock: HTMLDivElement | null;
64
66
  };
67
+ codeToHtml: codeToHtml;
65
68
  codeBlockTheme: DECodeItem<DECodeblockTheme>[];
66
69
  listUlType: DECodeItem<DEListStyle>[];
67
70
  listOlType: DECodeItem<DEListStyle>[];
package/dist/runtime/utils/event/data.js CHANGED
@@ -4,10 +4,6 @@ export const CODEBLOCKLANG = [
4
4
  text: "Plain Text",
5
5
  code: "text"
6
6
  },
7
- {
8
- text: "Bash",
9
- code: "bash"
10
- },
11
7
  {
12
8
  text: "C#",
13
9
  code: "csharp"
@@ -24,10 +20,6 @@ export const CODEBLOCKLANG = [
24
20
  text: "CSS",
25
21
  code: "css"
26
22
  },
27
- {
28
- text: "Django",
29
- code: "django"
30
- },
31
23
  {
32
24
  text: "Dockerfile",
33
25
  code: "dockerfile"
@@ -50,11 +42,11 @@ export const CODEBLOCKLANG = [
50
42
  },
51
43
  {
52
44
  text: "JavaScript",
53
- code: "js"
45
+ code: "javascript"
54
46
  },
55
47
  {
56
48
  text: "TypeScript",
57
- code: "ts"
49
+ code: "typescript"
58
50
  },
59
51
  {
60
52
  text: "Kotlin",
@@ -66,7 +58,7 @@ export const CODEBLOCKLANG = [
66
58
  },
67
59
  {
68
60
  text: "Markdown",
69
- code: "md"
61
+ code: "markdown"
70
62
  },
71
63
  {
72
64
  text: "Nginx",
@@ -94,7 +86,7 @@ export const CODEBLOCKLANG = [
94
86
  },
95
87
  {
96
88
  text: "Shell",
97
- code: "shell"
89
+ code: "shellscript"
98
90
  },
99
91
  {
100
92
  text: "Swift",
@@ -102,7 +94,7 @@ export const CODEBLOCKLANG = [
102
94
  },
103
95
  {
104
96
  text: "YAML",
105
- code: "yml"
97
+ code: "yaml"
106
98
  }
107
99
  ];
108
100
  export function _updateModelData(store) {
@@ -285,7 +277,7 @@ export function _getDefaultBlockData(type) {
285
277
  data = {
286
278
  type: "code",
287
279
  language: "text",
288
- theme: "github",
280
+ theme: "github-light",
289
281
  filename: "",
290
282
  textContent: ""
291
283
  };
@@ -330,7 +322,7 @@ function __updateCodeBlockStyle(store) {
330
322
  language = targetValue.code;
331
323
  }
332
324
  }
333
- store.value.controlStatus.codeBlockTheme = $block.dataset["theme"] ?? "github";
325
+ store.value.controlStatus.codeBlockTheme = $block.dataset["theme"] ?? "github-light";
334
326
  store.value.controlStatus.codeBlockLang = language;
335
327
  }
336
328
  }
package/dist/runtime/utils/node/block.js CHANGED
@@ -1,5 +1,4 @@
1
1
  import { _getDefaultBlockData, _generateId, _updateModelData, _updateCursorData, _decideWhetherOpenControlBar, _updateControlBarStatus, CODEBLOCKLANG } from "../event/index.js";
2
- import hljs from "highlight.js/lib/common";
3
2
  export function _addBlock(type, store, data) {
4
3
  const blockData = data === void 0 ? _getDefaultBlockData(type) : data;
5
4
  let $block = _createTextBlock(_getDefaultBlockData("text"));
@@ -206,23 +205,37 @@ export function _updateHeadingBlockList(store) {
206
205
  });
207
206
  }
208
207
  }
209
- export function _setCodeBlockTheme(theme, store) {
208
+ export async function _setCodeBlockTheme(theme, store) {
210
209
  if (store.value.controlStatus.$currentBlock !== null) {
211
- store.value.controlStatus.codeBlockTheme = theme;
212
- store.value.controlStatus.$currentBlock.dataset["theme"] = theme;
210
+ const $target = store.value.controlStatus.$currentBlock.querySelector(".de-language");
211
+ const $code = store.value.controlStatus.$currentBlock.querySelector(".de-code-content");
212
+ if ($target !== null && $code !== null) {
213
+ const convert = await store.value.codeToHtml($code.textContent ?? "", { lang: store.value.controlStatus.codeBlockLang, theme });
214
+ const $div = document.createElement("div");
215
+ $div.innerHTML = convert;
216
+ $code.innerHTML = $div.querySelector("code").innerHTML;
217
+ store.value.controlStatus.codeBlockTheme = theme;
218
+ store.value.controlStatus.$currentBlock.dataset["theme"] = theme;
219
+ _updateCursorData(store);
220
+ _updateModelData(store);
221
+ }
213
222
  }
214
223
  }
215
- export function _setCodeBlockLanguage(language, store) {
224
+ export async function _setCodeBlockLanguage(language, store) {
216
225
  if (store.value.controlStatus.$currentBlock !== null) {
217
226
  const $target = store.value.controlStatus.$currentBlock.querySelector(".de-language");
218
227
  const $code = store.value.controlStatus.$currentBlock.querySelector(".de-code-content");
219
228
  if ($target !== null && $code !== null) {
220
229
  const targetValue = CODEBLOCKLANG.find((item) => item.code === language);
221
230
  if (targetValue !== void 0) {
222
- const convert = hljs.highlight($code.textContent ?? "", { language });
231
+ const convert = await store.value.codeToHtml($code.textContent ?? "", { lang: language, theme: store.value.controlStatus.codeBlockTheme });
232
+ const $div = document.createElement("div");
233
+ $div.innerHTML = convert;
223
234
  $target.textContent = targetValue.text;
224
- $code.innerHTML = convert.value;
235
+ $code.innerHTML = $div.querySelector("code").innerHTML;
225
236
  store.value.controlStatus.codeBlockLang = targetValue.code;
237
+ _updateCursorData(store);
238
+ _updateModelData(store);
226
239
  }
227
240
  }
228
241
  }
@@ -231,5 +244,7 @@ export function _setListBlockStyle(style, store) {
231
244
  if (store.value.controlStatus.$currentBlock !== null) {
232
245
  store.value.controlStatus.listBlockStyle = style;
233
246
  store.value.controlStatus.$currentBlock.dataset["style"] = style;
247
+ _updateCursorData(store);
248
+ _updateModelData(store);
234
249
  }
235
250
  }
package/dist/runtime/utils/node/element.d.ts CHANGED
@@ -1,4 +0,0 @@
1
- export declare function _findScrollingElement($target: HTMLElement): HTMLElement | Window;
2
- export declare function _getParentElementIfNodeIsText($target: Node, $block: HTMLElement): Node;
3
- export declare function _findContentEditableElement($target: Node): HTMLElement | null;
4
- export declare function _findPoverTextNode(node: Element, idx: number): number;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dragon-editor",
3
- "version": "3.5.8",
3
+ "version": "3.5.10",
4
4
  "description": "Javascript WYSIWYG editor in Nuxt3!",
5
5
  "repository": {
6
6
  "type": "git",
@@ -32,7 +32,7 @@
32
32
  },
33
33
  "dependencies": {
34
34
  "@nuxt/kit": "^3.16.1",
35
- "highlight.js": "^11.11.1"
35
+ "shiki": "^3.3.0"
36
36
  },
37
37
  "devDependencies": {
38
38
  "@nuxt/eslint-config": "^1.2.0",
package/dist/runtime/plugin.d.ts DELETED
@@ -1,2 +0,0 @@
1
- declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
2
- export default _default;
package/dist/runtime/plugin.js DELETED
@@ -1,6 +0,0 @@
1
- import hljs from "highlight.js/lib/common";
2
- import { defineNuxtPlugin } from "nuxt/app";
3
- export default defineNuxtPlugin((nuxtApp) => {
4
- nuxtApp.vueApp.provide("hljs", hljs);
5
- nuxtApp.provide("hljs", hljs);
6
- });