@blocknote/xl-multi-column 0.19.0

package/src/test/conversions/nodeConversion.test.ts

@@ -0,0 +1,84 @@
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+
+import {
+  BlockNoteEditor,
+  PartialBlock,
+  UniqueID,
+  blockToNode,
+  nodeToBlock,
+  partialBlockToBlockForTesting,
+} from "@blocknote/core";
+
+import { multiColumnSchemaTestCases } from "./testCases.js";
+
+function addIdsToBlock(block: PartialBlock<any, any, any>) {
+  if (!block.id) {
+    block.id = UniqueID.options.generateID();
+  }
+  for (const child of block.children || []) {
+    addIdsToBlock(child);
+  }
+}
+
+function validateConversion(
+  block: PartialBlock<any, any, any>,
+  editor: BlockNoteEditor<any, any, any>
+) {
+  addIdsToBlock(block);
+  const node = blockToNode(block, editor.pmSchema, editor.schema.styleSchema);
+
+  expect(node).toMatchSnapshot();
+
+  const outputBlock = nodeToBlock(
+    node,
+    editor.schema.blockSchema,
+    editor.schema.inlineContentSchema,
+    editor.schema.styleSchema
+  );
+
+  const fullOriginalBlock = partialBlockToBlockForTesting(
+    editor.schema.blockSchema,
+    block
+  );
+
+  expect(outputBlock).toStrictEqual(fullOriginalBlock);
+}
+
+const testCases = [multiColumnSchemaTestCases];
+
+describe("Test BlockNote-Prosemirror conversion", () => {
+  for (const testCase of testCases) {
+    describe("Case: " + testCase.name, () => {
+      let editor: BlockNoteEditor<any, any, any>;
+      const div = document.createElement("div");
+
+      beforeEach(() => {
+        editor = testCase.createEditor();
+        // Note that we don't necessarily need to mount a root
+        // Currently, we do mount to a root so that it reflects the "production" use-case more closely.
+
+        // However, it would be nice to increased converage and share the same set of tests for these cases:
+        // - does render to a root
+        // - does not render to a root
+        // - runs in server (jsdom) environment using server-util
+        editor.mount(div);
+      });
+
+      afterEach(() => {
+        editor.mount(undefined);
+        editor._tiptapEditor.destroy();
+        editor = undefined as any;
+
+        delete (window as Window & { __TEST_OPTIONS?: any }).__TEST_OPTIONS;
+      });
+
+      for (const document of testCase.documents) {
+        // eslint-disable-next-line no-loop-func
+        it("Convert " + document.name + " to/from prosemirror", () => {
+          // NOTE: only converts first block
+          validateConversion(document.blocks[0], editor);
+        });
+      }
+    });
+  }
+});

package/src/test/conversions/testCases.ts

@@ -0,0 +1,54 @@
+import { BlockNoteEditor, EditorTestCases } from "@blocknote/core";
+
+import { testEditorSchema } from "../setupTestEnv.js";
+
+export const multiColumnSchemaTestCases: EditorTestCases<
+  typeof testEditorSchema.blockSchema,
+  typeof testEditorSchema.inlineContentSchema,
+  typeof testEditorSchema.styleSchema
+> = {
+  name: "multi-column-schema",
+  createEditor: () => {
+    return BlockNoteEditor.create({
+      schema: testEditorSchema,
+    });
+  },
+  documents: [
+    {
+      name: "multi-column",
+      blocks: [
+        {
+          type: "columnList",
+          children: [
+            {
+              type: "column",
+              children: [
+                {
+                  type: "paragraph",
+                  content: "Column Paragraph 0",
+                },
+                {
+                  type: "paragraph",
+                  content: "Column Paragraph 1",
+                },
+              ],
+            },
+            {
+              type: "column",
+              children: [
+                {
+                  type: "paragraph",
+                  content: "Column Paragraph 2",
+                },
+                {
+                  type: "paragraph",
+                  content: "Column Paragraph 3",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};

package/src/test/setupTestEnv.ts

@@ -0,0 +1,99 @@
+import {
+  BlockNoteEditor,
+  BlockNoteSchema,
+  PartialBlock,
+} from "@blocknote/core";
+import { afterAll, beforeAll, beforeEach } from "vitest";
+
+import { withMultiColumn } from "../blocks/schema.js";
+
+export const testEditorSchema = withMultiColumn(BlockNoteSchema.create());
+
+export function setupTestEnv() {
+  let editor: BlockNoteEditor<
+    typeof testEditorSchema.blockSchema,
+    typeof testEditorSchema.inlineContentSchema,
+    typeof testEditorSchema.styleSchema
+  >;
+  const div = document.createElement("div");
+
+  beforeAll(() => {
+    editor = BlockNoteEditor.create({
+      schema: testEditorSchema,
+    });
+    editor.mount(div);
+  });
+
+  afterAll(() => {
+    editor.mount(undefined);
+    editor._tiptapEditor.destroy();
+    editor = undefined as any;
+  });
+
+  beforeEach(() => {
+    editor.replaceBlocks(editor.document, testDocument);
+  });
+
+  return () => editor;
+}
+
+const testDocument: PartialBlock<
+  typeof testEditorSchema.blockSchema,
+  typeof testEditorSchema.inlineContentSchema,
+  typeof testEditorSchema.styleSchema
+>[] = [
+  {
+    id: "paragraph-0",
+    type: "paragraph",
+    content: "Paragraph 0",
+    children: [
+      {
+        id: "nested-paragraph-0",
+        type: "paragraph",
+        content: "Nested Paragraph 0",
+      },
+    ],
+  },
+  {
+    id: "column-list-0",
+    type: "columnList",
+    children: [
+      {
+        id: "column-0",
+        type: "column",
+        children: [
+          {
+            id: "column-paragraph-0",
+            type: "paragraph",
+            content: "Column Paragraph 0",
+          },
+          {
+            id: "column-paragraph-1",
+            type: "paragraph",
+            content: "Column Paragraph 1",
+          },
+        ],
+      },
+      {
+        id: "column-1",
+        type: "column",
+        children: [
+          {
+            id: "column-paragraph-2",
+            type: "paragraph",
+            content: "Column Paragraph 2",
+          },
+          {
+            id: "column-paragraph-3",
+            type: "paragraph",
+            content: "Column Paragraph 3",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: "trailing-paragraph",
+    type: "paragraph",
+  },
+];

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/types/src/blocks/Columns/index.d.ts

@@ -0,0 +1,32 @@
+export declare const ColumnBlock: {
+    config: {
+        type: "column";
+        content: "none";
+        propSchema: {
+            width: {
+                default: number;
+            };
+        };
+    };
+    implementation: import("@blocknote/core").TiptapBlockImplementation<{
+        type: "column";
+        content: "none";
+        propSchema: {
+            width: {
+                default: number;
+            };
+        };
+    }, any, import("@blocknote/core").InlineContentSchema, import("@blocknote/core").StyleSchema>;
+};
+export declare const ColumnListBlock: {
+    config: {
+        type: "columnList";
+        content: "none";
+        propSchema: {};
+    };
+    implementation: import("@blocknote/core").TiptapBlockImplementation<{
+        type: "columnList";
+        content: "none";
+        propSchema: {};
+    }, any, import("@blocknote/core").InlineContentSchema, import("@blocknote/core").StyleSchema>;
+};

package/types/src/blocks/schema.d.ts

@@ -0,0 +1,102 @@
+import { BlockNoteSchema, InlineContentSchema, StyleSchema } from "@blocknote/core";
+import { ColumnBlock, ColumnListBlock } from "./Columns/index.js";
+export declare const multiColumnSchema: BlockNoteSchema<import("@blocknote/core").BlockSchemaFromSpecs<{
+    column: {
+        config: {
+            type: "column";
+            content: "none";
+            propSchema: {
+                width: {
+                    default: number;
+                };
+            };
+        };
+        implementation: import("@blocknote/core").TiptapBlockImplementation<{
+            type: "column";
+            content: "none";
+            propSchema: {
+                width: {
+                    default: number;
+                };
+            };
+        }, any, InlineContentSchema, StyleSchema>;
+    };
+    columnList: {
+        config: {
+            type: "columnList";
+            content: "none";
+            propSchema: {};
+        };
+        implementation: import("@blocknote/core").TiptapBlockImplementation<{
+            type: "columnList";
+            content: "none";
+            propSchema: {};
+        }, any, InlineContentSchema, StyleSchema>;
+    };
+}>, import("@blocknote/core").InlineContentSchemaFromSpecs<{
+    text: {
+        config: "text";
+        implementation: any;
+    };
+    link: {
+        config: "link";
+        implementation: any;
+    };
+}>, import("@blocknote/core").StyleSchemaFromSpecs<{
+    bold: {
+        config: {
+            type: string;
+            propSchema: "boolean";
+        };
+        implementation: import("@blocknote/core").StyleImplementation;
+    };
+    italic: {
+        config: {
+            type: string;
+            propSchema: "boolean";
+        };
+        implementation: import("@blocknote/core").StyleImplementation;
+    };
+    underline: {
+        config: {
+            type: string;
+            propSchema: "boolean";
+        };
+        implementation: import("@blocknote/core").StyleImplementation;
+    };
+    strike: {
+        config: {
+            type: string;
+            propSchema: "boolean";
+        };
+        implementation: import("@blocknote/core").StyleImplementation;
+    };
+    code: {
+        config: {
+            type: string;
+            propSchema: "boolean";
+        };
+        implementation: import("@blocknote/core").StyleImplementation;
+    };
+    textColor: {
+        config: {
+            type: string;
+            propSchema: "string";
+        };
+        implementation: import("@blocknote/core").StyleImplementation;
+    };
+    backgroundColor: {
+        config: {
+            type: string;
+            propSchema: "string";
+        };
+        implementation: import("@blocknote/core").StyleImplementation;
+    };
+}>>;
+/**
+ * Adds multi-column support to the given schema.
+ */
+export declare const withMultiColumn: <B extends Record<string, import("@blocknote/core").BlockConfig>, I extends InlineContentSchema, S extends StyleSchema>(schema: BlockNoteSchema<B, I, S>) => BlockNoteSchema<B & {
+    column: typeof ColumnBlock.config;
+    columnList: typeof ColumnListBlock.config;
+}, I, S>;

package/types/src/extensions/ColumnResize/ColumnResizeExtension.d.ts

@@ -0,0 +1,3 @@
+import { BlockNoteEditor } from "@blocknote/core";
+import { Extension } from "@tiptap/core";
+export declare const createColumnResizeExtension: (editor: BlockNoteEditor<any, any, any>) => Extension<any, any>;

package/types/src/extensions/DropCursor/MultiColumnDropCursorPlugin.d.ts

@@ -0,0 +1,11 @@
+import type { BlockNoteEditor } from "@blocknote/core";
+import { Plugin } from "prosemirror-state";
+interface DropCursorOptions {
+    color?: string | false;
+    width?: number;
+    class?: string;
+}
+export declare function multiColumnDropCursor(options: DropCursorOptions & {
+    editor: BlockNoteEditor<any, any, any>;
+}): Plugin;
+export {};

package/types/src/extensions/SuggestionMenu/getMultiColumnSlashMenuItems.d.ts

@@ -0,0 +1,5 @@
+import { BlockNoteEditor, BlockSchema, InlineContentSchema, StyleSchema } from "@blocknote/core";
+import { DefaultReactSuggestionItem } from "@blocknote/react";
+import { multiColumnSchema } from "../../blocks/schema.js";
+export declare function checkMultiColumnBlocksInSchema<I extends InlineContentSchema, S extends StyleSchema>(editor: BlockNoteEditor<any, I, S>): editor is BlockNoteEditor<typeof multiColumnSchema.blockSchema, I, S>;
+export declare function getMultiColumnSlashMenuItems<BSchema extends BlockSchema, I extends InlineContentSchema, S extends StyleSchema>(editor: BlockNoteEditor<BSchema, I, S>): Omit<DefaultReactSuggestionItem, "key">[];

package/types/src/i18n/dictionary.d.ts

@@ -0,0 +1,19 @@
+import type { en } from "./locales/index.js";
+import { BlockNoteEditor } from "@blocknote/core";
+export declare function getMultiColumnDictionary(editor: BlockNoteEditor<any, any, any>): {
+    slash_menu: {
+        two_columns: {
+            title: string;
+            subtext: string;
+            aliases: string[];
+            group: string;
+        };
+        three_columns: {
+            title: string;
+            subtext: string;
+            aliases: string[];
+            group: string;
+        };
+    };
+};
+export type MultiColumnDictionary = typeof en;

package/types/src/i18n/locales/ar.d.ts

@@ -0,0 +1,2 @@
+import type { MultiColumnDictionary } from "../dictionary.js";
+export declare const ar: MultiColumnDictionary;

package/types/src/i18n/locales/de.d.ts

@@ -0,0 +1,2 @@
+import type { MultiColumnDictionary } from "../dictionary.js";
+export declare const de: MultiColumnDictionary;

package/types/src/i18n/locales/en.d.ts

@@ -0,0 +1,16 @@
+export declare const en: {
+    slash_menu: {
+        two_columns: {
+            title: string;
+            subtext: string;
+            aliases: string[];
+            group: string;
+        };
+        three_columns: {
+            title: string;
+            subtext: string;
+            aliases: string[];
+            group: string;
+        };
+    };
+};

package/types/src/i18n/locales/es.d.ts

@@ -0,0 +1,2 @@
+import type { MultiColumnDictionary } from "../dictionary.js";
+export declare const es: MultiColumnDictionary;

package/types/src/i18n/locales/fr.d.ts

@@ -0,0 +1,2 @@
+import type { MultiColumnDictionary } from "../dictionary.js";
+export declare const fr: MultiColumnDictionary;

package/types/src/i18n/locales/hr.d.ts

@@ -0,0 +1,2 @@
+import type { MultiColumnDictionary } from "../dictionary.js";
+export declare const hr: MultiColumnDictionary;

package/types/src/i18n/locales/index.d.ts

@@ -0,0 +1,15 @@
+export * from "./ar.js";
+export * from "./de.js";
+export * from "./en.js";
+export * from "./es.js";
+export * from "./fr.js";
+export * from "./hr.js";
+export * from "./is.js";
+export * from "./ja.js";
+export * from "./ko.js";
+export * from "./nl.js";
+export * from "./pl.js";
+export * from "./pt.js";
+export * from "./ru.js";
+export * from "./vi.js";
+export * from "./zh.js";

package/types/src/i18n/locales/is.d.ts

@@ -0,0 +1,2 @@
+import type { MultiColumnDictionary } from "../dictionary.js";
+export declare const is: MultiColumnDictionary;

package/types/src/i18n/locales/ja.d.ts

@@ -0,0 +1,2 @@
+import type { MultiColumnDictionary } from "../dictionary.js";
+export declare const ja: MultiColumnDictionary;

package/types/src/i18n/locales/ko.d.ts

@@ -0,0 +1,2 @@
+import type { MultiColumnDictionary } from "../dictionary.js";
+export declare const ko: MultiColumnDictionary;

package/types/src/i18n/locales/nl.d.ts

@@ -0,0 +1,2 @@
+import type { MultiColumnDictionary } from "../dictionary.js";
+export declare const nl: MultiColumnDictionary;

package/types/src/i18n/locales/pl.d.ts

@@ -0,0 +1,2 @@
+import type { MultiColumnDictionary } from "../dictionary.js";
+export declare const pl: MultiColumnDictionary;

package/types/src/i18n/locales/pt.d.ts

@@ -0,0 +1,2 @@
+import type { MultiColumnDictionary } from "../dictionary.js";
+export declare const pt: MultiColumnDictionary;

package/types/src/i18n/locales/ru.d.ts

@@ -0,0 +1,2 @@
+import type { MultiColumnDictionary } from "../dictionary.js";
+export declare const ru: MultiColumnDictionary;

package/types/src/i18n/locales/vi.d.ts

@@ -0,0 +1,2 @@
+import type { MultiColumnDictionary } from "../dictionary.js";
+export declare const vi: MultiColumnDictionary;

package/types/src/i18n/locales/zh.d.ts

@@ -0,0 +1,2 @@
+import type { MultiColumnDictionary } from "../dictionary.js";
+export declare const zh: MultiColumnDictionary;

package/types/src/index.d.ts

@@ -0,0 +1,7 @@
+import * as locales from "./i18n/locales/index.js";
+export { locales };
+export * from "./i18n/dictionary.js";
+export * from "./blocks/Columns/index.js";
+export * from "./blocks/schema.js";
+export * from "./extensions/DropCursor/MultiColumnDropCursorPlugin.js";
+export * from "./extensions/SuggestionMenu/getMultiColumnSlashMenuItems.js";

package/types/src/pm-nodes/Column.d.ts

@@ -0,0 +1,6 @@
+export declare const Column: import("@tiptap/core").Node<any, any> & {
+    name: "column";
+    config: {
+        content: "blockContainer+";
+    };
+};

package/types/src/pm-nodes/ColumnList.d.ts

@@ -0,0 +1,6 @@
+export declare const ColumnList: import("@tiptap/core").Node<any, any> & {
+    name: "columnList";
+    config: {
+        content: "column column+";
+    };
+};

package/types/src/test/commands/insertBlocks.test.d.ts

@@ -0,0 +1 @@
+export {};

package/types/src/test/commands/textCursorPosition.test.d.ts

@@ -0,0 +1 @@
+export {};

package/types/src/test/commands/updateBlock.test.d.ts

@@ -0,0 +1 @@
+export {};

package/types/src/test/conversions/htmlConversion.test.d.ts

@@ -0,0 +1 @@
+export {};

package/types/src/test/conversions/nodeConversion.test.d.ts

@@ -0,0 +1 @@
+export {};

package/types/src/test/conversions/testCases.d.ts

@@ -0,0 +1,3 @@
+import { EditorTestCases } from "@blocknote/core";
+import { testEditorSchema } from "../setupTestEnv.js";
+export declare const multiColumnSchemaTestCases: EditorTestCases<typeof testEditorSchema.blockSchema, typeof testEditorSchema.inlineContentSchema, typeof testEditorSchema.styleSchema>;