@webround/editor 0.0.0-stage → 0.3.0

package/dist/components/text-editor/hooks/useLexicalMarkdown.js

@@ -0,0 +1,284 @@
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $getRoot, $createParagraphNode, $createTextNode, $isParagraphNode, $getSelection, $isRangeSelection, } from "lexical";
+import { $createHeadingNode, $isHeadingNode } from "@lexical/rich-text";
+import { $createLinkNode, $isLinkNode } from "@lexical/link";
+import { $createListNode, $createListItemNode, $isListNode, $isListItemNode, } from "@lexical/list";
+import { $createHorizontalRuleNode, $isHorizontalRuleNode } from "../nodes/HorizontalRuleNode";
+import { $createCodeBlockNode, $isCodeBlockNode } from "../nodes/CodeBlockNode";
+// Lexical format bitmask constants
+const IS_BOLD = 1;
+const IS_ITALIC = 2;
+const IS_STRIKETHROUGH = 4;
+const IS_UNDERLINE = 8;
+const IS_CODE = 16;
+// ─── Style helpers ────────────────────────────────────────────────────────────
+function buildStyleVar(id) {
+    return [
+        `font-family: var(--text-style-${id}-font-family)`,
+        `font-size: var(--text-style-${id}-font-size)`,
+        `color: var(--text-style-${id}-text-color)`,
+    ].join("; ") + ";";
+}
+// ─── Inline regex ─────────────────────────────────────────────────────────────
+// Order matters: ** before *, <u> before nothing
+const INLINE_RE = /\*\*(.+?)\*\*|\[(.+?)\]\((.+?)\)|\*(.+?)\*|`(.+?)`|~~(.+?)~~|<u>(.+?)<\/u>/g;
+export function tokenizeInline(raw) {
+    const tokens = [];
+    let last = 0;
+    const re = /\*\*(.+?)\*\*|\[(.+?)\]\((.+?)\)|\*(.+?)\*|`(.+?)`|~~(.+?)~~|<u>(.+?)<\/u>/g;
+    let m;
+    while ((m = re.exec(raw)) !== null) {
+        if (m.index > last) {
+            tokens.push({ kind: "text", text: raw.slice(last, m.index) });
+        }
+        if (m[1] !== undefined) {
+            const inner = tokenizeInline(m[1]);
+            inner.forEach(t => {
+                if (t.kind === "text")
+                    tokens.push({ kind: "bold", text: t.text });
+                else
+                    tokens.push(t);
+            });
+        }
+        else if (m[2] !== undefined) {
+            tokens.push({ kind: "link", text: m[2], url: m[3] });
+        }
+        else if (m[4] !== undefined) {
+            const inner = tokenizeInline(m[4]);
+            inner.forEach(t => {
+                if (t.kind === "text")
+                    tokens.push({ kind: "italic", text: t.text });
+                else
+                    tokens.push(t);
+            });
+        }
+        else if (m[5] !== undefined) {
+            tokens.push({ kind: "code", text: m[5] });
+        }
+        else if (m[6] !== undefined) {
+            tokens.push({ kind: "strike", text: m[6] });
+        }
+        else if (m[7] !== undefined) {
+            tokens.push({ kind: "under", text: m[7] });
+        }
+        last = re.lastIndex;
+    }
+    if (last < raw.length) {
+        tokens.push({ kind: "text", text: raw.slice(last) });
+    }
+    return tokens;
+}
+// ─── Lexical node builder from tokens ─────────────────────────────────────────
+export function buildNodes(tokens, style) {
+    return tokens.map((tok) => {
+        if (tok.kind === "link") {
+            const linkNode = $createLinkNode(tok.url);
+            const t = $createTextNode(tok.text);
+            t.setStyle(style);
+            linkNode.append(t);
+            return linkNode; // ElementNode acceptable in append()
+        }
+        const t = $createTextNode(tok.text);
+        t.setStyle(style);
+        switch (tok.kind) {
+            case "bold":
+                t.setStyle(t.getStyle() + "; font-weight: 700");
+                break;
+            case "italic":
+                t.setFormat(IS_ITALIC);
+                break;
+            case "code":
+                t.setFormat(IS_CODE);
+                break;
+            case "strike":
+                t.setFormat(IS_STRIKETHROUGH);
+                break;
+            case "under":
+                t.setFormat(IS_UNDERLINE);
+                break;
+        }
+        return t;
+    });
+}
+// ─── Lexical → Markdown ───────────────────────────────────────────────────────
+function nodeToMd(node) {
+    const type = node.getType();
+    if ($isCodeBlockNode(node)) {
+        return `\`\`\`${node.__language}\n${node.__code}\n\`\`\``;
+    }
+    if ($isHorizontalRuleNode(node))
+        return "---";
+    if (type === "text") {
+        let text = node.getTextContent();
+        const fmt = node.getFormat();
+        const style = node.getStyle() ?? "";
+        // bold → font-weight nello style inline, NON nel format flag
+        const weightMatch = style.match(/font-weight:\s*(\d+)/i);
+        const isBold = weightMatch ? parseInt(weightMatch[1]) >= 700 : false;
+        if (fmt & IS_CODE)
+            text = `\`${text}\``;
+        if (fmt & IS_STRIKETHROUGH)
+            text = `~~${text}~~`;
+        if (fmt & IS_UNDERLINE)
+            text = `<u>${text}</u>`;
+        if (fmt & IS_ITALIC)
+            text = `*${text}*`;
+        if (isBold)
+            text = `**${text}**`;
+        return text;
+    }
+    if ($isLinkNode(node)) {
+        const url = node.getURL();
+        const children = node.getChildren().map(nodeToMd).join("");
+        return `[${children}](${url})`;
+    }
+    if ($isHeadingNode(node)) {
+        const tag = node.getTag();
+        const hashes = "#".repeat(parseInt(tag[1]));
+        const children = node.getChildren().map(nodeToMd).join("");
+        return `${hashes} ${children}`;
+    }
+    if ($isParagraphNode(node)) {
+        return node.getChildren().map(nodeToMd).join("");
+    }
+    if ($isListNode(node)) {
+        const listType = node.getListType();
+        return node.getChildren().map((item, idx) => {
+            const prefix = listType === "number" ? `${idx + 1}. ` : "- ";
+            const content = $isListItemNode(item)
+                ? item.getChildren().map(nodeToMd).join("")
+                : nodeToMd(item);
+            return prefix + content;
+        }).join("\n");
+    }
+    // fallback: plain text
+    return node.getTextContent?.() ?? "";
+}
+// ─── Hook ─────────────────────────────────────────────────────────────────────
+export function useLexicalMarkdown() {
+    const [editor] = useLexicalComposerContext();
+    /** Returns the CSS-var style string for a given HTML tag (h1-h6 or p/default). */
+    const styleForTag = (tag) => {
+        return "";
+    };
+    const defaultStyle = () => styleForTag("p");
+    // ── toMarkdown ─────────────────────────────────────────────────────────
+    const toMarkdown = () => {
+        let md = "";
+        editor.getEditorState().read(() => {
+            const root = $getRoot();
+            md = root.getChildren().map(nodeToMd).join("\n\n");
+        });
+        return md;
+    };
+    // ── fromMarkdown ───────────────────────────────────────────────────────
+    const fromMarkdown = (md) => {
+        editor.update(() => {
+            const nodes = [];
+            let currentList = null;
+            let currentListType = null;
+            const flushList = () => {
+                if (currentList) {
+                    nodes.push(currentList);
+                    currentList = null;
+                    currentListType = null;
+                }
+            };
+            const lines = md.replace(/\r\n/g, "\n").replace(/\r/g, "\n").split("\n");
+            let i = 0;
+            while (i < lines.length) {
+                const line = lines[i];
+                if (line.trim() === "") {
+                    flushList();
+                    i++;
+                    continue;
+                }
+                if (line.trim() === "---") {
+                    flushList();
+                    nodes.push($createHorizontalRuleNode());
+                    i++;
+                    continue;
+                }
+                const fenceMatch = line.match(/^```(\w*)$/);
+                if (fenceMatch) {
+                    flushList();
+                    const language = fenceMatch[1] ?? "";
+                    const codeLines = [];
+                    i++;
+                    while (i < lines.length && lines[i] !== "```") {
+                        codeLines.push(lines[i]);
+                        i++;
+                    }
+                    i++;
+                    nodes.push($createCodeBlockNode(codeLines.join("\n"), language));
+                    continue;
+                }
+                const hMatch = line.match(/^(#{1,6}) (.+)$/);
+                if (hMatch) {
+                    flushList();
+                    const tag = `h${hMatch[1].length}`;
+                    const style = styleForTag(tag);
+                    const heading = $createHeadingNode(tag);
+                    heading.setDirection("ltr");
+                    buildNodes(tokenizeInline(hMatch[2]), style).forEach((n) => heading.append(n));
+                    nodes.push(heading);
+                    i++;
+                    continue;
+                }
+                const ulMatch = line.match(/^[-*] (.+)$/);
+                if (ulMatch) {
+                    if (currentListType !== "bullet") {
+                        flushList();
+                        currentList = $createListNode("bullet");
+                        currentListType = "bullet";
+                    }
+                    const item = $createListItemNode();
+                    buildNodes(tokenizeInline(ulMatch[1]), defaultStyle()).forEach((n) => item.append(n));
+                    currentList.append(item);
+                    i++;
+                    continue;
+                }
+                const olMatch = line.match(/^\d+\. (.+)$/);
+                if (olMatch) {
+                    if (currentListType !== "number") {
+                        flushList();
+                        currentList = $createListNode("number");
+                        currentListType = "number";
+                    }
+                    const item = $createListItemNode();
+                    buildNodes(tokenizeInline(olMatch[1]), defaultStyle()).forEach((n) => item.append(n));
+                    currentList.append(item);
+                    i++;
+                    continue;
+                }
+                flushList();
+                const para = $createParagraphNode();
+                para.setDirection("ltr");
+                buildNodes(tokenizeInline(line), defaultStyle()).forEach((n) => para.append(n));
+                nodes.push(para);
+                i++;
+            }
+            flushList();
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+                // prima cancella la selezione se c'è testo selezionato
+                if (!selection.isCollapsed()) {
+                    selection.deleteCharacter(false);
+                }
+                const anchorNode = selection.anchor.getNode();
+                const topLevel = anchorNode.getTopLevelElementOrThrow();
+                nodes.reverse().forEach(n => topLevel.insertAfter(n));
+                // rimuovi il nodo corrente se è vuoto
+                if (topLevel.getTextContent().trim() === "") {
+                    topLevel.remove();
+                }
+            }
+            else {
+                const root = $getRoot();
+                nodes.forEach(n => root.append(n));
+            }
+        });
+    };
+    return { toMarkdown, fromMarkdown };
+}
+//# sourceMappingURL=useLexicalMarkdown.js.map

package/dist/components/text-editor/nodes/CodeBlockNode.d.ts

@@ -0,0 +1,23 @@
+import { DecoratorNode, LexicalNode, SerializedLexicalNode, Spread } from "lexical";
+import { JSX } from "react";
+type SerializedCodeBlockNode = Spread<{
+    code: string;
+    language: string;
+}, SerializedLexicalNode>;
+export declare class CodeBlockNode extends DecoratorNode<JSX.Element> {
+    __code: string;
+    __language: string;
+    static getType(): string;
+    static clone(node: CodeBlockNode): CodeBlockNode;
+    constructor(code: string, language?: string, key?: string);
+    createDOM(): HTMLElement;
+    updateDOM(): false;
+    isInline(): false;
+    decorate(): JSX.Element;
+    static importJSON(node: SerializedCodeBlockNode): CodeBlockNode;
+    exportJSON(): SerializedCodeBlockNode;
+}
+export declare function $createCodeBlockNode(code: string, language?: string): CodeBlockNode;
+export declare function $isCodeBlockNode(node: LexicalNode | null | undefined): node is CodeBlockNode;
+export {};
+//# sourceMappingURL=CodeBlockNode.d.ts.map

package/dist/components/text-editor/nodes/CodeBlockNode.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DecoratorNode, $getNodeByKey } from "lexical";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useEffect, useRef, useState } from "react";
+import hljs from "highlight.js";
+import MonacoEditor from "@monaco-editor/react";
+import { useCodeTheme } from "../CodeThemeContext";
+const setHljsTheme = (dark) => {
+    let link = document.getElementById("hljs-theme");
+    if (!link) {
+        link = document.createElement("link");
+        link.id = "hljs-theme";
+        link.rel = "stylesheet";
+        document.head.appendChild(link);
+    }
+    link.href = dark
+        ? new URL("highlight.js/styles/github-dark.css", import.meta.url).href
+        : new URL("highlight.js/styles/github.css", import.meta.url).href;
+};
+const LANGUAGE_MAP = {
+    ts: "typescript", tsx: "typescript",
+    js: "javascript", jsx: "javascript",
+    py: "python", rb: "ruby",
+    sh: "shell", bash: "shell",
+    yml: "yaml", md: "markdown",
+};
+const resolveLanguage = (lang) => LANGUAGE_MAP[lang.toLowerCase()] ?? lang.toLowerCase();
+function CodeBlockComponent({ code, language, nodeKey }) {
+    const [editor] = useLexicalComposerContext();
+    const { theme, toggle } = useCodeTheme();
+    const isDark = theme === "vs-dark";
+    const [copied, setCopied] = useState(false);
+    const [isEditing, setIsEditing] = useState(false);
+    const [localCode, setLocalCode] = useState(code);
+    const [height, setHeight] = useState(100);
+    const codeRef = useRef(null);
+    const containerRef = useRef(null);
+    useEffect(() => {
+        setHljsTheme(isDark);
+    }, [isDark]);
+    useEffect(() => {
+        if (isEditing)
+            return;
+        if (!codeRef.current)
+            return;
+        codeRef.current.textContent = localCode;
+        hljs.highlightElement(codeRef.current);
+    }, [localCode, isDark, isEditing]);
+    const onChange = (value) => {
+        const next = value ?? "";
+        setLocalCode(next);
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if ($isCodeBlockNode(node)) {
+                node.getWritable().__code = next;
+            }
+        });
+    };
+    const onMount = (monacoEditor) => {
+        const updateHeight = () => setHeight(Math.max(100, monacoEditor.getContentHeight()));
+        monacoEditor.onDidContentSizeChange(updateHeight);
+        updateHeight();
+    };
+    const handleCopy = async () => {
+        await navigator.clipboard.writeText(localCode);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+    };
+    useEffect(() => {
+        if (!isEditing)
+            return;
+        const handleClickOutside = (e) => {
+            if (!containerRef.current?.contains(e.target)) {
+                setIsEditing(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [isEditing]);
+    return (_jsxs("div", { ref: containerRef, className: `relative my-2 rounded-lg overflow-hidden max-w-full text-sm ${isDark ? "bg-gray-900" : "bg-gray-100"}`, onKeyDown: e => e.stopPropagation(), onKeyUp: e => e.stopPropagation(), onCopy: e => e.stopPropagation(), onCut: e => e.stopPropagation(), onPaste: e => e.stopPropagation(), children: [_jsxs("div", { className: `flex items-center justify-between text-xs ${isDark ? "bg-gray-800 text-gray-400" : "bg-gray-200 text-gray-600"}`, children: [_jsx("span", { className: "p-2", children: language || "plaintext" }), _jsxs("div", { className: "flex items-center gap-3 p-2", children: [_jsx("button", { onClick: toggle, children: isDark ? "☀️" : "🌙" }), _jsx("button", { onClick: handleCopy, className: `transition-colors ${isDark ? "hover:text-white" : "hover:text-black"}`, children: copied ? "✓" : "Copy" })] })] }), isEditing ? (_jsx(MonacoEditor, { width: "100%", height: height, language: resolveLanguage(language), value: localCode, onChange: onChange, onMount: onMount, theme: theme, options: {
+                    minimap: { enabled: false },
+                    scrollBeyondLastLine: false,
+                    fontSize: 14,
+                    lineHeight: 20,
+                    lineNumbers: "off",
+                    folding: false,
+                    padding: { top: 28, bottom: 28 },
+                    automaticLayout: true,
+                    scrollbar: { vertical: "hidden", handleMouseWheel: false },
+                    glyphMargin: false,
+                    lineDecorationsWidth: 16,
+                    lineNumbersMinChars: 0,
+                } })) : (_jsx("pre", { className: `m-0 pl-0 pt-4 pb-4 pr-4 overflow-x-auto cursor-text font-mono text-sm leading-5 max-w-full ${isDark ? "bg-gray-900" : "bg-gray-100"}`, onClick: () => setIsEditing(true), children: _jsx("code", { ref: codeRef, className: language ? `language-${language}` : "" }) }))] }));
+}
+export class CodeBlockNode extends DecoratorNode {
+    __code;
+    __language;
+    static getType() { return "code-block"; }
+    static clone(node) {
+        return new CodeBlockNode(node.__code, node.__language, node.__key);
+    }
+    constructor(code, language = "", key) {
+        super(key);
+        this.__code = code;
+        this.__language = language;
+    }
+    createDOM() {
+        const div = document.createElement("div");
+        div.contentEditable = "false";
+        div.style.width = "0";
+        div.style.minWidth = "100%";
+        return div;
+    }
+    updateDOM() { return false; }
+    isInline() { return false; }
+    decorate() {
+        return (_jsx(CodeBlockComponent, { code: this.__code, language: this.__language, nodeKey: this.__key }));
+    }
+    static importJSON(node) {
+        return $createCodeBlockNode(node.code, node.language);
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            type: "code-block",
+            version: 1,
+            code: this.__code,
+            language: this.__language,
+        };
+    }
+}
+export function $createCodeBlockNode(code, language = "") {
+    return new CodeBlockNode(code, language);
+}
+export function $isCodeBlockNode(node) {
+    return node?.getType() === "code-block";
+}
+//# sourceMappingURL=CodeBlockNode.js.map

package/dist/components/text-editor/nodes/HorizontalRuleNode.d.ts

@@ -0,0 +1,13 @@
+import { DecoratorNode, LexicalNode } from "lexical";
+import { JSX } from "react";
+export declare class HorizontalRuleNode extends DecoratorNode<JSX.Element> {
+    static getType(): string;
+    static clone(node: HorizontalRuleNode): HorizontalRuleNode;
+    createDOM(): HTMLElement;
+    updateDOM(): false;
+    decorate(): JSX.Element;
+    isInline(): false;
+}
+export declare function $createHorizontalRuleNode(): HorizontalRuleNode;
+export declare function $isHorizontalRuleNode(node: LexicalNode | null | undefined): node is HorizontalRuleNode;
+//# sourceMappingURL=HorizontalRuleNode.d.ts.map

package/dist/components/text-editor/nodes/HorizontalRuleNode.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// nodes/HorizontalRuleNode.tsx
+import { DecoratorNode } from "lexical";
+export class HorizontalRuleNode extends DecoratorNode {
+    static getType() { return "horizontal-rule"; }
+    static clone(node) {
+        return new HorizontalRuleNode(node.__key);
+    }
+    createDOM() {
+        return document.createElement("hr");
+    }
+    updateDOM() { return false; }
+    decorate() { return _jsx("hr", {}); }
+    isInline() { return false; }
+}
+export function $createHorizontalRuleNode() {
+    return new HorizontalRuleNode();
+}
+export function $isHorizontalRuleNode(node) {
+    return node?.getType() === "horizontal-rule";
+}
+//# sourceMappingURL=HorizontalRuleNode.js.map

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

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

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

@@ -0,0 +1,38 @@
+import { useEffect } from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $getSelection, $isRangeSelection, $isParagraphNode, $createParagraphNode, $createRangeSelection, $setSelection, KEY_ENTER_COMMAND, COMMAND_PRIORITY_LOW, } from "lexical";
+import { $createCodeBlockNode } from "../nodes/CodeBlockNode";
+export default function CodeBlockPlugin() {
+    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;
+            const text = anchor.getTextContent().trim();
+            const match = text.match(/^```(\w*)$/);
+            if (!match)
+                return false;
+            event?.preventDefault();
+            const language = match[1] || "";
+            const codeBlock = $createCodeBlockNode("", language);
+            const para = $createParagraphNode();
+            parent.replace(codeBlock);
+            codeBlock.insertAfter(para);
+            const sel = $createRangeSelection();
+            const key = para.getKey();
+            sel.anchor.set(key, 0, "element");
+            sel.focus.set(key, 0, "element");
+            $setSelection(sel);
+            return true;
+        }, COMMAND_PRIORITY_LOW);
+    }, [editor]);
+    return null;
+}
+//# sourceMappingURL=CodeBlockPlugin.js.map

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

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

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

@@ -0,0 +1,114 @@
+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 { PiTextT } from 'react-icons/pi';
+import { createPortal } from 'react-dom';
+import { wrGetTheme } from '../../../save';
+import { WR_SURFACE_STYLE } from '../common/surface';
+const DEFAULT_FONTS = [
+    'Manrope'
+];
+function themeFontNames(items) {
+    return items
+        .filter((i) => i.kind === 'google-font' || i.kind === 'custom-font')
+        .map(i => i.key);
+}
+function FontPlugin({ editorPathKey = '', fonts = DEFAULT_FONTS, textStyles = [], }) {
+    const [editor] = useLexicalComposerContext();
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const [selectedFont, setSelectedFont] = useState(fonts[0]);
+    const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
+    const [themeFonts, setThemeFonts] = useState([]);
+    const buttonRef = useRef(null);
+    const menuRef = useRef(null);
+    const refreshThemeFonts = useCallback(() => {
+        wrGetTheme()
+            .then(({ items }) => setThemeFonts(themeFontNames(items)))
+            .catch(() => setThemeFonts([]));
+    }, []);
+    useEffect(() => { refreshThemeFonts(); }, [refreshThemeFonts]);
+    const allFonts = [...fonts, ...themeFonts.filter(f => !fonts.includes(f))];
+    const toggleMenu = (e) => {
+        e.stopPropagation();
+        setIsMenuOpen(prev => !prev);
+    };
+    const applyFont = (font) => {
+        editor.update(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+                $patchStyleText(selection, { 'font-family': font });
+            }
+        });
+        setSelectedFont(font);
+        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;
+                let fontFamily = selectedFont;
+                const styleString = anchorNode.getStyle?.();
+                if (styleString && typeof styleString === 'string') {
+                    const match = styleString.match(/font-family:\s*['"]?([^;'"]+)['"]?/i);
+                    if (match)
+                        fontFamily = match[1].trim();
+                }
+                if (fontFamily.startsWith('var(')) {
+                    const match = fontFamily.match(/--text-style-(\d+)-font-family/);
+                    if (match) {
+                        const style = textStyles[parseInt(match[1], 10)];
+                        if (style?.fontFamily)
+                            fontFamily = style.fontFamily;
+                    }
+                }
+                setSelectedFont(fontFamily);
+            });
+        });
+    }, [editor, textStyles]);
+    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: toggleMenu, "aria-expanded": isMenuOpen, className: "wr-toolbar-trigger", children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsx(PiTextT, { style: { fontSize: 18 } }), _jsx("span", { style: { fontFamily: selectedFont }, children: selectedFont })] }), _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: 288 }, children: _jsx("div", { style: { padding: '4px 0' }, children: allFonts.map(font => (_jsx("div", { className: "wr-toolbar-item", style: { display: 'flex', alignItems: 'center', padding: 0 }, children: _jsx("button", { onClick: () => applyFont(font), style: {
+                                fontFamily: font,
+                                display: 'block',
+                                padding: '8px 16px',
+                                fontSize: 14,
+                                width: '100%',
+                                textAlign: 'left',
+                                background: 'transparent',
+                                border: 'none',
+                                cursor: 'pointer',
+                            }, children: font }) }, font))) }) }), document.body)] }));
+}
+export default FontPlugin;
+//# sourceMappingURL=FontPlugin.js.map

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

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