@pilotiq/tiptap 3.12.0 → 3.14.0

package/dist/extensions/alertVariants.js

@@ -0,0 +1,132 @@
+/**
+ * Alert variant primitives — shared by the node (`contentBlocks.ts`), its
+ * React NodeView (`AlertNodeView.tsx`), and the read-side serializer
+ * (`render.ts`). Kept dependency-free (no `@tiptap/*`) so the server
+ * renderer can import it without pulling a Tiptap runtime.
+ *
+ * `info` / `warning` / `success` / `tip` are presets (default icon + accent);
+ * `custom` is the user-driven variant (own icon + color, Phase 2).
+ */
+export const ALERT_VARIANTS = ['info', 'warning', 'success', 'tip', 'custom'];
+export const ALERT_VARIANT_LABEL = {
+    info: 'Info', warning: 'Warning', success: 'Success', tip: 'Tip', custom: 'Custom',
+};
+/** Coerce an unknown value to a known variant, defaulting to `info`. */
+export function coerceAlertType(value) {
+    return ALERT_VARIANTS.includes(String(value)) ? value : 'info';
+}
+/**
+ * Curated icon library — inner SVG markup (lucide paths) keyed by name. Shared
+ * by the NodeView picker (`AlertNodeView`) and the read-side renderer
+ * (`render.ts`) so the editor and published output never drift. Hand-picked
+ * (no `lucide-react` dep, no icon font) so the whole set is ~1-2KB gzipped.
+ * Wrap in `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
+ * stroke-width="2" stroke-linecap="round" stroke-linejoin="round">…</svg>`.
+ */
+export const ALERT_ICONS = {
+    info: '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>',
+    warning: '<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"/><path d="M12 9v4"/><path d="M12 17h.01"/>',
+    check: '<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>',
+    lightbulb: '<path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/>',
+    sparkles: '<path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .962 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.962 0z"/>',
+    bell: '<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>',
+    megaphone: '<path d="m3 11 18-5v12L3 14v-3z"/><path d="M11.6 16.8a3 3 0 1 1-5.8-1.6"/>',
+    flame: '<path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/>',
+    star: '<path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/>',
+    heart: '<path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/>',
+    shield: '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/>',
+    zap: '<path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/>',
+    flag: '<path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" x2="4" y1="22" y2="15"/>',
+    bookmark: '<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/>',
+    rocket: '<path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/>',
+    help: '<circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/>',
+    error: '<circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/>',
+    pin: '<path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/>',
+};
+/** Icon keys, in picker display order. */
+export const ALERT_ICON_KEYS = Object.keys(ALERT_ICONS);
+/** The default icon key per variant (used when the block sets no `icon`). */
+export const VARIANT_DEFAULT_ICON = {
+    info: 'info', warning: 'warning', success: 'check', tip: 'lightbulb', custom: 'sparkles',
+};
+/**
+ * Resolve the inner SVG for a block: the explicit `icon` override when set +
+ * known, else the variant's default. Shared by the editor + read-side render.
+ */
+export function resolveAlertIconInner(iconKey, variant) {
+    if (iconKey && ALERT_ICONS[iconKey])
+        return ALERT_ICONS[iconKey];
+    return ALERT_ICONS[VARIANT_DEFAULT_ICON[variant]];
+}
+// ── Custom SVG (user-pasted) — sanitized allowlist ───────────────────────────
+//
+// Custom SVG is raw user markup that renders on PUBLIC pages, so it's an XSS
+// surface. We sanitize with a conservative pure-string allowlist (no DOMPurify
+// — keeps the bundle lean and works server-side in render.ts): only known
+// presentational SVG tags + geometry/paint attributes survive; scripts, event
+// handlers, external refs (`use`/`image`/`a`/`href`), `<style>`, `<animate>`,
+// `<foreignObject>` and unknown attributes are dropped. Applied on input AND on
+// every render (defence in depth — a tampered stored attr stays safe).
+const SVG_ALLOWED_TAGS = new Set([
+    'svg', 'g', 'path', 'circle', 'ellipse', 'rect', 'line', 'polyline', 'polygon',
+    'defs', 'lineargradient', 'radialgradient', 'stop', 'title', 'desc', 'clippath',
+]);
+const SVG_ALLOWED_ATTRS = new Set([
+    'viewbox', 'xmlns', 'width', 'height', 'preserveaspectratio',
+    'fill', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin',
+    'stroke-dasharray', 'stroke-dashoffset', 'stroke-opacity', 'stroke-miterlimit',
+    'fill-opacity', 'fill-rule', 'clip-rule', 'clip-path', 'opacity', 'transform',
+    'd', 'cx', 'cy', 'r', 'rx', 'ry', 'x', 'y', 'x1', 'y1', 'x2', 'y2',
+    'points', 'class', 'gradientunits', 'gradienttransform', 'offset',
+    'stop-color', 'stop-opacity', 'id',
+]);
+/**
+ * Sanitize a user-pasted SVG string to a safe subset. Returns '' for anything
+ * that isn't an `<svg>` element or that sanitizes to nothing.
+ */
+export function sanitizeIconSvg(raw) {
+    if (typeof raw !== 'string')
+        return '';
+    let s = raw.trim();
+    if (!/^<svg[\s>]/i.test(s))
+        return '';
+    // Drop comments / CDATA / PIs / doctype, then dangerous element blocks whole.
+    s = s.replace(/<!--[\s\S]*?-->/g, '').replace(/<!\[CDATA\[[\s\S]*?\]\]>/g, '')
+        .replace(/<\?[\s\S]*?\?>/g, '').replace(/<!DOCTYPE[^>]*>/gi, '');
+    s = s.replace(/<(script|style|foreignObject)\b[\s\S]*?<\/\1\s*>/gi, '');
+    // Allowlist every remaining tag + its attributes.
+    s = s.replace(/<\/?([a-zA-Z][\w:-]*)((?:"[^"]*"|'[^']*'|[^>"'])*?)\s*(\/?)>/g, (_m, tag, attrs, slash) => {
+        const name = String(tag).toLowerCase();
+        if (!SVG_ALLOWED_TAGS.has(name))
+            return '';
+        if (_m.startsWith('</'))
+            return `</${name}>`;
+        const kept = [];
+        const attrRe = /([a-zA-Z_:][\w:.-]*)\s*=\s*("[^"]*"|'[^']*'|[^\s>]+)/g;
+        let am;
+        while ((am = attrRe.exec(attrs)) !== null) {
+            const an = (am[1] ?? '').toLowerCase();
+            if (!SVG_ALLOWED_ATTRS.has(an))
+                continue;
+            const av = (am[2] ?? '').replace(/^["']|["']$/g, '');
+            if (/javascript:|expression\(|[<>]/i.test(av))
+                continue;
+            kept.push(`${an}="${av.replace(/"/g, '&quot;')}"`);
+        }
+        return `<${name}${kept.length ? ' ' + kept.join(' ') : ''}${slash ? ' /' : ''}>`;
+    });
+    s = s.trim();
+    return /^<svg[\s>]/i.test(s) ? s : '';
+}
+const ICON_SVG_WRAP_OPEN = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">';
+/**
+ * Build the FULL `<svg>` string for a block: a sanitized user `iconSvg` when
+ * present, else the (library or variant-default) icon wrapped in the standard
+ * stroke svg. Shared by the editor NodeView and the read-side renderer.
+ */
+export function buildAlertIconSvg(iconKey, iconSvg, variant) {
+    const custom = sanitizeIconSvg(iconSvg);
+    if (custom)
+        return custom;
+    return `${ICON_SVG_WRAP_OPEN}${resolveAlertIconInner(iconKey, variant)}</svg>`;
+}

package/dist/extensions/contentBlocks.d.ts

@@ -0,0 +1,34 @@
+import { Node, Extension } from '@tiptap/core';
+export { ALERT_VARIANTS, ALERT_VARIANT_LABEL, coerceAlertType, type AlertType } from './alertVariants.js';
+export declare const KeyTakeaways: Node<any, any>;
+export declare const Summary: Node<any, any>;
+export declare const Faq: Node<any, any>;
+export declare const FaqItem: Node<any, any>;
+export declare const FaqQuestion: Node<any, any>;
+export declare const FaqAnswer: Node<any, any>;
+type AnyMd = any;
+/** Parse a directive info string (`alert{type=warning}`) into an attrs map. */
+export declare function parseDirectiveAttrs(info: string): Record<string, string>;
+/**
+ * Register the `:::alert{…}` block rule + HTML renderers on a markdown-it
+ * instance. Idempotent per instance. Wired as `Alert`'s `markdown.parse.setup`.
+ */
+export declare function setupAlertDirective(md: AnyMd): void;
+/**
+ * `tiptap-markdown` serializer for the Alert node → `:::alert{type=…} Title`.
+ * The title rides the opening fence line (admonition style); the body markdown
+ * sits between the fences.
+ */
+export declare function serializeAlertMarkdown(state: AnyMd, node: AnyMd): void;
+export declare const Alert: Node<any, any>;
+/** The Alert heading — a single editable line, defaults to the variant label. */
+export declare const AlertTitle: Node<any, any>;
+/** The Alert body — the editable description (`block+`). */
+export declare const AlertBody: Node<any, any>;
+export declare const ProsCons: Node<any, any>;
+export declare const ProsColumn: Node<any, any>;
+export declare const ConsColumn: Node<any, any>;
+export declare const ContentBlockKeymap: Extension<any, any>;
+/** All inline content-block extensions — registered in the editor's list. */
+export declare const contentBlockNodes: (Node<any, any> | Extension<any, any>)[];
+//# sourceMappingURL=contentBlocks.d.ts.map

package/dist/extensions/contentBlocks.js

@@ -0,0 +1,491 @@
+import { Node, Extension, mergeAttributes } from '@tiptap/core';
+import { ReactNodeViewRenderer } from '@tiptap/react';
+import { AlertNodeView } from '../react/AlertNodeView.js';
+import { coerceAlertType } from './alertVariants.js';
+// Re-exported for back-compat — the canonical definitions live in
+// `alertVariants.ts` (shared with the React NodeView + the read-side renderer).
+export { ALERT_VARIANTS, ALERT_VARIANT_LABEL, coerceAlertType } from './alertVariants.js';
+/** A labelled region whose body is ordinary editable content (`block+`). */
+function labeledBlock(spec) {
+    return Node.create({
+        name: spec.name,
+        group: 'block',
+        content: 'block+',
+        defining: true,
+        parseHTML() {
+            return [{ tag: `div[data-type="${spec.name}"]`, contentElement: '.pilotiq-block-body' }];
+        },
+        renderHTML({ HTMLAttributes }) {
+            return [
+                'div',
+                mergeAttributes(HTMLAttributes, { 'data-type': spec.name, class: spec.cssClass }),
+                ['div', { class: 'pilotiq-block-label', contenteditable: 'false' }, spec.label],
+                ['div', { class: 'pilotiq-block-body' }, 0],
+            ];
+        },
+    });
+}
+export const KeyTakeaways = labeledBlock({ name: 'keyTakeaways', label: 'Key takeaways', cssClass: 'pilotiq-key-takeaways' });
+export const Summary = labeledBlock({ name: 'summary', label: 'Summary', cssClass: 'pilotiq-summary' });
+// ── FAQ — structured question / answer items ──
+//
+// `faq` > `faqItem+`; each item is a `faqQuestion` (inline text, "Q" marker) +
+// a `faqAnswer` (block+, "A" marker). Authoring: Enter in a question jumps to
+// its answer; Cmd/Ctrl-Enter inside an item adds a new Q&A item below.
+const NEW_FAQ_ITEM = {
+    type: 'faqItem',
+    content: [{ type: 'faqQuestion' }, { type: 'faqAnswer', content: [{ type: 'paragraph' }] }],
+};
+export const Faq = Node.create({
+    name: 'faq',
+    group: 'block',
+    content: 'faqItem+',
+    defining: true,
+    parseHTML() {
+        return [{ tag: 'div[data-type="faq"]', contentElement: '.pilotiq-block-body' }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return [
+            'div',
+            mergeAttributes(HTMLAttributes, { 'data-type': 'faq', class: 'pilotiq-faq' }),
+            ['div', { class: 'pilotiq-block-label', contenteditable: 'false' }, 'FAQ'],
+            ['div', { class: 'pilotiq-block-body' }, 0],
+        ];
+    },
+    addKeyboardShortcuts() {
+        return {
+            // Enter drives the whole Q&A flow:
+            //   • in a question → jump to its answer;
+            //   • in an answer  → finish it and start a NEW Q&A item below (focus its
+            //     question). Repeatable: question → Enter → answer → Enter → next.
+            // (Shift-Enter still inserts a line break within an answer.)
+            Enter: ({ editor }) => {
+                const { $from, empty } = editor.state.selection;
+                if (!empty)
+                    return false;
+                for (let d = $from.depth; d > 0; d--) {
+                    const name = $from.node(d).type.name;
+                    if (name === 'faqQuestion') {
+                        return editor.chain().setTextSelection($from.after(d) + 1).focus().run();
+                    }
+                    if (name === 'faqAnswer') {
+                        const after = $from.after(d - 1); // position just after the faqItem
+                        return editor.chain().insertContentAt(after, NEW_FAQ_ITEM).setTextSelection(after + 2).focus().run();
+                    }
+                }
+                return false;
+            },
+            // Cmd/Ctrl-Enter anywhere in an item also adds a new Q&A item below.
+            'Mod-Enter': ({ editor }) => {
+                const { $from } = editor.state.selection;
+                for (let d = $from.depth; d > 0; d--) {
+                    if ($from.node(d).type.name === 'faqItem') {
+                        const after = $from.after(d);
+                        return editor.chain().insertContentAt(after, NEW_FAQ_ITEM).setTextSelection(after + 2).focus().run();
+                    }
+                }
+                return false;
+            },
+            // Backspace in an EMPTY question removes that whole Q&A item (and the
+            // whole FAQ block if it was the only item) — like emptying a list item.
+            Backspace: ({ editor }) => {
+                const { $from, empty } = editor.state.selection;
+                if (!empty)
+                    return false;
+                let qDepth = -1;
+                for (let d = $from.depth; d > 0; d--) {
+                    if ($from.node(d).type.name === 'faqQuestion') {
+                        qDepth = d;
+                        break;
+                    }
+                }
+                if (qDepth === -1)
+                    return false;
+                if ($from.node(qDepth).content.size > 0)
+                    return false; // question not empty → normal backspace
+                const faqDepth = qDepth - 2;
+                const itemDepth = qDepth - 1;
+                const faq = $from.node(faqDepth);
+                const faqStart = $from.before(faqDepth);
+                if (faq.childCount <= 1) {
+                    // last item → remove the whole FAQ block
+                    return editor.chain().deleteRange({ from: faqStart, to: faqStart + faq.nodeSize }).focus().run();
+                }
+                // remove just this Q&A item; drop the cursor into a neighbouring item
+                const itemStart = $from.before(itemDepth);
+                const itemEnd = itemStart + $from.node(itemDepth).nodeSize;
+                const caret = $from.index(faqDepth) === 0 ? faqStart + 3 : itemStart - 1;
+                return editor.chain().deleteRange({ from: itemStart, to: itemEnd }).setTextSelection(caret).focus().run();
+            },
+        };
+    },
+});
+export const FaqItem = Node.create({
+    name: 'faqItem',
+    group: 'faqItem',
+    content: 'faqQuestion faqAnswer',
+    defining: true,
+    parseHTML() {
+        return [{ tag: 'div[data-type="faqItem"]' }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ['div', mergeAttributes(HTMLAttributes, { 'data-type': 'faqItem', class: 'pilotiq-faq-item' }), 0];
+    },
+});
+export const FaqQuestion = Node.create({
+    name: 'faqQuestion',
+    content: 'inline*',
+    defining: true,
+    parseHTML() {
+        return [{ tag: 'div[data-type="faqQuestion"]', contentElement: '.pilotiq-faq-text' }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return [
+            'div',
+            mergeAttributes(HTMLAttributes, { 'data-type': 'faqQuestion', class: 'pilotiq-faq-question' }),
+            ['span', { class: 'pilotiq-faq-marker', contenteditable: 'false' }, 'Q'],
+            ['span', { class: 'pilotiq-faq-text' }, 0],
+        ];
+    },
+});
+export const FaqAnswer = Node.create({
+    name: 'faqAnswer',
+    content: 'block+',
+    defining: true,
+    parseHTML() {
+        return [{ tag: 'div[data-type="faqAnswer"]', contentElement: '.pilotiq-faq-body' }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return [
+            'div',
+            mergeAttributes(HTMLAttributes, { 'data-type': 'faqAnswer', class: 'pilotiq-faq-answer' }),
+            ['span', { class: 'pilotiq-faq-marker', contenteditable: 'false' }, 'A'],
+            ['div', { class: 'pilotiq-faq-body' }, 0],
+        ];
+    },
+});
+const DIRECTIVE_MARKER = 0x3a; // ':'
+const DIRECTIVE_MIN_MARKERS = 3;
+/** Parse a directive info string (`alert{type=warning}`) into an attrs map. */
+export function parseDirectiveAttrs(info) {
+    const out = {};
+    const m = /\{([^}]*)\}/.exec(info);
+    if (!m || !m[1])
+        return out;
+    for (const pair of m[1].split(/[\s,]+/)) {
+        const eq = pair.indexOf('=');
+        if (eq === -1)
+            continue;
+        out[pair.slice(0, eq).trim()] = pair.slice(eq + 1).trim().replace(/^["']|["']$/g, '');
+    }
+    return out;
+}
+/** The directive name — the token before the first `{` or whitespace. */
+function directiveName(info) {
+    return info.trim().split(/[\s{]/, 1)[0] ?? '';
+}
+/**
+ * The directive title — the free text after `{attrs}` on the opening fence
+ * line (Docusaurus-admonition style: `:::alert{type=warning} Heads up`).
+ * Empty when omitted.
+ */
+function directiveTitle(info) {
+    const close = info.lastIndexOf('}');
+    const rest = close === -1 ? info.replace(/^\S+/, '') : info.slice(close + 1);
+    return rest.trim();
+}
+/** Minimal HTML escape for text interpolated into the directive's HTML. */
+function escapeDirectiveHtml(s) {
+    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+/**
+ * Register the `:::alert{…}` block rule + HTML renderers on a markdown-it
+ * instance. Idempotent per instance. Wired as `Alert`'s `markdown.parse.setup`.
+ */
+export function setupAlertDirective(md) {
+    if (md.__pilotiqAlertDirective)
+        return;
+    md.__pilotiqAlertDirective = true;
+    md.block.ruler.before('fence', 'pilotiqAlert', (state, startLine, endLine, silent) => {
+        let pos = state.bMarks[startLine] + state.tShift[startLine];
+        let max = state.eMarks[startLine];
+        if (state.src.charCodeAt(pos) !== DIRECTIVE_MARKER)
+            return false;
+        const memStart = pos;
+        while (pos <= max && state.src.charCodeAt(pos) === DIRECTIVE_MARKER)
+            pos++;
+        const markerCount = pos - memStart;
+        if (markerCount < DIRECTIVE_MIN_MARKERS)
+            return false;
+        const info = state.src.slice(pos, max).trim();
+        if (directiveName(info) !== 'alert')
+            return false;
+        if (silent)
+            return true;
+        // Scan for the closing fence (>= as many markers, nothing but space after).
+        let nextLine = startLine;
+        let autoClosed = false;
+        for (;;) {
+            nextLine++;
+            if (nextLine >= endLine)
+                break;
+            pos = state.bMarks[nextLine] + state.tShift[nextLine];
+            max = state.eMarks[nextLine];
+            if (state.src.charCodeAt(pos) !== DIRECTIVE_MARKER)
+                continue;
+            if (state.sCount[nextLine] - state.blkIndent >= 4)
+                continue;
+            let closePos = pos;
+            while (closePos <= max && state.src.charCodeAt(closePos) === DIRECTIVE_MARKER)
+                closePos++;
+            if (closePos - pos < markerCount)
+                continue;
+            if (state.src.slice(closePos, max).trim() !== '')
+                continue;
+            autoClosed = true;
+            break;
+        }
+        const oldParent = state.parentType;
+        const oldLineMax = state.lineMax;
+        state.parentType = 'pilotiqAlert';
+        state.lineMax = nextLine;
+        const attrs = parseDirectiveAttrs(info);
+        let token = state.push('pilotiq_alert_open', 'div', 1);
+        token.markup = ':'.repeat(markerCount);
+        token.block = true;
+        token.info = info;
+        token.meta = { type: attrs['type'], icon: attrs['icon'], color: attrs['color'], title: directiveTitle(info) };
+        token.map = [startLine, nextLine];
+        state.md.block.tokenize(state, startLine + 1, nextLine);
+        token = state.push('pilotiq_alert_close', 'div', -1);
+        token.markup = ':'.repeat(markerCount);
+        token.block = true;
+        state.parentType = oldParent;
+        state.lineMax = oldLineMax;
+        state.line = nextLine + (autoClosed ? 1 : 0);
+        return true;
+    }, { alt: ['paragraph', 'reference', 'blockquote', 'list'] });
+    // Open emits the alert wrapper + the (closed) title div + the OPEN body div;
+    // the tokenized content renders into the body; close shuts body + wrapper.
+    // The data-types match `Alert`/`AlertTitle`/`AlertBody`'s `parseHTML`, so the
+    // HTML-based tiptap-markdown parse path revives the full node structure.
+    md.renderer.rules['pilotiq_alert_open'] = (tokens, idx) => {
+        const meta = tokens[idx].meta ?? {};
+        const type = coerceAlertType(meta.type);
+        const title = escapeDirectiveHtml(String(meta.title ?? ''));
+        const icon = meta.icon ? ` data-icon="${escapeDirectiveHtml(String(meta.icon))}"` : '';
+        const color = meta.color ? ` data-color="${escapeDirectiveHtml(String(meta.color))}"` : '';
+        return (`<div data-type="alert" class="pilotiq-alert pilotiq-alert-${type}" data-alert-type="${type}"${icon}${color}>` +
+            `<div data-type="alertTitle" class="pilotiq-alert-title">${title}</div>` +
+            `<div data-type="alertBody" class="pilotiq-alert-description">\n`);
+    };
+    md.renderer.rules['pilotiq_alert_close'] = () => '</div></div>\n';
+}
+/**
+ * `tiptap-markdown` serializer for the Alert node → `:::alert{type=…} Title`.
+ * The title rides the opening fence line (admonition style); the body markdown
+ * sits between the fences.
+ */
+export function serializeAlertMarkdown(state, node) {
+    const type = coerceAlertType(node.attrs?.type);
+    const icon = String(node.attrs?.icon ?? '').trim();
+    const color = String(node.attrs?.color ?? '').trim();
+    const title = String(node.firstChild?.textContent ?? '').replace(/\s+/g, ' ').trim();
+    const body = node.childCount > 1 ? node.child(node.childCount - 1) : null;
+    // `icon` / `color` are space-free tokens (icon keys + hex), so they ride the
+    // whitespace-split directive attrs cleanly.
+    const attrs = [`type=${type}`];
+    if (icon)
+        attrs.push(`icon=${icon}`);
+    if (color)
+        attrs.push(`color=${color}`);
+    state.write(`:::alert{${attrs.join(' ')}}${title ? ' ' + title : ''}\n`);
+    if (body)
+        state.renderContent(body);
+    state.ensureNewLine();
+    state.write(':::');
+    state.closeBlock(node);
+}
+// ── Alert — shadcn-style callout: icon + editable title + editable body ───────
+//
+// `alert` wraps two editable children: `alertTitle` (the heading, defaults to
+// the variant label) and `alertBody` (the description). The in-editor chrome —
+// icon, variant picker, theme styling — lives in the React NodeView
+// (`AlertNodeView`); `renderHTML` here is the headless / clipboard / getHTML
+// fallback, and `render.ts` owns the published read-side HTML. Variant lives on
+// the `type` attr (info/warning/success/tip/custom); `icon` / `color` back the
+// Phase-2 per-block pickers.
+export const Alert = Node.create({
+    name: 'alert',
+    group: 'block',
+    content: 'alertTitle alertBody',
+    defining: true,
+    // Markdown round-trip — `:::alert{type=…} Title` (only consulted when the
+    // `tiptap-markdown` extension is present, i.e. the Markdown editor).
+    addStorage() {
+        return {
+            markdown: {
+                serialize: serializeAlertMarkdown,
+                parse: { setup: setupAlertDirective },
+            },
+        };
+    },
+    addAttributes() {
+        return {
+            type: {
+                default: 'info',
+                parseHTML: (el) => coerceAlertType(el.getAttribute('data-alert-type')),
+                renderHTML: (attrs) => ({ 'data-alert-type': coerceAlertType(attrs['type']) }),
+            },
+            icon: {
+                default: '',
+                parseHTML: (el) => el.getAttribute('data-icon') ?? '',
+                renderHTML: (attrs) => (attrs['icon'] ? { 'data-icon': String(attrs['icon']) } : {}),
+            },
+            // User-pasted custom SVG (sanitized). Wins over `icon` when set; not
+            // carried in markdown (would bloat the source) — rich-text only.
+            iconSvg: {
+                default: '',
+                parseHTML: (el) => el.getAttribute('data-icon-svg') ?? '',
+                renderHTML: (attrs) => (attrs['iconSvg'] ? { 'data-icon-svg': String(attrs['iconSvg']) } : {}),
+            },
+            color: {
+                default: '',
+                parseHTML: (el) => el.getAttribute('data-color') ?? '',
+                renderHTML: (attrs) => (attrs['color'] ? { 'data-color': String(attrs['color']) } : {}),
+            },
+        };
+    },
+    parseHTML() {
+        return [{ tag: 'div[data-type="alert"]' }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ['div', mergeAttributes(HTMLAttributes, { 'data-type': 'alert', class: 'pilotiq-alert' }), 0];
+    },
+    addNodeView() {
+        return ReactNodeViewRenderer(AlertNodeView);
+    },
+});
+/** The Alert heading — a single editable line, defaults to the variant label. */
+export const AlertTitle = Node.create({
+    name: 'alertTitle',
+    content: 'inline*',
+    defining: true,
+    parseHTML() {
+        return [
+            { tag: 'div[data-type="alertTitle"]' },
+            { tag: '.pilotiq-alert-title' },
+            // Back-compat: the pre-redesign alert's non-editable label.
+            { tag: '[data-type="alert"] > .pilotiq-block-label' },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ['div', mergeAttributes(HTMLAttributes, { 'data-type': 'alertTitle', class: 'pilotiq-alert-title' }), 0];
+    },
+});
+/** The Alert body — the editable description (`block+`). */
+export const AlertBody = Node.create({
+    name: 'alertBody',
+    content: 'block+',
+    defining: true,
+    parseHTML() {
+        return [
+            { tag: 'div[data-type="alertBody"]' },
+            { tag: '.pilotiq-alert-description' },
+            // Back-compat: the pre-redesign alert's body wrapper.
+            { tag: '[data-type="alert"] > .pilotiq-block-body' },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ['div', mergeAttributes(HTMLAttributes, { 'data-type': 'alertBody', class: 'pilotiq-alert-description' }), 0];
+    },
+});
+// ── Pros & cons — two labelled columns (each a `block+` body, list by default) ──
+export const ProsCons = Node.create({
+    name: 'prosCons',
+    group: 'block',
+    content: 'prosColumn consColumn',
+    defining: true,
+    parseHTML() {
+        return [{ tag: 'div[data-type="prosCons"]' }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ['div', mergeAttributes(HTMLAttributes, { 'data-type': 'prosCons', class: 'pilotiq-pros-cons' }), 0];
+    },
+});
+function prosConsColumn(name, label, cssClass) {
+    return Node.create({
+        name,
+        group: 'prosConsColumn',
+        content: 'block+',
+        defining: true,
+        parseHTML() {
+            return [{ tag: `div[data-type="${name}"]`, contentElement: '.pilotiq-block-body' }];
+        },
+        renderHTML({ HTMLAttributes }) {
+            return [
+                'div',
+                mergeAttributes(HTMLAttributes, { 'data-type': name, class: cssClass }),
+                ['div', { class: 'pilotiq-block-label', contenteditable: 'false' }, label],
+                ['div', { class: 'pilotiq-block-body' }, 0],
+            ];
+        },
+    });
+}
+export const ProsColumn = prosConsColumn('prosColumn', 'Pros', 'pilotiq-pros');
+export const ConsColumn = prosConsColumn('consColumn', 'Cons', 'pilotiq-cons');
+// ── Keyboard: delete a whole content block with Backspace at its start ──
+//
+// Custom blocks have no inline "remove" affordance, and Backspace inside a
+// nested block (FAQ etc.) just deletes characters. So: Backspace at the very
+// start of a content block removes the entire block — the reliable, keyboard
+// way to delete one (the drag handle's click-to-select is the mouse way).
+// faq is excluded — it handles Backspace itself (empty-question → remove item).
+const DELETABLE_BLOCKS = new Set(['summary', 'keyTakeaways', 'alert', 'prosCons']);
+export const ContentBlockKeymap = Extension.create({
+    name: 'pilotiqContentBlockKeymap',
+    addKeyboardShortcuts() {
+        return {
+            Backspace: ({ editor }) => {
+                const { $from, empty } = editor.state.selection;
+                if (!empty || $from.parentOffset !== 0)
+                    return false;
+                for (let d = 1; d <= $from.depth; d++) {
+                    const node = $from.node(d);
+                    if (!DELETABLE_BLOCKS.has(node.type.name))
+                        continue;
+                    // Only when the cursor is at the block's very start (first child all
+                    // the way down) — otherwise let Backspace delete normally.
+                    let atStart = true;
+                    for (let dd = $from.depth; dd > d; dd--) {
+                        if ($from.index(dd - 1) !== 0) {
+                            atStart = false;
+                            break;
+                        }
+                    }
+                    if (!atStart)
+                        return false;
+                    const start = $from.before(d);
+                    return editor.chain().deleteRange({ from: start, to: start + node.nodeSize }).focus().run();
+                }
+                return false;
+            },
+        };
+    },
+});
+/** All inline content-block extensions — registered in the editor's list. */
+export const contentBlockNodes = [
+    KeyTakeaways,
+    Summary,
+    Faq,
+    FaqItem,
+    FaqQuestion,
+    FaqAnswer,
+    Alert,
+    AlertTitle,
+    AlertBody,
+    ProsCons,
+    ProsColumn,
+    ConsColumn,
+    ContentBlockKeymap,
+];

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { RichTextField, DEFAULT_TOOLBAR_GROUPS, DEFAULT_TEXT_COLORS, DEFAULT_HIGHLIGHT_COLORS, type ColorSwatch, type RichTextAttachmentVisibility, type RichTextFieldMeta, type RichTextStorage, type ToolbarButtonId, type ToolbarGroups, } from './RichTextField.js';
 export { Block, type BlockMeta } from './Block.js';
+export { defaultBlocks, faqBlock, alertBlock, summaryBlock, keyTakeawaysBlock, prosConsBlock, } from './blocks/index.js';
 export { MentionProvider, type MentionItem, type MentionProviderMeta, } from './MentionProvider.js';
 export { registerTiptap } from './register.js';
 export { createPlainTextEditor, plainTextOf, plainTextToDoc, type PlainTextEditorOptions, } from './PlainTextEditor.js';