dragon-editor 3.1.1 → 3.2.0

package/dist/runtime/scss/editor.css

@@ -145,28 +145,30 @@
   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;
@@ -176,18 +178,49 @@
   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;
@@ -222,8 +255,28 @@
   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;
@@ -235,9 +288,6 @@
   color: #ccc;
   cursor: text;
 }
-.dragon-editor ol.de-list-block {
-  list-style: decimal;
-}
 .dragon-editor .de-image-block {
   display: flex;
   align-items: center;
@@ -523,6 +573,262 @@
   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;
 }

package/dist/runtime/scss/viewer.css

@@ -140,6 +140,9 @@
   padding: 20px;
   line-height: 1.6;
 }
+.dragon-editor-viewer .de-block {
+  width: 100%;
+}
 .dragon-editor-viewer .de-text-block {
   min-height: 1.6em;
   outline: 0;
@@ -162,16 +165,33 @@
   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;
   outline: 0;
   list-style: inherit;
 }
-.dragon-editor-viewer ol.de-list-block {
-  list-style: decimal;
-}
 .dragon-editor-viewer .de-image-block {
   display: flex;
   align-items: center;
@@ -451,6 +471,234 @@
   text-align: center;
   outline: 0;
 }
+.dragon-editor-viewer .de-code-block {
+  display: flex;
+  flex-wrap: wrap;
+}
+.dragon-editor-viewer .de-code-block .de-filename {
+  flex: 1;
+  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] {
+  color: #24292e;
+  background: #f1f1f1;
+}
+.dragon-editor-viewer .de-code-block[data-theme=github] .de-filename {
+  color: #24292e;
+  background: #ccc;
+}
+.dragon-editor-viewer .de-code-block[data-theme=github] .de-language {
+  color: #24292e;
+  background: #ccc;
+}
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-doctag,
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-keyword,
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-meta .hljs-keyword,
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-template-tag,
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-template-variable,
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-type,
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-variable.language_ {
+  /* prettylights-syntax-keyword */
+  color: #d73a49;
+}
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-title,
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-title.class_,
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-title.class_.inherited__,
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-title.function_ {
+  /* prettylights-syntax-entity */
+  color: #6f42c1;
+}
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-attr,
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-attribute,
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-literal,
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-meta,
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-number,
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-operator,
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-variable,
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-selector-attr,
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-selector-class,
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-selector-id {
+  /* prettylights-syntax-constant */
+  color: #005cc5;
+}
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-regexp,
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-string,
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-meta .hljs-string {
+  /* prettylights-syntax-string */
+  color: #032f62;
+}
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-built_in,
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-symbol {
+  /* prettylights-syntax-variable */
+  color: #e36209;
+}
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-comment,
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-code,
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-formula {
+  /* prettylights-syntax-comment */
+  color: #6a737d;
+}
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-name,
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-quote,
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-selector-tag,
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-selector-pseudo {
+  /* prettylights-syntax-entity-tag */
+  color: #22863a;
+}
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-subst {
+  /* prettylights-syntax-storage-modifier-import */
+  color: #24292e;
+}
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-section {
+  /* prettylights-syntax-markup-heading */
+  color: #005cc5;
+  font-weight: bold;
+}
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-bullet {
+  /* prettylights-syntax-markup-list */
+  color: #735c0f;
+}
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-emphasis {
+  /* prettylights-syntax-markup-italic */
+  color: #24292e;
+  font-style: italic;
+}
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-strong {
+  /* prettylights-syntax-markup-bold */
+  color: #24292e;
+  font-weight: bold;
+}
+.dragon-editor-viewer .de-code-block[data-theme=github] .hljs-addition {
+  /* prettylights-syntax-markup-inserted */
+  color: #22863a;
+  background-color: #f0fff4;
+}
+.dragon-editor-viewer .de-code-block[data-theme=github] .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-bold {
   font-weight: 700;
 }

package/dist/runtime/store.d.ts

@@ -5,4 +5,7 @@ export declare const useEditorStore: import("pinia").StoreDefinition<"editorStor
     setParentWrapElement(value: HTMLElement | Window): void;
     setCursorData(data: DEditorCursor): void;
     setCurrentBlock(block: HTMLElement): void;
+    setContrulBar(value: HTMLDivElement): void;
+    controlBarActive(): void;
+    controlBarDeactive(): void;
 }>;