phx-react 1.3.1632 → 1.3.1639

package/dist/esm/components/TextEditor/TextEditor.js

@@ -1,862 +0,0 @@
-'use client';
-import React from 'react';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { Editor, EditorContent } from '@tiptap/react';
-import StarterKit from '@tiptap/starter-kit';
-import Underline from '@tiptap/extension-underline';
-// import ImageExt from '@tiptap/extension-image'
-import Heading from '@tiptap/extension-heading';
-import Link from '@tiptap/extension-link';
-import TextAlign from '@tiptap/extension-text-align';
-import { TextStyle, FontSize } from '@tiptap/extension-text-style';
-import Color from '@tiptap/extension-color';
-import { HexAlphaColorPicker } from 'react-colorful';
-import { emptyParagraph, toolbar_svg } from './editor.constant';
-import 'katex/dist/katex.min.css';
-import { useForm } from 'react-hook-form';
-import { PHXModal } from '../Modal/Modal';
-import { PHXInput } from '../Input/Input';
-import StyledEditorLayout from './styles/EditorStyle';
-import EmojiPicker, { EmojiStyle } from 'emoji-picker-react';
-import Placeholder from '@tiptap/extension-placeholder';
-import { FormUpload } from '../UploadFile/FormUpload';
-import CustomImage from './custom/CustomImage';
-import { SelectionHighlight } from './custom/SelectionHighlight';
-export default function TextEditor({ initialData, onChange, apiCdnUpload, height, label, placeholder, disabled = false, }) {
-    var _a;
-    const [editor, setEditor] = useState(null);
-    const [, forceUpdate] = useState(0);
-    const [showColorPicker, setShowColorPicker] = useState(false);
-    const [fontColor, setFontColor] = useState('#333333');
-    const pickerRef = useRef(null);
-    const toolbarRef = useRef(null);
-    const emojiPickerRef = useRef(null);
-    const [fontSizeInput, setFontSizeInput] = useState('');
-    const [isEditingFontSize, setIsEditingFontSize] = useState(false);
-    const [pickerPos, setPickerPos] = useState({
-        left: 0,
-        top: 0,
-    });
-    const [emojiPickerPos, setEmojiPickerPos] = useState({
-        left: 0,
-        top: 0,
-    });
-    const [showLinkInput, setShowLinkInput] = useState(false);
-    const [disabledItems, setDisabledItems] = useState(new Set());
-    const [showEmojiPicker, setShowEmojiPicker] = useState(false);
-    const [openPdfModal, setOpenPdfModal] = useState(false);
-    const [pdfFile, setPdfFile] = useState(null);
-    const { formState: { errors }, register, handleSubmit, reset, } = useForm({
-        defaultValues: {
-            link: '',
-        },
-    });
-    const [loadingConvertPdf, setLoadingConvertPdf] = useState(false);
-    // eslint-disable-next-line no-useless-escape
-    const regexUrl = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
-    const normalizeColor = (val) => {
-        try {
-            if (val.startsWith('#')) {
-                return val;
-            }
-            if (val.startsWith('rgba')) {
-                const [r, g, b, a] = val
-                    .replace(/rgba\(/, '')
-                    .replace(/\)/, '')
-                    .split(',')
-                    .map((v) => v.trim());
-                const rn = parseInt(r, 10).toString(16).padStart(2, '0');
-                const gn = parseInt(g, 10).toString(16).padStart(2, '0');
-                const bn = parseInt(b, 10).toString(16).padStart(2, '0');
-                const an = Math.round(parseFloat(a) * 255)
-                    .toString(16)
-                    .padStart(2, '0');
-                return `#${rn}${gn}${bn}${an}`;
-            }
-            if (val.startsWith('rgb')) {
-                const [r, g, b] = val
-                    .replace(/rgb\(/, '')
-                    .replace(/\)/, '')
-                    .split(',')
-                    .map((v) => v.trim());
-                const rn = parseInt(r, 10).toString(16).padStart(2, '0');
-                const gn = parseInt(g, 10).toString(16).padStart(2, '0');
-                const bn = parseInt(b, 10).toString(16).padStart(2, '0');
-                return `#${rn}${gn}${bn}`;
-            }
-            return val;
-        }
-        catch (_a) {
-            return val;
-        }
-    };
-    const getCurrentSelectionFontSize = useCallback(() => {
-        var _a;
-        try {
-            const attrSize = (_a = editor === null || editor === void 0 ? void 0 : editor.getAttributes('textStyle')) === null || _a === void 0 ? void 0 : _a.fontSize;
-            if (attrSize)
-                return attrSize;
-            const sel = window.getSelection();
-            const node = sel === null || sel === void 0 ? void 0 : sel.anchorNode;
-            let el = null;
-            if (node) {
-                el = node.nodeType === 1 ? node : node.parentElement;
-            }
-            if (el) {
-                const size = window.getComputedStyle(el).fontSize;
-                if (size)
-                    return size;
-            }
-            return '';
-        }
-        catch (_b) {
-            return '';
-        }
-    }, [editor]);
-    const isHtmlEmpty = (html) => {
-        const hasImage = /<img\b[^>]*>/i.test(html);
-        const text = html
-            .replace(/<[^>]*>/g, '')
-            .replace(/&nbsp;/g, '')
-            .trim();
-        return text === '' && !hasImage;
-    };
-    const getCurrentSelectionColor = () => {
-        var _a;
-        try {
-            const attrColor = (_a = editor === null || editor === void 0 ? void 0 : editor.getAttributes('textStyle')) === null || _a === void 0 ? void 0 : _a.color;
-            if (attrColor) {
-                return normalizeColor(attrColor);
-            }
-            const sel = window.getSelection();
-            const node = sel === null || sel === void 0 ? void 0 : sel.anchorNode;
-            let el = null;
-            if (node) {
-                el = node.nodeType === 1 ? node : node.parentElement;
-            }
-            if (el) {
-                const color = window.getComputedStyle(el).color;
-                if (color)
-                    return normalizeColor(color);
-            }
-            return null;
-        }
-        catch (_b) {
-            return null;
-        }
-    };
-    const uploadImageFunction = async (formData) => {
-        const response = await fetch(apiCdnUpload, {
-            method: 'POST',
-            body: formData,
-        });
-        if (response.ok) {
-            return response.json();
-        }
-    };
-    const handleConvertPdfToImage = async (file) => {
-        setLoadingConvertPdf(true);
-        try {
-            const PDFJS = window.pdfjsLib;
-            const fileURL = URL.createObjectURL(file);
-            const pdfDoc = await PDFJS.getDocument({ url: fileURL }).promise;
-            const { numPages } = pdfDoc;
-            const uploadTasks = [];
-            for (let i = 1; i <= numPages; i++) {
-                uploadTasks.push(async () => {
-                    const page = await pdfDoc.getPage(i);
-                    const viewport = page.getViewport({ scale: 2 });
-                    const canvas = document.createElement('canvas');
-                    const context = canvas.getContext('2d');
-                    canvas.width = viewport.width;
-                    canvas.height = viewport.height;
-                    await page.render({ canvasContext: context, viewport }).promise;
-                    const blob = await new Promise((resolve) => canvas.toBlob((b) => resolve(b), 'image/webp'));
-                    const fileName = `${file.name.replace(/\.[^/.]+$/, '')}-page-${i}.webp`;
-                    const imageFile = new File([blob], fileName, { type: 'image/webp' });
-                    const link = await uploadImage(imageFile);
-                    return { index: i, link };
-                });
-            }
-            const results = [];
-            const BATCH_SIZE = 5;
-            const totalUploadTasks = uploadTasks.length;
-            for (let i = 0; i < totalUploadTasks; i += BATCH_SIZE) {
-                const batch = uploadTasks.slice(i, i + BATCH_SIZE);
-                const batchResults = await Promise.all(batch.map((fn) => fn()));
-                results.push(...batchResults);
-            }
-            const sorted = results.filter((r) => r.link).sort((a, b) => a.index - b.index);
-            const content = sorted.map(({ link }) => ({
-                type: 'image',
-                attrs: { src: link },
-            }));
-            editor === null || editor === void 0 ? void 0 : editor.chain().focus().insertContent(content).run();
-        }
-        finally {
-            setLoadingConvertPdf(false);
-            setOpenPdfModal(false);
-            setPdfFile(null);
-        }
-    };
-    const normalizeHtml = (html) => {
-        return html.replace(/<p><\/p>/g, emptyParagraph);
-    };
-    useEffect(() => {
-        const e = new Editor({
-            content: initialData,
-            extensions: [
-                Placeholder.configure({
-                    placeholder: placeholder,
-                }),
-                TextStyle,
-                FontSize,
-                Color,
-                StarterKit.configure({
-                    heading: false,
-                }),
-                Underline,
-                CustomImage,
-                Heading.configure({ levels: [1, 2, 3, 4] }),
-                Link.configure({ openOnClick: false }),
-                TextAlign.configure({
-                    types: ['heading', 'paragraph', 'image'],
-                }),
-                SelectionHighlight,
-            ],
-            editorProps: {
-                attributes: {
-                    class: `prose editor-height px-3 py-1.5 focus:outline-none border border-t-0 border-gray-300 rounded-b-md bg-white overflow-y-auto`,
-                },
-            },
-        });
-        e.on('transaction', () => {
-            forceUpdate((n) => n + 1);
-        });
-        e.on('update', ({ editor }) => {
-            const content = normalizeHtml(editor.getHTML());
-            const isEmpty = isHtmlEmpty(content);
-            onChange === null || onChange === void 0 ? void 0 : onChange(!isEmpty ? content : '');
-        });
-        setEditor(e);
-        return () => {
-            e.destroy();
-        };
-    }, []);
-    useEffect(() => {
-        if (!editor)
-            return;
-        const dom = editor.view.dom;
-        dom.classList.toggle('bg-gray-200', disabled);
-        dom.classList.toggle('bg-white', !disabled);
-        dom.classList.toggle('cursor-not-allowed', disabled);
-        editor.setEditable(!disabled);
-    }, [editor, disabled]);
-    useEffect(() => {
-        if (!editor)
-            return;
-        const updateDisabledItems = () => {
-            const disabled = new Set();
-            if (editor.isActive('blockquote')) {
-                disabled.add('Văn bản');
-            }
-            if (editor.isActive('heading')) {
-                disabled.add('Trích dẫn');
-            }
-            setDisabledItems(disabled);
-        };
-        updateDisabledItems();
-        editor.on('selectionUpdate', updateDisabledItems);
-        editor.on('transaction', updateDisabledItems);
-        return () => {
-            editor.off('selectionUpdate', updateDisabledItems);
-            editor.off('transaction', updateDisabledItems);
-        };
-    }, [editor]);
-    useEffect(() => {
-        if (!editor)
-            return;
-        const handlePaste = async (event) => {
-            var _a;
-            const items = (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.items;
-            if (!items)
-                return;
-            event.preventDefault();
-            for (let i = 0; i < items.length; i++) {
-                const item = items[i];
-                if (item.type.indexOf('image') !== -1) {
-                    const file = item.getAsFile();
-                    if (!file)
-                        continue;
-                    const tempId = `img-${Date.now()}`;
-                    const tempUrl = URL.createObjectURL(file);
-                    try {
-                        editor === null || editor === void 0 ? void 0 : editor.chain().focus().insertContent({
-                            type: 'image',
-                            attrs: {
-                                src: tempUrl,
-                                'data-loading': 'true',
-                                'data-temp-id': tempId,
-                            },
-                        }).run();
-                        uploadImage(file)
-                            .then((res) => {
-                            if (!res)
-                                throw new Error('Upload failed');
-                            editor === null || editor === void 0 ? void 0 : editor.chain().command(({ tr }) => {
-                                let targetPos = null;
-                                tr.doc.descendants((node, pos) => {
-                                    if (node.type.name === 'image' && node.attrs['data-temp-id'] === tempId) {
-                                        targetPos = pos;
-                                        return false;
-                                    }
-                                    return true;
-                                });
-                                if (targetPos !== null) {
-                                    const node = tr.doc.nodeAt(targetPos);
-                                    if (node) {
-                                        tr.setNodeMarkup(targetPos, undefined, {
-                                            ...node.attrs,
-                                            src: res,
-                                            'data-loading': null,
-                                            'data-temp-id': null,
-                                        });
-                                        return true;
-                                    }
-                                }
-                                return false;
-                            }).run();
-                        })
-                            .catch((error) => {
-                            console.error('Failed to upload pasted image:', error);
-                            editor === null || editor === void 0 ? void 0 : editor.chain().command(({ tr }) => {
-                                let targetPos = null;
-                                tr.doc.descendants((node, pos) => {
-                                    if (node.type.name === 'image' && node.attrs['data-temp-id'] === tempId) {
-                                        targetPos = pos;
-                                        return false;
-                                    }
-                                    return true;
-                                });
-                                if (targetPos !== null) {
-                                    tr.delete(targetPos, targetPos + 1);
-                                }
-                                return true;
-                            }).run();
-                        })
-                            .finally(() => {
-                            URL.revokeObjectURL(tempUrl);
-                        });
-                    }
-                    catch (error) {
-                        console.error('Error handling pasted image:', error);
-                        URL.revokeObjectURL(tempUrl);
-                    }
-                    break;
-                }
-            }
-        };
-        const dom = editor.view.dom;
-        dom.addEventListener('paste', handlePaste);
-        return () => {
-            dom.removeEventListener('paste', handlePaste);
-        };
-    }, [editor, getCurrentSelectionFontSize]);
-    useEffect(() => {
-        if (!showColorPicker)
-            return;
-        const onDocMouseDown = (e) => {
-            const node = pickerRef.current;
-            const target = e.target;
-            const isColorButton = target.closest('[data-color-button]');
-            const isColorPicker = node === null || node === void 0 ? void 0 : node.contains(target);
-            if (node && !isColorPicker && !isColorButton) {
-                setShowColorPicker(false);
-                // @ts-ignore
-                editor === null || editor === void 0 ? void 0 : editor.commands.clearSelectionHighlight();
-            }
-        };
-        document.addEventListener('mousedown', onDocMouseDown);
-        return () => {
-            document.removeEventListener('mousedown', onDocMouseDown);
-        };
-    }, [showColorPicker]);
-    useEffect(() => {
-        if (!showEmojiPicker)
-            return;
-        const onDocMouseDown = (e) => {
-            const node = emojiPickerRef.current;
-            const target = e.target;
-            const isEmojiPicker = node === null || node === void 0 ? void 0 : node.contains(target);
-            if (node && !isEmojiPicker) {
-                setShowEmojiPicker(false);
-            }
-        };
-        document.addEventListener('mousedown', onDocMouseDown);
-        return () => {
-            document.removeEventListener('mousedown', onDocMouseDown);
-        };
-    }, [showEmojiPicker]);
-    useEffect(() => {
-        if (!editor || !showColorPicker)
-            return;
-        const updateFromSelection = () => {
-            const current = getCurrentSelectionColor();
-            if (current)
-                setFontColor(current);
-        };
-        updateFromSelection();
-        editor.on('selectionUpdate', updateFromSelection);
-        return () => {
-            editor.off('selectionUpdate', updateFromSelection);
-        };
-    }, [editor, showColorPicker]);
-    useEffect(() => {
-        if (!editor)
-            return;
-        const onSelection = () => {
-            if (!isEditingFontSize) {
-                const cur = getCurrentSelectionFontSize();
-                const m = cur.match(/^(\d+(?:\.\d+)?)/);
-                setFontSizeInput(m ? m[1] : '');
-            }
-            forceUpdate((n) => n + 1);
-        };
-        editor.on('selectionUpdate', onSelection);
-        return () => {
-            editor.off('selectionUpdate', onSelection);
-        };
-    }, [editor, isEditingFontSize, getCurrentSelectionFontSize]);
-    useEffect(() => {
-        if (!window.pdfjsLib) {
-            const script = document.createElement('script');
-            script.src = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js';
-            document.body.appendChild(script);
-        }
-    }, []);
-    useEffect(() => {
-        if (!editor)
-            return;
-        const cur = getCurrentSelectionFontSize();
-        const m = cur.match(/^(\d+(?:\.\d+)?)/);
-        setFontSizeInput(m ? m[1] : '');
-    }, [editor]);
-    if (!editor)
-        return React.createElement("p", null, "Loading editor...");
-    const addLink = () => {
-        setShowLinkInput(true);
-    };
-    const handleInsertLink = handleSubmit((data) => {
-        const { link } = data;
-        editor === null || editor === void 0 ? void 0 : editor.chain().focus().extendMarkRange('link').setLink({ href: link }).run();
-        setShowLinkInput(false);
-        reset();
-    });
-    const onMouseDownToolbar = (e, item) => {
-        var _a;
-        e.preventDefault();
-        const container = toolbarRef.current;
-        const btnRect = e.currentTarget.getBoundingClientRect();
-        const contRect = container === null || container === void 0 ? void 0 : container.getBoundingClientRect();
-        if (item.name === 'Màu chữ') {
-            // @ts-ignore
-            editor === null || editor === void 0 ? void 0 : editor.commands.setSelectionHighlight();
-            if (contRect) {
-                setPickerPos({
-                    left: btnRect.left - contRect.left - 90,
-                    top: btnRect.bottom - contRect.top + 8,
-                });
-            }
-            const current = getCurrentSelectionColor();
-            if (current)
-                setFontColor(current);
-            setShowColorPicker(!showColorPicker);
-            forceUpdate((x) => x + 1);
-        }
-        else if (item.name === 'Biểu tượng cảm xúc') {
-            if (contRect) {
-                setEmojiPickerPos({
-                    left: btnRect.left - contRect.left - 170,
-                    top: btnRect.bottom - contRect.top + 8,
-                });
-            }
-            setShowEmojiPicker(!showEmojiPicker);
-            e.stopPropagation();
-        }
-        else {
-            (_a = item.action) === null || _a === void 0 ? void 0 : _a.call(item);
-            forceUpdate((x) => x + 1);
-        }
-    };
-    const fontSizeOptions = [
-        { label: '12', value: '12px' },
-        { label: '14', value: '14px' },
-        { label: '16', value: '16px' },
-        { label: '18', value: '18px' },
-        { label: '20', value: '20px' },
-        { label: '24', value: '24px' },
-        { label: '28', value: '28px' },
-        { label: '32', value: '32px' },
-        { label: '36', value: '36px' },
-        { label: '40', value: '40px' },
-        { label: '44', value: '44px' },
-        { label: '48', value: '48px' },
-        { label: '52', value: '52px' },
-        { label: '56', value: '56px' },
-        { label: '60', value: '60px' },
-        { label: '64', value: '64px' },
-        { label: '72', value: '72px' },
-        { label: '80', value: '80px' },
-        { label: '96', value: '96px' },
-    ];
-    const paragraphOptions = [
-        { label: 'Văn bản', value: 0 },
-        { label: 'Tiêu đề 1', value: 1 },
-        { label: 'Tiêu đề 2', value: 2 },
-        { label: 'Tiêu đề 3', value: 3 },
-        { label: 'Tiêu đề 4', value: 4 },
-    ];
-    const toolbarItems = [
-        {
-            name: 'Văn bản',
-            isDisabled: () => disabledItems.has('Văn bản'),
-            component: () => (React.createElement("select", { className: `w-24 text-xs leading-5 focus:ring-0 bg-transparent border-none rounded-md py-1 px-2 duration-200 ${disabledItems.has('Văn bản') ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer hover:bg-gray-200'}`, disabled: disabledItems.has('Văn bản'), onChange: (e) => {
-                    const level = Number(e.target.value);
-                    if (level === 0) {
-                        editor.chain().focus().setParagraph().run();
-                    }
-                    else {
-                        //@ts-expect-error: nothing
-                        editor.chain().focus().setHeading({ level }).run();
-                    }
-                }, value: (() => {
-                    if (editor.isActive('heading', { level: 1 }))
-                        return 1;
-                    if (editor.isActive('heading', { level: 2 }))
-                        return 2;
-                    if (editor.isActive('heading', { level: 3 }))
-                        return 3;
-                    if (editor.isActive('heading', { level: 4 }))
-                        return 4;
-                    return 0;
-                })() }, paragraphOptions.map((option) => (React.createElement("option", { key: option.value, value: option.value }, option.label))))),
-            borderRight: true,
-        },
-        {
-            name: 'Giảm cỡ chữ',
-            action: () => {
-                const currentSize = parseInt(fontSizeInput) || 12;
-                const newSize = Math.max(1, currentSize - 1);
-                setFontSizeInput(String(newSize));
-                editor.chain().focus().setFontSize(`${newSize}px`).run();
-                forceUpdate((x) => x + 1);
-            },
-            icon: toolbar_svg.minus,
-        },
-        {
-            name: 'Cỡ chữ',
-            component: () => (React.createElement("div", { className: 'relative flex items-center' },
-                React.createElement("input", { type: 'number', className: 'w-10 p-0 text-xs leading-5 text-center bg-transparent bg-white border-gray-500 rounded-md focus:ring-0 focus:border-gray-500', value: fontSizeInput || isEditingFontSize ? fontSizeInput : 12, onFocus: () => {
-                        setIsEditingFontSize(true);
-                        const cur = getCurrentSelectionFontSize();
-                        const m = cur.match(/^(\d+(?:\.\d+)?)/);
-                        setFontSizeInput(m ? m[1] : '');
-                    }, onChange: (e) => {
-                        setFontSizeInput(e.target.value);
-                    }, onBlur: (e) => {
-                        requestAnimationFrame(() => setIsEditingFontSize(false));
-                        const raw = e.target.value.trim();
-                        if (!raw) {
-                            setFontSizeInput('');
-                            editor.chain().focus().setMark('textStyle', { fontSize: '12px' }).run();
-                        }
-                        else {
-                            let num = Number(raw);
-                            if (!Number.isNaN(num) && num > 0) {
-                                num = Math.min(500, num);
-                                editor.chain().focus().setFontSize(`${num}px`).run();
-                                setFontSizeInput(num.toString());
-                            }
-                            else {
-                                setFontSizeInput('12');
-                                editor.chain().focus().setFontSize('12px').run();
-                            }
-                        }
-                    }, onKeyDown: (e) => {
-                        if (e.key === 'Enter') {
-                            // eslint-disable-next-line @typescript-eslint/no-extra-semi
-                            ;
-                            e.target.blur();
-                        }
-                    } }),
-                isEditingFontSize && (React.createElement("div", { className: 'absolute left-0 top-[110%] z-50 w-16 max-h-60 overflow-auto rounded-md border bg-white shadow' }, fontSizeOptions.map((option) => (React.createElement("button", { key: option.value, type: 'button', className: 'w-full px-2 py-1 text-left text-[12px] hover:bg-gray-100', onMouseDown: (e) => {
-                        e.preventDefault();
-                        const numMatch = option.value.match(/^(\d+(?:\.\d+)?)/);
-                        setFontSizeInput(numMatch ? numMatch[1] : '');
-                        editor.chain().focus().setFontSize(option.value).run();
-                        setIsEditingFontSize(false);
-                    } }, option.label))))))),
-        },
-        {
-            name: 'Tăng cỡ chữ',
-            icon: toolbar_svg.plus,
-            borderRight: true,
-            action: () => {
-                const currentSize = parseInt(fontSizeInput) || 12;
-                const newSize = Math.min(500, currentSize + 1);
-                setFontSizeInput(String(newSize));
-                editor.chain().focus().setFontSize(`${newSize}px`).run();
-                forceUpdate((x) => x + 1);
-            },
-        },
-        {
-            name: 'In đậm',
-            icon: toolbar_svg.bold,
-            isActive: () => editor.isActive('bold'),
-            action: () => editor.chain().focus().toggleBold().run(),
-        },
-        {
-            name: 'In nghiêng',
-            icon: toolbar_svg.italic,
-            isActive: () => editor.isActive('italic'),
-            action: () => editor.chain().focus().toggleItalic().run(),
-        },
-        {
-            name: 'Gạch chân',
-            icon: toolbar_svg.underline,
-            isActive: () => editor.isActive('underline'),
-            action: () => editor.chain().focus().toggleUnderline().run(),
-        },
-        {
-            name: 'Màu chữ',
-            icon: toolbar_svg.textColor,
-            action: () => setShowColorPicker((s) => !s),
-            isActive: () => showColorPicker,
-            borderRight: true,
-        },
-        {
-            name: 'Biểu tượng cảm xúc',
-            icon: toolbar_svg.emoji,
-            action: () => setShowEmojiPicker(!showEmojiPicker),
-            borderRight: true,
-        },
-        {
-            name: 'Căn trái',
-            icon: toolbar_svg.alignLeft,
-            action: () => editor.chain().focus().setTextAlign('left').run(),
-            isActive: () => {
-                const isLeft = editor.isActive({ textAlign: 'left' });
-                const isCenter = editor.isActive({ textAlign: 'center' });
-                const isRight = editor.isActive({ textAlign: 'right' });
-                const isJustify = editor.isActive({ textAlign: 'justify' });
-                const noAlign = !isLeft && !isCenter && !isRight && !isJustify;
-                return isLeft || noAlign;
-            },
-        },
-        {
-            name: 'Căn giữa',
-            icon: toolbar_svg.alignMiddle,
-            action: () => editor.chain().focus().setTextAlign('center').run(),
-            isActive: () => editor.isActive({ textAlign: 'center' }),
-        },
-        {
-            name: 'Căn phải',
-            icon: toolbar_svg.alignRight,
-            action: () => editor.chain().focus().setTextAlign('right').run(),
-            isActive: () => editor.isActive({ textAlign: 'right' }),
-        },
-        {
-            name: 'Căn đều',
-            icon: toolbar_svg.alignJustify,
-            action: () => editor.chain().focus().setTextAlign('justify').run(),
-            isActive: () => editor.isActive({ textAlign: 'justify' }),
-            borderRight: true,
-        },
-        {
-            name: 'Trích dẫn',
-            icon: toolbar_svg.quotes,
-            isActive: () => editor.isActive('blockquote'),
-            isDisabled: () => disabledItems.has('Trích dẫn'),
-            action: () => editor.chain().focus().toggleBlockquote().run(),
-        },
-        {
-            name: 'Danh sách không thứ tự',
-            icon: toolbar_svg.unorderedList,
-            isActive: () => editor.isActive('bulletList'),
-            action: () => editor.chain().focus().toggleBulletList().run(),
-        },
-        {
-            name: 'Danh sách có thứ tự',
-            icon: toolbar_svg.orderList,
-            isActive: () => editor.isActive('orderedList'),
-            action: () => editor.chain().focus().toggleOrderedList().run(),
-            borderRight: true,
-        },
-        {
-            name: 'PDF',
-            icon: toolbar_svg.pdf,
-            action: () => setOpenPdfModal(true),
-        },
-        {
-            name: 'Hình ảnh',
-            icon: toolbar_svg.image,
-            action: async () => {
-                const input = document.createElement('input');
-                input.type = 'file';
-                input.accept = 'image/*';
-                input.onchange = async () => {
-                    var _a;
-                    const file = (_a = input.files) === null || _a === void 0 ? void 0 : _a[0];
-                    if (file) {
-                        const tempId = `img-${Date.now()}`;
-                        editor === null || editor === void 0 ? void 0 : editor.chain().focus().insertContent({
-                            type: 'image',
-                            attrs: {
-                                src: URL.createObjectURL(file),
-                                'data-loading': 'true',
-                                'data-temp-id': tempId,
-                                style: 'display: block; margin: 0 auto; width: auto; height: auto;',
-                            },
-                        }).setTextSelection(editor.state.selection.to + 1).run();
-                        const res = await uploadImage(file);
-                        if (res) {
-                            editor === null || editor === void 0 ? void 0 : editor.chain().command(({ tr }) => {
-                                let targetPos = null;
-                                tr.doc.descendants((node, pos) => {
-                                    if (node.type.name === 'image' && node.attrs['data-temp-id'] === tempId) {
-                                        targetPos = pos;
-                                        return false;
-                                    }
-                                    return true;
-                                });
-                                if (targetPos !== null) {
-                                    const node = tr.doc.nodeAt(targetPos);
-                                    if (node) {
-                                        tr.setNodeMarkup(targetPos, undefined, {
-                                            ...node.attrs,
-                                            src: res,
-                                            'data-loading': null,
-                                            'data-temp-id': null,
-                                            style: 'display: block; margin: 0 auto; width: auto; height: auto;',
-                                        });
-                                    }
-                                }
-                                return true;
-                            }).run();
-                        }
-                        else {
-                            editor === null || editor === void 0 ? void 0 : editor.chain().command(() => {
-                                var _a;
-                                const node = document.querySelector(`img[data-temp-id="${tempId}"]`);
-                                if (node) {
-                                    (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(node);
-                                }
-                                return true;
-                            }).run();
-                        }
-                    }
-                };
-                input.click();
-            },
-        },
-        {
-            name: 'Đường dẫn',
-            icon: toolbar_svg.link,
-            isActive: () => editor.isActive('link'),
-            action: addLink,
-        },
-    ];
-    const uploadImage = async (file) => {
-        try {
-            const formData = new FormData();
-            formData.append('file', file);
-            formData.append('projectId', 'test');
-            formData.append('moduleId', 'test');
-            const res = await uploadImageFunction(formData);
-            if (res) {
-                return res.link;
-            }
-            else {
-                return null;
-            }
-        }
-        catch (error) {
-            console.error(error);
-            return null;
-        }
-    };
-    return (React.createElement("div", { className: 'phx-editor' },
-        React.createElement(StyledEditorLayout, { editorHeight: height }),
-        label && React.createElement("label", { className: 'block mb-1 text-xs font-normal text-gray-700' }, label),
-        React.createElement("div", { className: 'relative z-30' },
-            React.createElement("div", { ref: toolbarRef, className: `flex flex-wrap gap-1 p-2 bg-gray-100 border border-gray-300 rounded-t-md
-            ${disabled ? 'pointer-events-none' : ''}
-          ` },
-                toolbarItems.map((item) => {
-                    var _a, _b, _c, _d;
-                    (_a = item.isActive) === null || _a === void 0 ? void 0 : _a.call(item);
-                    return item.component ? (React.createElement("div", { className: 'flex items-center gap-x-2' },
-                        item.component(),
-                        item.borderRight && React.createElement("div", { className: 'w-[1px] h-5 bg-gray-300' }))) : (React.createElement("div", { className: 'flex items-center gap-x-2' },
-                        React.createElement("button", { key: item.name, type: 'button', "data-color-button": 'true', onMouseDown: (e) => onMouseDownToolbar(e, item), className: `p-1 rounded-md duration-200 ${((_b = item.isActive) === null || _b === void 0 ? void 0 : _b.call(item)) ? 'bg-gray-200' : ''} ${((_c = item.isDisabled) === null || _c === void 0 ? void 0 : _c.call(item)) ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-200 cursor-pointer'}`, disabled: (_d = item.isDisabled) === null || _d === void 0 ? void 0 : _d.call(item) }, (item === null || item === void 0 ? void 0 : item.icon) && React.createElement("span", { dangerouslySetInnerHTML: { __html: item.icon } })),
-                        item.borderRight && React.createElement("div", { className: 'w-[1px] h-5 bg-gray-300' })));
-                }),
-                showEmojiPicker && (React.createElement("div", { ref: emojiPickerRef, className: 'fixed z-50 p-5 bg-white border shadow sm:absolute rounded-xl', style: {
-                        left: '50%',
-                        top: emojiPickerPos.top,
-                        transform: 'translateX(-50%)',
-                        ...(window.innerWidth >= 640 && {
-                            left: emojiPickerPos.left,
-                            transform: 'none',
-                        }),
-                    } },
-                    React.createElement(EmojiPicker, { emojiStyle: EmojiStyle.APPLE, searchPlaceHolder: 'T\u00ECm ki\u1EBFm', onEmojiClick: (emojiData) => editor === null || editor === void 0 ? void 0 : editor.chain().focus().insertContent(emojiData.emoji).run(), previewConfig: {
-                            showPreview: false,
-                        }, skinTonesDisabled: true, height: 350, width: 300 }))),
-                showColorPicker && (React.createElement("div", { ref: pickerRef, className: 'fixed z-50 p-5 bg-white border shadow sm:absolute rounded-xl', style: {
-                        left: '50%',
-                        top: pickerPos.top,
-                        transform: 'translateX(-50%)',
-                        ...(window.innerWidth >= 640 && {
-                            left: pickerPos.left,
-                            transform: 'none',
-                        }),
-                    } },
-                    React.createElement(HexAlphaColorPicker, { color: fontColor, onChange: (color) => {
-                            const norm = normalizeColor(color);
-                            setFontColor(norm);
-                            editor === null || editor === void 0 ? void 0 : editor.chain().focus().setColor(norm).setMark('textStyle', { color: `${norm} !important` }).run();
-                        } }),
-                    React.createElement("div", { className: 'flex items-center justify-center gap-2 mt-2' },
-                        React.createElement("div", { className: 'flex items-center gap-x-2 border border-gray-300 py-1.5 px-3 rounded-xl' },
-                            React.createElement("div", { className: 'w-6 h-6 border rounded ', style: { backgroundColor: fontColor.replace(/ !important$/, '') }, title: fontColor }),
-                            React.createElement("input", { type: 'text', className: 'p-0 border-none !ring-0 w-[144px]', value: fontColor.replace(/ !important$/, ''), onChange: (e) => {
-                                    const raw = e.target.value.startsWith('#')
-                                        ? e.target.value
-                                        : `#${e.target.value.replace(/^#/, '')}`;
-                                    const norm = normalizeColor(raw);
-                                    setFontColor(norm);
-                                    if (/^#([0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(norm)) {
-                                        editor === null || editor === void 0 ? void 0 : editor.chain().focus().setColor(norm).run();
-                                    }
-                                } }))))))),
-        React.createElement(EditorContent, { editor: editor }),
-        React.createElement(PHXModal, { onHide: () => {
-                setShowLinkInput(false);
-                reset();
-            }, show: showLinkInput, title: 'Ch\u00E8n \u0111\u01B0\u1EDDng li\u00EAn k\u1EBFt', onPrimaryClick: handleInsertLink, closeButton: true },
-            React.createElement(PHXInput, { error: !!errors.link, errorType: 'custom-message', errorMessageCustom: (_a = errors.link) === null || _a === void 0 ? void 0 : _a.message, register: {
-                    ...register('link', {
-                        pattern: { value: regexUrl, message: 'Đường dẫn không hợp lệ' },
-                        required: 'Vui lòng nhập đường dẫn',
-                    }),
-                }, label: 'Nh\u1EADp \u0111\u01B0\u1EDDng d\u1EABn', placeholder: 'https://example.com' })),
-        React.createElement(PHXModal, { disableSubmit: !pdfFile, show: openPdfModal, onHide: () => setOpenPdfModal(false), title: 'T\u1EA3i l\u00EAn t\u00E0i li\u1EC7u PDF', onPrimaryClick: () => {
-                if (pdfFile)
-                    handleConvertPdfToImage(pdfFile);
-            }, primaryLoading: loadingConvertPdf },
-            React.createElement(FormUpload, { fileName: pdfFile === null || pdfFile === void 0 ? void 0 : pdfFile.name, fileType: 'pdf', helpText: 'PDF, t\u1ED1i \u0111a 20MB', isHorizontalLayout: true, handleFileChange: (e) => {
-                    setPdfFile(e.target.files[0]);
-                } }))));
-}
-//# sourceMappingURL=TextEditor.js.map