@antscorp/antsomi-ui 2.0.110 → 2.0.112

package/es/components/organism/TextEditor/TextEditor.js

@@ -0,0 +1,403 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ANTSOMI_COMPONENT_PREFIX_CLS } from '@antscorp/antsomi-ui/es/constants';
+import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
+import SubScript from '@tiptap/extension-subscript';
+import Superscript from '@tiptap/extension-superscript';
+import TextAlign from '@tiptap/extension-text-align';
+import { TextStyleKit } from '@tiptap/extension-text-style';
+import { Selection, Focus } from '@tiptap/extensions';
+import { useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import clsx from 'clsx';
+import { isBoolean } from 'lodash';
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, } from 'react';
+import { useDebouncedCallback } from 'use-debounce';
+import { DEFAULT_TEXT_STYLE } from './constants';
+import { BackgroundColor } from './extensions/BackgroundColor';
+import { Color } from './extensions/Color';
+import { Emoji } from './extensions/Emoji';
+import { FontFamily } from './extensions/FontFamily';
+import { FontSize } from './extensions/FontSize';
+import { FontWeight } from './extensions/FontWeight';
+import { Indent } from './extensions/Indent';
+import { LetterSpacing } from './extensions/LetterSpacing';
+import { LineHeight } from './extensions/LineHeight';
+import { CustomLink } from './extensions/Link';
+import { CustomListItem } from './extensions/ListItem';
+import { CustomOrderedList } from './extensions/OrderedList';
+import { SmartTag } from './extensions/SmartTag';
+import { TextTransform } from './extensions/TextTransform';
+import { CustomUnorderedList } from './extensions/UnorderedList';
+import { ClearFormatting } from './extensions/ClearFormatting';
+import { TextEditorProvider, useTextEditorStore, } from './provider';
+import { StyledEditorContent } from './styled';
+import { isSmartTagNode, } from './types';
+import { emojiSuggestion } from './ui/Emoji';
+import { LinkPreviewToolbar, FormattingToolbar } from './ui/Toolbar';
+import { analyzeFont, defaultShouldShowBubbleMenu, getAllFullLinkGroups, handleLinkAction, handleSmartTagAction, isShowLinkToolbar, safeParseHTMLContent, htmlSerializerForOutput, } from './utils';
+import { BubbleMenu } from './ui/BubbleMenu';
+import { LinkPopover } from './ui/LinkPopover';
+const TextEditorInternal = memo(forwardRef((props, ref) => {
+    const { id, className, config, editable = true, initialContent = '', dataAttributes, onUpdateDebounced = 300, defaultTextStyle: defaultTextStyleProp, linkHandler: outerLinkHandler, smartTagHandler: outerSmartTagHandler, bubbleMenuProps, style, render, onUpdate, onFocus, onCreate, onChangeFont, } = props;
+    // Initialize bubbleMenuContainer with default value (document.body)
+    // This ensures BubbleMenu receives a valid appendTo prop on first render
+    const bubbleMenuContainer = useRef((() => {
+        const appendTo = bubbleMenuProps?.appendTo;
+        if (!appendTo)
+            return document.body;
+        return typeof appendTo === 'function' ? appendTo() : appendTo;
+    })());
+    const linkFormVisible = useTextEditorStore(state => state.linkFormState?.isVisible);
+    const setBubbleMenuContainer = useTextEditorStore(state => state.setBubbleMenuContainer);
+    const showLinkForm = useTextEditorStore(state => state.showLinkForm);
+    const defaultTextStyle = useDeepCompareMemo(() => ({
+        ...DEFAULT_TEXT_STYLE,
+        ...defaultTextStyleProp,
+    }), [defaultTextStyleProp]);
+    useEffect(() => {
+        const bubbleMenuAppendTo = bubbleMenuProps?.appendTo;
+        // Default to document.body when no appendTo is provided
+        // This prevents bubble menu from being clipped by overflow containers
+        const el = bubbleMenuAppendTo
+            ? typeof bubbleMenuAppendTo === 'function'
+                ? bubbleMenuAppendTo()
+                : bubbleMenuAppendTo
+            : document.body;
+        setBubbleMenuContainer(el);
+        bubbleMenuContainer.current = el;
+    }, [bubbleMenuProps?.appendTo, setBubbleMenuContainer]);
+    const handleOnUpdateDebounce = useDebouncedCallback((editor) => {
+        const text = editor.getText();
+        const json = editor.getJSON();
+        const html = editor.getHTML();
+        onUpdate?.({
+            html: htmlSerializerForOutput(html),
+            text,
+            json,
+        });
+    }, onUpdateDebounced);
+    const contentRef = useRef(null);
+    // Compose linkHandler: merge outerLinkHandler with default handlers
+    // Allows partial override - user can provide only setNew or only edit
+    const linkHandler = useMemo(() => {
+        const defaultSetNew = ({ selectionText }) => {
+            showLinkForm('insert', {
+                url: '',
+                text: selectionText,
+                openInNewTab: false,
+            });
+        };
+        const defaultEdit = ({ attrs, selectionText, }) => {
+            showLinkForm('edit', {
+                url: attrs.href || '',
+                text: selectionText,
+                openInNewTab: attrs.target === '_blank',
+            });
+        };
+        return {
+            setNew: outerLinkHandler?.setNew || defaultSetNew,
+            edit: outerLinkHandler?.edit || defaultEdit,
+        };
+    }, [outerLinkHandler, showLinkForm]);
+    const editor = useEditor({
+        extensions: [
+            StarterKit.configure({
+                link: false,
+                bulletList: false,
+                orderedList: false,
+                listItem: false,
+                undoRedo: config?.UndoRedo ?? {
+                    depth: 100,
+                },
+            }),
+            CustomListItem,
+            CustomUnorderedList,
+            CustomOrderedList,
+            FontWeight.configure({
+                defaultWeight: defaultTextStyle.fontWeight,
+            }),
+            LineHeight.configure({
+                defaultHeight: defaultTextStyle.lineHeight,
+            }),
+            FontFamily.configure({
+                defaultFontFamily: defaultTextStyle.fontFamily,
+            }),
+            FontSize.configure({
+                defaultFontSize: defaultTextStyle.fontSize,
+            }),
+            LetterSpacing.configure({
+                defaultLetterSpacing: defaultTextStyle.letterSpacing,
+            }),
+            Color.configure({
+                defaultColor: defaultTextStyle.color,
+            }),
+            BackgroundColor.configure({
+                defaultBackgroundColor: defaultTextStyle.backgroundColor,
+            }),
+            TextStyleKit.configure({
+                fontFamily: false,
+                fontSize: false,
+                backgroundColor: false,
+                color: false,
+                lineHeight: false,
+                textStyle: {
+                    mergeNestedSpanStyles: true,
+                },
+            }),
+            TextTransform,
+            Superscript,
+            SubScript,
+            Selection.configure({
+                className: 'selection',
+            }),
+            Focus.configure({
+                className: 'has-focused',
+            }),
+            SmartTag.configure({
+                generateSmartTagId: config?.SmartTag?.generateId,
+            }),
+            TextAlign.configure({
+                types: ['heading', 'paragraph'],
+            }),
+            CustomLink.configure({
+                openOnClick: false,
+                HTMLAttributes: {
+                    style: 'text-decoration:inherit;color:inherit;',
+                    rel: undefined,
+                },
+            }),
+            Indent,
+            Emoji.configure({
+                suggestion: emojiSuggestion({
+                    container: bubbleMenuContainer.current,
+                }),
+            }),
+            ClearFormatting.configure({
+                defaultTextStyle,
+            }),
+        ],
+        content: initialContent,
+        onCreate: ({ editor }) => {
+            if (!contentRef.current?.parentElement) {
+                return;
+            }
+            const safeParseContent = safeParseHTMLContent({
+                html: initialContent,
+                wrapperElement: contentRef.current.parentElement,
+                defaultStyle: defaultTextStyle,
+            });
+            if (safeParseContent !== initialContent) {
+                editor.commands.setContent(safeParseContent);
+            }
+            const text = editor.getText();
+            const json = editor.getJSON();
+            const html = editor.getHTML();
+            onCreate?.({
+                html: htmlSerializerForOutput(html),
+                text,
+                json,
+            });
+        },
+        onUpdate: ({ editor }) => {
+            handleOnUpdateDebounce(editor);
+        },
+        onFocus: ({ event }) => {
+            onFocus?.(event);
+        },
+        editorProps: {
+            attributes: { spellcheck: 'false' },
+            handleKeyDown(view, event) {
+                if (event.ctrlKey && event.key === 'k') {
+                    // Add this line to prevent browser's default behavior.
+                    event.preventDefault();
+                    handleLinkAction(view, linkHandler);
+                }
+            },
+        },
+    });
+    useEffect(() => {
+        if (editable === undefined) {
+            editor?.setEditable(true);
+        }
+        else if (isBoolean(editable)) {
+            editor?.setEditable(editable);
+        }
+    }, [editor, editable]);
+    const handleSetSmartTag = useCallback(({ id, content }) => {
+        editor?.chain().focus().setSmartTag({ id, content }).run();
+    }, [editor]);
+    const handleDeleteSmartTag = useCallback(id => {
+        editor
+            ?.chain()
+            .deleteSmartTagGlobally(attrs => attrs.id === id)
+            .run();
+    }, [editor]);
+    const handleUpdateSmartTagAttrs = useCallback((id, updatedAttrs) => editor
+        ?.chain()
+        .updateSmartTagAttrsGlobally(attrs => {
+        if (attrs.id === id)
+            return updatedAttrs;
+    })
+        .run(), [editor]);
+    const shouldShowLinkPreview = useCallback((params) => {
+        const { state } = params;
+        return isShowLinkToolbar(state);
+    }, []);
+    const shouldShowFormattingToolbar = useCallback((params) => {
+        const { state, view, element } = params;
+        // Don't show if link preview is visible
+        if (isShowLinkToolbar(state)) {
+            return false;
+        }
+        return defaultShouldShowBubbleMenu({
+            state,
+            view,
+            element,
+            editor: params.editor,
+        });
+    }, []);
+    const handleBlur = useCallback((perserveSelection) => {
+        if (perserveSelection) {
+            editor?.chain().blur().run();
+        }
+        else {
+            editor?.chain().blur().setTextSelection({ from: 0, to: 0 }).run();
+        }
+    }, [editor]);
+    const handleEachLinkGroup = useCallback(callback => {
+        if (!editor)
+            return;
+        const linkGroups = getAllFullLinkGroups(editor.state);
+        linkGroups.forEach(callback);
+    }, [editor]);
+    const handleEachSmartag = useCallback(callback => {
+        if (!editor)
+            return;
+        const { state } = editor;
+        const { doc } = state;
+        doc.descendants(node => {
+            if (isSmartTagNode(node)) {
+                callback(node.attrs);
+            }
+        });
+    }, [editor]);
+    useImperativeHandle(ref, () => ({
+        setLink: params => {
+            editor?.chain().setCustomLink(params).run();
+        },
+        deleteLink: predicate => {
+            editor?.chain().deleteCustomLink(predicate).run();
+        },
+        updateLinkAttrs: (predicate, updateFn) => {
+            editor.chain().updateCustomLinkAttrsGlobally(predicate, updateFn).run();
+        },
+        updateLinkText: ({ predicate, updated, mergeAdjacentEqualFn }) => {
+            editor
+                .chain()
+                .updateCustomLinkText({
+                predicate,
+                updated,
+                mergeAdjacentEqualFn,
+            })
+                .run();
+        },
+        getHTML: () => htmlSerializerForOutput(editor.getHTML()),
+        eachLinkGroup: handleEachLinkGroup,
+        eachSmartag: handleEachSmartag,
+        setSmartTag: handleSetSmartTag,
+        deleteSmartTag: handleDeleteSmartTag,
+        updateSmartTagAttrs: handleUpdateSmartTagAttrs,
+        blur: handleBlur,
+        setContent: editor.commands.setContent,
+        style: contentRef.current?.style,
+    }));
+    if (!editor) {
+        return null;
+    }
+    const bubbleMenus = (bubbleMenuProps?.enabled ?? true) ? (_jsxs(_Fragment, { children: [_jsx(LinkPopover, { editor: editor }), !linkFormVisible && (_jsxs(_Fragment, { children: [_jsx(BubbleMenu, { pluginKey: "linkPreviewBubbleMenu", ...bubbleMenuProps, appendTo: bubbleMenuContainer.current, editor: editor, shouldShow: shouldShowLinkPreview, children: _jsx(LinkPreviewToolbar, { editor: editor, linkHanlder: {
+                                onUpsert: () => {
+                                    handleLinkAction(editor.view, linkHandler);
+                                },
+                            }, render: render }) }), _jsx(BubbleMenu, { pluginKey: "formattingBubbleMenu", ...bubbleMenuProps, appendTo: bubbleMenuContainer.current, editor: editor, shouldShow: shouldShowFormattingToolbar, children: _jsx(FormattingToolbar, { config: config, editor: editor, defaultTextStyle: defaultTextStyle, linkHanlder: {
+                                onUpsert: () => {
+                                    handleLinkAction(editor.view, linkHandler);
+                                },
+                            }, smartTagHandler: {
+                                onUpsert: (event) => {
+                                    handleSmartTagAction(event, editor.view, outerSmartTagHandler);
+                                },
+                            }, onChangeFont: ({ font, weight }) => {
+                                onChangeFont?.({
+                                    font,
+                                    weight,
+                                    analysis: analyzeFont(font),
+                                });
+                            } }) })] }))] })) : null;
+    return (_jsxs(_Fragment, { children: [_jsx(StyledEditorContent, { className: clsx(`${ANTSOMI_COMPONENT_PREFIX_CLS}-text-editor`, className), "$textStyle": defaultTextStyle, style: {
+                    // Inline styles apply to inner html elements (support email client)
+                    ...defaultTextStyle,
+                    ...style,
+                }, id: id, ref: contentRef, editor: editor, ...dataAttributes }), bubbleMenus] }));
+}));
+TextEditorInternal.displayName = 'TextEditorInternal';
+const TextEditorWithProvider = forwardRef((props, ref) => {
+    const { colors, onChangeColors, ...editorProps } = props;
+    const providerRef = useRef(null);
+    const editorRef = useRef(null);
+    // Sync external colors to internal store
+    useDeepCompareEffect(() => {
+        if (colors !== undefined) {
+            providerRef.current?.updateColors?.(colors);
+        }
+    }, [colors]);
+    useImperativeHandle(ref, () => ({
+        // Forward TextEditorRef methods - accessed at call time
+        get style() {
+            return editorRef.current?.style;
+        },
+        get getHTML() {
+            return editorRef.current.getHTML;
+        },
+        get setLink() {
+            return editorRef.current.setLink;
+        },
+        get deleteLink() {
+            return editorRef.current.deleteLink;
+        },
+        get updateLinkAttrs() {
+            return editorRef.current.updateLinkAttrs;
+        },
+        get updateLinkText() {
+            return editorRef.current.updateLinkText;
+        },
+        get eachLinkGroup() {
+            return editorRef.current.eachLinkGroup;
+        },
+        get eachSmartag() {
+            return editorRef.current.eachSmartag;
+        },
+        get setSmartTag() {
+            return editorRef.current.setSmartTag;
+        },
+        get deleteSmartTag() {
+            return editorRef.current.deleteSmartTag;
+        },
+        get updateSmartTagAttrs() {
+            return editorRef.current.updateSmartTagAttrs;
+        },
+        get blur() {
+            return editorRef.current.blur;
+        },
+        get setContent() {
+            return editorRef.current.setContent;
+        },
+        // Forward TextEditorProviderRefHandler methods
+        updateColors: colors => providerRef.current?.updateColors?.(colors),
+    }), []);
+    return (_jsx(TextEditorProvider, { ref: providerRef, colors: colors, onChangeColors: onChangeColors, children: _jsx(TextEditorInternal, { ...editorProps, ref: editorRef }) }));
+});
+TextEditorWithProvider.displayName = 'TextEditorWithProvider';
+export const TextEditor = Object.assign(TextEditorWithProvider, {
+    Provider: TextEditorProvider,
+    Internal: TextEditorInternal,
+});