@jackuait/blok 0.7.0-beta.1 → 0.7.0-beta.3

package/src/stories/Placeholder.stories.ts

@@ -81,6 +81,9 @@ export const PlaceholderOnlyOnFocus: Story = {
     placeholder: DEFAULT_PLACEHOLDER,
     data: undefined,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Wait for editor to initialize', async () => {
       await waitFor(
@@ -153,6 +156,9 @@ export const TypeAndClearPlaceholder: Story = {
     placeholder: DEFAULT_PLACEHOLDER,
     data: undefined,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Wait for editor to initialize', async () => {
       await waitFor(
@@ -229,6 +235,9 @@ export const MultipleBlocksPlaceholder: Story = {
       ],
     },
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Wait for editor to initialize', async () => {
       await waitFor(
@@ -274,6 +283,9 @@ export const PlaceholderWithToolboxOpen: Story = {
     placeholder: DEFAULT_PLACEHOLDER,
     data: undefined,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Wait for editor and toolbar to initialize', async () => {
       await waitFor(

package/src/stories/Popover.stories.ts

@@ -56,6 +56,7 @@ const meta: Meta<PopoverArgs> = {
   tags: ['autodocs'],
   args: {
     minHeight: 350,
+    width: 450,
     data: sampleData,
   },
   render: createEditor,
@@ -88,6 +89,9 @@ export const ItemHoverState: Story = {
   args: {
     data: sampleData,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Wait for editor and toolbar to initialize', async () => {
       await waitFor(
@@ -151,6 +155,9 @@ export const ItemFocusedState: Story = {
   args: {
     data: sampleData,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Wait for editor and toolbar to initialize', async () => {
       await waitFor(
@@ -230,6 +237,9 @@ export const BlockTunesPopover: Story = {
   args: {
     data: sampleData,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Wait for editor and toolbar to initialize', async () => {
       await waitFor(
@@ -289,6 +299,9 @@ export const ConfirmationState: Story = {
   args: {
     data: sampleData,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Wait for editor and toolbar to initialize', async () => {
       await waitFor(
@@ -382,6 +395,9 @@ export const SearchFiltering: Story = {
   args: {
     data: sampleData,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Wait for editor and toolbar to initialize', async () => {
       await waitFor(
@@ -460,6 +476,9 @@ export const DisabledItem: Story = {
   args: {
     data: sampleData,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Wait for editor and toolbar to initialize', async () => {
       await waitFor(
@@ -538,6 +557,7 @@ export const MobilePopover: Story = {
   args: {
     data: sampleData,
     minHeight: 400,
+    width: 0,
   },
   parameters: {
     viewport: {
@@ -545,6 +565,7 @@ export const MobilePopover: Story = {
     },
     chromatic: {
       viewports: [375],
+      delay: 500,
     },
   },
   play: async ({ canvasElement, step }) => {
@@ -603,6 +624,7 @@ export const MobileOverlay: Story = {
   args: {
     data: sampleData,
     minHeight: 400,
+    width: 0,
   },
   parameters: {
     viewport: {
@@ -610,6 +632,7 @@ export const MobileOverlay: Story = {
     },
     chromatic: {
       viewports: [375],
+      delay: 500,
     },
   },
   play: async ({ canvasElement, step }) => {
@@ -680,6 +703,9 @@ export const BlockSettingsConvertToOpen: Story = {
       header: Header,
     },
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Wait for editor and toolbar to initialize', async () => {
       await waitFor(

package/src/stories/Selection.stories.ts

@@ -82,6 +82,9 @@ export const MultiStringSelectionWithLinkInput: Story = {
   args: {
     data: multiLineData,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Wait for editor and toolbar to initialize', async () => {
       await waitFor(
@@ -169,6 +172,9 @@ export const CrossBlockSelectionWithLinkInput: Story = {
   args: {
     data: multiBlockData,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Wait for editor and toolbar to initialize', async () => {
       await waitFor(

package/src/stories/Table.stories.ts

@@ -596,6 +596,7 @@ export const ColumnGripsVisible: Story = {
       ],
     },
   },
+  parameters: { chromatic: { delay: 500 } },
   play: async ({ canvasElement, step }) => {
     await step('Wait for table', async () => {
       await waitForTable(canvasElement);
@@ -643,6 +644,7 @@ export const RowGripsVisible: Story = {
       ],
     },
   },
+  parameters: { chromatic: { delay: 500 } },
   play: async ({ canvasElement, step }) => {
     await step('Wait for table', async () => {
       await waitForTable(canvasElement);
@@ -689,6 +691,7 @@ export const ColumnGripActive: Story = {
       ],
     },
   },
+  parameters: { chromatic: { delay: 500 } },
   play: async ({ canvasElement, step }) => {
     await step('Wait for table', async () => {
       await waitForTable(canvasElement);
@@ -736,6 +739,7 @@ export const RowGripActive: Story = {
       ],
     },
   },
+  parameters: { chromatic: { delay: 500 } },
   play: async ({ canvasElement, step }) => {
     await step('Wait for table', async () => {
       await waitForTable(canvasElement);
@@ -786,6 +790,7 @@ export const CellFocused: Story = {
       ],
     },
   },
+  parameters: { chromatic: { delay: 500 } },
   play: async ({ canvasElement, step }) => {
     await step('Wait for table and toolbar', async () => {
       await waitForTable(canvasElement);
@@ -841,6 +846,7 @@ export const MultiCellSelection: Story = {
       ],
     },
   },
+  parameters: { chromatic: { delay: 500 } },
   play: async ({ canvasElement, step }) => {
     await step('Wait for table', async () => {
       await waitForTable(canvasElement);
@@ -881,6 +887,7 @@ export const SelectionPillExpanded: Story = {
       ],
     },
   },
+  parameters: { chromatic: { delay: 500 } },
   play: async ({ canvasElement, step }) => {
     await step('Wait for table', async () => {
       await waitForTable(canvasElement);
@@ -972,6 +979,7 @@ export const ScrollOverflow: Story = {
       ],
     },
   },
+  parameters: { chromatic: { delay: 500 } },
   play: async ({ canvasElement, step }) => {
     await step('Wait for table', async () => {
       await waitForTable(canvasElement);
@@ -1476,6 +1484,7 @@ export const AddButtonsVisible: Story = {
       ],
     },
   },
+  parameters: { chromatic: { delay: 500 } },
   play: async ({ canvasElement, step }) => {
     await step('Wait for table', async () => {
       await waitForTable(canvasElement);
@@ -1523,6 +1532,7 @@ export const ResizeHandlesVisible: Story = {
       ],
     },
   },
+  parameters: { chromatic: { delay: 500 } },
   play: async ({ canvasElement, step }) => {
     await step('Wait for table', async () => {
       await waitForTable(canvasElement);
@@ -1578,6 +1588,7 @@ export const RowDragInProgress: Story = {
       ],
     },
   },
+  parameters: { chromatic: { delay: 500 } },
   play: async ({ canvasElement, step }) => {
     await step('Wait for table', async () => {
       await waitForTable(canvasElement);
@@ -1629,6 +1640,7 @@ export const ColumnDragInProgress: Story = {
       ],
     },
   },
+  parameters: { chromatic: { delay: 500 } },
   play: async ({ canvasElement, step }) => {
     await step('Wait for table', async () => {
       await waitForTable(canvasElement);

package/src/stories/Toolbar.stories.ts

@@ -75,6 +75,9 @@ export const ToolbarVisible: Story = {
   args: {
     data: sampleData,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Wait for editor and toolbar to initialize', async () => {
       await waitFor(
@@ -127,6 +130,9 @@ export const PlusButtonHover: Story = {
   args: {
     data: sampleData,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Wait for editor and toolbar to initialize', async () => {
       await waitFor(
@@ -181,6 +187,9 @@ export const SettingsButtonHover: Story = {
   args: {
     data: sampleData,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Wait for editor and toolbar to initialize', async () => {
       await waitFor(

package/src/stories/Toolbox.stories.ts

@@ -62,6 +62,7 @@ const meta: Meta<ToolboxArgs> = {
   tags: ['autodocs'],
   args: {
     minHeight: 300,
+    width: 450,
     data: sampleData,
   },
   render: createEditor,
@@ -112,6 +113,9 @@ export const CustomIconsForAllTools: Story = {
       } as ToolSettings,
     },
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Wait for editor and toolbar to initialize', async () => {
       await waitFor(

package/src/stories/Tooltip.stories.ts

@@ -122,6 +122,9 @@ export const TooltipStates: Story = {
     delay: 0,
   },
   render: createAllStatesDemo,
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     const placements: TooltipArgs['placement'][] = ['bottom', 'top', 'left', 'right'];
     const triggerDefault = canvasElement.querySelector('[data-blok-testid="tooltip-trigger-default"]') as HTMLElement;
@@ -172,6 +175,9 @@ export const WithHTMLContent: Story = {
     content: '<strong>Bold</strong> tooltip',
     delay: 0,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Show tooltip with HTML content', async () => {
       const trigger = canvasElement.querySelector('[data-blok-testid="tooltip-trigger"]') as HTMLElement;

package/src/stories/helpers.ts

@@ -354,17 +354,23 @@ export const triggerSelectAll = (element: Element): void => {
 
 /**
  * Selects text within a block, handling DOM normalization (e.g., <b> → <strong>).
- * Focuses the contenteditable element and creates a proper selection.
+ * Simulates a click on the contenteditable, creates a proper selection, and waits
+ * for the debounced selection handler to fire.
+ *
+ * In headless Chromium (CI), programmatic selections can become collapsed before the
+ * 180ms debounced selectionchange handler fires. The simulateClick + focus + explicit
+ * delay pattern ensures the selection persists reliably.
+ *
  * @param block - The block wrapper element containing the contenteditable
  * @param selector - CSS selector for the element to select (e.g., 'strong', 'em', 'a')
  * @param contentEditableSelector - Selector for the contenteditable element
  * @returns True if selection was created successfully
  */
-export const selectTextInBlock = (
+export const selectTextInBlock = async (
   block: Element,
   selector: string,
   contentEditableSelector = '[contenteditable="true"]'
-): boolean => {
+): Promise<boolean> => {
   const contentEditable = block.querySelector(contentEditableSelector);
   const targetElement = block.querySelector(selector);
 
@@ -372,10 +378,8 @@ export const selectTextInBlock = (
     return false;
   }
 
-  // Focus the contenteditable first to ensure selection is rendered
-  if (contentEditable instanceof HTMLElement) {
-    contentEditable.focus();
-  }
+  // Simulate a full click sequence to establish proper focus context
+  simulateClick(contentEditable);
 
   // Create and apply the selection
   const range = document.createRange();
@@ -387,9 +391,17 @@ export const selectTextInBlock = (
   selection?.removeAllRanges();
   selection?.addRange(range);
 
-  // Dispatch selectionchange event to trigger toolbar
+  // Re-focus to ensure selection is active after range is set
+  if (contentEditable instanceof HTMLElement) {
+    contentEditable.focus();
+  }
+
+  // Dispatch selectionchange event to trigger the debounced handler
   document.dispatchEvent(new Event('selectionchange'));
 
+  // Wait for the debounced selection handler (180ms) plus popover creation time
+  await new Promise((resolve) => setTimeout(resolve, 300));
+
   return true;
 };
 
@@ -464,3 +476,46 @@ export const waitForPointerEvents = (selector: string, timeout = 3000): Promise<
     check();
   });
 };
+
+/**
+ * Waits for the inline toolbar to be fully opened (with popover content).
+ * Unlike simply checking for the toolbar wrapper element, this verifies that
+ * the popover container has been created inside the toolbar, which only happens
+ * after the `open()` method runs successfully.
+ *
+ * @param selector - CSS selector for the inline toolbar wrapper (default: data-blok-testid="inline-toolbar")
+ * @param timeout - Maximum time to wait in ms (default: 5000)
+ */
+export const waitForInlineToolbarOpen = (
+  selector = '[data-blok-testid="inline-toolbar"]',
+  timeout = 5000
+): Promise<Element> => {
+  return new Promise((resolve, reject) => {
+    const startTime = Date.now();
+    const checkInterval = 50;
+
+    const check = (): void => {
+      const toolbar = document.querySelector(selector);
+      const popover = toolbar?.querySelector('[data-blok-testid="popover-container"]');
+
+      if (toolbar && popover) {
+        resolve(toolbar);
+
+        return;
+      }
+
+      if (Date.now() - startTime >= timeout) {
+        reject(new Error(
+          `Inline toolbar popover not found within ${timeout}ms. ` +
+          `Wrapper exists: ${toolbar !== null}, Popover exists: ${popover !== null}`
+        ));
+
+        return;
+      }
+
+      setTimeout(check, checkInterval);
+    };
+
+    check();
+  });
+};

package/src/styles/main.css

@@ -108,6 +108,9 @@
   --animate-wobble: wobble 400ms;
   --animate-rotation: rotation 1.2s infinite linear;
   --animate-notify-bounce-in: notifyBounceIn 600ms 1;
+  --animate-notify-slide-in: notifySlideIn 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
+  --animate-notify-slide-out: notifySlideOut 250ms cubic-bezier(0.4, 0, 1, 1) both;
+  --animate-notify-progress: notifyProgress linear forwards;
 
   /* Keyframes */
   @keyframes fade-in {
@@ -166,6 +169,22 @@
     70% { transform: scale(0.9); }
     100% { transform: scale(1); }
   }
+
+  @keyframes notifySlideIn {
+    0% { opacity: 0; transform: translateY(16px); }
+    70% { opacity: 1; transform: translateY(-2px); }
+    100% { opacity: 1; transform: translateY(0); }
+  }
+
+  @keyframes notifySlideOut {
+    0% { opacity: 1; transform: translateY(0); }
+    100% { opacity: 0; transform: translateY(8px); }
+  }
+
+  @keyframes notifyProgress {
+    0% { width: 100%; }
+    100% { width: 0%; }
+  }
 }
 
 /*
@@ -308,6 +327,19 @@
   @apply p-0 m-0 min-h-[1.6em];
 }
 
+/**
+ * Exclude bare 'color' from transition-property inside table cells.
+ * StyleManager applies transition-colors (which includes 'color') for smooth
+ * selection-state changes, but inside table cells inherited text-color changes
+ * trigger a 150ms flash from black → target. Keep all other transition
+ * properties so background-color selection highlighting still animates.
+ */
+[data-blok-table-cell] [data-blok-element-content] {
+  transition-property: background-color, border-color, outline-color,
+    text-decoration-color, fill, stroke, --tw-gradient-from,
+    --tw-gradient-via, --tw-gradient-to;
+}
+
 /**
  * Table heading styles
  * Applied to first row (heading row) and first column (heading column) cells
@@ -324,3 +356,17 @@
 [data-blok-table-haze][data-blok-table-haze-visible] {
   @apply opacity-100;
 }
+
+/**
+ * Slash search input appearance
+ * When the user types "/" to open the toolbox, the contenteditable
+ * transforms to look like a search input with a placeholder.
+ */
+[data-blok-slash-search] {
+  @apply bg-[#F8F8F8] rounded-lg transition-colors duration-150 max-w-[240px];
+}
+
+[data-blok-slash-search]::after {
+  content: attr(data-blok-slash-search);
+  @apply text-gray-text font-medium text-base pointer-events-none;
+}

package/src/tools/header/index.ts

@@ -23,7 +23,8 @@ import { IconH1, IconH2, IconH3, IconH4, IconH5, IconH6, IconHeading, IconToggle
 import { PLACEHOLDER_CLASSES, setupPlaceholder } from '../../components/utils/placeholder';
 import { translateToolTitle } from '../../components/utils/tools';
 import { twMerge } from '../../components/utils/tw';
-import { ARROW_ICON, ARROW_STYLES, TOGGLE_ATTR, TOGGLE_WRAPPER_STYLES } from '../toggle/constants';
+import { ARROW_ICON, TOGGLE_ATTR, TOGGLE_WRAPPER_STYLES } from '../toggle/constants';
+import { buildArrow } from '../toggle/dom-builder';
 import { updateArrowState, updateChildrenVisibility } from '../toggle/toggle-lifecycle';
 
 /**
@@ -216,6 +217,22 @@ export class Header implements BlockTool {
       normalized.isToggleable = true;
     }
 
+    /**
+     * Sanitize text to remove any previously saved arrow HTML (backwards compatibility)
+     */
+    if (normalized.text) {
+      const temp = document.createElement('div');
+
+      temp.innerHTML = normalized.text;
+
+      const arrowEl = temp.querySelector(`[${TOGGLE_ATTR.toggleArrow}]`);
+
+      if (arrowEl) {
+        arrowEl.remove();
+        normalized.text = temp.innerHTML;
+      }
+    }
+
     return normalized;
   }
 
@@ -238,6 +255,42 @@ export class Header implements BlockTool {
     }
   }
 
+  /**
+   * Expand the toggle heading (no-op if not toggleable or already expanded).
+   * Can be called externally via block.call('expand').
+   */
+  public expand(): void {
+    if (!this._data.isToggleable || this._isOpen) {
+      return;
+    }
+
+    this._isOpen = true;
+
+    if (this._arrowElement && this._element) {
+      updateArrowState(this._arrowElement, this._element, this._isOpen);
+    }
+
+    this.updateChildrenVisibility();
+  }
+
+  /**
+   * Collapse the toggle heading (no-op if not toggleable or already collapsed).
+   * Can be called externally via block.call('collapse').
+   */
+  public collapse(): void {
+    if (!this._data.isToggleable || !this._isOpen) {
+      return;
+    }
+
+    this._isOpen = false;
+
+    if (this._arrowElement && this._element) {
+      updateArrowState(this._arrowElement, this._element, this._isOpen);
+    }
+
+    this.updateChildrenVisibility();
+  }
+
   /**
    * Returns header block tunes config
    *
@@ -357,7 +410,34 @@ export class Header implements BlockTool {
    * @param data - saved data to merge with current block
    */
   public merge(data: HeaderData): void {
-    this._element.insertAdjacentHTML('beforeend', data.text);
+    /**
+     * Strip any arrow HTML from incoming data to prevent injection of toggle markup
+     */
+    const tempDiv = document.createElement('div');
+    tempDiv.innerHTML = data.text;
+    const arrowInData = tempDiv.querySelector(`[${TOGGLE_ATTR.toggleArrow}]`);
+
+    if (arrowInData) {
+      arrowInData.remove();
+    }
+
+    const cleanText = tempDiv.innerHTML;
+
+    /**
+     * Strip arrow from current element, append text, then re-add arrow.
+     * This ensures text is appended to the content, not interleaved with toggle markup.
+     */
+    const arrowEl = this._element.querySelector(`[${TOGGLE_ATTR.toggleArrow}]`);
+
+    if (arrowEl) {
+      arrowEl.remove();
+    }
+
+    this._element.insertAdjacentHTML('beforeend', cleanText);
+
+    if (arrowEl && this._data.isToggleable) {
+      this._element.prepend(arrowEl);
+    }
   }
 
   /**
@@ -378,8 +458,20 @@ export class Header implements BlockTool {
    * @returns saved data
    */
   public save(toolsContent: HTMLHeadingElement): HeaderData {
+    /**
+     * Clone the element and strip the arrow from the clone to read innerHTML
+     * without mutating the live DOM — DOM mutations during save would trigger
+     * the MutationObserver → didMutated → syncBlockDataToYjs → save() loop.
+     */
+    const clone = toolsContent.cloneNode(true) as HTMLHeadingElement;
+    const arrowEl = clone.querySelector(`[${TOGGLE_ATTR.toggleArrow}]`);
+
+    if (arrowEl) {
+      arrowEl.remove();
+    }
+
     const data: HeaderData = {
-      text: toolsContent.innerHTML,
+      text: clone.innerHTML,
       level: this.currentLevel.number,
     };
 
@@ -426,7 +518,24 @@ export class Header implements BlockTool {
    * @returns Current data
    */
   public get data(): HeaderData {
+    /**
+     * Strip arrow element before reading innerHTML to avoid capturing toggle markup
+     */
+    const arrowEl = this._element.querySelector(`[${TOGGLE_ATTR.toggleArrow}]`);
+
+    if (arrowEl) {
+      arrowEl.remove();
+    }
+
     this._data.text = this._element.innerHTML;
+
+    /**
+     * Re-add arrow after reading so the DOM is not mutated
+     */
+    if (arrowEl && this._data.isToggleable) {
+      this._element.prepend(arrowEl);
+    }
+
     this._data.level = this.currentLevel.number;
 
     return this._data;
@@ -568,25 +677,7 @@ export class Header implements BlockTool {
    * @returns The arrow element
    */
   private buildArrow(): HTMLElement {
-    const arrow = document.createElement('div');
-    arrow.className = ARROW_STYLES;
-    arrow.setAttribute(TOGGLE_ATTR.toggleArrow, '');
-    arrow.setAttribute('role', 'button');
-    arrow.setAttribute('tabindex', '-1');
-    arrow.setAttribute('aria-label', 'Expand');
-    arrow.contentEditable = 'false';
-    arrow.innerHTML = ARROW_ICON;
-
-    if (this._isOpen) {
-      arrow.style.transform = 'rotate(90deg)';
-    }
-
-    arrow.addEventListener('click', (event: MouseEvent) => {
-      event.stopPropagation();
-      this.toggleOpen();
-    });
-
-    return arrow;
+    return buildArrow(this._isOpen, () => this.toggleOpen(), { contentEditableFalse: true });
   }
 
   /**
@@ -596,6 +687,14 @@ export class Header implements BlockTool {
   private toggleIsToggleable(): void {
     const wasToggleable = this._data.isToggleable === true;
 
+    /**
+     * If disabling toggle, ensure children are visible before removing toggle state
+     */
+    if (wasToggleable) {
+      updateChildrenVisibility(this.api, this.blockId ?? '', true);
+      this._isOpen = false;
+    }
+
     this.data = {
       level: this._data.level,
       text: this._data.text,