@blocknote/core 0.42.2 → 0.43.0

package/src/extensions/Comments/CommentsPlugin.ts

@@ -1,392 +0,0 @@
-import { Node } from "prosemirror-model";
-import { Plugin, PluginKey } from "prosemirror-state";
-import { Decoration, DecorationSet } from "prosemirror-view";
-import { getRelativeSelection, ySyncPluginKey } from "y-prosemirror";
-import type {
-  CommentBody,
-  ThreadData,
-  ThreadStore,
-  User,
-} from "../../comments/index.js";
-import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
-import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
-import { CustomBlockNoteSchema } from "../../schema/schema.js";
-import { UserStore } from "./userstore/UserStore.js";
-import { getMarkRange } from "@tiptap/core";
-
-const PLUGIN_KEY = new PluginKey(`blocknote-comments`);
-const SET_SELECTED_THREAD_ID = "SET_SELECTED_THREAD_ID";
-
-type CommentsPluginState = {
-  /**
-   * Decorations to be rendered, specifically to indicate the selected thread
-   */
-  decorations: DecorationSet;
-};
-
-/**
- * Calculate the thread positions from the current document state
- */
-function getUpdatedThreadPositions(doc: Node, markType: string) {
-  const threadPositions = new Map<string, { from: number; to: number }>();
-
-  // find all thread marks and store their position + create decoration for selected thread
-  doc.descendants((node, pos) => {
-    node.marks.forEach((mark) => {
-      if (mark.type.name === markType) {
-        const thisThreadId = (mark.attrs as { threadId: string | undefined })
-          .threadId;
-        if (!thisThreadId) {
-          return;
-        }
-        const from = pos;
-        const to = from + node.nodeSize;
-
-        // FloatingThreads component uses "to" as the position, so always store the largest "to" found
-        // AnchoredThreads component uses "from" as the position, so always store the smallest "from" found
-        const currentPosition = threadPositions.get(thisThreadId) ?? {
-          from: Infinity,
-          to: 0,
-        };
-        threadPositions.set(thisThreadId, {
-          from: Math.min(from, currentPosition.from),
-          to: Math.max(to, currentPosition.to),
-        });
-      }
-    });
-  });
-  return threadPositions;
-}
-
-export class CommentsPlugin extends BlockNoteExtension {
-  public static key() {
-    return "comments";
-  }
-
-  public readonly userStore: UserStore<User>;
-
-  /**
-   * Whether a comment is currently being composed
-   */
-  private pendingComment = false;
-
-  /**
-   * The currently selected thread id
-   */
-  private selectedThreadId: string | undefined;
-
-  /**
-   * Store the positions of all threads in the document.
-   * this can be used later to implement a floating sidebar
-   */
-  private threadPositions: Map<string, { from: number; to: number }> =
-    new Map();
-
-  private emitStateUpdate() {
-    this.emit("update", {
-      selectedThreadId: this.selectedThreadId,
-      pendingComment: this.pendingComment,
-      threadPositions: this.threadPositions,
-    });
-  }
-
-  /**
-   * when a thread is resolved or deleted, we need to update the marks to reflect the new state
-   */
-  private updateMarksFromThreads = (threads: Map<string, ThreadData>) => {
-    this.editor.transact((tr) => {
-      tr.doc.descendants((node, pos) => {
-        node.marks.forEach((mark) => {
-          if (mark.type.name === this.markType) {
-            const markType = mark.type;
-            const markThreadId = mark.attrs.threadId;
-            const thread = threads.get(markThreadId);
-            const isOrphan = !!(!thread || thread.resolved || thread.deletedAt);
-
-            if (isOrphan !== mark.attrs.orphan) {
-              const trimmedFrom = Math.max(pos, 0);
-              const trimmedTo = Math.min(
-                pos + node.nodeSize,
-                tr.doc.content.size - 1,
-                tr.doc.content.size - 1,
-              );
-              tr.removeMark(trimmedFrom, trimmedTo, mark);
-              tr.addMark(
-                trimmedFrom,
-                trimmedTo,
-                markType.create({
-                  ...mark.attrs,
-                  orphan: isOrphan,
-                }),
-              );
-
-              if (isOrphan && this.selectedThreadId === markThreadId) {
-                // unselect
-                this.selectedThreadId = undefined;
-                this.emitStateUpdate();
-              }
-            }
-          }
-        });
-      });
-    });
-  };
-
-  constructor(
-    private readonly editor: BlockNoteEditor<any, any, any>,
-    public readonly threadStore: ThreadStore,
-    private readonly markType: string,
-    public readonly resolveUsers:
-      | undefined
-      | ((userIds: string[]) => Promise<User[]>),
-    public readonly commentEditorSchema?: CustomBlockNoteSchema<any, any, any>,
-  ) {
-    super();
-
-    if (!resolveUsers) {
-      throw new Error("resolveUsers is required for comments");
-    }
-    this.userStore = new UserStore<User>(resolveUsers);
-
-    // Note: Plugins are currently not destroyed when the editor is destroyed.
-    // We should unsubscribe from the threadStore when the editor is destroyed.
-    this.threadStore.subscribe(this.updateMarksFromThreads);
-
-    editor.onCreate(() => {
-      // Need to wait for TipTap editor state to be initialized
-      this.updateMarksFromThreads(this.threadStore.getThreads());
-      editor.onSelectionChange(() => {
-        if (this.pendingComment) {
-          this.pendingComment = false;
-          this.emitStateUpdate();
-        }
-      });
-    });
-
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const self = this;
-
-    this.addProsemirrorPlugin(
-      new Plugin<CommentsPluginState>({
-        key: PLUGIN_KEY,
-        state: {
-          init() {
-            return {
-              decorations: DecorationSet.empty,
-            };
-          },
-          apply(tr, state) {
-            const action = tr.getMeta(PLUGIN_KEY);
-
-            if (!tr.docChanged && !action) {
-              return state;
-            }
-
-            // only update threadPositions if the doc changed
-            const threadPositions = tr.docChanged
-              ? getUpdatedThreadPositions(tr.doc, self.markType)
-              : self.threadPositions;
-
-            if (threadPositions.size > 0 || self.threadPositions.size > 0) {
-              // small optimization; don't emit event if threadPositions before / after were both empty
-              self.threadPositions = threadPositions;
-              self.emitStateUpdate();
-            }
-
-            // update decorations if doc or selected thread changed
-            const decorations = [];
-
-            if (self.selectedThreadId) {
-              const selectedThreadPosition = threadPositions.get(
-                self.selectedThreadId,
-              );
-
-              if (selectedThreadPosition) {
-                decorations.push(
-                  Decoration.inline(
-                    selectedThreadPosition.from,
-                    selectedThreadPosition.to,
-                    {
-                      class: "bn-thread-mark-selected",
-                    },
-                  ),
-                );
-              }
-            }
-
-            return {
-              decorations: DecorationSet.create(tr.doc, decorations),
-            };
-          },
-        },
-        props: {
-          decorations(state) {
-            return (
-              PLUGIN_KEY.getState(state)?.decorations ?? DecorationSet.empty
-            );
-          },
-          /**
-           * Handle click on a thread mark and mark it as selected
-           */
-          handleClick: (view, pos, event) => {
-            if (event.button !== 0) {
-              return;
-            }
-
-            const node = view.state.doc.nodeAt(pos);
-
-            if (!node) {
-              self.selectThread(undefined);
-              return;
-            }
-
-            const markInSchema = view.state.schema.marks[markType];
-            const resolvedPos = view.state.doc.resolve(pos);
-            const commentMark = node.marks
-              .filter(
-                (mark) =>
-                  mark.type.name === markType && mark.attrs.orphan !== true,
-              )
-              .map((mark) => {
-                // get the range of this mark within the document, to check how close it is to the click position
-                const range = getMarkRange(
-                  resolvedPos,
-                  markInSchema,
-                  mark.attrs,
-                )!;
-
-                return {
-                  mark,
-                  // calculate how far the mark is from the click position
-                  distance:
-                    (Math.abs(range.from - pos) + Math.abs(range.to - pos)) / 2,
-                  // calculate the length of text the mark spans
-                  length: range.to - range.from,
-                };
-              })
-              // This allows us to not have comments which are unreachable because they are completely overlapped by other comments (issue #2073)
-              .sort((a, b) => {
-                // Find the mark which is closest to the click position
-                if (a.distance !== b.distance) {
-                  return a.distance - b.distance;
-                }
-                // Otherwise, select the mark which spans the smallest amount of text (most likely to be unreachable)
-                return a.length - b.length;
-              })[0]?.mark;
-
-            const threadId = commentMark?.attrs.threadId as string | undefined;
-            self.selectThread(threadId);
-          },
-        },
-      }),
-    );
-  }
-
-  /**
-   * Subscribe to state updates
-   */
-  public onUpdate(
-    callback: (state: {
-      pendingComment: boolean;
-      selectedThreadId: string | undefined;
-      threadPositions: Map<string, { from: number; to: number }>;
-    }) => void,
-  ) {
-    return this.on("update", callback);
-  }
-
-  /**
-   * Set the selected thread
-   */
-  public selectThread(threadId: string | undefined) {
-    if (this.selectedThreadId === threadId) {
-      return;
-    }
-    this.selectedThreadId = threadId;
-    this.emitStateUpdate();
-    this.editor.transact((tr) =>
-      tr.setMeta(PLUGIN_KEY, {
-        name: SET_SELECTED_THREAD_ID,
-      }),
-    );
-
-    if (threadId) {
-      const selectedThreadPosition = this.threadPositions.get(threadId);
-
-      if (!selectedThreadPosition) {
-        return;
-      }
-
-      // When a new thread is selected, scrolls the page to its reference text in
-      // the editor.
-      (
-        this.editor.prosemirrorView?.domAtPos(selectedThreadPosition.from)
-          .node as Element | undefined
-      )?.scrollIntoView({
-        behavior: "smooth",
-        block: "center",
-      });
-    }
-  }
-
-  /**
-   * Start a pending comment (e.g.: when clicking the "Add comment" button)
-   */
-  public startPendingComment() {
-    this.pendingComment = true;
-    this.emitStateUpdate();
-  }
-
-  /**
-   * Stop a pending comment (e.g.: user closes the comment composer)
-   */
-  public stopPendingComment() {
-    this.pendingComment = false;
-    this.emitStateUpdate();
-  }
-
-  /**
-   * Create a thread at the current selection
-   */
-  public async createThread(options: {
-    initialComment: {
-      body: CommentBody;
-      metadata?: any;
-    };
-    metadata?: any;
-  }) {
-    const thread = await this.threadStore.createThread(options);
-
-    if (this.threadStore.addThreadToDocument) {
-      // creating the mark is handled by the store
-      // this is useful if we don't have write-access to the document.
-      // We can then offload the responsibility of creating the mark to the server.
-      // (e.g.: RESTYjsThreadStore)
-      const view = this.editor.prosemirrorView!;
-      const pmSelection = view.state.selection;
-
-      const ystate = ySyncPluginKey.getState(view.state);
-
-      const selection = {
-        prosemirror: {
-          head: pmSelection.head,
-          anchor: pmSelection.anchor,
-        },
-        yjs: ystate
-          ? getRelativeSelection(ystate.binding, view.state)
-          : undefined, // if we're not using yjs
-      };
-
-      await this.threadStore.addThreadToDocument({
-        threadId: thread.id,
-        selection,
-      });
-    } else {
-      // we create the mark directly in the document
-      this.editor._tiptapEditor.commands.setMark(this.markType, {
-        orphan: false,
-        threadId: thread.id,
-      });
-    }
-  }
-}

package/src/extensions/FilePanel/FilePanelPlugin.ts

@@ -1,206 +0,0 @@
-import { EditorState, Plugin, PluginKey, PluginView } from "prosemirror-state";
-import { EditorView } from "prosemirror-view";
-
-import { ySyncPluginKey } from "y-prosemirror";
-import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
-import { BlockNoteExtension } from "../../editor/BlockNoteExtension.js";
-import { UiElementPosition } from "../../extensions-shared/UiElementPosition.js";
-import type {
-  BlockFromConfig,
-  InlineContentSchema,
-  StyleSchema,
-} from "../../schema/index.js";
-
-export type FilePanelState<
-  I extends InlineContentSchema,
-  S extends StyleSchema,
-> = UiElementPosition & {
-  // TODO: This typing is not quite right (children should be from BSchema)
-  block: BlockFromConfig<any, I, S>;
-};
-
-export class FilePanelView<I extends InlineContentSchema, S extends StyleSchema>
-  implements PluginView
-{
-  public state?: FilePanelState<I, S>;
-  public emitUpdate: () => void;
-
-  constructor(
-    private readonly editor: BlockNoteEditor<Record<string, any>, I, S>,
-    private readonly pluginKey: PluginKey<FilePanelState<I, S>>,
-    private readonly pmView: EditorView,
-    emitUpdate: (state: FilePanelState<I, S>) => void,
-  ) {
-    this.emitUpdate = () => {
-      if (!this.state) {
-        throw new Error("Attempting to update uninitialized file panel");
-      }
-
-      emitUpdate(this.state);
-    };
-
-    pmView.dom.addEventListener("mousedown", this.mouseDownHandler);
-    pmView.dom.addEventListener("dragstart", this.dragstartHandler);
-
-    // Setting capture=true ensures that any parent container of the editor that
-    // gets scrolled will trigger the scroll event. Scroll events do not bubble
-    // and so won't propagate to the document by default.
-    pmView.root.addEventListener("scroll", this.scrollHandler, true);
-  }
-
-  mouseDownHandler = () => {
-    if (this.state?.show) {
-      this.state.show = false;
-      this.emitUpdate();
-    }
-  };
-
-  // For dragging the whole editor.
-  dragstartHandler = () => {
-    if (this.state?.show) {
-      this.state.show = false;
-      this.emitUpdate();
-    }
-  };
-
-  scrollHandler = () => {
-    if (this.state?.show) {
-      const blockElement = this.pmView.root.querySelector(
-        `[data-node-type="blockContainer"][data-id="${this.state.block.id}"]`,
-      );
-      if (!blockElement) {
-        return;
-      }
-      this.state.referencePos = blockElement.getBoundingClientRect();
-      this.emitUpdate();
-    }
-  };
-
-  update(view: EditorView, prevState: EditorState) {
-    const pluginState = this.pluginKey.getState(view.state);
-    const prevPluginState = this.pluginKey.getState(prevState);
-
-    if (!this.state?.show && pluginState?.block && this.editor.isEditable) {
-      const blockElement = this.pmView.root.querySelector(
-        `[data-node-type="blockContainer"][data-id="${pluginState.block.id}"]`,
-      );
-      if (!blockElement) {
-        return;
-      }
-      this.state = {
-        show: true,
-        referencePos: blockElement.getBoundingClientRect(),
-        block: pluginState.block,
-      };
-
-      this.emitUpdate();
-
-      return;
-    }
-
-    const isOpening = pluginState?.block && !prevPluginState?.block;
-    const isClosing = !pluginState?.block && prevPluginState?.block;
-    if (isOpening && this.state && !this.state.show) {
-      this.state.show = true;
-      this.emitUpdate();
-    }
-    if (isClosing && this.state?.show) {
-      this.state.show = false;
-      this.emitUpdate();
-    }
-  }
-
-  closeMenu = () => {
-    if (this.state?.show) {
-      this.state.show = false;
-      this.emitUpdate();
-    }
-  };
-
-  destroy() {
-    this.pmView.dom.removeEventListener("mousedown", this.mouseDownHandler);
-
-    this.pmView.dom.removeEventListener("dragstart", this.dragstartHandler);
-
-    this.pmView.root.removeEventListener("scroll", this.scrollHandler, true);
-  }
-}
-
-const filePanelPluginKey = new PluginKey<FilePanelState<any, any>>(
-  "FilePanelPlugin",
-);
-
-export class FilePanelProsemirrorPlugin<
-  I extends InlineContentSchema,
-  S extends StyleSchema,
-> extends BlockNoteExtension {
-  public static key() {
-    return "filePanel";
-  }
-
-  private view: FilePanelView<I, S> | undefined;
-
-  constructor(editor: BlockNoteEditor<Record<string, any>, I, S>) {
-    super();
-    this.addProsemirrorPlugin(
-      new Plugin<{
-        block: BlockFromConfig<any, I, S> | undefined;
-      }>({
-        key: filePanelPluginKey,
-        view: (editorView) => {
-          this.view = new FilePanelView<I, S>(
-            editor,
-            filePanelPluginKey as any,
-            editorView,
-            (state) => {
-              this.emit("update", state);
-            },
-          );
-          return this.view;
-        },
-        props: {
-          handleKeyDown: (_view, event: KeyboardEvent) => {
-            if (event.key === "Escape" && this.shown) {
-              this.view?.closeMenu();
-              return true;
-            }
-            return false;
-          },
-        },
-        state: {
-          init: () => {
-            return {
-              block: undefined,
-            };
-          },
-          apply: (transaction, prev) => {
-            const state: FilePanelState<I, S> | undefined =
-              transaction.getMeta(filePanelPluginKey);
-
-            if (state) {
-              return state;
-            }
-
-            if (
-              !transaction.getMeta(ySyncPluginKey) &&
-              (transaction.selectionSet || transaction.docChanged)
-            ) {
-              return { block: undefined };
-            }
-            return prev;
-          },
-        },
-      }),
-    );
-  }
-
-  public get shown() {
-    return this.view?.state?.show || false;
-  }
-
-  public onUpdate(callback: (state: FilePanelState<I, S>) => void) {
-    return this.on("update", callback);
-  }
-
-  public closeMenu = () => this.view?.closeMenu();
-}