@blocknote/core 0.17.1 → 0.19.0

package/src/editor/editor.css

@@ -104,22 +104,60 @@ Tippy popups that are appended to document.body directly
   white-space: nowrap;
 }
 
+/* .tableWrapper {
+  padding
+} */
+
+.ProseMirror .tableWrapper {
+  position: relative;
+  top: -16px;
+  left: -16px;
+  /* padding: 16px; */
+  min-width: calc(100% + 16px);
+  padding-bottom: 16px;
+  overflow-y: hidden;
+}
+
+.ProseMirror .tableWrapper-inner {
+  /* position: relative; */
+  /* top: -16px;
+  left: -16px; */
+  padding: 16px;
+}
+
 /* table related: */
 .bn-editor table {
   width: auto !important;
+  word-break: break-word;
 }
 .bn-editor th,
 .bn-editor td {
-  min-width: 1em;
   border: 1px solid #ddd;
   padding: 3px 5px;
 }
 
-.bn-editor .tableWrapper {
-  margin: 1em 0;
-}
-
 .bn-editor th {
   font-weight: bold;
   text-align: left;
 }
+
+/* tiptap uses colwidth instead of data-colwidth, se we need to adjust this style from prosemirror-tables */
+.ProseMirror td,
+.ProseMirror th {
+  min-width: auto !important;
+}
+.ProseMirror td:not([colwidth]):not(.column-resize-dragging),
+.ProseMirror th:not([colwidth]):not(.column-resize-dragging) {
+  /* if there's no explicit width set and the column is not being resized, set a default width */
+  min-width: var(--default-cell-min-width) !important;
+}
+
+.prosemirror-dropcursor-block {
+  transition-property: top, bottom;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 0.15s;
+}
+
+.prosemirror-dropcursor-vertical {
+  transition-property: left, right;
+}

package/src/editor/transformPasted.ts

@@ -32,7 +32,10 @@ export function wrapTableRows(f: Fragment, schema: Schema) {
         newItems[newItems.length - 1] = newTable;
       } else {
         // create new table to wrap tableRow with
-        const newTable = schema.nodes.table.create(undefined, f.child(i));
+        const newTable = schema.nodes.table.createChecked(
+          undefined,
+          f.child(i)
+        );
         newItems.push(newTable);
       }
     } else {
@@ -64,7 +67,7 @@ export function transformPasted(slice: Slice, view: EditorView) {
       // (if we remove this if-block, the nesting bug will be fixed, but lists won't be nested correctly)
       if (
         i + 1 < f.childCount &&
-        f.child(i + 1).type.spec.group === "blockGroup"
+        f.child(i + 1).type.name === "blockGroup" // TODO
       ) {
         const nestedChild = f
           .child(i + 1)
@@ -80,7 +83,7 @@ export function transformPasted(slice: Slice, view: EditorView) {
           f = removeChild(f, i + 1);
         }
       }
-      const container = view.state.schema.nodes.blockContainer.create(
+      const container = view.state.schema.nodes.blockContainer.createChecked(
         undefined,
         content
       );

package/src/exporter/Exporter.ts

@@ -0,0 +1,101 @@
+import { BlockNoteSchema } from "../editor/BlockNoteSchema.js";
+import { COLORS_DEFAULT } from "../editor/defaultColors.js";
+import {
+  BlockFromConfig,
+  BlockSchema,
+  InlineContent,
+  InlineContentSchema,
+  StyleSchema,
+  StyledText,
+  Styles,
+} from "../schema/index.js";
+
+import type {
+  BlockMapping,
+  InlineContentMapping,
+  StyleMapping,
+} from "./mapping.js";
+
+export type ExporterOptions = {
+  /**
+   * A function that can be used to resolve files, images, etc.
+   * Exporters might need the binary contents of files like images,
+   * which might not always be available from the same origin as the main page.
+   * You can use this option to proxy requests through a server you control
+   * to avoid cross-origin (CORS) issues.
+   *
+   * @default uses a BlockNote hosted proxy (https://corsproxy.api.blocknotejs.org/)
+   * @param url - The URL of the file to resolve
+   * @returns A Promise that resolves to a string (the URL to use instead of the original)
+   * or a Blob (you can return the Blob directly if you have already fetched it)
+   */
+  resolveFileUrl?: (url: string) => Promise<string | Blob>;
+  /**
+   * Colors to use for background of blocks, font colors, and highlight colors
+   */
+  colors: typeof COLORS_DEFAULT;
+};
+export abstract class Exporter<
+  B extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema,
+  RB,
+  RI,
+  RS,
+  TS
+> {
+  public constructor(
+    _schema: BlockNoteSchema<B, I, S>, // only used for type inference
+    protected readonly mappings: {
+      blockMapping: BlockMapping<B, I, S, RB, RI>;
+      inlineContentMapping: InlineContentMapping<I, S, RI, TS>;
+      styleMapping: StyleMapping<S, RS>;
+    },
+    public readonly options: ExporterOptions
+  ) {}
+
+  public async resolveFile(url: string) {
+    if (!this.options?.resolveFileUrl) {
+      return (await fetch(url)).blob();
+    }
+    const ret = await this.options.resolveFileUrl(url);
+    if (ret instanceof Blob) {
+      return ret;
+    }
+    return (await fetch(ret)).blob();
+  }
+
+  public mapStyles(styles: Styles<S>) {
+    const stylesArray = Object.entries(styles).map(([key, value]) => {
+      const mappedStyle = this.mappings.styleMapping[key](value, this);
+      return mappedStyle;
+    });
+    return stylesArray;
+  }
+
+  public mapInlineContent(inlineContent: InlineContent<I, S>) {
+    return this.mappings.inlineContentMapping[inlineContent.type](
+      inlineContent,
+      this
+    );
+  }
+
+  public transformInlineContent(inlineContentArray: InlineContent<I, S>[]) {
+    return inlineContentArray.map((ic) => this.mapInlineContent(ic));
+  }
+
+  public abstract transformStyledText(styledText: StyledText<S>): TS;
+
+  public async mapBlock(
+    block: BlockFromConfig<B[keyof B], I, S>,
+    nestingLevel: number,
+    numberedListIndex: number
+  ) {
+    return this.mappings.blockMapping[block.type](
+      block,
+      this,
+      nestingLevel,
+      numberedListIndex
+    );
+  }
+}

package/src/exporter/index.ts

@@ -0,0 +1,2 @@
+export * from "./Exporter.js";
+export * from "./mapping.js";

package/src/exporter/mapping.ts

@@ -0,0 +1,75 @@
+import { BlockNoteSchema } from "../editor/BlockNoteSchema.js";
+import {
+  BlockFromConfigNoChildren,
+  BlockSchema,
+  InlineContentFromConfig,
+  InlineContentSchema,
+  StyleSchema,
+  Styles,
+} from "../schema/index.js";
+import type { Exporter } from "./Exporter.js";
+
+/**
+ * Defines a mapping from all block types with a schema to a result type `R`.
+ */
+export type BlockMapping<
+  B extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema,
+  RB,
+  RI
+> = {
+  [K in keyof B]: (
+    block: BlockFromConfigNoChildren<B[K], I, S>,
+    // we don't know the exact types that are supported by the exporter at this point,
+    // because the mapping only knows about converting certain types (which might be a subset of the supported types)
+    // this is why there are many `any` types here (same for types below)
+    exporter: Exporter<any, any, any, RB, RI, any, any>,
+    nestingLevel: number,
+    numberedListIndex?: number
+  ) => RB | Promise<RB>;
+};
+
+/**
+ * Defines a mapping from all inline content types with a schema to a result type R.
+ */
+export type InlineContentMapping<
+  I extends InlineContentSchema,
+  S extends StyleSchema,
+  RI,
+  TS
+> = {
+  [K in keyof I]: (
+    inlineContent: InlineContentFromConfig<I[K], S>,
+    exporter: Exporter<any, I, S, any, RI, any, TS>
+  ) => RI;
+};
+
+/**
+ * Defines a mapping from all style types with a schema to a result type R.
+ */
+export type StyleMapping<S extends StyleSchema, RS> = {
+  [K in keyof S]: (
+    style: Styles<S>[K],
+    exporter: Exporter<any, any, any, any, any, RS, any>
+  ) => RS;
+};
+
+/**
+ * The mapping factory is a utility function to easily create mappings for
+ * a BlockNoteSchema. Using the factory makes it easier to get typescript code completion etc.
+ */
+export function mappingFactory<
+  B extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(_schema: BlockNoteSchema<B, I, S>) {
+  return {
+    createBlockMapping: <R, RI>(mapping: BlockMapping<B, I, S, R, RI>) =>
+      mapping,
+    createInlineContentMapping: <R, RS>(
+      mapping: InlineContentMapping<I, S, R, RS>
+    ) => mapping,
+    createStyleMapping: <R>(mapping: StyleMapping<S, R>) => mapping,
+  };
+}

package/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts

@@ -35,6 +35,14 @@ export class FormattingToolbarView implements PluginView {
     const isEmptyTextBlock =
       !doc.textBetween(from, to).length && isTextSelection(state.selection);
 
+    // Don't show toolbar inside code blocks
+    if (
+      selection.$from.parent.type.spec.code ||
+      (isNodeSelection(selection) && selection.node.type.spec.code)
+    ) {
+      return false;
+    }
+
     // check view.hasFocus so that the toolbar doesn't show up when the editor is not focused or when for example a code block is focused
     return !(!view.hasFocus() || empty || isEmptyTextBlock);
   };

package/src/extensions/KeyboardShortcuts/KeyboardShortcutsExtension.ts

@@ -1,16 +1,17 @@
 import { Extension } from "@tiptap/core";
 
 import { TextSelection } from "prosemirror-state";
+import { ReplaceAroundStep } from "prosemirror-transform";
 import {
-  getPrevBlockPos,
+  getBottomNestedBlockInfo,
+  getParentBlockInfo,
+  getPrevBlockInfo,
   mergeBlocksCommand,
 } from "../../api/blockManipulation/commands/mergeBlocks/mergeBlocks.js";
+import { nestBlock } from "../../api/blockManipulation/commands/nestBlock/nestBlock.js";
 import { splitBlockCommand } from "../../api/blockManipulation/commands/splitBlock/splitBlock.js";
 import { updateBlockCommand } from "../../api/blockManipulation/commands/updateBlock/updateBlock.js";
-import {
-  getBlockInfoFromResolvedPos,
-  getBlockInfoFromSelection,
-} from "../../api/getBlockInfoFromPos.js";
+import { getBlockInfoFromSelection } from "../../api/getBlockInfoFromPos.js";
 import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
 
 export const KeyboardShortcutsExtension = Extension.create<{
@@ -42,7 +43,7 @@ export const KeyboardShortcutsExtension = Extension.create<{
               return commands.command(
                 updateBlockCommand(
                   this.options.editor,
-                  blockInfo.blockContainer.beforePos,
+                  blockInfo.bnBlock.beforePos,
                   {
                     type: "paragraph",
                     props: {},
@@ -67,29 +68,20 @@ export const KeyboardShortcutsExtension = Extension.create<{
 
             return false;
           }),
-        // Merges block with the previous one if it isn't indented, isn't the
-        // first block in the doc, and the selection is at the start of the
+        // Merges block with the previous one if it isn't indented, and the selection is at the start of the
         // block. The target block for merging must contain inline content.
         () =>
           commands.command(({ state }) => {
-            const { blockContainer, blockContent } =
+            const { bnBlock: blockContainer, blockContent } =
               getBlockInfoFromSelection(state);
 
-            const { depth } = state.doc.resolve(blockContainer.beforePos);
-
             const selectionAtBlockStart =
               state.selection.from === blockContent.beforePos + 1;
             const selectionEmpty = state.selection.empty;
-            const blockAtDocStart = blockContainer.beforePos === 1;
 
             const posBetweenBlocks = blockContainer.beforePos;
 
-            if (
-              !blockAtDocStart &&
-              selectionAtBlockStart &&
-              selectionEmpty &&
-              depth === 1
-            ) {
+            if (selectionAtBlockStart && selectionEmpty) {
               return chain()
                 .command(mergeBlocksCommand(posBetweenBlocks))
                 .scrollIntoView()
@@ -98,6 +90,162 @@ export const KeyboardShortcutsExtension = Extension.create<{
 
             return false;
           }),
+        () =>
+          commands.command(({ state, dispatch }) => {
+            // when at the start of a first block in a column
+            const blockInfo = getBlockInfoFromSelection(state);
+
+            const selectionAtBlockStart =
+              state.selection.from === blockInfo.blockContent.beforePos + 1;
+
+            if (!selectionAtBlockStart) {
+              return false;
+            }
+
+            const prevBlockInfo = getPrevBlockInfo(
+              state.doc,
+              blockInfo.bnBlock.beforePos
+            );
+
+            if (prevBlockInfo) {
+              // should be no previous block
+              return false;
+            }
+
+            const parentBlockInfo = getParentBlockInfo(
+              state.doc,
+              blockInfo.bnBlock.beforePos
+            );
+
+            if (parentBlockInfo?.blockNoteType !== "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;
+
+            if (dispatch) {
+              const blockToMove = state.doc.slice(
+                blockInfo.bnBlock.beforePos,
+                blockInfo.bnBlock.afterPos,
+                false
+              );
+
+              /*
+              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
+                  );
+
+                  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
+                  );
+                }
+              } else {
+                // delete block
+                state.tr.delete(
+                  blockInfo.bnBlock.beforePos,
+                  blockInfo.bnBlock.afterPos
+                );
+                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));
+              }
+            }
+
+            return true;
+          }),
         // Deletes previous block if it contains no content and isn't a table,
         // when the selection is empty and at the start of the block. Moves the
         // current block into the deleted block's place.
@@ -105,47 +253,49 @@ export const KeyboardShortcutsExtension = Extension.create<{
           commands.command(({ state }) => {
             const blockInfo = getBlockInfoFromSelection(state);
 
-            const { depth } = state.doc.resolve(
-              blockInfo.blockContainer.beforePos
-            );
+            if (!blockInfo.isBlockContainer) {
+              // TODO
+              throw new Error(`todo`);
+            }
 
             const selectionAtBlockStart =
               state.selection.from === blockInfo.blockContent.beforePos + 1;
             const selectionEmpty = state.selection.empty;
-            const blockAtDocStart = blockInfo.blockContainer.beforePos === 1;
 
-            if (
-              !blockAtDocStart &&
-              selectionAtBlockStart &&
-              selectionEmpty &&
-              depth === 1
-            ) {
-              const prevBlockPos = getPrevBlockPos(
+            const prevBlockInfo = getPrevBlockInfo(
+              state.doc,
+              blockInfo.bnBlock.beforePos
+            );
+
+            if (prevBlockInfo && selectionAtBlockStart && selectionEmpty) {
+              const bottomBlock = getBottomNestedBlockInfo(
                 state.doc,
-                state.doc.resolve(blockInfo.blockContainer.beforePos)
-              );
-              const prevBlockInfo = getBlockInfoFromResolvedPos(
-                state.doc.resolve(prevBlockPos.pos)
+                prevBlockInfo
               );
 
+              if (!bottomBlock.isBlockContainer) {
+                // TODO
+                throw new Error(`todo`);
+              }
+
               const prevBlockNotTableAndNoContent =
-                prevBlockInfo.blockContent.node.type.spec.content === "" ||
-                (prevBlockInfo.blockContent.node.type.spec.content ===
+                bottomBlock.blockContent.node.type.spec.content === "" ||
+                (bottomBlock.blockContent.node.type.spec.content ===
                   "inline*" &&
-                  prevBlockInfo.blockContent.node.childCount === 0);
+                  bottomBlock.blockContent.node.childCount === 0);
 
               if (prevBlockNotTableAndNoContent) {
                 return chain()
                   .cut(
                     {
-                      from: blockInfo.blockContainer.beforePos,
-                      to: blockInfo.blockContainer.afterPos,
+                      from: blockInfo.bnBlock.beforePos,
+                      to: blockInfo.bnBlock.afterPos,
                     },
-                    prevBlockInfo.blockContainer.afterPos
+                    bottomBlock.bnBlock.afterPos
                   )
                   .deleteRange({
-                    from: prevBlockInfo.blockContainer.beforePos,
-                    to: prevBlockInfo.blockContainer.afterPos,
+                    from: bottomBlock.bnBlock.beforePos,
+                    to: bottomBlock.bnBlock.afterPos,
                   })
                   .run();
               }
@@ -165,8 +315,11 @@ export const KeyboardShortcutsExtension = Extension.create<{
         () =>
           commands.command(({ state }) => {
             // TODO: Change this to not rely on offsets & schema assumptions
-            const { blockContainer, blockContent, blockGroup } =
-              getBlockInfoFromSelection(state);
+            const {
+              bnBlock: blockContainer,
+              blockContent,
+              childContainer,
+            } = getBlockInfoFromSelection(state);
 
             const { depth } = state.doc.resolve(blockContainer.beforePos);
             const blockAtDocEnd =
@@ -174,7 +327,7 @@ export const KeyboardShortcutsExtension = Extension.create<{
             const selectionAtBlockEnd =
               state.selection.from === blockContent.afterPos - 1;
             const selectionEmpty = state.selection.empty;
-            const hasChildBlocks = blockGroup !== undefined;
+            const hasChildBlocks = childContainer !== undefined;
 
             if (
               !blockAtDocEnd &&
@@ -205,7 +358,7 @@ export const KeyboardShortcutsExtension = Extension.create<{
         // of the block.
         () =>
           commands.command(({ state }) => {
-            const { blockContent, blockContainer } =
+            const { blockContent, bnBlock: blockContainer } =
               getBlockInfoFromSelection(state);
 
             const { depth } = state.doc.resolve(blockContainer.beforePos);
@@ -232,7 +385,7 @@ export const KeyboardShortcutsExtension = Extension.create<{
         // empty & at the start of the block.
         () =>
           commands.command(({ state, dispatch }) => {
-            const { blockContainer, blockContent } =
+            const { bnBlock: blockContainer, blockContent } =
               getBlockInfoFromSelection(state);
 
             const selectionAtBlockStart =
@@ -306,8 +459,8 @@ export const KeyboardShortcutsExtension = Extension.create<{
           // don't handle tabs if a toolbar is shown, so we can tab into / out of it
           return false;
         }
-        this.editor.commands.sinkListItem("blockContainer");
-        return true;
+        return nestBlock(this.options.editor);
+        // return true;
       },
       "Shift-Tab": () => {
         if (

package/src/extensions/NodeSelectionKeyboard/NodeSelectionKeyboardPlugin.ts

@@ -45,7 +45,7 @@ export const NodeSelectionKeyboardPlugin = () => {
               tr
                 .insert(
                   view.state.tr.selection.$to.after(),
-                  view.state.schema.nodes["paragraph"].create()
+                  view.state.schema.nodes["paragraph"].createChecked()
                 )
                 .setSelection(
                   new TextSelection(

package/src/extensions/Placeholder/PlaceholderPlugin.ts

@@ -88,6 +88,11 @@ export const PlaceholderPlugin = (
           return;
         }
 
+        // Don't show placeholder when the cursor is inside a code block
+        if (selection.$from.parent.type.spec.code) {
+          return;
+        }
+
         const $pos = selection.$anchor;
         const node = $pos.parent;