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

package/dist/npm/Editor.js

@@ -33,7 +33,7 @@ var __spreadArrays = undefined && undefined.__spreadArrays || function () {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EditorVue3 = exports.Editor = exports.allTools = void 0; // @ts-ignore
+exports.EditorVue2 = exports.Editor = exports.allTools = void 0; // @ts-ignore
 
 var Vue = require("vue");
 
@@ -70,15 +70,15 @@ var browser_detection_1 = require("./utils/browser-detection");
 
 var package_metadata_1 = require("./package-metadata");
 
-var Align_1 = require("./tools/Align");
+var align_1 = require("./tools/align");
 
-var Indent_1 = require("./tools/Indent");
+var indent_1 = require("./tools/indent");
 
 var lists_1 = require("./tools/lists");
 
-var Outdent_1 = require("./tools/Outdent");
+var outdent_1 = require("./tools/outdent");
 
-var InlineFormat_1 = require("./tools/InlineFormat");
+var inlineFormat_1 = require("./tools/inlineFormat");
 
 var fontStyle_1 = require("./tools/fontStyle");
 
@@ -94,7 +94,7 @@ var cleanFormatting_1 = require("./tools/cleanFormatting");
 
 var selectAll_1 = require("./tools/selectAll");
 
-var InsertImage_1 = require("./tools/InsertImage");
+var insertImage_1 = require("./tools/insertImage");
 
 var tool_1 = require("./tools/insertTable/tool");
 
@@ -110,51 +110,51 @@ var applyColor_1 = require("./tools/applyColor");
 
 exports.allTools = {
   'Bold': {
-    comp: InlineFormat_1.InlineFormat,
+    comp: inlineFormat_1.InlineFormat,
     props: toolsSettings_1.EditorToolsSettings.bold
   },
   'Italic': {
-    comp: InlineFormat_1.InlineFormat,
+    comp: inlineFormat_1.InlineFormat,
     props: toolsSettings_1.EditorToolsSettings.italic
   },
   'Underline': {
-    comp: InlineFormat_1.InlineFormat,
+    comp: inlineFormat_1.InlineFormat,
     props: toolsSettings_1.EditorToolsSettings.underline
   },
   'Strikethrough': {
-    comp: InlineFormat_1.InlineFormat,
+    comp: inlineFormat_1.InlineFormat,
     props: toolsSettings_1.EditorToolsSettings.strikethrough
   },
   'Subscript': {
-    comp: InlineFormat_1.InlineFormat,
+    comp: inlineFormat_1.InlineFormat,
     props: toolsSettings_1.EditorToolsSettings.subscript
   },
   'Superscript': {
-    comp: InlineFormat_1.InlineFormat,
+    comp: inlineFormat_1.InlineFormat,
     props: toolsSettings_1.EditorToolsSettings.superscript
   },
   'AlignLeft': {
-    comp: Align_1.Align,
+    comp: align_1.Align,
     props: toolsSettings_1.EditorToolsSettings.alignLeft
   },
   'AlignCenter': {
-    comp: Align_1.Align,
+    comp: align_1.Align,
     props: toolsSettings_1.EditorToolsSettings.alignCenter
   },
   'AlignRight': {
-    comp: Align_1.Align,
+    comp: align_1.Align,
     props: toolsSettings_1.EditorToolsSettings.alignRight
   },
   'AlignJustify': {
-    comp: Align_1.Align,
+    comp: align_1.Align,
     props: toolsSettings_1.EditorToolsSettings.alignJustify
   },
   'Indent': {
-    comp: Indent_1.Indent,
+    comp: indent_1.Indent,
     props: toolsSettings_1.EditorToolsSettings.indent
   },
   'Outdent': {
-    comp: Outdent_1.Outdent,
+    comp: outdent_1.Outdent,
     props: toolsSettings_1.EditorToolsSettings.outdent
   },
   'OrderedList': {
@@ -194,7 +194,7 @@ exports.allTools = {
     props: toolsSettings_1.EditorToolsSettings.unlink
   },
   'InsertImage': {
-    comp: InsertImage_1.InsertImage,
+    comp: insertImage_1.InsertImage,
     props: toolsSettings_1.EditorToolsSettings.image
   },
   'ViewHtml': {
@@ -275,7 +275,7 @@ exports.allTools = {
   }
 }; // tslint:enable:max-line-length
 
-var Editor = {
+var EditorVue2 = {
   name: 'KendoEditor',
   props: {
     defaultContent: String,
@@ -290,7 +290,10 @@ var Editor = {
     contentStyle: Object,
     dir: String,
     tools: Array,
-    keyboardNavigation: Boolean,
+    keyboardNavigation: {
+      type: Boolean,
+      default: true
+    },
     resizable: Boolean,
     preserveWhitespace: {
       type: [String, Boolean],
@@ -298,7 +301,9 @@ var Editor = {
       validator: function validator(value) {
         return [true, false, 'full'].includes(value);
       }
-    }
+    },
+    pasteHtml: Function,
+    extendView: Function
   },
   data: function data() {
     return {
@@ -307,6 +312,7 @@ var Editor = {
     };
   },
   created: function created() {
+    this._view = undefined;
     kendo_vue_common_1.validatePackage(package_metadata_1.packageMetadata);
   },
   mounted: function mounted() {
@@ -324,7 +330,7 @@ var Editor = {
   },
   updated: function updated() {
     var value = this.$props.value;
-    var view = this.view;
+    var view = this._view;
 
     if (value === undefined || !view) {
       return;
@@ -343,8 +349,8 @@ var Editor = {
   },
   // @ts-ignore
   unmounted: function unmounted() {
-    if (this.view) {
-      this.view.destroy();
+    if (this._view) {
+      this._view.destroy();
     }
 
     this.view = undefined;
@@ -355,8 +361,8 @@ var Editor = {
         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 || '';
@@ -382,9 +388,10 @@ var Editor = {
         _d = _a.preserveWhitespace,
         preserveWhitespace = _d === void 0 ? 'full' : _d,
         style = _a.style;
+    var view = this.getView();
 
-    if (this.view) {
-      var editorProps = props_key_1.editorPropsKey.getState(this.view.state);
+    if (view) {
+      var editorProps = props_key_1.editorPropsKey.getState(view.state);
       editorProps.preserveWhitespace = preserveWhitespace;
     }
 
@@ -399,9 +406,9 @@ var Editor = {
     var renderDialog = function renderDialog() {
       return this.linkDialog && // @ts-ignore function children
       h(insertLink_1.InsertLinkDialog, {
-        view: this.view,
+        view: view,
         attrs: this.v3 ? undefined : {
-          view: this.view,
+          view: view,
           settings: link,
           dir: this.$props.dir
         },
@@ -419,7 +426,7 @@ var Editor = {
 
       if (exports.allTools[currentTool]) {
         var toolProps = __assign({
-          view: this.view,
+          view: view,
           dir: this.$props.dir,
           key: kendo_vue_common_1.guid(),
           settings: exports.allTools[currentTool].props
@@ -436,7 +443,7 @@ var Editor = {
           defaultRendering: null,
           additionalListeners: {},
           additionalProps: {
-            view: this.view,
+            view: view,
             dir: this.$props.dir,
             key: index
           }
@@ -499,21 +506,41 @@ var Editor = {
     }, [h("div", {
       ref: this.v3 ? function (el) {
         _this.contentElementRef = el;
-      } : 'contentElement',
-      suppressContentEditableWarning: true,
-      attrs: this.v3 ? undefined : {
-        suppressContentEditableWarning: true
-      }
+      } : 'contentElement'
     })]), renderDialog.call(this)]);
   },
   methods: {
+    getView: function getView() {
+      return this.v3 ? this._view : this.view;
+    },
+    getHTML: function getHTML() {
+      var view = this.getView();
+
+      if (view) {
+        return utils_1.EditorUtils.getHtml(view.state);
+      }
+
+      return '';
+    },
+    setHTML: function setHTML(value) {
+      var view = this.getView();
+
+      if (view) {
+        utils_1.EditorUtils.setHtml(view, value);
+      }
+    },
     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();
+      }
     },
     iframeLoad: function iframeLoad() {
       if (browser_detection_1.firefox) {
@@ -591,7 +618,7 @@ var Editor = {
       })), {
         'Mod-k': function ModK() {
           var linkDialog = _this.$data.linkDialog;
-          var editorView = _this.view;
+          var editorView = _this._view;
 
           if (editorView) {
             var editorState = editorView.state;
@@ -639,7 +666,8 @@ var Editor = {
         viewProps: viewProps,
         dom: dom
       };
-      var view = this.view = onMount && onMount.call(undefined, mountEvent) || new kendo_editor_common_1.EditorView({
+      this.$emit('loaded', mountEvent);
+      var view = this._view = this.$props.extendView && this.$props.extendView(mountEvent) || new kendo_editor_common_1.EditorView({
         mount: dom
       }, viewProps);
       this.view = view;
@@ -650,16 +678,17 @@ var Editor = {
         transaction: transaction,
         state: state
       };
-      return this.$emit('execute', event);
+      this.$emit('execute', event);
+      return true;
     },
     onPasteHtml: function onPasteHtml(html) {
-      if (this.$props.onPasteHtml && this.pasteEvent) {
+      if (this.$props.pasteHtml && this.pasteEvent) {
         var event_1 = {
           target: this,
           pastedHtml: html,
-          nativeEvent: this.pasteEvent
+          event: this.pasteEvent
         };
-        var newHtml = this.$props.onPasteHtml.call(undefined, event_1);
+        var newHtml = this.$props.pasteHtml(event_1);
         this.pasteEvent = undefined;
 
         if (typeof newHtml === 'string') {
@@ -695,8 +724,8 @@ var Editor = {
         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) {
@@ -722,7 +751,7 @@ var Editor = {
       return false;
     },
     onPaste: function onPaste(_view, nativeEvent) {
-      if (this.$props.onPasteHtml) {
+      if (this.$props.pasteHtml) {
         this.pasteEvent = nativeEvent;
       }
 
@@ -733,6 +762,6 @@ var Editor = {
     }
   }
 };
-exports.Editor = Editor;
-var EditorVue3 = Editor;
-exports.EditorVue3 = EditorVue3;
+exports.EditorVue2 = EditorVue2;
+var Editor = EditorVue2;
+exports.Editor = Editor;

package/dist/npm/EditorProps.d.ts

@@ -66,7 +66,7 @@ export interface EditorPasteEvent extends EditorEvent {
     /**
      * The native paste event.
      */
-    nativeEvent: ClipboardEvent;
+    event: ClipboardEvent;
 }
 /**
  * Represents the object of the `onExecute` Editor event.
@@ -127,17 +127,23 @@ export interface EditorProps {
      * Sets the tools of the Editor. By default, the Editor renders no tools.
      */
     tools?: Array<any>;
+    /**
+     * A funciton that fires each time the Editor is about to insert pasted content.
+     * Useful for modifying pasted content.
+     */
+    pasteHtml?: (event: EditorPasteEvent) => string | void;
     /**
      * Fires each time the Editor is about to mount.
      * Useful for configuring the `EditorView` object.
      * To initialize `EditorView`, use the properties of the `event` object.
      */
-    onMount?: (event: EditorMountEvent) => EditorView | void;
+    extendView?: (event: EditorMountEvent) => EditorView | void;
     /**
-     * Fires each time the Editor is about to insert pasted content.
-     * Useful for modifying pasted content.
+     * Fires each time the Editor is about to mount.
+     * Useful for configuring the `EditorView` object.
+     * To initialize `EditorView`, use the properties of the `event` object.
      */
-    onPastehtml?: (event: EditorPasteEvent) => string | void;
+    onLoaded?: (event: EditorMountEvent) => EditorView | void;
     /**
      * Fires each time the Editor is about to apply a transaction.
      * To prevent the transaction, return `false`.

package/dist/npm/additionalTypes.ts

@@ -1,3 +1,9 @@
 // @ts-ignore
 import { DefineComponent } from 'vue';
-export { DefineComponent };
+// @ts-ignore
+import * as Vue from 'vue';
+// @ts-ignore
+type Vue2type = Vue.default;
+// @ts-ignore
+import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+export { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type };

package/dist/npm/config/toolsSettings.js

@@ -130,7 +130,7 @@ var EditorToolsSettings;
      * The object of the AddColumnBefore tool settings.
      */
     EditorToolsSettings.addColumnBefore = {
-        command: kendo_editor_common_1.addRowBefore,
+        command: kendo_editor_common_1.addColumnBefore,
         props: __assign({ icon: 'table-column-insert-left' }, buttonCommonProps),
         messages: {
             title: messages_1.keys.addColumnBefore

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

@@ -1,5 +1,4 @@
-import { DefineComponent } from '../additionalTypes';
-import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
 declare type DefaultData<V> = object | ((this: V) => {});
 declare type DefaultMethods<V> = {
     [key: string]: (this: V, ...args: any[]) => any;
@@ -58,8 +57,8 @@ export interface FindAndReplaceDialogState {
 /**
  * @hidden
  */
-export interface FindAndReplaceDialogAll extends Vue, FindAndReplaceDialogMethods, FindAndReplaceDialogData, FindAndReplaceDialogComputed, FindAndReplaceDialogState {
+export interface FindAndReplaceDialogAll extends Vue2type, FindAndReplaceDialogMethods, FindAndReplaceDialogData, FindAndReplaceDialogComputed, FindAndReplaceDialogState {
 }
-declare let FindAndReplaceDialog: ComponentOptions<FindAndReplaceDialogAll, DefaultData<FindAndReplaceDialogData>, DefaultMethods<FindAndReplaceDialogAll>, FindAndReplaceDialogComputed, RecordPropsDefinition<FindAndReplaceDialogProps>>;
-declare const FindAndReplaceDialogVue3: DefineComponent<FindAndReplaceDialogProps, any, FindAndReplaceDialogData, FindAndReplaceDialogComputed, FindAndReplaceDialogMethods, {}, {}, {}, string, FindAndReplaceDialogProps, FindAndReplaceDialogProps, {}>;
-export { FindAndReplaceDialog, FindAndReplaceDialogVue3 };
+declare let FindAndReplaceDialogVue2: ComponentOptions<FindAndReplaceDialogAll, DefaultData<FindAndReplaceDialogData>, DefaultMethods<FindAndReplaceDialogAll>, FindAndReplaceDialogComputed, RecordPropsDefinition<FindAndReplaceDialogProps>>;
+declare const FindAndReplaceDialog: DefineComponent<FindAndReplaceDialogProps, any, FindAndReplaceDialogData, FindAndReplaceDialogComputed, FindAndReplaceDialogMethods, {}, {}, {}, string, FindAndReplaceDialogProps, FindAndReplaceDialogProps, {}>;
+export { FindAndReplaceDialog, FindAndReplaceDialogVue2 };