[{"_1":2,"_4034":-5,"_4035":-5},"loaderData",{"_3":4,"_11":12},"root",{"_5":6,"_7":6,"_8":9,"_10":9},"isProd",true,"enableStats","domain","dev.hyper.media","siteHost","routes/$",{"_13":14,"_3404":3405},"json",{"_15":16,"_17":18,"_19":20,"_21":-5,"_22":-5,"_23":24,"_25":-5,"_26":27,"_887":6,"_39":888,"_900":901,"_902":903,"_3394":3395,"_3396":6,"_10":3397,"_3398":3397,"_3399":3400,"_3401":3402},"prefersLanguages",[],"viewTerm","activity","panelParam","activity/citations","openComment","accountUid","isInspect",false,"inspectTab","document",{"_28":29,"_863":42,"_864":865,"_866":867,"_869":870,"_871":872,"_873":872,"_874":875,"_878":879,"_880":42,"_881":882,"_885":886},"content",[30,126,187,222,665,800,829],{"_31":32,"_35":121},"children",[33,64,78],{"_31":34,"_35":36},[],"block",{"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_62":63,"_60":61},"type","Paragraph","id","f-1vJuWs","revision","bafy2bzaceczaw7sbjl6xstxjmh7nh2omxvhabat27vjorhwjx6wmztvhep6a4","attributes",{},"annotations",[47],{"_37":48,"_49":50,"_54":55,"_43":59,"_60":61},"Code","starts",[51,52,53],23,149,198,"ends",[56,57,58],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.",{"_31":65,"_35":66},[],{"_37":38,"_39":67,"_41":42,"_43":68,"_45":69,"_62":77,"_60":61},"bekAyHKt",{},[70],{"_37":71,"_49":72,"_54":74,"_43":76,"_60":61},"Bold",[73],10,[75],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.",{"_31":79,"_35":107},[80],{"_31":81,"_35":82},[],{"_37":38,"_39":83,"_41":42,"_43":84,"_45":85,"_62":106,"_60":61},"8aJORhag",{},[86],{"_37":48,"_49":87,"_54":96,"_43":105,"_60":61},[88,89,90,91,92,93,94,95],76,111,140,151,216,228,256,330,[97,98,99,100,101,102,103,104],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.",{"_37":108,"_39":109,"_41":42,"_43":110,"_45":113,"_62":120,"_60":61},"Heading","o_AqWeY1",{"_111":112},"childrenType","Group",[114],{"_37":48,"_49":115,"_54":117,"_43":119,"_60":61},[116],4,[118],16,{},"Why childrenType and not dedicated block types?",{"_37":108,"_39":122,"_41":42,"_43":123,"_45":124,"_62":125,"_60":61},"wX6Se3wx",{"_111":112},[],"Context",{"_31":127,"_35":182},[128,136,143,150],{"_31":129,"_35":130},[],{"_37":48,"_39":131,"_41":42,"_43":132,"_45":134,"_62":135,"_60":61},"0Fg78xgl",{"_133":61},"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",{"_31":137,"_35":138},[],{"_37":38,"_39":139,"_41":42,"_43":140,"_45":141,"_62":142,"_60":61},"XKilKEfT",{},[],"ProseMirror tree:",{"_31":144,"_35":145},[],{"_37":48,"_39":146,"_41":42,"_43":147,"_45":148,"_62":149,"_60":61},"xK_o5ysN",{"_133":61},[],"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",{"_31":151,"_35":176},[152,164],{"_31":153,"_35":154},[],{"_37":38,"_39":155,"_41":42,"_43":156,"_45":157,"_62":163,"_60":61},"Os4M1bAY",{},[158],{"_37":48,"_49":159,"_54":161,"_43":162,"_60":61},[160],0,[75],{},"columnCount: number (1-4, default 3) — max columns before wrapping",{"_31":165,"_35":166},[],{"_37":38,"_39":167,"_41":42,"_43":168,"_45":169,"_62":175,"_60":61},"o-dkSZ59",{},[170],{"_37":48,"_49":171,"_54":172,"_43":174,"_60":61},[160],[173],11,{},"gap: number (optional, px, default from layout unit)",{"_37":38,"_39":177,"_41":42,"_43":178,"_45":180,"_62":181,"_60":61},"l1YKKgJ9",{"_111":179},"Unordered",[],"Attributes on container block:",{"_37":108,"_39":183,"_41":42,"_43":184,"_45":185,"_62":186,"_60":61},"ISOafVgo",{"_111":112},[],"Data Model",{"_31":188,"_35":217},[189],{"_31":190,"_35":212},[191,198,205],{"_31":192,"_35":193},[],{"_37":38,"_39":194,"_41":42,"_43":195,"_45":196,"_62":197,"_60":61},"y9SIg1Vn",{},[],"Grid items are children in the container's RGA sublist",{"_31":199,"_35":200},[],{"_37":38,"_39":201,"_41":42,"_43":202,"_45":203,"_62":204,"_60":61},"9E57zMmT",{},[],"Concurrent adds: both items appear, ordered by opID",{"_31":206,"_35":207},[],{"_37":38,"_39":208,"_41":42,"_43":209,"_45":210,"_62":211,"_60":61},"nbfFq5c1",{},[],"Reordering: standard OpMoveBlocks",{"_37":38,"_39":213,"_41":42,"_43":214,"_45":215,"_62":216,"_60":61},"ie9yeN-L",{"_111":179},[],"Uses existing parent-child tree mechanics — no changes needed:",{"_37":108,"_39":218,"_41":42,"_43":219,"_45":220,"_62":221,"_60":61},"N_R6VJQj",{"_111":112},[],"CRDT Behavior",{"_31":223,"_35":660},[224,270,346,394,451,495,528,568,620],{"_31":225,"_35":265},[226,238,246,258],{"_31":227,"_35":228},[],{"_37":38,"_39":229,"_41":42,"_43":230,"_45":231,"_62":237,"_60":61},"h-iRETNx",{},[232],{"_37":48,"_49":233,"_54":234,"_43":236,"_60":61},[160],[235],40,{},"frontend/packages/shared/src/hm-types.ts (line 42-44)",{"_31":239,"_35":240},[],{"_37":48,"_39":241,"_41":42,"_43":242,"_45":244,"_62":245,"_60":61},"PUh878W8",{"_133":243},"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",{"_31":247,"_35":248},[],{"_37":38,"_39":249,"_41":42,"_43":250,"_45":251,"_62":257,"_60":61},"n48dLiTm",{},[252],{"_37":48,"_49":253,"_54":254,"_43":256,"_60":61},[160],[255],82,{},"frontend/packages/editor/src/blocknote/core/extensions/Blocks/api/defaultBlocks.ts (line 14-17)",{"_31":259,"_35":260},[],{"_37":48,"_39":261,"_41":42,"_43":262,"_45":263,"_62":264,"_60":61},"w3rgHvwP",{"_133":243},[],"// Add 'Grid' to childrenType values\nchildrenType: {\n default: 'Group',\n values: ['Group', 'Unordered', 'Ordered', 'Blockquote', 'Grid'],\n}\n",{"_37":108,"_39":266,"_41":42,"_43":267,"_45":268,"_62":269,"_60":61},"Sb1yw8WM",{"_111":112},[],"Step 1: Types & Schema",{"_31":271,"_35":341},[272,301],{"_31":273,"_35":291},[274],{"_31":275,"_35":276},[],{"_37":38,"_39":277,"_41":42,"_43":278,"_45":279,"_62":290,"_60":61},"4K5YWYRy",{},[280],{"_37":48,"_49":281,"_54":285,"_43":289,"_60":61},[282,283,284],3,35,74,[286,287,288],28,47,80,{},"In hmBlocksToEditorContent() where childrenType is validated/read: accept 'Grid' as valid value",{"_37":38,"_39":292,"_41":42,"_43":293,"_45":294,"_62":300,"_60":61},"X6ehRoeh",{"_111":179},[295],{"_37":48,"_49":296,"_54":297,"_43":299,"_60":61},[160],[298],61,{},"frontend/packages/shared/src/client/hmblock-to-editorblock.ts",{"_31":302,"_35":332},[303,319],{"_31":304,"_35":305},[],{"_37":38,"_39":306,"_41":42,"_43":307,"_45":308,"_62":318,"_60":61},"yFeprrc6",{},[309],{"_37":48,"_49":310,"_54":313,"_43":317,"_60":61},[282,311,312],32,84,[314,315,316],25,44,90,{},"In editorBlockToHMBlock() where childrenType is written to attributes: pass through 'Grid'",{"_31":320,"_35":321},[],{"_37":38,"_39":322,"_41":42,"_43":323,"_45":324,"_62":331,"_60":61},"Tm_ph4vH",{},[325],{"_37":48,"_49":326,"_54":328,"_43":330,"_60":61},[327],7,[329],18,{},"Ensure columnCount attribute is preserved in conversion",{"_37":38,"_39":333,"_41":42,"_43":334,"_45":335,"_62":340,"_60":61},"wS_bp0gc",{"_111":179},[336],{"_37":48,"_49":337,"_54":338,"_43":339,"_60":61},[160],[298],{},"frontend/packages/shared/src/client/editorblock-to-hmblock.ts",{"_37":108,"_39":342,"_41":42,"_43":343,"_45":344,"_62":345,"_60":61},"_8CCVDZ_",{"_111":112},[],"Step 2: Block Conversion",{"_31":347,"_35":389},[348],{"_31":349,"_35":380},[350,364],{"_31":351,"_35":352},[],{"_37":38,"_39":353,"_41":42,"_43":354,"_45":355,"_62":363,"_60":61},"10xw6Xed",{},[356],{"_37":48,"_49":357,"_54":359,"_43":362,"_60":61},[160,235,358],59,[73,360,361],46,64,{},"listNode() (line 228-238): Add case for 'Grid' — render as

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

\n )\n}\n",{"_31":591,"_35":592},[],{"_37":38,"_39":593,"_41":42,"_43":594,"_45":595,"_62":596,"_60":61},"EjjMlYgj",{},[],"Helper function:",{"_31":598,"_35":599},[],{"_37":48,"_39":600,"_41":42,"_43":601,"_45":602,"_62":603,"_60":61},"53NgyVIr",{"_133":243},[],"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",{"_31":605,"_35":606},[],{"_37":38,"_39":607,"_41":42,"_43":608,"_45":609,"_62":614,"_60":61},"naPCSAW2",{},[610],{"_37":48,"_49":611,"_54":612,"_43":613,"_60":61},[160],[118],{},"BlockNodeContent: When inside a Grid, each child renders normally (no list markers). The empty container paragraph is hidden.",{"_37":108,"_39":616,"_41":42,"_43":617,"_45":618,"_62":619,"_60":61},"bus0IBq2",{"_111":112},[],"Step 8: Read-Only Rendering",{"_31":621,"_35":655},[622],{"_31":623,"_35":650},[624,631,638],{"_31":625,"_35":626},[],{"_37":38,"_39":627,"_41":42,"_43":628,"_45":629,"_62":630,"_60":61},"X6ZzL7-x",{},[],"Mobile: 1 column",{"_31":632,"_35":633},[],{"_37":38,"_39":634,"_41":42,"_43":635,"_45":636,"_62":637,"_60":61},"M1vBFQK2",{},[],"Tablet (sm): 2 columns",{"_31":639,"_35":640},[],{"_37":38,"_39":641,"_41":42,"_43":642,"_45":643,"_62":649,"_60":61},"Xmv8_Izc",{},[644],{"_37":48,"_49":645,"_54":647,"_43":648,"_60":61},[646],22,[478],{},"Desktop (md/lg): full columnCount",{"_37":38,"_39":651,"_41":42,"_43":652,"_45":653,"_62":654,"_60":61},"XoqGSOw1",{"_111":179},[],"Tailwind responsive prefixes handle column reduction automatically:",{"_37":108,"_39":656,"_41":42,"_43":657,"_45":658,"_62":659,"_60":61},"fT1UsX4z",{"_111":112},[],"Step 9: Responsive Behavior",{"_37":108,"_39":661,"_41":42,"_43":662,"_45":663,"_62":664,"_60":61},"Es6O-p2H",{"_111":112},[],"Implementation Steps",{"_31":666,"_35":795},[667,732,770],{"_31":668,"_35":727},[669,680,691,698,709,720],{"_31":670,"_35":671},[],{"_37":38,"_39":672,"_41":42,"_43":673,"_45":674,"_62":679,"_60":61},"d96ca5kD",{},[675],{"_37":48,"_49":676,"_54":677,"_43":678,"_60":61},[160],[88],{},"frontend/packages/shared/src/client/__tests__/hmblock-to-editorblock.test.ts",{"_31":681,"_35":682},[],{"_37":38,"_39":683,"_41":42,"_43":684,"_45":685,"_62":690,"_60":61},"DXObuwyw",{},[686],{"_37":48,"_49":687,"_54":688,"_43":689,"_60":61},[118],[235],{},"Add to existing describe('childrenType') block (follows pattern of Group/Unordered/Ordered tests):",{"_31":692,"_35":693},[],{"_37":48,"_39":694,"_41":42,"_43":695,"_45":696,"_62":697,"_60":61},"ejDHl5qN",{"_133":243},[],"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",{"_31":699,"_35":700},[],{"_37":38,"_39":701,"_41":42,"_43":702,"_45":703,"_62":708,"_60":61},"ef3857ed",{},[704],{"_37":48,"_49":705,"_54":706,"_43":707,"_60":61},[160],[88],{},"frontend/packages/shared/src/client/__tests__/editorblock-to-hmblock.test.ts",{"_31":710,"_35":711},[],{"_37":38,"_39":712,"_41":42,"_43":713,"_45":714,"_62":719,"_60":61},"bMWOCpUQ",{},[715],{"_37":48,"_49":716,"_54":717,"_43":718,"_60":61},[118],[235],{},"Add to existing describe('childrenType') block:",{"_31":721,"_35":722},[],{"_37":48,"_39":723,"_41":42,"_43":724,"_45":725,"_62":726,"_60":61},"XP-arHoq",{"_133":243},[],"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",{"_37":108,"_39":728,"_41":42,"_43":729,"_45":730,"_62":731,"_60":61},"Sn3F0tv9",{"_111":112},[],"Unit Tests — Block Conversion",{"_31":733,"_35":765},[734,746,758],{"_31":735,"_35":736},[],{"_37":38,"_39":737,"_41":42,"_43":738,"_45":739,"_62":745,"_60":61},"pCQZcQyt",{},[740],{"_37":48,"_49":741,"_54":742,"_43":744,"_60":61},[160],[743],93,{},"frontend/packages/editor/src/blocknote/core/api/blockManipulation/__tests__/nestBlock.test.ts",{"_31":747,"_35":748},[],{"_37":38,"_39":749,"_41":42,"_43":750,"_45":751,"_62":757,"_60":61},"Qp3IkeZr",{},[752],{"_37":48,"_49":753,"_54":755,"_43":756,"_60":61},[754,478],24,[311,506],{},"Add test using existing buildDoc/createMockEditor helpers:",{"_31":759,"_35":760},[],{"_37":48,"_39":761,"_41":42,"_43":762,"_45":763,"_62":764,"_60":61},"mfDH2t2H",{"_133":243},[],"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",{"_37":108,"_39":766,"_41":42,"_43":767,"_45":768,"_62":769,"_60":61},"n0Mcy8dt",{"_111":112},[],"Unit Tests — Editor Commands",{"_31":771,"_35":790},[772,783],{"_31":773,"_35":774},[],{"_37":38,"_39":775,"_41":42,"_43":776,"_45":777,"_62":782,"_60":61},"PgiK27_s",{},[778],{"_37":48,"_49":779,"_54":780,"_43":781,"_60":61},[160],[377],{},"frontend/packages/shared/src/__tests__/hm-types.test.ts (add to existing or create):",{"_31":784,"_35":785},[],{"_37":48,"_39":786,"_41":42,"_43":787,"_45":788,"_62":789,"_60":61},"Au4OThsq",{"_133":243},[],"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",{"_37":108,"_39":791,"_41":42,"_43":792,"_45":793,"_62":794,"_60":61},"MqxYu2E_",{"_111":112},[],"Unit Tests — Type Schema Validation",{"_37":108,"_39":796,"_41":42,"_43":797,"_45":798,"_62":799,"_60":61},"qkmw-IWR",{"_111":112},[],"Testing",{"_31":801,"_35":824},[802,809,817],{"_31":803,"_35":804},[],{"_37":38,"_39":805,"_41":42,"_43":806,"_45":807,"_62":808,"_60":61},"0kNTSl_A",{},[],"Run these before marking the task as done:",{"_31":810,"_35":811},[],{"_37":48,"_39":812,"_41":42,"_43":813,"_45":815,"_62":816,"_60":61},"BebkJjJQ",{"_133":814},"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",{"_31":818,"_35":819},[],{"_37":38,"_39":820,"_41":42,"_43":821,"_45":822,"_62":823,"_60":61},"IqCOnV5X",{},[],"All must pass with zero failures.",{"_37":108,"_39":825,"_41":42,"_43":826,"_45":827,"_62":828,"_60":61},"hCPqWDaU",{"_111":112},[],"Pre-Completion Checks",{"_31":830,"_35":858},[831,844,851],{"_31":832,"_35":833},[],{"_37":38,"_39":834,"_41":42,"_43":835,"_45":836,"_62":843,"_60":61},"rOVF7lON",{},[837],{"_37":48,"_49":838,"_54":839,"_43":842,"_60":61},[416,540,553],[75,840,841],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