@jackuait/blok 0.6.0-beta.0 → 0.6.0-beta.10

package/src/components/utils/popover/components/popover-item/popover-item-default/popover-item-default.const.ts

@@ -10,13 +10,14 @@ export const css = {
    * Note: noHover state is handled via [data-blok-popover-item-no-hover] which disables hover
    * Priority order: active < hover < focus (focus wins when navigating with keyboard)
    */
-  item: 'flex items-center select-none border-none bg-transparent rounded-md p-[var(--item-padding)] text-text-primary mb-px [&[data-blok-popover-item-active]]:bg-icon-active-bg [&[data-blok-popover-item-active]]:text-icon-active-text can-hover:hover:cursor-pointer can-hover:hover:bg-item-hover-bg [&[data-blok-force-hover]]:cursor-pointer [&[data-blok-force-hover]]:bg-item-hover-bg [&[data-blok-focused="true"]]:bg-item-focus-bg [&[data-blok-popover-item-no-hover]]:hover:bg-transparent [&[data-blok-popover-item-no-hover]]:cursor-default',
+  item: 'flex items-center select-none border-none bg-transparent rounded-md px-2 py-[var(--item-padding)] text-text-primary mb-px [&[data-blok-popover-item-active]]:bg-icon-active-bg [&[data-blok-popover-item-active]]:text-icon-active-text can-hover:hover:cursor-pointer can-hover:hover:bg-item-hover-bg [&[data-blok-force-hover]]:cursor-pointer [&[data-blok-force-hover]]:bg-item-hover-bg [&[data-blok-focused="true"]]:bg-item-focus-bg [&[data-blok-popover-item-no-hover]]:hover:bg-transparent [&[data-blok-popover-item-no-hover]]:cursor-default can-hover:[&[data-blok-popover-item-destructive]]:hover:text-item-destructive-text can-hover:[&[data-blok-popover-item-destructive]]:hover:bg-item-destructive-hover-bg [&[data-blok-popover-item-destructive][data-blok-force-hover]]:text-item-destructive-text [&[data-blok-popover-item-destructive][data-blok-force-hover]]:bg-item-destructive-hover-bg [&[data-blok-popover-item-destructive][data-blok-focused="true"]]:text-item-destructive-text [&[data-blok-popover-item-destructive][data-blok-focused="true"]]:bg-item-destructive-hover-bg',
 
   /**
    * Item disabled state
    */
   itemDisabled: 'cursor-default pointer-events-none text-text-secondary',
 
+
   /**
    * Icon container styles
    */

package/src/components/utils/popover/components/popover-item/popover-item-default/popover-item-default.ts

@@ -206,6 +206,9 @@ export class PopoverItemDefault extends PopoverItem {
     if (params.isDisabled) {
       root.setAttribute(DATA_ATTR.disabled, 'true');
     }
+    if ('isDestructive' in params && params.isDestructive) {
+      root.setAttribute(DATA_ATTR.popoverItemDestructive, 'true');
+    }
     if (this.isActive) {
       root.setAttribute(DATA_ATTR.popoverItemActive, 'true');
     }
@@ -321,6 +324,8 @@ export class PopoverItemDefault extends PopoverItem {
 
     return twMerge(
       css.item,
+      // Asymmetric padding for vertical popovers (better visual balance)
+      !isInline && !isNestedInline && 'pl-2 pr-8',
       isInline && cssInline.item,
       isNestedInline && cssNestedInline.item,
       this.params.isDisabled && css.itemDisabled
@@ -335,7 +340,7 @@ export class PopoverItemDefault extends PopoverItem {
       css.icon,
       isInline && 'w-auto h-auto [&_svg]:w-icon [&_svg]:h-icon mobile:[&_svg]:w-icon-mobile mobile:[&_svg]:h-icon-mobile',
       isNestedInline && 'w-toolbox-btn h-toolbox-btn',
-      iconWithGap && 'mr-2',
+      iconWithGap && 'mr-3',
       iconWithGap && isInline && 'shadow-none bg-transparent !mr-0',
       iconWithGap && isNestedInline && '!mr-2',
       isWobbling && 'animate-wobble'

package/src/components/utils/popover/index.ts

@@ -11,3 +11,4 @@ export { PopoverItemType } from '@/types/utils/popover/popover-item-type';
 export type Popover = PopoverDesktop | PopoverMobile | PopoverInline;
 
 export { PopoverDesktop, PopoverMobile, PopoverInline };
+export { PopoverRegistry } from './popover-registry';

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

@@ -7,6 +7,7 @@ import { PopoverItemDefault, PopoverItemSeparator, PopoverItemType } from './com
 import type { PopoverItem, PopoverItemRenderParamsMap , PopoverItemParams } from './components/popover-item';
 import { PopoverItemHtml } from './components/popover-item/popover-item-html/popover-item-html';
 import type { SearchInput } from './components/search-input';
+import { PopoverRegistry } from './popover-registry';
 import { css } from './popover.const';
 
 import type { PopoverEventMap, PopoverMessages, PopoverParams, PopoverNodes } from '@/types/utils/popover/popover';
@@ -124,6 +125,13 @@ export abstract class PopoverAbstract<Nodes extends PopoverNodes = PopoverNodes>
     if (this.search !== undefined) {
       this.search.focus();
     }
+
+    const { trigger } = this.params;
+    const isRootWithTrigger = (this.params.nestingLevel ?? 0) === 0 && trigger !== undefined;
+
+    if (isRootWithTrigger) {
+      PopoverRegistry.instance.register(this, trigger);
+    }
   }
 
   /**
@@ -142,6 +150,8 @@ export abstract class PopoverAbstract<Nodes extends PopoverNodes = PopoverNodes>
       this.search.clear();
     }
 
+    PopoverRegistry.instance.unregister(this);
+
     this.emit(PopoverEvent.Closed);
   }
 
@@ -414,7 +424,7 @@ export abstract class PopoverAbstract<Nodes extends PopoverNodes = PopoverNodes>
     popover.setAttribute('data-blok-testid', 'popover');
 
     // Set CSS variables
-    popover.style.setProperty('--width', this.params.width ?? '280px');
+    popover.style.setProperty('--width', this.params.width ?? 'auto');
     popover.style.setProperty('--item-padding', '3px');
     popover.style.setProperty('--item-height', 'calc(1.25rem + 2 * var(--item-padding))');
     popover.style.setProperty('--popover-top', 'calc(100% + 0.5rem)');

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

@@ -217,31 +217,50 @@ export class PopoverDesktop extends PopoverAbstract {
     this.flipper?.focusItem(0, { skipNextTab: true });
   }
 
+  /**
+   * Updates the popover position dynamically.
+   * Used when the trigger position changes or when positioning at caret location.
+   * @param position - new DOMRect position for the popover
+   */
+  public updatePosition(position: DOMRect): void {
+    this.params.position = position;
+
+    // Recalculate and apply position if already shown
+    if (this.nodes.popover.hasAttribute('data-blok-popover-opened')) {
+      const { top, left } = this.calculatePosition();
+
+      this.nodes.popover.style.top = `${top}px`;
+      this.nodes.popover.style.left = `${left}px`;
+    }
+  }
+
   /**
    * Calculates position for the popover
    */
   private calculatePosition(): { top: number; left: number } {
-    if (!this.trigger) {
+    // Use provided position if available, otherwise fall back to trigger element
+    const rect = this.params.position ?? this.trigger?.getBoundingClientRect();
+
+    if (!rect) {
       return {
         top: 0,
         left: 0,
       };
     }
 
-    const triggerRect = this.trigger.getBoundingClientRect();
     const popoverRect = this.size;
     const windowWidth = window.innerWidth;
     const windowHeight = window.innerHeight;
     const offset = 8;
 
-    const initialTop = triggerRect.bottom + offset + window.scrollY;
-    const shouldFlipTop = (triggerRect.bottom + offset + popoverRect.height > windowHeight + window.scrollY) &&
-      (triggerRect.top - offset - popoverRect.height > window.scrollY);
-    const top = shouldFlipTop ? triggerRect.top - offset - popoverRect.height + window.scrollY : initialTop;
+    const initialTop = rect.bottom + offset + window.scrollY;
+    const shouldFlipTop = (rect.bottom + offset + popoverRect.height > windowHeight + window.scrollY) &&
+      (rect.top - offset - popoverRect.height > window.scrollY);
+    const top = shouldFlipTop ? rect.top - offset - popoverRect.height + window.scrollY : initialTop;
 
-    const initialLeft = triggerRect.left + window.scrollX;
+    const initialLeft = rect.left + window.scrollX;
     const shouldFlipLeft = initialLeft + popoverRect.width > windowWidth + window.scrollX;
-    const left = shouldFlipLeft ? Math.max(0, triggerRect.right - popoverRect.width + window.scrollX) : initialLeft;
+    const left = shouldFlipLeft ? Math.max(0, rect.right - popoverRect.width + window.scrollX) : initialLeft;
 
     return {
       top,

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

@@ -0,0 +1,188 @@
+import type { PopoverAbstract } from './popover-abstract';
+
+/**
+ * Entry in the popover registry stack
+ */
+interface PopoverRegistryEntry {
+  popover: PopoverAbstract;
+  triggerElement: HTMLElement;
+}
+
+/**
+ * Singleton registry that manages open popovers.
+ * Enforces mutual exclusion (only one popover open at a time)
+ * and handles click-outside-to-close behavior.
+ */
+export class PopoverRegistry {
+  /**
+   * Singleton instance
+   */
+  private static _instance: PopoverRegistry | null = null;
+
+  /**
+   * Returns the singleton instance, creating it if necessary
+   */
+  static get instance(): PopoverRegistry {
+    if (PopoverRegistry._instance === null) {
+      PopoverRegistry._instance = new PopoverRegistry();
+    }
+
+    return PopoverRegistry._instance;
+  }
+
+  /**
+   * Resets the singleton for testing purposes.
+   * Destroys the existing instance and creates a fresh one.
+   */
+  static resetForTests(): PopoverRegistry {
+    PopoverRegistry._instance?.destroy();
+    PopoverRegistry._instance = new PopoverRegistry();
+
+    return PopoverRegistry._instance;
+  }
+
+  /**
+   * Stack of currently registered popover entries
+   */
+  private stack: PopoverRegistryEntry[] = [];
+
+  /**
+   * Bound reference to the pointerdown handler for add/remove symmetry
+   */
+  private boundPointerDown: ((e: PointerEvent) => void) | null = null;
+
+  /**
+   * Registers a popover with mutual exclusion.
+   * Closes all existing popovers, then adds the new one to the stack.
+   * @param popover - the popover instance to register
+   * @param triggerElement - the element that triggered this popover
+   */
+  public register(popover: PopoverAbstract, triggerElement: HTMLElement): void {
+    const existingEntries = [...this.stack];
+
+    for (const entry of existingEntries) {
+      if (entry.popover === popover) {
+        continue;
+      }
+      entry.popover.hide();
+      this.removeFromStack(entry.popover);
+    }
+
+    this.stack.push({ popover, triggerElement });
+    this.ensureDocumentListener();
+  }
+
+  /**
+   * Unregisters a popover, removing it from the stack.
+   * Removes the document listener if the stack becomes empty.
+   * @param popover - the popover instance to unregister
+   */
+  public unregister(popover: PopoverAbstract): void {
+    this.removeFromStack(popover);
+
+    if (this.stack.length === 0) {
+      this.removeDocumentListener();
+    }
+  }
+
+  /**
+   * Closes the topmost popover on the stack by calling hide().
+   * @returns true if a popover was closed, false if the stack was empty
+   */
+  public closeTopmost(): boolean {
+    if (this.stack.length === 0) {
+      return false;
+    }
+
+    const topmost = this.stack[this.stack.length - 1];
+
+    topmost.popover.hide();
+
+    return true;
+  }
+
+  /**
+   * Checks whether any popovers are currently registered
+   */
+  public hasOpenPopovers(): boolean {
+    return this.stack.length > 0;
+  }
+
+  /**
+   * Cleans up the registry: removes the document listener and clears the stack
+   */
+  public destroy(): void {
+    this.removeDocumentListener();
+    this.stack = [];
+  }
+
+  /**
+   * Handles pointerdown events on the document.
+   * Walks the stack in reverse (topmost first). For each entry:
+   * - If the click target is inside the popover, stop (click is inside).
+   * - If the click target is inside the trigger element, stop (click is on trigger).
+   * - Otherwise, close the popover by calling hide().
+   * @param event - the pointerdown event
+   */
+  private handleDocumentPointerDown(event: PointerEvent): void {
+    const target = event.target;
+
+    if (!(target instanceof Node)) {
+      return;
+    }
+
+    const entriesToClose: PopoverRegistryEntry[] = [];
+
+    for (const entry of [...this.stack].reverse()) {
+      if (entry.popover.hasNode(target)) {
+        break;
+      }
+
+      if (entry.triggerElement.contains(target)) {
+        break;
+      }
+
+      entriesToClose.push(entry);
+    }
+
+    for (const entry of entriesToClose) {
+      entry.popover.hide();
+    }
+  }
+
+  /**
+   * Lazily adds the pointerdown listener to the document when there are entries in the stack
+   */
+  private ensureDocumentListener(): void {
+    if (this.boundPointerDown !== null) {
+      return;
+    }
+
+    this.boundPointerDown = (e: PointerEvent): void => this.handleDocumentPointerDown(e);
+    document.addEventListener('pointerdown', this.boundPointerDown);
+  }
+
+  /**
+   * Removes the pointerdown listener from the document
+   */
+  private removeDocumentListener(): void {
+    if (this.boundPointerDown === null) {
+      return;
+    }
+
+    document.removeEventListener('pointerdown', this.boundPointerDown);
+    this.boundPointerDown = null;
+  }
+
+  /**
+   * Removes a popover from the stack by reference
+   * @param popover - popover to remove
+   */
+  private removeFromStack(popover: PopoverAbstract): void {
+    const index = this.stack.findIndex(entry => entry.popover === popover);
+
+    if (index !== -1) {
+      this.stack.splice(index, 1);
+    }
+  }
+}

package/src/components/utils/sanitizer.ts

@@ -30,7 +30,7 @@
 import HTMLJanitor from 'html-janitor';
 
 import type { BlockToolData, SanitizerConfig, SanitizerRule } from '../../../types';
-import type { TagConfig } from '../../../types/configs/sanitizer-config';
+import type { TagConfig, ToolSanitizerConfig } from '../../../types/configs/sanitizer-config';
 import type { SavedData } from '../../../types/data-formats';
 import { deepMerge, isBoolean, isEmpty, isFunction, isObject, isString } from '../utils';
 
@@ -55,7 +55,7 @@ const UNSAFE_URL_ATTR_FALLBACK_PATTERN =
  */
 export const sanitizeBlocks = (
   blocksData: Array<Pick<SavedData, 'data' | 'tool'>>,
-  sanitizeConfig: SanitizerConfig | ((toolName: string) => SanitizerConfig | undefined),
+  sanitizeConfig: SanitizerConfig | ToolSanitizerConfig | ((toolName: string) => SanitizerConfig | ToolSanitizerConfig | undefined),
   globalSanitizer: SanitizerConfig = {} as SanitizerConfig
 ): Array<Pick<SavedData, 'data' | 'tool'>> => {
   return blocksData.map((block) => {
@@ -400,6 +400,27 @@ const mergeTagRules = (globalRules: SanitizerConfig, fieldRules: SanitizerConfig
     merged[tag] = cloneTagConfig(globalValue);
   }
 
+  /**
+   * Include tags from field rules that are not present in global rules.
+   * Tool-specific sanitize configs should be able to allow tags
+   * beyond what the global config defines.
+   */
+  if (!fieldRules) {
+    return merged;
+  }
+
+  for (const tag in fieldRules) {
+    if (!Object.prototype.hasOwnProperty.call(fieldRules, tag)) {
+      continue;
+    }
+
+    if (Object.prototype.hasOwnProperty.call(merged, tag)) {
+      continue;
+    }
+
+    merged[tag] = cloneTagConfig(fieldRules[tag]);
+  }
+
   return merged;
 };
 

package/src/components/utils/tooltip.ts

@@ -55,12 +55,6 @@ type CSSTooltipClasses = {
   tooltip: string | string[];
   tooltipContent: string | string[];
   tooltipShown: string | string[];
-  placement: {
-    left: string | string[];
-    bottom: string | string[];
-    right: string | string[];
-    top: string | string[];
-  };
 };
 
 /**
@@ -79,9 +73,7 @@ class Tooltip {
         'absolute z-overlay top-0 left-0',
         'bg-tooltip-bg opacity-0',
         'select-none pointer-events-none',
-        'transition-[opacity,transform] duration-[50ms,70ms] ease-in',
         'rounded-lg shadow-tooltip',
-        'will-change-[opacity,top,left]',
         'before:content-[\'\'] before:absolute before:inset-0 before:bg-tooltip-bg before:-z-10 before:rounded-lg',
         'mobile:hidden'
       ).split(' '),
@@ -90,13 +82,7 @@ class Tooltip {
         'text-tooltip-font text-xs text-center',
         'tracking-[0.02em] leading-[1em]'
       ).split(' '),
-      tooltipShown: ['opacity-100', 'transform-none'],
-      placement: {
-        left: ['-translate-x-[5px]'],
-        bottom: ['translate-y-[5px]'],
-        right: ['translate-x-[5px]'],
-        top: ['-translate-y-[5px]'],
-      },
+      tooltipShown: ['opacity-100'],
     };
   }
 
@@ -193,7 +179,7 @@ class Tooltip {
       marginLeft: 0,
       marginRight: 0,
       marginBottom: 0,
-      delay: 70,
+      delay: 0,
     };
     const showingOptions = Object.assign(basicOptions, options);
 
@@ -208,11 +194,6 @@ class Tooltip {
       return;
     }
 
-    // Flatten the placement classes (each can be a string or array) before removing
-    const placementClasses = Object.values(this.CSS.placement).flatMap(cls => Array.isArray(cls) ? cls : [cls]);
-
-    this.nodes.wrapper.classList.remove(...placementClasses);
-
     switch (showingOptions.placement) {
       case 'top':
         this.placeTop(element, showingOptions);
@@ -503,9 +484,6 @@ class Tooltip {
       return;
     }
 
-    const classes = Array.isArray(this.CSS.placement[place]) ? this.CSS.placement[place] : [this.CSS.placement[place]];
-
-    this.nodes.wrapper.classList.add(...classes);
     this.nodes.wrapper.setAttribute('data-blok-placement', place);
 
     this.nodes.wrapper.style.left = `${left}px`;

package/src/styles/main.css

@@ -124,3 +124,25 @@
 [data-blok-selected="true"] [data-list-style] [role="listitem"] [contenteditable] {
   @apply select-none;
 }
+
+/**
+ * Table cell block wrapper overrides
+ * Strip all nested spacing so only the cell's own padding (py-1 px-2) provides spacing.
+ * Targets: block wrapper (py/my), .blok-block (py/px), and tool elements (mt/mb).
+ */
+[data-blok-table-cell-blocks] > [data-blok-element] {
+  @apply py-0 my-0;
+}
+
+[data-blok-table-cell-blocks] .blok-block {
+  @apply p-0 m-0;
+}
+
+/**
+ * Table heading styles
+ * Applied to first row (heading row) and first column (heading column) cells
+ */
+[data-blok-table-heading] [data-blok-table-cell],
+[data-blok-table-heading-col] {
+  @apply font-semibold bg-gray-50;
+}

package/src/tools/paragraph/index.ts

@@ -13,13 +13,13 @@ import type {
   PasteEvent,
   ToolboxConfig,
   ConversionConfig,
-  SanitizerConfig,
+  ToolSanitizerConfig,
   PasteConfig,
 } from '../../../types';
 import { DATA_ATTR } from '../../components/constants';
 import { IconText } from '../../components/icons';
 import { stripFakeBackgroundElements } from '../../components/utils';
-import { PLACEHOLDER_FOCUS_ONLY_CLASSES, setupPlaceholder } from '../../components/utils/placeholder';
+import { PLACEHOLDER_EMPTY_EDITOR_CLASSES, PLACEHOLDER_FOCUS_ONLY_CLASSES, setupPlaceholder } from '../../components/utils/placeholder';
 import { twMerge } from '../../components/utils/tw';
 
 /**
@@ -239,7 +239,8 @@ export class Paragraph implements BlockTool {
     div.className = twMerge(
       this.api.styles.block,
       Paragraph.WRAPPER_CLASSES,
-      PLACEHOLDER_FOCUS_ONLY_CLASSES
+      PLACEHOLDER_FOCUS_ONLY_CLASSES,
+      PLACEHOLDER_EMPTY_EDITOR_CLASSES
     );
     div.setAttribute(DATA_ATTR.tool, 'paragraph');
     div.contentEditable = 'false';
@@ -369,10 +370,17 @@ export class Paragraph implements BlockTool {
    *
    * @returns SanitizerConfig
    */
-  public static get sanitize(): SanitizerConfig {
+  public static get sanitize(): ToolSanitizerConfig {
     return {
       text: {
         br: true,
+        img: {
+          src: true,
+          style: true,
+        },
+        p: true,
+        ul: true,
+        li: true,
       },
     };
   }

package/src/tools/table/data-normalizer.ts

@@ -25,6 +25,7 @@ export const normalizeTableData = (
 ): TableData => {
   return {
     withHeadings: (data.withHeadings as boolean) ?? defaults?.withHeadings ?? false,
+    withHeadingColumn: (data.withHeadingColumn as boolean) ?? false,
     stretched: (data.stretched as boolean) ?? defaults?.stretched ?? false,
     content: Array.isArray(data.content) ? data.content as string[][] : [],
   };