@placeholderco/placeholder-ui 1.0.12 → 2.0.0

package/dist/editors/tiptap/TipTapBubble.svelte.d.ts

@@ -0,0 +1,44 @@
+import { type AnyExtension } from '@tiptap/core';
+import { type CodeBlocksOptions } from './extensions/index.js';
+import type { CollaborationConfig } from './collaboration.js';
+export interface TipTapBubbleProps {
+    /** HTML content value (bindable). Ignored when collaboration is enabled. */
+    value?: string;
+    /** Label text displayed above the editor */
+    label?: string;
+    /** Mark field as required (shows asterisk) */
+    required?: boolean;
+    /** CSS classes for the FormGroup wrapper */
+    groupClass?: string;
+    /** Tooltip text on hover */
+    tooltipText?: string;
+    /** Position of the tooltip */
+    tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
+    /** Enable editing mode */
+    editable?: boolean;
+    /** Placeholder text when editor is empty */
+    placeholder?: string;
+    /** Additional CSS classes */
+    class?: string;
+    /** Async handler for image uploads, returns URL or null */
+    onImageUpload?: (file: File) => Promise<string | null>;
+    /** Callback when content changes */
+    onUpdate?: (html: string) => void;
+    /** Opt-in real-time collaboration config. When provided, content syncs via Yjs. */
+    collaboration?: CollaborationConfig;
+    /** Opt-in rich code blocks: CodeMirror-powered editing with syntax highlighting,
+     * autocompletion and a per-block language picker. Pass true for all languages
+     * or a config to narrow the offered languages and set the default. */
+    codeBlocks?: boolean | CodeBlocksOptions;
+    /** Additional TipTap extensions to register with the editor */
+    extensions?: AnyExtension[];
+}
+declare const TipTapBubble: import("svelte").Component<TipTapBubbleProps, {
+    getHTML: () => string;
+    getJSON: () => object;
+    setContent: (html: string) => void;
+    clear: () => void;
+    focus: () => void;
+}, "value">;
+type TipTapBubble = ReturnType<typeof TipTapBubble>;
+export default TipTapBubble;

package/dist/editors/tiptap/collaboration.d.ts

@@ -0,0 +1,55 @@
+import type { XmlFragment } from 'yjs';
+/** User identity shown on remote collaboration cursors. */
+export interface CollaborationUser {
+    /** Display name shown on the cursor label */
+    name: string;
+    /** 6-digit hex color for the cursor and selection highlight (e.g. `'#f59e0b'`). Must be hex format — HSL, RGB, and named colors are not supported. */
+    color: `#${string}`;
+}
+/**
+ * Configuration for real-time collaborative editing.
+ *
+ * **Required peer dependencies** (install in your app):
+ * - `yjs` — CRDT document model
+ * - A Yjs network provider such as `y-websocket`, `y-webrtc`, or `@hocuspocus/provider`
+ *
+ * **Usage:**
+ * ```ts
+ * import * as Y from 'yjs';
+ * import { WebsocketProvider } from 'y-websocket';
+ *
+ * const ydoc = new Y.Doc();
+ * const provider = new WebsocketProvider('wss://your-server.com', 'room-id', ydoc);
+ *
+ * const collaboration = {
+ *   fragment: ydoc.getXmlFragment('content'),
+ *   provider,
+ *   user: { name: 'Alice', color: '#f59e0b' }
+ * };
+ * ```
+ *
+ * **Notes:**
+ * - When collaboration is enabled, the `value` prop is ignored — Yjs is the source of truth.
+ * - The built-in undo/redo is replaced by Yjs collaborative history.
+ * - Your app is responsible for managing the provider lifecycle (connect/disconnect).
+ */
+export interface CollaborationConfig {
+    /**
+     * A Yjs XML fragment to sync editor content.
+     *
+     * Create with `ydoc.getXmlFragment('content')`. All clients sharing
+     * the same Y.Doc and fragment name will see each other's edits.
+     */
+    fragment: XmlFragment;
+    /**
+     * A Yjs provider instance that handles network transport.
+     *
+     * Common choices:
+     * - `WebsocketProvider` from `y-websocket` (requires a WebSocket server)
+     * - `WebrtcProvider` from `y-webrtc` (peer-to-peer, no server)
+     * - `HocuspocusProvider` from `@hocuspocus/provider` (TipTap's managed solution)
+     */
+    provider: any;
+    /** Current user info displayed on remote cursors */
+    user: CollaborationUser;
+}

package/dist/editors/tiptap/collaboration.js

@@ -0,0 +1 @@
+export {};

package/dist/editors/tiptap/extensions/Alert.d.ts

@@ -0,0 +1,18 @@
+import { Node } from '@tiptap/core';
+export interface AlertOptions {
+    HTMLAttributes: Record<string, any>;
+}
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        alert: {
+            /**
+             * Insert an alert block
+             */
+            setAlert: (attributes?: {
+                variant?: string;
+                title?: string;
+            }) => ReturnType;
+        };
+    }
+}
+export declare const Alert: Node<AlertOptions, any>;

package/dist/editors/tiptap/extensions/Alert.js

@@ -0,0 +1,72 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+export const Alert = Node.create({
+    name: 'alert',
+    group: 'block',
+    content: 'block+',
+    defining: true,
+    addAttributes() {
+        return {
+            variant: {
+                default: 'default',
+                parseHTML: (element) => element.getAttribute('data-variant'),
+                renderHTML: (attributes) => {
+                    return {
+                        'data-variant': attributes.variant,
+                    };
+                },
+            },
+            title: {
+                default: 'Alert',
+                parseHTML: (element) => element.getAttribute('data-title'),
+                renderHTML: (attributes) => {
+                    return {
+                        'data-title': attributes.title,
+                    };
+                },
+            },
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: 'div[data-type="alert"]',
+            },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return [
+            'div',
+            mergeAttributes(HTMLAttributes, {
+                'data-type': 'alert',
+                class: `alert alert-${HTMLAttributes['data-variant'] || 'default'}`,
+            }),
+            [
+                'div',
+                { class: 'alert-title', 'data-title-element': 'true' },
+                HTMLAttributes['data-title'] || 'Alert',
+            ],
+            ['div', { class: 'alert-content' }, 0],
+        ];
+    },
+    addCommands() {
+        return {
+            setAlert: (attributes) => ({ commands }) => {
+                return commands.insertContent({
+                    type: this.name,
+                    attrs: attributes,
+                    content: [
+                        {
+                            type: 'paragraph',
+                            content: [
+                                {
+                                    type: 'text',
+                                    text: 'Enter your alert message here...',
+                                },
+                            ],
+                        },
+                    ],
+                });
+            },
+        };
+    },
+});

package/dist/editors/tiptap/extensions/CodeBlockEditor.d.ts

@@ -0,0 +1,21 @@
+import { type CodeBlockOptions } from '@tiptap/extension-code-block';
+import { type CodeBlockLanguageId } from './codeBlockLanguages.js';
+import './codeBlockEditor.css';
+/** Configuration accepted by the `codeBlocks` prop on TipTap / TipTapBubble */
+export interface CodeBlocksOptions {
+    /** Languages offered in the code block language picker (default: all registered) */
+    languages?: CodeBlockLanguageId[];
+    /** Language applied to newly inserted code blocks (default 'javascript') */
+    defaultLanguage?: CodeBlockLanguageId;
+}
+export interface CodeBlockEditorOptions extends CodeBlockOptions {
+    /** Language ids offered in the picker; null offers every registered language */
+    languages: CodeBlockLanguageId[] | null;
+}
+/**
+ * CodeBlock extension whose blocks are full CodeMirror editors: syntax
+ * highlighting, autocompletion, bracket matching and smart indentation, with a
+ * per-block language picker. Serializes to standard
+ * `<pre><code class="language-...">` HTML, so content round-trips unchanged.
+ */
+export declare const CodeBlockEditor: import("@tiptap/core").Node<CodeBlockEditorOptions, any>;

package/dist/editors/tiptap/extensions/CodeBlockEditor.js

@@ -0,0 +1,326 @@
+import { CodeBlock } from '@tiptap/extension-code-block';
+import { Selection, TextSelection } from '@tiptap/pm/state';
+import { exitCode } from '@tiptap/pm/commands';
+import { EditorView as CodeMirrorView, drawSelection, keymap } from '@codemirror/view';
+import { Compartment, EditorState as CodeMirrorState } from '@codemirror/state';
+import { defaultKeymap, indentWithTab } from '@codemirror/commands';
+import { autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap } from '@codemirror/autocomplete';
+import { bracketMatching, indentOnInput, syntaxHighlighting } from '@codemirror/language';
+import { classHighlighter } from '@lezer/highlight';
+import { codeBlockLanguages, resolveCodeBlockLanguage } from './codeBlockLanguages.js';
+import './codeBlockEditor.css';
+/**
+ * Renders each code block as an embedded CodeMirror editor, following the
+ * ProseMirror codemirror node view pattern: CodeMirror owns the block's text and
+ * selection while focused, and every change is forwarded to ProseMirror so the
+ * document (and collaboration/undo) stay authoritative.
+ */
+class CodeBlockView {
+    dom;
+    node;
+    editor;
+    getPos;
+    cm;
+    select;
+    languageCompartment = new Compartment();
+    updating = false;
+    constructor(node, editor, getPos, languages) {
+        this.node = node;
+        this.editor = editor;
+        this.getPos = getPos;
+        const editable = editor.isEditable;
+        this.cm = new CodeMirrorView({
+            doc: node.textContent,
+            extensions: [
+                keymap.of([
+                    ...closeBracketsKeymap,
+                    ...completionKeymap,
+                    ...this.codeMirrorKeymap(),
+                    ...defaultKeymap,
+                    indentWithTab
+                ]),
+                drawSelection(),
+                syntaxHighlighting(classHighlighter),
+                bracketMatching(),
+                closeBrackets(),
+                autocompletion(),
+                indentOnInput(),
+                CodeMirrorView.lineWrapping,
+                this.languageCompartment.of(this.languageExtension()),
+                CodeMirrorView.editable.of(editable),
+                CodeMirrorState.readOnly.of(!editable),
+                CodeMirrorView.updateListener.of((update) => this.forwardUpdate(update))
+            ]
+        });
+        this.select = this.buildLanguageSelect(languages, editable);
+        this.dom = document.createElement('div');
+        this.dom.className = 'code-block-editor';
+        this.dom.appendChild(this.select);
+        this.dom.appendChild(this.cm.dom);
+    }
+    // The ProseMirror view is looked up lazily because node views are constructed
+    // while the outer view itself is still being created.
+    get view() {
+        return this.editor.view;
+    }
+    languageExtension() {
+        return resolveCodeBlockLanguage(this.node.attrs.language)?.load() ?? [];
+    }
+    buildLanguageSelect(languages, editable) {
+        const select = document.createElement('select');
+        select.className = 'code-block-language';
+        select.setAttribute('aria-label', 'Code language');
+        select.contentEditable = 'false';
+        for (const def of languages) {
+            const option = document.createElement('option');
+            option.value = def.id;
+            option.textContent = def.label;
+            select.appendChild(option);
+        }
+        select.disabled = !editable;
+        this.syncSelect(select);
+        select.addEventListener('change', () => {
+            const pos = this.getPos();
+            if (pos === undefined)
+                return;
+            this.view.dispatch(this.view.state.tr.setNodeMarkup(pos, undefined, {
+                ...this.node.attrs,
+                language: select.value
+            }));
+            this.cm.focus();
+        });
+        return select;
+    }
+    // Reflect the node's language in the picker, adding a fallback option for
+    // languages present in parsed content but missing from the configured list.
+    syncSelect(select = this.select) {
+        const raw = this.node.attrs.language;
+        const current = resolveCodeBlockLanguage(raw)?.id ?? raw ?? 'plaintext';
+        if (![...select.options].some((option) => option.value === current)) {
+            const option = document.createElement('option');
+            option.value = current;
+            option.textContent = current;
+            select.appendChild(option);
+        }
+        select.value = current;
+    }
+    // Map CodeMirror document/selection changes onto the ProseMirror document.
+    forwardUpdate(update) {
+        if (this.updating || !this.cm.hasFocus)
+            return;
+        const pos = this.getPos();
+        if (pos === undefined)
+            return;
+        let offset = pos + 1;
+        const { main } = update.state.selection;
+        const selFrom = offset + main.from;
+        const selTo = offset + main.to;
+        const pmSelection = this.view.state.selection;
+        if (update.docChanged || pmSelection.from !== selFrom || pmSelection.to !== selTo) {
+            const tr = this.view.state.tr;
+            update.changes.iterChanges((fromA, toA, fromB, toB, text) => {
+                if (text.length) {
+                    tr.replaceWith(offset + fromA, offset + toA, this.view.state.schema.text(text.toString()));
+                }
+                else {
+                    tr.delete(offset + fromA, offset + toA);
+                }
+                offset += toB - fromB - (toA - fromA);
+            });
+            tr.setSelection(TextSelection.create(tr.doc, selFrom, selTo));
+            this.view.dispatch(tr);
+        }
+    }
+    codeMirrorKeymap() {
+        return [
+            { key: 'ArrowUp', run: () => this.maybeEscape('line', -1) },
+            { key: 'ArrowLeft', run: () => this.maybeEscape('char', -1) },
+            { key: 'ArrowDown', run: () => this.maybeEscape('line', 1) },
+            { key: 'ArrowRight', run: () => this.maybeEscape('char', 1) },
+            { key: 'Escape', run: () => this.escape() },
+            {
+                key: 'Mod-Enter',
+                run: () => {
+                    if (!exitCode(this.view.state, this.view.dispatch))
+                        return false;
+                    this.view.focus();
+                    return true;
+                }
+            },
+            { key: 'Backspace', run: () => this.removeWhenEmpty() },
+            { key: 'Mod-z', run: () => this.editor.commands.undo() },
+            { key: 'Mod-y', run: () => this.editor.commands.redo() },
+            { key: 'Shift-Mod-z', run: () => this.editor.commands.redo() }
+        ];
+    }
+    // Move the selection out of the block when an arrow key is pressed at its edge.
+    maybeEscape(unit, dir) {
+        const { state } = this.cm;
+        const { main } = state.selection;
+        if (!main.empty)
+            return false;
+        if (unit === 'line') {
+            const line = state.doc.lineAt(main.head);
+            if (dir < 0 ? line.from > 0 : line.to < state.doc.length)
+                return false;
+        }
+        else if (dir < 0 ? main.from > 0 : main.to < state.doc.length) {
+            return false;
+        }
+        const pos = this.getPos();
+        if (pos === undefined)
+            return false;
+        const after = pos + this.node.nodeSize;
+        // Arrowing down out of a trailing code block: create a paragraph to land in.
+        if (dir > 0 && unit === 'line' && after >= this.view.state.doc.content.size) {
+            const paragraph = this.view.state.schema.nodes.paragraph.createAndFill();
+            if (!paragraph)
+                return false;
+            const tr = this.view.state.tr.insert(after, paragraph);
+            tr.setSelection(TextSelection.create(tr.doc, after + 1));
+            this.view.dispatch(tr.scrollIntoView());
+            this.view.focus();
+            return true;
+        }
+        const selection = Selection.near(this.view.state.doc.resolve(dir < 0 ? pos : after), dir);
+        this.view.dispatch(this.view.state.tr.setSelection(selection).scrollIntoView());
+        this.view.focus();
+        return true;
+    }
+    escape() {
+        const pos = this.getPos();
+        if (pos === undefined)
+            return false;
+        const selection = Selection.near(this.view.state.doc.resolve(pos + this.node.nodeSize), 1);
+        this.view.dispatch(this.view.state.tr.setSelection(selection).scrollIntoView());
+        this.view.focus();
+        return true;
+    }
+    // Backspace in an empty block converts it back to a paragraph.
+    removeWhenEmpty() {
+        if (this.cm.state.doc.length > 0)
+            return false;
+        const pos = this.getPos();
+        if (pos === undefined)
+            return false;
+        const paragraph = this.view.state.schema.nodes.paragraph.createAndFill();
+        if (!paragraph)
+            return false;
+        const tr = this.view.state.tr.replaceWith(pos, pos + this.node.nodeSize, paragraph);
+        tr.setSelection(TextSelection.create(tr.doc, pos + 1));
+        this.view.dispatch(tr);
+        this.view.focus();
+        return true;
+    }
+    // Apply external changes (undo, collaboration, setContent) to CodeMirror.
+    update(node) {
+        if (node.type !== this.node.type)
+            return false;
+        const previousLanguage = this.node.attrs.language;
+        this.node = node;
+        if (node.attrs.language !== previousLanguage) {
+            this.syncSelect();
+            this.cm.dispatch({
+                effects: this.languageCompartment.reconfigure(this.languageExtension())
+            });
+        }
+        const newText = node.textContent;
+        const currentText = this.cm.state.doc.toString();
+        if (newText !== currentText) {
+            let start = 0;
+            let currentEnd = currentText.length;
+            let newEnd = newText.length;
+            while (start < currentEnd &&
+                start < newEnd &&
+                currentText.charCodeAt(start) === newText.charCodeAt(start)) {
+                start++;
+            }
+            while (currentEnd > start &&
+                newEnd > start &&
+                currentText.charCodeAt(currentEnd - 1) === newText.charCodeAt(newEnd - 1)) {
+                currentEnd--;
+                newEnd--;
+            }
+            this.updating = true;
+            this.cm.dispatch({
+                changes: { from: start, to: currentEnd, insert: newText.slice(start, newEnd) }
+            });
+            this.updating = false;
+        }
+        return true;
+    }
+    setSelection(anchor, head) {
+        this.cm.focus();
+        this.updating = true;
+        this.cm.dispatch({ selection: { anchor, head } });
+        this.updating = false;
+    }
+    selectNode() {
+        this.cm.focus();
+    }
+    stopEvent() {
+        return true;
+    }
+    ignoreMutation() {
+        return true;
+    }
+    destroy() {
+        this.cm.destroy();
+    }
+}
+// Let arrow keys move the cursor from an adjacent textblock into a code block;
+// ProseMirror can't do this itself because the block's content lives in CodeMirror.
+function arrowIntoCodeBlock(direction) {
+    return ({ editor }) => {
+        const { state, view } = editor;
+        if (!state.selection.empty || !view.endOfTextblock(direction))
+            return false;
+        const side = direction === 'left' || direction === 'up' ? -1 : 1;
+        const { $head } = state.selection;
+        try {
+            const nextPos = Selection.near(state.doc.resolve(side > 0 ? $head.after() : $head.before()), side);
+            if (nextPos.$head && nextPos.$head.parent.type.name === 'codeBlock') {
+                view.dispatch(state.tr.setSelection(nextPos));
+                return true;
+            }
+        }
+        catch {
+            // selection sits at the document boundary — nothing to move into
+        }
+        return false;
+    };
+}
+/**
+ * CodeBlock extension whose blocks are full CodeMirror editors: syntax
+ * highlighting, autocompletion, bracket matching and smart indentation, with a
+ * per-block language picker. Serializes to standard
+ * `<pre><code class="language-...">` HTML, so content round-trips unchanged.
+ */
+export const CodeBlockEditor = CodeBlock.extend({
+    addOptions() {
+        const parent = this.parent?.() ?? {};
+        return {
+            ...parent,
+            defaultLanguage: 'javascript',
+            languages: null
+        };
+    },
+    addKeyboardShortcuts() {
+        return {
+            ...this.parent?.(),
+            ArrowLeft: arrowIntoCodeBlock('left'),
+            ArrowRight: arrowIntoCodeBlock('right'),
+            ArrowUp: arrowIntoCodeBlock('up'),
+            ArrowDown: arrowIntoCodeBlock('down')
+        };
+    },
+    addNodeView() {
+        const configured = this.options.languages;
+        const languages = configured
+            ? configured
+                .map((id) => resolveCodeBlockLanguage(id))
+                .filter((def) => Boolean(def))
+            : codeBlockLanguages;
+        return ({ node, editor, getPos }) => new CodeBlockView(node, editor, getPos, languages);
+    }
+});

package/dist/editors/tiptap/extensions/Div.d.ts

@@ -0,0 +1,19 @@
+import { Node } from '@tiptap/core';
+export interface DivOptions {
+    HTMLAttributes: Record<string, any>;
+}
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        div: {
+            /**
+             * Set the current node as a div
+             */
+            setDiv: () => ReturnType;
+            /**
+             * Toggle between div and paragraph
+             */
+            toggleDiv: () => ReturnType;
+        };
+    }
+}
+export declare const Div: Node<DivOptions, any>;

package/dist/editors/tiptap/extensions/Div.js

@@ -0,0 +1,89 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+export const Div = Node.create({
+    name: 'div',
+    group: 'block',
+    content: 'block*',
+    isolating: false,
+    defining: false,
+    addOptions() {
+        return {
+            HTMLAttributes: {},
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: 'div',
+                // Preserve all attributes
+                getAttrs: (node) => {
+                    if (typeof node === 'string')
+                        return false;
+                    const element = node;
+                    // Skip if it's an alert or other custom node with data-type
+                    if (element.getAttribute('data-type'))
+                        return false;
+                    // Preserve all attributes
+                    const attrs = {};
+                    Array.from(element.attributes).forEach(attr => {
+                        attrs[attr.name] = attr.value;
+                    });
+                    return attrs;
+                },
+            },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ['div', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+    },
+    addCommands() {
+        return {
+            setDiv: () => ({ commands }) => {
+                return commands.setNode(this.name);
+            },
+            toggleDiv: () => ({ commands }) => {
+                return commands.toggleNode(this.name, 'paragraph');
+            },
+        };
+    },
+    addAttributes() {
+        return {
+            // Preserve all HTML attributes
+            class: {
+                default: null,
+                parseHTML: element => element.getAttribute('class'),
+                renderHTML: attributes => {
+                    if (!attributes.class)
+                        return {};
+                    return { class: attributes.class };
+                },
+            },
+            style: {
+                default: null,
+                parseHTML: element => element.getAttribute('style'),
+                renderHTML: attributes => {
+                    if (!attributes.style)
+                        return {};
+                    return { style: attributes.style };
+                },
+            },
+            id: {
+                default: null,
+                parseHTML: element => element.getAttribute('id'),
+                renderHTML: attributes => {
+                    if (!attributes.id)
+                        return {};
+                    return { id: attributes.id };
+                },
+            },
+            'data-type': {
+                default: null,
+                parseHTML: element => element.getAttribute('data-type'),
+                renderHTML: attributes => {
+                    if (!attributes['data-type'])
+                        return {};
+                    return { 'data-type': attributes['data-type'] };
+                },
+            },
+        };
+    },
+});

package/dist/editors/tiptap/extensions/Span.d.ts

@@ -0,0 +1,5 @@
+import { Node } from '@tiptap/core';
+export interface SpanOptions {
+    HTMLAttributes: Record<string, any>;
+}
+export declare const Span: Node<SpanOptions, any>;