@blocknote/core 0.42.2 → 0.43.0

package/src/extensions/Collaboration/CursorPlugin.ts

@@ -1,189 +0,0 @@
-import { defaultSelectionBuilder, yCursorPlugin } from "y-prosemirror";
-import { Awareness } from "y-protocols/awareness.js";
-import * as Y from "yjs";
-import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
-
-export type CollaborationUser = {
-  name: string;
-  color: string;
-  [key: string]: string;
-};
-
-export class CursorPlugin extends BlockNoteExtension {
-  public static key() {
-    return "yCursorPlugin";
-  }
-
-  private provider: { awareness: Awareness };
-  private recentlyUpdatedCursors: Map<
-    number,
-    { element: HTMLElement; hideTimeout: NodeJS.Timeout | undefined }
-  >;
-  constructor(
-    private collaboration: {
-      fragment: Y.XmlFragment;
-      user: CollaborationUser;
-      provider: { awareness: Awareness };
-      renderCursor?: (user: CollaborationUser) => HTMLElement;
-      showCursorLabels?: "always" | "activity";
-    },
-  ) {
-    super();
-    this.provider = collaboration.provider;
-    this.recentlyUpdatedCursors = new Map();
-
-    this.provider.awareness.setLocalStateField("user", collaboration.user);
-
-    if (collaboration.showCursorLabels !== "always") {
-      this.provider.awareness.on(
-        "change",
-        ({
-          updated,
-        }: {
-          added: Array<number>;
-          updated: Array<number>;
-          removed: Array<number>;
-        }) => {
-          for (const clientID of updated) {
-            const cursor = this.recentlyUpdatedCursors.get(clientID);
-
-            if (cursor) {
-              cursor.element.setAttribute("data-active", "");
-
-              if (cursor.hideTimeout) {
-                clearTimeout(cursor.hideTimeout);
-              }
-
-              this.recentlyUpdatedCursors.set(clientID, {
-                element: cursor.element,
-                hideTimeout: setTimeout(() => {
-                  cursor.element.removeAttribute("data-active");
-                }, 2000),
-              });
-            }
-          }
-        },
-      );
-    }
-
-    this.addProsemirrorPlugin(
-      yCursorPlugin(this.provider.awareness, {
-        selectionBuilder: defaultSelectionBuilder,
-        cursorBuilder: this.renderCursor,
-      }),
-    );
-  }
-
-  public get priority() {
-    return 999;
-  }
-
-  private renderCursor = (user: CollaborationUser, clientID: number) => {
-    let cursorData = this.recentlyUpdatedCursors.get(clientID);
-
-    if (!cursorData) {
-      const cursorElement = (
-        this.collaboration.renderCursor ?? CursorPlugin.defaultCursorRender
-      )(user);
-
-      if (this.collaboration.showCursorLabels !== "always") {
-        cursorElement.addEventListener("mouseenter", () => {
-          const cursor = this.recentlyUpdatedCursors.get(clientID)!;
-          cursor.element.setAttribute("data-active", "");
-
-          if (cursor.hideTimeout) {
-            clearTimeout(cursor.hideTimeout);
-            this.recentlyUpdatedCursors.set(clientID, {
-              element: cursor.element,
-              hideTimeout: undefined,
-            });
-          }
-        });
-
-        cursorElement.addEventListener("mouseleave", () => {
-          const cursor = this.recentlyUpdatedCursors.get(clientID)!;
-
-          this.recentlyUpdatedCursors.set(clientID, {
-            element: cursor.element,
-            hideTimeout: setTimeout(() => {
-              cursor.element.removeAttribute("data-active");
-            }, 2000),
-          });
-        });
-      }
-
-      cursorData = {
-        element: cursorElement,
-        hideTimeout: undefined,
-      };
-
-      this.recentlyUpdatedCursors.set(clientID, cursorData);
-    }
-
-    return cursorData.element;
-  };
-
-  public updateUser = (user: {
-    name: string;
-    color: string;
-    [key: string]: string;
-  }) => {
-    this.provider.awareness.setLocalStateField("user", user);
-  };
-
-  /**
-   * Determine whether the foreground color should be white or black based on a provided background color
-   * Inspired by: https://stackoverflow.com/a/3943023
-   *
-   */
-  public static isDarkColor(bgColor: string): boolean {
-    const color = bgColor.charAt(0) === "#" ? bgColor.substring(1, 7) : bgColor;
-    const r = parseInt(color.substring(0, 2), 16); // hexToR
-    const g = parseInt(color.substring(2, 4), 16); // hexToG
-    const b = parseInt(color.substring(4, 6), 16); // hexToB
-    const uicolors = [r / 255, g / 255, b / 255];
-    const c = uicolors.map((col) => {
-      if (col <= 0.03928) {
-        return col / 12.92;
-      }
-      return Math.pow((col + 0.055) / 1.055, 2.4);
-    });
-    const L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
-    return L <= 0.179;
-  }
-
-  public static defaultCursorRender = (user: CollaborationUser) => {
-    const cursorElement = document.createElement("span");
-
-    cursorElement.classList.add("bn-collaboration-cursor__base");
-
-    const caretElement = document.createElement("span");
-    caretElement.setAttribute("contentedEditable", "false");
-    caretElement.classList.add("bn-collaboration-cursor__caret");
-    caretElement.setAttribute(
-      "style",
-      `background-color: ${user.color}; color: ${
-        CursorPlugin.isDarkColor(user.color) ? "white" : "black"
-      }`,
-    );
-
-    const labelElement = document.createElement("span");
-
-    labelElement.classList.add("bn-collaboration-cursor__label");
-    labelElement.setAttribute(
-      "style",
-      `background-color: ${user.color}; color: ${
-        CursorPlugin.isDarkColor(user.color) ? "white" : "black"
-      }`,
-    );
-    labelElement.insertBefore(document.createTextNode(user.name), null);
-
-    caretElement.insertBefore(labelElement, null);
-
-    cursorElement.insertBefore(document.createTextNode("\u2060"), null); // Non-breaking space
-    cursorElement.insertBefore(caretElement, null);
-    cursorElement.insertBefore(document.createTextNode("\u2060"), null); // Non-breaking space
-
-    return cursorElement;
-  };
-}

package/src/extensions/Collaboration/ForkYDocPlugin.ts

@@ -1,192 +0,0 @@
-import * as Y from "yjs";
-
-import {
-  yCursorPluginKey,
-  ySyncPluginKey,
-  yUndoPluginKey,
-} from "y-prosemirror";
-import { CursorPlugin } from "./CursorPlugin.js";
-import { SyncPlugin } from "./SyncPlugin.js";
-import { UndoPlugin } from "./UndoPlugin.js";
-
-import {
-  BlockNoteEditor,
-  BlockNoteEditorOptions,
-} from "../../editor/BlockNoteEditor.js";
-import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
-
-export class ForkYDocPlugin extends BlockNoteExtension<{
-  forked: boolean;
-}> {
-  public static key() {
-    return "ForkYDocPlugin";
-  }
-
-  private editor: BlockNoteEditor<any, any, any>;
-  private collaboration: BlockNoteEditorOptions<any, any, any>["collaboration"];
-
-  constructor({
-    editor,
-    collaboration,
-  }: {
-    editor: BlockNoteEditor<any, any, any>;
-    collaboration: BlockNoteEditorOptions<any, any, any>["collaboration"];
-  }) {
-    super(editor);
-    this.editor = editor;
-    this.collaboration = collaboration;
-  }
-
-  /**
-   * To find a fragment in another ydoc, we need to search for it.
-   */
-  private findTypeInOtherYdoc<T extends Y.AbstractType<any>>(
-    ytype: T,
-    otherYdoc: Y.Doc,
-  ): T {
-    const ydoc = ytype.doc!;
-    if (ytype._item === null) {
-      /**
-       * If is a root type, we need to find the root key in the original ydoc
-       * and use it to get the type in the other ydoc.
-       */
-      const rootKey = Array.from(ydoc.share.keys()).find(
-        (key) => ydoc.share.get(key) === ytype,
-      );
-      if (rootKey == null) {
-        throw new Error("type does not exist in other ydoc");
-      }
-      return otherYdoc.get(rootKey, ytype.constructor as new () => T) as T;
-    } else {
-      /**
-       * If it is a sub type, we use the item id to find the history type.
-       */
-      const ytypeItem = ytype._item;
-      const otherStructs =
-        otherYdoc.store.clients.get(ytypeItem.id.client) ?? [];
-      const itemIndex = Y.findIndexSS(otherStructs, ytypeItem.id.clock);
-      const otherItem = otherStructs[itemIndex] as Y.Item;
-      const otherContent = otherItem.content as Y.ContentType;
-      return otherContent.type as T;
-    }
-  }
-
-  /**
-   * Whether the editor is editing a forked document,
-   * preserving a reference to the original document and the forked document.
-   */
-  public get isForkedFromRemote() {
-    return this.forkedState !== undefined;
-  }
-
-  /**
-   * Stores whether the editor is editing a forked document,
-   * preserving a reference to the original document and the forked document.
-   */
-  private forkedState:
-    | {
-        originalFragment: Y.XmlFragment;
-        undoStack: Y.UndoManager["undoStack"];
-        forkedFragment: Y.XmlFragment;
-      }
-    | undefined;
-
-  /**
-   * Fork the Y.js document from syncing to the remote,
-   * allowing modifications to the document without affecting the remote.
-   * These changes can later be rolled back or applied to the remote.
-   */
-  public fork() {
-    if (this.isForkedFromRemote) {
-      return;
-    }
-
-    const originalFragment = this.collaboration?.fragment;
-
-    if (!originalFragment) {
-      throw new Error("No fragment to fork from");
-    }
-
-    const doc = new Y.Doc();
-    // Copy the original document to a new Yjs document
-    Y.applyUpdate(doc, Y.encodeStateAsUpdate(originalFragment.doc!));
-
-    // Find the forked fragment in the new Yjs document
-    const forkedFragment = this.findTypeInOtherYdoc(originalFragment, doc);
-
-    this.forkedState = {
-      undoStack: yUndoPluginKey.getState(this.editor.prosemirrorState)!
-        .undoManager.undoStack,
-      originalFragment,
-      forkedFragment,
-    };
-
-    // Need to reset all the yjs plugins
-    this.editor._tiptapEditor.unregisterPlugin([
-      yCursorPluginKey,
-      yUndoPluginKey,
-      ySyncPluginKey,
-    ]);
-    // Register them again, based on the new forked fragment
-    this.editor._tiptapEditor.registerPlugin(
-      new SyncPlugin(forkedFragment).plugins[0],
-    );
-    this.editor._tiptapEditor.registerPlugin(
-      new UndoPlugin({ editor: this.editor }).plugins[0],
-    );
-    // No need to register the cursor plugin again, it's a local fork
-    this.emit("forked", true);
-  }
-
-  /**
-   * Resume syncing the Y.js document to the remote
-   * If `keepChanges` is true, any changes that have been made to the forked document will be applied to the original document.
-   * Otherwise, the original document will be restored and the changes will be discarded.
-   */
-  public merge({ keepChanges }: { keepChanges: boolean }) {
-    if (!this.forkedState) {
-      return;
-    }
-    // Remove the forked fragment's plugins
-    this.editor._tiptapEditor.unregisterPlugin(ySyncPluginKey);
-    this.editor._tiptapEditor.unregisterPlugin(yUndoPluginKey);
-
-    const { originalFragment, forkedFragment, undoStack } = this.forkedState;
-    this.editor.extensions["ySyncPlugin"] = new SyncPlugin(originalFragment);
-    this.editor.extensions["yCursorPlugin"] = new CursorPlugin(
-      this.collaboration!,
-    );
-    this.editor.extensions["yUndoPlugin"] = new UndoPlugin({
-      editor: this.editor,
-    });
-
-    // Register the plugins again, based on the original fragment
-    this.editor._tiptapEditor.registerPlugin(
-      this.editor.extensions["ySyncPlugin"].plugins[0],
-    );
-    this.editor._tiptapEditor.registerPlugin(
-      this.editor.extensions["yCursorPlugin"].plugins[0],
-    );
-    this.editor._tiptapEditor.registerPlugin(
-      this.editor.extensions["yUndoPlugin"].plugins[0],
-    );
-
-    // Reset the undo stack to the original undo stack
-    yUndoPluginKey.getState(
-      this.editor.prosemirrorState,
-    )!.undoManager.undoStack = undoStack;
-
-    if (keepChanges) {
-      // Apply any changes that have been made to the fork, onto the original doc
-      const update = Y.encodeStateAsUpdate(
-        forkedFragment.doc!,
-        Y.encodeStateVector(originalFragment.doc!),
-      );
-      // Applying this change will add to the undo stack, allowing it to be undone normally
-      Y.applyUpdate(originalFragment.doc!, update, this.editor);
-    }
-    // Reset the forked state
-    this.forkedState = undefined;
-    this.emit("forked", false);
-  }
-}

package/src/extensions/Collaboration/SyncPlugin.ts

@@ -1,18 +0,0 @@
-import { ySyncPlugin } from "y-prosemirror";
-import type * as Y from "yjs";
-import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
-
-export class SyncPlugin extends BlockNoteExtension {
-  public static key() {
-    return "ySyncPlugin";
-  }
-
-  constructor(fragment: Y.XmlFragment) {
-    super();
-    this.addProsemirrorPlugin(ySyncPlugin(fragment));
-  }
-
-  public get priority() {
-    return 1001;
-  }
-}

package/src/extensions/Collaboration/UndoPlugin.ts

@@ -1,18 +0,0 @@
-import { yUndoPlugin } from "y-prosemirror";
-import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
-import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
-
-export class UndoPlugin extends BlockNoteExtension {
-  public static key() {
-    return "yUndoPlugin";
-  }
-
-  constructor({ editor }: { editor: BlockNoteEditor<any, any, any> }) {
-    super();
-    this.addProsemirrorPlugin(yUndoPlugin({ trackedOrigins: [editor] }));
-  }
-
-  public get priority() {
-    return 1000;
-  }
-}

package/src/extensions/Collaboration/schemaMigration/SchemaMigrationPlugin.ts

@@ -1,59 +0,0 @@
-import { Plugin, PluginKey } from "@tiptap/pm/state";
-import * as Y from "yjs";
-
-import { BlockNoteExtension } from "../../../editor/BlockNoteExtension.js";
-import migrationRules from "./migrationRules/index.js";
-
-// This plugin allows us to update collaboration YDocs whenever BlockNote's
-// underlying ProseMirror schema changes. The plugin reads the current Yjs
-// fragment and dispatches additional transactions to the ProseMirror state, in
-// case things are found in the fragment that don't adhere to the editor schema
-// and need to be fixed. These fixes are defined as `MigrationRule`s within the
-// `migrationRules` directory.
-export class SchemaMigrationPlugin extends BlockNoteExtension {
-  private migrationDone = false;
-
-  public static key() {
-    return "schemaMigrationPlugin";
-  }
-
-  constructor(fragment: Y.XmlFragment) {
-    const pluginKey = new PluginKey(SchemaMigrationPlugin.key());
-
-    super();
-    this.addProsemirrorPlugin(
-      new Plugin({
-        key: pluginKey,
-        appendTransaction: (transactions, _oldState, newState) => {
-          if (this.migrationDone) {
-            return undefined;
-          }
-
-          if (
-            // If any of the transactions are not due to a yjs sync, we don't need to run the migration
-            !transactions.some((tr) => tr.getMeta("y-sync$")) ||
-            // If none of the transactions result in a document change, we don't need to run the migration
-            transactions.every((tr) => !tr.docChanged) ||
-            // If the fragment is still empty, we can't run the migration (since it has not yet been applied to the Y.Doc)
-            !fragment.firstChild
-          ) {
-            return undefined;
-          }
-
-          const tr = newState.tr;
-          for (const migrationRule of migrationRules) {
-            migrationRule(fragment, tr);
-          }
-
-          this.migrationDone = true;
-
-          if (!tr.docChanged) {
-            return undefined;
-          }
-
-          return tr;
-        },
-      }),
-    );
-  }
-}