@blocknote/core 0.29.1 → 0.30.1

package/src/extensions/FilePanel/FilePanelPlugin.ts

@@ -10,10 +10,11 @@ import type {
   StyleSchema,
 } from "../../schema/index.js";
 import { EventEmitter } from "../../util/EventEmitter.js";
+import { ySyncPluginKey } from "y-prosemirror";
 
 export type FilePanelState<
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 > = UiElementPosition & {
   // TODO: This typing is not quite right (children should be from BSchema)
   block: BlockFromConfig<FileBlockConfig, I, S>;
@@ -31,9 +32,9 @@ export class FilePanelView<I extends InlineContentSchema, S extends StyleSchema>
       I,
       S
     >,
-    private readonly pluginKey: PluginKey,
+    private readonly pluginKey: PluginKey<FilePanelState<I, S>>,
     private readonly pmView: EditorView,
-    emitUpdate: (state: FilePanelState<I, S>) => void
+    emitUpdate: (state: FilePanelState<I, S>) => void,
   ) {
     this.emitUpdate = () => {
       if (!this.state) {
@@ -70,7 +71,7 @@ export class FilePanelView<I extends InlineContentSchema, S extends StyleSchema>
   scrollHandler = () => {
     if (this.state?.show) {
       const blockElement = this.pmView.root.querySelector(
-        `[data-node-type="blockContainer"][data-id="${this.state.block.id}"]`
+        `[data-node-type="blockContainer"][data-id="${this.state.block.id}"]`,
       );
       if (!blockElement) {
         return;
@@ -81,13 +82,12 @@ export class FilePanelView<I extends InlineContentSchema, S extends StyleSchema>
   };
 
   update(view: EditorView, prevState: EditorState) {
-    const pluginState: {
-      block: BlockFromConfig<FileBlockConfig, I, S>;
-    } = this.pluginKey.getState(view.state);
+    const pluginState = this.pluginKey.getState(view.state);
+    const prevPluginState = this.pluginKey.getState(prevState);
 
-    if (!this.state?.show && pluginState.block && this.editor.isEditable) {
+    if (!this.state?.show && pluginState?.block && this.editor.isEditable) {
       const blockElement = this.pmView.root.querySelector(
-        `[data-node-type="blockContainer"][data-id="${pluginState.block.id}"]`
+        `[data-node-type="blockContainer"][data-id="${pluginState.block.id}"]`,
       );
       if (!blockElement) {
         return;
@@ -103,16 +103,15 @@ export class FilePanelView<I extends InlineContentSchema, S extends StyleSchema>
       return;
     }
 
-    if (
-      !view.state.selection.eq(prevState.selection) ||
-      !view.state.doc.eq(prevState.doc) ||
-      !this.editor.isEditable
-    ) {
-      if (this.state?.show) {
-        this.state.show = false;
-
-        this.emitUpdate();
-      }
+    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();
     }
   }
 
@@ -132,11 +131,13 @@ export class FilePanelView<I extends InlineContentSchema, S extends StyleSchema>
   }
 }
 
-const filePanelPluginKey = new PluginKey("FilePanelPlugin");
+const filePanelPluginKey = new PluginKey<FilePanelState<any, any>>(
+  "FilePanelPlugin",
+);
 
 export class FilePanelProsemirrorPlugin<
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 > extends EventEmitter<any> {
   private view: FilePanelView<I, S> | undefined;
   public readonly plugin: Plugin;
@@ -154,7 +155,7 @@ export class FilePanelProsemirrorPlugin<
           editorView,
           (state) => {
             this.emit("update", state);
-          }
+          },
         );
         return this.view;
       },
@@ -173,13 +174,21 @@ export class FilePanelProsemirrorPlugin<
             block: undefined,
           };
         },
-        apply: (transaction) => {
-          const block: BlockFromConfig<FileBlockConfig, I, S> | undefined =
-            transaction.getMeta(filePanelPluginKey)?.block;
+        apply: (transaction, prev) => {
+          const state: FilePanelState<I, S> | undefined =
+            transaction.getMeta(filePanelPluginKey);
 
-          return {
-            block,
-          };
+          if (state) {
+            return state;
+          }
+
+          if (
+            !transaction.getMeta(ySyncPluginKey) &&
+            (transaction.selectionSet || transaction.docChanged)
+          ) {
+            return { block: undefined };
+          }
+          return prev;
         },
       },
     });

package/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts

@@ -53,12 +53,12 @@ export class FormattingToolbarView implements PluginView {
       StyleSchema
     >,
     private readonly pmView: EditorView,
-    emitUpdate: (state: FormattingToolbarState) => void
+    emitUpdate: (state: FormattingToolbarState) => void,
   ) {
     this.emitUpdate = () => {
       if (!this.state) {
         throw new Error(
-          "Attempting to update uninitialized formatting toolbar"
+          "Attempting to update uninitialized formatting toolbar",
         );
       }
 
@@ -96,7 +96,7 @@ export class FormattingToolbarView implements PluginView {
       (editorWrapper === (event.relatedTarget as Node) ||
         editorWrapper.contains(event.relatedTarget as Node) ||
         (event.relatedTarget as HTMLElement).matches(
-          ".bn-ui-container, .bn-ui-container *"
+          ".bn-ui-container, .bn-ui-container *",
         ))
     ) {
       return;
@@ -140,11 +140,9 @@ export class FormattingToolbarView implements PluginView {
     // Wrapping in a setTimeout gives enough time to wait for the blur event to
     // occur before updating the toolbar.
     const { state, composing } = view;
-    const { selection } = state;
+    const { doc, selection } = state;
     const isSame =
-      oldState &&
-      oldState.selection.from === state.selection.from &&
-      oldState.selection.to === state.selection.to;
+      oldState && oldState.doc.eq(doc) && oldState.selection.eq(selection);
 
     if (composing || isSame) {
       return;
@@ -235,7 +233,7 @@ export class FormattingToolbarView implements PluginView {
 }
 
 export const formattingToolbarPluginKey = new PluginKey(
-  "FormattingToolbarPlugin"
+  "FormattingToolbarPlugin",
 );
 
 export class FormattingToolbarProsemirrorPlugin extends EventEmitter<any> {

package/src/extensions/KeyboardShortcuts/KeyboardShortcutsExtension.ts

@@ -48,7 +48,7 @@ export const KeyboardShortcutsExtension = Extension.create<{
                 updateBlockCommand(blockInfo.bnBlock.beforePos, {
                   type: "paragraph",
                   props: {},
-                })
+                }),
               );
             }
 
@@ -114,7 +114,7 @@ export const KeyboardShortcutsExtension = Extension.create<{
 
             const prevBlockInfo = getPrevBlockInfo(
               state.doc,
-              blockInfo.bnBlock.beforePos
+              blockInfo.bnBlock.beforePos,
             );
 
             if (prevBlockInfo) {
@@ -124,7 +124,7 @@ export const KeyboardShortcutsExtension = Extension.create<{
 
             const parentBlockInfo = getParentBlockInfo(
               state.doc,
-              blockInfo.bnBlock.beforePos
+              blockInfo.bnBlock.beforePos,
             );
 
             if (parentBlockInfo?.blockNoteType !== "column") {
@@ -135,7 +135,7 @@ export const KeyboardShortcutsExtension = Extension.create<{
 
             const columnList = getParentBlockInfo(
               state.doc,
-              column.bnBlock.beforePos
+              column.bnBlock.beforePos,
             );
             if (columnList?.blockNoteType !== "columnList") {
               throw new Error("parent of column is not a column list");
@@ -156,7 +156,7 @@ export const KeyboardShortcutsExtension = Extension.create<{
               const blockToMove = state.doc.slice(
                 blockInfo.bnBlock.beforePos,
                 blockInfo.bnBlock.afterPos,
-                false
+                false,
               );
 
               /*
@@ -180,8 +180,8 @@ export const KeyboardShortcutsExtension = Extension.create<{
                       columnList.bnBlock.afterPos - 2,
                       blockToMove,
                       blockToMove.size, // append existing content to blockToMove
-                      false
-                    )
+                      false,
+                    ),
                   );
                   const pos = state.tr.doc.resolve(column.bnBlock.beforePos);
                   state.tr.setSelection(TextSelection.between(pos, pos));
@@ -197,11 +197,11 @@ export const KeyboardShortcutsExtension = Extension.create<{
                       column.bnBlock.beforePos - 1,
                       blockToMove,
                       0, // prepend existing content to blockToMove
-                      false
-                    )
+                      false,
+                    ),
                   );
                   const pos = state.tr.doc.resolve(
-                    state.tr.mapping.map(column.bnBlock.beforePos - 1)
+                    state.tr.mapping.map(column.bnBlock.beforePos - 1),
                   );
                   state.tr.setSelection(TextSelection.between(pos, pos));
                 }
@@ -210,43 +210,43 @@ export const KeyboardShortcutsExtension = Extension.create<{
                   // delete column
                   state.tr.delete(
                     column.bnBlock.beforePos,
-                    column.bnBlock.afterPos
+                    column.bnBlock.afterPos,
                   );
 
                   // move before columnlist
                   state.tr.insert(
                     columnList.bnBlock.beforePos,
-                    blockToMove.content
+                    blockToMove.content,
                   );
 
                   const pos = state.tr.doc.resolve(
-                    columnList.bnBlock.beforePos
+                    columnList.bnBlock.beforePos,
                   );
                   state.tr.setSelection(TextSelection.between(pos, pos));
                 } else {
                   // just delete the </column><column> closing and opening tags to merge the columns
                   state.tr.delete(
                     column.bnBlock.beforePos - 1,
-                    column.bnBlock.beforePos + 1
+                    column.bnBlock.beforePos + 1,
                   );
                 }
               } else {
                 // delete block
                 state.tr.delete(
                   blockInfo.bnBlock.beforePos,
-                  blockInfo.bnBlock.afterPos
+                  blockInfo.bnBlock.afterPos,
                 );
                 if (isFirstColumn) {
                   // move before columnlist
                   state.tr.insert(
                     columnList.bnBlock.beforePos - 1,
-                    blockToMove.content
+                    blockToMove.content,
                   );
                 } else {
                   // append block to previous column
                   state.tr.insert(
                     column.bnBlock.beforePos - 1,
-                    blockToMove.content
+                    blockToMove.content,
                   );
                 }
                 const pos = state.tr.doc.resolve(column.bnBlock.beforePos - 1);
@@ -272,7 +272,7 @@ export const KeyboardShortcutsExtension = Extension.create<{
             if (blockEmpty) {
               const prevBlockInfo = getPrevBlockInfo(
                 state.doc,
-                blockInfo.bnBlock.beforePos
+                blockInfo.bnBlock.beforePos,
               );
               if (!prevBlockInfo || !prevBlockInfo.isBlockContainer) {
                 return false;
@@ -291,7 +291,7 @@ export const KeyboardShortcutsExtension = Extension.create<{
                 const lastCellParagraphEndPos = lastCellEndPos - 1;
 
                 chainedCommands = chainedCommands.setTextSelection(
-                  lastCellParagraphEndPos
+                  lastCellParagraphEndPos,
                 );
               } else if (
                 prevBlockInfo.blockContent.node.type.spec.content === ""
@@ -301,7 +301,7 @@ export const KeyboardShortcutsExtension = Extension.create<{
                   prevBlockInfo.blockContent.node.nodeSize;
 
                 chainedCommands = chainedCommands.setNodeSelection(
-                  nonEditableBlockContentStartPos
+                  nonEditableBlockContentStartPos,
                 );
               } else {
                 const blockContentStartPos =
@@ -341,13 +341,13 @@ export const KeyboardShortcutsExtension = Extension.create<{
 
             const prevBlockInfo = getPrevBlockInfo(
               state.doc,
-              blockInfo.bnBlock.beforePos
+              blockInfo.bnBlock.beforePos,
             );
 
             if (prevBlockInfo && selectionAtBlockStart && selectionEmpty) {
               const bottomBlock = getBottomNestedBlockInfo(
                 state.doc,
-                prevBlockInfo
+                prevBlockInfo,
               );
 
               if (!bottomBlock.isBlockContainer) {
@@ -368,7 +368,7 @@ export const KeyboardShortcutsExtension = Extension.create<{
                       from: blockInfo.bnBlock.beforePos,
                       to: blockInfo.bnBlock.afterPos,
                     },
-                    bottomBlock.bnBlock.afterPos
+                    bottomBlock.bnBlock.afterPos,
                   )
                   .deleteRange({
                     from: bottomBlock.bnBlock.beforePos,
@@ -521,7 +521,7 @@ export const KeyboardShortcutsExtension = Extension.create<{
                   .insert(newBlockInsertionPos, newBlock)
                   .scrollIntoView();
                 state.tr.setSelection(
-                  new TextSelection(state.doc.resolve(newBlockContentPos))
+                  new TextSelection(state.doc.resolve(newBlockContentPos)),
                 );
               }
 
@@ -551,8 +551,8 @@ export const KeyboardShortcutsExtension = Extension.create<{
                   splitBlockCommand(
                     state.selection.from,
                     selectionAtBlockStart,
-                    selectionAtBlockStart
-                  )
+                    selectionAtBlockStart,
+                  ),
                 )
                 .run();
 
@@ -605,6 +605,9 @@ export const KeyboardShortcutsExtension = Extension.create<{
         this.options.editor.moveBlocksDown();
         return true;
       },
+      "Mod-z": () => this.options.editor.undo(),
+      "Mod-y": () => this.options.editor.redo(),
+      "Shift-Mod-z": () => this.options.editor.redo(),
     };
   },
 });

package/src/extensions/LinkToolbar/LinkToolbarPlugin.ts

@@ -41,7 +41,7 @@ class LinkToolbarView implements PluginView {
   constructor(
     private readonly editor: BlockNoteEditor<any, any, any>,
     private readonly pmView: EditorView,
-    emitUpdate: (state: LinkToolbarState) => void
+    emitUpdate: (state: LinkToolbarState) => void,
   ) {
     this.emitUpdate = () => {
       if (!this.state) {
@@ -70,7 +70,7 @@ class LinkToolbarView implements PluginView {
     this.pmView.root.addEventListener(
       "click",
       this.clickHandler as EventListener,
-      true
+      true,
     );
 
     // Setting capture=true ensures that any parent container of the editor that
@@ -146,7 +146,7 @@ class LinkToolbarView implements PluginView {
         this.state.referencePos = posToDOMRect(
           this.pmView,
           this.linkMarkRange!.from,
-          this.linkMarkRange!.to
+          this.linkMarkRange!.to,
         );
         this.emitUpdate();
       }
@@ -160,7 +160,7 @@ class LinkToolbarView implements PluginView {
       tr.addMark(
         this.linkMarkRange!.from,
         this.linkMarkRange!.from + text.length,
-        pmSchema.mark("link", { href: url })
+        pmSchema.mark("link", { href: url }),
       );
     });
     this.pmView.focus();
@@ -177,9 +177,9 @@ class LinkToolbarView implements PluginView {
         .removeMark(
           this.linkMarkRange!.from,
           this.linkMarkRange!.to,
-          this.linkMark!.type
+          this.linkMark!.type,
         )
-        .setMeta("preventAutolink", true)
+        .setMeta("preventAutolink", true),
     );
     this.pmView.focus();
 
@@ -226,7 +226,7 @@ class LinkToolbarView implements PluginView {
             getMarkRange(
               this.pmView.state.selection.$from,
               mark.type,
-              mark.attrs
+              mark.attrs,
             ) || undefined;
 
           break;
@@ -251,12 +251,12 @@ class LinkToolbarView implements PluginView {
         referencePos: posToDOMRect(
           this.pmView,
           this.linkMarkRange!.from,
-          this.linkMarkRange!.to
+          this.linkMarkRange!.to,
         ),
         url: this.linkMark!.attrs.href,
         text: this.pmView.state.doc.textBetween(
           this.linkMarkRange!.from,
-          this.linkMarkRange!.to
+          this.linkMarkRange!.to,
         ),
       };
       this.emitUpdate();
@@ -290,7 +290,7 @@ class LinkToolbarView implements PluginView {
     this.pmView.root.removeEventListener(
       "click",
       this.clickHandler as EventListener,
-      true
+      true,
     );
   }
 }
@@ -300,7 +300,7 @@ export const linkToolbarPluginKey = new PluginKey("LinkToolbarPlugin");
 export class LinkToolbarProsemirrorPlugin<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 > extends EventEmitter<any> {
   private view: LinkToolbarView | undefined;
   public readonly plugin: Plugin;

package/src/extensions/NodeSelectionKeyboard/NodeSelectionKeyboardPlugin.ts

@@ -47,13 +47,13 @@ export class NodeSelectionKeyboardPlugin {
                 tr
                   .insert(
                     view.state.tr.selection.$to.after(),
-                    view.state.schema.nodes["paragraph"].createChecked()
+                    view.state.schema.nodes["paragraph"].createChecked(),
                   )
                   .setSelection(
                     new TextSelection(
-                      tr.doc.resolve(view.state.tr.selection.$to.after() + 1)
-                    )
-                  )
+                      tr.doc.resolve(view.state.tr.selection.$to.after() + 1),
+                    ),
+                  ),
               );
 
               return true;

package/src/extensions/Placeholder/PlaceholderPlugin.ts

@@ -12,7 +12,7 @@ export class PlaceholderPlugin {
     placeholders: Record<
       string | "default" | "emptyDocument",
       string | undefined
-    >
+    >,
   ) {
     this.plugin = new Plugin({
       key: PLUGIN_KEY,
@@ -51,8 +51,8 @@ export class PlaceholderPlugin {
 
             styleSheet.insertRule(
               `${getSelector(blockTypeSelector)} { content: ${JSON.stringify(
-                placeholder
-              )}; }`
+                placeholder,
+              )}; }`,
             );
           }
 
@@ -62,21 +62,21 @@ export class PlaceholderPlugin {
           // placeholder for when there's only one empty block
           styleSheet.insertRule(
             `${getSelector(onlyBlockSelector)} { content: ${JSON.stringify(
-              emptyPlaceholder
-            )}; }`
+              emptyPlaceholder,
+            )}; }`,
           );
 
           // placeholder for default blocks, only when the cursor is in the block (mustBeFocused)
           styleSheet.insertRule(
             `${getSelector(mustBeFocusedSelector)} { content: ${JSON.stringify(
-              defaultPlaceholder
-            )}; }`
+              defaultPlaceholder,
+            )}; }`,
           );
         } catch (e) {
           // eslint-disable-next-line no-console
           console.warn(
             `Failed to insert placeholder CSS rule - this is likely due to the browser not supporting certain CSS pseudo-element selectors (:has, :only-child:, or :before)`,
-            e
+            e,
           );
         }
 
@@ -115,7 +115,7 @@ export class PlaceholderPlugin {
             decs.push(
               Decoration.node(2, 4, {
                 "data-is-only-empty-block": "true",
-              })
+              }),
             );
           }
 
@@ -128,7 +128,7 @@ export class PlaceholderPlugin {
             decs.push(
               Decoration.node(before, before + node.nodeSize, {
                 "data-is-empty-and-focused": "true",
-              })
+              }),
             );
           }
 

package/src/extensions/PreviousBlockType/PreviousBlockTypePlugin.ts

@@ -37,7 +37,7 @@ export class PreviousBlockTypePlugin {
               // for one DOM-render the decorations have been applied
               timeout = setTimeout(() => {
                 view.dispatch(
-                  view.state.tr.setMeta(PLUGIN_KEY, { clearUpdate: true })
+                  view.state.tr.setMeta(PLUGIN_KEY, { clearUpdate: true }),
                 );
               }, 0);
             }
@@ -93,7 +93,7 @@ export class PreviousBlockTypePlugin {
 
           const oldNodes = findChildren(oldState.doc, (node) => node.attrs.id);
           const oldNodesById = new Map(
-            oldNodes.map((node) => [node.node.attrs.id, node])
+            oldNodes.map((node) => [node.node.attrs.id, node]),
           );
           const newNodes = findChildren(newState.doc, (node) => node.attrs.id);
 

package/src/extensions/README.md

@@ -1,3 +1,3 @@
 ### @blocknote/core/src/extensions
 
-All extra extensions for TipTap / Prosemirror needed to implement the Prosemirror UX and editor behavior. 
+All extra extensions for TipTap / Prosemirror needed to implement the Prosemirror UX and editor behavior.

package/src/extensions/SideMenu/MultipleNodeSelection.ts

@@ -77,7 +77,7 @@ export class MultipleNodeSelection extends Selection {
 
     return new MultipleNodeSelection(
       doc.resolve(fromResult.pos),
-      doc.resolve(toResult.pos)
+      doc.resolve(toResult.pos),
     );
   }