@jackuait/blok 0.10.4 → 0.10.6

package/src/components/inline-tools/inline-tool-italic.ts

@@ -196,7 +196,9 @@ export class ItalicInlineTool implements InlineTool {
   }
 
   /**
-   * Replace non-breaking spaces (\u00A0) with regular spaces in all text nodes of an element
+   * Replace non-breaking spaces (\u00A0) with regular spaces in all text nodes of an element.
+   * The browser's contenteditable engine will re-insert nbsp where needed for rendering
+   * (e.g. trailing spaces, consecutive spaces) on the next input event.
    * @param element - The element to normalize
    */
   private normalizeNbspInElement(element: HTMLElement): void {
@@ -212,27 +214,8 @@ export class ItalicInlineTool implements InlineTool {
         continue;
       }
 
-      const keepTrailing = node.textContent.endsWith('\u00A0') && this.isEffectivelyLastChild(node);
-
       node.textContent = node.textContent.replace(/\u00A0/g, ' ');
-
-      if (keepTrailing) {
-        node.textContent = node.textContent.slice(0, -1) + '\u00A0';
-      }
-    }
-  }
-
-  /**
-   * Check whether all siblings after a node are empty
-   */
-  private isEffectivelyLastChild(node: Node): boolean {
-    const next = node.nextSibling;
-
-    if (!next) {
-      return true;
     }
-
-    return (next.textContent ?? '').length === 0 && this.isEffectivelyLastChild(next);
   }
 
   /**

package/src/components/inline-tools/inline-tool-strikethrough.ts

@@ -209,27 +209,8 @@ export class StrikethroughInlineTool implements InlineTool {
         continue;
       }
 
-      const keepTrailing = node.textContent.endsWith('\u00A0') && this.isEffectivelyLastChild(node);
-
       node.textContent = node.textContent.replace(/\u00A0/g, ' ');
-
-      if (keepTrailing) {
-        node.textContent = node.textContent.slice(0, -1) + '\u00A0';
-      }
-    }
-  }
-
-  /**
-   * Check whether all siblings after a node are empty
-   */
-  private isEffectivelyLastChild(node: Node): boolean {
-    const next = node.nextSibling;
-
-    if (!next) {
-      return true;
     }
-
-    return (next.textContent ?? '').length === 0 && this.isEffectivelyLastChild(next);
   }
 
   /**

package/src/components/inline-tools/inline-tool-underline.ts

@@ -209,27 +209,8 @@ export class UnderlineInlineTool implements InlineTool {
         continue;
       }
 
-      const keepTrailing = node.textContent.endsWith('\u00A0') && this.isEffectivelyLastChild(node);
-
       node.textContent = node.textContent.replace(/\u00A0/g, ' ');
-
-      if (keepTrailing) {
-        node.textContent = node.textContent.slice(0, -1) + '\u00A0';
-      }
-    }
-  }
-
-  /**
-   * Check whether all siblings after a node are empty
-   */
-  private isEffectivelyLastChild(node: Node): boolean {
-    const next = node.nextSibling;
-
-    if (!next) {
-      return true;
     }
-
-    return (next.textContent ?? '').length === 0 && this.isEffectivelyLastChild(next);
   }
 
   /**

package/src/components/inline-tools/services/bold-normalization-pass.ts

@@ -202,9 +202,6 @@ export class BoldNormalizationPass {
 
   /**
    * Replace non-breaking spaces with regular spaces in a text node.
-   * Preserves a trailing \u00A0 when the text node is the last child of its
-   * parent, because converting it to a regular space (char 32) would make it
-   * invisible under CSS white-space:normal.
    * @param textNode - The text node to process
    */
   private replaceNbspInTextNode(textNode: Text): void {
@@ -214,13 +211,8 @@ export class BoldNormalizationPass {
       return;
     }
 
-    const keepTrailing = text.endsWith('\u00A0') && BoldNormalizationPass.isEffectivelyLastChild(textNode);
-    const replaced = text.replace(/\u00A0/g, ' ');
-
     // eslint-disable-next-line no-param-reassign
-    textNode.textContent = keepTrailing
-      ? replaced.slice(0, -1) + '\u00A0'
-      : replaced;
+    textNode.textContent = text.replace(/\u00A0/g, ' ');
   }
 
   /**
@@ -285,26 +277,6 @@ export class BoldNormalizationPass {
     rightStrong.remove();
   }
 
-  /**
-   * Check whether all siblings after a node are empty (zero-length text nodes
-   * or empty elements). The unbold process can leave behind empty text nodes
-   * which would cause `!node.nextSibling` to return false even though the node
-   * is effectively the last meaningful child.
-   */
-  private static isEffectivelyLastChild(node: Node): boolean {
-    const next = node.nextSibling;
-
-    if (!next) {
-      return true;
-    }
-
-    if ((next.textContent ?? '').length > 0) {
-      return false;
-    }
-
-    return BoldNormalizationPass.isEffectivelyLastChild(next);
-  }
-
   /**
    * Find the appropriate scope element from a selection
    * @param selection - The current selection

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

@@ -91,14 +91,20 @@ export class KeyboardNavigation extends BlockEventComposer {
       return;
     }
 
-    event.shiftKey ? Caret.navigatePrevious(true) : Caret.navigateNext(true);
+    const isNavigated = event.shiftKey ? Caret.navigatePrevious(true) : Caret.navigateNext(true);
 
     /**
-     * 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.
+     * Prevent default Tab behaviour only when navigation occurred within the
+     * editor. When navigateNext/navigatePrevious returns false (no next/prev
+     * block), allow the browser default so focus can leave the editor to
+     * external elements (e.g. inputs after the editor).
+     *
+     * Nested editors (e.g. database card drawer) are safe because the table
+     * cell guard above returns early, and those editors handle Tab themselves.
      */
-    event.preventDefault();
+    if (isNavigated) {
+      event.preventDefault();
+    }
   }
 
   /**

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

@@ -1,5 +1,5 @@
 import type { Block } from '../../../block';
-import { HEADER_PATTERN, CHECKLIST_PATTERN, UNORDERED_LIST_PATTERN, ORDERED_LIST_PATTERN, TOGGLE_HEADER_PATTERN, TOGGLE_PATTERN, HEADER_TOOL_NAME, LIST_TOOL_NAME, TOGGLE_TOOL_NAME, DIVIDER_TOOL_NAME, DIVIDER_PATTERN } from '../constants';
+import { HEADER_PATTERN, CHECKLIST_PATTERN, UNORDERED_LIST_PATTERN, ORDERED_LIST_PATTERN, TOGGLE_HEADER_PATTERN, TOGGLE_PATTERN, HEADER_TOOL_NAME, LIST_TOOL_NAME, TOGGLE_TOOL_NAME, DIVIDER_TOOL_NAME, DIVIDER_PATTERN, QUOTE_TOOL_NAME, QUOTE_PATTERN, CODE_TOOL_NAME, CODE_PATTERN } from '../constants';
 
 import { BlockEventComposer } from './__base';
 
@@ -39,8 +39,10 @@ export class MarkdownShortcuts extends BlockEventComposer {
     const handledHeader = this.handleHeaderShortcut();
     const handledToggleHeader = this.handleToggleHeaderShortcut();
     const handledToggle = this.handleToggleShortcut();
+    const handledQuote = this.handleQuoteShortcut();
+    const handledCode = this.handleCodeShortcut();
 
-    return handledList || handledHeader || handledToggleHeader || handledToggle;
+    return handledList || handledHeader || handledToggleHeader || handledToggle || handledQuote || handledCode;
   }
 
   /**
@@ -402,6 +404,107 @@ export class MarkdownShortcuts extends BlockEventComposer {
     return true;
   }
 
+  /**
+   * Check if current block matches a quote shortcut pattern (" ") and convert it.
+   */
+  private handleQuoteShortcut(): boolean {
+    const { BlockManager, Tools } = this.Blok;
+    const currentBlock = BlockManager.currentBlock;
+
+    if (!currentBlock) {
+      return false;
+    }
+
+    if (!currentBlock.tool.isDefault) {
+      return false;
+    }
+
+    const quoteTool = Tools.blockTools.get(QUOTE_TOOL_NAME);
+
+    if (!quoteTool) {
+      return false;
+    }
+
+    const currentInput = currentBlock.currentInput;
+
+    if (!currentInput) {
+      return false;
+    }
+
+    const textContent = currentInput.textContent || '';
+    const match = QUOTE_PATTERN.exec(textContent);
+
+    if (!match) {
+      return false;
+    }
+
+    this.Blok.YjsManager.stopCapturing();
+
+    const shortcutLength = 2; // " " + space
+    const remainingHtml = this.extractRemainingHtml(currentInput, shortcutLength);
+    const caretOffset = this.getCaretOffset(currentInput) - shortcutLength;
+
+    const newBlock = BlockManager.replace(currentBlock, QUOTE_TOOL_NAME, {
+      text: remainingHtml,
+    });
+
+    this.setCaretAfterConversion(newBlock, caretOffset);
+
+    this.Blok.YjsManager.stopCapturing();
+
+    return true;
+  }
+
+  /**
+   * Check if current block matches a code shortcut pattern ("``` ") and convert it.
+   */
+  private handleCodeShortcut(): boolean {
+    const { BlockManager, Tools } = this.Blok;
+    const currentBlock = BlockManager.currentBlock;
+
+    if (!currentBlock) {
+      return false;
+    }
+
+    if (!currentBlock.tool.isDefault) {
+      return false;
+    }
+
+    const codeTool = Tools.blockTools.get(CODE_TOOL_NAME);
+
+    if (!codeTool) {
+      return false;
+    }
+
+    const currentInput = currentBlock.currentInput;
+
+    if (!currentInput) {
+      return false;
+    }
+
+    const textContent = currentInput.textContent || '';
+    const match = CODE_PATTERN.exec(textContent);
+
+    if (!match) {
+      return false;
+    }
+
+    this.Blok.YjsManager.stopCapturing();
+
+    const shortcutLength = 4; // "```" + space
+    const remainingHtml = this.extractRemainingHtml(currentInput, shortcutLength);
+
+    const newBlock = BlockManager.replace(currentBlock, CODE_TOOL_NAME, {
+      code: remainingHtml,
+    });
+
+    this.setCaretAfterConversion(newBlock, 0);
+
+    this.Blok.YjsManager.stopCapturing();
+
+    return true;
+  }
+
   /**
    * Match default header shortcuts like "# ", "## ", etc.
    */

package/src/components/modules/blockEvents/constants.ts

@@ -93,3 +93,27 @@ export const DIVIDER_TOOL_NAME = 'divider';
  * Matches exactly three hyphens with no other content.
  */
 export const DIVIDER_PATTERN = /^-{3}$/;
+
+/**
+ * Tool name for quote blocks.
+ */
+export const QUOTE_TOOL_NAME = 'quote';
+
+/**
+ * Regex pattern for detecting quote shortcuts.
+ * Matches " followed by a space at the start of text.
+ * Captures remaining content after the shortcut in group 1.
+ */
+export const QUOTE_PATTERN = /^"\s([\s\S]*)$/;
+
+/**
+ * Tool name for code blocks.
+ */
+export const CODE_TOOL_NAME = 'code';
+
+/**
+ * Regex pattern for detecting code block shortcuts.
+ * Matches ``` followed by a space at the start of text.
+ * Captures remaining content after the shortcut in group 1.
+ */
+export const CODE_PATTERN = /^```\s([\s\S]*)$/;

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

@@ -1102,7 +1102,7 @@ export class BlockManager extends Module {
       // 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;
+      block.lastEditedBy = this.config.user?.id ?? null;
 
       void this.syncBlockDataToYjs(block);
     }

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

@@ -28,7 +28,7 @@ export interface ComposeBlockOptions {
   bindEventsImmediately?: boolean;
   /** Timestamp of the last edit (milliseconds since epoch) */
   lastEditedAt?: number;
-  /** Display name of the user who last edited this block */
+  /** ID of the user who last edited this block */
   lastEditedBy?: string | null;
 }
 

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

@@ -113,6 +113,11 @@ export class BlockSettings extends Module<BlockSettingsNodes> {
    */
   private flipperKeydownSource: HTMLElement | null = null;
 
+  /**
+   * Handler for Delete key shortcut, stored for cleanup
+   */
+  private deleteKeyHandler: ((event: KeyboardEvent) => void) | null = null;
+
   /**
    * Panel with block settings with 2 sections:
    *  - Tool's Settings
@@ -186,11 +191,13 @@ export class BlockSettings extends Module<BlockSettingsNodes> {
       /** Get tool-specific tunes and common tunes (delete, move, etc.) */
       const { toolTunes, commonTunes } = block.getTunes();
 
+      const items = await this.getTunesItems(block, commonTunes, toolTunes);
+
       const PopoverClass = isMobileScreen() ? PopoverMobile : PopoverDesktop;
       const popoverParams: PopoverParams & { flipper?: Flipper } = {
         searchable: true,
         trigger: trigger || this.nodes.wrapper,
-        items: await this.getTunesItems(block, commonTunes, toolTunes),
+        items,
         messages: {
           nothingFound: this.Blok.I18n.t('popover.nothingFound'),
           search: this.Blok.I18n.t('popover.search'),
@@ -208,6 +215,8 @@ export class BlockSettings extends Module<BlockSettingsNodes> {
 
       this.popover.on(PopoverEvent.Closed, this.onPopoverClose);
 
+      this.attachDeleteKeyListener(items);
+
       /**
        * Set opened flag AFTER popover is created to prevent race conditions
        * where close() is called during the async getTunesItems() call
@@ -272,6 +281,7 @@ export class BlockSettings extends Module<BlockSettingsNodes> {
     }
 
     this.selection.clearSaved();
+    this.detachDeleteKeyListener();
     this.detachFlipperKeydownListener();
 
     /**
@@ -415,6 +425,7 @@ export class BlockSettings extends Module<BlockSettingsNodes> {
         title: this.Blok.I18n.t('blockSettings.delete'),
         name: 'delete',
         isDestructive: true,
+        secondaryLabel: 'Del',
         closeOnActivate: true,
         onActivate: () => {
           const { BlockManager, Caret, Toolbar } = this.Blok;
@@ -445,7 +456,8 @@ export class BlockSettings extends Module<BlockSettingsNodes> {
   }
 
   /**
-   * Creates the "Last edited by..." footer element for block settings.
+   * Creates the "Last edited" footer element for block settings.
+   * If a resolveUser callback is configured, resolves the user ID to a display name.
    * @param block - the block whose metadata to display
    * @returns the footer DOM element
    */
@@ -462,22 +474,46 @@ export class BlockSettings extends Module<BlockSettingsNodes> {
 
     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';
+    label.textContent = this.Blok.I18n.t('blockSettings.lastEdited');
+
+    if (block.lastEditedBy != null && this.config.resolveUser != null) {
+      void Promise.resolve(this.config.resolveUser(block.lastEditedBy)).then((userInfo) => {
+        if (userInfo?.name != null) {
+          label.textContent = this.Blok.I18n.t('blockSettings.lastEditedBy', { name: userInfo.name });
+        }
+      });
     }
 
     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;
+      dateEl.classList.add('mt-1');
+      const locale = this.Blok.I18n.getLocale();
+      const date = new Date(block.lastEditedAt);
+
+      const dateParts = new Intl.DateTimeFormat(locale, {
+        day: 'numeric',
+        month: 'long',
+        year: 'numeric',
+      }).formatToParts(date);
+
+      /**
+       * Strip trailing literal parts that are abbreviations (contain a period),
+       * e.g. " г." in Russian or " р." in Ukrainian, while preserving essential
+       * trailing literals like "日" in Japanese/Chinese.
+       */
+      while (dateParts.length > 0
+        && dateParts[dateParts.length - 1].type === 'literal'
+        && dateParts[dateParts.length - 1].value.includes('.')) {
+        dateParts.pop();
+      }
+
+      const dateStr = dateParts.map(p => p.value).join('');
+      const timeStr = new Intl.DateTimeFormat(locale, { timeStyle: 'short' }).format(date);
+
+      dateEl.textContent = `${dateStr}, ${timeStr}`;
       container.appendChild(dateEl);
     }
 
@@ -893,4 +929,46 @@ export class BlockSettings extends Module<BlockSettingsNodes> {
     this.flipperKeydownSource = null;
     this.flipperKeydownHandler = null;
   }
+
+  /**
+   * Attaches a keydown listener on the popover element to handle the Delete key shortcut
+   * @param items - popover items to search for the delete action
+   */
+  private attachDeleteKeyListener(items: PopoverItemParams[]): void {
+    this.detachDeleteKeyListener();
+
+    if (this.popover === null) {
+      return;
+    }
+
+    const deleteItem = items.find(
+      (item): item is PopoverItemParams & { name: string; onActivate: () => void } =>
+        'name' in item && item.name === 'delete' && 'onActivate' in item
+    );
+
+    if (deleteItem === undefined) {
+      return;
+    }
+
+    this.deleteKeyHandler = (event: KeyboardEvent) => {
+      if (event.key === 'Delete') {
+        event.preventDefault();
+        deleteItem.onActivate(deleteItem);
+        this.close();
+      }
+    };
+
+    this.popover.getElement().addEventListener('keydown', this.deleteKeyHandler);
+  }
+
+  /**
+   * Removes the Delete key shortcut listener from the popover element
+   */
+  private detachDeleteKeyListener(): void {
+    if (this.popover !== null && this.deleteKeyHandler !== null) {
+      this.popover.getElement().removeEventListener('keydown', this.deleteKeyHandler);
+    }
+
+    this.deleteKeyHandler = null;
+  }
 }

package/src/components/modules/ui.ts

@@ -205,6 +205,7 @@ export class UI extends Module<UINodes> {
     });
     this.keyboardController.state = this.Blok;
     this.keyboardController.setRedactorElement(this.nodes.redactor);
+    this.keyboardController.setWrapperElement(this.nodes.wrapper);
 
     /**
      * Selection controller needs wrapper element for click detection

package/src/components/modules/uiControllers/controllers/keyboard.ts

@@ -29,6 +29,20 @@ export class KeyboardController extends Controller {
    */
   private redactorElement: HTMLElement | null = null;
 
+  /**
+   * The editor wrapper element for editor boundary checks.
+   * Stored directly because the keyboard controller's Blok reference
+   * (created by getModulesDiff) does not include the UI module itself.
+   */
+  private wrapperElement: HTMLElement | null = null;
+
+  /**
+   * Flag set when the controller is disabled (editor destroyed or read-only).
+   * Used instead of checking this.Blok.UI which is unavailable to controllers
+   * owned by the UI module (getModulesDiff excludes the owning module).
+   */
+  private isDisabled = false;
+
   /**
    * Stable handler references for deduplication via Listeners.findOne.
    * Storing as class properties ensures the same function reference is passed
@@ -61,7 +75,7 @@ export class KeyboardController extends Controller {
     if (target instanceof Element) {
       const closestEditor = target.closest('[data-blok-testid="blok-editor"]');
 
-      if (closestEditor !== null && closestEditor !== this.Blok.UI.nodes.wrapper) {
+      if (closestEditor !== null && closestEditor !== this.wrapperElement) {
         return;
       }
     }
@@ -87,6 +101,13 @@ export class KeyboardController extends Controller {
     this.redactorElement = element;
   }
 
+  /**
+   * Set the editor wrapper element for editor boundary checks
+   */
+  public setWrapperElement(element: HTMLElement): void {
+    this.wrapperElement = element;
+  }
+
   /**
    * Enable keyboard event listeners
    */
@@ -95,6 +116,8 @@ export class KeyboardController extends Controller {
       return;
     }
 
+    this.isDisabled = false;
+
     // Document-level keydown handler
     this.readOnlyMutableListeners.on(document, 'keydown', this.documentKeydownHandler, true);
 
@@ -112,27 +135,54 @@ export class KeyboardController extends Controller {
     this.readOnlyMutableListeners.on(this.redactorElement, 'keydown', this.redactorKeydownHandler, true);
   }
 
+  /**
+   * Disable the controller — marks it as inactive so stale handlers bail out.
+   */
+  public override disable(): void {
+    this.isDisabled = true;
+    super.disable();
+  }
+
   /**
    * Main keyboard event router
    * @param event - keyboard event
    */
   private handleKeydown(event: KeyboardEvent): void {
+    /**
+     * Guard against destroyed or disabled editor instances whose listeners
+     * were not properly removed. When the controller is disabled the handler
+     * bails out early so it does not throw or interfere with other editors.
+     */
+    if (this.isDisabled) {
+      return;
+    }
+
     const target = event.target;
+    const key = event.key ?? '';
 
+    /**
+     * Skip input/textarea targets for most keys to avoid intercepting normal
+     * typing.  Escape is exempted only for inputs inside popovers (e.g. the
+     * search input) so the keyboard controller can close the popover.
+     * Inputs elsewhere (e.g. database title edit inputs) keep their own
+     * Escape handling.
+     */
     if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
-      return;
+      const isInsidePopover = target.closest('[data-blok-popover]') !== null;
+
+      if (key !== 'Escape' || !isInsidePopover) {
+        return;
+      }
     }
 
     if (target instanceof Element) {
       const closestEditor = target.closest('[data-blok-testid="blok-editor"]');
 
-      if (closestEditor !== null && closestEditor !== this.Blok.UI.nodes.wrapper) {
+      if (closestEditor !== null && closestEditor !== this.wrapperElement) {
         return;
       }
     }
 
-    const key = event.key ?? '';
-
     switch (key) {
       case 'Enter':
         this.handleEnter(event);

package/src/components/modules/yjs/document-store.ts

@@ -197,7 +197,7 @@ export class DocumentStore {
    * Update a block's edit metadata fields directly on the Y.Map.
    * @param id - Block id
    * @param lastEditedAt - Timestamp in milliseconds
-   * @param lastEditedBy - User display name, or null
+   * @param lastEditedBy - User ID, or null
    */
   public updateBlockMetadata(id: string, lastEditedAt: number, lastEditedBy: string | null): void {
     const yblock = this.getBlockById(id);

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

@@ -168,7 +168,7 @@ export class YjsManager extends Module {
    * Update a block's edit metadata.
    * @param id - Block id
    * @param lastEditedAt - Timestamp in milliseconds
-   * @param lastEditedBy - User display name, or null
+   * @param lastEditedBy - User ID, or null
    */
   public updateBlockMetadata(id: string, lastEditedAt: number, lastEditedBy: string | null): void {
     this.documentStore.updateBlockMetadata(id, lastEditedAt, lastEditedBy);

package/src/components/utils/popover/popover-abstract.ts

@@ -141,7 +141,16 @@ export abstract class PopoverAbstract<Nodes extends PopoverNodes = PopoverNodes>
       this.search.focus();
     }
 
+    /**
+     * Show hazes instantly on open (no transition), then restore transition for scroll-triggered changes
+     */
+    this.nodes.scrollHazeTop.style.transition = 'none';
+    this.nodes.scrollHazeBottom.style.transition = 'none';
     this.updateScrollHazes();
+    requestAnimationFrame(() => {
+      this.nodes.scrollHazeTop.style.transition = '';
+      this.nodes.scrollHazeBottom.style.transition = '';
+    });
 
     const { trigger } = this.params;
     const isRootWithTrigger = (this.params.nestingLevel ?? 0) === 0 && trigger !== undefined;