neuphlo-editor 2.5.0 → 2.6.0

package/dist/Markdown-BAW0cb-U.d.cts

@@ -0,0 +1,153 @@
+import * as _tiptap_core from '@tiptap/core';
+import { Range, Extension } from '@tiptap/core';
+import * as react from 'react';
+import { FC, ReactNode } from 'react';
+import { EditorProviderProps } from '@tiptap/react';
+import * as _tiptap_extension_mention from '@tiptap/extension-mention';
+import { MarkdownSerializer } from '@tiptap/pm/markdown';
+
+interface EditorRootProps {
+    readonly children: ReactNode;
+}
+declare const EditorRoot: FC<EditorRootProps>;
+type EditorContentProps = EditorProviderProps & {
+    readonly children?: ReactNode;
+    readonly className?: string;
+    readonly initialContent?: any;
+};
+declare const EditorContent: react.ForwardRefExoticComponent<{
+    children?: ReactNode;
+    slotBefore?: ReactNode;
+    slotAfter?: ReactNode;
+    editorContainerProps?: react.HTMLAttributes<HTMLDivElement>;
+} & Partial<_tiptap_core.EditorOptions> & {
+    immediatelyRender?: boolean;
+    shouldRerenderOnTransaction?: boolean;
+} & {
+    readonly children?: ReactNode;
+    readonly className?: string;
+    readonly initialContent?: any;
+} & react.RefAttributes<HTMLDivElement>>;
+
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        imageBlock: {
+            setImageBlock: (attributes: {
+                src: string;
+            }) => ReturnType;
+            setImageBlockAt: (attributes: {
+                src: string;
+                pos: number | Range;
+            }) => ReturnType;
+            setImageBlockAlign: (align: "left" | "center" | "right") => ReturnType;
+            setImageBlockWidth: (width: number) => ReturnType;
+        };
+    }
+}
+
+/**
+ * TipTap AI Suggestion Extension
+ *
+ * This extension provides inline AI-powered text completions that appear
+ * as ghost text at the cursor position.
+ *
+ * Usage:
+ * ```ts
+ * import { AISuggestion } from 'neuphlo-editor'
+ *
+ * const editor = new Editor({
+ *   extensions: [
+ *     AISuggestion.configure({
+ *       onFetchSuggestion: async (context) => {
+ *         // Call your AI API here
+ *         const response = await fetch('/api/complete', {
+ *           method: 'POST',
+ *           body: JSON.stringify({ text: context }),
+ *         })
+ *         const data = await response.json()
+ *         return data.completion
+ *       },
+ *       debounceMs: 2000,
+ *     }),
+ *   ],
+ * })
+ * ```
+ */
+
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        aiSuggestion: {
+            /**
+             * Accept the current AI suggestion
+             */
+            acceptAISuggestion: () => ReturnType;
+            /**
+             * Dismiss the current AI suggestion
+             */
+            dismissAISuggestion: () => ReturnType;
+            /**
+             * Manually trigger a suggestion fetch
+             */
+            triggerAISuggestion: () => ReturnType;
+            /**
+             * Set a suggestion programmatically
+             */
+            setAISuggestion: (text: string) => ReturnType;
+        };
+    }
+}
+
+interface MentionItem {
+    id: string;
+    label: string;
+    avatar?: string;
+    email?: string;
+    type?: "node" | "article";
+    nodeId?: string;
+    slug?: string;
+}
+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
+ */
+declare const createMentionExtension: (options?: MentionOptions) => _tiptap_core.Node<_tiptap_extension_mention.MentionOptions<any, _tiptap_extension_mention.MentionNodeAttrs>, any>;
+/**
+ * Render function for mention suggestions (autocomplete dropdown)
+ */
+declare const renderMentionSuggestion: () => {
+    onStart: (props: any) => void;
+    onUpdate: (props: any) => void;
+    onKeyDown: ({ event }: {
+        event: KeyboardEvent;
+    }) => any;
+    onExit: () => void;
+};
+
+declare function markdownToHtml(input: string | null | undefined): string;
+interface MarkdownStorage {
+    serializer: MarkdownSerializer | null;
+    getMarkdown: () => string;
+}
+declare const Markdown: Extension<any, MarkdownStorage>;
+
+export { EditorRoot as E, type MentionItem as M, EditorContent as a, type EditorContentProps as b, Markdown as c, type MarkdownStorage as d, createMentionExtension as e, type MentionOptions as f, markdownToHtml as m, renderMentionSuggestion as r };

package/dist/Markdown-BAW0cb-U.d.ts

@@ -0,0 +1,153 @@
+import * as _tiptap_core from '@tiptap/core';
+import { Range, Extension } from '@tiptap/core';
+import * as react from 'react';
+import { FC, ReactNode } from 'react';
+import { EditorProviderProps } from '@tiptap/react';
+import * as _tiptap_extension_mention from '@tiptap/extension-mention';
+import { MarkdownSerializer } from '@tiptap/pm/markdown';
+
+interface EditorRootProps {
+    readonly children: ReactNode;
+}
+declare const EditorRoot: FC<EditorRootProps>;
+type EditorContentProps = EditorProviderProps & {
+    readonly children?: ReactNode;
+    readonly className?: string;
+    readonly initialContent?: any;
+};
+declare const EditorContent: react.ForwardRefExoticComponent<{
+    children?: ReactNode;
+    slotBefore?: ReactNode;
+    slotAfter?: ReactNode;
+    editorContainerProps?: react.HTMLAttributes<HTMLDivElement>;
+} & Partial<_tiptap_core.EditorOptions> & {
+    immediatelyRender?: boolean;
+    shouldRerenderOnTransaction?: boolean;
+} & {
+    readonly children?: ReactNode;
+    readonly className?: string;
+    readonly initialContent?: any;
+} & react.RefAttributes<HTMLDivElement>>;
+
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        imageBlock: {
+            setImageBlock: (attributes: {
+                src: string;
+            }) => ReturnType;
+            setImageBlockAt: (attributes: {
+                src: string;
+                pos: number | Range;
+            }) => ReturnType;
+            setImageBlockAlign: (align: "left" | "center" | "right") => ReturnType;
+            setImageBlockWidth: (width: number) => ReturnType;
+        };
+    }
+}
+
+/**
+ * TipTap AI Suggestion Extension
+ *
+ * This extension provides inline AI-powered text completions that appear
+ * as ghost text at the cursor position.
+ *
+ * Usage:
+ * ```ts
+ * import { AISuggestion } from 'neuphlo-editor'
+ *
+ * const editor = new Editor({
+ *   extensions: [
+ *     AISuggestion.configure({
+ *       onFetchSuggestion: async (context) => {
+ *         // Call your AI API here
+ *         const response = await fetch('/api/complete', {
+ *           method: 'POST',
+ *           body: JSON.stringify({ text: context }),
+ *         })
+ *         const data = await response.json()
+ *         return data.completion
+ *       },
+ *       debounceMs: 2000,
+ *     }),
+ *   ],
+ * })
+ * ```
+ */
+
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        aiSuggestion: {
+            /**
+             * Accept the current AI suggestion
+             */
+            acceptAISuggestion: () => ReturnType;
+            /**
+             * Dismiss the current AI suggestion
+             */
+            dismissAISuggestion: () => ReturnType;
+            /**
+             * Manually trigger a suggestion fetch
+             */
+            triggerAISuggestion: () => ReturnType;
+            /**
+             * Set a suggestion programmatically
+             */
+            setAISuggestion: (text: string) => ReturnType;
+        };
+    }
+}
+
+interface MentionItem {
+    id: string;
+    label: string;
+    avatar?: string;
+    email?: string;
+    type?: "node" | "article";
+    nodeId?: string;
+    slug?: string;
+}
+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
+ */
+declare const createMentionExtension: (options?: MentionOptions) => _tiptap_core.Node<_tiptap_extension_mention.MentionOptions<any, _tiptap_extension_mention.MentionNodeAttrs>, any>;
+/**
+ * Render function for mention suggestions (autocomplete dropdown)
+ */
+declare const renderMentionSuggestion: () => {
+    onStart: (props: any) => void;
+    onUpdate: (props: any) => void;
+    onKeyDown: ({ event }: {
+        event: KeyboardEvent;
+    }) => any;
+    onExit: () => void;
+};
+
+declare function markdownToHtml(input: string | null | undefined): string;
+interface MarkdownStorage {
+    serializer: MarkdownSerializer | null;
+    getMarkdown: () => string;
+}
+declare const Markdown: Extension<any, MarkdownStorage>;
+
+export { EditorRoot as E, type MentionItem as M, EditorContent as a, type EditorContentProps as b, Markdown as c, type MarkdownStorage as d, createMentionExtension as e, type MentionOptions as f, markdownToHtml as m, renderMentionSuggestion as r };

package/dist/{chunk-4L7FHW5M.js → chunk-ABL4D65Z.js}

@@ -570,7 +570,36 @@ import Mention from "@tiptap/extension-mention";
 // src/headless/extensions/Mention/mention-command.tsx
 import { forwardRef as forwardRef5, useEffect as useEffect2, useImperativeHandle, useState as useState2 } from "react";
 import { jsx as jsx6, jsxs } from "react/jsx-runtime";
-function Avatar({ src, fallback }) {
+var 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();
+}
+function Avatar({ src, fallback, isAgent }) {
+  const gradient = src && isGradientKey(src) ? GRADIENT_MAP[src] : isAgent ? GRADIENT_MAP.violet : null;
   return /* @__PURE__ */ jsx6("div", { style: {
     position: "relative",
     display: "flex",
@@ -579,7 +608,18 @@ function Avatar({ src, fallback }) {
     flexShrink: 0,
     overflow: "hidden",
     borderRadius: "9999px"
-  }, children: src ? /* @__PURE__ */ jsx6(
+  }, children: gradient ? /* @__PURE__ */ jsx6("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 ? /* @__PURE__ */ jsx6(
     "img",
     {
       style: {
@@ -671,47 +711,62 @@ var MentionCommand = forwardRef5((props, ref) => {
         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 ? props.items.map((item, index) => /* @__PURE__ */ 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 ? /* @__PURE__ */ jsx6(ReferenceIcon, { type: item.type }) : /* @__PURE__ */ jsx6(
-              Avatar,
+      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) => /* @__PURE__ */ jsxs("div", { children: [
+          section.label && /* @__PURE__ */ jsx6("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 /* @__PURE__ */ jsxs(
+              "button",
               {
-                src: item.avatar,
-                fallback: item.label.slice(0, 2).toUpperCase()
-              }
-            ),
-            /* @__PURE__ */ jsx6("span", { style: {
-              flex: 1,
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap"
-            }, children: item.label })
-          ]
-        },
-        item.id
-      )) : /* @__PURE__ */ jsx6("div", { style: {
+                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 ? /* @__PURE__ */ jsx6(ReferenceIcon, { type: item.type }) : /* @__PURE__ */ jsx6(
+                    Avatar,
+                    {
+                      src: item.avatar,
+                      fallback: getInitials(item.label),
+                      isAgent: agent
+                    }
+                  ),
+                  /* @__PURE__ */ jsx6("span", { style: {
+                    flex: 1,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap"
+                  }, children: item.label })
+                ]
+              },
+              item.id
+            );
+          })
+        ] }, section.label ?? "default"));
+      })() : /* @__PURE__ */ jsx6("div", { style: {
         padding: "24px 0",
         textAlign: "center",
         fontSize: "14px",
@@ -725,7 +780,7 @@ MentionCommand.displayName = "MentionCommand";
 // src/headless/extensions/Mention/mention-node-view.tsx
 import { NodeViewWrapper } from "@tiptap/react";
 import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
-var GRADIENT_MAP = {
+var GRADIENT_MAP2 = {
   red: "linear-gradient(135deg, #ef4444, #fb7185)",
   coral: "linear-gradient(135deg, #f87171, #fb923c)",
   orange: "linear-gradient(135deg, #f97316, #fbbf24)",
@@ -789,14 +844,14 @@ var MentionNodeView = (props) => {
       children: [
         isNode && /* @__PURE__ */ jsx7(NodeIcon, {}),
         isArticle && /* @__PURE__ */ jsx7(ArticleIcon, {}),
-        !isReference && avatar && avatar in GRADIENT_MAP && /* @__PURE__ */ jsx7(
+        !isReference && avatar && avatar in GRADIENT_MAP2 && /* @__PURE__ */ jsx7(
           "div",
           {
             style: {
               width: "20px",
               height: "20px",
               borderRadius: "50%",
-              background: GRADIENT_MAP[avatar],
+              background: GRADIENT_MAP2[avatar],
               color: "#ffffff",
               display: "flex",
               alignItems: "center",
@@ -808,7 +863,7 @@ var MentionNodeView = (props) => {
             children: (label || id).split(/\s+/).map((w) => w[0]).join("").slice(0, 2).toUpperCase()
           }
         ),
-        !isReference && avatar && !(avatar in GRADIENT_MAP) && /* @__PURE__ */ jsx7(
+        !isReference && avatar && !(avatar in GRADIENT_MAP2) && /* @__PURE__ */ jsx7(
           "img",
           {
             src: avatar,
@@ -851,6 +906,17 @@ var createMentionExtension = (options) => {
   const extensionName = options?.name ?? "mention";
   return Mention.extend({
     name: extensionName,
+    addStorage() {
+      return {
+        markdown: {
+          serialize(state, node) {
+            const label = String(node.attrs.label ?? node.attrs.id ?? "");
+            const id = String(node.attrs.id ?? "");
+            state.write(`@[${label}](mention:${id})`);
+          }
+        }
+      };
+    },
     addAttributes() {
       return {
         id: {
@@ -1385,4 +1451,4 @@ export {
   handleCommandNavigation,
   useCurrentEditor4 as useCurrentEditor
 };
-//# sourceMappingURL=chunk-4L7FHW5M.js.map
+//# sourceMappingURL=chunk-ABL4D65Z.js.map