@estokad/next 0.1.0

package/dist/overlay.bundle.js

@@ -0,0 +1,535 @@
+"use strict";
+// Visual edit overlay (M3.3).
+//
+// Injected into the customer's site by @estokad/next/EstokadProvider when
+// Next.js draft mode is on. Walks the DOM for `data-estokad-field`
+// attributes (emitted by the <Estokad.*> components in M2.3), draws a
+// hover outline, lets the editor click into a contenteditable wrapper,
+// and posts field-changed events back to the Studio via postMessage.
+//
+// Per docs/visual-edit.md § 4 the wire protocol is:
+//
+//   overlay → Studio: { type: 'estokad:overlay-ready', version }
+//                     { type: 'estokad:field-changed', entry, field, value }
+//                     { type: 'estokad:field-focused', entry, field }
+//                     { type: 'estokad:field-blurred', entry, field }
+//                     { type: 'estokad:navigation', from, to }
+//   Studio → overlay: { type: 'estokad:studio-ready', userId }
+//                     { type: 'estokad:set-mode', mode: 'preview' | 'edit' }
+//                     { type: 'estokad:focus-field', entry, field }
+//                     { type: 'estokad:refresh', reason }
+//                     { type: 'estokad:field-update', entry, field, value }
+//
+// Origin checking is strict on every message — we only trust messages from
+// the studio origin recorded at handshake time.
+const VERSION = '0.1.0';
+const STUDIO_ORIGIN_COOKIE = '__estokad_studio_origin';
+const FIELD_ATTR = 'data-estokad-field';
+const ENTRY_ATTR = 'data-estokad-entry';
+const FIELDTYPE_ATTR = 'data-estokad-fieldtype';
+const DEBOUNCE_MS = 200;
+const state = {
+    mode: 'preview',
+    studioOrigin: null,
+    outlineEl: null,
+    tooltipEl: null,
+    hoveredEl: null,
+    editingEl: null,
+    debounceTimer: null,
+};
+function init() {
+    state.studioOrigin = readCookie(STUDIO_ORIGIN_COOKIE);
+    if (!state.studioOrigin) {
+        // No studio origin → no parent to talk to. Stay dormant.
+        return;
+    }
+    injectStyles();
+    state.outlineEl = createOutline();
+    state.tooltipEl = createTooltip();
+    document.body.appendChild(state.outlineEl);
+    document.body.appendChild(state.tooltipEl);
+    attachListeners();
+    observeMutations();
+    // Tell the Studio we're alive.
+    postToStudio({ type: 'estokad:overlay-ready', version: VERSION });
+    // Listen for the Studio side.
+    window.addEventListener('message', onParentMessage);
+    // Track SPA navigation so the Studio can update its iframe state.
+    let lastPath = window.location.pathname;
+    const checkNav = () => {
+        if (window.location.pathname !== lastPath) {
+            const from = lastPath;
+            lastPath = window.location.pathname;
+            postToStudio({ type: 'estokad:navigation', from, to: lastPath });
+        }
+    };
+    window.addEventListener('popstate', checkNav);
+    // History.pushState/replaceState patch — small, unobtrusive.
+    patchHistory(checkNav);
+}
+function attachListeners() {
+    // Single delegated mousemove listener walks the path on each event;
+    // cheap enough at human-scale interaction rates.
+    document.addEventListener('mousemove', onMouseMove, true);
+    document.addEventListener('click', onClick, true);
+    window.addEventListener('scroll', repositionOutline, true);
+    window.addEventListener('resize', repositionOutline);
+}
+function onMouseMove(event) {
+    if (state.mode !== 'edit') {
+        hideOutline();
+        return;
+    }
+    if (state.editingEl)
+        return;
+    const target = closestEditable(event.target);
+    if (target === state.hoveredEl) {
+        if (target)
+            repositionOutline();
+        return;
+    }
+    state.hoveredEl = target;
+    if (target) {
+        showOutline(target);
+    }
+    else {
+        hideOutline();
+    }
+}
+function onClick(event) {
+    if (state.mode !== 'edit')
+        return;
+    const target = closestEditable(event.target);
+    if (!target)
+        return;
+    event.preventDefault();
+    event.stopPropagation();
+    // Asset fields don't go contenteditable — they ask the Studio to open
+    // its asset picker modal. The Studio replies with field-update which
+    // we apply to the IMG src below.
+    if (target.getAttribute(FIELDTYPE_ATTR) === 'asset') {
+        postToStudio({
+            type: 'estokad:open-asset-picker',
+            entry: target.getAttribute(ENTRY_ATTR) ?? '',
+            field: target.getAttribute(FIELD_ATTR) ?? '',
+        });
+        return;
+    }
+    beginEdit(target);
+}
+function beginEdit(el) {
+    if (state.editingEl)
+        endEdit({ commit: true });
+    state.editingEl = el;
+    el.setAttribute('contenteditable', 'true');
+    el.classList.add('estokad-editing');
+    el.focus();
+    hideOutline();
+    postToStudio({
+        type: 'estokad:field-focused',
+        entry: el.getAttribute(ENTRY_ATTR) ?? '',
+        field: el.getAttribute(FIELD_ATTR) ?? '',
+    });
+    el.addEventListener('input', onEditingInput);
+    el.addEventListener('blur', onEditingBlur);
+    el.addEventListener('keydown', onEditingKeyDown);
+}
+function endEdit(options) {
+    const el = state.editingEl;
+    if (!el)
+        return;
+    if (state.debounceTimer) {
+        clearTimeout(state.debounceTimer);
+        state.debounceTimer = null;
+    }
+    if (options.commit)
+        flushFieldChange(el);
+    el.removeAttribute('contenteditable');
+    el.classList.remove('estokad-editing');
+    el.removeEventListener('input', onEditingInput);
+    el.removeEventListener('blur', onEditingBlur);
+    el.removeEventListener('keydown', onEditingKeyDown);
+    postToStudio({
+        type: 'estokad:field-blurred',
+        entry: el.getAttribute(ENTRY_ATTR) ?? '',
+        field: el.getAttribute(FIELD_ATTR) ?? '',
+    });
+    state.editingEl = null;
+}
+function onEditingInput() {
+    const el = state.editingEl;
+    if (!el)
+        return;
+    if (state.debounceTimer)
+        clearTimeout(state.debounceTimer);
+    state.debounceTimer = setTimeout(() => flushFieldChange(el), DEBOUNCE_MS);
+}
+function onEditingBlur() {
+    endEdit({ commit: true });
+}
+function onEditingKeyDown(event) {
+    if (event.key === 'Escape') {
+        event.preventDefault();
+        endEdit({ commit: false });
+        return;
+    }
+    const el = state.editingEl;
+    const isRichText = el?.getAttribute(FIELDTYPE_ATTR) === 'richText';
+    if (isRichText) {
+        // M3.8d — keyboard mark toggles. document.execCommand is deprecated
+        // but the only viable cross-browser path until we ship a real
+        // Tiptap-in-iframe bundle. The contenteditable wraps the selection
+        // in <strong>/<em>/<u>; the M3.8d serializer lifts those into
+        // ProseMirror marks at flush time.
+        const meta = event.metaKey || event.ctrlKey;
+        if (!meta)
+            return;
+        if (event.key === 'b' || event.key === 'B') {
+            event.preventDefault();
+            document.execCommand('bold');
+            onEditingInput();
+            return;
+        }
+        if (event.key === 'i' || event.key === 'I') {
+            event.preventDefault();
+            document.execCommand('italic');
+            onEditingInput();
+            return;
+        }
+        if (event.key === 'u' || event.key === 'U') {
+            event.preventDefault();
+            document.execCommand('underline');
+            onEditingInput();
+            return;
+        }
+        if (event.key === 'k' || event.key === 'K') {
+            event.preventDefault();
+            const href = window.prompt('Link URL:', 'https://');
+            if (href && href !== 'https://') {
+                document.execCommand('createLink', false, href);
+                onEditingInput();
+            }
+            return;
+        }
+        return;
+    }
+    if (event.key === 'Enter' && !event.shiftKey) {
+        // Single-line text: Enter commits + blurs.
+        event.preventDefault();
+        endEdit({ commit: true });
+    }
+}
+function flushFieldChange(el) {
+    const entry = el.getAttribute(ENTRY_ATTR) ?? '';
+    const field = el.getAttribute(FIELD_ATTR) ?? '';
+    const fieldType = el.getAttribute(FIELDTYPE_ATTR);
+    // M3.8c → M3.8d — richText fields round-trip through Tiptap on the
+    // Studio side (hidden textarea holds JSON). The overlay walks the
+    // contenteditable's DOM and produces a ProseMirror doc that carries
+    // inline marks (bold, italic, underline, strike, code, link). Block
+    // structure is paragraph-only for now; full Tiptap nodes (lists,
+    // blockquotes, headings) would need a real Tiptap-in-iframe bundle.
+    if (fieldType === 'richText') {
+        const doc = serializeRichText(el);
+        postToStudio({
+            type: 'estokad:field-changed',
+            entry,
+            field,
+            fieldtype: 'richText',
+            value: JSON.stringify(doc),
+        });
+        return;
+    }
+    const value = el.textContent ?? '';
+    postToStudio({ type: 'estokad:field-changed', entry, field, value });
+}
+// DOM → ProseMirror walker. Splits into paragraphs on <br>/<p>/<div>
+// boundaries, collects inline marks from ancestors. Empty paragraphs
+// preserved so the editor can hold blank lines.
+function serializeRichText(root) {
+    const paragraphs = [[]];
+    function pushText(text, marks) {
+        if (!text)
+            return;
+        const node = marks.length > 0 ? { type: 'text', text, marks } : { type: 'text', text };
+        paragraphs[paragraphs.length - 1].push(node);
+    }
+    function newParagraph() {
+        paragraphs.push([]);
+    }
+    function walk(node, marks) {
+        if (node.nodeType === Node.TEXT_NODE) {
+            pushText(node.nodeValue ?? '', marks);
+            return;
+        }
+        if (!(node instanceof Element))
+            return;
+        const tag = node.tagName.toLowerCase();
+        if (tag === 'br') {
+            newParagraph();
+            return;
+        }
+        if (tag === 'p' || tag === 'div') {
+            // Block boundary. Open a new paragraph unless current is empty
+            // (avoids leading-blank-paragraph noise from contenteditable).
+            if (paragraphs[paragraphs.length - 1].length > 0)
+                newParagraph();
+            for (const child of Array.from(node.childNodes))
+                walk(child, marks);
+            newParagraph();
+            return;
+        }
+        const nextMarks = markFor(node, marks);
+        for (const child of Array.from(node.childNodes))
+            walk(child, nextMarks);
+    }
+    for (const child of Array.from(root.childNodes))
+        walk(child, []);
+    return {
+        type: 'doc',
+        content: paragraphs.map((nodes) => ({
+            type: 'paragraph',
+            ...(nodes.length > 0 && { content: nodes }),
+        })),
+    };
+}
+function markFor(el, inherited) {
+    const tag = el.tagName.toLowerCase();
+    switch (tag) {
+        case 'strong':
+        case 'b':
+            return appendMark(inherited, { type: 'bold' });
+        case 'em':
+        case 'i':
+            return appendMark(inherited, { type: 'italic' });
+        case 'u':
+            return appendMark(inherited, { type: 'underline' });
+        case 's':
+        case 'strike':
+        case 'del':
+            return appendMark(inherited, { type: 'strike' });
+        case 'code':
+            return appendMark(inherited, { type: 'code' });
+        case 'a': {
+            const href = el.getAttribute('href');
+            return appendMark(inherited, { type: 'link', attrs: { href: href ?? '#' } });
+        }
+        default:
+            return inherited;
+    }
+}
+function appendMark(marks, mark) {
+    if (marks.some((m) => m.type === mark.type))
+        return marks;
+    return [...marks, mark];
+}
+// --- outline + tooltip ---------------------------------------------------
+function createOutline() {
+    const el = document.createElement('div');
+    el.className = 'estokad-outline';
+    el.style.display = 'none';
+    return el;
+}
+function createTooltip() {
+    const el = document.createElement('div');
+    el.className = 'estokad-tooltip';
+    el.style.display = 'none';
+    return el;
+}
+function showOutline(target) {
+    const outline = state.outlineEl;
+    const tooltip = state.tooltipEl;
+    if (!outline || !tooltip)
+        return;
+    const rect = target.getBoundingClientRect();
+    positionOverlay(outline, rect);
+    outline.style.display = 'block';
+    const fieldName = target.getAttribute(FIELD_ATTR) ?? '';
+    tooltip.textContent = `→ ${fieldName}`;
+    tooltip.style.left = `${rect.left + window.scrollX}px`;
+    tooltip.style.top = `${rect.top + window.scrollY - 22}px`;
+    tooltip.style.display = 'block';
+}
+function hideOutline() {
+    if (state.outlineEl)
+        state.outlineEl.style.display = 'none';
+    if (state.tooltipEl)
+        state.tooltipEl.style.display = 'none';
+    state.hoveredEl = null;
+}
+function repositionOutline() {
+    if (!state.hoveredEl)
+        return;
+    const outline = state.outlineEl;
+    const tooltip = state.tooltipEl;
+    if (!outline || !tooltip)
+        return;
+    const rect = state.hoveredEl.getBoundingClientRect();
+    positionOverlay(outline, rect);
+    tooltip.style.left = `${rect.left + window.scrollX}px`;
+    tooltip.style.top = `${rect.top + window.scrollY - 22}px`;
+}
+function positionOverlay(el, rect) {
+    el.style.left = `${rect.left + window.scrollX}px`;
+    el.style.top = `${rect.top + window.scrollY}px`;
+    el.style.width = `${rect.width}px`;
+    el.style.height = `${rect.height}px`;
+}
+// --- DOM walker ----------------------------------------------------------
+function closestEditable(target) {
+    let node = target;
+    while (node && node !== document.body) {
+        if (node instanceof HTMLElement && node.hasAttribute(FIELD_ATTR))
+            return node;
+        node = node.parentElement;
+    }
+    return null;
+}
+function observeMutations() {
+    const observer = new MutationObserver(() => {
+        // No per-element listener attachment needed (we use document-level
+        // delegation). The observer exists so we can hide the outline if the
+        // currently hovered element is removed by a route change.
+        if (state.hoveredEl && !document.body.contains(state.hoveredEl)) {
+            hideOutline();
+        }
+        if (state.editingEl && !document.body.contains(state.editingEl)) {
+            state.editingEl = null;
+        }
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+}
+// --- bridge --------------------------------------------------------------
+function postToStudio(message) {
+    if (!state.studioOrigin)
+        return;
+    if (window.parent === window)
+        return; // not iframed
+    window.parent.postMessage(message, state.studioOrigin);
+}
+function onParentMessage(event) {
+    if (!state.studioOrigin || event.origin !== state.studioOrigin)
+        return;
+    if (typeof event.data !== 'object' || event.data === null)
+        return;
+    const msg = event.data;
+    switch (msg.type) {
+        case 'estokad:studio-ready':
+            // Acknowledge nothing — handshake complete.
+            break;
+        case 'estokad:set-mode':
+            if (msg.mode === 'preview' || msg.mode === 'edit') {
+                state.mode = msg.mode;
+                if (msg.mode === 'preview') {
+                    if (state.editingEl)
+                        endEdit({ commit: true });
+                    hideOutline();
+                }
+            }
+            break;
+        case 'estokad:focus-field':
+            if (typeof msg.field === 'string') {
+                const el = document.querySelector(`[${FIELD_ATTR}="${cssEscape(msg.field)}"]`);
+                if (el) {
+                    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                    beginEdit(el);
+                }
+            }
+            break;
+        case 'estokad:field-update':
+            if (typeof msg.field === 'string' && typeof msg.value === 'string') {
+                const sel = `[${FIELD_ATTR}="${cssEscape(msg.field)}"]`;
+                const el = document.querySelector(sel);
+                if (!el || el === state.editingEl)
+                    break;
+                if (el.getAttribute(FIELDTYPE_ATTR) === 'asset' && el instanceof HTMLImageElement) {
+                    // Asset fields update via the IMG src.
+                    el.src = msg.value;
+                }
+                else {
+                    el.textContent = msg.value;
+                }
+            }
+            break;
+        case 'estokad:refresh':
+            window.location.reload();
+            break;
+    }
+}
+// --- helpers -------------------------------------------------------------
+function readCookie(name) {
+    const match = document.cookie.split('; ').find((row) => row.startsWith(`${name}=`));
+    if (!match)
+        return null;
+    const value = match.slice(name.length + 1);
+    try {
+        return decodeURIComponent(value);
+    }
+    catch {
+        return value;
+    }
+}
+function cssEscape(s) {
+    // Native CSS.escape exists in all current browsers; use a tiny fallback
+    // for the unlikely case it's missing (older WebViews).
+    if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function')
+        return CSS.escape(s);
+    return s.replace(/(["'\\\][])/g, '\\$1');
+}
+function patchHistory(cb) {
+    const orig = { push: history.pushState, replace: history.replaceState };
+    history.pushState = function (...args) {
+        const r = orig.push.apply(history, args);
+        cb();
+        return r;
+    };
+    history.replaceState = function (...args) {
+        const r = orig.replace.apply(history, args);
+        cb();
+        return r;
+    };
+}
+function injectStyles() {
+    const css = `
+:where(.estokad-outline) {
+  position: absolute;
+  pointer-events: none;
+  border: 1.5px dashed #00D4FF;
+  border-radius: 2px;
+  z-index: 999998;
+  box-sizing: border-box;
+}
+:where(.estokad-tooltip) {
+  position: absolute;
+  pointer-events: none;
+  z-index: 999999;
+  background: #00D4FF;
+  color: #0a0d10;
+  padding: 2px 8px;
+  border-radius: 2px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+}
+:where(.estokad-editing) {
+  outline: 1.5px solid #00D4FF !important;
+  outline-offset: 2px;
+  border-radius: 2px;
+  caret-color: #00D4FF;
+}
+`;
+    const style = document.createElement('style');
+    style.setAttribute('data-estokad-overlay', '');
+    style.textContent = css;
+    document.head.appendChild(style);
+}
+// --- bootstrap -----------------------------------------------------------
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init, { once: true });
+}
+else {
+    init();
+}
+//# sourceMappingURL=overlay.js.map

package/dist/provider.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+interface Props {
+    readonly children: ReactNode;
+    /** Override the route the overlay script loads from. Defaults to
+     *  `/api/estokad/overlay`, which the customer wires up by exporting
+     *  `estokadOverlayRoute` as the GET handler at that path. */
+    readonly overlaySrc?: string;
+}
+export declare function EstokadProvider({ children, overlaySrc }: Props): Promise<import("react/jsx-runtime").JSX.Element>;
+export {};
+//# sourceMappingURL=provider.d.ts.map

package/dist/provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../src/provider.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,UAAU,KAAK;IACb,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAA;IAC5B;;iEAE6D;IAC7D,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAC7B;AAED,wBAAsB,eAAe,CAAC,EAAE,QAAQ,EAAE,UAAmC,EAAE,EAAE,KAAK,oDAS7F"}

package/dist/provider.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// EstokadProvider — wraps the customer's app in `app/layout.tsx` and
+// injects the visual-edit overlay script when Next.js draft mode is on.
+//
+//   import { EstokadProvider } from '@estokad/next'
+//
+//   export default function RootLayout({ children }) {
+//     return (
+//       <html>
+//         <body>
+//           <EstokadProvider>{children}</EstokadProvider>
+//         </body>
+//       </html>
+//     )
+//   }
+//
+// In production (no draft cookie) this is a pass-through — zero overhead.
+// In draft mode it renders a `<script type="module" src="...">` that
+// loads the overlay bundle via the customer's own /api/estokad/overlay
+// route handler (which is mounted with `estokadOverlayRoute`).
+import { draftMode } from 'next/headers';
+export async function EstokadProvider({ children, overlaySrc = '/api/estokad/overlay' }) {
+    const { isEnabled } = await draftMode();
+    return (_jsxs(_Fragment, { children: [children, isEnabled ? _jsx("script", { type: "module", src: overlaySrc, async: true }) : null] }));
+}
+//# sourceMappingURL=provider.js.map

package/dist/provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.js","sourceRoot":"","sources":["../src/provider.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,wEAAwE;AACxE,EAAE;AACF,oDAAoD;AACpD,EAAE;AACF,uDAAuD;AACvD,eAAe;AACf,eAAe;AACf,iBAAiB;AACjB,0DAA0D;AAC1D,kBAAkB;AAClB,gBAAgB;AAChB,QAAQ;AACR,MAAM;AACN,EAAE;AACF,0EAA0E;AAC1E,qEAAqE;AACrE,uEAAuE;AACvE,+DAA+D;AAE/D,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAWxC,MAAM,CAAC,KAAK,UAAU,eAAe,CAAC,EAAE,QAAQ,EAAE,UAAU,GAAG,sBAAsB,EAAS;IAC5F,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,SAAS,EAAE,CAAA;IAEvC,OAAO,CACL,8BACG,QAAQ,EACR,SAAS,CAAC,CAAC,CAAC,iBAAQ,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAE,UAAU,EAAE,KAAK,SAAG,CAAC,CAAC,CAAC,IAAI,IAClE,CACJ,CAAA;AACH,CAAC"}

package/dist/rich-text.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+export interface TiptapDoc {
+    readonly type: 'doc';
+    readonly content?: ReadonlyArray<TiptapNode>;
+}
+export interface TiptapNode {
+    readonly type: string;
+    readonly attrs?: Record<string, unknown>;
+    readonly content?: ReadonlyArray<TiptapNode>;
+    readonly text?: string;
+    readonly marks?: ReadonlyArray<TiptapMark>;
+}
+export interface TiptapMark {
+    readonly type: string;
+    readonly attrs?: Record<string, unknown>;
+}
+export declare function renderRichText(doc: TiptapDoc): ReactNode;
+//# sourceMappingURL=rich-text.d.ts.map

package/dist/rich-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rich-text.d.ts","sourceRoot":"","sources":["../src/rich-text.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAA;IACpB,QAAQ,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAA;CAC7C;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACxC,QAAQ,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAA;IAC5C,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAA;CAC3C;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CACzC;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,SAAS,GAAG,SAAS,CAGxD"}

package/dist/rich-text.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function renderRichText(doc) {
+    if (doc?.type !== 'doc' || !doc.content)
+        return null;
+    return doc.content.map((node, i) => renderNode(node, `n${i}`));
+}
+function renderNode(node, key) {
+    switch (node.type) {
+        case 'paragraph':
+            return _jsx("p", { children: renderChildren(node) }, key);
+        case 'heading': {
+            const level = node.attrs?.['level'] ?? 2;
+            const Tag = `h${Math.min(Math.max(level, 1), 6)}`;
+            return _jsx(Tag, { children: renderChildren(node) }, key);
+        }
+        case 'text':
+            return renderText(node, key);
+        case 'bulletList':
+            return _jsx("ul", { children: renderChildren(node) }, key);
+        case 'orderedList':
+            return _jsx("ol", { children: renderChildren(node) }, key);
+        case 'listItem':
+            return _jsx("li", { children: renderChildren(node) }, key);
+        case 'blockquote':
+            return _jsx("blockquote", { children: renderChildren(node) }, key);
+        case 'codeBlock':
+            return (_jsx("pre", { children: _jsx("code", { children: renderChildren(node) }) }, key));
+        case 'horizontalRule':
+            return _jsx("hr", {}, key);
+        case 'hardBreak':
+            return _jsx("br", {}, key);
+        default:
+            return null;
+    }
+}
+function renderChildren(node) {
+    if (!node.content)
+        return null;
+    return node.content.map((child, i) => renderNode(child, `n${i}`));
+}
+function renderText(node, key) {
+    let element = node.text ?? '';
+    for (const mark of node.marks ?? []) {
+        element = wrapMark(mark, element);
+    }
+    return _jsx("span", { children: element }, key);
+}
+function wrapMark(mark, child) {
+    switch (mark.type) {
+        case 'bold':
+            return _jsx("strong", { children: child });
+        case 'italic':
+            return _jsx("em", { children: child });
+        case 'strike':
+            return _jsx("s", { children: child });
+        case 'underline':
+            return _jsx("u", { children: child });
+        case 'code':
+            return _jsx("code", { children: child });
+        case 'link': {
+            const href = String(mark.attrs?.['href'] ?? '#');
+            return (_jsx("a", { href: href, rel: "noreferrer", children: child }));
+        }
+        default:
+            return child;
+    }
+}
+//# sourceMappingURL=rich-text.js.map

package/dist/rich-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rich-text.js","sourceRoot":"","sources":["../src/rich-text.tsx"],"names":[],"mappings":"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"}