@blocknote/core 0.21.0 → 0.23.0

package/src/editor/Block.css

@@ -114,13 +114,13 @@ NESTED BLOCKS
 }
 
 /* HEADINGS*/
-[data-level="1"] {
+[data-content-type="heading"] {
   --level: 3em;
 }
-[data-level="2"] {
+[data-content-type="heading"][data-level="2"] {
   --level: 2em;
 }
-[data-level="3"] {
+[data-content-type="heading"][data-level="3"] {
   --level: 1.3em;
 }
 
@@ -308,6 +308,20 @@ NESTED BLOCKS
   transition-delay: 0.1s;
 }
 
+/* PAGE BREAK */
+.bn-block-content[data-content-type="pageBreak"] > div {
+  width: 100%;
+  height: 0;
+  border-top: dotted rgb(125, 121, 122) 2px;
+  margin-block: 11px;
+}
+
+@media print {
+  .bn-block-content[data-content-type="pageBreak"] > div {
+    page-break-after: always;
+  }
+}
+
 /* FILES */
 
 /* Element that wraps content for all file blocks */
@@ -336,7 +350,7 @@ NESTED BLOCKS
 
 .bn-editor[contenteditable="true"] [data-file-block] .bn-add-file-button:hover,
 [data-file-block] .bn-file-name-with-icon:hover,
-.ProseMirror-selectednode .bn-file-name-with-icon{
+.ProseMirror-selectednode .bn-file-name-with-icon {
   background-color: rgb(225, 225, 225);
 }
 

package/src/editor/BlockNoteEditor.test.ts

@@ -71,6 +71,26 @@ it("adds id attribute when requested", async () => {
   );
   editor.replaceBlocks(editor.document, blocks);
   expect(await editor.blocksToFullHTML(editor.document)).toMatchInlineSnapshot(
-    `"<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1" id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1" id="1"><div class="bn-block-content" data-content-type="paragraph"><p class="bn-inline-content">This is a normal text</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="2" id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2" id="2"><div class="bn-block-content" data-content-type="heading" data-level="1"><h1 class="bn-inline-content">And this is a large heading</h1></div></div></div></div>"`
+    `"<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1" id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1" id="1"><div class="bn-block-content" data-content-type="paragraph"><p class="bn-inline-content">This is a normal text</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="2" id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2" id="2"><div class="bn-block-content" data-content-type="heading"><h1 class="bn-inline-content">And this is a large heading</h1></div></div></div></div>"`
   );
 });
+
+it("block prop types", () => {
+  // this test checks whether the block props are correctly typed in typescript
+  const editor = BlockNoteEditor.create();
+  const block = editor.document[0];
+  if (block.type === "paragraph") {
+    // @ts-expect-error
+    const level = block.props.level; // doesn't have level prop
+
+    // eslint-disable-next-line
+    expect(level).toBe(undefined);
+  }
+
+  if (block.type === "heading") {
+    const level = block.props.level; // does have level prop
+
+    // eslint-disable-next-line
+    expect(level).toBe(1);
+  }
+});

package/src/editor/BlockNoteEditor.ts

@@ -196,6 +196,13 @@ export type BlockNoteEditorOptions<
      * Optional function to customize how cursors of users are rendered
      */
     renderCursor?: (user: any) => HTMLElement;
+    /**
+     * Optional flag to set when the user label should be shown with the default
+     * collaboration cursor. Setting to "always" will always show the label,
+     * while "activity" will only show the label when the user moves the cursor
+     * or types. Defaults to "activity".
+     */
+    showCursorLabels?: "always" | "activity";
   };
 
   /**
@@ -245,6 +252,15 @@ export type BlockNoteEditorOptions<
    @default "prefer-navigate-ui"
    */
   tabBehavior: "prefer-navigate-ui" | "prefer-indent";
+
+  /**
+   * The detection mode for showing the side menu - "viewport" always shows the
+   * side menu for the block next to the mouse cursor, while "editor" only shows
+   * it when hovering the editor or the side menu itself.
+   *
+   * @default "viewport"
+   */
+  sideMenuDetection: "viewport" | "editor";
 };
 
 const blockNoteTipTapOptions = {
@@ -423,6 +439,7 @@ export class BlockNoteEditor<
       dropCursor: this.options.dropCursor ?? dropCursor,
       placeholders: newOptions.placeholders,
       tabBehavior: newOptions.tabBehavior,
+      sideMenuDetection: newOptions.sideMenuDetection || "viewport",
     });
 
     // add extensions from _tiptapOptions

package/src/editor/BlockNoteExtensions.ts

@@ -1,4 +1,5 @@
 import { AnyExtension, Extension, extensions } from "@tiptap/core";
+import { Awareness } from "y-protocols/awareness";
 
 import type { BlockNoteEditor, BlockNoteExtension } from "./BlockNoteEditor.js";
 
@@ -64,6 +65,7 @@ type ExtensionOptions<
     };
     provider: any;
     renderCursor?: (user: any) => HTMLElement;
+    showCursorLabels?: "always" | "activity";
   };
   disableExtensions: string[] | undefined;
   setIdAttribute?: boolean;
@@ -72,6 +74,7 @@ type ExtensionOptions<
   dropCursor: (opts: any) => Plugin;
   placeholders: Record<string | "default", string>;
   tabBehavior?: "prefer-navigate-ui" | "prefer-indent";
+  sideMenuDetection: "viewport" | "editor";
 };
 
 /**
@@ -97,7 +100,10 @@ export const getBlockNoteExtensions = <
     opts.editor
   );
   ret["linkToolbar"] = new LinkToolbarProsemirrorPlugin(opts.editor);
-  ret["sideMenu"] = new SideMenuProsemirrorPlugin(opts.editor);
+  ret["sideMenu"] = new SideMenuProsemirrorPlugin(
+    opts.editor,
+    opts.sideMenuDetection
+  );
   ret["suggestionMenus"] = new SuggestionMenuProseMirrorPlugin(opts.editor);
   ret["filePanel"] = new FilePanelProsemirrorPlugin(opts.editor as any);
   ret["placeholder"] = new PlaceholderPlugin(opts.editor, opts.placeholders);
@@ -246,25 +252,114 @@ const getTipTapExtensions = <
         fragment: opts.collaboration.fragment,
       })
     );
-    if (opts.collaboration.provider?.awareness) {
-      const defaultRender = (user: { color: string; name: string }) => {
-        const cursor = document.createElement("span");
 
-        cursor.classList.add("collaboration-cursor__caret");
-        cursor.setAttribute("style", `border-color: ${user.color}`);
+    const awareness = opts.collaboration?.provider.awareness as Awareness;
+
+    if (awareness) {
+      const cursors = new Map<
+        number,
+        { element: HTMLElement; hideTimeout: NodeJS.Timeout | undefined }
+      >();
+
+      if (opts.collaboration.showCursorLabels !== "always") {
+        awareness.on(
+          "change",
+          ({
+            updated,
+          }: {
+            added: Array<number>;
+            updated: Array<number>;
+            removed: Array<number>;
+          }) => {
+            for (const clientID of updated) {
+              const cursor = cursors.get(clientID);
+
+              if (cursor) {
+                cursor.element.setAttribute("data-active", "");
+
+                if (cursor.hideTimeout) {
+                  clearTimeout(cursor.hideTimeout);
+                }
+
+                cursors.set(clientID, {
+                  element: cursor.element,
+                  hideTimeout: setTimeout(() => {
+                    cursor.element.removeAttribute("data-active");
+                  }, 2000),
+                });
+              }
+            }
+          }
+        );
+      }
+
+      const createCursor = (clientID: number, name: string, color: string) => {
+        const cursorElement = document.createElement("span");
+
+        cursorElement.classList.add("collaboration-cursor__caret");
+        cursorElement.setAttribute("style", `border-color: ${color}`);
+        if (opts.collaboration?.showCursorLabels === "always") {
+          cursorElement.setAttribute("data-active", "");
+        }
+
+        const labelElement = document.createElement("span");
+
+        labelElement.classList.add("collaboration-cursor__label");
+        labelElement.setAttribute("style", `background-color: ${color}`);
+        labelElement.insertBefore(document.createTextNode(name), null);
+
+        cursorElement.insertBefore(document.createTextNode("\u2060"), null); // Non-breaking space
+        cursorElement.insertBefore(labelElement, null);
+        cursorElement.insertBefore(document.createTextNode("\u2060"), null); // Non-breaking space
+
+        cursors.set(clientID, {
+          element: cursorElement,
+          hideTimeout: undefined,
+        });
+
+        if (opts.collaboration?.showCursorLabels !== "always") {
+          cursorElement.addEventListener("mouseenter", () => {
+            const cursor = cursors.get(clientID)!;
+            cursor.element.setAttribute("data-active", "");
+
+            if (cursor.hideTimeout) {
+              clearTimeout(cursor.hideTimeout);
+              cursors.set(clientID, {
+                element: cursor.element,
+                hideTimeout: undefined,
+              });
+            }
+          });
+
+          cursorElement.addEventListener("mouseleave", () => {
+            const cursor = cursors.get(clientID)!;
+
+            cursors.set(clientID, {
+              element: cursor.element,
+              hideTimeout: setTimeout(() => {
+                cursor.element.removeAttribute("data-active");
+              }, 2000),
+            });
+          });
+        }
+
+        return cursors.get(clientID)!;
+      };
+
+      const defaultRender = (user: { color: string; name: string }) => {
+        const clientState = [...awareness.getStates().entries()].find(
+          (state) => state[1].user === user
+        );
 
-        const label = document.createElement("span");
+        if (!clientState) {
+          throw new Error("Could not find client state for user");
+        }
 
-        label.classList.add("collaboration-cursor__label");
-        label.setAttribute("style", `background-color: ${user.color}`);
-        label.insertBefore(document.createTextNode(user.name), null);
+        const clientID = clientState[0];
 
-        const nonbreakingSpace1 = document.createTextNode("\u2060");
-        const nonbreakingSpace2 = document.createTextNode("\u2060");
-        cursor.insertBefore(nonbreakingSpace1, null);
-        cursor.insertBefore(label, null);
-        cursor.insertBefore(nonbreakingSpace2, null);
-        return cursor;
+        return (
+          cursors.get(clientID) || createCursor(clientID, user.name, user.color)
+        ).element;
       };
       tiptapExtensions.push(
         CollaborationCursor.configure({

package/src/editor/editor.css

@@ -83,7 +83,6 @@ Tippy popups that are appended to document.body directly
   border-right: 1px solid #0d0d0d;
   margin-left: -1px;
   margin-right: -1px;
-  pointer-events: none;
   position: relative;
   word-break: normal;
   white-space: nowrap !important;
@@ -92,24 +91,40 @@ Tippy popups that are appended to document.body directly
 /* 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;
+  left: -1px;
+  overflow: hidden;
   position: absolute;
-  top: -1.4em;
-  user-select: none;
   white-space: nowrap;
+
+  color: transparent;
+  max-height: 4px;
+  max-width: 4px;
+  padding: 0;
+  top: 0;
+  
+  transition: all 0.2s;
+
+}
+
+.collaboration-cursor__caret[data-active] > .collaboration-cursor__label {
+  color: #0d0d0d;
+  max-height: 1.1rem;
+  max-width: 20rem;
+  padding: 0.1rem 0.3rem;
+  top: -14px;
+
+  transition: all 0.2s;
 }
 
 /* .tableWrapper {
   padding
 } */
 
-.ProseMirror .tableWrapper {
+.bn-editor [data-content-type="table"] .tableWrapper {
   position: relative;
   top: -16px;
   left: -16px;
@@ -119,7 +134,7 @@ Tippy popups that are appended to document.body directly
   overflow-y: hidden;
 }
 
-.ProseMirror .tableWrapper-inner {
+.bn-editor [data-content-type="table"] .tableWrapper-inner {
   /* position: relative; */
   /* top: -16px;
   left: -16px; */
@@ -127,17 +142,17 @@ Tippy popups that are appended to document.body directly
 }
 
 /* table related: */
-.bn-editor table {
+.bn-editor [data-content-type="table"] table {
   width: auto !important;
   word-break: break-word;
 }
-.bn-editor th,
-.bn-editor td {
+.bn-editor [data-content-type="table"] th,
+.bn-editor [data-content-type="table"] td {
   border: 1px solid #ddd;
-  padding: 3px 5px;
+  padding: 5px 10px;
 }
 
-.bn-editor th {
+.bn-editor [data-content-type="table"] th {
   font-weight: bold;
   text-align: left;
 }

package/src/editor/transformPasted.ts

@@ -1,6 +1,8 @@
 import { Fragment, Schema, Slice } from "@tiptap/pm/model";
 import { EditorView } from "@tiptap/pm/view";
 
+import { getBlockInfoFromSelection } from "../api/getBlockInfoFromPos.js";
+
 // helper function to remove a child from a fragment
 function removeChild(node: Fragment, n: number) {
   const children: any[] = [];
@@ -49,16 +51,25 @@ export function wrapTableRows(f: Fragment, schema: Schema) {
 /**
  * fix for https://github.com/ProseMirror/prosemirror/issues/1430#issuecomment-1822570821
  *
- * Without this fix, pasting two paragraphs would cause the second one to be indented in the other
- * this fix wraps every element in the slice in it's own blockContainer, to prevent Prosemirror from nesting the
- * elements on paste.
+ * This fix wraps pasted ProseMirror nodes in their own `blockContainer` nodes
+ * in most cases. This is to ensure that ProseMirror inserts them as separate
+ * blocks, which it sometimes doesn't do because it doesn't have enough context
+ * about the hierarchy of the pasted nodes. The issue can be seen when pasting
+ * e.g. an image or two consecutive paragraphs, where PM tries to nest the
+ * pasted block(s) when it shouldn't.
  *
- * The exception is when we encounter blockGroups with listitems, because those actually should be nested
+ * However, the fix is not applied in a few cases. See `shouldApplyFix` for
+ * which cases are excluded.
  */
 export function transformPasted(slice: Slice, view: EditorView) {
   let f = Fragment.from(slice.content);
   f = wrapTableRows(f, view.state.schema);
 
+  if (!shouldApplyFix(f, view)) {
+    // Don't apply the fix.
+    return new Slice(f, slice.openStart, slice.openEnd);
+  }
+
   for (let i = 0; i < f.childCount; i++) {
     if (f.child(i).type.spec.group === "blockContent") {
       const content = [f.child(i)];
@@ -92,3 +103,45 @@ export function transformPasted(slice: Slice, view: EditorView) {
   }
   return new Slice(f, slice.openStart, slice.openEnd);
 }
+
+/**
+ * Used in `transformPasted` to check if the fix there should be applied, i.e.
+ * if the pasted fragment should be wrapped in a `blockContainer` node. This
+ * will explicitly tell ProseMirror to treat it as a separate block.
+ */
+function shouldApplyFix(fragment: Fragment, view: EditorView) {
+  const nodeHasSingleChild = fragment.childCount === 1;
+  const nodeHasInlineContent =
+    fragment.firstChild?.type.spec.content === "inline*";
+  const nodeHasTableContent =
+    fragment.firstChild?.type.spec.content === "tableRow+";
+
+  if (nodeHasSingleChild) {
+    if (nodeHasInlineContent) {
+      // Case when we paste a single node with inline content, e.g. a paragraph
+      // or heading. We want to insert the content in-line for better UX instead
+      // of a separate block, so we return false.
+      return false;
+    }
+
+    if (nodeHasTableContent) {
+      // Not ideal that we check selection here, as `transformPasted` is called
+      // for both paste and drop events. Drop events can potentially cause
+      // issues as they don't always happen at the current selection.
+      const blockInfo = getBlockInfoFromSelection(view.state);
+      if (blockInfo.isBlockContainer) {
+        const selectedBlockHasTableContent =
+          blockInfo.blockContent.node.type.spec.content === "tableRow+";
+
+        // Case for when we paste a single node with table content, i.e. a
+        // table. Normally, we return true as we want to ensure the table is
+        // inserted as a separate block. However, if the selection is in an
+        // existing table, we return false, as we want the content of the pasted
+        // table to be added to the existing one for better UX.
+        return !selectedBlockHasTableContent;
+      }
+    }
+  }
+
+  return true;
+}