@wavv/ui 2.2.2-alpha.5 → 2.2.2-alpha.6

package/build/components/Editor/Editor.js

@@ -0,0 +1,356 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import extension_character_count from "@tiptap/extension-character-count";
+import extension_highlight from "@tiptap/extension-highlight";
+import extension_placeholder from "@tiptap/extension-placeholder";
+import extension_task_item from "@tiptap/extension-task-item";
+import extension_task_list from "@tiptap/extension-task-list";
+import { Markdown } from "@tiptap/markdown";
+import { EditorContent, useEditor } from "@tiptap/react";
+import starter_kit from "@tiptap/starter-kit";
+import { isEqual } from "es-toolkit/predicate";
+import { startTransition, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { Description, InputContainer, InputWrapper, Label, isInputFilled, useInputFocus } from "../InputHelpers.js";
+import EditorStyles from "./EditorStyles.js";
+import { documentToText, editorContentToText, getEditorCharacterCount, hasMissingFields, insertMergeField, parseJSONToDocument, parseTextToDocument, updateMergeFieldValidation } from "./editorUtils.js";
+import { MergeField } from "./MergeFieldExtension.js";
+import RichTextToolbar from "./RichTextToolbar.js";
+const createEditorContent = (value, fields, displayValue = false)=>{
+    if (!value) return {
+        type: 'doc',
+        content: []
+    };
+    if ('object' == typeof value && value.type) {
+        if (fields && fields.length > 0) return parseJSONToDocument(value, fields, displayValue);
+        return value;
+    }
+    if ('string' == typeof value) {
+        if (!value.includes('<<')) return {
+            type: 'doc',
+            content: [
+                {
+                    type: 'paragraph',
+                    content: [
+                        {
+                            type: 'text',
+                            text: value
+                        }
+                    ]
+                }
+            ]
+        };
+        return parseTextToDocument(value, fields || [], displayValue);
+    }
+    return {
+        type: 'doc',
+        content: []
+    };
+};
+const Editor = ({ value, textValue, onChange, onTextChange, onDirtyChange, onEnterKey, onFocus, onBlur, mergeFields = [], placeholder = 'Text...', description, invalid, width, height, maxHeight, noPadding = false, readOnly = false, interactiveTaskItems = false, displayMergedValues = false, color, overflow, clampLines, label, disabled, borderRadius, backgroundColor, fontSize, textOnly, showToolbarOptions = false, maxLength, margin, marginLeft, marginRight, marginTop, marginBottom, padding, paddingLeft, paddingRight, paddingTop, paddingBottom, ref, className, ...rest })=>{
+    const { focused, handleFocus, handleBlur } = useInputFocus(onFocus, onBlur);
+    const [missingField, setMissingField] = useState(false);
+    const fieldsRef = useRef(mergeFields);
+    const [isUpdatingContent, setIsUpdatingContent] = useState(false);
+    const [scale, setScale] = useState(1);
+    const onEnterKeyRef = useRef(onEnterKey);
+    const margins = {
+        margin,
+        marginLeft,
+        marginRight,
+        marginTop,
+        marginBottom
+    };
+    const paddings = {
+        padding,
+        paddingLeft,
+        paddingRight,
+        paddingTop,
+        paddingBottom
+    };
+    useEffect(()=>{
+        onEnterKeyRef.current = onEnterKey;
+    }, [
+        onEnterKey
+    ]);
+    const heightVar = maxHeight ?? height;
+    const editorMaxHeight = heightVar;
+    const editorContent = value ?? (void 0 !== textValue ? createEditorContent(textValue, mergeFields, displayMergedValues) : createEditorContent());
+    const editor = useEditor({
+        extensions: [
+            starter_kit.configure({
+                bold: {},
+                italic: {},
+                strike: {},
+                code: {},
+                paragraph: {
+                    HTMLAttributes: {
+                        class: 'editor-paragraph'
+                    }
+                }
+            }),
+            extension_highlight.configure({
+                multicolor: true
+            }),
+            extension_placeholder.configure({
+                placeholder
+            }),
+            extension_task_list,
+            extension_task_item.configure({
+                nested: true,
+                onReadOnlyChecked: ()=>interactiveTaskItems
+            }),
+            MergeField,
+            Markdown,
+            ...maxLength ? [
+                extension_character_count.configure({
+                    limit: maxLength
+                })
+            ] : []
+        ],
+        content: editorContent,
+        editable: !readOnly && !disabled,
+        immediatelyRender: true,
+        editorProps: {
+            handleKeyDown: (_view, event)=>{
+                if ('Enter' === event.key && !event.shiftKey && onEnterKeyRef.current) {
+                    event.preventDefault();
+                    onEnterKeyRef.current(event);
+                    return true;
+                }
+                return false;
+            },
+            handlePaste: (_view, event)=>{
+                const clipboardData = event.clipboardData || window.clipboardData;
+                const pastedText = clipboardData?.getData('text/plain') || '';
+                if (!pastedText) return false;
+                if (maxLength && editor) {
+                    const currentLength = getEditorCharacterCount(editor);
+                    const remainingSpace = maxLength - currentLength;
+                    if (remainingSpace <= 0) {
+                        event.preventDefault();
+                        return true;
+                    }
+                    if (pastedText.length > remainingSpace) {
+                        const truncatedText = pastedText.substring(0, remainingSpace);
+                        event.preventDefault();
+                        editor.commands.insertContent(truncatedText, {
+                            contentType: 'markdown'
+                        });
+                        return true;
+                    }
+                }
+                if (editor) {
+                    event.preventDefault();
+                    editor.commands.insertContent(pastedText, {
+                        contentType: 'markdown'
+                    });
+                    return true;
+                }
+                return false;
+            }
+        },
+        onUpdate: ({ editor })=>{
+            if (isUpdatingContent) return;
+            if (maxLength) {
+                const currentLength = getEditorCharacterCount(editor);
+                if (currentLength > maxLength) {
+                    setIsUpdatingContent(true);
+                    editor.commands.undo();
+                    setIsUpdatingContent(false);
+                    return;
+                }
+            }
+            const json = editor.getJSON();
+            const hasMissing = hasMissingFields(editor, mergeFields);
+            const newIsDirty = editor.can().undo();
+            startTransition(()=>{
+                setMissingField(hasMissing);
+                if (onDirtyChange) onDirtyChange(newIsDirty);
+                if (onChange) onChange(json, hasMissing, 'insert-characters');
+                if (onTextChange) {
+                    const text = editorContentToText(json);
+                    onTextChange(text, hasMissing, 'insert-characters');
+                }
+            });
+        },
+        onFocus: ()=>{
+            handleFocus();
+        },
+        onBlur: ()=>{
+            handleBlur();
+        }
+    });
+    useEffect(()=>{
+        if (editor) editor.setEditable(!readOnly && !disabled);
+    }, [
+        editor,
+        readOnly,
+        disabled
+    ]);
+    useEffect(()=>{
+        if (editor) {
+            const placeholderExt = editor.extensionManager.extensions.find((ext)=>'placeholder' === ext.name);
+            if (placeholderExt) placeholderExt.options.placeholder = placeholder;
+        }
+    }, [
+        editor,
+        placeholder
+    ]);
+    useEffect(()=>{
+        if (!editor || isUpdatingContent) return;
+        const newContent = value ?? (void 0 !== textValue ? createEditorContent(textValue, mergeFields, displayMergedValues) : null);
+        if (!newContent) return;
+        const currentContent = editor.getJSON();
+        if (!isEqual(currentContent, newContent)) {
+            setIsUpdatingContent(true);
+            requestAnimationFrame(()=>{
+                const { selection } = editor.state;
+                const { from, to } = selection;
+                editor.commands.setContent(newContent);
+                requestAnimationFrame(()=>{
+                    try {
+                        const newDocSize = editor.state.doc.content.size;
+                        const safeFrom = Math.min(from, newDocSize);
+                        const safeTo = Math.min(to, newDocSize);
+                        if (safeFrom >= 0 && safeTo >= 0 && safeFrom <= newDocSize && safeTo <= newDocSize) editor.commands.setTextSelection({
+                            from: safeFrom,
+                            to: safeTo
+                        });
+                    } catch  {}
+                    setIsUpdatingContent(false);
+                });
+            });
+        }
+    }, [
+        value,
+        textValue,
+        mergeFields,
+        displayMergedValues,
+        editor
+    ]);
+    useEffect(()=>{
+        if (!editor) return;
+        const { current: prevFields } = fieldsRef;
+        const areEqual = isEqual(prevFields, mergeFields);
+        if (!areEqual) {
+            fieldsRef.current = mergeFields;
+            updateMergeFieldValidation(editor, mergeFields, displayMergedValues);
+            const hasMissing = hasMissingFields(editor, mergeFields);
+            startTransition(()=>{
+                setMissingField(hasMissing);
+            });
+        }
+    }, [
+        mergeFields,
+        displayMergedValues,
+        editor
+    ]);
+    useImperativeHandle(ref, ()=>({
+            insertField: (field)=>{
+                if (editor) insertMergeField(editor, field, mergeFields, displayMergedValues);
+            },
+            insertText: (text)=>{
+                if (editor) editor.chain().focus().insertContent(text).run();
+            },
+            focusAtEnd: ()=>{
+                if (editor) editor.commands.focus('end');
+            },
+            zoomIn: ()=>{
+                setScale((prevScale)=>Math.min(2.0, prevScale + 0.1));
+            },
+            zoomOut: ()=>{
+                setScale((prevScale)=>Math.max(0.5, prevScale - 0.1));
+            },
+            resetZoom: ()=>{
+                setScale(1);
+            },
+            getMarkdown: ()=>{
+                if (editor) return editor.getMarkdown();
+                return '';
+            },
+            getText: ()=>{
+                if (editor) return editorContentToText(editor.getJSON());
+                return '';
+            },
+            setText: (text)=>{
+                if (editor) {
+                    const content = createEditorContent(text, mergeFields, displayMergedValues);
+                    editor.commands.setContent(content);
+                }
+            }
+        }));
+    const handleContainerClick = (event)=>{
+        if (!readOnly && !disabled) {
+            event.stopPropagation();
+            if (editor && !editor.isFocused) editor.commands.focus('end');
+        }
+    };
+    if (!editor) return null;
+    return /*#__PURE__*/ jsxs(EditorContainer, {
+        onClick: handleContainerClick,
+        width: width,
+        height: height,
+        editorMaxHeight: editorMaxHeight,
+        noPadding: noPadding || textOnly,
+        readOnly: readOnly,
+        color: color,
+        overflow: overflow,
+        clampLines: clampLines,
+        filled: isInputFilled(documentToText(editor || {
+            getJSON: ()=>({})
+        })),
+        invalid: invalid || missingField,
+        textOnly: textOnly,
+        borderRadius: borderRadius,
+        backgroundColor: backgroundColor,
+        fontSize: fontSize,
+        focused: focused,
+        disabled: disabled,
+        hasLabel: !!label,
+        hideEditor: !isInputFilled(documentToText(editor || {
+            getJSON: ()=>({})
+        })) && !!label && !focused && !showToolbarOptions,
+        scale: scale,
+        className: className,
+        ...margins,
+        ...paddings,
+        children: [
+            /*#__PURE__*/ jsxs(InputWrapper, {
+                readOnly: readOnly,
+                style: {
+                    height: '100%'
+                },
+                children: [
+                    label && !showToolbarOptions && /*#__PURE__*/ jsx(Label, {
+                        filled: isInputFilled(documentToText(editor || {
+                            getJSON: ()=>({})
+                        })),
+                        focused: focused,
+                        disabled: disabled,
+                        children: label
+                    }),
+                    showToolbarOptions && !readOnly && !disabled && /*#__PURE__*/ jsx(RichTextToolbar, {
+                        editor: editor,
+                        insertField: (field)=>{
+                            insertMergeField(editor, field, mergeFields, displayMergedValues);
+                        },
+                        mergeFields: mergeFields,
+                        maxLength: maxLength
+                    }),
+                    /*#__PURE__*/ jsx(EditorContent, {
+                        editor: editor,
+                        className: "editor-content",
+                        ...rest
+                    })
+                ]
+            }),
+            description && /*#__PURE__*/ jsx(Description, {
+                invalid: invalid,
+                children: description
+            })
+        ]
+    });
+};
+const EditorContainer = styled(InputContainer)(...EditorStyles);
+const Editor_Editor = Editor;
+export { createEditorContent, Editor_Editor as default };

package/build/components/Editor/EditorStyles.js

@@ -0,0 +1,259 @@
+import { marginProps, paddingProps } from "../helpers/styledProps.js";
+const baseContainerStyles = ({ theme, height, noPadding, disabled, readOnly, color })=>({
+        alignItems: height ? 'flex-start' : void 0,
+        minHeight: height,
+        height: height ?? 'max-content',
+        padding: noPadding ? 0 : void 0,
+        color: disabled ? theme.input.color.disabled : color || theme.input.color.default,
+        cursor: readOnly ? 'inherit' : 'text',
+        pointerEvents: readOnly ? 'auto' : void 0,
+        '&:hover': {
+            backgroundColor: readOnly ? theme.input.background.default : void 0,
+            Label: {
+                color: readOnly ? theme.input.labelColor.filled : void 0
+            }
+        }
+    });
+const editorContentStyles = ()=>({
+        '& .editor-content': {
+            width: '100%',
+            height: '100%',
+            overflow: 'auto'
+        }
+    });
+const proseMirrorBaseStyles = ({ theme, height, hasLabel, editorMaxHeight, overflow, hideEditor, fontSize, filled, noPadding, scale = 1 })=>({
+        '& .ProseMirror': {
+            outline: 'none',
+            ...1 !== scale ? {
+                overflow: 'visible',
+                height: editorMaxHeight || height ? 'max-content' : 'auto'
+            } : editorMaxHeight || height ? {
+                maxHeight: editorMaxHeight || height,
+                overflow: 'visible'
+            } : {
+                overflow: overflow || 'auto'
+            },
+            lineHeight: hasLabel ? '19px' : '21px',
+            position: hideEditor ? 'absolute' : 'relative',
+            fontSize: fontSize || theme.font.size.lg,
+            top: !filled || hasLabel || noPadding ? void 0 : 1,
+            caretColor: theme.accent,
+            width: scale > 1 ? `${100 / scale}%` : '100%',
+            transformOrigin: 'top left',
+            transform: 1 !== scale ? `scale(${scale})` : void 0,
+            fontWeight: 'normal',
+            textDecoration: 'none',
+            textTransform: 'none',
+            letterSpacing: 'normal'
+        }
+    });
+const textFormattingStyles = ({ theme })=>({
+        '& .ProseMirror strong, & .ProseMirror b': {
+            fontWeight: 'bold'
+        },
+        '& .ProseMirror em, & .ProseMirror i': {
+            fontStyle: 'italic'
+        },
+        '& .ProseMirror code': {
+            fontFamily: 'monospace',
+            backgroundColor: theme.scale1,
+            padding: '2px 4px',
+            borderRadius: 3,
+            fontSize: '0.875em'
+        },
+        '& .ProseMirror mark': {
+            backgroundColor: 'yellow',
+            color: 'inherit'
+        }
+    });
+const headingStyles = ()=>({
+        '& .ProseMirror h1': {
+            fontSize: '2rem',
+            fontWeight: 'bold',
+            lineHeight: 1.2,
+            margin: '24px 0 16px 0'
+        },
+        '& .ProseMirror h2': {
+            fontSize: '1.5rem',
+            fontWeight: 'bold',
+            lineHeight: 1.3,
+            margin: '20px 0 12px 0'
+        },
+        '& .ProseMirror h3': {
+            fontSize: '1.25rem',
+            fontWeight: 'bold',
+            lineHeight: 1.4,
+            margin: '16px 0 8px 0'
+        },
+        '& .ProseMirror h4': {
+            fontSize: '1.125rem',
+            fontWeight: 'bold',
+            lineHeight: 1.4,
+            margin: '16px 0 8px 0'
+        },
+        '& .ProseMirror h5': {
+            fontSize: '1rem',
+            fontWeight: 'bold',
+            lineHeight: 1.5,
+            margin: '12px 0 6px 0'
+        },
+        '& .ProseMirror h6': {
+            fontSize: '0.875rem',
+            fontWeight: 'bold',
+            lineHeight: 1.5,
+            margin: '12px 0 6px 0',
+            textTransform: 'uppercase',
+            letterSpacing: '0.05em'
+        }
+    });
+const blockquoteStyles = ({ theme })=>({
+        '& .ProseMirror blockquote': {
+            margin: '16px 0',
+            paddingLeft: '16px',
+            borderLeft: `4px solid ${theme.accent}`,
+            fontStyle: 'italic',
+            color: theme.scale10
+        },
+        '& .ProseMirror blockquote p': {
+            margin: '8px 0'
+        },
+        '& .ProseMirror blockquote p:first-of-type': {
+            marginTop: 0
+        },
+        '& .ProseMirror blockquote p:last-of-type': {
+            marginBottom: 0
+        }
+    });
+const paragraphStyles = ({ clampLines, overflow })=>({
+        '& .ProseMirror p': {
+            margin: 0,
+            WebkitLineClamp: clampLines,
+            overflow: clampLines ? 'hidden' : overflow || 'auto',
+            display: clampLines ? '-webkit-box' : void 0,
+            WebkitBoxOrient: clampLines ? 'vertical' : void 0,
+            wordBreak: clampLines ? 'break-word' : void 0
+        }
+    });
+const placeholderStyles = ({ theme, fontSize, hideEditor })=>({
+        '& .ProseMirror p.is-editor-empty:first-of-type::before': {
+            color: theme.input.color.placeholder,
+            content: 'attr(data-placeholder)',
+            float: 'left',
+            pointerEvents: 'none',
+            height: 0,
+            fontSize: fontSize || theme.font.size.lg,
+            visibility: hideEditor ? 'hidden' : void 0
+        }
+    });
+const listStyles = ()=>({
+        '& .ProseMirror ul:not([data-type="taskList"])': {
+            listStyle: 'disc',
+            listStylePosition: 'inside',
+            margin: '16px 0',
+            paddingLeft: 20
+        },
+        '& .ProseMirror ol': {
+            listStyle: 'decimal',
+            listStylePosition: 'inside',
+            margin: '16px 0',
+            paddingLeft: 20
+        },
+        '& .ProseMirror ul:not([data-type="taskList"]) li, & .ProseMirror ol li': {
+            display: 'list-item',
+            margin: '4px 0',
+            padding: 0,
+            listStyleType: 'inherit'
+        },
+        '& .ProseMirror ul:not([data-type="taskList"]) li p, & .ProseMirror ol li p': {
+            display: 'inline',
+            margin: 0
+        },
+        '& .ProseMirror ul:not([data-type="taskList"]) ul, & .ProseMirror ol ol, & .ProseMirror ul:not([data-type="taskList"]) ol, & .ProseMirror ol ul:not([data-type="taskList"])': {
+            margin: 0,
+            paddingLeft: 20
+        }
+    });
+const taskListStyles = ()=>({
+        '& .ProseMirror ul[data-type="taskList"]': {
+            listStyle: 'none',
+            listStylePosition: 'initial',
+            padding: 0,
+            margin: '16px 0'
+        },
+        '& .ProseMirror ul[data-type="taskList"] ul': {
+            margin: 0
+        },
+        '& .ProseMirror ul[data-type="taskList"] li': {
+            display: 'flex',
+            alignItems: 'flex-start',
+            gap: 8,
+            margin: 0,
+            padding: 0,
+            listStyle: 'none'
+        },
+        '& .ProseMirror ul[data-type="taskList"] li > label': {
+            flexShrink: 0,
+            cursor: 'pointer',
+            display: 'flex',
+            alignItems: 'flex-start',
+            paddingTop: 2
+        },
+        '& .ProseMirror ul[data-type="taskList"] li > label input[type="checkbox"]': {
+            margin: 0,
+            padding: 0,
+            width: 16,
+            height: 16
+        },
+        '& .ProseMirror ul[data-type="taskList"] li > label span': {
+            display: 'none'
+        },
+        '& .ProseMirror ul[data-type="taskList"] li > div': {
+            flex: 1,
+            minWidth: 0,
+            display: 'flex',
+            flexDirection: 'column'
+        },
+        '& .ProseMirror ul[data-type="taskList"] li > div > p:first-of-type': {
+            margin: 0,
+            minHeight: 24
+        },
+        '& .ProseMirror ul[data-type="taskList"] li > div > p:not(:first-of-type)': {
+            margin: 0,
+            lineHeight: '1.5'
+        }
+    });
+const placeholderPositionStyles = ({ noPadding, hasLabel })=>{
+    let top;
+    if (noPadding) top = -1;
+    if (hasLabel) top = -2;
+    return {
+        '& .ProseMirror p.is-editor-empty:first-of-type::before': {
+            position: 'relative',
+            top
+        }
+    };
+};
+const textOnlyStyles = ({ textOnly })=>({
+        backgroundColor: textOnly ? 'transparent' : void 0,
+        '&:hover': {
+            backgroundColor: textOnly ? 'transparent' : void 0
+        }
+    });
+const styles = [
+    baseContainerStyles,
+    editorContentStyles,
+    proseMirrorBaseStyles,
+    textFormattingStyles,
+    headingStyles,
+    blockquoteStyles,
+    paragraphStyles,
+    placeholderStyles,
+    listStyles,
+    taskListStyles,
+    placeholderPositionStyles,
+    textOnlyStyles,
+    marginProps,
+    paddingProps
+];
+const EditorStyles = styles;
+export { EditorStyles as default };