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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/es/Editor.js CHANGED
@@ -296,8 +296,8 @@ var Editor = /** @class */ (function (_super) {
296
296
  React.createElement(ButtonGroup, { key: index }, item.map(_this.renderTool, index)) :
297
297
  _this.renderTool(item, index);
298
298
  });
299
- 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 },
300
- buttons.length > 0 && (React.createElement(Toolbar, { keyboardNavigation: this.props.keyboardNavigation }, buttons)),
299
+ return (React.createElement("div", { ref: function (e) { return _this._element = e; }, className: classNames('k-editor', className, { 'k-editor-resizable': this.props.resizable }), dir: this.props.dir, style: style },
300
+ buttons.length > 0 && (React.createElement(Toolbar, { className: 'k-editor-toolbar', keyboardNavigation: this.props.keyboardNavigation }, buttons)),
301
301
  defaultEditMode === 'iframe' ?
302
302
  (React.createElement("div", { className: "k-editor-content" },
303
303
  React.createElement("iframe", { onLoad: firefox ? function () {
@@ -34,8 +34,9 @@ import { EditorToolsSettings } from './../config/toolsSettings';
34
34
  import { formatString } from './../tools/utils';
35
35
  import { find, replace, replaceAll, findAll, TextSelection, textHighlightKey, selectedLineTextOnly } from '@progress/kendo-editor-common';
36
36
  import { Icon } from '@progress/kendo-react-common';
37
+ import { Input, Checkbox } from '@progress/kendo-react-inputs';
38
+ import { Form, FormElement, FieldWrapper } from '@progress/kendo-react-form';
37
39
  var enter = 13, esc = 27;
38
- var checkboxProps = { className: 'k-checkbox k-checkbox-md k-rounded-md', type: 'checkbox' };
39
40
  var settings = EditorToolsSettings.findAndReplace;
40
41
  /**
41
42
  * @hidden
@@ -117,10 +118,10 @@ var FindAndReplaceDialog = /** @class */ (function (_super) {
117
118
  _this.onClose();
118
119
  }
119
120
  };
120
- _this.onMatchCaseChecked = function (e) { return _this.setNextState({ matchCase: e.target.checked }); };
121
- _this.onMatchWordChecked = function (e) { return _this.setNextState({ matchWord: e.target.checked }); };
122
- _this.onMatchCyclicChecked = function (e) { return _this.setNextState({ matchCyclic: e.target.checked }); };
123
- _this.onUseRegExpChecked = function (e) { return _this.setNextState({ useRegExp: e.target.checked }); };
121
+ _this.onMatchCaseChecked = function (e) { return _this.setNextState({ matchCase: e.value }); };
122
+ _this.onMatchWordChecked = function (e) { return _this.setNextState({ matchWord: e.value }); };
123
+ _this.onMatchCyclicChecked = function (e) { return _this.setNextState({ matchCyclic: e.value }); };
124
+ _this.onUseRegExpChecked = function (e) { return _this.setNextState({ useRegExp: e.value }); };
124
125
  _this.onSearchChange = function (e) { return _this.setNextState({ searchText: e.target.value }); };
125
126
  _this.onReplaceChange = function (e) { return _this.setNextState({ replaceText: e.target.value }); };
126
127
  _this.setNextState = function (next) {
@@ -190,21 +191,22 @@ var FindAndReplaceDialog = /** @class */ (function (_super) {
190
191
  * @hidden
191
192
  */
192
193
  FindAndReplaceDialog.prototype.render = function () {
194
+ var _this = this;
193
195
  var localization = provideLocalizationService(this);
194
196
  var _a = this.settings.messages, findReplaceDialogTitle = _a.findReplaceDialogTitle, findReplaceTabFind = _a.findReplaceTabFind, findReplaceTabReplace = _a.findReplaceTabReplace, findReplaceFindWhat = _a.findReplaceFindWhat, findReplaceReplaceWith = _a.findReplaceReplaceWith, findReplaceReplace = _a.findReplaceReplace, findReplaceReplaceAll = _a.findReplaceReplaceAll, findReplaceMatchCase = _a.findReplaceMatchCase, findReplaceMatchWord = _a.findReplaceMatchWord, findReplaceMatchCyclic = _a.findReplaceMatchCyclic, findReplaceUseRegExp = _a.findReplaceUseRegExp, findReplacePrevMatch = _a.findReplacePrevMatch, findReplaceNextMatch = _a.findReplaceNextMatch, findReplaceMatches = _a.findReplaceMatches;
195
197
  var _b = this.state, matchCase = _b.matchCase, matchWord = _b.matchWord, matchCyclic = _b.matchCyclic, useRegExp = _b.useRegExp, searchText = _b.searchText, replaceText = _b.replaceText, nextMatch = _b.nextMatch;
196
198
  var checkboxes = (React.createElement("div", { className: "k-search-options" },
197
199
  React.createElement("span", null,
198
- React.createElement("input", __assign({}, checkboxProps, { id: "match-case", checked: matchCase, onChange: this.onMatchCaseChecked })),
200
+ React.createElement(Checkbox, { id: "match-case", checked: matchCase, onChange: this.onMatchCaseChecked }),
199
201
  React.createElement("label", { htmlFor: "match-case", className: "k-checkbox-label" }, localization.toLanguageString(findReplaceMatchCase, messages[findReplaceMatchCase]))),
200
202
  React.createElement("span", null,
201
- React.createElement("input", __assign({}, checkboxProps, { id: "match-whole", checked: matchWord, onChange: this.onMatchWordChecked })),
203
+ React.createElement(Checkbox, { id: "match-whole", checked: matchWord, onChange: this.onMatchWordChecked }),
202
204
  React.createElement("label", { htmlFor: "match-whole", className: "k-checkbox-label" }, localization.toLanguageString(findReplaceMatchWord, messages[findReplaceMatchWord]))),
203
205
  React.createElement("span", null,
204
- React.createElement("input", __assign({}, checkboxProps, { id: "match-cyclic", checked: matchCyclic, onChange: this.onMatchCyclicChecked })),
206
+ React.createElement(Checkbox, { id: "match-cyclic", checked: matchCyclic, onChange: this.onMatchCyclicChecked }),
205
207
  React.createElement("label", { htmlFor: "match-cyclic", className: "k-checkbox-label" }, localization.toLanguageString(findReplaceMatchCyclic, messages[findReplaceMatchCyclic]))),
206
208
  React.createElement("span", null,
207
- React.createElement("input", __assign({}, checkboxProps, { id: "regular-expression", checked: useRegExp, onChange: this.onUseRegExpChecked })),
209
+ React.createElement(Checkbox, { id: "regular-expression", checked: useRegExp, onChange: this.onUseRegExpChecked }),
208
210
  React.createElement("label", { htmlFor: "regular-expression", className: "k-checkbox-label" }, localization.toLanguageString(findReplaceUseRegExp, messages[findReplaceUseRegExp])))));
209
211
  var navigation = (React.createElement("div", { className: "k-matches-container" },
210
212
  React.createElement(Button, { fillMode: 'flat', themeColor: 'primary', onClick: this.onFindPrev },
@@ -214,26 +216,25 @@ var FindAndReplaceDialog = /** @class */ (function (_super) {
214
216
  React.createElement(Button, { fillMode: 'flat', themeColor: 'primary', onClick: this.onFindNext },
215
217
  localization.toLanguageString(findReplaceNextMatch, messages[findReplaceNextMatch]),
216
218
  React.createElement(Icon, { name: "chevron-right" }))));
217
- var findWhat = (React.createElement(React.Fragment, null,
218
- React.createElement("div", { className: "k-edit-label" },
219
- React.createElement("label", { htmlFor: "findWhat" }, localization.toLanguageString(findReplaceFindWhat, messages[findReplaceFindWhat]))),
220
- React.createElement("div", { className: "k-edit-field" },
221
- React.createElement("input", { id: "findWhat", type: "text", className: "k-input", value: searchText, onChange: this.onSearchChange, onFocus: this.onSearchChange, onKeyDown: this.onKeyDown, autoFocus: true }))));
222
- var replaceWith = (React.createElement(React.Fragment, null,
223
- React.createElement("div", { className: "k-edit-label" },
224
- React.createElement("label", { htmlFor: "replaceWith" }, localization.toLanguageString(findReplaceReplaceWith, messages[findReplaceReplaceWith]))),
225
- React.createElement("div", { className: "k-edit-field" },
226
- React.createElement("input", { id: "replaceWith", className: "k-input", type: "text", value: replaceText, onChange: this.onReplaceChange }))));
219
+ var findWhat = (React.createElement(Form, { render: function () { return (React.createElement(FormElement, { horizontal: true },
220
+ React.createElement(FieldWrapper, null,
221
+ React.createElement("label", { htmlFor: "findWhat", className: 'k-form-label' }, localization.toLanguageString(findReplaceFindWhat, messages[findReplaceFindWhat])),
222
+ React.createElement("div", { className: 'k-form-field-wrap' },
223
+ React.createElement(Input, { id: 'findWhat', type: "text", value: searchText, onChange: _this.onSearchChange, onFocus: _this.onSearchChange, onKeyDown: _this.onKeyDown, autoFocus: true }))))); } }));
224
+ var replaceWith = (React.createElement(Form, { render: function () { return (React.createElement(FormElement, { horizontal: true },
225
+ React.createElement(FieldWrapper, null,
226
+ React.createElement("label", { htmlFor: 'replaceWith', className: 'k-form-label' }, localization.toLanguageString(findReplaceReplaceWith, messages[findReplaceReplaceWith])),
227
+ React.createElement("div", { className: 'k-form-field-wrap' },
228
+ React.createElement(Input, { id: 'replaceWith', type: "text", value: replaceText, onChange: _this.onReplaceChange }))))); } }));
227
229
  return (React.createElement(Window, { title: localization.toLanguageString(findReplaceDialogTitle, messages[findReplaceDialogTitle]), onClose: this.onClose, style: { width: 'auto', height: 'auto', userSelect: 'none' }, resizable: false, minimizeButton: function () { return null; }, maximizeButton: function () { return null; }, appendTo: document.body },
228
230
  React.createElement(TabStrip, { selected: this.state.selectedTab, className: "k-editor-find-replace", onSelect: this.onTabSelect, animation: false },
229
231
  React.createElement(TabStripTab, { title: localization.toLanguageString(findReplaceTabFind, messages[findReplaceTabFind]) },
230
- React.createElement("div", { className: "k-edit-form-container" }, findWhat),
232
+ findWhat,
231
233
  checkboxes,
232
234
  navigation),
233
235
  React.createElement(TabStripTab, { title: localization.toLanguageString(findReplaceTabReplace, messages[findReplaceTabReplace]) },
234
- React.createElement("div", { className: "k-edit-form-container" },
235
- findWhat,
236
- replaceWith),
236
+ findWhat,
237
+ replaceWith,
237
238
  React.createElement("div", { className: "k-actions k-hstack k-justify-content-end" },
238
239
  React.createElement(Button, { disabled: !Boolean(nextMatch), onClick: this.onReplace }, localization.toLanguageString(findReplaceReplace, messages[findReplaceReplace])),
239
240
  React.createElement(Button, { disabled: !Boolean(nextMatch), onClick: this.onReplaceAll }, localization.toLanguageString(findReplaceReplaceAll, messages[findReplaceReplaceAll]))),
@@ -23,11 +23,13 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
23
23
  return to.concat(ar || Array.prototype.slice.call(from));
24
24
  };
25
25
  import * as React from 'react';
26
- import { Dialog, DialogActionsBar } from '@progress/kendo-react-dialogs';
26
+ import { Window, WindowActionsBar } from '@progress/kendo-react-dialogs';
27
27
  import { Button } from '@progress/kendo-react-buttons';
28
28
  import { NodeSelection, insertNode } from '@progress/kendo-editor-common';
29
29
  import { registerForLocalization, provideLocalizationService } from '@progress/kendo-react-intl';
30
30
  import { messages } from './../messages';
31
+ import { Input } from '@progress/kendo-react-inputs';
32
+ import { Form, FormElement, FieldWrapper } from '@progress/kendo-react-form';
31
33
  /**
32
34
  * @hidden
33
35
  */
@@ -84,31 +86,31 @@ var InsertImageDialog = /** @class */ (function (_super) {
84
86
  state.selection.node.type === state.schema.nodes[settings.node]) {
85
87
  attrs = state.selection.node.attrs;
86
88
  }
87
- var content = (React.createElement("div", { className: "k-edit-form-container" },
88
- React.createElement("div", { className: "k-edit-label" },
89
- React.createElement("label", { htmlFor: "k-editor-image-url" }, localization.toLanguageString(insertImageAddress, messages[insertImageAddress]))),
90
- React.createElement("div", { className: "k-edit-field" },
91
- 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 })),
92
- React.createElement("div", { className: "k-edit-label" },
93
- React.createElement("label", { htmlFor: "k-editor-image-alt" }, localization.toLanguageString(insertImageAltText, messages[insertImageAltText]))),
94
- React.createElement("div", { className: "k-edit-field" },
95
- React.createElement("input", { type: "text", className: "k-input", id: "k-editor-image-alt", defaultValue: attrs.alt, ref: function (e) { return _this.altText = e; } })),
96
- React.createElement("div", { className: "k-edit-label" },
97
- React.createElement("label", { htmlFor: "k-editor-image-title" }, localization.toLanguageString(insertImageTitle, messages[insertImageTitle]))),
98
- React.createElement("div", { className: "k-edit-field" },
99
- React.createElement("input", { type: "text", className: "k-input", id: "k-editor-image-title", defaultValue: attrs.title, ref: function (e) { return _this.title = e; } })),
100
- React.createElement("div", { className: "k-edit-label" },
101
- React.createElement("label", { htmlFor: "k-editor-image-width" }, localization.toLanguageString(insertImageWidth, messages[insertImageWidth]))),
102
- React.createElement("div", { className: "k-edit-field" },
103
- React.createElement("input", { type: "text", className: "k-input", id: "k-editor-image-width", defaultValue: attrs.width, ref: function (e) { return _this.width = e; } })),
104
- React.createElement("div", { className: "k-edit-label" },
105
- React.createElement("label", { htmlFor: "k-editor-image-height" }, localization.toLanguageString(insertImageHeight, messages[insertImageHeight]))),
106
- React.createElement("div", { className: "k-edit-field" },
107
- React.createElement("input", { type: "text", className: "k-input", id: "k-editor-image-height", defaultValue: attrs.height, ref: function (e) { return _this.height = e; } }))));
89
+ var content = (React.createElement(Form, { render: function () { return (React.createElement(FormElement, { horizontal: true },
90
+ React.createElement(FieldWrapper, null,
91
+ React.createElement("label", { htmlFor: 'k-editor-image-url', className: 'k-form-label' }, localization.toLanguageString(insertImageAddress, messages[insertImageAddress])),
92
+ React.createElement("div", { className: 'k-form-field-wrap' },
93
+ React.createElement(Input, { type: "text", id: 'k-editor-image-url', defaultValue: attrs.src, ref: function (e) { return _this.src = e; }, autoFocus: true }))),
94
+ React.createElement(FieldWrapper, null,
95
+ React.createElement("label", { htmlFor: 'k-editor-image-url', className: 'k-form-label' }, localization.toLanguageString(insertImageAltText, messages[insertImageAltText])),
96
+ React.createElement("div", { className: 'k-form-field-wrap' },
97
+ React.createElement(Input, { type: 'text', id: "k-editor-image-alt", defaultValue: attrs.alt, ref: function (e) { return _this.altText = e; } }))),
98
+ React.createElement(FieldWrapper, null,
99
+ React.createElement("label", { htmlFor: 'k-editor-image-title', className: 'k-form-label' }, localization.toLanguageString(insertImageTitle, messages[insertImageTitle])),
100
+ React.createElement("div", { className: 'k-form-field-wrap' },
101
+ React.createElement(Input, { type: 'text', id: "k-editor-image-title", defaultValue: attrs.title, ref: function (e) { return _this.title = e; } }))),
102
+ React.createElement(FieldWrapper, null,
103
+ React.createElement("label", { htmlFor: 'k-editor-image-width', className: 'k-form-label' }, localization.toLanguageString(insertImageWidth, messages[insertImageWidth])),
104
+ React.createElement("div", { className: 'k-form-field-wrap' },
105
+ React.createElement(Input, { type: 'text', id: "k-editor-image-width", defaultValue: attrs.width, ref: function (e) { return _this.width = e; } }))),
106
+ React.createElement(FieldWrapper, null,
107
+ React.createElement("label", { htmlFor: 'k-editor-image-height', className: 'k-form-label' }, localization.toLanguageString(insertImageHeight, messages[insertImageHeight])),
108
+ React.createElement("div", { className: 'k-form-field-wrap' },
109
+ React.createElement(Input, { id: "k-editor-image-height", defaultValue: attrs.height, ref: function (e) { return _this.height = e; } }))))); } }));
108
110
  var actionButtons = [(React.createElement(Button, { onClick: this.onClose, dir: dir, key: "cancel" }, localization.toLanguageString(insertImageCancel, messages[insertImageCancel]))), (React.createElement(Button, { onClick: this.onInsert, themeColor: 'primary', dir: dir, key: "insert" }, localization.toLanguageString(insertImageInsert, messages[insertImageInsert])))];
109
- var dialog = (React.createElement(Dialog, { title: localization.toLanguageString(insertImageDialogTitle, messages[insertImageDialogTitle]), onClose: this.onClose, key: "dialog", closeIcon: true, dir: dir, style: dir === 'rtl' ? { textAlign: 'right' } : undefined, appendTo: document.body },
111
+ var dialog = (React.createElement(Window, { initialWidth: 500, initialHeight: 350, className: 'k-editor-window', title: localization.toLanguageString(insertImageDialogTitle, 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 },
110
112
  content,
111
- React.createElement.apply(React, __spreadArray([DialogActionsBar, null], actionButtons, false))));
113
+ React.createElement.apply(React, __spreadArray([WindowActionsBar, null], actionButtons, false))));
112
114
  return render ? render(dialog, { content: content, actionButtons: actionButtons }) : dialog;
113
115
  };
114
116
  return InsertImageDialog;
@@ -23,8 +23,10 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
23
23
  return to.concat(ar || Array.prototype.slice.call(from));
24
24
  };
25
25
  import * as React from 'react';
26
- import { Dialog, DialogActionsBar } from '@progress/kendo-react-dialogs';
26
+ import { Window, WindowActionsBar } from '@progress/kendo-react-dialogs';
27
27
  import { Button } from '@progress/kendo-react-buttons';
28
+ import { Input, Checkbox } from '@progress/kendo-react-inputs';
29
+ import { Form, FormElement, FieldWrapper } from '@progress/kendo-react-form';
28
30
  import { getMark, applyLink } from '@progress/kendo-editor-common';
29
31
  import { registerForLocalization, provideLocalizationService } from '@progress/kendo-react-intl';
30
32
  import { messages } from './../messages';
@@ -62,27 +64,28 @@ var InsertLinkDialog = /** @class */ (function (_super) {
62
64
  var _this = this;
63
65
  var _a = this.props, view = _a.view, settings = _a.settings, dir = _a.dir, render = _a.render;
64
66
  var localization = provideLocalizationService(this);
65
- var _b = settings.messages, insertHyperlinkDialogTitle = _b.insertHyperlinkDialogTitle, insertHyperlinkAddress = _b.insertHyperlinkAddress, insertHyperlinkTitle = _b.insertHyperlinkTitle, insertHyperlinkNewWindow = _b.insertHyperlinkNewWindow, insertHyperlinkCancel = _b.insertHyperlinkCancel, insertHyperlinkInsert = _b.insertHyperlinkInsert;
67
+ var _b = settings.messages, insertHyperlinkDialogTitle = _b.insertHyperlinkDialogTitle, insertHyperlinkAddress = _b.insertHyperlinkAddress, insertHyperlinkTitle = _b.insertHyperlinkTitle, insertHyperlinkNewDialog = _b.insertHyperlinkNewDialog, insertHyperlinkCancel = _b.insertHyperlinkCancel, insertHyperlinkInsert = _b.insertHyperlinkInsert;
66
68
  var linkMark = view ?
67
69
  getMark(view.state, view.state.schema.marks[settings.mark])
68
70
  : false;
69
- var content = (React.createElement("div", { className: "k-edit-form-container" },
70
- React.createElement("div", { className: "k-edit-label" },
71
- React.createElement("label", { htmlFor: "k-editor-link-url" }, localization.toLanguageString(insertHyperlinkAddress, messages[insertHyperlinkAddress]))),
72
- React.createElement("div", { className: "k-edit-field" },
73
- 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 })),
74
- React.createElement("div", { className: "k-edit-label k-editor-link-text-row" },
75
- React.createElement("label", { htmlFor: "k-editor-link-text" }, localization.toLanguageString(insertHyperlinkTitle, messages[insertHyperlinkTitle]))),
76
- React.createElement("div", { className: "k-edit-field k-editor-link-text-row" },
77
- 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 })),
78
- settings.linkTarget !== false && React.createElement("div", { className: "k-edit-field" },
79
- 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 }),
80
- React.createElement("label", { htmlFor: "k-editor-link-target", className: "k-checkbox-label" }, localization.toLanguageString(insertHyperlinkNewWindow, messages[insertHyperlinkNewWindow])))));
71
+ var content = (React.createElement(Form, { render: function () { return (React.createElement(FormElement, { horizontal: true },
72
+ React.createElement(FieldWrapper, null,
73
+ React.createElement("label", { htmlFor: 'k-editor-link-url', className: 'k-form-label' }, localization.toLanguageString(insertHyperlinkAddress, messages[insertHyperlinkAddress])),
74
+ React.createElement("div", { className: 'k-form-field-wrap' },
75
+ React.createElement(Input, { type: "text", id: 'k-editor-link-url', ref: function (e) { return _this.href = e; }, defaultValue: (linkMark && linkMark.attrs.href) || undefined, autoFocus: true }))),
76
+ React.createElement(FieldWrapper, null,
77
+ React.createElement("label", { htmlFor: 'k-editor-link-text', className: 'k-form-label' }, localization.toLanguageString(insertHyperlinkTitle, messages[insertHyperlinkTitle])),
78
+ React.createElement("div", { className: 'k-form-field-wrap' },
79
+ React.createElement(Input, { type: "text", id: 'k-editor-link-text', ref: function (e) { return _this.title = e; }, defaultValue: (linkMark && linkMark.attrs.title) || undefined }))),
80
+ settings.linkTarget !== false && React.createElement(FieldWrapper, null,
81
+ React.createElement("label", { htmlFor: 'k-editor-link-target', className: 'k-checkbox-label' },
82
+ React.createElement(Checkbox, { className: 'k-checkbox-wrap', id: 'k-editor-link-target', defaultChecked: (linkMark && !!linkMark.attrs.target) || undefined }),
83
+ localization.toLanguageString(insertHyperlinkNewDialog, messages[insertHyperlinkNewDialog]))))); } }));
81
84
  var actionButtons = [(React.createElement(Button, { onClick: this.onClose, dir: dir, key: "cancel" }, localization.toLanguageString(insertHyperlinkCancel, messages[insertHyperlinkCancel]))), (React.createElement(Button, { onClick: this.onInsert, themeColor: 'primary', dir: dir, key: "insert" }, localization.toLanguageString(insertHyperlinkInsert, messages[insertHyperlinkInsert])))
82
85
  ];
83
- var dialog = (React.createElement(Dialog, { title: localization.toLanguageString(insertHyperlinkDialogTitle, messages[insertHyperlinkDialogTitle]), onClose: this.onClose, closeIcon: true, dir: dir, style: dir === 'rtl' ? { textAlign: 'right' } : undefined, appendTo: document.body },
86
+ var dialog = (React.createElement(Window, { initialWidth: 450, initialHeight: 250, className: 'k-editor-window', title: localization.toLanguageString(insertHyperlinkDialogTitle, 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 },
84
87
  content,
85
- React.createElement.apply(React, __spreadArray([DialogActionsBar, null], actionButtons, false))));
88
+ React.createElement.apply(React, __spreadArray([WindowActionsBar, null], actionButtons, false))));
86
89
  return render ? render(dialog, { content: content, actionButtons: actionButtons }) : dialog;
87
90
  };
88
91
  return InsertLinkDialog;
@@ -23,12 +23,13 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
23
23
  return to.concat(ar || Array.prototype.slice.call(from));
24
24
  };
25
25
  import * as React from 'react';
26
- import { Dialog, DialogActionsBar } from '@progress/kendo-react-dialogs';
26
+ import { Window, WindowActionsBar } from '@progress/kendo-react-dialogs';
27
27
  import { Button } from '@progress/kendo-react-buttons';
28
28
  import { getHtml, setHtml, indentHtml, trimWhitespace } from '@progress/kendo-editor-common';
29
29
  import { registerForLocalization, provideLocalizationService } from '@progress/kendo-react-intl';
30
30
  import { messages } from './../messages';
31
31
  import { editorPropsKey } from './../utils/props-key';
32
+ import { TextArea } from '@progress/kendo-react-inputs';
32
33
  /**
33
34
  * @hidden
34
35
  */
@@ -54,19 +55,15 @@ var ViewHtmlDialog = /** @class */ (function (_super) {
54
55
  * @hidden
55
56
  */
56
57
  ViewHtmlDialog.prototype.render = function () {
57
- var _this = this;
58
58
  var _a = this.props, view = _a.view, settings = _a.settings, dir = _a.dir, render = _a.render;
59
59
  var localization = provideLocalizationService(this);
60
60
  var _b = settings.messages, viewHtmlDialogTitle = _b.viewHtmlDialogTitle, viewHtmlCancel = _b.viewHtmlCancel, viewHtmlUpdate = _b.viewHtmlUpdate;
61
- var content = (React.createElement("textarea", { className: "k-textarea k-editor-textarea", style: {
62
- height: '280px',
63
- width: '490px'
64
- }, ref: function (e) { return _this.htmlArea = e; }, defaultValue: indentHtml(getHtml(view.state)), autoFocus: true }));
61
+ var content = (React.createElement(TextArea, { className: "k-editor-textarea", defaultValue: indentHtml(getHtml(view.state)), autoFocus: true, autoSize: true }));
65
62
  var actionButtons = [(React.createElement(Button, { onClick: this.onClose, dir: dir, key: "cancel" }, localization.toLanguageString(viewHtmlCancel, messages[viewHtmlCancel]))), (React.createElement(Button, { onClick: this.onUpdate, themeColor: 'primary', dir: dir, key: "update" }, localization.toLanguageString(viewHtmlUpdate, messages[viewHtmlUpdate])))
66
63
  ];
67
- var dialog = (React.createElement(Dialog, { title: localization.toLanguageString(viewHtmlDialogTitle, messages[viewHtmlDialogTitle]), onClose: this.onClose, key: "dialog", closeIcon: true, dir: dir, style: dir === 'rtl' ? { textAlign: 'right' } : undefined, appendTo: document.body },
64
+ var dialog = (React.createElement(Window, { className: 'k-editor-window', title: localization.toLanguageString(viewHtmlDialogTitle, 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 },
68
65
  content,
69
- React.createElement.apply(React, __spreadArray([DialogActionsBar, null], actionButtons, false))));
66
+ React.createElement.apply(React, __spreadArray([WindowActionsBar, null], actionButtons, false))));
70
67
  return render ? render(dialog, { content: content, actionButtons: actionButtons }) : dialog;
71
68
  };
72
69
  return ViewHtmlDialog;
@@ -5,7 +5,7 @@ export var packageMetadata = {
5
5
  name: '@progress/kendo-react-editor',
6
6
  productName: 'KendoReact',
7
7
  productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
8
- publishDate: 1673259349,
8
+ publishDate: 1673300890,
9
9
  version: '',
10
10
  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'
11
11
  };
@@ -299,8 +299,8 @@ var Editor = /** @class */ (function (_super) {
299
299
  React.createElement(kendo_react_buttons_1.ButtonGroup, { key: index }, item.map(_this.renderTool, index)) :
300
300
  _this.renderTool(item, index);
301
301
  });
302
- return (React.createElement("div", { ref: function (e) { return _this._element = e; }, className: (0, kendo_react_common_1.classNames)('k-widget k-editor', className, { 'k-editor-resizable': this.props.resizable }), dir: this.props.dir, style: style },
303
- buttons.length > 0 && (React.createElement(kendo_react_buttons_1.Toolbar, { keyboardNavigation: this.props.keyboardNavigation }, buttons)),
302
+ return (React.createElement("div", { ref: function (e) { return _this._element = e; }, className: (0, kendo_react_common_1.classNames)('k-editor', className, { 'k-editor-resizable': this.props.resizable }), dir: this.props.dir, style: style },
303
+ buttons.length > 0 && (React.createElement(kendo_react_buttons_1.Toolbar, { className: 'k-editor-toolbar', keyboardNavigation: this.props.keyboardNavigation }, buttons)),
304
304
  defaultEditMode === 'iframe' ?
305
305
  (React.createElement("div", { className: "k-editor-content" },
306
306
  React.createElement("iframe", { onLoad: browser_detection_1.firefox ? function () {
@@ -37,8 +37,9 @@ var toolsSettings_1 = require("./../config/toolsSettings");
37
37
  var utils_1 = require("./../tools/utils");
38
38
  var kendo_editor_common_1 = require("@progress/kendo-editor-common");
39
39
  var kendo_react_common_1 = require("@progress/kendo-react-common");
40
+ var kendo_react_inputs_1 = require("@progress/kendo-react-inputs");
41
+ var kendo_react_form_1 = require("@progress/kendo-react-form");
40
42
  var enter = 13, esc = 27;
41
- var checkboxProps = { className: 'k-checkbox k-checkbox-md k-rounded-md', type: 'checkbox' };
42
43
  var settings = toolsSettings_1.EditorToolsSettings.findAndReplace;
43
44
  /**
44
45
  * @hidden
@@ -120,10 +121,10 @@ var FindAndReplaceDialog = /** @class */ (function (_super) {
120
121
  _this.onClose();
121
122
  }
122
123
  };
123
- _this.onMatchCaseChecked = function (e) { return _this.setNextState({ matchCase: e.target.checked }); };
124
- _this.onMatchWordChecked = function (e) { return _this.setNextState({ matchWord: e.target.checked }); };
125
- _this.onMatchCyclicChecked = function (e) { return _this.setNextState({ matchCyclic: e.target.checked }); };
126
- _this.onUseRegExpChecked = function (e) { return _this.setNextState({ useRegExp: e.target.checked }); };
124
+ _this.onMatchCaseChecked = function (e) { return _this.setNextState({ matchCase: e.value }); };
125
+ _this.onMatchWordChecked = function (e) { return _this.setNextState({ matchWord: e.value }); };
126
+ _this.onMatchCyclicChecked = function (e) { return _this.setNextState({ matchCyclic: e.value }); };
127
+ _this.onUseRegExpChecked = function (e) { return _this.setNextState({ useRegExp: e.value }); };
127
128
  _this.onSearchChange = function (e) { return _this.setNextState({ searchText: e.target.value }); };
128
129
  _this.onReplaceChange = function (e) { return _this.setNextState({ replaceText: e.target.value }); };
129
130
  _this.setNextState = function (next) {
@@ -193,21 +194,22 @@ var FindAndReplaceDialog = /** @class */ (function (_super) {
193
194
  * @hidden
194
195
  */
195
196
  FindAndReplaceDialog.prototype.render = function () {
197
+ var _this = this;
196
198
  var localization = (0, kendo_react_intl_1.provideLocalizationService)(this);
197
199
  var _a = this.settings.messages, findReplaceDialogTitle = _a.findReplaceDialogTitle, findReplaceTabFind = _a.findReplaceTabFind, findReplaceTabReplace = _a.findReplaceTabReplace, findReplaceFindWhat = _a.findReplaceFindWhat, findReplaceReplaceWith = _a.findReplaceReplaceWith, findReplaceReplace = _a.findReplaceReplace, findReplaceReplaceAll = _a.findReplaceReplaceAll, findReplaceMatchCase = _a.findReplaceMatchCase, findReplaceMatchWord = _a.findReplaceMatchWord, findReplaceMatchCyclic = _a.findReplaceMatchCyclic, findReplaceUseRegExp = _a.findReplaceUseRegExp, findReplacePrevMatch = _a.findReplacePrevMatch, findReplaceNextMatch = _a.findReplaceNextMatch, findReplaceMatches = _a.findReplaceMatches;
198
200
  var _b = this.state, matchCase = _b.matchCase, matchWord = _b.matchWord, matchCyclic = _b.matchCyclic, useRegExp = _b.useRegExp, searchText = _b.searchText, replaceText = _b.replaceText, nextMatch = _b.nextMatch;
199
201
  var checkboxes = (React.createElement("div", { className: "k-search-options" },
200
202
  React.createElement("span", null,
201
- React.createElement("input", __assign({}, checkboxProps, { id: "match-case", checked: matchCase, onChange: this.onMatchCaseChecked })),
203
+ React.createElement(kendo_react_inputs_1.Checkbox, { id: "match-case", checked: matchCase, onChange: this.onMatchCaseChecked }),
202
204
  React.createElement("label", { htmlFor: "match-case", className: "k-checkbox-label" }, localization.toLanguageString(findReplaceMatchCase, messages_1.messages[findReplaceMatchCase]))),
203
205
  React.createElement("span", null,
204
- React.createElement("input", __assign({}, checkboxProps, { id: "match-whole", checked: matchWord, onChange: this.onMatchWordChecked })),
206
+ React.createElement(kendo_react_inputs_1.Checkbox, { id: "match-whole", checked: matchWord, onChange: this.onMatchWordChecked }),
205
207
  React.createElement("label", { htmlFor: "match-whole", className: "k-checkbox-label" }, localization.toLanguageString(findReplaceMatchWord, messages_1.messages[findReplaceMatchWord]))),
206
208
  React.createElement("span", null,
207
- React.createElement("input", __assign({}, checkboxProps, { id: "match-cyclic", checked: matchCyclic, onChange: this.onMatchCyclicChecked })),
209
+ React.createElement(kendo_react_inputs_1.Checkbox, { id: "match-cyclic", checked: matchCyclic, onChange: this.onMatchCyclicChecked }),
208
210
  React.createElement("label", { htmlFor: "match-cyclic", className: "k-checkbox-label" }, localization.toLanguageString(findReplaceMatchCyclic, messages_1.messages[findReplaceMatchCyclic]))),
209
211
  React.createElement("span", null,
210
- React.createElement("input", __assign({}, checkboxProps, { id: "regular-expression", checked: useRegExp, onChange: this.onUseRegExpChecked })),
212
+ React.createElement(kendo_react_inputs_1.Checkbox, { id: "regular-expression", checked: useRegExp, onChange: this.onUseRegExpChecked }),
211
213
  React.createElement("label", { htmlFor: "regular-expression", className: "k-checkbox-label" }, localization.toLanguageString(findReplaceUseRegExp, messages_1.messages[findReplaceUseRegExp])))));
212
214
  var navigation = (React.createElement("div", { className: "k-matches-container" },
213
215
  React.createElement(kendo_react_buttons_1.Button, { fillMode: 'flat', themeColor: 'primary', onClick: this.onFindPrev },
@@ -217,26 +219,25 @@ var FindAndReplaceDialog = /** @class */ (function (_super) {
217
219
  React.createElement(kendo_react_buttons_1.Button, { fillMode: 'flat', themeColor: 'primary', onClick: this.onFindNext },
218
220
  localization.toLanguageString(findReplaceNextMatch, messages_1.messages[findReplaceNextMatch]),
219
221
  React.createElement(kendo_react_common_1.Icon, { name: "chevron-right" }))));
220
- var findWhat = (React.createElement(React.Fragment, null,
221
- React.createElement("div", { className: "k-edit-label" },
222
- React.createElement("label", { htmlFor: "findWhat" }, localization.toLanguageString(findReplaceFindWhat, messages_1.messages[findReplaceFindWhat]))),
223
- React.createElement("div", { className: "k-edit-field" },
224
- React.createElement("input", { id: "findWhat", type: "text", className: "k-input", value: searchText, onChange: this.onSearchChange, onFocus: this.onSearchChange, onKeyDown: this.onKeyDown, autoFocus: true }))));
225
- var replaceWith = (React.createElement(React.Fragment, null,
226
- React.createElement("div", { className: "k-edit-label" },
227
- React.createElement("label", { htmlFor: "replaceWith" }, localization.toLanguageString(findReplaceReplaceWith, messages_1.messages[findReplaceReplaceWith]))),
228
- React.createElement("div", { className: "k-edit-field" },
229
- React.createElement("input", { id: "replaceWith", className: "k-input", type: "text", value: replaceText, onChange: this.onReplaceChange }))));
222
+ var findWhat = (React.createElement(kendo_react_form_1.Form, { render: function () { return (React.createElement(kendo_react_form_1.FormElement, { horizontal: true },
223
+ React.createElement(kendo_react_form_1.FieldWrapper, null,
224
+ React.createElement("label", { htmlFor: "findWhat", className: 'k-form-label' }, localization.toLanguageString(findReplaceFindWhat, messages_1.messages[findReplaceFindWhat])),
225
+ React.createElement("div", { className: 'k-form-field-wrap' },
226
+ React.createElement(kendo_react_inputs_1.Input, { id: 'findWhat', type: "text", value: searchText, onChange: _this.onSearchChange, onFocus: _this.onSearchChange, onKeyDown: _this.onKeyDown, autoFocus: true }))))); } }));
227
+ var replaceWith = (React.createElement(kendo_react_form_1.Form, { render: function () { return (React.createElement(kendo_react_form_1.FormElement, { horizontal: true },
228
+ React.createElement(kendo_react_form_1.FieldWrapper, null,
229
+ React.createElement("label", { htmlFor: 'replaceWith', className: 'k-form-label' }, localization.toLanguageString(findReplaceReplaceWith, messages_1.messages[findReplaceReplaceWith])),
230
+ React.createElement("div", { className: 'k-form-field-wrap' },
231
+ React.createElement(kendo_react_inputs_1.Input, { id: 'replaceWith', type: "text", value: replaceText, onChange: _this.onReplaceChange }))))); } }));
230
232
  return (React.createElement(kendo_react_dialogs_1.Window, { title: localization.toLanguageString(findReplaceDialogTitle, messages_1.messages[findReplaceDialogTitle]), onClose: this.onClose, style: { width: 'auto', height: 'auto', userSelect: 'none' }, resizable: false, minimizeButton: function () { return null; }, maximizeButton: function () { return null; }, appendTo: document.body },
231
233
  React.createElement(kendo_react_layout_1.TabStrip, { selected: this.state.selectedTab, className: "k-editor-find-replace", onSelect: this.onTabSelect, animation: false },
232
234
  React.createElement(kendo_react_layout_1.TabStripTab, { title: localization.toLanguageString(findReplaceTabFind, messages_1.messages[findReplaceTabFind]) },
233
- React.createElement("div", { className: "k-edit-form-container" }, findWhat),
235
+ findWhat,
234
236
  checkboxes,
235
237
  navigation),
236
238
  React.createElement(kendo_react_layout_1.TabStripTab, { title: localization.toLanguageString(findReplaceTabReplace, messages_1.messages[findReplaceTabReplace]) },
237
- React.createElement("div", { className: "k-edit-form-container" },
238
- findWhat,
239
- replaceWith),
239
+ findWhat,
240
+ replaceWith,
240
241
  React.createElement("div", { className: "k-actions k-hstack k-justify-content-end" },
241
242
  React.createElement(kendo_react_buttons_1.Button, { disabled: !Boolean(nextMatch), onClick: this.onReplace }, localization.toLanguageString(findReplaceReplace, messages_1.messages[findReplaceReplace])),
242
243
  React.createElement(kendo_react_buttons_1.Button, { disabled: !Boolean(nextMatch), onClick: this.onReplaceAll }, localization.toLanguageString(findReplaceReplaceAll, messages_1.messages[findReplaceReplaceAll]))),
@@ -31,6 +31,8 @@ var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
31
31
  var kendo_editor_common_1 = require("@progress/kendo-editor-common");
32
32
  var kendo_react_intl_1 = require("@progress/kendo-react-intl");
33
33
  var messages_1 = require("./../messages");
34
+ var kendo_react_inputs_1 = require("@progress/kendo-react-inputs");
35
+ var kendo_react_form_1 = require("@progress/kendo-react-form");
34
36
  /**
35
37
  * @hidden
36
38
  */
@@ -87,31 +89,31 @@ var InsertImageDialog = /** @class */ (function (_super) {
87
89
  state.selection.node.type === state.schema.nodes[settings.node]) {
88
90
  attrs = state.selection.node.attrs;
89
91
  }
90
- var content = (React.createElement("div", { className: "k-edit-form-container" },
91
- React.createElement("div", { className: "k-edit-label" },
92
- React.createElement("label", { htmlFor: "k-editor-image-url" }, localization.toLanguageString(insertImageAddress, messages_1.messages[insertImageAddress]))),
93
- React.createElement("div", { className: "k-edit-field" },
94
- 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 })),
95
- React.createElement("div", { className: "k-edit-label" },
96
- React.createElement("label", { htmlFor: "k-editor-image-alt" }, localization.toLanguageString(insertImageAltText, messages_1.messages[insertImageAltText]))),
97
- React.createElement("div", { className: "k-edit-field" },
98
- React.createElement("input", { type: "text", className: "k-input", id: "k-editor-image-alt", defaultValue: attrs.alt, ref: function (e) { return _this.altText = e; } })),
99
- React.createElement("div", { className: "k-edit-label" },
100
- React.createElement("label", { htmlFor: "k-editor-image-title" }, localization.toLanguageString(insertImageTitle, messages_1.messages[insertImageTitle]))),
101
- React.createElement("div", { className: "k-edit-field" },
102
- React.createElement("input", { type: "text", className: "k-input", id: "k-editor-image-title", defaultValue: attrs.title, ref: function (e) { return _this.title = e; } })),
103
- React.createElement("div", { className: "k-edit-label" },
104
- React.createElement("label", { htmlFor: "k-editor-image-width" }, localization.toLanguageString(insertImageWidth, messages_1.messages[insertImageWidth]))),
105
- React.createElement("div", { className: "k-edit-field" },
106
- React.createElement("input", { type: "text", className: "k-input", id: "k-editor-image-width", defaultValue: attrs.width, ref: function (e) { return _this.width = e; } })),
107
- React.createElement("div", { className: "k-edit-label" },
108
- React.createElement("label", { htmlFor: "k-editor-image-height" }, localization.toLanguageString(insertImageHeight, messages_1.messages[insertImageHeight]))),
109
- React.createElement("div", { className: "k-edit-field" },
110
- React.createElement("input", { type: "text", className: "k-input", id: "k-editor-image-height", defaultValue: attrs.height, ref: function (e) { return _this.height = e; } }))));
92
+ var content = (React.createElement(kendo_react_form_1.Form, { render: function () { return (React.createElement(kendo_react_form_1.FormElement, { horizontal: true },
93
+ React.createElement(kendo_react_form_1.FieldWrapper, null,
94
+ React.createElement("label", { htmlFor: 'k-editor-image-url', className: 'k-form-label' }, localization.toLanguageString(insertImageAddress, messages_1.messages[insertImageAddress])),
95
+ React.createElement("div", { className: 'k-form-field-wrap' },
96
+ 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 }))),
97
+ React.createElement(kendo_react_form_1.FieldWrapper, null,
98
+ React.createElement("label", { htmlFor: 'k-editor-image-url', className: 'k-form-label' }, localization.toLanguageString(insertImageAltText, messages_1.messages[insertImageAltText])),
99
+ React.createElement("div", { className: 'k-form-field-wrap' },
100
+ React.createElement(kendo_react_inputs_1.Input, { type: 'text', id: "k-editor-image-alt", defaultValue: attrs.alt, ref: function (e) { return _this.altText = e; } }))),
101
+ React.createElement(kendo_react_form_1.FieldWrapper, null,
102
+ React.createElement("label", { htmlFor: 'k-editor-image-title', className: 'k-form-label' }, localization.toLanguageString(insertImageTitle, messages_1.messages[insertImageTitle])),
103
+ React.createElement("div", { className: 'k-form-field-wrap' },
104
+ React.createElement(kendo_react_inputs_1.Input, { type: 'text', id: "k-editor-image-title", defaultValue: attrs.title, ref: function (e) { return _this.title = e; } }))),
105
+ React.createElement(kendo_react_form_1.FieldWrapper, null,
106
+ React.createElement("label", { htmlFor: 'k-editor-image-width', className: 'k-form-label' }, localization.toLanguageString(insertImageWidth, messages_1.messages[insertImageWidth])),
107
+ React.createElement("div", { className: 'k-form-field-wrap' },
108
+ React.createElement(kendo_react_inputs_1.Input, { type: 'text', id: "k-editor-image-width", defaultValue: attrs.width, ref: function (e) { return _this.width = e; } }))),
109
+ React.createElement(kendo_react_form_1.FieldWrapper, null,
110
+ React.createElement("label", { htmlFor: 'k-editor-image-height', className: 'k-form-label' }, localization.toLanguageString(insertImageHeight, messages_1.messages[insertImageHeight])),
111
+ React.createElement("div", { className: 'k-form-field-wrap' },
112
+ React.createElement(kendo_react_inputs_1.Input, { id: "k-editor-image-height", defaultValue: attrs.height, ref: function (e) { return _this.height = e; } }))))); } }));
111
113
  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])))];
112
- 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 },
114
+ 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 },
113
115
  content,
114
- React.createElement.apply(React, __spreadArray([kendo_react_dialogs_1.DialogActionsBar, null], actionButtons, false))));
116
+ React.createElement.apply(React, __spreadArray([kendo_react_dialogs_1.WindowActionsBar, null], actionButtons, false))));
115
117
  return render ? render(dialog, { content: content, actionButtons: actionButtons }) : dialog;
116
118
  };
117
119
  return InsertImageDialog;
@@ -28,6 +28,8 @@ exports.InsertLinkDialog = void 0;
28
28
  var React = require("react");
29
29
  var kendo_react_dialogs_1 = require("@progress/kendo-react-dialogs");
30
30
  var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
31
+ var kendo_react_inputs_1 = require("@progress/kendo-react-inputs");
32
+ var kendo_react_form_1 = require("@progress/kendo-react-form");
31
33
  var kendo_editor_common_1 = require("@progress/kendo-editor-common");
32
34
  var kendo_react_intl_1 = require("@progress/kendo-react-intl");
33
35
  var messages_1 = require("./../messages");
@@ -65,27 +67,28 @@ var InsertLinkDialog = /** @class */ (function (_super) {
65
67
  var _this = this;
66
68
  var _a = this.props, view = _a.view, settings = _a.settings, dir = _a.dir, render = _a.render;
67
69
  var localization = (0, kendo_react_intl_1.provideLocalizationService)(this);
68
- var _b = settings.messages, insertHyperlinkDialogTitle = _b.insertHyperlinkDialogTitle, insertHyperlinkAddress = _b.insertHyperlinkAddress, insertHyperlinkTitle = _b.insertHyperlinkTitle, insertHyperlinkNewWindow = _b.insertHyperlinkNewWindow, insertHyperlinkCancel = _b.insertHyperlinkCancel, insertHyperlinkInsert = _b.insertHyperlinkInsert;
70
+ var _b = settings.messages, insertHyperlinkDialogTitle = _b.insertHyperlinkDialogTitle, insertHyperlinkAddress = _b.insertHyperlinkAddress, insertHyperlinkTitle = _b.insertHyperlinkTitle, insertHyperlinkNewDialog = _b.insertHyperlinkNewDialog, insertHyperlinkCancel = _b.insertHyperlinkCancel, insertHyperlinkInsert = _b.insertHyperlinkInsert;
69
71
  var linkMark = view ?
70
72
  (0, kendo_editor_common_1.getMark)(view.state, view.state.schema.marks[settings.mark])
71
73
  : false;
72
- var content = (React.createElement("div", { className: "k-edit-form-container" },
73
- React.createElement("div", { className: "k-edit-label" },
74
- React.createElement("label", { htmlFor: "k-editor-link-url" }, localization.toLanguageString(insertHyperlinkAddress, messages_1.messages[insertHyperlinkAddress]))),
75
- React.createElement("div", { className: "k-edit-field" },
76
- 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 })),
77
- React.createElement("div", { className: "k-edit-label k-editor-link-text-row" },
78
- React.createElement("label", { htmlFor: "k-editor-link-text" }, localization.toLanguageString(insertHyperlinkTitle, messages_1.messages[insertHyperlinkTitle]))),
79
- React.createElement("div", { className: "k-edit-field k-editor-link-text-row" },
80
- 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 })),
81
- settings.linkTarget !== false && React.createElement("div", { className: "k-edit-field" },
82
- 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 }),
83
- React.createElement("label", { htmlFor: "k-editor-link-target", className: "k-checkbox-label" }, localization.toLanguageString(insertHyperlinkNewWindow, messages_1.messages[insertHyperlinkNewWindow])))));
74
+ var content = (React.createElement(kendo_react_form_1.Form, { render: function () { return (React.createElement(kendo_react_form_1.FormElement, { horizontal: true },
75
+ React.createElement(kendo_react_form_1.FieldWrapper, null,
76
+ React.createElement("label", { htmlFor: 'k-editor-link-url', className: 'k-form-label' }, localization.toLanguageString(insertHyperlinkAddress, messages_1.messages[insertHyperlinkAddress])),
77
+ React.createElement("div", { className: 'k-form-field-wrap' },
78
+ 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 }))),
79
+ React.createElement(kendo_react_form_1.FieldWrapper, null,
80
+ React.createElement("label", { htmlFor: 'k-editor-link-text', className: 'k-form-label' }, localization.toLanguageString(insertHyperlinkTitle, messages_1.messages[insertHyperlinkTitle])),
81
+ React.createElement("div", { className: 'k-form-field-wrap' },
82
+ 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 }))),
83
+ settings.linkTarget !== false && React.createElement(kendo_react_form_1.FieldWrapper, null,
84
+ React.createElement("label", { htmlFor: 'k-editor-link-target', className: 'k-checkbox-label' },
85
+ React.createElement(kendo_react_inputs_1.Checkbox, { className: 'k-checkbox-wrap', id: 'k-editor-link-target', defaultChecked: (linkMark && !!linkMark.attrs.target) || undefined }),
86
+ localization.toLanguageString(insertHyperlinkNewDialog, messages_1.messages[insertHyperlinkNewDialog]))))); } }));
84
87
  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])))
85
88
  ];
86
- 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 },
89
+ 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 },
87
90
  content,
88
- React.createElement.apply(React, __spreadArray([kendo_react_dialogs_1.DialogActionsBar, null], actionButtons, false))));
91
+ React.createElement.apply(React, __spreadArray([kendo_react_dialogs_1.WindowActionsBar, null], actionButtons, false))));
89
92
  return render ? render(dialog, { content: content, actionButtons: actionButtons }) : dialog;
90
93
  };
91
94
  return InsertLinkDialog;