@blocknote/core 0.18.0 → 0.19.1

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/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<{
@@ -32,6 +33,9 @@ export const KeyboardShortcutsExtension = Extension.create<{
         () =>
           commands.command(({ state }) => {
             const blockInfo = getBlockInfoFromSelection(state);
+            if (!blockInfo.isBlockContainer) {
+              return false;
+            }
 
             const selectionAtBlockStart =
               state.selection.from === blockInfo.blockContent.beforePos + 1;
@@ -42,7 +46,7 @@ export const KeyboardShortcutsExtension = Extension.create<{
               return commands.command(
                 updateBlockCommand(
                   this.options.editor,
-                  blockInfo.blockContainer.beforePos,
+                  blockInfo.bnBlock.beforePos,
                   {
                     type: "paragraph",
                     props: {},
@@ -56,7 +60,11 @@ export const KeyboardShortcutsExtension = Extension.create<{
         // Removes a level of nesting if the block is indented if the selection is at the start of the block.
         () =>
           commands.command(({ state }) => {
-            const { blockContent } = getBlockInfoFromSelection(state);
+            const blockInfo = getBlockInfoFromSelection(state);
+            if (!blockInfo.isBlockContainer) {
+              return false;
+            }
+            const { blockContent } = blockInfo;
 
             const selectionAtBlockStart =
               state.selection.from === blockContent.beforePos + 1;
@@ -67,29 +75,23 @@ 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 } =
-              getBlockInfoFromSelection(state);
-
-            const { depth } = state.doc.resolve(blockContainer.beforePos);
+            const blockInfo = getBlockInfoFromSelection(state);
+            if (!blockInfo.isBlockContainer) {
+              return false;
+            }
+            const { bnBlock: blockContainer, blockContent } = blockInfo;
 
             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 +100,165 @@ 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);
+            if (!blockInfo.isBlockContainer) {
+              return false;
+            }
+
+            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 +266,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 +328,15 @@ 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 blockInfo = getBlockInfoFromSelection(state);
+            if (!blockInfo.isBlockContainer) {
+              return false;
+            }
+            const {
+              bnBlock: blockContainer,
+              blockContent,
+              childContainer,
+            } = blockInfo;
 
             const { depth } = state.doc.resolve(blockContainer.beforePos);
             const blockAtDocEnd =
@@ -174,7 +344,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,8 +375,11 @@ export const KeyboardShortcutsExtension = Extension.create<{
         // of the block.
         () =>
           commands.command(({ state }) => {
-            const { blockContent, blockContainer } =
-              getBlockInfoFromSelection(state);
+            const blockInfo = getBlockInfoFromSelection(state);
+            if (!blockInfo.isBlockContainer) {
+              return false;
+            }
+            const { bnBlock: blockContainer, blockContent } = blockInfo;
 
             const { depth } = state.doc.resolve(blockContainer.beforePos);
 
@@ -232,8 +405,11 @@ export const KeyboardShortcutsExtension = Extension.create<{
         // empty & at the start of the block.
         () =>
           commands.command(({ state, dispatch }) => {
-            const { blockContainer, blockContent } =
-              getBlockInfoFromSelection(state);
+            const blockInfo = getBlockInfoFromSelection(state);
+            if (!blockInfo.isBlockContainer) {
+              return false;
+            }
+            const { bnBlock: blockContainer, blockContent } = blockInfo;
 
             const selectionAtBlockStart =
               state.selection.$anchor.parentOffset === 0;
@@ -266,7 +442,11 @@ export const KeyboardShortcutsExtension = Extension.create<{
         // deletes the selection beforehand, if it's not empty.
         () =>
           commands.command(({ state, chain }) => {
-            const { blockContent } = getBlockInfoFromSelection(state);
+            const blockInfo = getBlockInfoFromSelection(state);
+            if (!blockInfo.isBlockContainer) {
+              return false;
+            }
+            const { blockContent } = blockInfo;
 
             const selectionAtBlockStart =
               state.selection.$anchor.parentOffset === 0;
@@ -306,8 +486,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

@@ -15,51 +15,54 @@ const PLUGIN_KEY = new PluginKey("node-selection-keyboard");
 // While a more elegant solution would probably process transactions instead of
 // keystrokes, this brings us most of the way to Notion's UX without much added
 // complexity.
-export const NodeSelectionKeyboardPlugin = () => {
-  return new Plugin({
-    key: PLUGIN_KEY,
-    props: {
-      handleKeyDown: (view, event) => {
-        // Checks for node selection
-        if ("node" in view.state.selection) {
-          // Checks if key press uses ctrl/meta modifier
-          if (event.ctrlKey || event.metaKey) {
-            return false;
-          }
-          // Checks if key press is alphanumeric
-          if (event.key.length === 1) {
-            event.preventDefault();
+export class NodeSelectionKeyboardPlugin {
+  public readonly plugin: Plugin;
+  constructor() {
+    this.plugin = new Plugin({
+      key: PLUGIN_KEY,
+      props: {
+        handleKeyDown: (view, event) => {
+          // Checks for node selection
+          if ("node" in view.state.selection) {
+            // Checks if key press uses ctrl/meta modifier
+            if (event.ctrlKey || event.metaKey) {
+              return false;
+            }
+            // Checks if key press is alphanumeric
+            if (event.key.length === 1) {
+              event.preventDefault();
 
-            return true;
-          }
-          // Checks if key press is Enter
-          if (
-            event.key === "Enter" &&
-            !event.shiftKey &&
-            !event.altKey &&
-            !event.ctrlKey &&
-            !event.metaKey
-          ) {
-            const tr = view.state.tr;
-            view.dispatch(
-              tr
-                .insert(
-                  view.state.tr.selection.$to.after(),
-                  view.state.schema.nodes["paragraph"].create()
-                )
-                .setSelection(
-                  new TextSelection(
-                    tr.doc.resolve(view.state.tr.selection.$to.after() + 1)
+              return true;
+            }
+            // Checks if key press is Enter
+            if (
+              event.key === "Enter" &&
+              !event.shiftKey &&
+              !event.altKey &&
+              !event.ctrlKey &&
+              !event.metaKey
+            ) {
+              const tr = view.state.tr;
+              view.dispatch(
+                tr
+                  .insert(
+                    view.state.tr.selection.$to.after(),
+                    view.state.schema.nodes["paragraph"].createChecked()
+                  )
+                  .setSelection(
+                    new TextSelection(
+                      tr.doc.resolve(view.state.tr.selection.$to.after() + 1)
+                    )
                   )
-                )
-            );
+              );
 
-            return true;
+              return true;
+            }
           }
-        }
 
-        return false;
+          return false;
+        },
       },
-    },
-  });
-};
+    });
+  }
+}