@progress/kendo-react-editor 4.12.0 → 4.13.0-dev.202111230848

package/dist/es/Editor.d.ts

@@ -44,6 +44,7 @@ export default class Editor extends React.Component<EditorProps, EditorStateInte
         style: PropTypes.Requireable<object>;
         tools: PropTypes.Requireable<any[]>;
         keyboardNavigation: PropTypes.Requireable<boolean>;
+        resizable: PropTypes.Requireable<boolean>;
         preserveWhitespace: PropTypes.Requireable<string | boolean>;
         onMount: PropTypes.Requireable<(...args: any[]) => any>;
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;

package/dist/es/Editor.js

@@ -25,6 +25,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { ButtonGroup, Toolbar, ToolbarSeparator } from '@progress/kendo-react-buttons';
+import { classNames } from '@progress/kendo-react-common';
 import { EditorState, Plugin, PluginKey, EditorView, Schema, baseKeymap, keymap, history, dropCursor, gapCursor, getMark, spacesFix, tableEditing } from '@progress/kendo-editor-common';
 import { marks, nodes } from './config/schema';
 import { defaultStyle, tablesStyles, rtlStyles } from './config/defaultStyles';
@@ -268,7 +269,7 @@ var Editor = /** @class */ (function (_super) {
                 React.createElement(ButtonGroup, { key: index }, item.map(_this.renderTool, index)) :
                 _this.renderTool(item, index);
         });
-        return (React.createElement("div", { ref: function (e) { return _this._element = e; }, className: 'k-widget k-editor' + (className ? " " + className : ''), dir: this.props.dir, style: style },
+        return (React.createElement("div", { ref: function (e) { return _this._element = e; }, className: classNames('k-widget k-editor', className, { 'k-editor-resizable': this.props.resizable }), dir: this.props.dir, style: style },
             buttons.length > 0 && (React.createElement(Toolbar, { keyboardNavigation: this.props.keyboardNavigation }, buttons)),
             defaultEditMode === 'iframe' ?
                 (React.createElement("div", { className: "k-editor-content" },
@@ -380,6 +381,7 @@ var Editor = /** @class */ (function (_super) {
         style: PropTypes.object,
         tools: PropTypes.arrayOf(PropTypes.any),
         keyboardNavigation: PropTypes.bool,
+        resizable: PropTypes.bool,
         preserveWhitespace: PropTypes.oneOf([true, false, 'full']),
         onMount: PropTypes.func,
         onFocus: PropTypes.func,

package/dist/es/EditorProps.d.ts

@@ -129,6 +129,10 @@ export interface EditorProps {
      * Sets styles to the Editor.
      */
     style?: React.CSSProperties;
+    /**
+     * Specifies if the Editor will be resizable.
+     */
+    resizable?: boolean;
     /**
      * Sets the tools of the Editor. By default, the Editor renders no tools.
      */

package/dist/es/config/defaultStyles.d.ts

@@ -1,7 +1,7 @@
 /**
  * @hidden
  */
-export declare const defaultStyle = "\nhtml, body {\n    margin: 0;\n    height: 100%;\n    padding: 0;\n}\n\nhtml {\n  min-height: 100%;\n}\n\nbody {\n  box-sizing: border-box;\n  position: relative;\n  word-wrap: break-word;\n  padding: 8px;\n}\n\nbody > .k-content {\n  outline: 0;\n  height: 100%;\n  white-space: pre-wrap;\n}\n\n.k-content > p {\n  margin: 0 0 1em;\n}\n\n.k-content table {\n  white-space: pre-wrap;\n}\n\n.k-content .k-text-selected, .k-content::selection {\n  color: HighlightText;\n  background-color: Highlight;\n}\n\n.k-content .k-text-highlighted {\n  background-color: #bbdefb;\n}\n\n.k-content .ProseMirror-selectednode {\n  outline: 2px solid #8cf;\n}\n\n.ProseMirror-hideselection *::selection { background: transparent; }\n.ProseMirror-hideselection *::-moz-selection { background: transparent; }\n.ProseMirror-hideselection { caret-color: transparent; }\n\n.ProseMirror-gapcursor {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n}\n\n.ProseMirror-gapcursor:after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: -2px;\n  width: 20px;\n  border-top: 1px solid black;\n  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;\n}\n\n@keyframes ProseMirror-cursor-blink {\n  to {\n    visibility: hidden;\n  }\n}\n\n.ProseMirror-focused .ProseMirror-gapcursor {\n  display: block;\n}\n";
+export declare const defaultStyle = "\nhtml, body {\n    margin: 0;\n    height: 100%;\n    padding: 0;\n}\n\nhtml {\n  min-height: 100%;\n}\n\nbody {\n  box-sizing: border-box;\n  position: relative;\n  word-wrap: break-word;\n  padding: 8px;\n}\n\nbody > .k-content {\n  outline: 0;\n  height: 100%;\n  white-space: pre-wrap;\n}\n\n.k-content > p {\n  margin: 0 0 1em;\n}\n\n.k-content table {\n  white-space: pre-wrap;\n}\n\n.k-content .k-text-selected, .k-content::selection {\n  color: HighlightText;\n  background-color: Highlight;\n}\n\n.k-content .k-text-highlighted {\n  background-color: #bbdefb;\n}\n\n.k-content .ProseMirror-selectednode {\n  outline: 2px solid #8cf;\n}\n\n.ProseMirror-hideselection *::selection { background: transparent; }\n.ProseMirror-hideselection *::-moz-selection { background: transparent; }\n.ProseMirror-hideselection { caret-color: transparent; }\n\n.ProseMirror-gapcursor {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n}\n\n.ProseMirror-gapcursor:after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: -2px;\n  width: 20px;\n  border-top: 1px solid black;\n  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;\n}\n\n@keyframes ProseMirror-cursor-blink {\n  to {\n    visibility: hidden;\n  }\n}\n\n.ProseMirror-focused .ProseMirror-gapcursor {\n  display: block;\n}\n\n.k-editor-resize-handles-wrapper {\n  position: absolute;\n  visibility: hidden;\n}\n\n.k-editor-resize-handle {\n  position: absolute;\n  visibility: visible;\n  background-color: #fff;\n  border: 1px solid #000;\n  z-index: 100;\n  width: 5px;\n  height: 5px;\n}\n\n.k-editor-resize-handle.northwest {\n  top: 0;\n  left: 0;\n  transform: translate(-50%, -50%);\n  cursor: nw-resize;\n}\n\n.k-editor-resize-handle.north {\n  top: 0;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  cursor: n-resize;\n}\n\n.k-editor-resize-handle.northeast {\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  cursor: ne-resize;\n}\n\n.k-editor-resize-handle.southwest {\n  left: 0;\n  bottom: 0;\n  transform: translate(-50%, 50%);\n  cursor: sw-resize;\n}\n\n.k-editor-resize-handle.south {\n  bottom: 0;\n  left: 50%;\n  transform: translate(-50%, 50%);\n  cursor: s-resize;\n}\n\n.k-editor-resize-handle.southeast {\n  right: 0;\n  bottom: 0;\n  transform: translate(50%, 50%);\n  cursor: se-resize;\n}\n\n.k-editor-resize-handle.west {\n  top: 50%;\n  left: 0;\n  transform: translate(-50%, -50%);\n  cursor: w-resize;\n}\n\n.k-editor-resize-handle.east {\n  top: 50%;\n  right: 0;\n  transform: translate(50%, -50%);\n  cursor: e-resize;\n}\n";
 /**
  * @hidden
  */

package/dist/es/config/defaultStyles.js

@@ -1,7 +1,7 @@
 /**
  * @hidden
  */
-export var defaultStyle = "\nhtml, body {\n    margin: 0;\n    height: 100%;\n    padding: 0;\n}\n\nhtml {\n  min-height: 100%;\n}\n\nbody {\n  box-sizing: border-box;\n  position: relative;\n  word-wrap: break-word;\n  padding: 8px;\n}\n\nbody > .k-content {\n  outline: 0;\n  height: 100%;\n  white-space: pre-wrap;\n}\n\n.k-content > p {\n  margin: 0 0 1em;\n}\n\n.k-content table {\n  white-space: pre-wrap;\n}\n\n.k-content .k-text-selected, .k-content::selection {\n  color: HighlightText;\n  background-color: Highlight;\n}\n\n.k-content .k-text-highlighted {\n  background-color: #bbdefb;\n}\n\n.k-content .ProseMirror-selectednode {\n  outline: 2px solid #8cf;\n}\n\n.ProseMirror-hideselection *::selection { background: transparent; }\n.ProseMirror-hideselection *::-moz-selection { background: transparent; }\n.ProseMirror-hideselection { caret-color: transparent; }\n\n.ProseMirror-gapcursor {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n}\n\n.ProseMirror-gapcursor:after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: -2px;\n  width: 20px;\n  border-top: 1px solid black;\n  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;\n}\n\n@keyframes ProseMirror-cursor-blink {\n  to {\n    visibility: hidden;\n  }\n}\n\n.ProseMirror-focused .ProseMirror-gapcursor {\n  display: block;\n}\n";
+export var defaultStyle = "\nhtml, body {\n    margin: 0;\n    height: 100%;\n    padding: 0;\n}\n\nhtml {\n  min-height: 100%;\n}\n\nbody {\n  box-sizing: border-box;\n  position: relative;\n  word-wrap: break-word;\n  padding: 8px;\n}\n\nbody > .k-content {\n  outline: 0;\n  height: 100%;\n  white-space: pre-wrap;\n}\n\n.k-content > p {\n  margin: 0 0 1em;\n}\n\n.k-content table {\n  white-space: pre-wrap;\n}\n\n.k-content .k-text-selected, .k-content::selection {\n  color: HighlightText;\n  background-color: Highlight;\n}\n\n.k-content .k-text-highlighted {\n  background-color: #bbdefb;\n}\n\n.k-content .ProseMirror-selectednode {\n  outline: 2px solid #8cf;\n}\n\n.ProseMirror-hideselection *::selection { background: transparent; }\n.ProseMirror-hideselection *::-moz-selection { background: transparent; }\n.ProseMirror-hideselection { caret-color: transparent; }\n\n.ProseMirror-gapcursor {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n}\n\n.ProseMirror-gapcursor:after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: -2px;\n  width: 20px;\n  border-top: 1px solid black;\n  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;\n}\n\n@keyframes ProseMirror-cursor-blink {\n  to {\n    visibility: hidden;\n  }\n}\n\n.ProseMirror-focused .ProseMirror-gapcursor {\n  display: block;\n}\n\n.k-editor-resize-handles-wrapper {\n  position: absolute;\n  visibility: hidden;\n}\n\n.k-editor-resize-handle {\n  position: absolute;\n  visibility: visible;\n  background-color: #fff;\n  border: 1px solid #000;\n  z-index: 100;\n  width: 5px;\n  height: 5px;\n}\n\n.k-editor-resize-handle.northwest {\n  top: 0;\n  left: 0;\n  transform: translate(-50%, -50%);\n  cursor: nw-resize;\n}\n\n.k-editor-resize-handle.north {\n  top: 0;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  cursor: n-resize;\n}\n\n.k-editor-resize-handle.northeast {\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  cursor: ne-resize;\n}\n\n.k-editor-resize-handle.southwest {\n  left: 0;\n  bottom: 0;\n  transform: translate(-50%, 50%);\n  cursor: sw-resize;\n}\n\n.k-editor-resize-handle.south {\n  bottom: 0;\n  left: 50%;\n  transform: translate(-50%, 50%);\n  cursor: s-resize;\n}\n\n.k-editor-resize-handle.southeast {\n  right: 0;\n  bottom: 0;\n  transform: translate(50%, 50%);\n  cursor: se-resize;\n}\n\n.k-editor-resize-handle.west {\n  top: 50%;\n  left: 0;\n  transform: translate(-50%, -50%);\n  cursor: w-resize;\n}\n\n.k-editor-resize-handle.east {\n  top: 50%;\n  right: 0;\n  transform: translate(50%, -50%);\n  cursor: e-resize;\n}\n";
 /**
  * @hidden
  */

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-editor',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1637584678,
+    publishDate: 1637656458,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/es/tools/applyColor.js

@@ -20,11 +20,14 @@ import { messages } from '../messages';
 export var ApplyColorTool = function (props) {
     var view = props.view, style = props.style, colorPickerProps = props.colorPickerProps, commandName = props.commandName;
     var titleKey = colorPickerProps.title;
+    var _a = colorPickerProps.view, paletteView = _a === void 0 ? 'palette' : _a;
     var onChange = React.useCallback(function (event) {
         if (view) {
             applyInlineStyle({ style: style, value: event.value }, commandName)(view.state, view.dispatch);
-            view.focus();
+            if (paletteView === 'palette') {
+                view.focus();
+            }
         }
-    }, [view, style, commandName]);
+    }, [view, style, paletteView, commandName]);
     return (React.createElement(ColorPicker, __assign({ onChange: onChange, onActiveColorClick: onChange }, colorPickerProps, { title: titleKey ? useLocalization().toLanguageString(titleKey, messages[titleKey]) : titleKey })));
 };

package/dist/es/utils/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="prosemirror-model" />
 import * as shortcuts from './../config/shortcuts';
-import { Schema, NodeSpec, MarkSpec, Node, NodeType, Mark, MarkType, ParseOptions, EditorView, EditorState, Transaction, Plugin, PluginKey } from '@progress/kendo-editor-common';
+import { ImageResizeOptions as ImageResizeOptionsCommon, Schema, NodeSpec, MarkSpec, Node, NodeType, Mark, MarkType, ParseOptions, EditorView, EditorState, Transaction, Plugin, PluginKey } from '@progress/kendo-editor-common';
 import { EditorToolsSettings } from './../config/toolsSettings';
 import { PasteCleanupSettings } from '../config/pasteSettings';
 /**
@@ -268,6 +268,18 @@ export declare namespace EditorUtils {
      * @returns {Plugin} - The text highlight plugin.
      */
     function textHighlight(key?: PluginKey): Plugin;
+    /**
+     * The image resizing plugin options.
+     */
+    interface ImageResizeOptions extends ImageResizeOptionsCommon {
+    }
+    /**
+     * Creates a plugin which adds image resizing functionality.
+     *
+     * @param {ImageResizeOptions} options - The resizing option (Optional).
+     * @returns {Plugin} - The image resizing plugin.
+     */
+    function imageResizing(options?: ImageResizeOptions): Plugin;
     /**
      * Sets the HTML to the `EditorView`.
      *
@@ -327,6 +339,10 @@ export declare namespace EditorUtils {
      * The `PluginKey` used in the Editor to pass editor props to the tools.
      */
     const propsKey: PluginKey;
+    /**
+     * The `PluginKey` used in the Editor by the image resizing plugin.
+     */
+    const imageResizeKey: PluginKey;
     /**
      * Represents the `marks` object of the Editor.
      */

package/dist/es/utils/index.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import * as shortcuts from './../config/shortcuts';
 import { marks as schemaMarks, nodes as schemaNodes } from './../config/schema';
-import { alignBlocks as alignBlocksCommon, applyInlineStyle as applyInlineStyleCommon, applyLink as applyLinkCommon, canIndentAsListItem, canOutdentAsListItem, parseContent, canInsert as canInsertCommon, createTable as createTableCommon, formatBlockElements as formatBlockElementsCommon, getBlockFormats as getBlockFormatsCommon, getHtml as getHtmlCommon, getInlineStyles as getInlineStylesCommon, getMark as getMarkCommon, hasMark as hasMarkCommon, hasNode as hasNodeCommon, indentBlocks as indentBlocksCommon, setHtml as setHtmlCommon, insertNode as insertNodeCommon, isAligned as isAlignedCommon, isIndented as isIndentedCommon, toggleInlineFormat as toggleInlineFormatCommon, toggleList as toggleListCommon, indentHtml as indentHtmlCommon, convertMsLists as convertMsListsCommon, removeComments as removeCommentsCommon, removeTag as removeTagCommon, sanitize as sanitizeCommon, pasteCleanup as pasteCleanupCommon, sanitizeClassAttr as sanitizeClassAttrCommon, sanitizeStyleAttr as sanitizeStyleAttrCommon, removeAttribute as removeAttributeCommon, replaceImageSourcesFromRtf as replaceImageSourcesFromRtfCommon, textHighlight as textHighlightCommon, trimWhitespace } from '@progress/kendo-editor-common';
+import { alignBlocks as alignBlocksCommon, applyInlineStyle as applyInlineStyleCommon, applyLink as applyLinkCommon, canIndentAsListItem, canOutdentAsListItem, parseContent, canInsert as canInsertCommon, createTable as createTableCommon, formatBlockElements as formatBlockElementsCommon, getBlockFormats as getBlockFormatsCommon, getHtml as getHtmlCommon, getInlineStyles as getInlineStylesCommon, getMark as getMarkCommon, hasMark as hasMarkCommon, hasNode as hasNodeCommon, indentBlocks as indentBlocksCommon, setHtml as setHtmlCommon, insertNode as insertNodeCommon, isAligned as isAlignedCommon, isIndented as isIndentedCommon, toggleInlineFormat as toggleInlineFormatCommon, toggleList as toggleListCommon, indentHtml as indentHtmlCommon, convertMsLists as convertMsListsCommon, removeComments as removeCommentsCommon, removeTag as removeTagCommon, sanitize as sanitizeCommon, pasteCleanup as pasteCleanupCommon, sanitizeClassAttr as sanitizeClassAttrCommon, sanitizeStyleAttr as sanitizeStyleAttrCommon, removeAttribute as removeAttributeCommon, replaceImageSourcesFromRtf as replaceImageSourcesFromRtfCommon, textHighlight as textHighlightCommon, imageResizing as imageResizingCommon, imageResizeKey as imageResizeKeyCommon, trimWhitespace } from '@progress/kendo-editor-common';
 import { editorPropsKey } from './props-key';
 /**
  * Represents a wrapping namespace for the utility functions, `nodes`, and `marks` objects of the Editor.
@@ -346,6 +346,16 @@ export var EditorUtils;
         return textHighlightCommon(key);
     }
     EditorUtils.textHighlight = textHighlight;
+    /**
+     * Creates a plugin which adds image resizing functionality.
+     *
+     * @param {ImageResizeOptions} options - The resizing option (Optional).
+     * @returns {Plugin} - The image resizing plugin.
+     */
+    function imageResizing(options) {
+        return imageResizingCommon(options);
+    }
+    EditorUtils.imageResizing = imageResizing;
     /**
      * Sets the HTML to the `EditorView`.
      *
@@ -397,6 +407,10 @@ export var EditorUtils;
      * The `PluginKey` used in the Editor to pass editor props to the tools.
      */
     EditorUtils.propsKey = editorPropsKey;
+    /**
+     * The `PluginKey` used in the Editor by the image resizing plugin.
+     */
+    EditorUtils.imageResizeKey = imageResizeKeyCommon;
     /**
      * Represents the `marks` object of the Editor.
      */

package/dist/npm/Editor.d.ts

@@ -44,6 +44,7 @@ export default class Editor extends React.Component<EditorProps, EditorStateInte
         style: PropTypes.Requireable<object>;
         tools: PropTypes.Requireable<any[]>;
         keyboardNavigation: PropTypes.Requireable<boolean>;
+        resizable: PropTypes.Requireable<boolean>;
         preserveWhitespace: PropTypes.Requireable<string | boolean>;
         onMount: PropTypes.Requireable<(...args: any[]) => any>;
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;

package/dist/npm/Editor.js

@@ -27,6 +27,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
 var PropTypes = require("prop-types");
 var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
+var kendo_react_common_1 = require("@progress/kendo-react-common");
 var kendo_editor_common_1 = require("@progress/kendo-editor-common");
 var schema_1 = require("./config/schema");
 var defaultStyles_1 = require("./config/defaultStyles");
@@ -270,7 +271,7 @@ var Editor = /** @class */ (function (_super) {
                 React.createElement(kendo_react_buttons_1.ButtonGroup, { key: index }, item.map(_this.renderTool, index)) :
                 _this.renderTool(item, index);
         });
-        return (React.createElement("div", { ref: function (e) { return _this._element = e; }, className: 'k-widget k-editor' + (className ? " " + className : ''), dir: this.props.dir, style: style },
+        return (React.createElement("div", { ref: function (e) { return _this._element = e; }, className: kendo_react_common_1.classNames('k-widget k-editor', className, { 'k-editor-resizable': this.props.resizable }), dir: this.props.dir, style: style },
             buttons.length > 0 && (React.createElement(kendo_react_buttons_1.Toolbar, { keyboardNavigation: this.props.keyboardNavigation }, buttons)),
             defaultEditMode === 'iframe' ?
                 (React.createElement("div", { className: "k-editor-content" },
@@ -382,6 +383,7 @@ var Editor = /** @class */ (function (_super) {
         style: PropTypes.object,
         tools: PropTypes.arrayOf(PropTypes.any),
         keyboardNavigation: PropTypes.bool,
+        resizable: PropTypes.bool,
         preserveWhitespace: PropTypes.oneOf([true, false, 'full']),
         onMount: PropTypes.func,
         onFocus: PropTypes.func,

package/dist/npm/EditorProps.d.ts

@@ -129,6 +129,10 @@ export interface EditorProps {
      * Sets styles to the Editor.
      */
     style?: React.CSSProperties;
+    /**
+     * Specifies if the Editor will be resizable.
+     */
+    resizable?: boolean;
     /**
      * Sets the tools of the Editor. By default, the Editor renders no tools.
      */

package/dist/npm/config/defaultStyles.d.ts

@@ -1,7 +1,7 @@
 /**
  * @hidden
  */
-export declare const defaultStyle = "\nhtml, body {\n    margin: 0;\n    height: 100%;\n    padding: 0;\n}\n\nhtml {\n  min-height: 100%;\n}\n\nbody {\n  box-sizing: border-box;\n  position: relative;\n  word-wrap: break-word;\n  padding: 8px;\n}\n\nbody > .k-content {\n  outline: 0;\n  height: 100%;\n  white-space: pre-wrap;\n}\n\n.k-content > p {\n  margin: 0 0 1em;\n}\n\n.k-content table {\n  white-space: pre-wrap;\n}\n\n.k-content .k-text-selected, .k-content::selection {\n  color: HighlightText;\n  background-color: Highlight;\n}\n\n.k-content .k-text-highlighted {\n  background-color: #bbdefb;\n}\n\n.k-content .ProseMirror-selectednode {\n  outline: 2px solid #8cf;\n}\n\n.ProseMirror-hideselection *::selection { background: transparent; }\n.ProseMirror-hideselection *::-moz-selection { background: transparent; }\n.ProseMirror-hideselection { caret-color: transparent; }\n\n.ProseMirror-gapcursor {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n}\n\n.ProseMirror-gapcursor:after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: -2px;\n  width: 20px;\n  border-top: 1px solid black;\n  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;\n}\n\n@keyframes ProseMirror-cursor-blink {\n  to {\n    visibility: hidden;\n  }\n}\n\n.ProseMirror-focused .ProseMirror-gapcursor {\n  display: block;\n}\n";
+export declare const defaultStyle = "\nhtml, body {\n    margin: 0;\n    height: 100%;\n    padding: 0;\n}\n\nhtml {\n  min-height: 100%;\n}\n\nbody {\n  box-sizing: border-box;\n  position: relative;\n  word-wrap: break-word;\n  padding: 8px;\n}\n\nbody > .k-content {\n  outline: 0;\n  height: 100%;\n  white-space: pre-wrap;\n}\n\n.k-content > p {\n  margin: 0 0 1em;\n}\n\n.k-content table {\n  white-space: pre-wrap;\n}\n\n.k-content .k-text-selected, .k-content::selection {\n  color: HighlightText;\n  background-color: Highlight;\n}\n\n.k-content .k-text-highlighted {\n  background-color: #bbdefb;\n}\n\n.k-content .ProseMirror-selectednode {\n  outline: 2px solid #8cf;\n}\n\n.ProseMirror-hideselection *::selection { background: transparent; }\n.ProseMirror-hideselection *::-moz-selection { background: transparent; }\n.ProseMirror-hideselection { caret-color: transparent; }\n\n.ProseMirror-gapcursor {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n}\n\n.ProseMirror-gapcursor:after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: -2px;\n  width: 20px;\n  border-top: 1px solid black;\n  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;\n}\n\n@keyframes ProseMirror-cursor-blink {\n  to {\n    visibility: hidden;\n  }\n}\n\n.ProseMirror-focused .ProseMirror-gapcursor {\n  display: block;\n}\n\n.k-editor-resize-handles-wrapper {\n  position: absolute;\n  visibility: hidden;\n}\n\n.k-editor-resize-handle {\n  position: absolute;\n  visibility: visible;\n  background-color: #fff;\n  border: 1px solid #000;\n  z-index: 100;\n  width: 5px;\n  height: 5px;\n}\n\n.k-editor-resize-handle.northwest {\n  top: 0;\n  left: 0;\n  transform: translate(-50%, -50%);\n  cursor: nw-resize;\n}\n\n.k-editor-resize-handle.north {\n  top: 0;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  cursor: n-resize;\n}\n\n.k-editor-resize-handle.northeast {\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  cursor: ne-resize;\n}\n\n.k-editor-resize-handle.southwest {\n  left: 0;\n  bottom: 0;\n  transform: translate(-50%, 50%);\n  cursor: sw-resize;\n}\n\n.k-editor-resize-handle.south {\n  bottom: 0;\n  left: 50%;\n  transform: translate(-50%, 50%);\n  cursor: s-resize;\n}\n\n.k-editor-resize-handle.southeast {\n  right: 0;\n  bottom: 0;\n  transform: translate(50%, 50%);\n  cursor: se-resize;\n}\n\n.k-editor-resize-handle.west {\n  top: 50%;\n  left: 0;\n  transform: translate(-50%, -50%);\n  cursor: w-resize;\n}\n\n.k-editor-resize-handle.east {\n  top: 50%;\n  right: 0;\n  transform: translate(50%, -50%);\n  cursor: e-resize;\n}\n";
 /**
  * @hidden
  */

package/dist/npm/config/defaultStyles.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 /**
  * @hidden
  */
-exports.defaultStyle = "\nhtml, body {\n    margin: 0;\n    height: 100%;\n    padding: 0;\n}\n\nhtml {\n  min-height: 100%;\n}\n\nbody {\n  box-sizing: border-box;\n  position: relative;\n  word-wrap: break-word;\n  padding: 8px;\n}\n\nbody > .k-content {\n  outline: 0;\n  height: 100%;\n  white-space: pre-wrap;\n}\n\n.k-content > p {\n  margin: 0 0 1em;\n}\n\n.k-content table {\n  white-space: pre-wrap;\n}\n\n.k-content .k-text-selected, .k-content::selection {\n  color: HighlightText;\n  background-color: Highlight;\n}\n\n.k-content .k-text-highlighted {\n  background-color: #bbdefb;\n}\n\n.k-content .ProseMirror-selectednode {\n  outline: 2px solid #8cf;\n}\n\n.ProseMirror-hideselection *::selection { background: transparent; }\n.ProseMirror-hideselection *::-moz-selection { background: transparent; }\n.ProseMirror-hideselection { caret-color: transparent; }\n\n.ProseMirror-gapcursor {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n}\n\n.ProseMirror-gapcursor:after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: -2px;\n  width: 20px;\n  border-top: 1px solid black;\n  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;\n}\n\n@keyframes ProseMirror-cursor-blink {\n  to {\n    visibility: hidden;\n  }\n}\n\n.ProseMirror-focused .ProseMirror-gapcursor {\n  display: block;\n}\n";
+exports.defaultStyle = "\nhtml, body {\n    margin: 0;\n    height: 100%;\n    padding: 0;\n}\n\nhtml {\n  min-height: 100%;\n}\n\nbody {\n  box-sizing: border-box;\n  position: relative;\n  word-wrap: break-word;\n  padding: 8px;\n}\n\nbody > .k-content {\n  outline: 0;\n  height: 100%;\n  white-space: pre-wrap;\n}\n\n.k-content > p {\n  margin: 0 0 1em;\n}\n\n.k-content table {\n  white-space: pre-wrap;\n}\n\n.k-content .k-text-selected, .k-content::selection {\n  color: HighlightText;\n  background-color: Highlight;\n}\n\n.k-content .k-text-highlighted {\n  background-color: #bbdefb;\n}\n\n.k-content .ProseMirror-selectednode {\n  outline: 2px solid #8cf;\n}\n\n.ProseMirror-hideselection *::selection { background: transparent; }\n.ProseMirror-hideselection *::-moz-selection { background: transparent; }\n.ProseMirror-hideselection { caret-color: transparent; }\n\n.ProseMirror-gapcursor {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n}\n\n.ProseMirror-gapcursor:after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: -2px;\n  width: 20px;\n  border-top: 1px solid black;\n  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;\n}\n\n@keyframes ProseMirror-cursor-blink {\n  to {\n    visibility: hidden;\n  }\n}\n\n.ProseMirror-focused .ProseMirror-gapcursor {\n  display: block;\n}\n\n.k-editor-resize-handles-wrapper {\n  position: absolute;\n  visibility: hidden;\n}\n\n.k-editor-resize-handle {\n  position: absolute;\n  visibility: visible;\n  background-color: #fff;\n  border: 1px solid #000;\n  z-index: 100;\n  width: 5px;\n  height: 5px;\n}\n\n.k-editor-resize-handle.northwest {\n  top: 0;\n  left: 0;\n  transform: translate(-50%, -50%);\n  cursor: nw-resize;\n}\n\n.k-editor-resize-handle.north {\n  top: 0;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  cursor: n-resize;\n}\n\n.k-editor-resize-handle.northeast {\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  cursor: ne-resize;\n}\n\n.k-editor-resize-handle.southwest {\n  left: 0;\n  bottom: 0;\n  transform: translate(-50%, 50%);\n  cursor: sw-resize;\n}\n\n.k-editor-resize-handle.south {\n  bottom: 0;\n  left: 50%;\n  transform: translate(-50%, 50%);\n  cursor: s-resize;\n}\n\n.k-editor-resize-handle.southeast {\n  right: 0;\n  bottom: 0;\n  transform: translate(50%, 50%);\n  cursor: se-resize;\n}\n\n.k-editor-resize-handle.west {\n  top: 50%;\n  left: 0;\n  transform: translate(-50%, -50%);\n  cursor: w-resize;\n}\n\n.k-editor-resize-handle.east {\n  top: 50%;\n  right: 0;\n  transform: translate(50%, -50%);\n  cursor: e-resize;\n}\n";
 /**
  * @hidden
  */

package/dist/npm/package-metadata.js

@@ -7,7 +7,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-editor',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1637584678,
+    publishDate: 1637656458,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/npm/tools/applyColor.js

@@ -22,11 +22,14 @@ var messages_1 = require("../messages");
 exports.ApplyColorTool = function (props) {
     var view = props.view, style = props.style, colorPickerProps = props.colorPickerProps, commandName = props.commandName;
     var titleKey = colorPickerProps.title;
+    var _a = colorPickerProps.view, paletteView = _a === void 0 ? 'palette' : _a;
     var onChange = React.useCallback(function (event) {
         if (view) {
             kendo_editor_common_1.applyInlineStyle({ style: style, value: event.value }, commandName)(view.state, view.dispatch);
-            view.focus();
+            if (paletteView === 'palette') {
+                view.focus();
+            }
         }
-    }, [view, style, commandName]);
+    }, [view, style, paletteView, commandName]);
     return (React.createElement(kendo_react_inputs_1.ColorPicker, __assign({ onChange: onChange, onActiveColorClick: onChange }, colorPickerProps, { title: titleKey ? kendo_react_intl_1.useLocalization().toLanguageString(titleKey, messages_1.messages[titleKey]) : titleKey })));
 };

package/dist/npm/utils/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="prosemirror-model" />
 import * as shortcuts from './../config/shortcuts';
-import { Schema, NodeSpec, MarkSpec, Node, NodeType, Mark, MarkType, ParseOptions, EditorView, EditorState, Transaction, Plugin, PluginKey } from '@progress/kendo-editor-common';
+import { ImageResizeOptions as ImageResizeOptionsCommon, Schema, NodeSpec, MarkSpec, Node, NodeType, Mark, MarkType, ParseOptions, EditorView, EditorState, Transaction, Plugin, PluginKey } from '@progress/kendo-editor-common';
 import { EditorToolsSettings } from './../config/toolsSettings';
 import { PasteCleanupSettings } from '../config/pasteSettings';
 /**
@@ -268,6 +268,18 @@ export declare namespace EditorUtils {
      * @returns {Plugin} - The text highlight plugin.
      */
     function textHighlight(key?: PluginKey): Plugin;
+    /**
+     * The image resizing plugin options.
+     */
+    interface ImageResizeOptions extends ImageResizeOptionsCommon {
+    }
+    /**
+     * Creates a plugin which adds image resizing functionality.
+     *
+     * @param {ImageResizeOptions} options - The resizing option (Optional).
+     * @returns {Plugin} - The image resizing plugin.
+     */
+    function imageResizing(options?: ImageResizeOptions): Plugin;
     /**
      * Sets the HTML to the `EditorView`.
      *
@@ -327,6 +339,10 @@ export declare namespace EditorUtils {
      * The `PluginKey` used in the Editor to pass editor props to the tools.
      */
     const propsKey: PluginKey;
+    /**
+     * The `PluginKey` used in the Editor by the image resizing plugin.
+     */
+    const imageResizeKey: PluginKey;
     /**
      * Represents the `marks` object of the Editor.
      */

package/dist/npm/utils/index.js

@@ -348,6 +348,16 @@ var EditorUtils;
         return kendo_editor_common_1.textHighlight(key);
     }
     EditorUtils.textHighlight = textHighlight;
+    /**
+     * Creates a plugin which adds image resizing functionality.
+     *
+     * @param {ImageResizeOptions} options - The resizing option (Optional).
+     * @returns {Plugin} - The image resizing plugin.
+     */
+    function imageResizing(options) {
+        return kendo_editor_common_1.imageResizing(options);
+    }
+    EditorUtils.imageResizing = imageResizing;
     /**
      * Sets the HTML to the `EditorView`.
      *
@@ -399,6 +409,10 @@ var EditorUtils;
      * The `PluginKey` used in the Editor to pass editor props to the tools.
      */
     EditorUtils.propsKey = props_key_1.editorPropsKey;
+    /**
+     * The `PluginKey` used in the Editor by the image resizing plugin.
+     */
+    EditorUtils.imageResizeKey = kendo_editor_common_1.imageResizeKey;
     /**
      * Represents the `marks` object of the Editor.
      */