@jackuait/blok 0.4.1 → 0.4.2

package/src/stories/Selection.stories.ts

@@ -0,0 +1,250 @@
+import type { Meta, StoryObj } from '@storybook/html-vite';
+import { waitFor, expect } from 'storybook/test';
+import type { OutputData } from '@/types';
+import { createEditorContainer, simulateClick, waitForToolbar } from './helpers';
+import type { EditorFactoryOptions } from './helpers';
+
+interface SelectionArgs extends EditorFactoryOptions {
+  minHeight: number;
+  data: OutputData | undefined;
+}
+
+// Constants
+const BLOCK_TESTID = '[data-blok-testid="block-wrapper"]';
+const INLINE_TOOLBAR_TESTID = '[data-blok-testid="inline-toolbar"]';
+const INLINE_TOOL_INPUT_TESTID = '[data-blok-testid="inline-tool-input"]';
+const CONTENTEDITABLE_SELECTOR = '[contenteditable="true"]';
+const LINK_TOOL_SELECTOR = '[data-blok-item-name="link"]';
+
+const TIMEOUT_INIT = { timeout: 5000 };
+const TIMEOUT_ACTION = { timeout: 5000 };
+
+const multiLineData: OutputData = {
+  time: Date.now(),
+  version: '1.0.0',
+  blocks: [
+    {
+      id: 'multi-line-block',
+      type: 'paragraph',
+      data: {
+        text: 'This is the first line of text that spans multiple words. Here is the second sentence with more content. And finally a third sentence to make it longer.',
+      },
+    },
+  ],
+};
+
+const multiBlockData: OutputData = {
+  time: Date.now(),
+  version: '1.0.0',
+  blocks: [
+    {
+      id: 'block-1',
+      type: 'paragraph',
+      data: { text: 'First paragraph with some text to select from here.' },
+    },
+    {
+      id: 'block-2',
+      type: 'paragraph',
+      data: { text: 'Second paragraph continues the selection across blocks.' },
+    },
+    {
+      id: 'block-3',
+      type: 'paragraph',
+      data: { text: 'Third paragraph ends the cross-block selection here.' },
+    },
+  ],
+};
+
+const createEditor = (args: SelectionArgs): HTMLElement => createEditorContainer(args);
+
+const meta: Meta<SelectionArgs> = {
+  title: 'Components/Selection',
+  tags: ['autodocs'],
+  args: {
+    minHeight: 300,
+    data: multiLineData,
+  },
+  render: createEditor,
+};
+
+export default meta;
+
+
+type Story = StoryObj<SelectionArgs>;
+
+/**
+ * Selects text across multiple words/strings and opens the link input.
+ * This demonstrates the fake background selection behavior when focus moves to the link input.
+ */
+export const MultiStringSelectionWithLinkInput: Story = {
+  args: {
+    data: multiLineData,
+  },
+  play: async ({ canvasElement, step }) => {
+    await step('Wait for editor and toolbar to initialize', async () => {
+      await waitFor(
+        () => {
+          const block = canvasElement.querySelector(BLOCK_TESTID);
+
+          expect(block).toBeInTheDocument();
+        },
+        TIMEOUT_INIT
+      );
+      await waitForToolbar(canvasElement);
+    });
+
+    await step('Select text spanning multiple words', async () => {
+      const block = canvasElement.querySelector(BLOCK_TESTID);
+      const contentEditable = block?.querySelector(CONTENTEDITABLE_SELECTOR);
+
+      if (contentEditable) {
+        simulateClick(contentEditable);
+
+        const range = document.createRange();
+        const textNode = contentEditable.firstChild;
+
+        if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+          // Select "first line of text that spans multiple words" (characters 12-54)
+          range.setStart(textNode, 12);
+          range.setEnd(textNode, 54);
+        } else {
+          range.selectNodeContents(contentEditable);
+        }
+
+        const selection = window.getSelection();
+
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+
+        (contentEditable as HTMLElement).focus();
+        document.dispatchEvent(new Event('selectionchange'));
+      }
+
+      // Wait for debounced selection handler
+      await new Promise((resolve) => setTimeout(resolve, 300));
+
+      await waitFor(
+        () => {
+          const inlineToolbar = document.querySelector(INLINE_TOOLBAR_TESTID);
+
+          expect(inlineToolbar).toBeInTheDocument();
+        },
+        TIMEOUT_ACTION
+      );
+    });
+
+    await step('Click link tool to open input', async () => {
+      const linkTool = document.querySelector(LINK_TOOL_SELECTOR);
+
+      expect(linkTool).toBeInTheDocument();
+
+      if (linkTool) {
+        (linkTool as HTMLElement).click();
+      }
+
+      await waitFor(
+        () => {
+          const linkInput = document.querySelector(INLINE_TOOL_INPUT_TESTID);
+
+          expect(linkInput).toBeInTheDocument();
+
+          // Verify fake background is applied to maintain visual selection
+          const fakeBackground = document.querySelector('[data-blok-fake-background="true"]');
+
+          expect(fakeBackground).toBeInTheDocument();
+        },
+        TIMEOUT_ACTION
+      );
+    });
+  },
+};
+
+/**
+ * Selects text across multiple blocks/paragraphs and opens the link input.
+ * This demonstrates cross-block selection with fake background when focus moves to the link input.
+ */
+export const CrossBlockSelectionWithLinkInput: Story = {
+  args: {
+    data: multiBlockData,
+  },
+  play: async ({ canvasElement, step }) => {
+    await step('Wait for editor and toolbar to initialize', async () => {
+      await waitFor(
+        () => {
+          const blocks = canvasElement.querySelectorAll(BLOCK_TESTID);
+
+          expect(blocks.length).toBeGreaterThanOrEqual(3);
+        },
+        TIMEOUT_INIT
+      );
+      await waitForToolbar(canvasElement);
+    });
+
+    await step('Select text across multiple blocks', async () => {
+      const blocks = canvasElement.querySelectorAll(BLOCK_TESTID);
+      const firstBlock = blocks[0];
+      const lastBlock = blocks[2];
+
+      const firstContentEditable = firstBlock?.querySelector(CONTENTEDITABLE_SELECTOR);
+      const lastContentEditable = lastBlock?.querySelector(CONTENTEDITABLE_SELECTOR);
+
+      if (firstContentEditable && lastContentEditable) {
+        simulateClick(firstContentEditable);
+
+        const range = document.createRange();
+        const firstTextNode = firstContentEditable.firstChild;
+        const lastTextNode = lastContentEditable.firstChild;
+
+        if (firstTextNode && lastTextNode) {
+          // Select from "some text" in first block to "cross-block" in third block
+          range.setStart(firstTextNode, 22);
+          range.setEnd(lastTextNode, 35);
+        }
+
+        const selection = window.getSelection();
+
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+
+        (firstContentEditable as HTMLElement).focus();
+        document.dispatchEvent(new Event('selectionchange'));
+      }
+
+      // Wait for debounced selection handler
+      await new Promise((resolve) => setTimeout(resolve, 300));
+
+      await waitFor(
+        () => {
+          const inlineToolbar = document.querySelector(INLINE_TOOLBAR_TESTID);
+
+          expect(inlineToolbar).toBeInTheDocument();
+        },
+        TIMEOUT_ACTION
+      );
+    });
+
+    await step('Click link tool to open input', async () => {
+      const linkTool = document.querySelector(LINK_TOOL_SELECTOR);
+
+      expect(linkTool).toBeInTheDocument();
+
+      if (linkTool) {
+        (linkTool as HTMLElement).click();
+      }
+
+      await waitFor(
+        () => {
+          const linkInput = document.querySelector(INLINE_TOOL_INPUT_TESTID);
+
+          expect(linkInput).toBeInTheDocument();
+
+          // Verify fake background is applied to maintain visual selection across blocks
+          const fakeBackgrounds = document.querySelectorAll('[data-blok-fake-background="true"]');
+
+          expect(fakeBackgrounds.length).toBeGreaterThan(0);
+        },
+        TIMEOUT_ACTION
+      );
+    });
+  },
+};

package/src/stories/StubBlock.stories.ts

@@ -0,0 +1,156 @@
+/**
+ * StubBlock.stories.ts - Stories for stub block component.
+ *
+ * The stub block is displayed when a block's tool is not found/registered.
+ * It shows an error state with the tool name and preserves the original data.
+ */
+import type { Meta, StoryObj } from '@storybook/html-vite';
+import { waitFor, expect } from 'storybook/test';
+import type { OutputData } from '@/types';
+import { createEditorContainer } from './helpers';
+import type { EditorFactoryOptions } from './helpers';
+
+interface StubBlockArgs extends EditorFactoryOptions {
+  minHeight: number;
+  data: OutputData;
+}
+
+const TIMEOUT_INIT = { timeout: 5000 };
+
+/**
+ * Sample data with a block type that has no registered tool
+ */
+const stubBlockData: OutputData = {
+  time: Date.now(),
+  version: '1.0.0',
+  blocks: [
+    {
+      id: 'stub-block-1',
+      type: 'paragraph',
+      data: { text: 'This is a regular paragraph block.' },
+    },
+    {
+      id: 'stub-block-2',
+      type: 'unknownTool', // This tool doesn't exist - will show stub
+      data: { someData: 'preserved data for unknown tool' },
+    },
+    {
+      id: 'stub-block-3',
+      type: 'paragraph',
+      data: { text: 'Another regular paragraph after the stub.' },
+    },
+  ],
+};
+
+const createEditor = (args: StubBlockArgs): HTMLElement => createEditorContainer(args);
+
+const meta: Meta<StubBlockArgs> = {
+  title: 'Components/Stub Block',
+  tags: ['autodocs'],
+  args: {
+    minHeight: 300,
+    data: stubBlockData,
+  },
+  render: createEditor,
+};
+
+export default meta;
+
+
+type Story = StoryObj<StubBlockArgs>;
+
+/**
+ * Stub block shown when tool is not registered.
+ * Displays warning icon, tool name, and error message.
+ */
+export const MissingTool: Story = {
+  args: {
+    data: stubBlockData,
+  },
+  play: async ({ canvasElement, step }) => {
+    await step('Wait for stub block to render', async () => {
+      await waitFor(
+        () => {
+          // Look for the stub block by its data attribute
+          const stubBlock = canvasElement.querySelector('[data-blok-stub]');
+
+          expect(stubBlock).toBeTruthy();
+        },
+        TIMEOUT_INIT
+      );
+    });
+
+    await step('Verify stub block structure', async () => {
+      const stubBlock = canvasElement.querySelector('[data-blok-stub]');
+      const title = stubBlock?.querySelector('[data-blok-stub-title]');
+      const subtitle = stubBlock?.querySelector('[data-blok-stub-subtitle]');
+
+      expect(title).toBeTruthy();
+      expect(subtitle).toBeTruthy();
+    });
+  },
+};
+
+/**
+ * Multiple stub blocks for different missing tools.
+ */
+export const MultipleMissingTools: Story = {
+  args: {
+    data: {
+      time: Date.now(),
+      version: '1.0.0',
+      blocks: [
+        {
+          id: 'multi-stub-1',
+          type: 'customImage', // Missing tool
+          data: { url: 'https://example.com/image.jpg' },
+        },
+        {
+          id: 'multi-stub-2',
+          type: 'customVideo', // Missing tool
+          data: { videoId: 'abc123' },
+        },
+        {
+          id: 'multi-stub-3',
+          type: 'customEmbed', // Missing tool
+          data: { embedCode: '<iframe></iframe>' },
+        },
+      ],
+    },
+  },
+  play: async ({ canvasElement, step }) => {
+    await step('Wait for all stub blocks to render', async () => {
+      await waitFor(
+        () => {
+          // Count stub wrapper elements by data attribute
+          const stubWrappers = canvasElement.querySelectorAll('[data-blok-stub]');
+
+          expect(stubWrappers.length).toBe(3);
+        },
+        TIMEOUT_INIT
+      );
+    });
+  },
+};
+
+/**
+ * Stub block in read-only mode.
+ */
+export const StubInReadOnly: Story = {
+  args: {
+    data: stubBlockData,
+    readOnly: true,
+  },
+  play: async ({ canvasElement, step }) => {
+    await step('Wait for stub block in read-only mode', async () => {
+      await waitFor(
+        () => {
+          const stubBlock = canvasElement.querySelector('[data-blok-stub]');
+
+          expect(stubBlock).toBeTruthy();
+        },
+        TIMEOUT_INIT
+      );
+    });
+  },
+};

package/src/stories/Toolbar.stories.ts

@@ -0,0 +1,223 @@
+import type { Meta, StoryObj } from '@storybook/html-vite';
+import { userEvent, waitFor, expect } from 'storybook/test';
+import type { OutputData } from '@/types';
+import { createEditorContainer, simulateClick, waitForToolbar, TOOLBAR_TESTID } from './helpers';
+import type { EditorFactoryOptions } from './helpers';
+
+interface ToolbarArgs extends EditorFactoryOptions {
+  minHeight: number;
+  data: OutputData | undefined;
+}
+
+// Constants to avoid duplicate strings
+const BLOCK_TESTID = '[data-blok-testid="block-wrapper"]';
+const ACTIONS_TESTID = '[data-blok-testid="toolbar-actions"]';
+const PLUS_BUTTON_TESTID = '[data-blok-testid="plus-button"]';
+const SETTINGS_BUTTON_TESTID = '[data-blok-testid="settings-toggler"]';
+
+const TIMEOUT_INIT = { timeout: 5000 };
+const TIMEOUT_ACTION = { timeout: 5000 };
+
+const sampleData: OutputData = {
+  time: Date.now(),
+  version: '1.0.0',
+  blocks: [
+    {
+      id: 'toolbar-block-1',
+      type: 'paragraph',
+      data: { text: 'First paragraph block for toolbar testing.' },
+    },
+    {
+      id: 'toolbar-block-2',
+      type: 'paragraph',
+      data: { text: 'Second paragraph block.' },
+    },
+    {
+      id: 'toolbar-block-3',
+      type: 'paragraph',
+      data: { text: 'Third paragraph block.' },
+    },
+  ],
+};
+
+const createEditor = (args: ToolbarArgs): HTMLElement => createEditorContainer(args);
+
+const meta: Meta<ToolbarArgs> = {
+  title: 'Components/Toolbar',
+  tags: ['autodocs'],
+  args: {
+    minHeight: 300,
+    data: sampleData,
+  },
+  render: createEditor,
+};
+
+export default meta;
+
+
+type Story = StoryObj<ToolbarArgs>;
+
+/**
+ * Default state: Toolbar is hidden until a block is focused/hovered.
+ */
+export const Default: Story = {
+  args: {
+    data: sampleData,
+  },
+};
+
+/**
+ * Toolbar visible with actions zone shown when block is hovered.
+ */
+export const ToolbarVisible: Story = {
+  args: {
+    data: sampleData,
+  },
+  play: async ({ canvasElement, step }) => {
+    await step('Wait for editor and toolbar to initialize', async () => {
+      await waitFor(
+        () => {
+          const block = canvasElement.querySelector(BLOCK_TESTID);
+
+          expect(block).toBeInTheDocument();
+        },
+        TIMEOUT_INIT
+      );
+      // Wait for toolbar to be created (happens in requestIdleCallback)
+      await waitForToolbar(canvasElement);
+    });
+
+    await step('Click on a block to show toolbar', async () => {
+      const block = canvasElement.querySelector(BLOCK_TESTID);
+
+      if (block) {
+        simulateClick(block);
+      }
+
+      await waitFor(
+        () => {
+          const toolbar = canvasElement.querySelector(TOOLBAR_TESTID);
+
+          expect(toolbar).toBeInTheDocument();
+          expect(toolbar).toHaveAttribute('data-blok-opened', 'true');
+        },
+        TIMEOUT_ACTION
+      );
+    });
+
+    await step('Verify actions zone is visible', async () => {
+      await waitFor(
+        () => {
+          const actionsZone = canvasElement.querySelector(ACTIONS_TESTID);
+
+          expect(actionsZone).toBeInTheDocument();
+        },
+        TIMEOUT_ACTION
+      );
+    });
+  },
+};
+
+/**
+ * Plus button hover state.
+ */
+export const PlusButtonHover: Story = {
+  args: {
+    data: sampleData,
+  },
+  play: async ({ canvasElement, step }) => {
+    await step('Wait for editor and toolbar to initialize', async () => {
+      await waitFor(
+        () => {
+          const block = canvasElement.querySelector(BLOCK_TESTID);
+
+          expect(block).toBeInTheDocument();
+        },
+        TIMEOUT_INIT
+      );
+      // Wait for toolbar to be created (happens in requestIdleCallback)
+      await waitForToolbar(canvasElement);
+    });
+
+    await step('Click on block to show toolbar', async () => {
+      const block = canvasElement.querySelector(BLOCK_TESTID);
+
+      if (block) {
+        simulateClick(block);
+      }
+
+      await waitFor(
+        () => {
+          const toolbar = canvasElement.querySelector(TOOLBAR_TESTID);
+
+          expect(toolbar).toHaveAttribute('data-blok-opened', 'true');
+        },
+        TIMEOUT_ACTION
+      );
+    });
+
+    await step('Hover plus button', async () => {
+      const plusButton = canvasElement.querySelector(PLUS_BUTTON_TESTID);
+
+      if (plusButton) {
+        await userEvent.hover(plusButton);
+      }
+    });
+  },
+};
+
+/*
+ * NOTE: Toolbox opened state lives in EditorModes.stories.ts (ToolboxOpenedMode)
+ * Block tunes popover and delete confirmation live in Popover.stories.ts
+ * This file focuses on toolbar visibility, button states, and hover interactions.
+ */
+
+/**
+ * Settings button hover state (grab cursor).
+ */
+export const SettingsButtonHover: Story = {
+  args: {
+    data: sampleData,
+  },
+  play: async ({ canvasElement, step }) => {
+    await step('Wait for editor and toolbar to initialize', async () => {
+      await waitFor(
+        () => {
+          const block = canvasElement.querySelector(BLOCK_TESTID);
+
+          expect(block).toBeInTheDocument();
+        },
+        TIMEOUT_INIT
+      );
+      // Wait for toolbar to be created (happens in requestIdleCallback)
+      await waitForToolbar(canvasElement);
+    });
+
+    await step('Click on block to show toolbar', async () => {
+      const block = canvasElement.querySelector(BLOCK_TESTID);
+
+      if (block) {
+        simulateClick(block);
+      }
+
+      await waitFor(
+        () => {
+          const actionsZone = canvasElement.querySelector(ACTIONS_TESTID);
+
+          expect(actionsZone).toBeInTheDocument();
+        },
+        TIMEOUT_ACTION
+      );
+    });
+
+    await step('Hover settings button', async () => {
+      const settingsButton = canvasElement.querySelector(SETTINGS_BUTTON_TESTID);
+
+      if (settingsButton) {
+        await userEvent.hover(settingsButton);
+      }
+    });
+  },
+};
+
+