@jackuait/blok 0.6.0-beta.0 → 0.6.0-beta.10

package/src/tools/table/table-row-col-popover.ts

@@ -0,0 +1,225 @@
+import type { I18n } from '../../../types/api';
+import {
+  IconInsertAbove,
+  IconInsertBelow,
+  IconInsertLeft,
+  IconInsertRight,
+  IconTrash,
+  IconHeaderRow,
+  IconHeaderColumn,
+} from '../../components/icons';
+import { PopoverDesktop, PopoverItemType } from '../../components/utils/popover';
+
+import { GRIP_HOVER_SIZE } from './table-grip-visuals';
+import { createHeadingToggle } from './table-heading-toggle';
+import type { RowColAction } from './table-row-col-controls';
+
+import { PopoverEvent } from '@/types/utils/popover/popover-event';
+import type { PopoverItemParams } from '@/types/utils/popover/popover-item';
+
+/**
+ * State for the currently active grip popover.
+ */
+export interface PopoverState {
+  popover: PopoverDesktop | null;
+  grip: HTMLElement | null;
+}
+
+/**
+ * Options for building popover menu items.
+ */
+export interface PopoverMenuOptions {
+  getColumnCount: () => number;
+  getRowCount: () => number;
+  isHeadingRow: () => boolean;
+  isHeadingColumn: () => boolean;
+  onAction: (action: RowColAction) => void;
+  i18n: I18n;
+}
+
+/**
+ * Callbacks the popover needs from the controls class.
+ */
+export interface OpenPopoverCallbacks {
+  clearHideTimeout: () => void;
+  hideAllGripsExcept: (grip: HTMLElement) => void;
+  applyActiveClasses: (grip: HTMLElement) => void;
+  applyVisibleClasses: (grip: HTMLElement) => void;
+  scheduleHideAll: () => void;
+  destroyPopover: () => void;
+  onGripPopoverClose?: () => void;
+}
+
+/**
+ * Build the popover menu items for a column grip.
+ */
+export const buildColumnMenuItems = (colIndex: number, options: PopoverMenuOptions): PopoverItemParams[] => {
+  const headingItems: PopoverItemParams[] = colIndex === 0
+    ? [
+      {
+        type: PopoverItemType.Html,
+        element: createHeadingToggle({
+          icon: IconHeaderColumn,
+          label: options.i18n.t('tools.table.headerColumn'),
+          isActive: options.isHeadingColumn(),
+          onToggle: () => {
+            options.onAction({ type: 'toggle-heading-column' });
+          },
+        }),
+      },
+      { type: PopoverItemType.Separator },
+    ]
+    : [];
+
+  const baseItems: PopoverItemParams[] = [
+    {
+      icon: IconInsertLeft,
+      title: options.i18n.t('tools.table.insertColumnLeft'),
+      closeOnActivate: true,
+      onActivate: (): void => {
+        options.onAction({ type: 'insert-col-left', index: colIndex });
+      },
+    },
+    {
+      icon: IconInsertRight,
+      title: options.i18n.t('tools.table.insertColumnRight'),
+      closeOnActivate: true,
+      onActivate: (): void => {
+        options.onAction({ type: 'insert-col-right', index: colIndex });
+      },
+    },
+  ];
+
+  const canDelete = options.getColumnCount() > 1;
+  const deleteItems: PopoverItemParams[] = [
+    { type: PopoverItemType.Separator },
+    {
+      icon: IconTrash,
+      title: options.i18n.t('tools.table.deleteColumn'),
+      isDestructive: true,
+      isDisabled: !canDelete,
+      closeOnActivate: true,
+      onActivate: (): void => {
+        options.onAction({ type: 'delete-col', index: colIndex });
+      },
+    },
+  ];
+
+  return [...headingItems, ...baseItems, ...deleteItems];
+};
+
+/**
+ * Build the popover menu items for a row grip.
+ */
+export const buildRowMenuItems = (rowIndex: number, options: PopoverMenuOptions): PopoverItemParams[] => {
+  const headingItems: PopoverItemParams[] = rowIndex === 0
+    ? [
+      {
+        type: PopoverItemType.Html,
+        element: createHeadingToggle({
+          icon: IconHeaderRow,
+          label: options.i18n.t('tools.table.headerRow'),
+          isActive: options.isHeadingRow(),
+          onToggle: () => {
+            options.onAction({ type: 'toggle-heading' });
+          },
+        }),
+      },
+      { type: PopoverItemType.Separator },
+    ]
+    : [];
+
+  const baseItems: PopoverItemParams[] = [
+    {
+      icon: IconInsertAbove,
+      title: options.i18n.t('tools.table.insertRowAbove'),
+      closeOnActivate: true,
+      onActivate: (): void => {
+        options.onAction({ type: 'insert-row-above', index: rowIndex });
+      },
+    },
+    {
+      icon: IconInsertBelow,
+      title: options.i18n.t('tools.table.insertRowBelow'),
+      closeOnActivate: true,
+      onActivate: (): void => {
+        options.onAction({ type: 'insert-row-below', index: rowIndex });
+      },
+    },
+  ];
+
+  const canDelete = options.getRowCount() > 1;
+  const deleteItems: PopoverItemParams[] = [
+    { type: PopoverItemType.Separator },
+    {
+      icon: IconTrash,
+      title: options.i18n.t('tools.table.deleteRow'),
+      isDestructive: true,
+      isDisabled: !canDelete,
+      closeOnActivate: true,
+      onActivate: (): void => {
+        options.onAction({ type: 'delete-row', index: rowIndex });
+      },
+    },
+  ];
+
+  return [...headingItems, ...baseItems, ...deleteItems];
+};
+
+/**
+ * Create a popover anchored to the given grip and prepare it for display.
+ * Returns the new state. The caller must call `popover.show()` after
+ * storing the state so that any callbacks fired during show see the
+ * updated popover reference.
+ */
+export const createGripPopover = (
+  type: 'row' | 'col',
+  index: number,
+  grips: { col: HTMLElement[]; row: HTMLElement[] },
+  menuOptions: PopoverMenuOptions,
+  callbacks: OpenPopoverCallbacks
+): PopoverState => {
+  callbacks.destroyPopover();
+  callbacks.clearHideTimeout();
+
+  const grip = type === 'col'
+    ? grips.col[index]
+    : grips.row[index];
+
+  if (!grip) {
+    return { popover: null, grip: null };
+  }
+
+  const items = type === 'col'
+    ? buildColumnMenuItems(index, menuOptions)
+    : buildRowMenuItems(index, menuOptions);
+
+  const popover = new PopoverDesktop({
+    items,
+    trigger: grip,
+    flippable: true,
+  });
+
+  popover.on(PopoverEvent.Closed, () => {
+    // The caller's destroyPopover handles nulling the shared state and
+    // calling popover.destroy(). The re-entrant Closed event is caught
+    // by the guard inside destroyPopover (checks if popover is already null).
+    callbacks.destroyPopover();
+    callbacks.applyVisibleClasses(grip);
+    callbacks.scheduleHideAll();
+    callbacks.onGripPopoverClose?.();
+  });
+
+  // Hide all other grips and make the active one blue
+  callbacks.hideAllGripsExcept(grip);
+  callbacks.applyActiveClasses(grip);
+
+  // Expand the grip to hover size so it remains visible while popover is open
+  if (type === 'col') {
+    grip.style.height = `${GRIP_HOVER_SIZE}px`;
+  } else {
+    grip.style.width = `${GRIP_HOVER_SIZE}px`;
+  }
+
+  return { popover, grip };
+};

package/src/tools/table/types.ts

@@ -29,12 +29,16 @@ export const isCellWithBlocks = (cell: LegacyCellContent): cell is CellContent =
 export interface TableData extends BlockToolData {
   /** Whether the first row is a heading row */
   withHeadings: boolean;
+  /** Whether the first column is a heading column */
+  withHeadingColumn: boolean;
   /** Whether the table is full-width */
   stretched?: boolean;
   /** 2D array of cell content (may contain legacy string format when loading saved data) */
   content: LegacyCellContent[][];
   /** Column widths in pixels (e.g., [200, 300, 250]). Omit for equal widths. */
   colWidths?: number[];
+  /** Original per-column width in pixels, set once at creation. New columns = initialColWidth / 2. */
+  initialColWidth?: number;
 }
 
 /**

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/blocks.d.ts

@@ -78,6 +78,14 @@ export interface Blocks {
    */
   getChildren(parentId: string): BlockAPI[];
 
+  /**
+   * Sets the parent of a block, updating both the block's parentId and the parent's contentIds.
+   *
+   * @param blockId - id of the block to reparent
+   * @param parentId - id of the new parent block, or null for root level
+   */
+  setBlockParent(blockId: string, parentId: string | null): void;
+
   /**
    * Returns Blocks count
    * @return {number}

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;
@@ -139,6 +142,13 @@ export interface API {
   i18n: I18n;
   readOnly: ReadOnly;
   ui: Ui;
+  rectangleSelection: {
+    cancelActiveSelection: () => void;
+    isRectActivated: () => boolean;
+    clearSelection: () => void;
+    startSelection: (pageX: number, pageY: number, shiftKey?: boolean) => void;
+    endSelection: () => void;
+  };
 }
 
 import { DATA_ATTR, DataAttrKey, DataAttrValue, createSelector } from './data-attributes';

package/types/tools/table.d.ts

@@ -0,0 +1,67 @@
+import { BlockTool, BlockToolConstructable, BlockToolConstructorOptions, BlockToolData } from './block-tool';
+
+/**
+ * Cell content always contains block IDs.
+ * Every cell in the table is represented as an array of block references.
+ */
+export interface CellContent {
+  blocks: string[];
+}
+
+/**
+ * Table Tool's input and output data format
+ */
+export interface TableData extends BlockToolData {
+  /** Whether the first row is a heading row */
+  withHeadings: boolean;
+  /** Whether the first column is a heading column */
+  withHeadingColumn: boolean;
+  /** Whether the table is full-width */
+  stretched?: boolean;
+  /** 2D array of cell content */
+  content: CellContent[][];
+  /** Column widths in pixels (e.g., [200, 300, 250]). Omit for equal widths. */
+  colWidths?: number[];
+}
+
+/**
+ * Table Tool's configuration
+ */
+export interface TableConfig {
+  /** Initial number of rows (default: 3) */
+  rows?: number;
+  /** Initial number of columns (default: 3) */
+  cols?: number;
+  /** Whether to start with heading row enabled */
+  withHeadings?: boolean;
+  /** Whether to start stretched */
+  stretched?: boolean;
+}
+
+/**
+ * Table Tool for the Blok Editor
+ * Renders a 2D grid of block-based cells
+ */
+export interface Table extends BlockTool {
+  /**
+   * Return Tool's view
+   */
+  render(): HTMLElement;
+
+  /**
+   * Validate Table block data
+   */
+  validate(blockData: TableData): boolean;
+
+  /**
+   * Extract Tool's data from the view
+   */
+  save(): TableData;
+}
+
+/**
+ * Table Tool constructor
+ */
+export interface TableConstructable extends BlockToolConstructable {
+  new(config: BlockToolConstructorOptions<TableData, TableConfig>): Table;
+}

package/types/tools-entry.d.ts

@@ -6,6 +6,7 @@
 import { HeaderConstructable, HeaderData, HeaderConfig } from './tools/header';
 import { ParagraphConstructable, ParagraphData, ParagraphConfig } from './tools/paragraph';
 import { ListConstructable, ListData, ListConfig, ListStyle } from './tools/list';
+import { TableConstructable, TableData, TableConfig, CellContent } from './tools/table';
 import { InlineToolConstructable } from './tools/inline-tool';
 import { BlockTuneConstructable } from './block-tunes';
 import { ToolSettings } from './tools';
@@ -14,11 +15,13 @@ import { ToolSettings } from './tools';
 export const Paragraph: ParagraphConstructable;
 export const Header: HeaderConstructable;
 export const List: ListConstructable;
+export const Table: TableConstructable;
 
 // Re-export data and config types for convenience
 export { HeaderData, HeaderConfig } from './tools/header';
 export { ParagraphData, ParagraphConfig } from './tools/paragraph';
 export { ListData, ListConfig, ListStyle } from './tools/list';
+export { TableData, TableConfig, CellContent } from './tools/table';
 
 // Inline tools
 export const Bold: InlineToolConstructable;
@@ -36,6 +39,7 @@ export const defaultBlockTools: {
   readonly paragraph: { readonly inlineToolbar: true; readonly config: { readonly preserveBlank: true } };
   readonly header: { readonly inlineToolbar: true };
   readonly list: { readonly inlineToolbar: true };
+  readonly table: {};
 };
 
 /**

package/types/utils/popover/popover-item.d.ts

@@ -160,6 +160,12 @@ export interface PopoverItemDefaultBaseParams {
    */
   isDisabled?: boolean;
 
+  /**
+   * True if item represents a destructive action (e.g. delete).
+   * Applies red text/icon color and red-tinted hover background.
+   */
+  isDestructive?: boolean;
+
   /**
    * True if popover should close once item is activated
    */

package/types/utils/popover/popover.d.ts

@@ -22,6 +22,13 @@ export interface PopoverParams {
    */
   trigger?: HTMLElement;
 
+  /**
+   * Optional position (DOMRect) to use for positioning instead of trigger element.
+   * When provided, this takes precedence over trigger's getBoundingClientRect().
+   * Useful for positioning at caret location or other dynamic positions.
+   */
+  position?: DOMRect;
+
   /**
    * True if popover should contain search field
    */

package/dist/chunks/messages-CySyfkMU.mjs

@@ -1,48 +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": "ఏదైనా delaysాయండి లేదా ఎంచdelay / నొక్కండి"
-};
-export {
-  o as default
-};

package/dist/messages-CySyfkMU.mjs

@@ -1,48 +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": "ఏదైనా delaysాయండి లేదా ఎంచdelay / నొక్కండి"
-};
-export {
-  o as default
-};