@jhits/plugin-content 0.0.1

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@jhits/plugin-content",
+  "version": "0.0.1",
+  "description": "Content management and localization plugin for the JHITS ecosystem",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./src/index.tsx",
+  "types": "./src/index.tsx",
+  "exports": {
+    ".": {
+      "types": "./src/index.tsx",
+      "default": "./src/index.tsx"
+    },
+    "./server": {
+      "types": "./src/index.server.ts",
+      "default": "./src/index.server.ts"
+    }
+  },
+  "dependencies": {
+    "@jhits/plugin-core": "^0.0.1",
+    "framer-motion": "^12.23.26",
+    "lucide-react": "^0.562.0"
+  },
+  "peerDependencies": {
+    "next": ">=15.0.0",
+    "next-intl": ">=4.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.19.27",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.1",
+    "next": "16.1.1",
+    "next-intl": "4.6.1",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "typescript": "^5"
+  },
+  "files": [
+    "src",
+    "package.json"
+  ]
+}

package/src/api/handler.ts

@@ -0,0 +1,74 @@
+/**
+ * Content API Handler
+ * RESTful API handler for content/translation management
+ * Compatible with Next.js API routes
+ * 
+ * IMPORTANT: This file should ONLY be imported in server-side API routes.
+ * Do NOT import this in client-side code.
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import * as fs from 'fs/promises';
+import * as path from 'path';
+
+export interface ContentApiConfig {
+    /** Directory where locale files are stored (default: 'data/locales') */
+    localesDir?: string;
+}
+
+/**
+ * POST /api/plugin-content/save - Save translations
+ */
+export async function POST(req: NextRequest, config: ContentApiConfig): Promise<NextResponse> {
+    try {
+        const body = await req.json();
+        const { locale, messages } = body;
+
+        if (!locale || !messages) {
+            return NextResponse.json(
+                { error: 'Missing locale or messages' },
+                { status: 400 }
+            );
+        }
+
+        const localesDir = config.localesDir || path.join(process.cwd(), 'data/locales');
+        const currentLocaleDir = path.join(localesDir, locale);
+
+        // Ensure locale directory exists
+        await fs.mkdir(currentLocaleDir, { recursive: true });
+
+        // Save each namespace as a separate JSON file
+        for (const [namespace, content] of Object.entries(messages)) {
+            const filePath = path.join(currentLocaleDir, `${namespace}.json`);
+            await fs.writeFile(filePath, JSON.stringify(content, null, 2), 'utf8');
+
+            // Ensure other locales have empty files for this namespace (if they don't exist)
+            try {
+                const otherLocales = await fs.readdir(localesDir);
+                for (const other of otherLocales) {
+                    if (other === locale) continue;
+                    const otherFilePath = path.join(localesDir, other, `${namespace}.json`);
+                    try {
+                        await fs.access(otherFilePath);
+                    } catch {
+                        // File doesn't exist, create empty one
+                        await fs.writeFile(otherFilePath, JSON.stringify({}, null, 2), 'utf8');
+                    }
+                }
+            } catch (err) {
+                // Ignore errors when reading other locales
+                console.warn('[ContentAPI] Could not sync other locales:', err);
+            }
+        }
+
+        return NextResponse.json({ success: true });
+    } catch (error: any) {
+        console.error('[ContentAPI] POST error:', error);
+        return NextResponse.json(
+            { error: 'Failed to save translations', detail: error.message },
+            { status: 500 }
+        );
+    }
+}
+
+

package/src/api/router.ts

@@ -0,0 +1,65 @@
+'use server';
+
+/**
+ * Plugin Content API Router
+ * Centralized API handler for all content plugin routes
+ * 
+ * This router handles requests to /api/plugin-content/*
+ * and routes them to the appropriate handler
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { POST as SaveHandler } from './handler';
+
+export interface ContentApiRouterConfig {
+    /** Directory where locale files are stored (default: 'data/locales') */
+    localesDir?: string;
+}
+
+/**
+ * Handle content API requests
+ * Routes requests to appropriate handlers based on path
+ */
+export async function handleContentApi(
+    req: NextRequest,
+    path: string[],
+    config: ContentApiRouterConfig
+): Promise<NextResponse> {
+    const method = req.method;
+    const safePath = Array.isArray(path) ? path : [];
+    const route = safePath.length > 0 ? safePath[0] : '';
+
+    console.log(`[ContentApiRouter] method=${method}, path=${JSON.stringify(safePath)}, route=${route}, url=${req.url}`);
+
+    try {
+        // Route: /api/plugin-content/save
+        if (route === 'save') {
+            if (method === 'POST') {
+                return await SaveHandler(req, config);
+            }
+            return NextResponse.json(
+                { error: `Method ${method} not allowed for route: save` },
+                { status: 405 }
+            );
+        }
+
+        // Route not found
+        return NextResponse.json(
+            { error: `Route not found: ${route || '/'}` },
+            { status: 404 }
+        );
+    } catch (error: any) {
+        console.error('[ContentApiRouter] Error:', error);
+        const status = error.message?.includes('not found') ? 404
+            : error.message?.includes('Unauthorized') ? 401
+            : error.message?.includes('already') ? 409
+            : error.message?.includes('too short') ? 400
+            : 500;
+        return NextResponse.json(
+            { error: error.message || 'Internal server error' },
+            { status }
+        );
+    }
+}
+
+

package/src/api-server.ts

@@ -0,0 +1,9 @@
+/**
+ * Plugin Content - API Server Entry Point
+ * Exports the API router for use in Next.js API routes
+ */
+
+export { handleContentApi } from './api/router';
+export type { ContentApiRouterConfig } from './api/router';
+
+

package/src/components/MultilineText.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { parse } from '../utils/parser';
+import { ParserConfig } from '../utils/parser-config';
+import { useParserConfig } from '../context/ParserConfigContext';
+
+export interface MultilineTextProps {
+    /**
+     * Text content - can be a string (multiline format) or an object (legacy format)
+     * String format: Use \n\n for paragraph breaks, \n for line breaks
+     * Object format: { "0": "paragraph 1", "1": "paragraph 2" }
+     */
+    text: string | Record<string, string> | null | undefined;
+    
+    /**
+     * CSS classes to apply to each paragraph element
+     * @default "text-lg text-gray-700 leading-relaxed font-light whitespace-pre-line"
+     */
+    className?: string;
+    
+    /**
+     * Wrapper element tag
+     * @default "div"
+     */
+    wrapper?: 'div' | 'span' | 'section';
+    
+    /**
+     * CSS classes for the wrapper element
+     * @default "space-y-6"
+     */
+    wrapperClassName?: string;
+    
+    /**
+     * Parser configuration for customizing formatting styles
+     * If not provided, uses the default configuration
+     */
+    config?: ParserConfig;
+}
+
+/**
+ * MultilineText Component
+ * 
+ * Renders text content that can be either:
+ * - A multiline string (new format): splits by \n\n for paragraphs, preserves \n for line breaks
+ * - An object with keys (legacy format): renders each value as a paragraph
+ * 
+ * Automatically applies formatting via the parse() function and handles whitespace.
+ * 
+ * @example
+ * // Multiline string format
+ * <MultilineText text="First paragraph\n\nSecond paragraph\nWith line break" />
+ * 
+ * @example
+ * // Legacy object format (backward compatible)
+ * <MultilineText text={{ "0": "First paragraph", "1": "Second paragraph" }} />
+ */
+export default function MultilineText({
+    text,
+    className = "text-lg text-gray-700 leading-relaxed font-light whitespace-pre-line",
+    wrapper = 'div',
+    wrapperClassName = "space-y-6",
+    config: propConfig
+}: MultilineTextProps) {
+    if (!text) return null;
+
+    // Use prop config if provided, otherwise use context config
+    const contextConfig = useParserConfig();
+    const config = propConfig || contextConfig;
+
+    const Wrapper = wrapper;
+
+    // Handle string format (new multiline format)
+    if (typeof text === 'string') {
+        const paragraphs = text.split('\n\n').filter(p => p.trim());
+        
+        return (
+            <Wrapper className={wrapperClassName}>
+                {paragraphs.map((paragraph, index) => (
+                    <p key={index} className={className}>
+                        {parse(paragraph, false, config)}
+                    </p>
+                ))}
+            </Wrapper>
+        );
+    }
+
+    // Handle object format (legacy format - backward compatibility)
+    if (typeof text === 'object' && text !== null) {
+        const keys = Object.keys(text);
+        
+        return (
+            <Wrapper className={wrapperClassName}>
+                {keys.map((key) => (
+                    <p key={key} className={className}>
+                        {parse(text[key], false, config)}
+                    </p>
+                ))}
+            </Wrapper>
+        );
+    }
+
+    return null;
+}
+

package/src/components/ParsedText.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import React from 'react';
+import { parse } from '../utils/parser';
+import { ParserConfig } from '../utils/parser-config';
+import { useParserConfig } from '../context/ParserConfigContext';
+
+export interface ParsedTextProps {
+    /**
+     * Text content to parse and render
+     */
+    text: string | null | undefined;
+    
+    /**
+     * CSS classes to apply to the wrapper element
+     */
+    className?: string;
+    
+    /**
+     * Wrapper element tag
+     * @default "span"
+     */
+    as?: 'span' | 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    
+    /**
+     * Whether to use editor mode (shows formatting markers)
+     * @default false
+     */
+    isEditor?: boolean;
+    
+    /**
+     * Parser configuration for customizing formatting styles
+     * If not provided, uses the default configuration
+     */
+    config?: ParserConfig;
+}
+
+/**
+ * ParsedText Component
+ * 
+ * Client component that parses and renders text with formatting support.
+ * Can be used in server components by passing the text as a prop.
+ * 
+ * Supports:
+ * - _*text*_ -> Sage, Italic, Medium
+ * - **text** -> Forest, Black (Bold)
+ * - /text/   -> Sage (Standard)
+ * 
+ * @example
+ * // In a server component
+ * <ParsedText text={t('hero.title')} as="h1" className="text-4xl" />
+ */
+export default function ParsedText({
+    text,
+    className,
+    as: Component = 'span',
+    isEditor = false,
+    config: propConfig
+}: ParsedTextProps) {
+    if (!text) return null;
+    
+    // Use prop config if provided, otherwise use context config
+    const contextConfig = useParserConfig();
+    const config = propConfig || contextConfig;
+    
+    const parsed = parse(text, isEditor, config);
+    
+    return <Component className={className}>{parsed}</Component>;
+}
+

package/src/components/TranslationEditor.tsx

@@ -0,0 +1,304 @@
+'use client';
+
+import { useRouter, usePathname } from 'next/navigation';
+import { useState, useEffect, useMemo, useRef } from 'react';
+import { useLocale, useMessages } from 'next-intl';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X, Globe, Search, ChevronRight, Plus, CornerDownRight, ShieldCheck, Lock, Bold, Italic, Type } from 'lucide-react';
+import { parse } from '../utils/parser';
+
+export default function TranslationEditor() {
+    const router = useRouter();
+    const pathname = usePathname();
+    const messages = useMessages();
+    const locale = useLocale();
+    const [open, setOpen] = useState(false);
+    const [userData, setUserData] = useState<any>(null);
+    const [loadingAuth, setLoadingAuth] = useState(true);
+
+    const [jsonData, setJsonData] = useState<any>(messages);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [saving, setSaving] = useState(false);
+    const [activePath, setActivePath] = useState<string | null>(null);
+
+    const [showAddForm, setShowAddForm] = useState(false);
+    const [newKey, setNewKey] = useState('');
+    const [newValue, setNewValue] = useState('');
+
+    // Get all top-level keys for the dropdown (home, about, services, etc.)
+    const availableSections = useMemo(() => {
+        return Object.keys(jsonData).filter(key => typeof jsonData[key] === 'object');
+    }, [jsonData]);
+
+    const [selectedSection, setSelectedSection] = useState<string>('');
+
+    const textareaRefs = useRef<{ [key: string]: HTMLTextAreaElement | null }>({});
+
+    useEffect(() => {
+        async function checkAuth() {
+            try {
+                const res = await fetch('/api/plugin-dep/me');
+                const data = await res.json();
+                if (data.loggedIn) setUserData(data.user);
+            } catch (err) {
+                console.error("Auth check failed", err);
+            } finally {
+                setLoadingAuth(false);
+            }
+        }
+        checkAuth();
+    }, []);
+
+    const isAdmin = userData?.role === 'admin' || userData?.role === 'dev';
+    const isDev = userData?.role === 'dev';
+
+    const applyFormatting = (path: string, type: 'bold' | 'italic' | 'both') => {
+        const el = textareaRefs.current[path];
+        if (!el) return;
+        const start = el.selectionStart;
+        const end = el.selectionEnd;
+        const text = el.value;
+        const selectedText = text.substring(start, end);
+        if (!selectedText) return;
+
+        let prefix = '', suffix = '';
+        if (type === 'bold') { prefix = '**'; suffix = '**'; }
+        if (type === 'italic') { prefix = '/'; suffix = '/'; }
+        if (type === 'both') { prefix = '_*'; suffix = '*_'; }
+
+        let newText = '';
+        if (selectedText.startsWith(prefix) && selectedText.endsWith(suffix)) {
+            newText = text.substring(0, start) + selectedText.slice(prefix.length, -suffix.length) + text.substring(end);
+        } else {
+            newText = text.substring(0, start) + prefix + selectedText + suffix + text.substring(end);
+        }
+
+        updateJsonData(path, newText);
+        setTimeout(() => {
+            el.focus();
+            el.setSelectionRange(start, start + (newText.length - text.length + selectedText.length));
+        }, 0);
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent, path: string) => {
+        if ((e.metaKey || e.ctrlKey)) {
+            if (e.key === 'b') { e.preventDefault(); applyFormatting(path, 'bold'); }
+            if (e.key === 'i') { e.preventDefault(); applyFormatting(path, 'italic'); }
+            if (e.key === 'u') { e.preventDefault(); applyFormatting(path, 'both'); }
+        }
+    };
+
+    const updateJsonData = (path: string, value: string) => {
+        const keys = path.split('.');
+        const newData = structuredClone(jsonData);
+        let curr = newData;
+        for (let i = 0; i < keys.length - 1; i++) curr = curr[keys[i]];
+        curr[keys[keys.length - 1]] = value;
+        setJsonData(newData);
+    };
+
+    const handleSave = async () => {
+        setSaving(true);
+        try {
+            const res = await fetch('/api/plugin-content/save', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ locale, messages: jsonData }),
+            });
+            if (res.ok) { router.refresh(); setShowAddForm(false); }
+            else { alert('Fout bij opslaan'); }
+        } catch (err) { alert('Netwerkfout bij opslaan'); }
+        finally { setSaving(false); }
+    };
+
+    const addNewEntry = () => {
+        if (!isDev || !newKey.includes('.')) return;
+        updateJsonData(newKey, newValue);
+        setNewKey(''); setNewValue(''); setShowAddForm(false);
+    };
+
+    // Set the initial section based on the URL, but only if it matches a JSON key
+    useEffect(() => {
+        const parts = pathname.split('/').filter(Boolean);
+        const cleanParts = (parts[0]?.length === 2) ? parts.slice(1) : parts;
+        const urlKey = cleanParts[0] || 'home';
+
+        // If "over-mij" isn't in JSON, but "about" is, this helps her pick
+        if (availableSections.includes(urlKey)) {
+            setSelectedSection(urlKey);
+        } else if (availableSections.length > 0 && !selectedSection) {
+            setSelectedSection(availableSections[0]);
+        }
+    }, [pathname, availableSections]);
+
+    const filteredItems = useMemo(() => {
+        const allPaths = getFlattenedPaths(jsonData);
+
+        const filtered = allPaths.filter(item => {
+            if (activePath === item.path) return true;
+            const matchesSearch = item.path.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                item.value.toLowerCase().includes(searchQuery.toLowerCase());
+
+            if (searchQuery) return matchesSearch;
+            // Default view: Selected Section + Common
+            return item.path.startsWith(`${selectedSection}.`) || item.path.startsWith('common.');
+        });
+
+        return [...filtered].sort((a, b) => {
+            const getPriority = (path: string) => {
+                if (path.startsWith(`${selectedSection}.`)) return 1;
+                if (path.startsWith('common.')) return 3;
+                return 2;
+            };
+            const priorityA = getPriority(a.path);
+            const priorityB = getPriority(b.path);
+            return priorityA !== priorityB ? priorityA - priorityB : a.path.localeCompare(b.path);
+        });
+    }, [jsonData, searchQuery, selectedSection, activePath]);
+
+    if (loadingAuth || !isAdmin) return null;
+
+    return (
+        <>
+            <button onClick={() => setOpen(true)} className="fixed bottom-6 right-6 bg-neutral-950 dark:bg-white text-white dark:text-neutral-950 px-6 py-3 rounded-full flex items-center gap-3 shadow-2xl z-50 hover:bg-neutral-900 dark:hover:bg-neutral-100 transition-all border border-neutral-800/20 dark:border-neutral-200/20">
+                <Globe size={18} /> <span className="font-bold">Editor</span>
+            </button>
+
+            <AnimatePresence>
+                {open && (
+                    <>
+                        <motion.div className="fixed inset-0 bg-neutral-950/50 dark:bg-neutral-950/70 z-40" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} onClick={() => setOpen(false)} />
+                        <motion.div className="fixed right-0 top-0 bottom-0 bg-card text-foreground shadow-2xl z-50 flex flex-col border-l border-border w-[550px]" initial={{ x: '100%' }} animate={{ x: 0 }} exit={{ x: '100%' }}>
+
+                            {/* Header */}
+                            <div className="p-6 bg-card border-b border-border flex justify-between items-center">
+                                <div>
+                                    <h2 className="text-2xl font-serif flex items-center gap-2">
+                                        {isDev ? 'Dev Mode' : 'Content Editor'}
+                                        {isDev ? <ShieldCheck className="text-primary" size={20} /> : <Lock className="text-primary" size={16} />}
+                                    </h2>
+                                    <p className="text-[10px] uppercase font-bold text-neutral-500 dark:text-neutral-400">Welkom, {userData?.name}</p>
+                                </div>
+                                <div className="flex gap-2">
+                                    {isDev && (
+                                        <button onClick={() => setShowAddForm(!showAddForm)} className={`p-2 rounded-full transition-colors ${showAddForm ? 'bg-primary text-white' : 'hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-600 dark:text-neutral-400'}`}>
+                                            <Plus size={22} />
+                                        </button>
+                                    )}
+                                    <button onClick={() => setOpen(false)} className="p-2 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-full text-neutral-600 dark:text-neutral-400"><X size={24} /></button>
+                                </div>
+                            </div>
+
+                            {/* Add Form */}
+                            {isDev && showAddForm && (
+                                <motion.div initial={{ height: 0 }} animate={{ height: 'auto' }} className="bg-neutral-100/50 dark:bg-neutral-800/50 border-b border-border p-6 space-y-4 overflow-hidden">
+                                    <input value={newKey} onChange={e => setNewKey(e.target.value)} placeholder="pagina.sectie.sleutel" className="w-full p-3 rounded-xl border border-border bg-card text-foreground placeholder:text-neutral-500 dark:placeholder:text-neutral-400 text-sm font-mono" />
+                                    <textarea value={newValue} onChange={e => setNewValue(e.target.value)} placeholder="Nieuwe vertaling..." className="w-full p-3 rounded-xl border border-border bg-card text-foreground placeholder:text-neutral-500 dark:placeholder:text-neutral-400 text-sm min-h-[80px]" />
+                                    <button onClick={addNewEntry} className="w-full py-3 bg-primary text-white rounded-xl font-bold text-sm flex items-center justify-center gap-2"><CornerDownRight size={16} /> Toevoegen</button>
+                                </motion.div>
+                            )}
+
+                            {/* Search */}
+                            <div className="px-6 py-4 bg-card border-b border-border">
+                                <div className="relative">
+                                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500 dark:text-neutral-400" />
+                                    <input type="text" placeholder="Zoek in teksten..." className="w-full pl-10 pr-4 py-2.5 bg-neutral-100/50 dark:bg-neutral-800/50 border border-border rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/20 text-foreground placeholder:text-neutral-500 dark:placeholder:text-neutral-400" value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} />
+                                </div>
+                            </div>
+
+                            {/* List */}
+                            <div className="flex-1 overflow-y-auto p-6 space-y-10 bg-background pb-32">
+                                {filteredItems.map((item) => (
+                                    <div key={item.path} className="group relative">
+                                        <div className="flex justify-between items-center mb-3">
+                                            <div className="flex items-center gap-2">
+                                                {item.path.split('.').map((part, i, arr) => (
+                                                    <div key={i} className="flex items-center gap-2">
+                                                        <span className={`px-2 py-1 rounded-md text-[10px] font-bold uppercase tracking-wider ${i === arr.length - 1 ? 'bg-primary text-white' : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 border border-border'}`}>
+                                                            {part.replace(/_/g, ' ')}
+                                                        </span>
+                                                        {i !== arr.length - 1 && <ChevronRight size={10} className="text-neutral-400 dark:text-neutral-500" />}
+                                                    </div>
+                                                ))}
+                                            </div>
+
+                                            {/* Toolbar */}
+                                            <AnimatePresence>
+                                                {activePath === item.path && (
+                                                    <motion.div initial={{ opacity: 0, y: 5 }} animate={{ opacity: 1, y: 0 }} className="formatting-toolbar flex gap-1 bg-card border border-border rounded-lg p-1 shadow-sm">
+                                                        <button type="button" tabIndex={-1} onClick={() => applyFormatting(item.path, 'bold')} className="p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded text-foreground"><Bold size={14} /></button>
+                                                        <button type="button" tabIndex={-1} onClick={() => applyFormatting(item.path, 'italic')} className="p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded text-foreground"><Italic size={14} /></button>
+                                                        <button type="button" tabIndex={-1} onClick={() => applyFormatting(item.path, 'both')} className="p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded text-foreground"><Type size={14} /></button>
+                                                    </motion.div>
+                                                )}
+                                            </AnimatePresence>
+                                        </div>
+
+                                        {/* STYLED CONTAINER */}
+                                        <div className="relative w-full min-h-[60px]">
+                                            {/* The Background Visual Layer */}
+                                            <div
+                                                className="absolute inset-0 p-5 text-lg leading-relaxed pointer-events-none whitespace-pre-wrap break-words border-2 border-transparent text-foreground"
+                                                aria-hidden="true"
+                                            >
+                                                {parse(item.value, true)}
+                                            </div>
+
+                                            {/* The Interaction Layer (Textarea) */}
+                                            <textarea
+                                                ref={(el) => { textareaRefs.current[item.path] = el; }}
+                                                className={`
+                                                    w-full p-5 bg-transparent border-2 rounded-2xl 
+                                                    text-transparent caret-primary leading-relaxed shadow-sm 
+                                                    transition-all outline-none resize-none overflow-hidden text-lg
+                                                    relative z-10 whitespace-pre-wrap break-words
+                                                    ${activePath === item.path ? 'border-primary ring-4 ring-primary/10' : 'border-border'}
+                                                `}
+                                                value={item.value}
+                                                rows={1}
+                                                spellCheck={false}
+                                                onFocus={() => setActivePath(item.path)}
+                                                onBlur={(e) => {
+                                                    if (!e.relatedTarget?.closest('.formatting-toolbar')) {
+                                                        setActivePath(null);
+                                                    }
+                                                }}
+                                                onKeyDown={(e) => handleKeyDown(e, item.path)}
+                                                onChange={(e) => updateJsonData(item.path, e.target.value)}
+                                                onInput={(e: any) => {
+                                                    e.target.style.height = 'auto';
+                                                    e.target.style.height = e.target.scrollHeight + 'px';
+                                                }}
+                                            />
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+
+                            <div className="p-6 bg-card border-t border-border flex justify-end">
+                                <button onClick={handleSave} disabled={saving} className="bg-primary text-white px-12 py-3.5 rounded-full font-bold shadow-lg disabled:opacity-50 transition-all hover:scale-105 active:scale-95">
+                                    {saving ? 'Bezig...' : 'Wijzigingen Opslaan'}
+                                </button>
+                            </div>
+                        </motion.div>
+                    </>
+                )}
+            </AnimatePresence>
+        </>
+    );
+}
+
+function getFlattenedPaths(obj: any, prefix = ''): { path: string; value: string }[] {
+    let paths: { path: string; value: string }[] = [];
+    for (const key in obj) {
+        const fullPath = prefix ? `${prefix}.${key}` : key;
+        if (typeof obj[key] === 'object' && obj[key] !== null) {
+            paths = [...paths, ...getFlattenedPaths(obj[key], fullPath)];
+        } else {
+            paths.push({ path: fullPath, value: String(obj[key]) });
+        }
+    }
+    return paths;
+}
+
+

package/src/context/ParserConfigContext.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import React, { createContext, useContext } from 'react';
+import { ParserConfig, defaultParserConfig } from '../utils/parser-config';
+
+interface ParserConfigContextValue {
+    config: ParserConfig;
+}
+
+const ParserConfigContext = createContext<ParserConfigContextValue>({
+    config: defaultParserConfig
+});
+
+export interface ParserConfigProviderProps {
+    /**
+     * Parser configuration to use globally
+     * If not provided, uses the default configuration
+     */
+    config?: ParserConfig;
+    children: React.ReactNode;
+}
+
+/**
+ * ParserConfigProvider
+ * 
+ * Provides a global parser configuration to all child components.
+ * Components can override this with their own config prop.
+ * 
+ * @example
+ * <ParserConfigProvider config={{
+ *   bold: { className: "font-bold text-blue-600" },
+ *   italic: { className: "italic text-gray-500" }
+ * }}>
+ *   <App />
+ * </ParserConfigProvider>
+ */
+export function ParserConfigProvider({ config = defaultParserConfig, children }: ParserConfigProviderProps) {
+    return (
+        <ParserConfigContext.Provider value={{ config }}>
+            {children}
+        </ParserConfigContext.Provider>
+    );
+}
+
+/**
+ * Hook to get the current parser configuration from context
+ * Falls back to defaultParserConfig if no provider is found
+ */
+export function useParserConfig(): ParserConfig {
+    const { config } = useContext(ParserConfigContext);
+    return config;
+}
+

package/src/hooks/useParse.ts

@@ -0,0 +1,23 @@
+'use client';
+
+import { useCallback } from 'react';
+import { parse as parseFunction } from '../utils/parser';
+import { useParserConfig } from '../context/ParserConfigContext';
+import type { ReactNode } from 'react';
+
+/**
+ * Hook that returns a configured parse function
+ * Uses the parser configuration from context
+ * 
+ * @example
+ * const parse = useParse();
+ * const formatted = parse('This is **bold** text');
+ */
+export function useParse() {
+    const config = useParserConfig();
+    
+    return useCallback((text: string, isEditor = false): ReactNode => {
+        return parseFunction(text, isEditor, config);
+    }, [config]);
+}
+

package/src/index.server.ts

@@ -0,0 +1,12 @@
+/**
+ * Plugin Content - Server-Only Entry Point
+ * This file exports only server-side API handlers
+ * Used by the dynamic plugin router via @jhits/plugin-content/server
+ * 
+ * Note: This file is server-only (no 'use server' needed - that's only for Server Actions)
+ */
+
+export { handleContentApi as handleApi } from './api/router';
+export { handleContentApi } from './api/router'; // Keep original export for backward compatibility
+export type { ContentApiRouterConfig } from './api/router';
+

package/src/index.tsx

@@ -0,0 +1,53 @@
+/**
+ * Plugin Content - Main Entry Point
+ * Provides content editing functionality for website translations
+ */
+
+'use client';
+
+import TranslationEditor from './components/TranslationEditor';
+
+export interface ContentPluginProps {
+    /** Whether to show the editor (default: true) */
+    enabled?: boolean;
+}
+
+/**
+ * Content Plugin Component
+ * Renders the translation editor for editing website content
+ */
+function ContentPlugin({ enabled = true }: ContentPluginProps) {
+    if (!enabled) return null;
+    
+    return <TranslationEditor />;
+}
+
+// Export as both default and named export for flexibility
+export default ContentPlugin;
+export { ContentPlugin };
+
+// Export components
+export { default as TranslationEditor } from './components/TranslationEditor';
+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 context
+export { ParserConfigProvider, useParserConfig } from './context/ParserConfigContext';
+export type { ParserConfigProviderProps } from './context/ParserConfigContext';
+
+// Export hooks
+export { useParse } from './hooks/useParse';
+
+// Export utilities
+// Note: parse() is a client-only function. Use ParsedText component in server components.
+export { parse } from './utils/parser';
+
+// Export parser configuration
+export { defaultParserConfig } from './utils/parser-config';
+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
+

package/src/utils/parser-config.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+
+/**
+ * Style configuration for a formatting marker
+ */
+export interface FormatStyle {
+    /** CSS classes to apply to the formatted text */
+    className?: string;
+    /** Inline styles to apply */
+    style?: React.CSSProperties;
+}
+
+/**
+ * Parser configuration
+ * Defines how different formatting markers are styled
+ */
+export interface ParserConfig {
+    /** Style for _*text*_ (sage italic medium) */
+    sageItalic?: FormatStyle;
+    /** Style for **text** (bold forest) */
+    bold?: FormatStyle;
+    /** Style for /text/ (standard sage) */
+    italic?: FormatStyle;
+}
+
+/**
+ * Default parser configuration
+ * Matches the original styling from the client app
+ */
+export const defaultParserConfig: ParserConfig = {
+    sageItalic: {
+        className: "text-sage italic font-medium brightness-130"
+    },
+    bold: {
+        className: "text-forest font-black"
+    },
+    italic: {
+        className: "text-sage"
+    }
+};
+

package/src/utils/parser.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import { ParserConfig, defaultParserConfig } from './parser-config';
+
+/**
+ * Parses text with configurable formatting:
+ * _*text*_ -> Sage Italic (configurable via config.sageItalic)
+ * **text** -> Bold (configurable via config.bold)
+ * /text/   -> Italic (configurable via config.italic)
+ * 
+ * @param text - The text to parse
+ * @param isEditor - Whether to show formatting markers (for editor mode)
+ * @param config - Optional parser configuration. Uses defaultParserConfig if not provided.
+ */
+export function parse(
+    text: string, 
+    isEditor = false, 
+    config: ParserConfig = defaultParserConfig
+): React.ReactNode {
+    if (!text) return null;
+
+    // Merge with default config to ensure all styles are defined
+    const finalConfig: Required<ParserConfig> = {
+        sageItalic: { ...defaultParserConfig.sageItalic, ...config.sageItalic },
+        bold: { ...defaultParserConfig.bold, ...config.bold },
+        italic: { ...defaultParserConfig.italic, ...config.italic }
+    };
+
+    // The Regex must capture ALL your markers, otherwise they won't reach the 'if' statements
+    // We look for: _*...*_ OR **...** OR /.../
+    const parts = text.split(/(_\*.*?\*\_|\*\*.*?\*\*|\/.*?\/)/g);
+
+    const renderFormatted = (part: string, index: number) => {
+        // 1. Sage Italic: _*text*_ (Check first because it's the most specific)
+        if (part.startsWith('_*') && part.endsWith('*_')) {
+            const inner = part.slice(2, -2);
+            const style = finalConfig.sageItalic;
+            return (
+                <span 
+                    key={index} 
+                    className={style.className}
+                    style={style.style}
+                >
+                    {inner}
+                </span>
+            );
+        }
+
+        // 2. Bold: **text**
+        if (part.startsWith('**') && part.endsWith('**')) {
+            const inner = part.slice(2, -2);
+            const style = finalConfig.bold;
+            return (
+                <span 
+                    key={index} 
+                    className={style.className}
+                    style={style.style}
+                >
+                    {inner}
+                </span>
+            );
+        }
+
+        // 3. Italic: /text/
+        if (part.startsWith('/') && part.endsWith('/')) {
+            const inner = part.slice(1, -1);
+            const style = finalConfig.italic;
+            return (
+                <span 
+                    key={index} 
+                    className={style.className}
+                    style={style.style}
+                >
+                    {inner}
+                </span>
+            );
+        }
+
+        // 4. Plain text
+        return <React.Fragment key={index}>{part}</React.Fragment>;
+    };
+
+    return !isEditor ? parts.map(renderFormatted) : parts.map((part, index) => {
+        const ghost = (sym: string) => isEditor ? <span className="opacity-30 font-mono text-[0.8em]">{sym}</span> : null;
+
+        if (part.startsWith('_*') && part.endsWith('*_')) {
+            const style = finalConfig.sageItalic;
+            return (
+                <span 
+                    key={index} 
+                    className={style.className}
+                    style={style.style}
+                >
+                    {ghost('_*')}{part.slice(2, -2)}{ghost('*_')}
+                </span>
+            );
+        }
+        if (part.startsWith('**') && part.endsWith('**')) {
+            const style = finalConfig.bold;
+            return (
+                <span 
+                    key={index} 
+                    className={style.className}
+                    style={style.style}
+                >
+                    {ghost('**')}{part.slice(2, -2)}{ghost('**')}
+                </span>
+            );
+        }
+        if (part.startsWith('/') && part.endsWith('/')) {
+            const style = finalConfig.italic;
+            return (
+                <span 
+                    key={index} 
+                    className={style.className}
+                    style={style.style}
+                >
+                    {ghost('/')}{part.slice(1, -1)}{ghost('/')}
+                </span>
+            );
+        }
+        return <React.Fragment key={index}>{part}</React.Fragment>;
+    });
+}
+
+