jodit-pro 4.16.3 → 4.17.0

package/es2021.en/jodit.js

@@ -1,7 +1,7 @@
 /*!
  * jodit-pro - PRO Version of Jodit Editor
  * Author: Chupurnov Valerii <chupurnov@gmail.com>
- * Version: v4.16.3
+ * Version: v4.17.0
  * Url: https://xdsoft.net/jodit/pro/
  * License(s): SEE LICENSE IN LICENSE.md
  */
@@ -1743,7 +1743,7 @@ __webpack_require__.r(__webpack_exports__);
  * ```
  * @packageDocumentation
  * @module constants
- */ const APP_VERSION = "4.16.3";
+ */ const APP_VERSION = "4.17.0";
 // prettier-ignore
 const ES = "es2021";
 const IS_ES_MODERN = true;
@@ -31902,22 +31902,19 @@ _core_ui_index_js__WEBPACK_IMPORTED_MODULE_2__.Icon.set('palette', _palette_svg_
     const tabs = [];
     const options = editor.o.uploader;
     if (callbacks.upload && options.showTabInFileSelector !== false && (options.url || options.insertImageAsBase64URI || options.customUploadFunction)) {
-        const dragBox = editor.c.fromHTML('<div class="jodit-drag-and-drop__file-box">' + `<strong>${editor.i18n(isImage ? 'Drop image' : 'Drop file')}</strong>` + `<span><br>${editor.i18n('or click')}</span>` + `<input type="file" accept="${isImage ? 'image/*' : '*'}" tabindex="-1" dir="auto" multiple=""/>` + '</div>');
-        editor.uploader.bind(dragBox, (resp)=>{
-            const handler = (0,_core_helpers_index_js__WEBPACK_IMPORTED_MODULE_1__.isFunction)(callbacks.upload) ? callbacks.upload : options.defaultHandlerSuccess;
+        const { upload } = callbacks;
+        tabs.push(UploadTab(editor, (resp)=>{
+            const handler = (0,_core_helpers_index_js__WEBPACK_IMPORTED_MODULE_1__.isFunction)(upload) ? upload : options.defaultHandlerSuccess;
             if ((0,_core_helpers_index_js__WEBPACK_IMPORTED_MODULE_1__.isFunction)(handler)) {
                 handler.call(editor, resp);
             }
-            editor.e.fire('closeAllPopups');
-        }, (error)=>{
-            editor.message.error(error.message);
-            editor.e.fire('closeAllPopups');
-        });
-        tabs.push({
-            icon: 'upload',
-            name: 'Upload',
-            content: dragBox
-        });
+        }, isImage ? {
+            label: 'Drop image',
+            accept: 'image/*'
+        } : {
+            label: 'Drop file',
+            accept: '*'
+        }));
     }
     if (callbacks.filebrowser) {
         if (editor.o.filebrowser.ajax.url || editor.o.filebrowser.items.url) {
@@ -31985,6 +31982,24 @@ _core_ui_index_js__WEBPACK_IMPORTED_MODULE_2__.Icon.set('palette', _palette_svg_
     box.classList.add('jodit-file-selector');
     return box;
 };
+/**
+ * The Upload tab: a box that uploads the files dropped on it or chosen in its
+ * file input, then passes the uploader's answer to `onSuccess` and closes the popup
+ */ const UploadTab = (editor, onSuccess, { label, accept })=>{
+    const dragBox = editor.c.fromHTML('<div class="jodit-drag-and-drop__file-box">' + `<strong>${editor.i18n(label)}</strong>` + `<span><br>${editor.i18n('or click')}</span>` + `<input type="file" accept="${accept}" tabindex="-1" dir="auto" multiple=""/>` + '</div>');
+    editor.uploader.bind(dragBox, (resp)=>{
+        onSuccess.call(editor, resp);
+        editor.e.fire('closeAllPopups');
+    }, (error)=>{
+        editor.message.error(error.message);
+        editor.e.fire('closeAllPopups');
+    });
+    return {
+        icon: 'upload',
+        name: 'Upload',
+        content: dragBox
+    };
+};
 function val(elm, name, value) {
     const child = _core_dom_dom_js__WEBPACK_IMPORTED_MODULE_0__.Dom.first(elm, (node)=>_core_dom_dom_js__WEBPACK_IMPORTED_MODULE_0__.Dom.isTag(node, 'input') && (0,_core_helpers_index_js__WEBPACK_IMPORTED_MODULE_1__.attr)(node, 'name') === name);
     if (!child) {
@@ -31997,7 +32012,8 @@ function val(elm, name, value) {
 }
 
 /* harmony export */ __webpack_require__.d(__webpack_exports__, [
-/* harmony export */   "FileSelectorWidget", 0, /* binding */ FileSelectorWidget
+/* harmony export */   "FileSelectorWidget", 0, /* binding */ FileSelectorWidget,
+/* harmony export */   "UploadTab", 0, /* binding */ UploadTab
 /* harmony export */ ]);
 
 
@@ -32009,7 +32025,8 @@ function val(elm, name, value) {
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   ColorPickerWidget: function() { return /* reexport safe */ _color_picker_color_picker_js__WEBPACK_IMPORTED_MODULE_0__.ColorPickerWidget; },
 /* harmony export */   FileSelectorWidget: function() { return /* reexport safe */ _file_selector_file_selector_js__WEBPACK_IMPORTED_MODULE_1__.FileSelectorWidget; },
-/* harmony export */   TabsWidget: function() { return /* reexport safe */ _tabs_tabs_js__WEBPACK_IMPORTED_MODULE_2__.TabsWidget; }
+/* harmony export */   TabsWidget: function() { return /* reexport safe */ _tabs_tabs_js__WEBPACK_IMPORTED_MODULE_2__.TabsWidget; },
+/* harmony export */   UploadTab: function() { return /* reexport safe */ _file_selector_file_selector_js__WEBPACK_IMPORTED_MODULE_1__.UploadTab; }
 /* harmony export */ });
 /* harmony import */ var _color_picker_color_picker_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(22859);
 /* harmony import */ var _file_selector_file_selector_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(34793);
@@ -37425,6 +37442,19 @@ function brBefore(start) {
 
 
 
+function insertLinks(data) {
+    var _a;
+    (_a = data.files) === null || _a === void 0 ? void 0 : _a.forEach((file)=>{
+        const link = this.createInside.element('a', {
+            href: data.baseurl + file
+        });
+        link.textContent = this.o.uploader.getDisplayName.call(this.uploader, data.baseurl, file);
+        this.s.insertNode(link);
+    });
+}
+_config_js__WEBPACK_IMPORTED_MODULE_3__.Config.prototype.file = {
+    defaultHandlerSuccess: insertLinks
+};
 _config_js__WEBPACK_IMPORTED_MODULE_3__.Config.prototype.controls.file = {
     popup: (editor, current, close)=>{
         const insert = (url, title = '')=>{
@@ -37439,7 +37469,10 @@ _config_js__WEBPACK_IMPORTED_MODULE_3__.Config.prototype.controls.file = {
                 data.files && data.files.forEach((file)=>insert(data.baseurl + file));
                 close();
             },
-            upload: true,
+            upload: (data)=>{
+                var _a, _b;
+                ((_b = (_a = editor.o.file) === null || _a === void 0 ? void 0 : _a.defaultHandlerSuccess) !== null && _b !== void 0 ? _b : insertLinks).call(editor, data);
+            },
             url: (url, text)=>{
                 if (sourceAnchor) {
                     (0,_core_helpers_utils_attr_js__WEBPACK_IMPORTED_MODULE_2__.attr)(sourceAnchor, 'href', url);
@@ -40821,6 +40854,26 @@ const cmd = (control)=>control.args && (0,_core_helpers_checker_index_js__WEBPAC
 // Images align with `imageAlignClasses`; the wrappers of iframes and media
 // keep inline styles
 const alignClasses = (editor, elm)=>_core_dom_index_js__WEBPACK_IMPORTED_MODULE_0__.Dom.isTag(elm, 'img') ? editor.o.imageAlignClasses : null;
+// A Normal image sits where the text of its line is aligned (#1531)
+const lineAlign = (editor, elm)=>{
+    const block = elm && _core_dom_index_js__WEBPACK_IMPORTED_MODULE_0__.Dom.closest(elm, _core_dom_index_js__WEBPACK_IMPORTED_MODULE_0__.Dom.isBlock, editor.editor) || editor.editor;
+    const rtl = (0,_core_helpers_utils_css_js__WEBPACK_IMPORTED_MODULE_3__.css)(block, 'direction') === 'rtl';
+    switch((0,_core_helpers_utils_css_js__WEBPACK_IMPORTED_MODULE_3__.css)(block, 'text-align')){
+        case 'center':
+        case '-webkit-center':
+            return 'center';
+        case 'justify':
+            return 'justify';
+        case 'right':
+            return 'right';
+        case 'end':
+            return rtl ? 'left' : 'right';
+        case 'start':
+            return rtl ? 'right' : 'left';
+        default:
+            return 'left';
+    }
+};
 const currentAlign = (editor, elm)=>elm ? (0,_core_helpers_utils_align_js__WEBPACK_IMPORTED_MODULE_2__.getHAlign)(elm, alignClasses(editor, elm)) : 'normal';
 const align = {
     name: 'left',
@@ -40833,7 +40886,7 @@ const align = {
     ],
     update: (editor, button)=>{
         const current = currentAlign(editor, button.target);
-        button.state.icon.name = current === 'normal' ? 'left' : current;
+        button.state.icon.name = current === 'normal' ? lineAlign(editor, button.target) : current;
     },
     isActive: (editor, button)=>currentAlign(editor, button.target) !== 'normal',
     isChildActive: (editor, button)=>{
@@ -47095,7 +47148,8 @@ class AceEditor extends _sourceEditor_js__WEBPACK_IMPORTED_MODULE_3__.SourceEdit
                 }
                 return;
             }
-            this.fromWYSIWYG();
+            // The source plugin carries the fallback editor's text over when this
+            // one is ready; refilling from WYSIWYG here would drop unsynced typing
             tryInitAceEditor();
         };
         editor.e.on('afterSetMode', initAceEditor);
@@ -47460,6 +47514,7 @@ function createSourceEditor(type, editor, container, toWYSIWYG, fromWYSIWYG) {
             if (new_value !== this.getMirrorValue()) {
                 this.setMirrorValue(new_value);
             }
+            this.__filledValue = this.getMirrorValue();
             this.__lock = false;
         }
     }
@@ -47637,9 +47692,9 @@ function createSourceEditor(type, editor, container, toWYSIWYG, fromWYSIWYG) {
                         return;
                     }
                     loading = true;
-                    // It formats the source view from the next time it opens:
-                    // filling it again now would replace what was typed there
-                    (0,_core_helpers_index_js__WEBPACK_IMPORTED_MODULE_4__.loadNext)(editor, editor.o.beautifyHTMLCDNUrlsJS).then(addEventListener, ()=>null);
+                    (0,_core_helpers_index_js__WEBPACK_IMPORTED_MODULE_4__.loadNext)(editor, editor.o.beautifyHTMLCDNUrlsJS).then(()=>{
+                        addEventListener() && this.beautifyUntouched();
+                    }, ()=>null);
                 };
                 editor.e.on('afterSetMode.source', loadBeautify);
                 loadBeautify();
@@ -47659,11 +47714,9 @@ function createSourceEditor(type, editor, container, toWYSIWYG, fromWYSIWYG) {
         if (editor.o.sourceEditor !== 'area') {
             const sourceEditor = (0,_editor_factory_js__WEBPACK_IMPORTED_MODULE_7__.createSourceEditor)(editor.o.sourceEditor, editor, this.mirrorContainer, this.toWYSIWYG, this.fromWYSIWYG);
             sourceEditor.onReadyAlways(()=>{
-                var _a, _b;
-                (_a = this.sourceEditor) === null || _a === void 0 ? void 0 : _a.destruct();
-                this.sourceEditor = sourceEditor;
-                this.syncValueFromWYSIWYG(true);
-                (_b = editor.events) === null || _b === void 0 ? void 0 : _b.fire('sourceEditorReady', editor);
+                var _a;
+                this.takeOver(sourceEditor);
+                (_a = editor.events) === null || _a === void 0 ? void 0 : _a.fire('sourceEditorReady', editor);
             });
         } else {
             (_a = this.sourceEditor) === null || _a === void 0 ? void 0 : _a.onReadyAlways(()=>{
@@ -47673,6 +47726,49 @@ function createSourceEditor(type, editor, container, toWYSIWYG, fromWYSIWYG) {
             });
         }
     }
+    /**
+     * Replaces the source editor (the textarea shown while ACE loads) with
+     * the one that just became ready, carrying its text, selection and focus
+     * over. Filling the new editor from WYSIWYG instead would drop what was
+     * typed since the last, debounced, sync and normalise half-typed markup.
+     */ takeOver(sourceEditor) {
+        const previous = this.sourceEditor;
+        if (!previous || previous === sourceEditor) {
+            this.sourceEditor = sourceEditor;
+            this.syncValueFromWYSIWYG(true);
+            return;
+        }
+        const value = previous.getValue(), start = previous.getSelectionStart(), end = previous.getSelectionEnd(), focused = previous.isFocused, untouched = value === this.__filledValue;
+        previous.destruct();
+        this.sourceEditor = sourceEditor;
+        if (untouched) {
+            this.syncValueFromWYSIWYG(true);
+        } else {
+            sourceEditor.setValue(value);
+            this.toWYSIWYG();
+        }
+        if (start >= 0) {
+            sourceEditor.setSelectionRange(start, end);
+        }
+        focused && sourceEditor.focus();
+    }
+    /**
+     * The beautifier arrived after the source view was opened: format the
+     * view if nothing has been typed into it, otherwise leave the typing alone
+     */ beautifyUntouched() {
+        var _a, _b;
+        const value = this.getMirrorValue();
+        if (this.j.o.editHTMLDocumentMode || !value || value !== this.__filledValue) {
+            return;
+        }
+        const html = this.j.e.fire('beautifyHTML', value);
+        if ((0,_core_helpers_index_js__WEBPACK_IMPORTED_MODULE_4__.isString)(html) && html !== value) {
+            const focused = (_a = this.sourceEditor) === null || _a === void 0 ? void 0 : _a.isFocused;
+            this.setMirrorValue(html);
+            this.__filledValue = this.getMirrorValue();
+            focused && ((_b = this.sourceEditor) === null || _b === void 0 ? void 0 : _b.focus());
+        }
+    }
     /** @override */ beforeDestruct() {
         if (this.sourceEditor) {
             this.sourceEditor.destruct();
@@ -47690,6 +47786,10 @@ function createSourceEditor(type, editor, container, toWYSIWYG, fromWYSIWYG) {
         ];
         this.__lock = false;
         this.__oldMirrorValue = '';
+        /**
+         * What the source view was last filled with from WYSIWYG, read back from
+         * the editor; while the view still holds it, nothing has been typed there
+         */ this.__filledValue = '';
         this.tempMarkerStart = '{start-jodit-selection}';
         this.tempMarkerStartReg = /{start-jodit-selection}/g;
         this.tempMarkerEnd = '{end-jodit-selection}';
@@ -49925,10 +50025,20 @@ _core_global_js__WEBPACK_IMPORTED_MODULE_4__.pluginSystem.add('toolbarNavigation
 
 
 
+function insertVideos(data) {
+    var _a;
+    (_a = data.files) === null || _a === void 0 ? void 0 : _a.forEach((file)=>{
+        this.s.insertNode(this.createInside.element('video', {
+            controls: '',
+            src: data.baseurl + file
+        }));
+    });
+}
 _config_js__WEBPACK_IMPORTED_MODULE_4__.Config.prototype.video = {
     parseUrlToVideoEmbed: _core_helpers_index_js__WEBPACK_IMPORTED_MODULE_0__.convertMediaUrlToVideoEmbed,
     defaultWidth: 400,
-    defaultHeight: 345
+    defaultHeight: 345,
+    defaultHandlerSuccess: insertVideos
 };
 _core_ui_icon_js__WEBPACK_IMPORTED_MODULE_3__.Icon.set('video', _video_svg_js__WEBPACK_IMPORTED_MODULE_6__["default"]);
 _config_js__WEBPACK_IMPORTED_MODULE_4__.Config.prototype.controls.video = {
@@ -49965,6 +50075,18 @@ _config_js__WEBPACK_IMPORTED_MODULE_4__.Config.prototype.controls.video = {
             close();
         };
         jodit.s.save();
+        const { uploader } = jodit.o;
+        // Base64 alone would put whole video files into the content
+        if (uploader.showTabInFileSelector !== false && (uploader.url || uploader.customUploadFunction)) {
+            tabs.push((0,_modules_widget_index_js__WEBPACK_IMPORTED_MODULE_5__.UploadTab)(jodit, (data)=>{
+                var _a, _b;
+                jodit.s.restore();
+                ((_b = (_a = jodit.o.video) === null || _a === void 0 ? void 0 : _a.defaultHandlerSuccess) !== null && _b !== void 0 ? _b : insertVideos).call(jodit, data);
+            }, {
+                label: 'Drop file',
+                accept: 'video/*'
+            }));
+        }
         tabs.push({
             icon: 'link',
             name: 'Link',