@blocknote/core 0.1.0 → 0.1.2

package/package.json

@@ -3,7 +3,7 @@
   "homepage": "https://github.com/yousefed/blocknote",
   "private": false,
   "license": "MPL-2.0",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "files": [
     "dist",
     "types",
@@ -45,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",
@@ -89,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"
@@ -106,5 +107,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "511cb65b707ca40289d838c71ac6edd29d882eef"
+  "gitHead": "085650a27c92af2b54df6d8b0e73673180821ebe"
 }

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/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/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/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";
-}
+}

package/src/extensions/Blocks/nodes/Block.ts

@@ -7,12 +7,13 @@ import { OrderedListPlugin } from "../OrderedListPlugin";
 import { PreviousBlockTypePlugin } from "../PreviousBlockTypePlugin";
 import { textblockTypeInputRuleSameNodeType } from "../rule";
 import styles from "./Block.module.css";
+import BlockAttributes from "../BlockAttributes";
 
 export interface IBlock {
   HTMLAttributes: Record<string, any>;
 }
 
-export type Level = 1 | 2 | 3;
+export type Level = "1" | "2" | "3";
 export type ListType = "li" | "oli";
 
 declare module "@tiptap/core" {
@@ -60,63 +61,109 @@ export const Block = Node.create<IBlock>({
     return {
       listType: {
         default: undefined,
-        renderHTML: (attributes) => {
-          return {
-            "data-listType": attributes.listType,
-          };
-        },
-        parseHTML: (element) => element.getAttribute("data-listType"),
       },
       blockColor: {
         default: undefined,
-        renderHTML: (attributes) => {
-          return {
-            "data-blockColor": attributes.blockColor,
-          };
-        },
-        parseHTML: (element) => element.getAttribute("data-blockColor"),
       },
       blockStyle: {
         default: undefined,
-        renderHTML: (attributes) => {
-          return {
-            "data-blockStyle": attributes.blockStyle,
-          };
-        },
-        parseHTML: (element) => element.getAttribute("data-blockStyle"),
       },
       headingType: {
         default: undefined,
         keepOnSplit: false,
-        renderHTML: (attributes) => {
-          return {
-            "data-headingType": attributes.headingType,
-          };
-        },
-        parseHTML: (element) => element.getAttribute("data-headingType"),
       },
     };
   },
 
-  // TODO: should we parse <li>, <ol>, <h1>, etc?
   parseHTML() {
     return [
+      // For parsing blocks within the editor.
       {
         tag: "div",
+        getAttrs: (element) => {
+          if (typeof element === "string") {
+            return false;
+          }
+
+          const attrs: Record<string, string> = {};
+          for (let [nodeAttr, HTMLAttr] of Object.entries(BlockAttributes)) {
+            if (element.getAttribute(HTMLAttr)) {
+              attrs[nodeAttr] = element.getAttribute(HTMLAttr)!;
+            }
+          }
+
+          if (element.getAttribute("data-node-type") === "block") {
+            return attrs;
+          }
+
+          return false;
+        },
+      },
+      // For parsing headings & paragraphs copied from outside the editor.
+      {
+        tag: "p",
+        priority: 100,
+      },
+      {
+        tag: "h1",
+        attrs: { headingType: "1" },
+      },
+      {
+        tag: "h2",
+        attrs: { headingType: "2" },
+      },
+      {
+        tag: "h3",
+        attrs: { headingType: "3" },
+      },
+      // For parsing list items copied from outside the editor.
+      {
+        tag: "li",
+        getAttrs: (element) => {
+          if (typeof element === "string") {
+            return false;
+          }
+
+          const parent = element.parentElement;
+
+          if (parent === null) {
+            return false;
+          }
+
+          // Gets type of list item (ordered/unordered) based on parent element's tag ("ol"/"ul").
+          if (parent.tagName === "UL") {
+            return { listType: "li" };
+          }
+
+          if (parent.tagName === "OL") {
+            return { listType: "oli" };
+          }
+
+          return false;
+        },
       },
     ];
   },
 
   renderHTML({ HTMLAttributes }) {
+    const attrs: Record<string, string> = {};
+    for (let [nodeAttr, HTMLAttr] of Object.entries(BlockAttributes)) {
+      if (HTMLAttributes[nodeAttr]) {
+        attrs[HTMLAttr] = HTMLAttributes[nodeAttr];
+      }
+    }
+
     return [
       "div",
-      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+      mergeAttributes(attrs, {
         class: styles.blockOuter,
+        "data-node-type": "block-outer",
       }),
       [
         "div",
-        mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        mergeAttributes(attrs, {
           class: styles.block,
+          "data-node-type": "block",
         }),
         0,
       ],
@@ -125,7 +172,7 @@ export const Block = Node.create<IBlock>({
 
   addInputRules() {
     return [
-      ...[1, 2, 3].map((level) => {
+      ...["1", "2", "3"].map((level) => {
         // Create a heading when starting with "#", "##", or "###""
         return textblockTypeInputRuleSameNodeType({
           find: new RegExp(`^(#{1,${level}})\\s$`),
@@ -378,9 +425,9 @@ export const Block = Node.create<IBlock>({
       },
       "Mod-Alt-0": () =>
         this.editor.chain().unsetList().unsetBlockHeading().run(),
-      "Mod-Alt-1": () => this.editor.commands.setBlockHeading({ level: 1 }),
-      "Mod-Alt-2": () => this.editor.commands.setBlockHeading({ level: 2 }),
-      "Mod-Alt-3": () => this.editor.commands.setBlockHeading({ level: 3 }),
+      "Mod-Alt-1": () => this.editor.commands.setBlockHeading({ level: "1" }),
+      "Mod-Alt-2": () => this.editor.commands.setBlockHeading({ level: "2" }),
+      "Mod-Alt-3": () => this.editor.commands.setBlockHeading({ level: "3" }),
       "Mod-Shift-7": () => this.editor.commands.setBlockList("li"),
       "Mod-Shift-8": () => this.editor.commands.setBlockList("oli"),
       // TODO: Add shortcuts for numbered and bullet list