jodit 4.2.14 → 4.2.17

package/esm/plugins/clipboard/config.js

@@ -4,11 +4,11 @@
  * Copyright (c) 2013-2024 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
 import { Icon } from "../../core/ui/icon.js";
+import { Config } from "../../config.js";
 import copyIcon from "./icons/copy.svg.js";
 import cutIcon from "./icons/cut.svg.js";
 import pasteIcon from "./icons/paste.svg.js";
 import selectAllIcon from "./icons/select-all.svg.js";
-import { Config } from "../../config.js";
 Config.prototype.controls.cut = {
     command: 'cut',
     isDisabled: (editor) => editor.s.isCollapsed(),

package/esm/plugins/color/config.js

@@ -6,9 +6,9 @@
 import { Dom } from "../../core/dom/dom.js";
 import { css, dataBind, isJoditObject } from "../../core/helpers/index.js";
 import { Icon } from "../../core/ui/icon.js";
+import { Config } from "../../config.js";
 import { ColorPickerWidget, TabsWidget } from "../../modules/widget/index.js";
 import brushIcon from "./brush.svg.js";
-import { Config } from "../../config.js";
 Icon.set('brush', brushIcon);
 Config.prototype.controls.brushCell = {
     isVisible: (editor) => {

package/esm/plugins/copy-format/copy-format.js

@@ -7,9 +7,9 @@ import { Dom } from "../../core/dom/dom.js";
 import { extendLang, pluginSystem } from "../../core/global.js";
 import { css } from "../../core/helpers/utils/css.js";
 import { Icon } from "../../core/ui/icon.js";
+import { Config } from "../../config.js";
 import copyFormatIcon from "./copy-format.svg.js";
 import * as langs from "./langs/index.js";
-import { Config } from "../../config.js";
 const pluginKey = 'copy-format';
 /**
  * Plug-in copy and paste formatting from one element to another

package/esm/plugins/drag-and-drop/drag-and-drop.d.ts

@@ -21,6 +21,8 @@ export declare class dragAndDrop extends Plugin {
     private onDrag;
     private onDragEnd;
     private onDrop;
+    private __getWorkFragment;
+    private __insertFragment;
     private getText;
     /** @override */
     beforeDestruct(): void;

package/esm/plugins/drag-and-drop/drag-and-drop.js

@@ -107,45 +107,11 @@ export class dragAndDrop extends Plugin {
             const sel = this.j.s.sel;
             const range = this.bufferRange ||
                 (sel && sel.rangeCount ? sel.getRangeAt(0) : null);
-            let fragment = null;
-            if (!this.draggable && range) {
-                fragment = this.isCopyMode
-                    ? range.cloneContents()
-                    : range.extractContents();
-            }
-            else if (this.draggable) {
-                if (this.isCopyMode) {
-                    const [tagName, field] = attr(this.draggable, '-is-file') === '1'
-                        ? ['a', 'href']
-                        : ['img', 'src'];
-                    fragment = this.j.createInside.element(tagName);
-                    fragment.setAttribute(field, attr(this.draggable, 'data-src') ||
-                        attr(this.draggable, 'src') ||
-                        '');
-                    if (tagName === 'a') {
-                        fragment.textContent = attr(fragment, field) || '';
-                    }
-                }
-                else {
-                    fragment = dataBind(this.draggable, 'target');
-                }
-            }
-            else if (this.getText(event)) {
-                fragment = this.j.createInside.fromHTML(this.getText(event));
-            }
+            const fragment = this.__getWorkFragment(range, event);
             sel && sel.removeAllRanges();
             this.j.s.insertCursorAtPoint(event.clientX, event.clientY);
             if (fragment) {
-                this.j.s.insertNode(fragment, false, false);
-                if (range && fragment.firstChild && fragment.lastChild) {
-                    range.setStartBefore(fragment.firstChild);
-                    range.setEndAfter(fragment.lastChild);
-                    this.j.s.selectRange(range);
-                    this.j.e.fire('synchro');
-                }
-                if (Dom.isTag(fragment, 'img') && this.j.events) {
-                    this.j.e.fire('afterInsertImage', fragment);
-                }
+                this.__insertFragment.call(this, fragment, range);
             }
             event.preventDefault();
             event.stopPropagation();
@@ -153,6 +119,47 @@ export class dragAndDrop extends Plugin {
         this.isFragmentFromEditor = false;
         this.removeDragListeners();
     }
+    __getWorkFragment(range, event) {
+        let fragment = null;
+        if (!this.draggable && range) {
+            fragment = this.isCopyMode
+                ? range.cloneContents()
+                : range.extractContents();
+        }
+        else if (this.draggable) {
+            if (this.isCopyMode) {
+                const [tagName, field] = attr(this.draggable, '-is-file') === '1'
+                    ? ['a', 'href']
+                    : ['img', 'src'];
+                fragment = this.j.createInside.element(tagName);
+                fragment.setAttribute(field, attr(this.draggable, 'data-src') ||
+                    attr(this.draggable, 'src') ||
+                    '');
+                if (tagName === 'a') {
+                    fragment.textContent = attr(fragment, field) || '';
+                }
+            }
+            else {
+                fragment = dataBind(this.draggable, 'target');
+            }
+        }
+        else if (this.getText(event)) {
+            fragment = this.j.createInside.fromHTML(this.getText(event));
+        }
+        return fragment;
+    }
+    __insertFragment(fragment, range) {
+        this.j.s.insertNode(fragment, false, false);
+        if (range && fragment.firstChild && fragment.lastChild) {
+            range.setStartBefore(fragment.firstChild);
+            range.setEndAfter(fragment.lastChild);
+            this.j.s.selectRange(range);
+            this.j.e.fire('synchro');
+        }
+        if (Dom.isTag(fragment, 'img') && this.j.events) {
+            this.j.e.fire('afterInsertImage', fragment);
+        }
+    }
     /** @override */
     beforeDestruct() {
         this.onDragEnd();

package/esm/plugins/file/file.js

@@ -5,8 +5,8 @@
  */
 import { Dom } from "../../core/dom/dom.js";
 import { pluginSystem } from "../../core/global.js";
-import { FileSelectorWidget } from "../../modules/widget/index.js";
 import { Config } from "../../config.js";
+import { FileSelectorWidget } from "../../modules/widget/index.js";
 Config.prototype.controls.file = {
     popup: (editor, current, close) => {
         const insert = (url, title = '') => {

package/esm/plugins/font/config.js

@@ -7,9 +7,9 @@ import { Dom } from "../../core/dom/index.js";
 import { trimChars } from "../../core/helpers/string/trim.js";
 import { css } from "../../core/helpers/utils/css.js";
 import { Icon } from "../../core/ui/icon.js";
+import { Config } from "../../config.js";
 import fontIcon from "./icons/font.svg.js";
 import fontsizeIcon from "./icons/fontsize.svg.js";
-import { Config } from "../../config.js";
 /**
  * Default font-size points
  */

package/esm/plugins/format-block/config.js

@@ -3,10 +3,11 @@
  * Released under MIT see LICENSE.txt in the project root for license information.
  * Copyright (c) 2013-2024 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
-import { Dom } from "../../core/dom/index.js";
+import { Dom } from "../../core/dom/dom.js";
+import { isPlainObject } from "../../core/helpers/checker/is-plain-object.js";
 import { Icon } from "../../core/ui/icon.js";
-import paragraphIcon from "./paragraph.svg.js";
 import { Config } from "../../config.js";
+import paragraphIcon from "./paragraph.svg.js";
 Icon.set('paragraph', paragraphIcon);
 Config.prototype.controls.paragraph = {
     command: 'formatBlock',
@@ -21,7 +22,7 @@ Config.prototype.controls.paragraph = {
             return false;
         }
         const currentValue = button.state.value, list = control.list;
-        if (list && list[currentValue.toString()]) {
+        if (isPlainObject(list) && list[currentValue.toString()]) {
             if (editor.o.textIcons) {
                 button.state.text = list[currentValue.toString()].toString();
             }
@@ -45,7 +46,8 @@ Config.prototype.controls.paragraph = {
     },
     isActive: (editor, button) => {
         return (button.state.value !== editor.o.enter &&
-            Boolean(button.control.list?.[button.state.value]));
+            isPlainObject(button.control.list) &&
+            Boolean(button.control.list[button.state.value]));
     },
     childTemplate: (e, key, value) => `<${key} style="margin:0;padding:0"><span>${e.i18n(value)}</span></${key}>`,
     tooltip: 'Insert format block'

package/esm/plugins/fullsize/config.js

@@ -5,9 +5,9 @@
  */
 import * as consts from "../../core/constants.js";
 import { Icon } from "../../core/ui/icon.js";
+import { Config } from "../../config.js";
 import fullsizeIcon from "./icons/fullsize.svg.js";
 import shrinkIcon from "./icons/shrink.svg.js";
-import { Config } from "../../config.js";
 Config.prototype.fullsize = false;
 Config.prototype.globalFullSize = true;
 Icon.set('fullsize', fullsizeIcon).set('shrink', shrinkIcon);

package/esm/plugins/hr/hr.js

@@ -6,8 +6,8 @@
 import { Dom } from "../../core/dom/index.js";
 import { pluginSystem } from "../../core/global.js";
 import { Icon } from "../../core/ui/icon.js";
-import hrIcon from "./hr.svg.js";
 import { Config } from "../../config.js";
+import hrIcon from "./hr.svg.js";
 Icon.set('hr', hrIcon);
 Config.prototype.controls.hr = {
     command: 'insertHorizontalRule',

package/esm/plugins/image/image.js

@@ -7,9 +7,9 @@ import { Dom } from "../../core/dom/index.js";
 import { pluginSystem } from "../../core/global.js";
 import { $$ } from "../../core/helpers/index.js";
 import { Icon } from "../../core/ui/icon.js";
+import { Config } from "../../config.js";
 import { FileSelectorWidget } from "../../modules/widget/index.js";
 import imageIcon from "./image.svg.js";
-import { Config } from "../../config.js";
 Icon.set('image', imageIcon);
 Config.prototype.controls.image = {
     popup: (editor, current, close) => {

package/esm/plugins/image-properties/config.d.ts

@@ -3,9 +3,6 @@
  * Released under MIT see LICENSE.txt in the project root for license information.
  * Copyright (c) 2013-2024 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
-/**
- * @module plugins/image-properties
- */
 import type { ImagePropertiesOptions } from "./interface";
 declare module 'jodit/config' {
     interface Config {

package/esm/plugins/image-properties/config.js

@@ -3,6 +3,9 @@
  * Released under MIT see LICENSE.txt in the project root for license information.
  * Copyright (c) 2013-2024 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
+/**
+ * @module plugins/image-properties
+ */
 import { Config } from "../../config.js";
 Config.prototype.image = {
     dialogWidth: 600,

package/esm/plugins/image-properties/interface.d.ts

@@ -0,0 +1,121 @@
+/*!
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * Released under MIT see LICENSE.txt in the project root for license information.
+ * Copyright (c) 2013-2024 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ */
+/**
+ * @module plugins/image-properties
+ */
+import type { ImageHAlign } from "../../types";
+export type EditValues = {
+    style: string;
+    imageSrc: string;
+    borderRadius: number;
+    imageTitle: string;
+    imageAlt: string;
+    imageLink: string;
+    imageLinkOpenInNewTab: boolean;
+    imageWidth: number | string;
+    imageHeight: number | string;
+    marginTop: number | string;
+    marginRight: number | string;
+    marginBottom: number | string;
+    marginLeft: number | string;
+    classes: string;
+    id: string;
+    align: ImageHAlign;
+};
+export interface ImagePropertiesState {
+    image: HTMLImageElement;
+    sourceImage: HTMLImageElement;
+    ratio: number;
+    sizeIsLocked: boolean;
+    marginIsLocked: boolean;
+    values: EditValues;
+}
+export interface ImagePropertiesAPI {
+    openImageEditor: () => void;
+    openImagePopup: (target: HTMLElement) => void;
+}
+export interface ImagePropertiesOptions {
+    dialogWidth: number;
+    /**
+     * Open editing dialog after double click on image
+     */
+    openOnDblClick: boolean;
+    /**
+     * Show edit 'src' input
+     */
+    editSrc: boolean;
+    /**
+     * Show crop/resize btn
+     */
+    useImageEditor: boolean;
+    /**
+     * Show edit 'title' input
+     */
+    editTitle: boolean;
+    /**
+     * Show edit 'alt' input
+     */
+    editAlt: boolean;
+    /**
+     * Show edit image link's options
+     */
+    editLink: boolean;
+    /**
+     * Show edit image size's inputs
+     */
+    editSize: boolean;
+    /**
+     * Show edit margin inputs
+     */
+    editMargins: boolean;
+    editBorderRadius: boolean;
+    /**
+     * Show edit classNames input
+     */
+    editClass: boolean;
+    /**
+     * Pre-define available classes to select from
+     *
+     * Classes can be provided as list of strings or as list of tuples
+     * `["classname", "human label"]`.
+     *
+     * @example
+     * ```javascript
+     * new Jodit('#editor', {
+     *    image: {
+     *        availableClasses: [
+     *            "rte-image-width-50",
+     *            ["rte-image-width-75", "75 % width"]
+     *        ]
+     *    }
+     * })
+     * ```
+     */
+    availableClasses: [
+        string,
+        string
+    ][] | string[];
+    /**
+     * Show style edit input
+     */
+    editStyle: boolean;
+    /**
+     * Show edit ID input
+     */
+    editId: boolean;
+    /**
+     * Show Alignment selector
+     */
+    editAlign: boolean;
+    /**
+     * Show preview image
+     */
+    showPreview: boolean;
+    /**
+     * Select image after close dialog
+     */
+    selectImageAfterClose: boolean;
+}

package/esm/plugins/indent/config.js

@@ -5,10 +5,10 @@
  */
 import { Dom } from "../../core/dom/index.js";
 import { Icon } from "../../core/ui/icon.js";
+import { Config } from "../../config.js";
 import indentIcon from "./icons/indent.svg.js";
 import outdentIcon from "./icons/outdent.svg.js";
 import { getKey } from "./helpers.js";
-import { Config } from "../../config.js";
 Icon.set('indent', indentIcon).set('outdent', outdentIcon);
 Config.prototype.controls.indent = {
     tooltip: 'Increase Indent'

package/esm/plugins/inline-popup/config/config.js

@@ -4,12 +4,12 @@
  * Copyright (c) 2013-2024 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
 import { Icon } from "../../../core/ui/icon.js";
+import { Config } from "../../../config.js";
 import a from "./items/a.js";
 import cells from "./items/cells.js";
 import jodit from "./items/iframe.js";
 import img from "./items/img.js";
 import toolbar from "./items/toolbar.js";
-import { Config } from "../../../config.js";
 import * as addcolumn from "../icons/addcolumn.svg.js";
 import * as addrow from "../icons/addrow.svg.js";
 import * as merge from "../icons/merge.svg.js";

package/esm/plugins/justify/justify.js

@@ -5,11 +5,12 @@
  */
 import { Dom } from "../../core/dom/dom.js";
 import { pluginSystem } from "../../core/global.js";
+import { isPlainObject } from "../../core/helpers/index.js";
 import { alignElement } from "../../core/helpers/utils/align.js";
 import { css } from "../../core/helpers/utils/css.js";
 import { Icon } from "../../core/ui/icon.js";
-import justifyIcon from "./justify.svg.js";
 import { Config } from "../../config.js";
+import justifyIcon from "./justify.svg.js";
 Icon.set('justify', justifyIcon);
 Config.prototype.controls.align = {
     name: 'left',
@@ -24,17 +25,20 @@ Config.prototype.controls.align = {
                 control.defaultValue.indexOf(currentValue) !== -1) {
                 currentValue = 'left';
             }
-            if (control.data &&
-                control.data.currentValue !== currentValue &&
-                control.list &&
-                control.list[currentValue]) {
+            const { list, data } = control;
+            if (data &&
+                data.currentValue !== currentValue &&
+                list &&
+                (isPlainObject(list)
+                    ? list[currentValue]
+                    : list.includes(currentValue))) {
                 if (editor.o.textIcons || control.component === 'select') {
                     button.state.text = currentValue;
                 }
                 else {
                     button.state.icon.name = currentValue;
                 }
-                control.data.currentValue = currentValue;
+                data.currentValue = currentValue;
             }
         }
     },

package/esm/plugins/line-height/config.js

@@ -5,8 +5,8 @@
  */
 import { memorizeExec } from "../../core/helpers/index.js";
 import { Icon } from "../../core/ui/icon.js";
-import lineHeightIcon from "./line-height.svg.js";
 import { Config } from "../../config.js";
+import lineHeightIcon from "./line-height.svg.js";
 Config.prototype.defaultLineHeight = null;
 Icon.set('line-height', lineHeightIcon);
 Config.prototype.controls.lineHeight = {

package/esm/plugins/link/config.js

@@ -5,10 +5,10 @@
  */
 import { Dom } from "../../core/dom/dom.js";
 import { Icon } from "../../core/ui/icon.js";
+import { Config } from "../../config.js";
 import linkIcon from "./icons/link.svg.js";
 import unlinkIcon from "./icons/unlink.svg.js";
 import { formTemplate } from "./template.js";
-import { Config } from "../../config.js";
 Config.prototype.link = {
     formTemplate,
     followOnDblClick: false,

package/esm/plugins/link/link.js

@@ -138,35 +138,7 @@ export class link extends Plugin {
         if (link) {
             url_input.value = attr(link, 'href') || '';
             if (modeClassName) {
-                switch (modeClassName) {
-                    case 'input':
-                        if (className_input) {
-                            className_input.value = attr(link, 'class') || '';
-                        }
-                        break;
-                    case 'select':
-                        if (className_select) {
-                            for (let i = 0; i < className_select.selectedOptions.length; i++) {
-                                const option = className_select.options.item(i);
-                                if (option) {
-                                    option.selected = false;
-                                }
-                            }
-                            const classNames = attr(link, 'class') || '';
-                            classNames.split(' ').forEach(className => {
-                                if (className) {
-                                    for (let i = 0; i < className_select.options.length; i++) {
-                                        const option = className_select.options.item(i);
-                                        if (option?.value &&
-                                            option.value === className) {
-                                            option.selected = true;
-                                        }
-                                    }
-                                }
-                            });
-                        }
-                        break;
-                }
+                readClassnames(modeClassName, className_input, link, className_select);
             }
             if (openInNewTabCheckbox && target_checkbox) {
                 target_checkbox.checked = attr(link, 'target') === '_blank';
@@ -228,42 +200,9 @@ export class link extends Plugin {
             }
             links.forEach(a => {
                 attr(a, 'href', url_input.value);
-                if (modeClassName && (className_input ?? className_select)) {
-                    if (modeClassName === 'input') {
-                        if (className_input.value === '' &&
-                            a.hasAttribute('class')) {
-                            attr(a, 'class', null);
-                        }
-                        if (className_input.value !== '') {
-                            attr(a, 'class', className_input.value);
-                        }
-                    }
-                    else if (modeClassName === 'select') {
-                        if (a.hasAttribute('class')) {
-                            attr(a, 'class', null);
-                        }
-                        for (let i = 0; i < className_select.selectedOptions.length; i++) {
-                            const className = className_select.selectedOptions.item(i)?.value;
-                            if (className) {
-                                a.classList.add(className);
-                            }
-                        }
-                    }
-                }
+                writeClasses(modeClassName, className_input, className_select, a);
                 if (!isImageContent) {
-                    let newContent = a.textContent;
-                    if (content_input.value.trim().length) {
-                        if (textWasChanged) {
-                            newContent = content_input.value;
-                        }
-                    }
-                    else {
-                        newContent = url_input.value;
-                    }
-                    const content = a.textContent;
-                    if (newContent !== content) {
-                        a.textContent = newContent;
-                    }
+                    writeImage(a, content_input, textWasChanged, url_input);
                 }
                 if (openInNewTabCheckbox && target_checkbox) {
                     attr(a, 'target', target_checkbox.checked ? '_blank' : null);
@@ -308,3 +247,71 @@ __decorate([
     autobind
 ], link.prototype, "__generateForm", null);
 pluginSystem.add('link', link);
+function writeClasses(modeClassName, className_input, className_select, a) {
+    if (modeClassName && (className_input ?? className_select)) {
+        if (modeClassName === 'input') {
+            if (className_input.value === '' && a.hasAttribute('class')) {
+                attr(a, 'class', null);
+            }
+            if (className_input.value !== '') {
+                attr(a, 'class', className_input.value);
+            }
+        }
+        else if (modeClassName === 'select') {
+            if (a.hasAttribute('class')) {
+                attr(a, 'class', null);
+            }
+            for (let i = 0; i < className_select.selectedOptions.length; i++) {
+                const className = className_select.selectedOptions.item(i)?.value;
+                if (className) {
+                    a.classList.add(className);
+                }
+            }
+        }
+    }
+}
+function readClassnames(modeClassName, className_input, link, className_select) {
+    switch (modeClassName) {
+        case 'input':
+            if (className_input) {
+                className_input.value = attr(link, 'class') || '';
+            }
+            break;
+        case 'select':
+            if (className_select) {
+                for (let i = 0; i < className_select.selectedOptions.length; i++) {
+                    const option = className_select.options.item(i);
+                    if (option) {
+                        option.selected = false;
+                    }
+                }
+                const classNames = attr(link, 'class') || '';
+                classNames.split(' ').forEach(className => {
+                    if (className) {
+                        for (let i = 0; i < className_select.options.length; i++) {
+                            const option = className_select.options.item(i);
+                            if (option?.value && option.value === className) {
+                                option.selected = true;
+                            }
+                        }
+                    }
+                });
+            }
+            break;
+    }
+}
+function writeImage(a, content_input, textWasChanged, url_input) {
+    let newContent = a.textContent;
+    if (content_input.value.trim().length) {
+        if (textWasChanged) {
+            newContent = content_input.value;
+        }
+    }
+    else {
+        newContent = url_input.value;
+    }
+    const content = a.textContent;
+    if (newContent !== content) {
+        a.textContent = newContent;
+    }
+}

package/esm/plugins/mobile/config.js

@@ -5,9 +5,9 @@
  */
 import * as consts from "../../core/constants.js";
 import { splitArray } from "../../core/helpers/index.js";
+import { Config } from "../../config.js";
 import { ToolbarCollection } from "../../modules/toolbar/collection/collection.js";
 import { makeCollection } from "../../modules/toolbar/factory.js";
-import { Config } from "../../config.js";
 Config.prototype.mobileTapTimeout = 300;
 Config.prototype.toolbarAdaptive = true;
 Config.prototype.buttonsMD = [

package/esm/plugins/ordered-list/config.js

@@ -5,9 +5,9 @@
  */
 import { dataBind } from "../../core/helpers/utils/data-bind.js";
 import { Icon } from "../../core/ui/icon.js";
+import { Config } from "../../config.js";
 import olIcon from "./icons/ol.svg.js";
 import ulIcon from "./icons/ul.svg.js";
-import { Config } from "../../config.js";
 const memoExec = (jodit, _, { control }) => {
     const key = `button${control.command}`;
     const value = (control.args && control.args[0]) ?? dataBind(jodit, key);

package/esm/plugins/paste/config.js

@@ -4,8 +4,8 @@
  * Copyright (c) 2013-2024 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
 import { CLIPBOARD_ID, INSERT_AS_HTML, INSERT_AS_TEXT, INSERT_ONLY_TEXT, IS_PROD, TEXT_PLAIN } from "../../core/constants.js";
-import { pasteInsertHtml } from "./helpers.js";
 import { Config } from "../../config.js";
+import { pasteInsertHtml } from "./helpers.js";
 Config.prototype.askBeforePasteHTML = true;
 Config.prototype.processPasteHTML = true;
 Config.prototype.scrollToPastedContent = true;