@jhits/botanics_and_you 0.0.1 → 0.0.3

package/dist/plugin-blog/blocks/Image.js

@@ -0,0 +1,285 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { Image as ImageIcon, X, Maximize2, Settings2 } from 'lucide-react';
+import { ImagePicker, Image as PluginImage } from '@jhits/plugin-images';
+import { createApiUrl } from '../api-config';
+const borderRadiusClasses = {
+    none: 'rounded-none',
+    sm: 'rounded-sm',
+    md: 'rounded-md',
+    lg: 'rounded-lg',
+    xl: 'rounded-xl',
+    '2xl': 'rounded-2xl',
+    '3xl': 'rounded-3xl',
+    full: 'rounded-full',
+};
+export const ImageEdit = ({ block, onUpdate }) => {
+    const [showSettings, setShowSettings] = useState(false);
+    const [isResizing, setIsResizing] = useState(false);
+    const [actualWidth, setActualWidth] = useState(null);
+    const [mounted, setMounted] = useState(false);
+    // Handle SSR - ensure we only render portal on client
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    const isSavingRef = useRef(false); // Prevent duplicate saves
+    const containerRef = useRef(null);
+    const wrapperRef = useRef(null);
+    // We use a ref to track the latest data without triggering re-renders during drag
+    const data = (block.data || {});
+    const { imageId, caption = '', alt = '', borderRadius = 'xl', height = 450, widthPercent = 100, brightness = 100, blur = 0, scale = 1.0, positionX = 0, positionY = 0 } = data;
+    // MEASUREMENT: Track actual pixel width for the ImagePicker aspect ratio
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        const obs = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                setActualWidth(entry.contentRect.width);
+            }
+        });
+        obs.observe(containerRef.current);
+        return () => obs.disconnect();
+    }, []);
+    const derivedAspectRatio = useMemo(() => {
+        const width = actualWidth || (widthPercent / 100) * 1000;
+        return `${Math.round(width)}/${height}`;
+    }, [actualWidth, height, widthPercent]);
+    // Listen to image-mapping-updated events to sync block data with API
+    useEffect(() => {
+        if (!imageId)
+            return;
+        const handleMappingUpdate = (e) => {
+            var _a;
+            if (((_a = e.detail) === null || _a === void 0 ? void 0 : _a.id) === imageId) {
+                // Update block data when ImageEditor saves to API
+                const updates = {};
+                if (e.detail.scale !== undefined)
+                    updates.scale = e.detail.scale;
+                if (e.detail.positionX !== undefined)
+                    updates.positionX = e.detail.positionX;
+                if (e.detail.positionY !== undefined)
+                    updates.positionY = e.detail.positionY;
+                if (e.detail.brightness !== undefined)
+                    updates.brightness = e.detail.brightness;
+                if (e.detail.blur !== undefined)
+                    updates.blur = e.detail.blur;
+                if (Object.keys(updates).length > 0) {
+                    // Use the latest block.data to merge updates
+                    const latestData = (block.data || {});
+                    onUpdate(Object.assign(Object.assign({}, latestData), updates));
+                }
+            }
+        };
+        window.addEventListener('image-mapping-updated', handleMappingUpdate);
+        return () => window.removeEventListener('image-mapping-updated', handleMappingUpdate);
+    }, [imageId, block.data, onUpdate]);
+    const updateField = useCallback((updates) => {
+        // Get the latest data by reading from block.data directly (not from closure)
+        const latestData = (block.data || {});
+        const mergedData = Object.assign(Object.assign({}, latestData), updates);
+        onUpdate(mergedData);
+        // Note: Scale and position updates are now handled by ImageEditor directly
+        // Only save brightness/blur if they changed (ImageEditor handles scale/position)
+        if (imageId && (updates.brightness !== undefined || updates.blur !== undefined)) {
+            const saveToMapping = async () => {
+                var _a, _b, _c, _d, _e, _f, _g, _h;
+                try {
+                    // Get current filename from the image mapping
+                    const resolveResponse = await fetch(createApiUrl(`/plugin-images/resolve?id=${encodeURIComponent(imageId)}`));
+                    const resolved = await resolveResponse.ok ? await resolveResponse.json() : null;
+                    const filename = (resolved === null || resolved === void 0 ? void 0 : resolved.filename) || imageId;
+                    // Get current values from API to preserve scale/position
+                    const currentScale = (_b = (_a = resolved === null || resolved === void 0 ? void 0 : resolved.scale) !== null && _a !== void 0 ? _a : mergedData.scale) !== null && _b !== void 0 ? _b : 1.0;
+                    const currentPositionX = (_d = (_c = resolved === null || resolved === void 0 ? void 0 : resolved.positionX) !== null && _c !== void 0 ? _c : mergedData.positionX) !== null && _d !== void 0 ? _d : 0;
+                    const currentPositionY = (_f = (_e = resolved === null || resolved === void 0 ? void 0 : resolved.positionY) !== null && _e !== void 0 ? _e : mergedData.positionY) !== null && _f !== void 0 ? _f : 0;
+                    const finalValues = {
+                        brightness: (_g = mergedData.brightness) !== null && _g !== void 0 ? _g : 100,
+                        blur: (_h = mergedData.blur) !== null && _h !== void 0 ? _h : 0,
+                        scale: currentScale,
+                        positionX: currentPositionX,
+                        positionY: currentPositionY,
+                    };
+                    // Save updated values to image mapping
+                    const response = await fetch(createApiUrl('/plugin-images/resolve'), {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(Object.assign({ id: imageId, filename }, finalValues)),
+                    });
+                    if (response.ok) {
+                        // Dispatch event to notify Image components to update
+                        window.dispatchEvent(new CustomEvent('image-mapping-updated', {
+                            detail: Object.assign({ id: imageId }, finalValues)
+                        }));
+                    }
+                }
+                catch (error) {
+                    console.error('[Image Block] Failed to save image mapping:', error);
+                }
+            };
+            // Debounce the save to avoid too many API calls
+            setTimeout(saveToMapping, 300);
+        }
+    }, [block.data, onUpdate, imageId]);
+    // RESIZING LOGIC (High Performance)
+    useEffect(() => {
+        if (!isResizing)
+            return;
+        const handleMouseMove = (e) => {
+            if (!containerRef.current || !wrapperRef.current)
+                return;
+            const wrapperRect = wrapperRef.current.getBoundingClientRect();
+            const containerRect = containerRef.current.getBoundingClientRect();
+            // Calculate raw values
+            const rawHeight = e.clientY - containerRect.top;
+            const rawWidthPx = e.clientX - containerRect.left;
+            // Snapping Logic
+            const snappedHeight = Math.round(rawHeight / 10) * 10;
+            const clampedHeight = Math.max(150, Math.min(1200, snappedHeight));
+            const calculatedWidthPercent = (rawWidthPx / wrapperRect.width) * 100;
+            const snappedWidthPercent = Math.round(calculatedWidthPercent / 2) * 2;
+            const clampedWidthPercent = Math.max(15, Math.min(100, snappedWidthPercent));
+            // DIRECT DOM MANIPULATION (This is what makes it smooth)
+            containerRef.current.style.height = `${clampedHeight}px`;
+            containerRef.current.style.width = `${clampedWidthPercent}%`;
+        };
+        const handleMouseUp = () => {
+            if (containerRef.current) {
+                // Save the final values to React state only once at the end
+                const finalHeight = parseInt(containerRef.current.style.height);
+                const finalWidth = parseFloat(containerRef.current.style.width);
+                updateField({
+                    height: finalHeight,
+                    widthPercent: finalWidth
+                });
+            }
+            setIsResizing(false);
+        };
+        window.addEventListener('mousemove', handleMouseMove);
+        window.addEventListener('mouseup', handleMouseUp);
+        document.body.style.cursor = 'nwse-resize';
+        document.body.style.userSelect = 'none'; // Prevent text selection while dragging
+        return () => {
+            window.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('mouseup', handleMouseUp);
+            document.body.style.cursor = 'default';
+            document.body.style.userSelect = 'auto';
+        };
+    }, [isResizing, updateField]);
+    return (_jsxs("div", { ref: wrapperRef, className: "relative w-full flex flex-col items-center py-8", children: [imageId ? (_jsxs("div", { ref: containerRef, style: { height: `${height}px`, width: `${widthPercent}%`, maxWidth: '100%' }, className: "relative group/image-container touch-none", children: [_jsxs("div", { className: `relative w-full h-full overflow-hidden bg-neutral-100 border border-neutral-200 shadow-sm ${borderRadiusClasses[borderRadius]} group/img`, children: [_jsx("div", { className: "w-full h-full cursor-pointer relative", onClick: () => setShowSettings(true), children: _jsx(PluginImage, Object.assign({ id: imageId, alt: alt || caption, fill: true, className: "object-cover w-full h-full pointer-events-none", editable: false }, {
+                                    scale,
+                                    positionX,
+                                    positionY,
+                                    brightness,
+                                    blur,
+                                })) }), _jsx("div", { className: "absolute top-3 right-3 opacity-0 group-hover/img:opacity-100 transition-opacity z-40", children: _jsxs("button", { onClick: () => setShowSettings(true), className: "bg-white/95 p-2 rounded-xl shadow-xl border border-neutral-200 text-neutral-800 hover:bg-white flex items-center gap-2 text-[11px] font-bold px-4 uppercase tracking-tight", children: [_jsx(Settings2, { size: 14, className: "text-primary" }), " Settings"] }) }), _jsx("div", { onMouseDown: (e) => { e.preventDefault(); setIsResizing(true); }, className: "absolute bottom-0 right-0 w-8 h-8 cursor-nwse-resize z-50 flex items-center justify-center opacity-0 group-hover/img:opacity-100", children: _jsx("div", { className: "bg-white shadow-lg border border-neutral-200 rounded-tl-lg p-1 text-neutral-600", children: _jsx(Maximize2, { size: 16, className: "rotate-90" }) }) })] }), _jsx("input", { type: "text", value: caption, onChange: (e) => updateField({ caption: e.target.value }), placeholder: "Klik om bijschrift toe te voegen...", className: "w-full mt-4 text-sm text-neutral-400 bg-transparent border-none outline-none focus:ring-0 text-center italic" })] })) : (_jsxs("div", { className: "w-full h-[300px] bg-neutral-50 border-2 border-dashed border-neutral-200 flex flex-col items-center justify-center cursor-pointer hover:bg-primary/5 rounded-3xl", onClick: () => setShowSettings(true), children: [_jsx(ImageIcon, { size: 32, className: "text-neutral-300 mb-2" }), _jsx("p", { className: "text-xs font-bold text-neutral-400 uppercase tracking-widest", children: "Selecteer Afbeelding" })] })), showSettings && mounted && createPortal(_jsx("div", { className: "fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 text-left", children: _jsxs("div", { className: "bg-white dark:bg-neutral-900 rounded-3xl w-full max-w-5xl p-6 shadow-2xl max-h-[95vh] flex flex-col border border-neutral-200 dark:border-neutral-800", children: [_jsxs("div", { className: "flex items-center justify-between mb-6", children: [_jsx("h3", { className: "text-xl font-black uppercase tracking-tighter text-neutral-900 dark:text-neutral-100", children: "Configuratie" }), _jsx("button", { onClick: () => setShowSettings(false), className: "p-2 hover:bg-neutral-100 rounded-full transition-colors", children: _jsx(X, { size: 20 }) })] }), _jsxs("div", { className: "flex-1 overflow-y-auto", children: [_jsx(ImagePicker, Object.assign({ value: imageId, onChange: (img) => updateField({ imageId: img === null || img === void 0 ? void 0 : img.id }), brightness: brightness, blur: blur }, {
+                                    scale,
+                                    positionX,
+                                    positionY,
+                                }, { 
+                                    // Pass brightness and blur handlers for real-time updates during editing
+                                    // These only update local state - onEditorSave will save everything together
+                                    onBrightnessChange: (val) => {
+                                        // Update local state only - don't trigger save
+                                        const latestData = (block.data || {});
+                                        onUpdate(Object.assign(Object.assign({}, latestData), { brightness: val }));
+                                    }, onBlurChange: (val) => {
+                                        // Update local state only - don't trigger save
+                                        const latestData = (block.data || {});
+                                        onUpdate(Object.assign(Object.assign({}, latestData), { blur: val }));
+                                    }, 
+                                    // Don't pass scale/position handlers - onEditorSave will save them all together
+                                    onEditorSave: async (finalScale, finalPositionX, finalPositionY, finalBrightness, finalBlur) => {
+                                        if (!imageId || isSavingRef.current)
+                                            return; // Prevent duplicate saves
+                                        isSavingRef.current = true; // Set flag to prevent concurrent saves
+                                        try {
+                                            // Get the actual filename from the API (resolve the semantic ID)
+                                            let filename = imageId; // Fallback to semantic ID
+                                            try {
+                                                const response = await fetch(createApiUrl(`/plugin-images/resolve?id=${encodeURIComponent(imageId)}`));
+                                                if (response.ok) {
+                                                    const data = await response.json();
+                                                    filename = data.filename || imageId;
+                                                }
+                                            }
+                                            catch (error) {
+                                                console.error('Failed to resolve filename:', error);
+                                            }
+                                            // Normalize position values
+                                            const normalizedPositionX = finalPositionX === -50 ? 0 : finalPositionX;
+                                            const normalizedPositionY = finalPositionY === -50 ? 0 : finalPositionY;
+                                            const finalBrightnessValue = finalBrightness !== null && finalBrightness !== void 0 ? finalBrightness : brightness;
+                                            const finalBlurValue = finalBlur !== null && finalBlur !== void 0 ? finalBlur : blur;
+                                            // Save to plugin-images API (ONLY ONCE)
+                                            const saveData = {
+                                                id: imageId,
+                                                filename: filename,
+                                                scale: finalScale,
+                                                positionX: normalizedPositionX,
+                                                positionY: normalizedPositionY,
+                                                brightness: finalBrightnessValue,
+                                                blur: finalBlurValue,
+                                            };
+                                            const response = await fetch(createApiUrl('/plugin-images/resolve'), {
+                                                method: 'POST',
+                                                headers: { 'Content-Type': 'application/json' },
+                                                body: JSON.stringify(saveData),
+                                            });
+                                            if (response.ok) {
+                                                // Update local block data WITHOUT triggering another save
+                                                // Get latest data and update directly
+                                                const latestData = (block.data || {});
+                                                onUpdate(Object.assign(Object.assign({}, latestData), { scale: finalScale, positionX: normalizedPositionX, positionY: normalizedPositionY, brightness: finalBrightnessValue, blur: finalBlurValue }));
+                                                // Dispatch event to notify Image components
+                                                window.dispatchEvent(new CustomEvent('image-mapping-updated', {
+                                                    detail: saveData
+                                                }));
+                                            }
+                                        }
+                                        catch (error) {
+                                            console.error('Failed to save image transform:', error);
+                                        }
+                                        finally {
+                                            // Reset flag after a short delay to allow the save to complete
+                                            setTimeout(() => {
+                                                isSavingRef.current = false;
+                                            }, 500);
+                                        }
+                                    }, aspectRatio: derivedAspectRatio, borderRadius: borderRadiusClasses[borderRadius] }), `picker-${derivedAspectRatio}`), _jsxs("div", { className: "mt-8 pt-8 border-t border-neutral-100 dark:border-neutral-800 grid grid-cols-1 md:grid-cols-2 gap-6 pb-6", children: [_jsxs("div", { children: [_jsx("label", { className: "text-[10px] font-bold uppercase text-neutral-400 block mb-2", children: "Hoek Afronding" }), _jsx("select", { value: borderRadius, onChange: (e) => updateField({ borderRadius: e.target.value }), className: "w-full p-3 bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl text-sm outline-none", children: Object.keys(borderRadiusClasses).map(k => _jsx("option", { value: k, children: k.toUpperCase() }, k)) })] }), _jsxs("div", { children: [_jsx("label", { className: "text-[10px] font-bold uppercase text-neutral-400 block mb-2", children: "Alt Tekst (SEO)" }), _jsx("input", { type: "text", value: alt, onChange: (e) => updateField({ alt: e.target.value }), placeholder: "Beschrijf de afbeelding...", className: "w-full p-3 bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl text-sm outline-none" })] })] })] }), _jsx("div", { className: "mt-4 pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end", children: _jsx("button", { onClick: () => setShowSettings(false), className: "px-12 py-3.5 bg-neutral-900 dark:bg-neutral-100 text-white dark:text-neutral-900 font-bold rounded-2xl shadow-xl hover:opacity-90", children: "Opslaan" }) })] }) }), document.body)] }));
+};
+export const ImagePreview = ({ block }) => {
+    const data = (block.data || {});
+    const { imageId, caption, alt, borderRadius = 'xl', height = 450, widthPercent = 100, brightness = 100, blur = 0, scale = 1, positionX = 0, positionY = 0 } = data;
+    if (!imageId)
+        return null;
+    return (_jsxs("figure", { className: "w-full flex flex-col items-center my-14", children: [_jsx("div", { style: { height: `${height}px`, width: `${widthPercent}%`, maxWidth: '100%' }, className: `relative overflow-hidden shadow-sm ${borderRadiusClasses[borderRadius]}`, children: _jsx(PluginImage, Object.assign({ id: imageId, alt: alt || caption || '', fill: true, className: "object-cover w-full h-full", editable: false }, {
+                    scale,
+                    positionX,
+                    positionY,
+                    brightness,
+                    blur,
+                })) }), caption && _jsx("figcaption", { className: "mt-5 text-center text-neutral-500 text-sm italic max-w-[80%]", children: caption })] }));
+};
+export const imageBlock = {
+    type: 'image',
+    name: 'Afbeelding',
+    description: 'Resizable afbeelding met geavanceerde filters en synchronisatie',
+    icon: ImageIcon,
+    category: 'media',
+    defaultData: {
+        imageId: undefined,
+        caption: '',
+        alt: '',
+        borderRadius: 'xl',
+        height: 450,
+        widthPercent: 100,
+        brightness: 100,
+        blur: 0,
+        scale: 1,
+        positionX: 0,
+        positionY: 0
+    },
+    components: { Edit: ImageEdit, Preview: ImagePreview, Icon: ImageIcon },
+};

package/dist/plugin-blog/blocks/List.d.ts

@@ -0,0 +1,3 @@
+import { ClientBlockDefinition } from "@jhits/plugin-blog";
+export declare const listBlock: ClientBlockDefinition;
+//# sourceMappingURL=List.d.ts.map

package/dist/plugin-blog/blocks/List.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/plugin-blog/blocks/List.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqC,qBAAqB,EAA6D,MAAM,oBAAoB,CAAC;AAsRzJ,eAAO,MAAM,SAAS,EAAE,qBA0BvB,CAAC"}

package/dist/plugin-blog/blocks/List.js

@@ -0,0 +1,215 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RichTextEditor, RichTextPreview } from "@jhits/plugin-blog";
+import { ListChecks } from "lucide-react";
+import React from "react";
+/**
+ * Rich Text Formatting Configuration for List Items
+ * Matches BotanicsAndYou's design system
+ */
+const listFormatting = {
+    bold: true,
+    italic: true,
+    underline: true,
+    links: true,
+    colors: ['text-forest', 'text-sage', 'text-primary'],
+    styles: {
+        bold: 'font-bold text-black',
+        italic: 'italic',
+        underline: 'underline decoration-primary/30',
+        link: 'text-primary underline decoration-primary/50 hover:text-primary/80 hover:decoration-primary/70 transition-colors',
+        colorClasses: {
+            'text-forest': 'text-forest',
+            'text-sage': 'text-sage',
+            'text-primary': 'text-primary',
+        },
+    },
+};
+/**
+ * 1. Shared UI Wrapper
+ */
+const ListContainer = ({ children, type }) => {
+    // Determine the tailwind class for bullet styling
+    const getListClass = () => {
+        if (type === "ol")
+            return "list-decimal pl-5";
+        if (type === "checklist")
+            return "list-none pl-0";
+        return "list-disc pl-5"; // default ul
+    };
+    return (_jsx("div", { className: "bg-white rounded-2xl border border-gray-100 shadow-sm relative", children: _jsx("div", { className: "px-4 pb-4 mt-4", children: _jsx("ul", { className: `${getListClass()} space-y-3 pr-4 text-gray-800`, children: children }) }) }));
+};
+/**
+ * 2. Editor Component
+ */
+const ListEdit = ({ block, onUpdate }) => {
+    // Ensure items are treated consistently as ItemObj[]
+    // Handle both string[] (legacy) and ItemObj[] formats
+    const containerRef = React.useRef(null);
+    const rawItems = Array.isArray(block.data.items) ? block.data.items : [];
+    const items = rawItems.map((item) => {
+        if (typeof item === 'string') {
+            return { text: item, html: item };
+        }
+        if (typeof item === 'object' && item !== null && 'text' in item) {
+            const itemObj = item;
+            return {
+                text: itemObj.text || '',
+                html: itemObj.html || itemObj.text || ''
+            };
+        }
+        return { text: '', html: '' };
+    });
+    const type = (block.data.type || "ul");
+    const handleAddItem = (index) => {
+        const newItems = [...items];
+        newItems.splice(index + 1, 0, { text: '', html: '' });
+        onUpdate({ items: newItems });
+    };
+    return (_jsx("div", { ref: containerRef, children: _jsx(ListContainer, { type: type, children: items.map((item, idx) => {
+                const html = item.html || item.text || '';
+                const isEmpty = !html || html.replace(/<[^>]*>/g, '').trim() === '';
+                return (_jsxs("li", { className: `${type === "checklist" ? "flex items-start gap-3" : ""}`, children: [type === "checklist" && (_jsx("input", { type: "checkbox", disabled: true, className: "mt-1.5 w-4 h-4 accent-gray-400 cursor-not-allowed shrink-0" })), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx(RichTextEditor, { value: html, onChange: (htmlContent) => {
+                                        const textContent = htmlContent.replace(/<[^>]*>/g, '').replace(/&nbsp;/g, ' ');
+                                        const newItems = [...items];
+                                        newItems[idx] = {
+                                            text: textContent,
+                                            html: htmlContent
+                                        };
+                                        onUpdate({ items: newItems });
+                                    }, onKeyDown: (e) => {
+                                        const contentEditable = e.target;
+                                        if (!contentEditable || contentEditable.contentEditable !== 'true')
+                                            return;
+                                        const currentHtml = contentEditable.innerHTML || '';
+                                        const currentText = currentHtml.replace(/<[^>]*>/g, '').replace(/&nbsp;/g, ' ').trim();
+                                        const isEmpty = !currentText || currentText === '';
+                                        // Intercept Enter key to create new list item instead of line break
+                                        if (e.key === 'Enter' && !e.shiftKey) {
+                                            e.preventDefault();
+                                            e.stopPropagation();
+                                            // Update current item with trimmed content
+                                            const newItems = [...items];
+                                            newItems[idx] = {
+                                                text: currentText,
+                                                html: currentText
+                                            };
+                                            // Add new item after current one
+                                            const newItem = { text: '', html: '' };
+                                            newItems.splice(idx + 1, 0, newItem);
+                                            onUpdate({ items: newItems });
+                                            // Focus the next editor after re-render
+                                            setTimeout(() => {
+                                                // Find all contentEditable elements and get the next one
+                                                const allEditors = document.querySelectorAll('[contenteditable="true"]');
+                                                const currentEditorIndex = Array.from(allEditors).indexOf(contentEditable);
+                                                const nextEditor = allEditors[currentEditorIndex + 1];
+                                                if (nextEditor) {
+                                                    nextEditor.focus();
+                                                    // Place cursor at the start
+                                                    const range = document.createRange();
+                                                    range.selectNodeContents(nextEditor);
+                                                    range.collapse(true);
+                                                    const selection = window.getSelection();
+                                                    selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
+                                                    selection === null || selection === void 0 ? void 0 : selection.addRange(range);
+                                                }
+                                            }, 0);
+                                            return;
+                                        }
+                                        // Handle Backspace/Delete to remove empty list items
+                                        if ((e.key === 'Backspace' || e.key === 'Delete') && isEmpty && items.length > 1) {
+                                            const selection = window.getSelection();
+                                            if (!selection || selection.rangeCount === 0)
+                                                return;
+                                            const range = selection.getRangeAt(0);
+                                            const isAtStart = () => {
+                                                if (!range.collapsed)
+                                                    return false;
+                                                const startRange = range.cloneRange();
+                                                startRange.selectNodeContents(contentEditable);
+                                                startRange.setEnd(range.startContainer, range.startOffset);
+                                                return startRange.toString().trim() === '';
+                                            };
+                                            if ((e.key === 'Backspace' && isAtStart())) {
+                                                e.preventDefault();
+                                                e.stopPropagation();
+                                                // Calculate focus index BEFORE updating state
+                                                const focusIndex = idx > 0 ? idx - 1 : 0;
+                                                const newItems = items.filter((_, i) => i !== idx);
+                                                onUpdate({ items: newItems });
+                                                setTimeout(() => {
+                                                    // SCOPED SEARCH: Look only inside this specific list container
+                                                    if (containerRef.current) {
+                                                        const listEditors = containerRef.current.querySelectorAll('[contenteditable="true"]');
+                                                        const targetEditor = listEditors[focusIndex];
+                                                        if (targetEditor) {
+                                                            targetEditor.focus();
+                                                            const newRange = document.createRange();
+                                                            newRange.selectNodeContents(targetEditor);
+                                                            newRange.collapse(false); // Go to end of previous item
+                                                            const newSel = window.getSelection();
+                                                            newSel === null || newSel === void 0 ? void 0 : newSel.removeAllRanges();
+                                                            newSel === null || newSel === void 0 ? void 0 : newSel.addRange(newRange);
+                                                        }
+                                                    }
+                                                }, 0);
+                                            }
+                                        }
+                                    }, placeholder: "Typ een item...", formatting: listFormatting, className: "leading-relaxed min-h-[1.5em] w-full text-gray-800", isFocused: false }), isEmpty && idx === items.length - 1 && (_jsx("button", { type: "button", onClick: () => handleAddItem(idx), className: "mt-2 text-xs text-gray-400 hover:text-gray-600", children: "+ Voeg item toe" }))] })] }, idx));
+            }) }) }));
+};
+/**
+ * 3. Preview Component
+ */
+const ListPreview = ({ block }) => {
+    // Handle both string[] (legacy) and ItemObj[] formats
+    const rawItems = Array.isArray(block.data.items) ? block.data.items : [];
+    const items = rawItems.map((item) => {
+        if (typeof item === 'string') {
+            return { text: item, html: item };
+        }
+        if (typeof item === 'object' && item !== null && 'text' in item) {
+            const itemObj = item;
+            return {
+                text: itemObj.text || '',
+                html: itemObj.html || itemObj.text || ''
+            };
+        }
+        return { text: '', html: '' };
+    });
+    const type = (block.data.type || "ul");
+    return (_jsx(ListContainer, { type: type, children: items.map((item, idx) => {
+            const html = item.html || item.text || '';
+            if (!html || html.replace(/<[^>]*>/g, '').trim() === '')
+                return null;
+            return (_jsxs("li", { className: `${type === "checklist" ? "flex items-start gap-3" : ""}`, children: [type === "checklist" && (_jsx("input", { type: "checkbox", className: "mt-1.5 w-4 h-4 accent-gray-600 shrink-0" })), _jsx("div", { className: "leading-relaxed min-h-[1.5em] w-full", children: _jsx(RichTextPreview, { content: html, formatting: listFormatting, className: "text-gray-800" }) })] }, idx));
+        }) }));
+};
+export const listBlock = {
+    type: 'list',
+    name: 'Lijst',
+    description: '',
+    icon: ListChecks,
+    defaultData: {
+        title: '',
+        items: [{ text: '' }],
+    },
+    category: 'text',
+    validate: (data) => {
+        return typeof data.title === 'string' &&
+            Array.isArray(data.items) &&
+            data.items.every((item) => {
+                if (typeof item === 'string')
+                    return true;
+                if (typeof item === 'object' && item !== null && 'text' in item) {
+                    return typeof item.text === 'string';
+                }
+                return false;
+            });
+    },
+    components: {
+        Edit: ListEdit,
+        Preview: ListPreview,
+        Icon: ListChecks,
+    },
+};

package/dist/plugin-blog/blocks/Paragraph.d.ts

@@ -0,0 +1,3 @@
+import { ClientBlockDefinition } from "@jhits/plugin-blog";
+export declare const paragraphBlock: ClientBlockDefinition;
+//# sourceMappingURL=Paragraph.d.ts.map

package/dist/plugin-blog/blocks/Paragraph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Paragraph.d.ts","sourceRoot":"","sources":["../../../src/plugin-blog/blocks/Paragraph.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqC,qBAAqB,EAA6D,MAAM,oBAAoB,CAAC;AAkEzJ,eAAO,MAAM,cAAc,EAAE,qBAkB5B,CAAC"}

package/dist/plugin-blog/blocks/Paragraph.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RichTextEditor, RichTextPreview } from "@jhits/plugin-blog";
+import { Type } from "lucide-react";
+/**
+ * Rich Text Formatting Configuration for Paragraph
+ * Matches BotanicsAndYou's design system with forest, sage, and primary colors
+ * Only enable formatting options that have proper styles defined
+ */
+const paragraphFormatting = {
+    bold: true,
+    italic: true,
+    underline: true,
+    links: true,
+    colors: ['text-forest', 'text-sage', 'text-primary'],
+    styles: {
+        // Bold: Use black color for blog bold text
+        bold: 'font-bold text-black',
+        // Italic: Just italic, no color override
+        italic: 'italic',
+        // Underline: Simple underline with client's primary color accent
+        underline: 'underline decoration-primary/30',
+        // Links: Primary color with underline and hover effect
+        link: 'text-primary underline decoration-primary/50 hover:text-primary/80 hover:decoration-primary/70 transition-colors',
+        // Color classes: Map to client's design system colors
+        colorClasses: {
+            'text-forest': 'text-forest',
+            'text-sage': 'text-sage',
+        },
+    },
+};
+/**
+ * Paragraph Block
+ * Rich text paragraph block for botanical articles
+ */
+const ParagraphEdit = ({ block, onUpdate, isSelected }) => {
+    const html = block.data.html || block.data.text || '';
+    return (_jsx(RichTextEditor, { value: html, onChange: (htmlContent) => {
+            // Store both HTML and plain text for backwards compatibility
+            const textContent = htmlContent.replace(/<[^>]*>/g, '').replace(/&nbsp;/g, ' ');
+            onUpdate({ html: htmlContent, text: textContent });
+        }, placeholder: "Enter paragraph text...", formatting: paragraphFormatting, className: "text-md leading-relaxed text-gray-800 w-full min-h-[20px]", isFocused: isSelected }));
+};
+const ParagraphPreview = ({ block }) => {
+    const html = block.data.html || block.data.text || '';
+    return (_jsx(RichTextPreview, { content: html, formatting: paragraphFormatting, className: "text-md leading-relaxed text-gray-800 py-4" }));
+};
+export const paragraphBlock = {
+    type: 'paragraph',
+    name: 'Paragraph',
+    description: 'Add a text paragraph',
+    icon: Type,
+    defaultData: {
+        text: '',
+        html: '',
+    },
+    category: 'text',
+    validate: (data) => (typeof data.text === 'string' || typeof data.html === 'string'),
+    components: {
+        Edit: ParagraphEdit,
+        Preview: ParagraphPreview,
+        Icon: Type,
+    },
+    richTextFormatting: paragraphFormatting,
+};

package/dist/plugin-blog/blocks/Recipe.d.ts

@@ -0,0 +1,13 @@
+import { BlockEditProps, BlockPreviewProps, ClientBlockDefinition } from "@jhits/plugin-blog";
+/**
+ * 2. Editor Component
+ * Handles dynamic list management, keyboard navigation, and auto-focus
+ */
+export declare const RecipeEdit: React.FC<BlockEditProps>;
+/**
+ * 3. Preview Component
+ * Handles interactive progress tracking for the end user
+ */
+export declare const RecipePreview: React.FC<BlockPreviewProps>;
+export declare const recipeBlock: ClientBlockDefinition;
+//# sourceMappingURL=Recipe.d.ts.map

package/dist/plugin-blog/blocks/Recipe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Recipe.d.ts","sourceRoot":"","sources":["../../../src/plugin-blog/blocks/Recipe.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAyC9F;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA+E/C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAwErD,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,qBAoBzB,CAAC"}