@progress/kendo-react-editor 5.10.0-dev.202301091032 → 5.10.0-dev.202301111405

package/dist/npm/dialogs/insertImage.js

@@ -31,6 +31,8 @@ var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
 var kendo_editor_common_1 = require("@progress/kendo-editor-common");
 var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var messages_1 = require("./../messages");
+var kendo_react_inputs_1 = require("@progress/kendo-react-inputs");
+var kendo_react_form_1 = require("@progress/kendo-react-form");
 /**
  * @hidden
  */
@@ -87,31 +89,31 @@ var InsertImageDialog = /** @class */ (function (_super) {
             state.selection.node.type === state.schema.nodes[settings.node]) {
             attrs = state.selection.node.attrs;
         }
-        var content = (React.createElement("div", { className: "k-edit-form-container" },
-            React.createElement("div", { className: "k-edit-label" },
-                React.createElement("label", { htmlFor: "k-editor-image-url" }, localization.toLanguageString(insertImageAddress, messages_1.messages[insertImageAddress]))),
-            React.createElement("div", { className: "k-edit-field" },
-                React.createElement("input", { type: "text", className: "k-input", id: "k-editor-image-url", defaultValue: attrs.src, ref: function (e) { return _this.src = e; }, autoFocus: true })),
-            React.createElement("div", { className: "k-edit-label" },
-                React.createElement("label", { htmlFor: "k-editor-image-alt" }, localization.toLanguageString(insertImageAltText, messages_1.messages[insertImageAltText]))),
-            React.createElement("div", { className: "k-edit-field" },
-                React.createElement("input", { type: "text", className: "k-input", id: "k-editor-image-alt", defaultValue: attrs.alt, ref: function (e) { return _this.altText = e; } })),
-            React.createElement("div", { className: "k-edit-label" },
-                React.createElement("label", { htmlFor: "k-editor-image-title" }, localization.toLanguageString(insertImageTitle, messages_1.messages[insertImageTitle]))),
-            React.createElement("div", { className: "k-edit-field" },
-                React.createElement("input", { type: "text", className: "k-input", id: "k-editor-image-title", defaultValue: attrs.title, ref: function (e) { return _this.title = e; } })),
-            React.createElement("div", { className: "k-edit-label" },
-                React.createElement("label", { htmlFor: "k-editor-image-width" }, localization.toLanguageString(insertImageWidth, messages_1.messages[insertImageWidth]))),
-            React.createElement("div", { className: "k-edit-field" },
-                React.createElement("input", { type: "text", className: "k-input", id: "k-editor-image-width", defaultValue: attrs.width, ref: function (e) { return _this.width = e; } })),
-            React.createElement("div", { className: "k-edit-label" },
-                React.createElement("label", { htmlFor: "k-editor-image-height" }, localization.toLanguageString(insertImageHeight, messages_1.messages[insertImageHeight]))),
-            React.createElement("div", { className: "k-edit-field" },
-                React.createElement("input", { type: "text", className: "k-input", id: "k-editor-image-height", defaultValue: attrs.height, ref: function (e) { return _this.height = e; } }))));
+        var content = (React.createElement(kendo_react_form_1.Form, { render: function () { return (React.createElement(kendo_react_form_1.FormElement, { horizontal: true },
+                React.createElement(kendo_react_form_1.FieldWrapper, null,
+                    React.createElement("label", { htmlFor: 'k-editor-image-url', className: 'k-form-label' }, localization.toLanguageString(insertImageAddress, messages_1.messages[insertImageAddress])),
+                    React.createElement("div", { className: 'k-form-field-wrap' },
+                        React.createElement(kendo_react_inputs_1.Input, { type: "text", id: 'k-editor-image-url', defaultValue: attrs.src, ref: function (e) { return _this.src = e; }, autoFocus: true }))),
+                React.createElement(kendo_react_form_1.FieldWrapper, null,
+                    React.createElement("label", { htmlFor: 'k-editor-image-url', className: 'k-form-label' }, localization.toLanguageString(insertImageAltText, messages_1.messages[insertImageAltText])),
+                    React.createElement("div", { className: 'k-form-field-wrap' },
+                        React.createElement(kendo_react_inputs_1.Input, { type: 'text', id: "k-editor-image-alt", defaultValue: attrs.alt, ref: function (e) { return _this.altText = e; } }))),
+                React.createElement(kendo_react_form_1.FieldWrapper, null,
+                    React.createElement("label", { htmlFor: 'k-editor-image-title', className: 'k-form-label' }, localization.toLanguageString(insertImageTitle, messages_1.messages[insertImageTitle])),
+                    React.createElement("div", { className: 'k-form-field-wrap' },
+                        React.createElement(kendo_react_inputs_1.Input, { type: 'text', id: "k-editor-image-title", defaultValue: attrs.title, ref: function (e) { return _this.title = e; } }))),
+                React.createElement(kendo_react_form_1.FieldWrapper, null,
+                    React.createElement("label", { htmlFor: 'k-editor-image-width', className: 'k-form-label' }, localization.toLanguageString(insertImageWidth, messages_1.messages[insertImageWidth])),
+                    React.createElement("div", { className: 'k-form-field-wrap' },
+                        React.createElement(kendo_react_inputs_1.Input, { type: 'text', id: "k-editor-image-width", defaultValue: attrs.width, ref: function (e) { return _this.width = e; } }))),
+                React.createElement(kendo_react_form_1.FieldWrapper, null,
+                    React.createElement("label", { htmlFor: 'k-editor-image-height', className: 'k-form-label' }, localization.toLanguageString(insertImageHeight, messages_1.messages[insertImageHeight])),
+                    React.createElement("div", { className: 'k-form-field-wrap' },
+                        React.createElement(kendo_react_inputs_1.Input, { id: "k-editor-image-height", defaultValue: attrs.height, ref: function (e) { return _this.height = e; } }))))); } }));
         var actionButtons = [(React.createElement(kendo_react_buttons_1.Button, { onClick: this.onClose, dir: dir, key: "cancel" }, localization.toLanguageString(insertImageCancel, messages_1.messages[insertImageCancel]))), (React.createElement(kendo_react_buttons_1.Button, { onClick: this.onInsert, themeColor: 'primary', dir: dir, key: "insert" }, localization.toLanguageString(insertImageInsert, messages_1.messages[insertImageInsert])))];
-        var dialog = (React.createElement(kendo_react_dialogs_1.Dialog, { title: localization.toLanguageString(insertImageDialogTitle, messages_1.messages[insertImageDialogTitle]), onClose: this.onClose, key: "dialog", closeIcon: true, dir: dir, style: dir === 'rtl' ? { textAlign: 'right' } : undefined, appendTo: document.body },
+        var dialog = (React.createElement(kendo_react_dialogs_1.Window, { initialWidth: 500, initialHeight: 350, className: 'k-editor-window', title: localization.toLanguageString(insertImageDialogTitle, messages_1.messages[insertImageDialogTitle]), onClose: this.onClose, key: "dialog", style: dir === 'rtl' ? { textAlign: 'right' } : undefined, appendTo: document.body, modal: true, minimizeButton: function () { return null; }, maximizeButton: function () { return null; }, resizable: false },
             content,
-            React.createElement.apply(React, __spreadArray([kendo_react_dialogs_1.DialogActionsBar, null], actionButtons, false))));
+            React.createElement.apply(React, __spreadArray([kendo_react_dialogs_1.WindowActionsBar, null], actionButtons, false))));
         return render ? render(dialog, { content: content, actionButtons: actionButtons }) : dialog;
     };
     return InsertImageDialog;

package/dist/npm/dialogs/insertLink.js

@@ -28,6 +28,8 @@ exports.InsertLinkDialog = void 0;
 var React = require("react");
 var kendo_react_dialogs_1 = require("@progress/kendo-react-dialogs");
 var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
+var kendo_react_inputs_1 = require("@progress/kendo-react-inputs");
+var kendo_react_form_1 = require("@progress/kendo-react-form");
 var kendo_editor_common_1 = require("@progress/kendo-editor-common");
 var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var messages_1 = require("./../messages");
@@ -65,27 +67,28 @@ var InsertLinkDialog = /** @class */ (function (_super) {
         var _this = this;
         var _a = this.props, view = _a.view, settings = _a.settings, dir = _a.dir, render = _a.render;
         var localization = (0, kendo_react_intl_1.provideLocalizationService)(this);
-        var _b = settings.messages, insertHyperlinkDialogTitle = _b.insertHyperlinkDialogTitle, insertHyperlinkAddress = _b.insertHyperlinkAddress, insertHyperlinkTitle = _b.insertHyperlinkTitle, insertHyperlinkNewWindow = _b.insertHyperlinkNewWindow, insertHyperlinkCancel = _b.insertHyperlinkCancel, insertHyperlinkInsert = _b.insertHyperlinkInsert;
+        var _b = settings.messages, insertHyperlinkDialogTitle = _b.insertHyperlinkDialogTitle, insertHyperlinkAddress = _b.insertHyperlinkAddress, insertHyperlinkTitle = _b.insertHyperlinkTitle, insertHyperlinkNewDialog = _b.insertHyperlinkNewDialog, insertHyperlinkCancel = _b.insertHyperlinkCancel, insertHyperlinkInsert = _b.insertHyperlinkInsert;
         var linkMark = view ?
             (0, kendo_editor_common_1.getMark)(view.state, view.state.schema.marks[settings.mark])
             : false;
-        var content = (React.createElement("div", { className: "k-edit-form-container" },
-            React.createElement("div", { className: "k-edit-label" },
-                React.createElement("label", { htmlFor: "k-editor-link-url" }, localization.toLanguageString(insertHyperlinkAddress, messages_1.messages[insertHyperlinkAddress]))),
-            React.createElement("div", { className: "k-edit-field" },
-                React.createElement("input", { type: "text", className: "k-input", id: "k-editor-link-url", ref: function (e) { return _this.href = e; }, defaultValue: (linkMark && linkMark.attrs.href) || undefined, autoFocus: true })),
-            React.createElement("div", { className: "k-edit-label k-editor-link-text-row" },
-                React.createElement("label", { htmlFor: "k-editor-link-text" }, localization.toLanguageString(insertHyperlinkTitle, messages_1.messages[insertHyperlinkTitle]))),
-            React.createElement("div", { className: "k-edit-field k-editor-link-text-row" },
-                React.createElement("input", { type: "text", className: "k-input", id: "k-editor-link-text", ref: function (e) { return _this.title = e; }, defaultValue: (linkMark && linkMark.attrs.title) || undefined })),
-            settings.linkTarget !== false && React.createElement("div", { className: "k-edit-field" },
-                React.createElement("input", { type: "checkbox", className: "k-checkbox k-checkbox-md k-rounded-md", id: "k-editor-link-target", ref: function (e) { return _this.target = e; }, defaultChecked: (linkMark && !!linkMark.attrs.target) || undefined }),
-                React.createElement("label", { htmlFor: "k-editor-link-target", className: "k-checkbox-label" }, localization.toLanguageString(insertHyperlinkNewWindow, messages_1.messages[insertHyperlinkNewWindow])))));
+        var content = (React.createElement(kendo_react_form_1.Form, { render: function () { return (React.createElement(kendo_react_form_1.FormElement, { horizontal: true },
+                React.createElement(kendo_react_form_1.FieldWrapper, null,
+                    React.createElement("label", { htmlFor: 'k-editor-link-url', className: 'k-form-label' }, localization.toLanguageString(insertHyperlinkAddress, messages_1.messages[insertHyperlinkAddress])),
+                    React.createElement("div", { className: 'k-form-field-wrap' },
+                        React.createElement(kendo_react_inputs_1.Input, { type: "text", id: 'k-editor-link-url', ref: function (e) { return _this.href = e; }, defaultValue: (linkMark && linkMark.attrs.href) || undefined, autoFocus: true }))),
+                React.createElement(kendo_react_form_1.FieldWrapper, null,
+                    React.createElement("label", { htmlFor: 'k-editor-link-text', className: 'k-form-label' }, localization.toLanguageString(insertHyperlinkTitle, messages_1.messages[insertHyperlinkTitle])),
+                    React.createElement("div", { className: 'k-form-field-wrap' },
+                        React.createElement(kendo_react_inputs_1.Input, { type: "text", id: 'k-editor-link-text', ref: function (e) { return _this.title = e; }, defaultValue: (linkMark && linkMark.attrs.title) || undefined }))),
+                settings.linkTarget !== false && React.createElement(kendo_react_form_1.FieldWrapper, null,
+                    React.createElement("label", { htmlFor: 'k-editor-link-target', className: 'k-checkbox-label' },
+                        React.createElement(kendo_react_inputs_1.Checkbox, { className: 'k-checkbox-wrap', id: 'k-editor-link-target', defaultChecked: (linkMark && !!linkMark.attrs.target) || undefined }),
+                        localization.toLanguageString(insertHyperlinkNewDialog, messages_1.messages[insertHyperlinkNewDialog]))))); } }));
         var actionButtons = [(React.createElement(kendo_react_buttons_1.Button, { onClick: this.onClose, dir: dir, key: "cancel" }, localization.toLanguageString(insertHyperlinkCancel, messages_1.messages[insertHyperlinkCancel]))), (React.createElement(kendo_react_buttons_1.Button, { onClick: this.onInsert, themeColor: 'primary', dir: dir, key: "insert" }, localization.toLanguageString(insertHyperlinkInsert, messages_1.messages[insertHyperlinkInsert])))
         ];
-        var dialog = (React.createElement(kendo_react_dialogs_1.Dialog, { title: localization.toLanguageString(insertHyperlinkDialogTitle, messages_1.messages[insertHyperlinkDialogTitle]), onClose: this.onClose, closeIcon: true, dir: dir, style: dir === 'rtl' ? { textAlign: 'right' } : undefined, appendTo: document.body },
+        var dialog = (React.createElement(kendo_react_dialogs_1.Window, { initialWidth: 450, initialHeight: 250, className: 'k-editor-window', title: localization.toLanguageString(insertHyperlinkDialogTitle, messages_1.messages[insertHyperlinkDialogTitle]), onClose: this.onClose, style: dir === 'rtl' ? { textAlign: 'right' } : undefined, appendTo: document.body, modal: true, minimizeButton: function () { return null; }, maximizeButton: function () { return null; }, resizable: false },
             content,
-            React.createElement.apply(React, __spreadArray([kendo_react_dialogs_1.DialogActionsBar, null], actionButtons, false))));
+            React.createElement.apply(React, __spreadArray([kendo_react_dialogs_1.WindowActionsBar, null], actionButtons, false))));
         return render ? render(dialog, { content: content, actionButtons: actionButtons }) : dialog;
     };
     return InsertLinkDialog;

package/dist/npm/dialogs/viewHtml.js

@@ -32,6 +32,7 @@ var kendo_editor_common_1 = require("@progress/kendo-editor-common");
 var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var messages_1 = require("./../messages");
 var props_key_1 = require("./../utils/props-key");
+var kendo_react_inputs_1 = require("@progress/kendo-react-inputs");
 /**
  * @hidden
  */
@@ -57,19 +58,15 @@ var ViewHtmlDialog = /** @class */ (function (_super) {
      * @hidden
      */
     ViewHtmlDialog.prototype.render = function () {
-        var _this = this;
         var _a = this.props, view = _a.view, settings = _a.settings, dir = _a.dir, render = _a.render;
         var localization = (0, kendo_react_intl_1.provideLocalizationService)(this);
         var _b = settings.messages, viewHtmlDialogTitle = _b.viewHtmlDialogTitle, viewHtmlCancel = _b.viewHtmlCancel, viewHtmlUpdate = _b.viewHtmlUpdate;
-        var content = (React.createElement("textarea", { className: "k-textarea k-editor-textarea", style: {
-                height: '280px',
-                width: '490px'
-            }, ref: function (e) { return _this.htmlArea = e; }, defaultValue: (0, kendo_editor_common_1.indentHtml)((0, kendo_editor_common_1.getHtml)(view.state)), autoFocus: true }));
+        var content = (React.createElement(kendo_react_inputs_1.TextArea, { className: "k-editor-textarea", defaultValue: (0, kendo_editor_common_1.indentHtml)((0, kendo_editor_common_1.getHtml)(view.state)), autoFocus: true, autoSize: true }));
         var actionButtons = [(React.createElement(kendo_react_buttons_1.Button, { onClick: this.onClose, dir: dir, key: "cancel" }, localization.toLanguageString(viewHtmlCancel, messages_1.messages[viewHtmlCancel]))), (React.createElement(kendo_react_buttons_1.Button, { onClick: this.onUpdate, themeColor: 'primary', dir: dir, key: "update" }, localization.toLanguageString(viewHtmlUpdate, messages_1.messages[viewHtmlUpdate])))
         ];
-        var dialog = (React.createElement(kendo_react_dialogs_1.Dialog, { title: localization.toLanguageString(viewHtmlDialogTitle, messages_1.messages[viewHtmlDialogTitle]), onClose: this.onClose, key: "dialog", closeIcon: true, dir: dir, style: dir === 'rtl' ? { textAlign: 'right' } : undefined, appendTo: document.body },
+        var dialog = (React.createElement(kendo_react_dialogs_1.Window, { className: 'k-editor-window', title: localization.toLanguageString(viewHtmlDialogTitle, messages_1.messages[viewHtmlDialogTitle]), onClose: this.onClose, key: "dialog", style: dir === 'rtl' ? { textAlign: 'right' } : undefined, appendTo: document.body, modal: true, minimizeButton: function () { return null; }, maximizeButton: function () { return null; }, resizable: false },
             content,
-            React.createElement.apply(React, __spreadArray([kendo_react_dialogs_1.DialogActionsBar, null], actionButtons, false))));
+            React.createElement.apply(React, __spreadArray([kendo_react_dialogs_1.WindowActionsBar, null], actionButtons, false))));
         return render ? render(dialog, { content: content, actionButtons: actionButtons }) : dialog;
     };
     return ViewHtmlDialog;

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-editor',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1673259349,
+    publishDate: 1673444941,
     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/lists-styled.js

@@ -79,6 +79,6 @@ var ListTool = function (props) {
         items = items.map(function (item, index) { return (__assign(__assign({}, item), { selected: listStyleType_1 ? item.style === listStyleType_1 : index === 0 })); });
     }
     return (React.createElement("span", { onMouseDown: function (e) { e.preventDefault(); } },
-        React.createElement(kendo_react_buttons_1.SplitButton, { textField: "text", items: items, icon: props.icon, onButtonClick: onButtonClick, onItemClick: onItemClick, buttonClass: isActive ? 'k-selected' : undefined, title: props.title !== undefined ? props.title : localization.toLanguageString(props.titleKey, messages_1.messages[props.titleKey]) })));
+        React.createElement(kendo_react_buttons_1.SplitButton, { textField: "text", items: items, icon: props.icon, svgIcon: props.svgIcon, onButtonClick: onButtonClick, onItemClick: onItemClick, buttonClass: isActive ? 'k-selected' : undefined, title: props.title !== undefined ? props.title : localization.toLanguageString(props.titleKey, messages_1.messages[props.titleKey]) })));
 };
 exports.ListTool = ListTool;

package/dist/npm/tools/main.js

@@ -50,6 +50,7 @@ var selectAll_1 = require("./selectAll");
 var cleanFormatting_1 = require("./cleanFormatting");
 var findReplace_1 = require("./findReplace");
 var lists_styled_1 = require("./lists-styled");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 /**
  * Represents a wrapping namespace for the tool components, props, and functions of the Editor.
  */
@@ -416,11 +417,11 @@ var EditorTools;
      */
     EditorTools.BulletedList = function (props) {
         var ulItems = [
-            { icon: 'list-unordered', text: 'Disc', style: 'disc' },
-            { icon: 'list-unordered-outline', text: 'Circle', style: 'circle' },
-            { icon: 'list-unordered-square', text: 'Square', style: 'square' }
+            { icon: 'list-unordered', svgIcon: kendo_svg_icons_1.listUnorderedIcon, text: 'Disc', style: 'disc' },
+            { icon: 'list-unordered-outline', svgIcon: kendo_svg_icons_1.listUnorderedOutlineIcon, text: 'Circle', style: 'circle' },
+            { icon: 'list-unordered-square', svgIcon: kendo_svg_icons_1.listUnorderedSquareIcon, text: 'Square', style: 'square' }
         ];
-        return (React.createElement(lists_styled_1.ListTool, __assign({ listType: toolsSettings_1.EditorToolsSettings.bulletList.listType, items: ulItems, icon: "list-unordered", titleKey: toolsSettings_1.EditorToolsSettings.bulletList.messages.title }, props)));
+        return (React.createElement(lists_styled_1.ListTool, __assign({ listType: toolsSettings_1.EditorToolsSettings.bulletList.listType, items: ulItems, icon: "list-unordered", svgIcon: kendo_svg_icons_1.listUnorderedIcon, titleKey: toolsSettings_1.EditorToolsSettings.bulletList.messages.title }, props)));
     };
     /**
      * The NumberedList tool component.
@@ -428,14 +429,14 @@ var EditorTools;
      */
     EditorTools.NumberedList = function (props) {
         var olItems = [
-            { icon: 'list-ordered', text: 'Decimal' },
+            { icon: 'list-ordered', svgIcon: kendo_svg_icons_1.listOrderedIcon, text: 'Decimal' },
             // { icon: 'list-leading-zero', text: 'Decimal with leading zero', styleType: 'decimal-leading-zero' },
-            { icon: 'list-roman-upper', text: 'Upper roman', style: 'upper-roman' },
-            { icon: 'list-roman-lower', text: 'Lower roman', style: 'lower-roman' },
-            { icon: 'list-latin-big', text: 'Upper latin', style: 'upper-latin' },
-            { icon: 'list-latin-small', text: 'Lower latin', style: 'lower-latin' }
+            { icon: 'list-roman-upper', svgIcon: kendo_svg_icons_1.listRomanUpperIcon, text: 'Upper roman', style: 'upper-roman' },
+            { icon: 'list-roman-lower', svgIcon: kendo_svg_icons_1.listRomanLowerIcon, text: 'Lower roman', style: 'lower-roman' },
+            { icon: 'list-latin-big', svgIcon: kendo_svg_icons_1.listLatinBigIcon, text: 'Upper latin', style: 'upper-latin' },
+            { icon: 'list-latin-small', svgIcon: kendo_svg_icons_1.listLatinSmallIcon, text: 'Lower latin', style: 'lower-latin' }
         ];
-        return (React.createElement(lists_styled_1.ListTool, __assign({ listType: toolsSettings_1.EditorToolsSettings.orderedList.listType, items: olItems, icon: "list-ordered", titleKey: toolsSettings_1.EditorToolsSettings.orderedList.messages.title }, props)));
+        return (React.createElement(lists_styled_1.ListTool, __assign({ listType: toolsSettings_1.EditorToolsSettings.orderedList.listType, items: olItems, icon: "list-ordered", svgIcon: kendo_svg_icons_1.listOrderedIcon, titleKey: toolsSettings_1.EditorToolsSettings.orderedList.messages.title }, props)));
     };
     /**
      * Creates the Outdent tool component of the Editor.