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

package/dist/es/Editor.js

@@ -33,7 +33,7 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var markRaw = allVue.markRaw;
-import { ButtonGroup, Toolbar } from '@progress/kendo-vue-buttons';
+import { ButtonGroup, Toolbar, ToolbarSeparator } from '@progress/kendo-vue-buttons';
 import { classNames, validatePackage, getTemplate, getListeners, templateRendering, guid } from '@progress/kendo-vue-common';
 import { EditorState, Plugin, PluginKey, EditorView, Schema, baseKeymap, keymap, history, dropCursor, gapCursor, getMark, spacesFix, tableEditing } from '@progress/kendo-editor-common';
 import { marks, nodes } from './config/schema';
@@ -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,
@@ -350,8 +352,8 @@ var EditorVue2 = {
         style = _a.style;
     var view = this.getView();
 
-    if (view) {
-      var editorProps = editorPropsKey.getState(view.state);
+    if (this.view) {
+      var editorProps = editorPropsKey.getState(this.view.state);
       editorProps.preserveWhitespace = preserveWhitespace;
     }
 
@@ -381,22 +383,31 @@ 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);
 
         return h(this.v3 ? markRaw(allTools[currentTool].comp) : allTools[currentTool].comp, this.v3 ? toolProps : {
           props: toolProps
         });
+      } else if (ct === 'Separator') {
+        return (// @ts-ignore
+          h(ToolbarSeparator, {
+            key: toolindex
+          })
+        );
       } else {
-        var tool = templateRendering.call(this, ct, getListeners.call(this));
+        var tool = templateRendering.call(this, ct.render, getListeners.call(this));
         return getTemplate.call(this, {
           h: h,
           template: tool,
@@ -405,11 +416,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) {
@@ -471,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();
@@ -490,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() {
@@ -578,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;
@@ -598,8 +609,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 : EditorUtils.createDocument(new Schema({
         nodes: nodes,
         marks: marks
@@ -627,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 = {
@@ -684,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/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/es/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;