yarn add boleditor

pnpm add boleditor

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/boleditor/dist/boleditor.min.css">

<!-- JavaScript -->
<script src="https://unpkg.com/boleditor/dist/boleditor.bundle.umd.js"></script>

const editor = new BOLEDITOR('#editor', {
    slashCommands: {
        enabled: true,
        commands: [
            // Built-in commands
            { name: 'heading1', label: 'Heading 1', icon: 'bi-type-h1', shortcut: '/h1' },
            { name: 'heading2', label: 'Heading 2', icon: 'bi-type-h2', shortcut: '/h2' },
            { name: 'bullet', label: 'Bullet List', icon: 'bi-list-ul', shortcut: '/bullet' },
            { name: 'numbered', label: 'Numbered List', icon: 'bi-list-ol', shortcut: '/numbered' },
            { name: 'quote', label: 'Quote Block', icon: 'bi-quote', shortcut: '/quote' },
            { name: 'code', label: 'Code Block', icon: 'bi-code', shortcut: '/code' },
            { name: 'divider', label: 'Divider', icon: 'bi-dash-lg', shortcut: '/divider' },

            // Custom commands
            {
                name: 'callout',
                label: 'Callout Box',
                icon: 'bi-info-circle',
                shortcut: '/callout',
                action: (editor) => {
                    editor.insertHTML('<div class="callout">Enter text...</div>');
                }
            },
            {
                name: 'youtube',
                label: 'YouTube Video',
                icon: 'bi-youtube',
                shortcut: '/youtube',
                action: (editor) => {
                    const url = prompt('Enter YouTube URL:');
                    if (url) {
                        const videoId = extractYouTubeId(url);
                        editor.insertHTML(`<iframe src="https://youtube.com/embed/${videoId}"></iframe>`);
                    }
                }
            }
        ]
    }
});

const editor = new BOLEDITOR('#editor', {
    slashCommands: {
        enabled: true,

        // Categorize commands
        categories: [
            {
                name: 'Basic Blocks',
                commands: ['heading1', 'heading2', 'heading3', 'paragraph']
            },
            {
                name: 'Lists',
                commands: ['bullet', 'numbered', 'todo']
            },
            {
                name: 'Media',
                commands: ['image', 'video', 'embed']
            },
            {
                name: 'Advanced',
                commands: ['table', 'code', 'quote', 'divider']
            }
        ],

        // Styling
        menuStyle: {
            maxHeight: '300px',
            width: '280px',
            position: 'below'  // 'below' or 'above'
        },

        // Events
        onSelect: (command, editor) => {
            console.log(`Command selected: ${command.name}`);
            analytics.track('slash_command_used', { command: command.name });
        },

        onOpen: () => console.log('Slash menu opened'),
        onClose: () => console.log('Slash menu closed')
    }
});

// Programmatically trigger slash menu
editor.openSlashMenu();

// Register command at runtime
editor.registerSlashCommand({
    name: 'timestamp',
    label: 'Insert Timestamp',
    icon: 'bi-clock',
    shortcut: '/time',
    action: (editor) => {
        editor.insertText(new Date().toLocaleString());
    }
});

// Import Markdown content
const markdownContent = `
# Welcome to BolEditor

This is **bold** and this is *italic*.

## Features
- Easy to use
- Powerful API
- Zero dependencies

\`\`\`javascript
const editor = new BOLEDITOR('#editor');
\`\`\`

> This is a blockquote

| Name | Value |
|------|-------|
| A    | 1     |
| B    | 2     |
`;

// Set markdown content (auto-converts to HTML)
editor.setMarkdown(markdownContent);

// Get content as Markdown
const md = editor.getMarkdown();
console.log(md);

// Export to Markdown file
editor.exportMarkdown('document.md');

// Import from file input
document.getElementById('mdFile').addEventListener('change', async (e) => {
    const file = e.target.files[0];
    const text = await file.text();
    editor.setMarkdown(text);
});

# Live Markdown Shortcuts

## Text Formatting
**bold text**        → Bold (or Ctrl+B)
*italic text*        → Italic (or Ctrl+I)
~~strikethrough~~    → Strikethrough
`inline code`        → Inline code
[link](url)          → Hyperlink

## Headings (type at start of line)
# Heading 1          → H1 (or Ctrl+1)
## Heading 2         → H2 (or Ctrl+2)
### Heading 3        → H3 (or Ctrl+3)

## Lists (type at start of line)
- item               → Bullet list
* item               → Bullet list
1. item              → Numbered list
- [ ] task           → Todo/checkbox
- [x] done           → Checked todo

## Blocks
> quote              → Blockquote
```                  → Code block (type language after)
---                  → Horizontal rule
***                  → Horizontal rule

## Tables
| Col 1 | Col 2 |
|-------|-------|
| A     | B     |

## Images
![alt text](image-url)

const editor = new BOLEDITOR('#editor', {
    media: {
        enabled: true,

        // Custom upload handler
        uploadHandler: async (file, progressCallback) => {
            const formData = new FormData();
            formData.append('file', file);

            return new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest();

                xhr.upload.addEventListener('progress', (e) => {
                    if (e.lengthComputable) {
                        const percent = (e.loaded / e.total) * 100;
                        progressCallback(percent);
                    }
                });

                xhr.addEventListener('load', () => {
                    if (xhr.status === 200) {
                        const response = JSON.parse(xhr.responseText);
                        resolve({
                            url: response.url,
                            alt: response.filename,
                            width: response.width,
                            height: response.height
                        });
                    } else {
                        reject(new Error('Upload failed'));
                    }
                });

                xhr.addEventListener('error', () => reject(new Error('Network error')));

                xhr.open('POST', '/api/upload');
                xhr.setRequestHeader('Authorization', 'Bearer TOKEN');
                xhr.send(formData);
            });
        },

        // Events
        onUploadStart: (file) => console.log('Starting upload:', file.name),
        onUploadProgress: (file, percent) => console.log(`${file.name}: ${percent}%`),
        onUploadComplete: (file, result) => console.log('Uploaded:', result.url),
        onUploadError: (file, error) => console.error('Upload failed:', error)
    }
});

const editor = new BOLEDITOR('#editor', {
    media: {
        enabled: true,

        // Media library/gallery
        library: {
            enabled: true,
            endpoint: '/api/media',  // GET endpoint for media list

            // Pagination
            perPage: 20,

            // Search
            searchable: true,

            // Filters
            filters: ['images', 'videos', 'documents'],

            // Custom fetch function
            fetchMedia: async (page, search, filter) => {
                const response = await fetch(
                    `/api/media?page=${page}&search=${search}&type=${filter}`
                );
                const data = await response.json();

                return {
                    items: data.items.map(item => ({
                        id: item.id,
                        url: item.url,
                        thumbnail: item.thumbnail,
                        name: item.filename,
                        type: item.mime_type,
                        size: item.size,
                        createdAt: item.created_at
                    })),
                    total: data.total,
                    hasMore: data.has_more
                };
            }
        },

        // Image editing
        editing: {
            crop: true,
            rotate: true,
            flip: true,
            filters: true,  // Basic filters (brightness, contrast)
            resize: true
        }
    }
});

// Open media library programmatically
editor.openMediaLibrary();

// Insert image programmatically
editor.insertImage({
    src: 'https://example.com/image.jpg',
    alt: 'Description',
    width: 800,
    height: 600
});

const editor = new BOLEDITOR('#editor', {
    mentions: {
        enabled: true,

        users: {
            trigger: '@',

            // Async data fetching
            fetch: async (query) => {
                const response = await fetch(`/api/users/search?q=${encodeURIComponent(query)}`);
                const users = await response.json();

                return users.map(user => ({
                    id: user.id,
                    name: user.full_name,
                    username: user.username,
                    avatar: user.profile_image,
                    role: user.role
                }));
            },

            // Debounce API calls
            debounce: 300,

            // Minimum characters before searching
            minChars: 2,

            // Cache results
            cache: true,
            cacheDuration: 60000 // 1 minute
        },

        tags: {
            trigger: '#',

            fetch: async (query) => {
                const response = await fetch(`/api/tags/search?q=${encodeURIComponent(query)}`);
                return response.json();
            },

            // Allow creating new tags
            allowNew: true,
            createNew: async (tagName) => {
                const response = await fetch('/api/tags', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ name: tagName })
                });
                return response.json();
            }
        }
    }
});

// Events
editor.on('mention', (data) => {
    console.log('User mentioned:', data);
    // Notify user, send email, etc.
    notifyUser(data.userId, 'You were mentioned in a document');
});

editor.on('tag', (data) => {
    console.log('Tag used:', data);
});

const editor = new BOLEDITOR('#editor', {
    mentions: {
        enabled: true,

        users: {
            trigger: '@',
            fetch: fetchUsers,

            // Custom dropdown item template
            renderItem: (user) => `
                <div class="mention-item">
                    <img src="${user.avatar}" alt="${user.name}" class="mention-avatar">
                    <div class="mention-info">
                        <span class="mention-name">${user.name}</span>
                        <span class="mention-username">@${user.username}</span>
                    </div>
                    ${user.verified ? '<span class="verified-badge">✓</span>' : ''}
                </div>
            `,

            // Custom inserted mention template
            renderMention: (user) => `
                <span
                    class="mention"
                    data-user-id="${user.id}"
                    data-username="${user.username}"
                    contenteditable="false">
                    @${user.name}
                </span>
            `,

            // Custom styling class
            menuClass: 'custom-mention-menu',
            itemClass: 'custom-mention-item',
            activeClass: 'custom-mention-active'
        }
    }
});

// Get all mentions from content
const mentions = editor.getMentions();
console.log(mentions);
// [{ id: 1, name: 'John Doe', username: 'johndoe' }, ...]

// Get all tags from content
const tags = editor.getTags();
console.log(tags);
// ['javascript', 'react', 'webdev']

const editor = new BOLEDITOR('#editor', {
    export: {
        enabled: true,

        pdf: {
            // Page setup
            pageSize: 'A4',        // 'A4', 'Letter', 'Legal', or custom { width, height }
            orientation: 'portrait', // 'portrait' or 'landscape'

            // Margins (in mm)
            margins: {
                top: 20,
                right: 20,
                bottom: 20,
                left: 20
            },

            // Header/Footer
            header: {
                text: 'My Document',
                fontSize: 10,
                alignment: 'center'
            },
            footer: {
                text: 'Page {page} of {pages}',
                fontSize: 10,
                alignment: 'center'
            },

            // Styling
            fontSize: 12,
            fontFamily: 'Helvetica',
            lineHeight: 1.5,

            // Images
            imageQuality: 0.92,
            embedImages: true,

            // Metadata
            metadata: {
                title: 'Document Title',
                author: 'Author Name',
                subject: 'Subject',
                keywords: ['keyword1', 'keyword2']
            }
        }
    }
});

// Export with custom options (override defaults)
await editor.exportPDF('report.pdf', {
    pageSize: 'Letter',
    orientation: 'landscape',
    header: { text: 'Quarterly Report Q4 2024' },
    footer: { text: 'Confidential - Page {page}' }
});

const editor = new BOLEDITOR('#editor', {
    export: {
        enabled: true,

        word: {
            // Document properties
            title: 'Document Title',
            creator: 'BolEditor',
            description: 'Created with BolEditor',

            // Page setup
            pageSize: {
                width: 12240,  // twips (8.5 inches)
                height: 15840  // twips (11 inches)
            },

            // Margins (in twips, 1440 twips = 1 inch)
            margins: {
                top: 1440,
                right: 1440,
                bottom: 1440,
                left: 1440
            },

            // Styles
            styles: {
                heading1: { fontSize: 32, bold: true, color: '2E74B5' },
                heading2: { fontSize: 26, bold: true, color: '2E74B5' },
                paragraph: { fontSize: 22, lineSpacing: 276 }
            },

            // Include styles from editor
            preserveStyles: true,

            // Table of contents
            tableOfContents: false
        }
    }
});

// Export with callback
editor.exportWord('document.docx', {
    title: 'My Report'
}).then(() => {
    console.log('Export complete!');
}).catch((error) => {
    console.error('Export failed:', error);
});

// Node.js WebSocket Server Example (using ws library)
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

// Store document state and connected users
const documents = new Map();
const users = new Map();

wss.on('connection', (ws) => {
    let currentUser = null;
    let currentDoc = null;

    ws.on('message', (message) => {
        const data = JSON.parse(message);

        switch (data.type) {
            case 'join':
                currentUser = data.user;
                currentDoc = data.documentId;

                // Add user to document
                if (!documents.has(currentDoc)) {
                    documents.set(currentDoc, { content: '', users: new Set() });
                }
                documents.get(currentDoc).users.add(currentUser.id);
                users.set(currentUser.id, ws);

                // Send current state
                ws.send(JSON.stringify({
                    type: 'init',
                    content: documents.get(currentDoc).content,
                    users: Array.from(documents.get(currentDoc).users)
                }));

                // Broadcast user joined
                broadcast(currentDoc, { type: 'user_join', user: currentUser }, ws);
                break;

            case 'update':
                // Apply operation and broadcast
                documents.get(currentDoc).content = data.content;
                broadcast(currentDoc, {
                    type: 'update',
                    operations: data.operations,
                    userId: currentUser.id
                }, ws);
                break;

            case 'cursor':
                // Broadcast cursor position
                broadcast(currentDoc, {
                    type: 'cursor',
                    userId: currentUser.id,
                    position: data.position
                }, ws);
                break;
        }
    });

    ws.on('close', () => {
        if (currentDoc && currentUser) {
            documents.get(currentDoc)?.users.delete(currentUser.id);
            users.delete(currentUser.id);
            broadcast(currentDoc, { type: 'user_leave', user: currentUser });
        }
    });
});

function broadcast(docId, message, exclude = null) {
    const doc = documents.get(docId);
    if (!doc) return;

    doc.users.forEach(userId => {
        const ws = users.get(userId);
        if (ws && ws !== exclude && ws.readyState === WebSocket.OPEN) {
            ws.send(JSON.stringify(message));
        }
    });
}

const editor = new BOLEDITOR('#editor', {
    collaboration: {
        enabled: true,
        url: 'wss://your-server.com/collab',
        documentId: 'doc-123',
        user: { id: 'user-1', name: 'John', color: '#8b5cf6' },

        // Presence/cursor settings
        presence: {
            // Show other users' cursors
            cursors: true,
            cursorLabel: true,  // Show name above cursor

            // Show selection highlights
            selections: true,

            // Cursor idle timeout (hide after inactivity)
            idleTimeout: 60000,

            // Custom cursor rendering
            renderCursor: (user) => `
                <div class="remote-cursor" style="background: ${user.color}">
                    <span class="cursor-label">${user.name}</span>
                </div>
            `
        },

        // Awareness (user status)
        awareness: {
            // Broadcast user status
            status: 'active',  // 'active', 'idle', 'away'

            // Custom awareness data
            custom: {
                currentSection: 'introduction',
                viewportPosition: 0
            }
        }
    }
});

// Get connected users
const connectedUsers = editor.getCollaborators();
console.log(connectedUsers);
// [{ id: 'user-2', name: 'Jane', color: '#06b6d4', status: 'active' }]

// Update awareness
editor.setAwareness({
    status: 'idle',
    currentSection: 'conclusion'
});

// Listen for awareness changes
editor.on('awarenessChange', (users) => {
    updateUsersList(users);
});

const editor = new BOLEDITOR('#editor', {
    comments: {
        enabled: true,
        currentUser: { id: 'user-1', name: 'John Doe' }
    },

    // @mentions configuration
    mentions: {
        enabled: true,
        trigger: '@',

        // Static user list
        data: [
            { id: 1, name: 'John Doe', username: 'john', avatar: '/avatars/john.jpg' },
            { id: 2, name: 'Jane Smith', username: 'jane', avatar: '/avatars/jane.jpg' },
            { id: 3, name: 'Bob Wilson', username: 'bob', avatar: '/avatars/bob.jpg' }
        ],

        // Or fetch from API
        fetch: async (query) => {
            const response = await fetch(`/api/users/search?q=${query}`);
            return response.json();
        },

        // Debounce API calls
        debounce: 200,
        minChars: 2,
        limit: 10,

        // Callback when user is mentioned
        onMention: (user) => {
            console.log('User mentioned:', user);
            notifyUser(user.id, 'You were mentioned');
        }
    },

    // #hashtags configuration
    hashtags: {
        enabled: true,
        trigger: '#',
        allowNew: true,  // Allow creating new tags

        data: [
            { name: 'important', count: 150 },
            { name: 'todo', count: 89 },
            { name: 'review', count: 45 }
        ],

        onHashtag: (tag) => {
            console.log('Tag used:', tag);
        }
    }
});

// Get all comments
const comments = editor.getComments();
console.log(comments);
// [{ id, text, content, author, createdAt, replies, resolved }]

// Get all mentions in the document
const mentions = editor.getMentions();
console.log(mentions);
// [{ value: 'john', text: '@John Doe' }, ...]

// Get all hashtags in the document
const tags = editor.getHashtags();
console.log(tags);
// [{ value: 'important', text: '#important' }, ...]

// Programmatically add a comment
editor.addComment({
    text: 'Selected text to comment on',
    content: 'This is my comment',
    author: { id: 'user-1', name: 'John' }
});

// Resolve a comment
editor.resolveComment('comment-123');

// Delete a comment
editor.deleteComment('comment-123');

// Open comments sidebar
editor.openCommentsSidebar();

// Listen for comment events
editor.on('comment:add', (comment) => {
    console.log('New comment:', comment);
});

editor.on('comment:reply', (comment, reply) => {
    console.log('New reply on:', comment.id);
});

editor.on('mention', (user) => {
    // Send notification to mentioned user
    sendNotification(user.id, {
        type: 'mention',
        message: `You were mentioned by ${currentUser.name}`
    });
});

import { useEffect, useRef, useState, useCallback } from 'react';
import BOLEDITOR from 'boleditor';
import 'boleditor/dist/boleditor.min.css';

// Custom hook for BolEditor
function useBolEditor(options = {}) {
    const containerRef = useRef(null);
    const editorRef = useRef(null);
    const [isReady, setIsReady] = useState(false);
    const [wordCount, setWordCount] = useState(0);

    useEffect(() => {
        if (!containerRef.current) return;

        editorRef.current = new BOLEDITOR(containerRef.current, {
            theme: 'light',
            ...options
        });

        editorRef.current.on('ready', () => setIsReady(true));
        editorRef.current.on('change', () => {
            setWordCount(editorRef.current.getWordCount());
        });

        return () => {
            editorRef.current?.destroy();
        };
    }, []);

    const getContent = useCallback(() => {
        return editorRef.current?.getContent() || '';
    }, []);

    const setContent = useCallback((html) => {
        editorRef.current?.setContent(html);
    }, []);

    const clear = useCallback(() => {
        editorRef.current?.clear();
    }, []);

    const focus = useCallback(() => {
        editorRef.current?.focus();
    }, []);

    const exportPDF = useCallback((filename) => {
        editorRef.current?.exportPDF(filename);
    }, []);

    return {
        containerRef,
        editorRef,
        isReady,
        wordCount,
        getContent,
        setContent,
        clear,
        focus,
        exportPDF
    };
}

// Usage
function Editor() {
    const {
        containerRef,
        isReady,
        wordCount,
        getContent,
        exportPDF
    } = useBolEditor({
        placeholder: 'Write something amazing...',
        ai: { enabled: true, endpoint: '/api/ai' }
    });

    return (
        <div>
            <div className="toolbar">
                <span>{wordCount} words</span>
                <button onClick={() => exportPDF('document.pdf')}>
                    Export PDF
                </button>
            </div>
            <div ref={containerRef} />
        </div>
    );
}

export { useBolEditor };
export default Editor;

import { useEffect, useRef, useState, FC } from 'react';
import BOLEDITOR, { BolEditorOptions, BolEditorInstance } from 'boleditor';
import 'boleditor/dist/boleditor.min.css';

interface EditorProps {
    initialContent?: string;
    onChange?: (content: string) => void;
    onReady?: (editor: BolEditorInstance) => void;
    theme?: 'light' | 'dark';
    placeholder?: string;
    className?: string;
}

const BolEditorComponent: FC<EditorProps> = ({
    initialContent = '',
    onChange,
    onReady,
    theme = 'light',
    placeholder = 'Start writing...',
    className = ''
}) => {
    const containerRef = useRef<HTMLDivElement>(null);
    const editorRef = useRef<BolEditorInstance | null>(null);
    const [isReady, setIsReady] = useState(false);

    useEffect(() => {
        if (!containerRef.current || editorRef.current) return;

        const options: BolEditorOptions = {
            theme,
            placeholder,
            content: initialContent,
            ai: {
                enabled: true,
                endpoint: '/api/ai/generate'
            }
        };

        editorRef.current = new BOLEDITOR(containerRef.current, options);

        editorRef.current.on('change', (content: string) => {
            onChange?.(content);
        });

        editorRef.current.on('ready', () => {
            setIsReady(true);
            onReady?.(editorRef.current!);
        });

        return () => {
            editorRef.current?.destroy();
            editorRef.current = null;
        };
    }, []);

    useEffect(() => {
        if (editorRef.current && theme) {
            editorRef.current.setTheme(theme);
        }
    }, [theme]);

    return (
        <div className={`boleditor-react ${className}`}>
            <div ref={containerRef} />
        </div>
    );
};

export default BolEditorComponent;

// Type definitions (boleditor.d.ts)
declare module 'boleditor' {
    export interface BolEditorOptions {
        theme?: 'light' | 'dark';
        lang?: string;
        rtl?: boolean;
        placeholder?: string;
        content?: string;
        minHeight?: string;
        maxHeight?: string;
        ai?: {
            enabled: boolean;
            endpoint: string;
            headers?: Record<string, string>;
        };
        autosave?: {
            enabled: boolean;
            interval: number;
            key: string;
        };
    }

    export interface BolEditorInstance {
        getContent(): string;
        setContent(html: string): void;
        getText(): string;
        clear(): void;
        isEmpty(): boolean;
        getWordCount(): number;
        setTheme(theme: 'light' | 'dark'): void;
        focus(): void;
        blur(): void;
        destroy(): void;
        on(event: string, callback: Function): void;
        off(event: string, callback: Function): void;
        exportPDF(filename: string): Promise<void>;
        exportWord(filename: string): Promise<void>;
    }

    export default class BOLEDITOR {
        constructor(
            element: string | HTMLElement,
            options?: BolEditorOptions
        );
    }
}

import { Formik, Form, Field } from 'formik';
import * as Yup from 'yup';
import BolEditor from './BolEditor';

const validationSchema = Yup.object({
    title: Yup.string().required('Title is required'),
    content: Yup.string()
        .required('Content is required')
        .min(100, 'Content must be at least 100 characters')
});

function PostForm() {
    return (
        <Formik
            initialValues={{ title: '', content: '' }}
            validationSchema={validationSchema}
            onSubmit={async (values) => {
                await fetch('/api/posts', {
                    method: 'POST',
                    body: JSON.stringify(values)
                });
            }}
        >
            {({ setFieldValue, values, errors, touched }) => (
                <Form>
                    <Field name="title" placeholder="Post title" />

                    <BolEditor
                        initialContent={values.content}
                        onChange={(content) => setFieldValue('content', content)}
                    />
                    {touched.content && errors.content && (
                        <div className="error">{errors.content}</div>
                    )}

                    <button type="submit">Submit</button>
                </Form>
            )}
        </Formik>
    );
}

<!-- BolEditor.vue (Options API) -->
<template>
    <div ref="editorContainer"></div>
</template>

<script>
import BOLEDITOR from 'boleditor';
import 'boleditor/dist/boleditor.min.css';

export default {
    name: 'BolEditor',

    props: {
        modelValue: { type: String, default: '' },
        theme: { type: String, default: 'light' },
        placeholder: { type: String, default: '' }
    },

    emits: ['update:modelValue', 'ready'],

    data() {
        return {
            editor: null
        };
    },

    mounted() {
        this.editor = new BOLEDITOR(this.$refs.editorContainer, {
            theme: this.theme,
            placeholder: this.placeholder,
            content: this.modelValue
        });

        this.editor.on('change', (content) => {
            this.$emit('update:modelValue', content);
        });

        this.editor.on('ready', () => {
            this.$emit('ready', this.editor);
        });
    },

    beforeUnmount() {
        this.editor?.destroy();
    },

    watch: {
        theme(newTheme) {
            this.editor?.setTheme(newTheme);
        }
    },

    methods: {
        getContent() {
            return this.editor?.getContent();
        },
        setContent(html) {
            this.editor?.setContent(html);
        },
        clear() {
            this.editor?.clear();
        }
    }
};
</script>

<!-- BolEditor.vue (TypeScript) -->
<template>
    <div ref="editorContainer"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue';
import BOLEDITOR from 'boleditor';
import type { BolEditorInstance, BolEditorOptions } from 'boleditor';
import 'boleditor/dist/boleditor.min.css';

interface Props {
    modelValue?: string;
    theme?: 'light' | 'dark';
    placeholder?: string;
    aiEnabled?: boolean;
    aiEndpoint?: string;
}

const props = withDefaults(defineProps<Props>(), {
    modelValue: '',
    theme: 'light',
    placeholder: 'Start writing...',
    aiEnabled: true,
    aiEndpoint: '/api/ai'
});

const emit = defineEmits<{
    'update:modelValue': [value: string];
    'ready': [editor: BolEditorInstance];
    'focus': [];
    'blur': [];
}>();

const editorContainer = ref<HTMLDivElement | null>(null);
let editor: BolEditorInstance | null = null;

onMounted(() => {
    if (!editorContainer.value) return;

    const options: BolEditorOptions = {
        theme: props.theme,
        placeholder: props.placeholder,
        content: props.modelValue,
        ai: {
            enabled: props.aiEnabled,
            endpoint: props.aiEndpoint
        }
    };

    editor = new BOLEDITOR(editorContainer.value, options);

    editor.on('change', (content: string) => {
        emit('update:modelValue', content);
    });

    editor.on('ready', () => {
        emit('ready', editor!);
    });
});

onUnmounted(() => {
    editor?.destroy();
});

watch(() => props.theme, (newTheme) => {
    editor?.setTheme(newTheme);
});

// Expose methods for parent component
defineExpose({
    getContent: (): string => editor?.getContent() ?? '',
    setContent: (html: string): void => editor?.setContent(html),
    clear: (): void => editor?.clear(),
    focus: (): void => editor?.focus(),
    getWordCount: (): number => editor?.getWordCount() ?? 0
});
</script>

// post-form.component.ts
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { PostService } from './post.service';

@Component({
    selector: 'app-post-form',
    template: `
        <form [formGroup]="postForm" (ngSubmit)="onSubmit()">
            <input formControlName="title" placeholder="Post title" />
            <div *ngIf="postForm.get('title')?.errors?.['required']">
                Title is required
            </div>

            <app-boleditor
                formControlName="content"
                [theme]="theme"
                placeholder="Write your post..."
                (ready)="onEditorReady($event)"
            ></app-boleditor>
            <div *ngIf="postForm.get('content')?.errors?.['required']">
                Content is required
            </div>
            <div *ngIf="postForm.get('content')?.errors?.['minlength']">
                Content must be at least 100 characters
            </div>

            <button type="submit" [disabled]="postForm.invalid">
                Publish
            </button>
        </form>
    `
})
export class PostFormComponent {
    postForm: FormGroup;
    theme: 'light' | 'dark' = 'light';

    constructor(
        private fb: FormBuilder,
        private postService: PostService
    ) {
        this.postForm = this.fb.group({
            title: ['', [Validators.required, Validators.minLength(5)]],
            content: ['', [Validators.required, Validators.minLength(100)]]
        });
    }

    onEditorReady(editor: any): void {
        console.log('Editor initialized', editor);
    }

    async onSubmit(): Promise<void> {
        if (this.postForm.valid) {
            await this.postService.createPost(this.postForm.value);
        }
    }
}

// boleditor.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

export interface EditorState {
    content: string;
    wordCount: number;
    isDirty: boolean;
    lastSaved: Date | null;
}

@Injectable({
    providedIn: 'root'
})
export class BolEditorService {
    private stateSubject = new BehaviorSubject<EditorState>({
        content: '',
        wordCount: 0,
        isDirty: false,
        lastSaved: null
    });

    state$ = this.stateSubject.asObservable();
    private autosaveInterval: any;

    updateContent(content: string, wordCount: number): void {
        this.stateSubject.next({
            ...this.stateSubject.value,
            content,
            wordCount,
            isDirty: true
        });
    }

    markSaved(): void {
        this.stateSubject.next({
            ...this.stateSubject.value,
            isDirty: false,
            lastSaved: new Date()
        });
    }

    startAutosave(saveCallback: () => Promise<void>, interval: number = 30000): void {
        this.stopAutosave();
        this.autosaveInterval = setInterval(async () => {
            if (this.stateSubject.value.isDirty) {
                await saveCallback();
                this.markSaved();
            }
        }, interval);
    }

    stopAutosave(): void {
        if (this.autosaveInterval) {
            clearInterval(this.autosaveInterval);
        }
    }
}

// Usage in component
@Component({...})
export class EditorPageComponent implements OnInit, OnDestroy {
    constructor(private editorService: BolEditorService) {}

    ngOnInit(): void {
        this.editorService.startAutosave(
            () => this.saveToServer(),
            30000
        );
    }

    ngOnDestroy(): void {
        this.editorService.stopAutosave();
    }

    onContentChange(content: string): void {
        const wordCount = content.split(/\s+/).filter(Boolean).length;
        this.editorService.updateContent(content, wordCount);
    }

    async saveToServer(): Promise<void> {
        // Save logic
    }
}