@jackuait/blok 0.4.1-beta.4 → 0.4.1

package/dist/{index-XWGz4gev.mjs → index-CBkApZKo.mjs}

@@ -1,4 +1,4 @@
-import { t as f, a as i } from "./blok-B870U2fw.mjs";
+import { t as f, a as i } from "./blok-BwPfU8ro.mjs";
 const a = {
   wrapper: i(
     "fixed z-[2] bottom-5 left-5",

package/dist/vendor.LICENSE.txt

@@ -378,108 +378,6 @@ Apache License
 
 ---
 
-Name: react
-Version: 18.3.1
-License: MIT
-Private: false
-Description: React is a JavaScript library for building user interfaces.
-Repository: https://github.com/facebook/react.git
-Homepage: https://reactjs.org/
-License Copyright:
-===
-
-MIT License
-
-Copyright (c) Facebook, Inc. and its affiliates.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
----
-
-Name: react-dom
-Version: 18.3.1
-License: MIT
-Private: false
-Description: React package for working with the DOM.
-Repository: https://github.com/facebook/react.git
-Homepage: https://reactjs.org/
-License Copyright:
-===
-
-MIT License
-
-Copyright (c) Facebook, Inc. and its affiliates.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
----
-
-Name: scheduler
-Version: 0.23.2
-License: MIT
-Private: false
-Description: Cooperative scheduler for the browser environment.
-Repository: https://github.com/facebook/react.git
-Homepage: https://reactjs.org/
-License Copyright:
-===
-
-MIT License
-
-Copyright (c) Facebook, Inc. and its affiliates.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
----
-
 Name: sortablejs
 Version: 1.15.6
 License: MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jackuait/blok",
-  "version": "0.4.1-beta.4",
+  "version": "0.4.1",
   "description": "Blok — headless, highly extensible rich text editor built for developers who need to implement a block-based editing experience (similar to Notion) without building it from scratch",
   "main": "dist/blok.umd.js",
   "module": "dist/blok.mjs",
@@ -49,14 +49,15 @@
     "prepublishOnly": "yarn build",
     "prepare": "husky",
     "release": "./scripts/release.sh release",
-    "release:beta": "./scripts/release.sh prerelease beta",
     "release:alpha": "./scripts/release.sh prerelease alpha",
     "release:rc": "./scripts/release.sh prerelease rc",
     "release:dry": "./scripts/release.sh release beta true",
     "storybook": "storybook dev -p 6006 --no-open",
-    "storybook:build": "storybook build",
+    "storybook:build": "storybook build --stats-json",
     "storybook:test": "vitest --project=storybook --run",
-    "chromatic": "chromatic --exit-zero-on-changes"
+    "chromatic": "chromatic --exit-zero-on-changes",
+    "release:beta": "npm version prerelease --preid=beta",
+    "publish:beta": "npm publish --tag beta"
   },
   "author": "JackUait",
   "contributors": [
@@ -73,7 +74,6 @@
     "@chromatic-com/storybook": "4.1.3",
     "@commitlint/cli": "20.1.0",
     "@commitlint/config-conventional": "20.0.0",
-    "@eslint-react/eslint-plugin": "^2.3.12",
     "@playwright/test": "1.57.0",
     "@storybook/addon-a11y": "10.1.1",
     "@storybook/addon-vitest": "10.1.1",
@@ -81,8 +81,6 @@
     "@storybook/html-vite": "10.1.1",
     "@types/eslint-plugin-tailwindcss": "3",
     "@types/node": "22.19.0",
-    "@types/react": "18.3.1",
-    "@types/react-dom": "18.3.1",
     "@types/sortablejs": "1.15.9",
     "@vitest/browser-playwright": "4.0.14",
     "@vitest/coverage-v8": "4.0.14",
@@ -94,8 +92,6 @@
     "eslint-plugin-jest": "29.2.1",
     "eslint-plugin-jsdoc": "61.4.1",
     "eslint-plugin-playwright": "2.3.0",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-sonarjs": "3.0.5",
     "eslint-plugin-storybook": "10.1.1",
     "eslint-plugin-tailwindcss": "3.18.2",
@@ -120,8 +116,6 @@
   "dependencies": {
     "@types/lodash": "4.17.21",
     "lodash": "4.17.21",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
     "sortablejs": "1.15.6",
     "tailwind-merge": "3.4.0"
   }

package/types/api/styles.d.ts

@@ -1,10 +1,23 @@
+/**
+ * Style class names for tool styling.
+ * These are single CSS class names that can be safely used with element.classList.add().
+ * The actual styles are defined using Tailwind's @apply directive in the CSS.
+ *
+ * @example
+ * // Add styles to an element
+ * element.classList.add(api.styles.block);
+ *
+ * // Combine with other classes using tailwind-merge
+ * import { twMerge } from '@jackuait/blok/utils/tw';
+ * element.className = twMerge(api.styles.block, 'my-4 bg-gray-100');
+ */
 export interface Styles {
   /**
    * Base block styles - applied to block tool wrappers.
    * Provides vertical padding for consistent block spacing.
    * Includes placeholder styling via pseudo-element.
    *
-   * @example 'py-[theme(spacing.block-padding-vertical)] px-0 [&::-webkit-input-placeholder]:!leading-normal'
+   * @example 'blok-block'
    */
   block: string;
 
@@ -12,7 +25,7 @@ export interface Styles {
    * Styles for Inline Toolbar button.
    * Provides flexbox centering, transparent background, and proper sizing.
    *
-   * @example 'flex justify-center items-center border-0 rounded h-full p-0 w-7 bg-transparent cursor-pointer'
+   * @example 'blok-inline-tool-button'
    */
   inlineToolButton: string;
 
@@ -20,7 +33,7 @@ export interface Styles {
    * Styles for active Inline Toolbar button.
    * Apply alongside inlineToolButton when the tool is active.
    *
-   * @example 'bg-icon-active-bg text-icon-active-text'
+   * @example 'blok-inline-tool-button--active'
    */
   inlineToolButtonActive: string;
 
@@ -28,7 +41,7 @@ export interface Styles {
    * Styles for input elements.
    * Provides full width, border, padding, shadow, and Firefox placeholder workaround.
    *
-   * @example 'w-full rounded-[3px] border border-line-gray px-3 py-2.5 outline-none shadow-input'
+   * @example 'blok-input'
    */
   input: string;
 
@@ -36,7 +49,7 @@ export interface Styles {
    * Loader styles for loading states.
    * Provides relative positioning, border, and spinning animation.
    *
-   * @example 'relative border border-line-gray before:animate-rotation'
+   * @example 'blok-loader'
    */
   loader: string;
 
@@ -45,7 +58,7 @@ export interface Styles {
    * Provides flexbox centering, transparent background, minimum sizing,
    * mobile responsive sizing, and hover states.
    *
-   * @example 'inline-flex items-center justify-center rounded-[3px] cursor-pointer'
+   * @example 'blok-settings-button'
    */
   settingsButton: string;
 
@@ -53,7 +66,7 @@ export interface Styles {
    * Styles for active Settings box buttons.
    * Apply alongside settingsButton when the button is active.
    *
-   * @example 'text-active-icon'
+   * @example 'blok-settings-button--active'
    */
   settingsButtonActive: string;
 
@@ -61,7 +74,7 @@ export interface Styles {
    * Styles for focused Settings box buttons.
    * Apply alongside settingsButton when the button has focus.
    *
-   * @example 'shadow-button-focused bg-item-focus-bg'
+   * @example 'blok-settings-button--focused'
    */
   settingsButtonFocused: string;
 
@@ -69,7 +82,7 @@ export interface Styles {
    * Styles for focused Settings box buttons with animation.
    * Apply alongside settingsButton and settingsButtonFocused for click animation.
    *
-   * @example 'animate-button-clicked'
+   * @example 'blok-settings-button--focused-animated'
    */
   settingsButtonFocusedAnimated: string;
 
@@ -77,7 +90,12 @@ export interface Styles {
    * Styles for general buttons.
    * Provides padding, border, background, shadow, hover states, and SVG styling.
    *
-   * @example 'p-[13px] rounded-[3px] border border-line-gray text-[14.9px] bg-white'
+   * @example 'blok-button'
    */
   button: string;
 }
+
+/**
+ * @deprecated Use Styles instead
+ */
+export type StyleClasses = Styles;

package/types/configs/blok-config.d.ts

@@ -52,6 +52,14 @@ export interface BlokConfig {
    */
   historyDebounceTime?: number;
 
+  /**
+   * Enable document-level undo/redo shortcuts.
+   * When true, Cmd+Z / Ctrl+Z and Cmd+Shift+Z / Ctrl+Shift+Z work even when
+   * the editor is not focused (e.g., after dragging a block).
+   * @default true
+   */
+  globalUndoRedo?: boolean;
+
   /**
    * Map of Tools to use
    */

package/types/index.d.ts

@@ -144,6 +144,8 @@ export interface API {
 }
 
 import { HeaderConstructable } from './tools/header';
+import { ParagraphConstructable } from './tools/paragraph';
+import { ListConstructable } from './tools/list';
 
 /**
  * Main Blok class
@@ -156,6 +158,16 @@ declare class Blok {
    */
   public static Header: HeaderConstructable;
 
+  /**
+   * Paragraph tool bundled with Blok
+   */
+  public static Paragraph: ParagraphConstructable;
+
+  /**
+   * List tool bundled with Blok
+   */
+  public static List: ListConstructable;
+
   public isReady: Promise<void>;
 
   public blocks: Blocks;
@@ -217,4 +229,4 @@ declare class Blok {
 }
 
 export as namespace Blok;
-export default Blok;
+export default Blok;

package/types/tools/header.d.ts

@@ -11,6 +11,22 @@ export interface HeaderData extends BlockToolData {
   level: number;
 }
 
+/**
+ * Level-specific overrides for customization
+ */
+export interface HeaderLevelConfig {
+  /** Custom HTML tag to use (e.g., 'div', 'p', 'span') */
+  tag?: string;
+  /** Custom display name for this level */
+  name?: string;
+  /** Custom font size (e.g., '3em', '24px') */
+  size?: string;
+  /** Custom margin top (e.g., '20px', '1rem') */
+  marginTop?: string;
+  /** Custom margin bottom (e.g., '10px', '0.5rem') */
+  marginBottom?: string;
+}
+
 /**
  * Header Tool's configuration
  */
@@ -21,6 +37,8 @@ export interface HeaderConfig {
   levels?: number[];
   /** Default level */
   defaultLevel?: number;
+  /** Level-specific overrides keyed by level number (1-6) */
+  levelOverrides?: Record<number, HeaderLevelConfig>;
 }
 
 /**

package/types/tools/index.d.ts

@@ -12,6 +12,7 @@ export * from './paste-events';
 export * from './hook-events';
 export * from './menu-config';
 export * from './header';
+export * from './list';
 
 export type Tool = BlockTool | InlineTool | BlockTune;
 export type ToolConstructable = BlockToolConstructable | InlineToolConstructable | BlockTuneConstructable;

package/types/tools/list.d.ts

@@ -0,0 +1,84 @@
+import { BlockTool, BlockToolConstructable, BlockToolConstructorOptions, BlockToolData } from './block-tool';
+import { MenuConfig } from './menu-config';
+
+/**
+ * List styles enum
+ */
+export type ListStyle = 'unordered' | 'ordered' | 'checklist';
+
+/**
+ * Single list item data
+ */
+export interface ListItem {
+  /** Item content (can include HTML) */
+  content: string;
+  /** Checked state for checklist items */
+  checked?: boolean;
+  /** Nested items for indentation */
+  items?: ListItem[];
+}
+
+/**
+ * List Tool's input and output data format
+ */
+export interface ListData extends BlockToolData {
+  /** List style: unordered, ordered, or checklist */
+  style: ListStyle;
+  /** Array of list items */
+  items: ListItem[];
+}
+
+/**
+ * List Tool's configuration
+ */
+export interface ListConfig {
+  /** Default list style */
+  defaultStyle?: ListStyle;
+  /** Available list styles */
+  styles?: ListStyle[];
+  /** List styles to show in the toolbox */
+  toolboxStyles?: ListStyle[];
+  /** Custom color for list items */
+  itemColor?: string;
+  /** Custom font size for list items */
+  itemSize?: string;
+}
+
+/**
+ * List Tool for the Blok Editor
+ * Provides Ordered, Unordered, and Checklist Blocks
+ */
+export interface List extends BlockTool {
+  /**
+   * Return Tool's view
+   */
+  render(): HTMLElement;
+
+  /**
+   * Returns list block tunes config
+   */
+  renderSettings(): MenuConfig;
+
+  /**
+   * Method that specified how to merge two List blocks.
+   * Called by Editor by backspace at the beginning of the Block
+   */
+  merge(data: ListData): void;
+
+  /**
+   * Validate List block data
+   */
+  validate(blockData: ListData): boolean;
+
+  /**
+   * Extract Tool's data from the view
+   */
+  save(): ListData;
+}
+
+/**
+ * List Tool constructor
+ */
+export interface ListConstructable extends BlockToolConstructable {
+  new(config: BlockToolConstructorOptions<ListData, ListConfig>): List;
+}

package/types/tools/paragraph.d.ts

@@ -0,0 +1,71 @@
+import { BlockTool, BlockToolConstructable, BlockToolConstructorOptions, BlockToolData } from './block-tool';
+
+/**
+ * Paragraph Tool's input and output data format
+ */
+export interface ParagraphData extends BlockToolData {
+  /** Paragraph's content. Can include HTML tags: <a><b><i> */
+  text: string;
+}
+
+/**
+ * Style overrides for paragraph customization
+ */
+export interface ParagraphStyleConfig {
+  /** Custom font size (e.g., '16px', '1rem') */
+  size?: string;
+  /** Custom line height (e.g., '1.6', '24px') */
+  lineHeight?: string;
+  /** Custom margin top (e.g., '10px', '0.5rem') */
+  marginTop?: string;
+  /** Custom margin bottom (e.g., '10px', '0.5rem') */
+  marginBottom?: string;
+}
+
+/**
+ * Paragraph Tool's configuration
+ */
+export interface ParagraphConfig {
+  /** Placeholder for the empty paragraph */
+  placeholder?: string;
+  /** Whether or not to keep blank paragraphs when saving editor data */
+  preserveBlank?: boolean;
+  /** Style overrides for paragraph customization */
+  styles?: ParagraphStyleConfig;
+  /** Custom icon SVG string for the toolbox */
+  icon?: string;
+}
+
+/**
+ * Paragraph Tool for the Blok Editor
+ * Provides Text Block
+ */
+export interface Paragraph extends BlockTool {
+  /**
+   * Return Tool's view
+   */
+  render(): HTMLDivElement;
+
+  /**
+   * Method that specified how to merge two Paragraph blocks.
+   * Called by Editor by backspace at the beginning of the Block
+   */
+  merge(data: ParagraphData): void;
+
+  /**
+   * Validate Paragraph block data
+   */
+  validate(savedData: ParagraphData): boolean;
+
+  /**
+   * Extract Tool's data from the view
+   */
+  save(toolsContent: HTMLDivElement): ParagraphData;
+}
+
+/**
+ * Paragraph Tool constructor
+ */
+export interface ParagraphConstructable extends BlockToolConstructable {
+  new(config: BlockToolConstructorOptions<ParagraphData, ParagraphConfig>): Paragraph;
+}

package/types/tools/tool-settings.d.ts

@@ -24,7 +24,14 @@ export interface ToolboxConfigEntry {
   /**
    * May contain overrides for tool default data
    */
-  data?: BlockToolData
+  data?: BlockToolData;
+
+  /**
+   * Unique name for the toolbox entry, used for data-blok-item-name attribute.
+   * If not provided, falls back to the tool name.
+   * Useful when a tool has multiple toolbox entries (e.g., list with ordered/unordered/checklist variants).
+   */
+  name?: string;
 }
 
 /**

package/types/utils/popover/popover-item.d.ts

@@ -182,6 +182,12 @@ export interface PopoverItemDefaultBaseParams {
    */
   hint?: HintParams;
 
+  /**
+   * Custom data attributes to be added to the item element.
+   * Keys should be in camelCase (e.g., 'headerLevel' becomes 'data-header-level')
+   */
+  dataset?: Record<string, string>;
+
   /**
    * Popover item activation handler
    *