jodit 4.15.10 → 4.15.14

package/CHANGELOG.md

@@ -9,6 +9,31 @@
 > - :house: [Internal]
 > - :nail_care: [Polish]
 
+## 4.15.14
+
+#### :rocket: New Feature
+
+- [#1488](https://github.com/xdan/jodit/issues/1488) The color picker has a button that removes the text or background color, or a table cell's color. It calls the picker's callback with an empty string. Thanks [@brendon](https://github.com/brendon).
+- [#1491](https://github.com/xdan/jodit/issues/1491) The number of color picker columns can be set with the `--jd-color-picker-columns` CSS variable (10 by default), alongside `--jd-color-picker-cell-size`. Thanks [@brendon](https://github.com/brendon).
+
+#### :bug: Bug Fix
+
+- [#1487](https://github.com/xdan/jodit/issues/1487) A flat `colors` array now wraps into rows in the color picker, like a named group, instead of putting every color on its own line. Thanks [@brendon](https://github.com/brendon).
+
+#### :nail_care: Polish
+
+- The hover border of the color picker swatches and of the remove-color button follows the theme text color instead of a hardcoded black, so it is visible in the dark theme too.
+
+## 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

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.10
+ * Version: v4.15.14
  * 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);
@@ -3812,6 +3832,7 @@ a + .jodit-file-browser-tree__source-title {
  */
 :root {
   --jd-color-picker-cell-size: 24px;
+  --jd-color-picker-columns: 10;
 }
 .jodit-color-picker {
   margin: 0;
@@ -3820,7 +3841,7 @@ a + .jodit-file-browser-tree__source-title {
 }
 .jodit-color-picker__group {
   display: flex;
-  max-width: calc(var(--jd-color-picker-cell-size) * 10);
+  max-width: calc(var(--jd-color-picker-cell-size) * var(--jd-color-picker-columns));
   flex-wrap: wrap;
   margin-bottom: calc(var(--jd-padding-default) / 2);
   white-space: normal;
@@ -3835,7 +3856,7 @@ a + .jodit-file-browser-tree__source-title {
   vertical-align: middle;
 }
 .jodit-color-picker__color-item:hover {
-  border-color: #000;
+  border-color: var(--jd-color-text);
 }
 .jodit-color-picker__color-item_active_true,
 .jodit-color-picker__color-item:active {
@@ -3845,6 +3866,23 @@ a + .jodit-file-browser-tree__source-title {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: calc(var(--jd-padding-default) / 2);
+}
+.jodit-color-picker__remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  margin-left: auto;
+  border: 1px solid transparent;
+  cursor: pointer;
+}
+.jodit-color-picker__remove:hover {
+  border-color: var(--jd-color-text);
+}
+.jodit-color-picker__remove svg {
+  width: 16px;
+  height: 16px;
 }
 .jodit-color-picker__hex input {
   width: 80px;