authorly-editor 0.1.0

package/dist/core/types.d.ts

@@ -0,0 +1,325 @@
+/**
+ * Core Types for Content Blocks Editor
+ * Pure HTML output, DOM-first architecture
+ */
+export type BlockType = 'paragraph' | 'heading' | 'bulletList' | 'numberedList' | 'checkList' | 'quote' | 'code' | 'image' | 'video' | 'divider' | 'callout' | 'accordion' | 'table';
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export type InlineFormat = 'bold' | 'italic' | 'underline' | 'strikethrough' | 'code' | 'link' | 'textColor' | 'highlight';
+export type CalloutType = 'info' | 'warning' | 'error' | 'success' | 'note';
+export interface BlockDefinition {
+    /** Unique name for the block */
+    name: BlockType;
+    /** HTML tag this block renders to */
+    tag: string;
+    /** Whether the content is editable */
+    editable: boolean;
+    /** Allowed child types */
+    allowedChildren: ('text' | 'inline' | 'block')[];
+    /** Default CSS class */
+    className?: string;
+    /** Icon name for UI */
+    icon?: string;
+    /** Display label */
+    label: string;
+    /** Keyboard shortcut */
+    shortcut?: string;
+    /** Create the DOM element */
+    create: (data?: any) => HTMLElement;
+    /** Get block data from element */
+    getData: (element: HTMLElement) => any;
+    /** Update element with new data */
+    update: (element: HTMLElement, data: any) => void;
+}
+export interface BaseBlockData {
+    id: string;
+    type: BlockType;
+    className?: string;
+}
+export interface ParagraphData extends BaseBlockData {
+    type: 'paragraph';
+    content: string;
+    align?: 'left' | 'center' | 'right' | 'justify';
+}
+export interface HeadingData extends BaseBlockData {
+    type: 'heading';
+    level: HeadingLevel;
+    content: string;
+    align?: 'left' | 'center' | 'right';
+}
+export interface ListData extends BaseBlockData {
+    type: 'bulletList' | 'numberedList' | 'checkList';
+    items: ListItem[];
+}
+export interface ListItem {
+    id: string;
+    content: string;
+    checked?: boolean;
+    children?: ListItem[];
+}
+export interface QuoteData extends BaseBlockData {
+    type: 'quote';
+    content: string;
+    citation?: string;
+}
+export interface CodeData extends BaseBlockData {
+    type: 'code';
+    content: string;
+    language?: string;
+}
+export interface ImageData extends BaseBlockData {
+    type: 'image';
+    src: string;
+    alt?: string;
+    caption?: string;
+    width?: number | string;
+    height?: number | string;
+    align?: 'left' | 'center' | 'right';
+}
+export interface VideoData extends BaseBlockData {
+    type: 'video';
+    src: string;
+    poster?: string;
+    caption?: string;
+    width?: number | string;
+    height?: number | string;
+}
+export interface DividerData extends BaseBlockData {
+    type: 'divider';
+    style?: 'solid' | 'dashed' | 'dotted';
+}
+export interface CalloutData extends BaseBlockData {
+    type: 'callout';
+    calloutType: CalloutType;
+    title?: string;
+    content: string;
+}
+export interface AccordionData extends BaseBlockData {
+    type: 'accordion';
+    title: string;
+    content: string;
+    open?: boolean;
+}
+export interface TableData extends BaseBlockData {
+    type: 'table';
+    rows: TableRow[];
+    hasHeader?: boolean;
+}
+export interface TableRow {
+    cells: TableCell[];
+}
+export interface TableCell {
+    content: string;
+    align?: 'left' | 'center' | 'right';
+    colSpan?: number;
+    rowSpan?: number;
+}
+export type BlockData = ParagraphData | HeadingData | ListData | QuoteData | CodeData | ImageData | VideoData | DividerData | CalloutData | AccordionData | TableData;
+export interface EditorConfig {
+    /** Container element or selector */
+    container?: HTMLElement | string;
+    /** Initial HTML content */
+    initialContent?: string;
+    /** Enabled block types */
+    blocks?: BlockType[];
+    /** Enabled inline formats */
+    inlineFormats?: InlineFormat[];
+    /** Placeholder text */
+    placeholder?: string;
+    /** Enable autosave */
+    autosave?: boolean;
+    /** Autosave interval in ms */
+    autosaveInterval?: number;
+    /** Max undo history */
+    maxHistory?: number;
+    /** CSS class prefix */
+    classPrefix?: string;
+    /** Enable spell check */
+    spellCheck?: boolean;
+    /** Read-only mode */
+    readOnly?: boolean;
+    /** Custom class mappings */
+    classMap?: Partial<Record<BlockType, string>>;
+    /** Callbacks */
+    onChange?: (html: string) => void;
+    onSave?: (html: string) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onBlockAdd?: (block: HTMLElement) => void;
+    onBlockRemove?: (block: HTMLElement) => void;
+    onBlockMove?: (block: HTMLElement, fromIndex: number, toIndex: number) => void;
+}
+export interface EditorState {
+    /** All block elements */
+    blocks: HTMLElement[];
+    /** Currently focused block */
+    activeBlock: HTMLElement | null;
+    /** Current selection */
+    selection: Selection | null;
+    /** Undo stack */
+    undoStack: string[];
+    /** Redo stack */
+    redoStack: string[];
+    /** Current word count */
+    wordCount: number;
+    /** Current character count */
+    charCount: number;
+    /** Is content modified */
+    isDirty: boolean;
+}
+export type CommandName = 'insertBlock' | 'deleteBlock' | 'moveBlockUp' | 'moveBlockDown' | 'duplicateBlock' | 'transformBlock' | 'toggleFormat' | 'setAlignment' | 'indent' | 'outdent' | 'undo' | 'redo' | 'selectAll' | 'insertLink' | 'insertImage';
+export interface Command {
+    name: CommandName;
+    execute: (editor: EditorInstance, ...args: unknown[]) => void;
+    canExecute?: (editor: EditorInstance) => boolean;
+    shortcut?: string;
+}
+export interface EditorInstance {
+    /** Root container element */
+    container: HTMLElement;
+    /** Editor config */
+    config: EditorConfig;
+    /** Current state */
+    state: EditorState;
+    /** Selection version for tracking changes (used for toolbar updates) */
+    selectionVersion?: number;
+    /** Get HTML output */
+    getHTML: () => string;
+    /** Set HTML content */
+    setHTML: (html: string) => void;
+    /** Get plain text */
+    getText: () => string;
+    /** Insert a block */
+    insertBlock: (type: BlockType, data?: Partial<BlockData>, position?: number) => HTMLElement | null;
+    /** Delete a block */
+    deleteBlock: (block: HTMLElement) => void;
+    /** Move a block */
+    moveBlock: (block: HTMLElement, direction: 'up' | 'down') => void;
+    /** Transform block type */
+    transformBlock: (block: HTMLElement, newType: BlockType, data?: Record<string, any>) => HTMLElement;
+    /** Apply inline format */
+    toggleFormat: (format: InlineFormat) => void;
+    /** Check if format is active */
+    isFormatActive: (format: InlineFormat) => boolean;
+    /** Undo last action */
+    undo: () => void;
+    /** Redo last undone action */
+    redo: () => void;
+    /** Focus the editor */
+    focus: () => void;
+    /** Blur the editor */
+    blur: () => void;
+    /** Destroy the editor */
+    destroy: () => void;
+    /** Register a custom block */
+    registerBlock: (definition: BlockDefinition) => void;
+    /** Register a command */
+    registerCommand: (command: Command) => void;
+    /** Execute a command */
+    executeCommand: (name: CommandName, ...args: unknown[]) => void;
+}
+export interface EditorEvents {
+    change: {
+        html: string;
+    };
+    focus: {
+        block: HTMLElement | null;
+    };
+    blur: {
+        block: HTMLElement | null;
+    };
+    blockAdd: {
+        block: HTMLElement;
+        index: number;
+    };
+    blockRemove: {
+        block: HTMLElement;
+        index: number;
+    };
+    blockMove: {
+        block: HTMLElement;
+        fromIndex: number;
+        toIndex: number;
+    };
+    selectionChange: {
+        selection: Selection | null;
+    };
+    input: {
+        block: HTMLElement;
+    };
+    paste: {
+        data: DataTransfer;
+        block: HTMLElement;
+    };
+    keydown: {
+        event: KeyboardEvent;
+        block: HTMLElement;
+    };
+}
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface Rect {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+    bottom: number;
+    right: number;
+}
+export interface DragState {
+    isDragging: boolean;
+    draggedBlock: HTMLElement | null;
+    dropTarget: HTMLElement | null;
+    dropPosition: 'before' | 'after' | null;
+}
+export interface ContentBlocksEditorProps {
+    /** Initial HTML content */
+    initialContent?: string;
+    /** Enabled blocks */
+    blocks?: BlockType[];
+    /** Enabled inline formats */
+    inlineFormats?: InlineFormat[];
+    /** Placeholder text */
+    placeholder?: string;
+    /** Read-only mode */
+    readOnly?: boolean;
+    /** CSS class prefix */
+    classPrefix?: string;
+    /** Custom class name for container */
+    className?: string;
+    /** Custom styles */
+    style?: React.CSSProperties;
+    /** Show toolbar */
+    showToolbar?: boolean;
+    /** Toolbar position */
+    toolbarPosition?: 'top' | 'bottom' | 'floating';
+    /** Enable dark mode */
+    darkMode?: boolean;
+    /** Autofocus on mount */
+    autoFocus?: boolean;
+    /** Spell check */
+    spellCheck?: boolean;
+    /** Content change callback */
+    onChange?: (html: string) => void;
+    /** Save callback */
+    onSave?: (html: string) => void;
+    /** Focus callback */
+    onFocus?: () => void;
+    /** Blur callback */
+    onBlur?: () => void;
+    /** Editor ready callback */
+    onReady?: (editor: EditorInstance) => void;
+}
+export interface ToolbarProps {
+    editor: EditorInstance;
+    className?: string;
+    position?: 'top' | 'bottom' | 'floating';
+    darkMode?: boolean;
+}
+export interface BlockMenuProps {
+    editor: EditorInstance;
+    position: Point;
+    onSelect: (type: BlockType, data?: Record<string, any>) => void;
+    onClose: () => void;
+}

package/dist/drag/drag-handle.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Drag & Drop - Block reordering functionality
+ */
+export interface DragState {
+    isDragging: boolean;
+    draggedElement: HTMLElement | null;
+    placeholder: HTMLElement | null;
+    startY: number;
+    currentY: number;
+    scrollInterval: number | null;
+}
+export interface DragDropOptions {
+    container: HTMLElement;
+    handleSelector?: string;
+    onDragStart?: (element: HTMLElement) => void;
+    onDragMove?: (element: HTMLElement, targetElement: HTMLElement | null, position: 'before' | 'after') => void;
+    onDragEnd?: (element: HTMLElement, newIndex: number) => void;
+    onDragCancel?: () => void;
+}
+/**
+ * Initialize drag and drop for blocks
+ */
+export declare function initDragDrop(options: DragDropOptions): () => void;
+/**
+ * Create a drag handle element
+ */
+export declare function createDragHandle(): HTMLElement;
+/**
+ * Check if drag and drop is supported
+ */
+export declare function isDragDropSupported(): boolean;

package/dist/icons/index.d.ts

@@ -0,0 +1,12 @@
+import { Type, Heading1, Heading2, Heading3, List, ListOrdered, Quote, Code, Image, Minus, ChevronDown, Table, Bold, Italic, Underline, Link, AlignLeft, AlignCenter, AlignRight, Undo, Redo, Trash2, Plus, GripVertical, MoreHorizontal, X, Check, Settings, Download, LucideIcon } from 'lucide-react';
+
+export type IconName = 'paragraph' | 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6' | 'list' | 'listOrdered' | 'checkList' | 'quote' | 'code' | 'image' | 'video' | 'divider' | 'callout' | 'accordion' | 'table' | 'bold' | 'italic' | 'underline' | 'strikethrough' | 'link' | 'unlink' | 'highlight' | 'textColor' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'alignJustify' | 'undo' | 'redo' | 'copy' | 'cut' | 'paste' | 'delete' | 'plus' | 'drag' | 'more' | 'chevronUp' | 'chevronDown' | 'moveUp' | 'moveDown' | 'maximize' | 'close' | 'check' | 'search' | 'settings' | 'sun' | 'moon' | 'document' | 'codeFile' | 'download' | 'upload' | 'externalLink' | 'info' | 'warning' | 'error' | 'success' | 'file' | 'indent' | 'outdent' | 'clear' | 'columns' | 'rows' | 'eraser';
+/**
+ * Icon map - maps icon names to Lucide components
+ */
+export declare const iconMap: Record<IconName, LucideIcon>;
+/**
+ * Get icon component by name
+ */
+export declare function getIcon(name: IconName): LucideIcon;
+export { Type, Heading1, Heading2, Heading3, Bold, Italic, Underline, Link, Code, List, ListOrdered, Quote, Image, Table, Minus, Plus, GripVertical, Undo, Redo, AlignLeft, AlignCenter, AlignRight, Trash2, Settings, Download, ChevronDown, X, Check, MoreHorizontal, };