@jackuait/blok 0.10.0-beta.4 → 0.10.0-beta.6

package/src/tools/list/depth-validator.ts

@@ -34,24 +34,21 @@ export class ListDepthValidator {
    * Calculate the maximum allowed depth at a given block index.
    *
    * Rules:
-   * 1. First item (index 0) must be at depth 0
+   * 1. First-in-group items (index 0 or previous block is not a list) are uncapped
    * 2. For other items: maxDepth = previousListItem.depth + 1
-   * 3. If previous block is not a list item, maxDepth = 0
    *
    * @param blockIndex - The index of the block
-   * @returns The maximum allowed depth (0 or more)
+   * @returns The maximum allowed depth (0 or more, or Infinity for first-in-group)
    */
   getMaxAllowedDepth(blockIndex: number): number {
-    // First item must be at depth 0
     if (blockIndex === 0) {
-      return 0;
+      return 1;
     }
 
     const previousBlock = this.blocks.getBlockByIndex(blockIndex - 1);
 
-    // If previous block doesn't exist or isn't a list item, max depth is 0
     if (!previousBlock || previousBlock.name !== TOOL_NAME) {
-      return 0;
+      return 1;
     }
 
     // Max depth is previous item's depth + 1

package/src/tools/list/dom-builder.ts

@@ -69,6 +69,8 @@ export interface DOMBuilderContext {
   itemSize?: string;
   /** Optional keydown event handler */
   keydownHandler?: ((event: KeyboardEvent) => void) | null;
+  /** Visual depth for marker display (overrides data.depth for marker only) */
+  markerDepth?: number;
 }
 
 /**
@@ -149,7 +151,7 @@ export const buildWrapper = (context: DOMBuilderContext): HTMLElement => {
  * @returns The list item element containing marker and content
  */
 export const buildStandardContent = (context: DOMBuilderContext): HTMLElement => {
-  const { data, itemColor, itemSize, placeholder } = context;
+  const { data, itemColor, itemSize, placeholder, markerDepth } = context;
 
   const item = document.createElement('div');
   item.setAttribute('role', 'listitem');
@@ -170,8 +172,8 @@ export const buildStandardContent = (context: DOMBuilderContext): HTMLElement =>
     item.style.marginLeft = `${depth * indent}px`;
   }
 
-  // Create marker element
-  const marker = createMarker(data.style, depth);
+  // Create marker element (use visual depth for marker display when provided)
+  const marker = createMarker(data.style, markerDepth ?? depth);
   marker.setAttribute('data-list-marker', 'true');
   marker.setAttribute('data-blok-mutation-free', 'true');
   item.appendChild(marker);

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/table/index.ts

@@ -234,7 +234,7 @@ export class Table implements BlockTool {
 
   public static get pasteConfig(): PasteConfig {
     return {
-      tags: ['TABLE', 'TR', 'TH', 'TD'],
+      tags: ['TABLE', 'TR', { TH: { style: true } }, { TD: { style: true } }],
     };
   }
 
@@ -260,7 +260,7 @@ export class Table implements BlockTool {
 
           return style.length > 0 ? { style: true } : {};
         },
-        a: { href: true },
+        a: { href: true, target: '_blank', rel: 'nofollow' },
         input: { type: true, checked: true },
       },
     };

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

@@ -185,7 +185,7 @@ const CELL_SANITIZE_CONFIG: SanitizerConfig = {
   i: true,
   em: true,
   br: true,
-  a: { href: true },
+  a: { href: true, target: '_blank', rel: 'nofollow' },
   mark: (node: Element): { [attr: string]: boolean | string } => {
     const el = node as HTMLElement;
     const style = el.style;

package/types/api/tools.d.ts

@@ -1,16 +1,4 @@
 import { BlockToolAdapter } from '../tools/adapters/block-tool-adapter';
-import { ToolConstructable, ToolSettings } from '../tools';
-import { ThemeMode } from './theme';
-
-/**
- * Tools-related configuration that can be passed to a nested Blok instance.
- */
-export interface ToolsConfig {
-  tools: { [toolName: string]: ToolConstructable | ToolSettings } | undefined;
-  inlineToolbar?: string[] | boolean;
-  tunes?: string[];
-  theme?: ThemeMode;
-}
 
 /**
  * Describes methods for accessing installed Blok tools
@@ -20,10 +8,4 @@ export interface Tools {
    * Returns all available Block Tools
    */
   getBlockTools(): BlockToolAdapter[];
-
-  /**
-   * Returns the tools-related configuration of the current editor instance.
-   * Useful for creating nested Blok editors with the same tools.
-   */
-  getToolsConfig(): ToolsConfig;
 }

package/types/markdown.d.ts

@@ -0,0 +1,2 @@
+export { markdownToBlocks } from '../src/markdown/index';
+export type { MarkdownImportConfig, ToolMapEntry } from '../src/markdown/types';

package/types/tools/code.d.ts

@@ -0,0 +1,11 @@
+import { BlockToolData } from './block-tool-data';
+
+/**
+ * Code block tool data format.
+ */
+export interface CodeData extends BlockToolData {
+  /** Raw code text (not HTML) */
+  code: string;
+  /** Language identifier, e.g. "javascript", "plain text" */
+  language: string;
+}

package/src/tools/database/database-backend-sync.ts

@@ -1,101 +0,0 @@
-import type { DatabaseAdapter, PropertyDefinition, DatabaseRow, DatabaseViewConfig } from './types';
-
-const UPDATE_DEBOUNCE_MS = 500;
-
-export class DatabaseBackendSync {
-  private readonly adapter: DatabaseAdapter | undefined;
-  private readonly onError: ((error: unknown) => void) | undefined;
-  private readonly pendingTimers = new Map<string, ReturnType<typeof setTimeout>>();
-  private readonly pendingUpdates = new Map<string, Parameters<DatabaseAdapter['updateRow']>[0]>();
-
-  constructor(adapter?: DatabaseAdapter, onError?: (error: unknown) => void) {
-    this.adapter = adapter;
-    this.onError = onError;
-  }
-
-  private async safeCall<T>(fn: (adapter: DatabaseAdapter) => Promise<T>): Promise<T | undefined> {
-    if (this.adapter === undefined) return undefined;
-    try { return await fn(this.adapter); }
-    catch (error) { this.onError?.(error); return undefined; }
-  }
-
-  // ─── Load ───
-
-  async syncLoadDatabase(): Promise<{ schema: PropertyDefinition[]; rows: Record<string, DatabaseRow>; views: DatabaseViewConfig[] } | undefined> {
-    return this.safeCall((a) => a.loadDatabase());
-  }
-
-  // ─── Row operations ───
-
-  async syncCreateRow(params: Parameters<DatabaseAdapter['createRow']>[0]): Promise<ReturnType<DatabaseAdapter['createRow']> extends Promise<infer R> ? R | undefined : never> {
-    return this.safeCall((a) => a.createRow(params));
-  }
-
-  syncUpdateRow(params: Parameters<DatabaseAdapter['updateRow']>[0]): void {
-    if (this.adapter === undefined) return;
-    const { rowId } = params;
-    const existing = this.pendingTimers.get(rowId);
-    if (existing !== undefined) clearTimeout(existing);
-    this.pendingUpdates.set(rowId, params);
-    this.pendingTimers.set(rowId, setTimeout(() => { this.flushRow(rowId); }, UPDATE_DEBOUNCE_MS));
-  }
-
-  async syncMoveRow(params: Parameters<DatabaseAdapter['moveRow']>[0]): Promise<ReturnType<DatabaseAdapter['moveRow']> extends Promise<infer R> ? R | undefined : never> {
-    this.flushRow(params.rowId);
-
-    return this.safeCall((a) => a.moveRow(params));
-  }
-
-  async syncDeleteRow(params: Parameters<DatabaseAdapter['deleteRow']>[0]): Promise<void> {
-    await this.safeCall((a) => a.deleteRow(params));
-  }
-
-  // ─── Property operations ───
-
-  async syncCreateProperty(params: Parameters<DatabaseAdapter['createProperty']>[0]): Promise<ReturnType<DatabaseAdapter['createProperty']> extends Promise<infer R> ? R | undefined : never> {
-    return this.safeCall((a) => a.createProperty(params));
-  }
-
-  async syncUpdateProperty(params: Parameters<DatabaseAdapter['updateProperty']>[0]): Promise<ReturnType<DatabaseAdapter['updateProperty']> extends Promise<infer R> ? R | undefined : never> {
-    return this.safeCall((a) => a.updateProperty(params));
-  }
-
-  async syncDeleteProperty(params: Parameters<DatabaseAdapter['deleteProperty']>[0]): Promise<void> {
-    await this.safeCall((a) => a.deleteProperty(params));
-  }
-
-  // ─── View operations ───
-
-  async syncCreateView(params: Parameters<DatabaseAdapter['createView']>[0]): Promise<ReturnType<DatabaseAdapter['createView']> extends Promise<infer R> ? R | undefined : never> {
-    return this.safeCall((a) => a.createView(params));
-  }
-
-  async syncUpdateView(params: Parameters<DatabaseAdapter['updateView']>[0]): Promise<ReturnType<DatabaseAdapter['updateView']> extends Promise<infer R> ? R | undefined : never> {
-    return this.safeCall((a) => a.updateView(params));
-  }
-
-  async syncDeleteView(params: Parameters<DatabaseAdapter['deleteView']>[0]): Promise<void> {
-    await this.safeCall((a) => a.deleteView(params));
-  }
-
-  // ─── Flush & destroy ───
-
-  flushPendingUpdates(): void {
-    for (const rowId of this.pendingTimers.keys()) { this.flushRow(rowId); }
-  }
-
-  destroy(): void {
-    for (const timer of this.pendingTimers.values()) clearTimeout(timer);
-    this.pendingTimers.clear();
-    this.pendingUpdates.clear();
-  }
-
-  private flushRow(rowId: string): void {
-    const timer = this.pendingTimers.get(rowId);
-    if (timer !== undefined) clearTimeout(timer);
-    this.pendingTimers.delete(rowId);
-    const params = this.pendingUpdates.get(rowId);
-    this.pendingUpdates.delete(rowId);
-    if (params !== undefined) void this.safeCall((a) => a.updateRow(params));
-  }
-}