@markup-carve/carve-grammars 0.1.2

package/tiptap/extensions/carve-span.js

@@ -0,0 +1,101 @@
+import { Mark, mergeAttributes } from '@tiptap/core';
+
+/**
+ * Carve Span mark extension for Tiptap
+ *
+ * Renders as [text]{.class} in Carve markup
+ *
+ * @example
+ * ```js
+ * import { CarveSpan } from 'carve-grammars/tiptap'
+ *
+ * const editor = new Editor({
+ *   extensions: [CarveSpan],
+ * })
+ *
+ * // Apply span with class
+ * editor.chain().focus().setCarveSpan({ class: 'highlight' }).run()
+ * ```
+ */
+export const CarveSpan = Mark.create({
+    name: 'carveSpan',
+
+    addAttributes() {
+        return {
+            class: {
+                default: 'custom',
+                parseHTML: element => {
+                    // First check data-carve-class, then fall back to class attribute
+                    const carveClass = element.getAttribute('data-carve-class');
+                    if (carveClass) return carveClass;
+                    // Extract class from className, filtering out carve-span
+                    const className = element.className || '';
+                    return className.replace('carve-span', '').trim() || 'custom';
+                },
+                renderHTML: attributes => {
+                    return { 'data-carve-class': attributes.class };
+                },
+            },
+            id: {
+                default: null,
+                parseHTML: element => element.getAttribute('id') || null,
+                renderHTML: attributes => {
+                    if (!attributes.id) return {};
+                    return { id: attributes.id };
+                },
+            },
+        };
+    },
+
+    parseHTML() {
+        return [
+            { tag: 'span[data-carve-class]' },
+            // Also match spans with class attributes from PHP renderer
+            {
+                tag: 'span[class]',
+                getAttrs: element => {
+                    // Skip spans that are part of code highlighting or other editor elements
+                    const className = element.className || '';
+                    // Skip token spans (Phiki/Torchlight syntax highlighting)
+                    if (className.includes('token') || className.includes('phiki') ||
+                        className.includes('torchlight') || className.includes('ProseMirror')) {
+                        return false;
+                    }
+                    // Skip if inside a pre or code element
+                    if (element.closest('pre') || element.closest('code')) {
+                        return false;
+                    }
+                    // Match spans with simple classes (likely from Carve [text]{.class})
+                    if (/^[a-zA-Z][a-zA-Z0-9_-]*$/.test(className)) {
+                        return {};
+                    }
+                    return false;
+                },
+            },
+        ];
+    },
+
+    renderHTML({ HTMLAttributes }) {
+        const className = HTMLAttributes['data-carve-class'] || 'custom';
+        return ['span', mergeAttributes(HTMLAttributes, {
+            class: `carve-span ${className}`,
+            'data-carve-class': className,
+        }), 0];
+    },
+
+    addCommands() {
+        return {
+            setCarveSpan: (attributes) => ({ commands }) => {
+                return commands.setMark(this.name, attributes);
+            },
+            toggleCarveSpan: (attributes) => ({ commands }) => {
+                return commands.toggleMark(this.name, attributes);
+            },
+            unsetCarveSpan: () => ({ commands }) => {
+                return commands.unsetMark(this.name);
+            },
+        };
+    },
+});
+
+export default CarveSpan;

package/tiptap/extensions/carve-tabs.js

@@ -0,0 +1,158 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+
+/**
+ * Carve tab-set nodes for Tiptap.
+ *
+ * A `:::: tabs` container holds `::: tab` children, each carrying a `label`
+ * and an optional `selected` flag. In the editor seed (rendered without the
+ * TabsExtension) this is plain HTML - `<div class="tabs"><div class="tab"
+ * label="First" selected>…</div></div>` - so these nodes parse that raw form,
+ * capturing the label/selected attributes the generic CarveDiv would otherwise
+ * drop. They round-trip back to Carve via serializer.js.
+ *
+ * Two nodes:
+ * - `carveTabSet` - the `<div class="tabs">` wrapper, holding `carveTab+`.
+ * - `carveTab` - one `<div class="tab">` panel, attrs `{ label, selected }`.
+ *
+ * The parse rules use a high priority so a `div.tabs` / `div.tab` is claimed
+ * here rather than by CarveDiv's generic `div[class]` rule.
+ */
+
+export const CarveTabSet = Node.create({
+    name: 'carveTabSet',
+
+    group: 'block',
+
+    content: 'carveTab+',
+
+    defining: true,
+
+    parseHTML() {
+        return [{ tag: 'div.tabs', priority: 60 }];
+    },
+
+    renderHTML({ HTMLAttributes }) {
+        return ['div', mergeAttributes(HTMLAttributes, { class: 'tabs' }), 0];
+    },
+
+    // Interactive tab bar. The wrapper holds a (non-editable) row of buttons -
+    // one per tab, labelled from each carveTab's `label` - plus the editable
+    // panel container (contentDOM) where the tab nodes render. Active-tab state
+    // is view-local: a `data-active` index on the wrapper that CSS uses to show
+    // one panel at a time; clicking a button just moves it. No ProseMirror
+    // transaction, so switching tabs never touches the document or serialize.
+    addNodeView() {
+        return ({ node }) => {
+            const dom = document.createElement('div');
+            dom.className = 'carve-tabset';
+            dom.setAttribute('data-active', '0');
+
+            const bar = document.createElement('div');
+            bar.className = 'carve-tabset-bar';
+            bar.contentEditable = 'false';
+
+            const panels = document.createElement('div');
+            panels.className = 'carve-tabset-panels';
+
+            const renderBar = (n) => {
+                bar.textContent = '';
+                n.forEach((tab, _offset, index) => {
+                    const btn = document.createElement('button');
+                    btn.type = 'button';
+                    btn.className = 'carve-tabset-tab';
+                    btn.textContent = tab.attrs?.label || `Tab ${index + 1}`;
+                    btn.addEventListener('mousedown', (e) => {
+                        // mousedown (not click) so the editor selection isn't
+                        // moved into the button before we switch.
+                        e.preventDefault();
+                        dom.setAttribute('data-active', String(index));
+                    });
+                    bar.appendChild(btn);
+                });
+                // Default the active tab to the one flagged `selected`, else 0.
+                let active = 0;
+                n.forEach((tab, _o, i) => {
+                    if (tab.attrs?.selected) active = i;
+                });
+                dom.setAttribute('data-active', String(active));
+            };
+
+            renderBar(node);
+            dom.appendChild(bar);
+            dom.appendChild(panels);
+
+            return {
+                dom,
+                contentDOM: panels,
+                update: (updated) => {
+                    if (updated.type.name !== 'carveTabSet') return false;
+                    const active = dom.getAttribute('data-active');
+                    renderBar(updated);
+                    // renderBar resets active to the selected tab; keep the
+                    // user's current choice if it is still in range.
+                    if (active != null && Number(active) < updated.childCount) {
+                        dom.setAttribute('data-active', active);
+                    }
+                    return true;
+                },
+            };
+        };
+    },
+});
+
+export const CarveTab = Node.create({
+    name: 'carveTab',
+
+    content: 'block+',
+
+    defining: true,
+
+    addAttributes() {
+        return {
+            label: {
+                default: null,
+                // Attribute form (`{label="..."}` -> label="...") or the
+                // canonical opener form (`::: tab [Label]`), which both engines
+                // render as a leading <p class="div-label"> child.
+                parseHTML: element => {
+                    const attr = element.getAttribute('label');
+                    if (attr != null) return attr;
+                    const first = element.firstElementChild;
+                    return first && first.tagName === 'P' && first.classList.contains('div-label')
+                        ? first.textContent
+                        : null;
+                },
+                renderHTML: attributes => (attributes.label == null ? {} : { label: attributes.label }),
+            },
+            // `selected` is a boolean flag: present (any value, incl. "") means
+            // selected. Serialized as a bare `selected` in the attribute line.
+            selected: {
+                default: false,
+                parseHTML: element => element.hasAttribute('selected'),
+                renderHTML: attributes => (attributes.selected ? { selected: '' } : {}),
+            },
+        };
+    },
+
+    parseHTML() {
+        return [{
+            tag: 'div.tab',
+            priority: 60,
+            // The div-label paragraph becomes the label attr above; keep it
+            // out of the editable panel content.
+            contentElement: element => {
+                const first = element.firstElementChild;
+                if (!first || first.tagName !== 'P' || !first.classList.contains('div-label')) {
+                    return element;
+                }
+                const clone = element.cloneNode(true);
+                clone.removeChild(clone.firstElementChild);
+                return clone;
+            },
+        }];
+    },
+
+    renderHTML({ HTMLAttributes }) {
+        return ['div', mergeAttributes(HTMLAttributes, { class: 'tab' }), 0];
+    },
+});

package/tiptap/extensions/index.js

@@ -0,0 +1,14 @@
+/**
+ * Carve-specific Tiptap extensions
+ */
+
+export { CarveInsert } from './carve-insert.js';
+export { CarveDelete } from './carve-delete.js';
+export { CarveDiv } from './carve-div.js';
+export { CarveSpan } from './carve-span.js';
+export { CarveFootnote } from './carve-footnote.js';
+export { CarveFootnoteDefinition } from './carve-footnote-definition.js';
+export { CarveMath } from './carve-math.js';
+export { CarveEmbed } from './carve-embed.js';
+export { CarveAbbreviation } from './carve-abbreviation.js';
+export { CarveDefinitionList, CarveDefinitionTerm, CarveDefinitionDescription } from './carve-definition-list.js';

package/tiptap/index.js

@@ -0,0 +1,53 @@
+/**
+ * Carve Grammars - Tiptap Integration
+ *
+ * Provides Carve markup support for Tiptap editors.
+ *
+ * @example Basic usage with CarveKit
+ * ```js
+ * import { Editor } from '@tiptap/core'
+ * import { CarveKit, serializeToCarve } from 'carve-grammars/tiptap'
+ *
+ * const editor = new Editor({
+ *   element: document.getElementById('editor'),
+ *   extensions: [CarveKit],
+ *   onUpdate: ({ editor }) => {
+ *     const carve = serializeToCarve(editor.getJSON())
+ *     console.log(carve)
+ *   },
+ * })
+ * ```
+ *
+ * @example Using individual extensions
+ * ```js
+ * import { Editor } from '@tiptap/core'
+ * import StarterKit from '@tiptap/starter-kit'
+ * import { CarveInsert, CarveDelete, CarveDiv, serializeToCarve } from 'carve-grammars/tiptap'
+ *
+ * const editor = new Editor({
+ *   extensions: [
+ *     StarterKit,
+ *     CarveInsert,
+ *     CarveDelete,
+ *     CarveDiv,
+ *   ],
+ * })
+ * ```
+ *
+ * @module carve-grammars/tiptap
+ */
+
+// Main kit
+export { CarveKit } from './carve-kit.js';
+
+// Individual extensions
+export { CarveInsert } from './extensions/carve-insert.js';
+export { CarveDelete } from './extensions/carve-delete.js';
+export { CarveDiv } from './extensions/carve-div.js';
+export { CarveMath } from './extensions/carve-math.js';
+export { CarveFootnoteDefinition } from './extensions/carve-footnote-definition.js';
+export { CarveKeymap } from './extensions/carve-keymap.js';
+export { CarveMention, CarveTag } from './extensions/carve-mention.js';
+
+// Serializer
+export { serializeToCarve, escapeCarve, carveMediaDirective } from './serializer.js';