@jackuait/blok 0.11.1 → 0.12.0

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

@@ -822,8 +822,21 @@ export class BlockOperations {
        * container `contentIds` arrays. Idempotent when the parent already
        * matches, so DragController's existing post-move setBlockParent call
        * remains a safe no-op.
+       *
+       * Skip inside a Yjs move group (drag path): DragController.handleDropImpl
+       * calls the undo-aware `BlockManager.setBlockParent` after `move()` and
+       * relies on reading the pre-move `parentId` to record the correct
+       * `fromParentId` on the in-flight move entry. Mutating `parentId` here
+       * via `hierarchy.setBlockParent` (which bypasses the undo bookkeeping)
+       * would clobber that baseline and leave undo unable to restore the
+       * original parent. The non-drag callers (keyboard moveUp/Down, public
+       * api) still get the auto-heal — `isInMoveGroup` is only true while
+       * DragController's `transactMoves` wrapper is open.
        */
-      if (movedBlock.parentId !== destinationParentId) {
+      if (
+        movedBlock.parentId !== destinationParentId
+        && !this.dependencies.YjsManager.isInMoveGroup
+      ) {
         this.hierarchy.setBlockParent(movedBlock, destinationParentId);
       }
 

package/src/components/modules/drag/DragController.ts

@@ -486,6 +486,15 @@ export class DragController extends Module {
     if (!this.operations) {
       return;
     }
+
+    // Snapshot pre-move parentIds before moveBlocks mutates them. resolveParentForDrop
+    // must read source parents as they existed at drag start, not after reparenting.
+    const preMoveParentIds = new Map<string, string | null>();
+
+    for (const block of sourceBlocks) {
+      preMoveParentIds.set(block.id, block.parentId);
+    }
+
     const result = this.operations.moveBlocks(sourceBlocks, targetBlock, edge);
 
     // Layer 13: stale-drop abort guard.
@@ -505,7 +514,7 @@ export class DragController extends Module {
     }
 
     // Update parent-child relationships after move
-    const newParentId = this.resolveParentForDrop(targetBlock, edge, sourceBlocks);
+    const newParentId = this.resolveParentForDrop(targetBlock, edge, sourceBlocks, preMoveParentIds);
     const movedBlockIds = new Set(result.movedBlocks.map(b => b.id));
     const reparentedBlocks: Block[] = [];
     const affectedParentIds = new Set<string>();
@@ -572,14 +581,26 @@ export class DragController extends Module {
    * @param sourceBlocks - The blocks being dragged
    * @returns The parentId for the dropped blocks, or null for root level
    */
-  private resolveParentForDrop(targetBlock: Block, edge: 'top' | 'bottom', sourceBlocks: Block[]): string | null {
+  private resolveParentForDrop(
+    targetBlock: Block,
+    edge: 'top' | 'bottom',
+    sourceBlocks: Block[],
+    preMoveParentIds?: Map<string, string | null>
+  ): string | null {
     // If dropping below a toggleable block, the block becomes a child of the toggle.
     // Detect via DOM attribute (covers both toggle list blocks AND toggle headings).
     if (edge === 'bottom' && this.isToggleableBlock(targetBlock) && this.isOpenToggle(targetBlock)) {
       // Don't re-enter the toggle if all source blocks are already its children.
       // This allows a child to escape its own toggle parent by dragging to the bottom edge.
+      // Use pre-move snapshot when available; moveBlocks may have already rewritten parentId.
       const allSourcesAreChildren = sourceBlocks.length > 0 &&
-        sourceBlocks.every(b => b.parentId === targetBlock.id);
+        sourceBlocks.every((b) => {
+          const parentId = preMoveParentIds?.has(b.id) === true
+            ? preMoveParentIds.get(b.id)
+            : b.parentId;
+
+          return parentId === targetBlock.id;
+        });
 
       if (!allSourcesAreChildren) {
         return targetBlock.id;

package/src/components/modules/paste/handlers/files-handler.ts

@@ -49,9 +49,9 @@ export class FilesHandler extends BasePasteHandler implements PasteHandler {
       return false;
     }
 
-    const files = data.files;
+    const files = this.extractFiles(data);
 
-    if (!files || files.length === 0) {
+    if (files.length === 0) {
       return false;
     }
 
@@ -60,6 +60,30 @@ export class FilesHandler extends BasePasteHandler implements PasteHandler {
     return true;
   }
 
+  /**
+   * Extract File objects from DataTransfer. Some platforms leave
+   * `dataTransfer.files` empty but expose files through `dataTransfer.items`
+   * where each entry has kind === 'file'. Fall back to items when needed.
+   */
+  private extractFiles(dataTransfer: DataTransfer): File[] {
+    if (dataTransfer.files && dataTransfer.files.length > 0) {
+      return Array.from(dataTransfer.files);
+    }
+
+    return this.extractFilesFromItems(dataTransfer.items);
+  }
+
+  private extractFilesFromItems(items: DataTransferItemList | null | undefined): File[] {
+    if (!items) {
+      return [];
+    }
+
+    return Array.from(items)
+      .filter((item) => item.kind === 'file')
+      .map((item) => item.getAsFile())
+      .filter((file): file is File => file !== null);
+  }
+
   /**
    * Check if DataTransfer contains file-like entries.
    */
@@ -74,6 +98,10 @@ export class FilesHandler extends BasePasteHandler implements PasteHandler {
       return true;
     }
 
+    if (this.itemsContainFile(dataTransfer.items)) {
+      return true;
+    }
+
     try {
       const legacyList = dataTransfer.types as unknown as DOMStringList;
 
@@ -87,10 +115,18 @@ export class FilesHandler extends BasePasteHandler implements PasteHandler {
     return false;
   }
 
+  private itemsContainFile(items: DataTransferItemList | null | undefined): boolean {
+    if (!items) {
+      return false;
+    }
+
+    return Array.from(items).some((item) => item.kind === 'file');
+  }
+
   /**
    * Get files from data transfer object and insert related Tools.
    */
-  private async processFiles(items: FileList): Promise<void> {
+  private async processFiles(items: FileList | File[]): Promise<void> {
     const { BlockManager } = this.Blok;
 
     const fileProcessingResults = await Promise.all(
@@ -113,7 +149,8 @@ export class FilesHandler extends BasePasteHandler implements PasteHandler {
    * Get information about file and find Tool to handle it.
    */
   private async processFile(file: File): Promise<ProcessedFile | undefined> {
-    const toolName = this.toolRegistry.findToolForFile(file);
+    const preferredToolName = this.Blok.BlockManager.currentBlock?.name;
+    const toolName = this.toolRegistry.findToolForFile(file, preferredToolName);
 
     if (!toolName) {
       return;

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

@@ -282,7 +282,11 @@ export class Paste extends Module {
    * Check if browser behavior suits better.
    */
   private isNativeBehaviour(element: EventTarget): boolean {
-    return dom$.isNativeInput(element);
+    return dom$.isNativeInput(element) ||
+      (element instanceof HTMLElement && (
+        element.contentEditable === 'plaintext-only' ||
+        element.getAttribute('contenteditable') === 'plaintext-only'
+      ));
   }
 
   /**

package/src/components/modules/paste/tool-registry.ts

@@ -197,24 +197,34 @@ export class ToolRegistry {
   /**
    * Find tool for a given file.
    */
-  public findToolForFile(file: File): string | undefined {
+  public findToolForFile(file: File, preferredToolName?: string): string | undefined {
     const extension = file.name.split('.').pop()?.toLowerCase() ?? '';
 
-    const foundConfig = Object
-      .entries(this.toolsFiles)
-      .find(([, { mimeTypes, extensions }]) => {
-        const [fileType, fileSubtype] = file.type.split('/');
-
-        const foundExt = extensions.find((ext) => ext.toLowerCase() === extension);
-        const foundMimeType = mimeTypes.find((mime) => {
-          const [type, subtype] = mime.split('/');
+    const matches = (config: FilesSubstitution): boolean => {
+      const [fileType, fileSubtype] = file.type.split('/');
 
-          return type === fileType && (subtype === fileSubtype || subtype === '*');
-        });
+      const foundExt = config.extensions.find((ext) => ext.toLowerCase() === extension);
+      const foundMimeType = config.mimeTypes.find((mime) => {
+        const [type, subtype] = mime.split('/');
 
-        return foundExt !== undefined || foundMimeType !== undefined;
+        return type === fileType && (subtype === fileSubtype || subtype === '*');
       });
 
+      return foundExt !== undefined || foundMimeType !== undefined;
+    };
+
+    if (preferredToolName !== undefined) {
+      const preferredConfig = this.toolsFiles[preferredToolName];
+
+      if (preferredConfig !== undefined && matches(preferredConfig)) {
+        return preferredToolName;
+      }
+    }
+
+    const foundConfig = Object
+      .entries(this.toolsFiles)
+      .find(([, config]) => matches(config));
+
     return foundConfig?.[0];
   }
 

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

@@ -144,8 +144,13 @@ export class BlockSettings extends Module<BlockSettingsNodes> {
    * Open Block Settings pane
    * @param targetBlock - near which Block we should open BlockSettings
    * @param trigger - element to position the popover relative to
+   * @param options - popover placement overrides
    */
-  public async open(targetBlock?: Block, trigger?: HTMLElement): Promise<void> {
+  public async open(
+    targetBlock?: Block,
+    trigger?: HTMLElement,
+    options?: { placeLeftOfAnchor?: boolean }
+  ): Promise<void> {
     const selectedBlocks = this.Blok.BlockSelection.selectedBlocks;
     const hasMultipleBlocksSelected = selectedBlocks.length > 1;
 
@@ -193,6 +198,10 @@ export class BlockSettings extends Module<BlockSettingsNodes> {
 
       const items = await this.getTunesItems(block, commonTunes, toolTunes);
 
+      const contextLabel = hasMultipleBlocksSelected
+        ? `${selectedBlocks.length} blocks`
+        : (await block.getActiveToolboxEntry())?.title ?? block.name;
+
       const PopoverClass = isMobileScreen() ? PopoverMobile : PopoverDesktop;
       const popoverParams: PopoverParams & { flipper?: Flipper } = {
         searchable: true,
@@ -203,7 +212,10 @@ export class BlockSettings extends Module<BlockSettingsNodes> {
           search: this.Blok.I18n.t('popover.search'),
         },
         autoFocusFirstItem: false,
-        minWidth: '250px',
+        minWidth: '220px',
+        placeLeftOfAnchor: options?.placeLeftOfAnchor ?? true,
+        viewportMargin: 50,
+        contextLabel,
       };
 
       if (PopoverClass === PopoverDesktop) {

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

@@ -134,6 +134,20 @@ export class Toolbar extends Module<ToolbarNodes> {
    */
   private plusInsertedBlock: Block | null = null;
 
+  /**
+   * Drops the pre-plus focus-restoration context.
+   *
+   * Called when the user commits to editing the plus-opened block — e.g. types
+   * "/" to activate slash search. After that point a Closed event is not a
+   * dismissal (Escape / click outside) but a transition: the toolbox is torn
+   * down and reopened, and restoring caret to the originally-focused block
+   * would strand the caret away from the block the user is actually typing in.
+   */
+  public discardPlusContext(): void {
+    this.preToolboxBlock = null;
+    this.plusInsertedBlock = null;
+  }
+
   /**
    * @class
    * @param moduleConfiguration - Module Configuration
@@ -319,6 +333,14 @@ export class Toolbar extends Module<ToolbarNodes> {
         this.nodes.actions?.setAttribute('data-blok-opened', 'true');
         if (this.nodes.actions) {
           this.nodes.actions.style.pointerEvents = 'auto';
+          /**
+           * Reset inline pointer-events overrides that a previous
+           * left-edge block may have set on actions descendants so
+           * non-left-edge blocks regain click-ability everywhere.
+           */
+          for (const descendant of Array.from(this.nodes.actions.querySelectorAll<HTMLElement>('*'))) {
+            descendant.style.pointerEvents = '';
+          }
         }
       },
     };
@@ -519,6 +541,14 @@ export class Toolbar extends Module<ToolbarNodes> {
      */
     this.positioner.applyContentOffset(this.nodes, targetBlock);
 
+    /**
+     * Keep the toolbar aligned with the block's current bounds while its size
+     * changes without dispatching a `BlockChanged` event (e.g. image resize
+     * handle drag). ResizeObserver fires on every frame of the user's drag and
+     * re-runs Y + content-offset calculations so + / ⋮⋮ follow the image edge.
+     */
+    this.positioner.watchTargetResize(targetBlockHolder, () => this.repositionToolbar());
+
     /**
      * Do not show Block Tunes Toggler near single and empty block
      */
@@ -546,7 +576,21 @@ export class Toolbar extends Module<ToolbarNodes> {
       || isToggleHeader;
 
     if (hasLeftEdgeInteraction && this.nodes.actions) {
+      /**
+       * CSS pointer-events does not inherit — every descendant of `actions`
+       * keeps its default `auto` and will still intercept clicks that land
+       * on its painted area. For left-edge blocks (toggle, callout,
+       * header-with-arrow) the actions rectangle visually overlaps the
+       * block's own left-edge interactive element (toggle arrow / callout
+       * emoji) once the toolbar is margin-aligned, so a toolbar SVG
+       * swallows the arrow click. Walk every descendant and disable pointer
+       * events explicitly, then restore them on the settings toggler so the
+       * drag handle / tunes-menu still work.
+       */
       this.nodes.actions.style.pointerEvents = 'none';
+      for (const descendant of Array.from(this.nodes.actions.querySelectorAll<HTMLElement>('*'))) {
+        descendant.style.pointerEvents = 'none';
+      }
       this.restoreSettingsTogglerForLeftEdgeBlock(targetBlock);
     }
 
@@ -783,6 +827,7 @@ export class Toolbar extends Module<ToolbarNodes> {
       this.nodes.content.style.maxWidth = '';
     }
     this.positioner.setHoveredTarget(null);
+    this.positioner.stopWatchingTargetResize();
 
     this.reset();
   }
@@ -1108,8 +1153,8 @@ export class Toolbar extends Module<ToolbarNodes> {
       /**
        * If the toolbox was opened via the plus button and the user dismissed
        * it without selecting a tool (Escape / click outside), restore focus to
-       * the block that was focused BEFORE the plus button was clicked and
-       * remove the orphan empty block that was inserted.
+       * the block that was focused BEFORE the plus button was clicked. The
+       * newly-inserted empty line is intentionally kept in place.
        *
        * When a tool IS selected, ToolboxEvent.BlockAdded fires first and clears
        * preToolboxBlock, so this branch is skipped for that case.
@@ -1118,21 +1163,9 @@ export class Toolbar extends Module<ToolbarNodes> {
         const blockToRestore = this.preToolboxBlock;
 
         this.preToolboxBlock = null;
+        this.plusInsertedBlock = null;
 
-        // Remove the orphan block that was inserted by the plus button click,
-        // then restore focus. removeBlock() is Promise-based but resolves
-        // synchronously; chaining ensures setToBlock runs after removal.
-        if (this.plusInsertedBlock !== null) {
-          const orphan = this.plusInsertedBlock;
-
-          this.plusInsertedBlock = null;
-          void this.Blok.BlockManager.removeBlock(orphan, false).then(() => {
-            if (blockToRestore.inputs.length > 0) {
-              this.Blok.Caret.setToBlock(blockToRestore, this.Blok.Caret.positions.END);
-            }
-          });
-        } else if (blockToRestore.inputs.length > 0) {
-          // Reused an existing block (emptyBlockToReuse path) — just restore focus
+        if (blockToRestore.inputs.length > 0) {
           this.Blok.Caret.setToBlock(blockToRestore, this.Blok.Caret.positions.END);
         }
 

package/src/components/modules/toolbar/inline/selection-validator.ts

@@ -58,6 +58,15 @@ export class InlineSelectionValidator {
       return { allowed: false, reason: `Target tag ${target.tagName} conflicts with selection` };
     }
 
+    // Code block (`<pre><code contenteditable="plaintext-only">`) is plain-text
+    // content. Inline formatting would inject HTML into the plaintext-only
+    // region and break syntax highlighting, so suppress the toolbar there.
+    const focusElement = this.nodeToElement(currentSelection.focusNode);
+
+    if (target.closest('pre') !== null || focusElement?.closest('pre')) {
+      return { allowed: false, reason: 'Selection is inside a code block' };
+    }
+
     const anchorElement = $.isElement(currentSelection.anchorNode)
       ? currentSelection.anchorNode as HTMLElement
       : currentSelection.anchorNode.parentElement;
@@ -158,4 +167,12 @@ export class InlineSelectionValidator {
 
     return SelectionUtils.get();
   }
+
+  private nodeToElement(node: Node | null | undefined): Element | null {
+    if (!node) {
+      return null;
+    }
+
+    return $.isElement(node) ? node as HTMLElement : node.parentElement;
+  }
 }

package/src/components/modules/toolbar/plus-button.ts

@@ -112,8 +112,10 @@ export class PlusButtonHandler {
         '[&_svg]:h-[22px] [&_svg]:w-[22px]',
         // Hover (can-hover)
         'can-hover:hover:bg-bg-light',
-        // Keep hover background when toolbox is open
-        'group-data-[blok-toolbox-opened=true]:bg-bg-light',
+        // Hide when the toolbox popover is open
+        'group-data-[blok-toolbox-opened=true]:hidden',
+        // Hide when block settings popover is open
+        'group-data-[blok-block-settings-opened=true]:hidden',
         // Mobile styles (static positioning with overlay-pane appearance)
         'mobile:bg-popover-bg mobile:border mobile:border-mobile-border mobile:shadow-overlay-pane mobile:rounded-[6px] mobile:z-2',
         'mobile:w-toolbox-btn-mobile mobile:h-toolbox-btn-mobile',

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

@@ -19,6 +19,12 @@ export class ToolbarPositioner {
    */
   private hoveredTarget: Element | null = null;
 
+  /**
+   * Observer that fires when the hovered block's holder changes size so the
+   * toolbar can recompute Y + content offset mid-drag (e.g. image resize).
+   */
+  private targetResizeObserver: ResizeObserver | null = null;
+
   /**
    * Gets the current last toolbar Y position
    */
@@ -47,6 +53,25 @@ export class ToolbarPositioner {
     this.lastToolbarY = null;
   }
 
+  /**
+   * Observe an element (e.g. the hovered block holder) and fire `onResize`
+   * when its box changes. Replaces any previous observer.
+   */
+  public watchTargetResize(target: Element, onResize: () => void): void {
+    this.stopWatchingTargetResize();
+    if (typeof ResizeObserver === 'undefined') return;
+    this.targetResizeObserver = new ResizeObserver(() => onResize());
+    this.targetResizeObserver.observe(target);
+  }
+
+  /**
+   * Stops the current resize observer, if any.
+   */
+  public stopWatchingTargetResize(): void {
+    this.targetResizeObserver?.disconnect();
+    this.targetResizeObserver = null;
+  }
+
   /**
    * Calculates the Y position for the toolbar, centered on the first line of the block
    * @param options - Positioning options containing target block, hovered target, and mobile state
@@ -176,6 +201,8 @@ export class ToolbarPositioner {
       wrapper.style.top = `${newToolbarY}px`;
     }
 
+    this.applyContentOffset(nodes, options.targetBlock);
+
     return positionChanged;
   }
 

package/src/components/modules/toolbar/settings-toggler.ts

@@ -3,6 +3,7 @@ import type { Block } from '../../block';
 import { DATA_ATTR } from '../../constants';
 import { Dom as $ } from '../../dom';
 import { IconMenu } from '../../icons';
+import { getUserOS } from '../../utils';
 import { hide, onHover } from '../../utils/tooltip';
 import { twJoin } from '../../utils/tw';
 
@@ -113,15 +114,15 @@ export class SettingsTogglerHandler {
     const settingsToggler = $.make('span', [
       twJoin(
         // Base toolbox-button styles
-        'text-text-secondary cursor-pointer w-[22px] h-6 rounded-[5px] inline-flex justify-center items-center select-none',
+        'text-text-secondary cursor-pointer w-[18px] h-6 rounded-[5px] inline-flex justify-center items-center select-none',
         // SVG sizing
-        '[&_svg]:h-[22px] [&_svg]:w-[22px]',
+        '[&_svg]:h-[22px] [&_svg]:w-[22px] [&_svg]:shrink-0',
         // Active state
         'active:cursor-grabbing',
         // Hover (can-hover)
         'can-hover:hover:bg-bg-light can-hover:hover:cursor-grab',
-        // When toolbox is opened, use pointer cursor on hover
-        'can-hover:hover:group-data-[blok-toolbox-opened=true]:cursor-pointer',
+        // Hide when the toolbox popover is open
+        'group-data-[blok-toolbox-opened=true]:hidden',
         // When block settings is opened, show hover background and pointer cursor
         'group-data-[blok-block-settings-opened=true]:bg-bg-light',
         'can-hover:hover:group-data-[blok-block-settings-opened=true]:cursor-pointer',
@@ -160,9 +161,19 @@ export class SettingsTogglerHandler {
     /**
      * Add events to show/hide tooltip for settings toggler
      */
+    const userOS = getUserOS();
+    const shortcut = userOS.win
+      ? blok.I18n.t('blockSettings.menuShortcutWin')
+      : blok.I18n.t('blockSettings.menuShortcutMac');
+
     const blockTunesTooltip = createTooltipContent([
       blok.I18n.t('blockSettings.dragToMove'),
-      blok.I18n.t('blockSettings.clickToOpenMenu'),
+      [
+        { text: 'Click', highlight: true },
+        { text: ' or ', highlight: false },
+        { text: shortcut, highlight: true },
+        { text: ' to open menu', highlight: false },
+      ],
     ]);
 
     onHover(settingsToggler, blockTunesTooltip, {

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

@@ -1,36 +1,80 @@
 import { Dom as $ } from '../../dom';
 
+/**
+ * A single text segment within a tooltip line.
+ * When `highlight` is true, the segment is rendered as a white-colored span.
+ */
+export interface TooltipSegment {
+  text: string;
+  highlight: boolean;
+}
+
+/**
+ * A tooltip line can be either:
+ * - a plain string (the first word is automatically highlighted in white), or
+ * - an array of TooltipSegment objects for precise per-token highlighting.
+ */
+export type TooltipLine = string | TooltipSegment[];
+
+/**
+ * Applies highlight styling (white color, semibold weight) to a span element.
+ */
+const applyHighlight = (span: HTMLElement): void => {
+  // eslint-disable-next-line no-param-reassign -- intentional styling helper
+  span.style.color = 'white';
+  // eslint-disable-next-line no-param-reassign -- intentional styling helper
+  span.style.fontWeight = '500';
+};
+
 /**
  * Creates a tooltip content element with multiple lines and consistent styling.
- * The first word of each line is styled in white to highlight keyboard shortcuts.
+ * The first word of each string line is styled in white to highlight keywords.
+ * Segment-based lines allow highlighting multiple specific tokens per line.
  *
- * @param lines - Array of text strings, each will be displayed on its own line
+ * @param lines - Array of lines; each line is a string or an array of TooltipSegment
  * @returns The tooltip container element
  */
-export const createTooltipContent = function(lines: string[]): HTMLElement {
+export const createTooltipContent = function(lines: TooltipLine[]): HTMLElement {
   const container = $.make('div');
 
   container.style.display = 'flex';
   container.style.flexDirection = 'column';
   container.style.gap = '4px';
+  container.style.color = 'rgba(255, 255, 255, 0.55)';
 
-  lines.forEach((text) => {
-    const line = $.make('div');
-    const spaceIndex = text.indexOf(' ');
+  lines.forEach((line) => {
+    const lineEl = $.make('div');
 
-    if (spaceIndex > 0) {
-      const firstWord = text.substring(0, spaceIndex);
-      const rest = text.substring(spaceIndex);
-      const styledWord = $.make('span', null, { textContent: firstWord });
+    if (Array.isArray(line)) {
+      // Segment-based line: render each segment as a span (highlighted) or text node
+      line.forEach((segment) => {
+        if (segment.highlight) {
+          const span = $.make('span', null, { textContent: segment.text });
 
-      styledWord.style.color = 'white';
-      line.appendChild(styledWord);
-      line.appendChild(document.createTextNode(rest));
+          applyHighlight(span);
+          lineEl.appendChild(span);
+        } else {
+          lineEl.appendChild(document.createTextNode(segment.text));
+        }
+      });
     } else {
-      line.appendChild(document.createTextNode(text));
+      // String-based line: highlight the first word
+      const spaceIndex = line.indexOf(' ');
+
+      if (spaceIndex > 0) {
+        const firstWord = line.substring(0, spaceIndex);
+        const rest = line.substring(spaceIndex);
+        const styledWord = $.make('span', null, { textContent: firstWord });
+
+        applyHighlight(styledWord);
+        lineEl.appendChild(styledWord);
+        lineEl.appendChild(document.createTextNode(rest));
+      } else {
+        lineEl.appendChild(document.createTextNode(line));
+      }
     }
 
-    container.appendChild(line);
+    container.appendChild(lineEl);
   });
 
   return container;

package/src/components/modules/ui.ts

@@ -529,14 +529,20 @@ export class UI extends Module<UINodes> {
   }
 
   /**
-   * Injects a font-family override stylesheet when config.style.fontFamily is set.
-   * Uses a separate <style> tag so it applies even when blok-styles already exists
-   * (multiple editor instances on the same page).
+   * Injects font-family override stylesheets when any config.style font field is set.
+   * Handles: --blok-font-family (legacy), --blok-font-sans, --blok-font-serif,
+   * --blok-font-mono, and --blok-font-handwriting.
    */
   private loadFontStyles(): void {
-    const fontFamily = this.config.style?.fontFamily;
-
-    if (!fontFamily) {
+    const style = this.config.style;
+    const hasAnyFont =
+      style?.fontFamily ||
+      style?.fontFamilySans ||
+      style?.fontFamilySerif ||
+      style?.fontFamilyMono ||
+      style?.fontFamilyHandwriting;
+
+    if (!hasAnyFont) {
       return;
     }
 
@@ -549,12 +555,21 @@ export class UI extends Module<UINodes> {
       return;
     }
 
+    const varLines: string[] = [];
+
+    if (style.fontFamily)            varLines.push(`  --blok-font-family: ${style.fontFamily};`);
+    if (style.fontFamilySans)        varLines.push(`  --blok-font-sans: ${style.fontFamilySans};`);
+    if (style.fontFamilySerif)       varLines.push(`  --blok-font-serif: ${style.fontFamilySerif};`);
+    if (style.fontFamilyMono)        varLines.push(`  --blok-font-mono: ${style.fontFamilyMono};`);
+    if (style.fontFamilyHandwriting) varLines.push(`  --blok-font-handwriting: ${style.fontFamilyHandwriting};`);
+
+    const vars = varLines.join('\n');
     const css = [
       `[data-blok-interface=blok], [data-blok-interface=tooltip] {`,
-      `  --blok-font-family: ${fontFamily};`,
+      vars,
       `}`,
       `[data-blok-popover]:not([data-blok-popover-inline]) {`,
-      `  --blok-font-family: ${fontFamily};`,
+      vars,
       `}`,
     ].join('\n');