jodit-pro 2.0.0-beta.28 → 2.0.0-beta.31

package/es2015/jodit.css

@@ -1,7 +1,7 @@
 /*!
  * jodit-pro - PRO Version of Jodit Editor
  * Author: Chupurnov Valeriy <chupurnov@gmail.com>
- * Version: v2.0.0-beta.28
+ * Version: v2.0.0-beta.31
  * Url: https://xdsoft.net/jodit/pro/
  * License(s): SEE LICENSE IN LICENSE.md
  */
@@ -834,6 +834,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.
@@ -1505,34 +1533,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);
 }
@@ -1596,7 +1596,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;
@@ -2564,6 +2564,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;
@@ -2579,6 +2581,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;
@@ -2756,7 +2761,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]) {
@@ -2777,31 +2783,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);
@@ -3137,6 +3147,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.
@@ -3310,7 +3588,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;
 }