@blocknote/core 0.1.1 → 0.2.0

package/package.json

@@ -3,7 +3,7 @@
   "homepage": "https://github.com/yousefed/blocknote",
   "private": false,
   "license": "MPL-2.0",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "files": [
     "dist",
     "types",
@@ -41,6 +41,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
+    "build-bundled": "tsc && vite build --config vite.config.bundled.ts && git checkout tmp-releases && rm -rf ../../release && mv ../../release-tmp ../../release",
     "preview": "vite preview",
     "lint": "eslint src --max-warnings 0"
   },
@@ -48,8 +49,6 @@
     "@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",
     "@tiptap/extension-code": "^2.0.0-beta.28",
@@ -66,26 +65,14 @@
     "@tiptap/extension-strike": "^2.0.0-beta.29",
     "@tiptap/extension-text": "^2.0.0-beta.17",
     "@tiptap/extension-underline": "^2.0.0-beta.25",
-    "@tiptap/react": "^2.0.0-beta.114",
     "lodash": "^4.17.21",
     "prosemirror-model": "1.18.1",
     "prosemirror-state": "1.4.1",
     "prosemirror-view": "1.26.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-icons": "^4.3.1",
-    "styled-components": "^5.3.3",
     "uuid": "^8.3.2"
   },
-  "overrides": {
-    "react-dom": "$react-dom",
-    "react": "$react"
-  },
   "devDependencies": {
     "@types/lodash": "^4.14.179",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.12",
-    "@types/styled-components": "^5.1.24",
     "@types/uuid": "^8.3.4",
     "eslint": "^8.10.0",
     "eslint-config-react-app": "^7.0.0",
@@ -107,5 +94,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "1772342279fad8724893d91773614546e8a2ff67"
+  "gitHead": "5ccf86c22d62e87813d4314a5f9f0b24d8e1c9d5"
 }

package/src/BlockNoteEditor.ts

@@ -0,0 +1,54 @@
+import { Editor, EditorOptions } from "@tiptap/core";
+
+// import "./blocknote.css";
+import { getBlockNoteExtensions, UiFactories } from "./BlockNoteExtensions";
+import styles from "./editor.module.css";
+
+export type BlockNoteEditorOptions = EditorOptions & {
+  enableBlockNoteExtensions: boolean;
+  disableHistoryExtension: boolean;
+  uiFactories: UiFactories;
+};
+
+const blockNoteOptions = {
+  enableInputRules: true,
+  enablePasteRules: true,
+  enableCoreExtensions: false,
+};
+
+export class BlockNoteEditor {
+  public readonly tiptapEditor: Editor & { contentComponent: any };
+
+  constructor(options: Partial<BlockNoteEditorOptions> = {}) {
+    const blockNoteExtensions = getBlockNoteExtensions(
+      options.uiFactories || {}
+    );
+
+    let extensions = options.disableHistoryExtension
+      ? blockNoteExtensions.filter((e) => e.name !== "history")
+      : blockNoteExtensions;
+
+    const tiptapOptions = {
+      ...blockNoteOptions,
+      ...options,
+      extensions:
+        options.enableBlockNoteExtensions === false
+          ? options.extensions
+          : [...(options.extensions || []), ...extensions],
+      editorProps: {
+        attributes: {
+          ...(options.editorProps?.attributes || {}),
+          class: [
+            styles.bnEditor,
+            styles.bnRoot,
+            (options.editorProps?.attributes as any)?.class || "",
+          ].join(" "),
+        },
+      },
+    };
+
+    this.tiptapEditor = new Editor(tiptapOptions) as Editor & {
+      contentComponent: any;
+    };
+  }
+}

package/src/BlockNoteExtensions.ts

@@ -13,14 +13,20 @@ 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";
+import { FormattingToolbarExtension } from "./extensions/FormattingToolbar/FormattingToolbarExtension";
 import { DraggableBlocksExtension } from "./extensions/DraggableBlocks/DraggableBlocksExtension";
-import HyperlinkMark from "./extensions/Hyperlinks/HyperlinkMark";
+import HyperlinkMark from "./extensions/HyperlinkToolbar/HyperlinkMark";
 import { FixedParagraph } from "./extensions/Paragraph/FixedParagraph";
 import { Placeholder } from "./extensions/Placeholder/PlaceholderExtension";
 import SlashMenuExtension from "./extensions/SlashMenu";
 import { TrailingNode } from "./extensions/TrailingNode/TrailingNodeExtension";
 import UniqueID from "./extensions/UniqueID/UniqueID";
+import { FormattingToolbarFactory } from "./extensions/FormattingToolbar/FormattingToolbarFactoryTypes";
+import { HyperlinkToolbarFactory } from "./extensions/HyperlinkToolbar/HyperlinkToolbarFactoryTypes";
+import { SuggestionsMenuFactory } from "./shared/plugins/suggestion/SuggestionsMenuFactoryTypes";
+import { BlockSideMenuFactory } from "./extensions/DraggableBlocks/BlockSideMenuFactoryTypes";
+import { Link } from "@tiptap/extension-link";
+import { SlashMenuItem } from "./extensions/SlashMenu/SlashMenuItem";
 
 export const Document = Node.create({
   name: "doc",
@@ -28,10 +34,17 @@ export const Document = Node.create({
   content: "block+",
 });
 
+export type UiFactories = Partial<{
+  formattingToolbarFactory: FormattingToolbarFactory;
+  hyperlinkToolbarFactory: HyperlinkToolbarFactory;
+  slashMenuFactory: SuggestionsMenuFactory<SlashMenuItem>;
+  blockSideMenuFactory: BlockSideMenuFactory;
+}>;
+
 /**
  * Get all the Tiptap extensions BlockNote is configured with by default
  */
-export const getBlockNoteExtensions = () => {
+export const getBlockNoteExtensions = (uiFactories: UiFactories) => {
   const ret: Extensions = [
     extensions.ClipboardTextSerializer,
     extensions.Commands,
@@ -65,19 +78,51 @@ export const getBlockNoteExtensions = () => {
     Italic,
     Strike,
     Underline,
-    HyperlinkMark,
     FixedParagraph,
 
     // custom blocks:
     ...blocks,
-    DraggableBlocksExtension,
+
     DropCursor.configure({ width: 5, color: "#ddeeff" }),
-    BubbleMenuExtension,
     History,
     // 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
-    SlashMenuExtension,
     TrailingNode,
   ];
+
+  if (uiFactories.blockSideMenuFactory) {
+    ret.push(
+      DraggableBlocksExtension.configure({
+        blockSideMenuFactory: uiFactories.blockSideMenuFactory,
+      })
+    );
+  }
+
+  if (uiFactories.formattingToolbarFactory) {
+    ret.push(
+      FormattingToolbarExtension.configure({
+        formattingToolbarFactory: uiFactories.formattingToolbarFactory,
+      })
+    );
+  }
+
+  if (uiFactories.hyperlinkToolbarFactory) {
+    ret.push(
+      HyperlinkMark.configure({
+        hyperlinkToolbarFactory: uiFactories.hyperlinkToolbarFactory,
+      })
+    );
+  } else {
+    ret.push(Link);
+  }
+
+  if (uiFactories.slashMenuFactory) {
+    ret.push(
+      SlashMenuExtension.configure({
+        slashMenuFactory: uiFactories.slashMenuFactory,
+      })
+    );
+  }
+
   return ret;
 };

package/src/assets/fonts-inter.css

@@ -0,0 +1,92 @@
+/* Generated using https://google-webfonts-helper.herokuapp.com/fonts/inter?subsets=latin */
+
+/* inter-100 - latin */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 100;
+  src: local(""),
+    url("./inter-v12-latin/inter-v12-latin-100.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("./inter-v12-latin/inter-v12-latin-100.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* inter-200 - latin */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 200;
+  src: local(""),
+    url("./inter-v12-latin/inter-v12-latin-200.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("./inter-v12-latin/inter-v12-latin-200.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* inter-300 - latin */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 300;
+  src: local(""),
+    url("./inter-v12-latin/inter-v12-latin-300.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("./inter-v12-latin/inter-v12-latin-300.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* inter-regular - latin */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  src: local(""),
+    url("./inter-v12-latin/inter-v12-latin-regular.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("./inter-v12-latin/inter-v12-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* inter-500 - latin */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 500;
+  src: local(""),
+    url("./inter-v12-latin/inter-v12-latin-500.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("./inter-v12-latin/inter-v12-latin-500.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* inter-600 - latin */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 600;
+  src: local(""),
+    url("./inter-v12-latin/inter-v12-latin-600.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("./inter-v12-latin/inter-v12-latin-600.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* inter-700 - latin */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 700;
+  src: local(""),
+    url("./inter-v12-latin/inter-v12-latin-700.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("./inter-v12-latin/inter-v12-latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* inter-800 - latin */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 800;
+  src: local(""),
+    url("./inter-v12-latin/inter-v12-latin-800.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("./inter-v12-latin/inter-v12-latin-800.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* inter-900 - latin */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 900;
+  src: local(""),
+    url("./inter-v12-latin/inter-v12-latin-900.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("./inter-v12-latin/inter-v12-latin-900.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}

package/src/editor.module.css

@@ -1,3 +1,40 @@
+@import url("./assets/fonts-inter.css");
+
 .bnEditor {
   outline: none;
 }
+
+/*
+bnRoot should be applied to all top-level elements
+
+This includes the Prosemirror editor, but also <div> element such as 
+Tippy popups that are appended to document.body directly
+*/
+.bnRoot {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.bnRoot *,
+.bnRoot *::before,
+.bnRoot *::after {
+  -webkit-box-sizing: inherit;
+  -moz-box-sizing: inherit;
+  box-sizing: inherit;
+}
+
+.bnEditor, .dragPreview {
+  /* Define a set of colors to be used throughout the app for consistency
+  see https://atlassian.design/foundations/color for more info */
+  --N800: #172b4d; /* Dark neutral used for tooltips and text on light background */
+  --N40: #dfe1e6; /* Light neutral used for subtle borders and text on dark background */
+
+  font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont,
+    "Open Sans", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
+    "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  color: rgb(60, 65, 73);
+}

package/src/extensions/Blocks/BlockAttributes.ts

@@ -1,12 +1,10 @@
 // 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;
+export default BlockAttributes;

package/src/extensions/Blocks/PreviousBlockTypePlugin.ts

@@ -5,18 +5,22 @@ 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);
+const nodeAttributes: Record<string, string> = {
+  listItemType: "list-item-type",
+  listItemIndex: "list-item-index",
+  headingLevel: "heading-level",
+  type: "type",
+  depth: "depth",
+  "depth-change": "depth-change",
+};
 
 /**
  * This plugin tracks transformation of Block node attributes, so we can support CSS transitions.
  *
- * Problem it solves: Prosemirror recreates the DOM when transactions happen. So when a transaction changes an Node attribute,
+ * Problem it solves: ProseMirror recreates the DOM when transactions happen. So when a transaction changes a Node attribute,
  * it results in a completely new DOM element. This means CSS transitions don't work.
  *
  * Solution: When attributes change on a node, this plugin sets a data-* attribute with the "previous" value. This way we can still use CSS transitions. (See block.module.css)
@@ -75,7 +79,6 @@ export const PreviousBlockTypePlugin = () => {
 
         changes.forEach(() => {
           const oldNodes = findChildren(oldState.doc, (node) => node.attrs.id);
-
           const oldNodesById = new Map(
             oldNodes.map((node) => [node.node.attrs.id, node])
           );
@@ -84,28 +87,68 @@ export const PreviousBlockTypePlugin = () => {
 
           for (let node of newNodes) {
             const oldNode = oldNodesById.get(node.node.attrs.id);
-            if (oldNode) {
+            const oldContentNode = oldNode?.node.firstChild;
+            const newContentNode = node.node.firstChild;
+            if (oldNode && oldContentNode && newContentNode) {
               const newAttrs = {
-                listType: node.node.attrs.listType,
-                blockColor: node.node.attrs.blockColor,
-                blockStyle: node.node.attrs.blockStyle,
-                headingType: node.node.attrs.headingType,
+                listItemType: newContentNode.attrs.listItemType,
+                listItemIndex: newContentNode.attrs.listItemIndex,
+                headingLevel: newContentNode.attrs.headingLevel,
+                type: newContentNode.type.name,
                 depth: newState.doc.resolve(node.pos).depth,
               };
 
               const oldAttrs = {
-                listType: oldNode.node.attrs.listType,
-                blockColor: oldNode.node.attrs.blockColor,
-                blockStyle: oldNode.node.attrs.blockStyle,
-                headingType: oldNode.node.attrs.headingType,
+                listItemType: oldContentNode.attrs.listItemType,
+                listItemIndex: oldContentNode.attrs.listItemIndex,
+                headingLevel: oldContentNode.attrs.headingLevel,
+                type: oldContentNode.type.name,
                 depth: oldState.doc.resolve(oldNode.pos).depth,
               };
 
+              // Hacky fix to avoid processing certain transactions created by ordered list indexing plugin.
+
+              // True when an existing ordered list item is assigned an index for the first time, which happens
+              // immediately after it's created. Using this condition to start an animation ensures it's not
+              // immediately overridden by a different transaction created by the ordered list indexing plugin.
+              const indexInitialized =
+                oldAttrs.listItemIndex === null &&
+                newAttrs.listItemIndex !== null;
+
+              // True when an existing ordered list item changes nesting levels, before its index is updated by the
+              // ordered list indexing plugin. This condition ensures that animations for indentation still work with
+              // ordered list items, while preventing unnecessary animations being done when dragging/dropping them.
+              const depthChanged =
+                oldAttrs.listItemIndex !== null &&
+                newAttrs.listItemIndex !== null &&
+                oldAttrs.listItemIndex === newAttrs.listItemIndex;
+
+              // Only false for transactions in which the block remains an ordered list item before & after, but neither
+              // of the previous conditions apply.
+              const shouldUpdate =
+                oldAttrs.listItemType === "ordered" &&
+                newAttrs.listItemType === "ordered"
+                  ? indexInitialized || depthChanged
+                  : true;
+
               if (
-                JSON.stringify(oldAttrs) !== JSON.stringify(newAttrs) // TODO: faster deep equal?
+                JSON.stringify(oldAttrs) !== JSON.stringify(newAttrs) && // TODO: faster deep equal?
+                shouldUpdate
               ) {
-                (oldAttrs as any).depthChange = oldAttrs.depth - newAttrs.depth;
+                (oldAttrs as any)["depth-change"] =
+                  oldAttrs.depth - newAttrs.depth;
                 prev.prevBlockAttrs[node.node.attrs.id] = oldAttrs;
+
+                // for debugging:
+                console.log(
+                  "id:",
+                  node.node.attrs.id,
+                  "previousBlockTypePlugin changes detected, oldAttrs",
+                  oldAttrs,
+                  "new",
+                  newAttrs
+                );
+
                 prev.needsUpdate = true;
               }
             }
@@ -119,6 +162,7 @@ export const PreviousBlockTypePlugin = () => {
       decorations(state) {
         const pluginState = (this as Plugin).getState(state);
         if (!pluginState.needsUpdate) {
+          // console.log("0");
           return undefined;
         }
 
@@ -126,18 +170,27 @@ export const PreviousBlockTypePlugin = () => {
 
         state.doc.descendants((node, pos) => {
           if (!node.attrs.id) {
+            // console.log("1");
             return;
           }
           const prevAttrs = pluginState.prevBlockAttrs[node.attrs.id];
           if (!prevAttrs) {
+            // console.log("2");
             return;
           }
 
           const decorationAttributes: any = {};
           for (let [nodeAttr, val] of Object.entries(prevAttrs)) {
-            decorationAttributes[insertPrev(BlockAttributes[nodeAttr])] =
+            decorationAttributes["data-prev-" + nodeAttributes[nodeAttr]] =
               val || "none";
           }
+
+          // for debugging:
+          console.log(
+            "previousBlockTypePlugin committing decorations",
+            decorationAttributes
+          );
+
           const decoration = Decoration.node(pos, pos + node.nodeSize, {
             ...decorationAttributes,
           });

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

@@ -0,0 +1,66 @@
+import { Node, NodeType } from "prosemirror-model";
+
+export type BlockInfo = {
+  id: string;
+  node: Node;
+  contentNode: Node;
+  contentType: NodeType;
+  numChildBlocks: number;
+  startPos: number;
+  endPos: number;
+  depth: number;
+};
+
+/**
+ * Retrieves information regarding the most nested block node in a ProseMirror doc, that a given position lies in.
+ * @param doc The ProseMirror doc.
+ * @param posInBlock A position somewhere within a block node.
+ * @returns A BlockInfo object for the block the given position is in, or undefined if the position is not in a block
+ * for the given doc.
+ */
+export function getBlockInfoFromPos(
+  doc: Node,
+  posInBlock: number
+): BlockInfo | undefined {
+  if (posInBlock <= 0 || posInBlock > doc.nodeSize) {
+    return undefined;
+  }
+
+  const $pos = doc.resolve(posInBlock);
+
+  const maxDepth = $pos.depth;
+  let node = $pos.node(maxDepth);
+  let depth = maxDepth;
+
+  while (depth >= 0) {
+    // If the outermost node is not a block, it means the position does not lie within a block.
+    if (depth === 0) {
+      return undefined;
+    }
+    if (node.type.name === "block") {
+      break;
+    }
+
+    depth -= 1;
+    node = $pos.node(depth);
+  }
+
+  const id = node.attrs["id"];
+  const contentNode = node.firstChild!;
+  const contentType = contentNode.type;
+  const numChildBlocks = node.childCount === 2 ? node.lastChild!.childCount : 0;
+
+  const startPos = $pos.start(depth);
+  const endPos = $pos.end(depth);
+
+  return {
+    id,
+    node,
+    contentNode,
+    contentType,
+    numChildBlocks,
+    startPos,
+    endPos,
+    depth,
+  };
+}

package/src/extensions/Blocks/index.ts

@@ -1,15 +1,19 @@
 import { Node } from "@tiptap/core";
 import { Block } from "./nodes/Block";
 import { BlockGroup } from "./nodes/BlockGroup";
-import { ContentBlock } from "./nodes/Content";
+import { TextContent } from "./nodes/BlockTypes/TextBlock/TextContent";
+import { HeadingContent } from "./nodes/BlockTypes/HeadingBlock/HeadingContent";
+import { ListItemContent } from "./nodes/BlockTypes/ListItemBlock/ListItemContent";
 
 export const blocks: any[] = [
-  ContentBlock,
+  TextContent,
+  HeadingContent,
+  ListItemContent,
   Block,
   BlockGroup,
   Node.create({
     name: "doc",
     topNode: true,
-    content: "blockgroup",
+    content: "blockGroup",
   }),
 ];