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

package/build/components/Editor/MergeFieldExtension.js

@@ -0,0 +1,110 @@
+import { jsx } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Node, mergeAttributes } from "@tiptap/core";
+import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
+const MergeFieldSpan = styled.span(({ theme, error })=>({
+        color: error ? theme.color.error : theme.accent,
+        backgroundColor: error ? theme.color.errorTint1 : theme.color.brandTint1,
+        borderRadius: 3,
+        padding: '0 4px',
+        margin: '0 1px',
+        fontSize: 'inherit',
+        fontFamily: 'inherit',
+        cursor: 'default',
+        userSelect: 'none',
+        '&:hover': {
+            backgroundColor: error ? theme.color.errorTint2 : theme.color.brandTint2
+        }
+    }));
+const MergeFieldComponent = ({ node })=>{
+    const { id, label, isValid } = node.attrs;
+    return /*#__PURE__*/ jsx(NodeViewWrapper, {
+        as: "span",
+        style: {
+            display: 'contents'
+        },
+        children: /*#__PURE__*/ jsx(MergeFieldSpan, {
+            error: !isValid,
+            "data-merge-field-id": id,
+            children: label
+        })
+    });
+};
+const MergeField = Node.create({
+    name: 'mergeField',
+    group: 'inline',
+    inline: true,
+    atom: true,
+    addAttributes () {
+        return {
+            id: {
+                default: '',
+                parseHTML: (element)=>element.getAttribute('data-merge-field-id'),
+                renderHTML: (attributes)=>{
+                    if (!attributes.id) return {};
+                    return {
+                        'data-merge-field-id': attributes.id
+                    };
+                }
+            },
+            label: {
+                default: ''
+            },
+            isValid: {
+                default: true
+            },
+            displayValue: {
+                default: false
+            }
+        };
+    },
+    parseHTML () {
+        return [
+            {
+                tag: 'span[data-merge-field-id]'
+            }
+        ];
+    },
+    renderHTML ({ HTMLAttributes, node }) {
+        return [
+            'span',
+            mergeAttributes(HTMLAttributes, {
+                'data-merge-field-id': node.attrs.id
+            }),
+            node.attrs.label
+        ];
+    },
+    addNodeView () {
+        return ReactNodeViewRenderer(MergeFieldComponent);
+    },
+    addKeyboardShortcuts () {
+        return {
+            Backspace: ()=>{
+                const { state, view } = this.editor;
+                const { selection } = state;
+                const $pos = selection.$from;
+                const nodeBefore = $pos.nodeBefore;
+                if (nodeBefore && 'mergeField' === nodeBefore.type.name) {
+                    const tr = state.tr.delete($pos.pos - nodeBefore.nodeSize, $pos.pos);
+                    view.dispatch(tr);
+                    return true;
+                }
+                return false;
+            },
+            Delete: ()=>{
+                const { state, view } = this.editor;
+                const { selection } = state;
+                const $pos = selection.$to;
+                const nodeAfter = $pos.nodeAfter;
+                if (nodeAfter && 'mergeField' === nodeAfter.type.name) {
+                    const tr = state.tr.delete($pos.pos, $pos.pos + nodeAfter.nodeSize);
+                    view.dispatch(tr);
+                    return true;
+                }
+                return false;
+            }
+        };
+    }
+});
+const MergeFieldExtension = MergeField;
+export { MergeField, MergeFieldExtension as default };

package/build/components/Editor/RichTextToolbar.js

@@ -0,0 +1,515 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import { useEditorState } from "@tiptap/react";
+import { useState } from "react";
+import Button from "../Button/index.js";
+import DropdownMenu from "../DropdownMenu.js";
+import { marginProps } from "../helpers/styledProps.js";
+import Icon from "../Icon/index.js";
+import Popover from "../Popover.js";
+import { getEditorCharacterCount } from "./editorUtils.js";
+const RichTextToolbar_RichTextToolbar = ({ editor, insertField, mergeFields, maxLength })=>{
+    const { accent, editor: { highlight } } = useTheme();
+    const [showMergeFields, setShowMergeFields] = useState(false);
+    const [isListsOpen, setIsListsOpen] = useState(false);
+    const [isHeadingOpen, setIsHeadingOpen] = useState(false);
+    const [showHighlightColors, setShowHighlightColors] = useState(false);
+    const editorState = useEditorState({
+        editor,
+        selector: ({ editor: editorInstance })=>{
+            if (!editorInstance) return {
+                isBold: false,
+                isItalic: false,
+                isStrike: false,
+                isUnderline: false,
+                isCode: false,
+                isHighlight: false,
+                isBlockquote: false,
+                currentHeading: 0,
+                isBulletList: false,
+                isOrderedList: false,
+                isTaskList: false,
+                canUndo: false,
+                canRedo: false,
+                characterCount: 0
+            };
+            let currentHeading = 0;
+            for(let level = 1; level <= 6; level++)if (editorInstance.isActive('heading', {
+                level
+            })) {
+                currentHeading = level;
+                break;
+            }
+            return {
+                isBold: editorInstance.isActive('bold'),
+                isItalic: editorInstance.isActive('italic'),
+                isStrike: editorInstance.isActive('strike'),
+                isUnderline: editorInstance.isActive('underline'),
+                isCode: editorInstance.isActive('code'),
+                isHighlight: editorInstance.isActive('highlight'),
+                isBlockquote: editorInstance.isActive('blockquote'),
+                currentHeading,
+                isBulletList: editorInstance.isActive('bulletList'),
+                isOrderedList: editorInstance.isActive('orderedList'),
+                isTaskList: editorInstance.isActive('taskList'),
+                canUndo: editorInstance.can().undo(),
+                canRedo: editorInstance.can().redo(),
+                characterCount: getEditorCharacterCount(editorInstance)
+            };
+        }
+    });
+    const formatOptions = [
+        {
+            icon: 'bold',
+            format: 'bold',
+            title: 'Bold (⌘B)'
+        },
+        {
+            icon: 'italic',
+            format: 'italic',
+            title: 'Italic (⌘I)'
+        },
+        {
+            icon: 'strikethrough',
+            format: 'strike',
+            title: 'Strikethrough (⌘⇧S)'
+        },
+        {
+            icon: 'underline',
+            format: 'underline',
+            title: 'Underline (⌘U)'
+        },
+        {
+            icon: 'blockquote',
+            format: 'blockquote',
+            title: 'Blockquote (⌘⇧B)'
+        }
+    ];
+    const highlightColors = [
+        {
+            color: highlight.yellow,
+            label: 'Yellow'
+        },
+        {
+            color: highlight.blue,
+            label: 'Blue'
+        },
+        {
+            color: highlight.red,
+            label: 'Red'
+        },
+        {
+            color: highlight.green,
+            label: 'Green'
+        },
+        {
+            color: highlight.orange,
+            label: 'Orange'
+        }
+    ];
+    const headingOptions = [
+        {
+            id: '1',
+            value: 'Heading 1',
+            leftElement: /*#__PURE__*/ jsx(Icon, {
+                name: "heading-1",
+                size: "small",
+                marginRight: 4
+            })
+        },
+        {
+            id: '2',
+            value: 'Heading 2',
+            leftElement: /*#__PURE__*/ jsx(Icon, {
+                name: "heading-2",
+                size: "small",
+                marginRight: 4
+            })
+        },
+        {
+            id: '3',
+            value: 'Heading 3',
+            leftElement: /*#__PURE__*/ jsx(Icon, {
+                name: "heading-3",
+                size: "small",
+                marginRight: 4
+            })
+        },
+        {
+            id: '0',
+            value: 'Paragraph',
+            leftElement: /*#__PURE__*/ jsx(Icon, {
+                name: "paragraph",
+                size: "small",
+                marginRight: 4
+            })
+        }
+    ];
+    const listOptions = [
+        {
+            id: 'bullet',
+            value: 'Bullet List',
+            leftElement: /*#__PURE__*/ jsx(Icon, {
+                name: "list-bullet",
+                size: "small",
+                marginRight: 4
+            })
+        },
+        {
+            id: 'ordered',
+            value: 'Ordered List',
+            leftElement: /*#__PURE__*/ jsx(Icon, {
+                name: "list-ordered",
+                size: "small",
+                marginRight: 4
+            })
+        },
+        {
+            id: 'task',
+            value: 'Task List',
+            leftElement: /*#__PURE__*/ jsx(Icon, {
+                name: "list-task",
+                size: "small",
+                marginRight: 4
+            })
+        }
+    ];
+    const toggleFormat = (format)=>{
+        if (!editor) return;
+        const chain = editor.isFocused ? editor.chain() : editor.chain().focus();
+        switch(format){
+            case 'bold':
+                chain.toggleBold().run();
+                break;
+            case 'italic':
+                chain.toggleItalic().run();
+                break;
+            case 'strike':
+                chain.toggleStrike().run();
+                break;
+            case 'underline':
+                chain.toggleUnderline().run();
+                break;
+            case 'code':
+                chain.toggleCode().run();
+                break;
+            case 'blockquote':
+                chain.toggleBlockquote().run();
+                break;
+            case 'highlight':
+                break;
+        }
+    };
+    const handleHeadingChange = (value)=>{
+        if (!editor) return;
+        const chain = editor.isFocused ? editor.chain() : editor.chain().focus();
+        const level = Number.parseInt(value, 10);
+        if (0 === level) chain.setParagraph().run();
+        else chain.toggleHeading({
+            level: level
+        }).run();
+    };
+    const handleListChange = (value)=>{
+        if (!editor) return;
+        const chain = editor.isFocused ? editor.chain() : editor.chain().focus();
+        switch(value){
+            case 'bullet':
+                chain.toggleBulletList().run();
+                break;
+            case 'ordered':
+                chain.toggleOrderedList().run();
+                break;
+            case 'task':
+                chain.toggleTaskList().run();
+                break;
+        }
+    };
+    const handleUndo = ()=>{
+        if (!editor) return;
+        const chain = editor.isFocused ? editor.chain() : editor.chain().focus();
+        chain.undo().run();
+    };
+    const handleRedo = ()=>{
+        if (!editor) return;
+        const chain = editor.isFocused ? editor.chain() : editor.chain().focus();
+        chain.redo().run();
+    };
+    const handleHighlightColor = (color)=>{
+        if (!editor) return;
+        const chain = editor.isFocused ? editor.chain() : editor.chain().focus();
+        chain.toggleHighlight({
+            color
+        }).run();
+        setShowHighlightColors(false);
+    };
+    const handleRemoveHighlight = ()=>{
+        if (!editor) return;
+        const chain = editor.isFocused ? editor.chain() : editor.chain().focus();
+        chain.unsetHighlight().run();
+        setShowHighlightColors(false);
+    };
+    const isFormatActive = (format)=>{
+        switch(format){
+            case 'bold':
+                return editorState.isBold;
+            case 'italic':
+                return editorState.isItalic;
+            case 'strike':
+                return editorState.isStrike;
+            case 'underline':
+                return editorState.isUnderline;
+            case 'code':
+                return editorState.isCode;
+            case 'blockquote':
+                return editorState.isBlockquote;
+            case 'highlight':
+                return editorState.isHighlight;
+            default:
+                return false;
+        }
+    };
+    const isList = editorState.isBulletList || editorState.isOrderedList || editorState.isTaskList;
+    const isHeading = 0 !== editorState.currentHeading;
+    const listDropdownKey = `list-${editorState.isBulletList ? 'bullet' : editorState.isOrderedList ? 'ordered' : editorState.isTaskList ? 'task' : 'none'}`;
+    const getHeadingIcon = ()=>{
+        switch(editorState.currentHeading){
+            case 1:
+                return 'heading-1';
+            case 2:
+                return 'heading-2';
+            case 3:
+                return 'heading-3';
+            case 4:
+                return 'heading-4';
+            case 5:
+                return 'heading-5';
+            case 6:
+                return 'heading-6';
+            default:
+                return 'heading';
+        }
+    };
+    const getListIcon = ()=>{
+        if (editorState.isBulletList) return 'list-bullet';
+        if (editorState.isOrderedList) return 'list-ordered';
+        if (editorState.isTaskList) return 'list-task';
+        return 'list-bullet';
+    };
+    return /*#__PURE__*/ jsx(ToolbarContainer, {
+        children: /*#__PURE__*/ jsxs(Bar, {
+            marginLeft: -11,
+            marginRight: -11,
+            children: [
+                /*#__PURE__*/ jsx(Button, {
+                    small: true,
+                    subtle: true,
+                    secondary: true,
+                    disabled: !editorState.canUndo,
+                    onClick: handleUndo,
+                    title: "Undo (⌘Z)",
+                    icon: "undo"
+                }),
+                /*#__PURE__*/ jsx(Button, {
+                    small: true,
+                    subtle: true,
+                    secondary: true,
+                    disabled: !editorState.canRedo,
+                    onClick: handleRedo,
+                    title: "Redo (⌘⇧Z)",
+                    icon: "redo"
+                }),
+                /*#__PURE__*/ jsx(Divider, {}),
+                /*#__PURE__*/ jsx(DropdownMenu, {
+                    trigger: /*#__PURE__*/ jsx(Button, {
+                        small: true,
+                        subtle: !isHeadingOpen && !isHeading,
+                        iconColor: isHeading ? accent : void 0,
+                        secondary: true,
+                        title: "Text Format",
+                        icon: getHeadingIcon()
+                    }),
+                    options: headingOptions,
+                    onSelectionChange: handleHeadingChange,
+                    selectionMode: "single",
+                    selectedKeys: editorState.currentHeading.toString(),
+                    isTriggerButton: true,
+                    position: "bottom start",
+                    onOpenChange: setIsHeadingOpen
+                }),
+                /*#__PURE__*/ jsx(DropdownMenu, {
+                    trigger: /*#__PURE__*/ jsx(Button, {
+                        small: true,
+                        subtle: !isListsOpen && !isList,
+                        iconColor: isList ? accent : void 0,
+                        secondary: true,
+                        title: "Lists",
+                        icon: getListIcon()
+                    }),
+                    options: listOptions,
+                    onSelectionChange: handleListChange,
+                    selectionMode: "single",
+                    selectedKeys: editorState.isBulletList ? 'bullet' : editorState.isOrderedList ? 'ordered' : editorState.isTaskList ? 'task' : void 0,
+                    isTriggerButton: true,
+                    position: "bottom start",
+                    onOpenChange: setIsListsOpen
+                }, listDropdownKey),
+                /*#__PURE__*/ jsx(Divider, {}),
+                formatOptions.map(({ icon, format, title })=>{
+                    const isActive = isFormatActive(format);
+                    return /*#__PURE__*/ jsx(Button, {
+                        small: true,
+                        subtle: !isActive,
+                        iconColor: isActive ? accent : void 0,
+                        secondary: true,
+                        onClick: ()=>toggleFormat(format),
+                        title: title,
+                        icon: icon
+                    }, format);
+                }),
+                /*#__PURE__*/ jsx(Popover, {
+                    open: showHighlightColors,
+                    onOpenChange: setShowHighlightColors,
+                    position: "bottom end",
+                    trigger: /*#__PURE__*/ jsx(Button, {
+                        small: true,
+                        subtle: !showHighlightColors && !editorState.isHighlight,
+                        iconColor: editorState.isHighlight ? accent : void 0,
+                        secondary: true,
+                        icon: "highlight",
+                        title: "Highlight Colors"
+                    }),
+                    isTriggerButton: true,
+                    children: /*#__PURE__*/ jsxs(HighlightColorGrid, {
+                        children: [
+                            highlightColors.map(({ color, label })=>/*#__PURE__*/ jsx(ColorButton, {
+                                    onClick: ()=>handleHighlightColor(color),
+                                    style: {
+                                        backgroundColor: color
+                                    },
+                                    title: label,
+                                    "aria-label": `Highlight with ${label}`
+                                }, color)),
+                            /*#__PURE__*/ jsx(RemoveHighlightButton, {
+                                onClick: handleRemoveHighlight,
+                                title: "Remove highlight",
+                                "aria-label": "Remove highlight",
+                                children: "\xd7"
+                            })
+                        ]
+                    })
+                }),
+                mergeFields.length > 0 && /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        /*#__PURE__*/ jsx(Divider, {}),
+                        /*#__PURE__*/ jsx(DropdownMenu, {
+                            open: showMergeFields,
+                            onOpenChange: setShowMergeFields,
+                            position: "bottom end",
+                            trigger: /*#__PURE__*/ jsx(Button, {
+                                small: true,
+                                subtle: !showMergeFields,
+                                iconColor: showMergeFields ? accent : void 0,
+                                secondary: true,
+                                icon: "merge-field",
+                                title: "Merge Fields"
+                            }),
+                            isTriggerButton: true,
+                            options: mergeFields.map((field)=>({
+                                    id: field.id,
+                                    value: field.label,
+                                    onClick: ()=>insertField(field)
+                                }))
+                        })
+                    ]
+                }),
+                maxLength && editorState.characterCount > 0.9 * maxLength && /*#__PURE__*/ jsxs(Count, {
+                    children: [
+                        editorState.characterCount,
+                        "/",
+                        maxLength
+                    ]
+                })
+            ]
+        })
+    });
+};
+const ToolbarContainer = styled.div({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 4,
+    marginBottom: 16
+});
+const Bar = styled.div(({ theme, gap = 8, background, elevation })=>({
+        display: 'flex',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        gap,
+        borderRadius: 4,
+        padding: '8px 16px',
+        backgroundColor: background || theme.scale0,
+        boxShadow: elevation ? theme.elevation4 : void 0,
+        overflow: 'hidden'
+    }), marginProps);
+const Divider = styled.div(({ theme })=>({
+        alignSelf: 'stretch',
+        width: 1,
+        backgroundColor: theme.scale1,
+        margin: '0 8px'
+    }));
+const Count = styled.div(({ theme })=>({
+        color: theme.scale6,
+        marginLeft: 'auto',
+        fontSize: theme.font.size.sm
+    }));
+const HighlightColorGrid = styled.div(({ theme })=>({
+        display: 'grid',
+        gridTemplateColumns: 'repeat(3, 1fr)',
+        gap: 8,
+        padding: 12,
+        minWidth: 120,
+        backgroundColor: theme.options.background,
+        borderRadius: 4,
+        boxShadow: theme.elevation3
+    }));
+const ColorButton = styled.button(({ theme })=>({
+        width: 24,
+        height: 24,
+        border: `1px solid ${theme.scale2}`,
+        borderRadius: 4,
+        cursor: 'pointer',
+        transition: 'transform 0.1s ease',
+        '&:hover': {
+            transform: 'scale(1.1)',
+            borderColor: theme.accent
+        },
+        '&:focus': {
+            outline: `1px solid ${theme.accent}`,
+            outlineOffset: -1
+        }
+    }));
+const RemoveHighlightButton = styled.button(({ theme })=>({
+        width: 24,
+        height: 24,
+        border: `1px solid ${theme.scale2}`,
+        borderRadius: 4,
+        cursor: 'pointer',
+        backgroundColor: theme.scale0,
+        color: theme.input.color.default,
+        fontSize: 16,
+        fontWeight: 'bold',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        transition: 'all 0.1s ease',
+        '&:hover': {
+            backgroundColor: theme.scale1,
+            borderColor: theme.accent
+        },
+        '&:focus': {
+            outline: `2px solid ${theme.accent}`,
+            outlineOffset: 2
+        }
+    }));
+const RichTextToolbar = RichTextToolbar_RichTextToolbar;
+export { RichTextToolbar as default };