[{"_1":2,"_4726":-5,"_4727":-5},"loaderData",{"_3":4,"_12":13},"root",{"_5":6,"_7":8,"_9":10,"_11":10},"isProd",true,"enableStats",false,"domain","dailyplanet.io","siteHost","routes/$",{"_14":15,"_4276":4277},"json",{"_16":17,"_18":19,"_20":-5,"_21":-5,"_22":-5,"_23":8,"_24":-5,"_25":26,"_886":6,"_38":887,"_899":900,"_901":902,"_4254":4255,"_4256":6,"_11":4257,"_4258":4257,"_4259":4260,"_4271":4272},"prefersLanguages",[],"viewTerm","collaborators","panelParam","openComment","accountUid","isInspect","inspectTab","document",{"_27":28,"_862":41,"_863":864,"_865":866,"_868":869,"_870":871,"_872":871,"_873":874,"_877":878,"_879":41,"_880":881,"_884":885},"content",[29,125,186,221,664,799,828],{"_30":31,"_34":120},"children",[32,63,77],{"_30":33,"_34":35},[],"block",{"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_61":62,"_59":60},"type","Paragraph","id","f-1vJuWs","revision","bafy2bzaceczaw7sbjl6xstxjmh7nh2omxvhabat27vjorhwjx6wmztvhep6a4","attributes",{},"annotations",[46],{"_36":47,"_48":49,"_53":54,"_42":58,"_59":60},"Code","starts",[50,51,52],23,149,198,"ends",[55,56,57],52,160,214,{},"link","","text","Documents are trees of BlockNode { block, children }. Blocks stack vertically — no way to flow items into a multi-column grid. The Query block has a columnCount attribute with CSS grid rendering in DocumentCardGrid, but this only applies to query results (document cards), not arbitrary block content.",{"_30":64,"_34":65},[],{"_36":37,"_38":66,"_40":41,"_42":67,"_44":68,"_61":76,"_59":60},"bekAyHKt",{},[69],{"_36":70,"_48":71,"_53":73,"_42":75,"_59":60},"Bold",[72],10,[74],19,{},"We want a Flow Grid layout: items wrap into N columns automatically. Column count is defined by an attribute, and items stack/wrap when there are more items than columns. Think Pinterest / card grid / the Query block's card view — but for any block type.",{"_30":78,"_34":106},[79],{"_30":80,"_34":81},[],{"_36":37,"_38":82,"_40":41,"_42":83,"_44":84,"_61":105,"_59":60},"8aJORhag",{},[85],{"_36":47,"_48":86,"_53":95,"_42":104,"_59":60},[87,88,89,90,91,92,93,94],76,111,140,151,216,228,256,330,[96,97,98,99,100,101,102,103],108,116,147,153,227,234,282,342,{},"Our editor is forked from an old BlockNote. The ProseMirror schema enforces blockNode → block blockChildren? — block nodes can only contain inline* or ''. Adding custom PM nodes outside this hierarchy (like Notion's column_list/column or BlockNote v0.19's @blocknote/xl-multi-column) requires refactoring 15-20+ editor files. The childrenType approach produces the same tree shape but fits within the existing schema.",{"_36":107,"_38":108,"_40":41,"_42":109,"_44":112,"_61":119,"_59":60},"Heading","o_AqWeY1",{"_110":111},"childrenType","Group",[113],{"_36":47,"_48":114,"_53":116,"_42":118,"_59":60},[115],4,[117],16,{},"Why childrenType and not dedicated block types?",{"_36":107,"_38":121,"_40":41,"_42":122,"_44":123,"_61":124,"_59":60},"wX6Se3wx",{"_110":111},[],"Context",{"_30":126,"_34":181},[127,135,142,149],{"_30":128,"_34":129},[],{"_36":47,"_38":130,"_40":41,"_42":131,"_44":133,"_61":134,"_59":60},"0Fg78xgl",{"_132":60},"language",[],"BlockNode {\n block: {\n id: \"grid-1\",\n type: \"Paragraph\",\n text: \"\",\n attributes: { childrenType: \"Grid\", columnCount: 3 }\n }\n children: [\n BlockNode { block: { id: \"item-1\", type: \"Image\", ... } }\n BlockNode { block: { id: \"item-2\", type: \"Image\", ... } }\n BlockNode { block: { id: \"item-3\", type: \"Image\", ... } }\n BlockNode { block: { id: \"item-4\", type: \"Image\", ... } } <- wraps to row 2\n ]\n}\n",{"_30":136,"_34":137},[],{"_36":37,"_38":138,"_40":41,"_42":139,"_44":140,"_61":141,"_59":60},"XKilKEfT",{},[],"ProseMirror tree:",{"_30":143,"_34":144},[],{"_36":47,"_38":145,"_40":41,"_42":146,"_44":147,"_61":148,"_59":60},"xK_o5ysN",{"_132":60},[],"blockNode (container)\n block:paragraph (\"\") <- empty, invisible\n blockChildren [listType='Grid'] <- CSS grid\n blockNode -> block:image (...)\n blockNode -> block:image (...)\n blockNode -> block:image (...)\n blockNode -> block:image (...) <- wraps to row 2\n",{"_30":150,"_34":175},[151,163],{"_30":152,"_34":153},[],{"_36":37,"_38":154,"_40":41,"_42":155,"_44":156,"_61":162,"_59":60},"Os4M1bAY",{},[157],{"_36":47,"_48":158,"_53":160,"_42":161,"_59":60},[159],0,[74],{},"columnCount: number (1-4, default 3) — max columns before wrapping",{"_30":164,"_34":165},[],{"_36":37,"_38":166,"_40":41,"_42":167,"_44":168,"_61":174,"_59":60},"o-dkSZ59",{},[169],{"_36":47,"_48":170,"_53":171,"_42":173,"_59":60},[159],[172],11,{},"gap: number (optional, px, default from layout unit)",{"_36":37,"_38":176,"_40":41,"_42":177,"_44":179,"_61":180,"_59":60},"l1YKKgJ9",{"_110":178},"Unordered",[],"Attributes on container block:",{"_36":107,"_38":182,"_40":41,"_42":183,"_44":184,"_61":185,"_59":60},"ISOafVgo",{"_110":111},[],"Data Model",{"_30":187,"_34":216},[188],{"_30":189,"_34":211},[190,197,204],{"_30":191,"_34":192},[],{"_36":37,"_38":193,"_40":41,"_42":194,"_44":195,"_61":196,"_59":60},"y9SIg1Vn",{},[],"Grid items are children in the container's RGA sublist",{"_30":198,"_34":199},[],{"_36":37,"_38":200,"_40":41,"_42":201,"_44":202,"_61":203,"_59":60},"9E57zMmT",{},[],"Concurrent adds: both items appear, ordered by opID",{"_30":205,"_34":206},[],{"_36":37,"_38":207,"_40":41,"_42":208,"_44":209,"_61":210,"_59":60},"nbfFq5c1",{},[],"Reordering: standard OpMoveBlocks",{"_36":37,"_38":212,"_40":41,"_42":213,"_44":214,"_61":215,"_59":60},"ie9yeN-L",{"_110":178},[],"Uses existing parent-child tree mechanics — no changes needed:",{"_36":107,"_38":217,"_40":41,"_42":218,"_44":219,"_61":220,"_59":60},"N_R6VJQj",{"_110":111},[],"CRDT Behavior",{"_30":222,"_34":659},[223,269,345,393,450,494,527,567,619],{"_30":224,"_34":264},[225,237,245,257],{"_30":226,"_34":227},[],{"_36":37,"_38":228,"_40":41,"_42":229,"_44":230,"_61":236,"_59":60},"h-iRETNx",{},[231],{"_36":47,"_48":232,"_53":233,"_42":235,"_59":60},[159],[234],40,{},"frontend/packages/shared/src/hm-types.ts (line 42-44)",{"_30":238,"_34":239},[],{"_36":47,"_38":240,"_40":41,"_42":241,"_44":243,"_61":244,"_59":60},"PUh878W8",{"_132":242},"ts",[],"// Before:\nz.union([\n z.literal('Group'),\n z.literal('Ordered'),\n z.literal('Unordered'),\n z.literal('Blockquote'),\n])\n\n// After:\nz.union([\n z.literal('Group'),\n z.literal('Ordered'),\n z.literal('Unordered'),\n z.literal('Blockquote'),\n z.literal('Grid'),\n])\n",{"_30":246,"_34":247},[],{"_36":37,"_38":248,"_40":41,"_42":249,"_44":250,"_61":256,"_59":60},"n48dLiTm",{},[251],{"_36":47,"_48":252,"_53":253,"_42":255,"_59":60},[159],[254],82,{},"frontend/packages/editor/src/blocknote/core/extensions/Blocks/api/defaultBlocks.ts (line 14-17)",{"_30":258,"_34":259},[],{"_36":47,"_38":260,"_40":41,"_42":261,"_44":262,"_61":263,"_59":60},"w3rgHvwP",{"_132":242},[],"// Add 'Grid' to childrenType values\nchildrenType: {\n default: 'Group',\n values: ['Group', 'Unordered', 'Ordered', 'Blockquote', 'Grid'],\n}\n",{"_36":107,"_38":265,"_40":41,"_42":266,"_44":267,"_61":268,"_59":60},"Sb1yw8WM",{"_110":111},[],"Step 1: Types & Schema",{"_30":270,"_34":340},[271,300],{"_30":272,"_34":290},[273],{"_30":274,"_34":275},[],{"_36":37,"_38":276,"_40":41,"_42":277,"_44":278,"_61":289,"_59":60},"4K5YWYRy",{},[279],{"_36":47,"_48":280,"_53":284,"_42":288,"_59":60},[281,282,283],3,35,74,[285,286,287],28,47,80,{},"In hmBlocksToEditorContent() where childrenType is validated/read: accept 'Grid' as valid value",{"_36":37,"_38":291,"_40":41,"_42":292,"_44":293,"_61":299,"_59":60},"X6ehRoeh",{"_110":178},[294],{"_36":47,"_48":295,"_53":296,"_42":298,"_59":60},[159],[297],61,{},"frontend/packages/shared/src/client/hmblock-to-editorblock.ts",{"_30":301,"_34":331},[302,318],{"_30":303,"_34":304},[],{"_36":37,"_38":305,"_40":41,"_42":306,"_44":307,"_61":317,"_59":60},"yFeprrc6",{},[308],{"_36":47,"_48":309,"_53":312,"_42":316,"_59":60},[281,310,311],32,84,[313,314,315],25,44,90,{},"In editorBlockToHMBlock() where childrenType is written to attributes: pass through 'Grid'",{"_30":319,"_34":320},[],{"_36":37,"_38":321,"_40":41,"_42":322,"_44":323,"_61":330,"_59":60},"Tm_ph4vH",{},[324],{"_36":47,"_48":325,"_53":327,"_42":329,"_59":60},[326],7,[328],18,{},"Ensure columnCount attribute is preserved in conversion",{"_36":37,"_38":332,"_40":41,"_42":333,"_44":334,"_61":339,"_59":60},"wS_bp0gc",{"_110":178},[335],{"_36":47,"_48":336,"_53":337,"_42":338,"_59":60},[159],[297],{},"frontend/packages/shared/src/client/editorblock-to-hmblock.ts",{"_36":107,"_38":341,"_40":41,"_42":342,"_44":343,"_61":344,"_59":60},"_8CCVDZ_",{"_110":111},[],"Step 2: Block Conversion",{"_30":346,"_34":388},[347],{"_30":348,"_34":379},[349,363],{"_30":350,"_34":351},[],{"_36":37,"_38":352,"_40":41,"_42":353,"_44":354,"_61":362,"_59":60},"10xw6Xed",{},[355],{"_36":47,"_48":356,"_53":358,"_42":361,"_59":60},[159,234,357],59,[72,359,360],46,64,{},"listNode() (line 228-238): Add case for 'Grid' — render as

with CSS grid classes",{"_30":364,"_34":365},[],{"_36":37,"_38":366,"_40":41,"_42":367,"_44":368,"_61":378,"_59":60},"asdO-mtI",{},[369],{"_36":47,"_48":370,"_53":373,"_42":377,"_59":60},[159,371,55,372],48,57,[374,375,376,357],15,50,55,{},"addInputRules(): Add guard so list input rules (- , 1. , > ) don't trigger inside Grid containers",{"_36":37,"_38":380,"_40":41,"_42":381,"_44":382,"_61":387,"_59":60},"MrLYcVTw",{"_110":178},[383],{"_36":47,"_48":384,"_53":385,"_42":386,"_59":60},[159],[311],{},"frontend/packages/editor/src/blocknote/core/extensions/Blocks/nodes/BlockChildren.ts",{"_36":107,"_38":389,"_40":41,"_42":390,"_44":391,"_61":392,"_59":60},"A1JMtdp3",{"_110":111},[],"Step 3: Editor — BlockChildren Rendering",{"_30":394,"_34":445},[395,407,423,438],{"_30":396,"_34":397},[],{"_36":37,"_38":398,"_40":41,"_42":399,"_44":400,"_61":406,"_59":60},"JWTF5QJ-",{},[401],{"_36":47,"_48":402,"_53":403,"_42":405,"_59":60},[159],[404],102,{},"frontend/packages/editor/src/blocknote/core/extensions/KeyboardShortcuts/KeyboardShortcutsExtension.ts",{"_30":408,"_34":409},[],{"_36":37,"_38":410,"_40":41,"_42":411,"_44":412,"_61":422,"_59":60},"-9N_DS1n",{},[413],{"_36":47,"_48":414,"_53":418,"_42":421,"_59":60},[415,416,417],13,89,107,[419,404,420],53,122,{},"Add utility: isInGridContainer(state, pos) -> boolean — checks if current block's parent blockChildren has listType='Grid'.",{"_30":424,"_34":425},[],{"_36":37,"_38":426,"_40":41,"_42":427,"_44":428,"_61":437,"_59":60},"DYJaAqdu",{},[429],{"_36":47,"_48":430,"_53":433,"_42":436,"_59":60},[431,432],87,145,[434,435],96,154,{},"| Handler | Guard | | ------------------- | -------------------------------------- | | handleTab (~541) | Prevent indent when parent is Grid | | Shift-Tab (~621) | Prevent outdent of grid children |",{"_30":439,"_34":440},[],{"_36":37,"_38":441,"_40":41,"_42":442,"_44":443,"_61":444,"_59":60},"9uLXO3xc",{},[],"Note: Enter, Backspace, Delete work normally inside a Grid — items are flat siblings, no cross-boundary issues.",{"_36":107,"_38":446,"_40":41,"_42":447,"_44":448,"_61":449,"_59":60},"u7s87rOS",{"_110":111},[],"Step 4: Editor — Keyboard Guards",{"_30":451,"_34":489},[452],{"_30":453,"_34":480},[454,468],{"_30":455,"_34":456},[],{"_36":37,"_38":457,"_40":41,"_42":458,"_44":459,"_61":467,"_59":60},"4nxWZhfR",{},[460],{"_36":47,"_48":461,"_53":463,"_42":466,"_59":60},[159,462],17,[464,465],14,31,{},"sinkListItem() / canNestBlock(): Return false if parent is Grid (prevent indenting grid items)",{"_30":469,"_34":470},[],{"_36":37,"_38":471,"_40":41,"_42":472,"_44":473,"_61":479,"_59":60},"BBim5eaG",{},[474],{"_36":47,"_48":475,"_53":476,"_42":478,"_59":60},[159,462],[464,477],33,{},"liftListItem() / canUnnestBlock(): Return false if block's parent group is Grid",{"_36":37,"_38":481,"_40":41,"_42":482,"_44":483,"_61":488,"_59":60},"tDuMa3M3",{"_110":178},[484],{"_36":47,"_48":485,"_53":486,"_42":487,"_59":60},[159],[431],{},"frontend/packages/editor/src/blocknote/core/api/blockManipulation/commands/nestBlock.ts",{"_36":107,"_38":490,"_40":41,"_42":491,"_44":492,"_61":493,"_59":60},"G_8fTDVe",{"_110":111},[],"Step 5: Editor — Block Manipulation Commands",{"_30":495,"_34":522},[496,508,515],{"_30":497,"_34":498},[],{"_36":37,"_38":499,"_40":41,"_42":500,"_44":501,"_61":507,"_59":60},"TW9eWarQ",{},[502],{"_36":47,"_48":503,"_53":504,"_42":506,"_59":60},[159],[505],49,{},"frontend/packages/editor/src/slash-menu-items.tsx",{"_30":509,"_34":510},[],{"_36":37,"_38":511,"_40":41,"_42":512,"_44":513,"_61":514,"_59":60},"ZA9V_1vG",{},[],"Add slash menu item:",{"_30":516,"_34":517},[],{"_36":47,"_38":518,"_40":41,"_42":519,"_44":520,"_61":521,"_59":60},"Yuvec7x8",{"_132":242},[],"{\n name: 'Grid',\n aliases: ['gallery', 'cards', 'grid'],\n group: 'Layout',\n icon: GridIcon,\n execute: (editor) => {\n // 1. Replace current block with empty block, set childrenType: 'Grid', columnCount: 3\n // 2. Create 3 empty paragraph child blocks\n // 3. Place cursor in first child\n }\n}\n",{"_36":107,"_38":523,"_40":41,"_42":524,"_44":525,"_61":526,"_59":60},"EeEWZoU3",{"_110":111},[],"Step 6: Editor — Slash Menu",{"_30":528,"_34":562},[529],{"_30":530,"_34":557},[531,544],{"_30":532,"_34":533},[],{"_36":37,"_38":534,"_40":41,"_42":535,"_44":536,"_61":543,"_59":60},"OR27YxEL",{},[537],{"_36":47,"_48":538,"_53":540,"_42":542,"_59":60},[539],45,[541],56,{},"Column count selector (1, 2, 3, 4) — updates columnCount attribute",{"_30":545,"_34":546},[],{"_36":37,"_38":547,"_40":41,"_42":548,"_44":549,"_61":556,"_59":60},"YGDrLP2x",{},[550],{"_36":47,"_48":551,"_53":553,"_42":555,"_59":60},[552],66,[554],114,{},"Reuse the pattern from the Query block's column count selector in frontend/apps/desktop/src/editor/query-block.tsx",{"_36":37,"_38":558,"_40":41,"_42":559,"_44":560,"_61":561,"_59":60},"_yFcMaWt",{"_110":178},[],"Create a toolbar/popover on the Grid container block that allows:",{"_36":107,"_38":563,"_40":41,"_42":564,"_44":565,"_61":566,"_59":60},"kUXZz3sX",{"_110":111},[],"Step 7: Editor — Grid Settings UI",{"_30":568,"_34":614},[569,581,589,596,603],{"_30":570,"_34":571},[],{"_36":37,"_38":572,"_40":41,"_42":573,"_44":574,"_61":580,"_59":60},"fitj6Dhl",{},[575],{"_36":47,"_48":576,"_53":577,"_42":579,"_59":60},[159,359],[578,357],43,{},"frontend/packages/ui/src/blocks-content.tsx — BlockNodeList (line 464):",{"_30":582,"_34":583},[],{"_36":47,"_38":584,"_40":41,"_42":585,"_44":587,"_61":588,"_59":60},"eP2pX0Ga",{"_132":586},"tsx",[],"if (childrenType === 'Grid') {\n return (\n \n {children}\n

\n )\n}\n",{"_30":590,"_34":591},[],{"_36":37,"_38":592,"_40":41,"_42":593,"_44":594,"_61":595,"_59":60},"EjjMlYgj",{},[],"Helper function:",{"_30":597,"_34":598},[],{"_36":47,"_38":599,"_40":41,"_42":600,"_44":601,"_61":602,"_59":60},"53NgyVIr",{"_132":242},[],"function gridColumnClass(count: number): string {\n switch (count) {\n case 1:\n return 'grid-cols-1'\n case 2:\n return 'grid-cols-1 sm:grid-cols-2'\n case 3:\n return 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3'\n case 4:\n return 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'\n default:\n return 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3'\n }\n}\n",{"_30":604,"_34":605},[],{"_36":37,"_38":606,"_40":41,"_42":607,"_44":608,"_61":613,"_59":60},"naPCSAW2",{},[609],{"_36":47,"_48":610,"_53":611,"_42":612,"_59":60},[159],[117],{},"BlockNodeContent: When inside a Grid, each child renders normally (no list markers). The empty container paragraph is hidden.",{"_36":107,"_38":615,"_40":41,"_42":616,"_44":617,"_61":618,"_59":60},"bus0IBq2",{"_110":111},[],"Step 8: Read-Only Rendering",{"_30":620,"_34":654},[621],{"_30":622,"_34":649},[623,630,637],{"_30":624,"_34":625},[],{"_36":37,"_38":626,"_40":41,"_42":627,"_44":628,"_61":629,"_59":60},"X6ZzL7-x",{},[],"Mobile: 1 column",{"_30":631,"_34":632},[],{"_36":37,"_38":633,"_40":41,"_42":634,"_44":635,"_61":636,"_59":60},"M1vBFQK2",{},[],"Tablet (sm): 2 columns",{"_30":638,"_34":639},[],{"_36":37,"_38":640,"_40":41,"_42":641,"_44":642,"_61":648,"_59":60},"Xmv8_Izc",{},[643],{"_36":47,"_48":644,"_53":646,"_42":647,"_59":60},[645],22,[477],{},"Desktop (md/lg): full columnCount",{"_36":37,"_38":650,"_40":41,"_42":651,"_44":652,"_61":653,"_59":60},"XoqGSOw1",{"_110":178},[],"Tailwind responsive prefixes handle column reduction automatically:",{"_36":107,"_38":655,"_40":41,"_42":656,"_44":657,"_61":658,"_59":60},"fT1UsX4z",{"_110":111},[],"Step 9: Responsive Behavior",{"_36":107,"_38":660,"_40":41,"_42":661,"_44":662,"_61":663,"_59":60},"Es6O-p2H",{"_110":111},[],"Implementation Steps",{"_30":665,"_34":794},[666,731,769],{"_30":667,"_34":726},[668,679,690,697,708,719],{"_30":669,"_34":670},[],{"_36":37,"_38":671,"_40":41,"_42":672,"_44":673,"_61":678,"_59":60},"d96ca5kD",{},[674],{"_36":47,"_48":675,"_53":676,"_42":677,"_59":60},[159],[87],{},"frontend/packages/shared/src/client/__tests__/hmblock-to-editorblock.test.ts",{"_30":680,"_34":681},[],{"_36":37,"_38":682,"_40":41,"_42":683,"_44":684,"_61":689,"_59":60},"DXObuwyw",{},[685],{"_36":47,"_48":686,"_53":687,"_42":688,"_59":60},[117],[234],{},"Add to existing describe('childrenType') block (follows pattern of Group/Unordered/Ordered tests):",{"_30":691,"_34":692},[],{"_36":47,"_38":693,"_40":41,"_42":694,"_44":695,"_61":696,"_59":60},"ejDHl5qN",{"_132":242},[],"test('Grid', () => {\n const hmBlock: HMBlock = {\n id: 'foo',\n type: 'Paragraph',\n text: '',\n annotations: [],\n attributes: {childrenType: 'Grid', columnCount: 3},\n revision: 'revision123',\n }\n const val = hmBlockToEditorBlock(hmBlock)\n expect(val.props.childrenType).toBe('Grid')\n})\n\ntest('Grid with children preserves structure', () => {\n const blocks: HMBlockNode[] = [\n {\n block: {\n id: 'grid-1',\n type: 'Paragraph',\n text: '',\n annotations: [],\n attributes: {childrenType: 'Grid', columnCount: 2},\n },\n children: [\n {\n block: {\n id: 'item-1',\n type: 'Paragraph',\n text: 'Item 1',\n annotations: [],\n attributes: {},\n },\n children: [],\n },\n {\n block: {\n id: 'item-2',\n type: 'Paragraph',\n text: 'Item 2',\n annotations: [],\n attributes: {},\n },\n children: [],\n },\n ],\n },\n ]\n const result = hmBlocksToEditorContent(blocks)\n expect(result[0].props.childrenType).toBe('Grid')\n expect(result[0].children).toHaveLength(2)\n})\n",{"_30":698,"_34":699},[],{"_36":37,"_38":700,"_40":41,"_42":701,"_44":702,"_61":707,"_59":60},"ef3857ed",{},[703],{"_36":47,"_48":704,"_53":705,"_42":706,"_59":60},[159],[87],{},"frontend/packages/shared/src/client/__tests__/editorblock-to-hmblock.test.ts",{"_30":709,"_34":710},[],{"_36":37,"_38":711,"_40":41,"_42":712,"_44":713,"_61":718,"_59":60},"bMWOCpUQ",{},[714],{"_36":47,"_48":715,"_53":716,"_42":717,"_59":60},[117],[234],{},"Add to existing describe('childrenType') block:",{"_30":720,"_34":721},[],{"_36":47,"_38":722,"_40":41,"_42":723,"_44":724,"_61":725,"_59":60},"XP-arHoq",{"_132":242},[],"test('Grid', () => {\n const editorBlock: EditorBlock = {\n id: 'foo',\n type: 'paragraph',\n children: [],\n props: {childrenType: 'Grid'},\n content: [{type: 'text', text: '', styles: {}}],\n }\n const val = editorBlockToHMBlock(editorBlock)\n expect(val.attributes.childrenType).toBe('Grid')\n})\n",{"_36":107,"_38":727,"_40":41,"_42":728,"_44":729,"_61":730,"_59":60},"Sn3F0tv9",{"_110":111},[],"Unit Tests — Block Conversion",{"_30":732,"_34":764},[733,745,757],{"_30":734,"_34":735},[],{"_36":37,"_38":736,"_40":41,"_42":737,"_44":738,"_61":744,"_59":60},"pCQZcQyt",{},[739],{"_36":47,"_48":740,"_53":741,"_42":743,"_59":60},[159],[742],93,{},"frontend/packages/editor/src/blocknote/core/api/blockManipulation/__tests__/nestBlock.test.ts",{"_30":746,"_34":747},[],{"_36":37,"_38":748,"_40":41,"_42":749,"_44":750,"_61":756,"_59":60},"Qp3IkeZr",{},[751],{"_36":47,"_48":752,"_53":754,"_42":755,"_59":60},[753,477],24,[310,505],{},"Add test using existing buildDoc/createMockEditor helpers:",{"_30":758,"_34":759},[],{"_36":47,"_38":760,"_40":41,"_42":761,"_44":762,"_61":763,"_59":60},"mfDH2t2H",{"_132":242},[],"describe('Grid container', () => {\n it('prevents nesting inside Grid', () => {\n const doc = buildDoc(schema, [\n {\n id: 'grid',\n text: '',\n children: {\n listType: 'Grid',\n blocks: [\n {id: 'item-1', text: 'Item 1'},\n {id: 'item-2', text: 'Item 2'},\n ],\n },\n },\n ])\n const state = EditorState.create({doc, schema})\n const editor = createMockEditor(state)\n const pos = findPosInBlock(doc, 'item-2')\n // Tab should NOT indent item-2 inside a Grid\n const result = nestBlock(editor, pos)\n expect(result).toBe(false)\n })\n})\n",{"_36":107,"_38":765,"_40":41,"_42":766,"_44":767,"_61":768,"_59":60},"n0Mcy8dt",{"_110":111},[],"Unit Tests — Editor Commands",{"_30":770,"_34":789},[771,782],{"_30":772,"_34":773},[],{"_36":37,"_38":774,"_40":41,"_42":775,"_44":776,"_61":781,"_59":60},"PgiK27_s",{},[777],{"_36":47,"_48":778,"_53":779,"_42":780,"_59":60},[159],[376],{},"frontend/packages/shared/src/__tests__/hm-types.test.ts (add to existing or create):",{"_30":783,"_34":784},[],{"_36":47,"_38":785,"_40":41,"_42":786,"_44":787,"_61":788,"_59":60},"Au4OThsq",{"_132":242},[],"import {HMBlockChildrenTypeSchema} from '../hm-types'\n\ndescribe('HMBlockChildrenType', () => {\n test('accepts Grid', () => {\n expect(HMBlockChildrenTypeSchema.parse('Grid')).toBe('Grid')\n })\n\n test('rejects invalid values', () => {\n expect(() => HMBlockChildrenTypeSchema.parse('InvalidType')).toThrow()\n })\n})\n",{"_36":107,"_38":790,"_40":41,"_42":791,"_44":792,"_61":793,"_59":60},"MqxYu2E_",{"_110":111},[],"Unit Tests — Type Schema Validation",{"_36":107,"_38":795,"_40":41,"_42":796,"_44":797,"_61":798,"_59":60},"qkmw-IWR",{"_110":111},[],"Testing",{"_30":800,"_34":823},[801,808,816],{"_30":802,"_34":803},[],{"_36":37,"_38":804,"_40":41,"_42":805,"_44":806,"_61":807,"_59":60},"0kNTSl_A",{},[],"Run these before marking the task as done:",{"_30":809,"_34":810},[],{"_36":47,"_38":811,"_40":41,"_42":812,"_44":814,"_61":815,"_59":60},"BebkJjJQ",{"_132":813},"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":817,"_34":818},[],{"_36":37,"_38":819,"_40":41,"_42":820,"_44":821,"_61":822,"_59":60},"IqCOnV5X",{},[],"All must pass with zero failures.",{"_36":107,"_38":824,"_40":41,"_42":825,"_44":826,"_61":827,"_59":60},"hCPqWDaU",{"_110":111},[],"Pre-Completion Checks",{"_30":829,"_34":857},[830,843,850],{"_30":831,"_34":832},[],{"_36":37,"_38":833,"_40":41,"_42":834,"_44":835,"_61":842,"_59":60},"rOVF7lON",{},[836],{"_36":47,"_48":837,"_53":838,"_42":841,"_59":60},[415,539,552],[74,839,840],62,79,{},"Old clients: 'Grid' falls through to default

Context

Documents are trees of BlockNode { block, children }. Blocks stack vertically — no way to flow items into a multi-column grid. The Query block has a columnCount attribute with CSS grid rendering in DocumentCardGrid, but this only applies to query results (document cards), not arbitrary block content.

We want a Flow Grid layout: items wrap into N columns automatically. Column count is defined by an attribute, and items stack/wrap when there are more items than columns. Think Pinterest / card grid / the Query block's card view — but for any block type.

Why `childrenType` and not dedicated block types?

Our editor is forked from an old BlockNote. The ProseMirror schema enforces blockNode → block blockChildren? — block nodes can only contain inline* or ''. Adding custom PM nodes outside this hierarchy (like Notion's column_list/column or BlockNote v0.19's @blocknote/xl-multi-column) requires refactoring 15-20+ editor files. The childrenType approach produces the same tree shape but fits within the existing schema.

Data Model

BlockNode {\n  block: {\n    id: "grid-1",\n    type: "Paragraph",\n    text: "",\n    attributes: { childrenType: "Grid", columnCount: 3 }\n  }\n  children: [\n    BlockNode { block: { id: "item-1", type: "Image", ... } }\n    BlockNode { block: { id: "item-2", type: "Image", ... } }\n    BlockNode { block: { id: "item-3", type: "Image", ... } }\n    BlockNode { block: { id: "item-4", type: "Image", ... } }   <- wraps to row 2\n  ]\n}\n

ProseMirror tree:

blockNode (container)\n  block:paragraph ("")                    <- empty, invisible\n  blockChildren [listType='Grid']         <- CSS grid\n    blockNode -> block:image (...)\n    blockNode -> block:image (...)\n    blockNode -> block:image (...)\n    blockNode -> block:image (...)        <- wraps to row 2\n

Attributes on container block:

columnCount: number (1-4, default 3) — max columns before wrapping
gap: number (optional, px, default from layout unit)

CRDT Behavior

Uses existing parent-child tree mechanics — no changes needed:

Grid items are children in the container's RGA sublist
Concurrent adds: both items appear, ordered by opID
Reordering: standard OpMoveBlocks

Implementation Steps

Step 1: Types & Schema

frontend/packages/shared/src/hm-types.ts (line 42-44)

// Before:\nz.union([\n  z.literal('Group'),\n  z.literal('Ordered'),\n  z.literal('Unordered'),\n  z.literal('Blockquote'),\n])\n\n// After:\nz.union([\n  z.literal('Group'),\n  z.literal('Ordered'),\n  z.literal('Unordered'),\n  z.literal('Blockquote'),\n  z.literal('Grid'),\n])\n

frontend/packages/editor/src/blocknote/core/extensions/Blocks/api/defaultBlocks.ts (line 14-17)

// Add 'Grid' to childrenType values\nchildrenType: {\n  default: 'Group',\n  values: ['Group', 'Unordered', 'Ordered', 'Blockquote', 'Grid'],\n}\n

Step 2: Block Conversion

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

In hmBlocksToEditorContent() where childrenType is validated/read: accept 'Grid' as valid value

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

In editorBlockToHMBlock() where childrenType is written to attributes: pass through 'Grid'
Ensure columnCount attribute is preserved in conversion

Step 3: Editor — BlockChildren Rendering

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

listNode() (line 228-238): Add case for 'Grid' — render as <div> with CSS grid classes
addInputRules(): Add guard so list input rules (- , 1. , > ) don't trigger inside Grid containers

Step 4: Editor — Keyboard Guards

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

Add utility: isInGridContainer(state, pos) -> boolean — checks if current block's parent blockChildren has listType='Grid'.

| Handler | Guard | | ------------------- | -------------------------------------- | | handleTab (~541) | Prevent indent when parent is Grid | | Shift-Tab (~621) | Prevent outdent of grid children |

Note: Enter, Backspace, Delete work normally inside a Grid — items are flat siblings, no cross-boundary issues.

Step 5: Editor — Block Manipulation Commands

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

sinkListItem() / canNestBlock(): Return false if parent is Grid (prevent indenting grid items)
liftListItem() / canUnnestBlock(): Return false if block's parent group is Grid

Step 6: Editor — Slash Menu

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

Add slash menu item:

{\n  name: 'Grid',\n  aliases: ['gallery', 'cards', 'grid'],\n  group: 'Layout',\n  icon: GridIcon,\n  execute: (editor) => {\n    // 1. Replace current block with empty block, set childrenType: 'Grid', columnCount: 3\n    // 2. Create 3 empty paragraph child blocks\n    // 3. Place cursor in first child\n  }\n}\n

Step 7: Editor — Grid Settings UI

Create a toolbar/popover on the Grid container block that allows:

Column count selector (1, 2, 3, 4) — updates columnCount attribute
Reuse the pattern from the Query block's column count selector in frontend/apps/desktop/src/editor/query-block.tsx

Step 8: Read-Only Rendering

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

if (childrenType === 'Grid') {\n  return (\n    <div\n      className={cn('grid gap-4 w-full', gridColumnClass(columnCount))}\n      data-node-type="blockGroup"\n      data-list-type="Grid"\n    >\n      {children}\n    </div>\n  )\n}\n

Helper function:

function gridColumnClass(count: number): string {\n  switch (count) {\n    case 1:\n      return 'grid-cols-1'\n    case 2:\n      return 'grid-cols-1 sm:grid-cols-2'\n    case 3:\n      return 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3'\n    case 4:\n      return 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'\n    default:\n      return 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3'\n  }\n}\n

BlockNodeContent: When inside a Grid, each child renders normally (no list markers). The empty container paragraph is hidden.

Step 9: Responsive Behavior

Tailwind responsive prefixes handle column reduction automatically:

Mobile: 1 column
Tablet (sm): 2 columns
Desktop (md/lg): full columnCount

Testing

Unit Tests — Block Conversion

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

Add to existing describe('childrenType') block (follows pattern of Group/Unordered/Ordered tests):

test('Grid', () => {\n  const hmBlock: HMBlock = {\n    id: 'foo',\n    type: 'Paragraph',\n    text: '',\n    annotations: [],\n    attributes: {childrenType: 'Grid', columnCount: 3},\n    revision: 'revision123',\n  }\n  const val = hmBlockToEditorBlock(hmBlock)\n  expect(val.props.childrenType).toBe('Grid')\n})\n\ntest('Grid with children preserves structure', () => {\n  const blocks: HMBlockNode[] = [\n    {\n      block: {\n        id: 'grid-1',\n        type: 'Paragraph',\n        text: '',\n        annotations: [],\n        attributes: {childrenType: 'Grid', columnCount: 2},\n      },\n      children: [\n        {\n          block: {\n            id: 'item-1',\n            type: 'Paragraph',\n            text: 'Item 1',\n            annotations: [],\n            attributes: {},\n          },\n          children: [],\n        },\n        {\n          block: {\n            id: 'item-2',\n            type: 'Paragraph',\n            text: 'Item 2',\n            annotations: [],\n            attributes: {},\n          },\n          children: [],\n        },\n      ],\n    },\n  ]\n  const result = hmBlocksToEditorContent(blocks)\n  expect(result[0].props.childrenType).toBe('Grid')\n  expect(result[0].children).toHaveLength(2)\n})\n

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

Add to existing describe('childrenType') block:

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

Unit Tests — Editor Commands

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

Add test using existing buildDoc/createMockEditor helpers:

describe('Grid container', () => {\n  it('prevents nesting inside Grid', () => {\n    const doc = buildDoc(schema, [\n      {\n        id: 'grid',\n        text: '',\n        children: {\n          listType: 'Grid',\n          blocks: [\n            {id: 'item-1', text: 'Item 1'},\n            {id: 'item-2', text: 'Item 2'},\n          ],\n        },\n      },\n    ])\n    const state = EditorState.create({doc, schema})\n    const editor = createMockEditor(state)\n    const pos = findPosInBlock(doc, 'item-2')\n    // Tab should NOT indent item-2 inside a Grid\n    const result = nestBlock(editor, pos)\n    expect(result).toBe(false)\n  })\n})\n

Unit Tests — Type Schema Validation

frontend/packages/shared/src/__tests__/hm-types.test.ts (add to existing or create):

import {HMBlockChildrenTypeSchema} from '../hm-types'\n\ndescribe('HMBlockChildrenType', () => {\n  test('accepts Grid', () => {\n    expect(HMBlockChildrenTypeSchema.parse('Grid')).toBe('Grid')\n  })\n\n  test('rejects invalid values', () => {\n    expect(() => HMBlockChildrenTypeSchema.parse('InvalidType')).toThrow()\n  })\n})\n

Pre-Completion Checks

Run these before marking the task as done:

# 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.

Backwards Compatibility

Old clients: 'Grid' falls through to default <ul class="pl-3"> in BlockNodeList — content visible, stacked vertically as a plain list
No proto changes needed (attributes are open Struct)
No CRDT changes needed