jodit 4.16.1 → 4.17.0

package/es2021/jodit.js

@@ -1,7 +1,7 @@
 /*!
  * jodit - Jodit is an awesome and useful wysiwyg editor with filebrowser
  * Author: Chupurnov <chupurnov@gmail.com> (https://xdsoft.net/jodit/)
- * Version: v4.16.1
+ * Version: v4.17.0
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */
@@ -1799,7 +1799,7 @@ __webpack_require__.r(__webpack_exports__);
  * ```
  * @packageDocumentation
  * @module constants
- */ const APP_VERSION = "4.16.1";
+ */ const APP_VERSION = "4.17.0";
 // prettier-ignore
 const ES = "es2021";
 const IS_ES_MODERN = true;
@@ -26195,22 +26195,19 @@ jodit_core_ui__WEBPACK_IMPORTED_MODULE_2__.Icon.set('palette', (_palette_svg__WE
     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,jodit_core_helpers__WEBPACK_IMPORTED_MODULE_1__.isFunction)(callbacks.upload) ? callbacks.upload : options.defaultHandlerSuccess;
+        const { upload } = callbacks;
+        tabs.push(UploadTab(editor, (resp)=>{
+            const handler = (0,jodit_core_helpers__WEBPACK_IMPORTED_MODULE_1__.isFunction)(upload) ? upload : options.defaultHandlerSuccess;
             if ((0,jodit_core_helpers__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) {
@@ -26278,6 +26275,24 @@ jodit_core_ui__WEBPACK_IMPORTED_MODULE_2__.Icon.set('palette', (_palette_svg__WE
     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 = jodit_core_dom_dom__WEBPACK_IMPORTED_MODULE_0__.Dom.first(elm, (node)=>jodit_core_dom_dom__WEBPACK_IMPORTED_MODULE_0__.Dom.isTag(node, 'input') && (0,jodit_core_helpers__WEBPACK_IMPORTED_MODULE_1__.attr)(node, 'name') === name);
     if (!child) {
@@ -26290,7 +26305,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 */ ]);
 
 
@@ -26303,7 +26319,8 @@ function val(elm, name, value) {
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   ColorPickerWidget: function() { return /* reexport safe */ _color_picker_color_picker__WEBPACK_IMPORTED_MODULE_0__.ColorPickerWidget; },
 /* harmony export */   FileSelectorWidget: function() { return /* reexport safe */ _file_selector_file_selector__WEBPACK_IMPORTED_MODULE_1__.FileSelectorWidget; },
-/* harmony export */   TabsWidget: function() { return /* reexport safe */ _tabs_tabs__WEBPACK_IMPORTED_MODULE_2__.TabsWidget; }
+/* harmony export */   TabsWidget: function() { return /* reexport safe */ _tabs_tabs__WEBPACK_IMPORTED_MODULE_2__.TabsWidget; },
+/* harmony export */   UploadTab: function() { return /* reexport safe */ _file_selector_file_selector__WEBPACK_IMPORTED_MODULE_1__.UploadTab; }
 /* harmony export */ });
 /* harmony import */ var _color_picker_color_picker__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(72348);
 /* harmony import */ var _file_selector_file_selector__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(18762);
@@ -32001,6 +32018,18 @@ function brBefore(start) {
 
 
 
+function insertLinks(data) {
+    data.files?.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);
+    });
+}
+jodit_config__WEBPACK_IMPORTED_MODULE_3__.Config.prototype.file = {
+    defaultHandlerSuccess: insertLinks
+};
 jodit_config__WEBPACK_IMPORTED_MODULE_3__.Config.prototype.controls.file = {
     popup: (editor, current, close)=>{
         const insert = (url, title = '')=>{
@@ -32015,7 +32044,9 @@ jodit_config__WEBPACK_IMPORTED_MODULE_3__.Config.prototype.controls.file = {
                 data.files && data.files.forEach((file)=>insert(data.baseurl + file));
                 close();
             },
-            upload: true,
+            upload: (data)=>{
+                (editor.o.file?.defaultHandlerSuccess ?? insertLinks).call(editor, data);
+            },
             url: (url, text)=>{
                 if (sourceAnchor) {
                     (0,jodit_core_helpers_utils_attr__WEBPACK_IMPORTED_MODULE_2__.attr)(sourceAnchor, 'href', url);
@@ -35518,6 +35549,26 @@ const cmd = (control)=>control.args && (0,jodit_core_helpers_checker__WEBPACK_IM
 // Images align with `imageAlignClasses`; the wrappers of iframes and media
 // keep inline styles
 const alignClasses = (editor, elm)=>jodit_core_dom__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 && jodit_core_dom__WEBPACK_IMPORTED_MODULE_0__.Dom.closest(elm, jodit_core_dom__WEBPACK_IMPORTED_MODULE_0__.Dom.isBlock, editor.editor) || editor.editor;
+    const rtl = (0,jodit_core_helpers_utils_css__WEBPACK_IMPORTED_MODULE_3__.css)(block, 'direction') === 'rtl';
+    switch((0,jodit_core_helpers_utils_css__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,jodit_core_helpers_utils_align__WEBPACK_IMPORTED_MODULE_2__.getHAlign)(elm, alignClasses(editor, elm)) : 'normal';
 const align = {
     name: 'left',
@@ -35530,7 +35581,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)=>{
@@ -42098,7 +42149,8 @@ class AceEditor extends jodit_plugins_source_editor_sourceEditor__WEBPACK_IMPORT
                 }
                 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);
@@ -42480,6 +42532,7 @@ class SourceEditor {
             if (new_value !== this.getMirrorValue()) {
                 this.setMirrorValue(new_value);
             }
+            this.__filledValue = this.getMirrorValue();
             this.__lock = false;
         }
     }
@@ -42648,9 +42701,9 @@ class SourceEditor {
                         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,jodit_core_helpers__WEBPACK_IMPORTED_MODULE_6__.loadNext)(editor, editor.o.beautifyHTMLCDNUrlsJS).then(addEventListener, ()=>null);
+                    (0,jodit_core_helpers__WEBPACK_IMPORTED_MODULE_6__.loadNext)(editor, editor.o.beautifyHTMLCDNUrlsJS).then(()=>{
+                        addEventListener() && this.beautifyUntouched();
+                    }, ()=>null);
                 };
                 editor.e.on('afterSetMode.source', loadBeautify);
                 loadBeautify();
@@ -42669,9 +42722,7 @@ class SourceEditor {
         if (editor.o.sourceEditor !== 'area') {
             const sourceEditor = (0,_editor_factory__WEBPACK_IMPORTED_MODULE_9__.createSourceEditor)(editor.o.sourceEditor, editor, this.mirrorContainer, this.toWYSIWYG, this.fromWYSIWYG);
             sourceEditor.onReadyAlways(()=>{
-                this.sourceEditor?.destruct();
-                this.sourceEditor = sourceEditor;
-                this.syncValueFromWYSIWYG(true);
+                this.takeOver(sourceEditor);
                 editor.events?.fire('sourceEditorReady', editor);
             });
         } else {
@@ -42681,6 +42732,48 @@ class SourceEditor {
             });
         }
     }
+    /**
+	 * 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() {
+        const value = this.getMirrorValue();
+        if (this.j.o.editHTMLDocumentMode || !value || value !== this.__filledValue) {
+            return;
+        }
+        const html = this.j.e.fire('beautifyHTML', value);
+        if ((0,jodit_core_helpers__WEBPACK_IMPORTED_MODULE_6__.isString)(html) && html !== value) {
+            const focused = this.sourceEditor?.isFocused;
+            this.setMirrorValue(html);
+            this.__filledValue = this.getMirrorValue();
+            focused && this.sourceEditor?.focus();
+        }
+    }
     /** @override */ beforeDestruct() {
         if (this.sourceEditor) {
             this.sourceEditor.destruct();
@@ -42694,7 +42787,10 @@ class SourceEditor {
                 name: 'source',
                 group: 'source'
             }
-        ]), (0,_swc_helpers_define_property__WEBPACK_IMPORTED_MODULE_0__._)(this, "sourceEditor", void 0), (0,_swc_helpers_define_property__WEBPACK_IMPORTED_MODULE_0__._)(this, "mirrorContainer", void 0), (0,_swc_helpers_define_property__WEBPACK_IMPORTED_MODULE_0__._)(this, "__lock", false), (0,_swc_helpers_define_property__WEBPACK_IMPORTED_MODULE_0__._)(this, "__oldMirrorValue", ''), (0,_swc_helpers_define_property__WEBPACK_IMPORTED_MODULE_0__._)(this, "tempMarkerStart", '{start-jodit-selection}'), (0,_swc_helpers_define_property__WEBPACK_IMPORTED_MODULE_0__._)(this, "tempMarkerStartReg", /{start-jodit-selection}/g), (0,_swc_helpers_define_property__WEBPACK_IMPORTED_MODULE_0__._)(this, "tempMarkerEnd", '{end-jodit-selection}'), (0,_swc_helpers_define_property__WEBPACK_IMPORTED_MODULE_0__._)(this, "tempMarkerEndReg", /{end-jodit-selection}/g), // override it for ace editors
+        ]), (0,_swc_helpers_define_property__WEBPACK_IMPORTED_MODULE_0__._)(this, "sourceEditor", void 0), (0,_swc_helpers_define_property__WEBPACK_IMPORTED_MODULE_0__._)(this, "mirrorContainer", void 0), (0,_swc_helpers_define_property__WEBPACK_IMPORTED_MODULE_0__._)(this, "__lock", false), (0,_swc_helpers_define_property__WEBPACK_IMPORTED_MODULE_0__._)(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
+	 */ (0,_swc_helpers_define_property__WEBPACK_IMPORTED_MODULE_0__._)(this, "__filledValue", ''), (0,_swc_helpers_define_property__WEBPACK_IMPORTED_MODULE_0__._)(this, "tempMarkerStart", '{start-jodit-selection}'), (0,_swc_helpers_define_property__WEBPACK_IMPORTED_MODULE_0__._)(this, "tempMarkerStartReg", /{start-jodit-selection}/g), (0,_swc_helpers_define_property__WEBPACK_IMPORTED_MODULE_0__._)(this, "tempMarkerEnd", '{end-jodit-selection}'), (0,_swc_helpers_define_property__WEBPACK_IMPORTED_MODULE_0__._)(this, "tempMarkerEndReg", /{end-jodit-selection}/g), // override it for ace editors
         (0,_swc_helpers_define_property__WEBPACK_IMPORTED_MODULE_0__._)(this, "getSelectionStart", ()=>{
             return this.sourceEditor?.getSelectionStart() ?? 0;
         }), (0,_swc_helpers_define_property__WEBPACK_IMPORTED_MODULE_0__._)(this, "getSelectionEnd", ()=>{
@@ -45058,10 +45154,19 @@ jodit_core_global__WEBPACK_IMPORTED_MODULE_5__.pluginSystem.add('toolbarNavigati
 
 
 
+function insertVideos(data) {
+    data.files?.forEach((file)=>{
+        this.s.insertNode(this.createInside.element('video', {
+            controls: '',
+            src: data.baseurl + file
+        }));
+    });
+}
 jodit_config__WEBPACK_IMPORTED_MODULE_4__.Config.prototype.video = {
     parseUrlToVideoEmbed: jodit_core_helpers__WEBPACK_IMPORTED_MODULE_0__.convertMediaUrlToVideoEmbed,
     defaultWidth: 400,
-    defaultHeight: 345
+    defaultHeight: 345,
+    defaultHandlerSuccess: insertVideos
 };
 jodit_core_ui_icon__WEBPACK_IMPORTED_MODULE_3__.Icon.set('video', (_video_svg__WEBPACK_IMPORTED_MODULE_6___default()));
 jodit_config__WEBPACK_IMPORTED_MODULE_4__.Config.prototype.controls.video = {
@@ -45098,6 +45203,17 @@ jodit_config__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,jodit_modules_widget__WEBPACK_IMPORTED_MODULE_5__.UploadTab)(jodit, (data)=>{
+                jodit.s.restore();
+                (jodit.o.video?.defaultHandlerSuccess ?? insertVideos).call(jodit, data);
+            }, {
+                label: 'Drop file',
+                accept: 'video/*'
+            }));
+        }
         tabs.push({
             icon: 'link',
             name: 'Link',