Merge branch 'refs/heads/main' into releases

Author: matthewlipski

packages/core/src/api/blockManipulation/blockManipulation.test.ts

@@ -39,17 +39,6 @@ const schema = BlockNoteSchema.create({
 let editor: BlockNoteEditor<typeof schema.blockSchema>;
 const div = document.createElement("div");
 
-function waitForEditor() {
-  // wait for create event on editor,
-  // this is necessary because otherwise UniqueId.create hasn't been called yet, and
-  // blocks would have "null" as their id
-  return new Promise<void>((resolve) => {
-    editor._tiptapEditor.on("create", () => {
-      resolve();
-    });
-  });
-}
-
 let singleBlock: PartialBlock<
   typeof schema.blockSchema,
   DefaultInlineContentSchema,
@@ -195,35 +184,27 @@ describe("Test strong typing", () => {
 });
 
 describe("Inserting Blocks with Different Placements", () => {
-  it("Insert before existing block", async () => {
-    await waitForEditor();
-
+  it("Insert before existing block", () => {
     const output = insert("before");
 
     expect(output).toMatchSnapshot();
   });
 
-  it("Insert nested inside existing block", async () => {
-    await waitForEditor();
-
+  it("Insert nested inside existing block", () => {
     const output = insert("nested");
 
     expect(output).toMatchSnapshot();
   });
 
-  it("Insert after existing block", async () => {
-    await waitForEditor();
-
+  it("Insert after existing block", () => {
     const output = insert("after");
 
     expect(output).toMatchSnapshot();
   });
 });
 
 describe("Insert, Update, & Delete Blocks", () => {
-  it("Insert, update, & delete single block", async () => {
-    await waitForEditor();
-
+  it("Insert, update, & delete single block", () => {
     const existingBlock = editor.document[0];
     editor.insertBlocks([singleBlock], existingBlock);
 
@@ -263,9 +244,7 @@ describe("Insert, Update, & Delete Blocks", () => {
     expect(editor.document).toMatchSnapshot();
   });
 
-  it("Insert, update, & delete multiple blocks", async () => {
-    await waitForEditor();
-
+  it("Insert, update, & delete multiple blocks", () => {
     const existingBlock = editor.document[0];
     editor.insertBlocks(multipleBlocks, existingBlock);
 
@@ -286,9 +265,7 @@ describe("Insert, Update, & Delete Blocks", () => {
 });
 
 describe("Update Line Breaks", () => {
-  it("Update paragraph with line break", async () => {
-    await waitForEditor();
-
+  it("Update paragraph with line break", () => {
     const existingBlock = editor.document[0];
     editor.insertBlocks(blocksWithLineBreaks, existingBlock);
 
@@ -300,9 +277,7 @@ describe("Update Line Breaks", () => {
 
     expect(editor.document).toMatchSnapshot();
   });
-  it("Update custom block with line break", async () => {
-    await waitForEditor();
-
+  it("Update custom block with line break", () => {
     const existingBlock = editor.document[0];
     editor.insertBlocks(blocksWithLineBreaks, existingBlock);
 

packages/core/src/editor/BlockNoteEditor.ts

@@ -41,9 +41,9 @@ import {
   InlineContentSchema,
   InlineContentSpecs,
   PartialInlineContent,
-  Styles,
   StyleSchema,
   StyleSpecs,
+  Styles,
 } from "../schema";
 import { mergeCSSClasses } from "../util/browser";
 import { NoInfer, UnreachableCaseError } from "../util/typescript";
@@ -463,7 +463,7 @@ export class BlockNoteEditor<
     };
 
     if (!this.headless) {
-      this._tiptapEditor = new BlockNoteTipTapEditor(
+      this._tiptapEditor = BlockNoteTipTapEditor.create(
         tiptapOptions,
         this.schema.styleSchema
       ) as BlockNoteTipTapEditor & {

packages/core/src/editor/BlockNoteTipTapEditor.ts

@@ -23,7 +23,32 @@ export type BlockNoteTipTapEditorOptions = Partial<
 export class BlockNoteTipTapEditor extends TiptapEditor {
   private _state: EditorState;
 
-  constructor(options: BlockNoteTipTapEditorOptions, styleSchema: StyleSchema) {
+  public static create = (
+    options: BlockNoteTipTapEditorOptions,
+    styleSchema: StyleSchema
+  ) => {
+    // because we separate the constructor from the creation of the view,
+    // we need to patch setTimeout to prevent this code from having any effect:
+    // https://github.com/ueberdosis/tiptap/blob/45bac803283446795ad1b03f43d3746fa54a68ff/packages/core/src/Editor.ts#L117
+    const oldSetTimeout = globalThis?.window?.setTimeout;
+    if (typeof globalThis?.window?.setTimeout !== "undefined") {
+      globalThis.window.setTimeout = (() => {
+        return 0;
+      }) as any;
+    }
+    try {
+      return new BlockNoteTipTapEditor(options, styleSchema);
+    } finally {
+      if (oldSetTimeout) {
+        globalThis.window.setTimeout = oldSetTimeout;
+      }
+    }
+  };
+
+  protected constructor(
+    options: BlockNoteTipTapEditorOptions,
+    styleSchema: StyleSchema
+  ) {
     // possible fix for next.js server side rendering
     // const d = globalThis.document;
     // const w = globalThis.window;
@@ -32,14 +57,10 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
     //     createElement: () => {},
     //   };
     // }
-    // if (!globalThis.window) {
-    //   globalThis.window = {
-    //     setTimeout: () => {},
-    //   };
-    // }
+
     // options.injectCSS = false
-    super({ ...options, content: undefined });
 
+    super({ ...options, content: undefined });
     // try {
     //   globalThis.window = w;
     //   } catch(e) {}
@@ -149,6 +170,12 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
       this.view.updateState(newState);
 
       this.createNodeViews();
+
+      // emit the created event, call here manually because we blocked the default call in the constructor
+      // (https://github.com/ueberdosis/tiptap/blob/45bac803283446795ad1b03f43d3746fa54a68ff/packages/core/src/Editor.ts#L117)
+      this.commands.focus(this.options.autofocus);
+      this.emit("create", { editor: this });
+      this.isInitialized = true;
     });
   }
 

packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts

@@ -107,6 +107,8 @@ export class TableHandlesView<
 
   public menuFrozen = false;
 
+  public mouseState: "up" | "down" | "selecting" = "up";
+
   public prevWasEditable: boolean | null = null;
 
   constructor(
@@ -127,6 +129,8 @@ export class TableHandlesView<
     };
 
     pmView.dom.addEventListener("mousemove", this.mouseMoveHandler);
+    pmView.dom.addEventListener("mousedown", this.viewMousedownHandler);
+    pmView.dom.addEventListener("mouseup", this.viewMouseupHandler);
 
     pmView.root.addEventListener(
       "dragover",
@@ -140,11 +144,33 @@ export class TableHandlesView<
     pmView.root.addEventListener("scroll", this.scrollHandler, true);
   }
 
+  viewMousedownHandler = () => {
+    this.mouseState = "down";
+  };
+
+  viewMouseupHandler = (event: MouseEvent) => {
+    this.mouseState = "up";
+    this.mouseMoveHandler(event);
+  };
+
   mouseMoveHandler = (event: MouseEvent) => {
     if (this.menuFrozen) {
       return;
     }
 
+    if (this.mouseState === "down") {
+      this.mouseState = "selecting";
+
+      if (this.state?.show) {
+        this.state.show = false;
+        this.emitUpdate();
+      }
+    }
+
+    if (this.mouseState === "selecting") {
+      return;
+    }
+
     const target = domCellAround(event.target as HTMLElement);
 
     if (!target || !this.editor.isEditable) {

packages/core/src/schema/blocks/createSpec.ts

@@ -63,24 +63,20 @@ export type CustomBlockImplementation<
   ) => PartialBlockFromConfig<T, I, S>["props"] | undefined;
 };
 
-// Function that enables copying of selected content within non-selectable
-// blocks.
+// Function that causes events within non-selectable blocks to be handled by the
+// browser instead of the editor.
 export function applyNonSelectableBlockFix(nodeView: NodeView, editor: Editor) {
   nodeView.stopEvent = (event) => {
-    // Ensures copy events are handled by the browser and not by ProseMirror.
-    if (event.type === "copy" || event.type === "cut") {
-      return true;
-    }
     // Blurs the editor on mouse down as the block is non-selectable. This is
     // mainly done to prevent UI elements like the formatting toolbar from being
     // visible while content within a non-selectable block is selected.
     if (event.type === "mousedown") {
       setTimeout(() => {
         editor.view.dom.blur();
       }, 10);
-      return true;
     }
-    return false;
+
+    return true;
   };
 }