@webround/editor 0.0.0-stage → 0.3.0

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

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

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

@@ -0,0 +1,40 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getSelection, $isRangeSelection } from 'lexical';
+import { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND } from '@lexical/list';
+import { PiListBullets, PiListNumbers } from 'react-icons/pi';
+export default function ListToolbarPlugin({ editorPathKey = '' }) {
+    const [editor] = useLexicalComposerContext();
+    const extractTextStyle = () => {
+        let style = '';
+        editor.getEditorState().read(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+                style = selection.anchor.getNode().getStyle?.() || '';
+            }
+        });
+        return style;
+    };
+    const applyStyleToListElement = () => {
+        editor.update(() => {
+            const selection = $getSelection();
+            if (!$isRangeSelection(selection))
+                return;
+            let node = selection.anchor.getNode();
+            while (node && node.getType() !== 'list') {
+                node = node.getParent();
+            }
+            if (node?.getType() === 'list') {
+                const parent = node.getParent();
+                if (parent)
+                    parent.setStyle(extractTextStyle());
+            }
+        });
+    };
+    const insertList = (listType) => {
+        editor.dispatchCommand(listType === 'ol' ? INSERT_ORDERED_LIST_COMMAND : INSERT_UNORDERED_LIST_COMMAND, undefined);
+        applyStyleToListElement();
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("button", { className: `wr-toolbar-icon-btn path-${editorPathKey}`, onClick: () => insertList('ul'), title: "Lista puntata", children: _jsx(PiListBullets, {}) }), _jsx("button", { className: `wr-toolbar-icon-btn path-${editorPathKey}`, onClick: () => insertList('ol'), title: "Lista numerata", children: _jsx(PiListNumbers, {}) })] }));
+}
+//# sourceMappingURL=ListToolbarPlugin.js.map

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

@@ -0,0 +1,4 @@
+export default function LoadContentPlugin({ html }: {
+    html: string;
+}): null;
+//# sourceMappingURL=LoadContentPlugin.d.ts.map

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

@@ -0,0 +1,63 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useEffect, useRef } from 'react';
+import { $getRoot, $insertNodes } from 'lexical';
+import { $generateNodesFromDOM } from '@lexical/html';
+export default function LoadContentPlugin({ html }) {
+    const [editor] = useLexicalComposerContext();
+    const loadedRef = useRef(false);
+    useEffect(() => {
+        if (loadedRef.current)
+            return;
+        if (!html)
+            return;
+        loadedRef.current = true;
+        editor.update(() => {
+            const parser = new DOMParser();
+            const dom = parser.parseFromString(html, 'text/html');
+            // Inserisci i nodi dalla struttura HTML
+            const nodes = $generateNodesFromDOM(editor, dom);
+            $getRoot().clear();
+            $getRoot().select();
+            $insertNodes(nodes);
+            // $generateNodesFromDOM non preserva gli stili inline dei <span style="...">,
+            // perché Lexical non ha un converter registrato per span[style].
+            // Fix: camminiamo DOM e Lexical in parallelo per indice posizionale
+            // (più robusto del matching per textContent che si rompe con testi identici).
+            const domLeaves = getStyledLeaves(dom.body);
+            const lexNodes = $getRoot().getAllTextNodes();
+            domLeaves.forEach((leaf, i) => {
+                if (leaf.style && lexNodes[i]) {
+                    lexNodes[i].setStyle(leaf.style);
+                }
+            });
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return null;
+}
+/**
+ * Raccoglie in ordine di documento tutte le foglie di testo del DOM
+ * con il loro stile inline (se presente sul parent diretto o antenato span).
+ * Restituisce un array parallelo ai TextNode di Lexical.
+ */
+function getStyledLeaves(root) {
+    const results = [];
+    function walk(node, inheritedStyle) {
+        if (node.nodeType === Node.TEXT_NODE) {
+            const text = node.textContent ?? '';
+            if (text.trim())
+                results.push({ text, style: inheritedStyle });
+            return;
+        }
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            const el = node;
+            const style = el.getAttribute('style') ?? inheritedStyle;
+            for (const child of Array.from(el.childNodes)) {
+                walk(child, style);
+            }
+        }
+    }
+    walk(root, '');
+    return results;
+}
+//# sourceMappingURL=LoadContentPlugin.js.map

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

@@ -0,0 +1,4 @@
+export default function MarkdownExportPlugin({ editorPathKey }: {
+    editorPathKey: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=MarkdownExportPlugin.d.ts.map

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { PiMarkdownLogo } from "react-icons/pi";
+import { FaCheck } from "react-icons/fa";
+import { useLexicalMarkdown } from "../hooks/useLexicalMarkdown";
+export default function MarkdownExportPlugin({ editorPathKey }) {
+    const { toMarkdown } = useLexicalMarkdown();
+    const [copied, setCopied] = useState(false);
+    const handleCopy = async () => {
+        const md = toMarkdown();
+        await navigator.clipboard.writeText(md);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+    };
+    return (_jsx("button", { className: `wr-toolbar-icon-btn path-${editorPathKey}`, onClick: handleCopy, title: "Copy as markdown", children: copied ? _jsx(FaCheck, { style: { color: '#22c55e' } }) : _jsx(PiMarkdownLogo, {}) }));
+}
+//# sourceMappingURL=MarkdownExportPlugin.js.map

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

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

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

@@ -0,0 +1,45 @@
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { PASTE_COMMAND, COMMAND_PRIORITY_HIGH, $getSelection, $isRangeSelection } from "lexical";
+import { useEffect } from "react";
+import { buildNodes, tokenizeInline, useLexicalMarkdown } from "../hooks/useLexicalMarkdown";
+const MD_BLOCK_RE = /^(#{1,6} |\s*[-*] |\s*\d+\. )/m;
+const isBlock = (text) => MD_BLOCK_RE.test(text) ||
+    /\*\*.+\*\*/s.test(text) ||
+    text.includes("\n");
+const isInline = (text) => /\[.+?\]\(.+?\)/.test(text) ||
+    /\*.+?\*/.test(text) ||
+    /\*\*.+?\*\*/.test(text);
+export default function MarkdownPastePlugin() {
+    const [editor] = useLexicalComposerContext();
+    const { fromMarkdown } = useLexicalMarkdown();
+    useEffect(() => {
+        return editor.registerCommand(PASTE_COMMAND, (event) => {
+            const clipboardEvent = event;
+            const data = clipboardEvent.clipboardData;
+            if (!data)
+                return false;
+            const raw = (data.getData("text/plain") || "")
+                .replace(/\r\n/g, "\n")
+                .replace(/\r/g, "\n");
+            if (isBlock(raw)) {
+                clipboardEvent.preventDefault();
+                fromMarkdown(raw);
+                return true;
+            }
+            if (isInline(raw)) {
+                clipboardEvent.preventDefault();
+                editor.update(() => {
+                    const selection = $getSelection();
+                    if (!$isRangeSelection(selection))
+                        return;
+                    const nodes = buildNodes(tokenizeInline(raw), "");
+                    nodes.forEach((n) => selection.insertNodes([n]));
+                });
+                return true;
+            }
+            return false;
+        }, COMMAND_PRIORITY_HIGH);
+    }, [editor, fromMarkdown]);
+    return null;
+}
+//# sourceMappingURL=MarkdownPastePlugin.js.map

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

@@ -0,0 +1,3 @@
+declare const SanitizePastePlugin: () => null;
+export default SanitizePastePlugin;
+//# sourceMappingURL=SanitizePastePlugin.d.ts.map

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

@@ -0,0 +1,40 @@
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { PASTE_COMMAND, $createTextNode, $getSelection, $getRoot, $isRangeSelection, } from "lexical";
+import { useEffect } from "react";
+const SanitizePastePlugin = () => {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        return editor.registerCommand(PASTE_COMMAND, (event) => {
+            const clipboardEvent = event;
+            const data = clipboardEvent.clipboardData;
+            if (!data)
+                return false;
+            clipboardEvent.preventDefault();
+            const raw = data.getData("text/plain") || data.getData("text/html") || "";
+            const clean = raw
+                .replace(/<br\s*\/?>/gi, " ")
+                .replace(/<a[^>]*>(.*?)<\/a>/gi, "$1")
+                .replace(/<\/?[^>]+(>|$)/g, "")
+                .replace(/[\r\n\t]+/g, " ")
+                .replace(/\u00A0/g, " ")
+                .replace(/[^\S\r\n]+/g, " ")
+                .replace(/\s+/g, " ")
+                .trim();
+            editor.update(() => {
+                const selection = $getSelection();
+                if (selection && $isRangeSelection(selection)) {
+                    selection.insertRawText(clean);
+                }
+                else {
+                    const root = $getRoot();
+                    const textNode = $createTextNode(clean);
+                    root.append(textNode);
+                }
+            });
+            return true;
+        }, 1);
+    }, [editor]);
+    return null;
+};
+export default SanitizePastePlugin;
+//# sourceMappingURL=SanitizePastePlugin.js.map

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

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

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

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { PiTextAlignLeft, PiTextAlignCenter, PiTextAlignRight, PiTextAlignJustify } from 'react-icons/pi';
+import { WR_SURFACE_STYLE } from '../common/surface';
+import { requestTextAlign } from '../../../bridge';
+const alignments = {
+    left: _jsx(PiTextAlignLeft, {}),
+    center: _jsx(PiTextAlignCenter, {}),
+    right: _jsx(PiTextAlignRight, {}),
+    justify: _jsx(PiTextAlignJustify, {}),
+};
+function TextAlignPlugin({ editorPathKey = '' }) {
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const [selectedAlignment, setSelectedAlignment] = useState('left');
+    const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
+    const buttonRef = useRef(null);
+    const menuRef = useRef(null);
+    const toggleMenu = (event) => {
+        event.stopPropagation();
+        setIsMenuOpen((prev) => !prev);
+    };
+    // The alignment is the text element's own (its class, at the breakpoint the editor's panel is on), not a mark in each paragraph: the editor writes it, and the text is drawn again
+    const applyAlignment = (alignment) => {
+        requestTextAlign(editorPathKey, alignment);
+        setSelectedAlignment(alignment);
+        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 = (event) => {
+            if (menuRef.current &&
+                !menuRef.current.contains(event.target) &&
+                !buttonRef.current?.contains(event.target)) {
+                setIsMenuOpen(false);
+            }
+        };
+        if (isMenuOpen) {
+            document.addEventListener('click', handleClickOutside);
+            calculateMenuPosition();
+        }
+        return () => document.removeEventListener('click', handleClickOutside);
+    }, [isMenuOpen]);
+    // What the element shows now, wherever it comes from (its class at this width, or an alignment written in the text before)
+    useEffect(() => {
+        const shown = getComputedStyle(buttonRef.current?.closest('[data-wr-editing]') ?? document.body).textAlign;
+        setSelectedAlignment(shown === 'center' || shown === 'right' || shown === 'justify' ? shown : 'left');
+    });
+    return (_jsxs("div", { className: `path-${editorPathKey} toolbarClass`, style: { position: 'relative', display: 'inline-block', textAlign: 'left' }, onClick: (e) => e.stopPropagation(), children: [_jsx("button", { ref: buttonRef, type: "button", onClick: toggleMenu, className: "wr-toolbar-trigger", "aria-expanded": isMenuOpen, "aria-haspopup": "true", title: "Allineamento testo", children: alignments[selectedAlignment] }), 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' }, role: "none", children: Object.keys(alignments).map((alignment) => (_jsxs("button", { onClick: () => applyAlignment(alignment), className: `wr-toolbar-item ${alignment === selectedAlignment ? 'wr-toolbar-item--active' : ''}`, style: { display: 'flex', alignItems: 'center', gap: 8 }, role: "menuitem", children: [alignments[alignment], _jsx("span", { style: { textTransform: 'capitalize' }, children: alignment })] }, alignment))) }) }), document.body)] }));
+}
+export default TextAlignPlugin;
+//# sourceMappingURL=TextAlignPlugin.js.map

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

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

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

@@ -0,0 +1,117 @@
+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 } from 'lexical';
+import { $patchStyleText } from '@lexical/selection';
+import { createPortal } from 'react-dom';
+import { wrGetTheme } from '../../../save';
+import { WR_SURFACE_STYLE } from '../common/surface';
+import { themeTextColors } from '../theme-colors';
+const colorMap = {
+    white: '#ffffff', black: '#000000',
+    gray: '#9CA3AF', stone: '#A8A29E', slate: '#64748B',
+    yellow: '#FACC15', 'highlighter yellow': '#FFFF00',
+    amber: '#F59E0B', orange: '#FB923C', red: '#EF4444',
+    rose: '#F43F5E', brown: '#8B4513', fuchsia: '#D946EF',
+    pink: '#EC4899', purple: '#8B5CF6', indigo: '#6366F1',
+    blue: '#3B82F6', sky: '#38BDF8', cyan: '#06B6D4',
+    teal: '#14B8A6', emerald: '#10B981', green: '#22C55E', lime: '#84CC16',
+};
+const colorNames = Object.keys(colorMap);
+function TextColorPlugin({ editorPathKey = '' }) {
+    const [editor] = useLexicalComposerContext();
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const [selectedColor, setSelectedColor] = useState(colorMap['black']);
+    const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
+    // The theme's colors a text can be (those that read on the page): taken from the theme each time the menu opens, so a color added in the Theme panel is there at once
+    const [themeColors, setThemeColors] = useState([]);
+    const buttonRef = useRef(null);
+    const menuRef = useRef(null);
+    const colorInputRef = useRef(null);
+    const savedSelectionRef = useRef(null);
+    const toggleMenu = (event) => {
+        event.stopPropagation();
+        if (!isMenuOpen)
+            wrGetTheme().then(({ items }) => setThemeColors(themeTextColors(items))).catch(() => setThemeColors([]));
+        setIsMenuOpen((prev) => !prev);
+    };
+    const applyTextColor = useCallback((colorValue) => {
+        editor.update(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+                $patchStyleText(selection, { color: colorValue });
+            }
+        });
+        setSelectedColor(colorValue);
+        setIsMenuOpen(false);
+    }, [editor]);
+    const applyColorFromRef = useCallback((colorValue) => {
+        editor.update(() => {
+            const sel = savedSelectionRef.current;
+            if (sel) {
+                $patchStyleText(sel, { color: colorValue });
+            }
+        });
+        setSelectedColor(colorValue);
+    }, [editor]);
+    const openColorPicker = () => {
+        // Save current selection before menu closes / focus moves
+        editor.getEditorState().read(() => {
+            const sel = $getSelection();
+            if ($isRangeSelection(sel))
+                savedSelectionRef.current = sel.clone();
+        });
+        setIsMenuOpen(false);
+        setTimeout(() => colorInputRef.current?.click(), 0);
+    };
+    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)) {
+                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();
+                const textContent = anchorNode.getTextContent().trim();
+                if (textContent === '' || !styleString)
+                    return;
+                const colorMatch = styleString.match(/(?<!background-)color:\s*([^;]+)/i);
+                if (colorMatch)
+                    setSelectedColor(colorMatch[1].trim());
+            });
+        });
+    }, [editor]);
+    return (_jsxs("div", { className: `path-${editorPathKey} toolbarClass`, style: { position: 'relative', display: 'inline-block', textAlign: 'left' }, onClick: (e) => e.stopPropagation(), children: [_jsx("input", { ref: colorInputRef, type: "color", value: selectedColor.startsWith('#') ? selectedColor : '#000000', onChange: (e) => applyColorFromRef(e.target.value), style: { position: 'absolute', opacity: 0, width: 0, height: 0, pointerEvents: 'none' }, tabIndex: -1 }), _jsxs("button", { ref: buttonRef, type: "button", onClick: toggleMenu, className: "wr-toolbar-trigger", "aria-expanded": isMenuOpen, "aria-haspopup": "true", children: [_jsx("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: _jsx("span", { className: "wr-color-dot", style: { backgroundColor: selectedColor } }) }), _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`, role: "menu", "aria-orientation": "vertical", style: { ...WR_SURFACE_STYLE, top: menuPosition.top, left: menuPosition.left, width: 192 }, children: _jsxs("div", { style: { padding: '4px 0' }, role: "none", children: [_jsx("button", { onClick: openColorPicker, onPointerDown: (e) => e.preventDefault(), className: `toolbarClass path-${editorPathKey} wr-toolbar-item`, role: "menuitem", children: _jsxs("span", { className: "wr-menu-row", children: [_jsx("span", { className: "wr-color-dot", style: { backgroundColor: selectedColor } }), _jsx("span", { children: selectedColor })] }) }), themeColors.length > 0 && _jsx("div", { className: "wr-menu-heading", role: "presentation", children: "Theme" }), themeColors.map((color) => (_jsx("button", { onClick: () => applyTextColor(color.variable), className: `wr-toolbar-item ${color.variable === selectedColor ? 'wr-toolbar-item--active' : ''}`, role: "menuitem", "data-theme-color": color.name, children: _jsxs("span", { className: "wr-menu-row", children: [_jsx("span", { className: "wr-color-dot", style: { backgroundColor: color.variable } }), _jsx("span", { children: color.name })] }) }, color.variable))), themeColors.length > 0 && _jsx("div", { className: "wr-menu-heading", role: "presentation", children: "Other colors" }), colorNames.map((colorName) => (_jsx("button", { onClick: () => applyTextColor(colorMap[colorName]), className: `wr-toolbar-item ${colorMap[colorName] === selectedColor ? 'wr-toolbar-item--active' : ''}`, role: "menuitem", children: _jsxs("span", { className: "wr-menu-row", children: [_jsx("span", { className: "wr-color-dot", style: { backgroundColor: colorMap[colorName] } }), _jsx("span", { children: colorName })] }) }, colorName)))] }) }), document.body)] }));
+}
+export default TextColorPlugin;
+//# sourceMappingURL=TextColorPlugin.js.map

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

@@ -0,0 +1,10 @@
+interface Props {
+    editorRef: React.RefObject<HTMLDivElement | null>;
+    editorPathKey: string;
+    availablePages?: string[];
+    /** The person pressed or focused something that is not this text nor its toolbar (or left the page for the editor around it). */
+    onOutside: () => void;
+}
+export default function ToolbarPlugin({ editorRef, editorPathKey, availablePages, onOutside }: Props): import("react").ReactPortal | null;
+export {};
+//# sourceMappingURL=ToolbarPlugin.d.ts.map

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

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useEffect } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { mergeRegister } from '@lexical/utils';
+import { $getSelection, $isRangeSelection, FORMAT_TEXT_COMMAND, SELECTION_CHANGE_COMMAND } from 'lexical';
+import { PiTextItalic, PiTextStrikethrough, PiTextUnderline, } from 'react-icons/pi';
+import { createPortal } from 'react-dom';
+import { useToolbar } from '../ToolbarContext';
+import FontPlugin from './FontPlugin';
+import FontWeightPlugin from './FontWeightPlugin';
+import TextColorPlugin from './TextColorPlugin';
+import LineSpacingPlugin from './LineSpacingPlugin';
+import FloatingLinkEditorPlugin from './LinkPlugin';
+import ListToolbarPlugin from './ListToolbarPlugin';
+import HTMLTagPlugin from './HTMLTagPlugin';
+import FontSizePlugin from './FontSizePlugin';
+import { WR_SURFACE_STYLE } from '../common/surface';
+const LowPriority = 1;
+function Divider() {
+    return _jsx("div", { className: "wr-divider" });
+}
+export default function ToolbarPlugin({ editorRef, editorPathKey, availablePages = [], onOutside }) {
+    const [editor] = useLexicalComposerContext();
+    const { toolbarVisible } = useToolbar();
+    const [isBold, setIsBold] = useState(false);
+    const [isItalic, setIsItalic] = useState(false);
+    const [isUnderline, setIsUnderline] = useState(false);
+    const [isStrikethrough, setIsStrikethrough] = useState(false);
+    const [visible, setVisible] = useState(false);
+    useEffect(() => {
+        function handleDocumentInteraction(event) {
+            const target = event.target;
+            const editorRoot = editorRef.current;
+            const toolbarEl = document.querySelector(`[data-editor-path="${editorPathKey}"]`);
+            const clickedInsideEditor = editorRoot?.contains(target);
+            const clickedInsideToolbar = toolbarEl?.contains(target);
+            const clickedInOwnToolbarClass = !!target.closest('.toolbarClass') && !!target.closest(`.path-${editorPathKey}`);
+            const clickedInsideColorPicker = !!target.closest('.color-picker');
+            const inside = !!(clickedInsideEditor || clickedInsideToolbar || clickedInOwnToolbarClass || clickedInsideColorPicker);
+            setVisible(inside);
+            // The same line that hides the toolbar ends the editing: what is outside the text and its toolbar is somewhere else
+            if (!inside)
+                onOutside();
+        }
+        document.addEventListener('pointerdown', handleDocumentInteraction, true);
+        document.addEventListener('focusin', handleDocumentInteraction, true);
+        // The panels of the editor are outside this page: pressing one is leaving the text too
+        window.addEventListener('blur', onOutside);
+        return () => {
+            window.removeEventListener('blur', onOutside);
+            document.removeEventListener('pointerdown', handleDocumentInteraction, true);
+            document.removeEventListener('focusin', handleDocumentInteraction, true);
+        };
+    }, [editorRef, editorPathKey, onOutside]);
+    const $updateToolbar = useCallback(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+            setIsBold(selection.hasFormat('bold'));
+            setIsItalic(selection.hasFormat('italic'));
+            setIsUnderline(selection.hasFormat('underline'));
+            setIsStrikethrough(selection.hasFormat('strikethrough'));
+        }
+    }, []);
+    useEffect(() => {
+        return mergeRegister(editor.registerUpdateListener(({ editorState }) => {
+            editorState.read(() => { $updateToolbar(); });
+        }), editor.registerCommand(SELECTION_CHANGE_COMMAND, () => { $updateToolbar(); return false; }, LowPriority));
+    }, [editor, $updateToolbar]);
+    if (!visible)
+        return null;
+    return createPortal(_jsx("div", { className: "wr-floating-bar-wrap", "data-editor-path": editorPathKey, children: toolbarVisible && (_jsxs("div", { className: "wr-floating-bar", style: WR_SURFACE_STYLE, onPointerDown: (e) => e.preventDefault(), children: [_jsx(Divider, {}), _jsx(FontWeightPlugin, { editorPathKey: editorPathKey }), _jsx("button", { onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic'), className: `wr-toolbar-icon-btn ${isItalic ? 'wr-toolbar-icon-btn--active' : ''} path-${editorPathKey}`, title: "Italic", children: _jsx(PiTextItalic, {}) }), _jsx("button", { onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline'), className: `wr-toolbar-icon-btn ${isUnderline ? 'wr-toolbar-icon-btn--active' : ''} path-${editorPathKey}`, title: "Underline", children: _jsx(PiTextUnderline, {}) }), _jsx("button", { onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough'), className: `wr-toolbar-icon-btn ${isStrikethrough ? 'wr-toolbar-icon-btn--active' : ''} path-${editorPathKey}`, title: "Strikethrough", children: _jsx(PiTextStrikethrough, {}) }), _jsx(Divider, {}), _jsx(FloatingLinkEditorPlugin, { availablePages: availablePages, editorPathKey: editorPathKey }), _jsx(Divider, {}), _jsx(ListToolbarPlugin, { editorPathKey: editorPathKey }), _jsx(Divider, {}), _jsx(FontPlugin, { editorPathKey: editorPathKey }), _jsx(FontSizePlugin, { editorPathKey: editorPathKey }), _jsx(HTMLTagPlugin, { editorPathKey: editorPathKey }), _jsx(TextColorPlugin, { editorPathKey: editorPathKey }), _jsx(Divider, {}), _jsx(LineSpacingPlugin, { editorPathKey: editorPathKey })] })) }), document.body);
+}
+//# sourceMappingURL=ToolbarPlugin.js.map

package/dist/components/text-editor/theme-colors.d.ts

@@ -0,0 +1,11 @@
+import type { WrThemeItem } from '../../messages';
+export interface ThemeTextColor {
+    /** `accent-text`. */
+    name: string;
+    /** What a text takes: `var(--wr-color-accent-text)`. */
+    variable: string;
+    /** How it looks now (the light value), to draw it. */
+    value: string;
+}
+export declare function themeTextColors(items: readonly WrThemeItem[]): ThemeTextColor[];
+//# sourceMappingURL=theme-colors.d.ts.map

package/dist/components/text-editor/theme-colors.js

@@ -0,0 +1,28 @@
+import { contrastRatio } from '../../contrast.js';
+// The colors of the site's theme as a text can use them. A text takes `var(--wr-color-x)`, not its value, so it follows the theme (and its dark theme, when it has one). Which colors a text
+// can be: the ones that can be READ on the page, by the WCAG rule (4.5:1 against the page's background, in each theme the site has): nothing marks them in the theme, the arithmetic does.
+const PREFIX = '--wr-color-';
+const BACKGROUND = `${PREFIX}background`;
+const READABLE = 4.5;
+function parseHex(value) {
+    const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(value.trim());
+    if (!m)
+        return null;
+    const hex = m[1].length === 3 ? m[1].split('').map(c => c + c).join('') : m[1];
+    return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16) };
+}
+/** Whether a color reads on a background: true or false, and true when it cannot be known (a color that is not a hex: it is not judged by guess). */
+const reads = (color, background) => {
+    const a = parseHex(color);
+    const b = background ? parseHex(background) : null;
+    return !a || !b || contrastRatio(a, b) >= READABLE;
+};
+export function themeTextColors(items) {
+    const properties = items.filter((i) => i.kind === 'property' && i.key.startsWith(PREFIX) && i.key.length > PREFIX.length);
+    const background = properties.find(p => p.key === BACKGROUND);
+    return properties
+        .filter(p => p.key !== BACKGROUND)
+        .filter(p => reads(p.value, background?.value) && (p.dark === undefined || reads(p.dark, background?.dark ?? background?.value)))
+        .map(p => ({ name: p.key.slice(PREFIX.length), variable: `var(${p.key})`, value: p.value }));
+}
+//# sourceMappingURL=theme-colors.js.map

package/dist/context/WrAppContext.d.ts

@@ -0,0 +1,35 @@
+import { type ComponentType, type ReactNode } from 'react';
+import { wrBuildRegistry, wrBuildLazyRegistry, wrBuildPageConfigMap, type WrRoutesFile, type WrLangConfig, type WrSharedFile, type WrSharedScope } from '@webround/core/routing';
+import type { LangCode } from '@webround/core/lang-codes';
+import type { WrSeoSite } from '@webround/core/seo';
+import { WrPageConfig } from '@webround/core/types';
+export declare function useWrApp(): {
+    lang: "id" | "af" | "am" | "sq" | "ar" | "hy" | "az" | "eu" | "be" | "bn" | "bs" | "bg" | "ca" | "ceb" | "ny" | "zh" | "co" | "hr" | "cs" | "da" | "nl" | "sjn" | "en" | "eo" | "et" | "tl" | "fo" | "fj" | "fi" | "fr" | "fy" | "gl" | "ka" | "de" | "el" | "gu" | "haw" | "ht" | "ha" | "he" | "hi" | "hmn" | "hu" | "is" | "ig" | "iu" | "iku" | "ga" | "it" | "ja" | "jw" | "kk" | "kn" | "km" | "ko" | "kok" | "ky" | "ku" | "ckb" | "sdh" | "lo" | "lv" | "lt" | "lb" | "mk" | "mg" | "ms" | "ml" | "mt" | "mr" | "mn" | "mi" | "my" | "ne" | "no" | "pap" | "fa" | "pl" | "pt" | "pa" | "ps" | "otq" | "ro" | "ru" | "sm" | "gd" | "sr" | "sr-LA" | "sd" | "si" | "sk" | "sl" | "sn" | "st" | "so" | "es" | "su" | "sw" | "sv" | "ty" | "ta" | "tg" | "te" | "th" | "bo" | "to" | "tr" | "uk" | "ur" | "uz" | "vi" | "cy" | "xh" | "yi" | "yo" | "yua" | "yue" | "zu" | "default";
+    setLang: (lang: LangCode) => void;
+};
+export declare const WrPagesConfigContext: import("react").Context<Record<string, WrPageConfig>>;
+export declare const useWrSharedScopes: () => readonly WrSharedScope[];
+type EagerPageModules = Parameters<typeof wrBuildRegistry>[0];
+type LazyPageModules = Parameters<typeof wrBuildLazyRegistry>[0];
+type PageConfigModules = Parameters<typeof wrBuildPageConfigMap>[0];
+export declare function WrAppProvider({ routesFile, eagerModules, lazyModules, configModules, langs, initialLang, lazyFallback, Header, Footer, seo, shared, children, }: {
+    routesFile: WrRoutesFile;
+    eagerModules: EagerPageModules;
+    lazyModules: LazyPageModules;
+    configModules: PageConfigModules;
+    /** Lingue del sito. Se omesso, niente routing multilingua, lang resta 'default'. */
+    langs?: WrLangConfig;
+    /** Fallback usato solo quando `langs` non è passato. */
+    initialLang?: LangCode;
+    lazyFallback?: ComponentType;
+    /** Header e footer del sito: su ogni pagina, salvo `header: false` / `footer: false` nella sua voce di routes.json. */
+    Header?: ComponentType;
+    Footer?: ComponentType;
+    /** What is the same for the whole site, for search engines (`config/seo.json`). */
+    seo?: WrSeoSite;
+    /** The shared components of the site (`config/shared.json`: name → file): the editor writes in the file of the one an element is in. */
+    shared?: WrSharedFile;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=WrAppContext.d.ts.map