@blocknote/core 0.6.2 → 0.7.0

package/package.json

@@ -3,7 +3,7 @@
   "homepage": "https://github.com/TypeCellOS/BlockNote",
   "private": false,
   "license": "MPL-2.0",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "files": [
     "dist",
     "types",
@@ -51,23 +51,23 @@
     "@emotion/cache": "^11.10.5",
     "@emotion/serialize": "^1.1.1",
     "@emotion/utils": "^1.2.0",
-    "@tiptap/core": "2.0.0-beta.217",
-    "@tiptap/extension-bold": "2.0.0-beta.217",
-    "@tiptap/extension-code": "2.0.0-beta.217",
-    "@tiptap/extension-collaboration": "2.0.0-beta.217",
-    "@tiptap/extension-collaboration-cursor": "2.0.0-beta.217",
-    "@tiptap/extension-dropcursor": "2.0.0-beta.217",
-    "@tiptap/extension-gapcursor": "2.0.0-beta.217",
-    "@tiptap/extension-hard-break": "2.0.0-beta.217",
-    "@tiptap/extension-history": "2.0.0-beta.217",
-    "@tiptap/extension-horizontal-rule": "2.0.0-beta.217",
-    "@tiptap/extension-italic": "2.0.0-beta.217",
-    "@tiptap/extension-link": "2.0.0-beta.217",
-    "@tiptap/extension-paragraph": "2.0.0-beta.217",
-    "@tiptap/extension-strike": "2.0.0-beta.217",
-    "@tiptap/extension-text": "2.0.0-beta.217",
-    "@tiptap/extension-underline": "2.0.0-beta.217",
-    "@tiptap/pm": "2.0.0-beta.217",
+    "@tiptap/core": "^2.0.3",
+    "@tiptap/extension-bold": "^2.0.3",
+    "@tiptap/extension-code": "^2.0.3",
+    "@tiptap/extension-collaboration": "^2.0.3",
+    "@tiptap/extension-collaboration-cursor": "^2.0.3",
+    "@tiptap/extension-dropcursor": "^2.0.3",
+    "@tiptap/extension-gapcursor": "^2.0.3",
+    "@tiptap/extension-hard-break": "^2.0.3",
+    "@tiptap/extension-history": "^2.0.3",
+    "@tiptap/extension-horizontal-rule": "^2.0.3",
+    "@tiptap/extension-italic": "^2.0.3",
+    "@tiptap/extension-link": "^2.0.3",
+    "@tiptap/extension-paragraph": "^2.0.3",
+    "@tiptap/extension-strike": "^2.0.3",
+    "@tiptap/extension-text": "^2.0.3",
+    "@tiptap/extension-underline": "^2.0.3",
+    "@tiptap/pm": "^2.0.3",
     "hast-util-from-dom": "^4.2.0",
     "lodash": "^4.17.21",
     "rehype-parse": "^8.0.4",
@@ -80,8 +80,8 @@
     "unified": "^10.1.2",
     "uuid": "^8.3.2",
     "y-prosemirror": "1.0.20",
-    "y-protocols": "1.0.5",
-    "yjs": "13.5.44"
+    "y-protocols": "^1.0.5",
+    "yjs": "^13.6.1"
   },
   "devDependencies": {
     "@types/hast": "^2.3.4",
@@ -109,5 +109,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "51407afbd8f4976d6ff986b9edb5e242786c1c58"
+  "gitHead": "c0fc174529fb2bcd23c53956818ad0f451c0e65c"
 }

package/src/BlockNoteEditor.ts

@@ -2,6 +2,7 @@ import { Editor, EditorOptions } from "@tiptap/core";
 import { Node } from "prosemirror-model";
 // import "./blocknote.css";
 import { Editor as TiptapEditor } from "@tiptap/core/dist/packages/core/src/Editor";
+import * as Y from "yjs";
 import {
   insertBlocks,
   removeBlocks,
@@ -23,12 +24,12 @@ import {
   BlockIdentifier,
   PartialBlock,
 } from "./extensions/Blocks/api/blockTypes";
+import { TextCursorPosition } from "./extensions/Blocks/api/cursorPositionTypes";
 import {
   ColorStyle,
   Styles,
   ToggledStyle,
 } from "./extensions/Blocks/api/inlineContentTypes";
-import { TextCursorPosition } from "./extensions/Blocks/api/cursorPositionTypes";
 import { Selection } from "./extensions/Blocks/api/selectionTypes";
 import { getBlockInfoFromPos } from "./extensions/Blocks/helpers/getBlockInfoFromPos";
 import {
@@ -37,9 +38,9 @@ import {
 } from "./extensions/SlashMenu";
 
 export type BlockNoteEditorOptions = {
-  // TODO: Figure out if enableBlockNoteExtensions/disableHistoryExtension are needed and document them.
+  // TODO: Figure out if enableBlockNoteExtensions is needed and document them.
   enableBlockNoteExtensions: boolean;
-  disableHistoryExtension: boolean;
+
   /**
    * UI element factories for creating a custom UI, including custom positioning
    * & rendering.
@@ -97,6 +98,31 @@ export type BlockNoteEditorOptions = {
    */
   theme: "light" | "dark";
 
+  /**
+   * When enabled, allows for collaboration between multiple users.
+   */
+  collaboration: {
+    /**
+     * The Yjs XML fragment that's used for collaboration.
+     */
+    fragment: Y.XmlFragment;
+    /**
+     * The user info for the current user that's shown to other collaborators.
+     */
+    user: {
+      name: string;
+      color: string;
+    };
+    /**
+     * A Yjs provider (used for awareness / cursor information)
+     */
+    provider: any;
+    /**
+     * Optional function to customize how cursors of users are rendered
+     */
+    renderCursor?: (user: any) => HTMLElement;
+  };
+
   // tiptap options, undocumented
   _tiptapOptions: any;
 };
@@ -119,23 +145,20 @@ export class BlockNoteEditor {
     this._tiptapEditor.view.focus();
   }
 
-  constructor(options: Partial<BlockNoteEditorOptions> = {}) {
+  constructor(private readonly options: Partial<BlockNoteEditorOptions> = {}) {
     // apply defaults
     options = {
       defaultStyles: true,
       ...options,
     };
 
-    const blockNoteExtensions = getBlockNoteExtensions({
+    const extensions = getBlockNoteExtensions({
       editor: this,
       uiFactories: options.uiFactories || {},
       slashCommands: options.slashCommands || defaultSlashMenuItems,
+      collaboration: options.collaboration,
     });
 
-    let extensions = options.disableHistoryExtension
-      ? blockNoteExtensions.filter((e) => e.name !== "history")
-      : blockNoteExtensions;
-
     const tiptapOptions: EditorOptions = {
       // TODO: This approach to setting initial content is "cleaner" but requires the PM editor schema, which is only
       //  created after initializing the TipTap editor. Not sure it's feasible.
@@ -644,4 +667,16 @@ export class BlockNoteEditor {
   public async markdownToBlocks(markdown: string): Promise<Block[]> {
     return markdownToBlocks(markdown, this._tiptapEditor.schema);
   }
+
+  /**
+   * Updates the user info for the current user that's shown to other collaborators.
+   */
+  public updateCollaborationUserInfo(user: { name: string; color: string }) {
+    if (!this.options.collaboration) {
+      throw new Error(
+        "Cannot update collaboration user info when collaboration is disabled."
+      );
+    }
+    this._tiptapEditor.commands.updateUser(user);
+  }
 }

package/src/BlockNoteExtensions.ts

@@ -4,6 +4,8 @@ import { BlockNoteEditor } from "./BlockNoteEditor";
 
 import { Bold } from "@tiptap/extension-bold";
 import { Code } from "@tiptap/extension-code";
+import Collaboration from "@tiptap/extension-collaboration";
+import CollaborationCursor from "@tiptap/extension-collaboration-cursor";
 import { Dropcursor } from "@tiptap/extension-dropcursor";
 import { Gapcursor } from "@tiptap/extension-gapcursor";
 import { HardBreak } from "@tiptap/extension-hard-break";
@@ -13,6 +15,8 @@ import { Link } from "@tiptap/extension-link";
 import { Strike } from "@tiptap/extension-strike";
 import { Text } from "@tiptap/extension-text";
 import { Underline } from "@tiptap/extension-underline";
+import * as Y from "yjs";
+import styles from "./editor.module.css";
 import { BackgroundColorExtension } from "./extensions/BackgroundColor/BackgroundColorExtension";
 import { BackgroundColorMark } from "./extensions/BackgroundColor/BackgroundColorMark";
 import { blocks } from "./extensions/Blocks";
@@ -46,6 +50,15 @@ export const getBlockNoteExtensions = (opts: {
   editor: BlockNoteEditor;
   uiFactories: UiFactories;
   slashCommands: BaseSlashMenuItem[];
+  collaboration?: {
+    fragment: Y.XmlFragment;
+    user: {
+      name: string;
+      color: string;
+    };
+    provider: any;
+    renderCursor?: (user: any) => HTMLElement;
+  };
 }) => {
   const ret: Extensions = [
     extensions.ClipboardTextSerializer,
@@ -90,12 +103,48 @@ export const getBlockNoteExtensions = (opts: {
     ...blocks,
 
     Dropcursor.configure({ width: 5, color: "#ddeeff" }),
-    History,
     // This needs to be at the bottom of this list, because Key events (such as enter, when selecting a /command),
     // should be handled before Enter handlers in other components like splitListItem
     TrailingNode,
   ];
 
+  if (opts.collaboration) {
+    ret.push(
+      Collaboration.configure({
+        fragment: opts.collaboration.fragment,
+      })
+    );
+    const defaultRender = (user: { color: string; name: string }) => {
+      const cursor = document.createElement("span");
+
+      cursor.classList.add(styles["collaboration-cursor__caret"]);
+      cursor.setAttribute("style", `border-color: ${user.color}`);
+
+      const label = document.createElement("span");
+
+      label.classList.add(styles["collaboration-cursor__label"]);
+      label.setAttribute("style", `background-color: ${user.color}`);
+      label.insertBefore(document.createTextNode(user.name), null);
+
+      const nonbreakingSpace1 = document.createTextNode("\u2060");
+      const nonbreakingSpace2 = document.createTextNode("\u2060");
+      cursor.insertBefore(nonbreakingSpace1, null);
+      cursor.insertBefore(label, null);
+      cursor.insertBefore(nonbreakingSpace2, null);
+      return cursor;
+    };
+    ret.push(
+      CollaborationCursor.configure({
+        user: opts.collaboration.user,
+        render: opts.collaboration.renderCursor || defaultRender,
+        provider: opts.collaboration.provider,
+      })
+    );
+  } else {
+    // disable history extension when collaboration is enabled as Yjs takes care of undo / redo
+    ret.push(History);
+  }
+
   if (opts.uiFactories.blockSideMenuFactory) {
     ret.push(
       DraggableBlocksExtension.configure({

package/src/editor.module.css

@@ -38,9 +38,12 @@ Tippy popups that are appended to document.body directly
 .defaultStyles h3,
 .defaultStyles li {
   all: unset !important;
+  flex-grow: 1 !important;
   margin: 0;
   padding: 0;
   font-size: inherit;
+  /* min width to make sure cursor is always visible */
+  min-width: 2px !important;
 }
 
 .defaultStyles {
@@ -54,16 +57,43 @@ Tippy popups that are appended to document.body directly
 }
 
 [data-theme="light"] {
-  background-color: #FFFFFF;
+  background-color: #ffffff;
   color: #444444;
 }
 
 [data-theme="dark"] {
   background-color: #444444;
-  color: #DDDDDD;
+  color: #dddddd;
 }
 
 .dragPreview {
   position: absolute;
   top: -1000px;
 }
+
+/* Give a remote user a caret */
+.collaboration-cursor__caret {
+  border-left: 1px solid #0d0d0d;
+  border-right: 1px solid #0d0d0d;
+  margin-left: -1px;
+  margin-right: -1px;
+  pointer-events: none;
+  position: relative;
+  word-break: normal;
+}
+
+/* Render the username above the caret */
+.collaboration-cursor__label {
+  border-radius: 3px 3px 3px 0;
+  color: #0d0d0d;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  left: -1px;
+  line-height: normal;
+  padding: 0.1rem 0.3rem;
+  position: absolute;
+  top: -1.4em;
+  user-select: none;
+  white-space: nowrap;
+}

package/src/extensions/Blocks/nodes/Block.module.css

@@ -10,7 +10,11 @@ BASIC STYLES
 .blockContent {
   padding: 3px 0;
   transition: font-size 0.2s;
-  /* display: inline-block; */
+  /*
+  because the content elements are display: block
+  we use flex to position them next to list markers
+  */
+  display: flex;
 }
 
 .blockContent::before {
@@ -40,13 +44,17 @@ NESTED BLOCKS
   transition: all 0.2s 0.1s;
 }
 
-[data-theme="light"] .blockGroup .blockGroup
-> .blockOuter:not([data-prev-depth-changed])::before {
-  border-left: 1px solid #CCCCCC;
+[data-theme="light"]
+  .blockGroup
+  .blockGroup
+  > .blockOuter:not([data-prev-depth-changed])::before {
+  border-left: 1px solid #cccccc;
 }
 
-[data-theme="dark"] .blockGroup .blockGroup
-> .blockOuter:not([data-prev-depth-changed])::before {
+[data-theme="dark"]
+  .blockGroup
+  .blockGroup
+  > .blockOuter:not([data-prev-depth-changed])::before {
   border-left: 1px solid #999999;
 }
 
@@ -217,10 +225,6 @@ NESTED BLOCKS
 
 /* PLACEHOLDERS*/
 
-.blockContent > :first-child {
-  display: inline;
-}
-
 .blockContent.isEmpty > :first-child:before,
 .blockContent.isFilter > :first-child:before {
   /*float: left; */
@@ -234,7 +238,7 @@ NESTED BLOCKS
 
 [data-theme="light"] .blockContent.isEmpty > :first-child:before,
 .blockContent.isFilter > :first-child:before {
-  color: #CCCCCC;
+  color: #cccccc;
 }
 
 [data-theme="dark"] .blockContent.isEmpty > :first-child:before,

package/types/src/BlockNoteEditor.d.ts

@@ -1,13 +1,13 @@
 import { Editor as TiptapEditor } from "@tiptap/core/dist/packages/core/src/Editor";
+import * as Y from "yjs";
 import { UiFactories } from "./BlockNoteExtensions";
 import { Block, BlockIdentifier, PartialBlock } from "./extensions/Blocks/api/blockTypes";
-import { Styles } from "./extensions/Blocks/api/inlineContentTypes";
 import { TextCursorPosition } from "./extensions/Blocks/api/cursorPositionTypes";
+import { Styles } from "./extensions/Blocks/api/inlineContentTypes";
 import { Selection } from "./extensions/Blocks/api/selectionTypes";
 import { BaseSlashMenuItem } from "./extensions/SlashMenu";
 export type BlockNoteEditorOptions = {
     enableBlockNoteExtensions: boolean;
-    disableHistoryExtension: boolean;
     /**
      * UI element factories for creating a custom UI, including custom positioning
      * & rendering.
@@ -63,9 +63,34 @@ export type BlockNoteEditorOptions = {
      * @default "light"
      */
     theme: "light" | "dark";
+    /**
+     * When enabled, allows for collaboration between multiple users.
+     */
+    collaboration: {
+        /**
+         * The Yjs XML fragment that's used for collaboration.
+         */
+        fragment: Y.XmlFragment;
+        /**
+         * The user info for the current user that's shown to other collaborators.
+         */
+        user: {
+            name: string;
+            color: string;
+        };
+        /**
+         * A Yjs provider (used for awareness / cursor information)
+         */
+        provider: any;
+        /**
+         * Optional function to customize how cursors of users are rendered
+         */
+        renderCursor?: (user: any) => HTMLElement;
+    };
     _tiptapOptions: any;
 };
 export declare class BlockNoteEditor {
+    private readonly options;
     readonly _tiptapEditor: TiptapEditor & {
         contentComponent: any;
     };
@@ -225,4 +250,11 @@ export declare class BlockNoteEditor {
      * @returns The blocks parsed from the Markdown string.
      */
     markdownToBlocks(markdown: string): Promise<Block[]>;
+    /**
+     * Updates the user info for the current user that's shown to other collaborators.
+     */
+    updateCollaborationUserInfo(user: {
+        name: string;
+        color: string;
+    }): void;
 }

package/types/src/BlockNoteExtensions.d.ts

@@ -1,5 +1,6 @@
 import { Extensions } from "@tiptap/core";
 import { BlockNoteEditor } from "./BlockNoteEditor";
+import * as Y from "yjs";
 import { BlockSideMenuFactory } from "./extensions/DraggableBlocks/BlockSideMenuFactoryTypes";
 import { FormattingToolbarFactory } from "./extensions/FormattingToolbar/FormattingToolbarFactoryTypes";
 import { HyperlinkToolbarFactory } from "./extensions/HyperlinkToolbar/HyperlinkToolbarFactoryTypes";
@@ -18,4 +19,13 @@ export declare const getBlockNoteExtensions: (opts: {
     editor: BlockNoteEditor;
     uiFactories: UiFactories;
     slashCommands: BaseSlashMenuItem[];
+    collaboration?: {
+        fragment: Y.XmlFragment;
+        user: {
+            name: string;
+            color: string;
+        };
+        provider: any;
+        renderCursor?: ((user: any) => HTMLElement) | undefined;
+    } | undefined;
 }) => Extensions;

package/types/src/CustomBlock.d.ts

@@ -0,0 +1,15 @@
+import { Node } from "@tiptap/core";
+import { NodeViewRendererProps } from "@tiptap/core";
+export type CustomBlock = {
+    name: string;
+    priority?: number;
+    atom?: boolean;
+    selectable?: boolean;
+    className?: string;
+    props?: Record<string, string>;
+    element: (props: NodeViewRendererProps) => {
+        element: HTMLElement;
+        editable?: HTMLElement;
+    };
+};
+export declare function createCustomBlock(customBlock: CustomBlock): Node<CustomBlock, any>;

package/types/src/extensions/Blocks/api/alertBlock.d.ts

@@ -0,0 +1,13 @@
+export declare const Alert: import("./blockTypes").BlockSpec<"alert", {
+    readonly textAlignment: {
+        default: "left";
+        values: readonly ["left", "center", "right", "justify"];
+    };
+    readonly textColor: {
+        default: "black";
+    };
+    readonly type: {
+        readonly default: "warning";
+        readonly values: readonly ["warning", "error", "info", "success"];
+    };
+}>;

package/types/src/extensions/Blocks/api/alertBlock2.d.ts

@@ -0,0 +1,13 @@
+export declare const Alert2: import("./blockTypes").BlockSpec<"alert2", {
+    readonly textAlignment: {
+        default: "left";
+        values: readonly ["left", "center", "right", "justify"];
+    };
+    readonly textColor: {
+        default: "black";
+    };
+    readonly type: {
+        readonly default: "warning";
+        readonly values: readonly ["warning", "error", "info", "success"];
+    };
+}>;

package/types/src/extensions/Blocks/api/block.d.ts

@@ -0,0 +1,15 @@
+import { Attribute, Extension } from "@tiptap/core";
+import { BlockConfig, BlockSchema, BlockSpec, PropSchema, TipTapNode, TipTapNodeConfig } from "./blockTypes";
+export declare function propsToAttributes<BType extends string, PSchema extends PropSchema, ContainsInlineContent extends boolean, BSchema extends BlockSchema>(blockConfig: Omit<BlockConfig<BType, PSchema, ContainsInlineContent, BSchema>, "render">): Record<string, Attribute>;
+export declare function parse<BType extends string, PSchema extends PropSchema, ContainsInlineContent extends boolean, BSchema extends BlockSchema>(blockConfig: Omit<BlockConfig<BType, PSchema, ContainsInlineContent, BSchema>, "render">): {
+    getAttrs: (node: HTMLElement | string) => false | import("./blockTypes").Props<PSchema>;
+}[] | {
+    tag: string;
+}[];
+export declare function render<BType extends string, PSchema extends PropSchema, ContainsInlineContent extends boolean, BSchema extends BlockSchema>(blockConfig: Omit<BlockConfig<BType, PSchema, ContainsInlineContent, BSchema>, "render">, HTMLAttributes: Record<string, any>): {
+    dom: HTMLDivElement;
+    contentDOM: HTMLDivElement | undefined;
+};
+export declare function createBlockSpec<BType extends string, PSchema extends PropSchema, ContainsInlineContent extends boolean, BSchema extends BlockSchema>(blockConfig: BlockConfig<BType, PSchema, ContainsInlineContent, BSchema>): BlockSpec<BType, PSchema>;
+export declare function createTipTapBlock<Type extends string>(config: TipTapNodeConfig<Type>): TipTapNode<Type>;
+export declare const CustomBlockSerializerExtension: Extension<any, any>;

package/types/src/extensions/Blocks/api/defaultBlocks.d.ts

@@ -0,0 +1,81 @@
+import { TypesMatch } from "./blockTypes";
+export declare const defaultProps: {
+    backgroundColor: {
+        default: "transparent";
+    };
+    textColor: {
+        default: "black";
+    };
+    textAlignment: {
+        default: "left";
+        values: readonly ["left", "center", "right", "justify"];
+    };
+};
+export type DefaultProps = typeof defaultProps;
+export declare const defaultBlockSchema: {
+    readonly paragraph: {
+        readonly propSchema: {
+            backgroundColor: {
+                default: "transparent";
+            };
+            textColor: {
+                default: "black";
+            };
+            textAlignment: {
+                default: "left";
+                values: readonly ["left", "center", "right", "justify"];
+            };
+        };
+        readonly node: import("./blockTypes").TipTapNode<"paragraph">;
+    };
+    readonly heading: {
+        readonly propSchema: {
+            readonly level: {
+                readonly default: "1";
+                readonly values: readonly ["1", "2", "3"];
+            };
+            readonly backgroundColor: {
+                default: "transparent";
+            };
+            readonly textColor: {
+                default: "black";
+            };
+            readonly textAlignment: {
+                default: "left";
+                values: readonly ["left", "center", "right", "justify"];
+            };
+        };
+        readonly node: import("./blockTypes").TipTapNode<"heading">;
+    };
+    readonly bulletListItem: {
+        readonly propSchema: {
+            backgroundColor: {
+                default: "transparent";
+            };
+            textColor: {
+                default: "black";
+            };
+            textAlignment: {
+                default: "left";
+                values: readonly ["left", "center", "right", "justify"];
+            };
+        };
+        readonly node: import("./blockTypes").TipTapNode<"bulletListItem">;
+    };
+    readonly numberedListItem: {
+        readonly propSchema: {
+            backgroundColor: {
+                default: "transparent";
+            };
+            textColor: {
+                default: "black";
+            };
+            textAlignment: {
+                default: "left";
+                values: readonly ["left", "center", "right", "justify"];
+            };
+        };
+        readonly node: import("./blockTypes").TipTapNode<"numberedListItem">;
+    };
+};
+export type DefaultBlockSchema = TypesMatch<typeof defaultBlockSchema>;

package/types/src/extensions/Blocks/nodes/BlockContent/TableContent/TableCol.d.ts

@@ -0,0 +1,2 @@
+import { Node } from "@tiptap/core";
+export declare const TableCol: Node<any, any>;

package/types/src/extensions/Blocks/nodes/BlockContent/TableContent/TableContent.d.ts

@@ -0,0 +1,2 @@
+import { Node } from "@tiptap/core";
+export declare const TableContent: Node<any, any>;

package/types/src/extensions/Blocks/nodes/BlockContent/TableContent/TableRow.d.ts

@@ -0,0 +1,2 @@
+import { Node } from "@tiptap/core";
+export declare const TableRow: Node<any, any>;