jodit 4.2.15 → 4.2.17

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/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;

package/esm/plugins/print/print.js

@@ -9,9 +9,9 @@ import { getContainer, pluginSystem } from "../../core/global.js";
 import { defaultLanguage } from "../../core/helpers/utils/default-language.js";
 import { previewBox } from "../../core/helpers/utils/print.js";
 import { Icon } from "../../core/ui/icon.js";
+import { Config } from "../../config.js";
 import { generateCriticalCSS } from "./lib/generate-critical-css.js";
 import printIcon from "./print.svg.js";
-import { Config } from "../../config.js";
 Icon.set('print', printIcon);
 Config.prototype.controls.print = {
     exec: (editor) => {

package/esm/plugins/redo-undo/redo-undo.js

@@ -7,9 +7,9 @@ import * as consts from "../../core/constants.js";
 import { pluginSystem } from "../../core/global.js";
 import { Plugin } from "../../core/plugin/plugin.js";
 import { Icon } from "../../core/ui/icon.js";
+import { Config } from "../../config.js";
 import redoIcon from "./icons/redo.svg.js";
 import undoIcon from "./icons/undo.svg.js";
-import { Config } from "../../config.js";
 Icon.set('redo', redoIcon).set('undo', undoIcon);
 Config.prototype.controls.redo = {
     mode: consts.MODE_SPLIT,

package/esm/plugins/search/config.js

@@ -4,9 +4,9 @@
  * 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 "./interface.js";
 import searchIcon from "./search.svg.js";
-import { Config } from "../../config.js";
 Config.prototype.useSearch = true;
 Config.prototype.search = {
     lazyIdleTimeout: 0,

package/esm/plugins/source/config.js

@@ -5,8 +5,8 @@
  */
 import { IS_IE, MODE_SOURCE, MODE_SPLIT } from "../../core/constants.js";
 import { Icon } from "../../core/ui/icon.js";
-import sourceIcon from "./source.svg.js";
 import { Config } from "../../config.js";
+import sourceIcon from "./source.svg.js";
 Config.prototype.beautifyHTML = !IS_IE;
 Config.prototype.sourceEditor = 'ace';
 Config.prototype.sourceEditorNativeOptions = {

package/esm/plugins/speech-recognize/config.js

@@ -6,10 +6,10 @@
 import { isBoolean } from "../../core/helpers/checker/is-boolean.js";
 import { dataBind } from "../../core/helpers/utils/data-bind.js";
 import { Icon } from "../../core/ui/icon.js";
+import { Config } from "../../config.js";
 import { SpeechRecognition } from "./helpers/api.js";
 import { RecognizeManager } from "./helpers/recognize-manager.js";
 import speechRecognizeIcon from "./speech-recognize.svg.js";
-import { Config } from "../../config.js";
 Config.prototype.speechRecognize = {
     api: SpeechRecognition,
     sound: true,

package/esm/plugins/spellcheck/config.js

@@ -4,8 +4,8 @@
  * Copyright (c) 2013-2024 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
 import { Icon } from "../../core/ui/icon.js";
-import spellcheckIcon from "./spellcheck.svg.js";
 import { Config } from "../../config.js";
+import spellcheckIcon from "./spellcheck.svg.js";
 Config.prototype.spellcheck = false;
 Icon.set('spellcheck', spellcheckIcon);
 Config.prototype.controls.spellcheck = {

package/esm/plugins/symbols/config.js

@@ -4,8 +4,8 @@
  * Copyright (c) 2013-2024 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
 import { Icon } from "../../core/ui/icon.js";
-import symbolsIcon from "./symbols.svg.js";
 import { Config } from "../../config.js";
+import symbolsIcon from "./symbols.svg.js";
 Config.prototype.usePopupForSpecialCharacters = false;
 Config.prototype.specialCharacters = [
     '!',

package/esm/plugins/table/config.js

@@ -7,8 +7,8 @@ import { Dom } from "../../core/dom/index.js";
 import { $$, css, scrollIntoViewIfNeeded } from "../../core/helpers/index.js";
 import { attr } from "../../core/helpers/utils/index.js";
 import { Icon } from "../../core/ui/icon.js";
-import tableIcon from "./table.svg.js";
 import { Config } from "../../config.js";
+import tableIcon from "./table.svg.js";
 Config.prototype.table = {
     selectionCellStyle: 'border: 1px double #1e88e5 !important;',
     useExtraClassesOptions: false

package/esm/plugins/video/config.js

@@ -7,9 +7,9 @@ import { convertMediaUrlToVideoEmbed } from "../../core/helpers/index.js";
 import { Button } from "../../core/ui/button/index.js";
 import { UIBlock, UIForm, UIInput, UITextArea } from "../../core/ui/form/index.js";
 import { Icon } from "../../core/ui/icon.js";
+import { Config } from "../../config.js";
 import { TabsWidget } from "../../modules/widget/index.js";
 import videoIcon from "./video.svg.js";
-import { Config } from "../../config.js";
 Icon.set('video', videoIcon);
 Config.prototype.controls.video = {
     popup: (editor, current, close) => {

package/esm/types/toolbar.d.ts

@@ -12,7 +12,7 @@ import type { IViewBased } from "./view";
 import type { IJodit } from "./jodit";
 import type { Modes, IDictionary, HTMLTagNames, Nullable, IContainer, IComponent, IBound } from "./types";
 import type { IMods } from "./traits";
-interface IControlType<T extends IViewBased = IJodit | IViewBased | IFileBrowser, B = IToolbarButton> {
+interface IControlType<T extends IViewBased = IJodit | IViewBased | IFileBrowser, B extends IToolbarButton = IToolbarButton> {
     name?: string;
     text?: string;
     textTemplate?: (jodit: T, value: string) => string;
@@ -228,7 +228,6 @@ interface IControlListItem {
 }
 interface IControlTypeStrong extends IControlType {
     name: NonNullable<IControlType['name']>;
-    list?: IDictionary<string | number>;
 }
 interface IControlTypeContent extends IControlTypeStrong {
     getContent: NonNullable<IControlTypeStrong['getContent']>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "jodit",
-	"version": "4.2.15",
+	"version": "4.2.17",
 	"description": "Jodit is an awesome and useful wysiwyg editor with filebrowser",
 	"main": "esm/index.js",
 	"types": "types/index.d.ts",

package/types/jodit.d.ts

@@ -12,8 +12,8 @@ import type { AjaxOptions, CanPromise, CustomCommand, ICreate, IDictionary, IFil
 import type * as Modules from "./modules";
 import * as constants from "./core/constants";
 import { Dlgs } from "./core/traits/dlgs";
-import { Selection, ViewWithToolbar } from "./modules";
 import { Config } from "./config";
+import { Selection, ViewWithToolbar } from "./modules";
 /**
  * Class Jodit. Main class
  */

package/types/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/types/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/types/types/toolbar.d.ts

@@ -12,7 +12,7 @@ import type { IViewBased } from "./view";
 import type { IJodit } from "./jodit";
 import type { Modes, IDictionary, HTMLTagNames, Nullable, IContainer, IComponent, IBound } from "./types";
 import type { IMods } from "./traits";
-interface IControlType<T extends IViewBased = IJodit | IViewBased | IFileBrowser, B = IToolbarButton> {
+interface IControlType<T extends IViewBased = IJodit | IViewBased | IFileBrowser, B extends IToolbarButton = IToolbarButton> {
     name?: string;
     text?: string;
     textTemplate?: (jodit: T, value: string) => string;
@@ -228,7 +228,6 @@ interface IControlListItem {
 }
 interface IControlTypeStrong extends IControlType {
     name: NonNullable<IControlType['name']>;
-    list?: IDictionary<string | number>;
 }
 interface IControlTypeContent extends IControlTypeStrong {
     getContent: NonNullable<IControlTypeStrong['getContent']>;