@progress/kendo-angular-editor 4.0.0-next.202204121114 → 4.1.0-dev.202205251353

package/fesm2015/kendo-angular-editor.js

@@ -11,7 +11,7 @@ import { take, map, filter as filter$1, concatMap, takeUntil } from 'rxjs/operat
 import * as i1$3 from '@progress/kendo-angular-toolbar';
 import { ToolBarToolComponent, ToolBarComponent, ToolBarModule } from '@progress/kendo-angular-toolbar';
 import { isDocumentAvailable, guid, hasObservers, KendoInput, Keys } from '@progress/kendo-angular-common';
-import { marks as marks$1, nodes as nodes$1, Schema, createTable, insertNode, alignBlocks, alignRemoveRules, expandToWordWrap, toggleInlineFormat, bold, cleanFormatting, applyLink, applyInlineStyle, insertText, italic, strikethrough, subscript, superscript, underline, removeLink, link, selectAll, isAligned, alignCenterRules, 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, getSelectionText as getSelectionText$1, getNodeFromSelection, getMark, removeComments, sanitize, removeAttribute, sanitizeStyleAttr, sanitizeClassAttr, pasteCleanup, parseContent, AllSelection, TextSelection, Plugin, PluginKey, history, keymap, buildListKeymap, buildKeymap, baseKeymap, gapCursor, imageResizing, tableEditing, caretColor, placeholder, EditorState, EditorView } from '@progress/kendo-editor-common';
+import { marks as marks$1, nodes as nodes$1, Schema, createTable, insertNode, alignBlocks, alignRemoveRules, expandToWordWrap, toggleInlineFormat, bold, cleanFormatting, applyLink, applyInlineStyle, insertText, italic, strikethrough, subscript, superscript, underline, removeLink, link, selectAll, isAligned, alignCenterRules, 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, getSelectionText as getSelectionText$1, getNodeFromSelection, getMark, removeComments, sanitize, removeAttribute, sanitizeStyleAttr, sanitizeClassAttr, pasteCleanup, parseContent, AllSelection, TextSelection, Plugin, PluginKey, history, keymap, buildListKeymap, buildKeymap, baseKeymap, gapCursor, imageResizing, tableResizing, tableEditing, caretColor, placeholder, EditorState, EditorView } from '@progress/kendo-editor-common';
 export { Decoration, DecorationSet, EditorState, EditorView, InputRule, Mark, MarkType, Node, NodeType, Plugin, PluginKey, Schema, Transaction, baseKeymap, dropCursor, gapCursor, history, inputRules, keymap, tableNodes, textblockTypeInputRule, wrappingInputRule } from '@progress/kendo-editor-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i1$1 from '@progress/kendo-angular-dialog';
@@ -35,7 +35,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-editor',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1649761501,
+    publishDate: 1653486755,
     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'
 };
@@ -179,7 +179,7 @@ const inlineCommand = {
     cleanFormatting: (options) => cleanFormatting(options),
     createLink: attrs => expandToWordWrap(applyLink, { mark: 'link', attrs: attrs.value, applyToWord: attrs.applyToWord }),
     fontFamily: attrs => expandToWordWrap(applyInlineStyle, { style: 'font-family', value: attrs.value, applyToWord: attrs.applyToWord }),
-    fontSize: attrs => expandToWordWrap(applyInlineStyle, { style: 'font-size', value: attrs.value + 'px', applyToWord: attrs.applyToWord }),
+    fontSize: attrs => expandToWordWrap(applyInlineStyle, { style: 'font-size', value: attrs.value, applyToWord: attrs.applyToWord }),
     insertFile: attrs => expandToWordWrap(applyLink, { mark: 'link', attrs: attrs, applyToWord: attrs.applyToWord }),
     insertText: text => insertText(text),
     italic: (applyToWord) => expandToWordWrap(toggleInlineFormat, Object.assign(Object.assign({}, italic), { applyToWord })),
@@ -1279,56 +1279,82 @@ const defaultStyle = `
  * @hidden
  */
 const tablesStyles = `
-.ProseMirror .tableWrapper {
-    overflow-x: auto;
-    margin: 1em 0;
-}
+    .ProseMirror .tableWrapper {
+        overflow-x: auto;
+        margin: 1em 0;
+    }
 
-.ProseMirror table {
-    margin: 0;
-    border-collapse: collapse;
-    table-layout: fixed;
-    width: 100%;
-    overflow: hidden;
-}
+    .ProseMirror table {
+        margin: 0;
+        border-collapse: collapse;
+        table-layout: fixed;
+        width: 100%;
+        overflow: hidden;
+    }
 
-.ProseMirror td, .ProseMirror th {
-    min-width: 1em;
-    border: 1px solid #ddd;
-    padding: 3px 5px;
-    vertical-align: top;
-    box-sizing: border-box;
-    position: relative;
-}
+    .ProseMirror td, .ProseMirror th {
+        min-width: 1em;
+        border: 1px solid #ddd;
+        padding: 3px 5px;
+        vertical-align: top;
+        box-sizing: border-box;
+        position: relative;
+    }
 
-.ProseMirror th {
-    font-weight: bold;
-    text-align: left;
-}
+    .ProseMirror th {
+        font-weight: bold;
+        text-align: left;
+    }
 
-.ProseMirror .column-resize-handle {
-    position: absolute;
-    right: -2px; top: 0; bottom: 0;
-    width: 4px;
-    z-index: 20;
-    background-color: #adf;
-    pointer-events: none;
-}
+    .ProseMirror .column-resize-handle {
+        position: absolute;
+        right: -2px; top: 0; bottom: 0;
+        width: 4px;
+        z-index: 20;
+        background-color: #adf;
+        pointer-events: none;
+    }
 
-.ProseMirror.resize-cursor {
-    cursor: ew-resize;
-    cursor: col-resize;
-}
+    .ProseMirror.resize-cursor {
+        cursor: ew-resize;
+        cursor: col-resize;
+    }
 
-/* Give selected cells a blue overlay */
-.ProseMirror .selectedCell:after {
-    z-index: 2;
-    position: absolute;
-    content: "";
-    left: 0; right: 0; top: 0; bottom: 0;
-    background: rgba(200, 200, 255, 0.4);
-    pointer-events: none;
-}
+    /* Give selected cells a blue overlay */
+    .ProseMirror .selectedCell:after {
+        z-index: 2;
+        position: absolute;
+        content: "";
+        left: 0; right: 0; top: 0; bottom: 0;
+        background: rgba(200, 200, 255, 0.4);
+        pointer-events: none;
+    }
+
+    /* Resizing */
+    .k-editor-resize-wrap-element {
+        display: inline-block;
+        position: relative;
+    }
+
+    .ProseMirror .row-resize-handle {
+        position: absolute;
+        right: 0; left: 0; bottom: 0;
+        transform: translate(0, 50%);
+        height: 4px;
+        z-index: 20;
+        background-color: #adf;
+        pointer-events: none;
+    }
+    
+    .ProseMirror.resize-cursor-vertical {
+        cursor: sn-resize;
+        cursor: row-resize;
+    }
+
+    .k-editor-resize-wrap-element table td p,
+    .k-editor-resize-wrap-element table th p {
+        margin: 0 auto;
+    }
 `;
 /**
  * @hidden
@@ -2797,7 +2823,7 @@ class EditorComponent {
         this.onChangeCallback = (value) => {
             this.changeValue(value);
         };
-        this.onTouchedCallback = (_) => { }; // tslint:disable-line:no-empty
+        this.onTouchedCallback = (_) => { };
         this.onPaste = (_view, nativeEvent) => {
             this._pasteEvent = nativeEvent;
             return false;
@@ -2978,6 +3004,9 @@ class EditorComponent {
     get toolbar() {
         return this.defaultToolbarComponent || this.userToolBarComponent;
     }
+    get toolbarElement() {
+        return this.defaultToolbar || this.userToolBarElement;
+    }
     /**
      * Returns the ProseMirror [EditorView](https://prosemirror.net/docs/ref/#view.EditorView) object
      * that manages the DOM structure that represents an editable document.
@@ -2998,6 +3027,7 @@ class EditorComponent {
         this.subs.add(this.toolsService.needsCheck.subscribe(() => this.cdr.markForCheck()));
     }
     ngAfterViewInit() {
+        var _a;
         this.afterViewInit.next();
         if (!this.iframe) {
             this.contentAreaLoaded.next();
@@ -3005,6 +3035,13 @@ class EditorComponent {
         if (this.resizable) {
             this.normalizeSize();
         }
+        // address edge cases for responsive toolbar tools
+        // calculations - https://github.com/telerik/kendo-angular/issues/3661
+        if ((_a = this.toolbar) === null || _a === void 0 ? void 0 : _a.resizable) {
+            this.ngZone.runOutsideAngular(() => {
+                setTimeout(() => this.toolbar.onResize(), 70);
+            });
+        }
     }
     ngOnChanges(changes) {
         if (changes.value && this.view) {
@@ -3255,6 +3292,7 @@ class EditorComponent {
             keymap(baseKeymap),
             gapCursor(),
             imageResizing(),
+            ...tableResizing(),
             tableEditing(),
             caretColor()
         ];
@@ -3336,7 +3374,7 @@ class EditorComponent {
         }));
         this.subs.add(fromEvent(this.viewMountElement, 'keyup')
             .pipe(map((e) => e.keyCode), filter$1((code) => code === 121), // F10
-        map(() => this.userToolBarElement || this.defaultToolbar))
+        map(() => this.toolbarElement))
             .subscribe((toolbar) => toolbar.nativeElement.focus()));
         this.subs.add(fromEvent(this.viewMountElement, 'blur')
             .pipe(filter$1((event) => !this.viewMountElement.contains(event.relatedTarget)))
@@ -3415,7 +3453,7 @@ EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             provide: KendoInput,
             useExisting: forwardRef(() => EditorComponent)
         }
-    ], queries: [{ propertyName: "userToolBarComponent", first: true, predicate: ToolBarComponent, descendants: true }, { propertyName: "userToolBarElement", first: true, predicate: ToolBarComponent, descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "dialogContainer", first: true, predicate: ["dialogsContainer"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "container", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef }, { propertyName: "defaultToolbar", first: true, predicate: ["defaultToolbar"], descendants: true, read: ElementRef }, { propertyName: "defaultToolbarComponent", first: true, predicate: ["defaultToolbar"], descendants: true, read: ToolBarComponent }], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "userToolBarComponent", first: true, predicate: ToolBarComponent, descendants: true }, { propertyName: "userToolBarElement", first: true, predicate: ToolBarComponent, descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "dialogContainer", first: true, predicate: ["dialogsContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "container", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef }, { propertyName: "defaultToolbar", first: true, predicate: ["defaultToolbar"], descendants: true, read: ElementRef }, { propertyName: "defaultToolbarComponent", first: true, predicate: ["defaultToolbar"], descendants: true, read: ToolBarComponent }], usesOnChanges: true, ngImport: i0, template: `
         <ng-container
             kendoEditorLocalizedMessages
             i18n-alignCenter="kendo.editor.alignCenter|The title of the tool that aligns text in the center."
@@ -3526,7 +3564,6 @@ EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             deleteTable="Delete table"
         >
         </ng-container>
-
         <ng-content select="kendo-toolbar"></ng-content>
         <kendo-toolbar [overflow]="true" [tabindex]="readonly ? -1 : 0" *ngIf="!userToolBarElement" #defaultToolbar>
             <kendo-toolbar-buttongroup>
@@ -3699,7 +3736,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             deleteTable="Delete table"
         >
         </ng-container>
-
         <ng-content select="kendo-toolbar"></ng-content>
         <kendo-toolbar [overflow]="true" [tabindex]="readonly ? -1 : 0" *ngIf="!userToolBarElement" #defaultToolbar>
             <kendo-toolbar-buttongroup>
@@ -3820,16 +3856,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['style.maxHeight']
             }], userToolBarComponent: [{
                 type: ContentChild,
-                args: [ToolBarComponent, { static: false }]
+                args: [ToolBarComponent]
             }], userToolBarElement: [{
                 type: ContentChild,
-                args: [ToolBarComponent, { read: ElementRef, static: false }]
+                args: [ToolBarComponent, { read: ElementRef }]
             }], dialogContainer: [{
                 type: ViewChild,
-                args: ['dialogsContainer', { read: ViewContainerRef, static: true }]
+                args: ['dialogsContainer', { read: ViewContainerRef }]
             }], container: [{
                 type: ViewChild,
-                args: ['content', { read: ViewContainerRef, static: false }]
+                args: ['content', { read: ViewContainerRef }]
             }], defaultToolbar: [{
                 type: ViewChild,
                 args: ['defaultToolbar', { read: ElementRef, static: false }]
@@ -4485,21 +4521,31 @@ class EditorFontSizeComponent extends ToolBarToolComponent {
          */
         this.valueChange = new EventEmitter();
         this._data = [
-            { text: '8px', size: 8 },
-            { text: '10px', size: 10 },
-            { text: '12px', size: 12 },
-            { text: '14px', size: 14 },
-            { text: '18px', size: 18 },
-            { text: '24px', size: 24 },
-            { text: '36px', size: 36 }
+            { text: '8px', size: '8px' },
+            { text: '10px', size: '10px' },
+            { text: '12px', size: '12px' },
+            { text: '14px', size: '14px' },
+            { text: '18px', size: '18px' },
+            { text: '24px', size: '24px' },
+            { text: '36px', size: '36px' }
         ];
         this.editor = providerService.editor;
     }
     /**
      * Overrides the default font size list.
+     * Numeric values are treated as pixels.
      */
     set data(sizes) {
-        this._data = sizes || this._data;
+        let normalizedSizes;
+        if (sizes) {
+            normalizedSizes = sizes.map(s => {
+                if (typeof s.size === 'number') {
+                    return Object.assign(Object.assign({}, s), { size: `${s.size}px` });
+                }
+                return s;
+            });
+        }
+        this._data = normalizedSizes || this._data;
     }
     get data() {
         return this._data;
@@ -4520,7 +4566,7 @@ class EditorFontSizeComponent extends ToolBarToolComponent {
         this.subs = this.editor.stateChange.subscribe(({ style }) => {
             // remove units(px, em, rem...)
             // string#match returns array
-            this.value = (getUniqueStyleValues(style.selected, 'font-size').match(/\d+/g) || [null])[0];
+            this.value = getUniqueStyleValues(style.selected, 'font-size') || null;
             this.disabled = style.disabled;
         });
     }
@@ -4531,7 +4577,7 @@ class EditorFontSizeComponent extends ToolBarToolComponent {
         if (isPresent(ev)) {
             this.editor.exec('fontSize', ev);
             this.editor.view.focus();
-            this.valueChange.emit(this.data.find(d => d.size === parseInt(ev, 10)));
+            this.valueChange.emit(this.data.find(d => d.size === ev));
         }
     }
     ngOnDestroy() {

package/main.d.ts

@@ -5,7 +5,7 @@
 export { EditorComponent } from './editor.component';
 export { EditorModule } from './editor.module';
 export { schema, Schema } from './config/schema';
-export { EditorState, Plugin, PluginKey, Transaction, EditorView, Decoration, DecorationSet, NodeType, Node, MarkType, Mark, InputRule, inputRules, wrappingInputRule, textblockTypeInputRule, keymap, baseKeymap, history, dropCursor, gapCursor, tableNodes } from '@progress/kendo-editor-common';
+export { EditorState, Plugin, PluginKey, Transaction, EditorView, Decoration, DecorationSet, NodeType, Node, MarkType, Mark, InputRule, inputRules, wrappingInputRule, textblockTypeInputRule, keymap, baseKeymap, history, dropCursor, gapCursor, tableNodes, NodeSpec, MarkSpec } from '@progress/kendo-editor-common';
 export { getSelectionText } from './util';
 export { PluginsFn } from './common/plugins-function';
 export { ApplyToWordOptions } from './common/apply-to-word-options';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-editor",
-  "version": "4.0.0-next.202204121114",
+  "version": "4.1.0-dev.202205251353",
   "description": "Kendo UI Editor for Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -20,24 +20,24 @@
     "friendlyName": "Editor"
   },
   "dependencies": {
-    "@progress/kendo-editor-common": "dev",
+    "@progress/kendo-editor-common": "1.9.0",
     "@progress/kendo-schematics": "^3.0.0",
     "tslib": "^2.3.1"
   },
   "peerDependencies": {
-    "@angular/common": "^12.0.0 || ^13.0.0",
-    "@angular/core": "^12.0.0 || ^13.0.0",
-    "@angular/forms": "^12.0.0 || ^13.0.0",
-    "@progress/kendo-angular-buttons": ">8.0.0-next",
-    "@progress/kendo-angular-common": ">3.0.0-next",
-    "@progress/kendo-angular-dialog": ">7.0.0-next",
-    "@progress/kendo-angular-dropdowns": ">7.0.0-next",
-    "@progress/kendo-angular-inputs": ">9.0.0-next",
-    "@progress/kendo-angular-intl": ">4.0.0-next",
-    "@progress/kendo-angular-l10n": ">4.0.0-next",
-    "@progress/kendo-angular-layout": ">7.0.0-next",
-    "@progress/kendo-angular-popup": ">5.0.0-next",
-    "@progress/kendo-angular-toolbar": ">6.0.0-next",
+    "@angular/common": "12 - 14",
+    "@angular/core": "12 - 14",
+    "@angular/forms": "12 - 14",
+    "@progress/kendo-angular-buttons": "^8.0.0",
+    "@progress/kendo-angular-common": "^3.0.0",
+    "@progress/kendo-angular-dialog": "^7.0.0",
+    "@progress/kendo-angular-dropdowns": "^7.0.0",
+    "@progress/kendo-angular-inputs": "^9.0.0",
+    "@progress/kendo-angular-intl": "^4.0.0",
+    "@progress/kendo-angular-l10n": "^4.0.0",
+    "@progress/kendo-angular-layout": "^7.0.0",
+    "@progress/kendo-angular-popup": "^5.0.0",
+    "@progress/kendo-angular-toolbar": "^6.0.0",
     "@progress/kendo-drawing": "^1.5.12",
     "@progress/kendo-licensing": "^1.0.2",
     "rxjs": "^6.5.3 || ^7.0.0"
@@ -69,12 +69,10 @@
   "release": {
     "debug": false,
     "branchTags": {
-      "develop": "dev",
-      "ng12-update": "next"
+      "develop": "dev"
     },
     "fallbackTags": {
-      "dev": "latest",
-      "next": "latest"
+      "dev": "latest"
     },
     "analyzeCommits": "@telerik/semantic-prerelease/analyzeCommits",
     "generateNotes": "@progress/kendo-angular-tasks/lib/generateNotes",

package/schematics/ngAdd/index.js

@@ -8,9 +8,9 @@ const schematics_1 = require("@angular-devkit/schematics");
 function default_1(options) {
     const finalOptions = Object.assign(Object.assign({}, options), { mainNgModule: 'EditorModule', package: 'editor', peerDependencies: {
             // peer dependency of kendo-angular-dropdowns
-            '@progress/kendo-angular-treeview': '^6.0.0',
+            '@progress/kendo-angular-treeview': '^7.0.0',
             // peer dependency of kendo-angular-layout
-            '@progress/kendo-angular-progressbar': '^2.0.0'
+            '@progress/kendo-angular-progressbar': '^3.0.0'
         } });
     return schematics_1.externalSchematic('@progress/kendo-schematics', 'ng-add', finalOptions);
 }

package/tools/fontsize/editor-fontsize.component.d.ts

@@ -32,6 +32,7 @@ export declare class EditorFontSizeComponent extends ToolBarToolComponent {
     tabindex: number;
     /**
      * Overrides the default font size list.
+     * Numeric values are treated as pixels.
      */
     set data(sizes: FontSizeItem[]);
     get data(): FontSizeItem[];