@blocknote/core 0.2.2 → 0.2.4-alpha.7

package/src/extensions/SlashMenu/index.ts

@@ -1,11 +1,6 @@
 import { SlashMenuExtension } from "./SlashMenuExtension";
 import defaultCommands from "./defaultCommands";
-import { SlashMenuGroups, SlashMenuItem } from "./SlashMenuItem";
 
-export {
-  defaultCommands,
-  SlashMenuItem as SlashCommand,
-  SlashMenuGroups as CommandGroup,
-};
+export { defaultCommands };
 
 export default SlashMenuExtension;

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/extensions/TrailingNode/TrailingNodeExtension.ts

@@ -32,8 +32,8 @@ export const TrailingNode = Extension.create<TrailingNodeOptions>({
           const { doc, tr, schema } = state;
           const shouldInsertNodeAtEnd = plugin.getState(state);
           const endPosition = doc.content.size - 2;
-          const type = schema.nodes["block"];
-          const contentType = schema.nodes["textContent"];
+          const type = schema.nodes["blockContainer"];
+          const contentType = schema.nodes["paragraph"];
           if (!shouldInsertNodeAtEnd) {
             return;
           }
@@ -61,8 +61,8 @@ export const TrailingNode = Extension.create<TrailingNodeOptions>({
 
             lastNode = lastNode.lastChild;
 
-            if (!lastNode || lastNode.type.name !== "block") {
-              throw new Error("Expected block");
+            if (!lastNode || lastNode.type.name !== "blockContainer") {
+              throw new Error("Expected blockContainer");
             }
             return lastNode.nodeSize > 4; // empty <block><content/></block> is length 4
           },

package/src/extensions/UniqueID/UniqueID.ts

@@ -75,6 +75,12 @@ const UniqueID = Extension.create({
         attributes: {
           [this.options.attributeName]: {
             default: null,
+            parseHTML: (element) =>
+              element.getAttribute(`data-${this.options.attributeName}`),
+            renderHTML: (attributes) => ({
+              [`data-${this.options.attributeName}`]:
+                attributes[this.options.attributeName],
+            }),
           },
         },
       },

package/src/index.ts

@@ -1,9 +1,10 @@
 export * from "./BlockNoteEditor";
 export * from "./BlockNoteExtensions";
-export type { BlockContentType } from "./extensions/Blocks/nodes/Block";
+export type { Block, BlockUpdate } from "./extensions/Blocks/apiTypes";
 export * from "./extensions/FormattingToolbar/FormattingToolbarFactoryTypes";
 export * from "./extensions/DraggableBlocks/BlockSideMenuFactoryTypes";
 export * from "./extensions/HyperlinkToolbar/HyperlinkToolbarFactoryTypes";
 export * from "./extensions/SlashMenu/SlashMenuItem";
+export * from "./shared/EditorElement";
 export type { SuggestionItem } from "./shared/plugins/suggestion/SuggestionItem";
 export * from "./shared/plugins/suggestion/SuggestionsMenuFactoryTypes";

package/src/shared/EditorElement.ts

@@ -1,10 +1,16 @@
-export type EditorElement<ElementDynamicParams extends Record<string, any>> = {
-  element: HTMLElement | undefined;
-  render: (params: ElementDynamicParams, isHidden: boolean) => void;
-  hide: () => void;
+export type RequiredStaticParams = Record<string, any>;
+export type RequiredDynamicParams = Record<string, any> & {
+  referenceRect: DOMRect;
 };
 
+export type EditorElement<ElementDynamicParams extends RequiredDynamicParams> =
+  {
+    element: HTMLElement | undefined;
+    render: (params: ElementDynamicParams, isHidden: boolean) => void;
+    hide: () => void;
+  };
+
 export type ElementFactory<
-  ElementStaticParams extends Record<string, any>,
-  ElementDynamicParams extends Record<string, any>
+  ElementStaticParams extends RequiredStaticParams,
+  ElementDynamicParams extends RequiredDynamicParams
 > = (staticParams: ElementStaticParams) => EditorElement<ElementDynamicParams>;

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.