@blocknote/core 0.1.0-alpha.3 → 0.1.1

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@blocknote/core",
+  "homepage": "https://github.com/yousefed/blocknote",
   "private": false,
-  "license": "MIT",
-  "version": "0.1.0-alpha.3",
+  "license": "MPL-2.0",
+  "version": "0.1.1",
   "files": [
     "dist",
     "types",
@@ -44,10 +45,10 @@
     "lint": "eslint src --max-warnings 0"
   },
   "dependencies": {
-    "@atlaskit/button": "^16.3.5",
-    "@atlaskit/dropdown-menu": "^11.1.2",
-    "@atlaskit/menu": "^1.3.0",
-    "@atlaskit/theme": "^12.1.4",
+    "@emotion/cache": "^11.10.5",
+    "@emotion/serialize": "^1.1.1",
+    "@emotion/utils": "^1.2.0",
+    "@mantine/core": "^5.6.1",
     "@tippyjs/react": "^4.2.6",
     "@tiptap/core": "^2.0.0-beta.182",
     "@tiptap/extension-bold": "^2.0.0-beta.28",
@@ -88,6 +89,7 @@
     "@types/uuid": "^8.3.4",
     "eslint": "^8.10.0",
     "eslint-config-react-app": "^7.0.0",
+    "prettier": "^2.7.1",
     "typescript": "^4.5.4",
     "vite": "^3.0.5",
     "vite-plugin-eslint": "^1.7.0"
@@ -105,5 +107,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "806198ea45da0806b9f71010400594fdde4bbef5"
+  "gitHead": "1772342279fad8724893d91773614546e8a2ff67"
 }

package/src/BlockNoteExtensions.ts

@@ -1,17 +1,16 @@
 import { Extensions, extensions } from "@tiptap/core";
 
+import { Node } from "@tiptap/core";
 import Bold from "@tiptap/extension-bold";
 import Code from "@tiptap/extension-code";
 import DropCursor from "@tiptap/extension-dropcursor";
 import GapCursor from "@tiptap/extension-gapcursor";
 import HardBreak from "@tiptap/extension-hard-break";
-import Italic from "@tiptap/extension-italic";
-import Underline from "@tiptap/extension-underline";
-// import Placeholder from "@tiptap/extension-placeholder";
-import { Node } from "@tiptap/core";
 import { History } from "@tiptap/extension-history";
+import Italic from "@tiptap/extension-italic";
 import Strike from "@tiptap/extension-strike";
 import Text from "@tiptap/extension-text";
+import Underline from "@tiptap/extension-underline";
 import { blocks } from "./extensions/Blocks";
 import blockStyles from "./extensions/Blocks/nodes/Block.module.css";
 import { BubbleMenuExtension } from "./extensions/BubbleMenu/BubbleMenuExtension";
@@ -22,12 +21,16 @@ import { Placeholder } from "./extensions/Placeholder/PlaceholderExtension";
 import SlashMenuExtension from "./extensions/SlashMenu";
 import { TrailingNode } from "./extensions/TrailingNode/TrailingNodeExtension";
 import UniqueID from "./extensions/UniqueID/UniqueID";
+
 export const Document = Node.create({
   name: "doc",
   topNode: true,
   content: "block+",
 });
 
+/**
+ * Get all the Tiptap extensions BlockNote is configured with by default
+ */
 export const getBlockNoteExtensions = () => {
   const ret: Extensions = [
     extensions.ClipboardTextSerializer,
@@ -48,7 +51,7 @@ export const getBlockNoteExtensions = () => {
       showOnlyCurrent: false,
     }),
     UniqueID.configure({
-      types: ["tcblock"],
+      types: ["block"],
     }),
     HardBreak,
     // Comments,
@@ -64,26 +67,16 @@ export const getBlockNoteExtensions = () => {
     Underline,
     HyperlinkMark,
     FixedParagraph,
+
     // custom blocks:
     ...blocks,
     DraggableBlocksExtension,
     DropCursor.configure({ width: 5, color: "#ddeeff" }),
     BubbleMenuExtension,
     History,
-    SlashMenuExtension,
     // 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
-    // SlashCommandExtension.configure({
-    //     // Extra commands can be registered here
-    //     commands: {},
-    // }),
-    // MentionsExtension.configure({
-    //     providers: {
-    //         people: (query) => {
-    //             return PEOPLE.filter((mention) => mention.match(query));
-    //         },
-    //     },
-    // }),
+    SlashMenuExtension,
     TrailingNode,
   ];
   return ret;

package/src/BlockNoteTheme.ts

@@ -0,0 +1,150 @@
+import { MantineThemeOverride } from "@mantine/core";
+
+export const BlockNoteTheme: MantineThemeOverride = {
+  activeStyles: {
+    // Removes button press effect.
+    transform: "none",
+  },
+  colorScheme: "light",
+  colors: {
+    brandFinal: [
+      "#F6F6F8",
+      "#ECEDF0",
+      "#DFE1E6",
+      "#C2C7D0",
+      "#A6ADBA",
+      "#8993A4",
+      "#6D798F",
+      "#505F79",
+      "#344563",
+      "#172B4D",
+    ],
+  },
+  components: {
+    Menu: {
+      styles: (theme) => ({
+        dropdown: {
+          backgroundColor: "white",
+          boxShadow: `0px 4px 8px ${theme.colors.brandFinal[2]}, 0px 0px 1px ${theme.colors.brandFinal[2]}`,
+          border: `1px solid ${theme.colors.brandFinal[1]}`,
+          borderRadius: "6px",
+          padding: "2px",
+        },
+      }),
+    },
+    DragHandleMenu: {
+      styles: (theme) => ({
+        root: {
+          ".mantine-Menu-item": {
+            color: theme.colors.brandFinal,
+            fontSize: "12px",
+            height: "34px",
+          },
+        },
+      }),
+    },
+    EditHyperlinkMenu: {
+      styles: (theme) => ({
+        root: {
+          backgroundColor: "white",
+          boxShadow: `0px 4px 8px ${theme.colors.brandFinal[2]}, 0px 0px 1px ${theme.colors.brandFinal[2]}`,
+          border: `1px solid ${theme.colors.brandFinal[1]}`,
+          borderRadius: "6px",
+          gap: "4px",
+          minWidth: "145px",
+          padding: "2px",
+          // Row
+          ".mantine-Group-root": {
+            flexWrap: "nowrap",
+            gap: "8px",
+            paddingInline: "6px",
+            // Row icon
+            ".mantine-Container-root": {
+              color: theme.colors.brandFinal,
+              display: "flex",
+              justifyContent: "center",
+              padding: "0",
+              width: "fit-content",
+            },
+            // Row input field
+            ".mantine-TextInput-root": {
+              background: "transparent",
+              width: "300px",
+              ".mantine-TextInput-wrapper": {
+                ".mantine-TextInput-input": {
+                  fontSize: "12px",
+                  border: 0,
+                  padding: 0,
+                },
+              },
+            },
+          },
+        },
+      }),
+    },
+    Toolbar: {
+      styles: (theme) => ({
+        root: {
+          backgroundColor: "white",
+          boxShadow: `0px 4px 8px ${theme.colors.brandFinal[2]}, 0px 0px 1px ${theme.colors.brandFinal[2]}`,
+          border: `1px solid ${theme.colors.brandFinal[1]}`,
+          borderRadius: "6px",
+          flexWrap: "nowrap",
+          gap: "2px",
+          padding: "2px",
+          width: "fit-content",
+          // Button (including dropdown target)
+          ".mantine-UnstyledButton-root": {
+            borderRadius: "4px",
+          },
+          // Dropdown
+          ".mantine-Menu-dropdown": {
+            // Dropdown item
+            ".mantine-Menu-item": {
+              color: theme.colors.brandFinal,
+              fontSize: "12px",
+              height: "34px",
+              ".mantine-Menu-itemRightSection": {
+                paddingLeft: "5px",
+              },
+            },
+          },
+        },
+      }),
+    },
+    SuggestionList: {
+      styles: (theme) => ({
+        root: {
+          // ...theme.other.defaultMenuStyles(theme),
+          ".mantine-Menu-item": {
+            // Icon
+            ".mantine-Menu-itemIcon": {
+              padding: "8px",
+              border: `1px solid ${theme.colors.brandFinal[2]}`,
+              backgroundColor: theme.colors.brandFinal[0],
+              borderRadius: "4px",
+              color: theme.colors.brandFinal,
+            },
+            // Text
+            ".mantine-Menu-itemLabel": {
+              color: theme.colors.brandFinal,
+              paddingRight: "16px",
+              ".mantine-Stack-root": {
+                gap: "0",
+              },
+            },
+            // Badge (keyboard shortcut)
+            ".mantine-Menu-itemRightSection": {
+              ".mantine-Badge-root": {
+                border: `1px solid ${theme.colors.brandFinal[2]}`,
+              },
+            },
+          },
+        },
+      }),
+    },
+  },
+  fontFamily: "Inter",
+  primaryColor: "brandFinal",
+  primaryShade: 9,
+};

package/src/EditorContent.tsx

@@ -1 +1,2 @@
-export { EditorContent } from "@tiptap/react";
+// BlockNote uses a similar pattern as Tiptap, so for now we can just export that
+export { EditorContent } from "@tiptap/react";

package/src/extensions/Blocks/BlockAttributes.ts

@@ -0,0 +1,12 @@
+// Object containing all possible block attributes.
+const BlockAttributes: Record<string, string> = {
+  listType: "data-list-type",
+  blockColor: "data-block-color",
+  blockStyle: "data-block-style",
+  headingType: "data-heading-type",
+  id: "data-id",
+  depth: "data-depth",
+  depthChange: "data-depth-change",
+};
+
+export default BlockAttributes;

package/src/extensions/Blocks/MultipleNodeSelection.ts

@@ -0,0 +1,87 @@
+import { Selection } from "prosemirror-state";
+import { Fragment, Node, ResolvedPos, Slice } from "prosemirror-model";
+import { Mappable } from "prosemirror-transform";
+
+/**
+ * This class represents an editor selection which spans multiple nodes/blocks. It's currently only used to allow users
+ * to drag multiple blocks at the same time. Expects the selection anchor and head to be between nodes, i.e. just before
+ * the first target node and just after the last, and that anchor and head are at the same nesting level.
+ *
+ * Partially based on ProseMirror's NodeSelection implementation:
+ * (https://github.com/ProseMirror/prosemirror-state/blob/master/src/selection.ts)
+ * MultipleNodeSelection differs from NodeSelection in the following ways:
+ * 1. Stores which nodes are included in the selection instead of just a single node.
+ * 2. Already expects the selection to start just before the first target node and ends just after the last, while a
+ * NodeSelection automatically sets both anchor and head to just before the single target node.
+ */
+export class MultipleNodeSelection extends Selection {
+  nodes: Array<Node>;
+
+  constructor($anchor: ResolvedPos, $head: ResolvedPos) {
+    super($anchor, $head);
+
+    // Parent is at the same nesting level as anchor/head since they are just before/ just after target nodes.
+    const parentNode = $anchor.node();
+
+    this.nodes = [];
+    $anchor.doc.nodesBetween($anchor.pos, $head.pos, (node, _pos, parent) => {
+      if (parent !== null && parent.eq(parentNode)) {
+        this.nodes.push(node);
+        return false;
+      }
+      return;
+    });
+  }
+
+  static create(doc: Node, from: number, to = from): MultipleNodeSelection {
+    return new MultipleNodeSelection(doc.resolve(from), doc.resolve(to));
+  }
+
+  content(): Slice {
+    return new Slice(Fragment.from(this.nodes), 0, 0);
+  }
+
+  eq(selection: Selection): boolean {
+    if (!(selection instanceof MultipleNodeSelection)) {
+      return false;
+    }
+
+    if (this.nodes.length !== selection.nodes.length) {
+      return false;
+    }
+
+    if (this.from !== selection.from || this.to !== selection.to) {
+      return false;
+    }
+
+    for (let i = 0; i < this.nodes.length; i++) {
+      if (!this.nodes[i].eq(selection.nodes[i])) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  map(doc: Node, mapping: Mappable): Selection {
+    let fromResult = mapping.mapResult(this.from);
+    let toResult = mapping.mapResult(this.to);
+
+    if (toResult.deleted) {
+      return Selection.near(doc.resolve(fromResult.pos));
+    }
+
+    if (fromResult.deleted) {
+      return Selection.near(doc.resolve(toResult.pos));
+    }
+
+    return new MultipleNodeSelection(
+      doc.resolve(fromResult.pos),
+      doc.resolve(toResult.pos)
+    );
+  }
+
+  toJSON(): any {
+    return { type: "node", anchor: this.anchor, head: this.head };
+  }
+}

package/src/extensions/Blocks/OrderedListPlugin.ts

@@ -11,12 +11,12 @@ export const OrderedListPlugin = () => {
       let count = 1;
       let skip = 0;
       newState.doc.descendants((node, pos) => {
-        if (node.type.name === "tcblock" && !node.attrs.listType) {
+        if (node.type.name === "block" && !node.attrs.listType) {
           count = 1;
         }
         if (
           skip === 0 &&
-          node.type.name === "tcblock" &&
+          node.type.name === "block" &&
           node.attrs.listType === "oli"
         ) {
           skip = node.content.childCount;

package/src/extensions/Blocks/PreviousBlockTypePlugin.ts

@@ -5,9 +5,14 @@ import {
 } from "@tiptap/core";
 import { Plugin, PluginKey } from "prosemirror-state";
 import { Decoration, DecorationSet } from "prosemirror-view";
+import BlockAttributes from "./BlockAttributes";
 
 const PLUGIN_KEY = new PluginKey(`previous-blocks`);
 
+// Inserts "prev-" string into an HTML attribute name with a "data-" prefix, e.g. "data-depth" -> "data-prev-depth".
+// Assumes "data-" prefix is in the attribute name.
+const insertPrev = (attr: string) => attr.slice(0, 5) + "prev-" + attr.slice(5);
+
 /**
  * This plugin tracks transformation of Block node attributes, so we can support CSS transitions.
  *
@@ -129,8 +134,9 @@ export const PreviousBlockTypePlugin = () => {
           }
 
           const decorationAttributes: any = {};
-          for (let [key, val] of Object.entries(prevAttrs)) {
-            decorationAttributes["data-prev-" + key] = val || "none";
+          for (let [nodeAttr, val] of Object.entries(prevAttrs)) {
+            decorationAttributes[insertPrev(BlockAttributes[nodeAttr])] =
+              val || "none";
           }
           const decoration = Decoration.node(pos, pos + node.nodeSize, {
             ...decorationAttributes,

package/src/extensions/Blocks/helpers/findBlock.ts

@@ -1,3 +1,3 @@
 import { findParentNode } from "@tiptap/core";
 
-export const findBlock = findParentNode((node) => node.type.name === "tcblock");
+export const findBlock = findParentNode((node) => node.type.name === "block");

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

@@ -40,7 +40,7 @@ NESTED BLOCKS
   position: relative;
 }
 
-.blockGroup .blockGroup > .blockOuter:not([data-prev-depthchanged])::before {
+.blockGroup .blockGroup > .blockOuter:not([data-prev-depth-changed])::before {
   content: " ";
   display: inline;
   border-left: 1px solid #ccc;
@@ -50,71 +50,71 @@ NESTED BLOCKS
   transition: all 0.2s 0.1s;
 }
 
-.blockGroup .blockGroup > .blockOuter[data-prev-depthchange="-2"]::before {
+.blockGroup .blockGroup > .blockOuter[data-prev-depth-change="-2"]::before {
   height: 0;
 }
 
 /* NESTED BLOCK ANIMATIONS */
 
-[data-prev-depthchange="1"] {
+[data-prev-depth-change="1"] {
   --x: 1;
 }
-[data-prev-depthchange="2"] {
+[data-prev-depth-change="2"] {
   --x: 2;
 }
-[data-prev-depthchange="3"] {
+[data-prev-depth-change="3"] {
   --x: 3;
 }
-[data-prev-depthchange="4"] {
+[data-prev-depth-change="4"] {
   --x: 4;
 }
-[data-prev-depthchange="5"] {
+[data-prev-depth-change="5"] {
   --x: 5;
 }
 
-[data-prev-depthchange="-1"] {
+[data-prev-depth-change="-1"] {
   --x: -1;
 }
-[data-prev-depthchange="-2"] {
+[data-prev-depth-change="-2"] {
   --x: -2;
 }
-[data-prev-depthchange="-3"] {
+[data-prev-depth-change="-3"] {
   --x: -3;
 }
-[data-prev-depthchange="-4"] {
+[data-prev-depth-change="-4"] {
   --x: -4;
 }
-[data-prev-depthchange="-5"] {
+[data-prev-depth-change="-5"] {
   --x: -5;
 }
 
-.blockOuter[data-prev-depthchange] {
+.blockOuter[data-prev-depth-change] {
   margin-left: calc(10px * var(--x));
 }
 
-.blockOuter[data-prev-depthchange] .blockOuter[data-prev-depthchange] {
+.blockOuter[data-prev-depth-change] .blockOuter[data-prev-depth-change] {
   margin-left: 0;
 }
 
 /* HEADINGS*/
-.blockOuter[data-prev-headingtype="1"] > .block > div:first-child,
-.blockOuter[data-headingtype="1"]:not([data-prev-headingtype])
+.blockOuter[data-prev-heading-type="1"] > .block > div:first-child,
+.blockOuter[data-heading-type="1"]:not([data-prev-heading-type])
   > .block
   > div:first-child {
   font-size: 3em;
   font-weight: bold;
 }
 
-.blockOuter[data-prev-headingtype="2"] > .block > div:first-child,
-.blockOuter[data-headingtype="2"]:not([data-prev-headingtype])
+.blockOuter[data-prev-heading-type="2"] > .block > div:first-child,
+.blockOuter[data-heading-type="2"]:not([data-prev-heading-type])
   > .block
   > div:first-child {
   font-size: 2em;
   font-weight: bold;
 }
 
-.blockOuter[data-prev-headingtype="3"] > .block > div:first-child,
-.blockOuter[data-headingtype="3"]:not([data-prev-headingtype])
+.blockOuter[data-prev-heading-type="3"] > .block > div:first-child,
+.blockOuter[data-heading-type="3"]:not([data-prev-heading-type])
   > .block
   > div:first-child {
   font-size: 1.3em;
@@ -129,8 +129,8 @@ NESTED BLOCKS
   margin-left: 0px;
 }
 
-.blockOuter[data-prev-listtype="oli"] > .block > div:first-child::before,
-.blockOuter[data-listtype="oli"]:not([data-prev-listtype])
+.blockOuter[data-prev-list-type="oli"] > .block > div:first-child::before,
+.blockOuter[data-list-type="oli"]:not([data-prev-list-type])
   > .block
   > div:first-child::before {
   content: attr(data-position);
@@ -138,8 +138,8 @@ NESTED BLOCKS
   padding-left: 0px;
 }
 
-.blockOuter[data-prev-listtype="li"] > .block > div:first-child::before,
-.blockOuter[data-listtype="li"]:not([data-prev-listtype])
+.blockOuter[data-prev-list-type="li"] > .block > div:first-child::before,
+.blockOuter[data-list-type="li"]:not([data-prev-list-type])
   > .block
   > div:first-child::before {
   content: "•";
@@ -151,16 +151,16 @@ NESTED BLOCKS
   /* margin-left: 0.2em; */
 }
 
-.blockOuter[data-listtype="li"]
+.blockOuter[data-list-type="li"]
   > .block
   > .blockGroup
-  > .blockOuter[data-prev-listtype="li"]
+  > .blockOuter[data-prev-list-type="li"]
   > .block
   > div:first-child::before,
-.blockOuter[data-listtype="li"]
+.blockOuter[data-list-type="li"]
   > .block
   > .blockGroup
-  > .blockOuter[data-listtype="li"]:not([data-prev-listtype])
+  > .blockOuter[data-list-type="li"]:not([data-prev-list-type])
   > .block
   > div:first-child::before {
   content: "◦";
@@ -168,22 +168,22 @@ NESTED BLOCKS
   font-family: arial;
 }
 
-.blockOuter[data-listtype="li"]
+.blockOuter[data-list-type="li"]
   > .block
   > .blockGroup
-  > .blockOuter[data-listtype="li"]
+  > .blockOuter[data-list-type="li"]
   > .block
   > .blockGroup
-  .blockOuter[data-prev-listtype="li"]
+  .blockOuter[data-prev-list-type="li"]
   > .block
   > div:first-child::before,
-.blockOuter[data-listtype="li"]
+.blockOuter[data-list-type="li"]
   > .block
   > .blockGroup
-  > .blockOuter[data-listtype="li"]
+  > .blockOuter[data-list-type="li"]
   > .block
   > .blockGroup
-  .blockOuter[data-listtype="li"]:not([data-prev-listtype])
+  .blockOuter[data-list-type="li"]:not([data-prev-list-type])
   > .block
   > div:first-child::before {
   content: "▪";
@@ -217,10 +217,10 @@ NESTED BLOCKS
   content: "Type to filter";
 }
 
-[data-headingtype] > .blockContent.isEmpty div::before {
+[data-heading-type] > .blockContent.isEmpty div::before {
   content: "Heading";
 }
 
-[data-listtype] > .blockContent.isEmpty div::before {
+[data-list-type] > .blockContent.isEmpty div::before {
   content: "List";
-}
+}