@blocknote/core 0.2.3 → 0.3.0

package/src/extensions/TextAlignment/TextAlignmentExtension.ts

@@ -0,0 +1,75 @@
+import { Extension } from "@tiptap/core";
+import { getBlockInfoFromPos } from "../Blocks/helpers/getBlockInfoFromPos";
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    textAlignment: {
+      setTextAlignment: (
+        textAlignment: "left" | "center" | "right" | "justify"
+      ) => ReturnType;
+    };
+  }
+}
+
+export const TextAlignmentExtension = Extension.create({
+  name: "textAlignment",
+
+  addGlobalAttributes() {
+    return [
+      {
+        // Attribute is applied to block content instead of container so that child blocks don't inherit the text
+        // alignment styling.
+        types: ["paragraph", "heading", "bulletListItem", "numberedListItem"],
+        attributes: {
+          textAlignment: {
+            default: "left",
+            parseHTML: (element) => element.getAttribute("data-text-alignment"),
+            renderHTML: (attributes) =>
+              attributes.textAlignment !== "left" && {
+                "data-text-alignment": attributes.textAlignment,
+              },
+          },
+        },
+      },
+    ];
+  },
+
+  addCommands() {
+    return {
+      setTextAlignment:
+        (textAlignment) =>
+        ({ state }) => {
+          const positionsBeforeSelectedContent = [];
+
+          const blockInfo = getBlockInfoFromPos(
+            state.doc,
+            state.selection.from
+          );
+          if (blockInfo === undefined) {
+            return false;
+          }
+
+          // Finds all blockContent nodes that the current selection is in.
+          let pos = blockInfo.startPos;
+          while (pos < state.selection.to) {
+            if (
+              state.doc.resolve(pos).node().type.spec.group === "blockContent"
+            ) {
+              positionsBeforeSelectedContent.push(pos - 1);
+
+              pos += state.doc.resolve(pos).node().nodeSize - 1;
+            } else {
+              pos += 1;
+            }
+          }
+
+          // Sets text alignment for all blockContent nodes that the current selection is in.
+          for (const pos of positionsBeforeSelectedContent) {
+            state.tr.setNodeAttribute(pos, "textAlignment", textAlignment);
+          }
+
+          return true;
+        },
+    };
+  },
+});

package/src/extensions/TextColor/TextColorExtension.ts

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

package/src/extensions/TextColor/TextColorMark.ts

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

package/src/shared/plugins/suggestion/SuggestionItem.ts

@@ -7,15 +7,6 @@ export interface SuggestionItem {
    */
   name: string;
 
-  /**
-   * The name of the group to which this item belongs
-   */
-  groupName: string;
-
-  hint?: string;
-
-  shortcut?: string;
-
   /**
    * This function matches this item against a query string, the function should return **true** if the item
    * matches the query or **false** otherwise.