@jackuait/blok 0.6.0-beta.5 → 0.6.0-beta.7

package/src/tools/table/index.ts

@@ -72,6 +72,7 @@ export class Table implements BlockTool {
   private element: HTMLDivElement | null = null;
   private blockId: string | undefined;
   private pendingHighlight: PendingHighlight | null = null;
+  private isNewTable = false;
 
   constructor({ data, config, api, readOnly, block }: BlockToolConstructorOptions<TableData, TableConfig>) {
     this.api = api;
@@ -127,6 +128,8 @@ export class Table implements BlockTool {
       wrapper.setAttribute('data-blok-table-readonly', '');
     }
 
+    this.isNewTable = this.data.content.length === 0;
+
     const rows = this.data.content.length || this.config.rows || DEFAULT_ROWS;
     const cols = this.data.content[0]?.length || this.config.cols || DEFAULT_COLS;
 
@@ -178,6 +181,10 @@ export class Table implements BlockTool {
 
     this.data.content = this.cellBlocks?.initializeCells(this.data.content) ?? this.data.content;
 
+    if (this.isNewTable) {
+      populateNewCells(gridEl, this.cellBlocks);
+    }
+
     if (this.data.initialColWidth === undefined) {
       const widths = this.data.colWidths ?? readPixelWidths(gridEl);
 
@@ -190,6 +197,12 @@ export class Table implements BlockTool {
     this.initAddControls(gridEl);
     this.initRowColControls(gridEl);
     this.initCellSelection(gridEl);
+
+    if (this.isNewTable) {
+      const firstEditable = gridEl.querySelector<HTMLElement>('[contenteditable="true"]');
+
+      firstEditable?.focus();
+    }
   }
 
   public save(blockContent: HTMLElement): TableData {
@@ -313,6 +326,13 @@ export class Table implements BlockTool {
       wrapper: this.element,
       grid: gridEl,
       i18n: this.api.i18n,
+      getNewColumnWidth: () => {
+        const colWidths = this.data.colWidths ?? readPixelWidths(gridEl);
+
+        return this.data.initialColWidth !== undefined
+          ? Math.round((this.data.initialColWidth / 2) * 100) / 100
+          : computeHalfAvgWidth(colWidths);
+      },
       onAddRow: () => {
         this.grid.addRow(gridEl);
         populateNewCells(gridEl, this.cellBlocks);

package/src/tools/table/table-add-controls.ts

@@ -56,6 +56,8 @@ interface TableAddControlsOptions {
   onDragAddCol: () => void;
   onDragRemoveCol: () => void;
   onDragEnd: () => void;
+  /** Returns the pixel width of a newly added column, used as the drag unit size. */
+  getNewColumnWidth?: () => number;
 }
 
 /**
@@ -89,6 +91,7 @@ export class TableAddControls {
   private boundPointerUp: (e: PointerEvent) => void;
   private boundRowPointerDown: (e: PointerEvent) => void;
   private boundColPointerDown: (e: PointerEvent) => void;
+  private getNewColumnWidth: (() => number) | undefined;
 
   constructor(options: TableAddControlsOptions) {
     this.wrapper = options.wrapper;
@@ -103,6 +106,7 @@ export class TableAddControls {
     this.onDragAddCol = options.onDragAddCol;
     this.onDragRemoveCol = options.onDragRemoveCol;
     this.onDragEnd = options.onDragEnd;
+    this.getNewColumnWidth = options.getNewColumnWidth;
     this.boundMouseMove = this.handleMouseMove.bind(this);
     this.boundMouseLeave = this.handleMouseLeave.bind(this);
     this.boundPointerMove = this.handlePointerMove.bind(this);
@@ -283,6 +287,10 @@ export class TableAddControls {
       return lastRow?.offsetHeight || 30;
     }
 
+    if (this.getNewColumnWidth) {
+      return this.getNewColumnWidth() || 100;
+    }
+
     const firstRow = this.grid.querySelector('[data-blok-table-row]');
 
     if (!firstRow) {

package/src/tools/table/table-cell-blocks.ts

@@ -229,6 +229,7 @@ export class TableCellBlocks {
    * Initialize all cells with blocks.
    * - Empty cells or legacy string cells get a new paragraph block.
    * - Cells that already have block references get those blocks mounted.
+   * - If referenced blocks are missing from BlockManager, a fallback paragraph is created.
    */
   public initializeCells(content: LegacyCellContent[][]): CellContent[][] {
     const rowElements = this.gridElement.querySelectorAll(`[${ROW_ATTR}]`);
@@ -257,9 +258,12 @@ export class TableCellBlocks {
           return;
         }
 
-        if (isCellWithBlocks(cellContent)) {
-          this.mountBlocksInCell(container, cellContent.blocks);
-          normalizedRow.push(cellContent);
+        const mountedIds = isCellWithBlocks(cellContent)
+          ? this.mountBlocksInCell(container, cellContent.blocks)
+          : [];
+
+        if (mountedIds.length > 0) {
+          normalizedRow.push({ blocks: mountedIds });
         } else {
           const text = typeof cellContent === 'string' ? cellContent : '';
           const block = this.api.blocks.insert('paragraph', { text }, {}, this.api.blocks.getBlocksCount(), false);
@@ -291,9 +295,12 @@ export class TableCellBlocks {
   }
 
   /**
-   * Mount existing blocks into a cell container by their IDs
+   * Mount existing blocks into a cell container by their IDs.
+   * Returns the IDs of blocks that were successfully mounted.
    */
-  private mountBlocksInCell(container: HTMLElement, blockIds: string[]): void {
+  private mountBlocksInCell(container: HTMLElement, blockIds: string[]): string[] {
+    const mountedIds: string[] = [];
+
     for (const blockId of blockIds) {
       const index = this.api.blocks.getBlockIndex(blockId);
 
@@ -308,7 +315,10 @@ export class TableCellBlocks {
       }
 
       container.appendChild(block.holder);
+      mountedIds.push(blockId);
     }
+
+    return mountedIds;
   }
 
   /**

package/src/types-internal/blok-modules.d.ts

@@ -2,6 +2,7 @@
 import { BlocksAPI } from '../components/modules/api/blocks';
 import { CaretAPI } from '../components/modules/api/caret';
 import { EventsAPI } from '../components/modules/api/events';
+import { HistoryAPI } from '../components/modules/api/history';
 import { I18nAPI } from '../components/modules/api/i18n';
 import { API } from '../components/modules/api/index';
 import { InlineToolbarAPI } from '../components/modules/api/inlineToolbar';
@@ -45,6 +46,7 @@ export interface BlokModules {
   CaretAPI: CaretAPI,
   ToolsAPI: ToolsAPI,
   EventsAPI: EventsAPI,
+  HistoryAPI: HistoryAPI,
   I18nAPI: I18nAPI,
   API: API,
   InlineToolbarAPI: InlineToolbarAPI,

package/types/api/history.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Describes Blok's history API
+ */
+export interface History {
+  /**
+   * Undo the last operation
+   */
+  undo(): void;
+
+  /**
+   * Redo the last undone operation
+   */
+  redo(): void;
+
+  /**
+   * Check if undo is available
+   *
+   * @returns {boolean} true if undo is available
+   */
+  canUndo(): boolean;
+
+  /**
+   * Check if redo is available
+   *
+   * @returns {boolean} true if redo is available
+   */
+  canRedo(): boolean;
+
+  /**
+   * Clear all history
+   */
+  clear(): void;
+}

package/types/api/index.d.ts

@@ -1,5 +1,6 @@
 export * from './blocks';
 export * from './events';
+export * from './history';
 export * from './listeners';
 export * from './sanitizer';
 export * from './saver';

package/types/api/readonly.d.ts

@@ -3,10 +3,20 @@
  */
 export interface ReadOnly {
   /**
-   * Set or toggle read-only state
+   * Set read-only mode to the specified boolean state
    *
-   * @param {Boolean|undefined} state - set or toggle state
+   * @param {Boolean} state - read-only state to set
+   * @returns {Promise<boolean>} the new read-only state
+   */
+  set: (state: boolean) => Promise<boolean>;
+
+  /**
+   * Toggle read-only state (deprecated - use set() instead)
+   * Without parameter, toggles current state. With parameter, sets to specified state.
+   *
+   * @param {Boolean|undefined} state - optional state to set (if omitted, toggles)
    * @returns {Promise<boolean>} current value
+   * @deprecated Use `set()` method for clearer intent
    */
   toggle: (state?: boolean) => Promise<boolean>;
 

package/types/index.d.ts

@@ -16,6 +16,7 @@ import {
   Blocks,
   Caret,
   Events,
+  History,
   InlineToolbar,
   Listeners,
   Notifier,
@@ -90,6 +91,7 @@ export {
   Blocks,
   Caret,
   Events,
+  History,
   InlineToolbar,
   Listeners,
   Notifier,
@@ -127,6 +129,7 @@ export interface API {
   caret: Caret;
   tools: Tools;
   events: Events;
+  history: History;
   listeners: Listeners;
   notifier: Notifier;
   sanitizer: Sanitizer;

package/dist/chunks/messages-DsVNtdgM.mjs

@@ -1,62 +0,0 @@
-const o = {
-  "blockSettings.dragToMove": "తరలించడానికి డ్రాగ్ చేయండి",
-  "blockSettings.clickToOpenMenu": "మెనూ తెరవడానికి క్లిక్ చేయండి",
-  "toolbox.addBelow": "క్రింద జోడించడానికి క్లిక్ చేయండి",
-  "toolbox.optionAddAbove": "పైన జోడించడానికి Option-క్లిక్ చేయండి",
-  "toolbox.ctrlAddAbove": "పైన జోడించడానికి Ctrl-క్లిక్ చేయండి",
-  "popover.search": "వెతకండి",
-  "popover.nothingFound": "ఏమీ కనుగొనబడలేదు",
-  "popover.convertTo": "మార్చు",
-  "toolNames.text": "టెక్స్ట్",
-  "toolNames.heading": "శీర్షిక",
-  "toolNames.link": "లింక్",
-  "toolNames.bold": "బోల్డ్",
-  "toolNames.italic": "ఇటాలిక్",
-  "toolNames.bulletedList": "బుల్లెట్ జాబితా",
-  "toolNames.numberedList": "నంబర్ జాబితా",
-  "toolNames.todoList": "చేయవలసిన పనుల జాబితా",
-  "tools.link.addLink": "లింక్ జోడించండి",
-  "tools.link.invalidLink": "చెల్లని లింక్",
-  "tools.stub.error": "లోపం",
-  "tools.stub.blockCannotBeDisplayed": "ఈ బ్లాక్‌ను ప్రదర్శించలేము",
-  "tools.header.heading1": "శీర్షిక 1",
-  "tools.header.heading2": "శీర్షిక 2",
-  "tools.header.heading3": "శీర్షిక 3",
-  "tools.header.heading4": "శీర్షిక 4",
-  "tools.header.heading5": "శీర్షిక 5",
-  "tools.header.heading6": "శీర్షిక 6",
-  "tools.list.placeholder": "జాబితా",
-  "blockSettings.delete": "తొలగించు",
-  "a11y.dragHandle": "బ్లాక్ తరలించడానికి డ్రాగ్ చేయండి లేదా మెనూ కోసం క్లిక్ చేయండి",
-  "a11y.dragHandleRole": "డ్రాగ్ హ్యాండిల్",
-  "a11y.dragStarted": "బ్లాక్ డ్రాగ్ అవుతోంది",
-  "a11y.dragStartedMultiple": "{count} బ్లాక్‌లు డ్రాగ్ అవుతున్నాయి",
-  "a11y.dropPosition": "{total} లో {position} స్థానంలో డ్రాప్ అవుతుంది",
-  "a11y.dropCancelled": "డ్రాగ్ రద్దు చేయబడింది",
-  "a11y.blockMoved": "బ్లాక్ {total} లో {position} స్థానానికి తరలించబడింది",
-  "a11y.blocksMoved": "{count} బ్లాక్‌లు {position} స్థానానికి తరలించబడ్డాయి",
-  "a11y.blockDuplicated": "బ్లాక్ {total} లో {position} స్థానంలో నకలు చేయబడింది",
-  "a11y.blocksDuplicated": "{count} బ్లాక్‌లు {position} స్థానం నుండి నకలు చేయబడ్డాయి",
-  "a11y.movedUp": "బ్లాక్ {total} లో {position} స్థానానికి పైకి తరలించబడింది",
-  "a11y.movedDown": "బ్లాక్ {total} లో {position} స్థానానికి క్రిందికి తరలించబడింది",
-  "a11y.atTop": "బ్లాక్ పైన ఉంది, పైకి తరలించలేము",
-  "a11y.atBottom": "బ్లాక్ క్రింద ఉంది, క్రిందికి తరలించలేము",
-  "tools.paragraph.placeholder": "ఏదైనా రాయండి లేదా ఎంచుకోడానికి / నొక్కండి",
-  "tools.table.title": "పట్టిక",
-  "tools.table.clearSelection": "క్లియర్ చేయండి",
-  "tools.table.headerColumn": "హెడర్ కాలమ్",
-  "tools.table.insertColumnLeft": "ఎడమవైపు కాలమ్ చొప్పించు",
-  "tools.table.insertColumnRight": "కుడివైపు కాలమ్ చొప్పించు",
-  "tools.table.deleteColumn": "తొలగించు",
-  "tools.table.headerRow": "హెడర్ వరుస",
-  "tools.table.insertRowAbove": "పైన వరుస చొప్పించు",
-  "tools.table.insertRowBelow": "క్రింద వరుస చొప్పించు",
-  "tools.table.deleteRow": "తొలగించు",
-  "tools.table.clickToAddRow": "కొత్త వరుస జోడించడానికి క్లిక్ చేయండి",
-  "tools.table.dragToAddRemoveRows": "వరుసలు జోడించడానికి లేదా తొలగించడానికి డ్రాగ్ చేయండి",
-  "tools.table.clickToAddColumn": "కొత్త కాలమ్ జోడించడానికి క్లిక్ చేయండి",
-  "tools.table.dragToAddRemoveColumns": "కాలమ్‌లు జోడించడానికి లేదా తొలగించడానికి డ్రాగ్ చేయండి"
-};
-export {
-  o as default
-};

package/dist/messages-DsVNtdgM.mjs

@@ -1,62 +0,0 @@
-const o = {
-  "blockSettings.dragToMove": "తరలించడానికి డ్రాగ్ చేయండి",
-  "blockSettings.clickToOpenMenu": "మెనూ తెరవడానికి క్లిక్ చేయండి",
-  "toolbox.addBelow": "క్రింద జోడించడానికి క్లిక్ చేయండి",
-  "toolbox.optionAddAbove": "పైన జోడించడానికి Option-క్లిక్ చేయండి",
-  "toolbox.ctrlAddAbove": "పైన జోడించడానికి Ctrl-క్లిక్ చేయండి",
-  "popover.search": "వెతకండి",
-  "popover.nothingFound": "ఏమీ కనుగొనబడలేదు",
-  "popover.convertTo": "మార్చు",
-  "toolNames.text": "టెక్స్ట్",
-  "toolNames.heading": "శీర్షిక",
-  "toolNames.link": "లింక్",
-  "toolNames.bold": "బోల్డ్",
-  "toolNames.italic": "ఇటాలిక్",
-  "toolNames.bulletedList": "బుల్లెట్ జాబితా",
-  "toolNames.numberedList": "నంబర్ జాబితా",
-  "toolNames.todoList": "చేయవలసిన పనుల జాబితా",
-  "tools.link.addLink": "లింక్ జోడించండి",
-  "tools.link.invalidLink": "చెల్లని లింక్",
-  "tools.stub.error": "లోపం",
-  "tools.stub.blockCannotBeDisplayed": "ఈ బ్లాక్‌ను ప్రదర్శించలేము",
-  "tools.header.heading1": "శీర్షిక 1",
-  "tools.header.heading2": "శీర్షిక 2",
-  "tools.header.heading3": "శీర్షిక 3",
-  "tools.header.heading4": "శీర్షిక 4",
-  "tools.header.heading5": "శీర్షిక 5",
-  "tools.header.heading6": "శీర్షిక 6",
-  "tools.list.placeholder": "జాబితా",
-  "blockSettings.delete": "తొలగించు",
-  "a11y.dragHandle": "బ్లాక్ తరలించడానికి డ్రాగ్ చేయండి లేదా మెనూ కోసం క్లిక్ చేయండి",
-  "a11y.dragHandleRole": "డ్రాగ్ హ్యాండిల్",
-  "a11y.dragStarted": "బ్లాక్ డ్రాగ్ అవుతోంది",
-  "a11y.dragStartedMultiple": "{count} బ్లాక్‌లు డ్రాగ్ అవుతున్నాయి",
-  "a11y.dropPosition": "{total} లో {position} స్థానంలో డ్రాప్ అవుతుంది",
-  "a11y.dropCancelled": "డ్రాగ్ రద్దు చేయబడింది",
-  "a11y.blockMoved": "బ్లాక్ {total} లో {position} స్థానానికి తరలించబడింది",
-  "a11y.blocksMoved": "{count} బ్లాక్‌లు {position} స్థానానికి తరలించబడ్డాయి",
-  "a11y.blockDuplicated": "బ్లాక్ {total} లో {position} స్థానంలో నకలు చేయబడింది",
-  "a11y.blocksDuplicated": "{count} బ్లాక్‌లు {position} స్థానం నుండి నకలు చేయబడ్డాయి",
-  "a11y.movedUp": "బ్లాక్ {total} లో {position} స్థానానికి పైకి తరలించబడింది",
-  "a11y.movedDown": "బ్లాక్ {total} లో {position} స్థానానికి క్రిందికి తరలించబడింది",
-  "a11y.atTop": "బ్లాక్ పైన ఉంది, పైకి తరలించలేము",
-  "a11y.atBottom": "బ్లాక్ క్రింద ఉంది, క్రిందికి తరలించలేము",
-  "tools.paragraph.placeholder": "ఏదైనా రాయండి లేదా ఎంచుకోడానికి / నొక్కండి",
-  "tools.table.title": "పట్టిక",
-  "tools.table.clearSelection": "క్లియర్ చేయండి",
-  "tools.table.headerColumn": "హెడర్ కాలమ్",
-  "tools.table.insertColumnLeft": "ఎడమవైపు కాలమ్ చొప్పించు",
-  "tools.table.insertColumnRight": "కుడివైపు కాలమ్ చొప్పించు",
-  "tools.table.deleteColumn": "తొలగించు",
-  "tools.table.headerRow": "హెడర్ వరుస",
-  "tools.table.insertRowAbove": "పైన వరుస చొప్పించు",
-  "tools.table.insertRowBelow": "క్రింద వరుస చొప్పించు",
-  "tools.table.deleteRow": "తొలగించు",
-  "tools.table.clickToAddRow": "కొత్త వరుస జోడించడానికి క్లిక్ చేయండి",
-  "tools.table.dragToAddRemoveRows": "వరుసలు జోడించడానికి లేదా తొలగించడానికి డ్రాగ్ చేయండి",
-  "tools.table.clickToAddColumn": "కొత్త కాలమ్ జోడించడానికి క్లిక్ చేయండి",
-  "tools.table.dragToAddRemoveColumns": "కాలమ్‌లు జోడించడానికి లేదా తొలగించడానికి డ్రాగ్ చేయండి"
-};
-export {
-  o as default
-};