@progress/kendo-vue-editor 3.0.0-dev.202201141128 → 3.0.0-dev.202201180953

package/dist/es/Editor.js

@@ -267,12 +267,13 @@ var EditorVue2 = {
   },
   data: function data() {
     return {
+      updateGuid: guid(),
       view: undefined,
       linkDialog: false
     };
   },
   created: function created() {
-    this._view = undefined;
+    this.view = undefined;
     validatePackage(packageMetadata);
   },
   mounted: function mounted() {
@@ -290,7 +291,7 @@ var EditorVue2 = {
   },
   updated: function updated() {
     var value = this.$props.value;
-    var view = this._view;
+    var view = this.view;
 
     if (value === undefined || !view) {
       return;
@@ -309,8 +310,8 @@ var EditorVue2 = {
   },
   // @ts-ignore
   unmounted: function unmounted() {
-    if (this._view) {
-      this._view.destroy();
+    if (this.view) {
+      this.view.destroy();
     }
 
     this.view = undefined;
@@ -321,8 +322,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 || '';
@@ -340,6 +341,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,
@@ -381,14 +383,17 @@ var EditorVue2 = {
       });
     };
 
-    var renderTool = function renderTool(currentTool, index) {
+    var renderTool = function renderTool(currentTool, _index) {
       var ct = allTools[currentTool] || currentTool;
 
       if (allTools[currentTool]) {
+        toolindex++;
+
         var toolProps = __assign({
           view: view,
           dir: this.$props.dir,
-          key: guid(),
+          key: toolindex,
+          updateGuid: this.updateGuid,
           settings: allTools[currentTool].props
         }, allTools[currentTool].props);
 
@@ -398,7 +403,7 @@ var EditorVue2 = {
       } else if (ct === 'Separator') {
         return (// @ts-ignore
           h(ToolbarSeparator, {
-            key: index
+            key: toolindex
           })
         );
       } else {
@@ -411,7 +416,8 @@ var EditorVue2 = {
           additionalProps: {
             view: view,
             dir: this.$props.dir,
-            key: guid(),
+            updateGuid: this.updateGuid,
+            key: toolindex,
             settings: ct.props
           }
         });
@@ -477,7 +483,7 @@ var EditorVue2 = {
   },
   methods: {
     getView: function getView() {
-      return this.v3 ? this._view : this.view;
+      return this.view;
     },
     getHTML: function getHTML() {
       var view = this.getView();
@@ -496,16 +502,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 = guid();
       }
     },
     iframeLoad: function iframeLoad() {
@@ -584,7 +589,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;
@@ -632,10 +637,10 @@ var EditorVue2 = {
         dom: dom
       };
       this.$emit('loaded', mountEvent);
-      var view = this._view = this.$props.extendView && this.$props.extendView(mountEvent) || new EditorView({
+      var view = this.$props.extendView && this.$props.extendView(mountEvent) || new EditorView({
         mount: dom
       }, viewProps);
-      this.view = view;
+      this.view = this.v3 ? markRaw(view) : view;
     },
     filterTransaction: function filterTransaction(transaction, state) {
       var event = {
@@ -689,8 +694,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/es/dialogs/FindReplace.js

@@ -16,6 +16,10 @@ var settings = EditorToolsSettings.findAndReplace; // tslint:enable:max-line-len
 
 var FindAndReplaceDialogVue2 = {
   name: 'KendoFindAndReplaceDialog',
+  // @ts-ignore
+  emits: {
+    close: null
+  },
   props: {
     view: Object,
     settings: {
@@ -55,6 +59,13 @@ var FindAndReplaceDialogVue2 = {
 
     this.setNextState();
     this.hasMounted = true;
+    setTimeout(function () {
+      var findInput = document.getElementById('findWhatFind');
+
+      if (findInput) {
+        findInput.focus();
+      }
+    }, 10);
   },
 
   /**

package/dist/es/dialogs/insertImage.js

@@ -10,6 +10,10 @@ import { messages } from './../messages'; // tslint:enable:max-line-length
 
 var InsertImageDialogVue2 = {
   name: 'KendoInsertImageDialog',
+  // @ts-ignore
+  emits: {
+    close: null
+  },
   props: {
     view: Object,
     settings: Object,
@@ -26,6 +30,10 @@ var InsertImageDialogVue2 = {
     this.title = this.v3 ? this.titleRef : this.$refs.title;
     this.width = this.v3 ? this.widthRef : this.$refs.width;
     this.height = this.v3 ? this.heightRef : this.$refs.height;
+
+    if (this.src) {
+      this.src.focus();
+    }
   },
   // @ts-ignore
   setup: !gh ? undefined : function () {
@@ -79,8 +87,7 @@ var InsertImageDialogVue2 = {
       type: "text",
       attrs: this.v3 ? undefined : {
         type: "text",
-        id: "k-editor-image-url",
-        autoFocus: true
+        id: "k-editor-image-url"
       },
       "class": "k-input-inner",
       id: "k-editor-image-url",
@@ -90,8 +97,7 @@ var InsertImageDialogVue2 = {
       },
       ref: this.v3 ? function (el) {
         _this.srcRef = el;
-      } : 'src',
-      autoFocus: true
+      } : 'src'
     })])]), h("div", {
       "class": "k-edit-label"
     }, [h("label", {

package/dist/es/dialogs/insertLink.js

@@ -10,6 +10,10 @@ import { messages } from './../messages'; // tslint:enable:max-line-length
 
 var InsertLinkDialogVue2 = {
   name: 'KendoInsertLinkDialog',
+  // @ts-ignore
+  emits: {
+    close: null
+  },
   props: {
     view: Object,
     settings: Object,
@@ -31,6 +35,10 @@ var InsertLinkDialogVue2 = {
     this.href = this.v3 ? this.hrefRef : this.$refs.href;
     this.title = this.v3 ? this.titleRef : this.$refs.title;
     this.target = this.v3 ? this.targetRef : this.$refs.target;
+
+    if (this.href) {
+      this.href.focus();
+    }
   },
   // @ts-ignore
   render: function render(createElement) {
@@ -69,8 +77,7 @@ var InsertLinkDialogVue2 = {
       type: "text",
       attrs: this.v3 ? undefined : {
         type: "text",
-        id: "k-editor-link-url",
-        autoFocus: true
+        id: "k-editor-link-url"
       },
       "class": "k-input-inner",
       ref: this.v3 ? function (el) {
@@ -80,8 +87,7 @@ var InsertLinkDialogVue2 = {
       value: this.v3 ? linkMark && linkMark.attrs.href || undefined : null,
       domProps: this.v3 ? undefined : {
         "value": linkMark && linkMark.attrs.href || undefined
-      },
-      autoFocus: true
+      }
     })])]), h("div", {
       "class": "k-edit-label k-editor-link-text-row"
     }, [h("label", {

package/dist/es/dialogs/viewHtml.js

@@ -59,10 +59,6 @@ var ViewHtmlDialogVue2 = {
       value: this.v3 ? indentHtml(getHtml(view.state)) : null,
       domProps: this.v3 ? undefined : {
         "value": indentHtml(getHtml(view.state))
-      },
-      autoFocus: true,
-      attrs: this.v3 ? undefined : {
-        autoFocus: true
       }
     });
     var actionButtons = [// @ts-ignore function children

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-editor',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1642159085,
+    publishDate: 1642498893,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

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,8 +103,6 @@ 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), {
       value: value ? items.find(function (i) {
         return i.value === value;
@@ -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,8 +100,6 @@ 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), {
       value: value ? items.find(function (i) {
         return i.value === value;
@@ -110,7 +109,10 @@ var FormatBlockVue2 = {
       itemRender: this.customItemRender,
       textField: 'text',
       dataItemKey: 'value',
-      leftRightKeysNavigation: false
+      leftRightKeysNavigation: false,
+      popupSettings: {
+        width: '170px'
+      }
     }), settings.props);
 
     var dropdown = h(DropDownList, __assign({
@@ -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/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,
@@ -421,14 +423,17 @@ 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);
 
@@ -438,7 +443,7 @@ var EditorVue2 = {
       } else if (ct === 'Separator') {
         return (// @ts-ignore
           h(kendo_vue_buttons_1.ToolbarSeparator, {
-            key: index
+            key: toolindex
           })
         );
       } else {
@@ -451,7 +456,8 @@ var EditorVue2 = {
           additionalProps: {
             view: view,
             dir: this.$props.dir,
-            key: kendo_vue_common_1.guid(),
+            updateGuid: this.updateGuid,
+            key: toolindex,
             settings: ct.props
           }
         });
@@ -517,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();
@@ -536,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() {
@@ -624,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;
@@ -672,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 = {
@@ -729,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/dialogs/FindReplace.js

@@ -32,6 +32,10 @@ var settings = toolsSettings_1.EditorToolsSettings.findAndReplace; // tslint:ena
 
 var FindAndReplaceDialogVue2 = {
   name: 'KendoFindAndReplaceDialog',
+  // @ts-ignore
+  emits: {
+    close: null
+  },
   props: {
     view: Object,
     settings: {
@@ -71,6 +75,13 @@ var FindAndReplaceDialogVue2 = {
 
     this.setNextState();
     this.hasMounted = true;
+    setTimeout(function () {
+      var findInput = document.getElementById('findWhatFind');
+
+      if (findInput) {
+        findInput.focus();
+      }
+    }, 10);
   },
 
   /**

package/dist/npm/dialogs/insertImage.js

@@ -23,6 +23,10 @@ var messages_1 = require("./../messages"); // tslint:enable:max-line-length
 
 var InsertImageDialogVue2 = {
   name: 'KendoInsertImageDialog',
+  // @ts-ignore
+  emits: {
+    close: null
+  },
   props: {
     view: Object,
     settings: Object,
@@ -39,6 +43,10 @@ var InsertImageDialogVue2 = {
     this.title = this.v3 ? this.titleRef : this.$refs.title;
     this.width = this.v3 ? this.widthRef : this.$refs.width;
     this.height = this.v3 ? this.heightRef : this.$refs.height;
+
+    if (this.src) {
+      this.src.focus();
+    }
   },
   // @ts-ignore
   setup: !gh ? undefined : function () {
@@ -92,8 +100,7 @@ var InsertImageDialogVue2 = {
       type: "text",
       attrs: this.v3 ? undefined : {
         type: "text",
-        id: "k-editor-image-url",
-        autoFocus: true
+        id: "k-editor-image-url"
       },
       "class": "k-input-inner",
       id: "k-editor-image-url",
@@ -103,8 +110,7 @@ var InsertImageDialogVue2 = {
       },
       ref: this.v3 ? function (el) {
         _this.srcRef = el;
-      } : 'src',
-      autoFocus: true
+      } : 'src'
     })])]), h("div", {
       "class": "k-edit-label"
     }, [h("label", {

package/dist/npm/dialogs/insertLink.js

@@ -23,6 +23,10 @@ var messages_1 = require("./../messages"); // tslint:enable:max-line-length
 
 var InsertLinkDialogVue2 = {
   name: 'KendoInsertLinkDialog',
+  // @ts-ignore
+  emits: {
+    close: null
+  },
   props: {
     view: Object,
     settings: Object,
@@ -44,6 +48,10 @@ var InsertLinkDialogVue2 = {
     this.href = this.v3 ? this.hrefRef : this.$refs.href;
     this.title = this.v3 ? this.titleRef : this.$refs.title;
     this.target = this.v3 ? this.targetRef : this.$refs.target;
+
+    if (this.href) {
+      this.href.focus();
+    }
   },
   // @ts-ignore
   render: function render(createElement) {
@@ -82,8 +90,7 @@ var InsertLinkDialogVue2 = {
       type: "text",
       attrs: this.v3 ? undefined : {
         type: "text",
-        id: "k-editor-link-url",
-        autoFocus: true
+        id: "k-editor-link-url"
       },
       "class": "k-input-inner",
       ref: this.v3 ? function (el) {
@@ -93,8 +100,7 @@ var InsertLinkDialogVue2 = {
       value: this.v3 ? linkMark && linkMark.attrs.href || undefined : null,
       domProps: this.v3 ? undefined : {
         "value": linkMark && linkMark.attrs.href || undefined
-      },
-      autoFocus: true
+      }
     })])]), h("div", {
       "class": "k-edit-label k-editor-link-text-row"
     }, [h("label", {

package/dist/npm/dialogs/viewHtml.js

@@ -73,10 +73,6 @@ var ViewHtmlDialogVue2 = {
       value: this.v3 ? kendo_editor_common_1.indentHtml(kendo_editor_common_1.getHtml(view.state)) : null,
       domProps: this.v3 ? undefined : {
         "value": kendo_editor_common_1.indentHtml(kendo_editor_common_1.getHtml(view.state))
-      },
-      autoFocus: true,
-      attrs: this.v3 ? undefined : {
-        autoFocus: true
       }
     });
     var actionButtons = [// @ts-ignore function children

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-vue-editor',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1642159085,
+    publishDate: 1642498893,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/npm/tools/fontStyle.js

@@ -102,12 +102,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 ? kendo_editor_common_1.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 = kendo_vue_intl_1.provideLocalizationService(this);
 
     if (defaultItem && defaultItem.localizationKey) {
@@ -115,8 +116,6 @@ var FontNameVue2 = {
       defaultItem.text = defaultItem.localizationKey ? localization.toLanguageString(defaultItem.localizationKey, messages_1.messages[defaultItem.localizationKey]) : defaultItem.text;
     }
 
-    var value = new Set(styles).size === 1 ? styles[0] : null;
-
     var ddlProps = __assign(__assign(__assign({}, other), {
       value: value ? items.find(function (i) {
         return i.value === value;
@@ -152,13 +151,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) {
         kendo_editor_common_1.applyInlineStyle({
           style: style,
           value: item.value