@blocknote/core 0.17.1 → 0.19.0

package/src/blocks/ListItemBlockContent/NumberedListItemBlockContent/NumberedListIndexingPlugin.ts

@@ -27,24 +27,30 @@ export const NumberedListIndexingPlugin = () => {
             node,
           });
 
+          if (!blockInfo.isBlockContainer) {
+            throw new Error("impossible");
+          }
+
           // Checks if this block is the start of a new ordered list, i.e. if it's the first block in the document, the
           // first block in its nesting level, or the previous block is not an ordered list item.
 
           const prevBlock = tr.doc.resolve(
-            blockInfo.blockContainer.beforePos
+            blockInfo.bnBlock.beforePos
           ).nodeBefore;
 
           if (prevBlock) {
             const prevBlockInfo = getBlockInfo({
-              posBeforeNode:
-                blockInfo.blockContainer.beforePos - prevBlock.nodeSize,
+              posBeforeNode: blockInfo.bnBlock.beforePos - prevBlock.nodeSize,
               node: prevBlock,
             });
 
             const isPrevBlockOrderedListItem =
-              prevBlockInfo.blockContent.node.type.name === "numberedListItem";
+              prevBlockInfo.blockNoteType === "numberedListItem";
 
             if (isPrevBlockOrderedListItem) {
+              if (!prevBlockInfo.isBlockContainer) {
+                throw new Error("impossible");
+              }
               const prevBlockIndex =
                 prevBlockInfo.blockContent.node.attrs["index"];
 
@@ -59,6 +65,7 @@ export const NumberedListIndexingPlugin = () => {
             modified = true;
 
             tr.setNodeMarkup(blockInfo.blockContent.beforePos, undefined, {
+              ...contentNode.attrs,
               index: newIndex,
             });
           }

package/src/blocks/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.ts

@@ -49,7 +49,7 @@ const NumberedListItemBlockContent = createStronglyTypedTiptapNode({
             .command(
               updateBlockCommand(
                 this.options.editor,
-                blockInfo.blockContainer.beforePos,
+                blockInfo.bnBlock.beforePos,
                 {
                   type: "numberedListItem",
                   props: {},
@@ -73,14 +73,10 @@ const NumberedListItemBlockContent = createStronglyTypedTiptapNode({
         }
 
         return this.editor.commands.command(
-          updateBlockCommand(
-            this.options.editor,
-            blockInfo.blockContainer.beforePos,
-            {
-              type: "numberedListItem",
-              props: {},
-            }
-          )
+          updateBlockCommand(this.options.editor, blockInfo.bnBlock.beforePos, {
+            type: "numberedListItem",
+            props: {},
+          })
         );
       },
     };

package/src/blocks/ParagraphBlockContent/ParagraphBlockContent.ts

@@ -25,14 +25,10 @@ export const ParagraphBlockContent = createStronglyTypedTiptapNode({
         }
 
         return this.editor.commands.command(
-          updateBlockCommand(
-            this.options.editor,
-            blockInfo.blockContainer.beforePos,
-            {
-              type: "paragraph",
-              props: {},
-            }
-          )
+          updateBlockCommand(this.options.editor, blockInfo.bnBlock.beforePos, {
+            type: "paragraph",
+            props: {},
+          })
         );
       },
     };

package/src/blocks/TableBlockContent/TableBlockContent.ts

@@ -1,17 +1,22 @@
-import { mergeAttributes, Node } from "@tiptap/core";
+import { Node } from "@tiptap/core";
 import { TableCell } from "@tiptap/extension-table-cell";
 import { TableHeader } from "@tiptap/extension-table-header";
 import { TableRow } from "@tiptap/extension-table-row";
+import { Node as PMNode } from "prosemirror-model";
+import { TableView } from "prosemirror-tables";
+
 import {
   createBlockSpecFromStronglyTypedTiptapNode,
   createStronglyTypedTiptapNode,
 } from "../../schema/index.js";
+import { mergeCSSClasses } from "../../util/browser.js";
 import { createDefaultBlockDOMOutputSpec } from "../defaultBlockHelpers.js";
 import { defaultProps } from "../defaultProps.js";
-import { TableExtension } from "./TableExtension.js";
+import { EMPTY_CELL_WIDTH, TableExtension } from "./TableExtension.js";
 
 export const tablePropSchema = {
-  ...defaultProps,
+  backgroundColor: defaultProps.backgroundColor,
+  textColor: defaultProps.textColor,
 };
 
 export const TableBlockContent = createStronglyTypedTiptapNode({
@@ -37,6 +42,69 @@ export const TableBlockContent = createStronglyTypedTiptapNode({
       this.options.domAttributes?.inlineContent || {}
     );
   },
+
+  // This node view is needed for the `columnResizing` plugin. By default, the
+  // plugin adds its own node view, which overrides how the node is rendered vs
+  // `renderHTML`. This means that the wrapping `blockContent` HTML element is
+  // no longer rendered. The `columnResizing` plugin uses the `TableView` as its
+  // default node view. `BlockNoteTableView` extends it by wrapping it in a
+  // `blockContent` element, so the DOM structure is consistent with other block
+  // types.
+  addNodeView() {
+    return ({ node, HTMLAttributes }) => {
+      class BlockNoteTableView extends TableView {
+        constructor(
+          public node: PMNode,
+          public cellMinWidth: number,
+          public blockContentHTMLAttributes: Record<string, string>
+        ) {
+          super(node, cellMinWidth);
+
+          const blockContent = document.createElement("div");
+          blockContent.className = mergeCSSClasses(
+            "bn-block-content",
+            blockContentHTMLAttributes.class
+          );
+          blockContent.setAttribute("data-content-type", "table");
+          for (const [attribute, value] of Object.entries(
+            blockContentHTMLAttributes
+          )) {
+            if (attribute !== "class") {
+              blockContent.setAttribute(attribute, value);
+            }
+          }
+
+          const tableWrapper = this.dom;
+
+          const tableWrapperInner = document.createElement("div");
+          tableWrapperInner.className = "tableWrapper-inner";
+          tableWrapperInner.appendChild(tableWrapper.firstChild!);
+
+          tableWrapper.appendChild(tableWrapperInner);
+
+          blockContent.appendChild(tableWrapper);
+          const floatingContainer = document.createElement("div");
+          floatingContainer.className = "table-widgets-container";
+          floatingContainer.style.position = "relative";
+          tableWrapper.appendChild(floatingContainer);
+
+          this.dom = blockContent;
+        }
+
+        ignoreMutation(record: MutationRecord): boolean {
+          return (
+            !(record.target as HTMLElement).closest(".tableWrapper-inner") ||
+            super.ignoreMutation(record)
+          );
+        }
+      }
+
+      return new BlockNoteTableView(node, EMPTY_CELL_WIDTH, {
+        ...(this.options.domAttributes?.blockContent || {}),
+        ...HTMLAttributes,
+      });
+    };
+  },
 });
 
 const TableParagraph = Node.create({
@@ -46,6 +114,17 @@ const TableParagraph = Node.create({
 
   parseHTML() {
     return [
+      {
+        preserveWhitespace: "full",
+        // set this rule as high priority so it takes precedence over the default paragraph rule,
+        // but only if we're in the tableContent context
+        priority: 210,
+        context: "tableContent",
+        tag: "p",
+        getAttrs: (_element) => {
+          return {};
+        },
+      },
       {
         tag: "p",
         getAttrs: (element) => {
@@ -70,11 +149,7 @@ const TableParagraph = Node.create({
   },
 
   renderHTML({ HTMLAttributes }) {
-    return [
-      "p",
-      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
-      0,
-    ];
+    return ["p", HTMLAttributes, 0];
   },
 });
 

package/src/blocks/TableBlockContent/TableExtension.ts

@@ -1,13 +1,22 @@
 import { callOrReturn, Extension, getExtensionField } from "@tiptap/core";
 import { columnResizing, tableEditing } from "prosemirror-tables";
 
+export const RESIZE_MIN_WIDTH = 35;
+export const EMPTY_CELL_WIDTH = 120;
+export const EMPTY_CELL_HEIGHT = 31;
+
 export const TableExtension = Extension.create({
   name: "BlockNoteTableExtension",
 
   addProseMirrorPlugins: () => {
     return [
       columnResizing({
-        cellMinWidth: 100,
+        cellMinWidth: RESIZE_MIN_WIDTH,
+        defaultCellMinWidth: EMPTY_CELL_WIDTH,
+        // We set this to null as we implement our own node view in the table
+        // block content. This node view is the same as what's used by default,
+        // but is wrapped in a `blockContent` HTML element.
+        View: null,
       }),
       tableEditing(),
     ];

package/src/blocks/VideoBlockContent/VideoBlockContent.ts

@@ -18,6 +18,9 @@ import {
 } from "../FileBlockContent/fileBlockHelpers.js";
 import { parseVideoElement } from "./videoBlockHelpers.js";
 
+export const FILE_VIDEO_ICON_SVG =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM8 5V19H16V5H8ZM4 5V7H6V5H4ZM18 5V7H20V5H18ZM4 9V11H6V9H4ZM18 9V11H20V9H18ZM4 13V15H6V13H4ZM18 13V15H20V13H18ZM4 17V19H6V17H4ZM18 17V19H20V17H18Z"></path></svg>';
+
 export const videoPropSchema = {
   textAlignment: defaultProps.textAlignment,
   backgroundColor: defaultProps.backgroundColor,
@@ -56,8 +59,7 @@ export const videoRender = (
   editor: BlockNoteEditor<any, any, any>
 ) => {
   const icon = document.createElement("div");
-  icon.innerHTML =
-    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM8 5V19H16V5H8ZM4 5V7H6V5H4ZM18 5V7H20V5H18ZM4 9V11H6V9H4ZM18 9V11H20V9H18ZM4 13V15H6V13H4ZM18 13V15H20V13H18ZM4 17V19H6V17H4ZM18 17V19H20V17H18Z"></path></svg>';
+  icon.innerHTML = FILE_VIDEO_ICON_SVG;
 
   const video = document.createElement("video");
   video.className = "bn-visual-media";

package/src/blocks/defaultBlockHelpers.ts

@@ -67,8 +67,13 @@ export const defaultBlockToHTML = <
   dom: HTMLElement;
   contentDOM?: HTMLElement;
 } => {
-  const node = blockToNode(block, editor.pmSchema, editor.schema.styleSchema)
-    .firstChild!;
+  let node = blockToNode(block, editor.pmSchema, editor.schema.styleSchema);
+
+  if (node.type.name === "blockContainer") {
+    // for regular blocks, get the toDOM spec from the blockContent node
+    node = node.firstChild!;
+  }
+
   const toDOM = editor.pmSchema.nodes[node.type.name].spec.toDOM;
 
   if (toDOM === undefined) {

package/src/blocks/defaultBlocks.ts

@@ -21,6 +21,7 @@ import {
 } from "../schema/index.js";
 
 import { AudioBlock } from "./AudioBlockContent/AudioBlockContent.js";
+import { CodeBlock } from "./CodeBlockContent/CodeBlockContent.js";
 import { FileBlock } from "./FileBlockContent/FileBlockContent.js";
 import { Heading } from "./HeadingBlockContent/HeadingBlockContent.js";
 import { ImageBlock } from "./ImageBlockContent/ImageBlockContent.js";
@@ -31,9 +32,12 @@ import { Paragraph } from "./ParagraphBlockContent/ParagraphBlockContent.js";
 import { Table } from "./TableBlockContent/TableBlockContent.js";
 import { VideoBlock } from "./VideoBlockContent/VideoBlockContent.js";
 
+export { customizeCodeBlock } from "./CodeBlockContent/CodeBlockContent.js";
+
 export const defaultBlockSpecs = {
   paragraph: Paragraph,
   heading: Heading,
+  codeBlock: CodeBlock,
   bulletListItem: BulletListItem,
   numberedListItem: NumberedListItem,
   checkListItem: CheckListItem,

package/src/editor/Block.css

@@ -196,7 +196,8 @@ NESTED BLOCKS
   cursor: pointer;
 }
 
-.bn-block-content[data-content-type="checkListItem"][data-checked="true"] .bn-inline-content {
+.bn-block-content[data-content-type="checkListItem"][data-checked="true"]
+  .bn-inline-content {
   text-decoration: line-through;
 }
 
@@ -259,6 +260,51 @@ NESTED BLOCKS
   content: "▪";
 }
 
+/* CODE BLOCKS */
+.bn-block-content[data-content-type="codeBlock"] {
+  position: relative;
+
+  background-color: rgb(22 22 22);
+  color: white;
+  border-radius: 8px;
+}
+.bn-block-content[data-content-type="codeBlock"] > pre {
+  white-space: pre;
+  overflow-x: auto;
+  margin: 0;
+  width: 100%;
+  tab-size: 2;
+
+  padding: 24px;
+}
+.bn-block-content[data-content-type="codeBlock"] > div {
+  outline: none !important;
+}
+.bn-block-content[data-content-type="codeBlock"] > div > select {
+  outline: none !important;
+  appearance: none;
+  user-select: none;
+  border: none;
+  cursor: pointer;
+  background-color: transparent;
+
+  position: absolute;
+  top: 8px;
+  left: 18px;
+
+  font-size: 0.8em;
+  color: white;
+
+  opacity: 0;
+  transition: opacity 0.3s;
+  transition-delay: 1s;
+}
+.bn-block-content[data-content-type="codeBlock"]:hover > div > select,
+.bn-block-content[data-content-type="codeBlock"] > div > select:focus {
+  opacity: 0.5;
+  transition-delay: 0.1s;
+}
+
 /* FILES */
 
 /* Add block button & default preview */
@@ -349,13 +395,15 @@ NESTED BLOCKS
   cursor: ew-resize;
 }
 
-[data-content-type="audio"] > .bn-file-block-content-wrapper, .bn-audio {
+[data-content-type="audio"] > .bn-file-block-content-wrapper,
+.bn-audio {
   width: 100%;
 }
 
 [data-file-block] .bn-file-caption {
   font-size: 0.8em;
   padding-block: 4px;
+  word-break: break-word;
 }
 
 [data-file-block] .bn-file-caption:empty {
@@ -425,7 +473,7 @@ NESTED BLOCKS
 }
 
 [data-background-color="orange"] {
-  background-color: #faebdd;
+  background-color: #f6e9d9;
 }
 
 [data-background-color="yellow"] {
@@ -468,3 +516,23 @@ NESTED BLOCKS
   justify-content: flex-start;
   text-align: justify;
 }
+
+.bn-block-column-list {
+  display: flex;
+  flex-direction: row;
+}
+
+.bn-block-column {
+  flex: 1;
+  padding: 12px 20px;
+  /* scroll if we overflow, for example when tables or images are in the column */
+  overflow-x: auto;
+}
+
+.bn-block-column:first-child {
+  padding-left: 0;
+}
+
+.bn-block-column:last-child {
+  padding-right: 0;
+}

package/src/editor/BlockNoteEditor.test.ts

@@ -14,8 +14,8 @@ it("creates an editor", () => {
     editor._tiptapEditor.state.doc,
     2
   );
-  const { blockContent } = getBlockInfo(posInfo);
-  expect(blockContent.node.type.name).toEqual("paragraph");
+  const info = getBlockInfo(posInfo);
+  expect(info.blockNoteType).toEqual("paragraph");
 });
 
 it("immediately replaces doc", async () => {

package/src/editor/BlockNoteEditor.ts

@@ -7,6 +7,12 @@ import {
   moveBlockDown,
   moveBlockUp,
 } from "../api/blockManipulation/commands/moveBlock/moveBlock.js";
+import {
+  canNestBlock,
+  canUnnestBlock,
+  nestBlock,
+  unnestBlock,
+} from "../api/blockManipulation/commands/nestBlock/nestBlock.js";
 import { removeBlocks } from "../api/blockManipulation/commands/removeBlocks/removeBlocks.js";
 import { replaceBlocks } from "../api/blockManipulation/commands/replaceBlocks/replaceBlocks.js";
 import { updateBlock } from "../api/blockManipulation/commands/updateBlock/updateBlock.js";
@@ -17,7 +23,6 @@ import {
 } from "../api/blockManipulation/selections/textCursorPosition/textCursorPosition.js";
 import { createExternalHTMLExporter } from "../api/exporters/html/externalHTMLExporter.js";
 import { blocksToMarkdown } from "../api/exporters/markdown/markdownExporter.js";
-import { getBlockInfoFromSelection } from "../api/getBlockInfoFromPos.js";
 import { HTMLToBlocks } from "../api/parsers/html/parseHTML.js";
 import { markdownToBlocks } from "../api/parsers/markdown/parseMarkdown.js";
 import {
@@ -66,7 +71,8 @@ import { PlaceholderPlugin } from "../extensions/Placeholder/PlaceholderPlugin.j
 import { Dictionary } from "../i18n/dictionary.js";
 import { en } from "../i18n/locales/index.js";
 
-import { Transaction } from "@tiptap/pm/state";
+import { Plugin, Transaction } from "@tiptap/pm/state";
+import { dropCursor } from "prosemirror-dropcursor";
 import { createInternalHTMLSerializer } from "../api/exporters/html/internalHTMLSerializer.js";
 import { inlineContentToNodes } from "../api/nodeConversions/blockToNode.js";
 import { nodeToBlock } from "../api/nodeConversions/nodeToBlock.js";
@@ -90,7 +96,7 @@ export type BlockNoteEditorOptions<
   /**
    * A dictionary object containing translations for the editor.
    */
-  dictionary?: Dictionary;
+  dictionary?: Dictionary & Record<string, any>;
 
   /**
    * @deprecated, provide placeholders via dictionary instead
@@ -190,6 +196,8 @@ export type BlockNoteEditorOptions<
    * (note that the id is always set on the `data-id` attribute)
    */
   setIdAttribute?: boolean;
+
+  dropCursor?: (opts: any) => Plugin;
 };
 
 const blockNoteTipTapOptions = {
@@ -236,7 +244,7 @@ export class BlockNoteEditor<
   /**
    * The dictionary contains translations for the editor.
    */
-  public readonly dictionary: Dictionary;
+  public readonly dictionary: Dictionary & Record<string, any>;
 
   /**
    * The schema of the editor. The schema defines which Blocks, InlineContent, and Styles are available in the editor.
@@ -369,6 +377,7 @@ export class BlockNoteEditor<
       setIdAttribute: newOptions.setIdAttribute,
     });
 
+    const dropCursorPlugin: any = this.options.dropCursor ?? dropCursor;
     const blockNoteUIExtension = Extension.create({
       name: "BlockNoteUIExtension",
 
@@ -380,6 +389,7 @@ export class BlockNoteEditor<
           this.suggestionMenus.plugin,
           ...(this.filePanel ? [this.filePanel.plugin] : []),
           ...(this.tableHandles ? [this.tableHandles.plugin] : []),
+          dropCursorPlugin({ width: 5, color: "#ddeeff", editor: this }),
           PlaceholderPlugin(this, newOptions.placeholders),
           NodeSelectionKeyboardPlugin(),
           ...(this.options.animations ?? true
@@ -962,41 +972,28 @@ export class BlockNoteEditor<
    * Checks if the block containing the text cursor can be nested.
    */
   public canNestBlock() {
-    const { blockContainer } = getBlockInfoFromSelection(
-      this._tiptapEditor.state
-    );
-
-    return (
-      this._tiptapEditor.state.doc.resolve(blockContainer.beforePos)
-        .nodeBefore !== null
-    );
+    return canNestBlock(this);
   }
 
   /**
    * Nests the block containing the text cursor into the block above it.
    */
   public nestBlock() {
-    this._tiptapEditor.commands.sinkListItem("blockContainer");
+    nestBlock(this);
   }
 
   /**
    * Checks if the block containing the text cursor is nested.
    */
   public canUnnestBlock() {
-    const { blockContainer } = getBlockInfoFromSelection(
-      this._tiptapEditor.state
-    );
-
-    return (
-      this._tiptapEditor.state.doc.resolve(blockContainer.beforePos).depth > 1
-    );
+    return canUnnestBlock(this);
   }
 
   /**
    * Lifts the block containing the text cursor out of its parent.
    */
   public unnestBlock() {
-    this._tiptapEditor.commands.liftListItem("blockContainer");
+    unnestBlock(this);
   }
 
   /**

package/src/editor/BlockNoteExtensions.ts

@@ -4,7 +4,6 @@ import type { BlockNoteEditor } from "./BlockNoteEditor.js";
 
 import Collaboration from "@tiptap/extension-collaboration";
 import CollaborationCursor from "@tiptap/extension-collaboration-cursor";
-import { Dropcursor } from "@tiptap/extension-dropcursor";
 import { Gapcursor } from "@tiptap/extension-gapcursor";
 import { HardBreak } from "@tiptap/extension-hard-break";
 import { History } from "@tiptap/extension-history";
@@ -70,7 +69,8 @@ export const getBlockNoteExtensions = <
 
     // DropCursor,
     UniqueID.configure({
-      types: ["blockContainer"],
+      // everything from bnBlock group (nodes that represent a BlockNote block should have an id)
+      types: ["blockContainer", "columnList", "column"],
       setIdAttribute: opts.setIdAttribute,
     }),
     HardBreak.extend({ priority: 10 }),
@@ -155,7 +155,6 @@ export const getBlockNoteExtensions = <
     createPasteFromClipboardExtension(opts.editor),
     createDropFileExtension(opts.editor),
 
-    Dropcursor.configure({ width: 5, color: "#ddeeff" }),
     // This needs to be at the bottom of this list, because Key events (such as enter, when selecting a /command),
     // should be handled before Enter handlers in other components like splitListItem
     ...(opts.trailingBlock === undefined || opts.trailingBlock

package/src/editor/BlockNoteTipTapEditor.ts

@@ -24,7 +24,7 @@ export type BlockNoteTipTapEditorOptions = Partial<
 // @ts-ignore
 export class BlockNoteTipTapEditor extends TiptapEditor {
   private _state: EditorState;
-
+  private _creating = false;
   public static create = (
     options: BlockNoteTipTapEditorOptions,
     styleSchema: StyleSchema
@@ -151,8 +151,12 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
    * Replace the default `createView` method with a custom one - which we call on mount
    */
   private createViewAlternative() {
+    this._creating = true;
     // Without queueMicrotask, custom IC / styles will give a React FlushSync error
     queueMicrotask(() => {
+      if (!this._creating) {
+        return;
+      }
       this.view = new EditorView(
         { mount: this.options.element as any }, // use mount option so that we reuse the existing element instead of creating a new one
         {
@@ -178,6 +182,7 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
       this.commands.focus(this.options.autofocus);
       this.emit("create", { editor: this });
       this.isInitialized = true;
+      this._creating = false;
     });
   }
 
@@ -189,6 +194,8 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
   public mount = (element?: HTMLElement | null) => {
     if (!element) {
       this.destroy();
+      // cancel pending microtask
+      this._creating = false;
     } else {
       this.options.element = element;
       // @ts-ignore

package/src/editor/defaultColors.ts

@@ -0,0 +1,77 @@
+export const COLORS_DEFAULT = {
+  gray: {
+    text: "#9b9a97",
+    background: "#ebeced",
+  },
+  brown: {
+    text: "#64473a",
+    background: "#e9e5e3",
+  },
+  red: {
+    text: "#e03e3e",
+    background: "#fbe4e4",
+  },
+  orange: {
+    text: "#d9730d",
+    background: "#f6e9d9",
+  },
+  yellow: {
+    text: "#dfab01",
+    background: "#fbf3db",
+  },
+  green: {
+    text: "#4d6461",
+    background: "#ddedea",
+  },
+  blue: {
+    text: "#0b6e99",
+    background: "#ddebf1",
+  },
+  purple: {
+    text: "#6940a5",
+    background: "#eae4f2",
+  },
+  pink: {
+    text: "#ad1a72",
+    background: "#f4dfeb",
+  },
+};
+
+export const COLORS_DARK_MODE_DEFAULT = {
+  gray: {
+    text: "#bebdb8",
+    background: "#9b9a97",
+  },
+  brown: {
+    text: "#8e6552",
+    background: "#64473a",
+  },
+  red: {
+    text: "#ec4040",
+    background: "#be3434",
+  },
+  orange: {
+    text: "#e3790d",
+    background: "#b7600a",
+  },
+  yellow: {
+    text: "#dfab01",
+    background: "#b58b00",
+  },
+  green: {
+    text: "#6b8b87",
+    background: "#4d6461",
+  },
+  blue: {
+    text: "#0e87bc",
+    background: "#0b6e99",
+  },
+  purple: {
+    text: "#8552d7",
+    background: "#6940a5",
+  },
+  pink: {
+    text: "#da208f",
+    background: "#ad1a72",
+  },
+};