@eventuras/scribo 0.8.2 → 0.8.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @eventuras/scribo
 
+## 0.8.3
+
+### Patch Changes
+
+- 4a6097f: Enhanced dark mode support across UI components.
+
 ## 0.8.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eventuras/scribo",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/losol/eventuras.git",
@@ -39,26 +39,27 @@
     "@lexical/table": "0.35.0",
     "@lexical/utils": "0.35.0",
     "lexical": "0.35.0",
-    "prismjs": "^1.30.0"
+    "prismjs": "^1.30.0",
+    "yjs": "^13.6.29"
   },
   "devDependencies": {
     "@eventuras/eslint-config": "workspace:*",
     "@eventuras/typescript-config": "workspace:*",
     "@eventuras/vite-config": "workspace:*",
-    "@testing-library/react": "^16.3.1",
-    "@types/react": "^19.2.7",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.2.9",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.2",
-    "lightningcss": "^1.30.2",
+    "lightningcss": "^1.31.1",
     "typescript": "^5.9.3",
-    "vite": "^7.3.0",
-    "vitest": "^4.0.16"
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
   },
   "peerDependencies": {
     "react": "^19.2.3",
     "react-dom": "^19.2.3"
   },
-  "packageManager": "pnpm@10.27.0",
+  "packageManager": "pnpm@10.28.1",
   "engines": {
     "node": ">=22.0.0 <25.0.0"
   }

package/src/MarkdownEditor.css

@@ -1,4 +1,7 @@
 /**
+ *
+ * Modified from the work of Meta Platforms, Inc. and affiliates
+ *
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
@@ -17,6 +20,10 @@
   font-weight: 400;
 }
 
+[data-theme="dark"] .editor-shell {
+  color: #e5e5e5;
+}
+
 .editor-shell .editor-container {
   background: #fff;
   position: relative;
@@ -25,6 +32,10 @@
   border-bottom-right-radius: 10px;
 }
 
+[data-theme="dark"] .editor-shell .editor-container {
+  background: rgba(255, 255, 255, 0.05);
+}
+
 .editor-shell .editor-container.tree-view {
   border-radius: 0;
 }
@@ -101,6 +112,10 @@
   border-left: 3px solid #ddd;
 }
 
+[data-theme="dark"] .editor blockquote {
+  border-left-color: #555;
+}
+
 ul {
   list-style-type: disc;
   padding: 10px 0 !important;
@@ -188,6 +203,11 @@ i.redo {
   background-color: rgb(223, 232, 250);
 }
 
+[data-theme="dark"] .link-editor .button.active,
+[data-theme="dark"] .toolbar .button.active {
+  background-color: rgba(100, 150, 255, 0.3);
+}
+
 .link-editor .link-input {
   display: block;
   width: calc(100% - 75px);
@@ -204,6 +224,11 @@ i.redo {
   font-family: inherit;
 }
 
+[data-theme="dark"] .link-editor .link-input {
+  background-color: rgba(255, 255, 255, 0.1);
+  color: #e5e5e5;
+}
+
 .link-editor .link-view {
   display: block;
   width: calc(100% - 24px);
@@ -340,6 +365,14 @@ i.redo {
   background-color: #fff;
 }
 
+[data-theme="dark"] .dropdown {
+  background-color: rgba(30, 30, 30, 0.95);
+  box-shadow:
+    0 12px 28px 0 rgba(0, 0, 0, 0.6),
+    0 2px 4px 0 rgba(0, 0, 0, 0.3),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+}
+
 .dropdown .item {
   margin: 0 8px 0 8px;
   padding: 8px;
@@ -359,6 +392,11 @@ i.redo {
   min-width: 100px;
 }
 
+[data-theme="dark"] .dropdown .item {
+  color: #e5e5e5;
+  background-color: transparent;
+}
+
 .dropdown .item.fontsize-item,
 .dropdown .item.fontsize-item .text {
   min-width: unset;
@@ -383,6 +421,10 @@ i.redo {
   background-color: #eee;
 }
 
+[data-theme="dark"] .dropdown .item:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
 .dropdown .item .text {
   display: flex;
   line-height: 20px;
@@ -402,6 +444,10 @@ i.redo {
   background-repeat: no-repeat;
 }
 
+[data-theme="dark"] .dropdown .item .icon {
+  filter: invert(1);
+}
+
 .dropdown .divider {
   width: auto;
   background-color: #eee;
@@ -409,6 +455,10 @@ i.redo {
   height: 1px;
 }
 
+[data-theme="dark"] .dropdown .divider {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
 @media screen and (max-width: 1100px) {
   .dropdown-button-text {
     display: none !important;
@@ -835,17 +885,31 @@ i.chevron-down {
   cursor: pointer;
 }
 
+[data-theme="dark"] .action-button {
+  background-color: rgba(255, 255, 255, 0.1);
+  color: #e5e5e5;
+}
+
 .action-button:hover {
   background-color: #ddd;
   color: #000;
 }
 
+[data-theme="dark"] .action-button:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+  color: #fff;
+}
+
 button.action-button:disabled {
   opacity: 0.6;
   background: #eee;
   cursor: not-allowed;
 }
 
+[data-theme="dark"] button.action-button:disabled {
+  background: rgba(255, 255, 255, 0.05);
+}
+
 .ltr {
   text-align: left;
 }
@@ -869,6 +933,10 @@ button.action-button:disabled {
   z-index: 2;
 }
 
+[data-theme="dark"] .toolbar {
+  background: rgba(255, 255, 255, 0.1);
+}
+
 button.toolbar-item {
   border: 0;
   display: flex;
@@ -900,6 +968,10 @@ button.toolbar-item i.format {
   opacity: 0.6;
 }
 
+[data-theme="dark"] button.toolbar-item i.format {
+  filter: invert(1);
+}
+
 button.toolbar-item:disabled .icon,
 button.toolbar-item:disabled .text,
 button.toolbar-item:disabled i.format,
@@ -919,6 +991,10 @@ button.toolbar-item.active i {
   background-color: #eee;
 }
 
+[data-theme="dark"] .toolbar-item:hover:not([disabled]) {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
 .toolbar-item.font-family .text {
   display: block;
   max-width: 40px;
@@ -941,6 +1017,10 @@ button.toolbar-item.active i {
   padding-right: 10px;
 }
 
+[data-theme="dark"] .toolbar .toolbar-item .text {
+  color: #bbb;
+}
+
 .toolbar .toolbar-item .icon {
   display: flex;
   width: 20px;
@@ -951,6 +1031,10 @@ button.toolbar-item.active i {
   background-size: contain;
 }
 
+[data-theme="dark"] .toolbar .toolbar-item .icon {
+  filter: invert(1);
+}
+
 .toolbar i.chevron-down,
 .toolbar-item i.chevron-down {
   margin-top: 3px;
@@ -960,6 +1044,11 @@ button.toolbar-item.active i {
   user-select: none;
 }
 
+[data-theme="dark"] .toolbar i.chevron-down,
+[data-theme="dark"] .toolbar-item i.chevron-down {
+  filter: invert(1);
+}
+
 .toolbar i.chevron-down.inside {
   width: 16px;
   height: 16px;
@@ -1146,13 +1235,13 @@ hr.selected {
   z-index: 3;
 }
 
-.PlaygroundEditorTheme__blockCursor {
+.EditorTheme__blockCursor {
   display: block;
   pointer-events: none;
   position: absolute;
 }
 
-.PlaygroundEditorTheme__blockCursor:after {
+.EditorTheme__blockCursor:after {
   content: "";
   display: block;
   position: absolute;

package/src/MarkdownEditor.tsx

@@ -3,9 +3,7 @@ import {
   $convertToMarkdownString,
   TRANSFORMERS,
 } from "@lexical/markdown";
-import {
-  $getRoot,
-} from 'lexical';
+import { $getRoot } from 'lexical';
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
 import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
 import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
@@ -19,6 +17,7 @@ import EditorTheme from "./themes/EditorTheme";
 import ContentEditable from "./ui/ContentEditable";
 import Placeholder from "./ui/Placeholder";
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin';
 import LinkPlugin from "./plugins/LinkPlugin";
 import FloatingLinkEditorPlugin from "./plugins/FloatingLinkEditorPlugin";
 import AutoLinkPlugin from "./plugins/AutoLinkPlugin";
@@ -65,9 +64,13 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = (props) => {
       throw error;
     },
     theme: EditorTheme,
-    editorState: () => {
-      $convertFromMarkdownString(props.initialMarkdown ?? "", TRANSFORMERS);
-    },
+    editorState: props.initialMarkdown
+      ? () => {
+          // Unescape backslash-escaped markdown characters
+          const unescapedMarkdown = props.initialMarkdown!.replace(/\\([*_`\[\]()#+-])/g, '$1');
+          $convertFromMarkdownString(unescapedMarkdown, TRANSFORMERS);
+        }
+      : undefined,
   };
 
   return (
@@ -77,6 +80,7 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = (props) => {
           <ToolbarPlugin setIsLinkEditMode={setIsLinkEditMode} />
           <div className="editor-container rich-text">
             <HistoryPlugin externalHistoryState={historyState} />
+            <MarkdownShortcutPlugin transformers={TRANSFORMERS} />
             <AutoLinkPlugin />
             <LinkPlugin />
             <FloatingLinkEditorPlugin

package/src/themes/EditorTheme.css

@@ -6,20 +6,20 @@
  *
  *
  */
-.PlaygroundEditorTheme__ltr {
+.EditorTheme__ltr {
   text-align: left;
 }
 
-.PlaygroundEditorTheme__rtl {
+.EditorTheme__rtl {
   text-align: right;
 }
 
-.PlaygroundEditorTheme__paragraph {
+.EditorTheme__paragraph {
   margin: 0;
   position: relative;
 }
 
-.PlaygroundEditorTheme__quote {
+.EditorTheme__quote {
   margin: 0;
   margin-left: 20px;
   margin-bottom: 10px;
@@ -31,7 +31,7 @@
   padding-left: 16px;
 }
 
-.PlaygroundEditorTheme__h1 {
+.EditorTheme__h1 {
   font-size: 32px;
   line-height: 1.3;
   padding-top: 2rem;
@@ -41,7 +41,11 @@
   margin: 0;
 }
 
-.PlaygroundEditorTheme__h2 {
+[data-theme="dark"] .EditorTheme__h1 {
+  color: #ffffff;
+}
+
+.EditorTheme__h2 {
   font-size: 24px;
   color: #406280;
   padding-top: 2rem;
@@ -50,7 +54,11 @@
   margin: 0;
 }
 
-.PlaygroundEditorTheme__h3 {
+[data-theme="dark"] .EditorTheme__h2 {
+  color: #ffffff;
+}
+
+.EditorTheme__h3 {
   font-size: 24px;
   color: #406280;
   padding-top: 2rem;
@@ -59,7 +67,11 @@
   margin: 0;
 }
 
-.PlaygroundEditorTheme__h4 {
+[data-theme="dark"] .EditorTheme__h3 {
+  color: #ffffff;
+}
+
+.EditorTheme__h4 {
   font-size: 16px;
   color: #406280;
   padding-top: 1.5rem;
@@ -68,63 +80,67 @@
   margin: 0;
 }
 
-.PlaygroundEditorTheme__indent {
+[data-theme="dark"] .EditorTheme__h4 {
+  color: #ffffff;
+}
+
+.EditorTheme__indent {
   --lexical-indent-base-value: 40px;
 }
 
-.PlaygroundEditorTheme__textBold {
+.EditorTheme__textBold {
   font-weight: bold;
 }
 
-.PlaygroundEditorTheme__textItalic {
+.EditorTheme__textItalic {
   font-style: italic;
 }
 
-.PlaygroundEditorTheme__textUnderline {
+.EditorTheme__textUnderline {
   text-decoration: underline;
 }
 
-.PlaygroundEditorTheme__textStrikethrough {
+.EditorTheme__textStrikethrough {
   text-decoration: line-through;
 }
 
-.PlaygroundEditorTheme__textUnderlineStrikethrough {
+.EditorTheme__textUnderlineStrikethrough {
   text-decoration: underline line-through;
 }
 
-.PlaygroundEditorTheme__textSubscript {
+.EditorTheme__textSubscript {
   font-size: 0.8em;
   vertical-align: sub !important;
 }
 
-.PlaygroundEditorTheme__textSuperscript {
+.EditorTheme__textSuperscript {
   font-size: 0.8em;
   vertical-align: super;
 }
 
-.PlaygroundEditorTheme__textCode {
+.EditorTheme__textCode {
   background-color: rgb(240, 242, 245);
   padding: 1px 0.25rem;
   font-family: Menlo, Consolas, Monaco, monospace;
   font-size: 94%;
 }
 
-.PlaygroundEditorTheme__hashtag {
+.EditorTheme__hashtag {
   background-color: rgba(88, 144, 255, 0.15);
   border-bottom: 1px solid rgba(88, 144, 255, 0.3);
 }
 
-.PlaygroundEditorTheme__link {
+.EditorTheme__link {
   color: rgb(33, 111, 219);
   text-decoration: none;
 }
 
-.PlaygroundEditorTheme__link:hover {
+.EditorTheme__link:hover {
   text-decoration: underline;
   cursor: pointer;
 }
 
-.PlaygroundEditorTheme__code {
+.EditorTheme__code {
   background-color: rgb(240, 242, 245);
   font-family: Menlo, Consolas, Monaco, monospace;
   display: block;
@@ -139,7 +155,7 @@
   tab-size: 2;
 }
 
-.PlaygroundEditorTheme__code:before {
+.EditorTheme__code:before {
   content: attr(data-gutter);
   position: absolute;
   background-color: #eee;
@@ -153,57 +169,57 @@
   min-width: 25px;
 }
 
-.PlaygroundEditorTheme__characterLimit {
+.EditorTheme__characterLimit {
   display: inline;
   background-color: #ffbbbb !important;
 }
 
-.PlaygroundEditorTheme__ol1 {
+.EditorTheme__ol1 {
   padding: 0;
   margin: 0;
   list-style-position: inside;
 }
 
-.PlaygroundEditorTheme__ol2 {
+.EditorTheme__ol2 {
   padding: 0;
   margin: 0;
   list-style-type: upper-alpha;
   list-style-position: inside;
 }
 
-.PlaygroundEditorTheme__ol3 {
+.EditorTheme__ol3 {
   padding: 0;
   margin: 0;
   list-style-type: lower-alpha;
   list-style-position: inside;
 }
 
-.PlaygroundEditorTheme__ol4 {
+.EditorTheme__ol4 {
   padding: 0;
   margin: 0;
   list-style-type: upper-roman;
   list-style-position: inside;
 }
 
-.PlaygroundEditorTheme__ol5 {
+.EditorTheme__ol5 {
   padding: 0;
   margin: 0;
   list-style-type: lower-roman;
   list-style-position: inside;
 }
 
-.PlaygroundEditorTheme__ul {
+.EditorTheme__ul {
   padding: 0;
   margin: 0;
   list-style-position: inside;
 }
 
-.PlaygroundEditorTheme__listItem {
+.EditorTheme__listItem {
   margin: 0 32px;
 }
 
-.PlaygroundEditorTheme__listItemChecked,
-.PlaygroundEditorTheme__listItemUnchecked {
+.EditorTheme__listItemChecked,
+.EditorTheme__listItemUnchecked {
   position: relative;
   margin-left: 8px;
   margin-right: 8px;
@@ -213,12 +229,12 @@
   outline: none;
 }
 
-.PlaygroundEditorTheme__listItemChecked {
+.EditorTheme__listItemChecked {
   text-decoration: line-through;
 }
 
-.PlaygroundEditorTheme__listItemUnchecked:before,
-.PlaygroundEditorTheme__listItemChecked:before {
+.EditorTheme__listItemUnchecked:before,
+.EditorTheme__listItemChecked:before {
   content: "";
   width: 16px;
   height: 16px;
@@ -230,31 +246,31 @@
   position: absolute;
 }
 
-.PlaygroundEditorTheme__listItemUnchecked[dir="rtl"]:before,
-.PlaygroundEditorTheme__listItemChecked[dir="rtl"]:before {
+.EditorTheme__listItemUnchecked[dir="rtl"]:before,
+.EditorTheme__listItemChecked[dir="rtl"]:before {
   left: auto;
   right: 0;
 }
 
-.PlaygroundEditorTheme__listItemUnchecked:focus:before,
-.PlaygroundEditorTheme__listItemChecked:focus:before {
+.EditorTheme__listItemUnchecked:focus:before,
+.EditorTheme__listItemChecked:focus:before {
   box-shadow: 0 0 0 2px #a6cdfe;
   border-radius: 2px;
 }
 
-.PlaygroundEditorTheme__listItemUnchecked:before {
+.EditorTheme__listItemUnchecked:before {
   border: 1px solid #999;
   border-radius: 2px;
 }
 
-.PlaygroundEditorTheme__listItemChecked:before {
+.EditorTheme__listItemChecked:before {
   border: 1px solid rgb(61, 135, 245);
   border-radius: 2px;
   background-color: #3d87f5;
   background-repeat: no-repeat;
 }
 
-.PlaygroundEditorTheme__listItemChecked:after {
+.EditorTheme__listItemChecked:after {
   content: "";
   cursor: pointer;
   border-color: #fff;
@@ -270,83 +286,83 @@
   border-width: 0 2px 2px 0;
 }
 
-.PlaygroundEditorTheme__nestedListItem {
+.EditorTheme__nestedListItem {
   list-style-type: none;
 }
 
-.PlaygroundEditorTheme__nestedListItem:before,
-.PlaygroundEditorTheme__nestedListItem:after {
+.EditorTheme__nestedListItem:before,
+.EditorTheme__nestedListItem:after {
   display: none;
 }
 
-.PlaygroundEditorTheme__tokenComment {
+.EditorTheme__tokenComment {
   color: slategray;
 }
 
-.PlaygroundEditorTheme__tokenPunctuation {
+.EditorTheme__tokenPunctuation {
   color: #999;
 }
 
-.PlaygroundEditorTheme__tokenProperty {
+.EditorTheme__tokenProperty {
   color: #905;
 }
 
-.PlaygroundEditorTheme__tokenSelector {
+.EditorTheme__tokenSelector {
   color: #690;
 }
 
-.PlaygroundEditorTheme__tokenOperator {
+.EditorTheme__tokenOperator {
   color: #9a6e3a;
 }
 
-.PlaygroundEditorTheme__tokenAttr {
+.EditorTheme__tokenAttr {
   color: #07a;
 }
 
-.PlaygroundEditorTheme__tokenVariable {
+.EditorTheme__tokenVariable {
   color: #e90;
 }
 
-.PlaygroundEditorTheme__tokenFunction {
+.EditorTheme__tokenFunction {
   color: #dd4a68;
 }
 
-.PlaygroundEditorTheme__mark {
+.EditorTheme__mark {
   background: rgba(255, 212, 0, 0.14);
   border-bottom: 2px solid rgba(255, 212, 0, 0.3);
   padding-bottom: 2px;
 }
 
-.PlaygroundEditorTheme__markOverlap {
+.EditorTheme__markOverlap {
   background: rgba(255, 212, 0, 0.3);
   border-bottom: 2px solid rgba(255, 212, 0, 0.7);
 }
 
-.PlaygroundEditorTheme__mark.selected {
+.EditorTheme__mark.selected {
   background: rgba(255, 212, 0, 0.5);
   border-bottom: 2px solid rgba(255, 212, 0, 1);
 }
 
-.PlaygroundEditorTheme__markOverlap.selected {
+.EditorTheme__markOverlap.selected {
   background: rgba(255, 212, 0, 0.7);
   border-bottom: 2px solid rgba(255, 212, 0, 0.7);
 }
 
-.PlaygroundEditorTheme__embedBlock {
+.EditorTheme__embedBlock {
   user-select: none;
 }
 
-.PlaygroundEditorTheme__embedBlockFocus {
+.EditorTheme__embedBlockFocus {
   outline: 2px solid rgb(60, 132, 244);
 }
 
-.PlaygroundEditorTheme__layoutContaner {
+.EditorTheme__layoutContaner {
   display: grid;
   gap: 10px;
   margin: 10px 0;
 }
 
-.PlaygroundEditorTheme__layoutItem {
+.EditorTheme__layoutItem {
   border: 1px dashed #ddd;
   padding: 8px 16px;
 }

package/src/themes/EditorTheme.ts

@@ -11,107 +11,107 @@ import "./EditorTheme.css";
 import type { EditorThemeClasses } from "lexical";
 
 const theme: EditorThemeClasses = {
-  blockCursor: "PlaygroundEditorTheme__blockCursor",
-  characterLimit: "PlaygroundEditorTheme__characterLimit",
-  code: "PlaygroundEditorTheme__code",
+  blockCursor: "EditorTheme__blockCursor",
+  characterLimit: "EditorTheme__characterLimit",
+  code: "EditorTheme__code",
   codeHighlight: {
-    atrule: "PlaygroundEditorTheme__tokenAttr",
-    attr: "PlaygroundEditorTheme__tokenAttr",
-    boolean: "PlaygroundEditorTheme__tokenProperty",
-    builtin: "PlaygroundEditorTheme__tokenSelector",
-    cdata: "PlaygroundEditorTheme__tokenComment",
-    char: "PlaygroundEditorTheme__tokenSelector",
-    class: "PlaygroundEditorTheme__tokenFunction",
-    "class-name": "PlaygroundEditorTheme__tokenFunction",
-    comment: "PlaygroundEditorTheme__tokenComment",
-    constant: "PlaygroundEditorTheme__tokenProperty",
-    deleted: "PlaygroundEditorTheme__tokenProperty",
-    doctype: "PlaygroundEditorTheme__tokenComment",
-    entity: "PlaygroundEditorTheme__tokenOperator",
-    function: "PlaygroundEditorTheme__tokenFunction",
-    important: "PlaygroundEditorTheme__tokenVariable",
-    inserted: "PlaygroundEditorTheme__tokenSelector",
-    keyword: "PlaygroundEditorTheme__tokenAttr",
-    namespace: "PlaygroundEditorTheme__tokenVariable",
-    number: "PlaygroundEditorTheme__tokenProperty",
-    operator: "PlaygroundEditorTheme__tokenOperator",
-    prolog: "PlaygroundEditorTheme__tokenComment",
-    property: "PlaygroundEditorTheme__tokenProperty",
-    punctuation: "PlaygroundEditorTheme__tokenPunctuation",
-    regex: "PlaygroundEditorTheme__tokenVariable",
-    selector: "PlaygroundEditorTheme__tokenSelector",
-    string: "PlaygroundEditorTheme__tokenSelector",
-    symbol: "PlaygroundEditorTheme__tokenProperty",
-    tag: "PlaygroundEditorTheme__tokenProperty",
-    url: "PlaygroundEditorTheme__tokenOperator",
-    variable: "PlaygroundEditorTheme__tokenVariable",
+    atrule: "EditorTheme__tokenAttr",
+    attr: "EditorTheme__tokenAttr",
+    boolean: "EditorTheme__tokenProperty",
+    builtin: "EditorTheme__tokenSelector",
+    cdata: "EditorTheme__tokenComment",
+    char: "EditorTheme__tokenSelector",
+    class: "EditorTheme__tokenFunction",
+    "class-name": "EditorTheme__tokenFunction",
+    comment: "EditorTheme__tokenComment",
+    constant: "EditorTheme__tokenProperty",
+    deleted: "EditorTheme__tokenProperty",
+    doctype: "EditorTheme__tokenComment",
+    entity: "EditorTheme__tokenOperator",
+    function: "EditorTheme__tokenFunction",
+    important: "EditorTheme__tokenVariable",
+    inserted: "EditorTheme__tokenSelector",
+    keyword: "EditorTheme__tokenAttr",
+    namespace: "EditorTheme__tokenVariable",
+    number: "EditorTheme__tokenProperty",
+    operator: "EditorTheme__tokenOperator",
+    prolog: "EditorTheme__tokenComment",
+    property: "EditorTheme__tokenProperty",
+    punctuation: "EditorTheme__tokenPunctuation",
+    regex: "EditorTheme__tokenVariable",
+    selector: "EditorTheme__tokenSelector",
+    string: "EditorTheme__tokenSelector",
+    symbol: "EditorTheme__tokenProperty",
+    tag: "EditorTheme__tokenProperty",
+    url: "EditorTheme__tokenOperator",
+    variable: "EditorTheme__tokenVariable",
   },
   embedBlock: {
-    base: "PlaygroundEditorTheme__embedBlock",
-    focus: "PlaygroundEditorTheme__embedBlockFocus",
+    base: "EditorTheme__embedBlock",
+    focus: "EditorTheme__embedBlockFocus",
   },
-  hashtag: "PlaygroundEditorTheme__hashtag",
+  hashtag: "EditorTheme__hashtag",
   heading: {
-    h1: "PlaygroundEditorTheme__h1",
-    h2: "PlaygroundEditorTheme__h2",
-    h3: "PlaygroundEditorTheme__h3",
-    h4: "PlaygroundEditorTheme__h4",
-    h5: "PlaygroundEditorTheme__h5",
-    h6: "PlaygroundEditorTheme__h6",
+    h1: "EditorTheme__h1",
+    h2: "EditorTheme__h2",
+    h3: "EditorTheme__h3",
+    h4: "EditorTheme__h4",
+    h5: "EditorTheme__h5",
+    h6: "EditorTheme__h6",
   },
   image: "editor-image",
-  indent: "PlaygroundEditorTheme__indent",
+  indent: "EditorTheme__indent",
   inlineImage: "inline-editor-image",
-  layoutContainer: "PlaygroundEditorTheme__layoutContaner",
-  layoutItem: "PlaygroundEditorTheme__layoutItem",
-  link: "PlaygroundEditorTheme__link",
+  layoutContainer: "EditorTheme__layoutContaner",
+  layoutItem: "EditorTheme__layoutItem",
+  link: "EditorTheme__link",
   list: {
-    listitem: "PlaygroundEditorTheme__listItem",
-    listitemChecked: "PlaygroundEditorTheme__listItemChecked",
-    listitemUnchecked: "PlaygroundEditorTheme__listItemUnchecked",
+    listitem: "EditorTheme__listItem",
+    listitemChecked: "EditorTheme__listItemChecked",
+    listitemUnchecked: "EditorTheme__listItemUnchecked",
     nested: {
-      listitem: "PlaygroundEditorTheme__nestedListItem",
+      listitem: "EditorTheme__nestedListItem",
     },
     olDepth: [
-      "PlaygroundEditorTheme__ol1",
-      "PlaygroundEditorTheme__ol2",
-      "PlaygroundEditorTheme__ol3",
-      "PlaygroundEditorTheme__ol4",
-      "PlaygroundEditorTheme__ol5",
+      "EditorTheme__ol1",
+      "EditorTheme__ol2",
+      "EditorTheme__ol3",
+      "EditorTheme__ol4",
+      "EditorTheme__ol5",
     ],
-    ul: "PlaygroundEditorTheme__ul",
+    ul: "EditorTheme__ul",
   },
-  ltr: "PlaygroundEditorTheme__ltr",
-  mark: "PlaygroundEditorTheme__mark",
-  markOverlap: "PlaygroundEditorTheme__markOverlap",
-  paragraph: "PlaygroundEditorTheme__paragraph",
-  quote: "PlaygroundEditorTheme__quote",
-  rtl: "PlaygroundEditorTheme__rtl",
-  table: "PlaygroundEditorTheme__table",
-  tableAddColumns: "PlaygroundEditorTheme__tableAddColumns",
-  tableAddRows: "PlaygroundEditorTheme__tableAddRows",
-  tableCell: "PlaygroundEditorTheme__tableCell",
-  tableCellActionButton: "PlaygroundEditorTheme__tableCellActionButton",
+  ltr: "EditorTheme__ltr",
+  mark: "EditorTheme__mark",
+  markOverlap: "EditorTheme__markOverlap",
+  paragraph: "EditorTheme__paragraph",
+  quote: "EditorTheme__quote",
+  rtl: "EditorTheme__rtl",
+  table: "EditorTheme__table",
+  tableAddColumns: "EditorTheme__tableAddColumns",
+  tableAddRows: "EditorTheme__tableAddRows",
+  tableCell: "EditorTheme__tableCell",
+  tableCellActionButton: "EditorTheme__tableCellActionButton",
   tableCellActionButtonContainer:
-    "PlaygroundEditorTheme__tableCellActionButtonContainer",
-  tableCellEditing: "PlaygroundEditorTheme__tableCellEditing",
-  tableCellHeader: "PlaygroundEditorTheme__tableCellHeader",
-  tableCellPrimarySelected: "PlaygroundEditorTheme__tableCellPrimarySelected",
-  tableCellResizer: "PlaygroundEditorTheme__tableCellResizer",
-  tableCellSelected: "PlaygroundEditorTheme__tableCellSelected",
-  tableCellSortedIndicator: "PlaygroundEditorTheme__tableCellSortedIndicator",
-  tableResizeRuler: "PlaygroundEditorTheme__tableCellResizeRuler",
-  tableSelected: "PlaygroundEditorTheme__tableSelected",
-  tableSelection: "PlaygroundEditorTheme__tableSelection",
+    "EditorTheme__tableCellActionButtonContainer",
+  tableCellEditing: "EditorTheme__tableCellEditing",
+  tableCellHeader: "EditorTheme__tableCellHeader",
+  tableCellPrimarySelected: "EditorTheme__tableCellPrimarySelected",
+  tableCellResizer: "EditorTheme__tableCellResizer",
+  tableCellSelected: "EditorTheme__tableCellSelected",
+  tableCellSortedIndicator: "EditorTheme__tableCellSortedIndicator",
+  tableResizeRuler: "EditorTheme__tableCellResizeRuler",
+  tableSelected: "EditorTheme__tableSelected",
+  tableSelection: "EditorTheme__tableSelection",
   text: {
-    bold: "PlaygroundEditorTheme__textBold",
-    code: "PlaygroundEditorTheme__textCode",
-    italic: "PlaygroundEditorTheme__textItalic",
-    strikethrough: "PlaygroundEditorTheme__textStrikethrough",
-    subscript: "PlaygroundEditorTheme__textSubscript",
-    superscript: "PlaygroundEditorTheme__textSuperscript",
-    underline: "PlaygroundEditorTheme__textUnderline",
-    underlineStrikethrough: "PlaygroundEditorTheme__textUnderlineStrikethrough",
+    bold: "EditorTheme__textBold",
+    code: "EditorTheme__textCode",
+    italic: "EditorTheme__textItalic",
+    strikethrough: "EditorTheme__textStrikethrough",
+    subscript: "EditorTheme__textSubscript",
+    superscript: "EditorTheme__textSuperscript",
+    underline: "EditorTheme__textUnderline",
+    underlineStrikethrough: "EditorTheme__textUnderlineStrikethrough",
   },
 };