dragon-editor 3.8.7 → 4.0.1

package/dist/runtime/components/DragonEditor.vue.d.ts

@@ -1,33 +1,38 @@
-import type { DEBlockData, DEContentData, DEDecoration, DETextalign } from "../type.d.mts.js";
-interface DEOption {
+import { _addBlock, _addImageBlock, _checkDataIsEmpty } from "../utils/data/index.js";
+import { _editorMountedEvent } from "../utils/event/index.js";
+import { _setAlign } from "../utils/node/index.js";
+import type { DEContentData } from "../type.d.mts.js";
+interface DragonEditorOption {
     modelValue: DEContentData;
     useMenuBar?: boolean;
-    imageHostURL?: string;
-    screenChangePoint?: number;
+    mediaHostURL?: string;
+    isMobile?: boolean;
+    theme?: "dark" | "white";
+    codeBlockSpaces?: number;
+    acceptImageFormat?: string;
+    anchorTagTarget?: string;
 }
-declare function addBlock(data: DEBlockData): void;
-declare function setDecoration(style: DEDecoration): void;
-declare function setAlign(align: DETextalign): void;
-declare function changeEditorData(data: DEContentData): void;
-declare function updateLayout(): void;
-declare function checkDataEmpty(data?: DEContentData): boolean;
-declare const __VLS_export: import("vue").DefineComponent<DEOption, {
-    addBlock: typeof addBlock;
-    setDecoration: typeof setDecoration;
-    setAlign: typeof setAlign;
-    changeEditorData: typeof changeEditorData;
-    updateLayout: typeof updateLayout;
-    checkDataEmpty: typeof checkDataEmpty;
+declare const __VLS_export: import("vue").DefineComponent<DragonEditorOption, {
+    addBlock: typeof _addBlock;
+    addImageBlock: typeof _addImageBlock;
+    updateLayout: typeof _editorMountedEvent;
+    checkDataIsEmpty: typeof _checkDataIsEmpty;
+    setDecoration: (type: "bold" | "italic" | "underline" | "strikethrough" | "code") => void;
+    setAlign: typeof _setAlign;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (data: DEContentData) => any;
-    uploadImageEvent: (file: File) => any;
-}, string, import("vue").PublicProps, Readonly<DEOption> & Readonly<{
+    uploadImageEvent: (files: File[]) => any;
+}, string, import("vue").PublicProps, Readonly<DragonEditorOption> & Readonly<{
     "onUpdate:modelValue"?: ((data: DEContentData) => any) | undefined;
-    onUploadImageEvent?: ((file: File) => any) | undefined;
+    onUploadImageEvent?: ((files: File[]) => any) | undefined;
 }>, {
-    imageHostURL: string;
+    mediaHostURL: string;
+    isMobile: boolean;
+    codeBlockSpaces: number;
+    acceptImageFormat: string;
+    anchorTagTarget: string;
+    theme: "dark" | "white";
     useMenuBar: boolean;
-    screenChangePoint: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/DragonEditorViewer.d.vue.ts

@@ -1,9 +1,16 @@
-type __VLS_Props = {
+import type { DEContentData } from "../type.d.mts.js";
+interface DragonEditorViewerOption {
     content: DEContentData;
-    imageHostURL?: string;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    imageHostURL: string;
+    mediaHostURL?: string;
+    isMobile?: boolean;
+    theme?: "dark" | "white";
+    codeBlockSpaces?: number;
+}
+declare const __VLS_export: import("vue").DefineComponent<DragonEditorViewerOption, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DragonEditorViewerOption> & Readonly<{}>, {
+    mediaHostURL: string;
+    isMobile: boolean;
+    codeBlockSpaces: number;
+    theme: "dark" | "white";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/DragonEditorViewer.vue

@@ -1,34 +1,100 @@
 <template>
-    <component :is="structure()"></component>
+    <div
+        class="dragon-editor-viewer"
+        :data-theme="props.theme"
+    >
+        <component :is="_getBody(props.content)"
+    /></div>
 </template>
 
 <script setup>
-import { h } from "vue";
-import { _createBlockList } from "../utils/layout";
+import { _getBody } from "../utils/layout";
+import { useEditorStore } from "../store/editor";
+const editorStore = useEditorStore();
 const props = defineProps({
   content: { type: null, required: true },
-  imageHostURL: { type: String, required: false, default: "" }
+  mediaHostURL: { type: String, required: false, default: "" },
+  isMobile: { type: Boolean, required: false, default: false },
+  theme: { type: String, required: false, default: "white" },
+  codeBlockSpaces: { type: Number, required: false, default: 4 }
 });
-function structure() {
-  return h(
-    "div",
-    {
-      class: ["dragon-editor-viewer"]
-    },
-    _createBlockList({
-      blockList: props.content,
-      isEditable: false,
-      imageHostURL: props.imageHostURL
-    })
-  );
-}
+editorStore.option.isMobile = props.isMobile;
+editorStore.option.mediaHostURL = props.mediaHostURL;
+editorStore.option.codeBlockSpaces = props.codeBlockSpaces;
 </script>
 
 <style>
 @charset "UTF-8";
 .dragon-editor,
 .dragon-editor-viewer {
-  --radius-default: 4px;
+  --editor-radius-default: 4px;
+}
+.dragon-editor[data-theme=dark],
+.dragon-editor-viewer[data-theme=dark] {
+  --editor-text: #dfdfe1;
+  --editor-text-disabled: #768390;
+  --editor-background: #09090b;
+  --editor-border: #555;
+  --editor-divider: #333;
+  --editor-decoration-code-color:#fff;
+  --editor-decoration-code-bg:#555;
+  --editor-code-color: #adbac7;
+  --editor-code-bg: #22272e;
+  --editor-code-file-bg: #494e54;
+  --editor-code-placeholder: #96a0aa;
+  --editor-code-number: #555;
+  --editor-code-number-bg: #e5e5e5;
+  --editor-code-keyword: #f47067;
+  --editor-code-entity: #dcbdfb;
+  --editor-code-constant: #6cb6ff;
+  --editor-code-string: #96d0ff;
+  --editor-code-variable: #f69d50;
+  --editor-code-comment: #768390;
+  --editor-code-entity-tag: #8ddb8c;
+  --editor-code-storage-modifier-import: #adbac7;
+  --editor-code-markup-heading: #316dca;
+  --editor-code-markup-list: #eac55f;
+  --editor-code-markup-italic: #adbac7;
+  --editor-code-markup-bold: #adbac7;
+  --editor-code-markup-inserted: #b4f1b4;
+  --editor-code-markup-inserted-bg: #1b4721;
+  --editor-code-markup-deleted: #ffd8d3;
+  --editor-code-markup-deleted-bg: #78191b;
+}
+.dragon-editor[data-theme=white],
+.dragon-editor-viewer[data-theme=white] {
+  --editor-text: #333;
+  --editor-text-disabled: #ccc;
+  --editor-background: #f9f9f9;
+  --editor-border: #ccc;
+  --editor-divider: #e5e5e5;
+  --editor-decoration-code-color:#ff0000;
+  --editor-decoration-code-bg:#f1f1f1;
+  --editor-code-color: #24292e;
+  --editor-code-bg: #f1f1f1;
+  --editor-code-file-bg: #ccc;
+  --editor-code-placeholder: #8b8d8f;
+  --editor-code-number: #e5e5e5;
+  --editor-code-number-bg: #8c8c8c;
+  --editor-code-keyword: #d73a49;
+  --editor-code-entity: #6f42c1;
+  --editor-code-constant: #005cc5;
+  --editor-code-string: #032f62;
+  --editor-code-variable: #e36209;
+  --editor-code-comment: #6a737d;
+  --editor-code-entity-tag: #22863a;
+  --editor-code-storage-modifier-import: #24292e;
+  --editor-code-markup-heading: #005cc5;
+  --editor-code-markup-list: #735c0f;
+  --editor-code-markup-italic: #24292e;
+  --editor-code-markup-bold: #24292e;
+  --editor-code-markup-inserted: #22863a;
+  --editor-code-markup-inserted-bg: #f0fff4;
+  --editor-code-markup-deleted: #b31d28;
+  --editor-code-markup-deleted-bg: #ffeef0;
+}
+.dragon-editor,
+.dragon-editor-viewer {
   /**
   * Reset style start
   */
@@ -161,26 +227,6 @@ function structure() {
 .dragon-editor-viewer .de-block[data-depth="5"] {
   padding-left: 150px;
 }
-.dragon-editor .de-block.de-list-block[data-depth="1"],
-.dragon-editor-viewer .de-block.de-list-block[data-depth="1"] {
-  padding-left: 54px;
-}
-.dragon-editor .de-block.de-list-block[data-depth="2"],
-.dragon-editor-viewer .de-block.de-list-block[data-depth="2"] {
-  padding-left: 84px;
-}
-.dragon-editor .de-block.de-list-block[data-depth="3"],
-.dragon-editor-viewer .de-block.de-list-block[data-depth="3"] {
-  padding-left: 114px;
-}
-.dragon-editor .de-block.de-list-block[data-depth="4"],
-.dragon-editor-viewer .de-block.de-list-block[data-depth="4"] {
-  padding-left: 144px;
-}
-.dragon-editor .de-block.de-list-block[data-depth="5"],
-.dragon-editor-viewer .de-block.de-list-block[data-depth="5"] {
-  padding-left: 174px;
-}
 
 /**
 * 노드 스타일
@@ -221,32 +267,52 @@ function structure() {
   row-gap: 4px;
   padding-left: 24px;
 }
-.dragon-editor-viewer .de-list-block[data-style=disc] {
+.dragon-editor-viewer .de-list-block[data-type=unordered] {
   list-style: disc;
 }
-.dragon-editor-viewer .de-list-block[data-style=square] {
+.dragon-editor-viewer .de-list-block[data-type=unordered] .de-list-sub {
+  list-style: circle;
+}
+.dragon-editor-viewer .de-list-block[data-type=unordered] .de-list-sub .de-list-sub {
   list-style: square;
 }
-.dragon-editor-viewer .de-list-block[data-style=decimal] {
+.dragon-editor-viewer .de-list-block[data-type=unordered] .de-list-sub .de-list-sub .de-list-sub {
+  list-style: disclosure-closed;
+}
+.dragon-editor-viewer .de-list-block[data-type=unordered] .de-list-sub .de-list-sub .de-list-sub .de-list-sub {
+  list-style: "- ";
+}
+.dragon-editor-viewer .de-list-block[data-type=unordered] .de-list-sub .de-list-sub .de-list-sub .de-list-sub .de-list-sub {
+  list-style: "* ";
+}
+.dragon-editor-viewer .de-list-block[data-type=ordered] {
   list-style: decimal;
 }
-.dragon-editor-viewer .de-list-block[data-style=lower-alpha] {
+.dragon-editor-viewer .de-list-block[data-type=ordered] .de-list-sub {
   list-style: lower-alpha;
 }
-.dragon-editor-viewer .de-list-block[data-style=upper-alpha] {
-  list-style: upper-alpha;
-}
-.dragon-editor-viewer .de-list-block[data-style=lower-roman] {
+.dragon-editor-viewer .de-list-block[data-type=ordered] .de-list-sub .de-list-sub {
   list-style: lower-roman;
 }
-.dragon-editor-viewer .de-list-block[data-style=upper-roman] {
+.dragon-editor-viewer .de-list-block[data-type=ordered] .de-list-sub .de-list-sub .de-list-sub {
+  list-style: upper-alpha;
+}
+.dragon-editor-viewer .de-list-block[data-type=ordered] .de-list-sub .de-list-sub .de-list-sub .de-list-sub {
   list-style: upper-roman;
 }
+.dragon-editor-viewer .de-list-block[data-type=ordered] .de-list-sub .de-list-sub .de-list-sub .de-list-sub .de-list-sub {
+  list-style: decimal;
+}
 .dragon-editor-viewer .de-list-block .de-item {
+  list-style: inherit;
+}
+.dragon-editor-viewer .de-list-block .de-item-text {
   min-height: 1.6em;
   word-break: break-all;
   outline: 0;
-  list-style: inherit;
+}
+.dragon-editor-viewer .de-list-block .de-list-sub {
+  padding-left: 30px;
 }
 .dragon-editor-viewer .de-image-block {
   display: flex;
@@ -501,7 +567,7 @@ function structure() {
 .dragon-editor-viewer .de-image-block .de-image-area .de-img {
   width: 100%;
   height: auto;
-  border-radius: var(--radius-default);
+  border-radius: var(--editor-radius-default);
 }
 .dragon-editor-viewer .de-image-block .de-image-area .de-btn {
   position: absolute;
@@ -510,7 +576,7 @@ function structure() {
   height: 15%;
   background: #f1f1f1;
   border: 1px solid #ccc;
-  border-radius: var(--radius-default);
+  border-radius: var(--editor-radius-default);
   transform: translate(-50%, -50%);
   cursor: col-resize;
   user-select: none;
@@ -535,13 +601,16 @@ function structure() {
   flex-wrap: wrap;
   margin: 2px 0;
   padding: 0;
-  border-radius: var(--radius-default);
-  overflow: hidden;
+  color: var(--editor-code-color);
+  background: var(--editor-code-bg);
+  border-radius: var(--editor-radius-default);
 }
 .dragon-editor-viewer .de-code-block .de-filename {
   flex: 1;
   max-width: calc(100% - 120px);
   padding: 5px 10px;
+  color: var(--editor-code-color);
+  background: var(--editor-code-file-bg);
   box-sizing: border-box;
   outline: 0;
 }
@@ -549,219 +618,123 @@ function structure() {
   width: 120px;
   text-align: right;
   padding: 5px 10px;
+  color: var(--editor-code-color);
+  background: var(--editor-code-file-bg);
   box-sizing: border-box;
 }
-.dragon-editor-viewer .de-code-block .de-pre {
+.dragon-editor-viewer .de-code-block .de-pre-wrap {
+  display: flex;
   width: 100%;
+  overflow-x: auto;
+}
+.dragon-editor-viewer .de-code-block .de-pre-wrap .de-number {
+  padding: 10px 4px;
+  background: var(--editor-code-number);
+  color: var(--editor-code-number-bg);
+}
+.dragon-editor-viewer .de-code-block .de-pre-wrap .de-number .de-number-item {
+  min-height: 1.6em;
+  font-family: Inconsolata, monospace, sans-serif;
+  text-align: right;
+}
+.dragon-editor-viewer .de-code-block .de-pre {
+  flex: 1;
   padding: 10px;
   box-sizing: border-box;
-  white-space: pre-wrap;
 }
 .dragon-editor-viewer .de-code-block .de-pre .de-code-content {
   display: block;
   min-height: 1.6em;
-  width: 100%;
+  min-width: 100%;
   font-family: Inconsolata, monospace, sans-serif;
-  word-break: break-word;
   outline: 0;
 }
-.dragon-editor-viewer .de-code-block[data-theme=github-light] {
-  color: #24292e;
-  background: #f1f1f1;
-}
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .de-filename {
-  color: #24292e;
-  background: #ccc;
-}
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .de-language {
-  color: #24292e;
-  background: #ccc;
-}
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-doctag,
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-keyword,
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-meta .hljs-keyword,
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-template-tag,
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-template-variable,
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-type,
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-variable.language_ {
+.dragon-editor-viewer .de-code-block .hljs-doctag,
+.dragon-editor-viewer .de-code-block .hljs-keyword,
+.dragon-editor-viewer .de-code-block .hljs-meta .hljs-keyword,
+.dragon-editor-viewer .de-code-block .hljs-template-tag,
+.dragon-editor-viewer .de-code-block .hljs-template-variable,
+.dragon-editor-viewer .de-code-block .hljs-type,
+.dragon-editor-viewer .de-code-block .hljs-variable.language_ {
   /* prettylights-syntax-keyword */
-  color: #d73a49;
+  color: var(--editor-code-keyword);
 }
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-title,
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-title.class_,
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-title.class_.inherited__,
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-title.function_ {
+.dragon-editor-viewer .de-code-block .hljs-title,
+.dragon-editor-viewer .de-code-block .hljs-title.class_,
+.dragon-editor-viewer .de-code-block .hljs-title.class_.inherited__,
+.dragon-editor-viewer .de-code-block .hljs-title.function_ {
   /* prettylights-syntax-entity */
-  color: #6f42c1;
-}
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-attr,
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-attribute,
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-literal,
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-meta,
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-number,
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-operator,
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-variable,
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-selector-attr,
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-selector-class,
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-selector-id {
+  color: var(--editor-code-entity);
+}
+.dragon-editor-viewer .de-code-block .hljs-attr,
+.dragon-editor-viewer .de-code-block .hljs-attribute,
+.dragon-editor-viewer .de-code-block .hljs-literal,
+.dragon-editor-viewer .de-code-block .hljs-meta,
+.dragon-editor-viewer .de-code-block .hljs-number,
+.dragon-editor-viewer .de-code-block .hljs-operator,
+.dragon-editor-viewer .de-code-block .hljs-variable,
+.dragon-editor-viewer .de-code-block .hljs-selector-attr,
+.dragon-editor-viewer .de-code-block .hljs-selector-class,
+.dragon-editor-viewer .de-code-block .hljs-selector-id {
   /* prettylights-syntax-constant */
-  color: #005cc5;
+  color: var(--editor-code-constant);
 }
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-regexp,
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-string,
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-meta .hljs-string {
+.dragon-editor-viewer .de-code-block .hljs-regexp,
+.dragon-editor-viewer .de-code-block .hljs-string,
+.dragon-editor-viewer .de-code-block .hljs-meta .hljs-string {
   /* prettylights-syntax-string */
-  color: #032f62;
+  color: var(--editor-code-string);
 }
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-built_in,
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-symbol {
+.dragon-editor-viewer .de-code-block .hljs-built_in,
+.dragon-editor-viewer .de-code-block .hljs-symbol {
   /* prettylights-syntax-variable */
-  color: #e36209;
+  color: var(--editor-code-variable);
 }
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-comment,
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-code,
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-formula {
+.dragon-editor-viewer .de-code-block .hljs-comment,
+.dragon-editor-viewer .de-code-block .hljs-code,
+.dragon-editor-viewer .de-code-block .hljs-formula {
   /* prettylights-syntax-comment */
-  color: #6a737d;
+  color: var(--editor-code-comment);
 }
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-name,
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-quote,
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-selector-tag,
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-selector-pseudo {
+.dragon-editor-viewer .de-code-block .hljs-name,
+.dragon-editor-viewer .de-code-block .hljs-quote,
+.dragon-editor-viewer .de-code-block .hljs-selector-tag,
+.dragon-editor-viewer .de-code-block .hljs-selector-pseudo {
   /* prettylights-syntax-entity-tag */
-  color: #22863a;
+  color: var(--editor-code-entity-tag);
 }
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-subst {
+.dragon-editor-viewer .de-code-block .hljs-subst {
   /* prettylights-syntax-storage-modifier-import */
-  color: #24292e;
+  color: var(--editor-code-storage-modifier-import);
 }
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-section {
+.dragon-editor-viewer .de-code-block .hljs-section {
   /* prettylights-syntax-markup-heading */
-  color: #005cc5;
+  color: var(--editor-code-markup-heading);
   font-weight: bold;
 }
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-bullet {
+.dragon-editor-viewer .de-code-block .hljs-bullet {
   /* prettylights-syntax-markup-list */
-  color: #735c0f;
+  color: var(--editor-code-markup-list);
 }
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-emphasis {
+.dragon-editor-viewer .de-code-block .hljs-emphasis {
   /* prettylights-syntax-markup-italic */
-  color: #24292e;
+  color: var(--editor-code-markup-italic);
   font-style: italic;
 }
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-strong {
+.dragon-editor-viewer .de-code-block .hljs-strong {
   /* prettylights-syntax-markup-bold */
-  color: #24292e;
+  color: var(--editor-code-markup-bold);
   font-weight: bold;
 }
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-addition {
+.dragon-editor-viewer .de-code-block .hljs-addition {
   /* prettylights-syntax-markup-inserted */
-  color: #22863a;
-  background-color: #f0fff4;
+  color: var(--editor-code-markup-inserted);
+  background-color: var(--editor-code-markup-inserted-bg);
 }
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-deletion {
+.dragon-editor-viewer .de-code-block .hljs-deletion {
   /* prettylights-syntax-markup-deleted */
-  color: #b31d28;
-  background-color: #ffeef0;
-}
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] {
-  color: #adbac7;
-  background: #22272e;
-}
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .de-filename {
-  color: #adbac7;
-  background: #494e54;
-}
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .de-language {
-  color: #adbac7;
-  background: #494e54;
-}
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-doctag,
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-keyword,
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-meta .hljs-keyword,
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-template-tag,
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-template-variable,
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-type,
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-variable.language_ {
-  /* prettylights-syntax-keyword */
-  color: #f47067;
-}
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-title,
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-title.class_,
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-title.class_.inherited__,
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-title.function_ {
-  /* prettylights-syntax-entity */
-  color: #dcbdfb;
-}
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-attr,
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-attribute,
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-literal,
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-meta,
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-number,
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-operator,
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-variable,
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-selector-attr,
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-selector-class,
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-selector-id {
-  /* prettylights-syntax-constant */
-  color: #6cb6ff;
-}
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-regexp,
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-string,
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-meta .hljs-string {
-  /* prettylights-syntax-string */
-  color: #96d0ff;
-}
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-built_in,
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-symbol {
-  /* prettylights-syntax-variable */
-  color: #f69d50;
-}
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-comment,
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-code,
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-formula {
-  /* prettylights-syntax-comment */
-  color: #768390;
-}
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-name,
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-quote,
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-selector-tag,
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-selector-pseudo {
-  /* prettylights-syntax-entity-tag */
-  color: #8ddb8c;
-}
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-subst {
-  /* prettylights-syntax-storage-modifier-import */
-  color: #adbac7;
-}
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-section {
-  /* prettylights-syntax-markup-heading */
-  color: #316dca;
-  font-weight: bold;
-}
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-bullet {
-  /* prettylights-syntax-markup-list */
-  color: #eac55f;
-}
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-emphasis {
-  /* prettylights-syntax-markup-italic */
-  color: #adbac7;
-  font-style: italic;
-}
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-strong {
-  /* prettylights-syntax-markup-bold */
-  color: #adbac7;
-  font-weight: bold;
-}
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-addition {
-  /* prettylights-syntax-markup-inserted */
-  color: #b4f1b4;
-  background-color: #1b4721;
-}
-.dragon-editor-viewer .de-code-block[data-theme=github-dark-dimmed] .hljs-deletion {
-  /* prettylights-syntax-markup-deleted */
-  color: #ffd8d3;
-  background-color: #78191b;
+  color: var(--editor-code-markup-deleted);
+  background-color: var(--editor-code-markup-deleted-bg);
 }
 .dragon-editor-viewer .de-divider-block {
   display: flex;
@@ -774,7 +747,7 @@ function structure() {
   width: 100%;
   height: 2px;
   padding: 0;
-  background: #e5e5e5;
+  background: var(--editor-divider);
   border-radius: 2px;
 }
 .dragon-editor-viewer .de-bold {
@@ -798,8 +771,8 @@ function structure() {
 .dragon-editor-viewer .de-code {
   display: inline-block;
   padding: 2px 4px;
-  background: #f1f1f1;
-  color: #ff0000;
+  background: var(--editor-decoration-code-bg);
+  color: var(--editor-decoration-code-color);
   border-radius: 5px;
 }
 .dragon-editor-viewer .de-align-left {

package/dist/runtime/components/DragonEditorViewer.vue.d.ts

@@ -1,9 +1,16 @@
-type __VLS_Props = {
+import type { DEContentData } from "../type.d.mts.js";
+interface DragonEditorViewerOption {
     content: DEContentData;
-    imageHostURL?: string;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    imageHostURL: string;
+    mediaHostURL?: string;
+    isMobile?: boolean;
+    theme?: "dark" | "white";
+    codeBlockSpaces?: number;
+}
+declare const __VLS_export: import("vue").DefineComponent<DragonEditorViewerOption, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DragonEditorViewerOption> & Readonly<{}>, {
+    mediaHostURL: string;
+    isMobile: boolean;
+    codeBlockSpaces: number;
+    theme: "dark" | "white";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/MenuBar.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;