dragon-editor 3.1.1 → 3.2.1

package/dist/runtime/components/DragonEditor.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="dragon-editor" :class="{ '--hasMenu': props.useMenuBar === true }" @mousemove="resizeEvent" @touchmove="resizeEvent" @mouseup="resizeEventEnd" @touchend="resizeEventEnd" @mouseleave="resizeEventEnd" ref="$editor">
-        <div v-if="props.useMenuBar === true" class="de-control-bar">
+        <div v-if="props.useMenuBar === true" class="de-menu-bar" :style="{ top: `${menuBarTop}px` }">
             <button class="de-menu de-menu-add" @click="isActiveAddBlockMenu = !isActiveAddBlockMenu">
                 <svg class="de-icon" viewBox="0 0 64 64">
                     <path class="de-path" d="M32 9C30.3431 9 29 10.3431 29 12V29H12C10.3431 29 9 30.3431 9 32C9 33.6569 10.3431 35 12 35H29V52C29 53.6569 30.3431 55 32 55C33.6569 55 35 53.6569 35 52V35H52C53.6569 35 55 33.6569 55 32C55 30.3431 53.6569 29 52 29H35V12C35 10.3431 33.6569 9 32 9Z"></path>
@@ -78,13 +78,48 @@
                     <button class="de-add-block" @click="addBlock('heading3')">Heading-3</button>
                     <button class="de-add-block" @click="addBlock('ul')">Unodered List</button>
                     <button class="de-add-block" @click="addBlock('ol')">Odered List</button>
-                    <!-- <button class="de-add-block" @click="addBlock('codeblock')">Code Block</button> -->
-                    <!-- <button class="de-add-block" @click="addBlock('video')">Video</button> -->
+                    <button class="de-add-block" @click="addBlock('code')">Code Block</button>
+                    <!-- <button class="de-add-block" @click="addBlock('table')">Table Block</button> -->
+                    <!-- <button class="de-add-block" @click="addBlock('video')">Video</button> youtube | vimeo -->
                 </div>
             </div>
         </div>
 
-        <div class="de-body" ref="$content" @keydown="contentKeyboardEvent" @mouseup="updateCursorData" @mousedown="resizeEventStart" @touchstart="resizeEventStart">
+        <div class="de-control-bar" :class="{ '--active': editorStore.controlBar.active === true }" :style="{ top: `${editorStore.controlBar.y}px`, left: `${editorStore.controlBar.x}px` }" ref="$controlBar">
+            <div v-if="['code'].includes(curruntType) === true" class="de-col">
+                <p class="de-name">Theme :</p>
+                <select class="de-selector" v-model="codeBlockTheme" @change="codeBlockThemeChangeEvent">
+                    <option v-for="(item, i) in _getCodeBlockTheme()" :value="item.code" :key="`codeBlockTheme-${i}`">{{ item.text }}</option>
+                </select>
+            </div>
+<!--
+            <div v-if="['code'].includes(curruntType) === true" class="de-col">
+                <p class="de-name">Language :</p>
+                <select class="de-selector" v-model="codeblockLanguage" @change="codeblockLanguageChangeEvent">
+                    <option v-for="(item, i) in _getCodeBlockLanguage()" :value="item.code" :key="`codeBlockLanuage-${i}`">{{ item.text }}</option>
+                </select>
+            </div>
+-->
+            <div v-if="['list'].includes(curruntType) === true" class="de-col">
+                <p class="de-name">List Style :</p>
+                <select class="de-selector" v-model="listBlockStyle" @change="listBlockStyleChangeEvent">
+                    <template v-if="editorStore.$currentBlock.tagName === 'UL'">
+                        <option value="disc">Disc</option>
+                        <option value="square">Square</option>
+                    </template>
+
+                    <template v-else>
+                        <option value="decimal">Decimal</option>
+                        <option value="lower-alpha">Lower-Alpha</option>
+                        <option value="upper-alpha">Upper-Alpha</option>
+                        <option value="lower-roman">Lower-Roman</option>
+                        <option value="upper-roman">Upper-Roman</option>
+                    </template>
+                </select>
+            </div>
+        </div>
+
+        <div class="de-body" ref="$content" @keydown="contentKeyboardEvent" @mouseup="updateCursorData" @mousedown="resizeEventStart" @touchstart="resizeEventStart" @paste="contentPasteEvent">
             <p class="de-block de-text-block" contenteditable="true"></p>
         </div>
     </div>
@@ -93,9 +128,10 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from "vue";
 import { useEditorStore } from "../store";
+import { _getCodeBlockTheme, _getCodeBlockLanguage, _setCodeBlockTheme, _setCodeBlockLanguage, _updateCodeBlockStyle, _setListBlockStyle, _updateListBlockStyle } from "../utils/controlBar";
 import { _findScrollingElement, _findContentEditableElement } from "../utils/element";
-import { _elementKeyEvent, _hotKeyEvent } from "../utils/keyboardEvent";
-import { _createTextBlock, _createHeadingBlock, _createListBlock, _createImageBlock, _createCustomBlock } from "../utils/block";
+import { _elementKeyEvent, _hotKeyEvent, _copyEvent, _pasteEvent } from "../utils/keyboardEvent";
+import { _getBlockType, _createTextBlock, _createHeadingBlock, _createListBlock, _createImageBlock, _createCustomBlock, _createCodeBlock } from "../utils/block";
 import { _setNodeStyle, _setTextAlign } from "../utils/style";
 import { _setCursorData, _clenupCursor } from "../utils/cursor";
 import { _getContentData, _setContentData } from "../utils/convertor";
@@ -109,10 +145,20 @@ const props = defineProps({
         default: () => true,
     },
 });
+const emit = defineEmits<{
+    (e: "addPasteImage", file: File): DEImage;
+}>();
 const editorStore = useEditorStore();
 const isActiveAddBlockMenu = ref<boolean>(false);
+const menuBarTop = ref<number>(0);
+const curruntType = ref<string>("");
+const codeBlockTheme = ref<string>("github");
+const codeblockLanguage = ref<string>("text");
+const listBlockStyle = ref<DEListStyle>("disc");
+const anchorTagValue = ref<string>("");
 const $editor = ref<HTMLDivElement>();
 const $content = ref<HTMLDivElement>();
+const $controlBar = ref<HTMLDivElement>();
 let resizeEventActive: boolean = false;
 let resizeStartX: number = 0;
 let resizeType: string = "right";
@@ -138,6 +184,7 @@ function updateCursorData(e: MouseEvent) {
         editorStore.cursorData = originalCursorData;
     }
 
+    // 선택 블럭 업데이트
     if (e.target !== null) {
         const $block = (e.target as HTMLElement).closest(".de-block");
 
@@ -145,6 +192,32 @@ function updateCursorData(e: MouseEvent) {
             editorStore.setCurrentBlock($block as HTMLElement);
         }
     }
+
+    controlBarStatusUpdate();
+}
+// 컨트롤 바 상태 업데이트
+function controlBarStatusUpdate() {
+    if (editorStore.$currentBlock !== null) {
+        const { type } = _getBlockType(editorStore.$currentBlock);
+        const activeList = ["code", "list"];
+
+        curruntType.value = type;
+
+        if (activeList.includes(curruntType.value) === true) {
+            editorStore.controlBarActive();
+
+            switch (type) {
+                case "code":
+                    _updateCodeBlockStyle(editorStore, codeBlockTheme, codeblockLanguage);
+                    break;
+                case "list":
+                    _updateListBlockStyle(editorStore, listBlockStyle);
+                    break;
+            }
+        } else {
+            editorStore.controlBarDeactive();
+        }
+    }
 }
 
 // 사이즈 조정 이벤트 시작
@@ -222,7 +295,7 @@ function resizeEventEnd() {
 // 메뉴 외부 클릭시 닫기
 function checkOthersideClick(event: MouseEvent) {
     if (event.target !== null) {
-        const $controlBar = (event.target as HTMLElement).closest(".de-control-bar");
+        const $controlBar = (event.target as HTMLElement).closest(".de-menu-bar");
 
         if ($controlBar === null) {
             isActiveAddBlockMenu.value = false;
@@ -237,10 +310,70 @@ function deleteBlock() {
     }
 }
 
+// 부모 요소 스크롤 이벤트 발생시 컨트롤 바 고정
+function parentWrapScollEvent() {
+    editorStore.setParentWrapElement(_findScrollingElement($editor.value as HTMLElement));
+
+    if (props.useMenuBar === true && editorStore.$parentWrap !== null && editorStore.$editor !== null) {
+        // 메뉴바를 사용하는 경우만
+
+        const editorReac = editorStore.$editor.getBoundingClientRect();
+        let scrollY: number = 0;
+
+        if (editorStore.$parentWrap.constructor.name === "Window") {
+            scrollY = (editorStore.$parentWrap as Window).scrollY;
+        } else {
+            scrollY = (editorStore.$parentWrap as HTMLElement).scrollTop;
+        }
+
+        let realElementY = editorReac.y + scrollY;
+
+        if (editorStore.$parentWrap.constructor.name !== "Window") {
+            const parentRect = (editorStore.$parentWrap as HTMLElement).getBoundingClientRect();
+
+            realElementY -= parentRect.y;
+        }
+
+        if (scrollY > realElementY) {
+            menuBarTop.value = scrollY - realElementY - 1;
+        } else {
+            menuBarTop.value = 0;
+        }
+    }
+}
+
+// 붙여넣기 이벤트
+function contentPasteEvent(event: ClipboardEvent) {
+    _pasteEvent(event, editorStore, emit);
+}
+
 /**
  * 이벤트 관련 영역 종료
  */
 
+/**
+ * 컨트롤 바 이벤트 관련 영역 시작
+ */
+
+// 코드 블럭 테마 적용
+function codeBlockThemeChangeEvent() {
+    _setCodeBlockTheme(editorStore, codeBlockTheme.value);
+}
+
+// 코드 블럭 언어 적용
+function codeblockLanguageChangeEvent() {
+    _setCodeBlockLanguage(editorStore, codeblockLanguage.value);
+}
+
+// 리스트 스타일 적용
+function listBlockStyleChangeEvent() {
+    _setListBlockStyle(editorStore, listBlockStyle.value);
+}
+
+/**
+ * 컨트롤 바 이벤트 관련 영역 종료
+ */
+
 function addBlock(type: string) {
     isActiveAddBlockMenu.value = false;
 
@@ -264,20 +397,11 @@ function addBlock(type: string) {
             });
             break;
         case "ul":
-            blockStructure = _createListBlock({
-                type: type,
-                child: [
-                    {
-                        classList: [],
-                        textContent: "",
-                    },
-                ],
-            });
-            break;
         case "ol":
             blockStructure = _createListBlock({
-                type: type,
-                pattern: "1",
+                type: "list",
+                element: type,
+                style: type === "ul" ? "disc" : "decimal",
                 child: [
                     {
                         classList: [],
@@ -289,8 +413,14 @@ function addBlock(type: string) {
         case "table":
             // TODO : table block
             break;
-        case "codeblock":
-            // TODO : Code Block
+        case "code":
+            blockStructure = _createCodeBlock({
+                type: "code",
+                theme: "github",
+                filename: "",
+                language: "Plain Text",
+                textContent: "",
+            });
             break;
     }
 
@@ -302,9 +432,15 @@ function addBlock(type: string) {
             case "ol":
                 (blockStructure.childNodes[0] as HTMLElement).focus();
                 break;
+            case "codeblock":
+                blockStructure.querySelector("code")?.focus();
+                break;
             default:
                 blockStructure.focus();
         }
+
+        editorStore.setCurrentBlock(blockStructure as HTMLElement);
+        controlBarStatusUpdate();
     }
 }
 
@@ -360,15 +496,17 @@ onMounted(() => {
         editorStore.setContentElement($content.value);
     }
 
-    window.addEventListener("click", checkOthersideClick, true);
+    if ($controlBar.value !== undefined) {
+        editorStore.setContrulBar($controlBar.value);
+    }
 
-    // TODO : set scroll event
+    window.addEventListener("click", checkOthersideClick, true);
+    editorStore.$parentWrap?.addEventListener("scroll", parentWrapScollEvent, true);
 });
 
 onUnmounted(() => {
     window.removeEventListener("click", checkOthersideClick, true);
-
-    // TODO : remove scroll event
+    editorStore.$parentWrap?.removeEventListener("scroll", parentWrapScollEvent, true);
 });
 
 defineExpose({
@@ -530,28 +668,30 @@ defineExpose({
   padding: 20px;
   line-height: 1.6;
 }
-.dragon-editor .de-control-bar {
+.dragon-editor .de-menu-bar {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 38px;
+  background: #fff;
   border-bottom: 1px solid #ccc;
+  z-index: 10;
 }
-.dragon-editor .de-control-bar .de-menu {
+.dragon-editor .de-menu-bar .de-menu {
   min-width: 38px;
   height: 38px;
   padding: 0 8px;
   border-right: 1px solid #ccc;
   box-sizing: border-box;
 }
-.dragon-editor .de-control-bar .de-menu.--lastchild {
+.dragon-editor .de-menu-bar .de-menu.--lastchild {
   border-right: 0;
 }
-.dragon-editor .de-control-bar .de-menu .de-path.--red {
+.dragon-editor .de-menu-bar .de-menu .de-path.--red {
   fill: #dd0000;
 }
-.dragon-editor .de-control-bar .de-block-menu-area {
+.dragon-editor .de-menu-bar .de-block-menu-area {
   display: none;
   position: absolute;
   top: 39px;
@@ -561,18 +701,49 @@ defineExpose({
   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
   z-index: 1000;
 }
-.dragon-editor .de-control-bar .de-block-menu-area.--active {
+.dragon-editor .de-menu-bar .de-block-menu-area.--active {
   display: block;
 }
-.dragon-editor .de-control-bar .de-block-menu-area .de-list {
+.dragon-editor .de-menu-bar .de-block-menu-area .de-list {
   display: flex;
   flex-direction: column;
   gap: 5px;
   padding: 5px;
 }
-.dragon-editor .de-control-bar .de-block-menu-area .de-add-block {
+.dragon-editor .de-menu-bar .de-block-menu-area .de-add-block {
   line-height: 1.6;
 }
+.dragon-editor .de-control-bar {
+  display: none;
+  position: fixed;
+  height: 38px;
+  background: #fff;
+  border: 1px solid #ccc;
+  border-width: 1px 0 0 1px;
+  transform: translateX(-50%);
+  z-index: 20;
+}
+.dragon-editor .de-control-bar.--active {
+  display: flex;
+}
+.dragon-editor .de-control-bar:empty {
+  display: none;
+}
+.dragon-editor .de-control-bar .de-col {
+  display: flex;
+  align-items: center;
+  column-gap: 6px;
+  padding: 0 10px;
+  border: 1px solid #ccc;
+  border-width: 0 1px 1px 0;
+}
+.dragon-editor .de-control-bar .de-col .de-selector {
+  height: 100%;
+  border: 0;
+}
+.dragon-editor .de-block {
+  width: 100%;
+}
 .dragon-editor .de-text-block {
   min-height: 1.6em;
   outline: 0;
@@ -607,8 +778,28 @@ defineExpose({
   flex-direction: column;
   row-gap: 4px;
   padding-left: 24px;
+}
+.dragon-editor .de-list-block[data-style=disc] {
   list-style: disc;
 }
+.dragon-editor .de-list-block[data-style=square] {
+  list-style: square;
+}
+.dragon-editor .de-list-block[data-style=decimal] {
+  list-style: decimal;
+}
+.dragon-editor .de-list-block[data-style=lower-alpha] {
+  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] {
+  list-style: lower-roman;
+}
+.dragon-editor .de-list-block[data-style=upper-roman] {
+  list-style: upper-roman;
+}
 .dragon-editor .de-list-block .de-item {
   min-height: 1.6em;
   outline: 0;
@@ -620,9 +811,6 @@ defineExpose({
   color: #ccc;
   cursor: text;
 }
-.dragon-editor ol.de-list-block {
-  list-style: decimal;
-}
 .dragon-editor .de-image-block {
   display: flex;
   align-items: center;
@@ -908,6 +1096,262 @@ defineExpose({
   color: #ccc;
   cursor: text;
 }
+.dragon-editor .de-code-block {
+  display: flex;
+  flex-wrap: wrap;
+}
+.dragon-editor .de-code-block .de-filename {
+  flex: 1;
+  padding: 5px 10px;
+  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";
+  cursor: text;
+}
+.dragon-editor .de-code-block .de-language {
+  width: 120px;
+  text-align: right;
+  padding: 5px 10px;
+  box-sizing: border-box;
+}
+.dragon-editor .de-code-block .de-pre {
+  width: 100%;
+  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%;
+  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";
+  cursor: text;
+}
+.dragon-editor .de-code-block[data-theme=github] {
+  color: #24292e;
+  background: #f1f1f1;
+}
+.dragon-editor .de-code-block[data-theme=github] .de-filename {
+  color: #24292e;
+  background: #ccc;
+}
+.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 {
+  color: #8b8d8f;
+}
+.dragon-editor .de-code-block[data-theme=github] .de-language {
+  color: #24292e;
+  background: #ccc;
+}
+.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 {
+  color: #8b8d8f;
+}
+.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 {
+  color: #8b8d8f;
+}
+.dragon-editor .de-code-block[data-theme=github] .hljs-doctag,
+.dragon-editor .de-code-block[data-theme=github] .hljs-keyword,
+.dragon-editor .de-code-block[data-theme=github] .hljs-meta .hljs-keyword,
+.dragon-editor .de-code-block[data-theme=github] .hljs-template-tag,
+.dragon-editor .de-code-block[data-theme=github] .hljs-template-variable,
+.dragon-editor .de-code-block[data-theme=github] .hljs-type,
+.dragon-editor .de-code-block[data-theme=github] .hljs-variable.language_ {
+  /* prettylights-syntax-keyword */
+  color: #d73a49;
+}
+.dragon-editor .de-code-block[data-theme=github] .hljs-title,
+.dragon-editor .de-code-block[data-theme=github] .hljs-title.class_,
+.dragon-editor .de-code-block[data-theme=github] .hljs-title.class_.inherited__,
+.dragon-editor .de-code-block[data-theme=github] .hljs-title.function_ {
+  /* prettylights-syntax-entity */
+  color: #6f42c1;
+}
+.dragon-editor .de-code-block[data-theme=github] .hljs-attr,
+.dragon-editor .de-code-block[data-theme=github] .hljs-attribute,
+.dragon-editor .de-code-block[data-theme=github] .hljs-literal,
+.dragon-editor .de-code-block[data-theme=github] .hljs-meta,
+.dragon-editor .de-code-block[data-theme=github] .hljs-number,
+.dragon-editor .de-code-block[data-theme=github] .hljs-operator,
+.dragon-editor .de-code-block[data-theme=github] .hljs-variable,
+.dragon-editor .de-code-block[data-theme=github] .hljs-selector-attr,
+.dragon-editor .de-code-block[data-theme=github] .hljs-selector-class,
+.dragon-editor .de-code-block[data-theme=github] .hljs-selector-id {
+  /* prettylights-syntax-constant */
+  color: #005cc5;
+}
+.dragon-editor .de-code-block[data-theme=github] .hljs-regexp,
+.dragon-editor .de-code-block[data-theme=github] .hljs-string,
+.dragon-editor .de-code-block[data-theme=github] .hljs-meta .hljs-string {
+  /* prettylights-syntax-string */
+  color: #032f62;
+}
+.dragon-editor .de-code-block[data-theme=github] .hljs-built_in,
+.dragon-editor .de-code-block[data-theme=github] .hljs-symbol {
+  /* prettylights-syntax-variable */
+  color: #e36209;
+}
+.dragon-editor .de-code-block[data-theme=github] .hljs-comment,
+.dragon-editor .de-code-block[data-theme=github] .hljs-code,
+.dragon-editor .de-code-block[data-theme=github] .hljs-formula {
+  /* prettylights-syntax-comment */
+  color: #6a737d;
+}
+.dragon-editor .de-code-block[data-theme=github] .hljs-name,
+.dragon-editor .de-code-block[data-theme=github] .hljs-quote,
+.dragon-editor .de-code-block[data-theme=github] .hljs-selector-tag,
+.dragon-editor .de-code-block[data-theme=github] .hljs-selector-pseudo {
+  /* prettylights-syntax-entity-tag */
+  color: #22863a;
+}
+.dragon-editor .de-code-block[data-theme=github] .hljs-subst {
+  /* prettylights-syntax-storage-modifier-import */
+  color: #24292e;
+}
+.dragon-editor .de-code-block[data-theme=github] .hljs-section {
+  /* prettylights-syntax-markup-heading */
+  color: #005cc5;
+  font-weight: bold;
+}
+.dragon-editor .de-code-block[data-theme=github] .hljs-bullet {
+  /* prettylights-syntax-markup-list */
+  color: #735c0f;
+}
+.dragon-editor .de-code-block[data-theme=github] .hljs-emphasis {
+  /* prettylights-syntax-markup-italic */
+  color: #24292e;
+  font-style: italic;
+}
+.dragon-editor .de-code-block[data-theme=github] .hljs-strong {
+  /* prettylights-syntax-markup-bold */
+  color: #24292e;
+  font-weight: bold;
+}
+.dragon-editor .de-code-block[data-theme=github] .hljs-addition {
+  /* prettylights-syntax-markup-inserted */
+  color: #22863a;
+  background-color: #f0fff4;
+}
+.dragon-editor .de-code-block[data-theme=github] .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;
+}
 .dragon-editor .de-bold {
   font-weight: 700;
 }