dragon-editor 3.8.6 → 4.0.0

package/dist/runtime/components/DragonEditorViewer.vue

@@ -1,821 +1,25 @@
 <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 "../scss/viewer.scss";
+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;
-  /**
-  * Reset style start
-  */
-}
-.dragon-editor h1,
-.dragon-editor h2,
-.dragon-editor h3,
-.dragon-editor h4,
-.dragon-editor h5,
-.dragon-editor h6,
-.dragon-editor p,
-.dragon-editor blockquote,
-.dragon-editor pre,
-.dragon-editor dl,
-.dragon-editor dd,
-.dragon-editor ol,
-.dragon-editor ul,
-.dragon-editor fieldset,
-.dragon-editor legend,
-.dragon-editor figure,
-.dragon-editor menu,
-.dragon-editor hr,
-.dragon-editor-viewer h1,
-.dragon-editor-viewer h2,
-.dragon-editor-viewer h3,
-.dragon-editor-viewer h4,
-.dragon-editor-viewer h5,
-.dragon-editor-viewer h6,
-.dragon-editor-viewer p,
-.dragon-editor-viewer blockquote,
-.dragon-editor-viewer pre,
-.dragon-editor-viewer dl,
-.dragon-editor-viewer dd,
-.dragon-editor-viewer ol,
-.dragon-editor-viewer ul,
-.dragon-editor-viewer fieldset,
-.dragon-editor-viewer legend,
-.dragon-editor-viewer figure,
-.dragon-editor-viewer menu,
-.dragon-editor-viewer hr {
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-.dragon-editor table,
-.dragon-editor th,
-.dragon-editor td,
-.dragon-editor-viewer table,
-.dragon-editor-viewer th,
-.dragon-editor-viewer td {
-  border-spacing: 0;
-  border-collapse: collapse;
-}
-.dragon-editor ol,
-.dragon-editor ul,
-.dragon-editor li,
-.dragon-editor-viewer ol,
-.dragon-editor-viewer ul,
-.dragon-editor-viewer li {
-  list-style: none;
-}
-.dragon-editor h1,
-.dragon-editor h2,
-.dragon-editor h3,
-.dragon-editor h4,
-.dragon-editor h5,
-.dragon-editor h6,
-.dragon-editor-viewer h1,
-.dragon-editor-viewer h2,
-.dragon-editor-viewer h3,
-.dragon-editor-viewer h4,
-.dragon-editor-viewer h5,
-.dragon-editor-viewer h6 {
-  font-size: inherit;
-  font-weight: normal;
-}
-.dragon-editor input,
-.dragon-editor textarea,
-.dragon-editor select,
-.dragon-editor button,
-.dragon-editor-viewer input,
-.dragon-editor-viewer textarea,
-.dragon-editor-viewer select,
-.dragon-editor-viewer button {
-  margin: 0;
-  padding: 0;
-  border-radius: 0;
-  outline: 0;
-  font-size: inherit;
-  vertical-align: middle;
-}
-.dragon-editor a,
-.dragon-editor button,
-.dragon-editor input[type=submit],
-.dragon-editor input[type=button],
-.dragon-editor input[type=reset],
-.dragon-editor-viewer a,
-.dragon-editor-viewer button,
-.dragon-editor-viewer input[type=submit],
-.dragon-editor-viewer input[type=button],
-.dragon-editor-viewer input[type=reset] {
-  border: 0;
-  background: transparent;
-  color: inherit;
-  font-size: inherit;
-  cursor: pointer;
-}
-.dragon-editor img,
-.dragon-editor-viewer img {
-  border: 0;
-  vertical-align: top;
-}
-.dragon-editor .de-block[data-depth="1"],
-.dragon-editor-viewer .de-block[data-depth="1"] {
-  padding-left: 30px;
-}
-.dragon-editor .de-block[data-depth="2"],
-.dragon-editor-viewer .de-block[data-depth="2"] {
-  padding-left: 60px;
-}
-.dragon-editor .de-block[data-depth="3"],
-.dragon-editor-viewer .de-block[data-depth="3"] {
-  padding-left: 90px;
-}
-.dragon-editor .de-block[data-depth="4"],
-.dragon-editor-viewer .de-block[data-depth="4"] {
-  padding-left: 120px;
-}
-.dragon-editor .de-block[data-depth="5"],
-.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-viewer {
-  width: 100%;
-  line-height: 1.6;
-  box-sizing: border-box;
-}
-.dragon-editor-viewer .de-block {
-  width: 100%;
-  padding: 2px 0;
-  box-sizing: border-box;
-}
-.dragon-editor-viewer .de-text-block {
-  min-height: 1.6em;
-  word-break: break-all;
-  outline: 0;
-}
-.dragon-editor-viewer .de-heading-block {
-  min-height: 1.6em;
-  font-weight: bold;
-  word-break: break-all;
-  outline: 0;
-}
-.dragon-editor-viewer .de-heading-block[data-level="1"] {
-  font-size: 2em;
-}
-.dragon-editor-viewer .de-heading-block[data-level="2"] {
-  font-size: 1.5em;
-}
-.dragon-editor-viewer .de-heading-block[data-level="3"] {
-  font-size: 1.17em;
-}
-.dragon-editor-viewer .de-list-block {
-  display: flex;
-  flex-direction: column;
-  row-gap: 4px;
-  padding-left: 24px;
-}
-.dragon-editor-viewer .de-list-block[data-style=disc] {
-  list-style: disc;
-}
-.dragon-editor-viewer .de-list-block[data-style=square] {
-  list-style: square;
-}
-.dragon-editor-viewer .de-list-block[data-style=decimal] {
-  list-style: decimal;
-}
-.dragon-editor-viewer .de-list-block[data-style=lower-alpha] {
-  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] {
-  list-style: lower-roman;
-}
-.dragon-editor-viewer .de-list-block[data-style=upper-roman] {
-  list-style: upper-roman;
-}
-.dragon-editor-viewer .de-list-block .de-item {
-  min-height: 1.6em;
-  word-break: break-all;
-  outline: 0;
-  list-style: inherit;
-}
-.dragon-editor-viewer .de-image-block {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  row-gap: 8px;
-}
-.dragon-editor-viewer .de-image-block.de-align-left {
-  align-items: flex-start;
-}
-.dragon-editor-viewer .de-image-block.de-align-left .de-caption {
-  text-align: left;
-}
-.dragon-editor-viewer .de-image-block.de-align-right {
-  align-items: flex-end;
-}
-.dragon-editor-viewer .de-image-block.de-align-right .de-caption {
-  text-align: right;
-}
-.dragon-editor-viewer .de-image-block .de-image-area {
-  position: relative;
-  max-width: 25%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="25"] {
-  max-width: 25%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="26"] {
-  max-width: 26%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="27"] {
-  max-width: 27%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="28"] {
-  max-width: 28%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="29"] {
-  max-width: 29%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="30"] {
-  max-width: 30%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="31"] {
-  max-width: 31%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="32"] {
-  max-width: 32%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="33"] {
-  max-width: 33%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="34"] {
-  max-width: 34%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="35"] {
-  max-width: 35%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="36"] {
-  max-width: 36%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="37"] {
-  max-width: 37%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="38"] {
-  max-width: 38%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="39"] {
-  max-width: 39%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="40"] {
-  max-width: 40%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="41"] {
-  max-width: 41%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="42"] {
-  max-width: 42%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="43"] {
-  max-width: 43%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="44"] {
-  max-width: 44%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="45"] {
-  max-width: 45%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="46"] {
-  max-width: 46%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="47"] {
-  max-width: 47%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="48"] {
-  max-width: 48%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="49"] {
-  max-width: 49%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="50"] {
-  max-width: 50%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="51"] {
-  max-width: 51%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="52"] {
-  max-width: 52%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="53"] {
-  max-width: 53%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="54"] {
-  max-width: 54%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="55"] {
-  max-width: 55%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="56"] {
-  max-width: 56%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="57"] {
-  max-width: 57%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="58"] {
-  max-width: 58%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="59"] {
-  max-width: 59%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="60"] {
-  max-width: 60%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="61"] {
-  max-width: 61%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="62"] {
-  max-width: 62%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="63"] {
-  max-width: 63%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="64"] {
-  max-width: 64%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="65"] {
-  max-width: 65%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="66"] {
-  max-width: 66%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="67"] {
-  max-width: 67%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="68"] {
-  max-width: 68%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="69"] {
-  max-width: 69%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="70"] {
-  max-width: 70%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="71"] {
-  max-width: 71%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="72"] {
-  max-width: 72%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="73"] {
-  max-width: 73%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="74"] {
-  max-width: 74%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="75"] {
-  max-width: 75%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="76"] {
-  max-width: 76%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="77"] {
-  max-width: 77%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="78"] {
-  max-width: 78%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="79"] {
-  max-width: 79%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="80"] {
-  max-width: 80%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="81"] {
-  max-width: 81%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="82"] {
-  max-width: 82%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="83"] {
-  max-width: 83%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="84"] {
-  max-width: 84%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="85"] {
-  max-width: 85%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="86"] {
-  max-width: 86%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="87"] {
-  max-width: 87%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="88"] {
-  max-width: 88%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="89"] {
-  max-width: 89%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="90"] {
-  max-width: 90%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="91"] {
-  max-width: 91%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="92"] {
-  max-width: 92%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="93"] {
-  max-width: 93%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="94"] {
-  max-width: 94%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="95"] {
-  max-width: 95%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="96"] {
-  max-width: 96%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="97"] {
-  max-width: 97%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="98"] {
-  max-width: 98%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="99"] {
-  max-width: 99%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="100"] {
-  max-width: 100%;
-}
-.dragon-editor-viewer .de-image-block .de-image-area .de-img {
-  width: 100%;
-  height: auto;
-  border-radius: var(--radius-default);
-}
-.dragon-editor-viewer .de-image-block .de-image-area .de-btn {
-  position: absolute;
-  top: 50%;
-  width: 8px;
-  height: 15%;
-  background: #f1f1f1;
-  border: 1px solid #ccc;
-  border-radius: var(--radius-default);
-  transform: translate(-50%, -50%);
-  cursor: col-resize;
-  user-select: none;
-  z-index: 100;
-}
-.dragon-editor-viewer .de-image-block .de-image-area .de-btn.de-btn-left {
-  left: 0;
-}
-.dragon-editor-viewer .de-image-block .de-image-area .de-btn.de-btn-right {
-  left: 100%;
-}
-.dragon-editor-viewer .de-image-block .de-caption {
-  width: 100%;
-  min-height: 1.6em;
-  color: #909090;
-  text-align: center;
-  word-break: break-all;
-  outline: 0;
-}
-.dragon-editor-viewer .de-code-block {
-  display: flex;
-  flex-wrap: wrap;
-  margin: 2px 0;
-  padding: 0;
-  border-radius: var(--radius-default);
-  overflow: hidden;
-}
-.dragon-editor-viewer .de-code-block .de-filename {
-  flex: 1;
-  max-width: calc(100% - 120px);
-  padding: 5px 10px;
-  box-sizing: border-box;
-  outline: 0;
-}
-.dragon-editor-viewer .de-code-block .de-language {
-  width: 120px;
-  text-align: right;
-  padding: 5px 10px;
-  box-sizing: border-box;
-}
-.dragon-editor-viewer .de-code-block .de-pre {
-  width: 100%;
-  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%;
-  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_ {
-  /* prettylights-syntax-keyword */
-  color: #d73a49;
-}
-.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_ {
-  /* 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 {
-  /* prettylights-syntax-constant */
-  color: #005cc5;
-}
-.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 {
-  /* prettylights-syntax-string */
-  color: #032f62;
-}
-.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 {
-  /* prettylights-syntax-variable */
-  color: #e36209;
-}
-.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 {
-  /* prettylights-syntax-comment */
-  color: #6a737d;
-}
-.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 {
-  /* prettylights-syntax-entity-tag */
-  color: #22863a;
-}
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-subst {
-  /* prettylights-syntax-storage-modifier-import */
-  color: #24292e;
-}
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-section {
-  /* prettylights-syntax-markup-heading */
-  color: #005cc5;
-  font-weight: bold;
-}
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-bullet {
-  /* prettylights-syntax-markup-list */
-  color: #735c0f;
-}
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-emphasis {
-  /* prettylights-syntax-markup-italic */
-  color: #24292e;
-  font-style: italic;
-}
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-strong {
-  /* prettylights-syntax-markup-bold */
-  color: #24292e;
-  font-weight: bold;
-}
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .hljs-addition {
-  /* prettylights-syntax-markup-inserted */
-  color: #22863a;
-  background-color: #f0fff4;
-}
-.dragon-editor-viewer .de-code-block[data-theme=github-light] .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;
-}
-.dragon-editor-viewer .de-divider-block {
-  display: flex;
-  align-items: center;
-  height: 20px;
-}
-.dragon-editor-viewer .de-divider-block::before {
-  display: block;
-  content: "";
-  width: 100%;
-  height: 2px;
-  padding: 0;
-  background: #e5e5e5;
-  border-radius: 2px;
-}
-.dragon-editor-viewer .de-bold {
-  font-weight: 700;
-}
-.dragon-editor-viewer .de-italic {
-  font-style: italic;
-}
-.dragon-editor-viewer .de-underline {
-  text-decoration: underline;
-}
-.dragon-editor-viewer .de-underline.de-strikethrough {
-  text-decoration: underline line-through;
-}
-.dragon-editor-viewer .de-strikethrough {
-  text-decoration: line-through;
-}
-.dragon-editor-viewer .de-strikethrough.de-underline {
-  text-decoration: line-through underline;
-}
-.dragon-editor-viewer .de-code {
-  display: inline-block;
-  padding: 2px 4px;
-  background: #f1f1f1;
-  color: #ff0000;
-  border-radius: 5px;
-}
-.dragon-editor-viewer .de-align-left {
-  text-align: left;
-}
-.dragon-editor-viewer .de-align-right {
-  text-align: right;
-}
-.dragon-editor-viewer .de-align-center {
-  text-align: center;
-}
-.dragon-editor-viewer .de-align-justify {
-  text-align: justify;
-}
-.dragon-editor-viewer .de-link {
-  color: #2c95fe;
-  text-decoration: none;
-}
-</style>