@jhits/plugin-content 0.0.15 → 0.0.16

package/src/components/LinkSettingsModal.tsx

@@ -0,0 +1,442 @@
+/**
+ * Link Settings Modal
+ * Inline editor for dynamic links
+ */
+
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { X, Save, Upload, Link2, FileText, Globe, Loader2, Check, Download, Search, FolderOpen, Trash2 } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+interface MediaFile {
+    id: string;
+    filename: string;
+    url: string;
+    size: number;
+    mimeType: string;
+    uploadedAt: string;
+}
+
+interface LinkSettingsModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    linkKey: string;
+    siteId: string;
+    locale: string;
+    initialData?: {
+        label: string;
+        target: string;
+        type: 'url' | 'file';
+    };
+    onSaveSuccess?: () => void;
+    apiBaseUrl?: string;
+}
+
+export function LinkSettingsModal({
+    isOpen,
+    onClose,
+    linkKey,
+    siteId,
+    locale,
+    initialData,
+    onSaveSuccess,
+    apiBaseUrl = '/api/plugin-content'
+}: LinkSettingsModalProps) {
+    const [label, setLabel] = useState(initialData?.label || '');
+    const [target, setTarget] = useState(initialData?.target || '');
+    const [type, setType] = useState<'url' | 'file'>(initialData?.type || 'url');
+    const [isSaving, setIsSaving] = useState(false);
+    const [isUploading, setIsUploading] = useState(false);
+    const [mounted, setMounted] = useState(false);
+    
+    // File browser state
+    const [isBrowsing, setIsBrowsing] = useState(false);
+    const [availableFiles, setAvailableFiles] = useState<MediaFile[]>([]);
+    const [allLinks, setAllLinks] = useState<any[]>([]); // To check for file usage
+    const [fileSearch, setFileSearch] = useState('');
+    const [isLoadingFiles, setIsLoadingFiles] = useState(false);
+
+    const downloadUrl = React.useMemo(() => {
+        if (type !== 'file' || !target) return '';
+        return `${apiBaseUrl}/files/download?id=${target}&download=true`;
+    }, [type, target, apiBaseUrl]);
+
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    useEffect(() => {
+        if (isOpen && initialData) {
+            setLabel(initialData.label);
+            setTarget(initialData.target);
+            setType(initialData.type);
+            setIsBrowsing(false);
+        }
+    }, [isOpen, initialData]);
+
+    const fetchFilesAndLinks = async () => {
+        setIsLoadingFiles(true);
+        try {
+            const [filesRes, linksRes] = await Promise.all([
+                fetch(`${apiBaseUrl}/files?siteId=${siteId}`),
+                fetch(`${apiBaseUrl}/links?siteId=${siteId}`)
+            ]);
+
+            if (filesRes.ok) {
+                const data = await filesRes.json();
+                setAvailableFiles(data.files || []);
+            }
+
+            if (linksRes.ok) {
+                const data = await linksRes.json();
+                setAllLinks(data.links || []);
+            }
+        } catch (err) {
+            console.error('Failed to fetch library data:', err);
+        } finally {
+            setIsLoadingFiles(false);
+        }
+    };
+
+    // Check if a specific file is in use by any link in any language
+    const isFileInUse = (fileId: string) => {
+        return allLinks.some(link => 
+            Object.values(link.languages || {}).some((lang: any) => 
+                lang.type === 'file' && lang.target === fileId
+            )
+        );
+    };
+
+    const handleDeleteFile = async (e: React.MouseEvent, fileId: string) => {
+        e.stopPropagation();
+        if (isFileInUse(fileId)) {
+            alert('This file cannot be deleted because it is currently linked to a button.');
+            return;
+        }
+
+        if (!confirm('Are you sure you want to permanently delete this file?')) return;
+
+        try {
+            const res = await fetch(`${apiBaseUrl}/files?siteId=${siteId}&id=${fileId}`, {
+                method: 'DELETE',
+            });
+            if (res.ok) {
+                setAvailableFiles(availableFiles.filter(f => f.id !== fileId));
+                if (target === fileId) {
+                    setTarget('');
+                }
+            }
+        } catch (err) {
+            console.error('Delete failed:', err);
+        }
+    };
+
+    const filteredFiles = React.useMemo(() => {
+        return availableFiles.filter(f => 
+            f.filename.toLowerCase().includes(fileSearch.toLowerCase())
+        );
+    }, [availableFiles, fileSearch]);
+
+    const handleSave = async () => {
+        setIsSaving(true);
+        try {
+            // 1. First get existing link data to preserve other languages
+            const getRes = await fetch(`${apiBaseUrl}/links?siteId=${siteId}`);
+            let existingLink = { key: linkKey, languages: {} };
+            
+            if (getRes.ok) {
+                const data = await getRes.json();
+                const found = data.links?.find((l: any) => l.key === linkKey);
+                if (found) existingLink = found;
+            }
+
+            // 2. Update the specific language
+            const updatedLink = {
+                ...existingLink,
+                languages: {
+                    ...existingLink.languages,
+                    [locale]: { label, target, type }
+                }
+            };
+
+            const res = await fetch(`${apiBaseUrl}/links`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ siteId, link: updatedLink }),
+            });
+
+            if (res.ok) {
+                if (onSaveSuccess) onSaveSuccess();
+                // Notify other components
+                window.dispatchEvent(new CustomEvent('link-updated'));
+                onClose();
+            }
+        } catch (err) {
+            console.error('Failed to save link settings:', err);
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (!file) return;
+
+        setIsUploading(true);
+        try {
+            const formData = new FormData();
+            formData.append('file', file);
+            formData.append('siteId', siteId);
+
+            const res = await fetch(`${apiBaseUrl}/files/upload`, {
+                method: 'POST',
+                body: formData,
+            });
+
+            if (res.ok) {
+                const data = await res.json();
+                setTarget(data.file.id);
+                setType('file');
+            }
+        } catch (err) {
+            console.error('Upload failed:', err);
+        } finally {
+            setIsUploading(false);
+        }
+    };
+
+    if (!mounted || !isOpen) return null;
+
+    return createPortal(
+        <div className="fixed inset-0 z-[10000] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm" onClick={onClose}>
+            <motion.div 
+                initial={{ opacity: 0, scale: 0.95, y: 20 }}
+                animate={{ opacity: 1, scale: 1, y: 0 }}
+                className="bg-white dark:bg-neutral-900 w-full max-w-lg rounded-[2.5rem] shadow-2xl border border-neutral-200 dark:border-neutral-800 overflow-hidden"
+                onClick={(e) => e.stopPropagation()}
+            >
+                <div className="p-8">
+                    <div className="flex items-center justify-between mb-8">
+                        <div className="flex items-center gap-3">
+                            <div className="p-3 bg-primary/10 rounded-2xl">
+                                <Link2 className="text-primary size-6" />
+                            </div>
+                            <div>
+                                <h3 className="text-xl font-black uppercase tracking-tighter text-neutral-950 dark:text-white">
+                                    Link Settings
+                                </h3>
+                                <p className="text-[10px] font-bold text-neutral-500 uppercase tracking-widest">
+                                    Key: {linkKey} • {locale.toUpperCase()}
+                                </p>
+                            </div>
+                        </div>
+                        <button onClick={onClose} className="p-2 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-full transition-colors">
+                            <X size={20} />
+                        </button>
+                    </div>
+
+                    <div className="space-y-6">
+                        {/* Label Field */}
+                        <div>
+                            <label className="text-[10px] font-black uppercase tracking-widest text-neutral-400 block mb-2">
+                                Display Label
+                            </label>
+                            <input
+                                type="text"
+                                value={label}
+                                onChange={(e) => setLabel(e.target.value)}
+                                className="w-full bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 p-4 rounded-2xl text-sm font-bold outline-none focus:border-primary transition-all"
+                                placeholder="Button text..."
+                            />
+                        </div>
+
+                        {/* Target Type Toggle */}
+                        <div className="flex gap-2 p-1 bg-neutral-100 dark:bg-neutral-800 rounded-2xl">
+                            <button
+                                onClick={() => setType('url')}
+                                className={`flex-1 flex items-center justify-center gap-2 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all ${
+                                    type === 'url' ? 'bg-white dark:bg-neutral-700 shadow-sm text-primary' : 'text-neutral-500'
+                                }`}
+                            >
+                                <Globe size={14} />
+                                URL / Route
+                            </button>
+                            <button
+                                onClick={() => setType('file')}
+                                className={`flex-1 flex items-center justify-center gap-2 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all ${
+                                    type === 'file' ? 'bg-white dark:bg-neutral-700 shadow-sm text-primary' : 'text-neutral-500'
+                                }`}
+                            >
+                                <FileText size={14} />
+                                Download File
+                            </button>
+                        </div>
+
+                        {/* Target Field */}
+                        <div>
+                            <label className="text-[10px] font-black uppercase tracking-widest text-neutral-400 block mb-2">
+                                {type === 'url' ? 'Destination URL' : 'File Identifier'}
+                            </label>
+                            <div className="relative">
+                                <input
+                                    type="text"
+                                    value={target}
+                                    onChange={(e) => setTarget(e.target.value)}
+                                    className="w-full bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 p-4 rounded-2xl text-sm font-bold outline-none focus:border-primary transition-all"
+                                    placeholder={type === 'url' ? "/about or https://..." : "Upload or select a file..."}
+                                />
+                                {type === 'file' && target && (
+                                    <div className="absolute right-4 top-1/2 -translate-y-1/2 flex items-center gap-2">
+                                        <a 
+                                            href={downloadUrl}
+                                            target="_blank"
+                                            rel="noopener noreferrer"
+                                            className="p-1.5 bg-white dark:bg-neutral-700 rounded-lg text-neutral-500 hover:text-primary transition-all shadow-sm"
+                                            title="Download File"
+                                        >
+                                            <Download size={14} />
+                                        </a>
+                                        <div className="text-green-500">
+                                            <Check size={16} />
+                                        </div>
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+
+                        {/* File Options (Conditional) */}
+                        {type === 'file' && (
+                            <div className="space-y-4">
+                                <div className="flex gap-2 p-1 bg-neutral-100 dark:bg-neutral-800 rounded-xl">
+                                    <button
+                                        onClick={() => setIsBrowsing(false)}
+                                        className={`flex-1 flex items-center justify-center gap-2 py-2 rounded-lg text-[9px] font-black uppercase tracking-widest transition-all ${
+                                            !isBrowsing ? 'bg-white dark:bg-neutral-700 shadow-sm text-primary' : 'text-neutral-500'
+                                        }`}
+                                    >
+                                        <Upload size={12} />
+                                        Upload New
+                                    </button>
+                                    <button
+                                        onClick={() => {
+                                            setIsBrowsing(true);
+                                            fetchFilesAndLinks();
+                                        }}
+                                        className={`flex-1 flex items-center justify-center gap-2 py-2 rounded-lg text-[9px] font-black uppercase tracking-widest transition-all ${
+                                            isBrowsing ? 'bg-white dark:bg-neutral-700 shadow-sm text-primary' : 'text-neutral-500'
+                                        }`}
+                                    >
+                                        <FolderOpen size={12} />
+                                        Browse Library
+                                    </button>
+                                </div>
+
+                                {isBrowsing ? (
+                                    <div className="bg-neutral-50 dark:bg-neutral-800/50 rounded-2xl border border-neutral-200 dark:border-neutral-700 overflow-hidden">
+                                        <div className="p-3 border-b border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900">
+                                            <div className="relative">
+                                                <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400 size-3" />
+                                                <input
+                                                    type="text"
+                                                    value={fileSearch}
+                                                    onChange={(e) => setFileSearch(e.target.value)}
+                                                    placeholder="Search files..."
+                                                    className="w-full pl-9 pr-3 py-2 bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg text-xs outline-none focus:border-primary transition-all"
+                                                />
+                                            </div>
+                                        </div>
+                                        <div className="max-h-[200px] overflow-y-auto p-2 space-y-1 custom-scrollbar">
+                                            {isLoadingFiles ? (
+                                                <div className="flex justify-center py-8">
+                                                    <Loader2 className="animate-spin text-primary size-6" />
+                                                </div>
+                                            ) : filteredFiles.length === 0 ? (
+                                                <p className="text-center py-8 text-[10px] text-neutral-500 uppercase font-bold">No files found</p>
+                                            ) : (
+                                                filteredFiles.map(file => {
+                                                    const inUse = isFileInUse(file.id);
+                                                    return (
+                                                        <div key={file.id} className="flex items-center gap-1 group/item">
+                                                            <button
+                                                                onClick={() => setTarget(file.id)}
+                                                                className={`flex-1 flex items-center gap-3 p-3 rounded-xl transition-all text-left ${
+                                                                    target === file.id 
+                                                                        ? 'bg-primary/10 border border-primary/20' 
+                                                                        : 'hover:bg-white dark:hover:bg-neutral-800 border border-transparent'
+                                                                }`}
+                                                            >
+                                                                <div className="p-2 bg-white dark:bg-neutral-900 rounded-lg shadow-sm">
+                                                                    <FileText size={14} className="text-primary" />
+                                                                </div>
+                                                                <div className="min-w-0 flex-1">
+                                                                    <p className="text-xs font-bold text-neutral-950 dark:text-white truncate">{file.filename}</p>
+                                                                    <p className="text-[9px] text-neutral-500 uppercase font-black">{file.mimeType.split('/')[1]}</p>
+                                                                </div>
+                                                                {target === file.id && <Check size={14} className="text-primary" />}
+                                                            </button>
+                                                            
+                                                            {!inUse ? (
+                                                                <button
+                                                                    onClick={(e) => handleDeleteFile(e, file.id)}
+                                                                    className="p-3 text-neutral-400 hover:text-red-500 transition-colors opacity-0 group-hover/item:opacity-100"
+                                                                    title="Delete file"
+                                                                >
+                                                                    <Trash2 size={14} />
+                                                                </button>
+                                                            ) : (
+                                                                <div 
+                                                                    className="p-3 text-neutral-300 cursor-not-allowed" 
+                                                                    title="File is in use and cannot be deleted"
+                                                                >
+                                                                    <Link2 size={14} />
+                                                                </div>
+                                                            )}
+                                                        </div>
+                                                    );
+                                                })
+                                            )}
+                                        </div>
+                                    </div>
+                                ) : (
+                                    <div className="pt-2">
+                                        <label className={`flex items-center justify-center gap-3 w-full p-4 rounded-2xl border-2 border-dashed transition-all cursor-pointer ${
+                                            isUploading 
+                                                ? 'border-neutral-300 bg-neutral-50 opacity-50 pointer-events-none' 
+                                                : 'border-neutral-200 hover:border-primary hover:bg-primary/5'
+                                        }`}>
+                                            {isUploading ? <Loader2 className="animate-spin text-primary" /> : <Upload className="text-primary" />}
+                                            <span className="text-[10px] font-black uppercase tracking-widest text-neutral-600">
+                                                {isUploading ? 'Uploading...' : 'Upload PDF or Document'}
+                                            </span>
+                                            <input type="file" className="hidden" onChange={handleFileUpload} disabled={isUploading} />
+                                        </label>
+                                    </div>
+                                )}
+                            </div>
+                        )}
+                    </div>
+
+                    <div className="mt-10 flex gap-3">
+                        <button
+                            onClick={onClose}
+                            className="flex-1 px-6 py-4 rounded-full border-2 border-neutral-200 dark:border-neutral-700 text-[10px] font-black uppercase tracking-widest hover:bg-neutral-50 dark:hover:bg-neutral-800 transition-all"
+                        >
+                            Cancel
+                        </button>
+                        <button
+                            onClick={handleSave}
+                            disabled={isSaving || !label}
+                            className="flex-1 flex items-center justify-center gap-2 px-6 py-4 bg-primary text-white rounded-full text-[10px] font-black uppercase tracking-widest hover:bg-primary/90 transition-all shadow-lg shadow-primary/20 disabled:opacity-50 disabled:cursor-not-allowed"
+                        >
+                            {isSaving ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
+                            {isSaving ? 'Saving...' : 'Save Settings'}
+                        </button>
+                    </div>
+                </div>
+            </motion.div>
+        </div>,
+        document.body
+    );
+}

package/src/hooks/useLinks.ts

@@ -0,0 +1,75 @@
+/**
+ * useLink Hook
+ * React hook for fetching dynamic localized links
+ */
+
+import { useState, useEffect, useMemo } from 'react';
+
+interface LocalizedLink {
+    label: string;
+    target: string;
+    type: 'url' | 'file';
+}
+
+interface GlobalLink {
+    key: string;
+    languages: {
+        [locale: string]: LocalizedLink;
+    };
+}
+
+export function useLinks(siteId: string = 'default', apiBaseUrl: string = '/api/plugin-content') {
+    const [links, setLinks] = useState<GlobalLink[]>([]);
+    const [loading, setLoading] = useState(true);
+
+    const fetchLinks = async () => {
+        try {
+            setLoading(true);
+            const res = await fetch(`${apiBaseUrl}/links?siteId=${siteId}`);
+            if (res.ok) {
+                const data = await res.json();
+                setLinks(data.links || []);
+            }
+        } catch (err) {
+            console.error('[useLinks] Failed to fetch links:', err);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        fetchLinks();
+
+        // Listen for updates from other components (like the inline editor)
+        const handleUpdate = () => fetchLinks();
+        window.addEventListener('link-updated', handleUpdate);
+        return () => window.removeEventListener('link-updated', handleUpdate);
+    }, [siteId, apiBaseUrl]);
+
+    const getLink = (key: string, locale: string) => {
+        const link = links.find(l => l.key === key);
+        if (!link) return null;
+        
+        // Try exact locale match, fallback to first available or null
+        const localized = link.languages[locale] || Object.values(link.languages)[0] || null;
+        if (!localized) return null;
+
+        // Resolve target if it's a file
+        if (localized.type === 'file' && localized.target && !localized.target.startsWith('http') && !localized.target.startsWith('/')) {
+            // Get base domain from apiBaseUrl if it exists
+            let baseUrl = '';
+            if (apiBaseUrl.startsWith('http')) {
+                const url = new URL(apiBaseUrl);
+                baseUrl = url.origin;
+            }
+            return {
+                ...localized,
+                target: `${baseUrl}/api/plugin-content/files/download?id=${localized.target}&download=true`
+            };
+        }
+
+        return localized;
+    };
+
+    return { links, loading, getLink, refetch: fetchLinks };
+}

package/src/index.tsx

@@ -40,7 +40,9 @@ function ClientOnly({ children }: { children: React.ReactNode }) {
  * Content Plugin Component
  * Renders the translation editor for editing website content
  */
-export default function ContentPlugin({ enabled = true, locale, messages }: ContentPluginProps) {
+export default function ContentPlugin(props: ContentPluginProps) {
+    const { enabled = true, locale, messages } = props;
+    
     if (!enabled) return null;
     
     // If locale and messages are provided as props, use them directly
@@ -53,7 +55,6 @@ export default function ContentPlugin({ enabled = true, locale, messages }: Cont
     }
     
     // Otherwise, try to use context (for backward compatibility)
-    // This path might have issues with context not being found
     return (
         <ClientOnly>
             <ContentPluginWithIntlFallback />
@@ -84,6 +85,7 @@ export { default as MultilineText } from './components/MultilineText';
 export type { MultilineTextProps } from './components/MultilineText';
 export { default as ParsedText } from './components/ParsedText';
 export type { ParsedTextProps } from './components/ParsedText';
+export { DynamicLink } from './components/DynamicLink';
 export type { TranslationEditorProps } from './components/TranslationEditor';
 
 // Export context
@@ -93,6 +95,7 @@ export type { ParserConfigProviderProps } from './context/ParserConfigContext';
 // Export hooks
 export { useParse } from './hooks/useParse';
 export { useLocaleSync } from './hooks/useLocaleSync';
+export { useLinks } from './hooks/useLinks';
 
 // Export utilities
 // Note: parse() is a client-only function. Use ParsedText component in server components.
@@ -104,4 +107,3 @@ export type { ParserConfig, FormatStyle } from './utils/parser-config';
 
 // Note: API handlers are server-only and exported from ./index.ts (server entry point)
 // They are NOT exported here to prevent client/server context mixing
-