@pilotiq/tiptap 3.12.0 → 3.14.0

package/dist/index.js

@@ -1,5 +1,6 @@
 export { RichTextField, DEFAULT_TOOLBAR_GROUPS, DEFAULT_TEXT_COLORS, DEFAULT_HIGHLIGHT_COLORS, } from './RichTextField.js';
 export { Block } from './Block.js';
+export { defaultBlocks, faqBlock, alertBlock, summaryBlock, keyTakeawaysBlock, prosConsBlock, } from './blocks/index.js';
 export { MentionProvider, } from './MentionProvider.js';
 export { registerTiptap } from './register.js';
 export { createPlainTextEditor, plainTextOf, plainTextToDoc, } from './PlainTextEditor.js';

package/dist/react/AlertNodeView.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import { type NodeViewProps } from '@tiptap/react';
+export declare function AlertNodeView({ node, updateAttributes, editor }: NodeViewProps): ReactElement;
+//# sourceMappingURL=AlertNodeView.d.ts.map

package/dist/react/AlertNodeView.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { NodeViewWrapper, NodeViewContent } from '@tiptap/react';
+import { Popover } from '@base-ui/react/popover';
+import { ALERT_VARIANTS, ALERT_ICON_KEYS, buildAlertIconSvg, sanitizeIconSvg, coerceAlertType, } from '../extensions/alertVariants.js';
+import { Palette } from './Palette.js';
+/**
+ * React NodeView for the `alert` content block — a shadcn-style callout on the
+ * panel's theme tokens. Icon in column one, editable title + body in column
+ * two. Editable mode adds in-block controls (top-right): a variant picker, an
+ * icon picker (curated inline-SVG library + a "Custom SVG" paste field — no
+ * `lucide-react`), and a color swatch for the `custom` variant.
+ *
+ * Editable regions are the child nodes (`alertTitle` / `alertBody`) rendered
+ * through the single `<NodeViewContent>` hole; the wrapper styles them via
+ * child selectors so the nodes' `renderHTML` stays semantic (consumer owns the
+ * read-side CSS — see `render.ts`). Custom SVG is sanitized via
+ * `sanitizeIconSvg` before it's stored AND when it renders.
+ */
+const VARIANT_BOX = {
+    info: 'border-blue-500/30 bg-blue-50/40 dark:bg-blue-950/20',
+    warning: 'border-amber-500/30 bg-amber-50/40 dark:bg-amber-950/20',
+    success: 'border-emerald-500/30 bg-emerald-50/40 dark:bg-emerald-950/20',
+    tip: 'border-violet-500/30 bg-violet-50/40 dark:bg-violet-950/20',
+    custom: 'border-border bg-card',
+};
+const VARIANT_ICON_COLOR = {
+    info: 'text-blue-600 dark:text-blue-400',
+    warning: 'text-amber-600 dark:text-amber-400',
+    success: 'text-emerald-600 dark:text-emerald-400',
+    tip: 'text-violet-600 dark:text-violet-400',
+    custom: 'text-foreground',
+};
+const VARIANT_LABEL = {
+    info: 'Info', warning: 'Warning', success: 'Success', tip: 'Tip', custom: 'Custom',
+};
+const COLOR_SWATCHES = [
+    { value: '#ef4444', label: 'Red' },
+    { value: '#f97316', label: 'Orange' },
+    { value: '#eab308', label: 'Yellow' },
+    { value: '#22c55e', label: 'Green' },
+    { value: '#06b6d4', label: 'Cyan' },
+    { value: '#3b82f6', label: 'Blue' },
+    { value: '#8b5cf6', label: 'Violet' },
+    { value: '#ec4899', label: 'Pink' },
+    { value: '#64748b', label: 'Slate' },
+    { value: '#0f172a', label: 'Ink' },
+];
+// Renders a full <svg> string (library or sanitized custom) sized to fill.
+function IconSlot({ svg, className }) {
+    return (_jsx("span", { className: 'inline-flex shrink-0 [&>svg]:size-full ' + (className ?? ''), dangerouslySetInnerHTML: { __html: svg } }));
+}
+const chevron = (_jsx("svg", { viewBox: "0 0 24 24", className: "h-3 w-3", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": true, children: _jsx("path", { d: "m6 9 6 6 6-6" }) }));
+const ctrlBtn = 'flex items-center gap-1 rounded px-1.5 py-0.5 text-xs text-muted-foreground transition-opacity ' +
+    'hover:bg-accent hover:text-accent-foreground focus-visible:opacity-100 opacity-0 [.pilotiq-alert:hover_&]:opacity-100';
+export function AlertNodeView({ node, updateAttributes, editor }) {
+    const variant = coerceAlertType(node.attrs['type']);
+    const iconKey = String(node.attrs['icon'] ?? '');
+    const iconSvg = String(node.attrs['iconSvg'] ?? '');
+    const color = String(node.attrs['color'] ?? '');
+    const editable = editor.isEditable;
+    const iconFull = buildAlertIconSvg(iconKey, iconSvg, variant);
+    const tinted = variant === 'custom' && color !== '';
+    const [iconOpen, setIconOpen] = useState(false);
+    const [svgMode, setSvgMode] = useState(false);
+    const [svgDraft, setSvgDraft] = useState('');
+    const [svgError, setSvgError] = useState(false);
+    const boxStyle = tinted
+        ? {
+            borderColor: `color-mix(in srgb, ${color} 35%, transparent)`,
+            backgroundColor: `color-mix(in srgb, ${color} 8%, transparent)`,
+        }
+        : undefined;
+    const closeIconPicker = () => { setIconOpen(false); setSvgMode(false); setSvgDraft(''); setSvgError(false); };
+    const pickIcon = (key) => { updateAttributes({ icon: key, iconSvg: '' }); closeIconPicker(); };
+    const applyCustomSvg = () => {
+        const clean = sanitizeIconSvg(svgDraft);
+        if (!clean) {
+            setSvgError(true);
+            return;
+        }
+        updateAttributes({ iconSvg: clean, icon: '' });
+        closeIconPicker();
+    };
+    return (_jsxs(NodeViewWrapper, { "data-type": "alert", "data-alert-type": variant, style: boxStyle, className: 'pilotiq-alert relative my-3 grid grid-cols-[auto_1fr] items-start gap-x-3 gap-y-1 rounded-lg border px-4 py-3 text-sm ' +
+            '[&_.pilotiq-alert-title]:font-medium [&_.pilotiq-alert-title]:leading-tight ' +
+            '[&_.pilotiq-alert-description]:text-muted-foreground [&_.pilotiq-alert-description_p]:my-0 ' +
+            VARIANT_BOX[variant], children: [editable ? (_jsxs(Popover.Root, { open: iconOpen, onOpenChange: (o) => (o ? setIconOpen(true) : closeIconPicker()), children: [_jsx(Popover.Trigger, { render: _jsx("button", { type: "button", contentEditable: false, "aria-label": "Alert icon", className: 'mt-0.5 rounded hover:bg-accent ' + (tinted ? '' : VARIANT_ICON_COLOR[variant]), style: tinted ? { color } : undefined, children: _jsx(IconSlot, { svg: iconFull, className: "h-4 w-4" }) }) }), _jsx(Popover.Portal, { children: _jsx(Popover.Positioner, { side: "bottom", align: "start", sideOffset: 6, className: "isolate z-50", children: _jsx(Popover.Popup, { className: "w-64 rounded-md border bg-popover p-2 text-popover-foreground shadow-md outline-hidden", children: !svgMode ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "grid grid-cols-6 gap-1", children: ALERT_ICON_KEYS.map((key) => (_jsx("button", { type: "button", title: key, "aria-label": key, onClick: () => pickIcon(key), className: 'flex size-8 items-center justify-center rounded hover:bg-accent hover:text-accent-foreground ' +
+                                                    (!iconSvg && key === iconKey ? 'bg-accent text-accent-foreground' : 'text-muted-foreground'), children: _jsx(IconSlot, { svg: buildAlertIconSvg(key, '', variant), className: "h-4 w-4" }) }, key))) }), _jsxs("div", { className: "mt-2 flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => { setSvgMode(true); setSvgDraft(iconSvg); setSvgError(false); }, className: "flex-1 rounded px-2 py-1 text-xs text-muted-foreground hover:bg-accent hover:text-accent-foreground", children: "Custom SVG\u2026" }), _jsx("button", { type: "button", onClick: () => { updateAttributes({ icon: '', iconSvg: '' }); closeIconPicker(); }, className: "flex-1 rounded px-2 py-1 text-xs text-muted-foreground hover:bg-accent hover:text-accent-foreground", children: "Default" })] })] })) : (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("textarea", { value: svgDraft, onChange: (e) => { setSvgDraft(e.target.value); setSvgError(false); }, rows: 5, spellCheck: false, placeholder: "<svg viewBox='0 0 24 24'>\u2026</svg>", className: 'w-full resize-y rounded border bg-background p-2 font-mono text-xs outline-none focus-visible:ring-1 focus-visible:ring-ring ' +
+                                                (svgError ? 'border-destructive' : 'border-input') }), svgError && _jsx("p", { className: "text-xs text-destructive", children: "Not a valid SVG (must start with <svg>)." }), _jsxs("div", { className: "flex items-center justify-end gap-1", children: [_jsx("button", { type: "button", onClick: () => setSvgMode(false), className: "rounded px-2 py-1 text-xs text-muted-foreground hover:bg-accent hover:text-accent-foreground", children: "Back" }), _jsx("button", { type: "button", onClick: applyCustomSvg, className: "rounded bg-primary px-2 py-1 text-xs text-primary-foreground hover:bg-primary/90", children: "Apply" })] })] })) }) }) })] })) : (_jsx("div", { contentEditable: false, className: 'mt-0.5 ' + (tinted ? '' : VARIANT_ICON_COLOR[variant]), style: tinted ? { color } : undefined, children: _jsx(IconSlot, { svg: iconFull, className: "h-4 w-4" }) })), editable && (_jsxs("div", { className: "absolute right-1.5 top-1.5 flex items-center gap-1", contentEditable: false, children: [variant === 'custom' && (_jsx(Palette, { trigger: _jsx("button", { type: "button", "aria-label": "Alert color", className: ctrlBtn, children: _jsx("span", { className: "size-3 rounded-full border border-border/60", style: { background: color || 'var(--color-muted-foreground)' } }) }), swatches: COLOR_SWATCHES, custom: true, activeColor: color || undefined, onPick: (value) => updateAttributes({ color: value }), onClear: () => updateAttributes({ color: '' }), clearLabel: "No color" })), _jsxs(Popover.Root, { children: [_jsx(Popover.Trigger, { render: _jsxs("button", { type: "button", "aria-label": "Alert variant", className: ctrlBtn, children: [VARIANT_LABEL[variant], chevron] }) }), _jsx(Popover.Portal, { children: _jsx(Popover.Positioner, { side: "bottom", align: "end", sideOffset: 4, className: "isolate z-50", children: _jsx(Popover.Popup, { className: "min-w-32 rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-hidden", children: ALERT_VARIANTS.map((v) => (_jsx(Popover.Close, { render: _jsxs("button", { type: "button", onClick: () => updateAttributes({ type: v }), className: 'flex w-full items-center gap-2 rounded px-2 py-1 text-left text-sm hover:bg-accent hover:text-accent-foreground ' +
+                                                    (v === variant ? 'bg-accent/50' : ''), children: [_jsx("span", { className: VARIANT_ICON_COLOR[v], children: _jsx(IconSlot, { svg: buildAlertIconSvg('', '', v), className: "h-3.5 w-3.5" }) }), VARIANT_LABEL[v]] }) }, v))) }) }) })] })] })), _jsx(NodeViewContent, { className: "col-start-2 min-w-0" })] }));
+}

package/dist/react/MarkdownEditor.js

@@ -15,6 +15,7 @@ import { useCollabRoom, getCollabExtensions, useToast, } from '@pilotiq/pilotiq/
 import { useCollabSeed } from '@rudderjs/sync/react';
 import { AiSuggestionExtension } from '../extensions/AiSuggestionExtension.js';
 import { AiInlineDiffExtension } from '../extensions/AiInlineDiffExtension.js';
+import { Alert, AlertTitle, AlertBody, ContentBlockKeymap } from '../extensions/contentBlocks.js';
 import { useAiSuggestionBridge } from './useAiSuggestionBridge.js';
 import { useAiInlineDiff, useIsAiInlineDiffActive, readAiDiffViewMarker } from './useAiInlineDiff.js';
 import { AiSuggestionBanner } from './AiSuggestionBanner.js';
@@ -39,6 +40,7 @@ const SvgIcons = {
     orderedList: (_jsxs("svg", { ...ICON_PROPS, children: [_jsx("line", { x1: "10", y1: "6", x2: "21", y2: "6" }), _jsx("line", { x1: "10", y1: "12", x2: "21", y2: "12" }), _jsx("line", { x1: "10", y1: "18", x2: "21", y2: "18" }), _jsx("path", { d: "M4 6h1v4" }), _jsx("path", { d: "M4 10h2" }), _jsx("path", { d: "M6 18H4c0-1 2-2 2-3s-1-1.5-2-1" })] })),
     blockquote: (_jsxs("svg", { ...ICON_PROPS, children: [_jsx("path", { d: "M3 21c3 0 7-1 7-8V5a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h3" }), _jsx("path", { d: "M15 21c3 0 7-1 7-8V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h3" })] })),
     codeBlock: (_jsxs("svg", { ...ICON_PROPS, children: [_jsx("polyline", { points: "16 18 22 12 16 6" }), _jsx("polyline", { points: "8 6 2 12 8 18" })] })),
+    alert: (_jsxs("svg", { ...ICON_PROPS, children: [_jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }), _jsx("path", { d: "M12 9v4" }), _jsx("path", { d: "M12 17h.01" })] })),
     attachFiles: (_jsx("svg", { ...ICON_PROPS, children: _jsx("path", { d: "m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" }) })),
     pencil: (_jsxs("svg", { ...ICON_PROPS, children: [_jsx("path", { d: "M12 20h9" }), _jsx("path", { d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z" })] })),
     source: (_jsxs("svg", { ...ICON_PROPS, children: [_jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), _jsx("polyline", { points: "14 2 14 8 20 8" }), _jsx("line", { x1: "9", y1: "13", x2: "15", y2: "13" }), _jsx("line", { x1: "9", y1: "17", x2: "15", y2: "17" })] })),
@@ -140,6 +142,12 @@ export function MarkdownEditor({ name, fragmentKey, defaultValue, placeholder, d
             // for deleted text. Host's `<AiSuggestionBanner>` drives Accept /
             // Reject via the extension's commands.
             AiInlineDiffExtension,
+            // Alert content block — round-trips to `:::alert{type=…} Title` via the
+            // node's `markdown` storage spec; renders the same shadcn NodeView.
+            Alert,
+            AlertTitle,
+            AlertBody,
+            ContentBlockKeymap,
             ...collabExtensions,
         ],
         // Collab takes ownership of the document — passing `content` would
@@ -366,6 +374,16 @@ export function MarkdownEditor({ name, fragmentKey, defaultValue, placeholder, d
             case 'codeBlock':
                 c.toggleCodeBlock().run();
                 break;
+            case 'alert':
+                c.insertContent({
+                    type: 'alert',
+                    attrs: { type: 'info' },
+                    content: [
+                        { type: 'alertTitle', content: [{ type: 'text', text: 'Info' }] },
+                        { type: 'alertBody', content: [{ type: 'paragraph' }] },
+                    ],
+                }).run();
+                break;
             case 'attachFiles':
                 onAttachClick();
                 break;
@@ -398,6 +416,7 @@ export function MarkdownEditor({ name, fragmentKey, defaultValue, placeholder, d
         orderedList: 'Numbered list',
         blockquote: 'Quote',
         codeBlock: 'Code block',
+        alert: 'Alert',
         attachFiles: 'Attach file',
     };
     const wrapperStyle = {};

package/dist/react/TiptapEditor.js

@@ -13,6 +13,7 @@ import Image from '@tiptap/extension-image';
 import { Table, TableRow, TableCell, TableHeader } from '@tiptap/extension-table';
 import { Details, DetailsSummary, DetailsContent } from '@tiptap/extension-details';
 import { Grid, GridColumn } from '../extensions/GridExtension.js';
+import { contentBlockNodes } from '../extensions/contentBlocks.js';
 import { Popover } from '@base-ui/react/popover';
 import { useCollabRoom, getCollabExtensions, useRowCoords, parseRowFieldPath } from '@pilotiq/pilotiq/react';
 import { useCollabSeed } from '@rudderjs/sync/react';
@@ -276,6 +277,9 @@ function ClientEditor(props) {
             // `pilotiq-grid-cols-N`.
             Grid,
             GridColumn,
+            // Inline content blocks — labelled, editable-in-place regions:
+            // Key takeaways / Summary / FAQ / Alert / Pros & cons.
+            ...contentBlockNodes,
             Placeholder.configure({ placeholder: placeholder ?? 'Start writing…' }),
             // BlockNodeExtension carries the block registry on its options —
             // NodeViews mount in a separate React tree and can't see context.

package/dist/render.d.ts

@@ -26,8 +26,11 @@
  *           / image.src + alt + title + width + height
  *           / tableCell.colspan + rowspan + colwidth (also tableHeader)
  *           / mergeTag.id / mention.id + label + trigger
- *   custom blocks — render to `<div data-type="..." data-attrs="...">` so
- *           consumers can replay or style by data-type.
+ *   default blocks — the `pilotiqBlock` node's built-in types (faq / alert /
+ *           summary / key-takeaways / pros-cons) render to semantic
+ *           `<div class="pilotiq-...">` markup; consumers own the CSS.
+ *   custom blocks — any other type renders to `<div data-type="..."
+ *           data-attrs="...">` so consumers can replay or style by data-type.
  */
 export interface RenderRichTextOptions {
     /**

package/dist/render.js

@@ -26,9 +26,15 @@
  *           / image.src + alt + title + width + height
  *           / tableCell.colspan + rowspan + colwidth (also tableHeader)
  *           / mergeTag.id / mention.id + label + trigger
- *   custom blocks — render to `<div data-type="..." data-attrs="...">` so
- *           consumers can replay or style by data-type.
+ *   default blocks — the `pilotiqBlock` node's built-in types (faq / alert /
+ *           summary / key-takeaways / pros-cons) render to semantic
+ *           `<div class="pilotiq-...">` markup; consumers own the CSS.
+ *   custom blocks — any other type renders to `<div data-type="..."
+ *           data-attrs="...">` so consumers can replay or style by data-type.
  */
+// Pure variant primitives (no Tiptap runtime) — keeps render.ts server-safe
+// while sharing the alert icon/label source of truth with the editor NodeView.
+import { coerceAlertType, ALERT_VARIANT_LABEL, buildAlertIconSvg } from './extensions/alertVariants.js';
 /**
  * Render Tiptap content to HTML.
  *
@@ -139,9 +145,20 @@ function renderNode(node, opts) {
         case 'detailsContent': return renderChildren(n, opts);
         case 'grid': return renderGrid(n, opts);
         case 'gridColumn': return wrap('div', n, opts);
+        case 'keyTakeaways': return labeledBlockHtml('pilotiq-key-takeaways', 'Key takeaways', n, opts);
+        case 'summary': return labeledBlockHtml('pilotiq-summary', 'Summary', n, opts);
+        case 'faq': return labeledBlockHtml('pilotiq-faq', 'FAQ', n, opts);
+        case 'faqItem': return `<div class="pilotiq-faq-item">${renderChildren(n, opts)}</div>`;
+        case 'faqQuestion': return `<div class="pilotiq-faq-question"><span class="pilotiq-faq-marker">Q</span><span class="pilotiq-faq-text">${renderChildren(n, opts)}</span></div>`;
+        case 'faqAnswer': return `<div class="pilotiq-faq-answer"><span class="pilotiq-faq-marker">A</span><div class="pilotiq-faq-body">${renderChildren(n, opts)}</div></div>`;
+        case 'alert': return renderAlertNode(n, opts);
+        case 'prosCons': return `<div class="pilotiq-pros-cons">${renderChildren(n, opts)}</div>`;
+        case 'prosColumn': return labeledBlockHtml('pilotiq-pros', 'Pros', n, opts);
+        case 'consColumn': return labeledBlockHtml('pilotiq-cons', 'Cons', n, opts);
         case 'mergeTag': return renderMergeTag(n, opts);
         case 'mention': return renderMention(n, opts);
         case 'text': return renderText(n);
+        case 'pilotiqBlock': return renderPilotiqBlock(n, opts);
         default:
             if (opts.renderBlock)
                 return opts.renderBlock(n);
@@ -340,6 +357,53 @@ function clampGridColumnsForRender(raw) {
     const trunc = Math.trunc(n);
     return trunc === 3 ? 3 : 2;
 }
+// ─── Inline content blocks (labelled editable nodes) ─────────────────
+//
+// Mirrors the editor's `renderHTML` (extensions/contentBlocks.ts): a small
+// label above an editable body. Consumer owns the `pilotiq-*` CSS. Covers
+// keyTakeaways / summary / faq / alert / prosCons (+ pros/cons columns).
+function labeledBlockHtml(cssClass, label, n, opts) {
+    return (`<div class="${cssClass}">` +
+        `<div class="pilotiq-block-label">${escapeHtml(label)}</div>` +
+        `<div class="pilotiq-block-body">${renderChildren(n, opts)}</div>` +
+        `</div>`);
+}
+// shadcn-style callout: icon + editable title + description. Mirrors the
+// editor NodeView (`AlertNodeView`); `coerceAlertType` / `ALERT_ICON_INNER` /
+// labels are shared from `alertVariants` so the two never drift. Consumer owns
+// the `.pilotiq-alert*` CSS.
+function renderAlertNode(n, opts) {
+    const type = coerceAlertType(n.attrs?.['type']);
+    const icon = typeof n.attrs?.['icon'] === 'string' ? n.attrs['icon'] : '';
+    const iconSvg = typeof n.attrs?.['iconSvg'] === 'string' ? n.attrs['iconSvg'] : '';
+    const color = typeof n.attrs?.['color'] === 'string' ? n.attrs['color'] : '';
+    const kids = Array.isArray(n.content) ? n.content : [];
+    const title = kids.find((k) => k?.type === 'alertTitle');
+    const body = kids.find((k) => k?.type === 'alertBody');
+    const titleHtml = title ? renderChildren(title, opts) : escapeHtml(ALERT_VARIANT_LABEL[type]);
+    const bodyHtml = body ? renderChildren(body, opts) : '';
+    // Custom variant paints from the chosen color (mirrors the editor's
+    // `color-mix` tint); CSS-injection-safe because the value is the parsed
+    // attr, only emitted when it matches a strict color literal.
+    const tinted = type === 'custom' && isSafeColor(color);
+    const style = tinted
+        ? ` style="border-color:color-mix(in srgb,${color} 35%,transparent);background-color:color-mix(in srgb,${color} 8%,transparent)"`
+        : '';
+    const iconStyle = tinted ? ` style="color:${color}"` : '';
+    return (`<div class="pilotiq-alert pilotiq-alert-${type}" data-alert-type="${type}" role="note"${style}>` +
+        `<span class="pilotiq-alert-icon" aria-hidden="true"${iconStyle}>${buildAlertIconSvg(icon, iconSvg, type)}</span>` +
+        `<div class="pilotiq-alert-title">${titleHtml}</div>` +
+        `<div class="pilotiq-alert-description">${bodyHtml}</div>` +
+        `</div>`);
+}
+// Only emit a color into inline CSS when it's a plain literal (hex / rgb(a) /
+// hsl(a) / a CSS keyword) — defends the `style="…"` interpolation against
+// injection via a tampered `color` attr.
+function isSafeColor(value) {
+    return /^#[0-9a-fA-F]{3,8}$/.test(value)
+        || /^(rgb|hsl)a?\([0-9.,%\s/]+\)$/.test(value)
+        || /^[a-zA-Z]+$/.test(value);
+}
 // ─── Merge tags + mentions ───────────────────────────────────────────
 /**
  * Render a `mergeTag` atom — either substitute the value from
@@ -386,6 +450,104 @@ function renderCustomBlock(n) {
     const inner = n.content ? renderChildren(n, {}) : '';
     return `<div data-type="${escapeAttr(type)}"${dataAttrs}>${inner}</div>`;
 }
+// ─── Default blocks (pilotiqBlock node, keyed on attrs.blockType) ─────
+//
+// The custom-block node (`pilotiqBlock`) carries `blockType` + `blockData`.
+// The blocks shipped by default in `RichTextField` (FAQ / Alert / Summary /
+// Key takeaways / Pros & cons) render to semantic HTML here; every other
+// (host-defined) block type falls back to `opts.renderBlock` or the generic
+// `data-attrs` div. Consumers own the CSS for the `pilotiq-*` classes.
+function renderPilotiqBlock(n, opts) {
+    const attrs = (n.attrs ?? {});
+    const blockType = String(attrs['blockType'] ?? '');
+    let data = attrs['blockData'];
+    if (typeof data === 'string') {
+        try {
+            data = JSON.parse(data);
+        }
+        catch {
+            data = {};
+        }
+    }
+    const d = (data && typeof data === 'object' ? data : {});
+    switch (blockType) {
+        case 'faq': return renderFaqBlock(d);
+        case 'alert': return renderAlertBlock(d);
+        case 'summary': return renderSummaryBlock(d);
+        case 'key-takeaways': return renderKeyTakeawaysBlock(d);
+        case 'pros-cons': return renderProsConsBlock(d);
+        default:
+            if (opts.renderBlock)
+                return opts.renderBlock(n);
+            return renderCustomBlock(n);
+    }
+}
+/** Escape a plain-text field value and split blank-line-separated paragraphs. */
+function blockParagraphs(raw) {
+    const s = String(raw ?? '').trim();
+    if (s === '')
+        return '';
+    return s
+        .split(/\n{2,}/)
+        .map((p) => `<p>${escapeHtml(p).replace(/\n/g, '<br>')}</p>`)
+        .join('');
+}
+/** Coerce a field value to a clean `string[]` (TagsInput stores an array). */
+function blockStringList(raw) {
+    if (!Array.isArray(raw))
+        return [];
+    return raw.map((x) => String(x ?? '').trim()).filter((s) => s !== '');
+}
+function renderFaqBlock(d) {
+    const items = Array.isArray(d['items']) ? d['items'] : [];
+    const body = items
+        .map((it) => {
+        const q = escapeHtml(String(it['question'] ?? '').trim());
+        if (q === '')
+            return '';
+        const a = blockParagraphs(it['answer']);
+        return `<details class="pilotiq-faq-item"><summary>${q}</summary><div class="pilotiq-faq-answer">${a}</div></details>`;
+    })
+        .join('');
+    if (body === '')
+        return '';
+    return `<div class="pilotiq-faq">${body}</div>`;
+}
+const ALERT_TYPES = new Set(['info', 'warning', 'success', 'tip']);
+function renderAlertBlock(d) {
+    let type = String(d['type'] ?? '').trim().toLowerCase();
+    if (!ALERT_TYPES.has(type))
+        type = 'info';
+    const content = blockParagraphs(d['content']);
+    return `<div class="pilotiq-alert pilotiq-alert-${type}" role="note">${content}</div>`;
+}
+function renderSummaryBlock(d) {
+    const content = blockParagraphs(d['content']);
+    if (content === '')
+        return '';
+    return (`<div class="pilotiq-summary">` +
+        `<div class="pilotiq-summary-label">Summary</div>` +
+        `<div class="pilotiq-summary-body">${content}</div>` +
+        `</div>`);
+}
+function renderKeyTakeawaysBlock(d) {
+    const points = blockStringList(d['points']);
+    if (points.length === 0)
+        return '';
+    const lis = points.map((p) => `<li>${escapeHtml(p)}</li>`).join('');
+    return (`<div class="pilotiq-key-takeaways">` +
+        `<div class="pilotiq-key-takeaways-label">Key takeaways</div>` +
+        `<ul>${lis}</ul>` +
+        `</div>`);
+}
+function renderProsConsBlock(d) {
+    const pros = blockStringList(d['pros']);
+    const cons = blockStringList(d['cons']);
+    if (pros.length === 0 && cons.length === 0)
+        return '';
+    const column = (label, cls, items) => `<div class="pilotiq-${cls}"><h4>${label}</h4><ul>${items.map((i) => `<li>${escapeHtml(i)}</li>`).join('')}</ul></div>`;
+    return `<div class="pilotiq-pros-cons">${column('Pros', 'pros', pros)}${column('Cons', 'cons', cons)}</div>`;
+}
 // ─── Escapers + sanitizers ───────────────────────────────────────────
 function escapeHtml(s) {
     return s.replace(/[&<>"']/g, ch => HTML_ESCAPES[ch] ?? ch);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pilotiq/tiptap",
-  "version": "3.12.0",
+  "version": "3.14.0",
   "description": "Tiptap rich-text editor adapter for @pilotiq/pilotiq — slash menu, draggable blocks, custom-block API",
   "license": "MIT",
   "repository": {
@@ -87,11 +87,13 @@
     "@types/react-dom": "^19",
     "esbuild": "^0.27",
     "jsdom": "^29.1.1",
+    "markdown-it": "^14",
+    "@types/markdown-it": "^14",
     "react": "^19",
     "react-dom": "^19",
     "tiptap-markdown": "^0.9",
     "typescript": "^5",
-    "@pilotiq/pilotiq": "^0.37.0"
+    "@pilotiq/pilotiq": "^0.40.0"
   },
   "author": "Suleiman Shahbari",
   "scripts": {