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

package/dist/npm/editor.component.js

@@ -27,15 +27,16 @@ var editor_localization_service_1 = require("./localization/editor-localization.
 var styles_1 = require("./common/styles");
 var error_messages_1 = require("./common/error-messages");
 var tools_service_1 = require("./tools/tools.service");
+var paste_event_1 = require("./preventable-events/paste-event");
 var EMPTY_PARAGRAPH = '<p></p>';
 var defaultPasteCleanupSettings = {
     convertMsLists: false,
     removeAttributes: [],
     removeHtmlComments: false,
-    removeInvalidHTML: false,
+    removeInvalidHTML: true,
     removeMsClasses: false,
     removeMsStyles: false,
-    stripTags: ['']
+    stripTags: []
 };
 var removeCommentsIf = util_1.conditionallyExecute(kendo_editor_common_1.removeComments);
 var removeInvalidHTMLIf = util_1.conditionallyExecute(kendo_editor_common_1.sanitize);
@@ -77,14 +78,6 @@ var EditorComponent = /** @class */ (function () {
          * @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.
@@ -110,6 +103,11 @@ var EditorComponent = /** @class */ (function () {
          * Fires when the content area of the Editor is focused ([see example]({% slug overview_editor %}#toc-events)).
          */
         this.onFocus = new core_1.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 core_1.EventEmitter();
         /**
          * Fires when the content area of the Editor is blurred ([see example]({% slug overview_editor %}#toc-events)).
          */
@@ -125,10 +123,76 @@ var EditorComponent = /** @class */ (function () {
         this.valueModified = new rxjs_1.Subject();
         this._readonly = false;
         this._placeholder = '';
+        this.inForm = false;
         this.afterViewInit = new rxjs_1.Subject();
         this.contentAreaLoaded = new rxjs_1.Subject();
-        this.onChangeCallback = function (_) { }; // tslint:disable-line:no-empty
+        this.dispatchTransaction = function (tr) {
+            var docChanged = tr.docChanged;
+            if (_this.disabled || (_this.readonly && docChanged)) {
+                return;
+            }
+            if (docChanged) {
+                var doc = tr.doc;
+                var html_1 = kendo_editor_common_1.getHtml({ doc: doc });
+                _this.trOnChange = tr;
+                _this.htmlOnChange = html_1;
+                _this.ngZone.run(function () {
+                    _this.valueModified.next(html_1);
+                });
+            }
+            if (!docChanged || _this.inForm) {
+                _this.view.updateState(_this.view.state.apply(tr));
+            }
+        };
+        this.transformPastedHTML = function (dirtyHtml) {
+            var pasteCleanupSettings = tslib_1.__assign({}, defaultPasteCleanupSettings, _this.pasteCleanupSettings);
+            var html = util_1.pipe(removeInvalidHTMLIf(pasteCleanupSettings.removeInvalidHTML), removeCommentsIf(pasteCleanupSettings.removeHtmlComments))(dirtyHtml);
+            var clean = kendo_editor_common_1.pasteCleanup(html, {
+                convertMsLists: pasteCleanupSettings.convertMsLists,
+                stripTags: pasteCleanupSettings.stripTags.join('|'),
+                attributes: getPasteCleanupAttributes(pasteCleanupSettings)
+            });
+            if (kendo_angular_common_1.hasObservers(_this.paste)) {
+                var event_1 = new paste_event_1.EditorPasteEvent(clean, dirtyHtml, _this._pasteEvent);
+                _this.ngZone.run(function () { return _this.paste.emit(event_1); });
+                return event_1.isDefaultPrevented() ? '' : event_1.cleanedHtml;
+            }
+            return clean;
+        };
+        this.changeValue = function (value) {
+            var 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 || '')) {
+                    var iframeContentWindowNotPresent = _this.iframe && !_this.container.element.nativeElement.contentWindow;
+                    if (iframeContentWindowNotPresent) {
+                        return;
+                    }
+                    var state = _this.view.state;
+                    var nextDoc = kendo_editor_common_1.parseContent(value || '', state.schema, { preserveWhitespace: _this.preserveWhitespace });
+                    var tr = state.tr
+                        .setSelection(new kendo_editor_common_1.AllSelection(state.doc))
+                        .replaceSelectionWith(nextDoc);
+                    _this.view.updateState(state.apply(tr));
+                }
+            }
+            _this.trOnChange = null;
+            _this.htmlOnChange = null;
+        };
+        this.onChangeCallback = function (value) {
+            _this.changeValue(value);
+        };
         this.onTouchedCallback = function (_) { }; // tslint:disable-line:no-empty
+        this.onPaste = function (_view, nativeEvent) {
+            _this._pasteEvent = nativeEvent;
+            return false;
+        };
         kendo_licensing_1.validatePackage(package_metadata_1.packageMetadata);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
         // https://stackoverflow.com/questions/56572483/chrome-is-synchronously-handling-iframe-loading-whereas-firefox-handles-it-asyn
@@ -137,6 +201,9 @@ var EditorComponent = /** @class */ (function () {
     EditorComponent_1 = EditorComponent;
     Object.defineProperty(EditorComponent.prototype, "value", {
         get: function () {
+            if (this.trOnChange) {
+                return this.htmlOnChange;
+            }
             var value = this._view ? this.getSource() : this._value;
             if (value === EMPTY_PARAGRAPH) {
                 return this._value ? '' : this._value;
@@ -149,23 +216,7 @@ var EditorComponent = /** @class */ (function () {
          * Sets the value of the Editor ([see example]({% slug overview_editor %}#toc-basic-usage)).
          */
         set: function (value) {
-            if (this._previousValue === value) {
-                return;
-            }
-            this._value = value;
-            this._previousValue = value;
-            if (this._view) {
-                var iframeContentWindowNotPresent = this.iframe && !this.container.element.nativeElement.contentWindow;
-                if (iframeContentWindowNotPresent) {
-                    return;
-                }
-                this.exec('setHTML', {
-                    content: this._value || '',
-                    parseOptions: {
-                        preserveWhitespace: this.preserveWhitespace
-                    }
-                });
-            }
+            this.changeValue(value);
         },
         enumerable: true,
         configurable: true
@@ -426,6 +477,9 @@ var EditorComponent = /** @class */ (function () {
     };
     EditorComponent.prototype.ngOnChanges = function (changes) {
         var _this = this;
+        if (changes.value && this.view) {
+            this.changeValue(changes.value.currentValue);
+        }
         if (changes.iframe && !changes.iframe.isFirstChange()) {
             this.ngZone.onStable.pipe(operators_1.take(1)).subscribe(function () { return _this.initialize(); });
         }
@@ -453,7 +507,7 @@ var EditorComponent = /** @class */ (function () {
      * @param {any} attr - Optional parameters for the command. Apart from the following list,
      * the parameters do not expect specific attributes when you call them:
      * - `format` - Accepts an object with the `tag` property.
-     * The supported tags are `p`, `blockquote`, and any of the `h1` to `h6` heading tags.
+     * The supported tags are `p` and any of the `h1` to `h6` heading tags.
      * - `createLink` - Accepts an object with the `href`, `title`, and `target` properties. The `href` property is mandatory.
      * - `setHTML` - Accepts a `string` parameter.
      * - `insertTable` - Accepts an object with the `rows` and `cols` properties. The number values are zero based.
@@ -511,8 +565,6 @@ var EditorComponent = /** @class */ (function () {
         var command = commands_1.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.
@@ -597,6 +649,7 @@ var EditorComponent = /** @class */ (function () {
      * @hidden
      */
     EditorComponent.prototype.writeValue = function (value) {
+        this.inForm = true;
         // To avoid confusion, non-existent values are always undefined.
         this.value = value === null ? undefined : value;
     };
@@ -625,7 +678,6 @@ var EditorComponent = /** @class */ (function () {
             return;
         }
         var currentSchema = this.schema || schema_1.schema;
-        var that = this;
         var containerNativeElement = this.container.element.nativeElement;
         var contentNode = kendo_editor_common_1.parseContent((this.value || '').trim(), currentSchema, { preserveWhitespace: this.preserveWhitespace });
         if (this.iframe) {
@@ -667,16 +719,13 @@ var EditorComponent = /** @class */ (function () {
                     }
                 }); }
             }),
-            new kendo_editor_common_1.Plugin({
-                key: new kendo_editor_common_1.PluginKey('editor-filter-disabled-state'),
-                filterTransaction: function () { return !_this.disabled; }
-            }),
             kendo_editor_common_1.history(),
             kendo_editor_common_1.keymap(kendo_editor_common_1.buildListKeymap(currentSchema)),
             kendo_editor_common_1.keymap(kendo_editor_common_1.buildKeymap(currentSchema, { applyToWord: this.applyToWord })),
             kendo_editor_common_1.keymap(kendo_editor_common_1.baseKeymap),
             kendo_editor_common_1.gapCursor(),
-            kendo_editor_common_1.imageResizing()
+            kendo_editor_common_1.imageResizing(),
+            kendo_editor_common_1.tableEditing()
         ];
         if (this.placeholder) {
             defaultPlugins.push(kendo_editor_common_1.placeholder(this.placeholder));
@@ -696,31 +745,10 @@ var EditorComponent = /** @class */ (function () {
             _this._view = new kendo_editor_common_1.EditorView({ mount: _this.viewMountElement }, {
                 state: state,
                 editable: function () { return !_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));
-                    // }
-                    var value = that.value;
-                    if (!kendo_editor_common_1.hasSameMarkup(value, that._previousValue, this.state.schema)) {
-                        that._previousValue = value;
-                        that.ngZone.run(function () { return that.valueModified.next(value); });
-                    }
-                },
-                transformPastedHTML: function (html) {
-                    var pasteCleanupSettings = tslib_1.__assign({}, defaultPasteCleanupSettings, _this.pasteCleanupSettings);
-                    var clean = util_1.pipe(removeCommentsIf(pasteCleanupSettings.removeHtmlComments), removeInvalidHTMLIf(pasteCleanupSettings.removeInvalidHTML))(html);
-                    var attributes = getPasteCleanupAttributes(pasteCleanupSettings);
-                    return kendo_editor_common_1.pasteCleanup(clean, {
-                        convertMsLists: pasteCleanupSettings.convertMsLists,
-                        stripTags: pasteCleanupSettings.stripTags.join('|'),
-                        attributes: attributes
-                    });
+                dispatchTransaction: _this.dispatchTransaction,
+                transformPastedHTML: _this.transformPastedHTML,
+                handleDOMEvents: {
+                    paste: _this.onPaste
                 }
             });
         });
@@ -736,7 +764,7 @@ var EditorComponent = /** @class */ (function () {
             this.subs.add(rxjs_1.fromEvent(containerElement, 'focusin')
                 .subscribe(function () {
                 if (_this.readonly) {
-                    contentAreaClasslist_1.add('k-state-focused');
+                    contentAreaClasslist_1.add('k-focus');
                 }
                 if (!_this.focusChangedProgrammatically || _this.shouldEmitFocus) {
                     _this.ngZone.run(function () { return _this.onFocus.emit(); });
@@ -746,7 +774,7 @@ var EditorComponent = /** @class */ (function () {
             this.subs.add(rxjs_1.fromEvent(containerElement, 'focusout')
                 .subscribe(function () {
                 if (_this.readonly) {
-                    contentAreaClasslist_1.remove('k-state-focused');
+                    contentAreaClasslist_1.remove('k-focus');
                 }
                 if (!_this.focusChangedProgrammatically) {
                     _this.ngZone.run(function () { return _this.onBlur.emit(); });
@@ -761,7 +789,7 @@ var EditorComponent = /** @class */ (function () {
                 _this.cdr.detectChanges();
             }
         }));
-        this.subs.add(rxjs_1.merge(this.valueModified.pipe(operators_1.filter(function () { return _this.updateInterval > 0; }), operators_1.auditTime(this.updateInterval)), this.valueModified.pipe(operators_1.filter(function () { return _this.updateInterval === 0; }))).subscribe(function (value) {
+        this.subs.add(this.valueModified.subscribe(function (value) {
             _this.onChangeCallback(value);
             _this.valueChange.emit(value);
             _this.cdr.markForCheck();
@@ -855,10 +883,6 @@ var EditorComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", String),
         tslib_1.__metadata("design:paramtypes", [String])
     ], EditorComponent.prototype, "placeholder", null);
-    tslib_1.__decorate([
-        core_1.Input(),
-        tslib_1.__metadata("design:type", Number)
-    ], EditorComponent.prototype, "updateInterval", void 0);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", Object)
@@ -879,6 +903,10 @@ var EditorComponent = /** @class */ (function () {
         core_1.Output('focus'),
         tslib_1.__metadata("design:type", core_1.EventEmitter)
     ], EditorComponent.prototype, "onFocus", void 0);
+    tslib_1.__decorate([
+        core_1.Output(),
+        tslib_1.__metadata("design:type", core_1.EventEmitter)
+    ], EditorComponent.prototype, "paste", void 0);
     tslib_1.__decorate([
         core_1.Output('blur'),
         tslib_1.__metadata("design:type", core_1.EventEmitter)
@@ -893,7 +921,7 @@ var EditorComponent = /** @class */ (function () {
         tslib_1.__metadata("design:paramtypes", [])
     ], EditorComponent.prototype, "resizableClass", null);
     tslib_1.__decorate([
-        core_1.HostBinding('class.k-state-disabled'),
+        core_1.HostBinding('class.k-disabled'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], EditorComponent.prototype, "isDisabled", null);
@@ -986,7 +1014,7 @@ var EditorComponent = /** @class */ (function () {
                 }
             ],
             /* tslint:disable:max-line-length */
-            template: "\n        <ng-container\n            kendoEditorLocalizedMessages\n            i18n-alignCenter=\"kendo.editor.alignCenter|The title of the tool that aligns text in the center.\"\n            alignCenter=\"Center text\"\n            i18n-alignJustify=\"kendo.editor.alignJustify|The title of the tool that justifies text both left and right.\"\n            alignJustify=\"Justify\"\n            i18n-alignLeft=\"kendo.editor.alignLeft|The title of the tool that aligns text on the left.\"\n            alignLeft=\"Align text left\"\n            i18n-alignRight=\"kendo.editor.alignRight|The title of the tool that aligns text on the right.\"\n            alignRight=\"Align text right\"\n            i18n-backColor=\"kendo.editor.backColor|The title of the tool that changes the text background color.\"\n            backColor=\"Background color\"\n            i18n-bold=\"kendo.editor.bold|The title of the tool that makes text bold.\"\n            bold=\"Bold\"\n            i18n-cleanFormatting=\"kendo.editor.cleanFormatting|The title of the Clean Formatting tool.\"\n            cleanFormatting=\"Clean formatting\"\n            i18n-createLink=\"kendo.editor.createLink|The title of the tool that creates hyperlinks.\"\n            createLink=\"Insert link\"\n            i18n-dialogApply=\"kendo.editor.dialogApply|The label of the **Apply** button in all editor dialogs.\"\n            dialogApply=\"Apply\"\n            i18n-dialogCancel=\"kendo.editor.dialogCancel|The label of the **Cancel** button in all editor dialogs.\"\n            dialogCancel=\"Cancel\"\n            i18n-dialogInsert=\"kendo.editor.dialogInsert|The label of the **Insert** button in all editor dialogs.\"\n            dialogInsert=\"Insert\"\n            i18n-dialogUpdate=\"kendo.editor.dialogUpdate|The label of the **Update** button in all editor dialogs.\"\n            dialogUpdate=\"Update\"\n            i18n-fileText=\"kendo.editor.fileText|The caption for the file text in the insertFile dialog.\"\n            fileText=\"Text\"\n            i18n-fileTitle=\"kendo.editor.fileTitle|The caption for the file Title in the insertFile dialog.\"\n            fileTitle=\"Title\"\n            i18n-fileWebAddress=\"kendo.editor.fileWebAddress|The caption for the file URL in the insertFile dialog.\"\n            fileWebAddress=\"Web address\"\n            i18n-fontFamily=\"kendo.editor.fontFamily|The title of the tool that changes the text font.\"\n            fontFamily=\"Select font family\"\n            i18n-fontSize=\"kendo.editor.fontSize|The title of the tool that changes the text size.\"\n            fontSize=\"Select font size\"\n            i18n-foreColor=\"kendo.editor.foreColor|The title of the tool that changes the text color.\"\n            foreColor=\"Color\"\n            i18n-format=\"kendo.editor.format|The title of the tool that lets users choose block formats.\"\n            format=\"Format\"\n            i18n-imageAltText=\"kendo.editor.imageAltText|The caption for the image alternate text in the insertImage dialog.\"\n            imageAltText=\"Alternate text\"\n            i18n-imageHeight=\"kendo.editor.imageHeight|The caption for the image height in the insertImage dialog.\"\n            imageHeight=\"Height (px)\"\n            i18n-imageWebAddress=\"kendo.editor.imageWebAddress|The caption for the image URL in the insertImage dialog.\"\n            imageWebAddress=\"Web address\"\n            i18n-imageWidth=\"kendo.editor.imageWidth|The caption for the image width in the insertImage dialog.\"\n            imageWidth=\"Width (px)\"\n            i18n-indent=\"kendo.editor.indent|The title of the tool that indents the content.\"\n            indent=\"Indent\"\n            i18n-insertFile=\"kendo.editor.insertFile|The title of the tool that inserts links to files.\"\n            insertFile=\"Insert file\"\n            i18n-insertImage=\"kendo.editor.insertImage|The title of the tool that inserts images.\"\n            insertImage=\"Insert image\"\n            i18n-insertOrderedList=\"kendo.editor.insertOrderedList|The title of the tool that inserts an ordered list.\"\n            insertOrderedList=\"Insert ordered list\"\n            i18n-insertUnorderedList=\"kendo.editor.insertUnorderedList|The title of the tool that inserts an unordered list.\"\n            insertUnorderedList=\"Insert unordered list\"\n            i18n-italic=\"kendo.editor.italic|The title of the tool that makes text italicized.\"\n            italic=\"Italic\"\n            i18n-linkOpenInNewWindow=\"kendo.editor.linkOpenInNewWindow|The caption for the checkbox for opening the link in a new window in the createLink dialog.\"\n            linkOpenInNewWindow=\"Open link in new window\"\n            i18n-linkText=\"kendo.editor.linkText|The caption for the link text in the createLink dialog.\"\n            linkText=\"Text\"\n            i18n-linkTitle=\"kendo.editor.linkTitle|The caption for the link title in the createLink dialog.\"\n            linkTitle=\"Title\"\n            i18n-linkWebAddress=\"kendo.editor.linkWebAddress|The caption for the URL in the createLink dialog.\"\n            linkWebAddress=\"Web address\"\n            i18n-outdent=\"kendo.editor.outdent|The title of the tool that outdents the content.\"\n            outdent=\"Outdent\"\n            i18n-print=\"kendo.editor.print|The title of the print tool.\"\n            print=\"Print\"\n            i18n-redo=\"kendo.editor.redo|The title of the tool that undos the last action.\"\n            redo=\"Redo\"\n            i18n-selectAll=\"kendo.editor.selectAll|The title of the tool that selects all content.\"\n            selectAll=\"Select All\"\n            i18n-strikethrough=\"kendo.editor.strikethrough|The title of the tool that strikes through text.\"\n            strikethrough=\"Strikethrough\"\n            i18n-subscript=\"kendo.editor.subscript|The title of the tool that makes text subscript.\"\n            subscript=\"Subscript\"\n            i18n-superscript=\"kendo.editor.superscript|The title of the tool that makes text superscript.\"\n            superscript=\"Superscript\"\n            i18n-underline=\"kendo.editor.underline|The title of the tool that underlines text.\"\n            underline=\"Underline\"\n            i18n-unlink=\"kendo.editor.unlink|The title of the tool that removes hyperlinks.\"\n            unlink=\"Remove Link\"\n            i18n-undo=\"kendo.editor.undo|The title of the tool that undos the last action.\"\n            undo=\"Undo\"\n            i18n-viewSource=\"kendo.editor.viewSource|The title of the tool that shows the editor value as HTML.\"\n            viewSource=\"View source\"\n            i18n-insertTable=\"kendo.editor.insertTable|The title of the tool that inserts table.\"\n            insertTable=\"Insert Table\"\n            i18n-addColumnBefore=\"kendo.editor.addColumnBefore|The title of the tool that adds new column before currently selected column.\"\n            addColumnBefore=\"Add column before\"\n            i18n-addColumnAfter=\"kendo.editor.addColumnAfter|The title of the tool that adds new column after currently selected column.\"\n            addColumnAfter=\"Add column after\"\n            i18n-addRowBefore=\"kendo.editor.addRowBefore|The title of the tool that adds new row before currently selected row.\"\n            addRowBefore=\"Add row before\"\n            i18n-addRowAfter=\"kendo.editor.addRowAfter|The title of the tool that adds new row after currently selected row.\"\n            addRowAfter=\"Add row after\"\n            i18n-deleteColumn=\"kendo.editor.deleteColumn|The title of the tool that deletes a table column.\"\n            deleteColumn=\"Delete column\"\n            i18n-deleteRow=\"kendo.editor.deleteRow|The title of the tool that deletes a table row.\"\n            deleteRow=\"Delete row\"\n            i18n-deleteTable=\"kendo.editor.deleteTable|The title of the tool that deletes a table.\"\n            deleteTable=\"Delete table\"\n        >\n        </ng-container>\n\n        <ng-content select=\"kendo-toolbar\"></ng-content>\n        <kendo-toolbar [overflow]=\"true\" [tabindex]=\"readonly ? -1 : 0\" *ngIf=\"!userToolBarElement\" #defaultToolbar>\n            <kendo-toolbar-buttongroup>\n                <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>\n                <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>\n                <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>\n            </kendo-toolbar-buttongroup>\n            <kendo-toolbar-dropdownlist kendoEditorFormat></kendo-toolbar-dropdownlist>\n            <kendo-toolbar-buttongroup>\n                <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>\n                <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>\n                <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>\n                <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>\n            </kendo-toolbar-buttongroup>\n            <kendo-toolbar-buttongroup>\n                <kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>\n                <kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>\n                <kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>\n                <kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>\n            </kendo-toolbar-buttongroup>\n            <kendo-toolbar-buttongroup>\n                <kendo-toolbar-button kendoEditorCreateLinkButton></kendo-toolbar-button>\n                <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>\n            </kendo-toolbar-buttongroup>\n            <kendo-toolbar-button kendoEditorInsertImageButton></kendo-toolbar-button>\n        </kendo-toolbar>\n\n        <div *ngIf=\"!iframe\" #content [attr.dir]=\"direction\" class=\"k-editor-content\"></div>\n\n        <div class=\"k-editor-content\" *ngIf=\"iframe\">\n            <iframe #content frameborder=\"0\" class=\"k-iframe\" (load)=\"iframeOnLoad()\"></iframe>\n        </div>\n\n        <ng-container #dialogsContainer></ng-container>\n    ",
+            template: "\n        <ng-container\n            kendoEditorLocalizedMessages\n            i18n-alignCenter=\"kendo.editor.alignCenter|The title of the tool that aligns text in the center.\"\n            alignCenter=\"Center text\"\n            i18n-alignJustify=\"kendo.editor.alignJustify|The title of the tool that justifies text both left and right.\"\n            alignJustify=\"Justify\"\n            i18n-alignLeft=\"kendo.editor.alignLeft|The title of the tool that aligns text on the left.\"\n            alignLeft=\"Align text left\"\n            i18n-alignRight=\"kendo.editor.alignRight|The title of the tool that aligns text on the right.\"\n            alignRight=\"Align text right\"\n            i18n-backColor=\"kendo.editor.backColor|The title of the tool that changes the text background color.\"\n            backColor=\"Background color\"\n            i18n-blockquote=\"kendo.editor.blockquote|The title of the tool that wraps an element in a blockquote\"\n            blockquote=\"Quotation\"\n            i18n-bold=\"kendo.editor.bold|The title of the tool that makes text bold.\"\n            bold=\"Bold\"\n            i18n-cleanFormatting=\"kendo.editor.cleanFormatting|The title of the Clean Formatting tool.\"\n            cleanFormatting=\"Clean formatting\"\n            i18n-createLink=\"kendo.editor.createLink|The title of the tool that creates hyperlinks.\"\n            createLink=\"Insert link\"\n            i18n-dialogApply=\"kendo.editor.dialogApply|The label of the **Apply** button in all editor dialogs.\"\n            dialogApply=\"Apply\"\n            i18n-dialogCancel=\"kendo.editor.dialogCancel|The label of the **Cancel** button in all editor dialogs.\"\n            dialogCancel=\"Cancel\"\n            i18n-dialogInsert=\"kendo.editor.dialogInsert|The label of the **Insert** button in all editor dialogs.\"\n            dialogInsert=\"Insert\"\n            i18n-dialogUpdate=\"kendo.editor.dialogUpdate|The label of the **Update** button in all editor dialogs.\"\n            dialogUpdate=\"Update\"\n            i18n-fileText=\"kendo.editor.fileText|The caption for the file text in the insertFile dialog.\"\n            fileText=\"Text\"\n            i18n-fileTitle=\"kendo.editor.fileTitle|The caption for the file Title in the insertFile dialog.\"\n            fileTitle=\"Title\"\n            i18n-fileWebAddress=\"kendo.editor.fileWebAddress|The caption for the file URL in the insertFile dialog.\"\n            fileWebAddress=\"Web address\"\n            i18n-fontFamily=\"kendo.editor.fontFamily|The title of the tool that changes the text font.\"\n            fontFamily=\"Select font family\"\n            i18n-fontSize=\"kendo.editor.fontSize|The title of the tool that changes the text size.\"\n            fontSize=\"Select font size\"\n            i18n-foreColor=\"kendo.editor.foreColor|The title of the tool that changes the text color.\"\n            foreColor=\"Color\"\n            i18n-format=\"kendo.editor.format|The title of the tool that lets users choose block formats.\"\n            format=\"Format\"\n            i18n-imageAltText=\"kendo.editor.imageAltText|The caption for the image alternate text in the insertImage dialog.\"\n            imageAltText=\"Alternate text\"\n            i18n-imageHeight=\"kendo.editor.imageHeight|The caption for the image height in the insertImage dialog.\"\n            imageHeight=\"Height (px)\"\n            i18n-imageWebAddress=\"kendo.editor.imageWebAddress|The caption for the image URL in the insertImage dialog.\"\n            imageWebAddress=\"Web address\"\n            i18n-imageWidth=\"kendo.editor.imageWidth|The caption for the image width in the insertImage dialog.\"\n            imageWidth=\"Width (px)\"\n            i18n-indent=\"kendo.editor.indent|The title of the tool that indents the content.\"\n            indent=\"Indent\"\n            i18n-insertFile=\"kendo.editor.insertFile|The title of the tool that inserts links to files.\"\n            insertFile=\"Insert file\"\n            i18n-insertImage=\"kendo.editor.insertImage|The title of the tool that inserts images.\"\n            insertImage=\"Insert image\"\n            i18n-insertOrderedList=\"kendo.editor.insertOrderedList|The title of the tool that inserts an ordered list.\"\n            insertOrderedList=\"Insert ordered list\"\n            i18n-insertUnorderedList=\"kendo.editor.insertUnorderedList|The title of the tool that inserts an unordered list.\"\n            insertUnorderedList=\"Insert unordered list\"\n            i18n-italic=\"kendo.editor.italic|The title of the tool that makes text italicized.\"\n            italic=\"Italic\"\n            i18n-linkOpenInNewWindow=\"kendo.editor.linkOpenInNewWindow|The caption for the checkbox for opening the link in a new window in the createLink dialog.\"\n            linkOpenInNewWindow=\"Open link in new window\"\n            i18n-linkText=\"kendo.editor.linkText|The caption for the link text in the createLink dialog.\"\n            linkText=\"Text\"\n            i18n-linkTitle=\"kendo.editor.linkTitle|The caption for the link title in the createLink dialog.\"\n            linkTitle=\"Title\"\n            i18n-linkWebAddress=\"kendo.editor.linkWebAddress|The caption for the URL in the createLink dialog.\"\n            linkWebAddress=\"Web address\"\n            i18n-outdent=\"kendo.editor.outdent|The title of the tool that outdents the content.\"\n            outdent=\"Outdent\"\n            i18n-print=\"kendo.editor.print|The title of the print tool.\"\n            print=\"Print\"\n            i18n-redo=\"kendo.editor.redo|The title of the tool that undos the last action.\"\n            redo=\"Redo\"\n            i18n-selectAll=\"kendo.editor.selectAll|The title of the tool that selects all content.\"\n            selectAll=\"Select All\"\n            i18n-strikethrough=\"kendo.editor.strikethrough|The title of the tool that strikes through text.\"\n            strikethrough=\"Strikethrough\"\n            i18n-subscript=\"kendo.editor.subscript|The title of the tool that makes text subscript.\"\n            subscript=\"Subscript\"\n            i18n-superscript=\"kendo.editor.superscript|The title of the tool that makes text superscript.\"\n            superscript=\"Superscript\"\n            i18n-underline=\"kendo.editor.underline|The title of the tool that underlines text.\"\n            underline=\"Underline\"\n            i18n-unlink=\"kendo.editor.unlink|The title of the tool that removes hyperlinks.\"\n            unlink=\"Remove Link\"\n            i18n-undo=\"kendo.editor.undo|The title of the tool that undos the last action.\"\n            undo=\"Undo\"\n            i18n-viewSource=\"kendo.editor.viewSource|The title of the tool that shows the editor value as HTML.\"\n            viewSource=\"View source\"\n            i18n-insertTable=\"kendo.editor.insertTable|The title of the tool that inserts table.\"\n            insertTable=\"Insert Table\"\n            i18n-addColumnBefore=\"kendo.editor.addColumnBefore|The title of the tool that adds new column before currently selected column.\"\n            addColumnBefore=\"Add column before\"\n            i18n-addColumnAfter=\"kendo.editor.addColumnAfter|The title of the tool that adds new column after currently selected column.\"\n            addColumnAfter=\"Add column after\"\n            i18n-addRowBefore=\"kendo.editor.addRowBefore|The title of the tool that adds new row before currently selected row.\"\n            addRowBefore=\"Add row before\"\n            i18n-addRowAfter=\"kendo.editor.addRowAfter|The title of the tool that adds new row after currently selected row.\"\n            addRowAfter=\"Add row after\"\n            i18n-deleteColumn=\"kendo.editor.deleteColumn|The title of the tool that deletes a table column.\"\n            deleteColumn=\"Delete column\"\n            i18n-deleteRow=\"kendo.editor.deleteRow|The title of the tool that deletes a table row.\"\n            deleteRow=\"Delete row\"\n            i18n-deleteTable=\"kendo.editor.deleteTable|The title of the tool that deletes a table.\"\n            deleteTable=\"Delete table\"\n        >\n        </ng-container>\n\n        <ng-content select=\"kendo-toolbar\"></ng-content>\n        <kendo-toolbar [overflow]=\"true\" [tabindex]=\"readonly ? -1 : 0\" *ngIf=\"!userToolBarElement\" #defaultToolbar>\n            <kendo-toolbar-buttongroup>\n                <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>\n                <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>\n                <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>\n            </kendo-toolbar-buttongroup>\n            <kendo-toolbar-dropdownlist kendoEditorFormat></kendo-toolbar-dropdownlist>\n            <kendo-toolbar-buttongroup>\n                <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>\n                <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>\n                <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>\n                <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>\n            </kendo-toolbar-buttongroup>\n            <kendo-toolbar-buttongroup>\n                <kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>\n                <kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>\n                <kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>\n                <kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>\n            </kendo-toolbar-buttongroup>\n            <kendo-toolbar-buttongroup>\n                <kendo-toolbar-button kendoEditorCreateLinkButton></kendo-toolbar-button>\n                <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>\n            </kendo-toolbar-buttongroup>\n            <kendo-toolbar-button kendoEditorInsertImageButton></kendo-toolbar-button>\n        </kendo-toolbar>\n\n        <div *ngIf=\"!iframe\" #content [attr.dir]=\"direction\" class=\"k-editor-content\"></div>\n\n        <div class=\"k-editor-content\" *ngIf=\"iframe\">\n            <iframe #content srcdoc=\"<!DOCTYPE html>\" frameborder=\"0\" class=\"k-iframe\" (load)=\"iframeOnLoad()\"></iframe>\n        </div>\n\n        <ng-container #dialogsContainer></ng-container>\n    ",
             styles: [
                 "\n            >>> .k-editor-content > .ProseMirror {\n                height: 100%;\n                width: 100%;\n                box-sizing: border-box;\n                outline: none;\n                overflow: auto;\n            }\n\n            .k-iframe {\n                width: 100%;\n                height: 100%;\n                display: block;\n            }\n        "
             ]

package/dist/npm/editor.module.js

@@ -13,7 +13,6 @@ var kendo_angular_dropdowns_1 = require("@progress/kendo-angular-dropdowns");
 var kendo_angular_dialog_1 = require("@progress/kendo-angular-dialog");
 var kendo_angular_buttons_1 = require("@progress/kendo-angular-buttons");
 var kendo_angular_inputs_1 = require("@progress/kendo-angular-inputs");
-var kendo_angular_inputs_2 = require("@progress/kendo-angular-inputs");
 var editor_component_1 = require("./editor.component");
 var image_dialog_component_1 = require("./dialogs/image-dialog.component");
 var source_dialog_component_1 = require("./dialogs/source-dialog.component");
@@ -32,6 +31,7 @@ var editor_align_left_button_directive_1 = require("./tools/alignment/editor-ali
 var editor_align_center_button_directive_1 = require("./tools/alignment/editor-align-center-button.directive");
 var editor_align_right_button_directive_1 = require("./tools/alignment/editor-align-right-button.directive");
 var editor_align_justify_button_directive_1 = require("./tools/alignment/editor-align-justify-button.directive");
+var editor_blockquote_button_directive_1 = require("./tools/blockquote/editor-blockquote-button.directive");
 var editor_redo_button_directive_1 = require("./tools/history/editor-redo-button.directive");
 var editor_undo_button_directive_1 = require("./tools/history/editor-undo-button.directive");
 var editor_insert_image_button_directive_1 = require("./tools/image/editor-insert-image-button.directive");
@@ -125,7 +125,9 @@ var COMPONENT_DIRECTIVES = [
     // print
     editor_print_button_directive_1.EditorPrintDirective,
     // select all
-    select_all_button_directive_1.EditorSelectAllButtonDirective
+    select_all_button_directive_1.EditorSelectAllButtonDirective,
+    // blockquote
+    editor_blockquote_button_directive_1.EditorBlockquoteDirective
 ];
 var TOOLBAR_TOOLS = [
     editor_fontsize_component_1.EditorFontSizeComponent,
@@ -229,9 +231,10 @@ var EditorModule = /** @class */ (function () {
                 kendo_angular_inputs_1.ColorPickerModule,
                 kendo_angular_dialog_1.DialogModule,
                 kendo_angular_dropdowns_1.DropDownsModule,
-                kendo_angular_inputs_2.NumericTextBoxModule,
+                kendo_angular_inputs_1.NumericTextBoxModule,
+                kendo_angular_inputs_1.CheckBoxModule,
                 kendo_angular_toolbar_1.ToolBarModule,
-                kendo_angular_inputs_2.TextBoxModule
+                kendo_angular_inputs_1.TextBoxModule
             ]
         })
     ], EditorModule);

package/dist/npm/index.js

@@ -9,6 +9,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./main"), exports);
+var semantic_nodes_1 = require("./config/semantic-nodes");
+exports.semanticNodes = semantic_nodes_1.semanticNodes
+exports.semanticTagNames = semantic_nodes_1.semanticTagNames
 var colorpicker_dialog_component_1 = require("./dialogs/colorpicker-dialog.component");
 exports.ColorPickerDialogComponent = colorpicker_dialog_component_1.ColorPickerDialogComponent
 var file_link_dialog_component_1 = require("./dialogs/file-link-dialog.component");
@@ -41,6 +44,8 @@ var editor_align_left_button_directive_1 = require("./tools/alignment/editor-ali
 exports.EditorAlignLeftButtonDirective = editor_align_left_button_directive_1.EditorAlignLeftButtonDirective
 var editor_align_right_button_directive_1 = require("./tools/alignment/editor-align-right-button.directive");
 exports.EditorAlignRightButtonDirective = editor_align_right_button_directive_1.EditorAlignRightButtonDirective
+var editor_blockquote_button_directive_1 = require("./tools/blockquote/editor-blockquote-button.directive");
+exports.EditorBlockquoteDirective = editor_blockquote_button_directive_1.EditorBlockquoteDirective
 var editor_back_color_directive_1 = require("./tools/colorpicker/editor-back-color.directive");
 exports.EditorBackColorDirective = editor_back_color_directive_1.EditorBackColorDirective
 var editor_colorpicker_component_1 = require("./tools/colorpicker/editor-colorpicker.component");

package/dist/npm/localization/messages.js

@@ -35,6 +35,10 @@ var Messages = /** @class */ (function (_super) {
         core_1.Input(),
         tslib_1.__metadata("design:type", String)
     ], Messages.prototype, "backColor", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], Messages.prototype, "blockquote", void 0);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", String)

package/dist/npm/main.js

@@ -34,3 +34,5 @@ exports.dropCursor = kendo_editor_common_1.dropCursor;
 exports.gapCursor = kendo_editor_common_1.gapCursor;
 exports.tableNodes = kendo_editor_common_1.tableNodes;
 exports.getSelectionText = kendo_editor_common_1.getSelectionText;
+var paste_event_1 = require("./preventable-events/paste-event");
+exports.EditorPasteEvent = paste_event_1.EditorPasteEvent;

package/dist/npm/package-metadata.js

@@ -11,7 +11,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-angular-editor',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1638198421,
+    publishDate: 1642603748,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/dist/npm/preventable-events/paste-event-data.js

@@ -0,0 +1,6 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/preventable-events/paste-event.js

@@ -0,0 +1,27 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var kendo_angular_common_1 = require("@progress/kendo-angular-common");
+/**
+ * The Editor [`paste`]({% slug api_editor_editorcomponent %}#toc-paste) event.
+ */
+var EditorPasteEvent = /** @class */ (function (_super) {
+    tslib_1.__extends(EditorPasteEvent, _super);
+    /**
+     * Constructs the event arguments for the `paste` event.
+     * @hidden
+     */
+    function EditorPasteEvent(cleanedHtml, originalHtml, originalEvent) {
+        var _this = _super.call(this) || this;
+        _this.cleanedHtml = cleanedHtml;
+        _this.originalHtml = originalHtml;
+        _this.originalEvent = originalEvent;
+        return _this;
+    }
+    return EditorPasteEvent;
+}(kendo_angular_common_1.PreventableEvent));
+exports.EditorPasteEvent = EditorPasteEvent;

package/dist/npm/tools/blockquote/editor-blockquote-button.directive.js

@@ -0,0 +1,50 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var core_1 = require("@angular/core");
+var kendo_angular_toolbar_1 = require("@progress/kendo-angular-toolbar");
+var editor_component_1 = require("../../editor.component");
+var editor_command_button_1 = require("../shared/editor-command-button");
+var editor_localization_service_1 = require("../../localization/editor-localization.service");
+var tools_service_1 = require("../tools.service");
+/**
+ * A directive which configures an existing `ToolBarButtonComponent` as an Editor Blockquote tool
+ * ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
+ * The directive will predefine the `icon` and `click` event handlers of the button.
+ *
+ * @example
+ * ```ts-no-run
+ * <kendo-toolbar-button kendoEditorBlockquoteButton></kendo-toolbar-button>
+ * ```
+ *
+ * The following example demonstrates how to change the default icon that is applied by the directive.
+ *
+ * @example
+ * ```ts-no-run
+ * <kendo-toolbar-button kendoEditorBlockquoteButton icon="blogger"></kendo-toolbar-button>
+ * ```
+ */
+var EditorBlockquoteDirective = /** @class */ (function (_super) {
+    tslib_1.__extends(EditorBlockquoteDirective, _super);
+    function EditorBlockquoteDirective(button, editor, localization, toolsService) {
+        var _this = _super.call(this, 'blockquote', button, editor, localization, toolsService) || this;
+        _this.editor = editor;
+        return _this;
+    }
+    EditorBlockquoteDirective = tslib_1.__decorate([
+        core_1.Directive({
+            selector: 'kendo-toolbar-button[kendoEditorBlockquoteButton]'
+        }),
+        tslib_1.__param(1, core_1.Host()),
+        tslib_1.__metadata("design:paramtypes", [kendo_angular_toolbar_1.ToolBarButtonComponent,
+            editor_component_1.EditorComponent,
+            editor_localization_service_1.EditorLocalizationService,
+            tools_service_1.EditorToolsService])
+    ], EditorBlockquoteDirective);
+    return EditorBlockquoteDirective;
+}(editor_command_button_1.EditorCommandButton));
+exports.EditorBlockquoteDirective = EditorBlockquoteDirective;

package/dist/npm/tools/colorpicker/editor-colorpicker.component.js

@@ -34,14 +34,26 @@ var EditorColorPickerComponent = /** @class */ (function (_super) {
          */
         _this.disabled = false;
         /**
-         * Specifies whether the ColorPicker will render a gradient, palette or combo view.
+         * Specifies whether the ColorPicker will render a gradient, palette, or both in its popup.
          *
-         * @default 'palette'
+         * @default ['palette']
          */
-        _this.view = 'palette';
+        _this.views = ['palette'];
         return _this;
     }
     EditorColorPickerComponent_1 = EditorColorPickerComponent;
+    Object.defineProperty(EditorColorPickerComponent.prototype, "view", {
+        /**
+         * @hidden
+         *
+         * For backward compatibility with configurations using the deprecated "view" input.
+         */
+        set: function (view) {
+            this.views = [view];
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(EditorColorPickerComponent.prototype, "title", {
         /**
          * @hidden
@@ -123,7 +135,7 @@ var EditorColorPickerComponent = /** @class */ (function (_super) {
             editorCommand: this.editorCommand,
             paletteSettings: this.paletteSettings,
             icon: this.icon,
-            view: this.view
+            views: this.views
         });
     };
     /**
@@ -174,8 +186,13 @@ var EditorColorPickerComponent = /** @class */ (function (_super) {
     ], EditorColorPickerComponent.prototype, "disabled", void 0);
     tslib_1.__decorate([
         core_1.Input(),
-        tslib_1.__metadata("design:type", String)
-    ], EditorColorPickerComponent.prototype, "view", void 0);
+        tslib_1.__metadata("design:type", Array)
+    ], EditorColorPickerComponent.prototype, "views", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], EditorColorPickerComponent.prototype, "view", null);
     tslib_1.__decorate([
         core_1.ViewChild('toolbarTemplate', { static: true }),
         tslib_1.__metadata("design:type", core_1.TemplateRef)
@@ -200,7 +217,7 @@ var EditorColorPickerComponent = /** @class */ (function (_super) {
         core_1.Component({
             providers: [{ provide: kendo_angular_toolbar_1.ToolBarToolComponent, useExisting: core_1.forwardRef(function () { return EditorColorPickerComponent_1; }) }],
             selector: 'kendo-toolbar-colorpicker',
-            template: "\n        <ng-template #toolbarTemplate>\n            <kendo-colorpicker\n                #colorpicker\n                [view]=\"view\"\n                [format]=\"'hex'\"\n                [attr.title]=\"title\"\n                [icon]=\"icon\"\n                [value]=\"value\"\n                [paletteSettings]=\"paletteSettings\"\n                [disabled]=\"disabled\"\n                [tabindex]=\"tabindex\"\n                (valueChange)=\"handleValueChange($event)\"\n                (activeColorClick)=\"handleActiveColorClick($event)\"\n                (open)=\"onOpen(colorpicker)\"\n                (close)=\"onClose(colorpicker)\"\n            >\n            </kendo-colorpicker>\n        </ng-template>\n        <ng-template #popupTemplate>\n            <button\n                tabindex=\"-1\"\n                type=\"button\"\n                kendoButton\n                #colorPickerButton\n                class=\"k-overflow-button\"\n                [icon]=\"icon\"\n                [attr.title]=\"title\"\n                [disabled]=\"disabled\"\n                [tabindex]=\"tabindex\"\n                (click)=\"openDialog()\"\n            >\n                {{ title }}\n            </button>\n        </ng-template>\n    "
+            template: "\n        <ng-template #toolbarTemplate>\n            <kendo-colorpicker\n                #colorpicker\n                [views]=\"['palette']\"\n                [format]=\"'hex'\"\n                [attr.title]=\"title\"\n                [icon]=\"icon\"\n                [value]=\"value\"\n                [paletteSettings]=\"paletteSettings\"\n                [disabled]=\"disabled\"\n                [tabindex]=\"tabindex\"\n                (valueChange)=\"handleValueChange($event)\"\n                (activeColorClick)=\"handleActiveColorClick($event)\"\n                (open)=\"onOpen(colorpicker)\"\n                (close)=\"onClose(colorpicker)\"\n            >\n            </kendo-colorpicker>\n        </ng-template>\n        <ng-template #popupTemplate>\n            <button\n                tabindex=\"-1\"\n                type=\"button\"\n                kendoButton\n                #colorPickerButton\n                class=\"k-overflow-button\"\n                [icon]=\"icon\"\n                [attr.title]=\"title\"\n                [disabled]=\"disabled\"\n                [tabindex]=\"tabindex\"\n                (click)=\"openDialog()\"\n            >\n                {{ title }}\n            </button>\n        </ng-template>\n    "
         }),
         tslib_1.__param(0, core_1.Host()),
         tslib_1.__metadata("design:paramtypes", [editor_component_1.EditorComponent,

package/dist/npm/tools/format/editor-format-dropdownlist.component.js

@@ -64,7 +64,7 @@ var FormatDropDownListComponent = /** @class */ (function () {
         core_1.Component({
             // tslint:disable-next-line:no-forward-ref
             selector: 'kendo-editor-format-dropdownlist',
-            template: "\n        <kendo-dropdownlist\n            #element\n            kendoEditorDropDownTool\n            [defaultItem]=\"defaultItem\"\n            [textField]=\"'text'\"\n            [valueField]=\"'tag'\"\n            [data]=\"data\"\n            [(value)]=\"value\"\n            [valuePrimitive]=\"true\"\n            [itemDisabled]=\"itemDisabled\"\n            [attr.title]=\"title\"\n            [disabled]=\"disabled\"\n            [tabindex]=\"tabindex\"\n            (valueChange)=\"onValueChange($event)\"\n        >\n            <ng-template kendoDropDownListItemTemplate let-dataItem>\n                <ng-container [ngSwitch]=\"dataItem.tag\">\n                    <span *ngSwitchCase=\"'h1'\" style=\"display: block; font-size: 2em; margin-left: 0; font-weight: bold;\">\n                        {{ dataItem.text }}\n                    </span>\n\n                    <span *ngSwitchCase=\"'h2'\" style=\"display: block; font-size: 1.5em; margin-left: 0; font-weight: bold;\">\n                        {{ dataItem.text }}\n                    </span>\n\n                    <span *ngSwitchCase=\"'h3'\" style=\"display: block; font-size: 1.17em; margin-left: 0; font-weight: bold;\">\n                        {{ dataItem.text }}\n                    </span>\n\n                    <span *ngSwitchCase=\"'h4'\" style=\"display: block; font-size: 1em; margin-left: 0; font-weight: bold;\">\n                        {{ dataItem.text }}\n                    </span>\n\n                    <span *ngSwitchCase=\"'h5'\" style=\"display: block; font-size: .83em; margin-left: 0; font-weight: bold;\">\n                        {{ dataItem.text }}\n                    </span>\n\n                    <span *ngSwitchCase=\"'h6'\" style=\"display: block; font-size: .67em; margin-left: 0; font-weight: bold;\">\n                        {{ dataItem.text }}\n                    </span>\n\n                    <span *ngSwitchCase=\"'p'\" style=\"display: block; margin-left: 0;\">\n                        {{ dataItem.text }}\n                    </span>\n\n                    <span *ngSwitchCase=\"'blockquote'\" style=\"display: block; margin-left: 0;\">\n                        {{ dataItem.text }}\n                    </span>\n\n                    <span *ngSwitchDefault>{{ dataItem.text }}</span>\n                </ng-container>\n            </ng-template>\n        </kendo-dropdownlist>\n    "
+            template: "\n        <kendo-dropdownlist\n            #element\n            kendoEditorDropDownTool\n            [defaultItem]=\"defaultItem\"\n            [textField]=\"'text'\"\n            [valueField]=\"'tag'\"\n            [data]=\"data\"\n            [(value)]=\"value\"\n            [valuePrimitive]=\"true\"\n            [itemDisabled]=\"itemDisabled\"\n            [attr.title]=\"title\"\n            [disabled]=\"disabled\"\n            [tabindex]=\"tabindex\"\n            (valueChange)=\"onValueChange($event)\"\n        >\n            <ng-template kendoDropDownListItemTemplate let-dataItem>\n                <ng-container [ngSwitch]=\"dataItem.tag\">\n                    <span *ngSwitchCase=\"'h1'\" style=\"display: block; font-size: 2em; margin-left: 0; font-weight: bold;\">\n                        {{ dataItem.text }}\n                    </span>\n\n                    <span *ngSwitchCase=\"'h2'\" style=\"display: block; font-size: 1.5em; margin-left: 0; font-weight: bold;\">\n                        {{ dataItem.text }}\n                    </span>\n\n                    <span *ngSwitchCase=\"'h3'\" style=\"display: block; font-size: 1.17em; margin-left: 0; font-weight: bold;\">\n                        {{ dataItem.text }}\n                    </span>\n\n                    <span *ngSwitchCase=\"'h4'\" style=\"display: block; font-size: 1em; margin-left: 0; font-weight: bold;\">\n                        {{ dataItem.text }}\n                    </span>\n\n                    <span *ngSwitchCase=\"'h5'\" style=\"display: block; font-size: .83em; margin-left: 0; font-weight: bold;\">\n                        {{ dataItem.text }}\n                    </span>\n\n                    <span *ngSwitchCase=\"'h6'\" style=\"display: block; font-size: .67em; margin-left: 0; font-weight: bold;\">\n                        {{ dataItem.text }}\n                    </span>\n\n                    <span *ngSwitchCase=\"'p'\" style=\"display: block; margin-left: 0;\">\n                        {{ dataItem.text }}\n                    </span>\n\n                    <span *ngSwitchDefault>{{ dataItem.text }}</span>\n                </ng-container>\n            </ng-template>\n        </kendo-dropdownlist>\n    "
         })
     ], FormatDropDownListComponent);
     return FormatDropDownListComponent;