jodit 4.2.19 → 4.2.22

package/esm/core/ui/button/tooltip/tooltip.js

@@ -21,6 +21,19 @@ import { getContainer } from "../../../global.js";
 import { position } from "../../../helpers/size/position.js";
 import { attr, css } from "../../../helpers/utils/index.js";
 import { UIElement } from "../../element.js";
+const WINDOW_EVENTS_ON_HIDE = [
+    'scroll.tooltip',
+    'joditCloseDialog',
+    'mouseleave.tooltip'
+];
+const JODIT_EVENTS_ON_HIDE = [
+    'escape.tooltip',
+    'change.tooltip',
+    'changePlace.tooltip',
+    'afterOpenPopup.tooltip',
+    'hidePopup.tooltip',
+    'closeAllPopups.tooltip'
+];
 let UITooltip = UITooltip_1 = class UITooltip extends UIElement {
     className() {
         return 'UITooltip';
@@ -39,7 +52,7 @@ let UITooltip = UITooltip_1 = class UITooltip extends UIElement {
             view.o.showTooltip &&
             !view.o.useNativeTooltip) {
             view.hookStatus(STATUSES.ready, () => {
-                // TODO Move it inside __open method. Now it is here because testcase failed with capturing
+                // TODO Move it inside __show method. Now it is here because testcase failed with capturing
                 getContainer(this.j, UITooltip_1).appendChild(this.container);
                 view.e.on(view.container, 'mouseenter.tooltip', this.__onMouseEnter, {
                     capture: true
@@ -47,44 +60,28 @@ let UITooltip = UITooltip_1 = class UITooltip extends UIElement {
             });
         }
     }
-    __addListenersOnClose() {
+    __addListenersOnEnter() {
         if (this.__listenClose) {
             return;
         }
         this.__listenClose = true;
         const view = this.j;
         view.e
-            .on(view.ow, 'scroll.tooltip', this.__hide)
-            .on(view.ow, 'joditCloseDialog', this.__hide)
-            .on(view.container, 'mouseleave.tooltip', this.__hide)
-            .on([
-            'escape.tooltip',
-            'change.tooltip',
-            'changePlace.tooltip',
-            'afterOpenPopup.tooltip',
-            'hidePopup.tooltip',
-            'closeAllPopups.tooltip'
-        ], this.__hide)
-            .on(view.container, 'mouseleave', this.__onMouseLeave, {
+            .on(view.ow, WINDOW_EVENTS_ON_HIDE, this.__hide)
+            .on(JODIT_EVENTS_ON_HIDE, this.__hide)
+            .on(view.container, 'mouseleave.tooltip', this.__onMouseLeave, {
             capture: true
         });
     }
-    __removeListenersOnClose() {
+    __removeListenersOnLeave() {
         if (!this.__listenClose) {
             return;
         }
         this.__listenClose = false;
         const view = this.j;
         view.e
-            .off(view.ow, 'scroll.tooltip', this.__hide)
-            .off([
-            'escape.tooltip',
-            'change.tooltip',
-            'changePlace.tooltip',
-            'afterOpenPopup.tooltip',
-            'hidePopup.tooltip',
-            'closeAllPopups.tooltip'
-        ], this.__hide)
+            .off(view.ow, WINDOW_EVENTS_ON_HIDE, this.__hide)
+            .off(JODIT_EVENTS_ON_HIDE, this.__hide)
             .off(view.container, 'mouseleave.tooltip', this.__onMouseLeave);
     }
     __onMouseLeave(e) {
@@ -110,29 +107,30 @@ let UITooltip = UITooltip_1 = class UITooltip extends UIElement {
             return;
         }
         this.__currentTarget = e.target;
-        const pos = position(e.target);
-        this.__addListenersOnClose();
-        this.__delayOpen(() => ({
-            x: pos.left + pos.width / 2,
-            y: pos.top + pos.height
-        }), tooltip);
+        const target = e.target;
+        this.__open(() => {
+            const pos = position(target);
+            return {
+                x: pos.left + pos.width / 2,
+                y: pos.top + pos.height
+            };
+        }, tooltip);
     }
-    __delayOpen(getPoint, content) {
-        const to = this.j.o.showTooltipDelay || this.j.defaultTimeout;
+    __open(getPoint, content) {
+        this.__addListenersOnEnter();
+        this.__isOpened = true;
         this.j.async.clearTimeout(this.__hideTimeout);
         this.j.async.clearTimeout(this.__delayShowTimeout);
-        this.__delayShowTimeout = this.j.async.setTimeout(() => this.__open(getPoint, content), {
-            timeout: to,
-            label: 'tooltip'
-        });
+        const to = this.j.o.showTooltipDelay || this.j.defaultTimeout;
+        if (!to) {
+            this.__show(getPoint, content);
+            return;
+        }
+        this.__delayShowTimeout = this.j.async.setTimeout(() => this.__show(getPoint, content), to);
     }
-    __open(getPoint, content) {
+    __show(getPoint, content) {
         this.setMod('visible', true);
         this.getElm('content').innerHTML = content;
-        this.__isOpened = true;
-        this.__setPosition(getPoint);
-    }
-    __setPosition(getPoint) {
         const point = getPoint();
         css(this.container, {
             left: point.x,
@@ -142,24 +140,26 @@ let UITooltip = UITooltip_1 = class UITooltip extends UIElement {
     __hide() {
         this.j.async.clearTimeout(this.__delayShowTimeout);
         this.j.async.clearTimeout(this.__hideTimeout);
-        this.__removeListenersOnClose();
+        this.__removeListenersOnLeave();
         if (this.__isOpened) {
             this.__isOpened = false;
             this.setMod('visible', false);
+            this.getElm('content').innerHTML = '';
             css(this.container, {
                 left: -5000
             });
         }
     }
     __hideDelay() {
+        this.j.async.clearTimeout(this.__delayShowTimeout);
+        this.j.async.clearTimeout(this.__hideTimeout);
         if (!this.__isOpened) {
             return;
         }
-        this.j.async.clearTimeout(this.__delayShowTimeout);
         this.__hideTimeout = this.async.setTimeout(this.__hide, this.j.defaultTimeout);
     }
     destruct() {
-        this.j.e.off(this.j.container, 'mouseenter', this.__onMouseEnter);
+        this.j.e.off(this.j.container, 'mouseenter.tooltip', this.__onMouseEnter);
         this.__hide();
         super.destruct();
     }

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

@@ -25,6 +25,7 @@ export declare class ToolbarButton<T extends IViewBased = IViewBased> extends UI
         value: string | number | boolean;
         variant: import("../../../types").ButtonVariant;
         type: "button" | "submit";
+        role: "button" | "tab";
         disabled: boolean;
         activated: boolean;
         icon: import("../../../types").IUIIconState;

package/esm/modules/widget/tabs/tabs.js

@@ -5,8 +5,8 @@
  */
 import { Component } from "../../../core/component/index.js";
 import { Dom } from "../../../core/dom/dom.js";
-import { $$ } from "../../../core/helpers/index.js";
 import { isFunction } from "../../../core/helpers/checker/is-function.js";
+import { attr } from "../../../core/helpers/utils/attr.js";
 import { Button, UIElement } from "../../../core/ui/index.js";
 /**
  * Build tabs system
@@ -37,8 +37,16 @@ import { Button, UIElement } from "../../../core/ui/index.js";
  * ```
  */
 export const TabsWidget = (jodit, tabs, state) => {
-    const box = jodit.c.div('jodit-tabs'), tabBox = jodit.c.div('jodit-tabs__wrapper'), buttons = jodit.c.div('jodit-tabs__buttons'), nameToTab = {}, buttonList = [];
-    let firstTab = '', tabCount = 0;
+    const box = jodit.c.div('jodit-tabs');
+    const tabBox = jodit.c.div('jodit-tabs__wrapper');
+    const buttons = jodit.c.div('jodit-tabs__buttons');
+    attr(buttons, {
+        role: 'tablist',
+        'aria-orientation': 'horizontal'
+    });
+    const nameToTab = {};
+    const buttonList = [];
+    let firstTab = '';
     box.appendChild(buttons);
     box.appendChild(tabBox);
     const setActive = (tab) => {
@@ -46,20 +54,21 @@ export const TabsWidget = (jodit, tabs, state) => {
             return;
         }
         buttonList.forEach(b => {
-            b.state.variant = 'initial';
             b.state.activated = false;
         });
-        $$('.jodit-tab', tabBox).forEach(a => {
-            a.classList.remove('jodit-tab_active');
-        });
-        nameToTab[tab].button.state.variant = 'outline';
+        Object.values(nameToTab).forEach(({ tab }) => tab.classList.remove('jodit-tab_active'));
         nameToTab[tab].button.state.activated = true;
         nameToTab[tab].tab.classList.add('jodit-tab_active');
     };
     tabs.forEach(({ icon, name, content }) => {
-        const tab = jodit.c.div('jodit-tab'), button = Button(jodit, icon || name, name);
+        const tab = jodit.c.div('jodit-tab');
+        attr(tab, {
+            role: 'tabpanel'
+        });
+        const button = Button(jodit, icon || name, name);
+        button.state.role = 'tab';
         // Stop lose the focus
-        jodit.e.on(button.container, 'mousedown', (e) => e.preventDefault());
+        jodit.e.on(button.container, 'pointerdown', (e) => e.preventDefault());
         if (!firstTab) {
             firstTab = name;
         }
@@ -89,13 +98,9 @@ export const TabsWidget = (jodit, tabs, state) => {
             button,
             tab
         };
-        tabCount += 1;
     });
-    if (!tabCount) {
-        return box;
-    }
-    $$('a', buttons).forEach(a => {
-        a.style.width = (100 / tabCount).toFixed(10) + '%';
+    Object.values(nameToTab).forEach(({ button }) => {
+        button.container.style.width = (100 / tabs.length).toFixed(10) + '%';
     });
     const tab = !state || !state.activeTab || !nameToTab[state.activeTab]
         ? firstTab

package/esm/plugins/speech-recognize/config.d.ts

@@ -11,7 +11,7 @@ import type { ISpeechRecognizeConstructor } from "./interface";
 declare module 'jodit/config' {
     interface Config {
         speechRecognize: {
-            readonly api: ISpeechRecognizeConstructor;
+            readonly api: ISpeechRecognizeConstructor | null;
             /**
              * Returns and sets the language of the current SpeechRecognition.
              * If not specified, this defaults to the HTML lang attribute value, or

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

@@ -11,9 +11,9 @@ import { SpeechRecognition } from "./helpers/api.js";
 import { RecognizeManager } from "./helpers/recognize-manager.js";
 import speechRecognizeIcon from "./speech-recognize.svg.js";
 Config.prototype.speechRecognize = {
-    api: SpeechRecognition,
+    api: typeof SpeechRecognition !== 'undefined' ? SpeechRecognition : null,
     sound: true,
-    continuous: true,
+    continuous: false,
     interimResults: true,
     commands: {
         'newline|enter': 'enter',
@@ -31,6 +31,9 @@ Config.prototype.speechRecognize = {
 };
 Icon.set('speech-recognize', speechRecognizeIcon);
 Config.prototype.controls.speechRecognize = {
+    isVisible(j) {
+        return Boolean(j.o.speechRecognize.api);
+    },
     isActive(jodit, _) {
         const api = dataBind(jodit, 'speech');
         return Boolean(api?.isEnabled);
@@ -39,14 +42,14 @@ Config.prototype.controls.speechRecognize = {
         return !jodit.o.speechRecognize.api;
     },
     exec(jodit, current, { button, control }) {
-        const { api: Api, lang, continuous, interimResults, sound } = jodit.o.speechRecognize;
-        if (!Api) {
+        const { api: ApiConstructor, lang, continuous, interimResults, sound } = jodit.o.speechRecognize;
+        if (!ApiConstructor) {
             jodit.alert('Speech recognize API unsupported in your browser');
             return;
         }
         let api = dataBind(jodit, 'speech');
         if (!api) {
-            const nativeApi = new Api();
+            const nativeApi = new ApiConstructor();
             api = new RecognizeManager(jodit.async, nativeApi);
             api.lang = lang;
             api.continuous = continuous;
@@ -58,7 +61,9 @@ Config.prototype.controls.speechRecognize = {
             });
             api.on('result', (text) => jodit.e.fire('speechRecognizeResult', text));
             api.on('progress', (text) => jodit.e.fire('speechRecognizeProgressResult', text));
+            api.on('error', (text) => jodit.message.error(text));
             button.hookStatus('beforeDestruct', () => {
+                dataBind(jodit, 'speech', null);
                 api.destruct();
             });
         }
@@ -73,6 +78,9 @@ Config.prototype.controls.speechRecognize = {
             }
         }
         api.toggle();
+        if (api.isEnabled) {
+            button.setMod('pulse', true);
+        }
         button.state.activated = api.isEnabled;
     },
     name: 'speechRecognize',

package/esm/plugins/speech-recognize/helpers/recognize-manager.d.ts

@@ -41,8 +41,9 @@ export declare class RecognizeManager extends Eventify<{
     private readonly _api;
     private __on;
     private __off;
-    private _progressTimeout;
-    private _onResult;
+    private _onResults;
+    private __interimResults;
+    private _onProgress;
     private _onError;
     private _makeSound;
 }

package/esm/plugins/speech-recognize/helpers/recognize-manager.js

@@ -60,7 +60,7 @@ let RecognizeManager = RecognizeManager_1 = class RecognizeManager extends Event
             }, 5000);
             this.emit('pulse', true);
         };
-        this._progressTimeout = 0;
+        this.__interimResults = '';
         this._api = api;
         RecognizeManager_1._instances.add(this);
     }
@@ -82,23 +82,29 @@ let RecognizeManager = RecognizeManager_1 = class RecognizeManager extends Event
                 instance.stop();
             }
         });
-        this._api.start();
+        try {
+            this._api.start();
+        }
+        catch (e) {
+            this._onError(e);
+            this.stop();
+            return;
+        }
         this.__on('speechstart', this._onSpeechStart)
             .__on('error', this._onError)
-            .__on('result', this._onResult);
+            .__on('result', this._onProgress)
+            .__on('end', this._onResults);
     }
     stop() {
         if (!this._isEnabled) {
             return;
         }
-        try {
-            this._api.abort();
-            this._api.stop();
-        }
-        catch { }
+        this._api.abort();
+        this._api.stop();
         this.__off('speechstart', this._onSpeechStart)
             .__off('error', this._onError)
-            .__off('result', this._onResult);
+            .__off('result', this._onProgress)
+            .__off('end', this._onResults);
         this.async.clearTimeout(this._restartTimeout);
         this._isEnabled = false;
         this.emit('pulse', false);
@@ -123,37 +129,45 @@ let RecognizeManager = RecognizeManager_1 = class RecognizeManager extends Event
         this._api.removeEventListener(event, callback);
         return this;
     }
-    _onResult(e) {
+    _onResults(e) {
+        this.emit('pulse', false);
+        this.emit('result', this.__interimResults);
+        this.__interimResults = '';
+        this._makeSound(PII);
+        this.restart();
+    }
+    _onProgress(e) {
         if (!this._isEnabled) {
             return;
         }
-        this.async.clearTimeout(this._progressTimeout);
-        const resultItem = e.results.item(e.resultIndex);
-        const { transcript } = resultItem.item(0);
-        const resultHandler = () => {
-            try {
-                this.async.clearTimeout(this._restartTimeout);
-                this.emit('result', transcript);
-            }
-            catch { }
-            this.restart();
-            this.emit('pulse', false);
-            this._makeSound(PII);
-        };
-        if (resultItem.isFinal === false) {
-            this.emit('progress', transcript);
-            this._progressTimeout = this.async.setTimeout(resultHandler, 500);
+        this.__interimResults = '';
+        if (!e.results) {
             return;
         }
-        resultHandler();
+        for (let i = 0; i < e.results.length; i++) {
+            const resultItem = e.results.item(i);
+            const { transcript } = resultItem.item(0);
+            this.__interimResults += transcript;
+        }
+        if (this.__interimResults) {
+            this.emit('progress', this.__interimResults);
+        }
     }
-    _onError() {
-        if (!this._isEnabled) {
-            return;
+    _onError(e) {
+        if (e.error === 'voice-unavailable') {
+            this.emit('error', 'Voice unavailable');
+        }
+        if (e.error === 'not-allowed') {
+            this.emit('error', 'Not allowed');
+        }
+        if (e.error === 'language-unavailable' ||
+            // @ts-ignore
+            e.error === 'language-not-supported') {
+            this.emit('error', 'Language unavailable');
         }
         this._makeSound(WARN);
         this.emit('pulse', false);
-        this.restart();
+        this.stop();
     }
     _makeSound(frequency) {
         if (this.sound) {

package/esm/plugins/speech-recognize/interface.d.ts

@@ -15,6 +15,7 @@ export interface ISpeechRecognizeResult {
                 transcript: string;
             };
         };
+        length: number;
     };
 }
 export interface ISpeechRecognize {

package/esm/plugins/speech-recognize/speech-recognize.d.ts

@@ -13,10 +13,14 @@ import { Plugin } from "../../core/plugin";
 import "./config";
 
 export declare class SpeechRecognizeNative extends Plugin implements IPlugin {
-    constructor(j: IJodit);
+    buttons: {
+        group: string;
+        name: string;
+    }[];
     protected afterInit(jodit: IJodit): void;
     protected beforeDestruct(jodit: IJodit): void;
     private messagePopup;
+    private __hidePopupTimeout;
     protected onSpeechRecognizeProgressResult(text: string): void;
     protected onSpeechRecognizeResult(text: string): void;
     private _checkCommand;

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

@@ -13,7 +13,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
                 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 { debounce } from "../../core/decorators/debounce/debounce.js";
 import { watch } from "../../core/decorators/watch/watch.js";
 import { Dom } from "../../core/dom/dom.js";
 import { extendLang } from "../../core/global.js";
@@ -24,15 +23,15 @@ import { Jodit } from "../../jodit.js";
 import { execSpellCommand } from "./helpers/exec-spell-command.js";
 import * as langs from "./langs/index.js";
 export class SpeechRecognizeNative extends Plugin {
-    constructor(j) {
-        super(j);
-        this._commandToWord = {};
-        if (j.o.speechRecognize.api) {
-            j.registerButton({
+    constructor() {
+        super(...arguments);
+        this.buttons = [
+            {
                 group: 'state',
                 name: 'speechRecognize'
-            });
-        }
+            }
+        ];
+        this._commandToWord = {};
     }
     afterInit(jodit) {
         const { commands } = jodit.o.speechRecognize;
@@ -53,23 +52,25 @@ export class SpeechRecognizeNative extends Plugin {
             });
         }
     }
-    beforeDestruct(jodit) { }
+    beforeDestruct(jodit) {
+        Dom.safeRemove(this.messagePopup);
+    }
     onSpeechRecognizeProgressResult(text) {
         if (!this.messagePopup) {
             this.messagePopup = this.j.create.div('jodit-speech-recognize__popup');
         }
         this.j.workplace.appendChild(this.messagePopup);
-        this.j.async.setTimeout(() => {
+        this.j.async.clearTimeout(this.__hidePopupTimeout);
+        this.__hidePopupTimeout = this.j.async.setTimeout(() => {
             Dom.safeRemove(this.messagePopup);
-        }, {
-            label: 'onSpeechRecognizeProgressResult',
-            timeout: 1000
-        });
+        }, 1000);
         this.messagePopup.innerText = text + '|';
     }
     onSpeechRecognizeResult(text) {
-        const { j } = this, { s } = j;
+        this.j.async.clearTimeout(this.__hidePopupTimeout);
         Dom.safeRemove(this.messagePopup);
+        const { j } = this;
+        const { s } = j;
         if (!this._checkCommand(text)) {
             const { range } = s, node = s.current();
             if (s.isCollapsed() &&
@@ -100,8 +101,7 @@ export class SpeechRecognizeNative extends Plugin {
     }
 }
 __decorate([
-    watch(':speechRecognizeProgressResult'),
-    debounce()
+    watch(':speechRecognizeProgressResult')
 ], SpeechRecognizeNative.prototype, "onSpeechRecognizeProgressResult", null);
 __decorate([
     watch(':speechRecognizeResult')

package/esm/types/ui.d.ts

@@ -37,6 +37,7 @@ export interface IUIButtonState {
     value: string | number | boolean;
     variant: ButtonVariant;
     type: 'button' | 'submit';
+    role: 'button' | 'tab';
     disabled: boolean;
     activated: boolean;
     icon: IUIIconState;

package/package.json

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

package/types/core/ui/button/button/button.d.ts

@@ -36,6 +36,7 @@ export declare class UIButton extends UIElement implements IUIButton {
     protected button: HTMLElement;
     protected onChangeSize(): void;
     protected onChangeType(): void;
+    protected onChangeRole(): void;
     /**
      * Set size from a parent list
      */

package/types/core/ui/button/tooltip/tooltip.d.ts

@@ -17,16 +17,15 @@ export declare class UITooltip extends UIElement {
     protected render(): string;
     constructor(view: IViewBased);
     private __listenClose;
-    private __addListenersOnClose;
-    private __removeListenersOnClose;
+    private __addListenersOnEnter;
+    private __removeListenersOnLeave;
     private __currentTarget;
     private __onMouseLeave;
     private __onMouseEnter;
     private __delayShowTimeout;
     private __hideTimeout;
-    private __delayOpen;
     private __open;
-    private __setPosition;
+    private __show;
     private __hide;
     private __hideDelay;
     destruct(): void;

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

@@ -25,6 +25,7 @@ export declare class ToolbarButton<T extends IViewBased = IViewBased> extends UI
         value: string | number | boolean;
         variant: import("../../../types").ButtonVariant;
         type: "button" | "submit";
+        role: "button" | "tab";
         disabled: boolean;
         activated: boolean;
         icon: import("../../../types").IUIIconState;

package/types/plugins/speech-recognize/config.d.ts

@@ -11,7 +11,7 @@ import type { ISpeechRecognizeConstructor } from "./interface";
 declare module 'jodit/config' {
     interface Config {
         speechRecognize: {
-            readonly api: ISpeechRecognizeConstructor;
+            readonly api: ISpeechRecognizeConstructor | null;
             /**
              * Returns and sets the language of the current SpeechRecognition.
              * If not specified, this defaults to the HTML lang attribute value, or

package/types/plugins/speech-recognize/helpers/recognize-manager.d.ts

@@ -41,8 +41,9 @@ export declare class RecognizeManager extends Eventify<{
     private readonly _api;
     private __on;
     private __off;
-    private _progressTimeout;
-    private _onResult;
+    private _onResults;
+    private __interimResults;
+    private _onProgress;
     private _onError;
     private _makeSound;
 }

package/types/plugins/speech-recognize/interface.d.ts

@@ -15,6 +15,7 @@ export interface ISpeechRecognizeResult {
                 transcript: string;
             };
         };
+        length: number;
     };
 }
 export interface ISpeechRecognize {

package/types/plugins/speech-recognize/speech-recognize.d.ts

@@ -13,10 +13,14 @@ import { Plugin } from "../../core/plugin";
 import "./config";
 
 export declare class SpeechRecognizeNative extends Plugin implements IPlugin {
-    constructor(j: IJodit);
+    buttons: {
+        group: string;
+        name: string;
+    }[];
     protected afterInit(jodit: IJodit): void;
     protected beforeDestruct(jodit: IJodit): void;
     private messagePopup;
+    private __hidePopupTimeout;
     protected onSpeechRecognizeProgressResult(text: string): void;
     protected onSpeechRecognizeResult(text: string): void;
     private _checkCommand;

package/types/types/ui.d.ts

@@ -37,6 +37,7 @@ export interface IUIButtonState {
     value: string | number | boolean;
     variant: ButtonVariant;
     type: 'button' | 'submit';
+    role: 'button' | 'tab';
     disabled: boolean;
     activated: boolean;
     icon: IUIIconState;