@blocknote/core 0.41.1 → 0.42.1

package/src/extensions/KeyboardShortcuts/KeyboardShortcutsExtension.ts

@@ -1,10 +1,8 @@
 import { Extension } from "@tiptap/core";
 
 import { TextSelection } from "prosemirror-state";
-import { ReplaceAroundStep } from "prosemirror-transform";
 import {
   getBottomNestedBlockInfo,
-  getParentBlockInfo,
   getPrevBlockInfo,
   mergeBlocksCommand,
 } from "../../api/blockManipulation/commands/mergeBlocks/mergeBlocks.js";
@@ -13,6 +11,7 @@ import { splitBlockCommand } from "../../api/blockManipulation/commands/splitBlo
 import { updateBlockCommand } from "../../api/blockManipulation/commands/updateBlock/updateBlock.js";
 import { getBlockInfoFromSelection } from "../../api/getBlockInfoFromPos.js";
 import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
+import { fixColumnList } from "../../api/blockManipulation/commands/replaceBlocks/util/fixColumnList.js";
 
 export const KeyboardShortcutsExtension = Extension.create<{
   editor: BlockNoteEditor<any, any, any>;
@@ -98,7 +97,7 @@ export const KeyboardShortcutsExtension = Extension.create<{
             return false;
           }),
         () =>
-          commands.command(({ state, dispatch }) => {
+          commands.command(({ state, tr, dispatch }) => {
             // when at the start of a first block in a column
             const blockInfo = getBlockInfoFromSelection(state);
             if (!blockInfo.isBlockContainer) {
@@ -106,151 +105,54 @@ export const KeyboardShortcutsExtension = Extension.create<{
             }
 
             const selectionAtBlockStart =
-              state.selection.from === blockInfo.blockContent.beforePos + 1;
-
+              tr.selection.from === blockInfo.blockContent.beforePos + 1;
             if (!selectionAtBlockStart) {
               return false;
             }
 
-            const prevBlockInfo = getPrevBlockInfo(
-              state.doc,
-              blockInfo.bnBlock.beforePos,
-            );
+            const $pos = tr.doc.resolve(blockInfo.bnBlock.beforePos);
 
-            if (prevBlockInfo) {
+            const prevBlock = $pos.nodeBefore;
+            if (prevBlock) {
               // should be no previous block
               return false;
             }
 
-            const parentBlockInfo = getParentBlockInfo(
-              state.doc,
-              blockInfo.bnBlock.beforePos,
-            );
-
-            if (parentBlockInfo?.blockNoteType !== "column") {
+            const parentBlock = $pos.node();
+            if (parentBlock.type.name !== "column") {
               return false;
             }
 
-            const column = parentBlockInfo;
-
-            const columnList = getParentBlockInfo(
-              state.doc,
-              column.bnBlock.beforePos,
-            );
-            if (columnList?.blockNoteType !== "columnList") {
-              throw new Error("parent of column is not a column list");
-            }
-
-            const shouldRemoveColumn =
-              column.childContainer!.node.childCount === 1;
-
-            const shouldRemoveColumnList =
-              shouldRemoveColumn &&
-              columnList.childContainer!.node.childCount === 2;
-
-            const isFirstColumn =
-              columnList.childContainer!.node.firstChild ===
-              column.bnBlock.node;
+            const $blockPos = tr.doc.resolve(blockInfo.bnBlock.beforePos);
+            const $columnPos = tr.doc.resolve($blockPos.before());
+            const columnListPos = $columnPos.before();
 
             if (dispatch) {
-              const blockToMove = state.doc.slice(
+              const fragment = tr.doc.slice(
                 blockInfo.bnBlock.beforePos,
                 blockInfo.bnBlock.afterPos,
-                false,
-              );
+              ).content;
 
-              /*
-              There are 3 different cases:
-              a) remove entire column list (if no columns would be remaining)
-              b) remove just a column (if no blocks inside a column would be remaining)
-              c) keep columns (if there are blocks remaining inside a column)
-
-              Each of these 3 cases has 2 sub-cases, depending on whether the backspace happens at the start of the first (most-left) column,
-              or at the start of a non-first column.
-              */
-              if (shouldRemoveColumnList) {
-                if (isFirstColumn) {
-                  state.tr.step(
-                    new ReplaceAroundStep(
-                      // replace entire column list
-                      columnList.bnBlock.beforePos,
-                      columnList.bnBlock.afterPos,
-                      // select content of remaining column:
-                      column.bnBlock.afterPos + 1,
-                      columnList.bnBlock.afterPos - 2,
-                      blockToMove,
-                      blockToMove.size, // append existing content to blockToMove
-                      false,
-                    ),
-                  );
-                  const pos = state.tr.doc.resolve(column.bnBlock.beforePos);
-                  state.tr.setSelection(TextSelection.between(pos, pos));
-                } else {
-                  // replaces the column list with the blockToMove slice, prepended with the content of the remaining column
-                  state.tr.step(
-                    new ReplaceAroundStep(
-                      // replace entire column list
-                      columnList.bnBlock.beforePos,
-                      columnList.bnBlock.afterPos,
-                      // select content of existing column:
-                      columnList.bnBlock.beforePos + 2,
-                      column.bnBlock.beforePos - 1,
-                      blockToMove,
-                      0, // prepend existing content to blockToMove
-                      false,
-                    ),
-                  );
-                  const pos = state.tr.doc.resolve(
-                    state.tr.mapping.map(column.bnBlock.beforePos - 1),
-                  );
-                  state.tr.setSelection(TextSelection.between(pos, pos));
-                }
-              } else if (shouldRemoveColumn) {
-                if (isFirstColumn) {
-                  // delete column
-                  state.tr.delete(
-                    column.bnBlock.beforePos,
-                    column.bnBlock.afterPos,
-                  );
-
-                  // move before columnlist
-                  state.tr.insert(
-                    columnList.bnBlock.beforePos,
-                    blockToMove.content,
-                  );
+              tr.delete(
+                blockInfo.bnBlock.beforePos,
+                blockInfo.bnBlock.afterPos,
+              );
 
-                  const pos = state.tr.doc.resolve(
-                    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,
-                  );
-                }
+              if ($columnPos.index() === 0) {
+                // Fix `columnList` and insert the block before it.
+                fixColumnList(tr, columnListPos);
+                tr.insert(columnListPos, fragment);
+                tr.setSelection(
+                  TextSelection.near(tr.doc.resolve(columnListPos)),
+                );
               } else {
-                // delete block
-                state.tr.delete(
-                  blockInfo.bnBlock.beforePos,
-                  blockInfo.bnBlock.afterPos,
+                // Insert the block at the end of the first column and fix
+                // `columnList`.
+                tr.insert($columnPos.pos - 1, fragment);
+                tr.setSelection(
+                  TextSelection.near(tr.doc.resolve($columnPos.pos - 1)),
                 );
-                if (isFirstColumn) {
-                  // move before columnlist
-                  state.tr.insert(
-                    columnList.bnBlock.beforePos - 1,
-                    blockToMove.content,
-                  );
-                } else {
-                  // append block to previous column
-                  state.tr.insert(
-                    column.bnBlock.beforePos - 1,
-                    blockToMove.content,
-                  );
-                }
-                const pos = state.tr.doc.resolve(column.bnBlock.beforePos - 1);
-                state.tr.setSelection(TextSelection.between(pos, pos));
+                fixColumnList(tr, columnListPos);
               }
             }
 

package/src/extensions/SideMenu/SideMenuPlugin.ts

@@ -738,6 +738,8 @@ export class SideMenuProsemirrorPlugin<
     if (this.view) {
       this.view.isDragOrigin = false;
     }
+
+    this.editor.blur();
   };
   /**
    * Freezes the side menu. When frozen, the side menu will stay

package/src/index.ts

@@ -1,6 +1,7 @@
 export * from "./api/blockManipulation/commands/insertBlocks/insertBlocks.js";
 export * from "./api/blockManipulation/commands/replaceBlocks/replaceBlocks.js";
 export * from "./api/blockManipulation/commands/updateBlock/updateBlock.js";
+export * from "./api/blockManipulation/commands/replaceBlocks/util/fixColumnList.js";
 export * from "./api/exporters/html/externalHTMLExporter.js";
 export * from "./api/exporters/html/internalHTMLSerializer.js";
 export * from "./api/getBlockInfoFromPos.js";

package/src/schema/inlineContent/createSpec.ts

@@ -81,6 +81,8 @@ export type CustomInlineContentImplementation<
         contentDOM?: HTMLElement;
       }
     | undefined;
+
+  runsBefore?: string[];
 };
 
 export function getInlineContentParseRules<C extends CustomInlineContentConfig>(
@@ -220,6 +222,7 @@ export function createInlineContentSpec<
     node,
     inlineContentConfig.propSchema,
     {
+      ...inlineContentImplementation,
       toExternalHTML: inlineContentImplementation.toExternalHTML,
       render(inlineContent, updateInlineContent, editor) {
         const output = inlineContentImplementation.render(

package/src/schema/inlineContent/types.ts

@@ -43,6 +43,7 @@ export type InlineContentImplementation<T extends InlineContentConfig> =
           ignoreMutation?: (mutation: ViewMutationRecord) => boolean;
           destroy?: () => void;
         };
+        runsBefore?: string[];
       };
 
 export type InlineContentSchemaWithInlineContent<

package/src/schema/schema.ts

@@ -84,8 +84,12 @@ export class CustomBlockNoteSchema<
     const defaultSet = new Set<string>();
     dag.set("default", defaultSet);
 
-    for (const [key, specDef] of Object.entries(this.opts.blockSpecs)) {
-      if (specDef.implementation.runsBefore) {
+    for (const [key, specDef] of Object.entries({
+      ...this.opts.blockSpecs,
+      ...this.opts.inlineContentSpecs,
+      ...this.opts.styleSpecs,
+    })) {
+      if (specDef.implementation?.runsBefore) {
         dag.set(key, new Set(specDef.implementation.runsBefore));
       } else {
         defaultSet.add(key);
@@ -130,6 +134,45 @@ export class CustomBlockNoteSchema<
         : never;
     };
 
+    const inlineContentSpecs = Object.fromEntries(
+      Object.entries(this.opts.inlineContentSpecs).map(
+        ([key, inlineContentSpec]) => {
+          // Case for text and links.
+          if (typeof inlineContentSpec.config !== "object") {
+            return [key, inlineContentSpec];
+          }
+
+          return [
+            key,
+            {
+              ...inlineContentSpec,
+              implementation: {
+                ...inlineContentSpec.implementation,
+                node: inlineContentSpec.implementation?.node.extend({
+                  priority: getPriority(key),
+                }),
+              },
+            },
+          ];
+        },
+      ),
+    ) as InlineContentSpecs;
+
+    const styleSpecs = Object.fromEntries(
+      Object.entries(this.opts.styleSpecs).map(([key, styleSpec]) => [
+        key,
+        {
+          ...styleSpec,
+          implementation: {
+            ...styleSpec.implementation,
+            mark: styleSpec.implementation?.mark.extend({
+              priority: getPriority(key),
+            }),
+          },
+        },
+      ]),
+    ) as StyleSpecs;
+
     return {
       blockSpecs,
       blockSchema: Object.fromEntries(
@@ -137,12 +180,12 @@ export class CustomBlockNoteSchema<
           return [key, blockDef.config];
         }),
       ) as any,
-      inlineContentSpecs: removeUndefined(this.opts.inlineContentSpecs),
-      styleSpecs: removeUndefined(this.opts.styleSpecs),
+      inlineContentSpecs: removeUndefined(inlineContentSpecs),
+      styleSpecs: removeUndefined(styleSpecs),
       inlineContentSchema: getInlineContentSchemaFromSpecs(
-        this.opts.inlineContentSpecs,
+        inlineContentSpecs,
       ) as any,
-      styleSchema: getStyleSchemaFromSpecs(this.opts.styleSpecs) as any,
+      styleSchema: getStyleSchemaFromSpecs(styleSpecs) as any,
     };
   }
 

package/src/schema/styles/createSpec.ts

@@ -22,6 +22,7 @@ export type CustomStyleImplementation<T extends StyleConfig> = {
   parse?: (
     element: HTMLElement,
   ) => (T["propSchema"] extends "boolean" ? true : string) | undefined;
+  runsBefore?: string[];
 };
 
 export function getStyleParseRules<T extends StyleConfig>(
@@ -46,6 +47,10 @@ export function getStyleParseRules<T extends StyleConfig>(
   if (customParseFunction) {
     rules.push({
       tag: "*",
+      // By default, styles can overlap each other, so the rules should not
+      // completely consume the element they parse (which can have multiple
+      // styles).
+      consuming: false,
       getAttrs(node: string | HTMLElement) {
         if (typeof node === "string") {
           return false;
@@ -107,6 +112,7 @@ export function createStyleSpec<const T extends StyleConfig>(
   });
 
   return createInternalStyleSpec(styleConfig, {
+    ...styleImplementation,
     mark,
     render: (value) => {
       const renderResult = styleImplementation.render(value as any);

package/src/schema/styles/types.ts

@@ -28,6 +28,7 @@ export type StyleImplementation<T extends StyleConfig> = {
     dom: HTMLElement;
     contentDOM?: HTMLElement;
   };
+  runsBefore?: string[];
 };
 
 // Container for both the config and implementation of a Style,

package/src/yjs/index.ts

@@ -0,0 +1 @@
+export * from "./utils.js";