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

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");
 
@@ -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 {
@@ -383,10 +388,10 @@ var Editor = {
         _d = _a.preserveWhitespace,
         preserveWhitespace = _d === void 0 ? 'full' : _d,
         style = _a.style;
-    var view = this.v3 ? this._view : this.view;
+    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;
     }
 
@@ -430,8 +435,14 @@ var Editor = {
         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: index
+          })
+        );
       } 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,
@@ -440,11 +451,11 @@ var Editor = {
           additionalProps: {
             view: view,
             dir: this.$props.dir,
-            key: index
+            key: kendo_vue_common_1.guid(),
+            settings: ct.props
           }
         });
-      } // return tool.type === ToolbarSeparator ? <Tool key={index} /> : tool;
-
+      }
     };
 
     var renderTools = function renderTools(item, index) {
@@ -501,14 +512,29 @@ 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();
@@ -618,8 +644,7 @@ var Editor = {
       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
@@ -646,7 +671,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;
@@ -661,13 +687,13 @@ var Editor = {
       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') {
@@ -730,7 +756,7 @@ var Editor = {
       return false;
     },
     onPaste: function onPaste(_view, nativeEvent) {
-      if (this.$props.onPasteHtml) {
+      if (this.$props.pasteHtml) {
         this.pasteEvent = nativeEvent;
       }
 
@@ -741,6 +767,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.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

@@ -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;
@@ -8,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;
@@ -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 };