phx-uikit 1.0.256 → 1.0.258

package/dist/cjs/components/TextEditor/TextEditor.js

@@ -1,13 +1,14 @@
 "use strict";
 'use client';
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = TextEditor;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importDefault(require("react"));
 var react_2 = require("react");
 var react_3 = require("@tiptap/react");
 var starter_kit_1 = tslib_1.__importDefault(require("@tiptap/starter-kit"));
 var extension_underline_1 = tslib_1.__importDefault(require("@tiptap/extension-underline"));
-var extension_image_1 = tslib_1.__importDefault(require("@tiptap/extension-image"));
+// import ImageExt from '@tiptap/extension-image'
 var extension_heading_1 = tslib_1.__importDefault(require("@tiptap/extension-heading"));
 var extension_link_1 = tslib_1.__importDefault(require("@tiptap/extension-link"));
 var extension_text_align_1 = tslib_1.__importDefault(require("@tiptap/extension-text-align"));
@@ -21,32 +22,14 @@ var Modal_1 = require("../Modal/Modal");
 var Input_1 = require("../Input/Input");
 var EditorStyle_1 = tslib_1.__importDefault(require("./styles/EditorStyle"));
 var emoji_picker_react_1 = tslib_1.__importStar(require("emoji-picker-react"));
-var Image = extension_image_1["default"].extend({
-    addAttributes: function () {
-        var _a;
-        return tslib_1.__assign(tslib_1.__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 {};
-                }
-            } });
-    }
-});
+var extension_placeholder_1 = tslib_1.__importDefault(require("@tiptap/extension-placeholder"));
+var FormUpload_1 = require("../UploadFile/FormUpload");
+var CustomImage_1 = tslib_1.__importDefault(require("./custom/CustomImage"));
+var SelectionHighlight_1 = require("./custom/SelectionHighlight");
 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 = (0, react_2.useState)(null), editor = _c[0], setEditor = _c[1];
     var _d = (0, react_2.useState)(0), forceUpdate = _d[1];
     var _e = (0, react_2.useState)(false), showColorPicker = _e[0], setShowColorPicker = _e[1];
@@ -58,20 +41,23 @@ function TextEditor(_a) {
     var _h = (0, react_2.useState)(false), isEditingFontSize = _h[0], setIsEditingFontSize = _h[1];
     var _j = (0, react_2.useState)({
         left: 0,
-        top: 0
+        top: 0,
     }), pickerPos = _j[0], setPickerPos = _j[1];
     var _k = (0, react_2.useState)({
         left: 0,
-        top: 0
+        top: 0,
     }), emojiPickerPos = _k[0], setEmojiPickerPos = _k[1];
     var _l = (0, react_2.useState)(false), showLinkInput = _l[0], setShowLinkInput = _l[1];
     var _m = (0, react_2.useState)(new Set()), disabledItems = _m[0], setDisabledItems = _m[1];
     var _o = (0, react_2.useState)(false), showEmojiPicker = _o[0], setShowEmojiPicker = _o[1];
-    var _p = (0, react_hook_form_1.useForm)({
+    var _p = (0, react_2.useState)(false), openPdfModal = _p[0], setOpenPdfModal = _p[1];
+    var _q = (0, react_2.useState)(null), pdfFile = _q[0], setPdfFile = _q[1];
+    var _r = (0, react_hook_form_1.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 = (0, react_2.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) {
@@ -133,6 +119,14 @@ 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 {
@@ -163,7 +157,7 @@ function TextEditor(_a) {
             switch (_a.label) {
                 case 0: return [4 /*yield*/, fetch(apiCdnUpload, {
                         method: 'POST',
-                        body: formData
+                        body: formData,
                     })];
                 case 1:
                     response = _a.sent();
@@ -174,37 +168,130 @@ function TextEditor(_a) {
             }
         });
     }); };
+    var handleConvertPdfToImage = function (file) { return tslib_1.__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 tslib_1.__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 tslib_1.__awaiter(_this, void 0, void 0, function () {
+                            var page, viewport, canvas, context, blob, fileName, imageFile, link;
+                            return tslib_1.__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, editor_constant_1.emptyParagraph);
+    };
     (0, react_2.useEffect)(function () {
         var e = new react_3.Editor({
             content: initialData,
             extensions: [
+                extension_placeholder_1.default.configure({
+                    placeholder: placeholder,
+                }),
                 extension_text_style_1.TextStyle,
                 extension_text_style_1.FontSize,
-                extension_color_1["default"],
-                starter_kit_1["default"].configure({
-                    heading: false
+                extension_color_1.default,
+                starter_kit_1.default.configure({
+                    heading: false,
                 }),
-                extension_underline_1["default"],
-                Image,
-                extension_heading_1["default"].configure({ levels: [1, 2, 3, 4] }),
-                extension_link_1["default"].configure({ openOnClick: false }),
-                extension_text_align_1["default"].configure({
-                    types: ['heading', 'paragraph']
+                extension_underline_1.default,
+                CustomImage_1.default,
+                extension_heading_1.default.configure({ levels: [1, 2, 3, 4] }),
+                extension_link_1.default.configure({ openOnClick: false }),
+                extension_text_align_1.default.configure({
+                    types: ['heading', 'paragraph', 'image'],
                 }),
+                SelectionHighlight_1.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 () {
@@ -236,14 +323,14 @@ function TextEditor(_a) {
         if (!editor)
             return;
         var handlePaste = function (event) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-            var items, _loop_1, i, state_1;
+            var items, _loop_2, i, state_1;
             var _a;
             return tslib_1.__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();
@@ -257,8 +344,8 @@ 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) {
@@ -283,7 +370,8 @@ 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;
@@ -296,11 +384,12 @@ 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);
                             });
                         }
@@ -312,7 +401,7 @@ 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;
                 }
@@ -335,6 +424,8 @@ 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);
@@ -388,6 +479,13 @@ function TextEditor(_a) {
             editor.off('selectionUpdate', onSelection);
         };
     }, [editor, isEditingFontSize, getCurrentSelectionFontSize]);
+    (0, react_2.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);
+        }
+    }, []);
     (0, react_2.useEffect)(function () {
         if (!editor)
             return;
@@ -396,7 +494,7 @@ function TextEditor(_a) {
         setFontSizeInput(m ? m[1] : '');
     }, [editor]);
     if (!editor)
-        return react_1["default"].createElement("p", null, "Loading editor...");
+        return react_1.default.createElement("p", null, "Loading editor...");
     var addLink = function () {
         setShowLinkInput(true);
     };
@@ -413,10 +511,12 @@ 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();
@@ -429,7 +529,7 @@ 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);
@@ -472,7 +572,7 @@ function TextEditor(_a) {
         {
             name: 'Văn bản',
             isDisabled: function () { return disabledItems.has('Văn bản'); },
-            component: function () { return (react_1["default"].createElement("select", { className: "w-24 text-xs leading-5 focus:ring-0 bg-transparent border-none rounded-md py-1 px-2 duration-200 ".concat(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: function (e) {
+            component: function () { return (react_1.default.createElement("select", { className: "w-24 text-xs leading-5 focus:ring-0 bg-transparent border-none rounded-md py-1 px-2 duration-200 ".concat(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: function (e) {
                     var level = Number(e.target.value);
                     if (level === 0) {
                         editor.chain().focus().setParagraph().run();
@@ -491,8 +591,8 @@ function TextEditor(_a) {
                     if (editor.isActive('heading', { level: 4 }))
                         return 4;
                     return 0;
-                })() }, paragraphOptions.map(function (option) { return (react_1["default"].createElement("option", { key: option.value, value: option.value }, option.label)); }))); },
-            borderRight: true
+                })() }, paragraphOptions.map(function (option) { return (react_1.default.createElement("option", { key: option.value, value: option.value }, option.label)); }))); },
+            borderRight: true,
         },
         {
             name: 'Giảm cỡ chữ',
@@ -503,12 +603,12 @@ function TextEditor(_a) {
                 editor.chain().focus().setFontSize("".concat(newSize, "px")).run();
                 forceUpdate(function (x) { return x + 1; });
             },
-            icon: editor_constant_1.toolbar_svg.minus
+            icon: editor_constant_1.toolbar_svg.minus,
         },
         {
             name: 'Cỡ chữ',
-            component: function () { return (react_1["default"].createElement("div", { className: 'relative flex items-center' },
-                react_1["default"].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: function () {
+            component: function () { return (react_1.default.createElement("div", { className: 'relative flex items-center' },
+                react_1.default.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: function () {
                         setIsEditingFontSize(true);
                         var cur = getCurrentSelectionFontSize();
                         var m = cur.match(/^(\d+(?:\.\d+)?)/);
@@ -541,13 +641,13 @@ function TextEditor(_a) {
                             e.target.blur();
                         }
                     } }),
-                isEditingFontSize && (react_1["default"].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(function (option) { return (react_1["default"].createElement("button", { key: option.value, type: 'button', className: 'w-full px-2 py-1 text-left text-[12px] hover:bg-gray-100', onMouseDown: function (e) {
+                isEditingFontSize && (react_1.default.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(function (option) { return (react_1.default.createElement("button", { key: option.value, type: 'button', className: 'w-full px-2 py-1 text-left text-[12px] hover:bg-gray-100', onMouseDown: function (e) {
                         e.preventDefault();
                         var numMatch = option.value.match(/^(\d+(?:\.\d+)?)/);
                         setFontSizeInput(numMatch ? numMatch[1] : '');
                         editor.chain().focus().setFontSize(option.value).run();
                         setIsEditingFontSize(false);
-                    } }, option.label)); }))))); }
+                    } }, option.label)); }))))); },
         },
         {
             name: 'Tăng cỡ chữ',
@@ -559,32 +659,38 @@ function TextEditor(_a) {
                 setFontSizeInput(String(newSize));
                 editor.chain().focus().setFontSize("".concat(newSize, "px")).run();
                 forceUpdate(function (x) { return x + 1; });
-            }
+            },
         },
         {
             name: 'In đậm',
             icon: editor_constant_1.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: editor_constant_1.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: editor_constant_1.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: editor_constant_1.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: editor_constant_1.toolbar_svg.emoji,
+            action: function () { return setShowEmojiPicker(!showEmojiPicker); },
+            borderRight: true,
         },
         {
             name: 'Căn trái',
@@ -597,46 +703,51 @@ function TextEditor(_a) {
                 var isJustify = editor.isActive({ textAlign: 'justify' });
                 var noAlign = !isLeft && !isCenter && !isRight && !isJustify;
                 return isLeft || noAlign;
-            }
+            },
         },
         {
             name: 'Căn giữa',
             icon: editor_constant_1.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: editor_constant_1.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: editor_constant_1.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: editor_constant_1.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: editor_constant_1.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: editor_constant_1.toolbar_svg.orderList,
             isActive: function () { return editor.isActive('orderedList'); },
             action: function () { return editor.chain().focus().toggleOrderedList().run(); },
-            borderRight: true
+            borderRight: true,
+        },
+        {
+            name: 'PDF',
+            icon: editor_constant_1.toolbar_svg.pdf,
+            action: function () { return setOpenPdfModal(true); },
         },
         {
             name: 'Hình ảnh',
@@ -662,9 +773,10 @@ 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();
@@ -682,7 +794,7 @@ function TextEditor(_a) {
                                             if (targetPos !== null) {
                                                 var node = tr.doc.nodeAt(targetPos);
                                                 if (node) {
-                                                    tr.setNodeMarkup(targetPos, undefined, tslib_1.__assign(tslib_1.__assign({}, node.attrs), { src: res_1, 'data-loading': null, 'data-temp-id': null }));
+                                                    tr.setNodeMarkup(targetPos, undefined, tslib_1.__assign(tslib_1.__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;
@@ -706,19 +818,13 @@ function TextEditor(_a) {
                     input.click();
                     return [2 /*return*/];
                 });
-            }); }
+            }); },
         },
         {
             name: 'Đường dẫn',
             icon: editor_constant_1.toolbar_svg.link,
             isActive: function () { return editor.isActive('link'); },
             action: addLink,
-            borderRight: true
-        },
-        {
-            name: 'Biểu tượng cảm xúc',
-            icon: editor_constant_1.toolbar_svg.emoji,
-            action: function () { return setShowEmojiPicker(!showEmojiPicker); }
         },
     ];
     var uploadImage = function (file) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
@@ -737,6 +843,9 @@ 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();
@@ -746,40 +855,40 @@ function TextEditor(_a) {
             }
         });
     }); };
-    return (react_1["default"].createElement("div", { className: 'phx-editor' },
-        react_1["default"].createElement(EditorStyle_1["default"], { editorHeight: height }),
-        label && react_1["default"].createElement("label", { className: 'block mb-1 text-xs font-normal text-gray-700' }, label),
-        react_1["default"].createElement("div", { className: 'sticky top-0 z-30' },
-            react_1["default"].createElement("div", { ref: toolbarRef, className: 'flex flex-wrap gap-1 p-2 bg-gray-100 border border-gray-300 rounded-t-md' },
+    return (react_1.default.createElement("div", { className: 'phx-editor' },
+        react_1.default.createElement(EditorStyle_1.default, { editorHeight: height }),
+        label && react_1.default.createElement("label", { className: 'block mb-1 text-xs font-normal text-gray-700' }, label),
+        react_1.default.createElement("div", { className: 'relative z-30' },
+            react_1.default.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;
                     (_a = item.isActive) === null || _a === void 0 ? void 0 : _a.call(item);
-                    return item.component ? (react_1["default"].createElement("div", { className: 'flex items-center gap-x-2' },
+                    return item.component ? (react_1.default.createElement("div", { className: 'flex items-center gap-x-2' },
                         item.component(),
-                        item.borderRight && react_1["default"].createElement("div", { className: 'w-[1px] h-5 bg-gray-300' }))) : (react_1["default"].createElement("div", { className: 'flex items-center gap-x-2' },
-                        react_1["default"].createElement("button", { key: item.name, type: 'button', "data-color-button": 'true', onMouseDown: function (e) { return onMouseDownToolbar(e, item); }, className: "p-1 rounded-md duration-200 ".concat(((_b = item.isActive) === null || _b === void 0 ? void 0 : _b.call(item)) ? 'bg-gray-200' : '', " ").concat(((_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_1["default"].createElement("span", { dangerouslySetInnerHTML: { __html: item.icon } })),
-                        item.borderRight && react_1["default"].createElement("div", { className: 'w-[1px] h-5 bg-gray-300' })));
+                        item.borderRight && react_1.default.createElement("div", { className: 'w-[1px] h-5 bg-gray-300' }))) : (react_1.default.createElement("div", { className: 'flex items-center gap-x-2' },
+                        react_1.default.createElement("button", { key: item.name, type: 'button', "data-color-button": 'true', onMouseDown: function (e) { return onMouseDownToolbar(e, item); }, className: "p-1 rounded-md duration-200 ".concat(((_b = item.isActive) === null || _b === void 0 ? void 0 : _b.call(item)) ? 'bg-gray-200' : '', " ").concat(((_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_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: item.icon } })),
+                        item.borderRight && react_1.default.createElement("div", { className: 'w-[1px] h-5 bg-gray-300' })));
                 }),
-                showEmojiPicker && (react_1["default"].createElement("div", { ref: emojiPickerRef, className: 'fixed z-50 p-5 bg-white border shadow sm:absolute rounded-xl', style: tslib_1.__assign({ left: '50%', top: emojiPickerPos.top, transform: 'translateX(-50%)' }, (window.innerWidth >= 640 && {
+                showEmojiPicker && (react_1.default.createElement("div", { ref: emojiPickerRef, className: 'fixed z-50 p-5 bg-white border shadow sm:absolute rounded-xl', style: tslib_1.__assign({ left: '50%', top: emojiPickerPos.top, transform: 'translateX(-50%)' }, (window.innerWidth >= 640 && {
                         left: emojiPickerPos.left,
-                        transform: 'none'
+                        transform: 'none',
                     })) },
-                    react_1["default"].createElement(emoji_picker_react_1["default"], { emojiStyle: emoji_picker_react_1.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 }))),
-                showColorPicker && (react_1["default"].createElement("div", { ref: pickerRef, className: 'fixed z-50 p-5 bg-white border shadow sm:absolute rounded-xl', style: tslib_1.__assign({ left: '50%', top: pickerPos.top, transform: 'translateX(-50%)' }, (window.innerWidth >= 640 && {
+                    react_1.default.createElement(emoji_picker_react_1.default, { emojiStyle: emoji_picker_react_1.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, height: 350, width: 300 }))),
+                showColorPicker && (react_1.default.createElement("div", { ref: pickerRef, className: 'fixed z-50 p-5 bg-white border shadow sm:absolute rounded-xl', style: tslib_1.__assign({ left: '50%', top: pickerPos.top, transform: 'translateX(-50%)' }, (window.innerWidth >= 640 && {
                         left: pickerPos.left,
-                        transform: 'none'
+                        transform: 'none',
                     })) },
-                    react_1["default"].createElement(react_colorful_1.HexAlphaColorPicker, { color: fontColor, onChange: function (color) {
+                    react_1.default.createElement(react_colorful_1.HexAlphaColorPicker, { color: fontColor, onChange: function (color) {
                             var norm = normalizeColor(color);
                             setFontColor(norm);
                             editor === null || editor === void 0 ? void 0 : editor.chain().focus().setColor(norm).setMark('textStyle', { color: "".concat(norm, " !important") }).run();
                         } }),
-                    react_1["default"].createElement("div", { className: 'flex items-center justify-center gap-2 mt-2' },
-                        react_1["default"].createElement("div", { className: 'flex items-center gap-x-2 border border-gray-300 py-1.5 px-3 rounded-xl' },
-                            react_1["default"].createElement("div", { className: 'w-6 h-6 border rounded ', style: { backgroundColor: fontColor.replace(/ !important$/, '') }, title: fontColor }),
-                            react_1["default"].createElement("input", { type: 'text', className: 'p-0 border-none !ring-0 w-[144px]', value: fontColor.replace(/ !important$/, ''), onChange: function (e) {
+                    react_1.default.createElement("div", { className: 'flex items-center justify-center gap-2 mt-2' },
+                        react_1.default.createElement("div", { className: 'flex items-center gap-x-2 border border-gray-300 py-1.5 px-3 rounded-xl' },
+                            react_1.default.createElement("div", { className: 'w-6 h-6 border rounded ', style: { backgroundColor: fontColor.replace(/ !important$/, '') }, title: fontColor }),
+                            react_1.default.createElement("input", { type: 'text', className: 'p-0 border-none !ring-0 w-[144px]', value: fontColor.replace(/ !important$/, ''), onChange: function (e) {
                                     var raw = e.target.value.startsWith('#')
                                         ? e.target.value
                                         : "#".concat(e.target.value.replace(/^#/, ''));
@@ -789,15 +898,21 @@ function TextEditor(_a) {
                                         editor === null || editor === void 0 ? void 0 : editor.chain().focus().setColor(norm).run();
                                     }
                                 } }))))))),
-        react_1["default"].createElement(react_3.EditorContent, { editor: editor }),
-        react_1["default"].createElement(Modal_1.PHXModal, { onHide: function () {
+        react_1.default.createElement(react_3.EditorContent, { editor: editor }),
+        react_1.default.createElement(Modal_1.PHXModal, { onHide: function () {
                 setShowLinkInput(false);
                 reset();
             }, show: showLinkInput, title: 'Ch\u00E8n \u0111\u01B0\u1EDDng li\u00EAn k\u1EBFt', onPrimaryClick: handleInsertLink, closeButton: true },
-            react_1["default"].createElement(Input_1.PHXInput, { error: !!errors.link, errorType: 'custom-message', errorMessageCustom: (_b = errors.link) === null || _b === void 0 ? void 0 : _b.message, register: tslib_1.__assign({}, register('link', {
+            react_1.default.createElement(Input_1.PHXInput, { error: !!errors.link, errorType: 'custom-message', errorMessageCustom: (_b = errors.link) === null || _b === void 0 ? void 0 : _b.message, register: tslib_1.__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_1.default.createElement(Modal_1.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_1.default.createElement(FormUpload_1.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]);
+                } }))));
 }
-exports["default"] = TextEditor;
 //# sourceMappingURL=TextEditor.js.map