TypeCellOS · matthewlipski · Nov 1, 2024 · Oct 25, 2024 · Oct 29, 2024 · Oct 29, 2024
diff --git a/examples/01-basic/03-all-blocks/App.tsx b/examples/01-basic/03-all-blocks/App.tsx
@@ -39,6 +39,9 @@ export default function App() {
         children: [
           {
             type: "column",
+            props: {
+              width: 0.8,
+            },
             children: [
               {
                 type: "paragraph",
@@ -48,6 +51,9 @@ export default function App() {
           },
           {
             type: "column",
+            props: {
+              width: 1.2,
+            },
             children: [
               {
                 type: "paragraph",

diff --git a/packages/core/src/editor/Block.css b/packages/core/src/editor/Block.css
@@ -403,6 +403,7 @@ NESTED BLOCKS
 [data-file-block] .bn-file-caption {
   font-size: 0.8em;
   padding-block: 4px;
+  word-break: break-word;
 }
 
 [data-file-block] .bn-file-caption:empty {
@@ -519,9 +520,20 @@ NESTED BLOCKS
 .bn-block[data-node-type="columnList"] {
   display: flex;
   flex-direction: row;
-  gap: 10px;
+  /* gap: 10px; */
 }
 
 .bn-block[data-node-type="columnList"] > div {
   flex: 1;
+  padding: 12px 20px;
+  /* Important that we use scroll instead of hidden for tables */
+  overflow-x: scroll;
+}
+
+.bn-block[data-node-type="columnList"] > div:first-child {
+  padding-left: 0;
+}
+
+.bn-block[data-node-type="columnList"] > div:last-child {
+  padding-right: 0;
 }
diff --git a/packages/core/src/extensions/SideMenu/SideMenuPlugin.ts b/packages/core/src/extensions/SideMenu/SideMenuPlugin.ts
@@ -222,7 +222,11 @@ export class SideMenuView<
         show: true,
         referencePos: new DOMRect(
           column
-            ? column.getBoundingClientRect().x
+            ? // We take the first child as column elements have some default
+              // padding. This is a little weird since this child element will
+              // be the first block, but since it's always non-nested and we
+              // only take the x coordinate, it's ok.
+              column.firstElementChild!.getBoundingClientRect().x
             : (
                 this.pmView.dom.firstChild as HTMLElement
               ).getBoundingClientRect().x,

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -2,6 +2,7 @@ import * as locales from "./i18n/locales/index.js";
 export * from "./api/exporters/html/externalHTMLExporter.js";
 export * from "./api/exporters/html/internalHTMLSerializer.js";
 export * from "./api/getBlockInfoFromPos.js";
+export * from "./api/nodeUtil.js";
 export * from "./api/testUtil/index.js";
 export * from "./blocks/AudioBlockContent/AudioBlockContent.js";
 export * from "./blocks/CodeBlockContent/CodeBlockContent.js";

diff --git a/packages/multi-column/package.json b/packages/multi-column/package.json
@@ -45,6 +45,7 @@
   },
   "dependencies": {
     "@blocknote/core": "*",
+    "@tiptap/core": "^2.7.1",
     "prosemirror-model": "^1.23.0",
     "prosemirror-state": "^1.4.3",
     "prosemirror-tables": "^1.3.7",

diff --git a/packages/multi-column/src/blocks/Columns/index.ts b/packages/multi-column/src/blocks/Columns/index.ts
@@ -3,10 +3,11 @@ import { ColumnList } from "../../pm-nodes/ColumnList.js";
 
 import { createBlockSpecFromStronglyTypedTiptapNode } from "@blocknote/core";
 
-export const ColumnBlock = createBlockSpecFromStronglyTypedTiptapNode(
-  Column,
-  {}
-);
+export const ColumnBlock = createBlockSpecFromStronglyTypedTiptapNode(Column, {
+  width: {
+    default: 1,
+  },
+});
 
 export const ColumnListBlock = createBlockSpecFromStronglyTypedTiptapNode(
   ColumnList,