@progress/kendo-react-editor 4.10.0-dev.202109290558 → 4.10.0-dev.202110050931

package/dist/es/Editor.d.ts

@@ -1,137 +1,8 @@
 /// <reference types="prosemirror-model" />
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { EditorState, Plugin, Transaction, EditorView, Schema, Node } from '@progress/kendo-editor-common';
-import { EditorUtils } from './utils';
-/**
- * Represents the object of the `onChange` Editor event.
- */
-export interface EditorChangeEvent {
-    /**
-     * An event target.
-     */
-    target: Editor;
-    /**
-     * Represents the [Editor document](https://prosemirror.net/docs/guide/#doc).
-     */
-    value: Node;
-    /**
-     * A getter of the Editor HTML content.
-     * Once called, it will convert the Editor document into HTML string.
-     * Note that, since onChange event is triggered on every key while typing,
-     * this conversion may not be suitable if the Editor is dealing with large amount of content.
-     */
-    html: string;
-    /**
-     * The Editor Schema object.
-     */
-    schema: Schema;
-    /**
-     * The Transaction which causes the change.
-     */
-    transaction: Transaction;
-}
-/**
- * Represents the props of the [KendoReact Editor component]({% slug overview_editor %}).
- */
-export interface EditorProps {
-    /**
-     * Sets the default HTML content of the Editor.
-     */
-    defaultContent?: string;
-    /**
-     * Sets the initial edit mode of the Editor. Defaults to `iframe`.
-     */
-    defaultEditMode?: 'iframe' | 'div';
-    /**
-     * Sets styles to the content element wrapper of the Editor.
-     */
-    contentStyle?: React.CSSProperties;
-    /**
-     * Represents the `dir` HTML attribute.
-     */
-    dir?: string;
-    /**
-     * Sets additional classes to the Editor.
-     */
-    className?: string;
-    /**
-     * Sets styles to the Editor.
-     */
-    style?: React.CSSProperties;
-    /**
-     * Sets the tools of the Editor. By default, the Editor renders no tools.
-     */
-    tools?: Array<any>;
-    /**
-     * 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: {
-        target: Editor;
-        dom: HTMLDivElement;
-        plugins: Array<Plugin>;
-        shortcuts: EditorUtils.Shortcuts;
-        viewProps: {
-            state: EditorState;
-            [key: string]: any;
-        };
-    }) => EditorView | void;
-    /**
-     * Fires each time the Editor is about to insert pasted content.
-     * Useful for modifying pasted content.
-     */
-    onPasteHtml?: (event: {
-        target: Editor;
-        pastedHtml: string;
-        nativeEvent: ClipboardEvent;
-    }) => string | void;
-    /**
-     * Fires each time the Editor is about to apply a transaction.
-     * To prevent the transaction, return `false`.
-     */
-    onExecute?: (event: {
-        target: Editor;
-        transaction: Transaction;
-        state: EditorState;
-    }) => boolean | void;
-    /**
-     * Fires when the Editor's content element has received focus.
-     */
-    onFocus?: (event: {
-        target: Editor;
-        nativeEvent: any;
-    }) => void;
-    /**
-     * Fires when the Editor's content element has lost focus.
-     */
-    onBlur?: (event: {
-        target: Editor;
-        nativeEvent: any;
-    }) => void;
-    /**
-     * Fires each time the value of the Editor is about to change.
-     */
-    onChange?: (event: EditorChangeEvent) => void;
-    /**
-     * The value of the Editor.
-     */
-    value?: Node | string;
-    /**
-     * If set to `false`, it will turn off the built-in keyboard navigation of the Editor's Toolbar.
-     */
-    keyboardNavigation?: boolean;
-    /**
-     * Defines the options that will be used for parsing the HTML.
-     * If `false` is set, the whitespace is collapsed as per HTML's rules.
-     * Pass `true` to preserve whitespace, but normalize newlines to spaces.
-     * `full` will preserve whitespace entirely.
-     *
-     * Defaults to `full`.
-     */
-    preserveWhitespace?: boolean | 'full';
-}
+import { EditorView, Node } from '@progress/kendo-editor-common';
+import { EditorProps } from './EditorProps';
 /**
  * @hidden
  */
@@ -202,6 +73,7 @@ export default class Editor extends React.Component<EditorProps, EditorStateInte
      */
     readonly view: EditorView<any>;
     private _element;
+    private _view?;
     private _contentElement;
     private iframe;
     private trOnChange;
@@ -232,6 +104,7 @@ export default class Editor extends React.Component<EditorProps, EditorStateInte
     private renderTool;
     private updateTools;
     private initialize;
+    private filterTransaction;
     private onPasteHtml;
     private dispatchTransaction;
     private onFocus;

package/dist/es/Editor.js

@@ -25,7 +25,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { ButtonGroup, Toolbar, ToolbarSeparator } from '@progress/kendo-react-buttons';
-import { EditorState, Plugin, PluginKey, EditorView, Schema, baseKeymap, keymap, history, dropCursor, gapCursor, getMark, spacesFix, tableEditing, trimWhitespace } from '@progress/kendo-editor-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';
 import { defaultStyle, tablesStyles, rtlStyles } from './config/defaultStyles';
 import { EditorToolsSettings } from './config/toolsSettings';
@@ -74,30 +74,36 @@ var Editor = /** @class */ (function (_super) {
          * @hidden
          */
         _this.focus = function () {
-            if (_this.state.view) {
-                _this.state.view.focus();
+            if (_this.view) {
+                _this.view.focus();
             }
         };
         _this.renderDialog = function (Component, settings, stateFlag) {
-            return _this.state[stateFlag] && (React.createElement(Component, { view: _this.state.view, settings: settings, dir: _this.props.dir, onClose: function () {
+            return _this.state[stateFlag] && (React.createElement(Component, { view: _this.view, settings: settings, dir: _this.props.dir, onClose: function () {
                     var _a;
                     return _this.setState((_a = {}, _a[stateFlag] = false, _a));
                 } }));
         };
         _this.renderTool = function (Tool, index) {
-            var tool = (React.createElement(Tool, { view: _this.state.view, dir: _this.props.dir, key: index }));
+            var tool = (React.createElement(Tool, { view: _this.view, dir: _this.props.dir, key: index }));
             return tool.type === ToolbarSeparator ? React.createElement(Tool, { key: index }) : tool;
         };
         _this.updateTools = function (view, _prevViewState) {
             _this.setState({ view: view });
         };
+        _this.filterTransaction = function (transaction, state) {
+            var event = { target: _this, transaction: transaction, state: state };
+            return (_this.props.onExecute &&
+                _this.props.onExecute.call(undefined, event)) !== false;
+        };
         _this.onPasteHtml = function (html) {
-            if (_this.props.onPasteHtml) {
-                var newHtml = _this.props.onPasteHtml.call(undefined, {
+            if (_this.props.onPasteHtml && _this.pasteEvent) {
+                var event_1 = {
                     target: _this,
                     pastedHtml: html,
                     nativeEvent: _this.pasteEvent
-                });
+                };
+                var newHtml = _this.props.onPasteHtml.call(undefined, event_1);
                 _this.pasteEvent = undefined;
                 if (typeof newHtml === 'string') {
                     return newHtml;
@@ -111,7 +117,7 @@ var Editor = /** @class */ (function (_super) {
                 _this.trOnChange = transaction;
                 var doc_1 = transaction.doc, schema_1 = transaction.doc.type.schema;
                 var target_1 = _this;
-                _this.props.onChange.call(undefined, {
+                var event_2 = {
                     target: target_1,
                     value: doc_1,
                     get html() {
@@ -120,7 +126,8 @@ var Editor = /** @class */ (function (_super) {
                     },
                     transaction: transaction,
                     schema: schema_1
-                });
+                };
+                _this.props.onChange.call(undefined, event_2);
             }
             if (_this.view && (_this.props.value === undefined || !docChanged)) {
                 _this.view.updateState(_this.view.state.apply(transaction));
@@ -128,13 +135,21 @@ var Editor = /** @class */ (function (_super) {
         };
         _this.onFocus = function (_view, nativeEvent) {
             if (_this.props.onFocus) {
-                _this.props.onFocus.call(undefined, { target: _this, nativeEvent: nativeEvent });
+                var event_3 = {
+                    target: _this,
+                    nativeEvent: nativeEvent
+                };
+                _this.props.onFocus.call(undefined, event_3);
             }
             return false;
         };
         _this.onBlur = function (_view, nativeEvent) {
             if (_this.props.onBlur) {
-                _this.props.onBlur.call(undefined, { target: _this, nativeEvent: nativeEvent });
+                var event_4 = {
+                    target: _this,
+                    nativeEvent: nativeEvent
+                };
+                _this.props.onBlur.call(undefined, event_4);
             }
             return false;
         };
@@ -199,7 +214,7 @@ var Editor = /** @class */ (function (_super) {
          * Returns the `view` object of the Editor.
          */
         get: function () {
-            return this.state.view;
+            return this._view;
         },
         enumerable: true,
         configurable: true
@@ -229,9 +244,10 @@ var Editor = /** @class */ (function (_super) {
      * @hidden
      */
     Editor.prototype.componentWillUnmount = function () {
-        if (this.state.view) {
-            this.state.view.destroy();
+        if (this.view) {
+            this.view.destroy();
         }
+        this._view = undefined;
     };
     /**
      * @hidden
@@ -296,10 +312,7 @@ var Editor = /** @class */ (function (_super) {
                 key: new PluginKey('toolbar-tools-update-plugin')
             }),
             new Plugin({
-                filterTransaction: function (transaction, state) {
-                    return (_this.props.onExecute &&
-                        _this.props.onExecute.call(undefined, { target: target, transaction: transaction, state: state })) !== false;
-                },
+                filterTransaction: this.filterTransaction,
                 key: new PluginKey('onExecute-event-plugin')
             }),
             new Plugin({
@@ -319,7 +332,8 @@ var Editor = /** @class */ (function (_super) {
             types: { listItem: 'list_item', hardBreak: 'hard_break' },
             toolsSettings: { bold: bold, italic: italic, underline: underline }
         }), { 'Mod-k': function () {
-                var _a = _this.state, linkDialog = _a.linkDialog, editorView = _a.view;
+                var linkDialog = _this.state.linkDialog;
+                var editorView = _this.view;
                 if (editorView) {
                     var editorState = editorView.state;
                     var collapsed = editorState.selection.empty;
@@ -333,7 +347,7 @@ var Editor = /** @class */ (function (_super) {
             } });
         var _b = this.props, _c = _b.defaultContent, defaultContent = _c === void 0 ? '' : _c, value = _b.value, onMount = _b.onMount;
         var doc = (value && typeof value !== 'string') ? value :
-            EditorUtils.createDocument(new Schema({ nodes: nodes, marks: marks }), trimWhitespace(value || defaultContent), { preserveWhitespace: preserveWhitespace });
+            EditorUtils.createDocument(new Schema({ nodes: nodes, marks: marks }), value || defaultContent, { preserveWhitespace: preserveWhitespace });
         var viewProps = {
             state: EditorState.create({
                 plugins: plugins.concat([keymap(shortcuts), keymap(baseKeymap)]),
@@ -347,8 +361,8 @@ var Editor = /** @class */ (function (_super) {
                 paste: this.onPaste
             }
         };
-        var view = (onMount && onMount.call(undefined, { plugins: plugins, shortcuts: shortcuts, target: target, viewProps: viewProps, dom: dom })) ||
-            new EditorView({ mount: dom }, viewProps);
+        var mountEvent = { plugins: plugins, shortcuts: shortcuts, target: target, viewProps: viewProps, dom: dom };
+        var view = this._view = (onMount && onMount.call(undefined, mountEvent)) || new EditorView({ mount: dom }, viewProps);
         this.setState({
             view: view
         });

package/dist/es/EditorProps.d.ts

@@ -0,0 +1,182 @@
+/// <reference types="prosemirror-model" />
+/// <reference types="react" />
+import { EditorState, Plugin, Transaction, EditorView, Schema, Node } from '@progress/kendo-editor-common';
+import { EditorUtils } from './utils';
+import Editor from './Editor';
+interface EditorEvent {
+    /**
+     * An event target.
+     */
+    target: Editor;
+}
+/**
+ * Represents the object of the `onChange` Editor event.
+ */
+export interface EditorChangeEvent extends EditorEvent {
+    /**
+     * Represents the [Editor document](https://prosemirror.net/docs/guide/#doc).
+     */
+    value: Node;
+    /**
+     * A getter of the Editor HTML content.
+     * Once called, it will convert the Editor document into HTML string.
+     * Note that, since onChange event is triggered on every key while typing,
+     * this conversion may not be suitable if the Editor is dealing with large amount of content.
+     */
+    html: string;
+    /**
+     * The Editor Schema object.
+     */
+    schema: Schema;
+    /**
+     * The Transaction which causes the change.
+     */
+    transaction: Transaction;
+}
+/**
+ * Represents the object of the `onMount` Editor event.
+ */
+export interface EditorMountEvent extends EditorEvent {
+    /**
+     * The content-editable DOM element of the Editor.
+     */
+    dom: HTMLDivElement;
+    /**
+     * The default plugins collection of the Editor.
+     */
+    plugins: Array<Plugin>;
+    /**
+     * The default key bindings of the Editor.
+     */
+    shortcuts: EditorUtils.Shortcuts;
+    /**
+     * The default [viewProps](https://prosemirror.net/docs/ref/#view.DirectEditorProps) object of the Editor.
+     */
+    viewProps: {
+        state: EditorState;
+        [key: string]: any;
+    };
+}
+/**
+ * Represents the object of the `onPaste` Editor event.
+ */
+export interface EditorPasteEvent extends EditorEvent {
+    /**
+     * The HTML that will be pasted in the Editor.
+     */
+    pastedHtml: string;
+    /**
+     * The native paste event.
+     */
+    nativeEvent: ClipboardEvent;
+}
+/**
+ * Represents the object of the `onExecute` Editor event.
+ */
+export interface EditorExecuteEvent extends EditorEvent {
+    /**
+     * The transaction that will be executed.
+     */
+    transaction: Transaction;
+    /**
+     * The state of the Editor.
+     */
+    state: EditorState;
+}
+/**
+ * Represents the object of the `onFocus` Editor event.
+ */
+export interface EditorFocusEvent extends EditorEvent {
+    /**
+     * The native focus event.
+     */
+    nativeEvent: FocusEvent;
+}
+/**
+ * Represents the object of the `onBlur` Editor event.
+ */
+export interface EditorBlurEvent extends EditorEvent {
+    /**
+     * The native blur event.
+     */
+    nativeEvent: FocusEvent;
+}
+/**
+ * Represents the props of the [KendoReact Editor component]({% slug overview_editor %}).
+ */
+export interface EditorProps {
+    /**
+     * Sets the default HTML content of the Editor.
+     */
+    defaultContent?: string;
+    /**
+     * Sets the initial edit mode of the Editor. Defaults to `iframe`.
+     */
+    defaultEditMode?: 'iframe' | 'div';
+    /**
+     * Sets styles to the content element wrapper of the Editor.
+     */
+    contentStyle?: React.CSSProperties;
+    /**
+     * Represents the `dir` HTML attribute.
+     */
+    dir?: string;
+    /**
+     * Sets additional classes to the Editor.
+     */
+    className?: string;
+    /**
+     * Sets styles to the Editor.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets the tools of the Editor. By default, the Editor renders no tools.
+     */
+    tools?: Array<any>;
+    /**
+     * 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;
+    /**
+     * Fires each time the Editor is about to insert pasted content.
+     * Useful for modifying pasted content.
+     */
+    onPasteHtml?: (event: EditorPasteEvent) => string | void;
+    /**
+     * Fires each time the Editor is about to apply a transaction.
+     * To prevent the transaction, return `false`.
+     */
+    onExecute?: (event: EditorExecuteEvent) => boolean | void;
+    /**
+     * Fires when the Editor's content element has received focus.
+     */
+    onFocus?: (event: EditorFocusEvent) => void;
+    /**
+     * Fires when the Editor's content element has lost focus.
+     */
+    onBlur?: (event: EditorBlurEvent) => void;
+    /**
+     * Fires each time the value of the Editor is about to change.
+     */
+    onChange?: (event: EditorChangeEvent) => void;
+    /**
+     * The value of the Editor.
+     */
+    value?: Node | string;
+    /**
+     * If set to `false`, it will turn off the built-in keyboard navigation of the Editor's Toolbar.
+     */
+    keyboardNavigation?: boolean;
+    /**
+     * Defines the options that will be used for parsing the HTML.
+     * If `false` is set, the whitespace is collapsed as per HTML's rules.
+     * Pass `true` to preserve whitespace, but normalize newlines to spaces.
+     * `full` will preserve whitespace entirely.
+     *
+     * Defaults to `full`.
+     */
+    preserveWhitespace?: boolean | 'full';
+}
+export {};

package/dist/es/main.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="prosemirror-model" />
-import Editor, { EditorProps } from './Editor';
+import Editor from './Editor';
+import { EditorProps, EditorMountEvent, EditorPasteEvent, EditorChangeEvent, EditorExecuteEvent, EditorFocusEvent, EditorBlurEvent } from './EditorProps';
 import { EditorTools } from './tools/main';
 import { EditorToolsSettings } from './config/toolsSettings';
 import { EditorUtils } from './utils';
 import { EditorDialogs } from './dialogs/main';
 import { Selection, SelectionRange, TextSelection, NodeSelection, AllSelection, EditorState, Plugin, PluginKey, Transaction, Decoration, DecorationSet, EditorView, Node, ResolvedPos, NodeRange, Fragment, Slice, ReplaceError, Mark, Schema, NodeType, MarkType, ContentMatch, DOMParser, DOMSerializer, Transform, Step, StepResult, joinPoint, canJoin, canSplit, insertPoint, dropPoint, liftTarget, findWrapping, StepMap, MapResult, Mapping, AddMarkStep, RemoveMarkStep, ReplaceStep, ReplaceAroundStep, replaceStep, deleteSelection, joinBackward, selectNodeBackward, joinForward, selectNodeForward, joinUp, joinDown, lift, newlineInCode, exitCode, createParagraphNear, liftEmptyBlock, splitBlock, splitBlockKeepMarks, selectParentNode, selectAll, wrapIn, setBlockType, toggleMark, autoJoin, chainCommands, history, undo, redo, undoDepth, redoDepth, InputRule, inputRules, undoInputRule, wrappingInputRule, textblockTypeInputRule, keymap, keydownHandler, addListNodes, wrapInList, splitListItem, liftListItem, sinkListItem, dropCursor, gapCursor, tableEditing, fixTables, cellAround, isInTable, selectionCell, moveCellForward, inSameTable, findCell, colCount, nextCell, removeColSpan, addColSpan, columnIsHeader, tableNodes, tableNodeTypes, CellSelection, TableMap, columnResizing, updateColumnsOnResize, selectedRect, addColumn, addColumnBefore, addColumnAfter, deleteColumn, rowIsHeader, addRow, addRowBefore, addRowAfter, deleteRow, mergeCells, splitCell, splitCellWithType, setCellAttr, toggleHeader, toggleHeaderRow, toggleHeaderColumn, toggleHeaderCell, goToNextCell, deleteTable } from '@progress/kendo-editor-common';
 export { PasteCleanupSettings } from './config/pasteSettings';
-export { EditorChangeEvent } from './Editor';
 /**
  * An object containing the content of ProseMirror packages used at the Editor component.
  *
@@ -163,4 +163,4 @@ export declare const ProseMirror: {
     goToNextCell: typeof goToNextCell;
     deleteTable: typeof deleteTable;
 };
-export { Editor, EditorProps, EditorTools, EditorToolsSettings, EditorUtils, EditorDialogs };
+export { Editor, EditorProps, EditorMountEvent, EditorPasteEvent, EditorChangeEvent, EditorExecuteEvent, EditorFocusEvent, EditorBlurEvent, EditorTools, EditorToolsSettings, EditorUtils, EditorDialogs };

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-editor',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1632894490,
+    publishDate: 1633425702,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/es/utils/index.js

@@ -93,7 +93,7 @@ export var EditorUtils;
      * @returns {Node} - The `document` object of the Editor.
      */
     function createDocument(schema, html, parseOptions) {
-        return parseContent(html, schema, parseOptions !== undefined ? parseOptions : { preserveWhitespace: 'full' });
+        return parseContent(trimWhitespace(html), schema, parseOptions !== undefined ? parseOptions : { preserveWhitespace: 'full' });
     }
     EditorUtils.createDocument = createDocument;
     /**