✨(frontend) add multi columns support for editor

We add multi columns support for editor,
now you can add columns to your document.
Works with export.
📄AGPL feature.

Author: AntoLC

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to
 - ✨(backend) allow masking documents from the list view #1171
 - ✨(frontend) subdocs can manage link reach #1190
 - ✨(frontend) add duplicate action to doc tree #1175
+- ✨(frontend) add multi columns support for editor #1219
 
 ### Changed
 

docs/env.md

@@ -136,9 +136,10 @@ NODE_ENV=production NEXT_PUBLIC_PUBLISH_AS_MIT=false yarn build
 
 Packages with licences incompatible with the MIT licence:
 * `xl-docx-exporter`: [AGPL-3.0](https://github.com/TypeCellOS/BlockNote/blob/main/packages/xl-docx-exporter/LICENSE), 
-* `xl-pdf-exporter`: [AGPL-3.0](https://github.com/TypeCellOS/BlockNote/blob/main/packages/xl-pdf-exporter/LICENSE) 
+* `xl-pdf-exporter`: [AGPL-3.0](https://github.com/TypeCellOS/BlockNote/blob/main/packages/xl-pdf-exporter/LICENSE), 
+* `xl-multi-column`: [AGPL-3.0](https://github.com/TypeCellOS/BlockNote/blob/main/packages/xl-multi-column/LICENSE). 
 
 In `.env.development`, `PUBLISH_AS_MIT` is set to `false`, allowing developers to test Docs with all its features.
 
-⚠️ If you run Docs in production with `PUBLISH_AS_MIT` set to `false` make sure you fulfill your [BlockNote licensing](https://github.com/TypeCellOS/BlockNote/blob/main/packages/xl-pdf-exporter/LICENSE) or [subscription](https://www.blocknotejs.org/about#partner-with-us) obligations.
+⚠️ If you run Docs in production with `PUBLISH_AS_MIT` set to `false` make sure you fulfill your BlockNote licensing or [subscription](https://www.blocknotejs.org/about#partner-with-us) obligations.
 

src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts

@@ -346,4 +346,69 @@ test.describe('Doc Export', () => {
     const pdfData = await pdf(pdfBuffer);
     expect(pdfData.text).toContain('Hello World');
   });
+
+  test('it exports the doc with multi columns', async ({
+    page,
+    browserName,
+  }) => {
+    const [randomDoc] = await createDoc(
+      page,
+      'doc-multi-columns',
+      browserName,
+      1,
+    );
+
+    await page.locator('.bn-block-outer').last().fill('/');
+
+    await page.getByText('Three Columns', { exact: true }).click();
+
+    await page.locator('.bn-block-column').first().fill('Column 1');
+    await page.locator('.bn-block-column').nth(1).fill('Column 2');
+    await page.locator('.bn-block-column').last().fill('Column 3');
+
+    expect(await page.locator('.bn-block-column').count()).toBe(3);
+    await expect(
+      page.locator('.bn-block-column[data-node-type="column"]').first(),
+    ).toHaveText('Column 1');
+    await expect(
+      page.locator('.bn-block-column[data-node-type="column"]').nth(1),
+    ).toHaveText('Column 2');
+    await expect(
+      page.locator('.bn-block-column[data-node-type="column"]').last(),
+    ).toHaveText('Column 3');
+
+    await page
+      .getByRole('button', {
+        name: 'download',
+        exact: true,
+      })
+      .click();
+
+    await expect(
+      page.getByRole('button', {
+        name: 'Download',
+        exact: true,
+      }),
+    ).toBeVisible();
+
+    const downloadPromise = page.waitForEvent('download', (download) => {
+      return download.suggestedFilename().includes(`${randomDoc}.pdf`);
+    });
+
+    void page
+      .getByRole('button', {
+        name: 'Download',
+        exact: true,
+      })
+      .click();
+
+    const download = await downloadPromise;
+    expect(download.suggestedFilename()).toBe(`${randomDoc}.pdf`);
+
+    const pdfBuffer = await cs.toBuffer(await download.createReadStream());
+    const pdfData = await pdf(pdfBuffer);
+    expect(pdfData.text).toContain('Column 1');
+    expect(pdfData.text).toContain('Column 2');
+    expect(pdfData.text).toContain('Column 3');
+  });
 });

src/frontend/apps/impress/package.json

@@ -21,6 +21,7 @@
     "@blocknote/mantine": "0.34.0",
     "@blocknote/react": "0.34.0",
     "@blocknote/xl-docx-exporter": "0.34.0",
+    "@blocknote/xl-multi-column": "0.34.0",
     "@blocknote/xl-pdf-exporter": "0.34.0",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/modifiers": "9.0.0",

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx

@@ -1,6 +1,7 @@
 import { codeBlock } from '@blocknote/code-block';
 import {
   BlockNoteSchema,
+  BlockSchemaFromSpecs,
   defaultBlockSpecs,
   withPageBreak,
 } from '@blocknote/core';
@@ -28,15 +29,24 @@ import { randomColor } from '../utils';
 import { BlockNoteSuggestionMenu } from './BlockNoteSuggestionMenu';
 import { BlockNoteToolbar } from './BlockNoteToolBar/BlockNoteToolbar';
 import { CalloutBlock, DividerBlock } from './custom-blocks';
-
-export const blockNoteSchema = withPageBreak(
-  BlockNoteSchema.create({
-    blockSpecs: {
-      ...defaultBlockSpecs,
-      callout: CalloutBlock,
-      divider: DividerBlock,
-    },
-  }),
+import XLMultiColumn from './xl-multi-column';
+
+const multiColumnDropCursor = XLMultiColumn?.multiColumnDropCursor;
+const multiColumnLocales = XLMultiColumn?.locales;
+const withMultiColumn =
+  XLMultiColumn?.withMultiColumn ||
+  ((schema: BlockSchemaFromSpecs<typeof defaultBlockSpecs>) => schema);
+
+export const blockNoteSchema = withMultiColumn(
+  withPageBreak(
+    BlockNoteSchema.create({
+      blockSpecs: {
+        ...defaultBlockSpecs,
+        callout: CalloutBlock,
+        divider: DividerBlock,
+      },
+    }),
+  ),
 );
 
 interface BlockNoteEditorProps {
@@ -116,7 +126,11 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
         },
         showCursorLabels: showCursorLabels as 'always' | 'activity',
       },
-      dictionary: locales[lang as keyof typeof locales],
+      dictionary: {
+        ...locales[lang as keyof typeof locales],
+        multi_column:
+          multiColumnLocales?.[lang as keyof typeof multiColumnLocales],
+      },
       tables: {
         splitCells: true,
         cellBackgroundColor: true,
@@ -125,6 +139,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
       },
       uploadFile,
       schema: blockNoteSchema,
+      dropCursor: multiColumnDropCursor,
     },
     [collabName, lang, provider, uploadFile],
   );

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteSuggestionMenu.tsx

@@ -15,6 +15,10 @@ import {
   getCalloutReactSlashMenuItems,
   getDividerReactSlashMenuItems,
 } from './custom-blocks';
+import XLMultiColumn from './xl-multi-column';
+
+const getMultiColumnSlashMenuItems =
+  XLMultiColumn?.getMultiColumnSlashMenuItems;
 
 export const BlockNoteSuggestionMenu = () => {
   const editor = useBlockNoteEditor<DocsBlockSchema>();
@@ -27,8 +31,9 @@ export const BlockNoteSuggestionMenu = () => {
         filterSuggestionItems(
           combineByGroup(
             getDefaultReactSlashMenuItems(editor),
-            getPageBreakReactSlashMenuItems(editor),
             getCalloutReactSlashMenuItems(editor, t, basicBlocksName),
+            getMultiColumnSlashMenuItems?.(editor) || [],
+            getPageBreakReactSlashMenuItems(editor),
             getDividerReactSlashMenuItems(editor, t, basicBlocksName),
           ),
           query,

src/frontend/apps/impress/src/features/docs/doc-editor/components/xl-multi-column/index.ts

@@ -0,0 +1,13 @@
+/**
+ * To import XL modules you must import from the index file.
+ * This is to ensure that the XL modules are only loaded when
+ * the application is not published as MIT.
+ */
+import * as XLMultiColumn from '@blocknote/xl-multi-column';
+
+let modulesXL = undefined;
+if (process.env.NEXT_PUBLIC_PUBLISH_AS_MIT === 'false') {
+  modulesXL = XLMultiColumn;
+}
+
+export default modulesXL as typeof XLMultiColumn;