@blocknote/core 0.2.3 → 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.3",
+  "version": "0.2.4-alpha.7",
   "files": [
     "dist",
     "types",
@@ -49,33 +49,24 @@
     "@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-protocols": "1.0.5",
@@ -104,5 +95,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "04fb17b9fd76a5a9a5a3476c0a1d441848110ea9"
+  "gitHead": "d1d1756de514dedd5ef9c0d297b45db9b5ba8d02"
 }

package/src/BlockNoteExtensions.ts

@@ -25,6 +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";
+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;
@@ -70,6 +75,11 @@ export const getBlockNoteExtensions = (uiFactories: UiFactories) => {
     Italic,
     Strike,
     Underline,
+    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,8 +1,4 @@
-import {
-  combineTransactionSteps,
-  findChildren,
-  getChangedRanges,
-} from "@tiptap/core";
+import { findChildren } from "@tiptap/core";
 import { Plugin, PluginKey } from "prosemirror-state";
 import { Decoration, DecorationSet } from "prosemirror-view";
 
@@ -33,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(() => {
@@ -48,111 +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 = {
-                index: newContentNode.attrs.index,
-                level: newContentNode.attrs.level,
-                type: newContentNode.type.name,
-                depth: newState.doc.resolve(node.pos).depth,
-              };
-
-              const oldAttrs = {
-                index: oldContentNode.attrs.index,
-                level: oldContentNode.attrs.level,
-                type: oldContentNode.type.name,
-                depth: oldState.doc.resolve(oldNode.pos).depth,
-              };
-
-              // Hacky fix to avoid processing certain transactions created by the numbered list indexing plugin.
-
-              // True when an existing numbered 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 numbered list indexing plugin.
-              const indexInitialized =
-                oldAttrs.index === null && newAttrs.index !== null;
-
-              // True when an existing numbered list item changes nesting levels, before its index is updated by the
-              // numbered list indexing plugin. This condition ensures that animations for indentation still work with
-              // numbered list items, while preventing unnecessary animations being done when dragging/dropping them.
-              const depthChanged =
-                oldAttrs.index !== null &&
-                newAttrs.index !== null &&
-                oldAttrs.index === newAttrs.index;
-
-              // Only false for transactions in which the block remains a numbered list item before & after, but neither
-              // of the previous conditions apply.
-              const shouldUpdate =
-                oldAttrs.type === "numberedListItem" &&
-                newAttrs.type === "numberedListItem"
-                  ? 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;
       },
@@ -160,7 +167,7 @@ export const PreviousBlockTypePlugin = () => {
     props: {
       decorations(state) {
         const pluginState = (this as Plugin).getState(state);
-        if (!pluginState.needsUpdate) {
+        if (pluginState.updatedBlocks.size === 0) {
           return undefined;
         }
 
@@ -170,25 +177,28 @@ export const PreviousBlockTypePlugin = () => {
           if (!node.attrs.id) {
             return;
           }
-          const prevAttrs = pluginState.prevBlockAttrs[node.attrs.id];
-          if (!prevAttrs) {
+
+          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/nodes/Block.module.css

@@ -10,12 +10,6 @@ BASIC STYLES
   font-weight: normal;
 }
 
-.block {
-  border-left: 2px solid white;
-  border-color: white;
-  transition: all 0.2s;
-}
-
 .block {
   /* content: ""; */
   transition: all 0.2s;
@@ -268,3 +262,94 @@ NESTED BLOCKS
 > :first-child:before {
   content: "List";
 }
+
+/* TEXT COLORS */
+[data-text-color="gray"] {
+  color: #9b9a97;
+}
+
+[data-text-color="brown"] {
+  color: #64473a;
+}
+
+[data-text-color="red"] {
+  color: #e03e3e;
+}
+
+[data-text-color="orange"] {
+  color: #d9730d;
+}
+
+[data-text-color="yellow"] {
+  color: #dfab01;
+}
+
+[data-text-color="green"] {
+  color: #4d6461;
+}
+
+[data-text-color="blue"] {
+  color: #0b6e99;
+}
+
+[data-text-color="purple"] {
+  color: #6940a5;
+}
+
+[data-text-color="pink"] {
+  color: #ad1a72;
+}
+
+/* BACKGROUND COLORS */
+[data-background-color="gray"] {
+  background-color: #ebeced;
+}
+
+[data-background-color="brown"] {
+  background-color: #e9e5e3;
+}
+
+[data-background-color="red"] {
+  background-color: #fbe4e4;
+}
+
+[data-background-color="orange"] {
+  background-color: #faebdd;
+}
+
+[data-background-color="yellow"] {
+  background-color: #fbf3db;
+}
+
+[data-background-color="green"] {
+  background-color: #ddedea;
+}
+
+[data-background-color="blue"] {
+  background-color: #ddebf1;
+}
+
+[data-background-color="purple"] {
+  background-color: #eae4f2;
+}
+
+[data-background-color="pink"] {
+  background-color: #f4dfeb;
+}
+
+/* TEXT ALIGNMENT */
+[data-text-alignment="left"] {
+  text-align: left;
+}
+
+[data-text-alignment="center"] {
+  text-align: center;
+}
+
+[data-text-alignment="right"] {
+  text-align: right;
+}
+
+[data-text-alignment="justify"] {
+  text-align: justify;
+}