@webround/editor 0.0.0-stage → 0.3.0

package/dist/components/text-editor/ExampleTheme.d.ts

@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+declare const _default: {
+    code: string;
+    codeHighlight: {
+        atrule: string;
+        attr: string;
+        boolean: string;
+        builtin: string;
+        cdata: string;
+        char: string;
+        class: string;
+        'class-name': string;
+        comment: string;
+        constant: string;
+        deleted: string;
+        doctype: string;
+        entity: string;
+        function: string;
+        important: string;
+        inserted: string;
+        keyword: string;
+        namespace: string;
+        number: string;
+        operator: string;
+        prolog: string;
+        property: string;
+        punctuation: string;
+        regex: string;
+        selector: string;
+        string: string;
+        symbol: string;
+        tag: string;
+        url: string;
+        variable: string;
+    };
+    heading: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+    };
+    image: string;
+    link: string;
+    list: {
+        listitem: string;
+        nested: {
+            listitem: string;
+        };
+        ol: string;
+        ul: string;
+    };
+    ltr: string;
+    paragraph: string;
+    placeholder: string;
+    quote: string;
+    rtl: string;
+    text: {
+        bold: string;
+        code: string;
+        hashtag: string;
+        italic: string;
+        overflowed: string;
+        strikethrough: string;
+        underline: string;
+        underlineStrikethrough: string;
+    };
+};
+export default _default;
+//# sourceMappingURL=ExampleTheme.d.ts.map

package/dist/components/text-editor/ExampleTheme.js

@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export default {
+    code: 'editor-code',
+    codeHighlight: {
+        atrule: 'editor-tokenAttr',
+        attr: 'editor-tokenAttr',
+        boolean: 'editor-tokenProperty',
+        builtin: 'editor-tokenSelector',
+        cdata: 'editor-tokenComment',
+        char: 'editor-tokenSelector',
+        class: 'editor-tokenFunction',
+        'class-name': 'editor-tokenFunction',
+        comment: 'editor-tokenComment',
+        constant: 'editor-tokenProperty',
+        deleted: 'editor-tokenProperty',
+        doctype: 'editor-tokenComment',
+        entity: 'editor-tokenOperator',
+        function: 'editor-tokenFunction',
+        important: 'editor-tokenVariable',
+        inserted: 'editor-tokenSelector',
+        keyword: 'editor-tokenAttr',
+        namespace: 'editor-tokenVariable',
+        number: 'editor-tokenProperty',
+        operator: 'editor-tokenOperator',
+        prolog: 'editor-tokenComment',
+        property: 'editor-tokenProperty',
+        punctuation: 'editor-tokenPunctuation',
+        regex: 'editor-tokenVariable',
+        selector: 'editor-tokenSelector',
+        string: 'editor-tokenSelector',
+        symbol: 'editor-tokenProperty',
+        tag: 'editor-tokenProperty',
+        url: 'editor-tokenOperator',
+        variable: 'editor-tokenVariable',
+    },
+    heading: {
+        h1: 'editor-heading-h1',
+        h2: 'editor-heading-h2',
+        h3: 'editor-heading-h3',
+        h4: 'editor-heading-h4',
+        h5: 'editor-heading-h5',
+        h6: 'editor-heading-h6',
+    },
+    image: 'editor-image',
+    link: 'editor-link',
+    list: {
+        listitem: 'editor-listitem',
+        nested: {
+            listitem: 'editor-nested-listitem',
+        },
+        ol: 'editor-list-ol',
+        ul: 'editor-list-ul',
+    },
+    ltr: 'ltr',
+    paragraph: 'editor-paragraph',
+    placeholder: 'editor-placeholder',
+    quote: 'editor-quote',
+    rtl: 'rtl',
+    text: {
+        bold: 'editor-text-bold',
+        code: 'editor-text-code',
+        hashtag: 'editor-text-hashtag',
+        italic: 'editor-text-italic',
+        overflowed: 'editor-text-overflowed',
+        strikethrough: 'editor-text-strikethrough',
+        underline: 'editor-text-underline',
+        underlineStrikethrough: 'editor-text-underlineStrikethrough',
+    },
+};
+//# sourceMappingURL=ExampleTheme.js.map

package/dist/components/text-editor/ToolbarContext.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+type ToolbarContextValue = {
+    isMenuOpen: boolean;
+    openMenu: () => void;
+    closeMenu: () => void;
+    toolbarVisible: boolean;
+    toggleToolbar: () => void;
+    setToolbarVisible: React.Dispatch<React.SetStateAction<boolean>>;
+    editorFocused: boolean;
+    handleEditorClick: () => void;
+};
+export declare function useToolbar(): ToolbarContextValue;
+export declare function ToolbarProvider({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export {};
+//# sourceMappingURL=ToolbarContext.d.ts.map

package/dist/components/text-editor/ToolbarContext.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState, useCallback, useEffect } from 'react';
+const ToolbarContext = createContext(null);
+export function useToolbar() {
+    return useContext(ToolbarContext);
+}
+export function ToolbarProvider({ children }) {
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const [toolbarVisible, setToolbarVisible] = useState(true);
+    const [editorFocused, setEditorFocused] = useState(false);
+    const toggleToolbar = useCallback(() => {
+        setToolbarVisible(prev => !prev);
+    }, []);
+    const openMenu = useCallback(() => setIsMenuOpen(true), []);
+    const closeMenu = useCallback(() => setIsMenuOpen(false), []);
+    const handleEditorClick = useCallback(() => setEditorFocused(true), []);
+    const handleOutsideClick = useCallback((event) => {
+        if (!event.target.closest('.editor-container')) {
+            setEditorFocused(false);
+        }
+    }, []);
+    useEffect(() => {
+        document.addEventListener('click', handleOutsideClick);
+        return () => document.removeEventListener('click', handleOutsideClick);
+    }, [handleOutsideClick]);
+    return (_jsx(ToolbarContext.Provider, { value: {
+            isMenuOpen, openMenu, closeMenu,
+            toolbarVisible, toggleToolbar, setToolbarVisible,
+            editorFocused, handleEditorClick,
+        }, children: children }));
+}
+//# sourceMappingURL=ToolbarContext.js.map

package/dist/components/text-editor/WrTextEditor.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface Props {
+    editorPathKey: string;
+    availablePages?: string[];
+    initialHtml: string;
+    onSave: (html: string) => void;
+    onCancel: () => void;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export declare function WrTextEditor({ editorPathKey, availablePages, initialHtml, onSave, onCancel, style, className }: Props): React.JSX.Element;
+export {};
+//# sourceMappingURL=WrTextEditor.d.ts.map

package/dist/components/text-editor/WrTextEditor.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useRef } from 'react';
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
+import { ListPlugin } from '@lexical/react/LexicalListPlugin';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $generateHtmlFromNodes } from '@lexical/html';
+import { ToolbarProvider } from './ToolbarContext';
+import { useLexicalCommitOnBlur } from './hooks/useLexicalCommitOnBlur';
+import LoadContentPlugin from './plugins/LoadContentPlugin';
+import ToolbarPlugin from './plugins/ToolbarPlugin';
+import { editorConfig } from './common/constants';
+function KeyboardPlugin({ onSave, onCancel }) {
+    const [editor] = useLexicalComposerContext();
+    React.useEffect(() => {
+        const onKey = (e) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                onCancel();
+            }
+            if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+                e.preventDefault();
+                editor.getEditorState().read(() => onSave());
+            }
+        };
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+    }, [editor, onSave, onCancel]);
+    return null;
+}
+function EditorInner({ editorPathKey, availablePages, initialHtml, onSave, onCancel, style, className }) {
+    const [editor] = useLexicalComposerContext();
+    const editorRef = useRef(null);
+    const { commit: commitOnBlur, finish } = useLexicalCommitOnBlur(initialHtml, onSave, onCancel);
+    const saveNow = useCallback(() => {
+        editor.getEditorState().read(() => {
+            onSave($generateHtmlFromNodes(editor));
+        });
+    }, [editor, onSave]);
+    return (_jsx(ToolbarProvider, { children: _jsxs("div", { "data-wr-editing": true, style: { position: 'relative', outline: '2px solid #3b82f6', ...style }, className: className, children: [_jsx(ToolbarPlugin, { editorRef: editorRef, editorPathKey: editorPathKey, availablePages: availablePages, onOutside: finish }), _jsx("div", { style: { position: 'relative' }, children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { ref: editorRef, onBlur: commitOnBlur, style: { outline: 'none', minHeight: 24 } }), placeholder: _jsx("div", { className: "editor-placeholder", children: "Type something..." }), ErrorBoundary: LexicalErrorBoundary }) }), _jsx(HistoryPlugin, {}), _jsx(ListPlugin, {}), _jsx(LoadContentPlugin, { html: initialHtml }), _jsx(KeyboardPlugin, { onSave: saveNow, onCancel: onCancel })] }) }));
+}
+export function WrTextEditor({ editorPathKey, availablePages, initialHtml, onSave, onCancel, style, className }) {
+    return (_jsx(LexicalComposer, { initialConfig: editorConfig, children: _jsx(EditorInner, { editorPathKey: editorPathKey, availablePages: availablePages, initialHtml: initialHtml, onSave: onSave, onCancel: onCancel, style: style, className: className }) }));
+}
+//# sourceMappingURL=WrTextEditor.js.map

package/dist/components/text-editor/common/constants.d.ts

@@ -0,0 +1,109 @@
+import { ListItemNode, ListNode } from "@lexical/list";
+import { LinkNode } from '@lexical/link';
+import { HeadingNode } from '@lexical/rich-text';
+import { HorizontalRuleNode } from "../nodes/HorizontalRuleNode";
+import { CodeBlockNode } from "../nodes/CodeBlockNode";
+export declare const defaultState: {
+    root: {
+        children: {
+            children: {
+                detail: number;
+                format: number;
+                mode: string;
+                style: string;
+                text: string;
+                type: string;
+                version: number;
+                formats: never[];
+            }[];
+            direction: string;
+            format: string;
+            indent: number;
+            type: string;
+            version: number;
+            textFormat: number;
+        }[];
+        direction: string;
+        format: string;
+        indent: number;
+        type: string;
+        version: number;
+    };
+};
+export declare const editorConfig: {
+    namespace: string;
+    nodes: (typeof HorizontalRuleNode | typeof CodeBlockNode | typeof HeadingNode | typeof LinkNode | typeof ListNode | typeof ListItemNode)[];
+    onError(error: any): never;
+    theme: {
+        code: string;
+        codeHighlight: {
+            atrule: string;
+            attr: string;
+            boolean: string;
+            builtin: string;
+            cdata: string;
+            char: string;
+            class: string;
+            'class-name': string;
+            comment: string;
+            constant: string;
+            deleted: string;
+            doctype: string;
+            entity: string;
+            function: string;
+            important: string;
+            inserted: string;
+            keyword: string;
+            namespace: string;
+            number: string;
+            operator: string;
+            prolog: string;
+            property: string;
+            punctuation: string;
+            regex: string;
+            selector: string;
+            string: string;
+            symbol: string;
+            tag: string;
+            url: string;
+            variable: string;
+        };
+        heading: {
+            h1: string;
+            h2: string;
+            h3: string;
+            h4: string;
+            h5: string;
+            h6: string;
+        };
+        image: string;
+        link: string;
+        list: {
+            listitem: string;
+            nested: {
+                listitem: string;
+            };
+            ol: string;
+            ul: string;
+        };
+        ltr: string;
+        paragraph: string;
+        placeholder: string;
+        quote: string;
+        rtl: string;
+        text: {
+            bold: string;
+            code: string;
+            hashtag: string;
+            italic: string;
+            overflowed: string;
+            strikethrough: string;
+            underline: string;
+            underlineStrikethrough: string;
+        };
+    };
+    editable: boolean;
+    readonly: boolean;
+};
+export declare const lexicalPlaceholder = "Type some text";
+//# sourceMappingURL=constants.d.ts.map

package/dist/components/text-editor/common/constants.js

@@ -0,0 +1,58 @@
+import { ListItemNode, ListNode } from "@lexical/list";
+import ExampleTheme from "../ExampleTheme";
+import { LinkNode } from '@lexical/link';
+import { HeadingNode } from '@lexical/rich-text';
+import { HorizontalRuleNode } from "../nodes/HorizontalRuleNode";
+import { CodeBlockNode } from "../nodes/CodeBlockNode";
+// Stato di default dell'editor, utile per fornire un punto di partenza coerente
+export const defaultState = {
+    "root": {
+        "children": [
+            {
+                "children": [
+                    {
+                        "detail": 0,
+                        "format": 0,
+                        "mode": "normal",
+                        "style": "font-family: Manrope;line-height: 1; color: #000000",
+                        "text": "webround",
+                        "type": "text",
+                        "version": 1,
+                        "formats": []
+                    }
+                ],
+                "direction": "ltr",
+                "format": "left",
+                "indent": 0,
+                "type": "paragraph",
+                "version": 1,
+                "textFormat": 0
+            }
+        ],
+        "direction": "ltr",
+        "format": "",
+        "indent": 0,
+        "type": "root",
+        "version": 1
+    }
+};
+// Configurazione di base dell'editor Lexical
+export const editorConfig = {
+    namespace: 'Webround',
+    nodes: [
+        HeadingNode,
+        LinkNode,
+        ListNode,
+        ListItemNode,
+        HorizontalRuleNode,
+        CodeBlockNode
+    ],
+    onError(error) {
+        throw error; // Gestione degli errori
+    },
+    theme: ExampleTheme, // Tema personalizzato
+    editable: true,
+    readonly: true
+};
+export const lexicalPlaceholder = "Type some text";
+//# sourceMappingURL=constants.js.map

package/dist/components/text-editor/common/surface.d.ts

@@ -0,0 +1,3 @@
+import type { CSSProperties } from 'react';
+export declare const WR_SURFACE_STYLE: CSSProperties;
+//# sourceMappingURL=surface.d.ts.map

package/dist/components/text-editor/common/surface.js

@@ -0,0 +1,8 @@
+// Colori FISSI delle superfici dei plugin (barra e menu): sfondo bianco, testo nero.
+// Vanno come stile in linea, non da una classe CSS: i plugin vivono dentro la pagina del sito e uno stile
+// in linea non può essere cambiato dal tema, da `data-theme` o dal colore del body.
+export const WR_SURFACE_STYLE = {
+    backgroundColor: '#ffffff',
+    color: '#000000',
+};
+//# sourceMappingURL=surface.js.map

package/dist/components/text-editor/common/utils.d.ts

@@ -0,0 +1,7 @@
+import { EditorState, LexicalNode, TextNode } from "lexical";
+export declare function decodeFormat(format: number): string[];
+export declare function onChangeHandler(editorState: EditorState): void;
+export declare function exportEditorState(editorState: EditorState): string;
+export declare function getFirstTextNode(node: LexicalNode): TextNode | null;
+export declare function isPartOfActiveEditor(target: Node | null, path: any): boolean;
+//# sourceMappingURL=utils.d.ts.map

package/dist/components/text-editor/common/utils.js

@@ -0,0 +1,78 @@
+import { $getRoot, $getSelection } from "lexical";
+export function decodeFormat(format) {
+    const formats = [];
+    if (format & 1)
+        formats.push('bold');
+    if (format & 2)
+        formats.push('italic');
+    if (format & 4)
+        formats.push('underline');
+    if (format & 8)
+        formats.push('strikethrough');
+    if (format & 16)
+        formats.push('code');
+    if (format & 32)
+        formats.push('subscript');
+    if (format & 64)
+        formats.push('superscript');
+    return formats;
+}
+export function onChangeHandler(editorState) {
+    editorState.read(() => {
+        const root = $getRoot();
+        const selection = $getSelection();
+        const jsonContent = exportEditorState(editorState);
+    });
+}
+export function exportEditorState(editorState) {
+    const content = editorState.toJSON();
+    const root = content.root;
+    function traverseNode(node) {
+        delete node.textStyle;
+        if (node.type === 'text') {
+            node.formats = decodeFormat(node.format);
+        }
+        if (node.children) {
+            node.children = node.children.map(traverseNode);
+        }
+        return node;
+    }
+    const updatedRoot = traverseNode(root);
+    return JSON.stringify({ root: updatedRoot }, null, 2);
+}
+export function getFirstTextNode(node) {
+    if (node.getType() === 'text')
+        return node;
+    if ('getFirstChild' in node && typeof node.getFirstChild === 'function') {
+        const child = node.getFirstChild();
+        if (child)
+            return getFirstTextNode(child);
+    }
+    return null;
+}
+export function isPartOfActiveEditor(target, path) {
+    if (!target)
+        return false;
+    const editorPathKey = path.join('-');
+    const isMatchingEditorPath = (el) => el instanceof HTMLElement && el.dataset.editorPath === editorPathKey;
+    const isInsideToolbarClass = (el) => el instanceof HTMLElement &&
+        el.classList.contains('toolbarClass') &&
+        el.dataset.editorPath === editorPathKey;
+    if (target instanceof HTMLElement) {
+        if (isMatchingEditorPath(target))
+            return true;
+        if (isInsideToolbarClass(target.closest('.toolbarClass')))
+            return true;
+    }
+    while (target) {
+        if (target instanceof HTMLElement) {
+            if (isMatchingEditorPath(target))
+                return true;
+            if (isInsideToolbarClass(target.closest('.toolbarClass')))
+                return true;
+        }
+        target = target.parentNode;
+    }
+    return false;
+}
+//# sourceMappingURL=utils.js.map

package/dist/components/text-editor/hooks/useLexicalCommitOnBlur.d.ts

@@ -0,0 +1,5 @@
+export declare function useLexicalCommitOnBlur(initialHtml: string, onSave: (html: string) => void, onUnchanged: () => void): {
+    commit: () => void;
+    finish: () => void;
+};
+//# sourceMappingURL=useLexicalCommitOnBlur.d.ts.map

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

@@ -0,0 +1,41 @@
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useCallback, useEffect, useRef } from "react";
+import { $generateHtmlFromNodes } from "@lexical/html";
+export function useLexicalCommitOnBlur(initialHtml, onSave, onUnchanged) {
+    const [editor] = useLexicalComposerContext();
+    const hasChangesRef = useRef(false);
+    useEffect(() => {
+        return editor.registerUpdateListener(() => {
+            hasChangesRef.current = true;
+        });
+    }, [editor]);
+    // `commit`: the field lost the focus (to the toolbar too, so nothing is closed when nothing changed). `finish`: the person is done with this text (they clicked or tapped
+    // somewhere else): what changed is saved, and the editing ends either way, so its outline goes with it.
+    const commit = useCallback(() => {
+        if (!hasChangesRef.current)
+            return;
+        hasChangesRef.current = false;
+        editor.getEditorState().read(() => {
+            const html = $generateHtmlFromNodes(editor);
+            if (html !== initialHtml)
+                onSave(html);
+        });
+    }, [editor, initialHtml, onSave]);
+    const finish = useCallback(() => {
+        const changed = hasChangesRef.current;
+        hasChangesRef.current = false;
+        if (!changed) {
+            onUnchanged();
+            return;
+        }
+        editor.getEditorState().read(() => {
+            const html = $generateHtmlFromNodes(editor);
+            if (html !== initialHtml)
+                onSave(html);
+            else
+                onUnchanged();
+        });
+    }, [editor, initialHtml, onSave, onUnchanged]);
+    return { commit, finish };
+}
+//# sourceMappingURL=useLexicalCommitOnBlur.js.map

package/dist/components/text-editor/hooks/useLexicalMarkdown.d.ts

@@ -0,0 +1,33 @@
+import { TextNode } from "lexical";
+import { LinkNode } from "@lexical/link";
+type InlineToken = {
+    kind: "text";
+    text: string;
+} | {
+    kind: "bold";
+    text: string;
+} | {
+    kind: "italic";
+    text: string;
+} | {
+    kind: "code";
+    text: string;
+} | {
+    kind: "strike";
+    text: string;
+} | {
+    kind: "under";
+    text: string;
+} | {
+    kind: "link";
+    text: string;
+    url: string;
+};
+export declare function tokenizeInline(raw: string): InlineToken[];
+export declare function buildNodes(tokens: InlineToken[], style: string): (TextNode | LinkNode)[];
+export declare function useLexicalMarkdown(): {
+    toMarkdown: () => string;
+    fromMarkdown: (md: string) => void;
+};
+export {};
+//# sourceMappingURL=useLexicalMarkdown.d.ts.map