[{"_1":2,"_4246":-5,"_4247":-5},"loaderData",{"_3":4,"_12":13},"root",{"_5":6,"_7":8,"_9":10,"_11":10},"isProd",true,"enableStats",false,"domain","gabo.es","siteHost","routes/$",{"_14":15,"_3706":3707},"json",{"_16":17,"_18":19,"_20":-5,"_21":-5,"_22":-5,"_23":8,"_24":-5,"_25":26,"_1150":6,"_38":1151,"_1163":1164,"_1165":1166,"_3685":3686,"_3687":6,"_11":3688,"_3689":3688,"_3690":3691,"_3702":3703},"prefersLanguages",[],"viewTerm","comments","panelParam","openComment","accountUid","isInspect","inspectTab","document",{"_27":28,"_1126":41,"_1127":1128,"_1129":1130,"_1132":1133,"_1134":1135,"_1136":1135,"_1137":1138,"_1141":1142,"_1143":41,"_1144":1145,"_1148":1149},"content",[29,80,129,186,228,841,984,1006,1058,1086],{"_30":31,"_34":72},"children",[32],{"_30":33,"_34":35},[],"block",{"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_70":71,"_55":56},"type","Paragraph","id","z7aY0K4U","revision","bafy2bzaceajqrjlcm5fsmnymy27uoetbdyi6lb7qmurr26qngwiipqnzalhnw","attributes",{},"annotations",[46,57],{"_36":47,"_48":49,"_51":52,"_42":54,"_55":56},"Bold","starts",[50],0,"ends",[53],48,{},"link","",{"_36":58,"_48":59,"_51":64,"_42":69,"_55":56},"Code",[60,61,62,63],67,92,146,185,[65,66,67,68],73,117,163,198,{},"text","Grid Layout (Phase 1) must be implemented first. This plan assumes 'Grid' already exists in HMBlockChildrenTypeSchema, the editor guards pattern (isInGridContainer) is established, and BlockNodeList rendering has been extended.",{"_36":73,"_38":74,"_40":41,"_42":75,"_44":78,"_70":79,"_55":56},"Heading","39q7ziFC",{"_76":77},"childrenType","Group",[],"Prerequisites",{"_30":81,"_34":124},[82,95,102],{"_30":83,"_34":84},[],{"_36":37,"_38":85,"_40":41,"_42":86,"_44":87,"_70":94,"_55":56},"HYbCDNQh",{},[88],{"_36":47,"_48":89,"_51":91,"_42":93,"_55":56},[90],28,[92],41,{},"With Grid done, we now want Fixed Columns: explicit column containers where each child IS a column with its own independent content. Unlike Grid (items flow/wrap), Columns give users explicit control — each column is a separate content area with its own block tree.",{"_30":96,"_34":97},[],{"_36":37,"_38":98,"_40":41,"_42":99,"_44":100,"_70":101,"_55":56},"97Dw5O_U",{},[],"Think Notion columns or newspaper layouts — not a card grid.",{"_30":103,"_34":119},[104],{"_30":105,"_34":106},[],{"_36":37,"_38":107,"_40":41,"_42":108,"_44":109,"_70":118,"_55":56},"yq4jSlPx",{},[110],{"_36":58,"_48":111,"_51":114,"_42":117,"_55":56},[112,113],284,539,[115,116],295,551,{},"| Aspect | Grid (Phase 1) | Columns (Phase 2) | | ----------------- | --------------------------------- | --------------------------------------------- | | Nesting depth | 1 level (container -> items) | 2 levels (container -> column wrappers -> content) | | Column count | Attribute (columnCount) | Number of direct children | | Item overflow | Wraps to next row | No overflow, each column is independent | | Content per column| Single block per cell | Multiple blocks per column | | Width control | Equal width, CSS grid | Per-column via columnWidths attribute |",{"_36":73,"_38":120,"_40":41,"_42":121,"_44":122,"_70":123,"_55":56},"B1zcy1k3",{"_76":77},[],"Key Difference from Grid",{"_36":73,"_38":125,"_40":41,"_42":126,"_44":127,"_70":128,"_55":56},"-UEoYKK8",{"_76":77},[],"Context",{"_30":130,"_34":181},[131,139,146,153],{"_30":132,"_34":133},[],{"_36":58,"_38":134,"_40":41,"_42":135,"_44":137,"_70":138,"_55":56},"ZFEtHJFS",{"_136":56},"language",[],"BlockNode {\n block: {\n id: \"cols-1\",\n type: \"Paragraph\",\n text: \"\",\n attributes: { childrenType: \"Columns\", columnWidths: [60, 40] }\n }\n children: [\n BlockNode {\n block: {\n id: \"col-1\",\n type: \"Paragraph\",\n text: \"\",\n attributes: { childrenType: \"Group\" }\n }\n children: [\n BlockNode { block: { id: \"p1\", type: \"Paragraph\", text: \"Left content\" } }\n BlockNode { block: { id: \"img1\", type: \"Image\", ... } }\n ]\n },\n BlockNode {\n block: {\n id: \"col-2\",\n type: \"Paragraph\",\n text: \"\",\n attributes: { childrenType: \"Group\" }\n }\n children: [\n BlockNode { block: { id: \"p2\", type: \"Paragraph\", text: \"Right content\" } }\n ]\n }\n ]\n}\n",{"_30":140,"_34":141},[],{"_36":37,"_38":142,"_40":41,"_42":143,"_44":144,"_70":145,"_55":56},"RB7LfGOH",{},[],"ProseMirror tree:",{"_30":147,"_34":148},[],{"_36":58,"_38":149,"_40":41,"_42":150,"_44":151,"_70":152,"_55":56},"ahztSndr",{"_136":56},[],"blockNode (container)\n block:paragraph (\"\") <- empty, invisible\n blockChildren [listType='Columns'] <- CSS flex row\n blockNode (column 1)\n block:paragraph (\"\") <- empty, invisible\n blockChildren [listType='Group'] <- column 1 content\n blockNode -> paragraph (\"Left text\")\n blockNode -> image (...)\n blockNode (column 2)\n block:paragraph (\"\")\n blockChildren [listType='Group'] <- column 2 content\n blockNode -> paragraph (\"Right text\")\n",{"_30":154,"_34":175},[155,168],{"_30":156,"_34":157},[],{"_36":37,"_38":158,"_40":41,"_42":159,"_44":160,"_70":167,"_55":56},"O_xrHkp9",{},[161],{"_36":58,"_48":162,"_51":163,"_42":166,"_55":56},[50,60],[164,165],22,75,{},"columnWidths: number[] (optional, percentages summing to 100, e.g. [60, 40])",{"_30":169,"_34":170},[],{"_36":37,"_38":171,"_40":41,"_42":172,"_44":173,"_70":174,"_55":56},"D8ukw1d1",{},[],"Column count = number of direct children (not an attribute)",{"_36":37,"_38":176,"_40":41,"_42":177,"_44":179,"_70":180,"_55":56},"mL5JTjqt",{"_76":178},"Unordered",[],"Attributes on container:",{"_36":73,"_38":182,"_40":41,"_42":183,"_44":184,"_70":185,"_55":56},"TwEOthCw",{"_76":77},[],"Data Model",{"_30":187,"_34":223},[188,195,202,209,216],{"_30":189,"_34":190},[],{"_36":37,"_38":191,"_40":41,"_42":192,"_44":193,"_70":194,"_55":56},"ah_NQKbM",{},[],"Different columns = independent RGA sublists -> no conflicts",{"_30":196,"_34":197},[],{"_36":37,"_38":198,"_40":41,"_42":199,"_44":200,"_70":201,"_55":56},"ad1N8IUU",{},[],"Same column = standard RGA merge within that column's child list",{"_30":203,"_34":204},[],{"_36":37,"_38":205,"_40":41,"_42":206,"_44":207,"_70":208,"_55":56},"TBxnGwfr",{},[],"Add/remove columns = OpMoveBlocks on container's child list",{"_30":210,"_34":211},[],{"_36":37,"_38":212,"_40":41,"_42":213,"_44":214,"_70":215,"_55":56},"pTdn2XCO",{},[],"Move blocks between columns = OpMoveBlocks changing parent -> last-write-wins if concurrent",{"_30":217,"_34":218},[],{"_36":37,"_38":219,"_40":41,"_42":220,"_44":221,"_70":222,"_55":56},"-UYVl-M2",{},[],"No CRDT changes needed.",{"_36":73,"_38":224,"_40":41,"_42":225,"_44":226,"_70":227,"_55":56},"j94WB7-Y",{"_76":178},[],"CRDT Behavior",{"_30":229,"_34":836},[230,291,360,422,486,561,587,679,749,804],{"_30":231,"_34":286},[232,244,259,267,279],{"_30":233,"_34":234},[],{"_36":37,"_38":235,"_40":41,"_42":236,"_44":237,"_70":243,"_55":56},"iBBnrh1Q",{},[238],{"_36":58,"_48":239,"_51":240,"_42":242,"_55":56},[50],[241],40,{},"frontend/packages/shared/src/hm-types.ts",{"_30":245,"_34":246},[],{"_36":37,"_38":247,"_40":41,"_42":248,"_44":249,"_70":258,"_55":56},"O2908Vq8",{},[250],{"_36":58,"_48":251,"_51":254,"_42":257,"_55":56},[252,253],4,17,[255,256],13,42,{},"Add 'Columns' to HMBlockChildrenTypeSchema (Grid already present from Phase 1):",{"_30":260,"_34":261},[],{"_36":58,"_38":262,"_40":41,"_42":263,"_44":265,"_70":266,"_55":56},"oCshGZFZ",{"_136":264},"ts",[],"z.union([\n z.literal('Group'),\n z.literal('Ordered'),\n z.literal('Unordered'),\n z.literal('Blockquote'),\n z.literal('Grid'),\n z.literal('Columns'),\n])\n",{"_30":268,"_34":269},[],{"_36":37,"_38":270,"_40":41,"_42":271,"_44":272,"_70":278,"_55":56},"UShJYwm2",{},[273],{"_36":58,"_48":274,"_51":275,"_42":277,"_55":56},[50],[276],82,{},"frontend/packages/editor/src/blocknote/core/extensions/Blocks/api/defaultBlocks.ts",{"_30":280,"_34":281},[],{"_36":58,"_38":282,"_40":41,"_42":283,"_44":284,"_70":285,"_55":56},"oHp-atX6",{"_136":264},[],"childrenType: {\n default: 'Group',\n values: ['Group', 'Unordered', 'Ordered', 'Blockquote', 'Grid', 'Columns'],\n}\n",{"_36":73,"_38":287,"_40":41,"_42":288,"_44":289,"_70":290,"_55":56},"6_3Ex17s",{"_76":77},[],"Step 1: Types & Schema",{"_30":292,"_34":355},[293,320],{"_30":294,"_34":310},[295],{"_30":296,"_34":297},[],{"_36":37,"_38":298,"_40":41,"_42":299,"_44":300,"_70":309,"_55":56},"Qjgu1YdW",{},[301],{"_36":58,"_48":302,"_51":305,"_42":308,"_55":56},[303,304],7,26,[306,307],16,38,{},"Accept 'Columns' as valid childrenType (same pattern as Grid from Phase 1)",{"_36":37,"_38":311,"_40":41,"_42":312,"_44":313,"_70":319,"_55":56},"xP4cX5jG",{"_76":178},[314],{"_36":58,"_48":315,"_51":316,"_42":318,"_55":56},[50],[317],61,{},"frontend/packages/shared/src/client/hmblock-to-editorblock.ts",{"_30":321,"_34":346},[322,333],{"_30":323,"_34":324},[],{"_36":37,"_38":325,"_40":41,"_42":326,"_44":327,"_70":332,"_55":56},"Ugf_qhXI",{},[328],{"_36":58,"_48":329,"_51":330,"_42":331,"_55":56},[255],[164],{},"Pass through 'Columns' childrenType",{"_30":334,"_34":335},[],{"_36":37,"_38":336,"_40":41,"_42":337,"_44":338,"_70":345,"_55":56},"wrjhbm8g",{},[339],{"_36":58,"_48":340,"_51":342,"_42":344,"_55":56},[341],9,[343],21,{},"Preserve columnWidths attribute in conversion",{"_36":37,"_38":347,"_40":41,"_42":348,"_44":349,"_70":354,"_55":56},"mROq8kAY",{"_76":178},[350],{"_36":58,"_48":351,"_51":352,"_42":353,"_55":56},[50],[317],{},"frontend/packages/shared/src/client/editorblock-to-hmblock.ts",{"_36":73,"_38":356,"_40":41,"_42":357,"_44":358,"_70":359,"_55":56},"VLqZnRoh",{"_76":77},[],"Step 2: Block Conversion",{"_30":361,"_34":417},[362],{"_30":363,"_34":407},[364,382,395],{"_30":365,"_34":366},[],{"_36":37,"_38":367,"_40":41,"_42":368,"_44":369,"_70":381,"_55":56},"uOfLnwNk",{},[370],{"_36":58,"_48":371,"_51":375,"_42":380,"_55":56},[50,372,373,374],25,47,58,[376,377,378,379],10,34,52,97,{},"listNode(): Add case for 'Columns' — render as

with display: flex; flex-direction: row; gap styles",{"_30":383,"_34":384},[],{"_36":37,"_38":385,"_40":41,"_42":386,"_44":387,"_70":394,"_55":56},"jrJnGCjO",{},[388],{"_36":58,"_48":389,"_51":391,"_42":393,"_55":56},[390],11,[392],20,{},"Each child blockNode inside a Columns container renders as a flex item",{"_30":396,"_34":397},[],{"_36":37,"_38":398,"_40":41,"_42":399,"_44":400,"_70":406,"_55":56},"Zh4JJxdD",{},[401],{"_36":58,"_48":402,"_51":403,"_42":405,"_55":56},[50],[404],15,{},"addInputRules(): Phase 1 Grid guard already exists — extend to also cover Columns",{"_36":37,"_38":408,"_40":41,"_42":409,"_44":410,"_70":416,"_55":56},"Oxfllknp",{"_76":178},[411],{"_36":58,"_48":412,"_51":413,"_42":415,"_55":56},[50],[414],84,{},"frontend/packages/editor/src/blocknote/core/extensions/Blocks/nodes/BlockChildren.ts",{"_36":73,"_38":418,"_40":41,"_42":419,"_44":420,"_70":421,"_55":56},"BNsrA9Ma",{"_76":77},[],"Step 3: Editor — BlockChildren Rendering",{"_30":423,"_34":481},[424,436,448,460],{"_30":425,"_34":426},[],{"_36":37,"_38":427,"_40":41,"_42":428,"_44":429,"_70":435,"_55":56},"b5i6XiBB",{},[430],{"_36":58,"_48":431,"_51":432,"_42":434,"_55":56},[50],[433],102,{},"frontend/packages/editor/src/blocknote/core/extensions/KeyboardShortcuts/KeyboardShortcutsExtension.ts",{"_30":437,"_34":438},[],{"_36":37,"_38":439,"_40":41,"_42":440,"_44":441,"_70":447,"_55":56},"xDCu3e2e",{},[442],{"_36":58,"_48":443,"_51":444,"_42":446,"_55":56},[253,241],[445,317],36,{},"Rename Phase 1's isInGridContainer() -> isInLayoutContainer() covering both Grid and Columns.",{"_30":449,"_34":450},[],{"_36":37,"_38":451,"_40":41,"_42":452,"_44":453,"_70":459,"_55":56},"RCKhGKxu",{},[454],{"_36":47,"_48":455,"_51":456,"_42":458,"_55":56},[372],[457],53,{},"Additional guards needed beyond what Grid already has:",{"_30":461,"_34":462},[],{"_36":37,"_38":463,"_40":41,"_42":464,"_44":465,"_70":480,"_55":56},"s0DyAxPP",{},[466],{"_36":58,"_48":467,"_51":473,"_42":479,"_55":56},[468,469,470,471,472],122,234,296,390,476,[474,475,476,477,478],137,246,307,399,485,{},"| Handler | Guard | | ------------------------ | -------------------------------------------------------------------- | | handleBackspace (~26) | Prevent merging across column boundaries (col-1 block can't merge with col-2 block) | | handleDelete (~315) | Same — prevent cross-column merging | | handleEnter (~423) | On empty block inside column: stay in column, don't unnest to parent | | handleTab (~541) | Prevent indent of column wrappers — already guarded by Phase 1 | | Shift-Tab (~621) | Prevent outdent of column wrappers — already guarded by Phase 1 |",{"_36":73,"_38":482,"_40":41,"_42":483,"_44":484,"_70":485,"_55":56},"ETcIIyUk",{"_76":77},[],"Step 4: Editor — Keyboard Guards",{"_30":487,"_34":556},[488,500,521],{"_30":489,"_34":490},[],{"_36":37,"_38":491,"_40":41,"_42":492,"_44":493,"_70":499,"_55":56},"Rxtzb9Bk",{},[494],{"_36":58,"_48":495,"_51":496,"_42":498,"_55":56},[50],[497],87,{},"frontend/packages/editor/src/blocknote/core/api/blockManipulation/commands/nestBlock.ts",{"_30":501,"_34":516},[502,509],{"_30":503,"_34":504},[],{"_36":37,"_38":505,"_40":41,"_42":506,"_44":507,"_70":508,"_55":56},"RW1GE3Z-",{},[],"Prevent nesting column wrapper blocks (direct children of Columns container)",{"_30":510,"_34":511},[],{"_36":37,"_38":512,"_40":41,"_42":513,"_44":514,"_70":515,"_55":56},"7yHlhtXI",{},[],"Content blocks INSIDE a column CAN still be nested normally (they're inside a regular Group)",{"_36":37,"_38":517,"_40":41,"_42":518,"_44":519,"_70":520,"_55":56},"RfV7OF6X",{"_76":178},[],"Phase 1 already prevents nesting in Grid. Extend to:",{"_30":522,"_34":546},[523,534],{"_30":524,"_34":525},[],{"_36":37,"_38":526,"_40":41,"_42":527,"_44":528,"_70":533,"_55":56},"0xQ15VgM",{},[529],{"_36":58,"_48":530,"_51":531,"_42":532,"_55":56},[50],[376],{},"canMerge(): Add guard — blocks in different columns cannot merge",{"_30":535,"_34":536},[],{"_36":37,"_38":537,"_40":41,"_42":538,"_44":539,"_70":545,"_55":56},"MRpMckGL",{},[540],{"_36":58,"_48":541,"_51":542,"_42":544,"_55":56},[50],[543],18,{},"getPrevBlockInfo(): Stop traversal at column wrapper boundaries",{"_36":37,"_38":547,"_40":41,"_42":548,"_44":549,"_70":555,"_55":56},"6CgMVfxy",{"_76":178},[550],{"_36":58,"_48":551,"_51":552,"_42":554,"_55":56},[50],[553],89,{},"frontend/packages/editor/src/blocknote/core/api/blockManipulation/commands/mergeBlocks.ts",{"_36":73,"_38":557,"_40":41,"_42":558,"_44":559,"_70":560,"_55":56},"lilwCAG-",{"_76":77},[],"Step 5: Editor — Block Manipulation Commands",{"_30":562,"_34":582},[563,575],{"_30":564,"_34":565},[],{"_36":37,"_38":566,"_40":41,"_42":567,"_44":568,"_70":574,"_55":56},"D6ncepok",{},[569],{"_36":58,"_48":570,"_51":571,"_42":573,"_55":56},[50],[572],49,{},"frontend/packages/editor/src/slash-menu-items.tsx",{"_30":576,"_34":577},[],{"_36":58,"_38":578,"_40":41,"_42":579,"_44":580,"_70":581,"_55":56},"sBzZ97D5",{"_136":264},[],"{\n name: 'Columns',\n aliases: ['cols', 'side-by-side', 'split'],\n group: 'Layout',\n icon: ColumnsIcon,\n execute: (editor) => {\n // 1. Replace current block with empty block, set childrenType: 'Columns'\n // 2. Create 2 child blocks (column wrappers), each with childrenType: 'Group'\n // 3. Each column wrapper gets 1 empty paragraph child\n // 4. Place cursor in first column's paragraph\n }\n}\n",{"_36":73,"_38":583,"_40":41,"_42":584,"_44":585,"_70":586,"_55":56},"8Rxw_8EU",{"_76":77},[],"Step 6: Editor — Slash Menu",{"_30":588,"_34":674},[589,641],{"_30":590,"_34":636},[591,603,614,625],{"_30":592,"_34":593},[],{"_36":37,"_38":594,"_40":41,"_42":595,"_44":596,"_70":602,"_55":56},"r7fd4OUB",{},[597],{"_36":47,"_48":598,"_51":599,"_42":601,"_55":56},[50],[600],12,{},"\"Add Column\" button — creates a new column wrapper child",{"_30":604,"_34":605},[],{"_36":37,"_38":606,"_40":41,"_42":607,"_44":608,"_70":613,"_55":56},"Xqum0gQY",{},[609],{"_36":47,"_48":610,"_51":611,"_42":612,"_55":56},[50],[404],{},"\"Remove Column\" button — removes the last column (min 2 enforced)",{"_30":615,"_34":616},[],{"_36":37,"_38":617,"_40":41,"_42":618,"_44":619,"_70":624,"_55":56},"7i9TgHs0",{},[620],{"_36":47,"_48":621,"_51":622,"_42":623,"_55":56},[50],[392],{},"Column count display (e.g., \"2 columns\")",{"_30":626,"_34":627},[],{"_36":37,"_38":628,"_40":41,"_42":629,"_44":630,"_70":635,"_55":56},"IBe3YeFR",{},[631],{"_36":47,"_48":632,"_51":633,"_42":634,"_55":56},[50],[304],{},"\"Convert to normal blocks\" — flattens: removes column wrappers, moves all content blocks to parent level",{"_36":37,"_38":637,"_40":41,"_42":638,"_44":639,"_70":640,"_55":56},"0PW6xNvU",{"_76":178},[],"Floating toolbar on the Columns container (on hover/selection):",{"_30":642,"_34":669},[643,650,662],{"_30":644,"_34":645},[],{"_36":37,"_38":646,"_40":41,"_42":647,"_44":648,"_70":649,"_55":56},"pDiJ68E9",{},[],"Draggable divider between columns",{"_30":651,"_34":652},[],{"_36":37,"_38":653,"_40":41,"_42":654,"_44":655,"_70":661,"_55":56},"xmY6YXgf",{},[656],{"_36":58,"_48":657,"_51":659,"_42":660,"_55":56},[658],8,[392],{},"Updates columnWidths attribute on the container block",{"_30":663,"_34":664},[],{"_36":37,"_38":665,"_40":41,"_42":666,"_44":667,"_70":668,"_55":56},"d0p46vUr",{},[],"Visual feedback during drag",{"_36":37,"_38":670,"_40":41,"_42":671,"_44":672,"_70":673,"_55":56},"kT2j89IH",{"_76":178},[],"Column width resize handles:",{"_36":73,"_38":675,"_40":41,"_42":676,"_44":677,"_70":678,"_55":56},"_7NptmDQ",{"_76":77},[],"Step 7: Editor — Column Management UI",{"_30":680,"_34":744},[681,695,703],{"_30":682,"_34":683},[],{"_36":37,"_38":684,"_40":41,"_42":685,"_44":686,"_70":694,"_55":56},"OKBoImFi",{},[687],{"_36":58,"_48":688,"_51":690,"_42":693,"_55":56},[50,689],46,[691,692],43,59,{},"frontend/packages/ui/src/blocks-content.tsx — BlockNodeList (line 464):",{"_30":696,"_34":697},[],{"_36":58,"_38":698,"_40":41,"_42":699,"_44":701,"_70":702,"_55":56},"x2ABNRLm",{"_136":700},"tsx",[],"if (childrenType === 'Columns') {\n return (\n \n {children}\n

\n )\n}\n",{"_30":704,"_34":735},[705,717,724],{"_30":706,"_34":707},[],{"_36":37,"_38":708,"_40":41,"_42":709,"_44":710,"_70":716,"_55":56},"ZM1VWchq",{},[711],{"_36":58,"_48":712,"_51":714,"_42":715,"_55":56},[713,165],39,[689,497],{},"Each child renders as a flex item with flex: 1 (or proportional width from columnWidths)",{"_30":718,"_34":719},[],{"_36":37,"_38":720,"_40":41,"_42":721,"_44":722,"_70":723,"_55":56},"AQLhaL4v",{},[],"Hide the empty container paragraph block (invisible wrapper)",{"_30":725,"_34":726},[],{"_36":37,"_38":727,"_40":41,"_42":728,"_44":729,"_70":734,"_55":56},"ai9ZfGEC",{},[730],{"_36":58,"_48":731,"_51":732,"_42":733,"_55":56},[689],[692],{},"Column content renders normally via recursive BlockNodeList",{"_36":37,"_38":736,"_40":41,"_42":737,"_44":738,"_70":743,"_55":56},"OgsiCaWW",{"_76":178},[739],{"_36":58,"_48":740,"_51":741,"_42":742,"_55":56},[50],[306],{},"BlockNodeContent: When parent is Columns:",{"_36":73,"_38":745,"_40":41,"_42":746,"_44":747,"_70":748,"_55":56},"hVab3jHx",{"_76":77},[],"Step 8: Read-Only Rendering",{"_30":750,"_34":799},[751],{"_30":752,"_34":789},[753,765,776],{"_30":754,"_34":755},[],{"_36":37,"_38":756,"_40":41,"_42":757,"_44":758,"_70":764,"_55":56},"oFl9LE7_",{},[759],{"_36":58,"_48":760,"_51":761,"_42":763,"_55":56},[50],[762],29,{},"blockPositionsFromSelection(): Prevent selection spanning multiple columns",{"_30":766,"_34":767},[],{"_36":37,"_38":768,"_40":41,"_42":769,"_44":770,"_70":775,"_55":56},"iLsVUZVM",{},[771],{"_36":58,"_48":772,"_51":773,"_42":774,"_55":56},[50],[658],{},"onDrop(): Calculate drop target with column awareness — blocks dropped on a column land inside it",{"_30":777,"_34":778},[],{"_36":37,"_38":779,"_40":41,"_42":780,"_44":781,"_70":788,"_55":56},"ZQ2WCkhU",{},[782],{"_36":58,"_48":783,"_51":785,"_42":787,"_55":56},[784],57,[786],78,{},"Future follow-up: side-drop indicators (like BlockNote's multiColumnDropCursor) for dragging blocks into new columns",{"_36":37,"_38":790,"_40":41,"_42":791,"_44":792,"_70":798,"_55":56},"33Zcpxdk",{"_76":178},[793],{"_36":58,"_48":794,"_51":795,"_42":797,"_55":56},[50],[796],81,{},"frontend/packages/editor/src/blocknote/core/extensions/SideMenu/SideMenuPlugin.ts",{"_36":73,"_38":800,"_40":41,"_42":801,"_44":802,"_70":803,"_55":56},"tyogp52Z",{"_76":77},[],"Step 9: Editor — Drag and Drop",{"_30":805,"_34":831},[806],{"_30":807,"_34":826},[808,819],{"_30":809,"_34":810},[],{"_36":37,"_38":811,"_40":41,"_42":812,"_44":813,"_70":818,"_55":56},"U_oKlD05",{},[814],{"_36":58,"_48":815,"_51":816,"_42":817,"_55":56},[372],[373],{},"Below tablet breakpoint: flex-direction: column — columns stack vertically",{"_30":820,"_34":821},[],{"_36":37,"_38":822,"_40":41,"_42":823,"_44":824,"_70":825,"_55":56},"S0Kg24X0",{},[],"Column widths reset to 100% on mobile",{"_36":37,"_38":827,"_40":41,"_42":828,"_44":829,"_70":830,"_55":56},"f5UnKFrb",{"_76":178},[],"CSS media queries:",{"_36":73,"_38":832,"_40":41,"_42":833,"_44":834,"_70":835,"_55":56},"d0MNEsGa",{"_76":77},[],"Step 10: Responsive Behavior",{"_36":73,"_38":837,"_40":41,"_42":838,"_44":839,"_70":840,"_55":56},"_HSG2WcK",{"_76":77},[],"Implementation Steps",{"_30":842,"_34":979},[843,908,953],{"_30":844,"_34":903},[845,857,868,875,886,896],{"_30":846,"_34":847},[],{"_36":37,"_38":848,"_40":41,"_42":849,"_44":850,"_70":856,"_55":56},"20czyNj4",{},[851],{"_36":58,"_48":852,"_51":853,"_42":855,"_55":56},[50],[854],76,{},"frontend/packages/shared/src/client/__tests__/hmblock-to-editorblock.test.ts",{"_30":858,"_34":859},[],{"_36":37,"_38":860,"_40":41,"_42":861,"_44":862,"_70":867,"_55":56},"Ina2tL_l",{},[863],{"_36":58,"_48":864,"_51":865,"_42":866,"_55":56},[306],[241],{},"Add to existing describe('childrenType'):",{"_30":869,"_34":870},[],{"_36":58,"_38":871,"_40":41,"_42":872,"_44":873,"_70":874,"_55":56},"py0ckpGp",{"_136":264},[],"test('Columns', () => {\n const hmBlock: HMBlock = {\n id: 'foo',\n type: 'Paragraph',\n text: '',\n annotations: [],\n attributes: {childrenType: 'Columns'},\n revision: 'revision123',\n }\n const val = hmBlockToEditorBlock(hmBlock)\n expect(val.props.childrenType).toBe('Columns')\n})\n\ntest('Columns with columnWidths attribute', () => {\n const hmBlock: HMBlock = {\n id: 'foo',\n type: 'Paragraph',\n text: '',\n annotations: [],\n attributes: {childrenType: 'Columns', columnWidths: [60, 40]},\n revision: 'revision123',\n }\n const val = hmBlockToEditorBlock(hmBlock)\n expect(val.props.childrenType).toBe('Columns')\n})\n\ntest('Columns with nested children structure', () => {\n const blocks: HMBlockNode[] = [\n {\n block: {\n id: 'cols-1',\n type: 'Paragraph',\n text: '',\n annotations: [],\n attributes: {childrenType: 'Columns'},\n },\n children: [\n {\n block: {\n id: 'col-1',\n type: 'Paragraph',\n text: '',\n annotations: [],\n attributes: {childrenType: 'Group'},\n },\n children: [\n {\n block: {\n id: 'p1',\n type: 'Paragraph',\n text: 'Left',\n annotations: [],\n attributes: {},\n },\n children: [],\n },\n ],\n },\n {\n block: {\n id: 'col-2',\n type: 'Paragraph',\n text: '',\n annotations: [],\n attributes: {childrenType: 'Group'},\n },\n children: [\n {\n block: {\n id: 'p2',\n type: 'Paragraph',\n text: 'Right',\n annotations: [],\n attributes: {},\n },\n children: [],\n },\n ],\n },\n ],\n },\n ]\n const result = hmBlocksToEditorContent(blocks)\n expect(result[0].props.childrenType).toBe('Columns')\n expect(result[0].children).toHaveLength(2)\n expect(result[0].children[0].children).toHaveLength(1)\n expect(result[0].children[1].children).toHaveLength(1)\n})\n",{"_30":876,"_34":877},[],{"_36":37,"_38":878,"_40":41,"_42":879,"_44":880,"_70":885,"_55":56},"Hdwy-6-l",{},[881],{"_36":58,"_48":882,"_51":883,"_42":884,"_55":56},[50],[854],{},"frontend/packages/shared/src/client/__tests__/editorblock-to-hmblock.test.ts",{"_30":887,"_34":888},[],{"_36":37,"_38":889,"_40":41,"_42":890,"_44":891,"_70":867,"_55":56},"Ay11KIH5",{},[892],{"_36":58,"_48":893,"_51":894,"_42":895,"_55":56},[306],[241],{},{"_30":897,"_34":898},[],{"_36":58,"_38":899,"_40":41,"_42":900,"_44":901,"_70":902,"_55":56},"Lw8GMHzN",{"_136":264},[],"test('Columns', () => {\n const editorBlock: EditorBlock = {\n id: 'foo',\n type: 'paragraph',\n children: [],\n props: {childrenType: 'Columns'},\n content: [],\n }\n const val = editorBlockToHMBlock(editorBlock)\n expect(val.attributes.childrenType).toBe('Columns')\n})\n",{"_36":73,"_38":904,"_40":41,"_42":905,"_44":906,"_70":907,"_55":56},"uB6JfnRc",{"_76":77},[],"Unit Tests — Block Conversion",{"_30":909,"_34":948},[910,922,929,941],{"_30":911,"_34":912},[],{"_36":37,"_38":913,"_40":41,"_42":914,"_44":915,"_70":921,"_55":56},"ClqMEkVp",{},[916],{"_36":58,"_48":917,"_51":918,"_42":920,"_55":56},[50],[919],93,{},"frontend/packages/editor/src/blocknote/core/api/blockManipulation/__tests__/nestBlock.test.ts",{"_30":923,"_34":924},[],{"_36":58,"_38":925,"_40":41,"_42":926,"_44":927,"_70":928,"_55":56},"4_7627Je",{"_136":264},[],"describe('Columns container', () => {\n it('prevents nesting column wrapper blocks', () => {\n // Column wrapper (direct child of Columns) cannot be indented\n const doc = buildDoc(schema, [\n {\n id: 'cols-container',\n text: '',\n children: {\n listType: 'Columns',\n blocks: [\n {\n id: 'col-1',\n text: '',\n children: {blocks: [{id: 'p1', text: 'Left'}]},\n },\n {\n id: 'col-2',\n text: '',\n children: {blocks: [{id: 'p2', text: 'Right'}]},\n },\n ],\n },\n },\n ])\n const state = EditorState.create({doc, schema})\n const editor = createMockEditor(state)\n const pos = findPosInBlock(doc, 'col-2')\n const result = nestBlock(editor, pos)\n expect(result).toBe(false)\n })\n\n it('allows nesting content blocks inside a column', () => {\n // Content inside a column (regular Group) CAN be nested normally\n const doc = buildDoc(schema, [\n {\n id: 'cols-container',\n text: '',\n children: {\n listType: 'Columns',\n blocks: [\n {\n id: 'col-1',\n text: '',\n children: {\n blocks: [\n {id: 'p1', text: 'First'},\n {id: 'p2', text: 'Second'},\n ],\n },\n },\n ],\n },\n },\n ])\n const state = EditorState.create({doc, schema})\n const editor = createMockEditor(state)\n const pos = findPosInBlock(doc, 'p2')\n const result = nestBlock(editor, pos)\n expect(result).toBe(true)\n })\n})\n",{"_30":930,"_34":931},[],{"_36":37,"_38":932,"_40":41,"_42":933,"_44":934,"_70":940,"_55":56},"qPcxQOpx",{},[935],{"_36":58,"_48":936,"_51":937,"_42":939,"_55":56},[50],[938],95,{},"frontend/packages/editor/src/blocknote/core/api/blockManipulation/__tests__/mergeBlocks.test.ts",{"_30":942,"_34":943},[],{"_36":58,"_38":944,"_40":41,"_42":945,"_44":946,"_70":947,"_55":56},"fcMKyC7_",{"_136":264},[],"describe('Columns container', () => {\n it('prevents merging blocks across column boundaries', () => {\n // Block at end of col-1 + Backspace should NOT merge with start of col-2\n const doc = buildDoc(schema, [\n {\n id: 'cols-container',\n text: '',\n children: {\n listType: 'Columns',\n blocks: [\n {\n id: 'col-1',\n text: '',\n children: {blocks: [{id: 'p1', text: 'Left'}]},\n },\n {\n id: 'col-2',\n text: '',\n children: {blocks: [{id: 'p2', text: 'Right'}]},\n },\n ],\n },\n },\n ])\n const state = EditorState.create({doc, schema})\n const editor = createMockEditor(state)\n // Place cursor at start of p2 and try to merge backwards\n const pos = findPosInBlock(doc, 'p2')\n const result = mergeBlocks(editor, pos)\n expect(result).toBe(false)\n })\n})\n",{"_36":73,"_38":949,"_40":41,"_42":950,"_44":951,"_70":952,"_55":56},"enorrm92",{"_76":77},[],"Unit Tests — Editor Commands",{"_30":954,"_34":974},[955,967],{"_30":956,"_34":957},[],{"_36":37,"_38":958,"_40":41,"_42":959,"_44":960,"_70":966,"_55":56},"BmSYryk5",{},[961],{"_36":58,"_48":962,"_51":963,"_42":965,"_55":56},[50],[964],55,{},"frontend/packages/shared/src/__tests__/hm-types.test.ts",{"_30":968,"_34":969},[],{"_36":58,"_38":970,"_40":41,"_42":971,"_44":972,"_70":973,"_55":56},"8Nxlnfpx",{"_136":264},[],"test('HMBlockChildrenType accepts Columns', () => {\n expect(HMBlockChildrenTypeSchema.parse('Columns')).toBe('Columns')\n})\n",{"_36":73,"_38":975,"_40":41,"_42":976,"_44":977,"_70":978,"_55":56},"SF2V2FgQ",{"_76":77},[],"Unit Tests — Type Schema",{"_36":73,"_38":980,"_40":41,"_42":981,"_44":982,"_70":983,"_55":56},"zi1fkh5V",{"_76":77},[],"Testing",{"_30":985,"_34":1001},[986,994],{"_30":987,"_34":988},[],{"_36":58,"_38":989,"_40":41,"_42":990,"_44":992,"_70":993,"_55":56},"1kqRCHwn",{"_136":991},"bash",[],"# Format all code\npnpm format:write\n\n# Type check everything\npnpm typecheck\n\n# Run shared package tests (block conversion)\npnpm --filter @shm/shared test\n\n# Run editor package tests (block manipulation)\npnpm --filter @shm/editor test\n\n# Run all tests\npnpm test\n",{"_30":995,"_34":996},[],{"_36":37,"_38":997,"_40":41,"_42":998,"_44":999,"_70":1000,"_55":56},"LKsy8fWQ",{},[],"All must pass with zero failures.",{"_36":73,"_38":1002,"_40":41,"_42":1003,"_44":1004,"_70":1005,"_55":56},"Xux_-n0w",{"_76":77},[],"Pre-Completion Checks",{"_30":1007,"_34":1053},[1008],{"_30":1009,"_34":1010},[],{"_36":37,"_38":1011,"_40":41,"_42":1012,"_44":1013,"_70":1052,"_55":56},"T61YnNnd",{},[1014],{"_36":58,"_48":1015,"_51":1033,"_42":1051,"_55":56},[1016,1017,1018,1019,1020,1021,1022,1023,1024,1025,1026,1027,1028,1029,1030,1031,1032],165,212,236,325,349,459,607,733,857,968,1020,1047,1118,1132,1209,1223,1291,[1034,1035,1036,1037,1038,1039,1040,1041,1042,1043,1044,1045,1046,1047,1048,1049,1050],205,221,318,334,433,561,694,822,938,1017,1028,1108,1127,1193,1218,1266,1304,{},"| File | Changes | | ---------------------------------------------------------------------------------------------- | ------------------------------------------ | | frontend/packages/shared/src/hm-types.ts | Add 'Columns' to schema | | frontend/packages/editor/src/blocknote/core/extensions/Blocks/api/defaultBlocks.ts | Add 'Columns' to values | | frontend/packages/editor/src/blocknote/core/extensions/Blocks/nodes/BlockChildren.ts | Flex row rendering | | frontend/packages/editor/src/blocknote/core/extensions/KeyboardShortcuts/KeyboardShortcutsExtension.ts | Cross-column merge guards, Enter guard | | frontend/packages/editor/src/blocknote/core/api/blockManipulation/commands/nestBlock.ts | Prevent nesting column wrappers | | frontend/packages/editor/src/blocknote/core/api/blockManipulation/commands/mergeBlocks.ts | Prevent cross-column merges | | frontend/packages/editor/src/blocknote/core/extensions/SideMenu/SideMenuPlugin.ts | Column-aware drag-drop | | frontend/packages/editor/src/slash-menu-items.tsx | /columns slash command | | frontend/packages/shared/src/client/hmblock-to-editorblock.ts | Accept 'Columns' | | frontend/packages/shared/src/client/editorblock-to-hmblock.ts | Pass through 'Columns' | | frontend/packages/ui/src/blocks-content.tsx | Flex row rendering in BlockNodeList |",{"_36":73,"_38":1054,"_40":41,"_42":1055,"_44":1056,"_70":1057,"_55":56},"PCr8OlD2",{"_76":77},[],"Files to Modify",{"_30":1059,"_34":1081},[1060],{"_30":1061,"_34":1062},[],{"_36":37,"_38":1063,"_40":41,"_42":1064,"_44":1065,"_70":1080,"_55":56},"l4otLa3u",{},[1066],{"_36":58,"_48":1067,"_51":1073,"_42":1079,"_55":56},[1068,1069,1070,1071,1072],172,293,403,535,667,[1074,1075,1076,1077,1078],248,369,496,630,722,{},"| File | Additions | | -------------------------------------------------------------------------------------------------------- | ------------------------------------- | | frontend/packages/shared/src/client/__tests__/hmblock-to-editorblock.test.ts | Columns conversion + nested structure | | frontend/packages/shared/src/client/__tests__/editorblock-to-hmblock.test.ts | Columns reverse conversion | | frontend/packages/editor/src/blocknote/core/api/blockManipulation/__tests__/nestBlock.test.ts | Prevent nesting column wrappers | | frontend/packages/editor/src/blocknote/core/api/blockManipulation/__tests__/mergeBlocks.test.ts | Cross-column merge prevention | | frontend/packages/shared/src/__tests__/hm-types.test.ts | Columns schema validation |",{"_36":73,"_38":1082,"_40":41,"_42":1083,"_44":1084,"_70":1085,"_55":56},"80uKOhdC",{"_76":77},[],"Test Files",{"_30":1087,"_34":1121},[1088,1100,1107,1114],{"_30":1089,"_34":1090},[],{"_36":37,"_38":1091,"_40":41,"_42":1092,"_44":1093,"_70":1099,"_55":56},"UVxbqhvp",{},[1094],{"_36":58,"_48":1095,"_51":1096,"_42":1098,"_55":56},[255,53],[164,1097],65,{},"Old clients: 'Columns' falls through to default

Prerequisites

Grid Layout (Phase 1) must be implemented first. This plan assumes 'Grid' already exists in HMBlockChildrenTypeSchema, the editor guards pattern (isInGridContainer) is established, and BlockNodeList rendering has been extended.

Context

With Grid done, we now want Fixed Columns: explicit column containers where each child IS a column with its own independent content. Unlike Grid (items flow/wrap), Columns give users explicit control — each column is a separate content area with its own block tree.

Think Notion columns or newspaper layouts — not a card grid.

Key Difference from Grid

| Aspect | Grid (Phase 1) | Columns (Phase 2) | | ----------------- | --------------------------------- | --------------------------------------------- | | Nesting depth | 1 level (container -> items) | 2 levels (container -> column wrappers -> content) | | Column count | Attribute (columnCount) | Number of direct children | | Item overflow | Wraps to next row | No overflow, each column is independent | | Content per column| Single block per cell | Multiple blocks per column | | Width control | Equal width, CSS grid | Per-column via columnWidths attribute |

Data Model

BlockNode {\n  block: {\n    id: "cols-1",\n    type: "Paragraph",\n    text: "",\n    attributes: { childrenType: "Columns", columnWidths: [60, 40] }\n  }\n  children: [\n    BlockNode {\n      block: {\n        id: "col-1",\n        type: "Paragraph",\n        text: "",\n        attributes: { childrenType: "Group" }\n      }\n      children: [\n        BlockNode { block: { id: "p1", type: "Paragraph", text: "Left content" } }\n        BlockNode { block: { id: "img1", type: "Image", ... } }\n      ]\n    },\n    BlockNode {\n      block: {\n        id: "col-2",\n        type: "Paragraph",\n        text: "",\n        attributes: { childrenType: "Group" }\n      }\n      children: [\n        BlockNode { block: { id: "p2", type: "Paragraph", text: "Right content" } }\n      ]\n    }\n  ]\n}\n

ProseMirror tree:

blockNode (container)\n  block:paragraph ("")                    <- empty, invisible\n  blockChildren [listType='Columns']      <- CSS flex row\n    blockNode (column 1)\n      block:paragraph ("")                <- empty, invisible\n      blockChildren [listType='Group']    <- column 1 content\n        blockNode -> paragraph ("Left text")\n        blockNode -> image (...)\n    blockNode (column 2)\n      block:paragraph ("")\n      blockChildren [listType='Group']    <- column 2 content\n        blockNode -> paragraph ("Right text")\n

Attributes on container:

columnWidths: number[] (optional, percentages summing to 100, e.g. [60, 40])
Column count = number of direct children (not an attribute)

CRDT Behavior

Different columns = independent RGA sublists -> no conflicts
Same column = standard RGA merge within that column's child list
Add/remove columns = OpMoveBlocks on container's child list
Move blocks between columns = OpMoveBlocks changing parent -> last-write-wins if concurrent
No CRDT changes needed.

Implementation Steps

Step 1: Types & Schema

frontend/packages/shared/src/hm-types.ts

Add 'Columns' to HMBlockChildrenTypeSchema (Grid already present from Phase 1):

z.union([\n  z.literal('Group'),\n  z.literal('Ordered'),\n  z.literal('Unordered'),\n  z.literal('Blockquote'),\n  z.literal('Grid'),\n  z.literal('Columns'),\n])\n

frontend/packages/editor/src/blocknote/core/extensions/Blocks/api/defaultBlocks.ts

childrenType: {\n  default: 'Group',\n  values: ['Group', 'Unordered', 'Ordered', 'Blockquote', 'Grid', 'Columns'],\n}\n

Step 2: Block Conversion

frontend/packages/shared/src/client/hmblock-to-editorblock.ts

Accept 'Columns' as valid childrenType (same pattern as Grid from Phase 1)

frontend/packages/shared/src/client/editorblock-to-hmblock.ts

Pass through 'Columns' childrenType
Preserve columnWidths attribute in conversion

Step 3: Editor — BlockChildren Rendering

frontend/packages/editor/src/blocknote/core/extensions/Blocks/nodes/BlockChildren.ts

listNode(): Add case for 'Columns' — render as <div> with display: flex; flex-direction: row; gap styles
Each child blockNode inside a Columns container renders as a flex item
addInputRules(): Phase 1 Grid guard already exists — extend to also cover Columns

Step 4: Editor — Keyboard Guards

frontend/packages/editor/src/blocknote/core/extensions/KeyboardShortcuts/KeyboardShortcutsExtension.ts

Rename Phase 1's isInGridContainer() -> isInLayoutContainer() covering both Grid and Columns.

Additional guards needed beyond what Grid already has:

| Handler | Guard | | ------------------------ | -------------------------------------------------------------------- | | handleBackspace (~26) | Prevent merging across column boundaries (col-1 block can't merge with col-2 block) | | handleDelete (~315) | Same — prevent cross-column merging | | handleEnter (~423) | On empty block inside column: stay in column, don't unnest to parent | | handleTab (~541) | Prevent indent of column wrappers — already guarded by Phase 1 | | Shift-Tab (~621) | Prevent outdent of column wrappers — already guarded by Phase 1 |

Step 5: Editor — Block Manipulation Commands

frontend/packages/editor/src/blocknote/core/api/blockManipulation/commands/nestBlock.ts

Phase 1 already prevents nesting in Grid. Extend to:

Prevent nesting column wrapper blocks (direct children of Columns container)
Content blocks INSIDE a column CAN still be nested normally (they're inside a regular Group)

frontend/packages/editor/src/blocknote/core/api/blockManipulation/commands/mergeBlocks.ts

canMerge(): Add guard — blocks in different columns cannot merge
getPrevBlockInfo(): Stop traversal at column wrapper boundaries

Step 6: Editor — Slash Menu

frontend/packages/editor/src/slash-menu-items.tsx

{\n  name: 'Columns',\n  aliases: ['cols', 'side-by-side', 'split'],\n  group: 'Layout',\n  icon: ColumnsIcon,\n  execute: (editor) => {\n    // 1. Replace current block with empty block, set childrenType: 'Columns'\n    // 2. Create 2 child blocks (column wrappers), each with childrenType: 'Group'\n    // 3. Each column wrapper gets 1 empty paragraph child\n    // 4. Place cursor in first column's paragraph\n  }\n}\n

Step 7: Editor — Column Management UI

Floating toolbar on the Columns container (on hover/selection):

"Add Column" button — creates a new column wrapper child
"Remove Column" button — removes the last column (min 2 enforced)
Column count display (e.g., "2 columns")
"Convert to normal blocks" — flattens: removes column wrappers, moves all content blocks to parent level

Column width resize handles:

Draggable divider between columns
Updates columnWidths attribute on the container block
Visual feedback during drag

Step 8: Read-Only Rendering

frontend/packages/ui/src/blocks-content.tsx — BlockNodeList (line 464):

if (childrenType === 'Columns') {\n  return (\n    <div\n      className="flex flex-row gap-4 w-full"\n      data-node-type="blockGroup"\n      data-list-type="Columns"\n    >\n      {children}\n    </div>\n  )\n}\n

BlockNodeContent: When parent is Columns:

Each child renders as a flex item with flex: 1 (or proportional width from columnWidths)
Hide the empty container paragraph block (invisible wrapper)
Column content renders normally via recursive BlockNodeList

Step 9: Editor — Drag and Drop

frontend/packages/editor/src/blocknote/core/extensions/SideMenu/SideMenuPlugin.ts

blockPositionsFromSelection(): Prevent selection spanning multiple columns
onDrop(): Calculate drop target with column awareness — blocks dropped on a column land inside it
Future follow-up: side-drop indicators (like BlockNote's multiColumnDropCursor) for dragging blocks into new columns

Step 10: Responsive Behavior

CSS media queries:

Below tablet breakpoint: flex-direction: column — columns stack vertically
Column widths reset to 100% on mobile

Testing

Unit Tests — Block Conversion

frontend/packages/shared/src/client/__tests__/hmblock-to-editorblock.test.ts

Add to existing describe('childrenType'):

test('Columns', () => {\n  const hmBlock: HMBlock = {\n    id: 'foo',\n    type: 'Paragraph',\n    text: '',\n    annotations: [],\n    attributes: {childrenType: 'Columns'},\n    revision: 'revision123',\n  }\n  const val = hmBlockToEditorBlock(hmBlock)\n  expect(val.props.childrenType).toBe('Columns')\n})\n\ntest('Columns with columnWidths attribute', () => {\n  const hmBlock: HMBlock = {\n    id: 'foo',\n    type: 'Paragraph',\n    text: '',\n    annotations: [],\n    attributes: {childrenType: 'Columns', columnWidths: [60, 40]},\n    revision: 'revision123',\n  }\n  const val = hmBlockToEditorBlock(hmBlock)\n  expect(val.props.childrenType).toBe('Columns')\n})\n\ntest('Columns with nested children structure', () => {\n  const blocks: HMBlockNode[] = [\n    {\n      block: {\n        id: 'cols-1',\n        type: 'Paragraph',\n        text: '',\n        annotations: [],\n        attributes: {childrenType: 'Columns'},\n      },\n      children: [\n        {\n          block: {\n            id: 'col-1',\n            type: 'Paragraph',\n            text: '',\n            annotations: [],\n            attributes: {childrenType: 'Group'},\n          },\n          children: [\n            {\n              block: {\n                id: 'p1',\n                type: 'Paragraph',\n                text: 'Left',\n                annotations: [],\n                attributes: {},\n              },\n              children: [],\n            },\n          ],\n        },\n        {\n          block: {\n            id: 'col-2',\n            type: 'Paragraph',\n            text: '',\n            annotations: [],\n            attributes: {childrenType: 'Group'},\n          },\n          children: [\n            {\n              block: {\n                id: 'p2',\n                type: 'Paragraph',\n                text: 'Right',\n                annotations: [],\n                attributes: {},\n              },\n              children: [],\n            },\n          ],\n        },\n      ],\n    },\n  ]\n  const result = hmBlocksToEditorContent(blocks)\n  expect(result[0].props.childrenType).toBe('Columns')\n  expect(result[0].children).toHaveLength(2)\n  expect(result[0].children[0].children).toHaveLength(1)\n  expect(result[0].children[1].children).toHaveLength(1)\n})\n

frontend/packages/shared/src/client/__tests__/editorblock-to-hmblock.test.ts

Add to existing describe('childrenType'):

test('Columns', () => {\n  const editorBlock: EditorBlock = {\n    id: 'foo',\n    type: 'paragraph',\n    children: [],\n    props: {childrenType: 'Columns'},\n    content: [],\n  }\n  const val = editorBlockToHMBlock(editorBlock)\n  expect(val.attributes.childrenType).toBe('Columns')\n})\n

Unit Tests — Editor Commands

frontend/packages/editor/src/blocknote/core/api/blockManipulation/__tests__/nestBlock.test.ts

describe('Columns container', () => {\n  it('prevents nesting column wrapper blocks', () => {\n    // Column wrapper (direct child of Columns) cannot be indented\n    const doc = buildDoc(schema, [\n      {\n        id: 'cols-container',\n        text: '',\n        children: {\n          listType: 'Columns',\n          blocks: [\n            {\n              id: 'col-1',\n              text: '',\n              children: {blocks: [{id: 'p1', text: 'Left'}]},\n            },\n            {\n              id: 'col-2',\n              text: '',\n              children: {blocks: [{id: 'p2', text: 'Right'}]},\n            },\n          ],\n        },\n      },\n    ])\n    const state = EditorState.create({doc, schema})\n    const editor = createMockEditor(state)\n    const pos = findPosInBlock(doc, 'col-2')\n    const result = nestBlock(editor, pos)\n    expect(result).toBe(false)\n  })\n\n  it('allows nesting content blocks inside a column', () => {\n    // Content inside a column (regular Group) CAN be nested normally\n    const doc = buildDoc(schema, [\n      {\n        id: 'cols-container',\n        text: '',\n        children: {\n          listType: 'Columns',\n          blocks: [\n            {\n              id: 'col-1',\n              text: '',\n              children: {\n                blocks: [\n                  {id: 'p1', text: 'First'},\n                  {id: 'p2', text: 'Second'},\n                ],\n              },\n            },\n          ],\n        },\n      },\n    ])\n    const state = EditorState.create({doc, schema})\n    const editor = createMockEditor(state)\n    const pos = findPosInBlock(doc, 'p2')\n    const result = nestBlock(editor, pos)\n    expect(result).toBe(true)\n  })\n})\n

frontend/packages/editor/src/blocknote/core/api/blockManipulation/__tests__/mergeBlocks.test.ts

describe('Columns container', () => {\n  it('prevents merging blocks across column boundaries', () => {\n    // Block at end of col-1 + Backspace should NOT merge with start of col-2\n    const doc = buildDoc(schema, [\n      {\n        id: 'cols-container',\n        text: '',\n        children: {\n          listType: 'Columns',\n          blocks: [\n            {\n              id: 'col-1',\n              text: '',\n              children: {blocks: [{id: 'p1', text: 'Left'}]},\n            },\n            {\n              id: 'col-2',\n              text: '',\n              children: {blocks: [{id: 'p2', text: 'Right'}]},\n            },\n          ],\n        },\n      },\n    ])\n    const state = EditorState.create({doc, schema})\n    const editor = createMockEditor(state)\n    // Place cursor at start of p2 and try to merge backwards\n    const pos = findPosInBlock(doc, 'p2')\n    const result = mergeBlocks(editor, pos)\n    expect(result).toBe(false)\n  })\n})\n

Unit Tests — Type Schema

frontend/packages/shared/src/__tests__/hm-types.test.ts

test('HMBlockChildrenType accepts Columns', () => {\n  expect(HMBlockChildrenTypeSchema.parse('Columns')).toBe('Columns')\n})\n

Pre-Completion Checks

# Format all code\npnpm format:write\n\n# Type check everything\npnpm typecheck\n\n# Run shared package tests (block conversion)\npnpm --filter @shm/shared test\n\n# Run editor package tests (block manipulation)\npnpm --filter @shm/editor test\n\n# Run all tests\npnpm test\n

All must pass with zero failures.

Files to Modify

| File | Changes | | ---------------------------------------------------------------------------------------------- | ------------------------------------------ | | frontend/packages/shared/src/hm-types.ts | Add 'Columns' to schema | | frontend/packages/editor/src/blocknote/core/extensions/Blocks/api/defaultBlocks.ts | Add 'Columns' to values | | frontend/packages/editor/src/blocknote/core/extensions/Blocks/nodes/BlockChildren.ts | Flex row rendering | | frontend/packages/editor/src/blocknote/core/extensions/KeyboardShortcuts/KeyboardShortcutsExtension.ts | Cross-column merge guards, Enter guard | | frontend/packages/editor/src/blocknote/core/api/blockManipulation/commands/nestBlock.ts | Prevent nesting column wrappers | | frontend/packages/editor/src/blocknote/core/api/blockManipulation/commands/mergeBlocks.ts | Prevent cross-column merges | | frontend/packages/editor/src/blocknote/core/extensions/SideMenu/SideMenuPlugin.ts | Column-aware drag-drop | | frontend/packages/editor/src/slash-menu-items.tsx | /columns slash command | | frontend/packages/shared/src/client/hmblock-to-editorblock.ts | Accept 'Columns' | | frontend/packages/shared/src/client/editorblock-to-hmblock.ts | Pass through 'Columns' | | frontend/packages/ui/src/blocks-content.tsx | Flex row rendering in BlockNodeList |

Test Files

| File | Additions | | -------------------------------------------------------------------------------------------------------- | ------------------------------------- | | frontend/packages/shared/src/client/__tests__/hmblock-to-editorblock.test.ts | Columns conversion + nested structure | | frontend/packages/shared/src/client/__tests__/editorblock-to-hmblock.test.ts | Columns reverse conversion | | frontend/packages/editor/src/blocknote/core/api/blockManipulation/__tests__/nestBlock.test.ts | Prevent nesting column wrappers | | frontend/packages/editor/src/blocknote/core/api/blockManipulation/__tests__/mergeBlocks.test.ts | Cross-column merge prevention | | frontend/packages/shared/src/__tests__/hm-types.test.ts | Columns schema validation |

Backwards Compatibility

Old clients: 'Columns' falls through to default <ul class="pl-3"> — content visible, stacked vertically
Column wrapper blocks render as empty paragraphs with nested content — readable but not side-by-side
No proto changes needed (attributes are open Struct)
No CRDT changes needed