jodit 4.0.0-beta.83 → 4.0.0-beta.85

package/CHANGELOG.md

@@ -9,6 +9,47 @@
 > -   :house: [Internal]
 > -   :nail_care: [Polish]
 
+## 4.0.0-beta.78
+
+- Update
+```
+ @types/karma                        ^6.3.3  →    ^6.3.4
+ @types/node                        ^20.1.0  →   ^20.5.0
+ @typescript-eslint/eslint-plugin   ^5.59.2  →    ^6.4.0
+ @typescript-eslint/parser          ^5.59.2  →    ^6.4.0
+ autoprefixer                      ^10.4.14  →  ^10.4.15
+ core-js                            ^3.30.2  →   ^3.32.0
+ css-loader                          ^6.7.3  →    ^6.8.1
+ css-minimizer-webpack-plugin        ^5.0.0  →    ^5.0.1
+ eslint                             ^8.40.0  →   ^8.47.0
+ eslint-config-prettier              ^8.8.0  →    ^9.0.0
+ eslint-plugin-import               ^2.27.5  →   ^2.28.0
+ eslint-plugin-prettier              ^4.2.1  →    ^5.0.0
+ glob                               ^10.2.2  →   ^10.3.3
+ less                                ^4.1.3  →    ^4.2.0
+ less-loader                        ^11.1.0  →   ^11.1.3
+ lint-staged                        ^13.2.2  →   ^14.0.0
+ mini-css-extract-plugin             ^2.7.5  →    ^2.7.6
+ node-jq                             ^2.3.5  →    ^4.0.1
+ postcss                           >=8.4.23  →  >=8.4.27
+ postcss-loader                      ^7.3.0  →    ^7.3.3
+ prettier                            ^2.8.8  →    ^3.0.1
+ style-loader                        ^3.3.2  →    ^3.3.3
+ stylelint                          ^15.6.1  →  ^15.10.2
+ stylelint-config-standard          ^33.0.0  →   ^34.0.0
+ stylelint-prettier                  ^3.0.0  →    ^4.0.2
+ synchronous-promise                 2.0.15  →    2.0.17
+ terser-webpack-plugin               ^5.3.8  →    ^5.3.9
+ ts-loader                           ^9.4.2  →    ^9.4.4
+ tslib                               ^2.5.0  →    ^2.6.1
+ typescript                          ^5.0.4  →    ^5.1.6
+ webpack                             5.82.0  →    5.88.2
+ webpack-cli                         ^5.1.0  →    ^5.1.4
+ webpack-dev-middleware              ^6.1.0  →    ^6.1.1
+ webpack-dev-server                 ^4.15.0  →   ^4.15.1
+ webpack-hot-middleware             ^2.25.3  →   ^2.25.4
+```
+
 ## 4.0.0-beta.77
 
 ### :bug: Bug Fix

package/README.md

@@ -108,9 +108,9 @@ You can connect the necessary plugins and languages yourself:
 ```html
 <link
 	rel="stylesheet"
-	href="https://cdnjs.cloudflare.com/ajax/libs/jodit/4.0.0-beta.83/es2021/jodit.min.css"
+	href="https://cdnjs.cloudflare.com/ajax/libs/jodit/4.0.0-beta.85/es2021/jodit.min.css"
 />
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jodit/4.0.0-beta.83/es2021/jodit.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jodit/4.0.0-beta.85/es2021/jodit.min.js"></script>
 ```
 
 #### unpkg
@@ -119,9 +119,9 @@ You can connect the necessary plugins and languages yourself:
 ```html
 <link
 	rel="stylesheet"
-	href="https://unpkg.com/jodit@4.0.0-beta.83/es2021/jodit.min.css"
+	href="https://unpkg.com/jodit@4.0.0-beta.85/es2021/jodit.min.css"
 />
-<script src="https://unpkg.com/jodit@4.0.0-beta.83/es2021/jodit.min.js"></script>
+<script src="https://unpkg.com/jodit@4.0.0-beta.85/es2021/jodit.min.js"></script>
 ```
 
 

package/es2015/jodit.css

@@ -1,7 +1,7 @@
 /*!
  * jodit - Jodit is awesome and usefully wysiwyg editor with filebrowser
  * Author: Chupurnov <chupurnov@gmail.com> (https://xdsoft.net/jodit/)
- * Version: v4.0.0-beta.83
+ * Version: v4.0.0-beta.85
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */
@@ -749,6 +749,34 @@ svg.jodit-icon {
   max-height: fit-content;
 }
 
+/*!
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * Released under MIT see LICENSE.txt in the project root for license information.
+ * Copyright (c) 2013-2023 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ */
+.jodit-ui-group {
+  display: inline-flex;
+  max-width: 100%;
+  flex: 0 0 auto;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+}
+.jodit-ui-group_line_true {
+  display: flex;
+  justify-content: stretch;
+}
+.jodit-ui-group_separated_true:not(:last-child):not(.jodit-ui-group_before-spacer_true)::after {
+  content: '';
+  padding: 0;
+  border-right: 1px solid var(--jd-color-border);
+  border-left: 0;
+  margin: 2px;
+  cursor: default;
+}
+.jodit-ui-group:last-child {
+  border-bottom: 0;
+}
+
 /*!
  * Jodit Editor (https://xdsoft.net/jodit/)
  * Released under MIT see LICENSE.txt in the project root for license information.
@@ -1420,34 +1448,6 @@ svg.jodit-icon {
   flex: 1;
 }
 
-/*!
- * Jodit Editor (https://xdsoft.net/jodit/)
- * Released under MIT see LICENSE.txt in the project root for license information.
- * Copyright (c) 2013-2023 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
- */
-.jodit-ui-group {
-  display: inline-flex;
-  max-width: 100%;
-  flex: 0 0 auto;
-  flex-shrink: 0;
-  flex-wrap: wrap;
-}
-.jodit-ui-group_line_true {
-  display: flex;
-  justify-content: stretch;
-}
-.jodit-ui-group_separated_true:not(:last-child):not(.jodit-ui-group_before-spacer_true)::after {
-  content: '';
-  padding: 0;
-  border-right: 1px solid var(--jd-color-border);
-  border-left: 0;
-  margin: 2px;
-  cursor: default;
-}
-.jodit-ui-group:last-child {
-  border-bottom: 0;
-}
-
 .jodit-ui-button-group {
   margin-bottom: var(--jd-padding-default);
 }
@@ -1511,7 +1511,7 @@ svg.jodit-icon {
   opacity: 0;
   outline: none;
   text-rendering: optimizelegibility;
-  transform: translateX(-50%);
+  transform: translate(-50%, calc(var(--jd-padding-default) / 2));
   transition: opacity 0.2s ease 0s;
   user-select: none;
   white-space: normal;
@@ -2479,6 +2479,8 @@ svg.jodit-icon {
 }
 .jodit-toolbar-collection .jodit-toolbar-content,
 .jodit-toolbar-editor-collection .jodit-toolbar-content,
+.jodit-toolbar-collection .jodit-toolbar-select,
+.jodit-toolbar-editor-collection .jodit-toolbar-select,
 .jodit-toolbar-collection .jodit-toolbar-button,
 .jodit-toolbar-editor-collection .jodit-toolbar-button {
   padding: 0;
@@ -2494,6 +2496,9 @@ svg.jodit-icon {
  * Released under MIT see LICENSE.txt in the project root for license information.
  * Copyright (c) 2013-2023 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
+:root {
+  --jd-button-trigger-size: 14px;
+}
 .jodit-toolbar-button {
   display: flex;
   overflow: hidden;
@@ -2671,7 +2676,8 @@ svg.jodit-icon {
   border-radius: 0 var(--jd-border-radius-default) var(--jd-border-radius-default) 0;
   opacity: 0.4;
   cursor: pointer;
-  width: 14px;
+  --jd-button-trigger-size: 14px;
+  width: calc(var(--jd-button-trigger-size, 14px) + 2px);
 }
 .jodit-toolbar-button__trigger:hover:not([disabled]),
 .jodit-toolbar-button__trigger:focus-visible:not([disabled]) {
@@ -2692,31 +2698,35 @@ svg.jodit-icon {
   pointer-events: none;
 }
 .jodit-toolbar-button__trigger svg {
-  width: 10px;
+  width: calc(var(--jd-button-trigger-size, 14px) - 4px);
 }
 .jodit-toolbar-button_size_tiny .jodit-toolbar-button__trigger {
-  width: 8px;
+  --jd-button-trigger-size: 8px;
+  width: calc(var(--jd-button-trigger-size, 8px) + 2px);
 }
 .jodit-toolbar-button_size_tiny .jodit-toolbar-button__trigger svg {
-  width: 4px;
+  width: calc(var(--jd-button-trigger-size, 8px) - 4px);
 }
 .jodit-toolbar-button_size_xsmall .jodit-toolbar-button__trigger {
-  width: 10px;
+  --jd-button-trigger-size: 10px;
+  width: calc(var(--jd-button-trigger-size, 10px) + 2px);
 }
 .jodit-toolbar-button_size_xsmall .jodit-toolbar-button__trigger svg {
-  width: 6px;
+  width: calc(var(--jd-button-trigger-size, 10px) - 4px);
 }
 .jodit-toolbar-button_size_small .jodit-toolbar-button__trigger {
-  width: 12px;
+  --jd-button-trigger-size: 12px;
+  width: calc(var(--jd-button-trigger-size, 12px) + 2px);
 }
 .jodit-toolbar-button_size_small .jodit-toolbar-button__trigger svg {
-  width: 8px;
+  width: calc(var(--jd-button-trigger-size, 12px) - 4px);
 }
 .jodit-toolbar-button_size_large .jodit-toolbar-button__trigger {
-  width: 16px;
+  --jd-button-trigger-size: 16px;
+  width: calc(var(--jd-button-trigger-size, 16px) + 2px);
 }
 .jodit-toolbar-button_size_large .jodit-toolbar-button__trigger svg {
-  width: 12px;
+  width: calc(var(--jd-button-trigger-size, 16px) - 4px);
 }
 .jodit-toolbar-button_with-trigger_true .jodit-toolbar-button__button {
   border-radius: var(--jd-border-radius-default) 0 0 var(--jd-border-radius-default);
@@ -3052,6 +3062,274 @@ svg.jodit-icon {
   outline: 0;
 }
 
+.jodit-toolbar-select {
+  --jd-color-button-background-hover-opacity40: rgba(220, 220, 220, 0.2);
+  --jd-color-button-background-hover-opacity60: rgba(220, 220, 220, 0.1);
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  border-radius: var(--jd-border-radius-default);
+  min-width: 34px;
+  height: 34px;
+  justify-content: space-between;
+  cursor: pointer;
+  min-width: 100px;
+}
+.jodit-toolbar-select__icon {
+  display: none;
+}
+.jodit-toolbar-select__icon:not(:empty) {
+  display: inline-flex;
+}
+.jodit-toolbar-select__text {
+  display: none;
+}
+.jodit-toolbar-select__text:not(:empty) {
+  font-family: var(--jd-font-default);
+  font-size: var(--jd-font-size-default);
+  display: inline-flex;
+  flex-grow: 1;
+  justify-content: center;
+}
+.jodit-toolbar-select_context_menu .jodit-toolbar-select__text {
+  position: relative;
+  justify-content: left;
+  padding-left: var(--jd-padding-default);
+}
+.jodit-toolbar-select_context_menu .jodit-toolbar-select__text::before {
+  position: absolute;
+  top: calc(var(--jd-padding-default) * -1);
+  left: 0;
+  height: 35px;
+  border-left: 1px solid var(--jd-color-border);
+  content: '';
+}
+.jodit-toolbar-select__icon:not(:empty) + .jodit-toolbar-select__text:not(:empty) {
+  margin-left: var(--jd-padding-default);
+}
+.jodit-toolbar-select__icon:empty + .jodit-toolbar-select__text:not(:empty) {
+  padding: 0 var(--jd-padding-default);
+}
+.jodit-toolbar-select__icon:empty + .jodit-toolbar-select__text:not(:empty) {
+  padding: 0;
+}
+.jodit-toolbar-select .jodit-icon {
+  width: 14px;
+  height: 14px;
+}
+.jodit-toolbar-select button {
+  min-width: 34px;
+  height: 34px;
+  padding: 0;
+  appearance: none;
+}
+.jodit-toolbar-select_text-icons_true button {
+  padding: 0 var(--jd-padding-default);
+}
+.jodit-toolbar-select_size_tiny {
+  min-width: 16px;
+  height: 16px;
+}
+.jodit-toolbar-select_size_tiny .jodit-icon {
+  width: 8px;
+  height: 8px;
+}
+.jodit-toolbar-select_size_tiny button {
+  min-width: 16px;
+  height: 16px;
+  padding: 0;
+  appearance: none;
+}
+.jodit-toolbar-select_size_tiny_text-icons_true button {
+  padding: 0 var(--jd-padding-default);
+}
+.jodit-toolbar-select_size_xsmall {
+  min-width: 22px;
+  height: 22px;
+}
+.jodit-toolbar-select_size_xsmall .jodit-icon {
+  width: 10px;
+  height: 10px;
+}
+.jodit-toolbar-select_size_xsmall button {
+  min-width: 22px;
+  height: 22px;
+  padding: 0;
+  appearance: none;
+}
+.jodit-toolbar-select_size_xsmall_text-icons_true button {
+  padding: 0 var(--jd-padding-default);
+}
+.jodit-toolbar-select_size_small {
+  min-width: 28px;
+  height: 28px;
+}
+.jodit-toolbar-select_size_small .jodit-icon {
+  width: 12px;
+  height: 12px;
+}
+.jodit-toolbar-select_size_small button {
+  min-width: 28px;
+  height: 28px;
+  padding: 0;
+  appearance: none;
+}
+.jodit-toolbar-select_size_small_text-icons_true button {
+  padding: 0 var(--jd-padding-default);
+}
+.jodit-toolbar-select_size_large {
+  min-width: 40px;
+  height: 40px;
+}
+.jodit-toolbar-select_size_large .jodit-icon {
+  width: 16px;
+  height: 16px;
+}
+.jodit-toolbar-select_size_large button {
+  min-width: 40px;
+  height: 40px;
+  padding: 0;
+  appearance: none;
+}
+.jodit-toolbar-select_size_large_text-icons_true button {
+  padding: 0 var(--jd-padding-default);
+}
+.jodit-toolbar-select__button {
+  cursor: pointer;
+  position: relative;
+  box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  appearance: none;
+  background: 0 0;
+  box-shadow: none;
+  font-style: normal;
+  outline: 0;
+  text-align: center;
+  text-decoration: none;
+  text-transform: none;
+  user-select: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 var(--jd-padding-default);
+  border-radius: var(--jd-border-radius-default);
+  color: var(--jd-color-text-icons);
+}
+.jodit-toolbar-select__button:hover:not([disabled]),
+.jodit-toolbar-select__button:focus-visible:not([disabled]) {
+  background-color: var(--jd-color-button-background-hover);
+  opacity: 1;
+  outline: 0;
+}
+.jodit-toolbar-select__button:active:not([disabled]),
+.jodit-toolbar-select__button[aria-pressed='true']:not([disabled]) {
+  background-color: var(--jd-color-button-background-hover-opacity40);
+  outline: 0;
+}
+.jodit-toolbar-select__button[aria-pressed='true']:hover:not([disabled]) {
+  background-color: var(--jd-color-button-background-hover-opacity60);
+}
+.jodit-toolbar-select__button[disabled] {
+  opacity: 0.3;
+  pointer-events: none;
+}
+.jodit-toolbar-select__trigger {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0 var(--jd-border-radius-default) var(--jd-border-radius-default) 0;
+  opacity: 0.4;
+  cursor: pointer;
+  --jd-button-trigger-size: 14px;
+  width: calc(var(--jd-button-trigger-size, 14px) + 2px);
+}
+.jodit-toolbar-select__trigger:hover:not([disabled]),
+.jodit-toolbar-select__trigger:focus-visible:not([disabled]) {
+  background-color: var(--jd-color-button-background-hover);
+  opacity: 1;
+  outline: 0;
+}
+.jodit-toolbar-select__trigger:active:not([disabled]),
+.jodit-toolbar-select__trigger[aria-pressed='true']:not([disabled]) {
+  background-color: var(--jd-color-button-background-hover-opacity40);
+  outline: 0;
+}
+.jodit-toolbar-select__trigger[aria-pressed='true']:hover:not([disabled]) {
+  background-color: var(--jd-color-button-background-hover-opacity60);
+}
+.jodit-toolbar-select__trigger[disabled] {
+  opacity: 0.3;
+  pointer-events: none;
+}
+.jodit-toolbar-select__trigger svg {
+  width: calc(var(--jd-button-trigger-size, 14px) - 4px);
+}
+.jodit-toolbar-select_size_tiny .jodit-toolbar-select__trigger {
+  --jd-button-trigger-size: 8px;
+  width: calc(var(--jd-button-trigger-size, 8px) + 2px);
+}
+.jodit-toolbar-select_size_tiny .jodit-toolbar-select__trigger svg {
+  width: calc(var(--jd-button-trigger-size, 8px) - 4px);
+}
+.jodit-toolbar-select_size_xsmall .jodit-toolbar-select__trigger {
+  --jd-button-trigger-size: 10px;
+  width: calc(var(--jd-button-trigger-size, 10px) + 2px);
+}
+.jodit-toolbar-select_size_xsmall .jodit-toolbar-select__trigger svg {
+  width: calc(var(--jd-button-trigger-size, 10px) - 4px);
+}
+.jodit-toolbar-select_size_small .jodit-toolbar-select__trigger {
+  --jd-button-trigger-size: 12px;
+  width: calc(var(--jd-button-trigger-size, 12px) + 2px);
+}
+.jodit-toolbar-select_size_small .jodit-toolbar-select__trigger svg {
+  width: calc(var(--jd-button-trigger-size, 12px) - 4px);
+}
+.jodit-toolbar-select_size_large .jodit-toolbar-select__trigger {
+  --jd-button-trigger-size: 16px;
+  width: calc(var(--jd-button-trigger-size, 16px) + 2px);
+}
+.jodit-toolbar-select_size_large .jodit-toolbar-select__trigger svg {
+  width: calc(var(--jd-button-trigger-size, 16px) - 4px);
+}
+.jodit-toolbar-select_with-trigger_true .jodit-toolbar-button__button {
+  border-radius: var(--jd-border-radius-default) 0 0 var(--jd-border-radius-default);
+}
+.jodit-toolbar-select_with-trigger_true:hover:not([disabled]) {
+  border-color: var(--jd-color-border);
+}
+.jodit-toolbar-select_stroke_false svg {
+  stroke: none;
+}
+.jodit-toolbar-select:hover:not([disabled]),
+.jodit-toolbar-select:focus-visible:not([disabled]) {
+  background-color: var(--jd-color-button-background-hover);
+  opacity: 1;
+  outline: 0;
+}
+.jodit-toolbar-select:active:not([disabled]),
+.jodit-toolbar-select[aria-pressed='true']:not([disabled]) {
+  background-color: var(--jd-color-button-background-hover-opacity40);
+  outline: 0;
+}
+.jodit-toolbar-select[aria-pressed='true']:hover:not([disabled]) {
+  background-color: var(--jd-color-button-background-hover-opacity60);
+}
+.jodit-toolbar-select[disabled] {
+  opacity: 0.3;
+  pointer-events: none;
+}
+.jodit-toolbar-select__text:not(:empty) {
+  justify-content: left;
+}
+.jodit-toolbar-select__button {
+  flex: 1;
+}
+
 /*!
  * Jodit Editor (https://xdsoft.net/jodit/)
  * Released under MIT see LICENSE.txt in the project root for license information.
@@ -3225,7 +3503,8 @@ svg.jodit-icon {
   height: 100%;
   background-color: #eee;
   background-image: linear-gradient(45deg, var(--jd-color-border) 25%, transparent 25%, transparent 75%, var(--jd-color-border) 75%, var(--jd-color-border)), linear-gradient(45deg, var(--jd-color-border) 25%, transparent 25%, transparent 75%, var(--jd-color-border) 75%, var(--jd-color-border));
-  background-position: 0 0, 15px 15px;
+  background-position: 0 0,
+			15px 15px;
   background-size: 30px 30px;
   user-select: none;
 }