@blocknote/core 0.13.4 → 0.14.0

package/src/blocks/ListItemBlockContent/ListItemKeyboardShortcuts.ts

@@ -2,7 +2,7 @@ import { Editor } from "@tiptap/core";
 import { getBlockInfoFromPos } from "../../api/getBlockInfoFromPos";
 
 export const handleEnter = (editor: Editor) => {
-  const { node, contentType } = getBlockInfoFromPos(
+  const { contentNode, contentType } = getBlockInfoFromPos(
     editor.state.doc,
     editor.state.selection.from
   )!;
@@ -23,9 +23,9 @@ export const handleEnter = (editor: Editor) => {
 
   return editor.commands.first(({ state, chain, commands }) => [
     () =>
-      // Changes list item block to a text block if the content is empty.
+      // Changes list item block to a paragraph block if the content is empty.
       commands.command(() => {
-        if (node.textContent.length === 0) {
+        if (contentNode.childCount === 0) {
           return commands.BNUpdateBlock(state.selection.from, {
             type: "paragraph",
             props: {},
@@ -36,10 +36,10 @@ export const handleEnter = (editor: Editor) => {
       }),
 
     () =>
-      // Splits the current block, moving content inside that's after the cursor to a new block of the same type
-      // below.
+      // Splits the current block, moving content inside that's after the cursor
+      // to a new block of the same type below.
       commands.command(() => {
-        if (node.textContent.length > 0) {
+        if (contentNode.childCount > 0) {
           chain()
             .deleteSelection()
             .BNSplitBlock(state.selection.from, true)

package/src/blocks/ParagraphBlockContent/ParagraphBlockContent.ts

@@ -4,7 +4,6 @@ import {
 } from "../../schema";
 import { createDefaultBlockDOMOutputSpec } from "../defaultBlockHelpers";
 import { defaultProps } from "../defaultProps";
-import { handleEnter } from "../ListItemBlockContent/ListItemKeyboardShortcuts";
 import { getCurrentBlockContentType } from "../../api/getCurrentBlockContentType";
 
 export const paragraphPropSchema = {
@@ -18,7 +17,6 @@ export const ParagraphBlockContent = createStronglyTypedTiptapNode({
 
   addKeyboardShortcuts() {
     return {
-      Enter: () => handleEnter(this.editor),
       "Mod-Alt-0": () => {
         if (getCurrentBlockContentType(this.editor) !== "inline*") {
           return true;
@@ -41,6 +39,13 @@ export const ParagraphBlockContent = createStronglyTypedTiptapNode({
       {
         tag: "p",
         priority: 200,
+        getAttrs: (element) => {
+          if (typeof element === "string" || !element.textContent?.trim()) {
+            return false;
+          }
+
+          return {};
+        },
         node: "paragraph",
       },
     ];

package/src/blocks/TableBlockContent/TableBlockContent.ts

@@ -45,7 +45,29 @@ const TableParagraph = Node.create({
   content: "inline*",
 
   parseHTML() {
-    return [{ tag: "p" }];
+    return [
+      { tag: "td" },
+      {
+        tag: "p",
+        getAttrs: (element) => {
+          if (typeof element === "string" || !element.textContent) {
+            return false;
+          }
+
+          const parent = element.parentElement;
+
+          if (parent === null) {
+            return false;
+          }
+
+          if (parent.tagName === "TD") {
+            return {};
+          }
+
+          return false;
+        },
+      },
+    ];
   },
 
   renderHTML({ HTMLAttributes }) {

package/src/editor/Block.css

@@ -279,7 +279,6 @@ NESTED BLOCKS
   background-color: rgb(242, 241, 238);
   border-radius: 4px;
   color: rgb(125, 121, 122);
-  cursor: pointer;
   display: flex;
   flex-direction: row;
   gap: 10px;
@@ -287,7 +286,7 @@ NESTED BLOCKS
   width: 100%;
 }
 
-[data-file-block] .bn-add-file-button:hover {
+.bn-editor[contenteditable="true"] [data-file-block] .bn-add-file-button:hover {
   background-color: rgb(225, 225, 225);
 }
 
@@ -363,7 +362,7 @@ NESTED BLOCKS
 }
 
 /* PLACEHOLDERS*/
-.bn-inline-content:has(> .ProseMirror-trailingBreak):before {
+.bn-inline-content:has(> .ProseMirror-trailingBreak:only-child):before {
   /*float: left; */
   pointer-events: none;
   height: 0;

package/src/editor/BlockNoteEditor.ts

@@ -194,11 +194,7 @@ export class BlockNoteEditor<
     ISchema,
     SSchema
   >;
-  public readonly filePanel?: FilePanelProsemirrorPlugin<
-    BSchema,
-    ISchema,
-    SSchema
-  >;
+  public readonly filePanel?: FilePanelProsemirrorPlugin<ISchema, SSchema>;
   public readonly tableHandles?: TableHandlesProsemirrorPlugin<
     ISchema,
     SSchema
@@ -307,6 +303,7 @@ export class BlockNoteEditor<
     this.resolveFileUrl = newOptions.resolveFileUrl || (async (url) => url);
 
     if (newOptions.collaboration && newOptions.initialContent) {
+      // eslint-disable-next-line no-console
       console.warn(
         "When using Collaboration, initialContent might cause conflicts, because changes should come from the collaboration provider"
       );
@@ -777,7 +774,11 @@ export class BlockNoteEditor<
     for (const mark of marks) {
       const config = this.schema.styleSchema[mark.type.name];
       if (!config) {
-        console.warn("mark not found in styleschema", mark.type.name);
+        if (mark.type.name !== "link") {
+          // eslint-disable-next-line no-console
+          console.warn("mark not found in styleschema", mark.type.name);
+        }
+
         continue;
       }
       if (config.propSchema === "boolean") {

package/src/editor/BlockNoteExtensions.ts

@@ -75,7 +75,16 @@ export const getBlockNoteExtensions = <
     Text,
 
     // marks:
-    Link,
+    Link.extend({
+      addKeyboardShortcuts() {
+        return {
+          "Mod-k": () => {
+            this.editor.commands.toggleLink({ href: "" });
+            return true;
+          },
+        };
+      },
+    }),
     ...Object.values(opts.styleSpecs).map((styleSpec) => {
       return styleSpec.implementation.mark;
     }),

package/src/editor/BlockNoteTipTapEditor.ts

@@ -87,6 +87,7 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
         this.options.parseOptions
       );
     } catch (e) {
+      // eslint-disable-next-line no-console
       console.error(
         "Error creating document from blocks passed as `initialContent`. Caused by exception: ",
         e

package/src/extensions/FilePanel/FilePanelPlugin.ts

@@ -5,7 +5,6 @@ import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
 import { UiElementPosition } from "../../extensions-shared/UiElementPosition";
 import type {
   BlockFromConfig,
-  BlockSchema,
   FileBlockConfig,
   InlineContentSchema,
   StyleSchema,
@@ -26,9 +25,12 @@ export class FilePanelView<I extends InlineContentSchema, S extends StyleSchema>
   public state?: FilePanelState<I, S>;
   public emitUpdate: () => void;
 
-  public prevWasEditable: boolean | null = null;
-
   constructor(
+    private readonly editor: BlockNoteEditor<
+      Record<string, FileBlockConfig>,
+      I,
+      S
+    >,
     private readonly pluginKey: PluginKey,
     private readonly pmView: EditorView,
     emitUpdate: (state: FilePanelState<I, S>) => void
@@ -42,10 +44,12 @@ export class FilePanelView<I extends InlineContentSchema, S extends StyleSchema>
     };
 
     pmView.dom.addEventListener("mousedown", this.mouseDownHandler);
-
     pmView.dom.addEventListener("dragstart", this.dragstartHandler);
 
-    document.addEventListener("scroll", this.scrollHandler);
+    // 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.
+    document.addEventListener("scroll", this.scrollHandler, true);
   }
 
   mouseDownHandler = () => {
@@ -79,7 +83,7 @@ export class FilePanelView<I extends InlineContentSchema, S extends StyleSchema>
       block: BlockFromConfig<FileBlockConfig, I, S>;
     } = this.pluginKey.getState(view.state);
 
-    if (!this.state?.show && pluginState.block) {
+    if (!this.state?.show && pluginState.block && this.editor.isEditable) {
       const blockElement = document.querySelector(
         `[data-node-type="blockContainer"][data-id="${pluginState.block.id}"]`
       )!;
@@ -97,7 +101,8 @@ export class FilePanelView<I extends InlineContentSchema, S extends StyleSchema>
 
     if (
       !view.state.selection.eq(prevState.selection) ||
-      !view.state.doc.eq(prevState.doc)
+      !view.state.doc.eq(prevState.doc) ||
+      !this.editor.isEditable
     ) {
       if (this.state?.show) {
         this.state.show = false;
@@ -119,29 +124,28 @@ export class FilePanelView<I extends InlineContentSchema, S extends StyleSchema>
 
     this.pmView.dom.removeEventListener("dragstart", this.dragstartHandler);
 
-    document.removeEventListener("scroll", this.scrollHandler);
+    document.removeEventListener("scroll", this.scrollHandler, true);
   }
 }
 
 const filePanelPluginKey = new PluginKey("FilePanelPlugin");
 
 export class FilePanelProsemirrorPlugin<
-  B extends BlockSchema,
   I extends InlineContentSchema,
   S extends StyleSchema
 > extends EventEmitter<any> {
   private view: FilePanelView<I, S> | undefined;
   public readonly plugin: Plugin;
 
-  constructor(_editor: BlockNoteEditor<B, I, S>) {
+  constructor(editor: BlockNoteEditor<Record<string, FileBlockConfig>, I, S>) {
     super();
     this.plugin = new Plugin<{
       block: BlockFromConfig<FileBlockConfig, I, S> | undefined;
     }>({
       key: filePanelPluginKey,
       view: (editorView) => {
-        this.view = new FilePanelView(
-          // editor,
+        this.view = new FilePanelView<I, S>(
+          editor,
           filePanelPluginKey,
           editorView,
           (state) => {

package/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts

@@ -15,7 +15,6 @@ export class FormattingToolbarView implements PluginView {
 
   public preventHide = false;
   public preventShow = false;
-  public prevWasEditable: boolean | null = null;
 
   public shouldShow: (props: {
     view: EditorView;
@@ -60,7 +59,10 @@ export class FormattingToolbarView implements PluginView {
     pmView.dom.addEventListener("dragstart", this.dragHandler);
     pmView.dom.addEventListener("dragover", this.dragHandler);
 
-    document.addEventListener("scroll", this.scrollHandler);
+    // 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.
+    document.addEventListener("scroll", this.scrollHandler, true);
   }
 
   viewMousedownHandler = () => {
@@ -93,16 +95,10 @@ export class FormattingToolbarView implements PluginView {
     const isSame =
       oldState && oldState.doc.eq(doc) && oldState.selection.eq(selection);
 
-    if (
-      (this.prevWasEditable === null ||
-        this.prevWasEditable === this.editor.isEditable) &&
-      (composing || isSame)
-    ) {
+    if (composing || isSame) {
       return;
     }
 
-    this.prevWasEditable = this.editor.isEditable;
-
     // support for CellSelections
     const { ranges } = selection;
     const from = Math.min(...ranges.map((range) => range.$from.pos));
@@ -116,11 +112,12 @@ export class FormattingToolbarView implements PluginView {
     });
 
     // Checks if menu should be shown/updated.
-    if (
-      this.editor.isEditable &&
-      !this.preventShow &&
-      (shouldShow || this.preventHide)
-    ) {
+    if (!this.preventShow && (shouldShow || this.preventHide)) {
+      // Unlike other UI elements, we don't prevent the formatting toolbar from
+      // showing when the editor is not editable. This is because some buttons,
+      // e.g. the download file button, should still be accessible. Therefore,
+      // logic for hiding when the editor is non-editable is handled
+      // individually in each button.
       this.state = {
         show: true,
         referencePos: this.getSelectionBoundingBox(),
@@ -150,7 +147,7 @@ export class FormattingToolbarView implements PluginView {
     this.pmView.dom.removeEventListener("dragstart", this.dragHandler);
     this.pmView.dom.removeEventListener("dragover", this.dragHandler);
 
-    document.removeEventListener("scroll", this.scrollHandler);
+    document.removeEventListener("scroll", this.scrollHandler, true);
   }
 
   closeMenu = () => {

package/src/extensions/LinkToolbar/LinkToolbarPlugin.ts

@@ -62,7 +62,11 @@ class LinkToolbarView implements PluginView {
 
     this.pmView.dom.addEventListener("mouseover", this.mouseOverHandler);
     document.addEventListener("click", this.clickHandler, true);
-    document.addEventListener("scroll", this.scrollHandler);
+
+    // 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.
+    document.addEventListener("scroll", this.scrollHandler, true);
   }
 
   mouseOverHandler = (event: MouseEvent) => {
@@ -267,7 +271,7 @@ class LinkToolbarView implements PluginView {
 
   destroy() {
     this.pmView.dom.removeEventListener("mouseover", this.mouseOverHandler);
-    document.removeEventListener("scroll", this.scrollHandler);
+    document.removeEventListener("scroll", this.scrollHandler, true);
     document.removeEventListener("click", this.clickHandler, true);
   }
 }

package/src/extensions/Placeholder/PlaceholderPlugin.ts

@@ -12,11 +12,15 @@ export const PlaceholderPlugin = (
     key: PLUGIN_KEY,
     view: () => {
       const styleEl = document.createElement("style");
+      const nonce = editor._tiptapEditor.options.injectNonce;
+      if (nonce) {
+        styleEl.setAttribute("nonce", nonce);
+      }
       document.head.appendChild(styleEl);
       const styleSheet = styleEl.sheet!;
 
       const getBaseSelector = (additionalSelectors = "") =>
-        `.bn-block-content${additionalSelectors} .bn-inline-content:has(> .ProseMirror-trailingBreak):before`;
+        `.bn-block-content${additionalSelectors} .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child):before`;
 
       const getSelector = (
         blockType: string | "default",