@jackuait/blok 0.7.0-beta.2 → 0.7.0-beta.4

package/src/stories/Block.stories.ts

@@ -78,6 +78,9 @@ export const Focused: Story = {
     data: sampleData,
     readOnly: false,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Wait for editor and toolbar to initialize', async () => {
       await waitFor(
@@ -120,6 +123,9 @@ export const SelectedByShortcut: Story = {
     data: sampleData,
     readOnly: false,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Wait for editor and toolbar to initialize', async () => {
       await waitFor(
@@ -178,6 +184,9 @@ export const MultipleSelected: Story = {
     data: sampleData,
     readOnly: false,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Wait for editor and toolbar to initialize', async () => {
       await waitFor(
@@ -236,6 +245,9 @@ export const WithTextSelection: Story = {
     data: sampleData,
     readOnly: false,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Wait for editor to initialize', async () => {
       await waitFor(
@@ -342,6 +354,9 @@ export const NewBlockAnimation: Story = {
     data: sampleData,
     readOnly: false,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Wait for editor and toolbar to initialize', async () => {
       await waitFor(
@@ -395,6 +410,9 @@ export const NewBlockAnimation: Story = {
  * This state is shown when a block is configured to stretch to full width.
  */
 export const StretchedBlock: Story = {
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   args: {
     data: {
       time: Date.now(),
@@ -461,6 +479,9 @@ export const NavigationMode: Story = {
     data: sampleData,
     readOnly: false,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Wait for editor and toolbar to initialize', async () => {
       await waitFor(

package/src/stories/EditorModes.stories.ts

@@ -94,6 +94,9 @@ export const NarrowMode: Story = {
     readOnly: false,
     width: 400,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Wait for editor and toolbar to initialize', async () => {
       await waitFor(
@@ -164,6 +167,9 @@ export const FocusedWithToolbar: Story = {
     data: sampleData,
     readOnly: false,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Wait for editor and toolbar to initialize', async () => {
       await waitFor(
@@ -208,6 +214,10 @@ export const ToolboxOpenedMode: Story = {
   args: {
     data: sampleData,
     readOnly: false,
+    width: 450,
+  },
+  parameters: {
+    chromatic: { delay: 500 },
   },
   play: async ({ canvasElement, step }) => {
     await step('Wait for editor and toolbar to initialize', async () => {
@@ -303,6 +313,9 @@ export const RTLMode: Story = {
       direction: 'rtl',
     },
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Verify RTL direction is applied', async () => {
       await waitFor(
@@ -345,6 +358,9 @@ export const DraggingState: Story = {
     data: sampleData,
     readOnly: false,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     const container = canvasElement.querySelector('[data-story-container]');
 
@@ -445,6 +461,9 @@ export const RectangleSelection: Story = {
     data: sampleData,
     readOnly: false,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Wait for editor to initialize', async () => {
       await waitFor(

package/src/stories/InlineToolbar.stories.ts

@@ -3,7 +3,7 @@ import { userEvent, waitFor, expect } from 'storybook/test';
 
 import { Header } from '../tools/header';
 
-import { createEditorContainer, simulateClick, waitForToolbar, selectTextInBlock, waitForPointerEvents } from './helpers';
+import { createEditorContainer, simulateClick, waitForToolbar, selectTextInBlock, waitForPointerEvents, waitForInlineToolbarOpen } from './helpers';
 import type { EditorFactoryOptions } from './helpers';
 
 import type { OutputData } from '@/types';
@@ -103,6 +103,9 @@ export const WithTextSelection: Story = {
   args: {
     data: sampleData,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Wait for editor to initialize', async () => {
       await waitFor(
@@ -144,6 +147,9 @@ export const BoldActive: Story = {
   args: {
     data: sampleData,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Wait for editor to initialize', async () => {
       await waitFor(
@@ -154,6 +160,7 @@ export const BoldActive: Story = {
         },
         TIMEOUT_INIT
       );
+      await waitForToolbar(canvasElement);
     });
 
     await step('Select bold text to show active state', async () => {
@@ -162,7 +169,7 @@ export const BoldActive: Story = {
 
       // Use 'strong' selector - browsers normalize <b> to <strong>
       if (secondBlock) {
-        selectTextInBlock(secondBlock, 'strong');
+        await selectTextInBlock(secondBlock, 'strong');
       }
 
       await waitFor(
@@ -189,6 +196,9 @@ export const ItalicActive: Story = {
   args: {
     data: sampleData,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Wait for editor to initialize', async () => {
       await waitFor(
@@ -199,6 +209,7 @@ export const ItalicActive: Story = {
         },
         TIMEOUT_INIT
       );
+      await waitForToolbar(canvasElement);
     });
 
     await step('Select italic text to show active state', async () => {
@@ -207,7 +218,7 @@ export const ItalicActive: Story = {
 
       // Use 'em' selector - browsers normalize <i> to <em>
       if (secondBlock) {
-        selectTextInBlock(secondBlock, 'em');
+        await selectTextInBlock(secondBlock, 'em');
       }
 
       await waitFor(
@@ -234,6 +245,9 @@ export const LinkActive: Story = {
   args: {
     data: sampleData,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Wait for editor to initialize', async () => {
       await waitFor(
@@ -244,6 +258,7 @@ export const LinkActive: Story = {
         },
         TIMEOUT_INIT
       );
+      await waitForToolbar(canvasElement);
     });
 
     await step('Select link text to show active/unlink state', async () => {
@@ -251,7 +266,7 @@ export const LinkActive: Story = {
       const thirdBlock = blocks[2];
 
       if (thirdBlock) {
-        selectTextInBlock(thirdBlock, 'a');
+        await selectTextInBlock(thirdBlock, 'a');
       }
 
       await waitFor(
@@ -278,6 +293,9 @@ export const LinkInputShown: Story = {
   args: {
     data: sampleData,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Wait for editor and toolbar to initialize', async () => {
       await waitFor(
@@ -333,14 +351,12 @@ export const LinkInputShown: Story = {
           const inlineToolbar = document.querySelector(INLINE_TOOLBAR_TESTID);
 
           expect(inlineToolbar).toBeInTheDocument();
-
-          // Also verify the popover is populated
-          const popoverContainer = inlineToolbar?.querySelector('[data-blok-testid="popover-container"]');
-
-          expect(popoverContainer).toBeInTheDocument();
         },
         TIMEOUT_ACTION
       );
+
+      // Verify the toolbar has actual popover content (not just the empty wrapper)
+      await waitForInlineToolbarOpen();
     });
 
     await step('Click link tool to show input', async () => {
@@ -375,6 +391,9 @@ export const ConvertToDropdownOpen: Story = {
   args: {
     data: sampleData,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Wait for editor to initialize', async () => {
       await waitFor(
@@ -385,6 +404,7 @@ export const ConvertToDropdownOpen: Story = {
         },
         TIMEOUT_INIT
       );
+      await waitForToolbar(canvasElement);
     });
 
     await step('Select text to show inline toolbar', async () => {
@@ -394,9 +414,13 @@ export const ConvertToDropdownOpen: Story = {
       if (contentEditable) {
         simulateClick(contentEditable);
         selectText(contentEditable, 0, 11);
+        (contentEditable as HTMLElement).focus();
         document.dispatchEvent(new Event('selectionchange'));
       }
 
+      // Wait for the debounced selection handler (180ms) plus popover creation time
+      await new Promise((resolve) => setTimeout(resolve, 300));
+
       await waitFor(
         () => {
           const inlineToolbar = document.querySelector(INLINE_TOOLBAR_TESTID);
@@ -450,6 +474,9 @@ export const ToolHoverState: Story = {
   args: {
     data: sampleData,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Wait for editor to initialize', async () => {
       await waitFor(
@@ -460,6 +487,7 @@ export const ToolHoverState: Story = {
         },
         TIMEOUT_INIT
       );
+      await waitForToolbar(canvasElement);
     });
 
     await step('Select text to show inline toolbar', async () => {
@@ -469,9 +497,13 @@ export const ToolHoverState: Story = {
       if (contentEditable) {
         simulateClick(contentEditable);
         selectText(contentEditable, 0, 11);
+        (contentEditable as HTMLElement).focus();
         document.dispatchEvent(new Event('selectionchange'));
       }
 
+      // Wait for the debounced selection handler (180ms) plus popover creation time
+      await new Promise((resolve) => setTimeout(resolve, 300));
+
       await waitFor(
         () => {
           const inlineToolbar = document.querySelector(INLINE_TOOLBAR_TESTID);

package/src/stories/MarkerColors.stories.ts

@@ -3,7 +3,7 @@ import { waitFor, expect } from 'storybook/test';
 
 import { Marker } from '../tools';
 
-import { createEditorContainer, defaultTools, simulateClick, waitForToolbar, selectTextInBlock, waitForPointerEvents } from './helpers';
+import { createEditorContainer, defaultTools, simulateClick, waitForToolbar, selectTextInBlock, waitForPointerEvents, waitForInlineToolbarOpen } from './helpers';
 import type { EditorFactoryOptions } from './helpers';
 
 import type { OutputData } from '@/types';
@@ -126,7 +126,15 @@ const openMarkerPicker = async (canvasElement: HTMLElement): Promise<void> => {
 
     const range = document.createRange();
 
-    range.selectNodeContents(contentEditable);
+    // Select the first text node directly — more reliable in headless Chromium
+    const textNode = contentEditable.firstChild;
+
+    if (textNode?.nodeType === Node.TEXT_NODE && textNode.textContent) {
+      range.setStart(textNode, 0);
+      range.setEnd(textNode, textNode.textContent.length);
+    } else {
+      range.selectNodeContents(contentEditable);
+    }
 
     const selection = window.getSelection();
 
@@ -142,15 +150,8 @@ const openMarkerPicker = async (canvasElement: HTMLElement): Promise<void> => {
   // 5. Wait for debounced selection handler (180ms) plus popover creation
   await new Promise((resolve) => setTimeout(resolve, 300));
 
-  // 6. Wait for inline toolbar to appear
-  await waitFor(
-    () => {
-      const inlineToolbar = document.querySelector(INLINE_TOOLBAR_TESTID);
-
-      expect(inlineToolbar).toBeInTheDocument();
-    },
-    TIMEOUT_ACTION
-  );
+  // 6. Wait for inline toolbar to be fully open (with popover content)
+  await waitForInlineToolbarOpen();
 
   // 7. Wait for pointer events on the popover container
   await waitForPointerEvents(`${INLINE_TOOLBAR_TESTID} [data-blok-testid="popover-container"]`);
@@ -401,6 +402,9 @@ export const PickerTextTab: Story = {
   args: {
     data: pickerData,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Open marker picker on text tab', async () => {
       await openMarkerPicker(canvasElement);
@@ -426,6 +430,9 @@ export const PickerBackgroundTab: Story = {
   args: {
     data: pickerData,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Open marker picker', async () => {
       await openMarkerPicker(canvasElement);
@@ -459,6 +466,9 @@ export const PickerDefaultButton: Story = {
   args: {
     data: pickerData,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Open marker picker and verify default button', async () => {
       await openMarkerPicker(canvasElement);
@@ -483,6 +493,9 @@ export const PickerNoActiveSwatch: Story = {
   args: {
     data: pickerData,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Open marker picker and verify no active swatch', async () => {
       await openMarkerPicker(canvasElement);
@@ -512,6 +525,9 @@ export const PickerActiveTextSwatch: Story = {
   args: {
     data: preColoredTextData,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Select pre-colored text and open picker', async () => {
       // Wait for the editor block to appear
@@ -531,24 +547,16 @@ export const PickerActiveTextSwatch: Story = {
       const block = canvasElement.querySelector(BLOCK_TESTID);
 
       if (block) {
-        selectTextInBlock(block, 'mark');
+        await selectTextInBlock(block, 'mark');
       }
 
-      // Wait for debounced selection handler
-      await new Promise((resolve) => setTimeout(resolve, 300));
-
-      // Wait for inline toolbar
-      await waitFor(
-        () => {
-          const inlineToolbar = document.querySelector(INLINE_TOOLBAR_TESTID);
-
-          expect(inlineToolbar).toBeInTheDocument();
-        },
-        TIMEOUT_ACTION
-      );
+      // Wait for inline toolbar to be fully open (with popover content)
+      await waitForInlineToolbarOpen();
 
-      // Wait for pointer events
+      // Wait for pointer events on the popover container
       await waitForPointerEvents(`${INLINE_TOOLBAR_TESTID} [data-blok-testid="popover-container"]`);
+
+      // Small delay for CSS animation to complete
       await new Promise((resolve) => setTimeout(resolve, 150));
 
       // Click the marker tool to open the picker
@@ -592,6 +600,9 @@ export const PickerActiveBackgroundSwatch: Story = {
   args: {
     data: preColoredBgData,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Select pre-colored background text and open picker', async () => {
       // Wait for the editor block to appear
@@ -611,24 +622,16 @@ export const PickerActiveBackgroundSwatch: Story = {
       const block = canvasElement.querySelector(BLOCK_TESTID);
 
       if (block) {
-        selectTextInBlock(block, 'mark');
+        await selectTextInBlock(block, 'mark');
       }
 
-      // Wait for debounced selection handler
-      await new Promise((resolve) => setTimeout(resolve, 300));
-
-      // Wait for inline toolbar
-      await waitFor(
-        () => {
-          const inlineToolbar = document.querySelector(INLINE_TOOLBAR_TESTID);
-
-          expect(inlineToolbar).toBeInTheDocument();
-        },
-        TIMEOUT_ACTION
-      );
+      // Wait for inline toolbar to be fully open (with popover content)
+      await waitForInlineToolbarOpen();
 
-      // Wait for pointer events
+      // Wait for pointer events on the popover container
       await waitForPointerEvents(`${INLINE_TOOLBAR_TESTID} [data-blok-testid="popover-container"]`);
+
+      // Small delay for CSS animation to complete
       await new Promise((resolve) => setTimeout(resolve, 150));
 
       // Click the marker tool to open the picker
@@ -681,6 +684,9 @@ export const MarkerButtonActive: Story = {
   args: {
     data: preColoredTextData,
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ canvasElement, step }) => {
     await step('Select pre-colored text to show marker active state', async () => {
       // Wait for the editor block to appear
@@ -700,21 +706,11 @@ export const MarkerButtonActive: Story = {
       const block = canvasElement.querySelector(BLOCK_TESTID);
 
       if (block) {
-        selectTextInBlock(block, 'mark');
+        await selectTextInBlock(block, 'mark');
       }
 
-      // Wait for debounced selection handler
-      await new Promise((resolve) => setTimeout(resolve, 300));
-
-      // Wait for inline toolbar
-      await waitFor(
-        () => {
-          const inlineToolbar = document.querySelector(INLINE_TOOLBAR_TESTID);
-
-          expect(inlineToolbar).toBeInTheDocument();
-        },
-        TIMEOUT_ACTION
-      );
+      // Wait for inline toolbar to be fully open (with popover content)
+      await waitForInlineToolbarOpen();
 
       // Verify the marker tool button is active
       await waitFor(

package/src/stories/Notifier.stories.ts

@@ -113,6 +113,9 @@ export const AlertDefault: Story = {
     message: 'This is a default notification',
     type: 'alert',
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ step }) => {
     await step('Show default alert notification', async () => {
       await showNotification({
@@ -145,6 +148,9 @@ export const AlertSuccess: Story = {
     type: 'alert',
     style: 'success',
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ step }) => {
     await step('Show success alert notification', async () => {
       await showNotification({
@@ -174,6 +180,9 @@ export const AlertError: Story = {
     type: 'alert',
     style: 'error',
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ step }) => {
     await step('Show error alert notification', async () => {
       await showNotification({
@@ -202,6 +211,9 @@ export const ConfirmNotification: Story = {
     message: 'Are you sure you want to proceed?',
     type: 'confirm',
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ step }) => {
     await step('Show confirm notification', async () => {
       await showNotification({
@@ -244,6 +256,9 @@ export const PromptNotification: Story = {
     message: 'Enter your name:',
     type: 'prompt',
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ step }) => {
     await step('Show prompt notification', async () => {
       await showNotification({
@@ -282,6 +297,9 @@ export const WithHTMLContent: Story = {
     type: 'alert',
     style: 'success',
   },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
   play: async ({ step }) => {
     await step('Clean up and show notification with HTML', async () => {
       cleanupNotifications();
@@ -316,7 +334,7 @@ export const BounceInAnimation: Story = {
     type: 'alert',
   },
   parameters: {
-    chromatic: { disableSnapshot: true },
+    chromatic: { disableSnapshot: true, delay: 500 },
   },
   play: async ({ step }) => {
     await step('Show notification with bounce animation', async () => {

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(