jodit 4.15.9 → 4.15.13

package/CHANGELOG.md

@@ -9,6 +9,22 @@
 > - :house: [Internal]
 > - :nail_care: [Polish]
 
+## 4.15.13
+
+#### :rocket: New Feature
+
+- [#1423](https://github.com/xdan/jodit/issues/1423) New `toolbar-navigation` plugin: the toolbar is now reachable from the keyboard. `Alt+F10` moves the focus from the editable area into the toolbar, the arrow keys walk the buttons (wrapping at the ends, reversed in RTL), `Home`/`End` jump to the ends, `Enter`/`Space` activate a button and `Escape` gives the focus back to the editor; disabled buttons are skipped. This follows the WAI-ARIA authoring practices for a `role="toolbar"` widget, and the focus is moved programmatically, so it also works with the default `allowTabNavigation: false`, where the buttons take no part in the page tab order. On a button with a dropdown, `ArrowDown` opens it and focuses the first item, `ArrowDown`/`ArrowUp` walk the items, and `Escape` or `ArrowUp` on the first item close it and return to the button. Reaching the toolbar is the regular `focusToolbar` command, so it can be remapped like any other (`commandToHotkeys: { focusToolbar: 'alt+0' }`) or called with `execCommand`. Requested by [@cut2run](https://github.com/cut2run).
+
+#### :bug: Bug Fix
+
+- A toolbar button focused from the keyboard right after a mouse click showed no highlight in Chrome: a modifier shortcut such as `Alt+F10` does not switch the browser to keyboard modality, so `:focus-visible` never matched. Toolbar buttons are never focused by the mouse (`mousedown` is prevented to keep the selection), so they now highlight plain `:focus`.
+
+## 4.15.10
+
+#### :bug: Bug Fix
+
+- [#1184](https://github.com/xdan/jodit/issues/1184) Clicking an image wrapped in a `contenteditable="false"` element (for example `<picture contenteditable="false"><img></picture>`) left the caret stuck: the arrow keys could not move it past the image. Selecting a node put the range inside that non-editable island — the browser cannot place a caret there, so there was nothing for the arrow keys to move. `select()` now selects the outermost non-editable ancestor instead, so the range stays in editable content and the caret steps over the element as usual. Selecting an editable node, and `select(node, true)`, are unchanged.
+
 ## 4.15.9
 
 #### :bug: Bug Fix

package/README.md

@@ -7,6 +7,13 @@
  
 <a href="https://xdsoft.net/jodit/pro/"><img src="https://img.shields.io/badge/Get%20Jodit%20PRO%20%E2%86%92-F5A623?style=for-the-badge" height="34" alt="Get Jodit PRO"></a>
 </p>
+<p>
+<a href="https://www.npmjs.com/package/jodit"><img src="https://img.shields.io/npm/v/jodit?style=flat-square&labelColor=1F2937&color=4B5563" alt="npm version"></a>
+<a href="https://www.npmjs.com/package/jodit"><img src="https://img.shields.io/npm/dm/jodit?style=flat-square&label=jodit&labelColor=1F2937&color=4B5563" alt="jodit downloads per month"></a>
+<a href="https://www.npmjs.com/package/jodit-react"><img src="https://img.shields.io/npm/dm/jodit-react?style=flat-square&label=jodit-react&labelColor=1F2937&color=4B5563" alt="jodit-react downloads per month"></a>
+<a href="https://github.com/xdan/jodit/actions/workflows/tests.yml"><img src="https://img.shields.io/github/actions/workflow/status/xdan/jodit/tests.yml?branch=main&style=flat-square&label=tests&labelColor=1F2937" alt="Tests"></a>
+<a href="https://github.com/xdan/jodit/blob/main/LICENSE.txt"><img src="https://img.shields.io/npm/l/jodit?style=flat-square&labelColor=1F2937&color=4B5563" alt="MIT license"></a>
+</p>
 </div>
 
 <br>

package/es2015/jodit.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.15.9
+ * Version: v4.15.13
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */
@@ -2757,6 +2757,11 @@ a + .jodit-file-browser-tree__source-title {
   opacity: 0.3;
   pointer-events: none;
 }
+.jodit-toolbar-button__button:focus:not([disabled]) {
+  background-color: var(--jd-color-button-background-hover);
+  opacity: 1;
+  outline: 0;
+}
 .jodit-toolbar-button__trigger {
   display: flex;
   height: 100%;
@@ -2768,6 +2773,11 @@ a + .jodit-file-browser-tree__source-title {
   --jd-button-trigger-size: 14px;
   width: calc(var(--jd-button-trigger-size, 14px) + 2px);
 }
+.jodit-toolbar-button__trigger:focus:not([disabled]) {
+  background-color: var(--jd-color-button-background-hover);
+  opacity: 1;
+  outline: 0;
+}
 .jodit-toolbar-button__trigger:hover:not([disabled]),
 .jodit-toolbar-button__trigger:focus-visible:not([disabled]) {
   background-color: var(--jd-color-button-background-hover);
@@ -3486,6 +3496,11 @@ a + .jodit-file-browser-tree__source-title {
   opacity: 0.3;
   pointer-events: none;
 }
+.jodit-toolbar-select__button:focus:not([disabled]) {
+  background-color: var(--jd-color-button-background-hover);
+  opacity: 1;
+  outline: 0;
+}
 .jodit-toolbar-select__trigger {
   display: flex;
   height: 100%;
@@ -3497,6 +3512,11 @@ a + .jodit-file-browser-tree__source-title {
   --jd-button-trigger-size: 14px;
   width: calc(var(--jd-button-trigger-size, 14px) + 2px);
 }
+.jodit-toolbar-select__trigger:focus:not([disabled]) {
+  background-color: var(--jd-color-button-background-hover);
+  opacity: 1;
+  outline: 0;
+}
 .jodit-toolbar-select__trigger:hover:not([disabled]),
 .jodit-toolbar-select__trigger:focus-visible:not([disabled]) {
   background-color: var(--jd-color-button-background-hover);