ribbit/src/ribbit.ts

/*
 * ribbit.ts — core editor classes for the ribbit WYSIWYG markdown editor.
 */

import hopdown from './hopdown';

export interface RibbitSettings {
    api?: unknown;
    editorId?: string;
    plugins?: Array<{ new(settings: { name: string; wiki: Ribbit }): RibbitPlugin; name: string }>;
}

/**
 * Base class for editor plugins. Subclass and override toHTML/toMarkdown
 * to add custom processing hooks.
 */
export class RibbitPlugin {
    name: string;
    wiki: Ribbit;
    precedence: number;

    constructor(settings: { name: string; wiki: Ribbit }) {
        this.name = settings.name;
        this.wiki = settings.wiki;
        this.precedence = 50;
    }

    setEditable(): void {
    }

    toMarkdown(html: string): string {
        return html;
    }

    toHTML(md: string): string {
        return md;
    }
}

/**
 * Read-only markdown viewer. Renders markdown content into an HTML element.
 *
 * Usage:
 *   const viewer = new Ribbit({ editorId: 'my-element' });
 *   viewer.run();
 */
export class Ribbit {
    api: unknown;
    element: HTMLElement;
    states: Record<string, string>;
    cachedHTML: string | null;
    cachedMarkdown: string | null;
    state: string | null;
    changed: boolean;
    enabledPlugins: Record<string, RibbitPlugin>;

    constructor(settings: RibbitSettings) {
        this.api = settings.api || null;
        this.element = document.getElementById(settings.editorId || 'ribbit')!;
        this.states = {
            VIEW: 'view',
        };
        this.cachedHTML = null;
        this.cachedMarkdown = null;
        this.state = null;
        this.changed = false;
        this.enabledPlugins = {};

        (settings.plugins || []).forEach(plugin => {
            this.enabledPlugins[plugin.name] = new plugin({
                name: plugin.name,
                wiki: this,
            });
        });
    }

    run(): void {
        this.element.classList.add('loaded');
        this.view();
    }

    plugins(): RibbitPlugin[] {
        return Object.values(this.enabledPlugins).sort((a, b) => a.precedence - b.precedence);
    }

    getState(): string | null {
        return this.state;
    }

    setState(newState: string): void {
        this.state = newState;
        Object.values(this.states).forEach(state => {
            if (state === newState) {
                this.element.classList.add(state);
            } else {
                this.element.classList.remove(state);
            }
        });
    }

    markdownToHTML(md: string): string {
        return hopdown.toHTML(md);
    }

    getHTML(): string {
        if (this.changed || !this.cachedHTML) {
            this.cachedHTML = this.markdownToHTML(this.getMarkdown());
        }
        return this.cachedHTML;
    }

    getMarkdown(): string {
        if (!this.cachedMarkdown) {
            this.cachedMarkdown = this.element.textContent || '';
        }
        return this.cachedMarkdown;
    }

    view(): void {
        if (this.getState() === this.states.VIEW) return;
        this.element.innerHTML = this.getHTML();
        this.setState(this.states.VIEW);
        this.element.contentEditable = 'false';
    }
}

/**
 * Convert a string to title case, splitting on whitespace.
 * Returns an array of capitalized words.
 */
export function camelCase(words: string): string[] {
    return words.trim().split(/\s+/g).map(word => {
        const lc = word.toLowerCase();
        return lc.charAt(0).toUpperCase() + lc.slice(1);
    });
}

/**
 * Decode HTML entities in a string using a textarea element.
 */
export function decodeHtmlEntities(html: string): string {
    const txt = document.createElement('textarea');
    txt.innerHTML = html;
    return txt.value;
}

/**
 * Encode HTML-significant characters as numeric entities.
 */
export function encodeHtmlEntities(str: string): string {
    return str.replace(/[\u00A0-\u9999<>&]/g, i => '&#' + i.charCodeAt(0) + ';');
}