@jackuait/blok 0.9.0 → 0.10.0-beta.10

package/src/tools/list/index.ts

@@ -124,12 +124,19 @@ export class ListItem implements BlockTool {
   }
 
   public render(): HTMLElement {
+    const blockIndex = this.blockId
+      ? this.api.blocks.getBlockIndex(this.blockId) ?? this.api.blocks.getCurrentBlockIndex()
+      : this.api.blocks.getCurrentBlockIndex();
+    const depth = this._data.depth ?? 0;
+    const markerDepth = this.markerCalculator.getVisualDepth(blockIndex, depth);
+
     this._element = renderListItem({
       data: this._data,
       readOnly: this.readOnly,
       placeholder: this.placeholder,
       itemColor: this.itemColor,
       itemSize: this.itemSize,
+      markerDepth,
       setupItemPlaceholder: this.setupItemPlaceholder.bind(this),
       onCheckboxChange: (checked, content) => {
         this._data.checked = checked;
@@ -226,13 +233,18 @@ export class ListItem implements BlockTool {
       return;
     }
 
+    const blockIndex = this.blockId
+      ? this.api.blocks.getBlockIndex(this.blockId) ?? this.api.blocks.getCurrentBlockIndex()
+      : this.api.blocks.getCurrentBlockIndex();
+    const visualDepth = this.markerCalculator.getVisualDepth(blockIndex, newDepth);
+
     if (style === 'ordered') {
       const siblingIndex = getSiblingIndex(this.blockId, newDepth, this._data.style, this.api.blocks, this.markerCalculator);
       const markerText = getOrderedMarkerText(siblingIndex, newDepth, this._data, this.blockId, this.api.blocks, this.markerCalculator);
 
       marker.textContent = markerText;
     } else {
-      const bulletChar = getBulletCharacter(newDepth, this.markerCalculator);
+      const bulletChar = getBulletCharacter(visualDepth, this.markerCalculator);
 
       marker.textContent = bulletChar;
     }
@@ -295,7 +307,7 @@ export class ListItem implements BlockTool {
       getDepth: this.getDepth.bind(this),
     };
 
-    await handleEnter(context);
+    await handleEnter(context, this.depthValidator);
   }
 
   private async handleBackspace(event: KeyboardEvent): Promise<void> {
@@ -337,7 +349,7 @@ export class ListItem implements BlockTool {
       getDepth: this.getDepth.bind(this),
     };
 
-    await handleOutdent(context);
+    await handleOutdent(context, this.depthValidator);
   }
 
   private syncContentFromDOM(): void {
@@ -375,12 +387,18 @@ export class ListItem implements BlockTool {
   }
 
   private rerender(): void {
+    const blockIndex = this.blockId
+      ? this.api.blocks.getBlockIndex(this.blockId) ?? this.api.blocks.getCurrentBlockIndex()
+      : this.api.blocks.getCurrentBlockIndex();
+    const depth = this._data.depth ?? 0;
+
     const newElement = rerenderListItem({
       data: this._data,
       readOnly: this.readOnly,
       placeholder: this.placeholder,
       itemColor: this.itemColor,
       itemSize: this.itemSize,
+      markerDepth: this.markerCalculator.getVisualDepth(blockIndex, depth),
       element: this._element,
       setupItemPlaceholder: this.setupItemPlaceholder.bind(this),
       onCheckboxChange: (checked, content) => {

package/src/tools/list/list-helpers.ts

@@ -166,7 +166,13 @@ export const getOrderedMarkerText = (
 ): string => {
   const startValue = getListStartValue(index, depth, blockId, data, blocks, markerCalculator);
   const actualNumber = startValue + index;
-  return markerCalculator.formatNumber(actualNumber, depth);
+
+  const blockIndex = blockId
+    ? blocks.getBlockIndex(blockId) ?? blocks.getCurrentBlockIndex()
+    : blocks.getCurrentBlockIndex();
+  const visualDepth = markerCalculator.getVisualDepth(blockIndex, depth);
+
+  return markerCalculator.formatNumber(actualNumber, visualDepth);
 }
 
 /**
@@ -216,7 +222,8 @@ export const updateBlockMarker = (
 
   const startValue = markerCalculator.getGroupStartValue(blockIndex, blockDepth, siblingIndex, blockStyle);
   const actualNumber = startValue + siblingIndex;
-  const markerText = markerCalculator.formatNumber(actualNumber, blockDepth);
+  const visualDepth = markerCalculator.getVisualDepth(blockIndex, blockDepth);
+  const markerText = markerCalculator.formatNumber(actualNumber, visualDepth);
 
   marker.textContent = markerText;
 }

package/src/tools/list/list-keyboard.ts

@@ -32,7 +32,10 @@ export interface KeyboardContext {
 /**
  * Handle Enter key - split content or exit list
  */
-export const handleEnter = async (context: KeyboardContext): Promise<void> => {
+export const handleEnter = async (
+  context: KeyboardContext,
+  depthValidator?: ListDepthValidator
+): Promise<void> => {
   const { api, blockId, data, element, getContentElement } = context;
 
   const selection = window.getSelection();
@@ -45,7 +48,7 @@ export const handleEnter = async (context: KeyboardContext): Promise<void> => {
 
   // If current item is empty, handle based on depth
   if (currentContent === '' || currentContent === '<br>') {
-    await exitListOrOutdent(context);
+    await exitListOrOutdent(context, depthValidator);
     return;
   }
 
@@ -98,13 +101,16 @@ export const handleEnter = async (context: KeyboardContext): Promise<void> => {
 /**
  * Exit list or outdent when pressing Enter on empty item
  */
-const exitListOrOutdent = async (context: KeyboardContext): Promise<void> => {
+const exitListOrOutdent = async (
+  context: KeyboardContext,
+  depthValidator?: ListDepthValidator
+): Promise<void> => {
   const { api, blockId, getDepth } = context;
   const currentDepth = getDepth();
 
   // If nested, outdent instead of exiting
   if (currentDepth > 0) {
-    await handleOutdent(context);
+    await handleOutdent(context, depthValidator);
     return;
   }
 
@@ -193,16 +199,11 @@ export const handleIndent = async(
   const { api, blockId, data, syncContentFromDOM, getDepth } = context;
 
   const currentBlockIndex = api.blocks.getCurrentBlockIndex();
-  if (currentBlockIndex === 0) return;
-
-  const previousBlock = api.blocks.getBlockByIndex(currentBlockIndex - 1);
-  if (!previousBlock || previousBlock.name !== TOOL_NAME) return;
-
   const currentDepth = getDepth();
-  const previousBlockDepth = depthValidator.getBlockDepth(previousBlock);
+  const maxAllowedDepth = depthValidator.getMaxAllowedDepth(currentBlockIndex);
 
-  // Can only indent to at most one level deeper than the previous item
-  if (currentDepth > previousBlockDepth) return;
+  // Can only indent if current depth is below the maximum
+  if (currentDepth >= maxAllowedDepth) return;
 
   // Sync current content before updating
   syncContentFromDOM();
@@ -222,9 +223,45 @@ export const handleIndent = async(
 };
 
 /**
- * Handle Shift+Tab key - outdent the list item
+ * Reduce depth by 1 for all descendant list items following the given block.
+ * Stops at non-list blocks or blocks with depth <= the parent's original depth.
  */
-export const handleOutdent = async(context: KeyboardContext): Promise<void> => {
+const cascadeDepthReduction = async (
+  api: API,
+  blockId: string | undefined,
+  parentOriginalDepth: number,
+  depthValidator: ListDepthValidator
+): Promise<void> => {
+  const startIndex = blockId
+    ? api.blocks.getBlockIndex(blockId) ?? api.blocks.getCurrentBlockIndex()
+    : api.blocks.getCurrentBlockIndex();
+  const blocksCount = api.blocks.getBlocksCount();
+
+  const processDescendant = async (index: number): Promise<void> => {
+    if (index >= blocksCount) return;
+
+    const block = api.blocks.getBlockByIndex(index);
+
+    if (!block || block.name !== TOOL_NAME) return;
+
+    const blockDepth = depthValidator.getBlockDepth(block);
+
+    if (blockDepth <= parentOriginalDepth) return;
+
+    await api.blocks.update(block.id, { depth: blockDepth - 1 });
+    await processDescendant(index + 1);
+  };
+
+  await processDescendant(startIndex + 1);
+};
+
+/**
+ * Handle Shift+Tab key - outdent the list item and cascade to descendants
+ */
+export const handleOutdent = async(
+  context: KeyboardContext,
+  depthValidator?: ListDepthValidator
+): Promise<void> => {
   const { api, blockId, data, syncContentFromDOM, getDepth } = context;
 
   const currentDepth = getDepth();
@@ -245,6 +282,11 @@ export const handleOutdent = async(context: KeyboardContext): Promise<void> => {
     depth: newDepth,
   });
 
+  // Cascade depth reduction to descendant list items
+  if (depthValidator) {
+    await cascadeDepthReduction(api, blockId, currentDepth, depthValidator);
+  }
+
   // Restore focus to the updated block after DOM has been updated
   setCaretToBlockContent(api, updatedBlock);
 };

package/src/tools/list/list-lifecycle.ts

@@ -16,6 +16,7 @@ export interface RenderContext {
   placeholder: string;
   itemColor: string | undefined;
   itemSize: string | undefined;
+  markerDepth?: number;
   setupItemPlaceholder: (element: HTMLElement) => void;
   onCheckboxChange: (checked: boolean, content: HTMLElement | null) => void;
   keydownHandler: ((event: KeyboardEvent) => void) | undefined;
@@ -25,7 +26,7 @@ export interface RenderContext {
  * Render the list item
  */
 export const renderListItem = (context: RenderContext): HTMLElement => {
-  const { data, readOnly, placeholder, itemColor, itemSize, setupItemPlaceholder, onCheckboxChange, keydownHandler } = context;
+  const { data, readOnly, placeholder, itemColor, itemSize, markerDepth, setupItemPlaceholder, onCheckboxChange, keydownHandler } = context;
 
   const result = buildListItem({
     data,
@@ -33,6 +34,7 @@ export const renderListItem = (context: RenderContext): HTMLElement => {
     placeholder,
     itemColor,
     itemSize,
+    markerDepth,
     keydownHandler,
   });
 

package/src/tools/list/marker-calculator.ts

@@ -191,6 +191,43 @@ export class ListMarkerCalculator {
     return this.findFirstItemIndex(index - 1, targetDepth, remainingCount - 1, targetStyle);
   }
 
+  /**
+   * Get the base depth of the contiguous list run containing the block at blockIndex.
+   * Walks backward until a non-list block or the start of the editor is reached,
+   * then returns the depth of the first list item in that run.
+   *
+   * @param blockIndex - The block index to look up
+   * @returns The depth of the first list item in the run
+   */
+  getGroupBaseDepth(blockIndex: number): number {
+    const findFirstListIndex = (index: number): number => {
+      if (index <= 0) {
+        return 0;
+      }
+      const prevBlock = this.blocks.getBlockByIndex(index - 1);
+      if (!prevBlock || prevBlock.name !== TOOL_NAME) {
+        return index;
+      }
+      return findFirstListIndex(index - 1);
+    };
+
+    const firstListIndex = findFirstListIndex(blockIndex);
+    const firstBlock = this.blocks.getBlockByIndex(firstListIndex);
+    return this.getBlockDepth(firstBlock);
+  }
+
+  /**
+   * Get the visual depth for marker display.
+   * Returns the depth relative to the list group's base, clamped to >= 0.
+   *
+   * @param blockIndex - The block index
+   * @param actualDepth - The block's actual depth
+   * @returns The visual depth for marker formatting
+   */
+  getVisualDepth(blockIndex: number, actualDepth: number): number {
+    return Math.max(0, actualDepth - this.getGroupBaseDepth(blockIndex));
+  }
+
   /**
    * Get the depth of a block by reading from its DOM.
    */

package/src/tools/list/ordered-marker-manager.ts

@@ -77,7 +77,8 @@ export class OrderedMarkerManager {
       : startValue;
 
     const actualNumber = actualStartValue + siblingIndex;
-    const markerText = this.markerCalculator.formatNumber(actualNumber, blockDepth);
+    const visualDepth = this.markerCalculator.getVisualDepth(blockIndex, blockDepth);
+    const markerText = this.markerCalculator.formatNumber(actualNumber, visualDepth);
 
     marker.textContent = markerText;
   }
@@ -241,7 +242,8 @@ export class OrderedMarkerManager {
       : startValue;
 
     const actualNumber = actualStartValue + siblingIndex;
-    const markerText = this.markerCalculator.formatNumber(actualNumber, blockDepth);
+    const visualDepth = this.markerCalculator.getVisualDepth(blockIndex, blockDepth);
+    const markerText = this.markerCalculator.formatNumber(actualNumber, visualDepth);
 
     marker.textContent = markerText;
   }

package/src/tools/list/style-config.ts

@@ -42,6 +42,7 @@ export const getToolboxConfig = (): ToolboxConfig => [
     data: { style: 'unordered' },
     name: 'bulleted-list',
     searchTerms: ['ul', 'bullet', 'unordered', 'list'],
+    searchTermKeys: ['bullet', 'unordered', 'list'],
     shortcut: '-',
   },
   {
@@ -51,6 +52,7 @@ export const getToolboxConfig = (): ToolboxConfig => [
     data: { style: 'ordered' },
     name: 'numbered-list',
     searchTerms: ['ol', 'ordered', 'number', 'list'],
+    searchTermKeys: ['ordered', 'number', 'list'],
     shortcut: '1.',
   },
   {
@@ -60,6 +62,7 @@ export const getToolboxConfig = (): ToolboxConfig => [
     data: { style: 'checklist' },
     name: 'check-list',
     searchTerms: ['checkbox', 'task', 'todo', 'check', 'list'],
+    searchTermKeys: ['checkbox', 'task', 'todo', 'check', 'list'],
     shortcut: '[]',
   },
 ];

package/src/tools/paragraph/index.ts

@@ -415,6 +415,7 @@ export class Paragraph implements BlockTool {
       title: 'Text',
       titleKey: 'text',
       searchTerms: ['p', 'paragraph', 'plain'],
+      searchTermKeys: ['paragraph', 'plain'],
     };
   }
 }

package/src/tools/quote/index.ts

@@ -0,0 +1,229 @@
+import type {
+  API,
+  BlockTool,
+  BlockToolConstructorOptions,
+  BlockToolData,
+  PasteEvent,
+  ToolboxConfig,
+  ConversionConfig,
+  ToolSanitizerConfig,
+  PasteConfig,
+} from '../../../types';
+import type { MenuConfig } from '../../../types/tools/menu-config';
+import { DATA_ATTR } from '../../components/constants';
+import { IconQuote } from '../../components/icons';
+import { stripFakeBackgroundElements } from '../../components/utils';
+import { PLACEHOLDER_FOCUS_ONLY_CLASSES, setupPlaceholder } from '../../components/utils/placeholder';
+import { twMerge } from '../../components/utils/tw';
+
+export interface QuoteData extends BlockToolData {
+  text: string;
+  size: 'default' | 'large';
+}
+
+const DEFAULT_PLACEHOLDER = 'tools.quote.placeholder';
+
+const BASE_CLASSES = [
+  'border-l-[3px]',
+  'border-current',
+  'pl-[0.9em]',
+  'pr-[0.9em]',
+  'py-[0.2em]',
+  'leading-[1.5]',
+  'outline-hidden',
+  'mt-[0.3em]',
+  'mb-[0.3em]',
+];
+
+const LARGE_CLASS = 'text-[1.2em]';
+
+export class Quote implements BlockTool {
+  private api: API;
+  private readOnly: boolean;
+  private _data: QuoteData;
+  private _element: HTMLQuoteElement | null = null;
+
+  constructor({ data, api, readOnly }: BlockToolConstructorOptions<QuoteData>) {
+    this.api = api;
+    this.readOnly = readOnly;
+    this._data = {
+      text: data?.text ?? '',
+      size: data?.size ?? 'default',
+    };
+
+    if (!this.readOnly) {
+      this.onKeyUp = this.onKeyUp.bind(this);
+    }
+  }
+
+  public onKeyUp(e: KeyboardEvent): void {
+    if (e.code !== 'Backspace' && e.code !== 'Delete') {
+      return;
+    }
+
+    if (!this._element) {
+      return;
+    }
+
+    if (this._element.textContent === '') {
+      this._element.innerHTML = '';
+    }
+  }
+
+  public render(): HTMLQuoteElement {
+    const el = document.createElement('blockquote');
+
+    el.className = twMerge(
+      this.api.styles.block,
+      BASE_CLASSES,
+      PLACEHOLDER_FOCUS_ONLY_CLASSES,
+      this._data.size === 'large' ? LARGE_CLASS : ''
+    );
+    el.setAttribute(DATA_ATTR.tool, 'quote');
+    el.contentEditable = 'false';
+
+    if (this._data.text) {
+      el.innerHTML = this._data.text;
+    } else if (this.readOnly) {
+      el.innerHTML = '<br>';
+    }
+
+    if (!this.readOnly) {
+      el.contentEditable = 'true';
+      el.addEventListener('keyup', this.onKeyUp);
+      setupPlaceholder(el, this.api.i18n.t(DEFAULT_PLACEHOLDER), 'data-blok-placeholder-active');
+    }
+
+    this._element = el;
+
+    return el;
+  }
+
+  public save(blockContent: HTMLQuoteElement): QuoteData {
+    return {
+      text: stripFakeBackgroundElements(blockContent.innerHTML),
+      size: this._data.size,
+    };
+  }
+
+  public validate(savedData: QuoteData): boolean {
+    return savedData.text.trim() !== '';
+  }
+
+  public merge(data: QuoteData): void {
+    if (!this._element) {
+      return;
+    }
+
+    this._data.text += data.text;
+
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML = data.text.trim();
+    const fragment = document.createDocumentFragment();
+    fragment.append(...Array.from(wrapper.childNodes));
+
+    this._element.appendChild(fragment);
+    this._element.normalize();
+  }
+
+  public renderSettings(): MenuConfig {
+    return [
+      {
+        icon: IconQuote,
+        title: this.api.i18n.t('tools.quote.size'),
+        name: 'quote-size',
+        children: {
+          items: [
+            {
+              icon: IconQuote,
+              title: this.api.i18n.t('tools.quote.defaultSize'),
+              onActivate: (): void => this.setSize('default'),
+              closeOnActivate: true,
+              isActive: this._data.size === 'default',
+            },
+            {
+              icon: IconQuote,
+              title: this.api.i18n.t('tools.quote.largeSize'),
+              onActivate: (): void => this.setSize('large'),
+              closeOnActivate: true,
+              isActive: this._data.size === 'large',
+            },
+          ],
+        },
+      },
+    ];
+  }
+
+  private setSize(size: 'default' | 'large'): void {
+    this._data.size = size;
+
+    if (this._element) {
+      this._element.className = twMerge(
+        this.api.styles.block,
+        BASE_CLASSES,
+        PLACEHOLDER_FOCUS_ONLY_CLASSES,
+        size === 'large' ? LARGE_CLASS : ''
+      );
+    }
+  }
+
+  public onPaste(event: PasteEvent): void {
+    const detail = event.detail;
+
+    if (!('data' in detail)) {
+      return;
+    }
+
+    const content = detail.data as HTMLElement;
+
+    this._data = {
+      text: content.innerHTML,
+      size: this._data.size,
+    };
+
+    if (this._element) {
+      this._element.innerHTML = this._data.text || '';
+    }
+  }
+
+  public static get toolbox(): ToolboxConfig {
+    return {
+      icon: IconQuote,
+      title: 'Quote',
+      titleKey: 'quote',
+      searchTerms: ['quote', 'blockquote', 'citation'],
+      searchTermKeys: ['quote', 'blockquote', 'citation'],
+    };
+  }
+
+  public static get conversionConfig(): ConversionConfig {
+    return {
+      export: 'text',
+      import: 'text',
+    };
+  }
+
+  public static get sanitize(): ToolSanitizerConfig {
+    return {
+      text: {
+        br: true,
+        b: true,
+        i: true,
+        a: true,
+        mark: {
+          style: true,
+        },
+      },
+    };
+  }
+
+  public static get isReadOnlySupported(): boolean {
+    return true;
+  }
+
+  public static get pasteConfig(): PasteConfig {
+    return {
+      tags: ['BLOCKQUOTE'],
+    };
+  }
+}

package/src/tools/table/core/table-commands.ts

@@ -77,6 +77,20 @@ export interface SetColWidthsCommand {
   readonly widths: readonly number[] | undefined;
 }
 
+export interface MergeCellsCommand {
+  readonly type: 'merge-cells';
+  readonly minRow: number;
+  readonly maxRow: number;
+  readonly minCol: number;
+  readonly maxCol: number;
+}
+
+export interface SplitCellCommand {
+  readonly type: 'split-cell';
+  readonly row: number;
+  readonly col: number;
+}
+
 export interface ReplaceAllCommand {
   readonly type: 'replace-all';
   readonly data: TableData;
@@ -96,4 +110,6 @@ export type TableCommand =
   | RemoveBlockFromCellCommand
   | SetCellBlocksCommand
   | SetColWidthsCommand
+  | MergeCellsCommand
+  | SplitCellCommand
   | ReplaceAllCommand;

package/src/tools/table/core/table-controller.ts

@@ -83,6 +83,12 @@ export class TableController {
       case 'set-col-widths':
         return this.handleSetColWidths(command.widths ? [...command.widths] : undefined);
 
+      case 'merge-cells':
+        return this.handleMergeCells(command.minRow, command.maxRow, command.minCol, command.maxCol);
+
+      case 'split-cell':
+        return this.handleSplitCell(command.row, command.col);
+
       case 'replace-all':
         return this.handleReplaceAll(command.data);
     }
@@ -223,6 +229,29 @@ export class TableController {
     };
   }
 
+  private handleMergeCells(minRow: number, maxRow: number, minCol: number, maxCol: number): TableDomainEvent {
+    const result = this.model.mergeCells({ minRow, maxRow, minCol, maxCol });
+
+    return {
+      type: 'cells-merged',
+      minRow,
+      maxRow,
+      minCol,
+      maxCol,
+      blocksToRelocate: result.blocksToRelocate,
+    };
+  }
+
+  private handleSplitCell(row: number, col: number): TableDomainEvent {
+    this.model.splitCell(row, col);
+
+    return {
+      type: 'cell-split',
+      row,
+      col,
+    };
+  }
+
   private handleReplaceAll(data: TableData): TableDomainEvent {
     this.model.replaceAll(data);
 

package/src/tools/table/core/table-events.ts

@@ -81,6 +81,21 @@ export interface ColWidthsChangedEvent {
   readonly widths: readonly number[] | undefined;
 }
 
+export interface CellsMergedEvent {
+  readonly type: 'cells-merged';
+  readonly minRow: number;
+  readonly maxRow: number;
+  readonly minCol: number;
+  readonly maxCol: number;
+  readonly blocksToRelocate: readonly string[];
+}
+
+export interface CellSplitEvent {
+  readonly type: 'cell-split';
+  readonly row: number;
+  readonly col: number;
+}
+
 export interface ModelReplacedEvent {
   readonly type: 'model-replaced';
 }
@@ -99,4 +114,6 @@ export type TableDomainEvent =
   | BlockRemovedFromCellEvent
   | CellBlocksSetEvent
   | ColWidthsChangedEvent
+  | CellsMergedEvent
+  | CellSplitEvent
   | ModelReplacedEvent;