jodit 4.17.6 → 4.18.1

package/esm/plugins/dtd/after-insert/remove-extra-br.js

@@ -33,7 +33,12 @@ export function removeExtraBr(jodit, node) {
         if (Dom.findNotEmptySibling(br, false)) {
             return;
         }
-        jodit.s.setCursorBefore(br);
+        // After a block is inserted the caret is already at the end of its
+        // text; moving it before the `<br>` would put it on a line of its own
+        // below the block (#1315)
+        if (!Dom.isOrContains(node, jodit.s.range.startContainer)) {
+            jodit.s.setCursorBefore(br);
+        }
         Dom.safeRemove(br);
     }
 }

package/esm/plugins/dtd/before-insert/check-block-nesting.js

@@ -19,13 +19,28 @@ export function checkBlockNesting(jodit, node) {
         let current = (_b = (_a = jodit.s.current()) === null || _a === void 0 ? void 0 : _a.parentElement) !== null && _b !== void 0 ? _b : null;
         while (current && current !== jodit.editor) {
             if (Dom.isBlock(current)) {
-                if (jodit.o.dtd.blockLimits[current.nodeName.toLowerCase()]) {
+                // In DIV mode the caret's own empty block is a line, like
+                // `<p><br></p>`, not a container to insert into (#1315)
+                const isEmptyLine = !parent &&
+                    Dom.isTag(current, jodit.o.enter) &&
+                    Dom.isEmpty(current);
+                if (jodit.o.dtd.blockLimits[current.nodeName.toLowerCase()] &&
+                    !isEmptyLine) {
                     break;
                 }
                 parent = current;
             }
             current = current.parentElement;
         }
+        // A list that is all of the inserted content adds its items to the
+        // list of the item it goes into, as the browsers' own paste does
+        if (Dom.isLeaf(current) &&
+            Dom.isList(node) &&
+            Dom.isFragment(node.parentNode) &&
+            !Dom.findNotEmptySibling(node, false)) {
+            Dom.unwrap(node);
+            parent = current;
+        }
         if (parent) {
             jodit.s.setCursorAfter(parent);
             if (Dom.isEmpty(parent)) {

package/esm/plugins/dtd/config.js

@@ -13,10 +13,12 @@ Config.prototype.dtd = {
         audio: 1,
         body: 1,
         caption: 1,
+        dd: 1,
         details: 1,
         dir: 1,
         div: 1,
         dl: 1,
+        dt: 1,
         fieldset: 1,
         figcaption: 1,
         figure: 1,
@@ -24,6 +26,7 @@ Config.prototype.dtd = {
         form: 1,
         header: 1,
         hgroup: 1,
+        li: 1,
         main: 1,
         menu: 1,
         nav: 1,

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;
+}