jodit 4.17.5 → 4.18.0

package/types/config.d.ts

@@ -15,6 +15,7 @@ import type { IControlType } from "./types/index";
 import type { formTemplate } from "./plugins/link/template";
 import type { IUIForm } from "./types/index";
 import type { IUIOption } from "./types/index";
+import type { MediaWrapper } from "./types/index";
 import type { ButtonsOption } from "./types/index";
 import type { InsertMode } from "./types/index";
 import type { FuzzySearch } from "./types/index";
@@ -22,6 +23,7 @@ import type { ISourceEditor } from "./types/index";
 import type { ISpeechRecognizeConstructor } from "./plugins/speech-recognize/interface";
 import type { Attributes } from "./types/index";
 import type { Controls } from "./types/index";
+import type { HAlignClasses } from "./types/index";
 import type { IAsyncStorageOptions } from "./types/index";
 import type { IExtraPlugin } from "./types/index";
 import type { ImageAlignClasses } from "./types/index";
@@ -642,19 +644,46 @@ declare class Config implements IViewOptions {
     /**
      * Class names to align images with, instead of an inline `float` or
      * `margin`. Aligning an image removes every class listed here and adds the
-     * chosen alignment's, which can be several separated by spaces.
+     * chosen alignment's, which can be several separated by spaces. An
+     * alignment can also list several such sets, to recognise each of them;
+     * aligning writes the first. `alignClasses.img` takes its place when set.
      *
      * ```javascript
      * Jodit.make('#editor', {
      *   imageAlignClasses: {
      *     left: 'align-left',
      *     right: 'align-right',
-     *     center: 'align-center'
+     *     center: ['align-center', 'centered']
      *   }
      * });
      * ```
      */
     imageAlignClasses: Nullable<ImageAlignClasses>;
+    /**
+     * Class names to align elements with, by tag name, as `imageAlignClasses`
+     * does for images: `img`, and `video`, `audio` and `iframe` in the media
+     * popup. A media wrapper (see `mediaWrappers`), and Jodit's own `jodit` and
+     * `jodit-media` wrappers, are aligned with the classes for the media in
+     * them.
+     *
+     * ```javascript
+     * const media = {
+     *   left: 'media-left',
+     *   right: 'media-right',
+     *   center: 'media-center'
+     * };
+     *
+     * Jodit.make('#editor', {
+     *   alignClasses: { video: media, iframe: media }
+     * });
+     * ```
+     */
+    alignClasses: IDictionary<HAlignClasses>;
+    /**
+     * Alignment given to the media the video popup inserts. `'normal'` leaves
+     * them unaligned
+     */
+    mediaDefaultAlign: ImageHAlign;
     /**
      * Do not display these buttons that are on the list
      *
@@ -1293,6 +1322,18 @@ interface Config {
 }
 interface Config {
     defaultFontSizePoints: 'px' | 'pt';
+    font: {
+        googleFonts: {
+            /**
+             * Adds the Google Fonts library to the font family dropdown, which then
+             * also lists the theme's fonts and the fonts the content uses. The
+             * address answers with the JSON of the Google Fonts Developer API:
+             * the API itself (`https://www.googleapis.com/webfonts/v1/webfonts?key=…`)
+             * or a proxy of it. Empty leaves the dropdown as it is
+             */
+            url: string;
+        };
+    };
 }
 interface Config {
     /**
@@ -1549,6 +1590,28 @@ interface Config {
      * Media tags
      */
     mediaBlocks: string[];
+    /**
+     * Wrappers that media keep in the content, by the media's tag name, such as
+     * Froala's `<span class="fr-video">` around video, audio and embeds. An
+     * element with a wrapper for its tag:
+     * - is wrapped in it instead of the editor-only `mediaFakeTag` when its tag
+     * is one of `mediaBlocks`, or left in it when it's already in one
+     * - goes in inside it when the video popup inserts it, as an upload, a
+     * link's embed or embed code that is one element
+     * - opens the media popup for its wrapper when clicked, whose Align and
+     * Delete act on the wrapper
+     *
+     * A wrapper is given `contenteditable="false"` and `draggable="true"`,
+     * which stay in the value.
+     * ```javascript
+     * const frVideo = { tag: 'span', className: 'fr-video' };
+     *
+     * Jodit.make('#editor', {
+     *   mediaWrappers: { video: frVideo, audio: frVideo, iframe: frVideo }
+     * });
+     * ```
+     */
+    mediaWrappers: IDictionary<MediaWrapper>;
 }
 interface Config {
     /**

package/types/core/helpers/utils/align.d.ts

@@ -6,16 +6,22 @@
 /**
  * @module helpers/utils
  */
-import type { ImageAlignClasses, ImageHAlign, Nullable } from "../../../types/index";
+import type { HAlignClasses, IJodit, ImageHAlign, Nullable } from "../../../types/index";
 /**
- * Align image, with `classes` (see `imageAlignClasses`) instead of inline
- * styles when they are given
+ * The class names to align `elm` with: `alignClasses` for its tag, or for the
+ * media in it when it wraps media (a `mediaWrappers` wrapper, `jodit` or
+ * `jodit-media`), falling back to `imageAlignClasses` for an image
  */
-export declare function hAlignElement(image: HTMLElement, align: ImageHAlign, classes?: Nullable<ImageAlignClasses>): void;
+export declare function getAlignClasses(jodit: IJodit, elm: Nullable<HTMLElement>): Nullable<HAlignClasses>;
+/**
+ * Align image, with `classes` (see `alignClasses`) instead of inline styles
+ * when they are given
+ */
+export declare function hAlignElement(image: HTMLElement, align: ImageHAlign, classes?: Nullable<HAlignClasses>): void;
 /**
  * The alignment `hAlignElement` has set on an element
  */
-export declare function getHAlign(elm: HTMLElement, classes?: Nullable<ImageAlignClasses>): ImageHAlign;
+export declare function getHAlign(elm: HTMLElement, classes?: Nullable<HAlignClasses>): ImageHAlign;
 /**
  * Remove text-align style for all selected children
  */

package/types/core/helpers/utils/index.d.ts

@@ -26,6 +26,7 @@ export * from "./get-class-name";
 export * from "./human-size-to-bytes";
 export * from "./is-unsafe-proto-key";
 export * from "./mark-deprecated";
+export * from "./media-wrapper";
 export * from "./parse-query";
 export * from "./print";
 export * from "./reset";

package/types/core/helpers/utils/media-wrapper.d.ts

@@ -0,0 +1,29 @@
+/*!
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * Released under MIT see LICENSE.txt in the project root for license information.
+ * Copyright (c) 2013-2026 Valerii Chupurnov. All rights reserved. https://xdsoft.net
+ */
+/**
+ * @module helpers/utils
+ */
+import type { IJodit, Nullable } from "../../../types/index";
+/**
+ * The media in `elm` when `elm` is a wrapper media keep in the content (see
+ * `mediaWrappers`): an element of a type `elm` is the wrapper for
+ */
+export declare function getWrappedMedia(jodit: IJodit, elm: Nullable<Node>): Nullable<HTMLElement>;
+/**
+ * The wrapper media keep in the content (see `mediaWrappers`) that is or
+ * holds `node`
+ */
+export declare function getMediaWrapper(jodit: IJodit, node: Nullable<Node>): Nullable<HTMLElement>;
+/**
+ * An empty wrapper for media of type `tag` to keep in the content (see
+ * `mediaWrappers`), or null when there is none for it
+ */
+export declare function createMediaWrapper(jodit: IJodit, tag: string): Nullable<HTMLElement>;
+/**
+ * Puts `element` in the wrapper for its type (see `mediaWrappers`), and
+ * returns the wrapper, or `element` when there is none for it
+ */
+export declare function wrapMedia(jodit: IJodit, element: HTMLElement): HTMLElement;

package/types/modules/toolbar/button/button.d.ts

@@ -77,6 +77,23 @@ export declare class ToolbarButton<T extends IViewBased = IViewBased> extends UI
      * `ArrowUp` on the first item close it and give the focus back to the button
      */
     private __onPopupKeyDown;
+    /**
+     * The mouse opens a dropdown without taking the focus out of the editor.
+     * While a dropdown list is open, typing there searches the list, as in an
+     * open `<select>`, instead of writing into the content
+     */
+    private __onEditorKeyDown;
+    private __typed;
+    private __typedAt;
+    private __typedTo;
+    /**
+     * Typing in a dropdown list focuses the next item whose label starts with
+     * the typed text, whatever their case and accents, and repeating one letter
+     * cycles through the items that start with it, like the WAI-ARIA menu
+     * pattern's type-ahead. The typed text starts again after a pause, or once
+     * the focus has moved on
+     */
+    private __typeAhead;
     /**
      * Visible controls of the opened dropdown that can take the focus
      */
@@ -86,6 +103,7 @@ export declare class ToolbarButton<T extends IViewBased = IViewBased> extends UI
      * Create an open popup list
      */
     private __openControlList;
+    private __openMenu;
     protected onOutsideClick(e: MouseEvent): void;
     private openPopup;
     private __closePopup;

package/types/plugins/font/config.d.ts

@@ -6,6 +6,18 @@
 declare module 'jodit/config' {
     interface Config {
         defaultFontSizePoints: 'px' | 'pt';
+        font: {
+            googleFonts: {
+                /**
+                 * Adds the Google Fonts library to the font family dropdown, which then
+                 * also lists the theme's fonts and the fonts the content uses. The
+                 * address answers with the JSON of the Google Fonts Developer API:
+                 * the API itself (`https://www.googleapis.com/webfonts/v1/webfonts?key=…`)
+                 * or a proxy of it. Empty leaves the dropdown as it is
+                 */
+                url: string;
+            };
+        };
     }
 }
 export {};

package/types/plugins/font/font-picker.d.ts

@@ -0,0 +1,51 @@
+/*!
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * Released under MIT see LICENSE.txt in the project root for license information.
+ * Copyright (c) 2013-2026 Valerii Chupurnov. All rights reserved. https://xdsoft.net
+ */
+/**
+ * @module plugins/font
+ */
+import type { IJodit, IToolbarButton } from "../../types/index";
+import { UIElement } from "../../core/ui/element";
+/**
+ * The font family dropdown with Google Fonts. Under their own headings it
+ * lists the fonts the editor's styles give text and headings, the fonts the
+ * content uses, the control's list and the Google Fonts library
+ */
+export declare class UIFontPicker extends UIElement<IJodit> {
+    private readonly __button;
+    private readonly __close;
+    className(): string;
+    private readonly __googleFonts;
+    private readonly __fonts;
+    private __observer;
+    constructor(jodit: IJodit, __button: IToolbarButton, __close: () => void);
+    private __render;
+    /**
+     * The fonts the editor's styles give text and each heading
+     */
+    private __themeFonts;
+    /**
+     * The fonts the content sets
+     */
+    private __usedFonts;
+    private __append;
+    /**
+     * Shows the names of the Google Fonts in view, and those just below it,
+     * in their own fonts. Setting every item's font up front would have the
+     * browser look for each of the library's families among the installed
+     * fonts the first time the list opens
+     */
+    private __observeGoogleFonts;
+    /**
+     * Keeps the editor's selection, as the toolbar buttons do
+     */
+    protected onMouseDown(e: MouseEvent): void;
+    protected onClick(e: MouseEvent): void;
+    /**
+     * The font the selected text has without a font of its own: its block's
+     */
+    private __blockFont;
+    destruct(): void;
+}

package/types/plugins/font/google-fonts.d.ts

@@ -0,0 +1,65 @@
+/*!
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * Released under MIT see LICENSE.txt in the project root for license information.
+ * Copyright (c) 2013-2026 Valerii Chupurnov. All rights reserved. https://xdsoft.net
+ */
+/**
+ * @module plugins/font
+ */
+import type { IJodit } from "../../types/index";
+import { ViewComponent } from "../../core/component/view-component";
+/**
+ * A font as the Google Fonts Developer API describes it
+ */
+export interface IGoogleFont {
+    family: string;
+    category: string;
+    variants: string[];
+}
+/**
+ * The first family of a `font-family` value, unquoted and in lower case for
+ * comparing
+ */
+export declare function firstFamily(fontFamily: string): string;
+/**
+ * Loads fonts from Google Fonts: the whole of each font the content uses into
+ * the editor's document, and just the letters of its name for the font list
+ */
+export declare class GoogleFonts extends ViewComponent<IJodit> {
+    className(): string;
+    /**
+     * The library by lower-case family, empty until it arrives
+     */
+    readonly fonts: Map<string, IGoogleFont>;
+    readonly ready: Promise<void>;
+    private readonly __links;
+    private readonly __loaded;
+    private readonly __previewed;
+    constructor(jodit: IJodit);
+    /**
+     * The library's font named first in a `font-family` value
+     */
+    find(fontFamily: string): IGoogleFont | undefined;
+    /**
+     * The `font-family` value that applies a font
+     */
+    value(font: IGoogleFont): string;
+    /**
+     * Loads the regular, italic, bold and bold italic styles that a font has
+     * into the editor's document
+     */
+    load(font: IGoogleFont): void;
+    /**
+     * Loads every font of the library that the content uses
+     */
+    loadUsed(): void;
+    /**
+     * Loads into the page just the letters of each font's name, so the font
+     * list can show the name in its font
+     */
+    preview(fonts: IGoogleFont[]): void;
+    private __loadedInto;
+    private __family;
+    private __append;
+    destruct(): void;
+}

package/types/plugins/media/config.d.ts

@@ -3,6 +3,10 @@
  * Released under MIT see LICENSE.txt in the project root for license information.
  * Copyright (c) 2013-2026 Valerii Chupurnov. All rights reserved. https://xdsoft.net
  */
+/**
+ * @module plugins/media
+ */
+import type { IDictionary, MediaWrapper } from "../../types/index";
 declare module 'jodit/config' {
     interface Config {
         /**
@@ -17,6 +21,27 @@ declare module 'jodit/config' {
          * Media tags
          */
         mediaBlocks: string[];
+        /**
+         * Wrappers that media keep in the content, by the media's tag name, such as
+         * Froala's `<span class="fr-video">` around video, audio and embeds. An
+         * element with a wrapper for its tag:
+         * - is wrapped in it instead of the editor-only `mediaFakeTag` when its tag
+         * is one of `mediaBlocks`, or left in it when it's already in one
+         * - goes in inside it when the video popup inserts it, as an upload, a
+         * link's embed or embed code that is one element
+         * - opens the media popup for its wrapper when clicked, whose Align and
+         * Delete act on the wrapper
+         *
+         * A wrapper is given `contenteditable="false"` and `draggable="true"`,
+         * which stay in the value.
+         * ```javascript
+         * const frVideo = { tag: 'span', className: 'fr-video' };
+         *
+         * Jodit.make('#editor', {
+         *   mediaWrappers: { video: frVideo, audio: frVideo, iframe: frVideo }
+         * });
+         * ```
+         */
+        mediaWrappers: IDictionary<MediaWrapper>;
     }
 }
-export {};

package/types/plugins/source/editor/engines/ace.d.ts

@@ -25,6 +25,8 @@ export declare class AceEditor extends SourceEditor<AceAjax.Editor> implements I
     init(editor: IJodit): any;
     destruct(): any;
     setValue(value: string): void;
+    private __settingValue;
+    private __onChange;
     getValue(): string;
     setReadOnly(isReadOnly: boolean): void;
     get isFocused(): boolean;

package/types/types/toolbar.d.ts

@@ -193,6 +193,8 @@ interface IControlType<T extends IViewBased = IJodit | IViewBased | IFileBrowser
     childTemplate?: (jodit: T, key: string, value: string, button: IToolbarButton) => string;
     /**
      * After click on the button it will show popup element which consist value that this function returned
+     * For a control with a `list`, the returned content replaces the list's buttons in its dropdown,
+     * and `false` keeps them
      * @example
      * ```javascript
      * var editor = Jodit.make('.editor', {

package/types/types/types.d.ts

@@ -187,10 +187,22 @@ export interface ImageEditorOptions {
 export type InsertMode = 'insert_as_html' | 'insert_as_text' | 'insert_clear_html' | 'insert_only_text';
 export type ImageAction = 'resize' | 'crop';
 export type ImageHAlign = 'normal' | 'left' | 'right' | 'center' | '';
+/**
+ * Class names for each alignment, see `alignClasses`. An alignment can list
+ * several sets of class names to recognise; aligning writes the first
+ */
+export type HAlignClasses = Partial<Record<Exclude<ImageHAlign, ''>, string | string[]>>;
 /**
  * Class names for each image alignment, see `imageAlignClasses`
  */
-export type ImageAlignClasses = Partial<Record<Exclude<ImageHAlign, ''>, string>>;
+export type ImageAlignClasses = HAlignClasses;
+/**
+ * A wrapper that media keep in the content, see `mediaWrappers`
+ */
+export interface MediaWrapper {
+    tag: string;
+    className: string;
+}
 export interface ImageBox {
     w: number;
     h: number;