dragon-editor 3.8.7 → 4.0.1

package/dist/runtime/components/DragonEditor.vue

@@ -1,211 +1,94 @@
 <template>
-    <component :is="mainStrucutre"></component>
+    <div
+        class="dragon-editor"
+        :class="{ '--has-menu': props.useMenuBar === true, '--mobile': editorStore.option.isMobile === true, '--hidden-parent': editorStore.status.isParentOverflowHidden === true }"
+        :data-theme="props.theme"
+        ref="$editor"
+    >
+        <MenuBar />
+        <component
+            :is="_getBody(props.modelValue, true)"
+            ref="$body"
+        />
+    </div>
 </template>
 
 <script setup>
-import { ref, h, onMounted, onBeforeUnmount, watch } from "vue";
-import { _getBodyVNodeStructure, _getMenuBarVNodeStructure, _getControlbarVNodeStructure, _updateBodyStructure } from "../utils/layout";
-import { _eidtorMountEvent, _eidtorUnmountEvent, _editorMousemoveEvent, _editorMouseupEvent, _editorMouseleaveEvent, _editorTouchmoveEvent, _editorTouchendEvent, _checkOthersideClick, _parentWrapScollEvent, _editorContextMenuEvent, _windowResizeEvent, _checkDataEmpty } from "../utils/event";
-import { _addBlock } from "../utils/node";
-import { _setDecoration, _setTextAlign } from "../utils/style";
-import { codeToHtml } from "shiki";
+import MenuBar from "./MenuBar.vue";
+import { _getBody } from "../utils/layout";
+import { useEditorStore } from "../store/editor";
+import { ref, onMounted, watch, onBeforeUnmount } from "vue";
+import { onClickOutside } from "@vueuse/core";
+import { _createTextBlockData, _arrangementContentData, _addBlock, _addImageBlock, _checkDataIsEmpty } from "../utils/data";
+import { _editorMountedEvent, _eidtorUnmountEvent } from "../utils/event";
+import { _setDecoration, _setAlign } from "../utils/node";
+const editorStore = useEditorStore();
 const props = defineProps({
   modelValue: { type: null, required: true },
   useMenuBar: { type: Boolean, required: false, default: true },
-  imageHostURL: { type: String, required: false, default: "" },
-  screenChangePoint: { type: Number, required: false, default: 1200 }
+  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 },
+  acceptImageFormat: { type: String, required: false, default: ".jpg,.jpeg,.png,.webp,.gif" },
+  anchorTagTarget: { type: String, required: false, default: "_blank" }
 });
 const emit = defineEmits(["update:modelValue", "uploadImageEvent"]);
-const editorStore = ref({
-  cursorData: null,
-  message: {
-    linkTextNoStyle: "Link text can't set any style."
-  },
-  controlBar: {
-    active: false,
-    x: 0,
-    y: 0,
-    $element: null
-  },
-  useMenuBar: props.useMenuBar,
-  imageHostURL: props.imageHostURL,
-  firstData: props.modelValue,
-  screenChangePoint: props.screenChangePoint,
-  menuBarTop: 0,
-  activeStatus: {
-    addBlockMenu: false,
-    anchorInputArea: false,
-    imageResizeEvent: false
-  },
-  eventStatus: {
-    imageResizeEventStartX: 0,
-    imageResizeEventType: "left",
-    imageResizeEventEndX: 0,
-    imageResizeCurrentWidth: 0
-  },
-  controlStatus: {
-    isMobile: false,
-    hasTransformParent: false,
-    hasHiddenStyleParent: false,
-    currentBlockType: "text",
-    codeBlockTheme: "github-light",
-    codeBlockLang: "text",
-    listBlockStyle: "disc",
-    anchorTabType: "url",
-    anchorHeadingList: [],
-    anchorHref: "",
-    anchorValidation: false,
-    previousCorsorData: null,
-    $anchorInput: null,
-    $currentBlock: null,
-    $transformElement: null
-  },
-  codeBlockTheme: [
-    {
-      text: "GitHub Ligth",
-      code: "github-light"
-    },
-    {
-      text: "GitHub Dark Dimmed",
-      code: "github-dark-dimmed"
-    }
-  ],
-  listUlType: [
-    {
-      text: "Disc",
-      code: "disc"
-    },
-    {
-      text: "Square",
-      code: "square"
-    }
-  ],
-  listOlType: [
-    {
-      text: "Decimal",
-      code: "decimal"
-    },
-    {
-      text: "Lower-Alpha",
-      code: "lower-alpha"
-    },
-    {
-      text: "Upper-Alpha",
-      code: "upper-alpha"
-    },
-    {
-      text: "Lower-Roman",
-      code: "lower-roman"
-    },
-    {
-      text: "Upper-Roman",
-      code: "upper-roman"
-    }
-  ],
-  $editor: null,
-  $body: null,
-  $controlBar: null,
-  $parentWrap: null,
-  codeToHtml,
-  emit,
-  windowClickEvent: function(event) {
-    _checkOthersideClick(event, editorStore);
-  },
-  windowResizeEvent: function(event) {
-    _windowResizeEvent(event, editorStore);
-  },
-  windowMouseUpEvent: function(event) {
-    _editorMouseupEvent(event, editorStore);
-  },
-  parentWrapScollEvent: function(event) {
-    _parentWrapScollEvent(event, editorStore);
-  }
-});
-function mainStrucutre() {
-  const childList = [];
-  if (editorStore.value.useMenuBar === true) {
-    childList.push(_getMenuBarVNodeStructure(editorStore));
-  }
-  childList.push(_getBodyVNodeStructure(editorStore));
-  if (editorStore.value.controlBar.active === true) {
-    childList.push(_getControlbarVNodeStructure(editorStore));
-  }
-  return h(
-    "div",
-    {
-      class: ["dragon-editor", "js-dragon-editor", { "--has-menu": editorStore.value.useMenuBar === true }, { "--mobile": editorStore.value.controlStatus.isMobile === true }, { "--hidden-parent": editorStore.value.controlStatus.hasHiddenStyleParent === true }],
-      onMousemove: (event) => _editorMousemoveEvent(event, editorStore),
-      onMouseup: (event) => _editorMouseupEvent(event, editorStore),
-      onMouseleave: (event) => _editorMouseleaveEvent(event, editorStore),
-      onTouchmove: (event) => _editorTouchmoveEvent(event, editorStore),
-      onTouchend: (event) => _editorTouchendEvent(event, editorStore),
-      onContextmenu: (event) => _editorContextMenuEvent(event, editorStore)
-    },
-    childList
-  );
-}
-function addBlock(data) {
-  let type = "text";
-  switch (data.type) {
-    case "heading":
-      if (data.level === 1) {
-        type = "heading1";
-      } else if (data.level === 2) {
-        type = "heading2";
-      } else {
-        type = "heading3";
-      }
-      break;
-    case "list":
-      if (data.element === "ol") {
-        type = "ol";
-      } else {
-        type = "ul";
-      }
-      break;
+const $body = ref(null);
+const $editor = ref(null);
+editorStore.option.isMobile = props.isMobile;
+editorStore.option.mediaHostURL = props.mediaHostURL;
+editorStore.option.codeBlockSpaces = props.codeBlockSpaces;
+editorStore.option.acceptImageFormat = props.acceptImageFormat;
+editorStore.option.anchorTagTarget = props.anchorTagTarget;
+function updateEditorData(data) {
+  emit("update:modelValue", _arrangementContentData(data));
+}
+function ifEmptyUpdateData() {
+  if (props.modelValue.length === 0) {
+    emit("update:modelValue", [_createTextBlockData()]);
   }
-  _addBlock(type, editorStore, data);
 }
-function setDecoration(style) {
-  _setDecoration(`de-${style}`, editorStore);
+function uploadImage(files) {
+  emit("uploadImageEvent", files);
 }
-function setAlign(align) {
-  _setTextAlign(align, editorStore);
-}
-function changeEditorData(data) {
-  if (editorStore.value.$body !== null) {
-    editorStore.value.$body.innerHTML = "";
-    _updateBodyStructure(data, editorStore);
+onClickOutside($editor, () => {
+  editorStore.selectedBlockIndex = -1;
+  editorStore.selectedBlockId = "";
+});
+defineExpose({
+  addBlock: _addBlock,
+  addImageBlock: _addImageBlock,
+  updateLayout: _editorMountedEvent,
+  checkDataIsEmpty: _checkDataIsEmpty,
+  setDecoration: (type) => {
+    _setDecoration(`de-${type}`);
+  },
+  setAlign: _setAlign
+});
+watch(
+  () => props.modelValue,
+  () => {
+    editorStore.data = props.modelValue;
+    ifEmptyUpdateData();
   }
-}
-function updateLayout() {
-  _eidtorUnmountEvent(editorStore);
-  setTimeout(() => {
-    _eidtorMountEvent(editorStore);
-  }, 500);
-}
-function checkDataEmpty(data) {
-  let suitable = false;
-  if (data !== void 0) {
-    suitable = _checkDataEmpty(data);
-  } else {
-    suitable = _checkDataEmpty(props.modelValue);
+);
+watch(
+  () => props.isMobile,
+  () => {
+    editorStore.option.isMobile = props.isMobile;
   }
-  return suitable;
-}
+);
 onMounted(() => {
-  _eidtorMountEvent(editorStore);
+  ifEmptyUpdateData();
+  editorStore.element.body = $body.value;
+  editorStore.element.editor = $editor.value;
+  editorStore.fn.updateEditorData = updateEditorData;
+  editorStore.fn.uploadImage = uploadImage;
+  _editorMountedEvent();
 });
 onBeforeUnmount(() => {
-  _eidtorUnmountEvent(editorStore);
-});
-defineExpose({
-  addBlock,
-  setDecoration,
-  setAlign,
-  changeEditorData,
-  updateLayout,
-  checkDataEmpty
+  _eidtorUnmountEvent();
 });
 </script>
 
@@ -213,7 +96,74 @@ defineExpose({
 @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
   */
@@ -346,44 +296,24 @@ defineExpose({
 .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;
-}
 
 /**
 * 노드 스타일
 */
 .dragon-editor {
   position: relative;
-  border: 1px solid #ccc;
-  border-radius: var(--radius-default);
+  background: var(--editor-background);
+  color: var(--editor-text);
+  border: 1px solid var(--editor-border);
+  border-radius: var(--editor-radius-default);
 }
 .dragon-editor.--has-menu {
   padding-top: 35px;
 }
-.dragon-editor.--mobile .de-menu-bar .de-menu-wrap {
-  overflow-x: auto;
-}
 .dragon-editor.--mobile .de-menu-bar .de-link-exit-area {
-  left: auto;
+  left: 50%;
   right: 0;
+  transform: translateX(-50%);
 }
 .dragon-editor.--hidden-parent {
   height: 100%;
@@ -404,9 +334,9 @@ defineExpose({
   left: 0;
   right: 0;
   height: 34px;
-  background: #fff;
-  border-bottom: 1px solid #ccc;
-  border-radius: var(--radius-default) var(--radius-default) 0 0;
+  background: var(--editor-background);
+  border-bottom: 1px solid var(--editor-border);
+  border-radius: var(--editor-radius-default) var(--editor-radius-default) 0 0;
   z-index: 10;
 }
 .dragon-editor .de-menu-bar .de-menu-wrap {
@@ -416,7 +346,7 @@ defineExpose({
 .dragon-editor .de-menu-bar .de-col {
   display: flex;
   position: relative;
-  border-right: 1px solid #ccc;
+  border-right: 1px solid var(--editor-border);
 }
 .dragon-editor .de-menu-bar .de-col:last-child {
   border-right: 0;
@@ -429,8 +359,8 @@ defineExpose({
   height: 34px;
   cursor: pointer;
 }
-.dragon-editor .de-menu-bar .de-menu.--disabled .de-path {
-  fill: #ccc;
+.dragon-editor .de-menu-bar .de-menu[disabled] .de-path {
+  fill: var(--editor-text-disabled);
 }
 .dragon-editor .de-menu-bar .de-menu .de-icon {
   width: 16px;
@@ -440,10 +370,7 @@ defineExpose({
   border-right: 0;
 }
 .dragon-editor .de-menu-bar .de-menu .de-path {
-  fill: #333;
-}
-.dragon-editor .de-menu-bar .de-menu .de-path.--red {
-  fill: #dd0000;
+  fill: var(--editor-text);
 }
 .dragon-editor .de-menu-bar .de-block-menu-area {
   display: none;
@@ -455,7 +382,7 @@ defineExpose({
   border-width: 0 1px 1px 0;
   border-style: solid;
   border-color: #ccc;
-  border-bottom-right-radius: var(--radius-default);
+  border-bottom-right-radius: var(--editor-radius-default);
   z-index: 1000;
 }
 .dragon-editor .de-menu-bar .de-block-menu-area.--active {
@@ -477,10 +404,10 @@ defineExpose({
   top: calc(100% + 1px);
   left: 205px;
   width: 200px;
-  background: #fff;
-  border: 1px solid #ccc;
+  background: var(--editor-background);
+  border: 1px solid var(--editor-border);
   border-top: 0;
-  border-radius: 0 0 var(--radius-default) var(--radius-default);
+  border-radius: 0 0 var(--editor-radius-default) var(--editor-radius-default);
   z-index: 1000;
 }
 .dragon-editor .de-menu-bar .de-link-exit-area.--active {
@@ -488,15 +415,15 @@ defineExpose({
 }
 .dragon-editor .de-menu-bar .de-link-exit-area .de-btn-area {
   display: flex;
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid var(--editor-border);
 }
 .dragon-editor .de-menu-bar .de-link-exit-area .de-btn-area .de-btn {
   flex: 1;
   height: 24px;
-  color: #999;
+  color: var(--editor-text-disabled);
 }
 .dragon-editor .de-menu-bar .de-link-exit-area .de-btn-area .de-btn.--active {
-  color: #333;
+  color: var(--editor-text);
 }
 .dragon-editor .de-menu-bar .de-link-exit-area .de-link-text-area {
   display: flex;
@@ -508,10 +435,12 @@ defineExpose({
   min-width: 0;
   height: 20px;
   padding: 0 8px;
-  border: 1px solid #ccc;
+  background: var(--editor-background);
+  color: var(--editor-text);
+  border: 1px solid var(--editor-border);
   box-sizing: border-box;
 }
-.dragon-editor .de-menu-bar .de-link-exit-area .de-link-text-area .de-input.--red {
+.dragon-editor .de-menu-bar .de-link-exit-area .de-link-text-area .de-input.--error {
   border-color: red;
 }
 .dragon-editor .de-menu-bar .de-link-exit-area .de-link-text-area .de-btn {
@@ -529,37 +458,10 @@ defineExpose({
 .dragon-editor .de-menu-bar .de-link-exit-area .de-link-heading-area .de-btn {
   padding: 2px 4px;
   text-align: left;
-  border-radius: var(--radius-default);
+  border-radius: var(--editor-radius-default);
 }
 .dragon-editor .de-menu-bar .de-link-exit-area .de-link-heading-area .de-btn:hover {
-  background: #f1f1f1;
-}
-.dragon-editor .de-controlbar {
-  display: flex;
-  position: fixed;
-  height: 34px;
-  background: #fff;
-  border: 1px solid #ccc;
-  border-radius: var(--radius-default);
-  transform: translateX(-50%);
-  z-index: 20;
-}
-.dragon-editor .de-controlbar .de-col {
-  display: flex;
-  align-items: center;
-  column-gap: 6px;
-  padding: 0 10px;
-  border-right: 1px solid #ccc;
-}
-.dragon-editor .de-controlbar .de-col:last-child {
-  border-right: 0;
-}
-.dragon-editor .de-controlbar .de-col .de-selector {
-  height: 100%;
-  border: 0;
-}
-.dragon-editor .de-controlbar .de-col .de-name {
-  width: 70px;
+  background: var(--editor-decoration-code-bg);
 }
 .dragon-editor .de-block {
   width: 100%;
@@ -604,39 +506,59 @@ defineExpose({
   row-gap: 4px;
   padding-left: 24px;
 }
-.dragon-editor .de-list-block[data-style=disc] {
+.dragon-editor .de-list-block[data-type=unordered] {
   list-style: disc;
 }
-.dragon-editor .de-list-block[data-style=square] {
+.dragon-editor .de-list-block[data-type=unordered] .de-list-sub {
+  list-style: circle;
+}
+.dragon-editor .de-list-block[data-type=unordered] .de-list-sub .de-list-sub {
   list-style: square;
 }
-.dragon-editor .de-list-block[data-style=decimal] {
+.dragon-editor .de-list-block[data-type=unordered] .de-list-sub .de-list-sub .de-list-sub {
+  list-style: disclosure-closed;
+}
+.dragon-editor .de-list-block[data-type=unordered] .de-list-sub .de-list-sub .de-list-sub .de-list-sub {
+  list-style: "- ";
+}
+.dragon-editor .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 .de-list-block[data-type=ordered] {
   list-style: decimal;
 }
-.dragon-editor .de-list-block[data-style=lower-alpha] {
+.dragon-editor .de-list-block[data-type=ordered] .de-list-sub {
   list-style: lower-alpha;
 }
-.dragon-editor .de-list-block[data-style=upper-alpha] {
-  list-style: upper-alpha;
-}
-.dragon-editor .de-list-block[data-style=lower-roman] {
+.dragon-editor .de-list-block[data-type=ordered] .de-list-sub .de-list-sub {
   list-style: lower-roman;
 }
-.dragon-editor .de-list-block[data-style=upper-roman] {
+.dragon-editor .de-list-block[data-type=ordered] .de-list-sub .de-list-sub .de-list-sub {
+  list-style: upper-alpha;
+}
+.dragon-editor .de-list-block[data-type=ordered] .de-list-sub .de-list-sub .de-list-sub .de-list-sub {
   list-style: upper-roman;
 }
+.dragon-editor .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 .de-list-block .de-item {
+  list-style: inherit;
+}
+.dragon-editor .de-list-block .de-item-text {
   min-height: 1.6em;
   word-break: break-all;
   outline: 0;
-  list-style: inherit;
 }
-.dragon-editor .de-list-block .de-item:empty:hover::before, .dragon-editor .de-list-block .de-item:empty:focus::before {
+.dragon-editor .de-list-block .de-item-text:empty:hover::before, .dragon-editor .de-list-block .de-item-text:empty:focus::before {
   display: inline;
   content: "Type a list item";
   color: #ccc;
   cursor: text;
 }
+.dragon-editor .de-list-block .de-list-sub {
+  padding-left: 30px;
+}
 .dragon-editor .de-image-block {
   display: flex;
   align-items: center;
@@ -890,7 +812,7 @@ defineExpose({
 .dragon-editor .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 .de-image-block .de-image-area .de-btn {
   position: absolute;
@@ -899,7 +821,7 @@ defineExpose({
   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;
@@ -930,261 +852,176 @@ defineExpose({
   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 .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;
 }
 .dragon-editor .de-code-block .de-filename:empty:hover::before, .dragon-editor .de-code-block .de-filename:empty:focus::before {
   display: inline;
   content: "Type a Filename";
+  color: var(--editor-code-placeholder);
   cursor: text;
 }
 .dragon-editor .de-code-block .de-language {
   width: 120px;
   text-align: right;
   padding: 5px 10px;
+  color: var(--editor-code-color);
+  background: var(--editor-code-file-bg);
   box-sizing: border-box;
+  position: relative;
 }
-.dragon-editor .de-code-block .de-pre {
+.dragon-editor .de-code-block .de-language:empty:hover::before, .dragon-editor .de-code-block .de-language:empty:focus::before {
+  color: var(--editor-code-placeholder);
+}
+.dragon-editor .de-code-block .de-language .de-btn-language {
+  width: 100%;
+  text-align: right;
+}
+.dragon-editor .de-code-block .de-language .de-list-language {
+  display: none;
+  flex-direction: column;
+  row-gap: 6px;
+  position: absolute;
+  top: 100%;
+  right: 0;
+  left: 0;
+  height: 200px;
+  padding: 2px 4px;
+  background: var(--editor-code-file-bg);
+  overflow-y: scroll;
+}
+.dragon-editor .de-code-block .de-language .de-list-language.--active {
+  display: flex;
+}
+.dragon-editor .de-code-block .de-pre-wrap {
+  display: flex;
   width: 100%;
+  overflow-x: auto;
+}
+.dragon-editor .de-code-block .de-pre-wrap .de-number {
+  padding: 10px 4px;
+  background: var(--editor-code-number);
+  color: var(--editor-code-number-bg);
+}
+.dragon-editor .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 .de-code-block .de-pre {
+  flex: 1;
   padding: 10px;
   box-sizing: border-box;
-  white-space: pre-wrap;
 }
 .dragon-editor .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 .de-code-block .de-pre .de-code-content:empty:hover::before, .dragon-editor .de-code-block .de-pre .de-code-content:empty:focus::before {
   display: inline;
   content: "Type a Code";
+  color: var(--editor-code-placeholder);
   cursor: text;
 }
-.dragon-editor .de-code-block[data-theme=github-light] {
-  color: #24292e;
-  background: #f1f1f1;
-}
-.dragon-editor .de-code-block[data-theme=github-light] .de-filename {
-  color: #24292e;
-  background: #ccc;
-}
-.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 {
-  color: #8b8d8f;
-}
-.dragon-editor .de-code-block[data-theme=github-light] .de-language {
-  color: #24292e;
-  background: #ccc;
-}
-.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 {
-  color: #8b8d8f;
-}
-.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 {
-  color: #8b8d8f;
-}
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-doctag,
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-keyword,
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-meta .hljs-keyword,
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-template-tag,
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-template-variable,
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-type,
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-variable.language_ {
+.dragon-editor .de-code-block .hljs-doctag,
+.dragon-editor .de-code-block .hljs-keyword,
+.dragon-editor .de-code-block .hljs-meta .hljs-keyword,
+.dragon-editor .de-code-block .hljs-template-tag,
+.dragon-editor .de-code-block .hljs-template-variable,
+.dragon-editor .de-code-block .hljs-type,
+.dragon-editor .de-code-block .hljs-variable.language_ {
   /* prettylights-syntax-keyword */
-  color: #d73a49;
+  color: var(--editor-code-keyword);
 }
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-title,
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-title.class_,
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-title.class_.inherited__,
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-title.function_ {
+.dragon-editor .de-code-block .hljs-title,
+.dragon-editor .de-code-block .hljs-title.class_,
+.dragon-editor .de-code-block .hljs-title.class_.inherited__,
+.dragon-editor .de-code-block .hljs-title.function_ {
   /* prettylights-syntax-entity */
-  color: #6f42c1;
-}
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-attr,
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-attribute,
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-literal,
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-meta,
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-number,
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-operator,
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-variable,
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-selector-attr,
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-selector-class,
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-selector-id {
+  color: var(--editor-code-entity);
+}
+.dragon-editor .de-code-block .hljs-attr,
+.dragon-editor .de-code-block .hljs-attribute,
+.dragon-editor .de-code-block .hljs-literal,
+.dragon-editor .de-code-block .hljs-meta,
+.dragon-editor .de-code-block .hljs-number,
+.dragon-editor .de-code-block .hljs-operator,
+.dragon-editor .de-code-block .hljs-variable,
+.dragon-editor .de-code-block .hljs-selector-attr,
+.dragon-editor .de-code-block .hljs-selector-class,
+.dragon-editor .de-code-block .hljs-selector-id {
   /* prettylights-syntax-constant */
-  color: #005cc5;
+  color: var(--editor-code-constant);
 }
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-regexp,
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-string,
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-meta .hljs-string {
+.dragon-editor .de-code-block .hljs-regexp,
+.dragon-editor .de-code-block .hljs-string,
+.dragon-editor .de-code-block .hljs-meta .hljs-string {
   /* prettylights-syntax-string */
-  color: #032f62;
+  color: var(--editor-code-string);
 }
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-built_in,
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-symbol {
+.dragon-editor .de-code-block .hljs-built_in,
+.dragon-editor .de-code-block .hljs-symbol {
   /* prettylights-syntax-variable */
-  color: #e36209;
+  color: var(--editor-code-variable);
 }
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-comment,
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-code,
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-formula {
+.dragon-editor .de-code-block .hljs-comment,
+.dragon-editor .de-code-block .hljs-code,
+.dragon-editor .de-code-block .hljs-formula {
   /* prettylights-syntax-comment */
-  color: #6a737d;
+  color: var(--editor-code-comment);
 }
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-name,
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-quote,
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-selector-tag,
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-selector-pseudo {
+.dragon-editor .de-code-block .hljs-name,
+.dragon-editor .de-code-block .hljs-quote,
+.dragon-editor .de-code-block .hljs-selector-tag,
+.dragon-editor .de-code-block .hljs-selector-pseudo {
   /* prettylights-syntax-entity-tag */
-  color: #22863a;
+  color: var(--editor-code-entity-tag);
 }
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-subst {
+.dragon-editor .de-code-block .hljs-subst {
   /* prettylights-syntax-storage-modifier-import */
-  color: #24292e;
+  color: var(--editor-code-storage-modifier-import);
 }
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-section {
+.dragon-editor .de-code-block .hljs-section {
   /* prettylights-syntax-markup-heading */
-  color: #005cc5;
+  color: var(--editor-code-markup-heading);
   font-weight: bold;
 }
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-bullet {
+.dragon-editor .de-code-block .hljs-bullet {
   /* prettylights-syntax-markup-list */
-  color: #735c0f;
+  color: var(--editor-code-markup-list);
 }
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-emphasis {
+.dragon-editor .de-code-block .hljs-emphasis {
   /* prettylights-syntax-markup-italic */
-  color: #24292e;
+  color: var(--editor-code-markup-italic);
   font-style: italic;
 }
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-strong {
+.dragon-editor .de-code-block .hljs-strong {
   /* prettylights-syntax-markup-bold */
-  color: #24292e;
+  color: var(--editor-code-markup-bold);
   font-weight: bold;
 }
-.dragon-editor .de-code-block[data-theme=github-light] .hljs-addition {
+.dragon-editor .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 .de-code-block[data-theme=github-light] .hljs-deletion {
+.dragon-editor .de-code-block .hljs-deletion {
   /* prettylights-syntax-markup-deleted */
-  color: #b31d28;
-  background-color: #ffeef0;
-}
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] {
-  color: #adbac7;
-  background: #22272e;
-}
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .de-filename {
-  color: #adbac7;
-  background: #494e54;
-}
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .de-filename:empty:hover::before, .dragon-editor .de-code-block[data-theme=github-dark-dimmed] .de-filename:empty:focus::before {
-  color: #96a0aa;
-}
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .de-language {
-  color: #adbac7;
-  background: #494e54;
-}
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .de-language:empty:hover::before, .dragon-editor .de-code-block[data-theme=github-dark-dimmed] .de-language:empty:focus::before {
-  color: #96a0aa;
-}
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .de-code-content:empty:hover::before, .dragon-editor .de-code-block[data-theme=github-dark-dimmed] .de-code-content:empty:focus::before {
-  color: #96a0aa;
-}
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-doctag,
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-keyword,
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-meta .hljs-keyword,
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-template-tag,
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-template-variable,
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-type,
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-variable.language_ {
-  /* prettylights-syntax-keyword */
-  color: #f47067;
-}
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-title,
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-title.class_,
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-title.class_.inherited__,
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-title.function_ {
-  /* prettylights-syntax-entity */
-  color: #dcbdfb;
-}
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-attr,
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-attribute,
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-literal,
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-meta,
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-number,
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-operator,
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-variable,
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-selector-attr,
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-selector-class,
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-selector-id {
-  /* prettylights-syntax-constant */
-  color: #6cb6ff;
-}
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-regexp,
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-string,
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-meta .hljs-string {
-  /* prettylights-syntax-string */
-  color: #96d0ff;
-}
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-built_in,
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-symbol {
-  /* prettylights-syntax-variable */
-  color: #f69d50;
-}
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-comment,
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-code,
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-formula {
-  /* prettylights-syntax-comment */
-  color: #768390;
-}
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-name,
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-quote,
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-selector-tag,
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-selector-pseudo {
-  /* prettylights-syntax-entity-tag */
-  color: #8ddb8c;
-}
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-subst {
-  /* prettylights-syntax-storage-modifier-import */
-  color: #adbac7;
-}
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-section {
-  /* prettylights-syntax-markup-heading */
-  color: #316dca;
-  font-weight: bold;
-}
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-bullet {
-  /* prettylights-syntax-markup-list */
-  color: #eac55f;
-}
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-emphasis {
-  /* prettylights-syntax-markup-italic */
-  color: #adbac7;
-  font-style: italic;
-}
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-strong {
-  /* prettylights-syntax-markup-bold */
-  color: #adbac7;
-  font-weight: bold;
-}
-.dragon-editor .de-code-block[data-theme=github-dark-dimmed] .hljs-addition {
-  /* prettylights-syntax-markup-inserted */
-  color: #b4f1b4;
-  background-color: #1b4721;
-}
-.dragon-editor .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 .de-divider-block {
   display: flex;
@@ -1197,7 +1034,7 @@ defineExpose({
   width: 100%;
   height: 2px;
   padding: 0;
-  background: #e5e5e5;
+  background: var(--editor-divider);
   border-radius: 2px;
 }
 .dragon-editor .de-bold {
@@ -1221,8 +1058,8 @@ defineExpose({
 .dragon-editor .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 .de-align-left {