@jackuait/blok 0.10.2 → 0.10.4

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

@@ -91,14 +91,14 @@ export class KeyboardNavigation extends BlockEventComposer {
       return;
     }
 
-    const isNavigated = event.shiftKey ? Caret.navigatePrevious(true) : Caret.navigateNext(true);
+    event.shiftKey ? Caret.navigatePrevious(true) : Caret.navigateNext(true);
 
     /**
-     * If we have next Block/input to focus, then focus it. Otherwise, leave native Tab behaviour
+     * Always prevent default Tab behaviour to keep focus inside the editor.
+     * Without this, pressing Tab on the last block of a nested editor (e.g. a
+     * database card drawer) lets the browser move focus out of the editor entirely.
      */
-    if (isNavigated) {
-      event.preventDefault();
-    }
+    event.preventDefault();
   }
 
   /**

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

@@ -300,6 +300,17 @@ export class BlockManager extends Module {
       eventsDispatcher: this.eventsDispatcher,
       getBlockIndex: (block) => this.repository.getBlockIndex(block),
       onBlockMutated: this.blockDidMutated.bind(this),
+      shouldHandleEvent: (event: Event) => {
+        const target = event.target;
+
+        if (target instanceof Element) {
+          const closestEditor = target.closest('[data-blok-testid="blok-editor"]');
+
+          return closestEditor === null || closestEditor === this.Blok.UI.nodes.wrapper;
+        }
+
+        return true;
+      },
     });
 
     // Initialize factory
@@ -438,6 +449,8 @@ export class BlockManager extends Module {
     parentId?: string;
     contentIds?: string[];
     bindEventsImmediately?: boolean;
+    lastEditedAt?: number;
+    lastEditedBy?: string | null;
   }): Block {
     return this.factory.composeBlock(options);
   }
@@ -1086,6 +1099,11 @@ export class BlockManager extends Module {
     // Also skip if a pointer drag is active — the browser can mutate contenteditable DOM across
     // cell boundaries during a drag, and we must not write that corrupted state to Yjs.
     if (mutationType === BlockChangedMutationType && !this.yjsSync.isSyncingFromYjs && !this._isPointerDragActive) {
+      // eslint-disable-next-line no-param-reassign
+      block.lastEditedAt = Date.now();
+      // eslint-disable-next-line no-param-reassign
+      block.lastEditedBy = this.config.user?.name ?? null;
+
       void this.syncBlockDataToYjs(block);
     }
 
@@ -1140,5 +1158,9 @@ export class BlockManager extends Module {
     for (const [key, value] of Object.entries(savedData.data)) {
       this.Blok.YjsManager.updateBlockData(block.id, key, value);
     }
+
+    if (block.lastEditedAt !== undefined) {
+      this.Blok.YjsManager.updateBlockMetadata(block.id, block.lastEditedAt, block.lastEditedBy);
+    }
   }
 }

package/src/components/modules/blockManager/event-binder.ts

@@ -51,6 +51,8 @@ export interface BlockEventBinderDependencies {
   getBlockIndex: (block: Block) => number;
   /** Callback when block is mutated */
   onBlockMutated: BlockMutationCallback;
+  /** Check if an event should be handled by this editor instance */
+  shouldHandleEvent?: (event: Event) => boolean;
 }
 
 /**
@@ -76,22 +78,31 @@ export class BlockEventBinder {
    * @param block - Block to bind events to
    */
   public bindBlockEvents(block: Block): void {
-    const { blockEvents, listeners, onBlockMutated, getBlockIndex } = this.dependencies;
+    const { blockEvents, listeners, onBlockMutated, getBlockIndex, shouldHandleEvent } = this.dependencies;
 
     listeners.on(block.holder, 'keydown', (event: Event) => {
       if (event instanceof KeyboardEvent) {
+        if (shouldHandleEvent && !shouldHandleEvent(event)) {
+          return;
+        }
         blockEvents.keydown(event);
       }
     });
 
     listeners.on(block.holder, 'keyup', (event: Event) => {
       if (event instanceof KeyboardEvent) {
+        if (shouldHandleEvent && !shouldHandleEvent(event)) {
+          return;
+        }
         blockEvents.keyup(event);
       }
     });
 
     listeners.on(block.holder, 'input', (event: Event) => {
       if (event instanceof InputEvent) {
+        if (shouldHandleEvent && !shouldHandleEvent(event)) {
+          return;
+        }
         blockEvents.input(event);
       }
     });

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

@@ -64,6 +64,8 @@ export class BlockFactory {
       parentId,
       contentIds,
       bindEventsImmediately = false,
+      lastEditedAt,
+      lastEditedBy,
     } = options;
 
     const tool = this.dependencies.tools.get(name);
@@ -82,6 +84,8 @@ export class BlockFactory {
       parentId,
       contentIds,
       bindMutationWatchersImmediately: bindEventsImmediately,
+      lastEditedAt,
+      lastEditedBy,
     }, this.dependencies.eventsDispatcher);
 
     if (this.readOnlyState) {

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

@@ -26,6 +26,10 @@ export interface ComposeBlockOptions {
   contentIds?: string[];
   /** Bind events immediately instead of deferring via requestIdleCallback */
   bindEventsImmediately?: boolean;
+  /** Timestamp of the last edit (milliseconds since epoch) */
+  lastEditedAt?: number;
+  /** Display name of the user who last edited this block */
+  lastEditedBy?: string | null;
 }
 
 /**

package/src/components/modules/blockManager/yjs-sync.ts

@@ -247,6 +247,8 @@ export class BlockYjsSync {
     const data = this.dependencies.YjsManager.yMapToObject(yblock.get('data') as YMap<unknown>);
     const ytunes = yblock.get('tunes') as YMap<unknown> | undefined;
     const tunes = ytunes !== undefined ? this.dependencies.YjsManager.yMapToObject(ytunes) : {};
+    const lastEditedAt = yblock.get('lastEditedAt') as number | undefined;
+    const lastEditedBy = (yblock.get('lastEditedBy') as string | undefined) ?? null;
 
     // Check if tunes have changed - if so, we need to recreate the block
     // because tunes are instantiated during block construction
@@ -267,6 +269,8 @@ export class BlockYjsSync {
         contentIds: block.contentIds.length > 0 ? [...block.contentIds] : undefined,
         parentId: block.parentId ?? undefined,
         bindEventsImmediately: true,
+        lastEditedAt,
+        lastEditedBy,
       });
 
       // Use atomic operation with RAF extension to prevent DOM mutation observers
@@ -298,6 +302,8 @@ export class BlockYjsSync {
             contentIds: block.contentIds.length > 0 ? [...block.contentIds] : undefined,
             parentId: block.parentId ?? undefined,
             bindEventsImmediately: true,
+            lastEditedAt,
+            lastEditedBy,
           });
 
           this.handlers.replaceBlock(blockIndex, newBlock);
@@ -330,6 +336,8 @@ export class BlockYjsSync {
     const toolName = yblock.get('type') as string;
     const data = this.dependencies.YjsManager.yMapToObject(yblock.get('data') as YMap<unknown>);
     const parentId = yblock.get('parentId') as string | undefined;
+    const lastEditedAt = yblock.get('lastEditedAt') as number | undefined;
+    const lastEditedBy = (yblock.get('lastEditedBy') as string | undefined) ?? null;
 
     // Find the index of this block in Yjs to insert at correct position
     const yjsBlocks = this.dependencies.YjsManager.toJSON();
@@ -350,6 +358,8 @@ export class BlockYjsSync {
         data,
         parentId: parentId ?? undefined,
         bindEventsImmediately: true,
+        lastEditedAt,
+        lastEditedBy,
       });
 
       this.blocksStore.insert(targetIndex, block);
@@ -438,7 +448,7 @@ export class BlockYjsSync {
     const yjsBlocks = this.dependencies.YjsManager.toJSON();
 
     // Collect blocks to create — skip any that already exist
-    const toCreate: Array<{ blockId: string; toolName: string; data: Record<string, unknown>; parentId: string | undefined; targetIndex: number }> = [];
+    const toCreate: Array<{ blockId: string; toolName: string; data: Record<string, unknown>; parentId: string | undefined; lastEditedAt: number | undefined; lastEditedBy: string | null; targetIndex: number }> = [];
 
     for (const blockId of blockIds) {
       if (this.repository.getBlockById(blockId) !== undefined) {
@@ -454,13 +464,15 @@ export class BlockYjsSync {
       const toolName = yblock.get('type') as string;
       const data = this.dependencies.YjsManager.yMapToObject(yblock.get('data') as YMap<unknown>);
       const parentId = yblock.get('parentId') as string | undefined;
+      const lastEditedAt = yblock.get('lastEditedAt') as number | undefined;
+      const lastEditedBy = (yblock.get('lastEditedBy') as string | undefined) ?? null;
       const targetIndex = yjsBlocks.findIndex((b) => b.id === blockId);
 
       if (targetIndex === -1) {
         continue;
       }
 
-      toCreate.push({ blockId, toolName, data, parentId: parentId ?? undefined, targetIndex });
+      toCreate.push({ blockId, toolName, data, parentId: parentId ?? undefined, lastEditedAt, lastEditedBy, targetIndex });
     }
 
     if (toCreate.length === 0) {
@@ -478,6 +490,8 @@ export class BlockYjsSync {
           data: entry.data,
           parentId: entry.parentId,
           bindEventsImmediately: true,
+          lastEditedAt: entry.lastEditedAt,
+          lastEditedBy: entry.lastEditedBy,
         });
 
         this.blocksStore.addToArray(entry.targetIndex, block);

package/src/components/modules/paste/google-docs-preprocessor.ts

@@ -85,7 +85,9 @@ function isDefaultBlack(color: string): boolean {
 }
 
 /**
- * Compute the relative luminance of a CSS color value (rgb() or hex format).
+ * Compute the relative luminance of a CSS color value.
+ * Supports rgb(), rgba(), hsl(), hsla(), and hex (#rrggbb / #rgb) formats.
+ * Alpha components are ignored — only the base RGB channels are used.
  * Returns a value in [0, 1], or -1 if the format is unrecognized.
  * Uses simplified linear luminance (no gamma correction), adequate for
  * threshold comparisons at this scale.
@@ -93,7 +95,8 @@ function isDefaultBlack(color: string): boolean {
 function computeRelativeLuminance(color: string): number {
   const normalized = color.replace(/\s/g, '').toLowerCase();
 
-  const rgbMatch = /^rgb\((\d+),(\d+),(\d+)\)$/.exec(normalized);
+  /* rgb() and rgba() — alpha component is optional and ignored */
+  const rgbMatch = /^rgba?\((\d+),(\d+),(\d+)(?:,[\d.]+)?\)$/.exec(normalized);
 
   if (rgbMatch) {
     const r = parseInt(rgbMatch[1], 10) / 255;
@@ -103,6 +106,42 @@ function computeRelativeLuminance(color: string): number {
     return 0.2126 * r + 0.7152 * g + 0.0722 * b;
   }
 
+  /* hsl() and hsla() — alpha component is optional and ignored */
+  const hslMatch = /^hsla?\(([\d.]+),([\d.]+)%,([\d.]+)%(?:,[\d.]+)?\)$/.exec(normalized);
+
+  if (hslMatch) {
+    const h = parseFloat(hslMatch[1]) / 360;
+    const s = parseFloat(hslMatch[2]) / 100;
+    const l = parseFloat(hslMatch[3]) / 100;
+
+    if (s === 0) {
+      return 0.2126 * l + 0.7152 * l + 0.0722 * l; // achromatic: r = g = b = l
+    }
+
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    const hueToChannel = (t: number): number => {
+      const wrapped = (() => {
+        if (t < 0) return t + 1;
+        if (t > 1) return t - 1;
+
+        return t;
+      })();
+
+      if (wrapped < 1 / 6) { return p + (q - p) * 6 * wrapped; }
+      if (wrapped < 1 / 2) { return q; }
+      if (wrapped < 2 / 3) { return p + (q - p) * (2 / 3 - wrapped) * 6; }
+
+      return p;
+    };
+
+    const r = hueToChannel(h + 1 / 3);
+    const g = hueToChannel(h);
+    const b = hueToChannel(h - 1 / 3);
+
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  }
+
   const hexMatch = /^#([0-9a-f]{6}|[0-9a-f]{3})$/.exec(normalized);
 
   if (hexMatch) {
@@ -156,9 +195,16 @@ function isDefaultDarkBackground(bgColor: string): boolean {
  *
  * Uses relative luminance > 0.75, which is above all Blok text presets while
  * catching typical dark mode default text colors.
+ *
+ * Returns false for unrecognized color formats (luminance === -1) so unknown
+ * formats are treated conservatively: they are not filtered out here, but any
+ * color that cannot be parsed also cannot be mapped to a preset, so the
+ * sanitizer will strip it regardless.
  */
 function isDefaultLightText(color: string): boolean {
-  return computeRelativeLuminance(color) > 0.75;
+  const luminance = computeRelativeLuminance(color);
+
+  return luminance >= 0 && luminance > 0.75;
 }
 
 /**

package/src/components/modules/paste/handlers/table-cells-handler.ts

@@ -41,10 +41,20 @@ export class TableCellsHandler extends BasePasteHandler implements PasteHandler
       return false;
     }
 
-    // If cursor is inside a table cell, let the grid paste listener handle it
+    // If cursor is inside a table cell, let the grid paste listener handle it.
+    // Also bail when focus was lost (e.g. due to a React re-render) but the
+    // current block's holder is still inside a table-cell-blocks container —
+    // the paste was intended for the table, not for creating a new one.
+    // Additionally, bail when the paste event's original target was inside a
+    // table cell, even if document.activeElement is now body (covers the case
+    // where the event fired on the cell-blocks container itself).
     const activeElement = document.activeElement as HTMLElement | null;
 
-    if (activeElement?.closest('[data-blok-table-cell]')) {
+    if (
+      activeElement?.closest('[data-blok-table-cell]') ||
+      context.currentBlock?.holder?.closest('[data-blok-table-cell-blocks]') ||
+      context.pasteTarget?.closest('[data-blok-table-cell]')
+    ) {
       return false;
     }
 

package/src/components/modules/paste/index.ts

@@ -103,13 +103,13 @@ export class Paste extends Module {
   /**
    * Handle pasted data transfer object.
    */
-  public async processDataTransfer(dataTransfer: DataTransfer): Promise<void> {
+  public async processDataTransfer(dataTransfer: DataTransfer, pasteTarget?: Element): Promise<void> {
     const blokData = dataTransfer.getData(this.MIME_TYPE);
     const plainData = dataTransfer.getData('text/plain');
     const rawHtmlData = dataTransfer.getData('text/html');
 
     // Route to handlers based on data type
-    const handled = await this.routeToHandlers(dataTransfer, plainData, rawHtmlData, blokData);
+    const handled = await this.routeToHandlers(dataTransfer, plainData, rawHtmlData, blokData, pasteTarget);
 
     if (handled) {
       return;
@@ -126,7 +126,8 @@ export class Paste extends Module {
     dataTransfer: DataTransfer,
     plainData: string,
     rawHtmlData: string,
-    blokData: string
+    blokData: string,
+    pasteTarget?: Element
   ): Promise<boolean> {
     const { BlockManager } = this.Blok;
     const currentBlock = BlockManager.currentBlock;
@@ -142,6 +143,7 @@ export class Paste extends Module {
       canReplaceCurrentBlock,
       currentBlock: currentBlock ?? undefined,
       plainData,
+      pasteTarget,
     };
 
     // Try handlers in priority order
@@ -313,7 +315,9 @@ export class Paste extends Module {
     event.preventDefault();
 
     if (event.clipboardData) {
-      await this.processDataTransfer(event.clipboardData);
+      const pasteTarget = event.target instanceof Element ? event.target : undefined;
+
+      await this.processDataTransfer(event.clipboardData, pasteTarget);
     }
 
     Toolbar.moveAndOpen();

package/src/components/modules/paste/types.ts

@@ -50,6 +50,8 @@ export interface HandlerContext {
   canReplaceCurrentBlock: boolean;
   currentBlock?: Block;
   plainData?: string;
+  /** The DOM element that was the target of the paste event. */
+  pasteTarget?: Element;
 }
 
 /**

package/src/components/modules/renderer.ts

@@ -3,7 +3,7 @@ import type { StubData } from '../../tools/stub';
 import { Module } from '../__module';
 import type { Block } from '../block';
 import type { BlockToolAdapter } from '../tools/block';
-import { log, logLabeled } from '../utils';
+import { generateBlockId, log, logLabeled } from '../utils';
 import {
   analyzeDataFormat,
   expandToHierarchical,
@@ -94,11 +94,27 @@ export class Renderer extends Module {
 
         // Note: Yjs data layer is loaded via BlockManager.insertMany() with the correct block IDs
 
+        /**
+         * Track seen IDs to detect and resolve duplicates
+         */
+        const seenIds = new Set<string>();
+
         /**
          * Create Blocks instances
          */
         const blocks = processedBlocks.map((blockData: OutputBlockData) => {
-          const { tunes, id, parent, content } = blockData;
+          const { tunes, parent, content, lastEditedAt, lastEditedBy } = blockData;
+          const hasDuplicateId = blockData.id !== undefined && seenIds.has(blockData.id);
+
+          if (hasDuplicateId) {
+            logLabeled(`Duplicate block id «${blockData.id}» replaced with a generated id to ensure uniqueness`, 'warn');
+          }
+
+          const id = hasDuplicateId ? generateBlockId() : blockData.id;
+
+          if (id !== undefined) {
+            seenIds.add(id);
+          }
           const originalTool = blockData.type;
 
           /**
@@ -145,6 +161,8 @@ export class Renderer extends Module {
                 tunes,
                 parentId: parent,
                 contentIds: content,
+                lastEditedAt,
+                lastEditedBy,
               });
             } catch (error) {
               log(`Block «${tool}» skipped because of plugins error`, 'error', {
@@ -164,6 +182,8 @@ export class Renderer extends Module {
                 tunes,
                 parentId: parent,
                 contentIds: content,
+                lastEditedAt,
+                lastEditedBy,
               });
             }
           };

package/src/components/modules/saver.ts

@@ -24,6 +24,14 @@ type SaverValidatedData = ValidatedData & {
    * Array of child block ids (Notion-like flat-with-references model)
    */
   contentIds?: string[];
+  /**
+   * Timestamp of the last edit to this block
+   */
+  lastEditedAt?: number;
+  /**
+   * Identifier of the user who last edited this block
+   */
+  lastEditedBy?: string | null;
 };
 
 type SanitizableBlockData = SaverValidatedData & Pick<SavedData, 'data' | 'tool'>;
@@ -163,6 +171,8 @@ export class Saver extends Module {
       isValid,
       parentId: block.parentId,
       contentIds: block.contentIds,
+      lastEditedAt: block.lastEditedAt,
+      lastEditedBy: block.lastEditedBy,
     };
   }
 
@@ -174,7 +184,7 @@ export class Saver extends Module {
   private makeOutput(allExtractedData: SaverValidatedData[]): OutputData {
     const extractedBlocks: OutputData['blocks'] = [];
 
-    allExtractedData.forEach(({ id, tool, data, tunes, isValid, parentId, contentIds }) => {
+    allExtractedData.forEach(({ id, tool, data, tunes, isValid, parentId, contentIds, lastEditedAt, lastEditedBy }) => {
       const hasParent = parentId !== undefined && parentId !== null;
 
       if (!isValid && !hasParent) {
@@ -204,6 +214,8 @@ export class Saver extends Module {
 
       const isTunesEmpty = tunes === undefined || isEmpty(tunes);
       const hasContent = contentIds !== undefined && contentIds.length > 0;
+      const hasLastEdited = lastEditedAt !== undefined;
+      const hasLastEditedBy = lastEditedBy !== undefined && lastEditedBy !== null;
 
       const output: OutputData['blocks'][number] = {
         id,
@@ -218,6 +230,12 @@ export class Saver extends Module {
         ...hasContent && {
           content: contentIds,
         },
+        ...hasLastEdited && {
+          lastEditedAt,
+        },
+        ...hasLastEditedBy && {
+          lastEditedBy,
+        },
       };
 
       extractedBlocks.push(output);

package/src/components/modules/themeManager.ts

@@ -108,7 +108,9 @@ export class ThemeManager extends Module {
     }
 
     if (this.mode === 'auto') {
-      this.removeAttribute();
+      if (state.activeInstances <= 1) {
+        this.removeAttribute();
+      }
     } else {
       document.documentElement.setAttribute(ATTR, this.mode);
     }

package/src/components/modules/toolbar/blockSettings.ts

@@ -191,7 +191,6 @@ export class BlockSettings extends Module<BlockSettingsNodes> {
         searchable: true,
         trigger: trigger || this.nodes.wrapper,
         items: await this.getTunesItems(block, commonTunes, toolTunes),
-        scopeElement: this.Blok.API.methods.ui.nodes.redactor,
         messages: {
           nothingFound: this.Blok.I18n.t('popover.nothingFound'),
           search: this.Blok.I18n.t('popover.search'),
@@ -431,9 +430,60 @@ export class BlockSettings extends Module<BlockSettingsNodes> {
       });
     }
 
+    if (currentBlock.lastEditedAt !== undefined) {
+      items.push({
+        type: PopoverItemType.Separator,
+      });
+      items.push({
+        type: PopoverItemType.Html,
+        element: this.createEditMetadataFooter(currentBlock),
+        name: 'edit-metadata',
+      });
+    }
+
     return items;
   }
 
+  /**
+   * Creates the "Last edited by..." footer element for block settings.
+   * @param block - the block whose metadata to display
+   * @returns the footer DOM element
+   */
+  private createEditMetadataFooter(block: Block): HTMLElement {
+    const container = document.createElement('div');
+
+    container.classList.add(
+      'px-3', 'py-2', 'text-xs', 'leading-snug',
+      'text-[color:var(--popover-text-secondary,_#888)]',
+      'select-none'
+    );
+
+    const label = document.createElement('div');
+
+    label.setAttribute('data-edit-meta-label', '');
+
+    if (block.lastEditedBy !== null && block.lastEditedBy !== undefined) {
+      label.textContent = `Last edited by ${block.lastEditedBy}`;
+    } else {
+      label.textContent = 'Last edited';
+    }
+
+    container.appendChild(label);
+
+    if (block.lastEditedAt !== undefined) {
+      const dateEl = document.createElement('div');
+      const formatted = new Intl.DateTimeFormat(undefined, {
+        dateStyle: 'medium',
+        timeStyle: 'short',
+      }).format(new Date(block.lastEditedAt));
+
+      dateEl.textContent = formatted;
+      container.appendChild(dateEl);
+    }
+
+    return container;
+  }
+
   /**
    * Handles popover close event
    */