@jackuait/blok 0.4.1-beta.1 → 0.4.1-beta.11

package/src/env.d.ts

@@ -0,0 +1,13 @@
+interface ImportMetaEnv {
+  readonly MODE: "test" | "development" | "production";
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
+
+interface Window {
+  cPreview: {
+    show: (output: any, holder: Element) => void;
+  };
+}

package/src/full.ts

@@ -0,0 +1,69 @@
+/**
+ * @module Blok/Full
+ * Full bundle with Blok core + all built-in tools.
+ * Use this for batteries-included setup (same as pre-modularization behavior).
+ *
+ * @example
+ * import { Blok, defaultTools, defaultInlineTools } from '@jackuait/blok/full';
+ *
+ * new Blok({
+ *   holder: 'editor',
+ *   tools: defaultTools,
+ *   inlineTools: defaultInlineTools,
+ * });
+ */
+
+// Re-export everything from core
+export { Blok, version, DATA_ATTR } from './blok';
+
+// Re-export all tools
+export {
+  Paragraph,
+  Header,
+  List,
+  Bold,
+  Italic,
+  Link,
+  defaultBlockTools,
+  defaultInlineTools,
+} from './tools';
+
+// Import tools for defaultTools object
+import { Paragraph } from './tools/paragraph';
+import { Header } from './tools/header';
+import { ListItem as List } from './tools/list';
+import { BoldInlineTool as Bold } from './components/inline-tools/inline-tool-bold';
+import { ItalicInlineTool as Italic } from './components/inline-tools/inline-tool-italic';
+import { LinkInlineTool as Link } from './components/inline-tools/inline-tool-link';
+
+/**
+ * Default tools configuration matching pre-modularization behavior.
+ * Includes Paragraph, Header, and List with inline toolbar enabled.
+ */
+export const defaultTools = {
+  paragraph: {
+    class: Paragraph,
+    inlineToolbar: true,
+    config: { preserveBlank: true },
+  },
+  header: {
+    class: Header,
+    inlineToolbar: true,
+  },
+  list: {
+    class: List,
+    inlineToolbar: true,
+  },
+} as const;
+
+/**
+ * All built-in tools including inline tools.
+ * For users who want every tool available.
+ * Note: Convert and Delete are internal tools and don't need to be configured.
+ */
+export const allTools = {
+  ...defaultTools,
+  bold: { class: Bold },
+  italic: { class: Italic },
+  link: { class: Link },
+} as const;

package/src/locales.ts

@@ -0,0 +1,51 @@
+/**
+ * Public entry point for locale imports.
+ *
+ * Lazy Loading:
+ * Only English is bundled by default. All 68 supported locales are available
+ * for on-demand loading, reducing initial bundle size while providing full
+ * language support.
+ *
+ * @example
+ * // Load a single locale on-demand
+ * import { loadLocale } from '@aspect/blok/locales';
+ * const frConfig = await loadLocale('fr');
+ *
+ * @example
+ * // Get all supported locale codes
+ * import { ALL_LOCALE_CODES } from '@aspect/blok/locales';
+ * console.log(ALL_LOCALE_CODES); // Array of all 68 locale codes
+ *
+ * @see README.md#localization for usage examples
+ */
+
+// ============================================================================
+// Constants and utilities
+// ============================================================================
+
+export {
+  // Constants
+  DEFAULT_LOCALE,
+  ALL_LOCALE_CODES,
+
+  // English locale (always bundled)
+  enLocale,
+
+  // Lazy loading functions
+  loadLocale,
+  preloadLocales,
+  buildRegistry,
+  getLocaleSync,
+
+  // Direction utilities
+  getDirection,
+
+  // Testing utilities
+  clearLocaleCache,
+} from './components/i18n/locales';
+
+// ============================================================================
+// Re-export types
+// ============================================================================
+
+export type { LocaleConfig, LocaleRegistry, SupportedLocale } from '../types/configs/i18n-config';

package/src/stories/Block.stories.ts

@@ -0,0 +1,498 @@
+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, triggerSelectAll } from './helpers';
+import type { EditorFactoryOptions } from './helpers';
+
+interface BlockArgs extends EditorFactoryOptions {
+  minHeight: number;
+  data: OutputData | undefined;
+  readOnly: boolean;
+}
+
+// Constants
+const BLOCK_TESTID = '[data-blok-testid="block-wrapper"]';
+const CONTENTEDITABLE_SELECTOR = '[contenteditable="true"]';
+const BLOCK_SELECTED_SELECTOR = '[data-blok-selected="true"]';
+
+const TIMEOUT_INIT = { timeout: 5000 };
+const TIMEOUT_ACTION = { timeout: 5000 };
+
+const sampleData: OutputData = {
+  time: Date.now(),
+  version: '1.0.0',
+  blocks: [
+    {
+      id: 'block-state-1',
+      type: 'paragraph',
+      data: { text: 'First block for testing block states.' },
+    },
+    {
+      id: 'block-state-2',
+      type: 'paragraph',
+      data: { text: 'Second block with different content.' },
+    },
+    {
+      id: 'block-state-3',
+      type: 'paragraph',
+      data: { text: 'Third block for multi-select testing.' },
+    },
+  ],
+};
+
+const createEditor = (args: BlockArgs): HTMLElement => createEditorContainer(args);
+
+const meta: Meta<BlockArgs> = {
+  title: 'Components/Block',
+  tags: ['autodocs'],
+  args: {
+    minHeight: 300,
+    data: sampleData,
+    readOnly: false,
+  },
+  render: createEditor,
+};
+
+export default meta;
+
+
+type Story = StoryObj<BlockArgs>;
+
+/**
+ * Default state: Blocks displayed without selection.
+ */
+export const Default: Story = {
+  args: {
+    data: sampleData,
+    readOnly: false,
+  },
+};
+
+/**
+ * Block focused state with cursor inside.
+ */
+export const Focused: Story = {
+  args: {
+    data: sampleData,
+    readOnly: false,
+  },
+  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 block to focus', async () => {
+      const block = canvasElement.querySelector(BLOCK_TESTID);
+      const contentEditable = block?.querySelector(CONTENTEDITABLE_SELECTOR);
+
+      if (contentEditable) {
+        simulateClick(contentEditable);
+      }
+
+      await waitFor(
+        () => {
+          const toolbar = canvasElement.querySelector(TOOLBAR_TESTID);
+
+          expect(toolbar).toHaveAttribute('data-blok-opened', 'true');
+        },
+        TIMEOUT_ACTION
+      );
+    });
+  },
+};
+
+/**
+ * Block selected state (cross-block selection visual).
+ */
+export const SelectedByShortcut: Story = {
+  args: {
+    data: sampleData,
+    readOnly: false,
+  },
+  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).toBeGreaterThan(0);
+        },
+        TIMEOUT_INIT
+      );
+      // Wait for toolbar to be created (happens in requestIdleCallback)
+      await waitForToolbar(canvasElement);
+    });
+
+    await step('Click block to focus', async () => {
+      const block = canvasElement.querySelector(BLOCK_TESTID);
+      const contentEditable = block?.querySelector(CONTENTEDITABLE_SELECTOR);
+
+      if (contentEditable) {
+        simulateClick(contentEditable);
+        // Wait a bit for focus to be established
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      }
+    });
+
+    await step('Select all blocks with keyboard shortcut', async () => {
+      const block = canvasElement.querySelector(BLOCK_TESTID);
+      const contentEditable = block?.querySelector(CONTENTEDITABLE_SELECTOR);
+
+      if (contentEditable) {
+        // First select-all selects text within the block
+        triggerSelectAll(contentEditable);
+        // Short delay to let the first selection happen
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        // Second select-all selects all blocks (cross-block selection)
+        triggerSelectAll(contentEditable);
+      }
+
+      await waitFor(
+        () => {
+          const selectedBlocks = canvasElement.querySelectorAll(BLOCK_SELECTED_SELECTOR);
+
+          expect(selectedBlocks.length).toBeGreaterThan(0);
+        },
+        TIMEOUT_ACTION
+      );
+    });
+  },
+};
+
+/**
+ * Multiple blocks selected.
+ */
+export const MultipleSelected: Story = {
+  args: {
+    data: sampleData,
+    readOnly: false,
+  },
+  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).toBeGreaterThan(2);
+        },
+        TIMEOUT_INIT
+      );
+      // Wait for toolbar to be created (happens in requestIdleCallback)
+      await waitForToolbar(canvasElement);
+    });
+
+    await step('Focus first block', async () => {
+      const firstBlock = canvasElement.querySelector(BLOCK_TESTID);
+      const contentEditable = firstBlock?.querySelector(CONTENTEDITABLE_SELECTOR);
+
+      if (contentEditable) {
+        simulateClick(contentEditable);
+        // Wait a bit for focus to be established
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      }
+    });
+
+    await step('Select all to trigger multi-block selection', async () => {
+      const firstBlock = canvasElement.querySelector(BLOCK_TESTID);
+      const contentEditable = firstBlock?.querySelector(CONTENTEDITABLE_SELECTOR);
+
+      if (contentEditable) {
+        // First select-all selects text within the block
+        triggerSelectAll(contentEditable);
+        // Short delay to let the first selection happen
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        // Second select-all selects all blocks (cross-block selection)
+        triggerSelectAll(contentEditable);
+      }
+
+      await waitFor(
+        () => {
+          const selectedBlocks = canvasElement.querySelectorAll(BLOCK_SELECTED_SELECTOR);
+
+          expect(selectedBlocks.length).toBeGreaterThanOrEqual(3);
+        },
+        TIMEOUT_ACTION
+      );
+    });
+  },
+};
+
+/**
+ * Block with selection highlight (text selection within block).
+ */
+export const WithTextSelection: Story = {
+  args: {
+    data: sampleData,
+    readOnly: false,
+  },
+  play: async ({ canvasElement, step }) => {
+    await step('Wait for editor to initialize', async () => {
+      await waitFor(
+        () => {
+          const block = canvasElement.querySelector(BLOCK_TESTID);
+
+          expect(block).toBeInTheDocument();
+        },
+        TIMEOUT_INIT
+      );
+    });
+
+    await step('Select text within block', async () => {
+      const block = canvasElement.querySelector(BLOCK_TESTID);
+      const contentEditable = block?.querySelector(CONTENTEDITABLE_SELECTOR);
+
+      if (contentEditable) {
+        await userEvent.click(contentEditable);
+        await userEvent.tripleClick(contentEditable);
+      }
+
+      const selection = window.getSelection();
+
+      expect(selection?.toString().length).toBeGreaterThan(0);
+    });
+  },
+};
+
+/**
+ * Block in read-only mode.
+ */
+export const ReadOnly: Story = {
+  args: {
+    data: sampleData,
+    readOnly: true,
+  },
+};
+
+/**
+ * Block link hover state.
+ */
+export const LinkInBlock: Story = {
+  args: {
+    data: {
+      time: Date.now(),
+      version: '1.0.0',
+      blocks: [
+        {
+          id: 'link-block-1',
+          type: 'paragraph',
+          data: { text: 'This block contains a <a href="https://example.com">clickable link</a> to test hover states.' },
+        },
+      ],
+    },
+    readOnly: false,
+  },
+  play: async ({ canvasElement, step }) => {
+    await step('Wait for editor to initialize', async () => {
+      await waitFor(
+        () => {
+          const link = canvasElement.querySelector('a');
+
+          expect(link).toBeInTheDocument();
+        },
+        TIMEOUT_INIT
+      );
+    });
+
+    await step('Hover over link', async () => {
+      const link = canvasElement.querySelector('a');
+
+      if (link) {
+        await userEvent.hover(link);
+      }
+    });
+  },
+};
+
+/**
+ * Block with bold and italic text.
+ */
+export const WithFormattedText: Story = {
+  args: {
+    data: {
+      time: Date.now(),
+      version: '1.0.0',
+      blocks: [
+        {
+          id: 'formatted-block-1',
+          type: 'paragraph',
+          data: { text: 'This text has <b>bold</b>, <i>italic</i>, and <b><i>bold italic</i></b> formatting.' },
+        },
+      ],
+    },
+    readOnly: false,
+  },
+};
+
+/**
+ * Block fade-in animation on creation.
+ */
+export const NewBlockAnimation: Story = {
+  args: {
+    data: sampleData,
+    readOnly: false,
+  },
+  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('Focus last block and press Enter to create new block', async () => {
+      const blocks = canvasElement.querySelectorAll(BLOCK_TESTID);
+      const initialBlockCount = blocks.length;
+      const lastBlock = blocks[blocks.length - 1];
+      const contentEditable = lastBlock?.querySelector(CONTENTEDITABLE_SELECTOR);
+
+      if (contentEditable) {
+        simulateClick(contentEditable);
+        // Wait a bit for focus to be established
+        await new Promise((resolve) => setTimeout(resolve, 100));
+
+        const selection = window.getSelection();
+        const range = document.createRange();
+
+        range.selectNodeContents(contentEditable);
+        range.collapse(false);
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+
+        await userEvent.keyboard('{Enter}');
+      }
+
+      await waitFor(
+        () => {
+          const newBlocks = canvasElement.querySelectorAll(BLOCK_TESTID);
+
+          expect(newBlocks.length).toBeGreaterThan(initialBlockCount);
+        },
+        TIMEOUT_ACTION
+      );
+    });
+  },
+};
+
+/**
+ * Stretched block - full-width block layout.
+ * This state is shown when a block is configured to stretch to full width.
+ */
+export const StretchedBlock: Story = {
+  args: {
+    data: {
+      time: Date.now(),
+      version: '1.0.0',
+      blocks: [
+        {
+          id: 'normal-block-1',
+          type: 'paragraph',
+          data: { text: 'This is a normal width paragraph block.' },
+        },
+        {
+          id: 'stretched-block-1',
+          type: 'paragraph',
+          data: { text: 'This block has the stretched class applied to demonstrate full-width layout.' },
+        },
+        {
+          id: 'normal-block-2',
+          type: 'paragraph',
+          data: { text: 'Another normal width paragraph for comparison.' },
+        },
+      ],
+    },
+    readOnly: false,
+  },
+  play: async ({ canvasElement, step }) => {
+    await step('Wait for editor to initialize', async () => {
+      await waitFor(
+        () => {
+          const blocks = canvasElement.querySelectorAll(BLOCK_TESTID);
+
+          expect(blocks.length).toBe(3);
+        },
+        TIMEOUT_INIT
+      );
+    });
+
+    await step('Apply stretched state to middle block', async () => {
+      const blocks = canvasElement.querySelectorAll(BLOCK_TESTID);
+      const middleBlock = blocks[1];
+
+      if (middleBlock) {
+        middleBlock.setAttribute('data-blok-stretched', 'true');
+      }
+
+      await waitFor(
+        () => {
+          const stretchedBlock = canvasElement.querySelector('[data-blok-stretched="true"]');
+
+          expect(stretchedBlock).toBeInTheDocument();
+        },
+        TIMEOUT_ACTION
+      );
+    });
+  },
+};
+
+/**
+ * Block in navigation mode - keyboard-based block navigation.
+ * Activated by pressing Escape when focus is in the editor.
+ * Use arrow keys to navigate between blocks, Enter to edit.
+ */
+export const NavigationMode: Story = {
+  args: {
+    data: sampleData,
+    readOnly: false,
+  },
+  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).toBeGreaterThan(0);
+        },
+        TIMEOUT_INIT
+      );
+      await waitForToolbar(canvasElement);
+    });
+
+    await step('Focus first block', async () => {
+      const block = canvasElement.querySelector(BLOCK_TESTID);
+      const contentEditable = block?.querySelector(CONTENTEDITABLE_SELECTOR);
+
+      if (contentEditable) {
+        simulateClick(contentEditable);
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      }
+    });
+
+    await step('Enable navigation mode by pressing Escape', async () => {
+      await userEvent.keyboard('{Escape}');
+
+      await waitFor(
+        () => {
+          const navigationFocusedBlock = canvasElement.querySelector('[data-blok-navigation-focused="true"]');
+
+          expect(navigationFocusedBlock).toBeInTheDocument();
+        },
+        TIMEOUT_ACTION
+      );
+    });
+  },
+};