@webround/editor 0.0.0-stage → 0.3.0

package/dist/components/text-editor/plugins/FontSizePlugin.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useState, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getSelection, $isRangeSelection } from 'lexical';
+import { $patchStyleText, $getSelectionStyleValueForProperty } from '@lexical/selection';
+import { BiCheckCircle } from 'react-icons/bi';
+import { WR_SURFACE_STYLE } from '../common/surface';
+// Punti di riferimento fissi per l'interpolazione fluida (fluid typography).
+// Sotto MIN_VIEWPORT il size resta fisso a min, sopra MAX_VIEWPORT resta fisso a max,
+// in mezzo scala linearmente in base alla viewport reale.
+const MIN_VIEWPORT = 375;
+const MAX_VIEWPORT = 1440;
+function buildFontSizeValue(minPx, maxPx) {
+    if (minPx === maxPx)
+        return `${minPx}px`; // nessuno scaling: valore fisso, CSS più pulito
+    const lo = Math.min(minPx, maxPx);
+    const hi = Math.max(minPx, maxPx);
+    const slope = (maxPx - minPx) / (MAX_VIEWPORT - MIN_VIEWPORT);
+    const intercept = minPx - slope * MIN_VIEWPORT;
+    const preferred = `${intercept.toFixed(3)}px + ${(slope * 100).toFixed(3)}vw`;
+    return `clamp(${lo}px, ${preferred}, ${hi}px)`;
+}
+function parseFontSizeValue(value) {
+    const clampMatch = value.match(/^clamp\(\s*([\d.]+)px\s*,.*?,\s*([\d.]+)px\s*\)$/);
+    if (clampMatch) {
+        return { min: parseFloat(clampMatch[1]), max: parseFloat(clampMatch[2]) };
+    }
+    const flat = parseFloat(value);
+    const size = Number.isFinite(flat) ? flat : 16;
+    return { min: size, max: size };
+}
+function FontSizePlugin({ editorPathKey = '' }) {
+    const [editor] = useLexicalComposerContext();
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const [minSize, setMinSize] = useState(16);
+    const [maxSize, setMaxSize] = useState(16);
+    const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
+    const buttonRef = useRef(null);
+    const menuRef = useRef(null);
+    useEffect(() => {
+        return editor.registerUpdateListener(({ editorState }) => {
+            editorState.read(() => {
+                const selection = $getSelection();
+                if (!$isRangeSelection(selection))
+                    return;
+                const fontSize = $getSelectionStyleValueForProperty(selection, 'font-size', '16px');
+                if (fontSize) {
+                    const { min, max } = parseFontSizeValue(fontSize);
+                    setMinSize(min);
+                    setMaxSize(max);
+                }
+            });
+        });
+    }, [editor]);
+    const applyFontSize = useCallback((min, max) => {
+        const value = buildFontSizeValue(min, max);
+        editor.update(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+                $patchStyleText(selection, { 'font-size': value });
+            }
+        });
+        setMinSize(min);
+        setMaxSize(max);
+        setIsMenuOpen(false);
+    }, [editor]);
+    const calculateMenuPosition = useCallback(() => {
+        if (!buttonRef.current)
+            return;
+        const rect = buttonRef.current.getBoundingClientRect();
+        const menuWidth = 168;
+        const pageWidth = document.body.clientWidth;
+        let left = rect.left;
+        if (left + menuWidth > pageWidth)
+            left = pageWidth - menuWidth - 10;
+        if (left < 0)
+            left = 10;
+        setMenuPosition({ top: rect.bottom, left });
+    }, []);
+    useEffect(() => {
+        if (!isMenuOpen)
+            return;
+        calculateMenuPosition();
+        const handleClickOutside = (e) => {
+            if (menuRef.current?.contains(e.target) ||
+                buttonRef.current?.contains(e.target))
+                return;
+            setIsMenuOpen(false);
+        };
+        const timer = setTimeout(() => {
+            document.addEventListener('click', handleClickOutside);
+        }, 0);
+        return () => {
+            clearTimeout(timer);
+            document.removeEventListener('click', handleClickOutside);
+        };
+    }, [isMenuOpen, calculateMenuPosition]);
+    const label = minSize === maxSize ? `${minSize}px` : `${minSize}–${maxSize}px`;
+    return (_jsxs("div", { className: `toolbarClass path-${editorPathKey}`, style: { position: 'relative', display: 'inline-block', textAlign: 'left' }, onClick: e => e.stopPropagation(), children: [_jsxs("button", { ref: buttonRef, type: "button", onPointerDown: e => e.preventDefault(), onClick: e => { e.stopPropagation(); setIsMenuOpen(p => !p); }, "aria-expanded": isMenuOpen, className: "wr-toolbar-trigger", children: [_jsx("span", { children: label }), _jsx("svg", { className: `wr-toolbar-chevron ${isMenuOpen ? 'wr-toolbar-chevron--open' : ''}`, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }) })] }), isMenuOpen && createPortal(_jsx("div", { ref: menuRef, className: `toolbarClass path-${editorPathKey} wr-toolbar-menu`, style: { ...WR_SURFACE_STYLE, top: menuPosition.top, left: menuPosition.left, width: 168 }, onPointerDown: e => e.preventDefault(), children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 6, padding: 8 }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [_jsx("label", { style: { fontSize: 11, width: 24 }, children: "min" }), _jsx("input", { type: "number", className: "wr-core-input", value: minSize, onChange: e => setMinSize(Number(e.target.value)), onKeyDown: e => { if (e.key === 'Enter')
+                                        applyFontSize(minSize, maxSize); }, onPointerDown: e => e.stopPropagation() })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [_jsx("label", { style: { fontSize: 11, width: 24 }, children: "max" }), _jsx("input", { type: "number", className: "wr-core-input", value: maxSize, onChange: e => setMaxSize(Number(e.target.value)), onKeyDown: e => { if (e.key === 'Enter')
+                                        applyFontSize(minSize, maxSize); }, onPointerDown: e => e.stopPropagation() })] }), _jsx("button", { onClick: () => applyFontSize(minSize, maxSize), className: "wr-primary-btn", style: { marginTop: 0, width: '100%', padding: 4, display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx(BiCheckCircle, { size: 18 }) })] }) }), document.body)] }));
+}
+export default FontSizePlugin;
+//# sourceMappingURL=FontSizePlugin.js.map

package/dist/components/text-editor/plugins/FontWeightPlugin.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    editorPathKey?: string;
+}
+declare function FontWeightPlugin({ editorPathKey }: Props): import("react").JSX.Element;
+export default FontWeightPlugin;
+//# sourceMappingURL=FontWeightPlugin.d.ts.map

package/dist/components/text-editor/plugins/FontWeightPlugin.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_LOW, FORMAT_TEXT_COMMAND } from 'lexical';
+import { $patchStyleText } from '@lexical/selection';
+import { createPortal } from 'react-dom';
+import { MdFormatBold } from 'react-icons/md';
+import { WR_SURFACE_STYLE } from '../common/surface';
+const fontWeights = [
+    { value: '100', label: 'Thin 100' },
+    { value: '200', label: 'ExtraLight 200' },
+    { value: '300', label: 'Light 300' },
+    { value: '400', label: 'Regular 400' },
+    { value: '500', label: 'Medium 500' },
+    { value: '600', label: 'SemiBold 600' },
+    { value: '700', label: 'Bold 700' },
+    { value: '800', label: 'ExtraBold 800' },
+    { value: '900', label: 'Black 900' },
+];
+function FontWeightPlugin({ editorPathKey = '' }) {
+    const [editor] = useLexicalComposerContext();
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const [selectedWeight, setSelectedWeight] = useState(fontWeights[3].value);
+    const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
+    const buttonRef = useRef(null);
+    const menuRef = useRef(null);
+    const applyFontWeight = useCallback((weight) => {
+        editor.update(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+                $patchStyleText(selection, { 'font-weight': weight });
+            }
+        });
+        editor.focus();
+        setSelectedWeight(weight);
+        setIsMenuOpen(false);
+    }, [editor]);
+    const calculateMenuPosition = () => {
+        if (buttonRef.current && menuRef.current) {
+            const buttonRect = buttonRef.current.getBoundingClientRect();
+            const menuRect = menuRef.current.getBoundingClientRect();
+            let top = buttonRect.bottom;
+            let left = buttonRect.left;
+            const pageWidth = document.body.clientWidth;
+            if (left + menuRect.width > pageWidth)
+                left = pageWidth - menuRect.width - 10;
+            if (left < 0)
+                left = 10;
+            setMenuPosition({ top, left });
+        }
+    };
+    useEffect(() => {
+        if (!isMenuOpen)
+            return;
+        const handler = (e) => {
+            if (!menuRef.current?.contains(e.target) && !buttonRef.current?.contains(e.target)) {
+                setIsMenuOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handler, true);
+        const raf = requestAnimationFrame(calculateMenuPosition);
+        return () => {
+            document.removeEventListener('mousedown', handler, true);
+            cancelAnimationFrame(raf);
+        };
+    }, [isMenuOpen]);
+    useEffect(() => {
+        return editor.registerUpdateListener(() => {
+            editor.getEditorState().read(() => {
+                const selection = $getSelection();
+                if (!$isRangeSelection(selection))
+                    return;
+                const styleString = selection.anchor.getNode().getStyle?.();
+                if (typeof styleString === 'string') {
+                    const match = styleString.match(/font-weight:\s*(\d+)/i);
+                    if (match)
+                        setSelectedWeight(match[1]);
+                }
+            });
+        });
+    }, [editor]);
+    useEffect(() => {
+        return editor.registerCommand(FORMAT_TEXT_COMMAND, (formatType) => {
+            if (formatType !== 'bold')
+                return false;
+            editor.update(() => {
+                const selection = $getSelection();
+                if (!$isRangeSelection(selection))
+                    return;
+                const styleString = selection.anchor.getNode().getStyle?.() ?? '';
+                const match = styleString.match(/font-weight:\s*(\d+)/i);
+                const current = match ? parseInt(match[1], 10) : 400;
+                const newWeight = current >= 700 ? '400' : '700';
+                $patchStyleText(selection, { 'font-weight': newWeight });
+                setSelectedWeight(newWeight);
+            });
+            return true;
+        }, COMMAND_PRIORITY_LOW);
+    }, [editor]);
+    return (_jsxs("div", { className: `path-${editorPathKey} toolbarClass`, style: { position: 'relative', display: 'inline-block', textAlign: 'left' }, onClick: e => e.stopPropagation(), children: [_jsxs("button", { ref: buttonRef, type: "button", onPointerDown: e => e.preventDefault(), onClick: e => { e.stopPropagation(); setIsMenuOpen(p => !p); }, "aria-expanded": isMenuOpen, className: "wr-toolbar-trigger", children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsx(MdFormatBold, { style: { fontSize: 18 } }), _jsx("span", { children: fontWeights.find(fw => fw.value === selectedWeight)?.label })] }), _jsx("svg", { className: `wr-toolbar-chevron ${isMenuOpen ? 'wr-toolbar-chevron--open' : ''}`, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }) })] }), isMenuOpen && createPortal(_jsx("div", { ref: menuRef, className: `toolbarClass path-${editorPathKey} wr-toolbar-menu`, style: { ...WR_SURFACE_STYLE, top: menuPosition.top, left: menuPosition.left, width: 160 }, onPointerDown: e => e.preventDefault(), children: _jsx("div", { style: { padding: '4px 0' }, children: fontWeights.map(fw => (_jsx("button", { onClick: () => applyFontWeight(fw.value), className: `wr-toolbar-item ${fw.value === selectedWeight ? 'wr-toolbar-item--active' : ''}`, children: fw.label }, fw.value))) }) }), document.body)] }));
+}
+export default FontWeightPlugin;
+//# sourceMappingURL=FontWeightPlugin.js.map

package/dist/components/text-editor/plugins/HTMLTagPlugin.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface Props {
+    editorPathKey?: string;
+}
+declare function HTMLTagPlugin({ editorPathKey }: Props): React.JSX.Element;
+export default HTMLTagPlugin;
+//# sourceMappingURL=HTMLTagPlugin.d.ts.map

package/dist/components/text-editor/plugins/HTMLTagPlugin.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useState, useCallback } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getSelection, $isRangeSelection, $createParagraphNode } from 'lexical';
+import { $createHeadingNode, $isHeadingNode } from '@lexical/rich-text';
+import { $setBlocksType } from '@lexical/selection';
+import { createPortal } from 'react-dom';
+import { WR_SURFACE_STYLE } from '../common/surface';
+const headings = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+function HTMLTagPlugin({ editorPathKey = '' }) {
+    const [editor] = useLexicalComposerContext();
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const [selectedHeading, setSelectedHeading] = useState('p');
+    const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
+    const buttonRef = useRef(null);
+    const menuRef = useRef(null);
+    const formatHeading = useCallback((tag) => {
+        editor.update(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+                if (tag === 'p') {
+                    $setBlocksType(selection, () => $createParagraphNode());
+                }
+                else {
+                    $setBlocksType(selection, () => $createHeadingNode(tag));
+                }
+            }
+        });
+        setSelectedHeading(tag);
+        setIsMenuOpen(false);
+    }, [editor]);
+    const calculateMenuPosition = () => {
+        if (buttonRef.current && menuRef.current) {
+            const buttonRect = buttonRef.current.getBoundingClientRect();
+            const menuRect = menuRef.current.getBoundingClientRect();
+            let top = buttonRect.bottom;
+            let left = buttonRect.left;
+            const pageWidth = document.body.clientWidth;
+            if (left + menuRect.width > pageWidth)
+                left = pageWidth - menuRect.width - 10;
+            if (left < 0)
+                left = 10;
+            setMenuPosition({ top, left });
+        }
+    };
+    useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (menuRef.current && !menuRef.current.contains(e.target) && !buttonRef.current?.contains(e.target)) {
+                setIsMenuOpen(false);
+            }
+        };
+        if (isMenuOpen) {
+            document.addEventListener('click', handleClickOutside);
+            calculateMenuPosition();
+        }
+        return () => document.removeEventListener('click', handleClickOutside);
+    }, [isMenuOpen]);
+    useEffect(() => {
+        return editor.registerUpdateListener(() => {
+            editor.getEditorState().read(() => {
+                const selection = $getSelection();
+                if (!$isRangeSelection(selection))
+                    return;
+                const anchorNode = selection.anchor.getNode();
+                let element = anchorNode.getKey() === 'root' ? anchorNode : anchorNode.getParentOrThrow();
+                while (element != null) {
+                    if ($isHeadingNode(element)) {
+                        setSelectedHeading(element.getTag());
+                        return;
+                    }
+                    if (element.getType() === 'root')
+                        break;
+                    element = element.getParent();
+                }
+                setSelectedHeading('p');
+            });
+        });
+    }, [editor]);
+    return (_jsxs("div", { className: `path-${editorPathKey} toolbarClass`, style: { position: 'relative', display: 'inline-block', textAlign: 'left' }, onClick: e => e.stopPropagation(), children: [_jsxs("button", { ref: buttonRef, type: "button", onClick: e => { e.stopPropagation(); setIsMenuOpen(p => !p); }, "aria-expanded": isMenuOpen, className: "wr-toolbar-trigger", style: { padding: '8px' }, children: [_jsx("span", { children: selectedHeading.toUpperCase() }), _jsx("svg", { className: `wr-toolbar-chevron ${isMenuOpen ? 'wr-toolbar-chevron--open' : ''}`, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }) })] }), isMenuOpen && createPortal(_jsx("div", { ref: menuRef, className: `path-${editorPathKey} toolbarClass wr-toolbar-menu`, style: { ...WR_SURFACE_STYLE, top: menuPosition.top, left: menuPosition.left, width: 128, maxHeight: 288 }, children: _jsx("div", { style: { padding: '4px 0' }, children: headings.map(tag => (_jsx("button", { onClick: () => formatHeading(tag), className: `wr-toolbar-item ${tag === selectedHeading ? 'wr-toolbar-item--active' : ''}`, children: tag.toUpperCase() }, tag))) }) }), document.body)] }));
+}
+export default HTMLTagPlugin;
+//# sourceMappingURL=HTMLTagPlugin.js.map

package/dist/components/text-editor/plugins/HorizontalRulePlugin.d.ts

@@ -0,0 +1,2 @@
+export default function HorizontalRulePlugin(): null;
+//# sourceMappingURL=HorizontalRulePlugin.d.ts.map

package/dist/components/text-editor/plugins/HorizontalRulePlugin.js

@@ -0,0 +1,35 @@
+import { useEffect } from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $getSelection, $isRangeSelection, $isParagraphNode, $createParagraphNode, KEY_ENTER_COMMAND, COMMAND_PRIORITY_LOW, $createRangeSelection, $setSelection, } from "lexical";
+import { $createHorizontalRuleNode } from "../nodes/HorizontalRuleNode";
+export default function HorizontalRulePlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        return editor.registerCommand(KEY_ENTER_COMMAND, (event) => {
+            const selection = $getSelection();
+            if (!$isRangeSelection(selection))
+                return false;
+            const anchor = selection.anchor.getNode();
+            const parent = anchor.getParent();
+            if (!$isParagraphNode(parent))
+                return false;
+            if (parent.getChildrenSize() !== 1)
+                return false;
+            if (anchor.getTextContent() !== "---")
+                return false;
+            event?.preventDefault();
+            const para = $createParagraphNode();
+            const hr = $createHorizontalRuleNode();
+            parent.replace(para);
+            para.insertBefore(hr);
+            const newSelection = $createRangeSelection();
+            const key = para.getKey();
+            newSelection.anchor.set(key, 0, "element");
+            newSelection.focus.set(key, 0, "element");
+            $setSelection(newSelection);
+            return true;
+        }, COMMAND_PRIORITY_LOW);
+    }, [editor]);
+    return null;
+}
+//# sourceMappingURL=HorizontalRulePlugin.js.map

package/dist/components/text-editor/plugins/LineSpacingPlugin.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface Props {
+    editorPathKey?: string;
+}
+declare function LineSpacingPlugin({ editorPathKey }: Props): React.JSX.Element;
+export default LineSpacingPlugin;
+//# sourceMappingURL=LineSpacingPlugin.d.ts.map

package/dist/components/text-editor/plugins/LineSpacingPlugin.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useState } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getSelection, $isRangeSelection } from 'lexical';
+import { $patchStyleText } from '@lexical/selection';
+import { createPortal } from 'react-dom';
+import { MdFormatLineSpacing } from 'react-icons/md';
+import { WR_SURFACE_STYLE } from '../common/surface';
+const lineSpacings = [
+    { label: '1.0 (Single)', value: '1' },
+    { label: '1.15', value: '1.15' },
+    { label: '1.5', value: '1.5' },
+    { label: '2.0 (Double)', value: '2' },
+    { label: '2.5', value: '2.5' },
+    { label: '3.0', value: '3' },
+];
+function LineSpacingPlugin({ editorPathKey = '' }) {
+    const [editor] = useLexicalComposerContext();
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const [selectedSpacing, setSelectedSpacing] = useState(lineSpacings[1].value);
+    const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
+    const buttonRef = useRef(null);
+    const menuRef = useRef(null);
+    const applyLineSpacing = (spacing) => {
+        editor.update(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+                $patchStyleText(selection, { 'line-height': spacing });
+            }
+        });
+        setSelectedSpacing(spacing);
+        setIsMenuOpen(false);
+    };
+    const calculateMenuPosition = () => {
+        if (buttonRef.current && menuRef.current) {
+            const buttonRect = buttonRef.current.getBoundingClientRect();
+            const menuRect = menuRef.current.getBoundingClientRect();
+            let top = buttonRect.bottom;
+            let left = buttonRect.left;
+            const pageWidth = document.body.clientWidth;
+            if (left + menuRect.width > pageWidth)
+                left = pageWidth - menuRect.width - 10;
+            if (left < 0)
+                left = 10;
+            setMenuPosition({ top, left });
+        }
+    };
+    useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (menuRef.current && !menuRef.current.contains(e.target) && !buttonRef.current?.contains(e.target)) {
+                setIsMenuOpen(false);
+            }
+        };
+        if (isMenuOpen) {
+            document.addEventListener('click', handleClickOutside);
+            calculateMenuPosition();
+        }
+        return () => document.removeEventListener('click', handleClickOutside);
+    }, [isMenuOpen]);
+    useEffect(() => {
+        return editor.registerUpdateListener(() => {
+            editor.getEditorState().read(() => {
+                const selection = $getSelection();
+                if (!$isRangeSelection(selection))
+                    return;
+                const anchorNode = selection.anchor.getNode();
+                if (!anchorNode)
+                    return;
+                const styleString = anchorNode.getStyle?.();
+                if (anchorNode.getTextContent().trim() === '')
+                    return;
+                if (styleString && typeof styleString === 'string') {
+                    const match = styleString.match(/line-height:\s*([\d.]+)/i);
+                    if (match)
+                        setSelectedSpacing(match[1].trim());
+                }
+            });
+        });
+    }, [editor]);
+    return (_jsxs("div", { className: `path-${editorPathKey} toolbarClass`, style: { position: 'relative', display: 'inline-block', textAlign: 'left' }, onClick: e => e.stopPropagation(), children: [_jsxs("button", { ref: buttonRef, type: "button", onClick: e => { e.stopPropagation(); setIsMenuOpen(p => !p); }, className: "wr-toolbar-trigger", "aria-expanded": isMenuOpen, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsx(MdFormatLineSpacing, { style: { fontSize: 18 } }), _jsx("span", { children: lineSpacings.find(s => s.value === selectedSpacing)?.label })] }), _jsx("svg", { className: `wr-toolbar-chevron ${isMenuOpen ? 'wr-toolbar-chevron--open' : ''}`, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }) })] }), isMenuOpen && createPortal(_jsx("div", { ref: menuRef, className: `toolbarClass path-${editorPathKey} wr-toolbar-menu`, style: { ...WR_SURFACE_STYLE, top: menuPosition.top, left: menuPosition.left, width: 160 }, children: _jsx("div", { style: { padding: '4px 0' }, children: lineSpacings.map(spacing => (_jsx("button", { onClick: () => applyLineSpacing(spacing.value), className: `wr-toolbar-item ${spacing.value === selectedSpacing ? 'wr-toolbar-item--active' : ''}`, children: spacing.label }, spacing.value))) }) }), document.body)] }));
+}
+export default LineSpacingPlugin;
+//# sourceMappingURL=LineSpacingPlugin.js.map

package/dist/components/text-editor/plugins/LinkPlugin.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface Props {
+    availablePages?: string[];
+    editorPathKey?: string;
+}
+declare function LinkPlugin({ availablePages, editorPathKey }: Props): React.JSX.Element;
+export default LinkPlugin;
+//# sourceMappingURL=LinkPlugin.d.ts.map

package/dist/components/text-editor/plugins/LinkPlugin.js

@@ -0,0 +1,183 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getSelection, $isRangeSelection } from 'lexical';
+import { $toggleLink, $isLinkNode } from '@lexical/link';
+import { createPortal } from 'react-dom';
+import { CiLink } from 'react-icons/ci';
+import { IoCall, IoNavigate } from 'react-icons/io5';
+import { MdAlternateEmail } from 'react-icons/md';
+import { FaWhatsapp } from 'react-icons/fa';
+import { WR_SURFACE_STYLE } from '../common/surface';
+const t = {
+    title: 'Inserisci link',
+    linkTypeLabel: 'Tipo di link',
+    externalLink: 'Esterno',
+    internalLink: 'Interno',
+    phone: 'Telefono',
+    email: 'Email',
+    whatsapp: 'WhatsApp',
+    urlPlaceholder: 'https://...',
+    phonePlaceholder: '+39...',
+    emailPlaceholder: 'email@esempio.com',
+    anchorLabel: 'Ancora',
+    anchorPlaceholder: 'es. sezione-1',
+    selectPage: 'Seleziona pagina',
+    phoneHelp: 'Formato internazionale: +39...',
+    invalidValue: 'Valore non valido',
+    confirm: 'Applica',
+};
+const urlRegExp = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www\.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[\w]*))?)/;
+const phoneRegExp = /^\+[1-9]\d{1,14}$/;
+const emailRegExp = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function validateInput(value, type) {
+    switch (type) {
+        case 'external': return urlRegExp.test(value);
+        case 'phone': return phoneRegExp.test(value);
+        case 'email': return emailRegExp.test(value);
+        case 'internal': return value !== '';
+        case 'whatsapp': return phoneRegExp.test(value);
+    }
+}
+function LinkPlugin({ availablePages = [], editorPathKey = '' }) {
+    const [editor] = useLexicalComposerContext();
+    const [isLinkEditorOpen, setIsLinkEditorOpen] = useState(false);
+    const [isValidUrl, setIsValidUrl] = useState(false);
+    const [linkUrl, setLinkUrl] = useState('');
+    const [anchorLink, setAnchorLink] = useState('');
+    const [linkType, setLinkType] = useState('external');
+    const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
+    const [selectedPage, setSelectedPage] = useState('');
+    const buttonRef = useRef(null);
+    const menuRef = useRef(null);
+    const checkLinkSelection = useCallback(() => {
+        let isLinkSelected = false;
+        editor.update(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+                const anchorNode = selection.anchor.getNode();
+                const parent = anchorNode.getParent();
+                if (parent !== null && $isLinkNode(parent)) {
+                    const url = parent.getURL();
+                    if (url.startsWith('tel:')) {
+                        setLinkType('phone');
+                        setLinkUrl(url.replace('tel:', ''));
+                        setIsValidUrl(validateInput(url.replace('tel:', ''), 'phone'));
+                    }
+                    else if (url.startsWith('mailto:')) {
+                        setLinkType('email');
+                        setLinkUrl(url.replace('mailto:', ''));
+                        setIsValidUrl(validateInput(url.replace('mailto:', ''), 'email'));
+                    }
+                    else if (url.startsWith('/')) {
+                        setLinkType('internal');
+                        const [path, anchor] = url.split('#');
+                        setSelectedPage(path);
+                        setAnchorLink(anchor || '');
+                    }
+                    else if (url.startsWith('https://wa.me/')) {
+                        setLinkType('whatsapp');
+                        setLinkUrl(url.replace('https://wa.me/', ''));
+                        setIsValidUrl(validateInput(url.replace('https://wa.me/', ''), 'whatsapp'));
+                    }
+                    else {
+                        setLinkType('external');
+                        setLinkUrl(url);
+                        setIsValidUrl(validateInput(url, 'external'));
+                    }
+                    isLinkSelected = true;
+                }
+                else {
+                    if (linkType === 'external') {
+                        setLinkUrl('https://');
+                        setIsValidUrl(validateInput('https://', 'external'));
+                    }
+                    else {
+                        setLinkUrl('');
+                        setIsValidUrl(false);
+                    }
+                }
+            }
+        });
+        return isLinkSelected;
+    }, [editor, linkType]);
+    useEffect(() => {
+        return editor.registerUpdateListener(() => { checkLinkSelection(); });
+    }, [editor, checkLinkSelection]);
+    const handleLinkClick = () => {
+        const isLinkSelected = checkLinkSelection();
+        editor.update(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+                if (!isLinkSelected) {
+                    setLinkUrl('https://');
+                    setIsValidUrl(validateInput('https://', 'external'));
+                }
+                setIsLinkEditorOpen(true);
+            }
+        });
+    };
+    const applyLink = () => {
+        editor.update(() => {
+            let finalUrl = linkUrl;
+            if (linkType === 'phone')
+                finalUrl = `tel:${linkUrl}`;
+            else if (linkType === 'email')
+                finalUrl = `mailto:${linkUrl}`;
+            else if (linkType === 'internal') {
+                finalUrl = selectedPage;
+                if (anchorLink?.trim())
+                    finalUrl += `#${anchorLink.trim()}`;
+            }
+            else if (linkType === 'whatsapp')
+                finalUrl = `https://wa.me/${linkUrl}`;
+            else if (linkType === 'external')
+                finalUrl = linkUrl.startsWith('http') ? linkUrl : `https://${linkUrl}`;
+            $toggleLink(finalUrl);
+        });
+        setIsLinkEditorOpen(false);
+    };
+    const calculateMenuPosition = () => {
+        if (buttonRef.current && menuRef.current) {
+            const buttonRect = buttonRef.current.getBoundingClientRect();
+            const menuRect = menuRef.current.getBoundingClientRect();
+            let top = buttonRect.bottom;
+            let left = buttonRect.left;
+            const pageWidth = document.body.clientWidth;
+            if (left + menuRect.width > pageWidth)
+                left = pageWidth - menuRect.width - 10;
+            if (left < 0)
+                left = 10;
+            setMenuPosition({ top, left });
+        }
+    };
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (menuRef.current && !menuRef.current.contains(event.target) && !buttonRef.current?.contains(event.target)) {
+                setIsLinkEditorOpen(false);
+            }
+        };
+        if (isLinkEditorOpen) {
+            document.addEventListener('click', handleClickOutside);
+            calculateMenuPosition();
+        }
+        return () => document.removeEventListener('click', handleClickOutside);
+    }, [isLinkEditorOpen]);
+    const handleIconClick = () => {
+        if (!isValidUrl)
+            return;
+        if (linkType === 'external')
+            window.open(linkUrl.startsWith('http') ? linkUrl : `https://${linkUrl}`, '_blank');
+        else if (linkType === 'whatsapp')
+            window.open(`https://wa.me/${linkUrl}`, '_blank');
+        else if (linkType === 'phone')
+            window.location.href = `tel:${linkUrl}`;
+        else if (linkType === 'email')
+            window.location.href = `mailto:${linkUrl}`;
+    };
+    return (_jsxs("div", { className: `path-${editorPathKey} toolbarClass`, style: { position: 'relative', display: 'inline-block', textAlign: 'left' }, onPointerDown: e => e.stopPropagation(), children: [_jsxs("button", { ref: buttonRef, type: "button", onClick: handleLinkClick, className: `wr-toolbar-icon-btn ${isValidUrl ? 'wr-toolbar-icon-btn--active' : ''}`, children: [linkType === 'phone' && _jsx(IoCall, { size: 16 }), linkType === 'email' && _jsx(MdAlternateEmail, { size: 16 }), (linkType === 'external' || linkType === 'internal') && _jsx(CiLink, { size: 16 }), linkType === 'whatsapp' && _jsx(FaWhatsapp, { size: 16, color: "rgb(50,200,50)" })] }), isLinkEditorOpen && createPortal(_jsx("div", { ref: menuRef, className: `path-${editorPathKey} toolbarClass wr-toolbar-menu`, style: { ...WR_SURFACE_STYLE, top: menuPosition.top, left: menuPosition.left, width: 256 }, children: _jsxs("div", { style: { padding: '8px 16px' }, children: [_jsx("h3", { style: { color: 'var(--wr-text-2)', fontSize: 14, marginBottom: 8 }, children: t.title }), _jsxs("div", { style: { marginBottom: 8 }, children: [_jsx("label", { className: "wr-label", children: t.linkTypeLabel }), _jsxs("select", { value: linkType, onChange: e => setLinkType(e.target.value), className: "wr-core-input", children: [_jsx("option", { value: "external", children: t.externalLink }), _jsx("option", { value: "internal", children: t.internalLink }), _jsx("option", { value: "phone", children: t.phone }), _jsx("option", { value: "email", children: t.email }), _jsx("option", { value: "whatsapp", children: t.whatsapp })] })] }), linkType === 'external' && (_jsxs("div", { style: { display: 'flex', alignItems: 'center', position: 'relative' }, children: [_jsx("input", { type: "text", placeholder: t.urlPlaceholder, value: linkUrl, onChange: e => { setLinkUrl(e.target.value); setIsValidUrl(validateInput(e.target.value, linkType)); }, className: "wr-core-input" }), _jsx(IoNavigate, { size: 16, style: { position: 'absolute', right: 8, color: 'var(--wr-text-3)', cursor: isValidUrl ? 'pointer' : 'not-allowed', opacity: isValidUrl ? 1 : 0.5 }, onClick: handleIconClick })] })), linkType === 'internal' && (_jsxs("div", { children: [_jsxs("select", { value: selectedPage, onChange: e => { setSelectedPage(e.target.value); setIsValidUrl(true); }, className: "wr-core-input", children: [_jsx("option", { value: "", children: t.selectPage }), availablePages.map((page, idx) => _jsx("option", { value: `/${page}`, children: `/${page}` }, idx))] }), _jsx("label", { className: "wr-label", style: { marginTop: 16, fontWeight: 500 }, children: t.anchorLabel }), _jsx("input", { type: "text", value: anchorLink, maxLength: 30, onChange: e => setAnchorLink(e.target.value.replace(/[^a-zA-Z0-9-_]/g, '')), placeholder: t.anchorPlaceholder, className: "wr-core-input" })] })), (linkType === 'phone' || linkType === 'whatsapp') && (_jsxs("div", { style: { display: 'flex', alignItems: 'center', position: 'relative' }, children: [_jsx("input", { type: "text", placeholder: t.phonePlaceholder, value: linkUrl, onChange: e => { setLinkUrl(e.target.value); setIsValidUrl(validateInput(e.target.value, linkType)); }, className: "wr-core-input" }), linkType === 'phone'
+                                    ? _jsx(IoCall, { size: 16, style: { position: 'absolute', right: 8, color: 'var(--wr-text-3)', cursor: isValidUrl ? 'pointer' : 'not-allowed', opacity: isValidUrl ? 1 : 0.5 }, onClick: handleIconClick })
+                                    : _jsx(FaWhatsapp, { size: 16, style: { position: 'absolute', right: 8, color: 'var(--wr-text-3)', cursor: isValidUrl ? 'pointer' : 'not-allowed', opacity: isValidUrl ? 1 : 0.5 }, onClick: handleIconClick })] })), (linkType === 'phone' || linkType === 'whatsapp') && _jsx("p", { className: "wr-help-text", children: t.phoneHelp }), linkType === 'email' && (_jsxs("div", { style: { display: 'flex', alignItems: 'center', position: 'relative' }, children: [_jsx("input", { type: "text", placeholder: t.emailPlaceholder, value: linkUrl, onChange: e => { setLinkUrl(e.target.value); setIsValidUrl(validateInput(e.target.value, linkType)); }, className: "wr-core-input" }), _jsx(IoNavigate, { size: 16, style: { position: 'absolute', right: 8, color: 'var(--wr-text-3)', cursor: isValidUrl ? 'pointer' : 'not-allowed', opacity: isValidUrl ? 1 : 0.5 }, onClick: handleIconClick })] })), !isValidUrl && linkType !== 'internal' && _jsx("p", { className: "wr-error-text", children: t.invalidValue }), _jsx("div", { style: { marginBottom: 8 }, children: _jsx("button", { onClick: applyLink, disabled: !isValidUrl, className: "wr-primary-btn", children: t.confirm }) })] }) }), document.body)] }));
+}
+export default LinkPlugin;
+//# sourceMappingURL=LinkPlugin.js.map