jodit 4.17.5 → 4.18.0

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

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

@@ -4,16 +4,23 @@
  * Copyright (c) 2013-2026 Valerii Chupurnov. All rights reserved. https://xdsoft.net
  */
 import { Dom } from "../../core/dom/index.js";
+import { isArray } from "../../core/helpers/checker/is-array.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 { UIFontPicker } from "./font-picker.js";
 /**
  * Default font-size points
  */
 Config.prototype.defaultFontSizePoints = 'px';
+Config.prototype.font = {
+    googleFonts: {
+        url: ''
+    }
+};
 Icon.set('font', fontIcon).set('fontsize', fontsizeIcon);
 Config.prototype.controls.fontsize = {
     command: 'fontsize',
@@ -78,6 +85,7 @@ Config.prototype.controls.fontsize = {
         return keySet.has(normalize(value.toString()));
     }
 };
+const hadSelection = new WeakSet();
 Config.prototype.controls.font = {
     ...Config.prototype.controls.fontsize,
     command: 'fontname',
@@ -108,6 +116,9 @@ Config.prototype.controls.font = {
         catch (_a) { }
         return `<span data-style="${key}" style="${isAvailable ? `font-family: ${key}!important;` : ''}">${value}</span>`;
     },
+    popup: (editor, current, close, button) => editor.o.font.googleFonts.url
+        ? new UIFontPicker(editor, button, close)
+        : false,
     data: {
         cssRule: 'font-family',
         normalize: (v) => {
@@ -119,19 +130,23 @@ Config.prototype.controls.font = {
     },
     // When no font is explicitly set, the computed font-family equals the
     // editor's own default (e.g. `-apple-system, …`). Return '' so the
-    // button shows the `Default` list entry instead of that raw stack.
-    // See #1370
-    value: (editor) => {
-        const current = editor.s.current();
-        if (!current) {
-            return;
+    // button shows the list's `Default` entry, when it has one, instead of
+    // that raw stack. See #1370
+    value: (editor, button) => {
+        const current = editor.s.current(), box = current && Dom.closest(current, Dom.isElement, editor.editor);
+        // Until there is a selection the button shows the editor's own font,
+        // and afterwards the font of the last one
+        if (box) {
+            hadSelection.add(button);
         }
-        const box = Dom.closest(current, Dom.isElement, editor.editor);
-        if (!box) {
+        else if (hadSelection.has(button)) {
             return;
         }
-        const value = css(box, 'font-family').toString();
-        if (value === css(editor.editor, 'font-family').toString()) {
+        const value = css(box || editor.editor, 'font-family').toString(), { list } = button.control;
+        if (value === css(editor.editor, 'font-family').toString() &&
+            (isArray(list)
+                ? list.includes('')
+                : '' in (list !== null && list !== void 0 ? list : {}))) {
             return '';
         }
         return value;

package/esm/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/esm/plugins/font/font-picker.js

@@ -0,0 +1,238 @@
+/*!
+ * 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
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { component } from "../../core/decorators/component/component.js";
+import { watch } from "../../core/decorators/watch/watch.js";
+import { Dom } from "../../core/dom/dom.js";
+import { uniqueUid } from "../../core/global.js";
+import { isArray } from "../../core/helpers/checker/is-array.js";
+import { attr } from "../../core/helpers/utils/attr.js";
+import { css } from "../../core/helpers/utils/css.js";
+import { keys } from "../../core/helpers/utils/utils.js";
+import { UIElement } from "../../core/ui/element.js";
+import { firstFamily, GoogleFonts } from "./google-fonts.js";
+const HEADINGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+const GENERIC_FAMILIES = new Set([
+    'serif',
+    'sans-serif',
+    'monospace',
+    'cursive',
+    'fantasy',
+    'system-ui',
+    'ui-serif',
+    'ui-sans-serif',
+    'ui-monospace',
+    'ui-rounded'
+]);
+/**
+ * A family that names a font, not a generic family or a vendor keyword such
+ * as `-apple-system`
+ */
+function isFontName(family) {
+    return (Boolean(family) &&
+        !family.startsWith('-') &&
+        !GENERIC_FAMILIES.has(family));
+}
+/**
+ * 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
+ */
+let UIFontPicker = class UIFontPicker extends UIElement {
+    className() {
+        return 'UIFontPicker';
+    }
+    constructor(jodit, __button, __close) {
+        super(jodit);
+        this.__button = __button;
+        this.__close = __close;
+        this.__fonts = new Map();
+        this.__observer = null;
+        this.__googleFonts = jodit.getInstance(GoogleFonts);
+        this.__render();
+        if (!this.__googleFonts.fonts.size) {
+            this.__googleFonts.ready.then(() => !this.isDestructed && this.__render());
+        }
+    }
+    __render() {
+        var _a, _b;
+        const { control } = this.__button, { list = {} } = control, listed = isArray(list)
+            ? list.map((key) => ({
+                value: key.toString(),
+                title: key.toString()
+            }))
+            : keys(list, false).map((key) => ({
+                value: key,
+                title: list[key].toString()
+            })), google = Array.from(this.__googleFonts.fonts.values(), (font) => ({
+            value: this.__googleFonts.value(font),
+            title: font.family,
+            font
+        })), byFamily = new Map();
+        [...google, ...listed].forEach(entry => byFamily.set(firstFamily(entry.value), entry));
+        const theme = new Map(), used = new Map();
+        // The theme's own fonts are listed too, so its body font can be chosen
+        // to take a font off
+        this.__themeFonts().forEach(fontFamily => {
+            var _a;
+            const family = firstFamily(fontFamily), title = fontFamily.split(',')[0].replace(/["']/g, '').trim(), entry = (_a = byFamily.get(family)) !== null && _a !== void 0 ? _a : (isFontName(family)
+                ? { value: fontFamily, title }
+                : undefined);
+            entry && !theme.has(family) && theme.set(family, entry);
+        });
+        this.__usedFonts().forEach(fontFamily => {
+            const family = firstFamily(fontFamily), entry = byFamily.get(family);
+            entry && !theme.has(family) && used.set(family, entry);
+        });
+        const defaultEntry = listed.find(entry => entry.value === ''), current = firstFamily((_b = (_a = control.value) === null || _a === void 0 ? void 0 : _a.call(control, this.j, this.__button)) !== null && _b !== void 0 ? _b : '');
+        Dom.detach(this.container);
+        this.__fonts.clear();
+        defaultEntry && this.__append(current, [defaultEntry]);
+        this.__append(current, [...theme.values()], 'Theme fonts');
+        this.__append(current, [...used.values()], 'Used fonts');
+        this.__append(current, listed.filter(entry => entry !== defaultEntry), 'System fonts');
+        this.__append(current, google, 'Google Fonts');
+        this.__observeGoogleFonts();
+    }
+    /**
+     * The fonts the editor's styles give text and each heading
+     */
+    __themeFonts() {
+        const { editor } = this.j, fonts = [css(editor, 'font-family').toString()];
+        HEADINGS.forEach(tag => {
+            const heading = this.j.createInside.element(tag, {
+                style: 'display: none'
+            });
+            Dom.append(editor, heading);
+            fonts.push(css(heading, 'font-family').toString());
+            Dom.safeRemove(heading);
+        });
+        return fonts;
+    }
+    /**
+     * The fonts the content sets
+     */
+    __usedFonts() {
+        return Array.from(this.j.editor.querySelectorAll('[style*="font-family"]'), element => element.style.fontFamily);
+    }
+    __append(current, entries, heading) {
+        if (!entries.length) {
+            return;
+        }
+        const { control } = this.__button, group = this.j.c.div(this.getFullElName('group'));
+        if (heading) {
+            const title = this.j.c.div(this.getFullElName('heading'), {
+                id: `${this.getFullElName('heading')}-${uniqueUid()}`
+            });
+            title.textContent = this.i18n(heading);
+            attr(group, { role: 'group', 'aria-labelledby': title.id });
+            Dom.append(group, title);
+        }
+        entries.forEach(entry => {
+            var _a, _b;
+            const item = this.j.c.element('button', {
+                type: 'button',
+                class: this.getFullElName('item'),
+                'data-value': entry.value,
+                'aria-pressed': firstFamily(entry.value) === current
+            });
+            if (entry.font) {
+                item.textContent = entry.title;
+                this.__fonts.set(item, entry.font);
+            }
+            else {
+                item.innerHTML =
+                    (_b = (_a = control.childTemplate) === null || _a === void 0 ? void 0 : _a.call(control, this.j, entry.value, entry.title, this.__button)) !== null && _b !== void 0 ? _b : entry.title;
+            }
+            Dom.append(group, item);
+        });
+        Dom.append(this.container, group);
+    }
+    /**
+     * 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
+     */
+    __observeGoogleFonts() {
+        this.j.async.requestAnimationFrame(() => {
+            var _a;
+            (_a = this.__observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+            if (this.isDestructed || !this.__fonts.size) {
+                return;
+            }
+            const observer = new IntersectionObserver(entries => {
+                const fonts = [];
+                entries.forEach(({ isIntersecting, target }) => {
+                    const font = this.__fonts.get(target);
+                    if (isIntersecting && font) {
+                        fonts.push(font);
+                        css(target, {
+                            fontFamily: this.__googleFonts.value(font)
+                        });
+                        observer.unobserve(target);
+                    }
+                });
+                this.__googleFonts.preview(fonts);
+            }, {
+                root: this.container.parentElement,
+                rootMargin: '0px 0px 400px 0px'
+            });
+            this.__fonts.forEach((_, item) => observer.observe(item));
+            this.__observer = observer;
+        });
+    }
+    /**
+     * Keeps the editor's selection, as the toolbar buttons do
+     */
+    onMouseDown(e) {
+        e.preventDefault();
+    }
+    onClick(e) {
+        var _a;
+        const item = Dom.up(e.target, node => Dom.isHTMLElement(node) && node.hasAttribute('data-value'), this.container);
+        if (!item) {
+            return;
+        }
+        const value = (_a = attr(item, 'data-value')) !== null && _a !== void 0 ? _a : '', font = this.__googleFonts.find(value), 
+        // The font the text has anyway is taken off rather than written
+        inherited = firstFamily(value) === firstFamily(this.__blockFont());
+        font && !inherited && this.__googleFonts.load(font);
+        this.j.execCommand('fontname', false, inherited ? '' : value);
+        this.__close();
+    }
+    /**
+     * The font the selected text has without a font of its own: its block's
+     */
+    __blockFont() {
+        const block = Dom.up(this.j.s.current(), Dom.isBlock, this.j.editor);
+        return css(block !== null && block !== void 0 ? block : this.j.editor, 'font-family').toString();
+    }
+    destruct() {
+        var _a;
+        (_a = this.__observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        super.destruct();
+    }
+};
+__decorate([
+    watch('container:mousedown')
+], UIFontPicker.prototype, "onMouseDown", null);
+__decorate([
+    watch('container:click')
+], UIFontPicker.prototype, "onClick", null);
+UIFontPicker = __decorate([
+    component
+], UIFontPicker);
+export { UIFontPicker };

package/esm/plugins/font/font.js

@@ -6,6 +6,7 @@
 import { pluginSystem } from "../../core/global.js";
 import { normalizeSize } from "../../core/helpers/index.js";
 import "./config.js";
+import { GoogleFonts } from "./google-fonts.js";
 /**
  * Process commands `fontsize` and `fontname`
  */
@@ -19,6 +20,17 @@ export function font(editor) {
         name: 'fontsize',
         group: 'font'
     });
+    if (editor.o.font.googleFonts.url) {
+        const googleFonts = editor.getInstance(GoogleFonts), loadUsed = editor.async.debounce(() => googleFonts.loadUsed(), editor.defaultTimeout);
+        googleFonts.ready.then(loadUsed);
+        editor.e.on('afterInit afterSetMode change', loadUsed);
+    }
+    // An iframe's stylesheets can arrive after the toolbar first shows the
+    // editor's font
+    editor.e.on('afterInit', () => {
+        editor.iframe &&
+            editor.e.on(editor.ed, 'load', () => editor.e.fire('updateToolbar'), { capture: true });
+    });
     const callback = (command, second, third) => {
         switch (command) {
             case 'fontsize':

package/esm/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;
+}