@blocknote/core 0.5.0 → 0.6.1

package/src/api/formatConversions/__snapshots__/formatConversions.test.ts.snap

@@ -65,7 +65,7 @@ exports[`Non-Nested Block/HTML/Markdown Conversions > Convert non-nested HTML to
         "type": "text",
       },
     ],
-    "id": 27,
+    "id": "27",
     "props": {
       "backgroundColor": "default",
       "level": "1",
@@ -83,7 +83,7 @@ exports[`Non-Nested Block/HTML/Markdown Conversions > Convert non-nested HTML to
         "type": "text",
       },
     ],
-    "id": 28,
+    "id": "28",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",
@@ -100,7 +100,7 @@ exports[`Non-Nested Block/HTML/Markdown Conversions > Convert non-nested HTML to
         "type": "text",
       },
     ],
-    "id": 29,
+    "id": "29",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",
@@ -117,7 +117,7 @@ exports[`Non-Nested Block/HTML/Markdown Conversions > Convert non-nested HTML to
         "type": "text",
       },
     ],
-    "id": 30,
+    "id": "30",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",
@@ -139,7 +139,7 @@ exports[`Non-Nested Block/HTML/Markdown Conversions > Convert non-nested Markdow
         "type": "text",
       },
     ],
-    "id": 27,
+    "id": "27",
     "props": {
       "backgroundColor": "default",
       "level": "1",
@@ -157,7 +157,7 @@ exports[`Non-Nested Block/HTML/Markdown Conversions > Convert non-nested Markdow
         "type": "text",
       },
     ],
-    "id": 28,
+    "id": "28",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",
@@ -174,7 +174,7 @@ exports[`Non-Nested Block/HTML/Markdown Conversions > Convert non-nested Markdow
         "type": "text",
       },
     ],
-    "id": 29,
+    "id": "29",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",
@@ -191,7 +191,7 @@ exports[`Non-Nested Block/HTML/Markdown Conversions > Convert non-nested Markdow
         "type": "text",
       },
     ],
-    "id": 30,
+    "id": "30",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",
@@ -271,7 +271,7 @@ exports[`Styled Block/HTML/Markdown Conversions > Convert styled HTML to blocks
         "type": "text",
       },
     ],
-    "id": 27,
+    "id": "27",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",
@@ -327,7 +327,7 @@ exports[`Styled Block/HTML/Markdown Conversions > Convert styled Markdown to blo
         "type": "text",
       },
     ],
-    "id": 27,
+    "id": "27",
     "props": {
       "backgroundColor": "default",
       "textAlignment": "left",

package/src/api/nodeConversions/__snapshots__/nodeConversions.test.ts.snap

@@ -4,7 +4,7 @@ exports[`Complex ProseMirror Node Conversions > Convert complex block to node 1`
 {
   "attrs": {
     "backgroundColor": "blue",
-    "id": 4,
+    "id": "4",
     "textColor": "yellow",
   },
   "content": [
@@ -46,7 +46,7 @@ exports[`Complex ProseMirror Node Conversions > Convert complex block to node 1`
         {
           "attrs": {
             "backgroundColor": "red",
-            "id": 5,
+            "id": "5",
             "textColor": "default",
           },
           "content": [
@@ -68,7 +68,7 @@ exports[`Complex ProseMirror Node Conversions > Convert complex block to node 1`
         {
           "attrs": {
             "backgroundColor": "default",
-            "id": 6,
+            "id": "6",
             "textColor": "default",
           },
           "content": [
@@ -101,7 +101,7 @@ exports[`Complex ProseMirror Node Conversions > Convert complex node to block 1`
           "type": "text",
         },
       ],
-      "id": 2,
+      "id": "2",
       "props": {
         "backgroundColor": "red",
         "textAlignment": "left",
@@ -112,7 +112,7 @@ exports[`Complex ProseMirror Node Conversions > Convert complex node to block 1`
     {
       "children": [],
       "content": [],
-      "id": 3,
+      "id": "3",
       "props": {
         "backgroundColor": "default",
         "textAlignment": "left",
@@ -139,7 +139,7 @@ exports[`Complex ProseMirror Node Conversions > Convert complex node to block 1`
       "type": "text",
     },
   ],
-  "id": 1,
+  "id": "1",
   "props": {
     "backgroundColor": "blue",
     "level": "2",
@@ -154,7 +154,7 @@ exports[`Simple ProseMirror Node Conversions > Convert simple block to node 1`]
 {
   "attrs": {
     "backgroundColor": "default",
-    "id": 4,
+    "id": "4",
     "textColor": "default",
   },
   "content": [
@@ -173,7 +173,7 @@ exports[`Simple ProseMirror Node Conversions > Convert simple node to block 1`]
 {
   "children": [],
   "content": [],
-  "id": 0,
+  "id": "0",
   "props": {
     "backgroundColor": "default",
     "textAlignment": "left",
@@ -187,7 +187,7 @@ exports[`links > Convert a block with link 1`] = `
 {
   "attrs": {
     "backgroundColor": "default",
-    "id": 4,
+    "id": "4",
     "textColor": "default",
   },
   "content": [
@@ -222,7 +222,7 @@ exports[`links > Convert two adjacent links in a block 1`] = `
 {
   "attrs": {
     "backgroundColor": "default",
-    "id": 4,
+    "id": "4",
     "textColor": "default",
   },
   "content": [

package/src/api/nodeConversions/nodeConversions.ts

@@ -6,26 +6,27 @@ import {
   PartialBlock,
 } from "../../extensions/Blocks/api/blockTypes";
 import {
-  ColorStyles,
+  ColorStyle,
   InlineContent,
   Link,
   PartialInlineContent,
   PartialLink,
   StyledText,
   Styles,
-  ToggledStyles,
+  ToggledStyle,
 } from "../../extensions/Blocks/api/inlineContentTypes";
 import { getBlockInfoFromPos } from "../../extensions/Blocks/helpers/getBlockInfoFromPos";
 import UniqueID from "../../extensions/UniqueID/UniqueID";
 import { UnreachableCaseError } from "../../shared/utils";
 
-const toggleStyles = new Set<ToggledStyles>([
+const toggleStyles = new Set<ToggledStyle>([
   "bold",
   "italic",
   "underline",
   "strike",
+  "code",
 ]);
-const colorStyles = new Set<ColorStyles>(["textColor", "backgroundColor"]);
+const colorStyles = new Set<ColorStyle>(["textColor", "backgroundColor"]);
 
 /**
  * Convert a StyledText inline element to a
@@ -35,9 +36,9 @@ function styledTextToNode(styledText: StyledText, schema: Schema): Node {
   const marks: Mark[] = [];
 
   for (const [style, value] of Object.entries(styledText.styles)) {
-    if (toggleStyles.has(style as ToggledStyles)) {
+    if (toggleStyles.has(style as ToggledStyle)) {
       marks.push(schema.mark(style));
-    } else if (colorStyles.has(style as ColorStyles)) {
+    } else if (colorStyles.has(style as ColorStyle)) {
       marks.push(schema.mark(style, { color: value }));
     }
   }
@@ -167,10 +168,10 @@ function contentNodeToInlineContent(contentNode: Node) {
     for (const mark of node.marks) {
       if (mark.type.name === "link") {
         linkMark = mark;
-      } else if (toggleStyles.has(mark.type.name as ToggledStyles)) {
-        styles[mark.type.name as ToggledStyles] = true;
-      } else if (colorStyles.has(mark.type.name as ColorStyles)) {
-        styles[mark.type.name as ColorStyles] = mark.attrs.color;
+      } else if (toggleStyles.has(mark.type.name as ToggledStyle)) {
+        styles[mark.type.name as ToggledStyle] = true;
+      } else if (colorStyles.has(mark.type.name as ColorStyle)) {
+        styles[mark.type.name as ColorStyle] = mark.attrs.color;
       } else {
         throw Error("Mark is of an unrecognized type: " + mark.type.name);
       }

package/src/editor.module.css

@@ -2,7 +2,8 @@
 
 .bnEditor {
   outline: none;
-  margin-left: 50px;
+  padding-inline: 50px;
+  border-radius: 8px;
 
   /* Define a set of colors to be used throughout the app for consistency
   see https://atlassian.design/foundations/color for more info */
@@ -36,7 +37,7 @@ Tippy popups that are appended to document.body directly
 .defaultStyles h2,
 .defaultStyles h3,
 .defaultStyles li {
-  all: unset;
+  all: unset !important;
   margin: 0;
   padding: 0;
   font-size: inherit;
@@ -50,8 +51,16 @@ Tippy popups that are appended to document.body directly
     "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+}
+
+[data-theme="light"] {
+  background-color: #FFFFFF;
+  color: #444444;
+}
 
-  color: rgb(60, 65, 73);
+[data-theme="dark"] {
+  background-color: #444444;
+  color: #DDDDDD;
 }
 
 .dragPreview {

package/src/extensions/Blocks/api/inlineContentTypes.ts

@@ -3,15 +3,16 @@ export type Styles = {
   italic?: true;
   underline?: true;
   strike?: true;
+  code?: true;
   textColor?: string;
   backgroundColor?: string;
 };
 
-export type ToggledStyles = {
+export type ToggledStyle = {
   [K in keyof Styles]-?: Required<Styles>[K] extends true ? K : never;
 }[keyof Styles];
 
-export type ColorStyles = {
+export type ColorStyle = {
   [K in keyof Styles]-?: Required<Styles>[K] extends string ? K : never;
 }[keyof Styles];
 

package/src/extensions/Blocks/api/selectionTypes.ts

@@ -0,0 +1,5 @@
+import { Block } from "./blockTypes";
+
+export type Selection = {
+  blocks: Block[];
+};

package/src/extensions/Blocks/nodes/Block.module.css

@@ -34,13 +34,22 @@ NESTED BLOCKS
 .blockGroup .blockGroup > .blockOuter:not([data-prev-depth-changed])::before {
   content: " ";
   display: inline;
-  border-left: 1px solid #ccc;
   position: absolute;
   left: -20px;
   height: 100%;
   transition: all 0.2s 0.1s;
 }
 
+[data-theme="light"] .blockGroup .blockGroup
+> .blockOuter:not([data-prev-depth-changed])::before {
+  border-left: 1px solid #CCCCCC;
+}
+
+[data-theme="dark"] .blockGroup .blockGroup
+> .blockOuter:not([data-prev-depth-changed])::before {
+  border-left: 1px solid #999999;
+}
+
 .blockGroup .blockGroup > .blockOuter[data-prev-depth-change="-2"]::before {
   height: 0;
 }
@@ -216,7 +225,6 @@ NESTED BLOCKS
 .blockContent.isFilter > :first-child:before {
   /*float: left; */
   content: "";
-  color: #aeb8c2;
   pointer-events: none;
   height: 0;
   /* width: 0; */
@@ -224,6 +232,16 @@ NESTED BLOCKS
   font-style: italic;
 }
 
+[data-theme="light"] .blockContent.isEmpty > :first-child:before,
+.blockContent.isFilter > :first-child:before {
+  color: #CCCCCC;
+}
+
+[data-theme="dark"] .blockContent.isEmpty > :first-child:before,
+.blockContent.isFilter > :first-child:before {
+  color: #999999;
+}
+
 /* TODO: would be nicer if defined from code */
 
 .blockContent.isEmpty.hasAnchor > :first-child:before {

package/src/extensions/DraggableBlocks/BlockSideMenuFactoryTypes.ts

@@ -1,22 +1,21 @@
 import { EditorElement, ElementFactory } from "../../shared/EditorElement";
+import { BlockNoteEditor } from "../../BlockNoteEditor";
+import { Block } from "../Blocks/api/blockTypes";
 
 export type BlockSideMenuStaticParams = {
+  editor: BlockNoteEditor;
+
   addBlock: () => void;
-  deleteBlock: () => void;
 
   blockDragStart: (event: DragEvent) => void;
   blockDragEnd: () => void;
 
   freezeMenu: () => void;
   unfreezeMenu: () => void;
-
-  setBlockTextColor: (color: string) => void;
-  setBlockBackgroundColor: (color: string) => void;
 };
 
 export type BlockSideMenuDynamicParams = {
-  blockTextColor: string;
-  blockBackgroundColor: string;
+  block: Block;
 
   referenceRect: DOMRect;
 };

package/src/extensions/DraggableBlocks/DraggableBlocksExtension.ts

@@ -1,9 +1,11 @@
 import { Editor, Extension } from "@tiptap/core";
 import { BlockSideMenuFactory } from "./BlockSideMenuFactoryTypes";
 import { createDraggableBlocksPlugin } from "./DraggableBlocksPlugin";
+import { BlockNoteEditor } from "../../BlockNoteEditor";
 
 export type DraggableBlocksOptions = {
-  editor: Editor;
+  tiptapEditor: Editor;
+  editor: BlockNoteEditor;
   blockSideMenuFactory: BlockSideMenuFactory;
 };
 
@@ -25,7 +27,8 @@ export const DraggableBlocksExtension =
       }
       return [
         createDraggableBlocksPlugin({
-          editor: this.editor,
+          tiptapEditor: this.editor,
+          editor: this.options.editor,
           blockSideMenuFactory: this.options.blockSideMenuFactory,
         }),
       ];