neuphlo-editor 2.5.1 → 2.6.0

package/dist/headless/extensions/Mention/mention-command.js

@@ -0,0 +1,165 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+const GRADIENT_MAP = {
+    red: "linear-gradient(135deg, #ef4444, #fb7185)",
+    coral: "linear-gradient(135deg, #f87171, #fb923c)",
+    orange: "linear-gradient(135deg, #f97316, #fbbf24)",
+    amber: "linear-gradient(135deg, #f59e0b, #facc15)",
+    lime: "linear-gradient(135deg, #84cc16, #4ade80)",
+    green: "linear-gradient(135deg, #10b981, #2dd4bf)",
+    teal: "linear-gradient(135deg, #14b8a6, #22d3ee)",
+    cyan: "linear-gradient(135deg, #06b6d4, #60a5fa)",
+    blue: "linear-gradient(135deg, #3b82f6, #818cf8)",
+    indigo: "linear-gradient(135deg, #6366f1, #a78bfa)",
+    violet: "linear-gradient(135deg, #8b5cf6, #a855f7)",
+    purple: "linear-gradient(135deg, #a855f7, #d946ef)",
+    fuchsia: "linear-gradient(135deg, #d946ef, #f472b6)",
+    pink: "linear-gradient(135deg, #ec4899, #fb7185)",
+    slate: "linear-gradient(135deg, #64748b, #71717a)",
+    stone: "linear-gradient(135deg, #78716c, #a3a3a3)",
+};
+function isGradientKey(avatar) {
+    return !!avatar && avatar in GRADIENT_MAP;
+}
+function isAgentItem(item) {
+    return !!item.email?.endsWith("@ai.neuphlo.local");
+}
+function getInitials(name) {
+    if (!name)
+        return "AG";
+    return name.split(/\s+/).map((w) => w[0]).join("").slice(0, 2).toUpperCase();
+}
+// Simple Avatar component with inline styles
+function Avatar({ src, fallback, isAgent }) {
+    const gradient = src && isGradientKey(src) ? GRADIENT_MAP[src] : isAgent ? GRADIENT_MAP.violet : null;
+    return (_jsx("div", { style: {
+            position: "relative",
+            display: "flex",
+            height: "24px",
+            width: "24px",
+            flexShrink: 0,
+            overflow: "hidden",
+            borderRadius: "9999px",
+        }, children: gradient ? (_jsx("div", { style: {
+                display: "flex",
+                height: "100%",
+                width: "100%",
+                alignItems: "center",
+                justifyContent: "center",
+                borderRadius: "9999px",
+                background: gradient,
+                color: "#ffffff",
+                fontSize: "10px",
+                fontWeight: 600,
+            }, children: fallback })) : src ? (_jsx("img", { style: {
+                aspectRatio: "1",
+                height: "100%",
+                width: "100%",
+            }, src: src, alt: fallback })) : (_jsx("div", { style: {
+                display: "flex",
+                height: "100%",
+                width: "100%",
+                alignItems: "center",
+                justifyContent: "center",
+                borderRadius: "9999px",
+                backgroundColor: "var(--muted)",
+                color: "var(--muted-foreground)",
+                fontSize: "10px",
+                fontWeight: 600,
+            }, children: fallback })) }));
+}
+// Icon component for reference types
+function ReferenceIcon({ type }) {
+    if (type === "node") {
+        return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { flexShrink: 0 }, children: [_jsx("path", { d: "M12 3l8 4.5v9l-8 4.5l-8-4.5v-9l8-4.5" }), _jsx("path", { d: "M12 12l8-4.5" }), _jsx("path", { d: "M12 12v9" }), _jsx("path", { d: "M12 12l-8-4.5" })] }));
+    }
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { flexShrink: 0 }, children: [_jsx("path", { d: "M14 3v4a1 1 0 0 0 1 1h4" }), _jsx("path", { d: "M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" }), _jsx("path", { d: "M9 9l1 0" }), _jsx("path", { d: "M9 13l6 0" }), _jsx("path", { d: "M9 17l6 0" })] }));
+}
+export const MentionCommand = forwardRef((props, ref) => {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const selectItem = (index) => {
+        const item = props.items[index];
+        if (item) {
+            props.command(item);
+        }
+    };
+    const upHandler = () => {
+        setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length);
+    };
+    const downHandler = () => {
+        setSelectedIndex((selectedIndex + 1) % props.items.length);
+    };
+    const enterHandler = () => {
+        selectItem(selectedIndex);
+    };
+    useEffect(() => setSelectedIndex(0), [props.items]);
+    useImperativeHandle(ref, () => ({
+        onKeyDown: ({ event }) => {
+            if (event.key === "ArrowUp") {
+                upHandler();
+                return true;
+            }
+            if (event.key === "ArrowDown") {
+                downHandler();
+                return true;
+            }
+            if (event.key === "Enter") {
+                enterHandler();
+                return true;
+            }
+            return false;
+        },
+    }));
+    return (_jsx("div", { id: "mention-list", style: {
+            backgroundColor: "var(--popover)",
+            color: "var(--foreground)",
+            maxHeight: "300px",
+            minWidth: "280px",
+            overflow: "hidden",
+            overflowY: "auto",
+            borderRadius: "12px",
+            border: "1px solid var(--border)",
+            padding: "4px",
+            boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+        }, children: props.items.length ? ((() => {
+            const agents = props.items.filter(i => !i.type && isAgentItem(i));
+            const others = props.items.filter(i => i.type || !isAgentItem(i));
+            const sections = [];
+            if (agents.length)
+                sections.push({ label: "Agents", items: agents, startIndex: 0 });
+            if (others.length)
+                sections.push({ label: agents.length ? "Members" : null, items: others, startIndex: agents.length });
+            return sections.map((section) => (_jsxs("div", { children: [section.label && (_jsx("div", { style: { padding: "6px 8px 2px", fontSize: "11px", fontWeight: 600, color: "var(--muted-foreground)", textTransform: "uppercase", letterSpacing: "0.05em" }, children: section.label })), section.items.map((item, i) => {
+                        const index = section.startIndex + i;
+                        const agent = isAgentItem(item);
+                        return (_jsxs("button", { type: "button", onClick: () => selectItem(index), onMouseEnter: () => setSelectedIndex(index), style: {
+                                position: "relative",
+                                display: "flex",
+                                width: "100%",
+                                cursor: "default",
+                                userSelect: "none",
+                                alignItems: "center",
+                                gap: "8px",
+                                borderRadius: "4px",
+                                padding: "10px 8px",
+                                fontSize: "14px",
+                                outline: "none",
+                                backgroundColor: index === selectedIndex ? "var(--accent)" : "transparent",
+                                color: index === selectedIndex ? "var(--accent-foreground)" : "inherit",
+                                border: "none",
+                                textAlign: "left",
+                            }, children: [item.type ? (_jsx(ReferenceIcon, { type: item.type })) : (_jsx(Avatar, { src: item.avatar, fallback: getInitials(item.label), isAgent: agent })), _jsx("span", { style: {
+                                        flex: 1,
+                                        overflow: "hidden",
+                                        textOverflow: "ellipsis",
+                                        whiteSpace: "nowrap",
+                                    }, children: item.label })] }, item.id));
+                    })] }, section.label ?? "default")));
+        })()) : (_jsx("div", { style: {
+                padding: "24px 0",
+                textAlign: "center",
+                fontSize: "14px",
+                color: "var(--muted-foreground)",
+            }, children: "No results found" })) }));
+});
+MentionCommand.displayName = "MentionCommand";

package/dist/headless/extensions/Mention/mention-list.d.ts

@@ -0,0 +1,8 @@
+import type { MentionItem } from "./mention";
+interface MentionListProps {
+    items: MentionItem[];
+    command: (item: MentionItem) => void;
+    query: string;
+}
+export declare const MentionList: import("react").ForwardRefExoticComponent<MentionListProps & import("react").RefAttributes<any>>;
+export {};

package/dist/headless/extensions/Mention/mention-list.js

@@ -0,0 +1,150 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+// Gradient map for agent avatars (avatar field stores a gradient key like "violet")
+const GRADIENT_MAP = {
+    red: "linear-gradient(135deg, #ef4444, #fb7185)",
+    coral: "linear-gradient(135deg, #f87171, #fb923c)",
+    orange: "linear-gradient(135deg, #f97316, #fbbf24)",
+    amber: "linear-gradient(135deg, #f59e0b, #facc15)",
+    lime: "linear-gradient(135deg, #84cc16, #4ade80)",
+    green: "linear-gradient(135deg, #10b981, #2dd4bf)",
+    teal: "linear-gradient(135deg, #14b8a6, #22d3ee)",
+    cyan: "linear-gradient(135deg, #06b6d4, #60a5fa)",
+    blue: "linear-gradient(135deg, #3b82f6, #818cf8)",
+    indigo: "linear-gradient(135deg, #6366f1, #a78bfa)",
+    violet: "linear-gradient(135deg, #8b5cf6, #a855f7)",
+    purple: "linear-gradient(135deg, #a855f7, #d946ef)",
+    fuchsia: "linear-gradient(135deg, #d946ef, #f472b6)",
+    pink: "linear-gradient(135deg, #ec4899, #fb7185)",
+    slate: "linear-gradient(135deg, #64748b, #71717a)",
+    stone: "linear-gradient(135deg, #78716c, #a3a3a3)",
+};
+function isAgent(item) {
+    return !!item.email?.endsWith("@ai.neuphlo.local");
+}
+function isGradientKey(avatar) {
+    return !!avatar && avatar in GRADIENT_MAP;
+}
+function getAgentGradient(item) {
+    return GRADIENT_MAP[item.avatar || "violet"] || GRADIENT_MAP.violet;
+}
+function getInitials(name) {
+    if (!name)
+        return "AG";
+    return name.split(/\s+/).map(w => w[0]).join("").slice(0, 2).toUpperCase();
+}
+export const MentionList = forwardRef((props, ref) => {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const selectItem = (index) => {
+        const item = props.items[index];
+        if (item) {
+            props.command(item);
+        }
+    };
+    const upHandler = () => {
+        setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length);
+    };
+    const downHandler = () => {
+        setSelectedIndex((selectedIndex + 1) % props.items.length);
+    };
+    const enterHandler = () => {
+        selectItem(selectedIndex);
+    };
+    useEffect(() => setSelectedIndex(0), [props.items]);
+    useImperativeHandle(ref, () => ({
+        onKeyDown: ({ event }) => {
+            if (event.key === "ArrowUp") {
+                upHandler();
+                return true;
+            }
+            if (event.key === "ArrowDown") {
+                downHandler();
+                return true;
+            }
+            if (event.key === "Enter") {
+                enterHandler();
+                return true;
+            }
+            return false;
+        },
+    }));
+    return (_jsx("div", { id: "mention-list", className: "nph-mention-list", style: {
+            background: "white",
+            border: "1px solid #e2e8f0",
+            borderRadius: "8px",
+            boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+            maxHeight: "320px",
+            overflowY: "auto",
+            padding: "4px",
+        }, children: props.items.length ? ((() => {
+            const agents = props.items.filter(i => isAgent(i));
+            const members = props.items.filter(i => !isAgent(i));
+            const sections = [];
+            if (agents.length)
+                sections.push({ label: "Agents", items: agents, startIndex: 0 });
+            if (members.length)
+                sections.push({ label: "Members", items: members, startIndex: agents.length });
+            return sections.map((section) => (_jsxs("div", { children: [_jsx("div", { style: { padding: "6px 8px 4px", fontSize: "11px", fontWeight: "600", color: "#94a3b8", textTransform: "uppercase", letterSpacing: "0.05em" }, children: section.label }), section.items.map((item, i) => {
+                        const index = section.startIndex + i;
+                        return (_jsxs("button", { type: "button", onClick: () => selectItem(index), className: "nph-mention-item", style: {
+                                display: "flex",
+                                alignItems: "center",
+                                gap: "8px",
+                                width: "100%",
+                                padding: "8px",
+                                border: "none",
+                                borderRadius: "6px",
+                                background: index === selectedIndex ? "#f1f5f9" : "transparent",
+                                cursor: "pointer",
+                                textAlign: "left",
+                                transition: "background 0.15s",
+                            }, onMouseEnter: () => setSelectedIndex(index), children: [(isGradientKey(item.avatar) || isAgent(item)) ? (_jsx("div", { style: {
+                                        width: "24px",
+                                        height: "24px",
+                                        borderRadius: "50%",
+                                        background: getAgentGradient(item),
+                                        display: "flex",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                        fontSize: "10px",
+                                        fontWeight: "600",
+                                        color: "#ffffff",
+                                    }, children: getInitials(item.label) })) : item.avatar ? (_jsx("img", { src: item.avatar, alt: item.label, style: {
+                                        width: "24px",
+                                        height: "24px",
+                                        borderRadius: "50%",
+                                        objectFit: "cover",
+                                    } })) : (_jsx("div", { style: {
+                                        width: "24px",
+                                        height: "24px",
+                                        borderRadius: "50%",
+                                        background: "#e2e8f0",
+                                        display: "flex",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                        fontSize: "10px",
+                                        fontWeight: "600",
+                                        color: "#64748b",
+                                    }, children: item.label.slice(0, 2).toUpperCase() })), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: {
+                                                fontSize: "14px",
+                                                fontWeight: "500",
+                                                color: "#0f172a",
+                                                overflow: "hidden",
+                                                textOverflow: "ellipsis",
+                                                whiteSpace: "nowrap",
+                                            }, children: item.label }), item.email && !isAgent(item) && (_jsx("div", { style: {
+                                                fontSize: "12px",
+                                                color: "#64748b",
+                                                overflow: "hidden",
+                                                textOverflow: "ellipsis",
+                                                whiteSpace: "nowrap",
+                                            }, children: item.email }))] })] }, item.id));
+                    })] }, section.label)));
+        })()) : (_jsx("div", { style: {
+                padding: "12px",
+                fontSize: "14px",
+                color: "#64748b",
+                textAlign: "center",
+            }, children: "No results found" })) }));
+});
+MentionList.displayName = "MentionList";

package/dist/headless/extensions/Mention/mention-node-view.d.ts

@@ -0,0 +1,2 @@
+import type { NodeViewProps } from "@tiptap/react";
+export declare const MentionNodeView: (props: NodeViewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/headless/extensions/Mention/mention-node-view.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NodeViewWrapper } from "@tiptap/react";
+const GRADIENT_MAP = {
+    red: "linear-gradient(135deg, #ef4444, #fb7185)",
+    coral: "linear-gradient(135deg, #f87171, #fb923c)",
+    orange: "linear-gradient(135deg, #f97316, #fbbf24)",
+    amber: "linear-gradient(135deg, #f59e0b, #facc15)",
+    lime: "linear-gradient(135deg, #84cc16, #4ade80)",
+    green: "linear-gradient(135deg, #10b981, #2dd4bf)",
+    teal: "linear-gradient(135deg, #14b8a6, #22d3ee)",
+    cyan: "linear-gradient(135deg, #06b6d4, #60a5fa)",
+    blue: "linear-gradient(135deg, #3b82f6, #818cf8)",
+    indigo: "linear-gradient(135deg, #6366f1, #a78bfa)",
+    violet: "linear-gradient(135deg, #8b5cf6, #a855f7)",
+    purple: "linear-gradient(135deg, #a855f7, #d946ef)",
+    fuchsia: "linear-gradient(135deg, #d946ef, #f472b6)",
+    pink: "linear-gradient(135deg, #ec4899, #fb7185)",
+    slate: "linear-gradient(135deg, #64748b, #71717a)",
+    stone: "linear-gradient(135deg, #78716c, #a3a3a3)",
+};
+// Icon components
+function NodeIcon() {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { flexShrink: 0 }, children: [_jsx("path", { d: "M12 3l8 4.5v9l-8 4.5l-8-4.5v-9l8-4.5" }), _jsx("path", { d: "M12 12l8-4.5" }), _jsx("path", { d: "M12 12v9" }), _jsx("path", { d: "M12 12l-8-4.5" })] }));
+}
+function ArticleIcon() {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { flexShrink: 0 }, children: [_jsx("path", { d: "M14 3v4a1 1 0 0 0 1 1h4" }), _jsx("path", { d: "M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" }), _jsx("path", { d: "M9 9l1 0" }), _jsx("path", { d: "M9 13l6 0" }), _jsx("path", { d: "M9 17l6 0" })] }));
+}
+export const MentionNodeView = (props) => {
+    const { node } = props;
+    const { id, label, avatar, type } = node.attrs;
+    // Determine styling based on type
+    const isNode = type === "node";
+    const isArticle = type === "article";
+    const isReference = isNode || isArticle;
+    const backgroundColor = isArticle
+        ? "rgba(249, 115, 22, 0.15)" // Orange for articles
+        : isNode
+            ? "rgba(107, 114, 128, 0.15)" // Gray for nodes
+            : "var(--accent)"; // Default for user mentions
+    const color = isArticle
+        ? "rgb(234, 88, 12)" // Orange text
+        : isNode
+            ? "rgb(75, 85, 99)" // Gray text
+            : "var(--accent-foreground)"; // Default
+    const border = isArticle
+        ? "1px solid rgba(249, 115, 22, 0.3)"
+        : isNode
+            ? "1px solid rgba(107, 114, 128, 0.3)"
+            : "none";
+    return (_jsxs(NodeViewWrapper, { as: "span", style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "3px",
+            backgroundColor,
+            color,
+            border,
+            padding: isReference ? "1px 6px" : "1px 6px 1px 1px",
+            borderRadius: "12px",
+            fontSize: "13px",
+            fontWeight: 500,
+            verticalAlign: "middle",
+        }, children: [isNode && _jsx(NodeIcon, {}), isArticle && _jsx(ArticleIcon, {}), !isReference && avatar && avatar in GRADIENT_MAP && (_jsx("div", { style: {
+                    width: "20px",
+                    height: "20px",
+                    borderRadius: "50%",
+                    background: GRADIENT_MAP[avatar],
+                    color: "#ffffff",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    fontSize: "8px",
+                    fontWeight: 600,
+                    flexShrink: 0,
+                }, children: (label || id).split(/\s+/).map((w) => w[0]).join("").slice(0, 2).toUpperCase() })), !isReference && avatar && !(avatar in GRADIENT_MAP) && (_jsx("img", { src: avatar, alt: label || id, style: {
+                    width: "20px",
+                    height: "20px",
+                    borderRadius: "50%",
+                    flexShrink: 0,
+                } })), !isReference && !avatar && (_jsx("div", { style: {
+                    width: "20px",
+                    height: "20px",
+                    borderRadius: "50%",
+                    backgroundColor: "var(--muted)",
+                    color: "var(--muted-foreground)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    fontSize: "10px",
+                    fontWeight: 600,
+                    flexShrink: 0,
+                }, children: (label || id).slice(0, 2).toUpperCase() })), _jsx("span", { children: label || id })] }));
+};

package/dist/headless/extensions/Mention/mention.d.ts

@@ -0,0 +1,46 @@
+export interface MentionItem {
+    id: string;
+    label: string;
+    avatar?: string;
+    email?: string;
+    type?: "node" | "article";
+    nodeId?: string;
+    slug?: string;
+}
+export interface MentionOptions {
+    /**
+     * Function to fetch/filter mentionable items based on query
+     */
+    items?: (query: string) => MentionItem[] | Promise<MentionItem[]>;
+    /**
+     * Custom render function for mention nodes
+     */
+    renderLabel?: (props: {
+        node: any;
+        options: any;
+    }) => string;
+    /**
+     * Character that triggers the mention autocomplete (default: @)
+     */
+    char?: string;
+    /**
+     * Custom name for the extension (to avoid duplicates)
+     */
+    name?: string;
+}
+/**
+ * Create the mention extension with custom suggestion rendering
+ */
+export declare const createMentionExtension: (options?: MentionOptions) => import("@tiptap/core").Node<import("@tiptap/extension-mention").MentionOptions<any, import("@tiptap/extension-mention").MentionNodeAttrs>, any>;
+/**
+ * Render function for mention suggestions (autocomplete dropdown)
+ */
+export declare const renderMentionSuggestion: () => {
+    onStart: (props: any) => void;
+    onUpdate: (props: any) => void;
+    onKeyDown: ({ event }: {
+        event: KeyboardEvent;
+    }) => any;
+    onExit: () => void;
+};
+export default createMentionExtension;