jodit 4.17.6 → 4.18.0

package/es5/plugins/debug/debug.css

@@ -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.17.6
+ * Version: v4.18.0
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */

package/es5/plugins/debug/debug.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.17.6
+ * Version: v4.18.0
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */

package/es5/plugins/debug/debug.min.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.17.6
+ * Version: v4.18.0
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */

package/es5/plugins/speech-recognize/speech-recognize.css

@@ -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.17.6
+ * Version: v4.18.0
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */

package/es5/plugins/speech-recognize/speech-recognize.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.17.6
+ * Version: v4.18.0
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */

package/es5/plugins/speech-recognize/speech-recognize.min.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.17.6
+ * Version: v4.18.0
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */

package/es5/polyfills.fat.min.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.17.6
+ * Version: v4.18.0
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */

package/es5/polyfills.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.17.6
+ * Version: v4.18.0
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */

package/es5/polyfills.min.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.17.6
+ * Version: v4.18.0
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */

package/esm/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/esm/config.js

@@ -748,19 +748,46 @@ class Config {
         /**
          * 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']
          *   }
          * });
          * ```
          */
         this.imageAlignClasses = null;
+        /**
+         * 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 }
+         * });
+         * ```
+         */
+        this.alignClasses = {};
+        /**
+         * Alignment given to the media the video popup inserts. `'normal'` leaves
+         * them unaligned
+         */
+        this.mediaDefaultAlign = 'normal';
         /**
          * Do not display these buttons that are on the list
          *

package/esm/core/constants.js

@@ -3,7 +3,7 @@
  * 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
  */
-export const APP_VERSION = "4.17.6";
+export const APP_VERSION = "4.18.0";
 // prettier-ignore
 export const ES = "es2020";
 export const IS_ES_MODERN = true;

package/esm/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/esm/core/helpers/utils/align.js

@@ -4,18 +4,40 @@
  * Copyright (c) 2013-2026 Valerii Chupurnov. All rights reserved. https://xdsoft.net
  */
 import { Dom } from "../../dom/index.js";
+import { isArray } from "../checker/is-array.js";
 import { attr } from "./attr.js";
 import { clearCenterAlign, css, cssInline } from "./css.js";
-const classNames = (value) => (value !== null && value !== void 0 ? value : '').split(/\s+/).filter(Boolean);
+import { getWrappedMedia } from "./media-wrapper.js";
+// The sets of class names an alignment lists, the first being the one to write
+const classSets = (value) => (isArray(value) ? value : [value !== null && value !== void 0 ? value : ''])
+    .map(set => set.split(/\s+/).filter(Boolean))
+    .filter(set => set.length);
 /**
- * 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 function getAlignClasses(jodit, elm) {
+    var _a, _b;
+    if (!elm) {
+        return null;
+    }
+    const media = Dom.isTag(elm, new Set(['jodit', 'jodit-media']))
+        ? elm.firstElementChild
+        : getWrappedMedia(jodit, elm);
+    const tag = (media !== null && media !== void 0 ? media : elm).nodeName.toLowerCase();
+    return ((_b = (_a = jodit.o.alignClasses) === null || _a === void 0 ? void 0 : _a[tag]) !== null && _b !== void 0 ? _b : (tag === 'img' ? jodit.o.imageAlignClasses : null));
+}
+/**
+ * Align image, with `classes` (see `alignClasses`) instead of inline styles
+ * when they are given
  */
 export function hAlignElement(image, align, classes) {
+    var _a;
     if (classes) {
         hAlignElement(image, 'normal');
-        Object.values(classes).forEach(value => image.classList.remove(...classNames(value)));
-        image.classList.add(...classNames(classes[align || 'normal']));
+        Object.values(classes).forEach(value => classSets(value).forEach(set => image.classList.remove(...set)));
+        image.classList.add(...((_a = classSets(classes[align || 'normal'])[0]) !== null && _a !== void 0 ? _a : []));
         ['class', 'style'].forEach(name => {
             var _a;
             if (!((_a = attr(image, name)) === null || _a === void 0 ? void 0 : _a.trim())) {
@@ -52,9 +74,7 @@ export function hAlignElement(image, align, classes) {
 export function getHAlign(elm, classes) {
     if (classes) {
         for (const align of ['left', 'right', 'center', 'normal']) {
-            const names = classNames(classes[align]);
-            if (names.length &&
-                names.every(name => elm.classList.contains(name))) {
+            if (classSets(classes[align]).some(set => set.every(name => elm.classList.contains(name)))) {
                 return align;
             }
         }

package/esm/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/esm/core/helpers/utils/index.js

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

package/esm/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/esm/core/helpers/utils/media-wrapper.js

@@ -0,0 +1,63 @@
+/*!
+ * 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
+ */
+import { Dom } from "../../dom/dom.js";
+const isWrapper = (node, wrapper) => Dom.isHTMLElement(node) &&
+    node.nodeName.toLowerCase() === wrapper.tag.toLowerCase() &&
+    node.classList.contains(wrapper.className);
+/**
+ * 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 function getWrappedMedia(jodit, elm) {
+    var _a;
+    for (const [tag, wrapper] of Object.entries((_a = jodit.o.mediaWrappers) !== null && _a !== void 0 ? _a : {})) {
+        if (isWrapper(elm, wrapper)) {
+            const media = elm.querySelector(tag);
+            if (media) {
+                return media;
+            }
+        }
+    }
+    return null;
+}
+/**
+ * The wrapper media keep in the content (see `mediaWrappers`) that is or
+ * holds `node`
+ */
+export function getMediaWrapper(jodit, node) {
+    return Dom.closest(node, elm => Boolean(getWrappedMedia(jodit, elm)), jodit.editor);
+}
+/**
+ * An empty wrapper for media of type `tag` to keep in the content (see
+ * `mediaWrappers`), or null when there is none for it
+ */
+export function createMediaWrapper(jodit, tag) {
+    var _a;
+    const wrapper = (_a = jodit.o.mediaWrappers) === null || _a === void 0 ? void 0 : _a[tag.toLowerCase()];
+    if (!wrapper) {
+        return null;
+    }
+    return jodit.createInside.element(wrapper.tag, {
+        class: wrapper.className,
+        contenteditable: false,
+        draggable: true
+    });
+}
+/**
+ * Puts `element` in the wrapper for its type (see `mediaWrappers`), and
+ * returns the wrapper, or `element` when there is none for it
+ */
+export function wrapMedia(jodit, element) {
+    const wrapper = createMediaWrapper(jodit, element.nodeName);
+    if (!wrapper) {
+        return element;
+    }
+    if (element.parentNode) {
+        Dom.before(element, wrapper);
+    }
+    Dom.append(wrapper, element);
+    return wrapper;
+}

package/esm/core/selection/selection.js

@@ -19,7 +19,7 @@ import { autobind } from "../decorators/index.js";
 import { Dom } from "../dom/dom.js";
 import { $$, attr, css, error, getScrollParent, scrollIntoViewIfNeeded, size, toArray } from "../helpers/index.js";
 import { isFunction, isMarker, isString } from "../helpers/checker/index.js";
-import { hAlignElement } from "../helpers/utils/align.js";
+import { getAlignClasses, hAlignElement } from "../helpers/utils/align.js";
 import { assert } from "../helpers/utils/assert.js";
 import { moveTheNodeAlongTheEdgeOutward } from "./helpers/move-the-node-along-the-edge-outward.js";
 import "./interface.js";
@@ -776,9 +776,9 @@ export class Selection {
         if (styles && typeof styles === 'object') {
             css(image, styles);
         }
-        const { imageDefaultAlign, imageAlignClasses } = this.j.o;
+        const { imageDefaultAlign } = this.j.o;
         if (imageDefaultAlign && imageDefaultAlign !== 'normal') {
-            hAlignElement(image, imageDefaultAlign, imageAlignClasses);
+            hAlignElement(image, imageDefaultAlign, getAlignClasses(this.j, image));
         }
         const onload = () => {
             if (image.naturalHeight < image.offsetHeight ||

package/esm/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/esm/modules/toolbar/button/button.js

@@ -36,6 +36,7 @@ import { Icon } from "../../../core/ui/icon.js";
 import { Popup } from "../../../core/ui/popup/popup.js";
 import { makeCollection } from "../factory.js";
 const INPUT_TAGS = new Set(['input', 'textarea', 'select']);
+const TYPE_AHEAD_TIMEOUT = 1000;
 const FOCUSABLE_SELECTOR = [
     'button:not([disabled])',
     'a[href]',
@@ -177,6 +178,9 @@ let ToolbarButton = class ToolbarButton extends UIButton {
             currentValue: '',
             hasTrigger: false
         };
+        this.__typed = '';
+        this.__typedAt = 0;
+        this.__typedTo = null;
         this.openedPopup = null;
         const button = this.getElm('button');
         assert(button, 'Element button should exists');
@@ -366,11 +370,65 @@ let ToolbarButton = class ToolbarButton extends UIButton {
                 items[(index + 1) % items.length].focus();
                 break;
             default:
-                return;
+                if (!this.control.list ||
+                    !this.__typeAhead(e.key, items, index)) {
+                    return;
+                }
         }
         e.preventDefault();
         e.stopPropagation();
     }
+    /**
+     * 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
+     */
+    __onEditorKeyDown(e) {
+        if (!this.openedPopup ||
+            !this.control.list ||
+            e.altKey ||
+            e.ctrlKey ||
+            e.metaKey ||
+            !this.__typeAhead(e.key, this.__popupFocusables(), -1)) {
+            return;
+        }
+        e.preventDefault();
+        return false;
+    }
+    /**
+     * 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
+     */
+    __typeAhead(key, items, index) {
+        var _a, _b;
+        const now = Date.now();
+        if (now - this.__typedAt > TYPE_AHEAD_TIMEOUT ||
+            items[index] !== this.__typedTo) {
+            this.__typed = '';
+        }
+        if (key.length !== 1 || (key === ' ' && !this.__typed)) {
+            return false;
+        }
+        this.__typedAt = now;
+        this.__typed += key;
+        this.__typedTo = items[index];
+        const { compare } = new Intl.Collator(undefined, {
+            usage: 'search',
+            sensitivity: 'base'
+        }), typed = this.__typed, cycle = Array.from(typed).every(char => compare(char, typed[0]) === 0), prefix = cycle ? typed[0] : typed, start = cycle ? index + 1 : Math.max(index, 0);
+        for (let i = 0; i < items.length; i += 1) {
+            const item = items[(start + i) % items.length], label = (_b = (_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '';
+            if (compare(label.slice(0, prefix.length), prefix) === 0) {
+                item.focus();
+                this.__typedTo = item;
+                break;
+            }
+        }
+        return true;
+    }
     /**
      * Visible controls of the opened dropdown that can take the focus
      */
@@ -385,12 +443,16 @@ let ToolbarButton = class ToolbarButton extends UIButton {
      * Create an open popup list
      */
     __openControlList(control) {
-        var _a;
+        var _a, _b, _c, _d, _e;
         const controls = (_a = this.jodit.options.controls) !== null && _a !== void 0 ? _a : {}, getControl = (key) => findControlType(key, controls);
         const list = control.list;
         const menu = this.openPopup();
-        const toolbar = makeCollection(this.j);
         menu.parentElement = this;
+        const content = (_b = control.popup) === null || _b === void 0 ? void 0 : _b.call(control, this.j, (_e = (_d = (_c = this.toolbar) === null || _c === void 0 ? void 0 : _c.getTarget(this)) !== null && _d !== void 0 ? _d : this.target) !== null && _e !== void 0 ? _e : null, this.__closePopup, this);
+        if (content) {
+            return this.__openMenu(menu, content);
+        }
+        const toolbar = makeCollection(this.j);
         toolbar.parentElement = menu;
         toolbar.mode = 'vertical';
         const isListItem = (key) => isPlainObject(key) && 'title' in key && 'value' in key;
@@ -442,7 +504,10 @@ let ToolbarButton = class ToolbarButton extends UIButton {
         toolbar.build(isArray(list)
             ? list.map(getButton)
             : keys(list, false).map(key => getButton(key, list[key])), this.target);
-        menu.setContent(toolbar).open(() => position(this.container), false, this.j.o.allowTabNavigation ? this.container : undefined);
+        this.__openMenu(menu, toolbar);
+    }
+    __openMenu(menu, content) {
+        menu.setContent(content).open(() => position(this.container), false, this.j.o.allowTabNavigation ? this.container : undefined);
         this.state.activated = true;
     }
     onOutsideClick(e) {
@@ -462,6 +527,7 @@ let ToolbarButton = class ToolbarButton extends UIButton {
         this.j.e
             .on(this.ow, 'mousedown touchstart', this.onOutsideClick)
             .on('escape closeAllPopups', this.onOutsideClick)
+            .on('keydown', this.__onEditorKeyDown)
             .on(this.openedPopup.container, 'keydown', this.__onPopupKeyDown);
         return this.openedPopup;
     }
@@ -479,7 +545,8 @@ let ToolbarButton = class ToolbarButton extends UIButton {
         this.openedPopup = null;
         this.j.e
             .off(this.ow, 'mousedown touchstart', this.onOutsideClick)
-            .off('escape closeAllPopups', this.onOutsideClick);
+            .off('escape closeAllPopups', this.onOutsideClick)
+            .off('keydown', this.__onEditorKeyDown);
         // The keyboard brought the focus into the dropdown: give it back to
         // the button, otherwise it would fall out to the document
         const { activeElement } = this.od, hadFocus = activeElement &&
@@ -558,6 +625,9 @@ __decorate([
 __decorate([
     autobind
 ], ToolbarButton.prototype, "__onPopupKeyDown", null);
+__decorate([
+    autobind
+], ToolbarButton.prototype, "__onEditorKeyDown", null);
 __decorate([
     autobind
 ], ToolbarButton.prototype, "onOutsideClick", null);