@blocknote/core 0.2.2 → 0.2.4-alpha.7

package/package.json

@@ -3,7 +3,7 @@
   "homepage": "https://github.com/yousefed/blocknote",
   "private": false,
   "license": "MPL-2.0",
-  "version": "0.2.2",
+  "version": "0.2.4-alpha.7",
   "files": [
     "dist",
     "types",
@@ -49,35 +49,28 @@
     "@emotion/cache": "^11.10.5",
     "@emotion/serialize": "^1.1.1",
     "@emotion/utils": "^1.2.0",
-    "@tiptap/core": "2.0.0-beta.209",
-    "@tiptap/extension-bold": "2.0.0-beta.209",
-    "@tiptap/extension-code": "2.0.0-beta.209",
-    "@tiptap/extension-collaboration": "2.0.0-beta.209",
-    "@tiptap/extension-collaboration-cursor": "2.0.0-beta.209",
-    "@tiptap/extension-dropcursor": "2.0.0-beta.209",
-    "@tiptap/extension-gapcursor": "2.0.0-beta.209",
-    "@tiptap/extension-hard-break": "2.0.0-beta.209",
-    "@tiptap/extension-history": "2.0.0-beta.209",
-    "@tiptap/extension-horizontal-rule": "2.0.0-beta.209",
-    "@tiptap/extension-italic": "2.0.0-beta.209",
-    "@tiptap/extension-link": "2.0.0-beta.209",
-    "@tiptap/extension-paragraph": "2.0.0-beta.209",
-    "@tiptap/extension-strike": "2.0.0-beta.209",
-    "@tiptap/extension-text": "2.0.0-beta.209",
-    "@tiptap/extension-underline": "2.0.0-beta.209",
+    "@tiptap/core": "2.0.0-beta.217",
+    "@tiptap/extension-bold": "2.0.0-beta.217",
+    "@tiptap/extension-code": "2.0.0-beta.217",
+    "@tiptap/extension-collaboration": "2.0.0-beta.217",
+    "@tiptap/extension-collaboration-cursor": "2.0.0-beta.217",
+    "@tiptap/extension-dropcursor": "2.0.0-beta.217",
+    "@tiptap/extension-gapcursor": "2.0.0-beta.217",
+    "@tiptap/extension-hard-break": "2.0.0-beta.217",
+    "@tiptap/extension-history": "2.0.0-beta.217",
+    "@tiptap/extension-horizontal-rule": "2.0.0-beta.217",
+    "@tiptap/extension-italic": "2.0.0-beta.217",
+    "@tiptap/extension-link": "2.0.0-beta.217",
+    "@tiptap/extension-paragraph": "2.0.0-beta.217",
+    "@tiptap/extension-strike": "2.0.0-beta.217",
+    "@tiptap/extension-text": "2.0.0-beta.217",
+    "@tiptap/extension-underline": "2.0.0-beta.217",
+    "@tiptap/pm": "2.0.0-beta.217",
     "lodash": "^4.17.21",
-    "prosemirror-commands": "^1.5.0",
-    "prosemirror-dropcursor": "1.5.0",
-    "prosemirror-gapcursor": "^1.3.1",
-    "prosemirror-history": "^1.3.0",
-    "prosemirror-keymap": "^1.2.0",
-    "prosemirror-model": "~1.18.3",
-    "prosemirror-schema-list": "^1.2.2",
-    "prosemirror-state": "^1.4.2",
-    "prosemirror-transform": "^1.7.1",
-    "prosemirror-view": "^1.30.0",
     "uuid": "^8.3.2",
-    "y-prosemirror": "1.0.20"
+    "y-prosemirror": "1.0.20",
+    "y-protocols": "1.0.5",
+    "yjs": "13.5.44"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.179",
@@ -102,5 +95,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "839c9554e572d416e79eb5f95eb70943096d2403"
+  "gitHead": "d1d1756de514dedd5ef9c0d297b45db9b5ba8d02"
 }

package/src/BlockNoteExtensions.ts

@@ -1,6 +1,5 @@
 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";
@@ -16,7 +15,6 @@ import blockStyles from "./extensions/Blocks/nodes/Block.module.css";
 import { FormattingToolbarExtension } from "./extensions/FormattingToolbar/FormattingToolbarExtension";
 import { DraggableBlocksExtension } from "./extensions/DraggableBlocks/DraggableBlocksExtension";
 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";
@@ -27,12 +25,11 @@ import { SuggestionsMenuFactory } from "./shared/plugins/suggestion/SuggestionsM
 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",
-  topNode: true,
-  content: "block+",
-});
+import { BackgroundColorMark } from "./extensions/BackgroundColor/BackgroundColorMark";
+import { TextColorMark } from "./extensions/TextColor/TextColorMark";
+import { BackgroundColorExtension } from "./extensions/BackgroundColor/BackgroundColorExtension";
+import { TextColorExtension } from "./extensions/TextColor/TextColorExtension";
+import { TextAlignmentExtension } from "./extensions/TextAlignment/TextAlignmentExtension";
 
 export type UiFactories = Partial<{
   formattingToolbarFactory: FormattingToolbarFactory;
@@ -64,7 +61,7 @@ export const getBlockNoteExtensions = (uiFactories: UiFactories) => {
       showOnlyCurrent: false,
     }),
     UniqueID.configure({
-      types: ["block"],
+      types: ["blockContainer"],
     }),
     HardBreak,
     // Comments,
@@ -78,7 +75,11 @@ export const getBlockNoteExtensions = (uiFactories: UiFactories) => {
     Italic,
     Strike,
     Underline,
-    FixedParagraph,
+    TextColorMark,
+    TextColorExtension,
+    BackgroundColorMark,
+    BackgroundColorExtension,
+    TextAlignmentExtension,
 
     // custom blocks:
     ...blocks,

package/src/extensions/BackgroundColor/BackgroundColorExtension.ts

@@ -0,0 +1,61 @@
+import { Extension } from "@tiptap/core";
+import { getBlockInfoFromPos } from "../Blocks/helpers/getBlockInfoFromPos";
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    blockBackgroundColor: {
+      setBlockBackgroundColor: (
+        posInBlock: number,
+        color: string
+      ) => ReturnType;
+    };
+  }
+}
+
+export const BackgroundColorExtension = Extension.create({
+  name: "blockBackgroundColor",
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: ["blockContainer"],
+        attributes: {
+          backgroundColor: {
+            default: "default",
+            parseHTML: (element) =>
+              element.hasAttribute("data-background-color")
+                ? element.getAttribute("data-background-color")
+                : "default",
+            renderHTML: (attributes) =>
+              attributes.backgroundColor !== "default" && {
+                "data-background-color": attributes.backgroundColor,
+              },
+          },
+        },
+      },
+    ];
+  },
+
+  addCommands() {
+    return {
+      setBlockBackgroundColor:
+        (posInBlock, color) =>
+        ({ state, view }) => {
+          const blockInfo = getBlockInfoFromPos(state.doc, posInBlock);
+          if (blockInfo === undefined) {
+            return false;
+          }
+
+          state.tr.setNodeAttribute(
+            blockInfo.startPos - 1,
+            "backgroundColor",
+            color
+          );
+
+          view.focus();
+
+          return true;
+        },
+    };
+  },
+});

package/src/extensions/BackgroundColor/BackgroundColorMark.ts

@@ -0,0 +1,62 @@
+import { Mark } from "@tiptap/core";
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    backgroundColor: {
+      setBackgroundColor: (color: string) => ReturnType;
+    };
+  }
+}
+
+export const BackgroundColorMark = Mark.create({
+  name: "backgroundColor",
+
+  addAttributes() {
+    return {
+      color: {
+        default: undefined,
+        parseHTML: (element) => element.getAttribute("data-background-color"),
+        renderHTML: (attributes) => ({
+          "data-background-color": attributes.color,
+        }),
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "span",
+        getAttrs: (element) => {
+          if (typeof element === "string") {
+            return false;
+          }
+
+          if (element.hasAttribute("data-background-color")) {
+            return { color: element.getAttribute("data-background-color") };
+          }
+
+          return false;
+        },
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["span", HTMLAttributes, 0];
+  },
+
+  addCommands() {
+    return {
+      setBackgroundColor:
+        (color) =>
+        ({ commands }) => {
+          if (color !== "default") {
+            return commands.setMark(this.name, { color: color });
+          }
+
+          return commands.unsetMark(this.name);
+        },
+    };
+  },
+});

package/src/extensions/Blocks/PreviousBlockTypePlugin.ts

@@ -1,17 +1,15 @@
-import {
-  combineTransactionSteps,
-  findChildren,
-  getChangedRanges,
-} from "@tiptap/core";
+import { findChildren } from "@tiptap/core";
 import { Plugin, PluginKey } from "prosemirror-state";
 import { Decoration, DecorationSet } from "prosemirror-view";
 
 const PLUGIN_KEY = new PluginKey(`previous-blocks`);
 
 const nodeAttributes: Record<string, string> = {
-  listItemType: "list-item-type",
-  listItemIndex: "list-item-index",
-  headingLevel: "heading-level",
+  // Numbered List Items
+  index: "index",
+  // Headings
+  level: "level",
+  // All Blocks
   type: "type",
   depth: "depth",
   "depth-change": "depth-change",
@@ -31,7 +29,7 @@ export const PreviousBlockTypePlugin = () => {
     view(_editorView) {
       return {
         update: async (view, _prevState) => {
-          if (this.key?.getState(view.state).needsUpdate) {
+          if (this.key?.getState(view.state).updatedBlocks.size > 0) {
             // use setTimeout 0 to clear the decorations so that at least
             // for one DOM-render the decorations have been applied
             setTimeout(() => {
@@ -46,114 +44,122 @@ export const PreviousBlockTypePlugin = () => {
     state: {
       init() {
         return {
-          prevBlockAttrs: {} as any,
-          needsUpdate: false,
+          // Block attributes, by block ID, from just before the previous transaction.
+          prevTransactionOldBlockAttrs: {} as any,
+          // Block attributes, by block ID, from just before the current transaction.
+          currentTransactionOldBlockAttrs: {} as any,
+          // Set of IDs of blocks whose attributes changed from the current transaction.
+          updatedBlocks: new Set<string>(),
         };
       },
 
       apply(transaction, prev, oldState, newState) {
-        prev.needsUpdate = false;
-        prev.prevBlockAttrs = {};
+        prev.currentTransactionOldBlockAttrs = {};
+        prev.updatedBlocks.clear();
+
         if (!transaction.docChanged || oldState.doc.eq(newState.doc)) {
           return prev;
         }
 
-        const transform = combineTransactionSteps(oldState.doc, [transaction]);
-        // const { mapping } = transform;
-        const changes = getChangedRanges(transform);
-
-        // TODO: instead of iterating through the entire document, only check nodes affected by the transactions
+        // TODO: Instead of iterating through the entire document, only check nodes affected by the transactions. Will
+        //  also probably require checking nodes affected by the previous transaction too.
         // We didn't get this to work yet:
+        // const transform = combineTransactionSteps(oldState.doc, [transaction]);
+        // // const { mapping } = transform;
+        // const changes = getChangedRanges(transform);
+        //
         // changes.forEach(({ oldRange, newRange }) => {
         // const oldNodes = findChildrenInRange(
         //   oldState.doc,
         //   oldRange,
         //   (node) => node.attrs.id
         // );
-
+        //
         // const newNodes = findChildrenInRange(
         //   newState.doc,
         //   newRange,
         //   (node) => node.attrs.id
         // );
 
-        changes.forEach(() => {
-          const oldNodes = findChildren(oldState.doc, (node) => node.attrs.id);
-          const oldNodesById = new Map(
-            oldNodes.map((node) => [node.node.attrs.id, node])
-          );
-
-          const newNodes = findChildren(newState.doc, (node) => node.attrs.id);
-
-          for (let node of newNodes) {
-            const oldNode = oldNodesById.get(node.node.attrs.id);
-            const oldContentNode = oldNode?.node.firstChild;
-            const newContentNode = node.node.firstChild;
-            if (oldNode && oldContentNode && newContentNode) {
-              const newAttrs = {
-                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 = {
-                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?
-                shouldUpdate
-              ) {
-                (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;
+        const currentTransactionOriginalOldBlockAttrs = {} as any;
+
+        const oldNodes = findChildren(oldState.doc, (node) => node.attrs.id);
+        const oldNodesById = new Map(
+          oldNodes.map((node) => [node.node.attrs.id, node])
+        );
+        const newNodes = findChildren(newState.doc, (node) => node.attrs.id);
+
+        // Traverses all block containers in the new editor state.
+        for (let node of newNodes) {
+          const oldNode = oldNodesById.get(node.node.attrs.id);
+
+          const oldContentNode = oldNode?.node.firstChild;
+          const newContentNode = node.node.firstChild;
+
+          if (oldNode && oldContentNode && newContentNode) {
+            const newAttrs = {
+              index: newContentNode.attrs.index,
+              level: newContentNode.attrs.level,
+              type: newContentNode.type.name,
+              depth: newState.doc.resolve(node.pos).depth,
+            };
+
+            let oldAttrs = {
+              index: oldContentNode.attrs.index,
+              level: oldContentNode.attrs.level,
+              type: oldContentNode.type.name,
+              depth: oldState.doc.resolve(oldNode.pos).depth,
+            };
+
+            currentTransactionOriginalOldBlockAttrs[node.node.attrs.id] =
+              oldAttrs;
+
+            // Whenever a transaction is appended by the OrderedListItemIndexPlugin, it's given the metadata:
+            // { "orderedListIndexing": true }
+            // These appended transactions happen immediately after any transaction which causes ordered list item
+            // indices to require updating, including those which trigger animations. Therefore, these animations are
+            // immediately overridden when the PreviousBlockTypePlugin processes the appended transaction, despite only
+            // the listItemIndex attribute changing. To solve this, oldAttrs must be edited for transactions with the
+            // "orderedListIndexing" metadata, so the correct animation can be re-triggered.
+            if (transaction.getMeta("numberedListIndexing")) {
+              // If the block existed before the transaction, gets the attributes from before the previous transaction
+              // (i.e. the transaction that caused list item indices to need updating).
+              if (node.node.attrs.id in prev.prevTransactionOldBlockAttrs) {
+                oldAttrs =
+                  prev.prevTransactionOldBlockAttrs[node.node.attrs.id];
+              }
+
+              // Stops list item indices themselves being animated (looks smoother), unless the block's content type is
+              // changing from a numbered list item to something else.
+              if (newAttrs.type === "numberedListItem") {
+                oldAttrs.index = newAttrs.index;
               }
             }
+
+            prev.currentTransactionOldBlockAttrs[node.node.attrs.id] = oldAttrs;
+
+            // TODO: faster deep equal?
+            if (JSON.stringify(oldAttrs) !== JSON.stringify(newAttrs)) {
+              (oldAttrs as any)["depth-change"] =
+                oldAttrs.depth - newAttrs.depth;
+
+              // for debugging:
+              // console.log(
+              //   "id:",
+              //   node.node.attrs.id,
+              //   "previousBlockTypePlugin changes detected, oldAttrs",
+              //   oldAttrs,
+              //   "new",
+              //   newAttrs
+              // );
+
+              prev.updatedBlocks.add(node.node.attrs.id);
+            }
           }
-        });
+        }
+
+        prev.prevTransactionOldBlockAttrs =
+          currentTransactionOriginalOldBlockAttrs;
 
         return prev;
       },
@@ -161,8 +167,7 @@ export const PreviousBlockTypePlugin = () => {
     props: {
       decorations(state) {
         const pluginState = (this as Plugin).getState(state);
-        if (!pluginState.needsUpdate) {
-          // console.log("0");
+        if (pluginState.updatedBlocks.size === 0) {
           return undefined;
         }
 
@@ -170,29 +175,30 @@ 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");
+
+          if (!pluginState.updatedBlocks.has(node.attrs.id)) {
             return;
           }
 
-          const decorationAttributes: any = {};
+          const prevAttrs =
+            pluginState.currentTransactionOldBlockAttrs[node.attrs.id];
+          const decorationAttrs: any = {};
+
           for (let [nodeAttr, val] of Object.entries(prevAttrs)) {
-            decorationAttributes["data-prev-" + nodeAttributes[nodeAttr]] =
+            decorationAttrs["data-prev-" + nodeAttributes[nodeAttr]] =
               val || "none";
           }
 
           // for debugging:
-          console.log(
-            "previousBlockTypePlugin committing decorations",
-            decorationAttributes
-          );
+          // console.log(
+          //   "previousBlockTypePlugin committing decorations",
+          //   decorationAttrs
+          // );
 
           const decoration = Decoration.node(pos, pos + node.nodeSize, {
-            ...decorationAttributes,
+            ...decorationAttrs,
           });
 
           decorations.push(decoration);

package/src/extensions/Blocks/apiTypes.ts

@@ -0,0 +1,48 @@
+export type BlockSpec<
+  // Type of the block.
+  // Examples might include: "paragraph", "heading", or "bulletListItem".
+  Type extends string,
+  // Changeable props which affect the block's behaviour or appearance.
+  // An example might be: { textAlignment: "left" | "right" | "center" | "justify" } for a paragraph block.
+  Props extends Record<string, string>
+> = {
+  type: Type;
+  props: Props;
+};
+
+export type BlockSpecUpdate<Spec> = Spec extends BlockSpec<
+  infer Type,
+  infer Props
+>
+  ? {
+      type: Type;
+      props?: Partial<Props>;
+    }
+  : never;
+
+export type NumberedListItemBlock = BlockSpec<"numberedListItem", {}>;
+
+export type BulletListItemBlock = BlockSpec<"bulletListItem", {}>;
+
+export type HeadingBlock = BlockSpec<
+  "heading",
+  {
+    level: "1" | "2" | "3";
+  }
+>;
+
+export type ParagraphBlock = BlockSpec<"paragraph", {}>;
+
+export type Block =
+  | ParagraphBlock
+  | HeadingBlock
+  | BulletListItemBlock
+  | NumberedListItemBlock;
+
+export type BlockUpdate = BlockSpecUpdate<Block>;
+
+/*
+TODO:
+ 1) guard read / writes (now we just pass on internal node attrs)
+ 2) where to locate this code / types
+*/

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

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

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

@@ -37,7 +37,7 @@ export function getBlockInfoFromPos(
     if (depth === 0) {
       return undefined;
     }
-    if (node.type.name === "block") {
+    if (node.type.name === "blockContainer") {
       break;
     }
 

package/src/extensions/Blocks/index.ts

@@ -1,15 +1,17 @@
 import { Node } from "@tiptap/core";
-import { Block } from "./nodes/Block";
+import { BlockContainer } from "./nodes/BlockContainer";
 import { BlockGroup } from "./nodes/BlockGroup";
-import { TextContent } from "./nodes/BlockTypes/TextBlock/TextContent";
-import { HeadingContent } from "./nodes/BlockTypes/HeadingBlock/HeadingContent";
-import { ListItemContent } from "./nodes/BlockTypes/ListItemBlock/ListItemContent";
+import { ParagraphBlockContent } from "./nodes/BlockContent/ParagraphBlockContent/ParagraphBlockContent";
+import { HeadingBlockContent } from "./nodes/BlockContent/HeadingBlockContent/HeadingBlockContent";
+import { BulletListItemBlockContent } from "./nodes/BlockContent/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent";
+import { NumberedListItemBlockContent } from "./nodes/BlockContent/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent";
 
 export const blocks: any[] = [
-  TextContent,
-  HeadingContent,
-  ListItemContent,
-  Block,
+  ParagraphBlockContent,
+  HeadingBlockContent,
+  BulletListItemBlockContent,
+  NumberedListItemBlockContent,
+  BlockContainer,
   BlockGroup,
   Node.create({
     name: "doc",