open-edit 0.1.0

package/dist/core/types.d.ts

@@ -0,0 +1,229 @@
+export type MarkType = 'bold' | 'italic' | 'underline' | 'code' | 'link' | 'strikethrough';
+export interface LinkMark {
+    type: 'link';
+    href: string;
+    target?: '_blank' | '_self';
+    title?: string;
+}
+export interface SimpleMark {
+    type: Exclude<MarkType, 'link'>;
+}
+export type Mark = SimpleMark | LinkMark;
+export interface TextNode {
+    type: 'text';
+    text: string;
+    marks: Mark[];
+}
+export interface HardBreakNode {
+    type: 'hardbreak';
+}
+export type InlineNode = TextNode | HardBreakNode;
+export type CalloutVariant = 'info' | 'success' | 'warning' | 'danger';
+export type BlockType = 'paragraph' | 'heading' | 'blockquote' | 'code_block' | 'bullet_list' | 'ordered_list' | 'list_item' | 'image' | 'hr' | 'callout';
+export interface ParagraphNode {
+    type: 'paragraph';
+    align?: 'left' | 'center' | 'right' | 'justify';
+    children: InlineNode[];
+}
+export interface HeadingNode {
+    type: 'heading';
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+    align?: 'left' | 'center' | 'right' | 'justify';
+    children: InlineNode[];
+}
+export interface BlockquoteNode {
+    type: 'blockquote';
+    children: BlockNode[];
+}
+export interface CodeBlockNode {
+    type: 'code_block';
+    lang?: string;
+    children: TextNode[];
+}
+export interface BulletListNode {
+    type: 'bullet_list';
+    children: ListItemNode[];
+}
+export interface OrderedListNode {
+    type: 'ordered_list';
+    start?: number;
+    children: ListItemNode[];
+}
+export interface ListItemNode {
+    type: 'list_item';
+    children: InlineNode[];
+}
+export interface ImageNode {
+    type: 'image';
+    src: string;
+    alt?: string;
+    width?: number;
+    height?: number;
+}
+export interface HrNode {
+    type: 'hr';
+}
+export interface CalloutNode {
+    type: 'callout';
+    variant: CalloutVariant;
+    children: InlineNode[];
+}
+export type BlockNode = ParagraphNode | HeadingNode | BlockquoteNode | CodeBlockNode | BulletListNode | OrderedListNode | ListItemNode | ImageNode | HrNode | CalloutNode;
+export interface EditorDocument {
+    children: BlockNode[];
+}
+export interface ModelPosition {
+    /** Index path into document.children (and nested children) */
+    blockIndex: number;
+    /** For list items: the item index within the list */
+    itemIndex?: number;
+    /** Character offset within the inline content */
+    offset: number;
+}
+export interface ModelSelection {
+    anchor: ModelPosition;
+    focus: ModelPosition;
+    isCollapsed: boolean;
+}
+export interface EditorEventMap {
+    'change': EditorDocument;
+    'selectionchange': ModelSelection | null;
+    'focus': void;
+    'blur': void;
+}
+export type EditorEventListener<K extends keyof EditorEventMap> = (payload: EditorEventMap[K]) => void;
+export interface EditorPlugin {
+    name: string;
+    onInit?: (editor: EditorInterface) => void;
+    onDestroy?: (editor: EditorInterface) => void;
+    commands?: Record<string, (...args: unknown[]) => void>;
+    toolbarItems?: ToolbarItemConfig[];
+    keymaps?: Record<string, (editor: EditorInterface) => boolean>;
+}
+export type ToolbarItemType = 'button' | 'separator' | 'select' | 'spacer';
+export interface ToolbarButtonConfig {
+    type: 'button';
+    id: string;
+    icon: string;
+    title: string;
+    command: string;
+    commandArgs?: unknown[];
+    isActive?: (editor: EditorInterface) => boolean;
+}
+export interface ToolbarSeparatorConfig {
+    type: 'separator';
+}
+export interface ToolbarSpacerConfig {
+    type: 'spacer';
+}
+export interface ToolbarSelectConfig {
+    type: 'select';
+    id: string;
+    title: string;
+    options: Array<{
+        label: string;
+        value: string;
+    }>;
+    getValue: (editor: EditorInterface) => string;
+    command: string;
+}
+export type ToolbarItemConfig = ToolbarButtonConfig | ToolbarSeparatorConfig | ToolbarSpacerConfig | ToolbarSelectConfig;
+export type { EditorLocale } from '../locales/types.js';
+export interface StatusBarOptions {
+    /** Show word count. Default: true */
+    wordCount?: boolean;
+    /** Show character count. Default: true */
+    charCount?: boolean;
+    /** Show element path (e.g. "p › strong"). Default: true */
+    elementPath?: boolean;
+    /** Show HTML source toggle button. Default: true */
+    htmlToggle?: boolean;
+}
+export interface EditorOptions {
+    /** CSS selector or DOM element to mount the editor into */
+    element: string | HTMLElement;
+    /** Initial HTML content */
+    content?: string;
+    /** Placeholder text shown when editor is empty */
+    placeholder?: string;
+    /** 'light' | 'dark' | 'auto' */
+    theme?: 'light' | 'dark' | 'auto';
+    /** Whether editor is read-only */
+    readOnly?: boolean;
+    /** Full custom toolbar configuration (takes precedence over toolbarItems) */
+    toolbar?: ToolbarItemConfig[];
+    /**
+     * Filter which default toolbar buttons/selects to show by their ID.
+     * Orphaned separators are removed automatically.
+     * Has no effect if `toolbar` is set explicitly.
+     * Available IDs: 'undo', 'redo', 'blockType', 'bold', 'italic', 'underline',
+     * 'code', 'alignLeft', 'alignCenter', 'alignRight', 'alignJustify',
+     * 'bulletList', 'orderedList', 'link', 'image', 'blockquote', 'hr', 'htmlToggle'
+     * @example ['bold', 'italic', 'underline', 'link']
+     */
+    toolbarItems?: string[];
+    /**
+     * Control the status bar.
+     * false = hide entirely. Object = show/hide individual parts.
+     * @example false
+     * @example { wordCount: true, charCount: false, elementPath: false, htmlToggle: false }
+     */
+    statusBar?: boolean | StatusBarOptions;
+    /**
+     * UI locale. Defaults to English.
+     * Pass a full locale object or override individual keys with Partial<EditorLocale>.
+     * @example import { de } from 'openedit'; // → locale: de
+     */
+    locale?: import('../locales/types.js').EditorLocale | Partial<import('../locales/types.js').EditorLocale>;
+    /** Called when content changes, receives clean HTML */
+    onChange?: (html: string) => void;
+    /** Hook for image uploads */
+    onImageUpload?: (file: File) => Promise<string>;
+}
+export interface EditorInterface {
+    /** Get current content as clean HTML */
+    getHTML(): string;
+    /** Set content from HTML string */
+    setHTML(html: string): void;
+    /** Get current content as Markdown */
+    getMarkdown(): string;
+    /** Set content from Markdown string */
+    setMarkdown(md: string): void;
+    /** Get current document model */
+    getDocument(): EditorDocument;
+    /** Execute a named command */
+    chain(): ChainInterface;
+    /** Register a plugin */
+    use(plugin: EditorPlugin): EditorInterface;
+    /** Add event listener */
+    on<K extends keyof EditorEventMap>(event: K, listener: EditorEventListener<K>): void;
+    /** Remove event listener */
+    off<K extends keyof EditorEventMap>(event: K, listener: EditorEventListener<K>): void;
+    /** Destroy the editor and clean up */
+    destroy(): void;
+    /** Focus the editor */
+    focus(): void;
+    /** Blur the editor */
+    blur(): void;
+    /** Is the editor focused? */
+    isFocused(): boolean;
+    /** Current selection (null if not focused) */
+    getSelection(): ModelSelection | null;
+    /** Whether a mark is active at current selection */
+    isMarkActive(type: MarkType): boolean;
+    /** Get active block type at cursor */
+    getActiveBlockType(): string;
+    /** Whether the document is empty */
+    isEmpty(): boolean;
+}
+export interface ChainInterface {
+    toggleMark(type: MarkType, attrs?: Record<string, unknown>): ChainInterface;
+    setBlock(type: BlockType, attrs?: Record<string, unknown>): ChainInterface;
+    setAlign(align: 'left' | 'center' | 'right' | 'justify'): ChainInterface;
+    insertImage(src: string, alt?: string): ChainInterface;
+    insertHr(): ChainInterface;
+    toggleList(type: 'bullet_list' | 'ordered_list'): ChainInterface;
+    undo(): ChainInterface;
+    redo(): ChainInterface;
+    run(): void;
+}

package/dist/editor.d.ts

@@ -0,0 +1,64 @@
+import type { EditorDocument, EditorOptions, EditorInterface, EditorPlugin, EditorEventMap, EditorEventListener, ModelSelection, MarkType, ChainInterface } from './core/types.js';
+import type { EditorLocale } from './locales/types.js';
+export declare class Editor implements EditorInterface {
+    private doc;
+    private history;
+    private root;
+    private editorEl;
+    private containerEl;
+    private toolbar;
+    private bubbleToolbar;
+    private imageResizer;
+    private codeLangPicker;
+    private plugins;
+    private options;
+    readonly locale: EditorLocale;
+    private listeners;
+    private isComposing;
+    private _isFocused;
+    private isUpdating;
+    private syncTimer;
+    constructor(options: EditorOptions);
+    private buildContainer;
+    private buildEditorEl;
+    private attachEvents;
+    private readonly onInput;
+    private readonly onCompositionStart;
+    private readonly onCompositionEnd;
+    private readonly onHTMLToggleClick;
+    private scheduleSyncFromDOM;
+    /** Sync model from DOM without a full rerender (used after inline execCommands) */
+    syncModelFromDOM(): void;
+    private readonly onSelectionChange;
+    private readonly onFocus;
+    private readonly onBlur;
+    private readonly onKeydown;
+    private readonly onTabInCodeBlock;
+    private readonly onPaste;
+    private readonly onDrop;
+    private isHTMLMode;
+    toggleHTMLMode(): void;
+    chain(): ChainInterface;
+    private rerender;
+    private updateStatusBar;
+    private updateElementPath;
+    private updatePlaceholder;
+    getHTML(): string;
+    setHTML(html: string): void;
+    getMarkdown(): string;
+    setMarkdown(md: string): void;
+    getDocument(): EditorDocument;
+    use(plugin: EditorPlugin): EditorInterface;
+    on<K extends keyof EditorEventMap>(event: K, listener: EditorEventListener<K>): void;
+    off<K extends keyof EditorEventMap>(event: K, listener: EditorEventListener<K>): void;
+    private emit;
+    destroy(): void;
+    focus(): void;
+    blur(): void;
+    isFocused(): boolean;
+    getSelection(): ModelSelection | null;
+    isMarkActive(type: MarkType): boolean;
+    getActiveBlockType(): string;
+    isEmpty(): boolean;
+    private applyTheme;
+}

package/dist/index.d.ts

@@ -0,0 +1,61 @@
+import { Editor } from './editor.js';
+import { en } from './locales/en.js';
+import { de } from './locales/de.js';
+import { serializeToMarkdown, deserializeMarkdown } from './io/markdown.js';
+import { createHighlightPlugin } from './plugins/highlight.js';
+import { createEmojiPlugin } from './plugins/emoji.js';
+import { createTemplateTagPlugin } from './plugins/template-tags.js';
+import { createAIPlugin } from './plugins/ai.js';
+import { createCalloutPlugin } from './plugins/callout.js';
+import { createSlashCommandsPlugin } from './plugins/slash-commands.js';
+import type { EditorOptions, EditorInterface, EditorPlugin, EditorDocument, EditorEventMap, ToolbarItemConfig, StatusBarOptions, Mark, MarkType, BlockNode, InlineNode, TextNode, ModelSelection, CalloutVariant, CalloutNode } from './core/types.js';
+/**
+ * Create a new OpenEdit editor instance.
+ *
+ * @example
+ * // Script tag usage
+ * const editor = OpenEdit.create('#my-editor', {
+ *   content: '<p>Hello world</p>',
+ *   placeholder: 'Start typing...',
+ *   theme: 'auto',
+ *   onChange: (html) => console.log(html),
+ * });
+ *
+ * @example
+ * // With image upload hook
+ * const editor = OpenEdit.create('#editor', {
+ *   onImageUpload: async (file) => {
+ *     const formData = new FormData();
+ *     formData.append('file', file);
+ *     const res = await fetch('/upload', { method: 'POST', body: formData });
+ *     const { url } = await res.json();
+ *     return url;
+ *   }
+ * });
+ */
+declare function create(element: string | HTMLElement, options?: Omit<EditorOptions, 'element'>): EditorInterface;
+export declare const OpenEdit: {
+    create: typeof create;
+    version: string;
+    locales: {
+        en: import("./index.js").EditorLocale;
+        de: import("./index.js").EditorLocale;
+    };
+    plugins: {
+        highlight: typeof createHighlightPlugin;
+        emoji: typeof createEmojiPlugin;
+        templateTags: typeof createTemplateTagPlugin;
+        ai: typeof createAIPlugin;
+        callout: typeof createCalloutPlugin;
+        slashCommands: typeof createSlashCommandsPlugin;
+    };
+    markdown: {
+        serialize: typeof serializeToMarkdown;
+        deserialize: typeof deserializeMarkdown;
+    };
+};
+export { Editor, serializeToMarkdown, deserializeMarkdown, createHighlightPlugin, createEmojiPlugin, createTemplateTagPlugin, createAIPlugin, createCalloutPlugin, createSlashCommandsPlugin, en, de };
+export type { EditorOptions, EditorInterface, EditorPlugin, EditorDocument, EditorEventMap, ToolbarItemConfig, StatusBarOptions, Mark, MarkType, BlockNode, InlineNode, TextNode, ModelSelection, CalloutVariant, CalloutNode, };
+export type { SlashCommand, SlashCommandsOptions } from './plugins/slash-commands.js';
+export type { EditorLocale } from './locales/types.js';
+export default OpenEdit;

package/dist/io/deserializer.d.ts

@@ -0,0 +1,3 @@
+import type { EditorDocument, TextNode } from '../core/types.js';
+export declare function deserializeHTML(html: string): EditorDocument;
+export type { TextNode };

package/dist/io/markdown.d.ts

@@ -0,0 +1,3 @@
+import type { EditorDocument } from '../core/types.js';
+export declare function serializeToMarkdown(doc: EditorDocument): string;
+export declare function deserializeMarkdown(md: string): EditorDocument;

package/dist/io/serializer.d.ts

@@ -0,0 +1,4 @@
+import type { EditorDocument } from '../core/types.js';
+export declare function serializeToHTML(doc: EditorDocument): string;
+export declare function escapeHTML(str: string): string;
+export declare function escapeAttr(str: string): string;

package/dist/locales/de.d.ts

@@ -0,0 +1,2 @@
+import type { EditorLocale } from './types.js';
+export declare const de: EditorLocale;

package/dist/locales/en.d.ts

@@ -0,0 +1,2 @@
+import type { EditorLocale } from './types.js';
+export declare const en: EditorLocale;

package/dist/locales/types.d.ts

@@ -0,0 +1,77 @@
+export interface EditorLocale {
+    toolbar: {
+        undo: string;
+        redo: string;
+        textFormat: string;
+        paragraph: string;
+        heading: (level: number) => string;
+        quote: string;
+        codeBlock: string;
+        bold: string;
+        italic: string;
+        underline: string;
+        inlineCode: string;
+        alignLeft: string;
+        alignCenter: string;
+        alignRight: string;
+        justify: string;
+        bulletList: string;
+        orderedList: string;
+        insertLink: string;
+        insertImage: string;
+        blockquote: string;
+        horizontalRule: string;
+        htmlSource: string;
+        calloutInfo: string;
+        calloutSuccess: string;
+        calloutWarning: string;
+        calloutDanger: string;
+        insertCallout: string;
+    };
+    statusBar: {
+        /** Label prefix for word count, e.g. "Words" */
+        words: string;
+        /** Label prefix for character count, e.g. "Characters" */
+        characters: string;
+        /** Label/text on the HTML source toggle button */
+        htmlSource: string;
+    };
+    dialogs: {
+        linkUrl: string;
+        openInNewTab: string;
+        imageUrl: string;
+        imageAlt: string;
+    };
+    plugins: {
+        ai: {
+            panelTitle: string;
+            noSelection: string;
+            customPromptPlaceholder: string;
+            runButton: string;
+            applyButton: string;
+            generating: string;
+            noApiKey: string;
+            errorPrefix: string;
+            actions: {
+                improve: string;
+                shorten: string;
+                expand: string;
+                summarize: string;
+                toGerman: string;
+                toEnglish: string;
+            };
+        };
+        emoji: {
+            buttonTitle: string;
+            categories: {
+                faces: string;
+                hearts: string;
+                gestures: string;
+                nature: string;
+                food: string;
+                objects: string;
+                symbols: string;
+            };
+        };
+    };
+}