@bayonai/rich-text-editor 0.1.2

package/dist/react/editorShortcuts.js

@@ -0,0 +1,25 @@
+const dividerMarkers = new Set(["---", "—-", "***", "___"]);
+export function getTextBlockShortcut(markdown) {
+    const trimmed = markdown.trim();
+    if (dividerMarkers.has(trimmed)) {
+        return { type: "divider" };
+    }
+    const checkbox = trimmed.match(/^\[( |x|X)?\]\s*(.*)$/);
+    if (checkbox) {
+        return {
+            type: "checkbox",
+            checked: checkbox[1]?.toLowerCase() === "x",
+            markdown: checkbox[2]?.trim() ?? "",
+        };
+    }
+    if (trimmed.startsWith("# ")) {
+        return { type: "heading", markdown: trimmed.slice(2).trim() };
+    }
+    if (trimmed.startsWith("> ")) {
+        return { type: "quote", markdown: trimmed.slice(2).trim() };
+    }
+    if (trimmed.startsWith("```")) {
+        return { type: "code", text: trimmed.slice(3).trimStart() };
+    }
+    return null;
+}

package/dist/react/index.d.ts

@@ -0,0 +1,9 @@
+export { EditorSessionProvider, useEditorExitGuard, useEditorSession, } from "./EditorSessionProvider";
+export type { EditorSessionControls, EditorSessionProviderProps, UseEditorSessionOptions, } from "./EditorSessionProvider";
+export { RichTextDocumentSurface } from "./RichTextDocumentSurface";
+export type { RichTextDocumentSurfaceBackground } from "./RichTextDocumentSurface";
+export { RichTextEditor } from "./RichTextEditor";
+export { RichTextReadTitle } from "./RichTextTitleInput";
+export { RichTextRenderer } from "./RichTextRenderer";
+export { UnsavedChangesDialog } from "./UnsavedChangesDialog";
+export type { UnsavedChangesDialogProps } from "./UnsavedChangesDialog";

package/dist/react/index.js

@@ -0,0 +1,6 @@
+export { EditorSessionProvider, useEditorExitGuard, useEditorSession, } from "./EditorSessionProvider.js";
+export { RichTextDocumentSurface } from "./RichTextDocumentSurface.js";
+export { RichTextEditor } from "./RichTextEditor.js";
+export { RichTextReadTitle } from "./RichTextTitleInput.js";
+export { RichTextRenderer } from "./RichTextRenderer.js";
+export { UnsavedChangesDialog } from "./UnsavedChangesDialog.js";

package/dist/react/richTextBlockStyles.d.ts

@@ -0,0 +1,7 @@
+export declare const dividerBlockSx: {
+    readonly border: "0";
+    readonly borderTop: "1px solid currentColor";
+    readonly height: 0;
+    readonly my: "6px";
+    readonly py: 0;
+};

package/dist/react/richTextBlockStyles.js

@@ -0,0 +1,7 @@
+export const dividerBlockSx = {
+    border: "0",
+    borderTop: "1px solid currentColor",
+    height: 0,
+    my: "6px",
+    py: 0,
+};

package/dist/react/specialBlockStyles.d.ts

@@ -0,0 +1,15 @@
+export declare const toolButtonSx: {
+    backgroundColor: string;
+    color: string;
+    height: {
+        xs: number;
+        sm: number;
+    };
+    width: {
+        xs: number;
+        sm: number;
+    };
+    "&:hover": {
+        backgroundColor: string;
+    };
+};

package/dist/react/specialBlockStyles.js

@@ -0,0 +1,9 @@
+export const toolButtonSx = {
+    backgroundColor: "#ffffff",
+    color: "#7f38d8",
+    height: { xs: 28, sm: 39 },
+    width: { xs: 28, sm: 39 },
+    "&:hover": {
+        backgroundColor: "#fbf6ff",
+    },
+};

package/dist/richText.d.ts

@@ -0,0 +1,15 @@
+import type { RichTextBlock } from "./types";
+export declare function createEmptyRichTextBlocks(): RichTextBlock[];
+export declare function createRichTextBlockId(): string;
+/**
+ * Sanitizes an array of RichTextBlock objects by:
+ * - Filtering out invalid blocks
+ * - Ensuring each block has a unique ID
+ * - Returning an empty array if no valid blocks remain
+ */
+export declare function sanitizeRichTextBlocks(value: unknown): RichTextBlock[];
+export declare function isRichTextBlocksEmpty(blocks: RichTextBlock[]): boolean;
+export declare function richTextBlocksToPlainText(blocks: RichTextBlock[]): string;
+export declare function editorHtmlToMarkdown(html: string): string;
+export declare function markdownToEditorHtml(markdown: string): string;
+export declare function sanitizeRichTextHtml(html: string): string;

package/dist/richText.js

@@ -0,0 +1,297 @@
+const allowedInlineTags = new Set(["a", "br", "code", "em", "strong"]);
+const textBlockTypes = new Set(["paragraph", "heading", "quote", "checkbox"]);
+export function createEmptyRichTextBlocks() {
+    return [{ id: createRichTextBlockId(), type: "paragraph", markdown: "" }];
+}
+export function createRichTextBlockId() {
+    if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
+        return crypto.randomUUID();
+    }
+    return `block-${Date.now()}-${Math.random().toString(16).slice(2)}`;
+}
+/**
+ * Sanitizes an array of RichTextBlock objects by:
+ * - Filtering out invalid blocks
+ * - Ensuring each block has a unique ID
+ * - Returning an empty array if no valid blocks remain
+ */
+export function sanitizeRichTextBlocks(value) {
+    const blocks = Array.isArray(value) ? value : [];
+    const seenBlockIds = new Set();
+    const sanitized = blocks
+        .flatMap((block) => sanitizeRichTextBlock(block))
+        .map((block) => {
+        if (!seenBlockIds.has(block.id)) {
+            seenBlockIds.add(block.id);
+            return block;
+        }
+        const blockWithUniqueId = {
+            ...block,
+            id: createUniqueRichTextBlockId(seenBlockIds),
+        };
+        seenBlockIds.add(blockWithUniqueId.id);
+        return blockWithUniqueId;
+    });
+    return sanitized.length > 0 ? sanitized : createEmptyRichTextBlocks();
+}
+export function isRichTextBlocksEmpty(blocks) {
+    return sanitizeRichTextBlocks(blocks).every((block) => {
+        if (block.type === "divider") {
+            return false;
+        }
+        if (block.type === "checkbox") {
+            return markdownToPlainText(block.markdown).trim() === "";
+        }
+        if (block.type === "image") {
+            return !block.assetId && !block.alt?.trim();
+        }
+        const text = block.type === "code" ? block.text : block.markdown;
+        return markdownToPlainText(text).trim() === "";
+    });
+}
+export function richTextBlocksToPlainText(blocks) {
+    return sanitizeRichTextBlocks(blocks)
+        .map((block) => {
+        if (block.type === "divider") {
+            return "";
+        }
+        if (block.type === "checkbox") {
+            return markdownToPlainText(block.markdown);
+        }
+        if (block.type === "image") {
+            return block.alt ?? "";
+        }
+        return block.type === "code"
+            ? block.text
+            : markdownToPlainText(block.markdown);
+    })
+        .join(" ")
+        .replace(/\s+/g, " ")
+        .trim();
+}
+export function editorHtmlToMarkdown(html) {
+    const sanitized = normalizeTypography(decodeHtmlText(sanitizeRichTextHtml(html)
+        .replace(/<br>/g, "  \n")
+        .replace(/<strong>([\s\S]*?)<\/strong>/g, (_, value) => {
+        return `**${decodeHtmlText(stripTags(value))}**`;
+    })
+        .replace(/<em>([\s\S]*?)<\/em>/g, (_, value) => {
+        return `_${decodeHtmlText(stripTags(value))}_`;
+    })
+        .replace(/<code>([\s\S]*?)<\/code>/g, (_, value) => {
+        return `\`${decodeHtmlText(stripTags(value)).replace(/`/g, "\\`")}\``;
+    })
+        .replace(/<a href="([^"]*)">([\s\S]*?)<\/a>/g, (_, href, value) => {
+        return `[${decodeHtmlText(stripTags(value))}](${decodeHtmlText(href)})`;
+    })
+        .replace(/<a>([\s\S]*?)<\/a>/g, (_, value) => {
+        return decodeHtmlText(stripTags(value));
+    })
+        .replace(/<[^>]+>/g, "")))
+        .replace(/\u00a0/g, " ")
+        .trim();
+    return sanitized;
+}
+export function markdownToEditorHtml(markdown) {
+    const tokens = [];
+    let html = escapeHtmlText(normalizeTypography(markdown));
+    html = html.replace(/`([^`\n]+)`/g, (_, value) => {
+        const token = pushToken(tokens, `<code>${value}</code>`);
+        return token;
+    });
+    html = html.replace(/\[([^\]\n]+)\]\(([^)\s]+)\)/g, (_, label, href) => {
+        const safeHref = getSafeUrl(decodeHtmlText(href));
+        return safeHref ? `<a href="${safeHref}">${label}</a>` : label;
+    });
+    html = html
+        .replace(/\*\*([^*\n]+)\*\*/g, "<strong>$1</strong>")
+        .replace(/_([^_\n]+)_/g, "<em>$1</em>")
+        .replace(/ {2}\n/g, "<br>")
+        .replace(/\n/g, "<br>");
+    tokens.forEach((value, index) => {
+        html = html.replace(tokenPlaceholder(index), value);
+    });
+    return html;
+}
+export function sanitizeRichTextHtml(html) {
+    return html
+        .replace(/<!--[\s\S]*?-->/g, "")
+        .replace(/<script[\s\S]*?<\/script>/gi, "")
+        .replace(/<style[\s\S]*?<\/style>/gi, "")
+        .replace(/<b(\s[^>]*)?>/gi, "<strong>")
+        .replace(/<\/b>/gi, "</strong>")
+        .replace(/<i(\s[^>]*)?>/gi, "<em>")
+        .replace(/<\/i>/gi, "</em>")
+        .replace(/<\/?([a-z0-9]+)([^>]*)>/gi, (match, rawTag, rawAttrs) => {
+        const tag = String(rawTag).toLowerCase();
+        const closing = match.startsWith("</");
+        if (!allowedInlineTags.has(tag)) {
+            return "";
+        }
+        if (closing) {
+            return tag === "br" ? "" : `</${tag}>`;
+        }
+        if (tag === "a") {
+            const href = getSafeAttribute(rawAttrs, "href");
+            return href ? `<a href="${href}">` : "<a>";
+        }
+        return tag === "br" ? "<br>" : `<${tag}>`;
+    });
+}
+function sanitizeRichTextBlock(block) {
+    if (!isRecord(block)) {
+        return [];
+    }
+    const id = readBlockId(block);
+    const type = block.type;
+    if (type === "code") {
+        return [{ id, type, text: String(block.text ?? "") }];
+    }
+    if (type === "divider") {
+        return [{ id, type }];
+    }
+    if (type === "image") {
+        return [
+            {
+                id,
+                type,
+                ...(typeof block.assetId === "string" && block.assetId.trim()
+                    ? { assetId: block.assetId.trim() }
+                    : {}),
+                ...(typeof block.alt === "string" && block.alt.trim()
+                    ? { alt: markdownToPlainText(editorHtmlToMarkdown(block.alt)) }
+                    : {}),
+            },
+        ];
+    }
+    if (typeof type === "string" && textBlockTypes.has(type)) {
+        const markdown = typeof block.markdown === "string"
+            ? block.markdown
+            : typeof block.text === "string"
+                ? block.text
+                : typeof block.html === "string"
+                    ? editorHtmlToMarkdown(block.html)
+                    : "";
+        if (type === "checkbox") {
+            return [
+                {
+                    id,
+                    type,
+                    checked: Boolean(block.checked),
+                    markdown: sanitizeMarkdown(markdown),
+                },
+            ];
+        }
+        return [
+            {
+                id,
+                type: type,
+                markdown: sanitizeMarkdown(markdown),
+            },
+        ];
+    }
+    return [];
+}
+function readBlockId(block) {
+    return typeof block.id === "string" && block.id.trim()
+        ? block.id.trim()
+        : createRichTextBlockId();
+}
+function createUniqueRichTextBlockId(existingIds) {
+    let id = createRichTextBlockId();
+    while (existingIds.has(id)) {
+        id = createRichTextBlockId();
+    }
+    return id;
+}
+function markdownToPlainText(value) {
+    return value
+        .replace(/`([^`]*)`/g, "$1")
+        .replace(/\*\*([^*]*)\*\*/g, "$1")
+        .replace(/_([^_]*)_/g, "$1")
+        .replace(/\[([^\]]*)\]\([^)]+\)/g, "$1")
+        .replace(/[#>*`_[\]()]/g, " ")
+        .replace(/\s+/g, " ")
+        .trim();
+}
+function sanitizeMarkdown(value) {
+    return normalizeTypography(value)
+        .replace(/<!--[\s\S]*?-->/g, "")
+        .trim();
+}
+function normalizeTypography(value) {
+    const tokens = [];
+    let normalized = value.replace(/`([^`\n]+)`/g, (match) => {
+        return pushToken(tokens, match);
+    });
+    normalized = normalized.replace(/\[([^\]\n]+)\]\(([^)\s]+)\)/g, (_match, label, href) => {
+        return `[${label}](${pushToken(tokens, href)})`;
+    });
+    normalized = normalized
+        .replace(/––/g, "—")
+        .replace(/–-/g, "—")
+        .replace(/---/g, "—")
+        .replace(/--/g, "–");
+    tokens.forEach((token, index) => {
+        normalized = normalized.replace(tokenPlaceholder(index), token);
+    });
+    return normalized;
+}
+function stripTags(value) {
+    return value.replace(/<[^>]+>/g, "");
+}
+function getSafeAttribute(attrs, name) {
+    const value = getPlainAttribute(attrs, name);
+    const safeValue = getSafeUrl(value);
+    if (!safeValue) {
+        return "";
+    }
+    return escapeAttribute(safeValue);
+}
+function getSafeUrl(value) {
+    const trimmed = value.trim();
+    if (!trimmed || /^javascript:/i.test(trimmed)) {
+        return "";
+    }
+    return trimmed;
+}
+function getPlainAttribute(attrs, name) {
+    const pattern = new RegExp(`${name}\\s*=\\s*("([^"]*)"|'([^']*)'|([^\\s>]+))`, "i");
+    const match = attrs.match(pattern);
+    return match?.[2] ?? match?.[3] ?? match?.[4] ?? "";
+}
+function escapeAttribute(value) {
+    return value
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;");
+}
+function escapeHtmlText(value) {
+    return value
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;");
+}
+function decodeHtmlText(value) {
+    return value
+        .replace(/&nbsp;/g, " ")
+        .replace(/&#160;/g, " ")
+        .replace(/&#xA0;/gi, " ")
+        .replace(/&amp;/g, "&")
+        .replace(/&lt;/g, "<")
+        .replace(/&gt;/g, ">")
+        .replace(/&quot;/g, '"')
+        .replace(/&apos;/g, "'")
+        .replace(/&#39;/g, "'");
+}
+function pushToken(tokens, value) {
+    const index = tokens.push(value) - 1;
+    return tokenPlaceholder(index);
+}
+function tokenPlaceholder(index) {
+    return `@@RICHTEXTTOKEN${index}@@`;
+}
+function isRecord(value) {
+    return typeof value === "object" && value !== null;
+}

package/dist/saveControl.d.ts

@@ -0,0 +1,8 @@
+export declare function getEditorSaveControlState({ isDirty, isSaving, saveLabel, }: {
+    isDirty: boolean;
+    isSaving: boolean;
+    saveLabel: string;
+}): {
+    disabled: boolean;
+    label: string;
+};

package/dist/saveControl.js

@@ -0,0 +1,9 @@
+export function getEditorSaveControlState({ isDirty, isSaving, saveLabel, }) {
+    if (isSaving) {
+        return { disabled: true, label: "Saving..." };
+    }
+    if (!isDirty) {
+        return { disabled: true, label: "No changes to save" };
+    }
+    return { disabled: false, label: saveLabel };
+}

package/dist/session.d.ts

@@ -0,0 +1,27 @@
+import type { RichTextDocument } from "./types";
+export type EditorDirtyScope = "all" | "content";
+export type EditorSessionValue<Metadata = unknown> = {
+    document: RichTextDocument;
+    metadata?: Metadata;
+};
+export type EditorSessionOptions<Metadata> = {
+    dirtyScope?: EditorDirtyScope;
+    equals?: (left: EditorSessionValue<Metadata>, right: EditorSessionValue<Metadata>) => boolean;
+    initialBaselineValue?: EditorSessionValue<Metadata>;
+    initialValue: EditorSessionValue<Metadata>;
+    onSave: (value: EditorSessionValue<Metadata>) => Promise<unknown>;
+};
+export type EditorSession<Metadata> = {
+    getValue: () => EditorSessionValue<Metadata>;
+    isDirty: () => boolean;
+    isSaving: () => boolean;
+    markClean: (value?: EditorSessionValue<Metadata>) => void;
+    reset: () => EditorSessionValue<Metadata>;
+    save: () => Promise<unknown>;
+    setOnSave: (onSave: (value: EditorSessionValue<Metadata>) => Promise<unknown>) => void;
+    subscribe: (listener: () => void) => () => void;
+    update: (value: EditorSessionValue<Metadata>) => void;
+};
+export declare function createEditorSession<Metadata = unknown>({ dirtyScope, equals, initialBaselineValue, initialValue, onSave, }: EditorSessionOptions<Metadata>): EditorSession<Metadata>;
+export declare function defaultEditorSessionEquals<Metadata>(left: EditorSessionValue<Metadata>, right: EditorSessionValue<Metadata>, dirtyScope?: EditorDirtyScope): boolean;
+export declare function canonicalSerialize(value: unknown): string;

package/dist/session.js

@@ -0,0 +1,78 @@
+export function createEditorSession({ dirtyScope = "all", equals, initialBaselineValue, initialValue, onSave, }) {
+    let baseline = cloneValue(initialBaselineValue ?? initialValue);
+    let currentValue = cloneValue(initialValue);
+    let saving = false;
+    let saveHandler = onSave;
+    const listeners = new Set();
+    const valuesEqual = equals ??
+        ((left, right) => defaultEditorSessionEquals(left, right, dirtyScope));
+    function emitChange() {
+        listeners.forEach((listener) => listener());
+    }
+    return {
+        getValue: () => currentValue,
+        isDirty: () => !valuesEqual(currentValue, baseline),
+        isSaving: () => saving,
+        markClean: (value) => {
+            baseline = cloneValue(value ?? currentValue);
+            emitChange();
+        },
+        reset: () => {
+            currentValue = cloneValue(baseline);
+            emitChange();
+            return currentValue;
+        },
+        save: async () => {
+            if (saving) {
+                return;
+            }
+            saving = true;
+            emitChange();
+            try {
+                const valueToSave = cloneValue(currentValue);
+                const result = await saveHandler(valueToSave);
+                baseline = cloneValue(valueToSave);
+                return result;
+            }
+            finally {
+                saving = false;
+                emitChange();
+            }
+        },
+        setOnSave: (nextOnSave) => {
+            saveHandler = nextOnSave;
+        },
+        subscribe: (listener) => {
+            listeners.add(listener);
+            return () => listeners.delete(listener);
+        },
+        update: (value) => {
+            currentValue = cloneValue(value);
+            emitChange();
+        },
+    };
+}
+export function defaultEditorSessionEquals(left, right, dirtyScope = "all") {
+    if (dirtyScope === "content") {
+        return (canonicalSerialize(left.document) === canonicalSerialize(right.document));
+    }
+    return canonicalSerialize(left) === canonicalSerialize(right);
+}
+export function canonicalSerialize(value) {
+    return JSON.stringify(sortValue(value));
+}
+function sortValue(value) {
+    if (Array.isArray(value)) {
+        return value.map(sortValue);
+    }
+    if (value && typeof value === "object") {
+        return Object.fromEntries(Object.entries(value)
+            .filter(([, entryValue]) => entryValue !== undefined)
+            .sort(([left], [right]) => left.localeCompare(right))
+            .map(([key, entryValue]) => [key, sortValue(entryValue)]));
+    }
+    return value;
+}
+function cloneValue(value) {
+    return JSON.parse(JSON.stringify(value));
+}

package/dist/sessionRegistry.d.ts

@@ -0,0 +1,24 @@
+export type EditorExitAction = () => void | Promise<void>;
+export type EditorSessionRegistrySnapshot = {
+    dirty: boolean;
+    error: string | null;
+    pendingExit: boolean;
+    saving: boolean;
+};
+export type EditorSessionRegistry = {
+    discardAndExit: () => void;
+    getSnapshot: () => EditorSessionRegistrySnapshot;
+    register: (session: RegisteredEditorSession) => () => void;
+    requestExit: (action: EditorExitAction) => Promise<boolean>;
+    saveAndExit: () => Promise<void>;
+    stay: () => void;
+    subscribe: (listener: () => void) => () => void;
+};
+type RegisteredEditorSession = {
+    isDirty: () => boolean;
+    reset: () => unknown;
+    save: () => Promise<unknown>;
+    subscribe: (listener: () => void) => () => void;
+};
+export declare function createEditorSessionRegistry(): EditorSessionRegistry;
+export {};

package/dist/sessionRegistry.js

@@ -0,0 +1,87 @@
+const cleanSnapshot = {
+    dirty: false,
+    error: null,
+    pendingExit: false,
+    saving: false,
+};
+export function createEditorSessionRegistry() {
+    const sessions = new Set();
+    const sessionUnsubscribers = new Map();
+    const listeners = new Set();
+    let pendingAction = null;
+    let snapshot = cleanSnapshot;
+    function emitChange(changes = {}) {
+        snapshot = {
+            ...snapshot,
+            ...changes,
+            dirty: Array.from(sessions).some((session) => session.isDirty()),
+        };
+        listeners.forEach((listener) => listener());
+    }
+    function clearPendingExit() {
+        pendingAction = null;
+        emitChange({ error: null, pendingExit: false, saving: false });
+    }
+    return {
+        discardAndExit: () => {
+            const action = pendingAction;
+            sessions.forEach((session) => {
+                if (session.isDirty()) {
+                    session.reset();
+                }
+            });
+            clearPendingExit();
+            void action?.();
+        },
+        getSnapshot: () => snapshot,
+        register: (session) => {
+            sessions.add(session);
+            sessionUnsubscribers.set(session, session.subscribe(() => emitChange()));
+            emitChange();
+            return () => {
+                sessionUnsubscribers.get(session)?.();
+                sessionUnsubscribers.delete(session);
+                sessions.delete(session);
+                emitChange();
+            };
+        },
+        requestExit: async (action) => {
+            if (!Array.from(sessions).some((session) => session.isDirty())) {
+                await action();
+                return true;
+            }
+            pendingAction = action;
+            emitChange({ error: null, pendingExit: true });
+            return false;
+        },
+        saveAndExit: async () => {
+            const action = pendingAction;
+            if (!action || snapshot.saving) {
+                return;
+            }
+            emitChange({ error: null, saving: true });
+            try {
+                for (const session of sessions) {
+                    if (session.isDirty()) {
+                        await session.save();
+                    }
+                }
+                clearPendingExit();
+                await action();
+            }
+            catch (error) {
+                emitChange({
+                    error: error instanceof Error ? error.message : "Unable to save changes.",
+                    pendingExit: true,
+                    saving: false,
+                });
+                throw error;
+            }
+        },
+        stay: clearPendingExit,
+        subscribe: (listener) => {
+            listeners.add(listener);
+            return () => listeners.delete(listener);
+        },
+    };
+}

package/dist/types.d.ts

@@ -0,0 +1,34 @@
+export type RichTextBlock = {
+    id: string;
+    type: "paragraph";
+    markdown: string;
+} | {
+    id: string;
+    type: "heading";
+    markdown: string;
+} | {
+    id: string;
+    type: "quote";
+    markdown: string;
+} | {
+    id: string;
+    type: "checkbox";
+    checked: boolean;
+    markdown: string;
+} | {
+    id: string;
+    type: "code";
+    text: string;
+} | {
+    id: string;
+    type: "divider";
+} | {
+    id: string;
+    type: "image";
+    assetId?: string;
+    alt?: string;
+};
+export type RichTextDocument = {
+    contentBlocks: RichTextBlock[];
+    title: string;
+};

package/dist/types.js

@@ -0,0 +1 @@
+export {};