@bayonai/rich-text-editor 0.1.2

package/dist-cjs/richText.js

@@ -0,0 +1,307 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createEmptyRichTextBlocks = createEmptyRichTextBlocks;
+exports.createRichTextBlockId = createRichTextBlockId;
+exports.sanitizeRichTextBlocks = sanitizeRichTextBlocks;
+exports.isRichTextBlocksEmpty = isRichTextBlocksEmpty;
+exports.richTextBlocksToPlainText = richTextBlocksToPlainText;
+exports.editorHtmlToMarkdown = editorHtmlToMarkdown;
+exports.markdownToEditorHtml = markdownToEditorHtml;
+exports.sanitizeRichTextHtml = sanitizeRichTextHtml;
+const allowedInlineTags = new Set(["a", "br", "code", "em", "strong"]);
+const textBlockTypes = new Set(["paragraph", "heading", "quote", "checkbox"]);
+function createEmptyRichTextBlocks() {
+    return [{ id: createRichTextBlockId(), type: "paragraph", markdown: "" }];
+}
+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
+ */
+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();
+}
+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() === "";
+    });
+}
+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();
+}
+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;
+}
+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;
+}
+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-cjs/saveControl.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getEditorSaveControlState = getEditorSaveControlState;
+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-cjs/session.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createEditorSession = createEditorSession;
+exports.defaultEditorSessionEquals = defaultEditorSessionEquals;
+exports.canonicalSerialize = canonicalSerialize;
+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();
+        },
+    };
+}
+function defaultEditorSessionEquals(left, right, dirtyScope = "all") {
+    if (dirtyScope === "content") {
+        return (canonicalSerialize(left.document) === canonicalSerialize(right.document));
+    }
+    return canonicalSerialize(left) === canonicalSerialize(right);
+}
+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-cjs/sessionRegistry.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createEditorSessionRegistry = createEditorSessionRegistry;
+const cleanSnapshot = {
+    dirty: false,
+    error: null,
+    pendingExit: false,
+    saving: false,
+};
+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-cjs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist-cjs/writingStats.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getWritingStats = getWritingStats;
+const richText_1 = require("./richText");
+function getWritingStats(value) {
+    const plainText = (0, richText_1.richTextBlocksToPlainText)(value);
+    const wordCount = plainText ? plainText.split(" ").length : 0;
+    return {
+        readingMinutes: Math.max(1, Math.ceil(wordCount / 225)),
+        wordCount,
+    };
+}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@bayonai/rich-text-editor",
+  "version": "0.1.2",
+  "description": "Reusable rich text editing, rendering, and unsaved-change session controls.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist-cjs/index.js"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js",
+      "require": "./dist-cjs/react/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "dist-cjs",
+    "CHANGELOG.md",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json && node scripts/write-esm-extensions.mjs && tsc -p tsconfig.cjs.json && node scripts/write-cjs.mjs",
+    "lint": "tsc --noEmit -p tsconfig.json",
+    "test": "vitest run"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "typescript": "^5",
+    "vitest": "^4.1.6"
+  }
+}