dragon-editor 4.0.0 → 4.0.2

package/dist/runtime/components/DragonEditor.vue

@@ -14,7 +14,6 @@
 </template>
 
 <script setup>
-import "../scss/editor.scss";
 import MenuBar from "./MenuBar.vue";
 import { _getBody } from "../utils/layout";
 import { useEditorStore } from "../store/editor";
@@ -92,3 +91,991 @@ onBeforeUnmount(() => {
   _eidtorUnmountEvent();
 });
 </script>
+
+<style>
+@charset "UTF-8";
+.dragon-editor,
+.dragon-editor-viewer {
+  --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
+  */
+}
+.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 {
+  position: relative;
+  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-link-exit-area {
+  left: 50%;
+  right: 0;
+  transform: translateX(-50%);
+}
+.dragon-editor.--hidden-parent {
+  height: 100%;
+  box-sizing: border-box;
+}
+.dragon-editor.--hidden-parent .de-body {
+  height: 100%;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+.dragon-editor .de-body {
+  padding: 16px 20px;
+  line-height: 1.6;
+}
+.dragon-editor .de-menu-bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 34px;
+  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 {
+  display: flex;
+  overflow-x: auto;
+}
+.dragon-editor .de-menu-bar .de-col {
+  display: flex;
+  position: relative;
+  border-right: 1px solid var(--editor-border);
+}
+.dragon-editor .de-menu-bar .de-col:last-child {
+  border-right: 0;
+}
+.dragon-editor .de-menu-bar .de-menu {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 34px;
+  height: 34px;
+  cursor: pointer;
+}
+.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;
+  height: 16px;
+}
+.dragon-editor .de-menu-bar .de-menu.--lastchild {
+  border-right: 0;
+}
+.dragon-editor .de-menu-bar .de-menu .de-path {
+  fill: var(--editor-text);
+}
+.dragon-editor .de-menu-bar .de-block-menu-area {
+  display: none;
+  position: absolute;
+  top: 35px;
+  left: 0;
+  width: 120px;
+  background: #fff;
+  border-width: 0 1px 1px 0;
+  border-style: solid;
+  border-color: #ccc;
+  border-bottom-right-radius: var(--editor-radius-default);
+  z-index: 1000;
+}
+.dragon-editor .de-menu-bar .de-block-menu-area.--active {
+  display: block;
+}
+.dragon-editor .de-menu-bar .de-block-menu-area .de-list {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  padding: 5px;
+}
+.dragon-editor .de-menu-bar .de-block-menu-area .de-add-block {
+  font-size: 0.875em;
+  line-height: 1.6;
+}
+.dragon-editor .de-menu-bar .de-link-exit-area {
+  display: none;
+  position: absolute;
+  top: calc(100% + 1px);
+  left: 205px;
+  width: 200px;
+  background: var(--editor-background);
+  border: 1px solid var(--editor-border);
+  border-top: 0;
+  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 {
+  display: block;
+}
+.dragon-editor .de-menu-bar .de-link-exit-area .de-btn-area {
+  display: flex;
+  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: var(--editor-text-disabled);
+}
+.dragon-editor .de-menu-bar .de-link-exit-area .de-btn-area .de-btn.--active {
+  color: var(--editor-text);
+}
+.dragon-editor .de-menu-bar .de-link-exit-area .de-link-text-area {
+  display: flex;
+  column-gap: 10px;
+  padding: 4px;
+}
+.dragon-editor .de-menu-bar .de-link-exit-area .de-link-text-area .de-input {
+  flex: 1;
+  min-width: 0;
+  height: 20px;
+  padding: 0 8px;
+  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.--error {
+  border-color: red;
+}
+.dragon-editor .de-menu-bar .de-link-exit-area .de-link-text-area .de-btn {
+  min-width: 50px;
+  height: 20px;
+}
+.dragon-editor .de-menu-bar .de-link-exit-area .de-link-heading-area {
+  display: flex;
+  flex-direction: column;
+  max-height: 150px;
+  padding: 8px;
+  box-sizing: border-box;
+  overflow-y: auto;
+}
+.dragon-editor .de-menu-bar .de-link-exit-area .de-link-heading-area .de-btn {
+  padding: 2px 4px;
+  text-align: left;
+  border-radius: var(--editor-radius-default);
+}
+.dragon-editor .de-menu-bar .de-link-exit-area .de-link-heading-area .de-btn:hover {
+  background: var(--editor-decoration-code-bg);
+}
+.dragon-editor .de-block {
+  width: 100%;
+  padding: 2px 0;
+  box-sizing: border-box;
+}
+.dragon-editor .de-text-block {
+  min-height: 1.6em;
+  word-break: break-all;
+  outline: 0;
+}
+.dragon-editor .de-text-block:empty:hover::before, .dragon-editor .de-text-block:empty:focus::before {
+  display: inline;
+  content: "Type a paragraph";
+  color: #ccc;
+  cursor: text;
+}
+.dragon-editor .de-heading-block {
+  min-height: 1.6em;
+  font-weight: bold;
+  word-break: break-all;
+  outline: 0;
+}
+.dragon-editor .de-heading-block[data-level="1"] {
+  font-size: 2em;
+}
+.dragon-editor .de-heading-block[data-level="2"] {
+  font-size: 1.5em;
+}
+.dragon-editor .de-heading-block[data-level="3"] {
+  font-size: 1.17em;
+}
+.dragon-editor .de-heading-block:empty:hover::before, .dragon-editor .de-heading-block:empty:focus::before {
+  display: inline;
+  content: "Type a Heading";
+  color: #ccc;
+  cursor: text;
+}
+.dragon-editor .de-list-block {
+  display: flex;
+  flex-direction: column;
+  row-gap: 4px;
+  padding-left: 24px;
+}
+.dragon-editor .de-list-block[data-type=unordered] {
+  list-style: disc;
+}
+.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-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-type=ordered] .de-list-sub {
+  list-style: lower-alpha;
+}
+.dragon-editor .de-list-block[data-type=ordered] .de-list-sub .de-list-sub {
+  list-style: lower-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;
+}
+.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;
+  flex-direction: column;
+  row-gap: 8px;
+}
+.dragon-editor .de-image-block.de-align-left {
+  align-items: flex-start;
+}
+.dragon-editor .de-image-block.de-align-left .de-caption {
+  text-align: left;
+}
+.dragon-editor .de-image-block.de-align-right {
+  align-items: flex-end;
+}
+.dragon-editor .de-image-block.de-align-right .de-caption {
+  text-align: right;
+}
+.dragon-editor .de-image-block .de-image-area {
+  position: relative;
+  max-width: 25%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="25"] {
+  max-width: 25%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="26"] {
+  max-width: 26%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="27"] {
+  max-width: 27%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="28"] {
+  max-width: 28%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="29"] {
+  max-width: 29%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="30"] {
+  max-width: 30%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="31"] {
+  max-width: 31%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="32"] {
+  max-width: 32%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="33"] {
+  max-width: 33%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="34"] {
+  max-width: 34%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="35"] {
+  max-width: 35%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="36"] {
+  max-width: 36%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="37"] {
+  max-width: 37%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="38"] {
+  max-width: 38%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="39"] {
+  max-width: 39%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="40"] {
+  max-width: 40%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="41"] {
+  max-width: 41%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="42"] {
+  max-width: 42%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="43"] {
+  max-width: 43%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="44"] {
+  max-width: 44%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="45"] {
+  max-width: 45%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="46"] {
+  max-width: 46%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="47"] {
+  max-width: 47%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="48"] {
+  max-width: 48%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="49"] {
+  max-width: 49%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="50"] {
+  max-width: 50%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="51"] {
+  max-width: 51%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="52"] {
+  max-width: 52%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="53"] {
+  max-width: 53%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="54"] {
+  max-width: 54%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="55"] {
+  max-width: 55%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="56"] {
+  max-width: 56%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="57"] {
+  max-width: 57%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="58"] {
+  max-width: 58%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="59"] {
+  max-width: 59%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="60"] {
+  max-width: 60%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="61"] {
+  max-width: 61%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="62"] {
+  max-width: 62%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="63"] {
+  max-width: 63%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="64"] {
+  max-width: 64%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="65"] {
+  max-width: 65%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="66"] {
+  max-width: 66%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="67"] {
+  max-width: 67%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="68"] {
+  max-width: 68%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="69"] {
+  max-width: 69%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="70"] {
+  max-width: 70%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="71"] {
+  max-width: 71%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="72"] {
+  max-width: 72%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="73"] {
+  max-width: 73%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="74"] {
+  max-width: 74%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="75"] {
+  max-width: 75%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="76"] {
+  max-width: 76%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="77"] {
+  max-width: 77%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="78"] {
+  max-width: 78%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="79"] {
+  max-width: 79%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="80"] {
+  max-width: 80%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="81"] {
+  max-width: 81%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="82"] {
+  max-width: 82%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="83"] {
+  max-width: 83%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="84"] {
+  max-width: 84%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="85"] {
+  max-width: 85%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="86"] {
+  max-width: 86%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="87"] {
+  max-width: 87%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="88"] {
+  max-width: 88%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="89"] {
+  max-width: 89%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="90"] {
+  max-width: 90%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="91"] {
+  max-width: 91%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="92"] {
+  max-width: 92%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="93"] {
+  max-width: 93%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="94"] {
+  max-width: 94%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="95"] {
+  max-width: 95%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="96"] {
+  max-width: 96%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="97"] {
+  max-width: 97%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="98"] {
+  max-width: 98%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="99"] {
+  max-width: 99%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="100"] {
+  max-width: 100%;
+}
+.dragon-editor .de-image-block .de-image-area .de-img {
+  width: 100%;
+  height: auto;
+  border-radius: var(--editor-radius-default);
+}
+.dragon-editor .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(--editor-radius-default);
+  transform: translate(-50%, -50%);
+  cursor: col-resize;
+  user-select: none;
+  z-index: 100;
+}
+.dragon-editor .de-image-block .de-image-area .de-btn.de-btn-left {
+  left: 0;
+}
+.dragon-editor .de-image-block .de-image-area .de-btn.de-btn-right {
+  left: 100%;
+}
+.dragon-editor .de-image-block .de-caption {
+  width: 100%;
+  min-height: 1.6em;
+  color: #909090;
+  text-align: center;
+  word-break: break-all;
+  outline: 0;
+}
+.dragon-editor .de-image-block .de-caption:empty:hover::before, .dragon-editor .de-image-block .de-caption:empty:focus::before {
+  display: inline;
+  content: "Type a caption";
+  color: #ccc;
+  cursor: text;
+}
+.dragon-editor .de-code-block {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 2px 0;
+  padding: 0;
+  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-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;
+}
+.dragon-editor .de-code-block .de-pre .de-code-content {
+  display: block;
+  min-height: 1.6em;
+  min-width: 100%;
+  font-family: Inconsolata, monospace, sans-serif;
+  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 .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: var(--editor-code-keyword);
+}
+.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: 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: var(--editor-code-constant);
+}
+.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: var(--editor-code-string);
+}
+.dragon-editor .de-code-block .hljs-built_in,
+.dragon-editor .de-code-block .hljs-symbol {
+  /* prettylights-syntax-variable */
+  color: var(--editor-code-variable);
+}
+.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: var(--editor-code-comment);
+}
+.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: var(--editor-code-entity-tag);
+}
+.dragon-editor .de-code-block .hljs-subst {
+  /* prettylights-syntax-storage-modifier-import */
+  color: var(--editor-code-storage-modifier-import);
+}
+.dragon-editor .de-code-block .hljs-section {
+  /* prettylights-syntax-markup-heading */
+  color: var(--editor-code-markup-heading);
+  font-weight: bold;
+}
+.dragon-editor .de-code-block .hljs-bullet {
+  /* prettylights-syntax-markup-list */
+  color: var(--editor-code-markup-list);
+}
+.dragon-editor .de-code-block .hljs-emphasis {
+  /* prettylights-syntax-markup-italic */
+  color: var(--editor-code-markup-italic);
+  font-style: italic;
+}
+.dragon-editor .de-code-block .hljs-strong {
+  /* prettylights-syntax-markup-bold */
+  color: var(--editor-code-markup-bold);
+  font-weight: bold;
+}
+.dragon-editor .de-code-block .hljs-addition {
+  /* prettylights-syntax-markup-inserted */
+  color: var(--editor-code-markup-inserted);
+  background-color: var(--editor-code-markup-inserted-bg);
+}
+.dragon-editor .de-code-block .hljs-deletion {
+  /* prettylights-syntax-markup-deleted */
+  color: var(--editor-code-markup-deleted);
+  background-color: var(--editor-code-markup-deleted-bg);
+}
+.dragon-editor .de-divider-block {
+  display: flex;
+  align-items: center;
+  height: 20px;
+}
+.dragon-editor .de-divider-block::before {
+  display: block;
+  content: "";
+  width: 100%;
+  height: 2px;
+  padding: 0;
+  background: var(--editor-divider);
+  border-radius: 2px;
+}
+.dragon-editor .de-bold {
+  font-weight: 700;
+}
+.dragon-editor .de-italic {
+  font-style: italic;
+}
+.dragon-editor .de-underline {
+  text-decoration: underline;
+}
+.dragon-editor .de-underline.de-strikethrough {
+  text-decoration: underline line-through;
+}
+.dragon-editor .de-strikethrough {
+  text-decoration: line-through;
+}
+.dragon-editor .de-strikethrough.de-underline {
+  text-decoration: line-through underline;
+}
+.dragon-editor .de-code {
+  display: inline-block;
+  padding: 2px 4px;
+  background: var(--editor-decoration-code-bg);
+  color: var(--editor-decoration-code-color);
+  border-radius: 5px;
+}
+.dragon-editor .de-align-left {
+  text-align: left;
+}
+.dragon-editor .de-align-right {
+  text-align: right;
+}
+.dragon-editor .de-align-center {
+  text-align: center;
+}
+.dragon-editor .de-align-justify {
+  text-align: justify;
+}
+.dragon-editor .de-link {
+  color: #2c95fe;
+  text-decoration: none;
+}
+</style>