@blocknote/core 0.8.4-alpha.0 → 0.8.4

package/package.json

@@ -3,7 +3,7 @@
   "homepage": "https://github.com/TypeCellOS/BlockNote",
   "private": false,
   "license": "MPL-2.0",
-  "version": "0.8.4-alpha.0",
+  "version": "0.8.4",
   "files": [
     "dist",
     "types",
@@ -71,6 +71,10 @@
     "@tiptap/pm": "^2.0.3",
     "hast-util-from-dom": "^4.2.0",
     "lodash": "^4.17.21",
+    "prosemirror-model": "^1.18.3",
+    "prosemirror-state": "^1.4.3",
+    "prosemirror-transform": "^1.7.2",
+    "prosemirror-view": "^1.31.4",
     "rehype-parse": "^8.0.4",
     "rehype-remark": "^9.1.2",
     "rehype-stringify": "^9.0.3",
@@ -89,7 +93,6 @@
     "@types/lodash": "^4.14.179",
     "@types/uuid": "^8.3.4",
     "eslint": "^8.10.0",
-    "eslint-config-react-app": "^7.0.0",
     "jsdom": "^21.1.0",
     "prettier": "^2.7.1",
     "typescript": "^5.0.4",
@@ -99,16 +102,12 @@
   },
   "eslintConfig": {
     "extends": [
-      "react-app",
-      "react-app/jest"
-    ],
-    "rules": {
-      "curly": 1
-    }
+      "../../.eslintrc.js"
+    ]
   },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "fdb190e0948be3d79b12357db6a56af64413f651"
+  "gitHead": "cac9d29dcf826e84af07199f839901d90928c490"
 }

package/src/BlockNoteEditor.ts

@@ -205,12 +205,15 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
 
     this.schema = newOptions.blockSchema;
 
-    const initialContent = newOptions.initialContent || [
-      {
-        type: "paragraph",
-        id: UniqueID.options.generateID(),
-      },
-    ];
+    const initialContent =
+      newOptions.initialContent || options.collaboration
+        ? undefined
+        : [
+            {
+              type: "paragraph",
+              id: UniqueID.options.generateID(),
+            },
+          ];
 
     const tiptapOptions: EditorOptions = {
       ...blockNoteTipTapOptions,
@@ -220,6 +223,10 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
         this.ready = true;
       },
       onBeforeCreate(editor) {
+        if (!initialContent) {
+          // when using collaboration
+          return;
+        }
         // we have to set the initial content here, because now we can use the editor schema
         // which has been created at this point
         const schema = editor.editor.schema;

package/src/extensions/Blocks/helpers/getBlockInfoFromPos.ts

@@ -12,27 +12,45 @@ export type BlockInfo = {
 };
 
 /**
- * Retrieves information regarding the most nested block node in a ProseMirror doc, that a given position lies in.
+ * Retrieves information regarding the nearest blockContainer node in a
+ * ProseMirror doc, relative to a position.
  * @param doc The ProseMirror doc.
- * @param posInBlock A position somewhere within a block node.
- * @returns A BlockInfo object for the block the given position is in, or undefined if the position is not in a block
- * for the given doc.
+ * @param pos An integer position.
+ * @returns A BlockInfo object for the nearest blockContainer node.
  */
-export function getBlockInfoFromPos(
-  doc: Node,
-  posInBlock: number
-): BlockInfo | undefined {
-  if (posInBlock < 0 || posInBlock > doc.nodeSize) {
-    return undefined;
+export function getBlockInfoFromPos(doc: Node, pos: number): BlockInfo {
+  // If the position is outside the outer block group, we need to move it to the
+  // nearest block. This happens when the collaboration plugin is active, where
+  // the selection is placed at the very end of the doc.
+  const outerBlockGroupStartPos = 1;
+  const outerBlockGroupEndPos = doc.nodeSize - 2;
+  if (pos <= outerBlockGroupStartPos) {
+    pos = outerBlockGroupStartPos + 1;
+
+    while (
+      doc.resolve(pos).parent.type.name !== "blockContainer" &&
+      pos < outerBlockGroupEndPos
+    ) {
+      pos++;
+    }
+  } else if (pos >= outerBlockGroupEndPos) {
+    pos = outerBlockGroupEndPos - 1;
+
+    while (
+      doc.resolve(pos).parent.type.name !== "blockContainer" &&
+      pos > outerBlockGroupStartPos
+    ) {
+      pos--;
+    }
   }
 
   // This gets triggered when a node selection on a block is active, i.e. when
   // you drag and drop a block.
-  if (doc.resolve(posInBlock).parent.type.name === "blockGroup") {
-    posInBlock++;
+  if (doc.resolve(pos).parent.type.name === "blockGroup") {
+    pos++;
   }
 
-  const $pos = doc.resolve(posInBlock);
+  const $pos = doc.resolve(pos);
 
   const maxDepth = $pos.depth;
   let node = $pos.node(maxDepth);
@@ -40,7 +58,9 @@ export function getBlockInfoFromPos(
 
   while (true) {
     if (depth < 0) {
-      return undefined;
+      throw new Error(
+        "Could not find blockContainer node. This can only happen if the underlying BlockNote schema has been edited."
+      );
     }
 
     if (node.type.name === "blockContainer") {

package/src/node_modules/.vitest/results.json

@@ -0,0 +1 @@
+{"version":"0.28.5","results":[["/api/formatConversions/formatConversions.test.ts",{"duration":109,"failed":false}],["/api/nodeConversions/nodeConversions.test.ts",{"duration":32,"failed":false}],["/api/blockManipulation/blockManipulation.test.ts",{"duration":38,"failed":false}],["/BlockNoteEditor.test.ts",{"duration":4,"failed":false}]]}

package/types/src/EventEmitter.d.ts

@@ -0,0 +1,11 @@
+type StringKeyOf<T> = Extract<keyof T, string>;
+type CallbackType<T extends Record<string, any>, EventName extends StringKeyOf<T>> = T[EventName] extends any[] ? T[EventName] : [T[EventName]];
+type CallbackFunction<T extends Record<string, any>, EventName extends StringKeyOf<T>> = (...props: CallbackType<T, EventName>) => any;
+export declare class EventEmitter<T extends Record<string, any>> {
+    private callbacks;
+    on<EventName extends StringKeyOf<T>>(event: EventName, fn: CallbackFunction<T, EventName>): this;
+    protected emit<EventName extends StringKeyOf<T>>(event: EventName, ...args: CallbackType<T, EventName>): this;
+    off<EventName extends StringKeyOf<T>>(event: EventName, fn?: CallbackFunction<T, EventName>): this;
+    protected removeAllListeners(): void;
+}
+export {};

package/types/src/extensions/Blocks/helpers/getBlockInfoFromPos.d.ts

@@ -10,10 +10,10 @@ export type BlockInfo = {
     depth: number;
 };
 /**
- * Retrieves information regarding the most nested block node in a ProseMirror doc, that a given position lies in.
+ * Retrieves information regarding the nearest blockContainer node in a
+ * ProseMirror doc, relative to a position.
  * @param doc The ProseMirror doc.
- * @param posInBlock A position somewhere within a block node.
- * @returns A BlockInfo object for the block the given position is in, or undefined if the position is not in a block
- * for the given doc.
+ * @param pos An integer position.
+ * @returns A BlockInfo object for the nearest blockContainer node.
  */
-export declare function getBlockInfoFromPos(doc: Node, posInBlock: number): BlockInfo | undefined;
+export declare function getBlockInfoFromPos(doc: Node, pos: number): BlockInfo;

package/types/src/extensions/DraggableBlocks/DraggableBlocksExtension.d.ts

@@ -0,0 +1,16 @@
+import { Editor, Extension } from "@tiptap/core";
+import { BlockSideMenuFactory } from "./BlockSideMenuFactoryTypes";
+import { BlockNoteEditor } from "../../BlockNoteEditor";
+import { BlockSchema } from "../Blocks/api/blockTypes";
+export type DraggableBlocksOptions<BSchema extends BlockSchema> = {
+    tiptapEditor: Editor;
+    editor: BlockNoteEditor<BSchema>;
+    blockSideMenuFactory: BlockSideMenuFactory<BSchema>;
+};
+/**
+ * This extension adds a menu to the side of blocks which features various BlockNote functions such as adding and
+ * removing blocks. More importantly, it adds a drag handle which allows the user to drag and drop blocks.
+ *
+ * code based on https://github.com/ueberdosis/tiptap/issues/323#issuecomment-506637799
+ */
+export declare const createDraggableBlocksExtension: <BSchema extends Record<string, import("../Blocks/api/blockTypes").BlockSpec<string, import("../Blocks/api/blockTypes").PropSchema>>>() => Extension<DraggableBlocksOptions<BSchema>, any>;

package/types/src/extensions/DraggableBlocks/DraggableBlocksPlugin.d.ts

@@ -0,0 +1,55 @@
+import { PluginView } from "@tiptap/pm/state";
+import { Plugin, PluginKey } from "prosemirror-state";
+import { BlockNoteEditor } from "../../BlockNoteEditor";
+import { BaseUiElementCallbacks, BaseUiElementState } from "../../shared/BaseUiElementTypes";
+import { Block, BlockSchema } from "../Blocks/api/blockTypes";
+import { Editor } from "@tiptap/core";
+export type SideMenuCallbacks = BaseUiElementCallbacks & {
+    addBlock: () => void;
+    freezeMenu: () => void;
+    unfreezeMenu: () => void;
+    blockDragStart: (event: DragEvent) => void;
+    blockDragEnd: () => void;
+};
+export type SideMenuState<BSchema extends BlockSchema> = BaseUiElementState & {
+    block: Block<BSchema>;
+};
+export declare class SideMenuView<BSchema extends BlockSchema> implements PluginView {
+    editor: BlockNoteEditor<BSchema>;
+    ttEditor: Editor;
+    private sideMenuState?;
+    updateSideMenu: () => void;
+    horizontalPosAnchoredAtRoot: boolean;
+    horizontalPosAnchor: number;
+    hoveredBlock: HTMLElement | undefined;
+    isDragging: boolean;
+    menuFrozen: boolean;
+    constructor(editor: BlockNoteEditor<BSchema>, tiptapEditor: Editor, updateSideMenu: (sideMenuState: SideMenuState<BSchema>) => void);
+    /**
+     * Sets isDragging when dragging text.
+     */
+    onDragStart: () => void;
+    /**
+     * If the event is outside the editor contents,
+     * we dispatch a fake event, so that we can still drop the content
+     * when dragging / dropping to the side of the editor
+     */
+    onDrop: (event: DragEvent) => void;
+    /**
+     * If the event is outside the editor contents,
+     * we dispatch a fake event, so that we can still drop the content
+     * when dragging / dropping to the side of the editor
+     */
+    onDragOver: (event: DragEvent) => void;
+    onKeyDown: (_event: KeyboardEvent) => void;
+    onMouseDown: (_event: MouseEvent) => void;
+    onMouseMove: (event: MouseEvent) => void;
+    onScroll: () => void;
+    destroy(): void;
+    addBlock(): void;
+}
+export declare const sideMenuPluginKey: PluginKey<any>;
+export declare function setupSideMenu<BSchema extends BlockSchema>(editor: BlockNoteEditor<BSchema>, tiptapEditor: Editor, updateSideMenu: (sideMenuState: SideMenuState<BSchema>) => void): {
+    plugin: Plugin;
+    callbacks: Omit<SideMenuCallbacks, "destroy">;
+};

package/types/src/extensions/DraggableBlocks/MultipleNodeSelection.d.ts

@@ -0,0 +1,24 @@
+import { Selection } from "prosemirror-state";
+import { Node, ResolvedPos, Slice } from "prosemirror-model";
+import { Mappable } from "prosemirror-transform";
+/**
+ * This class represents an editor selection which spans multiple nodes/blocks. It's currently only used to allow users
+ * to drag multiple blocks at the same time. Expects the selection anchor and head to be between nodes, i.e. just before
+ * the first target node and just after the last, and that anchor and head are at the same nesting level.
+ *
+ * Partially based on ProseMirror's NodeSelection implementation:
+ * (https://github.com/ProseMirror/prosemirror-state/blob/master/src/selection.ts)
+ * MultipleNodeSelection differs from NodeSelection in the following ways:
+ * 1. Stores which nodes are included in the selection instead of just a single node.
+ * 2. Already expects the selection to start just before the first target node and ends just after the last, while a
+ * NodeSelection automatically sets both anchor and head to just before the single target node.
+ */
+export declare class MultipleNodeSelection extends Selection {
+    nodes: Array<Node>;
+    constructor($anchor: ResolvedPos, $head: ResolvedPos);
+    static create(doc: Node, from: number, to?: number): MultipleNodeSelection;
+    content(): Slice;
+    eq(selection: Selection): boolean;
+    map(doc: Node, mapping: Mappable): Selection;
+    toJSON(): any;
+}

package/types/src/extensions/FormattingToolbar/FormattingToolbarExtension.d.ts

@@ -0,0 +1,11 @@
+import { Extension } from "@tiptap/core";
+import { BlockNoteEditor, BlockSchema } from "../..";
+import { FormattingToolbarFactory } from "./FormattingToolbarFactoryTypes";
+export type FormattingToolbarOptions<BSchema extends BlockSchema> = {
+    formattingToolbarFactory: FormattingToolbarFactory<BSchema>;
+    editor: BlockNoteEditor<BSchema>;
+};
+/**
+ * The menu that is displayed when selecting a piece of text.
+ */
+export declare const createFormattingToolbarExtension: <BSchema extends Record<string, import("../..").BlockSpec<string, import("../..").PropSchema>>>() => Extension<FormattingToolbarOptions<BSchema>, any>;

package/types/src/extensions/FormattingToolbar/FormattingToolbarFactoryTypes.d.ts

@@ -0,0 +1,10 @@
+import { EditorElement, ElementFactory } from "../../shared/EditorElement";
+import { BlockNoteEditor } from "../../BlockNoteEditor";
+import { BlockSchema } from "../Blocks/api/blockTypes";
+export type FormattingToolbarStaticParams<BSchema extends BlockSchema> = {
+    editor: BlockNoteEditor<BSchema>;
+    getReferenceRect: () => DOMRect;
+};
+export type FormattingToolbarDynamicParams = {};
+export type FormattingToolbar = EditorElement<FormattingToolbarDynamicParams>;
+export type FormattingToolbarFactory<BSchema extends BlockSchema> = ElementFactory<FormattingToolbarStaticParams<BSchema>, FormattingToolbarDynamicParams>;

package/types/src/extensions/HyperlinkToolbar/HyperlinkMark.d.ts

@@ -0,0 +1,8 @@
+import { HyperlinkToolbarPluginProps } from "./HyperlinkToolbarPlugin";
+/**
+ * This custom link includes a special menu for editing/deleting/opening the link.
+ * The menu will be triggered by hovering over the link with the mouse,
+ * or by moving the cursor inside the link text
+ */
+declare const Hyperlink: import("@tiptap/core").Mark<HyperlinkToolbarPluginProps, any>;
+export default Hyperlink;

package/types/src/extensions/SlashMenu/SlashMenuExtension.d.ts

@@ -0,0 +1,13 @@
+import { Extension } from "@tiptap/core";
+import { PluginKey } from "prosemirror-state";
+import { SuggestionsMenuFactory } from "../../shared/plugins/suggestion/SuggestionsMenuFactoryTypes";
+import { BaseSlashMenuItem } from "./BaseSlashMenuItem";
+import { BlockNoteEditor } from "../../BlockNoteEditor";
+import { BlockSchema } from "../Blocks/api/blockTypes";
+export type SlashMenuOptions<BSchema extends BlockSchema> = {
+    editor: BlockNoteEditor<BSchema> | undefined;
+    commands: BaseSlashMenuItem<BSchema>[] | undefined;
+    slashMenuFactory: SuggestionsMenuFactory<any> | undefined;
+};
+export declare const SlashMenuPluginKey: PluginKey<any>;
+export declare const createSlashMenuExtension: <BSchema extends Record<string, import("../Blocks/api/blockTypes").BlockSpec<string, import("../Blocks/api/blockTypes").PropSchema>>>() => Extension<SlashMenuOptions<BSchema>, any>;

package/types/src/extensions/SlashMenu/index.d.ts

@@ -0,0 +1,3 @@
+import { getDefaultSlashMenuItems } from "./defaultSlashMenuItems";
+import { BaseSlashMenuItem } from "./BaseSlashMenuItem";
+export { getDefaultSlashMenuItems, BaseSlashMenuItem };

package/types/src/shared/plugins/suggestion/SuggestionsMenuFactoryTypes.d.ts

@@ -0,0 +1,12 @@
+import { EditorElement, ElementFactory } from "../../EditorElement";
+import { SuggestionItem } from "./SuggestionItem";
+export type SuggestionsMenuStaticParams<T extends SuggestionItem> = {
+    itemCallback: (item: T) => void;
+    getReferenceRect: () => DOMRect;
+};
+export type SuggestionsMenuDynamicParams<T extends SuggestionItem> = {
+    items: T[];
+    keyboardHoveredItemIndex: number;
+};
+export type SuggestionsMenu<T extends SuggestionItem> = EditorElement<SuggestionsMenuDynamicParams<T>>;
+export type SuggestionsMenuFactory<T extends SuggestionItem> = ElementFactory<SuggestionsMenuStaticParams<T>, SuggestionsMenuDynamicParams<T>>;