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

package/dist/fesm2015/index.js

@@ -5,19 +5,19 @@
 import { __decorate, __param, __metadata } from 'tslib';
 import { Inject, Optional, Input, ViewChild, ElementRef, Component, Injectable, EventEmitter, isDevMode, Output, HostBinding, ContentChild, ViewContainerRef, forwardRef, ChangeDetectorRef, NgZone, TemplateRef, Host, Directive, NgModule } from '@angular/core';
 import { FormControl, Validators, FormGroup, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { Subject, BehaviorSubject, zip, fromEvent, merge, interval } from 'rxjs';
-import { take, filter, auditTime, map, concatMap, takeUntil } from 'rxjs/operators';
+import { Subject, BehaviorSubject, zip, fromEvent, interval } from 'rxjs';
+import { take, map, filter, concatMap, takeUntil } from 'rxjs/operators';
 import { ToolBarComponent, ToolBarToolComponent, ToolBarButtonComponent, ToolBarModule } from '@progress/kendo-angular-toolbar';
 import { DialogContentBase, DialogRef, DialogService, DialogModule } from '@progress/kendo-angular-dialog';
-import { isDocumentAvailable, guid, KendoInput, Keys } from '@progress/kendo-angular-common';
-import { nodes, Schema, marks, Selection, SelectionRange, TextSelection, Fragment, Slice, NodeSelection, insertNode, expandToWordWrap, toggleInlineFormat, bold, cleanFormatting, applyLink, applyInlineStyle, insertText, italic, strikethrough, subscript, superscript, underline, removeLink, link, selectAll, isAligned, alignCenterRules, alignBlocks, alignRemoveRules, alignJustifyRules, alignLeftRules, alignRightRules, formatBlockElements, getHtml, indent, insertImage, toggleOrderedList, toggleUnorderedList, outdent, redo, setHtml, undo, hasMark, activeNode, canIndentAsListItem, canBeIndented, indentRules, hasNode, canOutdentAsListItem, outdentRules, getActiveMarks, expandSelection, addColumnBefore, addColumnAfter, addRowBefore, addRowAfter, deleteRow, deleteColumn, mergeCells, splitCell, deleteTable, getNodeFromSelection, getMark, getSelectionText, parseContent, Plugin, PluginKey, history, keymap, buildListKeymap, buildKeymap, baseKeymap, gapCursor, imageResizing, placeholder, EditorState, EditorView, hasSameMarkup, pasteCleanup, removeComments, sanitize, removeAttribute, sanitizeStyleAttr, sanitizeClassAttr } from '@progress/kendo-editor-common';
+import { isDocumentAvailable, guid, PreventableEvent, hasObservers, KendoInput, Keys } from '@progress/kendo-angular-common';
+import { nodes, Schema, marks, createTable, insertNode, expandToWordWrap, toggleInlineFormat, bold, cleanFormatting, applyLink, applyInlineStyle, insertText, italic, strikethrough, subscript, superscript, underline, removeLink, link, selectAll, isAligned, alignCenterRules, alignBlocks, alignRemoveRules, alignJustifyRules, alignLeftRules, alignRightRules, formatBlockElements, getHtml, indent, insertImage, toggleOrderedList, toggleUnorderedList, outdent, redo, setHtml, undo, blockquote, addColumnBefore, addColumnAfter, addRowBefore, addRowAfter, deleteRow, deleteColumn, mergeCells, splitCell, deleteTable, hasMark, activeNode, canIndentAsListItem, canBeIndented, indentRules, hasNode, canOutdentAsListItem, outdentRules, isIndented, getActiveMarks, expandSelection, getNodeFromSelection, getMark, getSelectionText, pasteCleanup, parseContent, AllSelection, TextSelection, Plugin, PluginKey, history, keymap, buildListKeymap, buildKeymap, baseKeymap, gapCursor, imageResizing, tableEditing, placeholder, EditorState, EditorView, removeComments, sanitize, removeAttribute, sanitizeStyleAttr, sanitizeClassAttr } from '@progress/kendo-editor-common';
 export { Schema, EditorState, Plugin, PluginKey, Transaction, EditorView, Decoration, DecorationSet, NodeType, Node, MarkType, Mark, InputRule, inputRules, wrappingInputRule, textblockTypeInputRule, keymap, baseKeymap, history, dropCursor, gapCursor, tableNodes, getSelectionText } from '@progress/kendo-editor-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { LocalizationService, L10N_PREFIX, RTL, MessageService, ComponentMessages } from '@progress/kendo-angular-l10n';
 import { CommonModule } from '@angular/common';
 import { DropDownListComponent, DropDownsModule } from '@progress/kendo-angular-dropdowns';
 import { ButtonModule } from '@progress/kendo-angular-buttons';
-import { ColorPickerComponent, ColorPickerModule, NumericTextBoxModule, TextBoxModule } from '@progress/kendo-angular-inputs';
+import { ColorPickerComponent, ColorPickerModule, NumericTextBoxModule, CheckBoxModule, TextBoxModule } from '@progress/kendo-angular-inputs';
 import { PopupService } from '@progress/kendo-angular-popup';
 
 /**
@@ -27,7 +27,7 @@ const 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'
 };
@@ -67,11 +67,6 @@ const getAttributes = (dom) => {
     }
     return result;
 };
-/**
- * @hidden
- */
-const serializeDOMAttrs = (el) => Array.from(el.attributes)
-    .reduce((acc, curr) => Object.assign({}, acc, { [curr.name]: curr.value }), {});
 /**
  * @hidden
  */
@@ -88,38 +83,6 @@ const createDefaultAttributes = (attrs = []) => {
  * @hidden
  */
 const hole = 0;
-/**
- * @hidden
- */
-const isSchemaNode = (schemaNodeName) => (node) => node.type.name === schemaNodeName;
-/**
- * @hidden
- */
-const isTable = isSchemaNode('table');
-/**
- * @hidden
- */
-const isTableBody = isSchemaNode('table_body');
-/**
- * @hidden
- */
-const isTableHead = isSchemaNode('table_head');
-/**
- * @hidden
- */
-const isTableFoot = isSchemaNode('table_foot');
-/**
- * @hidden
- */
-const isTableRow = isSchemaNode('table_row');
-/**
- * @hidden
- */
-const isTableCell = isSchemaNode('table_cell');
-/**
- * @hidden
- */
-const isTableHeaderCell = isSchemaNode('table_header');
 
 const createSemanticNode = (tagName) => ({
     // Uncaught SyntaxError: Mixing inline and block content (in content expression '(block | inline)*')
@@ -132,1492 +95,52 @@ const createSemanticNode = (tagName) => ({
             getAttrs: getAttributes
         }],
     toDOM: node => hasAttrs(node.attrs) ? [tagName, getAttrs(node.attrs), hole] : [tagName, hole]
-});
-/**
- * @hidden
- */
-const semanticTagNames = ['article', 'main', 'nav', 'header', 'footer', 'aside', 'section'];
-const ɵ1 = (acc, curr) => Object.assign(acc, { [curr]: createSemanticNode(curr) });
-/**
- * @hidden
- */
-const semanticNodes = semanticTagNames.reduce(ɵ1, {});
-
-/**
- * @hidden
- */
-function outerWidth(element) {
-    let width = element.offsetWidth;
-    const style = getComputedStyle(element);
-    width += parseFloat(style.marginLeft) || 0 + parseFloat(style.marginRight) || 0;
-    return width;
-}
-/**
- * @hidden
- */
-const removeEntries = (obj, predicate) => Object.keys(obj)
-    .filter(key => predicate(key))
-    .reduce((acc, curr) => Object.assign(acc, { [curr]: obj[curr] }), {});
-/**
- * @hidden
- */
-const removeEmptyEntries = (obj) => {
-    const predicate = key => obj[key] !== null && obj[key] !== undefined && obj[key] !== '';
-    return removeEntries(obj, predicate);
-};
-/**
- * @hidden
- */
-const isNullOrUndefined = (value) => value === undefined || value === null;
-/**
- * @hidden
- */
-const isPresent = (value) => !isNullOrUndefined(value);
-/**
- * @hidden
- */
-const detectIE = () => {
-    if (!isDocumentAvailable()) {
-        return false;
-    }
-    const ua = window.navigator.userAgent;
-    const msie = ua.indexOf('MSIE ');
-    const trident = ua.indexOf('Trident/');
-    return msie > 0 || trident > 0;
-};
-/**
- * @hidden
- */
-const safeString = (value) => (isNullOrUndefined(value) ? '' : value.toString());
-/**
- * @hidden
- */
-const first = (arr) => arr[0];
-/**
- * @hidden
- */
-const last = (arr) => arr[arr.length - 1];
-/**
- * @hidden
- */
-const split = (splitter) => (value) => value.split(splitter);
-/**
- * @hidden
- */
-const trim = (value) => value.trim();
-/**
- * @hidden
- */
-const filter$1 = (predicate) => (arr) => arr.filter(predicate);
-/**
- * @hidden
- */
-const getUniqueStyleValues = (style, cssStyle) => {
-    if (style.hasNodesWithoutMarks) {
-        return '';
-    }
-    const uniqueMarkValues = style.marks
-        .filter(m => m.type.name === 'style')
-        .map(m => m.attrs.style)
-        .map(safeString)
-        .map(split(';'))
-        .map(filter$1((m) => m.includes(cssStyle)))
-        // guards against empty array
-        .map((cssStyleValues) => (cssStyleValues.length !== 0 ? cssStyleValues : [`${cssStyle}: INVALID`]))
-        .map(first)
-        .map(split(':'))
-        .map(last)
-        .map(trim)
-        .reduce((acc, curr) => (acc.indexOf(curr) > -1 ? acc : [...acc, curr]), []);
-    if (uniqueMarkValues.indexOf('INVALID') > -1 || uniqueMarkValues.length !== 1) {
-        return '';
-    }
-    return uniqueMarkValues[0];
-};
-/**
- * @hidden
- */
-const conditionallyExecute = (fn) => (condition) => (param) => (condition ? fn(param) : param);
-/**
- * @hidden
- */
-const pipe = (...fns) => x => fns.reduce((y, f) => f(y), x);
-
-const setCellAttrs = nodeAttributes => {
-    let attrs = Object.assign({}, nodeAttributes);
-    if (nodeAttributes.colspan !== 1) {
-        attrs.colspan = nodeAttributes.colspan;
-    }
-    else {
-        attrs.colspan = null;
-    }
-    if (nodeAttributes.rowspan !== 1) {
-        attrs.rowspan = nodeAttributes.rowspan;
-    }
-    else {
-        attrs.rowspan = null;
-    }
-    return removeEmptyEntries(attrs);
-};
-const ɵ1$1 = node => ['table', removeEmptyEntries(node.attrs), 0], ɵ2 = node => ['tr', removeEmptyEntries(node.attrs), 0], ɵ3 = node => ['td', setCellAttrs(node.attrs), 0], ɵ4 = node => ['th', setCellAttrs(node.attrs), 0], ɵ5 = node => ['tbody', removeEmptyEntries(node.attrs), 0], ɵ6 = node => ['tfoot', removeEmptyEntries(node.attrs), 0], ɵ7 = node => ['thead', removeEmptyEntries(node.attrs), 0], ɵ8 = node => ['col', removeEmptyEntries(node.attrs)], ɵ9 = node => ['colgroup', removeEmptyEntries(node.attrs), 0];
-/**
- * @hidden
- */
-const tableNodes = {
-    // all table node names must start with table - this is needed for the commands to work properly
-    table: {
-        attrs: Object.assign({}, commonAttributes(), createDefaultAttributes(['cellspacing', 'cellpadding'])),
-        content: '(table_body | table_head | table_foot | table_colgroup)+',
-        tableRole: 'table',
-        isolating: true,
-        group: 'block',
-        parseDOM: [
-            {
-                getAttrs: serializeDOMAttrs,
-                tag: 'table'
-            }
-        ],
-        toDOM: ɵ1$1
-    },
-    table_row: {
-        content: '(table_cell | table_header)*',
-        attrs: Object.assign({}, commonAttributes()),
-        tableRole: 'row',
-        parseDOM: [
-            {
-                getAttrs: serializeDOMAttrs,
-                tag: 'tr'
-            }
-        ],
-        toDOM: ɵ2
-    },
-    table_cell: {
-        content: 'block+',
-        attrs: Object.assign({}, commonAttributes(), createDefaultAttributes(['headers']), { 
-            // this is needed for the commands
-            colspan: { default: 1 }, rowspan: { default: 1 } }),
-        tableRole: 'cell',
-        isolating: true,
-        parseDOM: [
-            {
-                getAttrs: serializeDOMAttrs,
-                tag: 'td'
-            }
-        ],
-        toDOM: ɵ3
-    },
-    table_header: {
-        content: 'block+',
-        attrs: Object.assign({}, commonAttributes(), createDefaultAttributes(['headers', 'abbr', 'scope']), { colspan: { default: 1 }, rowspan: { default: 1 } }),
-        tableRole: 'header_cell',
-        isolating: true,
-        parseDOM: [
-            {
-                getAttrs: serializeDOMAttrs,
-                tag: 'th'
-            }
-        ],
-        toDOM: ɵ4
-    },
-    table_body: {
-        attrs: Object.assign({}, commonAttributes()),
-        content: 'table_row+',
-        isolating: true,
-        parseDOM: [
-            {
-                getAttrs: serializeDOMAttrs,
-                tag: 'tbody'
-            }
-        ],
-        toDOM: ɵ5
-    },
-    table_foot: {
-        attrs: Object.assign({}, commonAttributes()),
-        content: 'table_row+',
-        isolating: true,
-        parseDOM: [
-            {
-                getAttrs: serializeDOMAttrs,
-                tag: 'tfoot'
-            }
-        ],
-        toDOM: ɵ6
-    },
-    table_head: {
-        attrs: Object.assign({}, commonAttributes()),
-        content: 'table_row+',
-        isolating: true,
-        parseDOM: [
-            {
-                getAttrs: serializeDOMAttrs,
-                tag: 'thead'
-            }
-        ],
-        toDOM: ɵ7
-    },
-    table_col: {
-        attrs: Object.assign({}, commonAttributes(), createDefaultAttributes(['span'])),
-        selectable: false,
-        atom: true,
-        parseDOM: [
-            {
-                getAttrs: serializeDOMAttrs,
-                tag: 'col'
-            }
-        ],
-        toDOM: ɵ8
-    },
-    table_colgroup: {
-        attrs: Object.assign({}, commonAttributes(), createDefaultAttributes(['span'])),
-        content: 'table_col*',
-        selectable: false,
-        parseDOM: [
-            {
-                getAttrs: serializeDOMAttrs,
-                tag: 'colgroup'
-            }
-        ],
-        toDOM: ɵ9
-    }
-};
-
-/**
- * @hidden
- */
-const marks$1 = marks;
-const nodes$1 = Object.assign(nodes, tableNodes, semanticNodes);
-/**
- * @hidden
- */
-const schema = new Schema({
-    marks: marks$1,
-    nodes: Object.assign({}, nodes$1, { blockquote: Object.assign({}, nodes$1.blockquote, { content: 'inline*' }) })
-});
-
-// Because working with row and column-spanning cells is not quite
-// trivial, this code builds up a descriptive structure for a given
-// table node. The structures are cached with the (persistent) table
-// nodes as key, so that they only have to be recomputed when the
-// content of the table changes.
-//
-// This does mean that they have to store table-relative, not
-// document-relative positions. So code that uses them will typically
-// compute the start position of the table and offset positions passed
-// to or gotten from this structure by that amount.
-let readFromCache;
-let addToCache;
-// Prefer using a weak map to cache table maps. Fall back on a
-// fixed-size cache if that's not supported.
-if (typeof WeakMap !== 'undefined') {
-    let cache = new WeakMap();
-    readFromCache = key => cache.get(key);
-    addToCache = (key, value) => {
-        cache.set(key, value);
-        return value;
-    };
-}
-else {
-    let cache = [];
-    let cacheSize = 10;
-    let cachePos = 0;
-    readFromCache = key => {
-        for (let i = 0; i < cache.length; i += 2) {
-            if (cache[i] === key) {
-                return cache[i + 1];
-            }
-        }
-    };
-    addToCache = (key, value) => {
-        if (cachePos === cacheSize) {
-            cachePos = 0;
-        }
-        cache[cachePos++] = key;
-        return (cache[cachePos++] = value);
-    };
-}
-const findWidth = (table) => {
-    let width = -1;
-    let hasRowSpan = false;
-    for (let row = 0; row < table.childCount; row++) {
-        const rowNode = table.child(row);
-        let rowWidth = 0;
-        if (hasRowSpan) {
-            for (let j = 0; j < row; j++) {
-                const prevRow = table.child(j);
-                for (let i = 0; i < prevRow.childCount; i++) {
-                    const cell = prevRow.child(i);
-                    if (j + cell.attrs.rowspan > row) {
-                        rowWidth += cell.attrs.colspan;
-                    }
-                }
-            }
-        }
-        // check if the cell spans accross multiple columns
-        for (let i = 0; i < rowNode.childCount; i++) {
-            const cell = rowNode.child(i);
-            rowWidth += cell.attrs.colspan;
-            if (cell.attrs.rowspan > 1) {
-                hasRowSpan = true;
-            }
-        }
-        if (width === -1) {
-            width = rowWidth;
-        }
-        else if (width !== rowWidth) {
-            width = Math.max(width, rowWidth);
-        }
-    }
-    return width;
-};
-const freshColWidth = attrs => {
-    if (attrs.colwidth) {
-        return attrs.colwidth.slice();
-    }
-    const result = [];
-    for (let i = 0; i < attrs.colspan; i++) {
-        result.push(0);
-    }
-    return result;
-};
-const findBadColWidths = (map$$1, colWidths, table) => {
-    if (!map$$1.problems) {
-        map$$1.problems = [];
-    }
-    for (let i = 0, seen = {}; i < map$$1.map.length; i++) {
-        const pos = map$$1.map[i];
-        if (seen[pos]) {
-            continue;
-        }
-        seen[pos] = true;
-        let node = table.nodeAt(pos);
-        let updated = null;
-        for (let j = 0; j < node.attrs.colspan; j++) {
-            const col = (i + j) % map$$1.width;
-            const colWidth = colWidths[col * 2];
-            if (colWidth != null && (!node.attrs.colwidth || node.attrs.colwidth[j] !== colWidth)) {
-                (updated || (updated = freshColWidth(node.attrs)))[j] = colWidth;
-            }
-        }
-        if (updated) {
-            map$$1.problems.unshift({ type: 'colwidth mismatch', pos, colwidth: updated });
-        }
-    }
-};
-// Compute a table map.
-const computeMap = tableNode => {
-    if (!isTable(tableNode) && !isTableBody(tableNode) && !isTableHead(tableNode) && !isTableFoot(tableNode)) {
-        throw new RangeError('Not a table node: ' + tableNode.type.name);
-    }
-    const width = findWidth(tableNode);
-    const height = tableNode.childCount;
-    const map$$1 = [];
-    let mapPos = 0;
-    let problems = null;
-    const colWidths = [];
-    for (let i = 0, e = width * height; i < e; i++) {
-        map$$1[i] = 0;
-    }
-    for (let row = 0, pos = 0; row < height; row++) {
-        const rowNode = tableNode.child(row);
-        pos++;
-        for (let i = 0;; i++) {
-            while (mapPos < map$$1.length && map$$1[mapPos] !== 0) {
-                mapPos++;
-            }
-            if (i === rowNode.childCount) {
-                break;
-            }
-            const cellNode = rowNode.child(i);
-            const { colspan, rowspan, colwidth } = cellNode.attrs;
-            for (let h = 0; h < rowspan; h++) {
-                if (h + row >= height) {
-                    (problems || (problems = [])).push({ type: 'overlong_rowspan', pos, n: rowspan - h });
-                    break;
-                }
-                const start = mapPos + h * width;
-                for (let w = 0; w < colspan; w++) {
-                    if (map$$1[start + w] === 0) {
-                        map$$1[start + w] = pos;
-                    }
-                    else {
-                        (problems || (problems = [])).push({ type: 'collision', row, pos, n: colspan - w });
-                    }
-                    const colW = colwidth && colwidth[w];
-                    if (colW) {
-                        const widthIndex = ((start + w) % width) * 2, prev = colWidths[widthIndex];
-                        if (prev == null || (prev !== colW && colWidths[widthIndex + 1] === 1)) {
-                            colWidths[widthIndex] = colW;
-                            colWidths[widthIndex + 1] = 1;
-                        }
-                        else if (prev === colW) {
-                            colWidths[widthIndex + 1]++;
-                        }
-                    }
-                }
-            }
-            mapPos += colspan;
-            pos += cellNode.nodeSize;
-        }
-        const expectedPos = (row + 1) * width;
-        let missing = 0;
-        while (mapPos < expectedPos) {
-            if (map$$1[mapPos++] === 0) {
-                missing++;
-            }
-        }
-        if (missing) {
-            (problems || (problems = [])).push({ type: 'missing', row, n: missing });
-        }
-        pos++;
-    }
-    const tableMap = new TableMap(width, height, map$$1, problems);
-    let badWidths = false;
-    // For columns that have defined widths, but whose widths disagree
-    // between rows, fix up the cells whose width doesn't match the
-    // computed one.
-    for (let i = 0; !badWidths && i < colWidths.length; i += 2) {
-        if (colWidths[i] != null && colWidths[i + 1] < height) {
-            badWidths = true;
-        }
-    }
-    if (badWidths) {
-        findBadColWidths(tableMap, colWidths, tableNode);
-    }
-    return tableMap;
-};
-/**
- * @hidden
- */
-class Rect {
-    constructor(left, top, right, bottom) {
-        this.left = left;
-        this.top = top;
-        this.right = right;
-        this.bottom = bottom;
-    }
-}
-/**
- * @hidden
- */
-class TableMap {
-    // :: (Node) → TableMap
-    // Find the table map for the given table node.
-    static get(table) {
-        return readFromCache(table) || addToCache(table, computeMap(table));
-    }
-    constructor(width, height, map$$1, problems) {
-        // :: number The width of the table
-        this.width = width;
-        // :: number The table's height
-        this.height = height;
-        // :: [number] A width * height array with the start position of
-        // the cell covering that part of the table in each slot
-        this.map = map$$1;
-        // An optional array of problems (cell overlap or non-rectangular
-        // shape) for the table, used by the table normalizer.
-        this.problems = problems;
-    }
-    // :: (number) → Rect
-    // Find the dimensions of the cell at the given position.
-    findCell(pos) {
-        for (let i = 0; i < this.map.length; i++) {
-            const curPos = this.map[i];
-            if (curPos !== pos) {
-                continue;
-            }
-            const left = i % this.width;
-            const top = Math.floor(i / this.width);
-            let right = left + 1;
-            let bottom = top + 1;
-            for (let j = 1; right < this.width && this.map[i + j] === curPos; j++) {
-                right++;
-            }
-            for (let j = 1; bottom < this.height && this.map[i + this.width * j] === curPos; j++) {
-                bottom++;
-            }
-            return new Rect(left, top, right, bottom);
-        }
-        throw new RangeError('No cell with offset ' + pos + ' found');
-    }
-    // :: (number) → number
-    // Find the left side of the cell at the given position.
-    colCount(pos) {
-        for (let i = 0; i < this.map.length; i++) {
-            if (this.map[i] === pos) {
-                return i % this.width;
-            }
-        }
-        throw new RangeError('No cell with offset ' + pos + ' found');
-    }
-    // :: (number, string, number) → ?number
-    // Find the next cell in the given direction, starting from the cell
-    // at `pos`, if any.
-    nextCell(pos, axis, dir) {
-        const { left, right, top, bottom } = this.findCell(pos);
-        if (axis === 'horiz') {
-            if (dir < 0 ? left === 0 : right === this.width) {
-                return null;
-            }
-            return this.map[top * this.width + (dir < 0 ? left - 1 : right)];
-        }
-        else {
-            if (dir < 0 ? top === 0 : bottom === this.height) {
-                return null;
-            }
-            return this.map[left + this.width * (dir < 0 ? top - 1 : bottom)];
-        }
-    }
-    // :: (number, number) → Rect
-    // Get the rectangle spanning the two given cells.
-    rectBetween(a, b) {
-        const { left: leftA, right: rightA, top: topA, bottom: bottomA } = this.findCell(a);
-        const { left: leftB, right: rightB, top: topB, bottom: bottomB } = this.findCell(b);
-        return new Rect(Math.min(leftA, leftB), Math.min(topA, topB), Math.max(rightA, rightB), Math.max(bottomA, bottomB));
-    }
-    // :: (Rect) → [number]
-    // Return the position of all cells that have the top left corner in
-    // the given rectangle.
-    cellsInRect(rect) {
-        const result = [];
-        const seen = {};
-        for (let row = rect.top; row < rect.bottom; row++) {
-            for (let col = rect.left; col < rect.right; col++) {
-                const index = row * this.width + col, pos = this.map[index];
-                if (seen[pos]) {
-                    continue;
-                }
-                seen[pos] = true;
-                if ((col !== rect.left || !col || this.map[index - 1] !== pos) &&
-                    (row !== rect.top || !row || this.map[index - this.width] !== pos)) {
-                    result.push(pos);
-                }
-            }
-        }
-        return result;
-    }
-    // :: (number, number, Node) → number
-    // Return the position at which the cell at the given row and column
-    // starts, or would start, if a cell started there.
-    positionAt(row, col, table) {
-        for (let i = 0, rowStart = 0;; i++) {
-            const rowEnd = rowStart + table.child(i).nodeSize;
-            if (i === row) {
-                let index = col + row * this.width, rowEndIndex = (row + 1) * this.width;
-                // Skip past cells from previous rows (via rowspan)
-                while (index < rowEndIndex && this.map[index] < rowStart) {
-                    index++;
-                }
-                return index === rowEndIndex ? rowEnd - 1 : this.map[index];
-            }
-            rowStart = rowEnd;
-        }
-    }
-}
-
-/**
- * @hidden
- */
-// ::- A [`Selection`](http://prosemirror.net/docs/ref/#state.Selection)
-// subclass that represents a cell selection spanning part of a table.
-// With the plugin enabled, these will be created when the user
-// selects across cells, and will be drawn by giving selected cells a
-// `selectedCell` CSS class.
-class CellSelection extends Selection {
-    // :: (ResolvedPos, ?ResolvedPos) → CellSelection
-    // Returns the smallest column selection that covers the given anchor
-    // and head cell.
-    static colSelection($anchorCell, $headCell = $anchorCell) {
-        let map$$1 = TableMap.get($anchorCell.node(-1));
-        let start = $anchorCell.start(-1);
-        let anchorRect = map$$1.findCell($anchorCell.pos - start);
-        let headRect = map$$1.findCell($headCell.pos - start);
-        let doc = $anchorCell.node(0);
-        if (anchorRect.top <= headRect.top) {
-            if (anchorRect.top > 0) {
-                $anchorCell = doc.resolve(start + map$$1.map[anchorRect.left]);
-            }
-            if (headRect.bottom < map$$1.height) {
-                $headCell = doc.resolve(start + map$$1.map[map$$1.width * (map$$1.height - 1) + headRect.right - 1]);
-            }
-        }
-        else {
-            if (headRect.top > 0) {
-                $headCell = doc.resolve(start + map$$1.map[headRect.left]);
-            }
-            if (anchorRect.bottom < map$$1.height) {
-                $anchorCell = doc.resolve(start + map$$1.map[map$$1.width * (map$$1.height - 1) + anchorRect.right - 1]);
-            }
-        }
-        return new CellSelection($anchorCell, $headCell);
-    }
-    // :: (ResolvedPos, ?ResolvedPos) → CellSelection
-    // Returns the smallest row selection that covers the given anchor
-    // and head cell.
-    static rowSelection($anchorCell, $headCell = $anchorCell) {
-        let map$$1 = TableMap.get($anchorCell.node(-1));
-        let start = $anchorCell.start(-1);
-        let anchorRect = map$$1.findCell($anchorCell.pos - start);
-        let headRect = map$$1.findCell($headCell.pos - start);
-        let doc = $anchorCell.node(0);
-        if (anchorRect.left <= headRect.left) {
-            if (anchorRect.left > 0) {
-                $anchorCell = doc.resolve(start + map$$1.map[anchorRect.top * map$$1.width]);
-            }
-            if (headRect.right < map$$1.width) {
-                $headCell = doc.resolve(start + map$$1.map[map$$1.width * (headRect.top + 1) - 1]);
-            }
-        }
-        else {
-            if (headRect.left > 0) {
-                $headCell = doc.resolve(start + map$$1.map[headRect.top * map$$1.width]);
-            }
-            if (anchorRect.right < map$$1.width) {
-                $anchorCell = doc.resolve(start + map$$1.map[map$$1.width * (anchorRect.top + 1) - 1]);
-            }
-        }
-        return new CellSelection($anchorCell, $headCell);
-    }
-    static fromJSON(doc, json) {
-        return new CellSelection(doc.resolve(json.anchor), doc.resolve(json.head));
-    }
-    // :: (Node, number, ?number) → CellSelection
-    static create(doc, anchorCell, headCell = anchorCell) {
-        return new CellSelection(doc.resolve(anchorCell), doc.resolve(headCell));
-    }
-    // :: (ResolvedPos, ?ResolvedPos)
-    // A table selection is identified by its anchor and head cells. The
-    // positions given to this constructor should point _before_ two
-    // cells in the same table. They may be the same, to select a single
-    // cell.
-    constructor($anchorCell, $headCell = $anchorCell) {
-        let table = $anchorCell.node(-1), map$$1 = TableMap.get(table), start = $anchorCell.start(-1);
-        let rect = map$$1.rectBetween($anchorCell.pos - start, $headCell.pos - start);
-        let doc = $anchorCell.node(0);
-        let cells = map$$1.cellsInRect(rect).filter(p => p !== $headCell.pos - start);
-        // Make the head cell the first range, so that it counts as the
-        // primary part of the selection
-        cells.unshift($headCell.pos - start);
-        let ranges = cells.map(pos => {
-            let cell = table.nodeAt(pos), from = pos + start + 1;
-            return new SelectionRange(doc.resolve(from), doc.resolve(from + cell.content.size));
-        });
-        super(ranges[0].$from, ranges[0].$to, ranges);
-        // :: ResolvedPos
-        // A resolved position pointing _in front of_ the anchor cell (the one
-        // that doesn't move when extending the selection).
-        this.$anchorCell = $anchorCell;
-        // :: ResolvedPos
-        // A resolved position pointing in front of the head cell (the one
-        // moves when extending the selection).
-        this.$headCell = $headCell;
-    }
-    map(doc, mapping) {
-        let $anchorCell = doc.resolve(mapping.map(this.$anchorCell.pos));
-        let $headCell = doc.resolve(mapping.map(this.$headCell.pos));
-        if (pointsAtCell($anchorCell) && pointsAtCell($headCell) && inSameTable($anchorCell, $headCell)) {
-            let tableChanged = this.$anchorCell.node(-1) !== $anchorCell.node(-1);
-            if (tableChanged && this.isRowSelection()) {
-                return CellSelection.rowSelection($anchorCell, $headCell);
-            }
-            else {
-                if (tableChanged && this.isColSelection()) {
-                    return CellSelection.colSelection($anchorCell, $headCell);
-                }
-                else {
-                    return new CellSelection($anchorCell, $headCell);
-                }
-            }
-        }
-        return TextSelection.between($anchorCell, $headCell);
-    }
-    // :: () → Slice
-    // Returns a rectangular slice of table rows containing the selected
-    // cells.
-    content() {
-        let table = this.$anchorCell.node(-1), map$$1 = TableMap.get(table), start = this.$anchorCell.start(-1);
-        let rect = map$$1.rectBetween(this.$anchorCell.pos - start, this.$headCell.pos - start);
-        let seen = {}, rows = [];
-        for (let row = rect.top; row < rect.bottom; row++) {
-            let rowContent = [];
-            for (let index = row * map$$1.width + rect.left, col = rect.left; col < rect.right; col++, index++) {
-                let pos = map$$1.map[index];
-                if (!seen[pos]) {
-                    seen[pos] = true;
-                    let cellRect = map$$1.findCell(pos), cell = table.nodeAt(pos);
-                    let extraLeft = rect.left - cellRect.left, extraRight = cellRect.right - rect.right;
-                    if (extraLeft > 0 || extraRight > 0) {
-                        let attrs = cell.attrs;
-                        if (extraLeft > 0) {
-                            attrs = removeColSpan(attrs, 0, extraLeft);
-                        }
-                        if (extraRight > 0) {
-                            attrs = removeColSpan(attrs, attrs.colspan - extraRight, extraRight);
-                        }
-                        if (cellRect.left < rect.left) {
-                            cell = cell.type.createAndFill(attrs);
-                        }
-                        else {
-                            cell = cell.type.create(attrs, cell.content);
-                        }
-                    }
-                    if (cellRect.top < rect.top || cellRect.bottom > rect.bottom) {
-                        let attrs = setAttr(cell.attrs, 'rowspan', Math.min(cellRect.bottom, rect.bottom) - Math.max(cellRect.top, rect.top));
-                        if (cellRect.top < rect.top) {
-                            cell = cell.type.createAndFill(attrs);
-                        }
-                        else {
-                            cell = cell.type.create(attrs, cell.content);
-                        }
-                    }
-                    rowContent.push(cell);
-                }
-            }
-            rows.push(table.child(row).copy(Fragment.from(rowContent)));
-        }
-        const fragment = this.isColSelection() && this.isRowSelection() ? table : rows;
-        return new Slice(Fragment.from(fragment), 1, 1);
-    }
-    replace(tr, content = Slice.empty) {
-        let mapFrom = tr.steps.length;
-        let ranges = this.ranges;
-        for (let i = 0; i < ranges.length; i++) {
-            let { $from, $to } = ranges[i];
-            let mapping = tr.mapping.slice(mapFrom);
-            tr.replace(mapping.map($from.pos), mapping.map($to.pos), i ? Slice.empty : content);
-        }
-        let sel = Selection.findFrom(tr.doc.resolve(tr.mapping.slice(mapFrom).map(this.to)), -1);
-        if (sel) {
-            tr.setSelection(sel);
-        }
-    }
-    replaceWith(tr, node) {
-        this.replace(tr, new Slice(Fragment.from(node), 0, 0));
-    }
-    forEachCell(f) {
-        let table = this.$anchorCell.node(-1);
-        let map$$1 = TableMap.get(table);
-        let start = this.$anchorCell.start(-1);
-        let cells = map$$1.cellsInRect(map$$1.rectBetween(this.$anchorCell.pos - start, this.$headCell.pos - start));
-        for (let i = 0; i < cells.length; i++) {
-            f(table.nodeAt(cells[i]), start + cells[i]);
-        }
-    }
-    // :: () → bool
-    // True if this selection goes all the way from the top to the
-    // bottom of the table.
-    isColSelection() {
-        let anchorTop = this.$anchorCell.index(-1), headTop = this.$headCell.index(-1);
-        if (Math.min(anchorTop, headTop) > 0) {
-            return false;
-        }
-        let anchorBot = anchorTop + this.$anchorCell.nodeAfter.attrs.rowspan;
-        let headBot = headTop + this.$headCell.nodeAfter.attrs.rowspan;
-        return Math.max(anchorBot, headBot) === this.$headCell.node(-1).childCount;
-    }
-    // :: () → bool
-    // True if this selection goes all the way from the left to the
-    // right of the table.
-    isRowSelection() {
-        let map$$1 = TableMap.get(this.$anchorCell.node(-1));
-        let start = this.$anchorCell.start(-1);
-        let anchorLeft = map$$1.colCount(this.$anchorCell.pos - start);
-        let headLeft = map$$1.colCount(this.$headCell.pos - start);
-        if (Math.min(anchorLeft, headLeft) > 0) {
-            return false;
-        }
-        let anchorRight = anchorLeft + this.$anchorCell.nodeAfter.attrs.colspan;
-        let headRight = headLeft + this.$headCell.nodeAfter.attrs.colspan;
-        return Math.max(anchorRight, headRight) === map$$1.width;
-    }
-    eq(other) {
-        return (other instanceof CellSelection && other.$anchorCell.pos === this.$anchorCell.pos && other.$headCell.pos === this.$headCell.pos);
-    }
-    toJSON() {
-        return { type: 'cell', anchor: this.$anchorCell.pos, head: this.$headCell.pos };
-    }
-    getBookmark() {
-        return new CellBookmark(this.$anchorCell.pos, this.$headCell.pos);
-    }
-}
-CellSelection.prototype.visible = false;
-Selection.jsonID('table_cell', CellSelection);
-class CellBookmark {
-    constructor(anchor, head) {
-        this.anchor = anchor;
-        this.head = head;
-    }
-    map(mapping) {
-        return new CellBookmark(mapping.map(this.anchor), mapping.map(this.head));
-    }
-    resolve(doc) {
-        let $anchorCell = doc.resolve(this.anchor), $headCell = doc.resolve(this.head);
-        if ($anchorCell.parent.type.spec.tableRole === 'row' &&
-            $headCell.parent.type.spec.tableRole === 'row' &&
-            $anchorCell.index() < $anchorCell.parent.childCount &&
-            $headCell.index() < $headCell.parent.childCount &&
-            inSameTable($anchorCell, $headCell)) {
-            return new CellSelection($anchorCell, $headCell);
-        }
-        else {
-            return Selection.near($headCell, 1);
-        }
-    }
-}
-
-/**
- * @hidden
- */
-const findParentNodeClosestToPos = ($pos, predicate) => {
-    for (let i = $pos.depth; i > 0; i--) {
-        const node = $pos.node(i);
-        if (predicate(node)) {
-            return {
-                start: $pos.start(i),
-                pos: i > 0 ? $pos.before(i) : 0,
-                depth: i,
-                node
-            };
-        }
-    }
-};
-/**
- * @hidden
- */
-const createTable = (nodes$$1, rows, columns) => {
-    const { table, table_body, table_row, table_cell } = nodes$$1;
-    const tableRows = [];
-    let cells;
-    for (let r = 0; r < rows + 1; r++) {
-        cells = [];
-        for (let c = 0; c < columns + 1; c++) {
-            cells.push(table_cell.createAndFill());
-        }
-        tableRows.push(table_row.createAndFill(undefined, cells));
-    }
-    const body = table_body.createAndFill(undefined, tableRows);
-    return table.createAndFill(undefined, body);
-};
-/**
- * @hidden
- */
-const isInTable = (state) => {
-    const $head = state.selection.$head;
-    for (let d = $head.depth; d > 0; d--) {
-        if (isTableRow($head.node(d))) {
-            return true;
-        }
-    }
-    return false;
-};
-/**
- * @hidden
- */
-const setAttr = (attrs, name, value) => {
-    const result = {};
-    // tslint:disable-next-line
-    for (const prop in attrs) {
-        result[prop] = attrs[prop];
-    }
-    result[name] = value;
-    return result;
-};
-const cellNear = ($pos) => {
-    for (let after = $pos.nodeAfter, pos = $pos.pos; after; after = after.firstChild, pos++) {
-        const role = after.type.spec.tableRole;
-        if (role === 'cell' || role === 'header_cell') {
-            return $pos.doc.resolve(pos);
-        }
-    }
-    for (let before = $pos.nodeBefore, pos = $pos.pos; before; before = before.lastChild, pos--) {
-        const role = before.type.spec.tableRole;
-        if (role === 'cell' || role === 'header_cell') {
-            return $pos.doc.resolve(pos - before.nodeSize);
-        }
-    }
-};
-const cellAround = ($pos) => {
-    for (let d = $pos.depth - 1; d > 0; d--) {
-        if (isTableRow($pos.node(d))) {
-            return $pos.node(0).resolve($pos.before(d + 1));
-        }
-    }
-    return null;
-};
-const selectionCell = (sel) => {
-    if (sel instanceof CellSelection && sel.$anchorCell) {
-        return sel.$anchorCell.pos > sel.$headCell.pos ? sel.$anchorCell : sel.$headCell;
-    }
-    else if (sel instanceof NodeSelection && sel.node && isTableCell(sel.node)) {
-        return sel.$anchor;
-    }
-    return cellAround(sel.$head) || cellNear(sel.$head);
-};
-/**
- * @hidden
- */
-// Helper to get the selected rectangle in a table, if any. Adds table
-// map, table node, and table start offset to the object for
-// convenience.
-const selectedRect = (sel) => {
-    // create arr of rect for each table section
-    // there has to be a rect for thead, tbody and tfoot(if each exists)
-    // and NOT for colgroups
-    const $pos = selectionCell(sel);
-    const table = $pos.node(-1);
-    const tableStart = $pos.start(-1);
-    const map$$1 = TableMap.get(table);
-    const rect = sel instanceof CellSelection
-        ? map$$1.rectBetween(sel.$anchorCell.pos - tableStart, sel.$headCell.pos - tableStart)
-        : map$$1.findCell($pos.pos - tableStart);
-    rect.tableStart = tableStart;
-    rect.map = map$$1;
-    rect.table = table;
-    return rect;
-};
-/**
- * @hidden
- */
-// this has to be removed since the schema should not have roles inside NodeSpec.
-const tableNodeTypes = (schema) => {
-    let result = schema.cached.tableNodeTypes;
-    if (!result) {
-        result = schema.cached.tableNodeTypes = {};
-        // tslint:disable-next-line
-        for (const name in schema.nodes) {
-            const type = schema.nodes[name];
-            const role = type.spec.tableRole;
-            if (role) {
-                result[role] = type;
-            }
-        }
-    }
-    return result;
-};
-/**
- * @hidden
- */
-const rowIsHeader = (map$$1, table, row) => {
-    const headerCell = tableNodeTypes(table.type.schema).header_cell;
-    for (let col = 0; col < map$$1.width; col++) {
-        if (table.nodeAt(map$$1.map[col + row * map$$1.width]).type !== headerCell) {
-            return false;
-        }
-    }
-    return true;
-};
-/**
- * @hidden
- */
-const addColSpan = (attrs, pos, n = 1) => {
-    const result = setAttr(attrs, 'colspan', attrs.colspan + n);
-    if (result.colwidth) {
-        result.colwidth = result.colwidth.slice();
-        for (let i = 0; i < n; i++) {
-            result.colwidth.splice(pos, 0, 0);
-        }
-    }
-    return result;
-};
-/**
- * @hidden
- */
-const removeColSpan = (attrs, pos, n = 1) => {
-    const result = setAttr(attrs, 'colspan', attrs.colspan - n);
-    if (result.colwidth) {
-        result.colwidth = result.colwidth.slice();
-        result.colwidth.splice(pos, n);
-        if (!result.colwidth.some(w => w > 0)) {
-            result.colwidth = null;
-        }
-    }
-    return result;
-};
-/**
- * @hidden
- */
-const isCellEmpty = cell => {
-    const c = cell.content;
-    return c.childCount === 1 && c.firstChild.isTextblock && c.firstChild.childCount === 0;
-};
-const cellWrapping = ($pos) => {
-    for (let d = $pos.depth; d > 0; d--) {
-        // Sometimes the cell can be in the same depth.
-        const role = $pos.node(d).type.spec.tableRole;
-        if (role === 'cell' || role === 'header_cell') {
-            return $pos.node(d);
-        }
-    }
-    return null;
-};
-/**
- * @hidden
- */
-// Split a selected cell, whose rowpan or colspan is greater than one,
-// into smaller cells with the cell type (th, td) returned by getType function.
-const splitCellWithType = getCellType => {
-    return (state, dispatch) => {
-        const sel = state.selection;
-        let cellNode;
-        let cellPos;
-        if (!(sel instanceof CellSelection)) {
-            cellNode = cellWrapping(sel.$from);
-            if (!cellNode) {
-                return false;
-            }
-            cellPos = cellAround(sel.$from).pos;
-        }
-        else {
-            if (sel.$anchorCell.pos !== sel.$headCell.pos) {
-                return false;
-            }
-            cellNode = sel.$anchorCell.nodeAfter;
-            cellPos = sel.$anchorCell.pos;
-        }
-        if (cellNode.attrs.colspan === 1 && cellNode.attrs.rowspan === 1) {
-            return false;
-        }
-        if (dispatch) {
-            let baseAttrs = cellNode.attrs;
-            const attrs = [];
-            const colwidth = baseAttrs.colwidth;
-            if (baseAttrs.rowspan > 1) {
-                baseAttrs = setAttr(baseAttrs, 'rowspan', 1);
-            }
-            if (baseAttrs.colspan > 1) {
-                baseAttrs = setAttr(baseAttrs, 'colspan', 1);
-            }
-            const rect = selectedRect(state);
-            const tr = state.tr;
-            for (let i = 0; i < rect.right - rect.left; i++) {
-                attrs.push(colwidth ? setAttr(baseAttrs, 'colwidth', colwidth && colwidth[i] ? [colwidth[i]] : null) : baseAttrs);
-            }
-            let lastCell;
-            for (let row = rect.top; row < rect.bottom; row++) {
-                let pos = rect.map.positionAt(row, rect.left, rect.table);
-                if (row === rect.top) {
-                    pos += cellNode.nodeSize;
-                }
-                for (let col = rect.left, i = 0; col < rect.right; col++, i++) {
-                    if (col === rect.left && row === rect.top) {
-                        continue;
-                    }
-                    tr.insert((lastCell = tr.mapping.map(pos + rect.tableStart, 1)), getCellType({ node: cellNode, row, col }).createAndFill(attrs[i]));
-                }
-            }
-            tr.setNodeMarkup(cellPos, getCellType({ node: cellNode, row: rect.top, col: rect.left }), attrs[0]);
-            if (sel instanceof CellSelection) {
-                tr.setSelection(new CellSelection(tr.doc.resolve(sel.$anchorCell.pos), lastCell && tr.doc.resolve(lastCell)));
-            }
-            dispatch(tr);
-        }
-        return true;
-    };
-};
-/**
- * @hidden
- */
-const pointsAtCell = ($pos) => {
-    return isTableRow($pos.parent) && $pos.nodeAfter;
-};
-/**
- * @hidden
- */
-const inSameTable = ($a, $b) => {
-    return $a.depth === $b.depth && $a.pos >= $b.start(-1) && $a.pos <= $b.end(-1);
-};
-/**
- * @hidden
- */
-const cellsOverlapRectangle = ({ width, height, map: map$$1 }, rect) => {
-    let indexTop = rect.top * width + rect.left;
-    let indexLeft = indexTop;
-    let indexBottom = (rect.bottom - 1) * width + rect.left;
-    let indexRight = indexTop + (rect.right - rect.left - 1);
-    for (let i = rect.top; i < rect.bottom; i++) {
-        if ((rect.left > 0 && map$$1[indexLeft] === map$$1[indexLeft - 1]) || (rect.right < width && map$$1[indexRight] === map$$1[indexRight + 1])) {
-            return true;
-        }
-        indexLeft += width;
-        indexRight += width;
-    }
-    for (let i = rect.left; i < rect.right; i++) {
-        if ((rect.top > 0 && map$$1[indexTop] === map$$1[indexTop - width]) ||
-            (rect.bottom < height && map$$1[indexBottom] === map$$1[indexBottom + width])) {
-            return true;
-        }
-        indexTop++;
-        indexBottom++;
-    }
-    return false;
-};
-
-/**
- * @hidden
- */
-const insertTable = (attrs) => (state, dispatch) => {
-    const newTable = createTable(state.schema.nodes, attrs.rows, attrs.cols);
-    if (newTable) {
-        insertNode(newTable, true)(state, dispatch);
-    }
-};
-const addTableGroupColumn = (tr, { left, right }, col, mainTable, requiredGroup, doc) => {
-    let refColumn = col > 0 ? -1 : 0;
-    // not sure if this should be deleted
-    // if (columnIsHeader(map, table, col + refColumn)) {
-    //     refColumn = col === 0 || col === map.width ? null : 0;
-    // }
-    let rect;
-    mainTable.node.descendants((tableChildNode, offset) => {
-        if (requiredGroup(tableChildNode)) {
-            let i = -1;
-            tableChildNode.firstChild.descendants((childNode, pos) => {
-                if (isTableCell(childNode) || isTableHeaderCell(childNode)) {
-                    i = i + 1;
-                    if (i === right || i === left) {
-                        const selection = new Selection(doc.resolve(pos + offset + mainTable.start), doc.resolve(pos + offset + mainTable.start));
-                        rect = selectedRect(selection);
-                    }
-                }
-            });
-        }
-    });
-    // Do nothing if thead, tfoot or tbody is missing
-    if (!rect) {
-        return tr;
-    }
-    for (let row = 0; row < rect.map.height; row++) {
-        const index = row * rect.map.width + col;
-        // If this position falls inside a col-spanning cell
-        if (col > 0 && col < rect.map.width && rect.map.map[index - 1] === rect.map.map[index]) {
-            const pos = rect.map.map[index];
-            const cell = rect.table.nodeAt(pos);
-            tr.setNodeMarkup(tr.mapping.map(rect.tableStart + pos), null, addColSpan(cell.attrs, col - rect.map.colCount(pos)));
-            // Skip ahead if rowspan > 1
-            row += cell.attrs.rowspan - 1;
-        }
-        else {
-            const type = rect.table.nodeAt(rect.map.map[index + refColumn]).type;
-            const pos = rect.map.positionAt(row, col, rect.table);
-            tr.insert(tr.mapping.map(rect.tableStart + pos), type.createAndFill());
-        }
-    }
-    return tr;
-};
-const removeTableGroupColumn = (tr, { right, left }, mainTable, requiredGroup, doc) => {
-    let rect;
-    mainTable.node.descendants((tableChildNode, offset) => {
-        if (requiredGroup(tableChildNode)) {
-            let i = -1;
-            tableChildNode.firstChild.descendants((childNode, pos) => {
-                if (isTableCell(childNode) || isTableHeaderCell(childNode)) {
-                    i = i + 1;
-                    if (i >= left && i < right) {
-                        const resolvedPos = doc.resolve(pos + offset + mainTable.start + childNode.nodeSize);
-                        const selection = new Selection(resolvedPos, resolvedPos);
-                        rect = selectedRect(selection);
-                    }
-                }
-            });
-        }
-    });
-    // Do nothing if thead, tfoot or tbody is missing
-    if (!rect) {
-        return;
-    }
-    for (let i = rect.right - 1;; i--) {
-        removeColumn(tr, rect, i);
-        if (i === rect.left) {
-            break;
-        }
-        rect.table = rect.tableStart ? tr.doc.nodeAt(rect.tableStart - 1) : tr.doc;
-        rect.map = TableMap.get(rect.table);
-    }
-    return;
-};
-const removeColumn = (tr, { map: map$$1, table, tableStart }, col) => {
-    for (let row = 0; row < map$$1.height;) {
-        const index = row * map$$1.width + col;
-        const pos = map$$1.map[index];
-        const cell = table.nodeAt(pos);
-        // If this is part of a col-spanning cell
-        if ((col > 0 && map$$1.map[index - 1] === pos) || (col < map$$1.width - 1 && map$$1.map[index + 1] === pos)) {
-            tr.setNodeMarkup(tr.mapping.map(tableStart + pos), null, removeColSpan(cell.attrs, col - map$$1.colCount(pos)));
-        }
-        else {
-            const start = tr.mapping.map(tableStart + pos);
-            tr.delete(start, start + cell.nodeSize);
-        }
-        row += cell.attrs.rowspan;
-    }
-};
-/**
- * @hidden
- */
-// Command to add a column before the column with the selection.
-const addColumnBefore$1 = (state, dispatch) => {
-    if (!isInTable(state)) {
-        return false;
-    }
-    if (dispatch) {
-        const rect = selectedRect(state.selection);
-        const mainTable = findParentNodeClosestToPos(state.selection.$anchor, isTable);
-        const tHeadTr = addTableGroupColumn(state.tr, rect, rect.left, mainTable, isTableHead, state.doc);
-        const tBodyTr = addTableGroupColumn(tHeadTr, rect, rect.left, mainTable, isTableBody, state.doc);
-        const tFootTr = addTableGroupColumn(tBodyTr, rect, rect.left, mainTable, isTableFoot, state.doc);
-        dispatch(tFootTr);
-    }
-    return true;
-};
-/**
- * @hidden
- */
-// Command to add a column after the column with the selection.
-const addColumnAfter$1 = (state, dispatch) => {
-    if (!isInTable(state)) {
-        return false;
-    }
-    if (dispatch) {
-        const rect = selectedRect(state.selection);
-        const mainTable = findParentNodeClosestToPos(state.selection.$anchor, isTable);
-        const theadTr = addTableGroupColumn(state.tr, rect, rect.right, mainTable, isTableHead, state.doc);
-        const tBodyTr = addTableGroupColumn(theadTr, rect, rect.right, mainTable, isTableBody, state.doc);
-        const tFootTr = addTableGroupColumn(tBodyTr, rect, rect.right, mainTable, isTableFoot, state.doc);
-        dispatch(tFootTr);
-    }
-    return true;
-};
-const addRow = (tr, { map: map$$1, tableStart, table }, row) => {
-    let rowPos = tableStart;
-    for (let i = 0; i < row; i++) {
-        rowPos += table.child(i).nodeSize;
-    }
-    const cells = [];
-    let refRow = row > 0 ? -1 : 0;
-    if (rowIsHeader(map$$1, table, row + refRow)) {
-        refRow = row === 0 || row === map$$1.height ? null : 0;
-    }
-    for (let col = 0, index = map$$1.width * row; col < map$$1.width; col++, index++) {
-        // Covered by a rowspan cell
-        if (row > 0 && row < map$$1.height && map$$1.map[index] === map$$1.map[index - map$$1.width]) {
-            const pos = map$$1.map[index];
-            const attrs = table.nodeAt(pos).attrs;
-            tr.setNodeMarkup(tableStart + pos, null, setAttr(attrs, 'rowspan', attrs.rowspan + 1));
-            col += attrs.colspan - 1;
-        }
-        else {
-            const type = refRow == null ? tableNodeTypes(table.type.schema).cell : table.nodeAt(map$$1.map[index + refRow * map$$1.width]).type;
-            cells.push(type.createAndFill());
-        }
-    }
-    tr.insert(rowPos, tableNodeTypes(table.type.schema).row.create(null, cells));
-    return tr;
-};
-/**
- * @hidden
- */
-// Add a table row before the selection.
-const addRowBefore$1 = (state, dispatch) => {
-    if (!isInTable(state)) {
-        return false;
-    }
-    if (dispatch) {
-        const rect = selectedRect(state.selection);
-        dispatch(addRow(state.tr, rect, rect.top));
-    }
-    return true;
-};
-/**
- * @hidden
- */
-// Add a table row after the selection.
-const addRowAfter$1 = (state, dispatch) => {
-    if (!isInTable(state)) {
-        return false;
-    }
-    if (dispatch) {
-        const rect = selectedRect(state.selection);
-        dispatch(addRow(state.tr, rect, rect.bottom));
-    }
-    return true;
-};
+});
 /**
  * @hidden
  */
-// Command function that removes the selected columns from a table.
-const deleteColumn$1 = (state, dispatch) => {
-    if (!isInTable(state)) {
-        return false;
-    }
-    if (dispatch) {
-        const rect = selectedRect(state.selection);
-        // if only one column left - delete the whole table
-        if (rect.left === 0 && rect.right === rect.map.width) {
-            return deleteTable$1(state, dispatch);
-        }
-        const mainTable = findParentNodeClosestToPos(state.selection.$anchor, isTable);
-        const tr = state.tr;
-        removeTableGroupColumn(tr, rect, mainTable, isTableFoot, tr.doc);
-        removeTableGroupColumn(tr, rect, mainTable, isTableBody, tr.doc);
-        removeTableGroupColumn(tr, rect, mainTable, isTableHead, tr.doc);
-        dispatch(tr);
-    }
-    return true;
-};
-const removeRow = (tr, { map: map$$1, table, tableStart }, row) => {
-    let rowPos = 0;
-    for (let i = 0; i < row; i++) {
-        rowPos += table.child(i).nodeSize;
-    }
-    const nextRow = rowPos + table.child(row).nodeSize;
-    const mapFrom = tr.mapping.maps.length;
-    tr.delete(rowPos + tableStart, nextRow + tableStart);
-    for (let col = 0, index = row * map$$1.width; col < map$$1.width; col++, index++) {
-        const pos = map$$1.map[index];
-        if (row > 0 && pos === map$$1.map[index - map$$1.width]) {
-            // If this cell starts in the row above, simply reduce its rowspan
-            const attrs = table.nodeAt(pos).attrs;
-            tr.setNodeMarkup(tr.mapping.slice(mapFrom).map(pos + tableStart), null, setAttr(attrs, 'rowspan', attrs.rowspan - 1));
-            col += attrs.colspan - 1;
-        }
-        else if (row < map$$1.width && pos === map$$1.map[index + map$$1.width]) {
-            // Else, if it continues in the row below, it has to be moved down
-            const cell = table.nodeAt(pos);
-            const copy = cell.type.create(setAttr(cell.attrs, 'rowspan', cell.attrs.rowspan - 1), cell.content);
-            const newPos = map$$1.positionAt(row + 1, col, table);
-            tr.insert(tr.mapping.slice(mapFrom).map(tableStart + newPos), copy);
-            col += cell.attrs.colspan - 1;
-        }
-    }
-};
+const semanticTagNames = ['article', 'main', 'nav', 'header', 'footer', 'aside', 'section'];
+const ɵ1 = (acc, curr) => Object.assign(acc, { [curr]: createSemanticNode(curr) });
 /**
  * @hidden
  */
-// Remove the selected rows from a table.
-const deleteRow$1 = (state, dispatch) => {
-    if (!isInTable(state)) {
-        return false;
-    }
-    if (dispatch) {
-        const rect = selectedRect(state.selection);
-        const tr = state.tr;
-        if (rect.top === 0 && rect.bottom === rect.map.height) {
-            const mainTable = findParentNodeClosestToPos(state.selection.$anchor, isTable);
-            if (mainTable.node.childCount === 1) {
-                deleteTable$1(state, dispatch);
-            }
-            else {
-                deleteTableElement(n => n.type.name === rect.table.type.name)(state, dispatch);
-            }
-            return true;
-        }
-        for (let i = rect.bottom - 1;; i--) {
-            removeRow(tr, rect, i);
-            if (i === rect.top) {
-                break;
-            }
-            rect.table = rect.tableStart ? tr.doc.nodeAt(rect.tableStart - 1) : tr.doc;
-            rect.map = TableMap.get(rect.table);
-        }
-        dispatch(tr);
-    }
-    return true;
-};
+const semanticNodes = semanticTagNames.reduce(ɵ1, {});
+
 /**
  * @hidden
  */
-// Merge the selected cells into a single cell. Only available when
-// the selected cells' outline forms a rectangle.
-const mergeCells$1 = (state, dispatch) => {
-    const sel = state.selection;
-    if (!(sel instanceof CellSelection) || sel.$anchorCell.pos === sel.$headCell.pos) {
-        return false;
-    }
-    const rect = selectedRect(state.selection);
-    const { map: map$$1 } = rect;
-    if (cellsOverlapRectangle(map$$1, rect)) {
-        return false;
-    }
-    if (dispatch) {
-        const tr = state.tr;
-        const seen = {};
-        let content = Fragment.empty;
-        let mergedPos;
-        let mergedCell;
-        for (let row = rect.top; row < rect.bottom; row++) {
-            for (let col = rect.left; col < rect.right; col++) {
-                const cellPos = map$$1.map[row * map$$1.width + col], cell = rect.table.nodeAt(cellPos);
-                if (seen[cellPos]) {
-                    continue;
-                }
-                seen[cellPos] = true;
-                if (mergedPos === null) {
-                    mergedPos = cellPos;
-                    mergedCell = cell;
-                }
-                else {
-                    if (!isCellEmpty(cell)) {
-                        content = content.append(cell.content);
-                    }
-                    const mapped = tr.mapping.map(cellPos + rect.tableStart);
-                    tr.delete(mapped, mapped + cell.nodeSize);
-                }
-            }
-        }
-        tr.setNodeMarkup(mergedPos + rect.tableStart, null, setAttr(addColSpan(mergedCell.attrs, mergedCell.attrs.colspan, rect.right - rect.left - mergedCell.attrs.colspan), 'rowspan', rect.bottom - rect.top));
-        if (content.size) {
-            const end = mergedPos + 1 + mergedCell.content.size;
-            const start = isCellEmpty(mergedCell) ? mergedPos + 1 : end;
-            tr.replaceWith(start + rect.tableStart, end + rect.tableStart, content);
-        }
-        tr.setSelection(new CellSelection(tr.doc.resolve(mergedPos + rect.tableStart)));
-        dispatch(tr);
-    }
-    return true;
-};
+const marks$1 = marks;
+const nodes$1 = Object.assign(nodes, semanticNodes);
 /**
  * @hidden
  */
-// Split a selected cell, whose rowpan or colspan is greater than one,
-// into smaller cells. Use the first cell type for the new cells.
-const splitCell$1 = (state, dispatch) => {
-    const nodeTypes = tableNodeTypes(state.schema);
-    return splitCellWithType(({ node }) => {
-        return nodeTypes[node.type.spec.tableRole];
-    })(state, dispatch);
-};
-const deleteTableElement = (selector) => (state, dispatch) => {
-    const $pos = state.selection.$anchor;
-    for (let d = $pos.depth; d > 0; d--) {
-        const node = $pos.node(d);
-        if (selector(node)) {
-            if (dispatch) {
-                const tr = state.tr;
-                tr.delete($pos.before(d), $pos.after(d)).scrollIntoView();
-                dispatch(tr);
-            }
-            return true;
-        }
-    }
-    return false;
-};
+const schema = new Schema({
+    marks: marks$1,
+    nodes: nodes$1
+});
+
 /**
  * @hidden
  */
-// Deletes the table around the selection, if any.
-const deleteTable$1 = deleteTableElement(isTable);
+const insertTable = (attrs) => (state, dispatch) => {
+    const newTable = createTable(state.schema.nodes, attrs.rows, attrs.cols);
+    if (newTable) {
+        insertNode(newTable, true)(state, dispatch);
+    }
+};
 
 const alignRemove = (state, dispatch) => alignBlocks(alignRemoveRules)(state, dispatch);
-const ɵ1$5 = (applyToWord) => expandToWordWrap(toggleInlineFormat, Object.assign({}, bold, { applyToWord })), ɵ2$4 = (options) => cleanFormatting(options), ɵ3$4 = attrs => expandToWordWrap(applyLink, { mark: 'link', attrs: attrs.value, applyToWord: attrs.applyToWord }), ɵ4$2 = attrs => expandToWordWrap(applyInlineStyle, { style: 'font-family', value: attrs.value, applyToWord: attrs.applyToWord }), ɵ5$2 = attrs => expandToWordWrap(applyInlineStyle, { style: 'font-size', value: attrs.value + 'px', applyToWord: attrs.applyToWord }), ɵ6$1 = attrs => expandToWordWrap(applyLink, { mark: 'link', attrs: attrs, applyToWord: attrs.applyToWord }), ɵ7$1 = text => insertText(text), ɵ8$1 = (applyToWord) => expandToWordWrap(toggleInlineFormat, Object.assign({}, italic, { applyToWord })), ɵ9$1 = (applyToWord) => expandToWordWrap(toggleInlineFormat, Object.assign({}, strikethrough, { applyToWord })), ɵ10 = (applyToWord) => expandToWordWrap(toggleInlineFormat, Object.assign({}, subscript, { applyToWord })), ɵ11 = (applyToWord) => expandToWordWrap(toggleInlineFormat, Object.assign({}, superscript, { applyToWord })), ɵ12 = (applyToWord) => expandToWordWrap(toggleInlineFormat, Object.assign({}, underline, { applyToWord })), ɵ13 = () => removeLink(link), ɵ14 = attrs => expandToWordWrap(applyInlineStyle, { style: 'color', value: attrs.value, applyToWord: attrs.applyToWord }), ɵ15 = attrs => expandToWordWrap(applyInlineStyle, { style: 'background-color', value: attrs.value, applyToWord: attrs.applyToWord }), ɵ16 = () => (state, dispatch) => selectAll(state, dispatch);
+const ɵ1$1 = (applyToWord) => expandToWordWrap(toggleInlineFormat, Object.assign({}, bold, { applyToWord })), ɵ2 = (options) => cleanFormatting(options), ɵ3 = attrs => expandToWordWrap(applyLink, { mark: 'link', attrs: attrs.value, applyToWord: attrs.applyToWord }), ɵ4 = attrs => expandToWordWrap(applyInlineStyle, { style: 'font-family', value: attrs.value, applyToWord: attrs.applyToWord }), ɵ5 = attrs => expandToWordWrap(applyInlineStyle, { style: 'font-size', value: attrs.value + 'px', applyToWord: attrs.applyToWord }), ɵ6 = attrs => expandToWordWrap(applyLink, { mark: 'link', attrs: attrs, applyToWord: attrs.applyToWord }), ɵ7 = text => insertText(text), ɵ8 = (applyToWord) => expandToWordWrap(toggleInlineFormat, Object.assign({}, italic, { applyToWord })), ɵ9 = (applyToWord) => expandToWordWrap(toggleInlineFormat, Object.assign({}, strikethrough, { applyToWord })), ɵ10 = (applyToWord) => expandToWordWrap(toggleInlineFormat, Object.assign({}, subscript, { applyToWord })), ɵ11 = (applyToWord) => expandToWordWrap(toggleInlineFormat, Object.assign({}, superscript, { applyToWord })), ɵ12 = (applyToWord) => expandToWordWrap(toggleInlineFormat, Object.assign({}, underline, { applyToWord })), ɵ13 = () => removeLink(link), ɵ14 = attrs => expandToWordWrap(applyInlineStyle, { style: 'color', value: attrs.value, applyToWord: attrs.applyToWord }), ɵ15 = attrs => expandToWordWrap(applyInlineStyle, { style: 'background-color', value: attrs.value, applyToWord: attrs.applyToWord }), ɵ16 = () => (state, dispatch) => selectAll(state, dispatch);
 const inlineCommand = {
-    bold: ɵ1$5,
-    cleanFormatting: ɵ2$4,
-    createLink: ɵ3$4,
-    fontFamily: ɵ4$2,
-    fontSize: ɵ5$2,
-    insertFile: ɵ6$1,
-    insertText: ɵ7$1,
-    italic: ɵ8$1,
-    strikethrough: ɵ9$1,
+    bold: ɵ1$1,
+    cleanFormatting: ɵ2,
+    createLink: ɵ3,
+    fontFamily: ɵ4,
+    fontSize: ɵ5,
+    insertFile: ɵ6,
+    insertText: ɵ7,
+    italic: ɵ8,
+    strikethrough: ɵ9,
     subscript: ɵ10,
     superscript: ɵ11,
     underline: ɵ12,
@@ -1626,7 +149,7 @@ const inlineCommand = {
     backColor: ɵ15,
     selectAll: ɵ16
 };
-const ɵ17 = () => (state, dispatch) => isAligned(state, alignCenterRules) ? alignRemove(state, dispatch) : alignBlocks(alignCenterRules)(state, dispatch), ɵ18 = () => (state, dispatch) => isAligned(state, alignJustifyRules) ? alignRemove(state, dispatch) : alignBlocks(alignJustifyRules)(state, dispatch), ɵ19 = () => (state, dispatch) => isAligned(state, alignLeftRules) ? alignRemove(state, dispatch) : alignBlocks(alignLeftRules)(state, dispatch), ɵ20 = () => (state, dispatch) => isAligned(state, alignRightRules) ? alignRemove(state, dispatch) : alignBlocks(alignRightRules)(state, dispatch), ɵ21 = formatAttr => formatBlockElements(formatAttr.tag), ɵ22 = () => getHtml, ɵ23 = () => indent, ɵ24 = attrs => insertImage(attrs), ɵ25 = () => toggleOrderedList, ɵ26 = () => toggleUnorderedList, ɵ27 = () => outdent, ɵ28 = () => redo, ɵ29 = ({ content, parseOptions }) => setHtml(content, 'setHTML', parseOptions), ɵ30 = () => undo;
+const ɵ17 = () => (state, dispatch) => isAligned(state, alignCenterRules) ? alignRemove(state, dispatch) : alignBlocks(alignCenterRules)(state, dispatch), ɵ18 = () => (state, dispatch) => isAligned(state, alignJustifyRules) ? alignRemove(state, dispatch) : alignBlocks(alignJustifyRules)(state, dispatch), ɵ19 = () => (state, dispatch) => isAligned(state, alignLeftRules) ? alignRemove(state, dispatch) : alignBlocks(alignLeftRules)(state, dispatch), ɵ20 = () => (state, dispatch) => isAligned(state, alignRightRules) ? alignRemove(state, dispatch) : alignBlocks(alignRightRules)(state, dispatch), ɵ21 = formatAttr => formatBlockElements(formatAttr.tag), ɵ22 = () => getHtml, ɵ23 = () => indent, ɵ24 = attrs => insertImage(attrs), ɵ25 = () => toggleOrderedList, ɵ26 = () => toggleUnorderedList, ɵ27 = () => outdent, ɵ28 = () => redo, ɵ29 = ({ content, parseOptions }) => setHtml(content, 'setHTML', parseOptions), ɵ30 = () => undo, ɵ31 = () => blockquote;
 const blockCommand = {
     alignCenter: ɵ17,
     alignJustify: ɵ18,
@@ -1643,20 +166,21 @@ const blockCommand = {
     outdent: ɵ27,
     redo: ɵ28,
     setHTML: ɵ29,
-    undo: ɵ30
+    undo: ɵ30,
+    blockquote: ɵ31
 };
-const ɵ31 = attr => insertTable(attr), ɵ32 = () => addColumnBefore$1, ɵ33 = () => addColumnAfter$1, ɵ34 = () => addRowBefore$1, ɵ35 = () => addRowAfter$1, ɵ36 = () => deleteRow$1, ɵ37 = () => deleteColumn$1, ɵ38 = () => mergeCells$1, ɵ39 = () => splitCell$1, ɵ40 = () => deleteTable$1;
+const ɵ32 = attr => insertTable(attr), ɵ33 = () => addColumnBefore, ɵ34 = () => addColumnAfter, ɵ35 = () => addRowBefore, ɵ36 = () => addRowAfter, ɵ37 = () => deleteRow, ɵ38 = () => deleteColumn, ɵ39 = () => mergeCells, ɵ40 = () => splitCell, ɵ41 = () => deleteTable;
 const tableCommand = {
-    insertTable: ɵ31,
-    addColumnBefore: ɵ32,
-    addColumnAfter: ɵ33,
-    addRowBefore: ɵ34,
-    addRowAfter: ɵ35,
-    deleteRow: ɵ36,
-    deleteColumn: ɵ37,
-    mergeCells: ɵ38,
-    splitCell: ɵ39,
-    deleteTable: ɵ40
+    insertTable: ɵ32,
+    addColumnBefore: ɵ33,
+    addColumnAfter: ɵ34,
+    addRowBefore: ɵ35,
+    addRowAfter: ɵ36,
+    deleteRow: ɵ37,
+    deleteColumn: ɵ38,
+    mergeCells: ɵ39,
+    splitCell: ɵ40,
+    deleteTable: ɵ41
 };
 /**
  * @hidden
@@ -1695,6 +219,10 @@ const getToolbarState = (state, options) => ({
         selected: activeNode(state),
         disabled: false
     },
+    blockquote: {
+        selected: false,
+        disabled: !blockquote(state)
+    },
     indent: {
         selected: false,
         disabled: !(canIndentAsListItem(state, state.schema.nodes.list_item) || canBeIndented(state, indentRules))
@@ -1717,7 +245,11 @@ const getToolbarState = (state, options) => ({
     },
     outdent: {
         selected: false,
-        disabled: !(canOutdentAsListItem(state, outdentRules) || canBeIndented(state, outdentRules))
+        get disabled() {
+            return !(hasNode(state, state.schema.nodes.blockquote) ||
+                canOutdentAsListItem(state, outdentRules) ||
+                isIndented(state, outdentRules.nodes));
+        }
     },
     redo: {
         selected: false,
@@ -1843,6 +375,7 @@ const initialToolBarState = {
     format: { selected: { text: 'Format', tag: null }, disabled: false },
     style: { selected: { marks: [], hasNodesWithoutMarks: false }, disabled: false },
     cleanFormatting: { selected: false, disabled: true },
+    blockquote: { selected: false, disabled: false },
     //indent
     indent: { selected: false, disabled: false },
     outdent: { selected: false, disabled: false },
@@ -1895,6 +428,7 @@ const disabledToolBarState = {
     format: { selected: { text: 'Format', tag: null }, disabled: true },
     style: { selected: { marks: [], hasNodesWithoutMarks: false }, disabled: true },
     cleanFormatting: { selected: false, disabled: true },
+    blockquote: { selected: false, disabled: true },
     //indent
     indent: { selected: false, disabled: true },
     outdent: { selected: false, disabled: true },
@@ -1928,6 +462,106 @@ const disabledToolBarState = {
     selectAll: { selected: false, disabled: true }
 };
 
+/**
+ * @hidden
+ */
+function outerWidth(element) {
+    let width = element.offsetWidth;
+    const style = getComputedStyle(element);
+    width += parseFloat(style.marginLeft) || 0 + parseFloat(style.marginRight) || 0;
+    return width;
+}
+/**
+ * @hidden
+ */
+const removeEntries = (obj, predicate) => Object.keys(obj)
+    .filter(key => predicate(key))
+    .reduce((acc, curr) => Object.assign(acc, { [curr]: obj[curr] }), {});
+/**
+ * @hidden
+ */
+const removeEmptyEntries = (obj) => {
+    const predicate = key => obj[key] !== null && obj[key] !== undefined && obj[key] !== '';
+    return removeEntries(obj, predicate);
+};
+/**
+ * @hidden
+ */
+const isNullOrUndefined = (value) => value === undefined || value === null;
+/**
+ * @hidden
+ */
+const isPresent = (value) => !isNullOrUndefined(value);
+/**
+ * @hidden
+ */
+const detectIE = () => {
+    if (!isDocumentAvailable()) {
+        return false;
+    }
+    const ua = window.navigator.userAgent;
+    const msie = ua.indexOf('MSIE ');
+    const trident = ua.indexOf('Trident/');
+    return msie > 0 || trident > 0;
+};
+/**
+ * @hidden
+ */
+const safeString = (value) => (isNullOrUndefined(value) ? '' : value.toString());
+/**
+ * @hidden
+ */
+const first = (arr) => arr[0];
+/**
+ * @hidden
+ */
+const last = (arr) => arr[arr.length - 1];
+/**
+ * @hidden
+ */
+const split = (splitter) => (value) => value.split(splitter);
+/**
+ * @hidden
+ */
+const trim = (value) => value.trim();
+/**
+ * @hidden
+ */
+const filter$1 = (predicate) => (arr) => arr.filter(predicate);
+/**
+ * @hidden
+ */
+const getUniqueStyleValues = (style, cssStyle) => {
+    if (style.hasNodesWithoutMarks) {
+        return '';
+    }
+    const uniqueMarkValues = style.marks
+        .filter(m => m.type.name === 'style')
+        .map(m => m.attrs.style)
+        .map(safeString)
+        .map(split(';'))
+        .map(filter$1((m) => m.includes(cssStyle)))
+        // guards against empty array
+        .map((cssStyleValues) => (cssStyleValues.length !== 0 ? cssStyleValues : [`${cssStyle}: INVALID`]))
+        .map(first)
+        .map(split(':'))
+        .map(last)
+        .map(trim)
+        .reduce((acc, curr) => (acc.indexOf(curr) > -1 ? acc : [...acc, curr]), []);
+    if (uniqueMarkValues.indexOf('INVALID') > -1 || uniqueMarkValues.length !== 1) {
+        return '';
+    }
+    return uniqueMarkValues[0];
+};
+/**
+ * @hidden
+ */
+const conditionallyExecute = (fn) => (condition) => (param) => (condition ? fn(param) : param);
+/**
+ * @hidden
+ */
+const pipe = (...fns) => x => fns.reduce((y, f) => f(y), x);
+
 /**
  * @hidden
  */
@@ -2106,25 +740,25 @@ ImageDialogComponent = __decorate([
                         <label [for]="srcInputId">{{ textFor('imageWebAddress') }}</label>
                     </div>
                     <div class="k-edit-field">
-                        <input [id]="srcInputId" #srcInput [formControl]="src" type="text" class="k-textbox" />
+                        <input [id]="srcInputId" #srcInput [formControl]="src" type="text" class="k-textbox k-input k-rounded-md" />
                     </div>
                     <div class="k-edit-label">
                         <label [for]="altTextInputId">{{ textFor('imageAltText') }}</label>
                     </div>
                     <div class="k-edit-field">
-                        <input [id]="altTextInputId" [formControl]="alt" type="text" class="k-textbox" />
+                        <input [id]="altTextInputId" [formControl]="alt" type="text" class="k-textbox k-input k-rounded-md" />
                     </div>
                     <div class="k-edit-label">
                         <label [for]="widthInputId">{{ textFor('imageWidth') }}</label>
                     </div>
                     <div class="k-edit-field">
-                        <input [id]="widthInputId" [formControl]="width" type="text" class="k-textbox" />
+                        <input [id]="widthInputId" [formControl]="width" type="text" class="k-textbox k-input k-rounded-md" />
                     </div>
                     <div class="k-edit-label">
                         <label [for]="heightInputId">{{ textFor('imageHeight') }}</label>
                     </div>
                     <div class="k-edit-field">
-                        <input [id]="heightInputId" [formControl]="height" type="text" class="k-textbox" />
+                        <input [id]="heightInputId" [formControl]="height" type="text" class="k-textbox k-input k-rounded-md" />
                     </div>
                 </div>
             </div>
@@ -2254,26 +888,26 @@ FileLinkDialogComponent = __decorate([
                             <label (click)="hrefInput.focus()">{{ textForWithPrefix('WebAddress') }}</label>
                         </div>
                         <div class="k-edit-field">
-                            <input #hrefInput formControlName="href" type="text" class="k-textbox" />
+                            <input #hrefInput formControlName="href" type="text" class="k-textbox k-input k-rounded-md" />
                         </div>
 
                         <div class="k-edit-label">
                             <label (click)="textInput.focus()">{{ textForWithPrefix('Text') }}</label>
                         </div>
                         <div class="k-edit-field">
-                            <input #textInput formControlName="text" type="text" class="k-textbox" />
+                            <input #textInput formControlName="text" type="text" class="k-textbox k-input k-rounded-md" />
                         </div>
 
                         <div class="k-edit-label">
                             <label (click)="titleInput.focus()">{{ textForWithPrefix('Title') }}</label>
                         </div>
                         <div class="k-edit-field">
-                            <input #titleInput formControlName="title" type="text" class="k-textbox" />
+                            <input #titleInput formControlName="title" type="text" class="k-textbox k-input k-rounded-md" />
                         </div>
                         <ng-container *ngIf="command === 'createLink'">
                             <div class="k-edit-label"></div>
                             <div class="k-edit-field">
-                                <input type="checkbox" id="k-target-blank" class="k-checkbox" formControlName="target" />
+                                <input type="checkbox" id="k-target-blank" kendoCheckBox formControlName="target" />
                                 <label class="k-checkbox-label" for="k-target-blank">{{ textForWithPrefix('OpenInNewWindow') }}</label>
                             </div>
                         </ng-container>
@@ -2533,7 +1167,7 @@ const tablesStyles = `
  */
 const rtlStyles = 'body { direction: rtl }';
 
-const ɵ0$6 = (arg) => `plugins must be a function, but received ${JSON.stringify(arg)}.`;
+const ɵ0$2 = (arg) => `plugins must be a function, but received ${JSON.stringify(arg)}.`, ɵ1$2 = (arg) => `pastedContent must be a function, but received ${JSON.stringify(arg)}.`;
 /* tslint:disable:variable-name */
 /**
  * @hidden
@@ -2541,9 +1175,10 @@ const ɵ0$6 = (arg) => `plugins must be a function, but received ${JSON.stringif
 const EditorErrorMessages = {
     schemaType: 'Expected value of type Schema. See http://www.telerik.com/kendo-angular-ui/components/editor/schema/',
     setSchemaOnce: 'The Schema cannot be changed dynamically. See http://www.telerik.com/kendo-angular-ui/components/editor/schema/',
-    pluginsCallbackType: ɵ0$6,
+    pluginsCallbackType: ɵ0$2,
+    pastedContentCallbackType: ɵ1$2,
     setPluginsOnce: 'The plugins cannot be changed dynamically. See http://www.telerik.com/kendo-angular-ui/components/editor/plugins/',
-    setPlaceHolderOnce: 'The placeholder cannot be changed dynamically. See http://www.telerik.com/kendo-angular-ui/components/editor/placeholder/',
+    setPlaceHolderOnce: 'The placeholder cannot be changed dynamically. See https://www.telerik.com/kendo-angular-ui/components/editor/plugins/#toc-custom-plugins/',
     printTool: 'The Print tool and functionality are supported only in iframe mode. See https://www.telerik.com/kendo-angular-ui-develop/components/editor/api/EditorPrintButtonDirective/'
 };
 
@@ -2562,16 +1197,32 @@ EditorToolsService = __decorate([
     Injectable()
 ], EditorToolsService);
 
+/**
+ * The Editor [`paste`]({% slug api_editor_editorcomponent %}#toc-paste) event.
+ */
+class EditorPasteEvent extends PreventableEvent {
+    /**
+     * Constructs the event arguments for the `paste` event.
+     * @hidden
+     */
+    constructor(cleanedHtml, originalHtml, originalEvent) {
+        super();
+        this.cleanedHtml = cleanedHtml;
+        this.originalHtml = originalHtml;
+        this.originalEvent = originalEvent;
+    }
+}
+
 var EditorComponent_1;
 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);
@@ -2607,14 +1258,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.
@@ -2640,6 +1283,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)).
          */
@@ -2655,10 +1303,76 @@ 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 (this.disabled || (this.readonly && docChanged)) {
+                return;
+            }
+            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
@@ -2668,25 +1382,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;
@@ -2876,6 +1577,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());
         }
@@ -2903,7 +1607,7 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
      * @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.
@@ -2961,8 +1665,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.
@@ -3047,6 +1749,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;
     }
@@ -3074,7 +1777,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) {
@@ -3116,16 +1818,13 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
                     }
                 })
             }),
-            new Plugin({
-                key: new PluginKey('editor-filter-disabled-state'),
-                filterTransaction: () => !this.disabled
-            }),
             history(),
             keymap(buildListKeymap(currentSchema)),
             keymap(buildKeymap(currentSchema, { applyToWord: this.applyToWord })),
             keymap(baseKeymap),
             gapCursor(),
-            imageResizing()
+            imageResizing(),
+            tableEditing()
         ];
         if (this.placeholder) {
             defaultPlugins.push(placeholder(this.placeholder));
@@ -3145,31 +1844,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
                 }
             });
         });
@@ -3185,7 +1863,7 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
             this.subs.add(fromEvent(containerElement, 'focusin')
                 .subscribe(() => {
                 if (this.readonly) {
-                    contentAreaClasslist.add('k-state-focused');
+                    contentAreaClasslist.add('k-focus');
                 }
                 if (!this.focusChangedProgrammatically || this.shouldEmitFocus) {
                     this.ngZone.run(() => this.onFocus.emit());
@@ -3195,7 +1873,7 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
             this.subs.add(fromEvent(containerElement, 'focusout')
                 .subscribe(() => {
                 if (this.readonly) {
-                    contentAreaClasslist.remove('k-state-focused');
+                    contentAreaClasslist.remove('k-focus');
                 }
                 if (!this.focusChangedProgrammatically) {
                     this.ngZone.run(() => this.onBlur.emit());
@@ -3210,7 +1888,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();
@@ -3303,10 +1981,6 @@ __decorate([
     __metadata("design:type", String),
     __metadata("design:paramtypes", [String])
 ], EditorComponent.prototype, "placeholder", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Number)
-], EditorComponent.prototype, "updateInterval", void 0);
 __decorate([
     Input(),
     __metadata("design:type", Object)
@@ -3327,6 +2001,10 @@ __decorate([
     Output('focus'),
     __metadata("design:type", EventEmitter)
 ], EditorComponent.prototype, "onFocus", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], EditorComponent.prototype, "paste", void 0);
 __decorate([
     Output('blur'),
     __metadata("design:type", EventEmitter)
@@ -3341,7 +2019,7 @@ __decorate([
     __metadata("design:paramtypes", [])
 ], EditorComponent.prototype, "resizableClass", null);
 __decorate([
-    HostBinding('class.k-state-disabled'),
+    HostBinding('class.k-disabled'),
     __metadata("design:type", Boolean),
     __metadata("design:paramtypes", [])
 ], EditorComponent.prototype, "isDisabled", null);
@@ -3447,6 +2125,8 @@ EditorComponent = EditorComponent_1 = __decorate([
             alignRight="Align text right"
             i18n-backColor="kendo.editor.backColor|The title of the tool that changes the text background color."
             backColor="Background color"
+            i18n-blockquote="kendo.editor.blockquote|The title of the tool that wraps an element in a blockquote"
+            blockquote="Quotation"
             i18n-bold="kendo.editor.bold|The title of the tool that makes text bold."
             bold="Bold"
             i18n-cleanFormatting="kendo.editor.cleanFormatting|The title of the Clean Formatting tool."
@@ -3574,7 +2254,7 @@ EditorComponent = EditorComponent_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>
@@ -3712,10 +2392,6 @@ FormatDropDownListComponent = __decorate([
                         {{ dataItem.text }}
                     </span>
 
-                    <span *ngSwitchCase="'blockquote'" style="display: block; margin-left: 0;">
-                        {{ dataItem.text }}
-                    </span>
-
                     <span *ngSwitchDefault>{{ dataItem.text }}</span>
                 </ng-container>
             </ng-template>
@@ -3856,7 +2532,7 @@ ColorPickerDialogComponent = __decorate([
                 <div class="k-edit-form-container k-window-content" style="text-align: center;">
                     <kendo-colorpicker
                         #colorpicker
-                        [view]="view"
+                        [views]="['palette']"
                         [format]="'hex'"
                         [attr.title]="title"
                         [icon]="icon"
@@ -4118,7 +2794,6 @@ let EditorFormatComponent = EditorFormatComponent_1 = class EditorFormatComponen
         this.valueChange = new EventEmitter();
         this._data = [
             { text: 'Paragraph', tag: 'p' },
-            { text: 'Quotation', tag: 'blockquote' },
             { text: 'Heading 1', tag: 'h1' },
             { text: 'Heading 2', tag: 'h2' },
             { text: 'Heading 3', tag: 'h3' },
@@ -4884,11 +3559,19 @@ let EditorColorPickerComponent = EditorColorPickerComponent_1 = class EditorColo
          */
         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'];
+    }
+    /**
+     * @hidden
+     *
+     * For backward compatibility with configurations using the deprecated "view" input.
+     */
+    set view(view) {
+        this.views = [view];
     }
     /**
      * @hidden
@@ -4960,7 +3643,7 @@ let EditorColorPickerComponent = EditorColorPickerComponent_1 = class EditorColo
             editorCommand: this.editorCommand,
             paletteSettings: this.paletteSettings,
             icon: this.icon,
-            view: this.view
+            views: this.views
         });
     }
     /**
@@ -5011,8 +3694,13 @@ __decorate([
 ], EditorColorPickerComponent.prototype, "disabled", void 0);
 __decorate([
     Input(),
-    __metadata("design:type", String)
-], EditorColorPickerComponent.prototype, "view", void 0);
+    __metadata("design:type", Array)
+], EditorColorPickerComponent.prototype, "views", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], EditorColorPickerComponent.prototype, "view", null);
 __decorate([
     ViewChild('toolbarTemplate', { static: true }),
     __metadata("design:type", TemplateRef)
@@ -5041,7 +3729,7 @@ EditorColorPickerComponent = EditorColorPickerComponent_1 = __decorate([
         <ng-template #toolbarTemplate>
             <kendo-colorpicker
                 #colorpicker
-                [view]="view"
+                [views]="['palette']"
                 [format]="'hex'"
                 [attr.title]="title"
                 [icon]="icon"
@@ -5340,8 +4028,8 @@ PopupTableGridComponent = __decorate([
         <div style="border-color: inherit;" (mouseleave)="resetState()" (click)="insertTable()">
             <span *ngFor="let i of cells"
                 class="k-ct-cell"
-                [class.k-state-selected]="selected(i)"
-                [class.k-state-disabled]="!selected(i)"
+                [class.k-selected]="selected(i)"
+                [class.k-disabled]="!selected(i)"
                 (mouseenter)="setState(i)">
             </span>
         </div>
@@ -5364,6 +4052,7 @@ const commandIcons = {
     alignLeft: 'align-left',
     alignRight: 'align-right',
     backColor: 'background',
+    blockquote: 'blockquote',
     bold: 'bold',
     cleanFormatting: 'clear-css',
     createLink: 'link-horizontal',
@@ -5602,6 +4291,40 @@ EditorAlignJustifyButtonDirective = __decorate([
         EditorToolsService])
 ], EditorAlignJustifyButtonDirective);
 
+/**
+ * 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>
+ * ```
+ */
+let EditorBlockquoteDirective = class EditorBlockquoteDirective extends EditorCommandButton {
+    constructor(button, editor, localization, toolsService) {
+        super('blockquote', button, editor, localization, toolsService);
+        this.editor = editor;
+    }
+};
+EditorBlockquoteDirective = __decorate([
+    Directive({
+        selector: 'kendo-toolbar-button[kendoEditorBlockquoteButton]'
+    }),
+    __param(1, Host()),
+    __metadata("design:paramtypes", [ToolBarButtonComponent,
+        EditorComponent,
+        EditorLocalizationService,
+        EditorToolsService])
+], EditorBlockquoteDirective);
+
 /**
  * A directive which configures an existing `ToolBarButtonComponent` as an Editor Redo tool
  * ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
@@ -6534,6 +5257,10 @@ __decorate([
     Input(),
     __metadata("design:type", String)
 ], Messages.prototype, "backColor", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], Messages.prototype, "blockquote", void 0);
 __decorate([
     Input(),
     __metadata("design:type", String)
@@ -6948,7 +5675,9 @@ const COMPONENT_DIRECTIVES = [
     // print
     EditorPrintDirective,
     // select all
-    EditorSelectAllButtonDirective
+    EditorSelectAllButtonDirective,
+    // blockquote
+    EditorBlockquoteDirective
 ];
 const TOOLBAR_TOOLS = [
     EditorFontSizeComponent,
@@ -7052,6 +5781,7 @@ EditorModule = __decorate([
             DialogModule,
             DropDownsModule,
             NumericTextBoxModule,
+            CheckBoxModule,
             ToolBarModule,
             TextBoxModule
         ]
@@ -7062,4 +5792,4 @@ EditorModule = __decorate([
  * Generated bundle index. Do not edit.
  */
 
-export { ColorPickerDialogComponent, FileLinkDialogComponent, FontFamilyDialogComponent, FontSizeDialogComponent, FormatDialogComponent, ImageDialogComponent, InsertTableDialogComponent, SourceDialogComponent, CustomMessagesComponent, EditorLocalizationService, LocalizedMessagesDirective, Messages, EditorAlignCenterButtonDirective, EditorAlignJustifyButtonDirective, EditorAlignLeftButtonDirective, EditorAlignRightButtonDirective, EditorBackColorDirective, EditorColorPickerComponent, EditorForeColorDirective, EditorCleanFormattingButtonDirective, FontFamilyDropDownListComponent, EditorFontFamilyComponent, FontSizeDropDownListComponent, EditorFontSizeComponent, FormatDropDownListComponent, EditorFormatComponent, EditorRedoButtonDirective, EditorUndoButtonDirective, EditorInsertImageButtonDirective, EditorIndentButtonDirective, EditorOutdentButtonDirective, EditorCreateLinkButtonDirective, EditorInsertFileButtonDirective, EditorUnlinkButtonDirective, EditorInsertOrderedListButtonDirective, EditorInsertUnorderedListButtonDirective, EditorPrintDirective, EditorSelectAllButtonDirective, DropDownToolDirective, EditorCommandBase, EditorCommandButton, EditorCommandDialog, EditorViewSourceButtonDirective, EditorAddColumnAfterButtonDirective, EditorAddColumnBeforeButtonDirective, EditorAddRowAfterButtonDirective, EditorAddRowBeforeButtonDirective, EditorDeleteColumnButtonDirective, EditorDeleteRowButtonDirective, EditorDeleteTableButtonDirective, EditorInsertTableButtonComponent, EditorMergeCellsButtonDirective, EditorSplitCellButtonDirective, PopupTableGridComponent, EditorToolsService, EditorBoldButtonDirective, EditorItalicButtonDirective, EditorStrikethroughButtonDirective, EditorSubscriptButtonDirective, EditorSuperscriptButtonDirective, EditorUnderlineButtonDirective, EditorComponent, EditorModule, schema };
+export { semanticNodes, semanticTagNames, ColorPickerDialogComponent, FileLinkDialogComponent, FontFamilyDialogComponent, FontSizeDialogComponent, FormatDialogComponent, ImageDialogComponent, InsertTableDialogComponent, SourceDialogComponent, CustomMessagesComponent, EditorLocalizationService, LocalizedMessagesDirective, Messages, EditorAlignCenterButtonDirective, EditorAlignJustifyButtonDirective, EditorAlignLeftButtonDirective, EditorAlignRightButtonDirective, EditorBlockquoteDirective, EditorBackColorDirective, EditorColorPickerComponent, EditorForeColorDirective, EditorCleanFormattingButtonDirective, FontFamilyDropDownListComponent, EditorFontFamilyComponent, FontSizeDropDownListComponent, EditorFontSizeComponent, FormatDropDownListComponent, EditorFormatComponent, EditorRedoButtonDirective, EditorUndoButtonDirective, EditorInsertImageButtonDirective, EditorIndentButtonDirective, EditorOutdentButtonDirective, EditorCreateLinkButtonDirective, EditorInsertFileButtonDirective, EditorUnlinkButtonDirective, EditorInsertOrderedListButtonDirective, EditorInsertUnorderedListButtonDirective, EditorPrintDirective, EditorSelectAllButtonDirective, DropDownToolDirective, EditorCommandBase, EditorCommandButton, EditorCommandDialog, EditorViewSourceButtonDirective, EditorAddColumnAfterButtonDirective, EditorAddColumnBeforeButtonDirective, EditorAddRowAfterButtonDirective, EditorAddRowBeforeButtonDirective, EditorDeleteColumnButtonDirective, EditorDeleteRowButtonDirective, EditorDeleteTableButtonDirective, EditorInsertTableButtonComponent, EditorMergeCellsButtonDirective, EditorSplitCellButtonDirective, PopupTableGridComponent, EditorToolsService, EditorBoldButtonDirective, EditorItalicButtonDirective, EditorStrikethroughButtonDirective, EditorSubscriptButtonDirective, EditorSuperscriptButtonDirective, EditorUnderlineButtonDirective, EditorComponent, EditorModule, schema, EditorPasteEvent };