@progress/kendo-angular-editor 2.5.0 → 3.0.0-dev.202112211443

package/dist/es2015/editor.component.js

@@ -6,12 +6,12 @@ import * as tslib_1 from "tslib";
 var EditorComponent_1;
 import { Component, HostBinding, ViewChild, ContentChild, ViewContainerRef, Output, ElementRef, EventEmitter, forwardRef, Input, ChangeDetectorRef, NgZone, isDevMode } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { BehaviorSubject, fromEvent, merge, Subject, zip } from 'rxjs';
-import { map, filter, auditTime, take } from 'rxjs/operators';
+import { BehaviorSubject, fromEvent, Subject, zip } from 'rxjs';
+import { map, filter, take } from 'rxjs/operators';
 import { ToolBarComponent } from '@progress/kendo-angular-toolbar';
 import { DialogService } from '@progress/kendo-angular-dialog';
-import { isDocumentAvailable, KendoInput } from '@progress/kendo-angular-common';
-import { buildKeymap, buildListKeymap, hasSameMarkup, getHtml, pasteCleanup, sanitize, removeComments, sanitizeClassAttr, sanitizeStyleAttr, removeAttribute, placeholder, EditorView, EditorState, baseKeymap, keymap, history, parseContent, Plugin, PluginKey, TextSelection, Schema, gapCursor, getSelectionText, imageResizing } from '@progress/kendo-editor-common';
+import { hasObservers, isDocumentAvailable, KendoInput } from '@progress/kendo-angular-common';
+import { buildKeymap, buildListKeymap, getHtml, pasteCleanup, sanitize, removeComments, sanitizeClassAttr, sanitizeStyleAttr, removeAttribute, placeholder, EditorView, EditorState, baseKeymap, keymap, history, parseContent, Plugin, PluginKey, TextSelection, Schema, AllSelection, gapCursor, getSelectionText, imageResizing } from '@progress/kendo-editor-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from './package-metadata';
 import { schema } from './config/schema';
@@ -26,15 +26,16 @@ import { EditorLocalizationService } from './localization/editor-localization.se
 import { defaultStyle, tablesStyles, rtlStyles } from './common/styles';
 import { EditorErrorMessages } from './common/error-messages';
 import { EditorToolsService } from './tools/tools.service';
+import { EditorPasteEvent } from './preventable-events/paste-event';
 const EMPTY_PARAGRAPH = '<p></p>';
 const defaultPasteCleanupSettings = {
     convertMsLists: false,
     removeAttributes: [],
     removeHtmlComments: false,
-    removeInvalidHTML: false,
+    removeInvalidHTML: true,
     removeMsClasses: false,
     removeMsStyles: false,
-    stripTags: ['']
+    stripTags: []
 };
 const removeCommentsIf = conditionallyExecute(removeComments);
 const removeInvalidHTMLIf = conditionallyExecute(sanitize);
@@ -71,14 +72,6 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
          * @default false
          */
         this.applyToWord = false;
-        /**
-         * By design, the Editor emits `valueChange`, updates the model and the ToolBar state on each keystroke.
-         * When you are interested in ignoring the new values for a given amout of time and take only the most recent one, you can use the `updateInterval` property.
-         * A possible use case is to get the new values and to update the ToolBar state at a maximum rate per second in order to speed up your application.
-         * The specified interval (in milliseconds) should be a positive number.
-         * By default the `updateInterval` is set to 100 miliseconds. If set to zero the delay will be disabled entirely.
-         */
-        this.updateInterval = 100;
         /**
          * By default, whitespace is collapsed as per HTML's rules.
          * Set to `true` to preserve whitespace, but normalize newlines to spaces.
@@ -104,6 +97,11 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
          * Fires when the content area of the Editor is focused ([see example]({% slug overview_editor %}#toc-events)).
          */
         this.onFocus = new EventEmitter();
+        /**
+         * Fires when the user performs paste in the content area of the Editor ([see example]({% slug overview_editor %}#toc-events)).
+         * The event is preventable. If you cancel it, the Editor content will not change.
+         */
+        this.paste = new EventEmitter();
         /**
          * Fires when the content area of the Editor is blurred ([see example]({% slug overview_editor %}#toc-events)).
          */
@@ -119,10 +117,73 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
         this.valueModified = new Subject();
         this._readonly = false;
         this._placeholder = '';
+        this.inForm = false;
         this.afterViewInit = new Subject();
         this.contentAreaLoaded = new Subject();
-        this.onChangeCallback = (_) => { }; // tslint:disable-line:no-empty
+        this.dispatchTransaction = (tr) => {
+            const docChanged = tr.docChanged;
+            if (docChanged) {
+                const doc = tr.doc;
+                const html = getHtml({ doc });
+                this.trOnChange = tr;
+                this.htmlOnChange = html;
+                this.ngZone.run(() => {
+                    this.valueModified.next(html);
+                });
+            }
+            if (!docChanged || this.inForm) {
+                this.view.updateState(this.view.state.apply(tr));
+            }
+        };
+        this.transformPastedHTML = (dirtyHtml) => {
+            const pasteCleanupSettings = Object.assign({}, defaultPasteCleanupSettings, this.pasteCleanupSettings);
+            const html = pipe(removeInvalidHTMLIf(pasteCleanupSettings.removeInvalidHTML), removeCommentsIf(pasteCleanupSettings.removeHtmlComments))(dirtyHtml);
+            const clean = pasteCleanup(html, {
+                convertMsLists: pasteCleanupSettings.convertMsLists,
+                stripTags: pasteCleanupSettings.stripTags.join('|'),
+                attributes: getPasteCleanupAttributes(pasteCleanupSettings)
+            });
+            if (hasObservers(this.paste)) {
+                const event = new EditorPasteEvent(clean, dirtyHtml, this._pasteEvent);
+                this.ngZone.run(() => this.paste.emit(event));
+                return event.isDefaultPrevented() ? '' : event.cleanedHtml;
+            }
+            return clean;
+        };
+        this.changeValue = (value) => {
+            const prev = this._value;
+            this._value = value;
+            if (!this._view) {
+                return;
+            }
+            if (this.htmlOnChange === value && this.trOnChange) {
+                this.view.updateState(this.view.state.apply(this.trOnChange));
+            }
+            else {
+                if ((prev || '') !== (value || '')) {
+                    const iframeContentWindowNotPresent = this.iframe && !this.container.element.nativeElement.contentWindow;
+                    if (iframeContentWindowNotPresent) {
+                        return;
+                    }
+                    const state = this.view.state;
+                    const nextDoc = parseContent(value || '', state.schema, { preserveWhitespace: this.preserveWhitespace });
+                    const tr = state.tr
+                        .setSelection(new AllSelection(state.doc))
+                        .replaceSelectionWith(nextDoc);
+                    this.view.updateState(state.apply(tr));
+                }
+            }
+            this.trOnChange = null;
+            this.htmlOnChange = null;
+        };
+        this.onChangeCallback = (value) => {
+            this.changeValue(value);
+        };
         this.onTouchedCallback = (_) => { }; // tslint:disable-line:no-empty
+        this.onPaste = (_view, nativeEvent) => {
+            this._pasteEvent = nativeEvent;
+            return false;
+        };
         validatePackage(packageMetadata);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
         // https://stackoverflow.com/questions/56572483/chrome-is-synchronously-handling-iframe-loading-whereas-firefox-handles-it-asyn
@@ -132,25 +193,12 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
      * Sets the value of the Editor ([see example]({% slug overview_editor %}#toc-basic-usage)).
      */
     set value(value) {
-        if (this._previousValue === value) {
-            return;
-        }
-        this._value = value;
-        this._previousValue = value;
-        if (this._view) {
-            const iframeContentWindowNotPresent = this.iframe && !this.container.element.nativeElement.contentWindow;
-            if (iframeContentWindowNotPresent) {
-                return;
-            }
-            this.exec('setHTML', {
-                content: this._value || '',
-                parseOptions: {
-                    preserveWhitespace: this.preserveWhitespace
-                }
-            });
-        }
+        this.changeValue(value);
     }
     get value() {
+        if (this.trOnChange) {
+            return this.htmlOnChange;
+        }
         let value = this._view ? this.getSource() : this._value;
         if (value === EMPTY_PARAGRAPH) {
             return this._value ? '' : this._value;
@@ -340,6 +388,9 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
         }
     }
     ngOnChanges(changes) {
+        if (changes.value && this.view) {
+            this.changeValue(changes.value.currentValue);
+        }
         if (changes.iframe && !changes.iframe.isFirstChange()) {
             this.ngZone.onStable.pipe(take(1)).subscribe(() => this.initialize());
         }
@@ -425,8 +476,6 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
         const command = editorCommands[commandName](attr);
         // Executes a ProseMirror command.
         command(this._view.state, this._view.dispatch, this._view);
-        // See the `dispatchTransaction` comments.
-        // this.stateChange.emit(updateToolBar(this.view));
     }
     /**
      * Opens a dialog.
@@ -511,6 +560,7 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
      * @hidden
      */
     writeValue(value) {
+        this.inForm = true;
         // To avoid confusion, non-existent values are always undefined.
         this.value = value === null ? undefined : value;
     }
@@ -538,7 +588,6 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
             return;
         }
         const currentSchema = this.schema || schema;
-        const that = this;
         const containerNativeElement = this.container.element.nativeElement;
         const contentNode = parseContent((this.value || '').trim(), currentSchema, { preserveWhitespace: this.preserveWhitespace });
         if (this.iframe) {
@@ -582,7 +631,7 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
             }),
             new Plugin({
                 key: new PluginKey('editor-filter-disabled-state'),
-                filterTransaction: () => !this.disabled
+                filterTransaction: () => !this.disabled || this.inForm
             }),
             history(),
             keymap(buildListKeymap(currentSchema)),
@@ -609,31 +658,10 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
             this._view = new EditorView({ mount: this.viewMountElement }, {
                 state,
                 editable: () => !this.readonly,
-                dispatchTransaction: function (tr) {
-                    // `this` is bound to the view instance.
-                    this.updateState(this.state.apply(tr));
-                    // that.cdr.detectChanges();
-                    // When the user utilizes keyboard shortcuts&mdash;for example, `Ctrl`+`b`&mdash;
-                    // `tr.docChanged` is `true` and the toolbar is not updated.
-                    // A possible future solution is to move the keymaps to the service.
-                    // if (!tr.docChanged) {
-                    //     that.stateChange.emit(updateToolBar(that.view));
-                    // }
-                    const value = that.value;
-                    if (!hasSameMarkup(value, that._previousValue, this.state.schema)) {
-                        that._previousValue = value;
-                        that.ngZone.run(() => that.valueModified.next(value));
-                    }
-                },
-                transformPastedHTML: (html) => {
-                    const pasteCleanupSettings = Object.assign({}, defaultPasteCleanupSettings, this.pasteCleanupSettings);
-                    const clean = pipe(removeCommentsIf(pasteCleanupSettings.removeHtmlComments), removeInvalidHTMLIf(pasteCleanupSettings.removeInvalidHTML))(html);
-                    const attributes = getPasteCleanupAttributes(pasteCleanupSettings);
-                    return pasteCleanup(clean, {
-                        convertMsLists: pasteCleanupSettings.convertMsLists,
-                        stripTags: pasteCleanupSettings.stripTags.join('|'),
-                        attributes
-                    });
+                dispatchTransaction: this.dispatchTransaction,
+                transformPastedHTML: this.transformPastedHTML,
+                handleDOMEvents: {
+                    paste: this.onPaste
                 }
             });
         });
@@ -674,7 +702,7 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
                 this.cdr.detectChanges();
             }
         }));
-        this.subs.add(merge(this.valueModified.pipe(filter(() => this.updateInterval > 0), auditTime(this.updateInterval)), this.valueModified.pipe(filter(() => this.updateInterval === 0))).subscribe((value) => {
+        this.subs.add(this.valueModified.subscribe((value) => {
             this.onChangeCallback(value);
             this.valueChange.emit(value);
             this.cdr.markForCheck();
@@ -767,10 +795,6 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", String),
     tslib_1.__metadata("design:paramtypes", [String])
 ], EditorComponent.prototype, "placeholder", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Number)
-], EditorComponent.prototype, "updateInterval", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Object)
@@ -791,6 +815,10 @@ tslib_1.__decorate([
     Output('focus'),
     tslib_1.__metadata("design:type", EventEmitter)
 ], EditorComponent.prototype, "onFocus", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], EditorComponent.prototype, "paste", void 0);
 tslib_1.__decorate([
     Output('blur'),
     tslib_1.__metadata("design:type", EventEmitter)
@@ -1038,7 +1066,7 @@ EditorComponent = EditorComponent_1 = tslib_1.__decorate([
         <div *ngIf="!iframe" #content [attr.dir]="direction" class="k-editor-content"></div>
 
         <div class="k-editor-content" *ngIf="iframe">
-            <iframe #content frameborder="0" class="k-iframe" (load)="iframeOnLoad()"></iframe>
+            <iframe #content srcdoc="<!DOCTYPE html>" frameborder="0" class="k-iframe" (load)="iframeOnLoad()"></iframe>
         </div>
 
         <ng-container #dialogsContainer></ng-container>