phx-uikit 1.0.256 → 1.0.257

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

@@ -5,46 +5,28 @@ 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 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 { toolbar_svg } from './editor.constant';
+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';
-var Image = ImageExt.extend({
-    addAttributes: function () {
-        var _a;
-        return __assign(__assign({}, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.call(this)), { 'data-loading': {
-                "default": null,
-                renderHTML: function (attributes) {
-                    if (attributes['data-loading']) {
-                        return { 'data-loading': attributes['data-loading'] };
-                    }
-                    return {};
-                }
-            }, 'data-temp-id': {
-                "default": null,
-                renderHTML: function (attributes) {
-                    if (attributes['data-temp-id']) {
-                        return { 'data-temp-id': attributes['data-temp-id'] };
-                    }
-                    return {};
-                }
-            } });
-    }
-});
+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(_a) {
     var _this = this;
     var _b;
-    var initialData = _a.initialData, onChange = _a.onChange, apiCdnUpload = _a.apiCdnUpload, height = _a.height, label = _a.label;
+    var initialData = _a.initialData, onChange = _a.onChange, apiCdnUpload = _a.apiCdnUpload, height = _a.height, label = _a.label, placeholder = _a.placeholder;
     var _c = useState(null), editor = _c[0], setEditor = _c[1];
     var _d = useState(0), forceUpdate = _d[1];
     var _e = useState(false), showColorPicker = _e[0], setShowColorPicker = _e[1];
@@ -56,20 +38,23 @@ export default function TextEditor(_a) {
     var _h = useState(false), isEditingFontSize = _h[0], setIsEditingFontSize = _h[1];
     var _j = useState({
         left: 0,
-        top: 0
+        top: 0,
     }), pickerPos = _j[0], setPickerPos = _j[1];
     var _k = useState({
         left: 0,
-        top: 0
+        top: 0,
     }), emojiPickerPos = _k[0], setEmojiPickerPos = _k[1];
     var _l = useState(false), showLinkInput = _l[0], setShowLinkInput = _l[1];
     var _m = useState(new Set()), disabledItems = _m[0], setDisabledItems = _m[1];
     var _o = useState(false), showEmojiPicker = _o[0], setShowEmojiPicker = _o[1];
-    var _p = useForm({
+    var _p = useState(false), openPdfModal = _p[0], setOpenPdfModal = _p[1];
+    var _q = useState(null), pdfFile = _q[0], setPdfFile = _q[1];
+    var _r = useForm({
         defaultValues: {
-            link: ''
-        }
-    }), errors = _p.formState.errors, register = _p.register, handleSubmit = _p.handleSubmit, reset = _p.reset;
+            link: '',
+        },
+    }), errors = _r.formState.errors, register = _r.register, handleSubmit = _r.handleSubmit, reset = _r.reset;
+    var _s = useState(false), loadingConvertPdf = _s[0], setLoadingConvertPdf = _s[1];
     // eslint-disable-next-line no-useless-escape
     var regexUrl = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
     var normalizeColor = function (val) {
@@ -131,6 +116,14 @@ export default function TextEditor(_a) {
             return '';
         }
     }, [editor]);
+    var isHtmlEmpty = function (html) {
+        var hasImage = /<img\b[^>]*>/i.test(html);
+        var text = html
+            .replace(/<[^>]*>/g, '')
+            .replace(/&nbsp;/g, '')
+            .trim();
+        return text === '' && !hasImage;
+    };
     var getCurrentSelectionColor = function () {
         var _a;
         try {
@@ -161,7 +154,7 @@ export default function TextEditor(_a) {
             switch (_a.label) {
                 case 0: return [4 /*yield*/, fetch(apiCdnUpload, {
                         method: 'POST',
-                        body: formData
+                        body: formData,
                     })];
                 case 1:
                     response = _a.sent();
@@ -172,37 +165,130 @@ export default function TextEditor(_a) {
             }
         });
     }); };
+    var handleConvertPdfToImage = function (file) { return __awaiter(_this, void 0, void 0, function () {
+        var PDFJS, fileURL, pdfDoc_1, numPages, uploadTasks, _loop_1, i, results, BATCH_SIZE, totalUploadTasks, i, batch, batchResults, sorted, content;
+        var _this = this;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setLoadingConvertPdf(true);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, , 7, 8]);
+                    PDFJS = window.pdfjsLib;
+                    fileURL = URL.createObjectURL(file);
+                    return [4 /*yield*/, PDFJS.getDocument({ url: fileURL }).promise];
+                case 2:
+                    pdfDoc_1 = _a.sent();
+                    numPages = pdfDoc_1.numPages;
+                    uploadTasks = [];
+                    _loop_1 = function (i) {
+                        uploadTasks.push(function () { return __awaiter(_this, void 0, void 0, function () {
+                            var page, viewport, canvas, context, blob, fileName, imageFile, link;
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, pdfDoc_1.getPage(i)];
+                                    case 1:
+                                        page = _a.sent();
+                                        viewport = page.getViewport({ scale: 2 });
+                                        canvas = document.createElement('canvas');
+                                        context = canvas.getContext('2d');
+                                        canvas.width = viewport.width;
+                                        canvas.height = viewport.height;
+                                        return [4 /*yield*/, page.render({ canvasContext: context, viewport: viewport }).promise];
+                                    case 2:
+                                        _a.sent();
+                                        return [4 /*yield*/, new Promise(function (resolve) { return canvas.toBlob(function (b) { return resolve(b); }, 'image/webp'); })];
+                                    case 3:
+                                        blob = _a.sent();
+                                        fileName = "".concat(file.name.replace(/\.[^/.]+$/, ''), "-page-").concat(i, ".webp");
+                                        imageFile = new File([blob], fileName, { type: 'image/webp' });
+                                        return [4 /*yield*/, uploadImage(imageFile)];
+                                    case 4:
+                                        link = _a.sent();
+                                        return [2 /*return*/, { index: i, link: link }];
+                                }
+                            });
+                        }); });
+                    };
+                    for (i = 1; i <= numPages; i++) {
+                        _loop_1(i);
+                    }
+                    results = [];
+                    BATCH_SIZE = 5;
+                    totalUploadTasks = uploadTasks.length;
+                    i = 0;
+                    _a.label = 3;
+                case 3:
+                    if (!(i < totalUploadTasks)) return [3 /*break*/, 6];
+                    batch = uploadTasks.slice(i, i + BATCH_SIZE);
+                    return [4 /*yield*/, Promise.all(batch.map(function (fn) { return fn(); }))];
+                case 4:
+                    batchResults = _a.sent();
+                    results.push.apply(results, batchResults);
+                    _a.label = 5;
+                case 5:
+                    i += BATCH_SIZE;
+                    return [3 /*break*/, 3];
+                case 6:
+                    sorted = results.filter(function (r) { return r.link; }).sort(function (a, b) { return a.index - b.index; });
+                    content = sorted.map(function (_a) {
+                        var link = _a.link;
+                        return ({
+                            type: 'image',
+                            attrs: { src: link },
+                        });
+                    });
+                    editor === null || editor === void 0 ? void 0 : editor.chain().focus().insertContent(content).run();
+                    return [3 /*break*/, 8];
+                case 7:
+                    setLoadingConvertPdf(false);
+                    setOpenPdfModal(false);
+                    setPdfFile(null);
+                    return [7 /*endfinally*/];
+                case 8: return [2 /*return*/];
+            }
+        });
+    }); };
+    var normalizeHtml = function (html) {
+        return html.replace(/<p><\/p>/g, emptyParagraph);
+    };
     useEffect(function () {
         var e = new Editor({
             content: initialData,
             extensions: [
+                Placeholder.configure({
+                    placeholder: placeholder,
+                }),
                 TextStyle,
                 FontSize,
                 Color,
                 StarterKit.configure({
-                    heading: false
+                    heading: false,
                 }),
                 Underline,
-                Image,
+                CustomImage,
                 Heading.configure({ levels: [1, 2, 3, 4] }),
                 Link.configure({ openOnClick: false }),
                 TextAlign.configure({
-                    types: ['heading', 'paragraph']
+                    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"
-                }
-            }
+                    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', function () {
             forceUpdate(function (n) { return n + 1; });
         });
         e.on('update', function (_a) {
-            var _b;
             var editor = _a.editor;
-            onChange === null || onChange === void 0 ? void 0 : onChange((_b = editor.getHTML()) !== null && _b !== void 0 ? _b : '');
+            var content = normalizeHtml(editor.getHTML());
+            var isEmpty = isHtmlEmpty(content);
+            onChange === null || onChange === void 0 ? void 0 : onChange(!isEmpty ? content : '');
         });
         setEditor(e);
         return function () {
@@ -234,14 +320,14 @@ export default function TextEditor(_a) {
         if (!editor)
             return;
         var handlePaste = function (event) { return __awaiter(_this, void 0, void 0, function () {
-            var items, _loop_1, i, state_1;
+            var items, _loop_2, i, state_1;
             var _a;
             return __generator(this, function (_b) {
                 items = (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.items;
                 if (!items)
                     return [2 /*return*/];
                 event.preventDefault();
-                _loop_1 = function (i) {
+                _loop_2 = function (i) {
                     var item = items[i];
                     if (item.type.indexOf('image') !== -1) {
                         var file = item.getAsFile();
@@ -255,8 +341,8 @@ export default function TextEditor(_a) {
                                 attrs: {
                                     src: tempUrl_1,
                                     'data-loading': 'true',
-                                    'data-temp-id': tempId_1
-                                }
+                                    'data-temp-id': tempId_1,
+                                },
                             }).run();
                             uploadImage(file)
                                 .then(function (res) {
@@ -281,7 +367,8 @@ export default function TextEditor(_a) {
                                     }
                                     return false;
                                 }).run();
-                            })["catch"](function (error) {
+                            })
+                                .catch(function (error) {
                                 console.error('Failed to upload pasted image:', error);
                                 editor === null || editor === void 0 ? void 0 : editor.chain().command(function (_a) {
                                     var tr = _a.tr;
@@ -294,11 +381,12 @@ export default function TextEditor(_a) {
                                         return true;
                                     });
                                     if (targetPos !== null) {
-                                        tr["delete"](targetPos, targetPos + 1);
+                                        tr.delete(targetPos, targetPos + 1);
                                     }
                                     return true;
                                 }).run();
-                            })["finally"](function () {
+                            })
+                                .finally(function () {
                                 URL.revokeObjectURL(tempUrl_1);
                             });
                         }
@@ -310,7 +398,7 @@ export default function TextEditor(_a) {
                     }
                 };
                 for (i = 0; i < items.length; i++) {
-                    state_1 = _loop_1(i);
+                    state_1 = _loop_2(i);
                     if (state_1 === "break")
                         break;
                 }
@@ -333,6 +421,8 @@ export default function TextEditor(_a) {
             var 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);
@@ -386,6 +476,13 @@ export default function TextEditor(_a) {
             editor.off('selectionUpdate', onSelection);
         };
     }, [editor, isEditingFontSize, getCurrentSelectionFontSize]);
+    useEffect(function () {
+        if (!window.pdfjsLib) {
+            var 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(function () {
         if (!editor)
             return;
@@ -411,10 +508,12 @@ export default function TextEditor(_a) {
         var btnRect = e.currentTarget.getBoundingClientRect();
         var 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
+                    top: btnRect.bottom - contRect.top + 8,
                 });
             }
             var current = getCurrentSelectionColor();
@@ -427,7 +526,7 @@ export default function TextEditor(_a) {
             if (contRect) {
                 setEmojiPickerPos({
                     left: btnRect.left - contRect.left - 170,
-                    top: btnRect.bottom - contRect.top + 8
+                    top: btnRect.bottom - contRect.top + 8,
                 });
             }
             setShowEmojiPicker(!showEmojiPicker);
@@ -490,7 +589,7 @@ export default function TextEditor(_a) {
                         return 4;
                     return 0;
                 })() }, paragraphOptions.map(function (option) { return (React.createElement("option", { key: option.value, value: option.value }, option.label)); }))); },
-            borderRight: true
+            borderRight: true,
         },
         {
             name: 'Giảm cỡ chữ',
@@ -501,7 +600,7 @@ export default function TextEditor(_a) {
                 editor.chain().focus().setFontSize("".concat(newSize, "px")).run();
                 forceUpdate(function (x) { return x + 1; });
             },
-            icon: toolbar_svg.minus
+            icon: toolbar_svg.minus,
         },
         {
             name: 'Cỡ chữ',
@@ -545,7 +644,7 @@ export default function TextEditor(_a) {
                         setFontSizeInput(numMatch ? numMatch[1] : '');
                         editor.chain().focus().setFontSize(option.value).run();
                         setIsEditingFontSize(false);
-                    } }, option.label)); }))))); }
+                    } }, option.label)); }))))); },
         },
         {
             name: 'Tăng cỡ chữ',
@@ -557,32 +656,38 @@ export default function TextEditor(_a) {
                 setFontSizeInput(String(newSize));
                 editor.chain().focus().setFontSize("".concat(newSize, "px")).run();
                 forceUpdate(function (x) { return x + 1; });
-            }
+            },
         },
         {
             name: 'In đậm',
             icon: toolbar_svg.bold,
             isActive: function () { return editor.isActive('bold'); },
-            action: function () { return editor.chain().focus().toggleBold().run(); }
+            action: function () { return editor.chain().focus().toggleBold().run(); },
         },
         {
             name: 'In nghiêng',
             icon: toolbar_svg.italic,
             isActive: function () { return editor.isActive('italic'); },
-            action: function () { return editor.chain().focus().toggleItalic().run(); }
+            action: function () { return editor.chain().focus().toggleItalic().run(); },
         },
         {
             name: 'Gạch chân',
             icon: toolbar_svg.underline,
             isActive: function () { return editor.isActive('underline'); },
-            action: function () { return editor.chain().focus().toggleUnderline().run(); }
+            action: function () { return editor.chain().focus().toggleUnderline().run(); },
         },
         {
             name: 'Màu chữ',
             icon: toolbar_svg.textColor,
             action: function () { return setShowColorPicker(function (s) { return !s; }); },
             isActive: function () { return showColorPicker; },
-            borderRight: true
+            borderRight: true,
+        },
+        {
+            name: 'Biểu tượng cảm xúc',
+            icon: toolbar_svg.emoji,
+            action: function () { return setShowEmojiPicker(!showEmojiPicker); },
+            borderRight: true,
         },
         {
             name: 'Căn trái',
@@ -595,46 +700,51 @@ export default function TextEditor(_a) {
                 var isJustify = editor.isActive({ textAlign: 'justify' });
                 var noAlign = !isLeft && !isCenter && !isRight && !isJustify;
                 return isLeft || noAlign;
-            }
+            },
         },
         {
             name: 'Căn giữa',
             icon: toolbar_svg.alignMiddle,
             action: function () { return editor.chain().focus().setTextAlign('center').run(); },
-            isActive: function () { return editor.isActive({ textAlign: 'center' }); }
+            isActive: function () { return editor.isActive({ textAlign: 'center' }); },
         },
         {
             name: 'Căn phải',
             icon: toolbar_svg.alignRight,
             action: function () { return editor.chain().focus().setTextAlign('right').run(); },
-            isActive: function () { return editor.isActive({ textAlign: 'right' }); }
+            isActive: function () { return editor.isActive({ textAlign: 'right' }); },
         },
         {
             name: 'Căn đều',
             icon: toolbar_svg.alignJustify,
             action: function () { return editor.chain().focus().setTextAlign('justify').run(); },
             isActive: function () { return editor.isActive({ textAlign: 'justify' }); },
-            borderRight: true
+            borderRight: true,
         },
         {
             name: 'Trích dẫn',
             icon: toolbar_svg.quotes,
             isActive: function () { return editor.isActive('blockquote'); },
             isDisabled: function () { return disabledItems.has('Trích dẫn'); },
-            action: function () { return editor.chain().focus().toggleBlockquote().run(); }
+            action: function () { return editor.chain().focus().toggleBlockquote().run(); },
         },
         {
             name: 'Danh sách không thứ tự',
             icon: toolbar_svg.unorderedList,
             isActive: function () { return editor.isActive('bulletList'); },
-            action: function () { return editor.chain().focus().toggleBulletList().run(); }
+            action: function () { return editor.chain().focus().toggleBulletList().run(); },
         },
         {
             name: 'Danh sách có thứ tự',
             icon: toolbar_svg.orderList,
             isActive: function () { return editor.isActive('orderedList'); },
             action: function () { return editor.chain().focus().toggleOrderedList().run(); },
-            borderRight: true
+            borderRight: true,
+        },
+        {
+            name: 'PDF',
+            icon: toolbar_svg.pdf,
+            action: function () { return setOpenPdfModal(true); },
         },
         {
             name: 'Hình ảnh',
@@ -660,9 +770,10 @@ export default function TextEditor(_a) {
                                         attrs: {
                                             src: URL.createObjectURL(file),
                                             'data-loading': 'true',
-                                            'data-temp-id': tempId_2
-                                        }
-                                    }).run();
+                                            'data-temp-id': tempId_2,
+                                            style: 'display: block; margin: 0 auto; width: auto; height: auto;',
+                                        },
+                                    }).setTextSelection(editor.state.selection.to + 1).run();
                                     return [4 /*yield*/, uploadImage(file)];
                                 case 1:
                                     res_1 = _b.sent();
@@ -680,7 +791,7 @@ export default function TextEditor(_a) {
                                             if (targetPos !== null) {
                                                 var node = tr.doc.nodeAt(targetPos);
                                                 if (node) {
-                                                    tr.setNodeMarkup(targetPos, undefined, __assign(__assign({}, node.attrs), { src: res_1, 'data-loading': null, 'data-temp-id': null }));
+                                                    tr.setNodeMarkup(targetPos, undefined, __assign(__assign({}, node.attrs), { src: res_1, 'data-loading': null, 'data-temp-id': null, style: 'display: block; margin: 0 auto; width: auto; height: auto;' }));
                                                 }
                                             }
                                             return true;
@@ -704,19 +815,13 @@ export default function TextEditor(_a) {
                     input.click();
                     return [2 /*return*/];
                 });
-            }); }
+            }); },
         },
         {
             name: 'Đường dẫn',
             icon: toolbar_svg.link,
             isActive: function () { return editor.isActive('link'); },
             action: addLink,
-            borderRight: true
-        },
-        {
-            name: 'Biểu tượng cảm xúc',
-            icon: toolbar_svg.emoji,
-            action: function () { return setShowEmojiPicker(!showEmojiPicker); }
         },
     ];
     var uploadImage = function (file) { return __awaiter(_this, void 0, void 0, function () {
@@ -735,6 +840,9 @@ export default function TextEditor(_a) {
                     if (res) {
                         return [2 /*return*/, res.link];
                     }
+                    else {
+                        return [2 /*return*/, null];
+                    }
                     return [3 /*break*/, 3];
                 case 2:
                     error_1 = _a.sent();
@@ -747,7 +855,7 @@ export default function TextEditor(_a) {
     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: 'sticky top-0 z-30' },
+        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' },
                 toolbarItems.map(function (item) {
                     var _a, _b, _c, _d;
@@ -760,14 +868,14 @@ export default function TextEditor(_a) {
                 }),
                 showEmojiPicker && (React.createElement("div", { ref: emojiPickerRef, className: 'fixed z-50 p-5 bg-white border shadow sm:absolute rounded-xl', style: __assign({ left: '50%', top: emojiPickerPos.top, transform: 'translateX(-50%)' }, (window.innerWidth >= 640 && {
                         left: emojiPickerPos.left,
-                        transform: 'none'
+                        transform: 'none',
                     })) },
                     React.createElement(EmojiPicker, { emojiStyle: EmojiStyle.APPLE, searchPlaceHolder: 'T\u00ECm ki\u1EBFm', onEmojiClick: function (emojiData) { return editor === null || editor === void 0 ? void 0 : editor.chain().focus().insertContent(emojiData.emoji).run(); }, previewConfig: {
-                            showPreview: false
-                        }, skinTonesDisabled: true }))),
+                            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: __assign({ left: '50%', top: pickerPos.top, transform: 'translateX(-50%)' }, (window.innerWidth >= 640 && {
                         left: pickerPos.left,
-                        transform: 'none'
+                        transform: 'none',
                     })) },
                     React.createElement(HexAlphaColorPicker, { color: fontColor, onChange: function (color) {
                             var norm = normalizeColor(color);
@@ -794,7 +902,14 @@ export default function TextEditor(_a) {
             }, 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: (_b = errors.link) === null || _b === void 0 ? void 0 : _b.message, register: __assign({}, 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' }))));
+                    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: function () { return setOpenPdfModal(false); }, title: 'T\u1EA3i l\u00EAn t\u00E0i li\u1EC7u PDF', onPrimaryClick: function () {
+                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: function (e) {
+                    setPdfFile(e.target.files[0]);
+                } }))));
 }
 //# sourceMappingURL=TextEditor.js.map