@blocknote/xl-multi-column 0.19.0

package/src/i18n/locales/hr.ts

@@ -0,0 +1,18 @@
+import type { MultiColumnDictionary } from "../dictionary.js";
+
+export const hr: MultiColumnDictionary = {
+  slash_menu: {
+    two_columns: {
+      title: "Dva Stupca",
+      subtext: "Dva stupca jedan pored drugog",
+      aliases: ["stupci", "redak", "podijeli"],
+      group: "Osnovni blokovi",
+    },
+    three_columns: {
+      title: "Tri Stupca",
+      subtext: "Tri stupca jedan pored drugog",
+      aliases: ["stupci", "redak", "podijeli"],
+      group: "Osnovni blokovi",
+    },
+  },
+};

package/src/i18n/locales/index.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/src/i18n/locales/is.ts

@@ -0,0 +1,18 @@
+import type { MultiColumnDictionary } from "../dictionary.js";
+
+export const is: MultiColumnDictionary = {
+  slash_menu: {
+    two_columns: {
+      title: "Tvær Dálkar",
+      subtext: "Tvær dálkar hlið við hlið",
+      aliases: ["dálkar", "röð", "skipta"],
+      group: "Grunnblokkar",
+    },
+    three_columns: {
+      title: "Þrír Dálkar",
+      subtext: "Þrír dálkar hlið við hlið",
+      aliases: ["dálkar", "röð", "skipta"],
+      group: "Grunnblokkar",
+    },
+  },
+};

package/src/i18n/locales/ja.ts

@@ -0,0 +1,18 @@
+import type { MultiColumnDictionary } from "../dictionary.js";
+
+export const ja: MultiColumnDictionary = {
+  slash_menu: {
+    two_columns: {
+      title: "二列",
+      subtext: "二列並んで",
+      aliases: ["列", "行", "分割"],
+      group: "基本ブロック",
+    },
+    three_columns: {
+      title: "三列",
+      subtext: "三列並んで",
+      aliases: ["列", "行", "分割"],
+      group: "基本ブロック",
+    },
+  },
+};

package/src/i18n/locales/ko.ts

@@ -0,0 +1,18 @@
+import type { MultiColumnDictionary } from "../dictionary.js";
+
+export const ko: MultiColumnDictionary = {
+  slash_menu: {
+    two_columns: {
+      title: "두 열",
+      subtext: "두 열 나란히",
+      aliases: ["열", "행", "분할"],
+      group: "기본 블록",
+    },
+    three_columns: {
+      title: "세 열",
+      subtext: "세 열 나란히",
+      aliases: ["열", "행", "분할"],
+      group: "기본 블록",
+    },
+  },
+};

package/src/i18n/locales/nl.ts

@@ -0,0 +1,18 @@
+import type { MultiColumnDictionary } from "../dictionary.js";
+
+export const nl: MultiColumnDictionary = {
+  slash_menu: {
+    two_columns: {
+      title: "Twee Kolommen",
+      subtext: "Twee kolommen naast elkaar",
+      aliases: ["kolommen", "rij", "verdelen"],
+      group: "Basisblokken",
+    },
+    three_columns: {
+      title: "Drie Kolommen",
+      subtext: "Drie kolommen naast elkaar",
+      aliases: ["kolommen", "rij", "verdelen"],
+      group: "Basisblokken",
+    },
+  },
+};

package/src/i18n/locales/pl.ts

@@ -0,0 +1,18 @@
+import type { MultiColumnDictionary } from "../dictionary.js";
+
+export const pl: MultiColumnDictionary = {
+  slash_menu: {
+    two_columns: {
+      title: "Dwie Kolumny",
+      subtext: "Dwie kolumny obok siebie",
+      aliases: ["kolumny", "rząd", "podzielić"],
+      group: "Podstawowe bloki",
+    },
+    three_columns: {
+      title: "Trzy Kolumny",
+      subtext: "Trzy kolumny obok siebie",
+      aliases: ["kolumny", "rząd", "podzielić"],
+      group: "Podstawowe bloki",
+    },
+  },
+};

package/src/i18n/locales/pt.ts

@@ -0,0 +1,18 @@
+import type { MultiColumnDictionary } from "../dictionary.js";
+
+export const pt: MultiColumnDictionary = {
+  slash_menu: {
+    two_columns: {
+      title: "Duas Colunas",
+      subtext: "Duas colunas lado a lado",
+      aliases: ["colunas", "linha", "dividir"],
+      group: "Blocos básicos",
+    },
+    three_columns: {
+      title: "Três Colunas",
+      subtext: "Três colunas lado a lado",
+      aliases: ["colunas", "linha", "dividir"],
+      group: "Blocos básicos",
+    },
+  },
+};

package/src/i18n/locales/ru.ts

@@ -0,0 +1,18 @@
+import type { MultiColumnDictionary } from "../dictionary.js";
+
+export const ru: MultiColumnDictionary = {
+  slash_menu: {
+    two_columns: {
+      title: "Два Столбца",
+      subtext: "Два столбца рядом",
+      aliases: ["столбцы", "ряд", "разделить"],
+      group: "Базовые блоки",
+    },
+    three_columns: {
+      title: "Три Столбца",
+      subtext: "Три столбца рядом",
+      aliases: ["столбцы", "ряд", "разделить"],
+      group: "Базовые блоки",
+    },
+  },
+};

package/src/i18n/locales/vi.ts

@@ -0,0 +1,18 @@
+import type { MultiColumnDictionary } from "../dictionary.js";
+
+export const vi: MultiColumnDictionary = {
+  slash_menu: {
+    two_columns: {
+      title: "Hai Cột",
+      subtext: "Hai cột cạnh nhau",
+      aliases: ["cột", "hàng", "chia"],
+      group: "Khối cơ bản",
+    },
+    three_columns: {
+      title: "Ba Cột",
+      subtext: "Ba cột cạnh nhau",
+      aliases: ["cột", "hàng", "chia"],
+      group: "Khối cơ bản",
+    },
+  },
+};

package/src/i18n/locales/zh.ts

@@ -0,0 +1,18 @@
+import type { MultiColumnDictionary } from "../dictionary.js";
+
+export const zh: MultiColumnDictionary = {
+  slash_menu: {
+    two_columns: {
+      title: "两列",
+      subtext: "两列并排",
+      aliases: ["列", "行", "分割"],
+      group: "基础",
+    },
+    three_columns: {
+      title: "三列",
+      subtext: "三列并排",
+      aliases: ["列", "行", "分割"],
+      group: "基础",
+    },
+  },
+};

package/src/index.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/src/pm-nodes/Column.ts

@@ -0,0 +1,87 @@
+import { createStronglyTypedTiptapNode } from "@blocknote/core";
+
+import { createColumnResizeExtension } from "../extensions/ColumnResize/ColumnResizeExtension.js";
+
+export const Column = createStronglyTypedTiptapNode({
+  name: "column",
+  group: "bnBlock childContainer",
+  // A block always contains content, and optionally a blockGroup which contains nested blocks
+  content: "blockContainer+",
+  priority: 40,
+  defining: true,
+  addAttributes() {
+    return {
+      width: {
+        // Why does each column have a default width of 1, i.e. 100%? Because
+        // when creating a new column, we want to make sure that existing
+        // column widths are preserved, while the new one also has a sensible
+        // width. If we'd set it so all column widths must add up to 100%
+        // instead, then each time a new column is created, we'd have to assign
+        // it a width depending on the total number of columns and also adjust
+        // the widths of the other columns. The same can be said for using px
+        // instead of percent widths and making them add to the editor width. So
+        // using this method is both simpler and computationally cheaper. This
+        // is possible because we can set the `flex-grow` property to the width
+        // value, which handles all the resizing for us, instead of manually
+        // having to set the `width` property of each column.
+        default: 1,
+        parseHTML: (element) => {
+          const attr = element.getAttribute("data-width");
+          if (attr === null) {
+            return null;
+          }
+
+          const parsed = parseFloat(attr);
+          if (isFinite(parsed)) {
+            return parsed;
+          }
+
+          return null;
+        },
+        renderHTML: (attributes) => {
+          return {
+            "data-width": (attributes.width as number).toString(),
+            style: `flex-grow: ${attributes.width as number};`,
+          };
+        },
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "div",
+        getAttrs: (element) => {
+          if (typeof element === "string") {
+            return false;
+          }
+
+          if (element.getAttribute("data-node-type") === this.name) {
+            return {};
+          }
+
+          return false;
+        },
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    const column = document.createElement("div");
+    column.className = "bn-block-column";
+    column.setAttribute("data-node-type", this.name);
+    for (const [attribute, value] of Object.entries(HTMLAttributes)) {
+      column.setAttribute(attribute, value as any); // TODO as any
+    }
+
+    return {
+      dom: column,
+      contentDOM: column,
+    };
+  },
+
+  addExtensions() {
+    return [createColumnResizeExtension(this.options.editor)];
+  },
+});

package/src/pm-nodes/ColumnList.ts

@@ -0,0 +1,44 @@
+import { createStronglyTypedTiptapNode } from "@blocknote/core";
+
+export const ColumnList = createStronglyTypedTiptapNode({
+  name: "columnList",
+  group: "childContainer bnBlock blockGroupChild",
+  // A block always contains content, and optionally a blockGroup which contains nested blocks
+  content: "column column+", // min two columns
+  priority: 40, // should be below blockContainer
+  defining: true,
+
+  parseHTML() {
+    return [
+      {
+        tag: "div",
+        getAttrs: (element) => {
+          if (typeof element === "string") {
+            return false;
+          }
+
+          if (element.getAttribute("data-node-type") === this.name) {
+            return {};
+          }
+
+          return false;
+        },
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    const columnList = document.createElement("div");
+    columnList.className = "bn-block-column-list";
+    columnList.setAttribute("data-node-type", this.name);
+    for (const [attribute, value] of Object.entries(HTMLAttributes)) {
+      columnList.setAttribute(attribute, value as any); // TODO as any
+    }
+    columnList.style.display = "flex";
+
+    return {
+      dom: columnList,
+      contentDOM: columnList,
+    };
+  },
+});