@jackuait/blok 0.13.1 → 0.14.0

package/src/components/i18n/locales/te/messages.json

@@ -99,6 +99,15 @@
   "toolNames.board": "బోర్డ్",
   "toolNames.divider": "విభజకం",
   "toolNames.quote": "ఉల్లేఖనం",
+  "toolNames.columns": "నిలువు వరుసలు",
+  "tools.columns.col2": "2 నిలువు వరుసలు",
+  "tools.columns.col3": "3 నిలువు వరుసలు",
+  "tools.columns.col4": "4 నిలువు వరుసలు",
+  "tools.columns.col5": "5 నిలువు వరుసలు",
+  "tools.columns.resizeAriaLabel": "నిలువు వరుసల పరిమాణం మార్చు",
+  "tools.columns.turnInto": "నిలువు వరుసలకు మార్చు",
+  "searchTerms.columns": "నిలువు వరుసలు",
+  "searchTerms.layout": "లేఅవుట్",
   "searchTerms.divider": "విభజకం",
   "searchTerms.separator": "వేరుచేయు",
   "searchTerms.delimiter": "వరంబుగుర్తు",

package/src/components/i18n/locales/th/messages.json

@@ -99,6 +99,15 @@
   "toolNames.callout": "กล่องเน้น",
   "toolNames.divider": "เส้นคั่น",
   "toolNames.quote": "อ้างอิง",
+  "toolNames.columns": "คอลัมน์",
+  "tools.columns.col2": "2 คอลัมน์",
+  "tools.columns.col3": "3 คอลัมน์",
+  "tools.columns.col4": "4 คอลัมน์",
+  "tools.columns.col5": "5 คอลัมน์",
+  "tools.columns.resizeAriaLabel": "ปรับขนาดคอลัมน์",
+  "tools.columns.turnInto": "แปลงเป็นคอลัมน์",
+  "searchTerms.columns": "คอลัมน์",
+  "searchTerms.layout": "เลย์เอาต์",
   "searchTerms.divider": "ตัวแบ่ง",
   "searchTerms.separator": "ตัวคั่น",
   "searchTerms.delimiter": "ตัวแบ่งเขต",

package/src/components/i18n/locales/tr/messages.json

@@ -99,6 +99,15 @@
   "toolNames.callout": "Bilgi kutusu",
   "toolNames.divider": "Ayırıcı",
   "toolNames.quote": "Alıntı",
+  "toolNames.columns": "Sütunlar",
+  "tools.columns.col2": "2 sütun",
+  "tools.columns.col3": "3 sütun",
+  "tools.columns.col4": "4 sütun",
+  "tools.columns.col5": "5 sütun",
+  "tools.columns.resizeAriaLabel": "Sütunları yeniden boyutlandır",
+  "tools.columns.turnInto": "Sütunlara dönüştür",
+  "searchTerms.columns": "sütunlar",
+  "searchTerms.layout": "düzen",
   "searchTerms.divider": "ayırıcı",
   "searchTerms.separator": "ayraç",
   "searchTerms.delimiter": "sınırlayıcı",

package/src/components/i18n/locales/ug/messages.json

@@ -99,6 +99,15 @@
   "toolNames.callout": "ئەسكەرتىش",
   "toolNames.divider": "بۆلگۈچ",
   "toolNames.quote": "نەقىل",
+  "toolNames.columns": "ئىستونلار",
+  "tools.columns.col2": "2 ئىستون",
+  "tools.columns.col3": "3 ئىستون",
+  "tools.columns.col4": "4 ئىستون",
+  "tools.columns.col5": "5 ئىستون",
+  "tools.columns.resizeAriaLabel": "ئىستونلار ئۆلچىمىنى ئۆزگەرتىش",
+  "tools.columns.turnInto": "ئىستونلارغا ئايلاندۇرۇش",
+  "searchTerms.columns": "ئىستونلار",
+  "searchTerms.layout": "تەرتىپ",
   "searchTerms.divider": "بۆلگۈچ",
   "searchTerms.separator": "ئايرىغۇچ",
   "searchTerms.delimiter": "چەكلىگۈچ",

package/src/components/i18n/locales/uk/messages.json

@@ -99,6 +99,15 @@
   "toolNames.callout": "Виноска",
   "toolNames.divider": "Роздільник",
   "toolNames.quote": "Цитата",
+  "toolNames.columns": "Стовпці",
+  "tools.columns.col2": "2 стовпці",
+  "tools.columns.col3": "3 стовпці",
+  "tools.columns.col4": "4 стовпці",
+  "tools.columns.col5": "5 стовпців",
+  "tools.columns.resizeAriaLabel": "Змінити розмір колонок",
+  "tools.columns.turnInto": "Перетворити на колонки",
+  "searchTerms.columns": "стовпці",
+  "searchTerms.layout": "макет",
   "searchTerms.divider": "роздільник",
   "searchTerms.separator": "сепаратор",
   "searchTerms.delimiter": "обмежувач",

package/src/components/i18n/locales/ur/messages.json

@@ -99,6 +99,15 @@
   "toolNames.callout": "نوٹ",
   "toolNames.divider": "تقسیم کار",
   "toolNames.quote": "اقتباس",
+  "toolNames.columns": "کالم",
+  "tools.columns.col2": "2 کالم",
+  "tools.columns.col3": "3 کالم",
+  "tools.columns.col4": "4 کالم",
+  "tools.columns.col5": "5 کالم",
+  "tools.columns.resizeAriaLabel": "کالموں کا سائز تبدیل کریں",
+  "tools.columns.turnInto": "کالموں میں تبدیل کریں",
+  "searchTerms.columns": "کالم",
+  "searchTerms.layout": "ترتیب",
   "searchTerms.divider": "تقسیم کار",
   "searchTerms.separator": "جداکار",
   "searchTerms.delimiter": "حد بندی",

package/src/components/i18n/locales/vi/messages.json

@@ -99,6 +99,15 @@
   "toolNames.callout": "Chú thích",
   "toolNames.divider": "Đường phân cách",
   "toolNames.quote": "Trích dẫn",
+  "toolNames.columns": "Cột",
+  "tools.columns.col2": "2 cột",
+  "tools.columns.col3": "3 cột",
+  "tools.columns.col4": "4 cột",
+  "tools.columns.col5": "5 cột",
+  "tools.columns.resizeAriaLabel": "Thay đổi kích thước cột",
+  "tools.columns.turnInto": "Chuyển thành cột",
+  "searchTerms.columns": "cột",
+  "searchTerms.layout": "bố cục",
   "searchTerms.divider": "đường phân chia",
   "searchTerms.separator": "dấu phân cách",
   "searchTerms.delimiter": "dấu phân tách",

package/src/components/i18n/locales/yi/messages.json

@@ -99,6 +99,15 @@
   "toolNames.callout": "באַמערקונג",
   "toolNames.divider": "טיילער",
   "toolNames.quote": "ציטאַט",
+  "toolNames.columns": "שפּאַלטן",
+  "tools.columns.col2": "2 שפּאַלטן",
+  "tools.columns.col3": "3 שפּאַלטן",
+  "tools.columns.col4": "4 שפּאַלטן",
+  "tools.columns.col5": "5 שפּאַלטן",
+  "tools.columns.resizeAriaLabel": "ענדערן קאָלאָנען גרייס",
+  "tools.columns.turnInto": "פֿאַרוואַנדלען אין קאָלאָנען",
+  "searchTerms.columns": "שפּאַלטן",
+  "searchTerms.layout": "לייאַוט",
   "searchTerms.divider": "טיילער",
   "searchTerms.separator": "אָפּטיילער",
   "searchTerms.delimiter": "באגרענעצער",

package/src/components/i18n/locales/zh/messages.json

@@ -99,6 +99,15 @@
   "toolNames.callout": "标注",
   "toolNames.divider": "分隔线",
   "toolNames.quote": "引用",
+  "toolNames.columns": "分栏",
+  "tools.columns.col2": "2 列",
+  "tools.columns.col3": "3 列",
+  "tools.columns.col4": "4 列",
+  "tools.columns.col5": "5 列",
+  "tools.columns.resizeAriaLabel": "调整列宽",
+  "tools.columns.turnInto": "转换为列",
+  "searchTerms.columns": "分栏",
+  "searchTerms.layout": "布局",
   "searchTerms.divider": "分割线",
   "searchTerms.separator": "分隔符",
   "searchTerms.delimiter": "定界符",

package/src/components/icons/index.ts

@@ -753,3 +753,27 @@ export const IconCrossSmall = '<svg width="14" height="14" viewBox="0 0 14 14" f
 
 // Toggle expand/collapse chevron — 12×12 so it fits the toggle arrow button
 export const IconChevronRightSmall = '<svg aria-hidden="true" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 2.5L8.5 6L4.5 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+
+// Columns layout tool — two side-by-side column rectangles
+export const IconColumns = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="7" height="16" rx="1"/><rect x="14" y="4" width="7" height="16" rx="1"/></svg>`;
+
+/**
+ * Builds a columns-preset icon: one rounded frame split by `count - 1` evenly
+ * spaced dividers, so it reads as a container holding exactly `count` columns
+ * and keeps a constant stroke weight at any count (avoids the cramped barcode
+ * look of N separate bars). Used by the ColumnList toolbox presets (2–5).
+ */
+export const buildIconColumnsCount = (count: number): string => {
+  const x = 3;
+  const y = 4;
+  const w = 18;
+  const h = 16;
+  const step = w / count;
+  const dividers = Array.from({ length: count - 1 }, (_, i) => {
+    const dx = +(x + step * (i + 1)).toFixed(2);
+
+    return `<line x1="${dx}" y1="${y}" x2="${dx}" y2="${y + h}"/>`;
+  }).join('');
+
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="${x}" y="${y}" width="${w}" height="${h}" rx="2"/>${dividers}</svg>`;
+};

package/src/components/modules/blockEvents/composers/keyboardNavigation.ts

@@ -235,6 +235,19 @@ export class KeyboardNavigation extends BlockEventComposer {
       return null;
     }
 
+    /**
+     * Columns must never be unwrapped by Enter. A 'column' is a single-child
+     * non-toggle container whose own parent is a 'column_list'. Promoting its
+     * empty sole child after the parent index would insert a new block at the
+     * document root (parentId=null), escaping the column and stranding the
+     * holder at the workingArea root. Returning null falls through to the
+     * normal Case 2 path, which re-parents the new sibling into the same
+     * column and leaves the column_list intact.
+     */
+    if (parentBlock.name === 'column' || parentBlock.name === 'column_list') {
+      return null;
+    }
+
     /**
      * Non-toggle containers (e.g. callout): when the only child is empty,
      * exit by inserting a new block after the container. The container and
@@ -372,14 +385,19 @@ export class KeyboardNavigation extends BlockEventComposer {
      *
      * Skip this guard for table cell blocks — they use a separate mechanism.
      */
-    if (currentBlock.parentId != null && !this.isCurrentBlockInsideTableCell) {
-      if (previousBlock === null || previousBlock.parentId !== currentBlock.parentId) {
-        this.removeEmptyToggleChildAndFocusNext(currentBlock);
+    const hasNoPreviousSiblingInParent = previousBlock === null ||
+      previousBlock.parentId !== currentBlock.parentId;
 
-        return;
+    if (currentBlock.parentId != null && !this.isCurrentBlockInsideTableCell && hasNoPreviousSiblingInParent) {
+      // A column's sole empty child collapses the column itself; otherwise
+      // fall back to the toggle-child behaviour (remove + focus next sibling).
+      if (!this.removeSoleEmptyColumnChild(currentBlock)) {
+        this.removeEmptyToggleChildAndFocusNext(currentBlock);
       }
-      // Previous sibling exists in the same parent — fall through to merge/remove logic
+
+      return;
     }
+    // Previous sibling exists in the same parent — fall through to merge/remove logic
 
     /**
      * Don't merge across table cell boundaries.
@@ -525,7 +543,15 @@ export class KeyboardNavigation extends BlockEventComposer {
        */
       const prevBlock = BlockManager.previousBlock;
 
-      if (currentBlock.parentId !== null && (prevBlock === null || prevBlock.parentId !== currentBlock.parentId)) {
+      const hasNoPrevSiblingInParent = prevBlock === null || prevBlock.parentId !== currentBlock.parentId;
+
+      if (currentBlock.parentId !== null && hasNoPrevSiblingInParent) {
+        // A column's sole empty child collapses the column itself rather than
+        // being a no-op like a toggle child.
+        const collapsed = this.removeSoleEmptyColumnChild(currentBlock);
+
+        collapsed && this.closeToolbarIfNotInTableCell();
+
         return;
       }
 
@@ -879,4 +905,39 @@ export class KeyboardNavigation extends BlockEventComposer {
     }
   }
 
+  /**
+   * When `block` is the SOLE child of a `column` and is empty, remove it so the
+   * now-empty column is dropped: a column is pure layout and must not linger
+   * empty. BlockManager.removeBlock cascades — deleting the last child removes
+   * the column, which unwraps the column_list if it collapses to one column.
+   *
+   * Returns true when it handled the removal. A column with OTHER children is
+   * left to the generic empty-child path so the column survives, so this only
+   * fires for the sole-child case (returns false otherwise — including for
+   * non-column parents such as toggles/callouts).
+   */
+  private removeSoleEmptyColumnChild(block: Block): boolean {
+    if (!block.isEmpty || block.parentId === null) {
+      return false;
+    }
+
+    const parentBlock = this.Blok.BlockManager.getBlockById(block.parentId);
+
+    if (parentBlock === undefined || parentBlock.name !== 'column' || parentBlock.contentIds.length > 1) {
+      return false;
+    }
+
+    const { BlockManager, Caret } = this.Blok;
+
+    void BlockManager.removeBlock(block);
+
+    const newCurrentBlock = BlockManager.currentBlock;
+
+    if (newCurrentBlock) {
+      Caret.setToBlock(newCurrentBlock, Caret.positions.END);
+    }
+
+    return true;
+  }
+
 }

package/src/components/modules/blockManager/hierarchy.ts

@@ -212,7 +212,18 @@ export class BlockHierarchy {
     // If old parent had a toggle child container and this block was in it, move it to the
     // position indicated by the flat array. moveBlocks() updates the flat array before
     // setBlockParent() is called, so getBlockIndex() reflects the intended drop position.
-    const oldContainer = oldParent !== undefined ? oldParent.holder.querySelector('[data-blok-toggle-children]') : null;
+    //
+    // Guard: only relocate the holder OUT of the toggle when the block is actually
+    // LEAVING its toggle parent (new parent differs from the old one). When the
+    // parent is unchanged the block is merely following its own relocated parent —
+    // e.g. a toggle dragged between columns carries its child along, and
+    // DragController re-asserts the child's parent via setBlockParent(child, sameToggle)
+    // to fix DOM placement. Yanking it to root here would strand the child outside
+    // the toggle even though it still belongs to it (the toggle-child-rides-along bug).
+    const oldContainer =
+      oldParent !== undefined && sanitizedParentId !== oldParentId
+        ? oldParent.holder.querySelector('[data-blok-toggle-children]')
+        : null;
 
     if (oldContainer && block.holder.parentElement === oldContainer) {
       // Scan backwards in the flat array for the nearest block whose holder is at root
@@ -268,13 +279,68 @@ export class BlockHierarchy {
       }
     }
 
-    // Move block holder into toggle child container if the new parent has one,
-    // honouring the flat-array order so the DOM order matches the logical order.
-    // Skip if the holder is already claimed by another nested-blocks container
-    // (e.g. a table cell) — moving it would steal it from that container.
-    if (sanitizedParentId !== null && newParent !== undefined && !block.holder.closest(`[${DATA_ATTR.nestedBlocks}]`)) {
-      const newContainer = newParent.holder.querySelector('[data-blok-toggle-children]');
-      if (newContainer) {
+    // Move block holder into the new parent's direct child container, honouring
+    // the flat-array order so the DOM order matches the logical order.
+    //
+    // The target container may be a toggle/callout container ([data-blok-toggle-children])
+    // or a generic nested-blocks container ([data-blok-nested-blocks], used by
+    // columns and column_list). querySelector returns the FIRST match in
+    // document order: because a parent's own child container is a direct child of
+    // its wrapper, it always precedes any grandchild container (which lives INSIDE
+    // it, deeper in document order). So this resolves to the parent's own direct
+    // container, never a deeper one belonging to a nested block.
+    //
+    // Skip guard: keep the original behaviour of refusing to move a holder that
+    // is already claimed by SOME nested-blocks container (e.g. a table cell) —
+    // moving it would steal it from that container. The one loosening Track C
+    // needs is to still mount when the target is the holder's CURRENT container
+    // already (a no-op insertBefore that re-asserts flat order); we express that
+    // by only skipping when the holder's nearest nested container is DIFFERENT
+    // from the target container.
+    if (sanitizedParentId !== null && newParent !== undefined) {
+      const newContainer = newParent.holder.querySelector(
+        '[data-blok-toggle-children], [data-blok-nested-blocks]'
+      );
+      const currentNestedContainer = block.holder.closest(`[${DATA_ATTR.nestedBlocks}]`);
+
+      // A column→column move is a legitimate reparent driven by the drag system:
+      // the holder must follow the model into the destination column. The
+      // anti-stealing guard targets corrupted multi-references across tool
+      // containers (table cell / toggle / callout / header), never the columns
+      // flex layout. A column's child container is identifiable because its
+      // PARENT is the [data-blok-column] wrapper — that precisely separates the
+      // two cases (a toggle nested inside a column would not match).
+      const isColumnContainer = (container: Element | null): boolean =>
+        container?.parentElement?.matches('[data-blok-column]') === true;
+      // The column_list's own child container is the columns row. A `column`
+      // block always belongs to a columns row, so mounting one into a row is a
+      // legitimate structural reparent — never a steal. This is the case the
+      // drag-beside "add a column" path hits: api.blocks.insert anchors the new
+      // column's holder next to a SIBLING column's child block (the new column's
+      // flat index falls inside that sibling's child range), so the holder lands
+      // inside that sibling column's container. Without this allowance the guard
+      // below refuses to move it out, stranding the new column nested INSIDE its
+      // sibling instead of placing it beside it in the row.
+      const isColumnsRow = (container: Element | null): boolean =>
+        container?.matches('[data-blok-columns]') === true;
+      // A block whose model parent is a column but whose holder is currently
+      // stranded in the column_list's flex row (the columns row) must be
+      // relocated INTO the target column's child container. This is the
+      // Enter/split-in-column strand: the split insert anchors the new holder
+      // 'beforebegin' the sibling column in the row, so its nearest nested
+      // container resolves to the columns row, not a real column. Allow the
+      // move when the holder sits in the row and the destination is a genuine
+      // column child container — it was never legitimately "claimed" by the row.
+      const strandedInColumnsRow =
+        isColumnsRow(currentNestedContainer) && isColumnContainer(newContainer);
+      const claimedByOtherContainer =
+        currentNestedContainer !== null &&
+        currentNestedContainer !== newContainer &&
+        !(isColumnContainer(currentNestedContainer) && isColumnContainer(newContainer)) &&
+        !isColumnsRow(newContainer) &&
+        !strandedInColumnsRow;
+
+      if (newContainer && !claimedByOtherContainer) {
         const allBlocks = this.repository.blocks;
         const blockIdx = allBlocks.indexOf(block);
         const nextSiblingHolder = allBlocks.slice(blockIdx + 1).find(
@@ -286,6 +352,30 @@ export class BlockHierarchy {
       }
     }
 
+    // Escaping a column for ROOT. The positional blocksStore.move() skips the
+    // DOM move while the holder is nested (it follows its parent container by
+    // default — correct for table cells), and the mount-into-container branch
+    // above only runs for a non-null parent — so a block dragged OUT of a
+    // column to root would otherwise stay stranded in the column's container
+    // while the model says root (a model-vs-DOM divergence). Relocate the
+    // holder to the workingArea at its flat-array position. Toggle/callout/
+    // header escapes are handled by the [data-blok-toggle-children] block near
+    // the top of this method; table cells manage their own DOM and block
+    // cross-cell drops upstream — so this is scoped to columns only.
+    if (sanitizedParentId === null && block.holder.closest('[data-blok-column]') !== null) {
+      const allBlocks = this.repository.blocks;
+      const blockIndex = allBlocks.indexOf(block);
+      const isAtRoot = (b: Block): boolean => b.holder.closest(`[${DATA_ATTR.nestedBlocks}]`) === null;
+      const precedingRoot = allBlocks.slice(0, blockIndex).reverse().find(isAtRoot);
+      const followingRoot = allBlocks.slice(blockIndex + 1).find(isAtRoot);
+
+      if (precedingRoot !== undefined) {
+        precedingRoot.holder.insertAdjacentElement('afterend', block.holder);
+      } else if (followingRoot !== undefined) {
+        followingRoot.holder.insertAdjacentElement('beforebegin', block.holder);
+      }
+    }
+
     // Update visual indentation
     this.updateBlockIndentation(block);
 
@@ -295,6 +385,37 @@ export class BlockHierarchy {
     }
   }
 
+  /**
+   * Walks the block's parentId chain and returns true if any ancestor is a
+   * `column` or `column_list` block — i.e. the block lives inside a columns
+   * layout in the block tree, regardless of whether its holder has been
+   * mounted into the columns DOM yet. Cycle-safe via a visited set.
+   * @param block - the block to test
+   * @returns true if a column/column_list ancestor exists
+   */
+  private hasColumnAncestor(block: Block): boolean {
+    const walk = (parentId: string | null, visited: Set<string>): boolean => {
+      if (parentId === null || visited.has(parentId)) {
+        return false;
+      }
+      visited.add(parentId);
+
+      const parent = this.repository.getBlockById(parentId);
+
+      if (parent === undefined) {
+        return false;
+      }
+
+      if (parent.name === 'column' || parent.name === 'column_list') {
+        return true;
+      }
+
+      return walk(parent.parentId, visited);
+    };
+
+    return walk(block.parentId, new Set<string>());
+  }
+
   /**
    * Updates the visual indentation of a block based on its depth in the hierarchy.
    * @param block - the block to update indentation for
@@ -319,6 +440,27 @@ export class BlockHierarchy {
       return;
     }
 
+    // Columns are a flex layout: the column_list block, its column children, and
+    // every block inside a column are positioned by flex, not block-tree depth.
+    // Depth-based margin would push the column holders off their even split and
+    // indent the column content. Keep them flush.
+    //
+    // The DOM check (`closest`) misses blocks indented BEFORE their holder is
+    // mounted into the columns container — e.g. a toolbox-seeded paragraph,
+    // whose indentation runs during insertInsideParent, before the Column tool
+    // appends it. The column ancestry is always in the block tree, so consult
+    // that too rather than relying on DOM placement timing.
+    if (
+      block.name === 'column_list' ||
+      holder.closest('[data-blok-columns]') ||
+      this.hasColumnAncestor(block)
+    ) {
+      holder.style.marginLeft = '';
+      holder.setAttribute('data-blok-depth', '0');
+
+      return;
+    }
+
     const depth = this.getBlockDepth(block);
     const indentationPx = depth * 24; // 24px per level