@blocknote/xl-multi-column 0.19.0

package/dist/webpack-stats.json

@@ -0,0 +1 @@
+{"builtAt":1730893824879,"assets":[{"name":"blocknote-xl-multi-column.umd.cjs","size":68564},{"name":"blocknote-xl-multi-column.umd.cjs.map","size":3630227}],"chunks":[{"id":"a1ee98a","entry":true,"initial":true,"files":["blocknote-xl-multi-column.umd.cjs"],"names":["index"]}],"modules":[{"name":"./src/i18n/locales/ar.ts","size":364,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/de.ts","size":400,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/en.ts","size":378,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/es.ts","size":392,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/fr.ts","size":398,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/hr.ts","size":396,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/is.ts","size":376,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/ja.ts","size":284,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/ko.ts","size":288,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/nl.ts","size":390,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/pl.ts","size":394,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/pt.ts","size":388,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/ru.ts","size":370,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/vi.ts","size":340,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/zh.ts","size":274,"chunks":["a1ee98a"]},{"name":"./src/i18n/locales/index.ts","size":0,"chunks":["a1ee98a"]},{"name":"./src/i18n/dictionary.ts","size":189,"chunks":["a1ee98a"]},{"name":"./src/extensions/ColumnResize/ColumnResizeExtension.ts","size":8106,"chunks":["a1ee98a"]},{"name":"./src/pm-nodes/Column.ts","size":2567,"chunks":["a1ee98a"]},{"name":"./src/pm-nodes/ColumnList.ts","size":1120,"chunks":["a1ee98a"]},{"name":"./src/blocks/Columns/index.ts","size":210,"chunks":["a1ee98a"]},{"name":"./src/blocks/schema.ts","size":425,"chunks":["a1ee98a"]},{"name":"./src/extensions/DropCursor/MultiColumnDropCursorPlugin.ts","size":11324,"chunks":["a1ee98a"]},{"name":"./commonjsHelpers.js","size":140,"chunks":["a1ee98a"]},{"name":"../../node_modules/react/jsx-runtime.js?commonjs-module","size":31,"chunks":["a1ee98a"]},{"name":"../../node_modules/react/cjs/react-jsx-runtime.production.min.js?commonjs-exports","size":40,"chunks":["a1ee98a"]},{"name":"../../node_modules/react/index.js?commonjs-module","size":26,"chunks":["a1ee98a"]},{"name":"../../node_modules/react/cjs/react.production.min.js?commonjs-exports","size":30,"chunks":["a1ee98a"]},{"name":"../../node_modules/react/cjs/react.production.min.js","size":7647,"chunks":["a1ee98a"]},{"name":"../../node_modules/react/cjs/react.development.js?commonjs-module","size":38,"chunks":["a1ee98a"]},{"name":"../../node_modules/react/cjs/react.development.js","size":92443,"chunks":["a1ee98a"]},{"name":"../../node_modules/react/index.js","size":299,"chunks":["a1ee98a"]},{"name":"../../node_modules/react/cjs/react-jsx-runtime.production.min.js","size":1192,"chunks":["a1ee98a"]},{"name":"../../node_modules/react/cjs/react-jsx-runtime.development.js?commonjs-exports","size":37,"chunks":["a1ee98a"]},{"name":"../../node_modules/react/cjs/react-jsx-runtime.development.js","size":43835,"chunks":["a1ee98a"]},{"name":"../../node_modules/react/jsx-runtime.js","size":225,"chunks":["a1ee98a"]},{"name":"../../node_modules/react/index.js?commonjs-es-import","size":100,"chunks":["a1ee98a"]},{"name":"../../node_modules/react-icons/lib/iconContext.mjs","size":217,"chunks":["a1ee98a"]},{"name":"../../node_modules/react-icons/lib/iconBase.mjs","size":3929,"chunks":["a1ee98a"]},{"name":"../../node_modules/react-icons/tb/index.mjs","size":732,"chunks":["a1ee98a"]},{"name":"./src/extensions/SuggestionMenu/getMultiColumnSlashMenuItems.tsx","size":2087,"chunks":["a1ee98a"]},{"name":"./src/index.ts","size":0,"chunks":["a1ee98a"]}]}

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@blocknote/xl-multi-column",
+  "homepage": "https://github.com/TypeCellOS/BlockNote",
+  "private": false,
+  "license": "AGPL-3.0 OR PROPRIETARY",
+  "version": "0.19.0",
+  "files": [
+    "dist",
+    "types",
+    "src"
+  ],
+  "keywords": [
+    "react",
+    "javascript",
+    "editor",
+    "typescript",
+    "prosemirror",
+    "wysiwyg",
+    "rich-text-editor",
+    "notion",
+    "yjs",
+    "block-based",
+    "tiptap"
+  ],
+  "description": "A \"Notion-style\" block-based extensible text editor built on top of Prosemirror and Tiptap.",
+  "type": "module",
+  "source": "src/index.ts",
+  "types": "./types/src/index.d.ts",
+  "main": "./dist/blocknote-xl-multi-column.umd.cjs",
+  "module": "./dist/blocknote-xl-multi-column.js",
+  "exports": {
+    ".": {
+      "types": "./types/src/index.d.ts",
+      "import": "./dist/blocknote-xl-multi-column.js",
+      "require": "./dist/blocknote-xl-multi-column.umd.cjs"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint src --max-warnings 0",
+    "test": "vitest",
+    "test-watch": "vitest watch",
+    "clean": "rimraf dist && rimraf types"
+  },
+  "dependencies": {
+    "@blocknote/core": "^0.19.0",
+    "@blocknote/react": "^0.19.0",
+    "@tiptap/core": "^2.7.1",
+    "prosemirror-model": "^1.23.0",
+    "prosemirror-state": "^1.4.3",
+    "prosemirror-tables": "^1.3.7",
+    "prosemirror-transform": "^1.9.0",
+    "prosemirror-view": "^1.33.7",
+    "react-icons": "^5.2.1"
+  },
+  "devDependencies": {
+    "@vitest/ui": "^2.1.4",
+    "eslint": "^8.10.0",
+    "jsdom": "^21.1.0",
+    "prettier": "^2.7.1",
+    "rimraf": "^5.0.5",
+    "rollup-plugin-webpack-stats": "^0.2.2",
+    "typescript": "^5.3.3",
+    "vite": "^5.3.4",
+    "vite-plugin-eslint": "^1.8.1",
+    "vitest": "^2.0.3"
+  },
+  "eslintConfig": {
+    "extends": [
+      "../../.eslintrc.js"
+    ]
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "gitHead": "c48248efc5ceab7962ed6ba39cf8db0cbf3f0d5c"
+}

package/src/blocks/Columns/index.ts

@@ -0,0 +1,15 @@
+import { Column } from "../../pm-nodes/Column.js";
+import { ColumnList } from "../../pm-nodes/ColumnList.js";
+
+import { createBlockSpecFromStronglyTypedTiptapNode } from "@blocknote/core";
+
+export const ColumnBlock = createBlockSpecFromStronglyTypedTiptapNode(Column, {
+  width: {
+    default: 1,
+  },
+});
+
+export const ColumnListBlock = createBlockSpecFromStronglyTypedTiptapNode(
+  ColumnList,
+  {}
+);

package/src/blocks/schema.ts

@@ -0,0 +1,43 @@
+import {
+  BlockNoteSchema,
+  BlockSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "@blocknote/core";
+import { ColumnBlock, ColumnListBlock } from "./Columns/index.js";
+
+export const multiColumnSchema = BlockNoteSchema.create({
+  blockSpecs: {
+    column: ColumnBlock,
+    columnList: ColumnListBlock,
+  },
+});
+
+/**
+ * Adds multi-column support to the given schema.
+ */
+export const withMultiColumn = <
+  B extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  schema: BlockNoteSchema<B, I, S>
+) => {
+  return BlockNoteSchema.create({
+    blockSpecs: {
+      ...schema.blockSpecs,
+      column: ColumnBlock,
+      columnList: ColumnListBlock,
+    },
+    inlineContentSpecs: schema.inlineContentSpecs,
+    styleSpecs: schema.styleSpecs,
+  }) as any as BlockNoteSchema<
+    // typescript needs some help here
+    B & {
+      column: typeof ColumnBlock.config;
+      columnList: typeof ColumnListBlock.config;
+    },
+    I,
+    S
+  >;
+};

package/src/extensions/ColumnResize/ColumnResizeExtension.ts

@@ -0,0 +1,357 @@
+import { BlockNoteEditor, getNodeById } from "@blocknote/core";
+import { Extension } from "@tiptap/core";
+import { Node } from "prosemirror-model";
+import { Plugin, PluginKey, PluginView } from "prosemirror-state";
+import { Decoration, DecorationSet, EditorView } from "prosemirror-view";
+
+type ColumnData = {
+  element: HTMLElement;
+  id: string;
+  node: Node;
+  posBeforeNode: number;
+};
+
+type ColumnDataWithWidths = ColumnData & {
+  widthPx: number;
+  widthPercent: number;
+};
+
+type ColumnDefaultState = {
+  type: "default";
+};
+
+type ColumnHoverState = {
+  type: "hover";
+  leftColumn: ColumnData;
+  rightColumn: ColumnData;
+};
+
+type ColumnResizeState = {
+  type: "resize";
+  startPos: number;
+  leftColumn: ColumnDataWithWidths;
+  rightColumn: ColumnDataWithWidths;
+};
+
+type ColumnState = ColumnDefaultState | ColumnHoverState | ColumnResizeState;
+
+const columnResizePluginKey = new PluginKey<ColumnState>("ColumnResizePlugin");
+
+class ColumnResizePluginView implements PluginView {
+  editor: BlockNoteEditor<any, any, any>;
+  view: EditorView;
+
+  readonly RESIZE_MARGIN_WIDTH_PX = 20;
+  readonly COLUMN_MIN_WIDTH_PERCENT = 0.5;
+
+  constructor(editor: BlockNoteEditor<any, any, any>, view: EditorView) {
+    this.editor = editor;
+    this.view = view;
+
+    this.view.dom.addEventListener("mousedown", this.mouseDownHandler);
+    document.body.addEventListener("mousemove", this.mouseMoveHandler);
+    document.body.addEventListener("mouseup", this.mouseUpHandler);
+  }
+
+  getColumnHoverOrDefaultState = (
+    event: MouseEvent
+  ): ColumnDefaultState | ColumnHoverState => {
+    const target = event.target as HTMLElement;
+
+    // Do nothing if the event target is outside the editor.
+    if (!this.view.dom.contains(target)) {
+      return { type: "default" };
+    }
+
+    const columnElement = target.closest(
+      ".bn-block-column"
+    ) as HTMLElement | null;
+
+    // Do nothing if a column element does not exist in the event target's
+    // ancestors.
+    if (!columnElement) {
+      return { type: "default" };
+    }
+
+    const startPos = event.clientX;
+    const columnElementDOMRect = columnElement.getBoundingClientRect();
+
+    // Whether the cursor is within the width margin to trigger a resize.
+    const cursorElementSide =
+      startPos < columnElementDOMRect.left + this.RESIZE_MARGIN_WIDTH_PX
+        ? "left"
+        : startPos > columnElementDOMRect.right - this.RESIZE_MARGIN_WIDTH_PX
+        ? "right"
+        : "none";
+
+    // The column element before or after the one hovered by the cursor,
+    // depending on which side the cursor is on.
+    const adjacentColumnElement =
+      cursorElementSide === "left"
+        ? columnElement.previousElementSibling
+        : cursorElementSide === "right"
+        ? columnElement.nextElementSibling
+        : undefined;
+
+    // Do nothing if the cursor is not within the resize margin or if there
+    // is no column before or after the one hovered by the cursor, depending
+    // on which side the cursor is on.
+    if (!adjacentColumnElement) {
+      return { type: "default" };
+    }
+
+    const leftColumnElement =
+      cursorElementSide === "left"
+        ? (adjacentColumnElement as HTMLElement)
+        : columnElement;
+
+    const rightColumnElement =
+      cursorElementSide === "left"
+        ? columnElement
+        : (adjacentColumnElement as HTMLElement);
+
+    const leftColumnId = leftColumnElement.getAttribute("data-id")!;
+    const rightColumnId = rightColumnElement.getAttribute("data-id")!;
+
+    const leftColumnNodeAndPos = getNodeById(leftColumnId, this.view.state.doc);
+
+    const rightColumnNodeAndPos = getNodeById(
+      rightColumnId,
+      this.view.state.doc
+    );
+
+    if (
+      !leftColumnNodeAndPos ||
+      !rightColumnNodeAndPos ||
+      !leftColumnNodeAndPos.posBeforeNode
+    ) {
+      throw new Error("Column not found");
+    }
+
+    return {
+      type: "hover",
+      leftColumn: {
+        element: leftColumnElement,
+        id: leftColumnId,
+        ...leftColumnNodeAndPos,
+      },
+      rightColumn: {
+        element: rightColumnElement,
+        id: rightColumnId,
+        ...rightColumnNodeAndPos,
+      },
+    };
+  };
+
+  // When the user mouses down near the boundary between two columns, we
+  // want to set the plugin state to resize, so the columns can be resized
+  // by moving the mouse.
+  mouseDownHandler = (event: MouseEvent) => {
+    let newState: ColumnState = this.getColumnHoverOrDefaultState(event);
+    if (newState.type === "default") {
+      return;
+    }
+
+    event.preventDefault();
+
+    const startPos = event.clientX;
+
+    const leftColumnWidthPx =
+      newState.leftColumn.element.getBoundingClientRect().width;
+    const rightColumnWidthPx =
+      newState.rightColumn.element.getBoundingClientRect().width;
+
+    const leftColumnWidthPercent = newState.leftColumn.node.attrs
+      .width as number;
+    const rightColumnWidthPercent = newState.rightColumn.node.attrs
+      .width as number;
+
+    newState = {
+      type: "resize",
+      startPos,
+      leftColumn: {
+        ...newState.leftColumn,
+        widthPx: leftColumnWidthPx,
+        widthPercent: leftColumnWidthPercent,
+      },
+      rightColumn: {
+        ...newState.rightColumn,
+        widthPx: rightColumnWidthPx,
+        widthPercent: rightColumnWidthPercent,
+      },
+    };
+
+    this.view.dispatch(
+      this.view.state.tr.setMeta(columnResizePluginKey, newState)
+    );
+
+    this.editor.sideMenu.freezeMenu();
+  };
+
+  // If the plugin isn't in a resize state, we want to update it to either a
+  // hover state if the mouse is near the boundary between two columns, or
+  // default otherwise. If the plugin is in a resize state, we want to
+  // update the column widths based on the horizontal mouse movement.
+  mouseMoveHandler = (event: MouseEvent) => {
+    const pluginState = columnResizePluginKey.getState(this.view.state);
+    if (!pluginState) {
+      return;
+    }
+
+    // If the user isn't currently resizing columns, we want to update the
+    // plugin state to maybe show or hide the resize border between columns.
+    if (pluginState.type !== "resize") {
+      const newState = this.getColumnHoverOrDefaultState(event);
+
+      // Prevent unnecessary state updates (when the state before and after
+      // is the same).
+      const bothDefaultStates =
+        pluginState.type === "default" && newState.type === "default";
+      const sameColumnIds =
+        pluginState.type !== "default" &&
+        newState.type !== "default" &&
+        pluginState.leftColumn.id === newState.leftColumn.id &&
+        pluginState.rightColumn.id === newState.rightColumn.id;
+      if (bothDefaultStates || sameColumnIds) {
+        return;
+      }
+
+      // Since the resize bar overlaps the side menu, we don't want to show it
+      // if the side menu is already open.
+      if (newState.type === "hover" && this.editor.sideMenu.view?.state?.show) {
+        return;
+      }
+
+      // Update the plugin state.
+      this.view.dispatch(
+        this.view.state.tr.setMeta(columnResizePluginKey, newState)
+      );
+
+      return;
+    }
+
+    const widthChangePx = event.clientX - pluginState.startPos;
+    // We need to scale the width change by the left column's width in
+    // percent, otherwise the rate at which the resizing happens will change
+    // based on the width of the left column.
+    const scaledWidthChangePx =
+      widthChangePx * pluginState.leftColumn.widthPercent;
+    const widthChangePercent =
+      (pluginState.leftColumn.widthPx + scaledWidthChangePx) /
+        pluginState.leftColumn.widthPx -
+      1;
+
+    let newLeftColumnWidth =
+      pluginState.leftColumn.widthPercent + widthChangePercent;
+    let newRightColumnWidth =
+      pluginState.rightColumn.widthPercent - widthChangePercent;
+
+    // Ensures that the column widths do not go below the minimum width.
+    // There is no maximum width, the user can resize the columns as much as
+    // they want provided the others don't go below the minimum width.
+    if (newLeftColumnWidth < this.COLUMN_MIN_WIDTH_PERCENT) {
+      newRightColumnWidth -= this.COLUMN_MIN_WIDTH_PERCENT - newLeftColumnWidth;
+      newLeftColumnWidth = this.COLUMN_MIN_WIDTH_PERCENT;
+    } else if (newRightColumnWidth < this.COLUMN_MIN_WIDTH_PERCENT) {
+      newLeftColumnWidth -= this.COLUMN_MIN_WIDTH_PERCENT - newRightColumnWidth;
+      newRightColumnWidth = this.COLUMN_MIN_WIDTH_PERCENT;
+    }
+
+    // possible improvement: only dispatch on mouse up, and use a different way
+    // to update the column widths while dragging.
+    // this prevents a lot of document updates
+    this.view.dispatch(
+      this.view.state.tr
+        .setNodeAttribute(
+          pluginState.leftColumn.posBeforeNode,
+          "width",
+          newLeftColumnWidth
+        )
+        .setNodeAttribute(
+          pluginState.rightColumn.posBeforeNode,
+          "width",
+          newRightColumnWidth
+        )
+        .setMeta("addToHistory", false)
+    );
+  };
+
+  // If the plugin is in a resize state, we want to revert it to a default
+  // or hover, depending on where the mouse cursor is, when the user
+  // releases the mouse button.
+  mouseUpHandler = (event: MouseEvent) => {
+    const pluginState = columnResizePluginKey.getState(this.view.state);
+    if (!pluginState || pluginState.type !== "resize") {
+      return;
+    }
+
+    const newState = this.getColumnHoverOrDefaultState(event);
+
+    // Revert plugin state to default or hover, depending on where the mouse
+    // cursor is.
+    this.view.dispatch(
+      this.view.state.tr.setMeta(columnResizePluginKey, newState)
+    );
+
+    this.editor.sideMenu.unfreezeMenu();
+  };
+
+  // This is a required method for PluginView, so we get a type error if we
+  // don't implement it.
+  update: undefined;
+}
+
+const createColumnResizePlugin = (editor: BlockNoteEditor<any, any, any>) =>
+  new Plugin({
+    key: columnResizePluginKey,
+    props: {
+      // This adds a border between the columns when the user is
+      // resizing them or when the cursor is near their boundary.
+      decorations: (state) => {
+        const pluginState = columnResizePluginKey.getState(state);
+        if (!pluginState || pluginState.type === "default") {
+          return DecorationSet.empty;
+        }
+
+        return DecorationSet.create(state.doc, [
+          Decoration.node(
+            pluginState.leftColumn.posBeforeNode,
+            pluginState.leftColumn.posBeforeNode +
+              pluginState.leftColumn.node.nodeSize,
+            {
+              style: "box-shadow: 4px 0 0 #ccc; cursor: col-resize",
+            }
+          ),
+          Decoration.node(
+            pluginState.rightColumn.posBeforeNode,
+            pluginState.rightColumn.posBeforeNode +
+              pluginState.rightColumn.node.nodeSize,
+            {
+              style: "cursor: col-resize",
+            }
+          ),
+        ]);
+      },
+    },
+    state: {
+      init: () => ({ type: "default" } as ColumnState),
+      apply: (tr, oldPluginState) => {
+        const newPluginState = tr.getMeta(columnResizePluginKey) as
+          | ColumnState
+          | undefined;
+
+        return newPluginState === undefined ? oldPluginState : newPluginState;
+      },
+    },
+    view: (view) => new ColumnResizePluginView(editor, view),
+  });
+
+export const createColumnResizeExtension = (
+  editor: BlockNoteEditor<any, any, any>
+) =>
+  Extension.create({
+    name: "columnResize",
+    addProseMirrorPlugins() {
+      return [createColumnResizePlugin(editor)];
+    },
+  });