@blocknote/core 0.9.2 → 0.9.4

package/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.ts

@@ -1,138 +1,166 @@
 import { InputRule, mergeAttributes } from "@tiptap/core";
+import { defaultProps } from "../../../../api/defaultProps";
 import { createTipTapBlock } from "../../../../api/block";
+import { BlockSpec, PropSchema } from "../../../../api/blockTypes";
+import { mergeCSSClasses } from "../../../../../../shared/utils";
 import { handleEnter } from "../ListItemKeyboardShortcuts";
 import { NumberedListIndexingPlugin } from "./NumberedListIndexingPlugin";
 import styles from "../../../Block.module.css";
-import { mergeCSSClasses } from "../../../../../../shared/utils";
 
-export const NumberedListItemBlockContent =
-  createTipTapBlock<"numberedListItem">({
-    name: "numberedListItem",
-    content: "inline*",
-
-    addAttributes() {
-      return {
-        index: {
-          default: null,
-          parseHTML: (element) => element.getAttribute("data-index"),
-          renderHTML: (attributes) => {
-            return {
-              "data-index": attributes.index,
-            };
-          },
+export const numberedListItemPropSchema = {
+  ...defaultProps,
+} satisfies PropSchema;
+
+const NumberedListItemBlockContent = createTipTapBlock<
+  "numberedListItem",
+  true
+>({
+  name: "numberedListItem",
+  content: "inline*",
+
+  addAttributes() {
+    return {
+      index: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-index"),
+        renderHTML: (attributes) => {
+          return {
+            "data-index": attributes.index,
+          };
         },
-      };
-    },
-
-    addInputRules() {
-      return [
-        // Creates an ordered list when starting with "1.".
-        new InputRule({
-          find: new RegExp(`^1\\.\\s$`),
-          handler: ({ state, chain, range }) => {
-            chain()
-              .BNUpdateBlock(state.selection.from, {
-                type: "numberedListItem",
-                props: {},
-              })
-              // Removes the "1." characters used to set the list.
-              .deleteRange({ from: range.from, to: range.to });
-          },
+      },
+    };
+  },
+
+  addInputRules() {
+    return [
+      // Creates an ordered list when starting with "1.".
+      new InputRule({
+        find: new RegExp(`^1\\.\\s$`),
+        handler: ({ state, chain, range }) => {
+          chain()
+            .BNUpdateBlock(state.selection.from, {
+              type: "numberedListItem",
+              props: {},
+            })
+            // Removes the "1." characters used to set the list.
+            .deleteRange({ from: range.from, to: range.to });
+        },
+      }),
+    ];
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      Enter: () => handleEnter(this.editor),
+      "Mod-Shift-8": () =>
+        this.editor.commands.BNUpdateBlock<{
+          numberedListItem: BlockSpec<
+            "numberedListItem",
+            typeof numberedListItemPropSchema,
+            true
+          >;
+        }>(this.editor.state.selection.anchor, {
+          type: "numberedListItem",
+          props: {},
         }),
-      ];
-    },
-
-    addKeyboardShortcuts() {
-      return {
-        Enter: () => handleEnter(this.editor),
-      };
-    },
-
-    addProseMirrorPlugins() {
-      return [NumberedListIndexingPlugin()];
-    },
-
-    parseHTML() {
-      return [
-        // Case for regular HTML list structure.
-        // (e.g.: when pasting from other apps)
-        {
-          tag: "li",
-          getAttrs: (element) => {
-            if (typeof element === "string") {
-              return false;
-            }
+    };
+  },
+
+  addProseMirrorPlugins() {
+    return [NumberedListIndexingPlugin()];
+  },
+
+  parseHTML() {
+    return [
+      // Case for regular HTML list structure.
+      // (e.g.: when pasting from other apps)
+      {
+        tag: "li",
+        getAttrs: (element) => {
+          if (typeof element === "string") {
+            return false;
+          }
 
-            const parent = element.parentElement;
+          const parent = element.parentElement;
 
-            if (parent === null) {
-              return false;
-            }
+          if (parent === null) {
+            return false;
+          }
 
-            if (parent.tagName === "OL") {
-              return {};
-            }
+          if (parent.tagName === "OL") {
+            return {};
+          }
 
-            return false;
-          },
-          node: "numberedListItem",
+          return false;
         },
-        // Case for BlockNote list structure.
-        // (e.g.: when pasting from blocknote)
-        {
-          tag: "p",
-          getAttrs: (element) => {
-            if (typeof element === "string") {
-              return false;
-            }
+        node: "numberedListItem",
+      },
+      // Case for BlockNote list structure.
+      // (e.g.: when pasting from blocknote)
+      {
+        tag: "p",
+        getAttrs: (element) => {
+          if (typeof element === "string") {
+            return false;
+          }
 
-            const parent = element.parentElement;
+          const parent = element.parentElement;
 
-            if (parent === null) {
-              return false;
-            }
+          if (parent === null) {
+            return false;
+          }
 
-            if (
-              parent.getAttribute("data-content-type") === "numberedListItem"
-            ) {
-              return {};
-            }
+          if (parent.getAttribute("data-content-type") === "numberedListItem") {
+            return {};
+          }
 
-            return false;
-          },
-          priority: 300,
-          node: "numberedListItem",
+          return false;
         },
-      ];
-    },
-
-    renderHTML({ HTMLAttributes }) {
-      const blockContentDOMAttributes =
-        this.options.domAttributes?.blockContent || {};
-      const inlineContentDOMAttributes =
-        this.options.domAttributes?.inlineContent || {};
-
-      return [
-        "div",
-        mergeAttributes(HTMLAttributes, {
+        priority: 300,
+        node: "numberedListItem",
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    const blockContentDOMAttributes =
+      this.options.domAttributes?.blockContent || {};
+    const inlineContentDOMAttributes =
+      this.options.domAttributes?.inlineContent || {};
+
+    return [
+      "div",
+      mergeAttributes(HTMLAttributes, {
+        ...blockContentDOMAttributes,
+        class: mergeCSSClasses(
+          styles.blockContent,
+          blockContentDOMAttributes.class
+        ),
+        "data-content-type": this.name,
+      }),
+      // we use a <p> tag, because for <li> tags we'd need to add a <ul> parent for around siblings to be semantically correct,
+      // which would be quite cumbersome
+      [
+        "p",
+        {
+          ...inlineContentDOMAttributes,
           class: mergeCSSClasses(
-            styles.blockContent,
-            blockContentDOMAttributes.class
+            styles.inlineContent,
+            inlineContentDOMAttributes.class
           ),
-          "data-content-type": this.name,
-        }),
-        // we use a <p> tag, because for <li> tags we'd need to add a <ul> parent for around siblings to be semantically correct,
-        // which would be quite cumbersome
-        [
-          "p",
-          {
-            class: mergeCSSClasses(
-              styles.inlineContent,
-              inlineContentDOMAttributes.class
-            ),
-          },
-          0,
-        ],
-      ];
-    },
-  });
+        },
+        0,
+      ],
+    ];
+  },
+});
+
+export const NumberedListItem = {
+  node: NumberedListItemBlockContent,
+  propSchema: numberedListItemPropSchema,
+} satisfies BlockSpec<
+  "numberedListItem",
+  typeof numberedListItemPropSchema,
+  true
+>;

package/src/extensions/Blocks/nodes/BlockContent/ParagraphBlockContent/ParagraphBlockContent.ts

@@ -1,9 +1,14 @@
 import { mergeAttributes } from "@tiptap/core";
+import { defaultProps } from "../../../api/defaultProps";
 import { createTipTapBlock } from "../../../api/block";
-import styles from "../../Block.module.css";
 import { mergeCSSClasses } from "../../../../../shared/utils";
+import styles from "../../Block.module.css";
 
-export const ParagraphBlockContent = createTipTapBlock({
+export const paragraphPropSchema = {
+  ...defaultProps,
+};
+
+export const ParagraphBlockContent = createTipTapBlock<"paragraph", true>({
   name: "paragraph",
   content: "inline*",
 
@@ -50,3 +55,8 @@ export const ParagraphBlockContent = createTipTapBlock({
     ];
   },
 });
+
+export const Paragraph = {
+  node: ParagraphBlockContent,
+  propSchema: paragraphPropSchema,
+};

package/src/extensions/ImageToolbar/ImageToolbarPlugin.ts

@@ -0,0 +1,239 @@
+import { Node as PMNode } from "prosemirror-model";
+import { EditorState, Plugin, PluginKey } from "prosemirror-state";
+import { EditorView } from "prosemirror-view";
+import {
+  BaseUiElementCallbacks,
+  BaseUiElementState,
+  BlockNoteEditor,
+  BlockSchema,
+  BlockSpec,
+  SpecificBlock,
+} from "../..";
+import { EventEmitter } from "../../shared/EventEmitter";
+
+export type ImageToolbarCallbacks = BaseUiElementCallbacks;
+
+export type ImageToolbarState = BaseUiElementState & {
+  block: SpecificBlock<
+    BlockSchema & {
+      image: BlockSpec<
+        "image",
+        {
+          src: { default: string };
+        },
+        false
+      >;
+    },
+    "image"
+  >;
+};
+
+export class ImageToolbarView {
+  private imageToolbarState?: ImageToolbarState;
+  public updateImageToolbar: () => void;
+
+  public prevWasEditable: boolean | null = null;
+
+  public shouldShow: (state: EditorState) => boolean = (state) =>
+    "node" in state.selection &&
+    (state.selection.node as PMNode).type.name === "image" &&
+    (state.selection.node as PMNode).attrs.src === "";
+
+  constructor(
+    private readonly pluginKey: PluginKey,
+    private readonly pmView: EditorView,
+    updateImageToolbar: (imageToolbarState: ImageToolbarState) => void
+  ) {
+    this.updateImageToolbar = () => {
+      if (!this.imageToolbarState) {
+        throw new Error("Attempting to update uninitialized image toolbar");
+      }
+
+      updateImageToolbar(this.imageToolbarState);
+    };
+
+    pmView.dom.addEventListener("mousedown", this.mouseDownHandler);
+
+    pmView.dom.addEventListener("dragstart", this.dragstartHandler);
+
+    pmView.dom.addEventListener("blur", this.blurHandler);
+
+    document.addEventListener("scroll", this.scrollHandler);
+  }
+
+  mouseDownHandler = () => {
+    if (this.imageToolbarState?.show) {
+      this.imageToolbarState.show = false;
+      this.updateImageToolbar();
+    }
+  };
+
+  // For dragging the whole editor.
+  dragstartHandler = () => {
+    if (this.imageToolbarState?.show) {
+      this.imageToolbarState.show = false;
+      this.updateImageToolbar();
+    }
+  };
+
+  blurHandler = (event: FocusEvent) => {
+    const editorWrapper = this.pmView.dom.parentElement!;
+
+    // Checks if the focus is moving to an element outside the editor. If it is,
+    // the toolbar is hidden.
+    if (
+      // An element is clicked.
+      event &&
+      event.relatedTarget &&
+      // Element is inside the editor.
+      (editorWrapper === (event.relatedTarget as Node) ||
+        editorWrapper.contains(event.relatedTarget as Node))
+    ) {
+      return;
+    }
+
+    if (this.imageToolbarState?.show) {
+      this.imageToolbarState.show = false;
+      this.updateImageToolbar();
+    }
+  };
+
+  scrollHandler = () => {
+    if (this.imageToolbarState?.show) {
+      const blockElement = document.querySelector(
+        `[data-node-type="blockContainer"][data-id="${this.imageToolbarState.block.id}"]`
+      )!;
+
+      this.imageToolbarState.referencePos =
+        blockElement.getBoundingClientRect();
+      this.updateImageToolbar();
+    }
+  };
+
+  update(view: EditorView, prevState: EditorState) {
+    const pluginState: {
+      block: SpecificBlock<
+        BlockSchema & {
+          image: BlockSpec<
+            "image",
+            {
+              src: { default: string };
+            },
+            false
+          >;
+        },
+        "image"
+      >;
+    } = this.pluginKey.getState(view.state);
+
+    if (!this.imageToolbarState?.show && pluginState.block) {
+      const blockElement = document.querySelector(
+        `[data-node-type="blockContainer"][data-id="${pluginState.block.id}"]`
+      )!;
+
+      this.imageToolbarState = {
+        show: true,
+        referencePos: blockElement.getBoundingClientRect(),
+        block: pluginState.block,
+      };
+
+      this.updateImageToolbar();
+
+      return;
+    }
+
+    if (
+      !view.state.selection.eq(prevState.selection) ||
+      !view.state.doc.eq(prevState.doc)
+    ) {
+      if (this.imageToolbarState?.show) {
+        this.imageToolbarState.show = false;
+
+        this.updateImageToolbar();
+      }
+    }
+  }
+
+  destroy() {
+    this.pmView.dom.removeEventListener("mousedown", this.mouseDownHandler);
+
+    this.pmView.dom.removeEventListener("dragstart", this.dragstartHandler);
+
+    this.pmView.dom.removeEventListener("blur", this.blurHandler);
+
+    document.removeEventListener("scroll", this.scrollHandler);
+  }
+}
+
+export const imageToolbarPluginKey = new PluginKey("ImageToolbarPlugin");
+
+export class ImageToolbarProsemirrorPlugin<
+  BSchema extends BlockSchema
+> extends EventEmitter<any> {
+  private view: ImageToolbarView | undefined;
+  public readonly plugin: Plugin;
+
+  constructor(_editor: BlockNoteEditor<BSchema>) {
+    super();
+    this.plugin = new Plugin<{
+      block:
+        | SpecificBlock<
+            BlockSchema & {
+              image: BlockSpec<
+                "image",
+                {
+                  src: { default: string };
+                },
+                false
+              >;
+            },
+            "image"
+          >
+        | undefined;
+    }>({
+      key: imageToolbarPluginKey,
+      view: (editorView) => {
+        this.view = new ImageToolbarView(
+          // editor,
+          imageToolbarPluginKey,
+          editorView,
+          (state) => {
+            this.emit("update", state);
+          }
+        );
+        return this.view;
+      },
+      state: {
+        init: () => {
+          return {
+            block: undefined,
+          };
+        },
+        apply: (transaction) => {
+          const block:
+            | SpecificBlock<
+                BlockSchema & {
+                  image: BlockSpec<
+                    "image",
+                    {
+                      src: { default: string };
+                    },
+                    false
+                  >;
+                },
+                "image"
+              >
+            | undefined = transaction.getMeta(imageToolbarPluginKey)?.block;
+
+          return {
+            block,
+          };
+        },
+      },
+    });
+  }
+
+  public onUpdate(callback: (state: ImageToolbarState) => void) {
+    return this.on("update", callback);
+  }
+}

package/src/extensions/SlashMenu/defaultSlashMenuItems.ts

@@ -2,6 +2,7 @@ import { BlockNoteEditor } from "../../BlockNoteEditor";
 import { BlockSchema, PartialBlock } from "../Blocks/api/blockTypes";
 import { BaseSlashMenuItem } from "./BaseSlashMenuItem";
 import { defaultBlockSchema } from "../Blocks/api/defaultBlocks";
+import { imageToolbarPluginKey } from "../ImageToolbar/ImageToolbarPlugin";
 
 function insertOrUpdateBlock<BSchema extends BlockSchema>(
   editor: BlockNoteEditor<BSchema>,
@@ -9,6 +10,12 @@ function insertOrUpdateBlock<BSchema extends BlockSchema>(
 ) {
   const currentBlock = editor.getTextCursorPosition().block;
 
+  if (currentBlock.content === undefined) {
+    throw new Error(
+      "Slash Menu open in a block that doesn't contain inline content."
+    );
+  }
+
   if (
     (currentBlock.content.length === 1 &&
       currentBlock.content[0].type === "text" &&
@@ -33,40 +40,40 @@ export const getDefaultSlashMenuItems = <BSchema extends BlockSchema>(
 
   if ("heading" in schema && "level" in schema.heading.propSchema) {
     // Command for creating a level 1 heading
-    if (schema.heading.propSchema.level.values?.includes("1")) {
+    if (schema.heading.propSchema.level.values?.includes(1)) {
       slashMenuItems.push({
         name: "Heading",
         aliases: ["h", "heading1", "h1"],
         execute: (editor) =>
           insertOrUpdateBlock(editor, {
             type: "heading",
-            props: { level: "1" },
+            props: { level: 1 },
           } as PartialBlock<BSchema>),
       });
     }
 
     // Command for creating a level 2 heading
-    if (schema.heading.propSchema.level.values?.includes("2")) {
+    if (schema.heading.propSchema.level.values?.includes(2)) {
       slashMenuItems.push({
         name: "Heading 2",
         aliases: ["h2", "heading2", "subheading"],
         execute: (editor) =>
           insertOrUpdateBlock(editor, {
             type: "heading",
-            props: { level: "2" },
+            props: { level: 2 },
           } as PartialBlock<BSchema>),
       });
     }
 
     // Command for creating a level 3 heading
-    if (schema.heading.propSchema.level.values?.includes("3")) {
+    if (schema.heading.propSchema.level.values?.includes(3)) {
       slashMenuItems.push({
         name: "Heading 3",
         aliases: ["h3", "heading3", "subheading"],
         execute: (editor) =>
           insertOrUpdateBlock(editor, {
             type: "heading",
-            props: { level: "3" },
+            props: { level: 3 },
           } as PartialBlock<BSchema>),
       });
     }
@@ -105,5 +112,39 @@ export const getDefaultSlashMenuItems = <BSchema extends BlockSchema>(
     });
   }
 
+  if ("image" in schema) {
+    slashMenuItems.push({
+      name: "Image",
+      aliases: [
+        "image",
+        "imageUpload",
+        "upload",
+        "img",
+        "picture",
+        "media",
+        "url",
+        "drive",
+        "dropbox",
+      ],
+      execute: (editor) => {
+        insertOrUpdateBlock(editor, {
+          type: "image",
+        } as PartialBlock<BSchema>);
+        // Don't want to select the add image button, instead select the block
+        // below it
+        editor.setTextCursorPosition(
+          editor.getTextCursorPosition().nextBlock!,
+          "start"
+        );
+        // Immediately open the image toolbar
+        editor._tiptapEditor.view.dispatch(
+          editor._tiptapEditor.state.tr.setMeta(imageToolbarPluginKey, {
+            block: editor.getTextCursorPosition().prevBlock,
+          })
+        );
+      },
+    });
+  }
+
   return slashMenuItems;
 };

package/src/extensions/TextColor/TextColorExtension.ts

@@ -1,5 +1,6 @@
 import { Extension } from "@tiptap/core";
 import { getBlockInfoFromPos } from "../Blocks/helpers/getBlockInfoFromPos";
+import { defaultProps } from "../Blocks/api/defaultProps";
 
 declare module "@tiptap/core" {
   interface Commands<ReturnType> {
@@ -18,13 +19,13 @@ export const TextColorExtension = Extension.create({
         types: ["blockContainer"],
         attributes: {
           textColor: {
-            default: "default",
+            default: defaultProps.textColor.default,
             parseHTML: (element) =>
               element.hasAttribute("data-text-color")
                 ? element.getAttribute("data-text-color")
-                : "default",
+                : defaultProps.textColor.default,
             renderHTML: (attributes) =>
-              attributes.textColor !== "default" && {
+              attributes.textColor !== defaultProps.textColor.default && {
                 "data-text-color": attributes.textColor,
               },
           },