@blocknote/core 0.9.6 → 0.10.1

package/src/extensions/ImageToolbar/ImageToolbarPlugin.ts

@@ -1,48 +1,44 @@
-import { Node as PMNode } from "prosemirror-model";
 import { EditorState, Plugin, PluginKey } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
+
+import { EventEmitter } from "../../util/EventEmitter";
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
 import {
-  BaseUiElementCallbacks,
-  BaseUiElementState,
-  BlockNoteEditor,
   BlockSchema,
-  BlockSpec,
+  InlineContentSchema,
   SpecificBlock,
-} from "../..";
-import { EventEmitter } from "../../shared/EventEmitter";
-
+  StyleSchema,
+} from "../../schema";
+import {
+  BaseUiElementCallbacks,
+  BaseUiElementState,
+} from "../../extensions-shared/BaseUiElementTypes";
 export type ImageToolbarCallbacks = BaseUiElementCallbacks;
 
-export type ImageToolbarState = BaseUiElementState & {
-  block: SpecificBlock<
-    BlockSchema & {
-      image: BlockSpec<
-        "image",
-        {
-          src: { default: string };
-        },
-        false
-      >;
-    },
-    "image"
-  >;
+export type ImageToolbarState<
+  B extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema = StyleSchema
+> = BaseUiElementState & {
+  block: SpecificBlock<B, "image", I, S>;
 };
 
-export class ImageToolbarView {
-  private imageToolbarState?: ImageToolbarState;
+export class ImageToolbarView<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+> {
+  private imageToolbarState?: ImageToolbarState<BSchema, I, S>;
   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
+    updateImageToolbar: (
+      imageToolbarState: ImageToolbarState<BSchema, I, S>
+    ) => void
   ) {
     this.updateImageToolbar = () => {
       if (!this.imageToolbarState) {
@@ -112,18 +108,7 @@ export class ImageToolbarView {
 
   update(view: EditorView, prevState: EditorState) {
     const pluginState: {
-      block: SpecificBlock<
-        BlockSchema & {
-          image: BlockSpec<
-            "image",
-            {
-              src: { default: string };
-            },
-            false
-          >;
-        },
-        "image"
-      >;
+      block: SpecificBlock<BSchema, "image", I, S>;
     } = this.pluginKey.getState(view.state);
 
     if (!this.imageToolbarState?.show && pluginState.block) {
@@ -168,28 +153,17 @@ export class ImageToolbarView {
 export const imageToolbarPluginKey = new PluginKey("ImageToolbarPlugin");
 
 export class ImageToolbarProsemirrorPlugin<
-  BSchema extends BlockSchema
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
 > extends EventEmitter<any> {
-  private view: ImageToolbarView | undefined;
+  private view: ImageToolbarView<BSchema, I, S> | undefined;
   public readonly plugin: Plugin;
 
-  constructor(_editor: BlockNoteEditor<BSchema>) {
+  constructor(_editor: BlockNoteEditor<BSchema, I, S>) {
     super();
     this.plugin = new Plugin<{
-      block:
-        | SpecificBlock<
-            BlockSchema & {
-              image: BlockSpec<
-                "image",
-                {
-                  src: { default: string };
-                },
-                false
-              >;
-            },
-            "image"
-          >
-        | undefined;
+      block: SpecificBlock<BSchema, "image", I, S> | undefined;
     }>({
       key: imageToolbarPluginKey,
       view: (editorView) => {
@@ -210,20 +184,8 @@ export class ImageToolbarProsemirrorPlugin<
           };
         },
         apply: (transaction) => {
-          const block:
-            | SpecificBlock<
-                BlockSchema & {
-                  image: BlockSpec<
-                    "image",
-                    {
-                      src: { default: string };
-                    },
-                    false
-                  >;
-                },
-                "image"
-              >
-            | undefined = transaction.getMeta(imageToolbarPluginKey)?.block;
+          const block: SpecificBlock<BSchema, "image", I, S> | undefined =
+            transaction.getMeta(imageToolbarPluginKey)?.block;
 
           return {
             block,
@@ -233,7 +195,7 @@ export class ImageToolbarProsemirrorPlugin<
     });
   }
 
-  public onUpdate(callback: (state: ImageToolbarState) => void) {
+  public onUpdate(callback: (state: ImageToolbarState<BSchema, I, S>) => void) {
     return this.on("update", callback);
   }
 }

package/src/extensions/Placeholder/PlaceholderExtension.ts

@@ -36,10 +36,10 @@ export const Placeholder = Extension.create<PlaceholderOptions>({
 
   addOptions() {
     return {
-      emptyEditorClass: "is-editor-empty",
-      emptyNodeClass: "is-empty",
-      isFilterClass: "is-filter",
-      hasAnchorClass: "has-anchor",
+      emptyEditorClass: "bn-is-editor-empty",
+      emptyNodeClass: "bn-is-empty",
+      isFilterClass: "bn-is-filter",
+      hasAnchorClass: "bn-has-anchor",
       placeholder: "Write something …",
       showOnlyWhenEditable: true,
       showOnlyCurrent: true,

package/src/extensions/README.md

@@ -0,0 +1,3 @@
+### @blocknote/core/src/extensions
+
+All extra extensions for TipTap / Prosemirror needed to implement the Prosemirror UX and editor behavior. 

package/src/extensions/SideMenu/SideMenuPlugin.ts

@@ -1,28 +1,35 @@
 import { PluginView } from "@tiptap/pm/state";
 import { Node } from "prosemirror-model";
 import { NodeSelection, Plugin, PluginKey, Selection } from "prosemirror-state";
-import * as pv from "prosemirror-view";
 import { EditorView } from "prosemirror-view";
-import { BlockNoteEditor } from "../../BlockNoteEditor";
-import styles from "../../editor.module.css";
-import { BaseUiElementState } from "../../shared/BaseUiElementTypes";
-import { EventEmitter } from "../../shared/EventEmitter";
-import { Block, BlockSchema } from "../Blocks/api/blockTypes";
-import { getBlockInfoFromPos } from "../Blocks/helpers/getBlockInfoFromPos";
+import { createExternalHTMLExporter } from "../../api/exporters/html/externalHTMLExporter";
+import { createInternalHTMLSerializer } from "../../api/exporters/html/internalHTMLSerializer";
+import { cleanHTMLToMarkdown } from "../../api/exporters/markdown/markdownExporter";
+import { getBlockInfoFromPos } from "../../api/getBlockInfoFromPos";
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
+import { BaseUiElementState } from "../../extensions-shared/BaseUiElementTypes";
+import {
+  Block,
+  BlockSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "../../schema";
+import { EventEmitter } from "../../util/EventEmitter";
 import { slashMenuPluginKey } from "../SlashMenu/SlashMenuPlugin";
 import { MultipleNodeSelection } from "./MultipleNodeSelection";
 
-const serializeForClipboard = (pv as any).__serializeForClipboard;
-// code based on https://github.com/ueberdosis/tiptap/issues/323#issuecomment-506637799
-
 let dragImageElement: Element | undefined;
 
-export type SideMenuState<BSchema extends BlockSchema> = BaseUiElementState & {
+export type SideMenuState<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+> = BaseUiElementState & {
   // The block that the side menu is attached to.
-  block: Block<BSchema>;
+  block: Block<BSchema, I, S>;
 };
 
-function getDraggableBlockFromCoords(
+export function getDraggableBlockFromCoords(
   coords: { left: number; top: number },
   view: EditorView
 ) {
@@ -153,18 +160,14 @@ function setDragImage(view: EditorView, from: number, to = from) {
   const inheritedClasses = classes
     .filter(
       (className) =>
-        !className.includes("bn") &&
-        !className.includes("ProseMirror") &&
-        !className.includes("editor")
+        className !== "ProseMirror" &&
+        className !== "bn-root" &&
+        className !== "bn-editor"
     )
     .join(" ");
 
   dragImageElement.className =
-    dragImageElement.className +
-    " " +
-    styles.dragPreview +
-    " " +
-    inheritedClasses;
+    dragImageElement.className + " bn-drag-preview " + inheritedClasses;
 
   document.body.appendChild(dragImageElement);
 }
@@ -176,14 +179,20 @@ function unsetDragImage() {
   }
 }
 
-function dragStart(
+function dragStart<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
   e: { dataTransfer: DataTransfer | null; clientY: number },
-  view: EditorView
+  editor: BlockNoteEditor<BSchema, I, S>
 ) {
   if (!e.dataTransfer) {
     return;
   }
 
+  const view = editor.prosemirrorView;
+
   const editorBoundingBox = view.dom.getBoundingClientRect();
 
   const coords = {
@@ -215,20 +224,38 @@ function dragStart(
       setDragImage(view, pos);
     }
 
-    const slice = view.state.selection.content();
-    const { dom, text } = serializeForClipboard(view, slice);
+    const selectedSlice = view.state.selection.content();
+    const schema = editor._tiptapEditor.schema;
+
+    const internalHTMLSerializer = createInternalHTMLSerializer(schema, editor);
+    const internalHTML = internalHTMLSerializer.serializeProseMirrorFragment(
+      selectedSlice.content
+    );
+
+    const externalHTMLExporter = createExternalHTMLExporter(schema, editor);
+    const externalHTML = externalHTMLExporter.exportProseMirrorFragment(
+      selectedSlice.content
+    );
+
+    const plainText = cleanHTMLToMarkdown(externalHTML);
 
     e.dataTransfer.clearData();
-    e.dataTransfer.setData("text/html", dom.innerHTML);
-    e.dataTransfer.setData("text/plain", text);
+    e.dataTransfer.setData("blocknote/html", internalHTML);
+    e.dataTransfer.setData("text/html", externalHTML);
+    e.dataTransfer.setData("text/plain", plainText);
     e.dataTransfer.effectAllowed = "move";
     e.dataTransfer.setDragImage(dragImageElement!, 0, 0);
-    view.dragging = { slice, move: true };
+    view.dragging = { slice: selectedSlice, move: true };
   }
 }
 
-export class SideMenuView<BSchema extends BlockSchema> implements PluginView {
-  private sideMenuState?: SideMenuState<BSchema>;
+export class SideMenuView<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+> implements PluginView
+{
+  private sideMenuState?: SideMenuState<BSchema, I, S>;
 
   // When true, the drag handle with be anchored at the same level as root elements
   // When false, the drag handle with be just to the left of the element
@@ -244,10 +271,10 @@ export class SideMenuView<BSchema extends BlockSchema> implements PluginView {
   public menuFrozen = false;
 
   constructor(
-    private readonly editor: BlockNoteEditor<BSchema>,
+    private readonly editor: BlockNoteEditor<BSchema, I, S>,
     private readonly pmView: EditorView,
     private readonly updateSideMenu: (
-      sideMenuState: SideMenuState<BSchema>
+      sideMenuState: SideMenuState<BSchema, I, S>
     ) => void
   ) {
     this.horizontalPosAnchoredAtRoot = true;
@@ -552,12 +579,14 @@ export class SideMenuView<BSchema extends BlockSchema> implements PluginView {
 export const sideMenuPluginKey = new PluginKey("SideMenuPlugin");
 
 export class SideMenuProsemirrorPlugin<
-  BSchema extends BlockSchema
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
 > extends EventEmitter<any> {
-  private sideMenuView: SideMenuView<BSchema> | undefined;
+  private sideMenuView: SideMenuView<BSchema, I, S> | undefined;
   public readonly plugin: Plugin;
 
-  constructor(private readonly editor: BlockNoteEditor<BSchema>) {
+  constructor(private readonly editor: BlockNoteEditor<BSchema, I, S>) {
     super();
     this.plugin = new Plugin({
       key: sideMenuPluginKey,
@@ -574,7 +603,7 @@ export class SideMenuProsemirrorPlugin<
     });
   }
 
-  public onUpdate(callback: (state: SideMenuState<BSchema>) => void) {
+  public onUpdate(callback: (state: SideMenuState<BSchema, I, S>) => void) {
     return this.on("update", callback);
   }
 
@@ -592,7 +621,7 @@ export class SideMenuProsemirrorPlugin<
     clientY: number;
   }) => {
     this.sideMenuView!.isDragging = true;
-    dragStart(event, this.editor.prosemirrorView);
+    dragStart(event, this.editor);
   };
 
   /**

package/src/extensions/SlashMenu/BaseSlashMenuItem.ts

@@ -1,11 +1,12 @@
-import { SuggestionItem } from "../../shared/plugins/suggestion/SuggestionItem";
-import { BlockNoteEditor } from "../../BlockNoteEditor";
-import { BlockSchema } from "../Blocks/api/blockTypes";
-import { DefaultBlockSchema } from "../Blocks/api/defaultBlocks";
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
+import { SuggestionItem } from "../../extensions-shared/suggestion/SuggestionItem";
+import { BlockSchema, InlineContentSchema, StyleSchema } from "../../schema";
 
 export type BaseSlashMenuItem<
-  BSchema extends BlockSchema = DefaultBlockSchema
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
 > = SuggestionItem & {
-  execute: (editor: BlockNoteEditor<BSchema>) => void;
+  execute: (editor: BlockNoteEditor<BSchema, I, S>) => void;
   aliases?: string[];
 };

package/src/extensions/SlashMenu/SlashMenuPlugin.ts

@@ -1,26 +1,28 @@
 import { Plugin, PluginKey } from "prosemirror-state";
 
-import { BlockNoteEditor } from "../../BlockNoteEditor";
-import { EventEmitter } from "../../shared/EventEmitter";
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
 import {
   SuggestionsMenuState,
   setupSuggestionsMenu,
-} from "../../shared/plugins/suggestion/SuggestionPlugin";
-import { BlockSchema } from "../Blocks/api/blockTypes";
+} from "../../extensions-shared/suggestion/SuggestionPlugin";
+import { BlockSchema, InlineContentSchema, StyleSchema } from "../../schema";
+import { EventEmitter } from "../../util/EventEmitter";
 import { BaseSlashMenuItem } from "./BaseSlashMenuItem";
 
 export const slashMenuPluginKey = new PluginKey("SlashMenuPlugin");
 
 export class SlashMenuProsemirrorPlugin<
   BSchema extends BlockSchema,
-  SlashMenuItem extends BaseSlashMenuItem<BSchema>
+  I extends InlineContentSchema,
+  S extends StyleSchema,
+  SlashMenuItem extends BaseSlashMenuItem<BSchema, I, S>
 > extends EventEmitter<any> {
   public readonly plugin: Plugin;
   public readonly itemCallback: (item: SlashMenuItem) => void;
 
-  constructor(editor: BlockNoteEditor<BSchema>, items: SlashMenuItem[]) {
+  constructor(editor: BlockNoteEditor<BSchema, I, S>, items: SlashMenuItem[]) {
     super();
-    const suggestions = setupSuggestionsMenu<SlashMenuItem, BSchema>(
+    const suggestions = setupSuggestionsMenu<SlashMenuItem, BSchema, I, S>(
       editor,
       (state) => {
         this.emit("update", state);

package/src/extensions/SlashMenu/defaultSlashMenuItems.ts

@@ -1,42 +1,87 @@
-import { BlockNoteEditor } from "../../BlockNoteEditor";
-import { BlockSchema, PartialBlock } from "../Blocks/api/blockTypes";
-import { BaseSlashMenuItem } from "./BaseSlashMenuItem";
-import { defaultBlockSchema } from "../Blocks/api/defaultBlocks";
+import { defaultBlockSchema } from "../../blocks/defaultBlocks";
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
+import {
+  Block,
+  BlockSchema,
+  InlineContentSchema,
+  PartialBlock,
+  StyleSchema,
+  isStyledTextInlineContent,
+} from "../../schema";
 import { imageToolbarPluginKey } from "../ImageToolbar/ImageToolbarPlugin";
+import { BaseSlashMenuItem } from "./BaseSlashMenuItem";
+
+// Sets the editor's text cursor position to the next content editable block,
+// so either a block with inline content or a table. The last block is always a
+// paragraph, so this function won't try to set the cursor position past the
+// last block.
+function setSelectionToNextContentEditableBlock<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(editor: BlockNoteEditor<BSchema, I, S>) {
+  let block = editor.getTextCursorPosition().block;
+  let contentType = editor.blockSchema[block.type].content;
+
+  while (contentType === "none") {
+    block = editor.getTextCursorPosition().nextBlock!;
+    contentType = editor.blockSchema[block.type].content as
+      | "inline"
+      | "table"
+      | "none";
+    editor.setTextCursorPosition(block, "end");
+  }
+}
 
-function insertOrUpdateBlock<BSchema extends BlockSchema>(
-  editor: BlockNoteEditor<BSchema>,
-  block: PartialBlock<BSchema>
-) {
+// Checks if the current block is empty or only contains a slash, and if so,
+// updates the current block instead of inserting a new one below. If the new
+// block doesn't contain editable content, the cursor is moved to the next block
+// that does.
+function insertOrUpdateBlock<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  editor: BlockNoteEditor<BSchema, I, S>,
+  block: PartialBlock<BSchema, I, S>
+): Block<BSchema, I, S> {
   const currentBlock = editor.getTextCursorPosition().block;
 
   if (currentBlock.content === undefined) {
-    throw new Error(
-      "Slash Menu open in a block that doesn't contain inline content."
-    );
+    throw new Error("Slash Menu open in a block that doesn't contain content.");
   }
 
   if (
-    (currentBlock.content.length === 1 &&
+    Array.isArray(currentBlock.content) &&
+    ((currentBlock.content.length === 1 &&
+      isStyledTextInlineContent(currentBlock.content[0]) &&
       currentBlock.content[0].type === "text" &&
       currentBlock.content[0].text === "/") ||
-    currentBlock.content.length === 0
+      currentBlock.content.length === 0)
   ) {
     editor.updateBlock(currentBlock, block);
   } else {
     editor.insertBlocks([block], currentBlock, "after");
-    editor.setTextCursorPosition(editor.getTextCursorPosition().nextBlock!);
+    editor.setTextCursorPosition(
+      editor.getTextCursorPosition().nextBlock!,
+      "end"
+    );
   }
+
+  const insertedBlock = editor.getTextCursorPosition().block;
+  setSelectionToNextContentEditableBlock(editor);
+
+  return insertedBlock;
 }
 
-export const getDefaultSlashMenuItems = <BSchema extends BlockSchema>(
-  // This type casting is weird, but it's the best way of doing it, as it allows
-  // the schema type to be automatically inferred if it is defined, or be
-  // inferred as any if it is not defined. I don't think it's possible to make it
-  // infer to DefaultBlockSchema if it is not defined.
+export const getDefaultSlashMenuItems = <
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
   schema: BSchema = defaultBlockSchema as unknown as BSchema
 ) => {
-  const slashMenuItems: BaseSlashMenuItem<BSchema>[] = [];
+  const slashMenuItems: BaseSlashMenuItem<BSchema, I, S>[] = [];
 
   if ("heading" in schema && "level" in schema.heading.propSchema) {
     // Command for creating a level 1 heading
@@ -48,7 +93,7 @@ export const getDefaultSlashMenuItems = <BSchema extends BlockSchema>(
           insertOrUpdateBlock(editor, {
             type: "heading",
             props: { level: 1 },
-          } as PartialBlock<BSchema>),
+          } as PartialBlock<BSchema, I, S>),
       });
     }
 
@@ -61,7 +106,7 @@ export const getDefaultSlashMenuItems = <BSchema extends BlockSchema>(
           insertOrUpdateBlock(editor, {
             type: "heading",
             props: { level: 2 },
-          } as PartialBlock<BSchema>),
+          } as PartialBlock<BSchema, I, S>),
       });
     }
 
@@ -74,7 +119,7 @@ export const getDefaultSlashMenuItems = <BSchema extends BlockSchema>(
           insertOrUpdateBlock(editor, {
             type: "heading",
             props: { level: 3 },
-          } as PartialBlock<BSchema>),
+          } as PartialBlock<BSchema, I, S>),
       });
     }
   }
@@ -86,7 +131,7 @@ export const getDefaultSlashMenuItems = <BSchema extends BlockSchema>(
       execute: (editor) =>
         insertOrUpdateBlock(editor, {
           type: "bulletListItem",
-        } as PartialBlock<BSchema>),
+        }),
     });
   }
 
@@ -97,7 +142,7 @@ export const getDefaultSlashMenuItems = <BSchema extends BlockSchema>(
       execute: (editor) =>
         insertOrUpdateBlock(editor, {
           type: "numberedListItem",
-        } as PartialBlock<BSchema>),
+        }),
     });
   }
 
@@ -108,7 +153,30 @@ export const getDefaultSlashMenuItems = <BSchema extends BlockSchema>(
       execute: (editor) =>
         insertOrUpdateBlock(editor, {
           type: "paragraph",
-        } as PartialBlock<BSchema>),
+        }),
+    });
+  }
+
+  if ("table" in schema) {
+    slashMenuItems.push({
+      name: "Table",
+      aliases: ["table"],
+      execute: (editor) => {
+        insertOrUpdateBlock(editor, {
+          type: "table",
+          content: {
+            type: "tableContent",
+            rows: [
+              {
+                cells: ["", "", ""],
+              },
+              {
+                cells: ["", "", ""],
+              },
+            ],
+          },
+        } as PartialBlock<BSchema, I, S>);
+      },
     });
   }
 
@@ -127,19 +195,14 @@ export const getDefaultSlashMenuItems = <BSchema extends BlockSchema>(
         "dropbox",
       ],
       execute: (editor) => {
-        insertOrUpdateBlock(editor, {
+        const insertedBlock = 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,
+            block: insertedBlock,
           })
         );
       },