dragon-editor 3.5.9 → 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 (11) hide show
  1. package/README.md +0 -4
  2. package/dist/module.json +1 -1
  3. package/dist/module.mjs +0 -1
  4. package/dist/runtime/components/DragonEditor.vue +51 -51
  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 +4 -4
  9. package/dist/runtime/utils/event/data.js +7 -15
  10. package/dist/runtime/utils/node/block.js +22 -6
  11. package/package.json +2 -2
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)
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.9",
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
@@ -31,7 +31,6 @@ const module = defineNuxtModule({
31
31
  src: resolver.resolve(__dirname, "./runtime/type.d.ts"),
32
32
  write: true
33
33
  });
34
- nuxt.options.build.transpile.push("highlight.js");
35
34
  }
36
35
  });
37
36
 
package/dist/runtime/components/DragonEditor.vue CHANGED
@@ -9,7 +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 hljs from "highlight.js";
12
+ import { codeToHtml } from "shiki";
13
13
  import "../type.d.ts";
14
14
 
15
15
  interface DEOption {
@@ -57,7 +57,7 @@ const editorStore = ref<DragonEditorStore>({
57
57
  controlStatus: {
58
58
  isMobile: false,
59
59
  currentBlockType: "text",
60
- codeBlockTheme: "github",
60
+ codeBlockTheme: "github-light",
61
61
  codeBlockLang: "text",
62
62
  listBlockStyle: "disc",
63
63
  anchorTabType: "url",
@@ -70,8 +70,8 @@ const editorStore = ref<DragonEditorStore>({
70
70
  },
71
71
  codeBlockTheme: [
72
72
  {
73
- text: "GitHub",
74
- code: "github",
73
+ text: "GitHub Ligth",
74
+ code: "github-light",
75
75
  },
76
76
  {
77
77
  text: "GitHub Dark Dimmed",
@@ -114,7 +114,7 @@ const editorStore = ref<DragonEditorStore>({
114
114
  $body: null,
115
115
  $controlBar: null,
116
116
  $parentWrap: null,
117
- hljs: hljs,
117
+ codeToHtml: codeToHtml,
118
118
  emit: emit,
119
119
  windowClickEvent: function (event: MouseEvent) {
120
120
  _checkOthersideClick(event, editorStore);
@@ -946,110 +946,110 @@ defineExpose({
946
946
  content: "Type a Code";
947
947
  cursor: text;
948
948
  }
949
- .dragon-editor .de-code-block[data-theme=github] {
949
+ .dragon-editor .de-code-block[data-theme=github-light] {
950
950
  color: #24292e;
951
951
  background: #f1f1f1;
952
952
  }
953
- .dragon-editor .de-code-block[data-theme=github] .de-filename {
953
+ .dragon-editor .de-code-block[data-theme=github-light] .de-filename {
954
954
  color: #24292e;
955
955
  background: #ccc;
956
956
  }
957
- .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 {
958
958
  color: #8b8d8f;
959
959
  }
960
- .dragon-editor .de-code-block[data-theme=github] .de-language {
960
+ .dragon-editor .de-code-block[data-theme=github-light] .de-language {
961
961
  color: #24292e;
962
962
  background: #ccc;
963
963
  }
964
- .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 {
965
965
  color: #8b8d8f;
966
966
  }
967
- .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 {
968
968
  color: #8b8d8f;
969
969
  }
970
- .dragon-editor .de-code-block[data-theme=github] .hljs-doctag,
971
- .dragon-editor .de-code-block[data-theme=github] .hljs-keyword,
972
- .dragon-editor .de-code-block[data-theme=github] .hljs-meta .hljs-keyword,
973
- .dragon-editor .de-code-block[data-theme=github] .hljs-template-tag,
974
- .dragon-editor .de-code-block[data-theme=github] .hljs-template-variable,
975
- .dragon-editor .de-code-block[data-theme=github] .hljs-type,
976
- .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_ {
977
977
  /* prettylights-syntax-keyword */
978
978
  color: #d73a49;
979
979
  }
980
- .dragon-editor .de-code-block[data-theme=github] .hljs-title,
981
- .dragon-editor .de-code-block[data-theme=github] .hljs-title.class_,
982
- .dragon-editor .de-code-block[data-theme=github] .hljs-title.class_.inherited__,
983
- .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_ {
984
984
  /* prettylights-syntax-entity */
985
985
  color: #6f42c1;
986
986
  }
987
- .dragon-editor .de-code-block[data-theme=github] .hljs-attr,
988
- .dragon-editor .de-code-block[data-theme=github] .hljs-attribute,
989
- .dragon-editor .de-code-block[data-theme=github] .hljs-literal,
990
- .dragon-editor .de-code-block[data-theme=github] .hljs-meta,
991
- .dragon-editor .de-code-block[data-theme=github] .hljs-number,
992
- .dragon-editor .de-code-block[data-theme=github] .hljs-operator,
993
- .dragon-editor .de-code-block[data-theme=github] .hljs-variable,
994
- .dragon-editor .de-code-block[data-theme=github] .hljs-selector-attr,
995
- .dragon-editor .de-code-block[data-theme=github] .hljs-selector-class,
996
- .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 {
997
997
  /* prettylights-syntax-constant */
998
998
  color: #005cc5;
999
999
  }
1000
- .dragon-editor .de-code-block[data-theme=github] .hljs-regexp,
1001
- .dragon-editor .de-code-block[data-theme=github] .hljs-string,
1002
- .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 {
1003
1003
  /* prettylights-syntax-string */
1004
1004
  color: #032f62;
1005
1005
  }
1006
- .dragon-editor .de-code-block[data-theme=github] .hljs-built_in,
1007
- .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 {
1008
1008
  /* prettylights-syntax-variable */
1009
1009
  color: #e36209;
1010
1010
  }
1011
- .dragon-editor .de-code-block[data-theme=github] .hljs-comment,
1012
- .dragon-editor .de-code-block[data-theme=github] .hljs-code,
1013
- .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 {
1014
1014
  /* prettylights-syntax-comment */
1015
1015
  color: #6a737d;
1016
1016
  }
1017
- .dragon-editor .de-code-block[data-theme=github] .hljs-name,
1018
- .dragon-editor .de-code-block[data-theme=github] .hljs-quote,
1019
- .dragon-editor .de-code-block[data-theme=github] .hljs-selector-tag,
1020
- .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 {
1021
1021
  /* prettylights-syntax-entity-tag */
1022
1022
  color: #22863a;
1023
1023
  }
1024
- .dragon-editor .de-code-block[data-theme=github] .hljs-subst {
1024
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-subst {
1025
1025
  /* prettylights-syntax-storage-modifier-import */
1026
1026
  color: #24292e;
1027
1027
  }
1028
- .dragon-editor .de-code-block[data-theme=github] .hljs-section {
1028
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-section {
1029
1029
  /* prettylights-syntax-markup-heading */
1030
1030
  color: #005cc5;
1031
1031
  font-weight: bold;
1032
1032
  }
1033
- .dragon-editor .de-code-block[data-theme=github] .hljs-bullet {
1033
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-bullet {
1034
1034
  /* prettylights-syntax-markup-list */
1035
1035
  color: #735c0f;
1036
1036
  }
1037
- .dragon-editor .de-code-block[data-theme=github] .hljs-emphasis {
1037
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-emphasis {
1038
1038
  /* prettylights-syntax-markup-italic */
1039
1039
  color: #24292e;
1040
1040
  font-style: italic;
1041
1041
  }
1042
- .dragon-editor .de-code-block[data-theme=github] .hljs-strong {
1042
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-strong {
1043
1043
  /* prettylights-syntax-markup-bold */
1044
1044
  color: #24292e;
1045
1045
  font-weight: bold;
1046
1046
  }
1047
- .dragon-editor .de-code-block[data-theme=github] .hljs-addition {
1047
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-addition {
1048
1048
  /* prettylights-syntax-markup-inserted */
1049
1049
  color: #22863a;
1050
1050
  background-color: #f0fff4;
1051
1051
  }
1052
- .dragon-editor .de-code-block[data-theme=github] .hljs-deletion {
1052
+ .dragon-editor .de-code-block[data-theme=github-light] .hljs-deletion {
1053
1053
  /* prettylights-syntax-markup-deleted */
1054
1054
  color: #b31d28;
1055
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,4 +1,4 @@
1
- import type { HLJSApi } from "highlight.js";
1
+ import type { codeToHtml } from "shiki";
2
2
 
3
3
  type DEContentData = DEBlockData[];
4
4
 
@@ -16,9 +16,9 @@ type DEBlockMenutype = "text" | "heading1" | "heading2" | "heading3" | "ul" | "o
16
16
 
17
17
  type DEListStyle = "disc" | "square" | "decimal" | "lower-alpha" | "upper-alpha" | "lower-roman" | "upper-roman";
18
18
 
19
- type DECodeblockTheme = "github" | "github-dark-dimmed";
19
+ type DECodeblockTheme = "github-light" | "github-dark-dimmed";
20
20
 
21
- 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";
22
22
 
23
23
  type DEBlockElement = HTMLParagraphElement | HTMLHeadingElement | HTMLElement | HTMLDivElement;
24
24
 
@@ -64,7 +64,7 @@ interface DragonEditorStore {
64
64
  $anchorInput: HTMLInputElement | null;
65
65
  $currentBlock: HTMLDivElement | null;
66
66
  };
67
- hljs: HLJSApi;
67
+ codeToHtml: codeToHtml;
68
68
  codeBlockTheme: DECodeItem<DECodeblockTheme>[];
69
69
  listUlType: DECodeItem<DEListStyle>[];
70
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
@@ -205,23 +205,37 @@ export function _updateHeadingBlockList(store) {
205
205
  });
206
206
  }
207
207
  }
208
- export function _setCodeBlockTheme(theme, store) {
208
+ export async function _setCodeBlockTheme(theme, store) {
209
209
  if (store.value.controlStatus.$currentBlock !== null) {
210
- store.value.controlStatus.codeBlockTheme = theme;
211
- 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
+ }
212
222
  }
213
223
  }
214
- export function _setCodeBlockLanguage(language, store) {
224
+ export async function _setCodeBlockLanguage(language, store) {
215
225
  if (store.value.controlStatus.$currentBlock !== null) {
216
226
  const $target = store.value.controlStatus.$currentBlock.querySelector(".de-language");
217
227
  const $code = store.value.controlStatus.$currentBlock.querySelector(".de-code-content");
218
228
  if ($target !== null && $code !== null) {
219
229
  const targetValue = CODEBLOCKLANG.find((item) => item.code === language);
220
230
  if (targetValue !== void 0) {
221
- const convert = store.value.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;
222
234
  $target.textContent = targetValue.text;
223
- $code.innerHTML = convert.value;
235
+ $code.innerHTML = $div.querySelector("code").innerHTML;
224
236
  store.value.controlStatus.codeBlockLang = targetValue.code;
237
+ _updateCursorData(store);
238
+ _updateModelData(store);
225
239
  }
226
240
  }
227
241
  }
@@ -230,5 +244,7 @@ export function _setListBlockStyle(style, store) {
230
244
  if (store.value.controlStatus.$currentBlock !== null) {
231
245
  store.value.controlStatus.listBlockStyle = style;
232
246
  store.value.controlStatus.$currentBlock.dataset["style"] = style;
247
+ _updateCursorData(store);
248
+ _updateModelData(store);
233
249
  }
234
250
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dragon-editor",
3
- "version": "3.5.9",
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",