@veevarts/design-system 0.1.17 → 0.1.18

package/dist/patterns/RichText/toolbar/hooks/useToolbarCommands.d.ts

@@ -0,0 +1,14 @@
+import { Editor } from '@tiptap/react';
+import { ModifierType, ModifierConfig } from '../../types';
+/**
+ * Hook to execute toolbar commands
+ *
+ * @param editor - TipTap editor instance
+ * @returns Command execution functions
+ */
+export declare function useToolbarCommands(editor: Editor | null): {
+    executeCommand: (modifierType: ModifierType, config?: ModifierConfig) => void;
+    toggleModifier: (modifierType: ModifierType) => void;
+    canExecute: (modifierType: ModifierType, config?: ModifierConfig) => boolean;
+    isActive: (modifierType: ModifierType, config?: ModifierConfig) => boolean;
+};

package/dist/patterns/RichText/toolbar/hooks/useToolbarState.d.ts

@@ -0,0 +1,14 @@
+import { Editor } from '@tiptap/react';
+import { ModifierIdentifier, ModifierType, ToolbarState } from '../../types';
+/**
+ * Hook to manage toolbar state for all modifiers
+ *
+ * @param editor - TipTap editor instance
+ * @param modifiers - Array of active modifiers
+ * @returns Toolbar state object with button states
+ */
+export declare function useToolbarState(editor: Editor | null, modifiers: ModifierIdentifier[]): Partial<ToolbarState>;
+/**
+ * Get state for a specific modifier
+ */
+export declare function getModifierState(toolbarState: Partial<ToolbarState>, modifierType: ModifierType): import('../../types').ToolbarButtonState;

package/dist/patterns/RichText/toolbar/hooks/useZoomState.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Rich Text Editor - Zoom State Hook
+ *
+ * Manages zoom level state independently of editor content.
+ */
+/**
+ * Hook to manage zoom state
+ *
+ * @param initialZoom - Initial zoom percentage
+ * @returns Zoom state and setters
+ */
+export declare function useZoomState(initialZoom?: number): {
+    zoom: number;
+    setZoom: (newZoom: number) => void;
+    zoomIn: (step?: number) => void;
+    zoomOut: (step?: number) => void;
+    resetZoom: () => void;
+    isMinZoom: boolean;
+    isMaxZoom: boolean;
+    isDefaultZoom: boolean;
+};

package/dist/patterns/RichText/toolbar/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Rich Text Editor - Toolbar Exports
+ */
+export { Toolbar } from './Toolbar';
+export type { ToolbarProps } from './Toolbar';
+export { ToolbarDivider } from './ToolbarDivider';
+export type { ToolbarDividerProps } from './ToolbarDivider';
+export { ToolbarSection } from './ToolbarSection';
+export type { ToolbarSectionProps } from './ToolbarSection';
+export * from './components';
+export * from './hooks';
+export * from './sections/TextFormattingSection';

package/dist/patterns/RichText/toolbar/sections/TextFormattingSection.d.ts

@@ -0,0 +1,7 @@
+import { Editor } from '@tiptap/react';
+import { ModifierIdentifier } from '../../types';
+export interface TextFormattingSectionProps {
+    editor: Editor | null;
+    modifiers: ModifierIdentifier[];
+}
+export declare function TextFormattingSection({ editor, modifiers }: TextFormattingSectionProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/patterns/RichText/types/commands.d.ts

@@ -0,0 +1,68 @@
+import { Editor } from '@tiptap/react';
+import { ModifierConfig, ModifierType } from './modifiers';
+/**
+ * Command execution context
+ * Provides editor instance and optional configuration
+ */
+export interface CommandContext {
+    editor: Editor;
+    config?: ModifierConfig;
+}
+/**
+ * Command function signature
+ * Takes a context and executes a command on the editor
+ */
+export type CommandFunction = (context: CommandContext) => void;
+/**
+ * Command check function signature
+ * Returns whether a command can be executed or is active
+ */
+export type CommandCheckFunction = (editor: Editor, config?: ModifierConfig) => boolean;
+/**
+ * Complete command definition
+ * Includes execution, availability check, and active state check
+ */
+export interface CommandDefinition {
+    /**
+     * Execute the command
+     */
+    execute: CommandFunction;
+    /**
+     * Check if command can be executed
+     * Returns false if command is disabled
+     */
+    canExecute?: CommandCheckFunction;
+    /**
+     * Check if command is currently active
+     * Used for button highlighting in toolbar
+     */
+    isActive?: CommandCheckFunction;
+    /**
+     * Optional keyboard shortcut
+     */
+    shortcut?: string;
+    /**
+     * Optional command label
+     */
+    label?: string;
+}
+/**
+ * Command registry mapping modifier types to their command definitions
+ */
+export type CommandRegistry = {
+    [K in ModifierType]?: CommandDefinition;
+};
+/**
+ * Command execution result
+ */
+export interface CommandResult {
+    success: boolean;
+    error?: string;
+}
+/**
+ * Command state for a specific modifier
+ */
+export interface CommandState {
+    canExecute: boolean;
+    isActive: boolean;
+}

package/dist/patterns/RichText/types/extensions.d.ts

@@ -0,0 +1,71 @@
+import { Extension, Mark, Node } from '@tiptap/core';
+import { ModifierType } from './modifiers';
+/**
+ * Extension category
+ * Determines how the extension integrates with the editor
+ */
+export type ExtensionCategory = 'node' | 'mark' | 'extension';
+/**
+ * Extension configuration
+ * Defines how a modifier maps to a TipTap extension
+ */
+export interface ExtensionConfig<TOptions = any> {
+    /**
+     * Extension category
+     */
+    category: ExtensionCategory;
+    /**
+     * TipTap extension class or instance
+     */
+    extension: Node | Mark | Extension;
+    /**
+     * Default options for the extension
+     */
+    defaultOptions?: TOptions;
+    /**
+     * Required extensions that must be loaded alongside this one
+     * (e.g., 'textColor' requires 'textStyle')
+     */
+    requiredExtensions?: ModifierType[];
+    /**
+     * Optional dependencies (extensions that enhance this one but aren't required)
+     */
+    optionalExtensions?: ModifierType[];
+    /**
+     * Priority order for loading (higher loads first)
+     * @default 100
+     */
+    priority?: number;
+}
+/**
+ * Extension registry map
+ * Maps modifier types to their extension configurations
+ */
+export type ExtensionRegistry = {
+    [K in ModifierType]?: ExtensionConfig;
+};
+/**
+ * Extension factory function
+ * Creates an array of TipTap extensions from modifier identifiers
+ */
+export type ExtensionFactory = (modifiers: ModifierType[]) => Array<Node | Mark | Extension>;
+/**
+ * Extension load result
+ */
+export interface ExtensionLoadResult {
+    /**
+     * Successfully loaded extensions
+     */
+    loaded: ModifierType[];
+    /**
+     * Extensions that failed to load
+     */
+    failed: Array<{
+        modifier: ModifierType;
+        error: string;
+    }>;
+    /**
+     * Extensions that were automatically added as dependencies
+     */
+    dependencies: ModifierType[];
+}

package/dist/patterns/RichText/types/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Rich Text Editor - Type System Exports
+ *
+ * Centralized exports for all type definitions.
+ */
+export type { BlockNodeType, InlineMarkType, UtilityModifierType, ModifierType, HeadingLevel, TextAlignment, HeadingModifier, TextAlignModifier, TextColorModifier, HighlightModifier, LinkModifier, SimpleModifier, ModifierConfig, ModifierIdentifier, } from './modifiers';
+export { isHeadingModifier, isTextAlignModifier, isTextColorModifier, isHighlightModifier, isLinkModifier, getModifierType, isSameModifierType, } from './modifiers';
+export type { ParagraphNode, HeadingNode, BulletListNode, OrderedListNode, TaskListNode, CodeBlockNode, BlockquoteNode, HorizontalRuleNode, BlockNode, BlockNodeMap, GetBlockNode, } from './nodes';
+export type { BoldMark, ItalicMark, StrikeMark, UnderlineMark, CodeMark, TextColorMark, HighlightMark, LinkMark, InlineMark, InlineMarkMap, GetInlineMark, MarkAttributes, } from './marks';
+export type { CommandContext, CommandFunction, CommandCheckFunction, CommandDefinition, CommandRegistry, CommandResult, CommandState, } from './commands';
+export type { ToolbarSectionConfig, ToolbarConfig, ToolbarButtonState, ToolbarState, ToolbarPreset, ToolbarSectionId, } from './toolbar';
+export { TOOLBAR_SECTION_IDS } from './toolbar';
+export type { ExtensionCategory, ExtensionConfig, ExtensionRegistry, ExtensionFactory, ExtensionLoadResult, } from './extensions';
+export type { EditorContentProps, EditorCounterProps, EditorContent, RichTextAreaProps, TipTapEditorProps, } from './props';

package/dist/patterns/RichText/types/marks.d.ts

@@ -0,0 +1,86 @@
+import { InlineMarkType } from './modifiers';
+/**
+ * Bold mark configuration
+ */
+export interface BoldMark {
+    type: 'bold';
+}
+/**
+ * Italic mark configuration
+ */
+export interface ItalicMark {
+    type: 'italic';
+}
+/**
+ * Strike mark configuration
+ */
+export interface StrikeMark {
+    type: 'strike';
+}
+/**
+ * Underline mark configuration
+ */
+export interface UnderlineMark {
+    type: 'underline';
+}
+/**
+ * Inline code mark configuration
+ */
+export interface CodeMark {
+    type: 'code';
+}
+/**
+ * Text color mark configuration
+ */
+export interface TextColorMark {
+    type: 'textColor';
+    attrs: {
+        color: string;
+    };
+}
+/**
+ * Highlight/background color mark configuration
+ */
+export interface HighlightMark {
+    type: 'highlight';
+    attrs: {
+        color: string;
+    };
+}
+/**
+ * Link mark configuration
+ */
+export interface LinkMark {
+    type: 'link';
+    attrs: {
+        href: string;
+        target?: '_blank' | '_self';
+        rel?: string;
+        class?: string;
+    };
+}
+/**
+ * Union of all inline mark types
+ */
+export type InlineMark = BoldMark | ItalicMark | StrikeMark | UnderlineMark | CodeMark | TextColorMark | HighlightMark | LinkMark;
+/**
+ * Map of inline mark type to its configuration
+ */
+export type InlineMarkMap = {
+    bold: BoldMark;
+    italic: ItalicMark;
+    strike: StrikeMark;
+    underline: UnderlineMark;
+    code: CodeMark;
+    textColor: TextColorMark;
+    highlight: HighlightMark;
+    link: LinkMark;
+};
+/**
+ * Extract mark configuration by type
+ */
+export type GetInlineMark<T extends InlineMarkType> = InlineMarkMap[T];
+/**
+ * Mark attributes by type
+ */
+export type MarkAttributes<T extends InlineMarkType> = T extends 'textColor' ? TextColorMark['attrs'] : T extends 'highlight' ? HighlightMark['attrs'] : T extends 'link' ? LinkMark['attrs'] : never;

package/dist/patterns/RichText/types/modifiers.d.ts

@@ -0,0 +1,125 @@
+/**
+ * Rich Text Editor - Type-Safe Modifier System
+ *
+ * This file defines the core type system for the RichText editor,
+ * implementing strict separation between:
+ * - Block-level nodes (Nodos): Document structure elements
+ * - Inline-level marks (Marcas): Text formatting elements
+ * - Utility modifiers: Editor actions and behaviors
+ */
+/**
+ * Block-level node types (Nodos)
+ * These define document structure and cannot be arbitrarily nested
+ */
+export type BlockNodeType = 'paragraph' | 'heading' | 'bulletList' | 'orderedList' | 'taskList' | 'codeBlock' | 'blockquote' | 'horizontalRule';
+/**
+ * Inline-level mark types (Marcas)
+ * These can be combined and applied to text content
+ */
+export type InlineMarkType = 'bold' | 'italic' | 'strike' | 'underline' | 'code' | 'textColor' | 'highlight' | 'link';
+/**
+ * Utility modifier types
+ * Actions that modify editor state or behavior
+ */
+export type UtilityModifierType = 'clearMarks' | 'clearNodes' | 'undo' | 'redo' | 'hardBreak' | 'textAlign';
+/**
+ * All possible modifier types
+ */
+export type ModifierType = BlockNodeType | InlineMarkType | UtilityModifierType;
+/**
+ * Heading levels (H1-H6)
+ */
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+/**
+ * Text alignment options
+ */
+export type TextAlignment = 'left' | 'center' | 'right' | 'justify';
+/**
+ * Heading modifier with level specification
+ */
+export interface HeadingModifier {
+    type: 'heading';
+    level: HeadingLevel;
+}
+/**
+ * Text alignment modifier
+ */
+export interface TextAlignModifier {
+    type: 'textAlign';
+    alignment: TextAlignment;
+}
+/**
+ * Text color modifier
+ */
+export interface TextColorModifier {
+    type: 'textColor';
+    color: string;
+}
+/**
+ * Highlight/background color modifier
+ */
+export interface HighlightModifier {
+    type: 'highlight';
+    color: string;
+}
+/**
+ * Link modifier with URL and optional attributes
+ */
+export interface LinkModifier {
+    type: 'link';
+    href: string;
+    target?: '_blank' | '_self';
+    rel?: string;
+}
+/**
+ * Simple modifier (no additional configuration needed)
+ */
+export interface SimpleModifier {
+    type: Exclude<ModifierType, 'heading' | 'textAlign' | 'textColor' | 'highlight' | 'link'>;
+}
+/**
+ * Discriminated union of all modifier configurations
+ * This ensures type safety when working with modifiers that need configuration
+ */
+export type ModifierConfig = HeadingModifier | TextAlignModifier | TextColorModifier | HighlightModifier | LinkModifier | SimpleModifier;
+/**
+ * Modifier identifier - allows both simple strings and complex configurations
+ * This is the main type used in the component API
+ *
+ * @example
+ * // Simple string modifier
+ * 'bold'
+ *
+ * @example
+ * // Complex modifier with configuration
+ * { type: 'heading', level: 2 }
+ */
+export type ModifierIdentifier = ModifierType | ModifierConfig;
+/**
+ * Type guard to check if a modifier is a heading
+ */
+export declare function isHeadingModifier(modifier: ModifierIdentifier): modifier is HeadingModifier;
+/**
+ * Type guard to check if a modifier is text alignment
+ */
+export declare function isTextAlignModifier(modifier: ModifierIdentifier): modifier is TextAlignModifier;
+/**
+ * Type guard to check if a modifier is text color
+ */
+export declare function isTextColorModifier(modifier: ModifierIdentifier): modifier is TextColorModifier;
+/**
+ * Type guard to check if a modifier is highlight
+ */
+export declare function isHighlightModifier(modifier: ModifierIdentifier): modifier is HighlightModifier;
+/**
+ * Type guard to check if a modifier is a link
+ */
+export declare function isLinkModifier(modifier: ModifierIdentifier): modifier is LinkModifier;
+/**
+ * Extract the modifier type from a ModifierIdentifier
+ */
+export declare function getModifierType(modifier: ModifierIdentifier): ModifierType;
+/**
+ * Check if two modifiers are the same type
+ */
+export declare function isSameModifierType(a: ModifierIdentifier, b: ModifierIdentifier): boolean;

package/dist/patterns/RichText/types/nodes.d.ts

@@ -0,0 +1,80 @@
+import { BlockNodeType } from './modifiers';
+/**
+ * Paragraph node configuration
+ */
+export interface ParagraphNode {
+    type: 'paragraph';
+}
+/**
+ * Heading node configuration
+ */
+export interface HeadingNode {
+    type: 'heading';
+    attrs: {
+        level: 1 | 2 | 3 | 4 | 5 | 6;
+        textAlign?: 'left' | 'center' | 'right' | 'justify';
+    };
+}
+/**
+ * Bullet list node configuration
+ */
+export interface BulletListNode {
+    type: 'bulletList';
+}
+/**
+ * Ordered list node configuration
+ */
+export interface OrderedListNode {
+    type: 'orderedList';
+    attrs?: {
+        start?: number;
+    };
+}
+/**
+ * Task list node configuration
+ */
+export interface TaskListNode {
+    type: 'taskList';
+}
+/**
+ * Code block node configuration
+ */
+export interface CodeBlockNode {
+    type: 'codeBlock';
+    attrs?: {
+        language?: string;
+    };
+}
+/**
+ * Blockquote node configuration
+ */
+export interface BlockquoteNode {
+    type: 'blockquote';
+}
+/**
+ * Horizontal rule node configuration
+ */
+export interface HorizontalRuleNode {
+    type: 'horizontalRule';
+}
+/**
+ * Union of all block node types
+ */
+export type BlockNode = ParagraphNode | HeadingNode | BulletListNode | OrderedListNode | TaskListNode | CodeBlockNode | BlockquoteNode | HorizontalRuleNode;
+/**
+ * Map of block node type to its configuration
+ */
+export type BlockNodeMap = {
+    paragraph: ParagraphNode;
+    heading: HeadingNode;
+    bulletList: BulletListNode;
+    orderedList: OrderedListNode;
+    taskList: TaskListNode;
+    codeBlock: CodeBlockNode;
+    blockquote: BlockquoteNode;
+    horizontalRule: HorizontalRuleNode;
+};
+/**
+ * Extract node configuration by type
+ */
+export type GetBlockNode<T extends BlockNodeType> = BlockNodeMap[T];

package/dist/patterns/RichText/types/props.d.ts

@@ -0,0 +1,157 @@
+import { ComponentProps } from 'react';
+import { Textarea } from '@heroui/react';
+import { ModifierIdentifier } from './modifiers';
+import { ToolbarConfig } from './toolbar';
+/**
+ * Editor content configuration props
+ */
+export interface EditorContentProps {
+    /**
+     * Whether the textarea should automatically grow vertically to accommodate content
+     * @default false
+     */
+    disableAutosize?: boolean;
+    /**
+     * Minimum number of rows to show for textarea
+     * @default 10
+     */
+    minRows?: number;
+    /**
+     * Maximum number of rows up to which the textarea can grow
+     * @default 30
+     */
+    maxRows?: number;
+    /**
+     * Reuse previously computed measurements when computing height of textarea
+     * @default false
+     */
+    cacheMeasurements?: boolean;
+    /**
+     * Function invoked on textarea height change
+     */
+    onHeightChange?: (height: number, meta: {
+        rowHeight: number;
+    }) => void;
+}
+/**
+ * Editor counter configuration props
+ */
+export interface EditorCounterProps {
+    /**
+     * Show character count below editor
+     * @default false
+     */
+    showCharacterCount?: boolean;
+    /**
+     * Show word count below editor
+     * @default false
+     */
+    showWordCount?: boolean;
+    /**
+     * Maximum character limit
+     */
+    maxCharacters?: number;
+    /**
+     * Maximum word limit
+     */
+    maxWords?: number;
+}
+/**
+ * Editor content data structure
+ */
+export interface EditorContent {
+    /**
+     * HTML representation of content
+     */
+    html: string;
+    /**
+     * JSON representation of content (ProseMirror document)
+     */
+    json: any;
+    /**
+     * Plain text content (stripped of formatting)
+     */
+    text: string;
+    /**
+     * Character count
+     */
+    characters: number;
+    /**
+     * Word count
+     */
+    words: number;
+}
+/**
+ * Main RichTextArea props interface
+ * This is a breaking change from the old API
+ */
+export interface RichTextAreaProps extends Omit<ComponentProps<typeof Textarea>, 'children'>, EditorContentProps, EditorCounterProps {
+    /**
+     * Editor adapter (future-proofing for other adapters)
+     * @default 'tiptap'
+     */
+    adapter?: 'tiptap';
+    /**
+     * Active modifiers configuration (type-safe)
+     * Replaces the old `activeModifiers` string array
+     *
+     * @default RICH_TEXT_PRESETS.full (all modifiers enabled)
+     *
+     * @example
+     * // Simple modifiers
+     * modifiers={['bold', 'italic', 'underline']}
+     *
+     * @example
+     * // Complex modifiers with configuration
+     * modifiers={[
+     *   'bold',
+     *   { type: 'heading', level: 2 },
+     *   { type: 'textColor', color: '#FF0000' }
+     * ]}
+     *
+     * @example
+     * // Using presets
+     * import { RICH_TEXT_PRESETS } from '@veevarts/design-system';
+     * modifiers={RICH_TEXT_PRESETS.blog}
+     */
+    modifiers?: ModifierIdentifier[];
+    /**
+     * Toolbar configuration (optional custom layout)
+     * If not provided, a default layout will be generated from modifiers
+     */
+    toolbarConfig?: ToolbarConfig;
+    /**
+     * Whether to show the toolbar
+     * @default true
+     */
+    showToolbar?: boolean;
+    /**
+     * Callback when content changes
+     * Provides HTML, JSON, and text representations
+     */
+    onContentChange?: (content: EditorContent) => void;
+    /**
+     * Initial content (HTML or JSON)
+     * Replaces `defaultValue` and `value` with a unified prop
+     */
+    initialContent?: string | object;
+    /**
+     * Controlled content value (HTML)
+     * For controlled component usage
+     */
+    content?: string;
+    /**
+     * Callback when editor content changes (controlled mode)
+     */
+    onUpdate?: (content: EditorContent) => void;
+}
+/**
+ * Internal TipTap editor props (for core/TipTapEditor.tsx)
+ */
+export interface TipTapEditorProps extends RichTextAreaProps {
+    /**
+     * Editor variant style
+     * @default 'bordered'
+     */
+    variant?: 'flat' | 'bordered' | 'faded' | 'underlined';
+}