@agent-native/core 0.110.2 → 0.111.0

package/dist/client/resources/ResourceEditor.js

@@ -1,14 +1,9 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Link from "@tiptap/extension-link";
-import Placeholder from "@tiptap/extension-placeholder";
-import { useEditor, EditorContent } from "@tiptap/react";
-import StarterKit from "@tiptap/starter-kit";
+import { SharedRichEditor } from "@agent-native/toolkit/editor/SharedRichEditor";
 import { useState, useRef, useEffect, useCallback, useMemo, } from "react";
-import { Markdown } from "tiptap-markdown";
 import { CLAUDE_SONNET_MODEL_ID, CLAUDE_SONNET_MODEL_LABEL, } from "../../agent/model-config.js";
 import { getRemoteAgentIdFromPath, getFrontmatterValue, isCustomAgentPath, isRemoteAgentPath, isSkillPath, parseFrontmatter, serializeFrontmatter, } from "../../resources/metadata.js";
 import { agentNativePath } from "../api-path.js";
-import { Tooltip, TooltipContent, TooltipTrigger, } from "../components/ui/tooltip.js";
 import { cn } from "../utils.js";
 const CONTROL_STYLE = { fontSize: 12, lineHeight: 1 };
 const VIEW_PREF_KEY = "resource-editor-view";
@@ -127,343 +122,6 @@ function FrontmatterBar({ resourcePath, frontmatter, onChange, readOnly, }) {
                             padding: "2px 6px",
                         }, children: [_jsx("option", { value: "inherit", children: "Inherit" }), _jsx("option", { value: "allowlist", children: "Allowlist later" }), _jsx("option", { value: "denylist", children: "Denylist later" })] })] })) : null] }));
 }
-const slashCommands = [
-    {
-        title: "Text",
-        description: "Plain text",
-        icon: "T",
-        action: (editor) => editor.chain().focus().setParagraph().run(),
-    },
-    {
-        title: "Heading 1",
-        description: "Large heading",
-        icon: "H1",
-        action: (editor) => editor.chain().focus().toggleHeading({ level: 1 }).run(),
-    },
-    {
-        title: "Heading 2",
-        description: "Medium heading",
-        icon: "H2",
-        action: (editor) => editor.chain().focus().toggleHeading({ level: 2 }).run(),
-    },
-    {
-        title: "Heading 3",
-        description: "Small heading",
-        icon: "H3",
-        action: (editor) => editor.chain().focus().toggleHeading({ level: 3 }).run(),
-    },
-    {
-        title: "Bullet List",
-        description: "Unordered list",
-        icon: "•",
-        action: (editor) => editor.chain().focus().toggleBulletList().run(),
-    },
-    {
-        title: "Numbered List",
-        description: "Ordered list",
-        icon: "1.",
-        action: (editor) => editor.chain().focus().toggleOrderedList().run(),
-    },
-    {
-        title: "Code Block",
-        description: "Code snippet",
-        icon: "<>",
-        action: (editor) => editor.chain().focus().toggleCodeBlock().run(),
-    },
-    {
-        title: "Quote",
-        description: "Block quote",
-        icon: '"',
-        action: (editor) => editor.chain().focus().toggleBlockquote().run(),
-    },
-    {
-        title: "Divider",
-        description: "Horizontal rule",
-        icon: "—",
-        action: (editor) => editor.chain().focus().setHorizontalRule().run(),
-    },
-];
-function SlashMenu({ editor }) {
-    const [isOpen, setIsOpen] = useState(false);
-    const [query, setQuery] = useState("");
-    const [selectedIndex, setSelectedIndex] = useState(0);
-    const [position, setPosition] = useState(null);
-    const slashPosRef = useRef(null);
-    const menuRef = useRef(null);
-    const filteredCommands = useMemo(() => slashCommands.filter((cmd) => cmd.title.toLowerCase().includes(query.toLowerCase()) ||
-        cmd.description.toLowerCase().includes(query.toLowerCase())), [query]);
-    const executeCommand = useCallback((cmd) => {
-        if (slashPosRef.current !== null) {
-            const { from } = editor.state.selection;
-            editor
-                .chain()
-                .focus()
-                .deleteRange({ from: slashPosRef.current, to: from })
-                .run();
-        }
-        cmd.action(editor);
-        setIsOpen(false);
-        setQuery("");
-        slashPosRef.current = null;
-    }, [editor]);
-    useEffect(() => {
-        if (!editor)
-            return;
-        const handleKeyDown = (e) => {
-            if (!isOpen)
-                return;
-            if (e.key === "ArrowDown") {
-                e.preventDefault();
-                setSelectedIndex((i) => (i + 1) % filteredCommands.length);
-            }
-            else if (e.key === "ArrowUp") {
-                e.preventDefault();
-                setSelectedIndex((i) => (i - 1 + filteredCommands.length) % filteredCommands.length);
-            }
-            else if (e.key === "Enter") {
-                e.preventDefault();
-                if (filteredCommands[selectedIndex]) {
-                    executeCommand(filteredCommands[selectedIndex]);
-                }
-            }
-            else if (e.key === "Escape") {
-                setIsOpen(false);
-                setQuery("");
-                slashPosRef.current = null;
-            }
-        };
-        document.addEventListener("keydown", handleKeyDown, true);
-        return () => document.removeEventListener("keydown", handleKeyDown, true);
-    }, [isOpen, selectedIndex, filteredCommands, executeCommand, editor]);
-    useEffect(() => {
-        if (!editor)
-            return;
-        const handleTransaction = () => {
-            const { state } = editor;
-            const { from } = state.selection;
-            const textBefore = state.doc.textBetween(Math.max(0, from - 20), from, "\n");
-            const slashMatch = textBefore.match(/\/([a-zA-Z0-9]*)$/);
-            if (slashMatch) {
-                const slashStart = from - slashMatch[0].length;
-                slashPosRef.current = slashStart;
-                setQuery(slashMatch[1]);
-                setSelectedIndex(0);
-                const coords = editor.view.coordsAtPos(from);
-                // Estimate menu height (~320px max) and check if it fits below
-                const menuHeight = 320;
-                const spaceBelow = window.innerHeight - coords.bottom;
-                const flipUp = spaceBelow < menuHeight && coords.top > menuHeight;
-                setPosition({
-                    top: flipUp ? coords.top : coords.bottom + 4,
-                    left: Math.min(coords.left, window.innerWidth - 240),
-                    flipUp,
-                });
-                setIsOpen(true);
-            }
-            else {
-                if (isOpen) {
-                    setIsOpen(false);
-                    setQuery("");
-                    slashPosRef.current = null;
-                }
-            }
-        };
-        editor.on("transaction", handleTransaction);
-        return () => {
-            editor.off("transaction", handleTransaction);
-        };
-    }, [editor, isOpen]);
-    if (!isOpen || !position || filteredCommands.length === 0)
-        return null;
-    return (_jsx("div", { ref: menuRef, style: {
-            position: "fixed",
-            ...(position.flipUp
-                ? { bottom: window.innerHeight - position.top + 4 }
-                : { top: position.top }),
-            left: position.left,
-            zIndex: 9999,
-        }, className: "re-slash-menu", children: _jsxs("div", { className: "py-1", children: [_jsx("div", { style: {
-                        padding: "4px 10px",
-                        fontSize: 10,
-                        fontWeight: 600,
-                        textTransform: "uppercase",
-                        letterSpacing: "0.06em",
-                        opacity: 0.5,
-                    }, children: "Blocks" }), filteredCommands.map((cmd, i) => (_jsxs("button", { onClick: () => executeCommand(cmd), onMouseEnter: () => setSelectedIndex(i), className: cn("re-slash-item", i === selectedIndex && "re-slash-item--active"), children: [_jsx("span", { className: "re-slash-icon", children: cmd.icon }), _jsxs("span", { children: [_jsx("span", { className: "re-slash-title", children: cmd.title }), _jsx("span", { className: "re-slash-desc", children: cmd.description })] })] }, cmd.title)))] }) }));
-}
-// --- Inline Bubble Toolbar ---
-function InlineBubbleToolbar({ editor }) {
-    const [visible, setVisible] = useState(false);
-    const [coords, setCoords] = useState({ top: 0, left: 0 });
-    const [showLinkInput, setShowLinkInput] = useState(false);
-    const [linkUrl, setLinkUrl] = useState("");
-    const toolbarRef = useRef(null);
-    useEffect(() => {
-        if (!editor)
-            return;
-        const update = () => {
-            const { from, to } = editor.state.selection;
-            if (from === to || !editor.isFocused) {
-                setVisible(false);
-                return;
-            }
-            const domSelection = window.getSelection();
-            if (!domSelection || domSelection.rangeCount === 0) {
-                setVisible(false);
-                return;
-            }
-            const range = domSelection.getRangeAt(0);
-            const rect = range.getBoundingClientRect();
-            if (rect.width === 0) {
-                setVisible(false);
-                return;
-            }
-            // Use fixed positioning with viewport coordinates
-            setCoords({
-                top: rect.top - 8,
-                left: rect.left + rect.width / 2,
-            });
-            setVisible(true);
-        };
-        editor.on("selectionUpdate", update);
-        const onBlur = () => {
-            // Delay so clicks on toolbar buttons register before hiding
-            setTimeout(() => {
-                if (!editor.isFocused)
-                    setVisible(false);
-            }, 150);
-        };
-        editor.on("blur", onBlur);
-        return () => {
-            editor.off("selectionUpdate", update);
-            editor.off("blur", onBlur);
-        };
-    }, [editor]);
-    const handleSetLink = () => {
-        if (linkUrl.trim()) {
-            editor
-                .chain()
-                .focus()
-                .extendMarkRange("link")
-                .setLink({ href: linkUrl.trim() })
-                .run();
-        }
-        else {
-            editor.chain().focus().extendMarkRange("link").unsetLink().run();
-        }
-        setShowLinkInput(false);
-        setLinkUrl("");
-    };
-    const toggleLink = () => {
-        if (editor.isActive("link")) {
-            editor.chain().focus().unsetLink().run();
-            return;
-        }
-        const previousUrl = editor.getAttributes("link").href || "";
-        setLinkUrl(previousUrl);
-        setShowLinkInput(true);
-    };
-    const items = [
-        {
-            label: "B",
-            title: "Bold",
-            action: () => editor.chain().focus().toggleBold().run(),
-            isActive: () => editor.isActive("bold"),
-            style: { fontWeight: 700 },
-        },
-        {
-            label: "I",
-            title: "Italic",
-            action: () => editor.chain().focus().toggleItalic().run(),
-            isActive: () => editor.isActive("italic"),
-            style: { fontStyle: "italic" },
-        },
-        {
-            label: "S",
-            title: "Strikethrough",
-            action: () => editor.chain().focus().toggleStrike().run(),
-            isActive: () => editor.isActive("strike"),
-            style: { textDecoration: "line-through" },
-        },
-        {
-            label: "<>",
-            title: "Code",
-            action: () => editor.chain().focus().toggleCode().run(),
-            isActive: () => editor.isActive("code"),
-            style: { fontFamily: "monospace", fontSize: 11 },
-        },
-        { type: "divider" },
-        {
-            label: "H1",
-            title: "Heading 1",
-            action: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
-            isActive: () => editor.isActive("heading", { level: 1 }),
-        },
-        {
-            label: "H2",
-            title: "Heading 2",
-            action: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
-            isActive: () => editor.isActive("heading", { level: 2 }),
-        },
-        {
-            label: "H3",
-            title: "Heading 3",
-            action: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
-            isActive: () => editor.isActive("heading", { level: 3 }),
-        },
-        { type: "divider" },
-        {
-            label: "Link",
-            title: "Link",
-            action: toggleLink,
-            isActive: () => editor.isActive("link"),
-        },
-    ];
-    if (!visible)
-        return null;
-    return (_jsx("div", { ref: toolbarRef, className: "re-bubble-toolbar", onMouseDown: (e) => e.preventDefault(), style: {
-            position: "fixed",
-            top: coords.top,
-            left: coords.left,
-            transform: "translate(-50%, -100%)",
-            zIndex: 9999,
-        }, children: showLinkInput ? (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4, padding: 4 }, onMouseDown: (e) => e.preventDefault(), children: [_jsx("input", { autoFocus: true, type: "url", placeholder: "Paste link...", value: linkUrl, onChange: (e) => setLinkUrl(e.target.value), onKeyDown: (e) => {
-                        if (e.key === "Enter")
-                            handleSetLink();
-                        if (e.key === "Escape") {
-                            setShowLinkInput(false);
-                            setLinkUrl("");
-                        }
-                    }, style: {
-                        background: "transparent",
-                        border: "none",
-                        outline: "none",
-                        color: "white",
-                        fontSize: 12,
-                        width: 160,
-                        padding: "2px 4px",
-                    } }), _jsx("button", { onClick: handleSetLink, style: {
-                        fontSize: 11,
-                        color: "hsl(var(--primary))",
-                        padding: "2px 6px",
-                        fontWeight: 500,
-                        background: "none",
-                        border: "none",
-                        cursor: "pointer",
-                    }, children: "Apply" })] })) : (_jsx("div", { style: { display: "flex", alignItems: "center", gap: 2 }, onMouseDown: (e) => e.preventDefault(), children: items.map((item, i) => {
-                if ("type" in item && item.type === "divider") {
-                    return (_jsx("div", { style: {
-                            width: 1,
-                            height: 16,
-                            background: "hsl(var(--border))",
-                            margin: "0 2px",
-                        } }, `d-${i}`));
-                }
-                const { label, title, action, isActive, style } = item;
-                return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { onClick: action, className: cn("re-bubble-btn", isActive() && "re-bubble-btn--active"), style: style, children: label }) }), _jsx(TooltipContent, { children: title })] }, title));
-            }) })) }));
-}
-// --- Visual Markdown Editor ---
 // --- Syntax-highlighted code editor (textarea + overlay) ---
 function highlightJson(text) {
     // Escape HTML first
@@ -539,120 +197,26 @@ function SyntaxHighlightEditor({ value, onChange, language: _language, readOnly,
                             WebkitTextFillColor: "transparent",
                         } })] })] }));
 }
+const RESOURCE_MARKDOWN_FEATURES = {
+    tables: false,
+    tasks: false,
+    image: false,
+};
 function VisualMarkdownEditor({ content, onChange, resourcePath, readOnly, }) {
-    const isSettingContent = useRef(false);
-    const onChangeRef = useRef(onChange);
-    onChangeRef.current = onChange;
-    // Parse frontmatter — strip it from tiptap content, re-prepend on save
     const parsed = useMemo(() => parseFrontmatter(content), [content]);
     const frontmatterRef = useRef(parsed);
     frontmatterRef.current = parsed;
-    const editor = useEditor({
-        extensions: [
-            StarterKit.configure({
-                heading: { levels: [1, 2, 3] },
-                codeBlock: {},
-                link: false,
-                dropcursor: { color: "hsl(var(--ring))", width: 2 },
-            }),
-            Placeholder.configure({
-                placeholder: ({ node }) => {
-                    if (node.type.name === "heading") {
-                        const level = node.attrs.level;
-                        if (level === 1)
-                            return "Heading 1";
-                        if (level === 2)
-                            return "Heading 2";
-                        return "Heading 3";
-                    }
-                    return "Type '/' for commands...";
-                },
-                showOnlyWhenEditable: true,
-                showOnlyCurrent: true,
-            }),
-            Link.configure({
-                openOnClick: false,
-                HTMLAttributes: { class: "re-link" },
-            }),
-            Markdown.configure({
-                html: true,
-                transformPastedText: true,
-                transformCopiedText: true,
-            }),
-        ],
-        content: parsed?.body ?? content,
-        editable: !readOnly,
-        editorProps: {
-            attributes: {
-                class: "re-prose",
-            },
-        },
-        onUpdate: ({ editor }) => {
-            if (readOnly)
-                return;
-            if (isSettingContent.current)
-                return;
-            try {
-                const md = editor.storage.markdown.getMarkdown();
-                // Re-prepend frontmatter if it existed
-                const fm = frontmatterRef.current;
-                const full = fm ? fm.raw + md : md;
-                onChangeRef.current(full);
-            }
-            catch (err) {
-                console.error("Markdown serialization error:", err);
-            }
-        },
-    });
-    useEffect(() => {
-        if (!editor || editor.isDestroyed)
-            return;
-        editor.setEditable(!readOnly);
-    }, [editor, readOnly]);
-    useEffect(() => {
-        if (!editor || editor.isDestroyed)
-            return;
-        const currentMd = editor.storage.markdown.getMarkdown();
-        if (currentMd !== (parsed?.body ?? content)) {
-            if (editor.isFocused)
-                return;
-            isSettingContent.current = true;
-            editor.commands.setContent(parsed?.body ?? content);
-            isSettingContent.current = false;
-        }
-    }, [content, editor, parsed]);
-    useEffect(() => {
-        return () => {
-            editor?.destroy();
-        };
-    }, [editor]);
-    if (!editor)
-        return null;
-    const handleWrapperClick = (e) => {
-        // If the click was on the wrapper (empty area), not on editor content, focus at end
-        const target = e.target;
-        if (target.classList.contains("re-editor-clickable") ||
-            target.classList.contains("re-editor-wrapper")) {
-            editor.chain().focus("end").run();
-        }
-    };
-    return (_jsxs("div", { className: "re-editor-wrapper re-editor-clickable", onClick: handleWrapperClick, style: {
-            position: "relative",
-            minHeight: "100%",
-            cursor: readOnly ? "default" : "text",
-        }, children: [parsed && (_jsx(FrontmatterBar, { resourcePath: resourcePath, frontmatter: parsed, readOnly: readOnly, onChange: (updated) => {
+    const body = parsed?.body ?? content;
+    const commitBody = useCallback((nextBody) => {
+        const frontmatter = frontmatterRef.current;
+        onChange(frontmatter ? frontmatter.raw + nextBody : nextBody);
+    }, [onChange]);
+    return (_jsxs("div", { className: "re-editor-wrapper min-h-full", children: [parsed ? (_jsx(FrontmatterBar, { resourcePath: resourcePath, frontmatter: parsed, readOnly: readOnly, onChange: (updated) => {
                     if (readOnly)
                         return;
                     frontmatterRef.current = updated;
-                    // Get current body and combine with updated frontmatter
-                    try {
-                        const md = editor.storage.markdown.getMarkdown();
-                        onChangeRef.current(updated.raw + md);
-                    }
-                    catch {
-                        // fallback
-                    }
-                } })), !readOnly && _jsx(InlineBubbleToolbar, { editor: editor }), !readOnly && _jsx(SlashMenu, { editor: editor }), _jsx(EditorContent, { editor: editor })] }));
+                    onChange(updated.raw + body);
+                } })) : null, _jsx(SharedRichEditor, { value: body, onChange: commitBody, editable: !readOnly, interactive: !readOnly, dialect: "gfm", features: RESOURCE_MARKDOWN_FEATURES, placeholder: "Type '/' for commands...", editorClassName: "re-prose", ariaLabel: "Resource markdown" })] }));
 }
 function parseRemoteAgentContent(content, path) {
     const fallbackId = getRemoteAgentIdFromPath(path);
@@ -884,87 +448,5 @@ const editorStyles = `
   background: hsl(210 100% 52% / 0.2);
 }
 
-/* Bubble toolbar */
-.re-bubble-toolbar {
-  display: flex;
-  align-items: center;
-  background: hsl(var(--popover));
-  color: hsl(var(--popover-foreground));
-  border: 1px solid hsl(var(--border));
-  border-radius: 6px;
-  padding: 3px;
-  box-shadow: 0 4px 16px rgb(0 0 0 / 0.12);
-}
-.re-bubble-btn {
-  padding: 3px 6px;
-  border-radius: 4px;
-  font-size: 12px;
-  color: hsl(var(--muted-foreground));
-  background: none;
-  border: none;
-  cursor: pointer;
-  line-height: 1;
-}
-.re-bubble-btn:hover {
-  background: hsl(var(--accent));
-  color: hsl(var(--accent-foreground));
-}
-.re-bubble-btn--active {
-  background: hsl(var(--accent));
-  color: hsl(var(--accent-foreground));
-}
-
-/* Slash command menu */
-.re-slash-menu {
-  background: hsl(var(--popover));
-  border: 1px solid hsl(var(--border));
-  border-radius: 6px;
-  box-shadow: 0 4px 20px rgb(0 0 0 / 0.12), 0 0 0 1px rgb(0 0 0 / 0.04);
-  min-width: 220px;
-  max-height: 320px;
-  overflow-y: auto;
-  color: hsl(var(--foreground));
-}
-.re-slash-item {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 10px;
-  text-align: left;
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: hsl(var(--foreground));
-  font-size: 13px;
-}
-.re-slash-item:hover,
-.re-slash-item--active {
-  background: hsl(var(--accent));
-}
-.re-slash-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border-radius: 4px;
-  border: 1px solid hsl(var(--border));
-  background: hsl(var(--background));
-  font-size: 12px;
-  font-weight: 600;
-  color: hsl(var(--muted-foreground));
-  flex-shrink: 0;
-}
-.re-slash-title {
-  display: block;
-  font-weight: 500;
-  font-size: 13px;
-}
-.re-slash-desc {
-  display: block;
-  font-size: 11px;
-  color: hsl(var(--muted-foreground));
-}
 `;
 //# sourceMappingURL=ResourceEditor.js.map