@progress/kendo-vue-editor 2.8.0-dev.202201121019 → 3.0.0-dev.202201170830

package/dist/es/tools/applyColor.js

@@ -29,7 +29,8 @@ var ApplyColorVue2 = {
     view: Object,
     color: String,
     colorPickerProps: Object,
-    commandName: String
+    commandName: String,
+    dir: String
   },
   inject: {
     kendoLocalizationService: {
@@ -46,11 +47,14 @@ var ApplyColorVue2 = {
   // @ts-ignore
   render: function render(createElement) {
     var h = gh || createElement;
-    var colorPickerProps = this.$props.colorPickerProps;
+    var _a = this.$props,
+        colorPickerProps = _a.colorPickerProps,
+        dir = _a.dir;
     var titleKey = colorPickerProps.title;
     var localization = provideLocalizationService(this);
 
     var cpProps = __assign(__assign({}, colorPickerProps), {
+      dir: dir,
       title: titleKey ? localization.toLanguageString(titleKey, messages[titleKey]) : titleKey
     });
 

package/dist/es/tools/cleanFormatting.js

@@ -75,10 +75,10 @@ var CleanFormattingVue2 = {
     var titleKey = settings.messages.title;
     var localization = provideLocalizationService(this);
 
-    var buttonProps = __assign(__assign(__assign({}, other), settings.props), {
+    var buttonProps = __assign(__assign(__assign({}, other), {
       disabled: !view || !command(view.state),
       title: localization.toLanguageString(titleKey, messages[titleKey])
-    });
+    }), settings.props);
 
     var button = h(kbutton, __assign({
       onClick: this.handleClick,

package/dist/es/tools/findReplace.js

@@ -71,11 +71,11 @@ var FindAndReplaceVue2 = {
     var localization = provideLocalizationService(this);
     var titleKey = settings.messages.findReplaceToolTitle;
 
-    var buttonProps = __assign(__assign(__assign({}, other), settings.props), {
+    var buttonProps = __assign(__assign(__assign({}, other), {
       key: 'tool',
       disabled: !view,
       title: localization.toLanguageString(titleKey, messages[titleKey])
-    });
+    }), settings.props);
 
     var button = h(kbutton, __assign({
       onClick: this.onOpen,
@@ -93,13 +93,13 @@ var FindAndReplaceVue2 = {
       view: view,
       attrs: this.v3 ? undefined : {
         view: view,
-        dir: buttonProps.dir
+        dir: this.$props.dir
       },
       onClose: this.onClose,
       on: this.v3 ? undefined : {
         "close": this.onClose
       },
-      dir: buttonProps.dir,
+      dir: this.$props.dir,
       key: "dialog"
     })]);
   },

package/dist/es/tools/fontStyle.js

@@ -89,12 +89,13 @@ var FontNameVue2 = {
         other = __rest(_a, ["view", "render", "dataItems", "settings", "defaultItem"]);
 
     var style = settings.style;
-    var items = dataItems || settings.items;
-    var defaultItem = defaultItemProps || settings.defaultItem;
     var styles = view ? getInlineStyles(view.state, {
       name: style,
       value: /^.+$/
     }) : [];
+    var value = new Set(styles).size === 1 ? styles[0] : null;
+    var items = dataItems || settings.items;
+    var defaultItem = defaultItemProps || settings.defaultItem;
     var localization = provideLocalizationService(this);
 
     if (defaultItem && defaultItem.localizationKey) {
@@ -102,9 +103,7 @@ var FontNameVue2 = {
       defaultItem.text = defaultItem.localizationKey ? localization.toLanguageString(defaultItem.localizationKey, messages[defaultItem.localizationKey]) : defaultItem.text;
     }
 
-    var value = new Set(styles).size === 1 ? styles[0] : null;
-
-    var ddlProps = __assign(__assign(__assign({}, other), settings.props), {
+    var ddlProps = __assign(__assign(__assign({}, other), {
       value: value ? items.find(function (i) {
         return i.value === value;
       }) : value,
@@ -114,7 +113,7 @@ var FontNameVue2 = {
       textField: 'text',
       dataItemKey: 'value',
       leftRightKeysNavigation: false
-    });
+    }), settings.props);
 
     var dropdown = h(DropDownList, __assign({
       onChange: this.onChange,
@@ -139,13 +138,13 @@ var FontNameVue2 = {
       }, __spreadArrays(li.children))]) : li;
     },
     onChange: function onChange(e) {
-      var item = e.target.value;
       var _a = this.$props,
           view = _a.view,
           settings = _a.settings;
       var style = settings.style;
+      var item = e.target.value;
 
-      if (view && item) {
+      if (view) {
         applyInlineStyle({
           style: style,
           value: item.value

package/dist/es/tools/formatBlock.js

@@ -89,9 +89,10 @@ var FormatBlockVue2 = {
         other = __rest(_a, ["view", "render", "dataItems", "settings", "defaultItem"]);
 
     var items = dataItems || settings.items;
-    var defaultItem = defaultItemProps || settings.defaultItem;
     var state = view && view.state;
     var formats = state ? getBlockFormats(state) : [];
+    var value = new Set(formats).size === 1 ? formats[0] : null;
+    var defaultItem = defaultItemProps || settings.defaultItem;
     var localization = provideLocalizationService(this);
 
     if (defaultItem && defaultItem.localizationKey) {
@@ -99,9 +100,7 @@ var FormatBlockVue2 = {
       defaultItem.text = defaultItem.localizationKey ? localization.toLanguageString(defaultItem.localizationKey, messages[defaultItem.localizationKey]) : defaultItem.text;
     }
 
-    var value = new Set(formats).size === 1 ? formats[0] : null;
-
-    var ddlProps = __assign(__assign(__assign({}, other), settings.props), {
+    var ddlProps = __assign(__assign(__assign({}, other), {
       value: value ? items.find(function (i) {
         return i.value === value;
       }) : value,
@@ -110,8 +109,11 @@ var FormatBlockVue2 = {
       itemRender: this.customItemRender,
       textField: 'text',
       dataItemKey: 'value',
-      leftRightKeysNavigation: false
-    });
+      leftRightKeysNavigation: false,
+      popupSettings: {
+        width: '170px'
+      }
+    }), settings.props);
 
     var dropdown = h(DropDownList, __assign({
       onChange: this.onChange,
@@ -136,10 +138,10 @@ var FormatBlockVue2 = {
       }, __spreadArrays(li.children))]) : li;
     },
     onChange: function onChange(e) {
-      var item = e.target.value;
       var _a = this.$props,
           view = _a.view,
           settings = _a.settings;
+      var item = e.target.value;
 
       if (view && formatBlockElements(item.value, settings.commandName)(view.state, view.dispatch)) {
         var event_1 = e.event;

package/dist/es/tools/indent.js

@@ -83,10 +83,10 @@ var IndentVue2 = {
     var localization = provideLocalizationService(this);
     var titleKey = settings.messages.title;
 
-    var buttonProps = __assign(__assign(__assign({}, other), settings.props), {
+    var buttonProps = __assign(__assign(__assign({}, other), {
       disabled: !canIndent,
       title: localization.toLanguageString(titleKey, messages[titleKey])
-    });
+    }), settings.props);
 
     var button = h(kbutton, __assign({
       onClick: this.handleClick,

package/dist/es/tools/inlineFormat.js

@@ -83,11 +83,11 @@ var InlineFormatVue2 = {
     var localization = provideLocalizationService(this);
     var titleKey = settings.messages.title;
 
-    var buttonProps = __assign(__assign(__assign({}, other), settings.props), {
+    var buttonProps = __assign(__assign(__assign({}, other), {
       selected: !!state && hasMark(state, options),
       togglable: true,
       title: localization.toLanguageString(titleKey, messages[titleKey])
-    });
+    }), settings.props);
 
     var button = h(kbutton, __assign({
       onClick: this.handleClick,

package/dist/es/tools/insertImage.js

@@ -82,11 +82,11 @@ var InsertImageVue2 = {
     var localization = provideLocalizationService(this);
     var insertImage = settings.messages.insertImage;
 
-    var buttonProps = __assign(__assign(__assign({}, other), settings.props), {
+    var buttonProps = __assign(__assign(__assign({}, other), {
       key: 'insertImage',
       disabled: !nodeType || !state || !canInsert(state, nodeType),
       title: localization.toLanguageString(insertImage, messages[insertImage])
-    });
+    }), settings.props);
 
     var button = h(kbutton, __assign({
       onClick: this.toggleDialog,

package/dist/es/tools/insertLink.js

@@ -82,11 +82,11 @@ var LinkToolVue2 = {
     var localization = provideLocalizationService(this);
     var insertHyperlink = settings.messages.insertHyperlink;
 
-    var buttonProps = __assign(__assign(__assign({}, other), settings.props), {
+    var buttonProps = __assign(__assign(__assign({}, other), {
       key: 'link',
       disabled: collapsed && !linkMark,
       title: localization.toLanguageString(insertHyperlink, messages[insertHyperlink])
-    });
+    }), settings.props);
 
     var button = h(kbutton, __assign({
       onClick: this.toggleDialog,

package/dist/es/tools/insertTable/tool.js

@@ -89,11 +89,11 @@ var InsertTableVue2 = {
     var createTableMsg = localization.toLanguageString(createTableMsgKey, messages[createTableMsgKey]);
     var createTableHintMsg = localization.toLanguageString(createTableHint, messages[createTableHint]);
 
-    var buttonProps = __assign(__assign(__assign({}, other), settings.props), {
+    var buttonProps = __assign(__assign(__assign({}, other), {
       disabled: !state || !canInsert(state, state.schema.nodes.table),
       key: 'InsertTable',
       title: createTableMsg
-    });
+    }), settings.props);
 
     var button = h(KButton, __assign({
       ref: this.buttonRef,

package/dist/es/tools/lists.js

@@ -90,11 +90,11 @@ var ListVue2 = {
       }
     }
 
-    var buttonProps = __assign(__assign(__assign({}, other), settings.props), {
+    var buttonProps = __assign(__assign(__assign({}, other), {
       selected: isActive,
       togglable: true,
       title: localization.toLanguageString(titleKey, messages[titleKey])
-    });
+    }), settings.props);
 
     var button = h(kbutton, __assign({
       onClick: this.handleClick,

package/dist/es/tools/outdent.js

@@ -82,10 +82,10 @@ var OutdentVue2 = {
     var localization = provideLocalizationService(this);
     var titleKey = settings.messages.title;
 
-    var buttonProps = __assign(__assign(__assign({}, other), settings.props), {
+    var buttonProps = __assign(__assign(__assign({}, other), {
       disabled: !canOutdent,
       title: localization.toLanguageString(titleKey, messages[titleKey])
-    });
+    }), settings.props);
 
     var button = h(kbutton, __assign({
       onClick: this.handleClick,

package/dist/es/tools/pdf.js

@@ -73,9 +73,9 @@ var PdfVue2 = {
     var titleKey = settings.messages.title;
     var localization = provideLocalizationService(this);
 
-    var buttonProps = __assign(__assign(__assign({}, other), settings.props), {
+    var buttonProps = __assign(__assign(__assign({}, other), {
       title: localization.toLanguageString(titleKey, messages[titleKey])
-    });
+    }), settings.props);
 
     var button = h(kbutton, __assign({
       onClick: this.handleClick,

package/dist/es/tools/print.js

@@ -72,10 +72,10 @@ var PrintVue2 = {
     var titleKey = settings.messages.title;
     var localization = provideLocalizationService(this);
 
-    var buttonProps = __assign(__assign(__assign({}, other), settings.props), {
+    var buttonProps = __assign(__assign(__assign({}, other), {
       disabled: !editorWindow || editorWindow === window,
       title: localization.toLanguageString(titleKey, messages[titleKey])
-    });
+    }), settings.props);
 
     var button = h(kbutton, __assign({
       onClick: this.handleClick,

package/dist/es/tools/proseMirrorTool.js

@@ -80,10 +80,10 @@ var ProseMirrorVue2 = {
     var state = view && view.state;
     var disabled = state ? !this.command(state) : false;
 
-    var buttonProps = __assign(__assign(__assign({}, other), settings.props), {
+    var buttonProps = __assign(__assign(__assign({}, other), {
       disabled: disabled,
       title: localization.toLanguageString(titleKey, messages[titleKey])
-    });
+    }), settings.props);
 
     var button = h(kbutton, __assign({
       onClick: this.handleClick,

package/dist/es/tools/selectAll.js

@@ -69,9 +69,9 @@ var SelectAllVue2 = {
     var titleKey = settings.messages.title;
     var localization = provideLocalizationService(this);
 
-    var buttonProps = __assign(__assign(__assign({}, other), settings.props), {
+    var buttonProps = __assign(__assign(__assign({}, other), {
       title: localization.toLanguageString(titleKey, messages[titleKey])
-    });
+    }), settings.props);
 
     var button = h(kbutton, __assign({
       onClick: this.handleClick,

package/dist/es/tools/unlink.js

@@ -77,10 +77,10 @@ var UnlinkVue2 = {
     var localization = provideLocalizationService(this);
     var titleKey = settings.messages.title;
 
-    var buttonProps = __assign(__assign(__assign({}, other), settings.props), {
+    var buttonProps = __assign(__assign(__assign({}, other), {
       disabled: !hasLink,
       title: localization.toLanguageString(titleKey, messages[titleKey])
-    });
+    }), settings.props);
 
     var button = h(kbutton, __assign({
       onClick: this.handleClick,

package/dist/es/tools/viewHtml.js

@@ -78,10 +78,10 @@ var ViewHtmlVue2 = {
     var localization = provideLocalizationService(this);
     var titleKey = settings.messages.viewHtml;
 
-    var buttonProps = __assign(__assign(__assign({}, other), settings.props), {
+    var buttonProps = __assign(__assign(__assign({}, other), {
       key: 'viewHtml',
       title: localization.toLanguageString(titleKey, messages[titleKey])
-    });
+    }), settings.props);
 
     var button = h(kbutton, __assign({
       onClick: this.toggleDialog,

package/dist/npm/Editor.js

@@ -307,12 +307,13 @@ var EditorVue2 = {
   },
   data: function data() {
     return {
+      updateGuid: kendo_vue_common_1.guid(),
       view: undefined,
       linkDialog: false
     };
   },
   created: function created() {
-    this._view = undefined;
+    this.view = undefined;
     kendo_vue_common_1.validatePackage(package_metadata_1.packageMetadata);
   },
   mounted: function mounted() {
@@ -330,7 +331,7 @@ var EditorVue2 = {
   },
   updated: function updated() {
     var value = this.$props.value;
-    var view = this._view;
+    var view = this.view;
 
     if (value === undefined || !view) {
       return;
@@ -349,8 +350,8 @@ var EditorVue2 = {
   },
   // @ts-ignore
   unmounted: function unmounted() {
-    if (this._view) {
-      this._view.destroy();
+    if (this.view) {
+      this.view.destroy();
     }
 
     this.view = undefined;
@@ -361,8 +362,8 @@ var EditorVue2 = {
         return this.trOnChange.doc;
       } else if (this.$props.value !== undefined) {
         return this.$props.value;
-      } else if (this._view) {
-        return this._view.state.doc;
+      } else if (this.view) {
+        return this.view.state.doc;
       }
 
       return this.$props.defaultContent || '';
@@ -380,6 +381,7 @@ var EditorVue2 = {
     var _this = this;
 
     var h = gh || createElement;
+    var toolindex = 100;
     var _a = this.$props,
         _b = _a.tools,
         tools = _b === void 0 ? [] : _b,
@@ -390,8 +392,8 @@ var EditorVue2 = {
         style = _a.style;
     var view = this.getView();
 
-    if (view) {
-      var editorProps = props_key_1.editorPropsKey.getState(view.state);
+    if (this.view) {
+      var editorProps = props_key_1.editorPropsKey.getState(this.view.state);
       editorProps.preserveWhitespace = preserveWhitespace;
     }
 
@@ -421,22 +423,31 @@ var EditorVue2 = {
       });
     };
 
-    var renderTool = function renderTool(currentTool, index) {
+    var renderTool = function renderTool(currentTool, _index) {
       var ct = exports.allTools[currentTool] || currentTool;
 
       if (exports.allTools[currentTool]) {
+        toolindex++;
+
         var toolProps = __assign({
           view: view,
           dir: this.$props.dir,
-          key: kendo_vue_common_1.guid(),
+          key: toolindex,
+          updateGuid: this.updateGuid,
           settings: exports.allTools[currentTool].props
         }, exports.allTools[currentTool].props);
 
         return h(this.v3 ? markRaw(exports.allTools[currentTool].comp) : exports.allTools[currentTool].comp, this.v3 ? toolProps : {
           props: toolProps
         });
+      } else if (ct === 'Separator') {
+        return (// @ts-ignore
+          h(kendo_vue_buttons_1.ToolbarSeparator, {
+            key: toolindex
+          })
+        );
       } else {
-        var tool = kendo_vue_common_1.templateRendering.call(this, ct, kendo_vue_common_1.getListeners.call(this));
+        var tool = kendo_vue_common_1.templateRendering.call(this, ct.render, kendo_vue_common_1.getListeners.call(this));
         return kendo_vue_common_1.getTemplate.call(this, {
           h: h,
           template: tool,
@@ -445,11 +456,12 @@ var EditorVue2 = {
           additionalProps: {
             view: view,
             dir: this.$props.dir,
-            key: index
+            updateGuid: this.updateGuid,
+            key: toolindex,
+            settings: ct.props
           }
         });
-      } // return tool.type === ToolbarSeparator ? <Tool key={index} /> : tool;
-
+      }
     };
 
     var renderTools = function renderTools(item, index) {
@@ -511,7 +523,7 @@ var EditorVue2 = {
   },
   methods: {
     getView: function getView() {
-      return this.v3 ? this._view : this.view;
+      return this.view;
     },
     getHTML: function getHTML() {
       var view = this.getView();
@@ -530,16 +542,15 @@ var EditorVue2 = {
       }
     },
     focus: function focus() {
-      if (this._view) {
-        this._view.focus();
+      if (this.view) {
+        this.view.focus();
       }
     },
     updateTools: function updateTools(view) {
       this.view = view;
 
       if (this.v3) {
-        this._view = view;
-        this.$forceUpdate();
+        this.updateGuid = kendo_vue_common_1.guid();
       }
     },
     iframeLoad: function iframeLoad() {
@@ -618,7 +629,7 @@ var EditorVue2 = {
       })), {
         'Mod-k': function ModK() {
           var linkDialog = _this.$data.linkDialog;
-          var editorView = _this._view;
+          var editorView = _this.view;
 
           if (editorView) {
             var editorState = editorView.state;
@@ -638,8 +649,7 @@ var EditorVue2 = {
       var _b = this.$props,
           _c = _b.defaultContent,
           defaultContent = _c === void 0 ? '' : _c,
-          value = _b.value,
-          onMount = _b.onMount;
+          value = _b.value;
       var doc = value && typeof value !== 'string' ? value : utils_1.EditorUtils.createDocument(new kendo_editor_common_1.Schema({
         nodes: schema_1.nodes,
         marks: schema_1.marks
@@ -667,10 +677,10 @@ var EditorVue2 = {
         dom: dom
       };
       this.$emit('loaded', mountEvent);
-      var view = this._view = this.$props.extendView && this.$props.extendView(mountEvent) || new kendo_editor_common_1.EditorView({
+      var view = this.$props.extendView && this.$props.extendView(mountEvent) || new kendo_editor_common_1.EditorView({
         mount: dom
       }, viewProps);
-      this.view = view;
+      this.view = this.v3 ? markRaw(view) : view;
     },
     filterTransaction: function filterTransaction(transaction, state) {
       var event = {
@@ -724,8 +734,8 @@ var EditorVue2 = {
         this.$emit('change', event_2);
       }
 
-      if (this._view && (this.$props.value === undefined || !docChanged)) {
-        this._view.updateState(this._view.state.apply(transaction));
+      if (this.view && (this.$props.value === undefined || !docChanged)) {
+        this.view.updateState(this.view.state.apply(transaction));
       }
     },
     onFocus: function onFocus(_view, nativeEvent) {

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

@@ -154,6 +154,10 @@ export declare namespace EditorToolsSettings {
          * The name of the applied command.
          */
         commandName: string;
+        /**
+         * The dir of the applied command.
+         */
+        dir?: String;
     }
     /**
      * The setting of the IndentAction tool.

package/dist/npm/dialogs/FindReplace.d.ts

@@ -7,7 +7,7 @@ import { EditorToolsSettings } from './../config/toolsSettings';
 import { TextSelection, EditorView } from '@progress/kendo-editor-common';
 interface FindAndReplaceDialogData {
     selectedTab: number;
-    matches?: TextSelection<any>[];
+    matches: TextSelection<any>[];
     nextMatch?: TextSelection<any>;
     searchText: string;
     replaceText: string;