ngx-tiptap-editor
Version:
[](https://github.com/HuiiBuh/ngx-tiptap-editor/actions/workflows/publish.yml) [![Deploy to Github Pages](https://github.com/HuiiBuh/ngx-tiptap-edito
88 lines • 10.9 kB
JavaScript
import { ChangeDetectionStrategy, Component, Input, ViewChild } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class EditorBodyComponent {
constructor() {
this.minHeight = '';
this.maxHeight = '';
this._displayTopCurves = true;
this._displayBottomCurves = true;
this.editor = null;
this._editorElement = null;
this._bodyWrapper = null;
}
set displayTopCurves(value) {
this._displayTopCurves = value;
this.applyBorderClasses();
}
set displayBottomCurves(value) {
this._displayBottomCurves = value;
this.applyBorderClasses();
}
get editorElement() {
return this._editorElement ? this._editorElement.nativeElement : null;
}
get height() {
if (this.minHeight && !this.maxHeight) {
return this.minHeight;
}
if (this.minHeight && !this.maxHeight || this.maxHeight && !this.minHeight) {
console.warn('You have to set minHeight and maxHeight of the tip-editor-body for it to work properly.\n' +
'The values however can be the same');
return '';
}
else if (!this.minHeight && !this.maxHeight) {
return '';
}
return '200vh';
}
setEditor(tiptapEditor) {
this.editor = tiptapEditor;
}
applyBorderClasses() {
if (!this._bodyWrapper)
return;
const wrapperElement = this._bodyWrapper.nativeElement;
if (this._displayBottomCurves) {
wrapperElement.classList.add('curve-bottom');
}
else {
wrapperElement.classList.remove('curve-bottom');
}
if (this._displayTopCurves) {
wrapperElement.classList.add('curve-top');
}
else {
wrapperElement.classList.remove('curve-top');
}
}
}
EditorBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: EditorBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
EditorBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: EditorBodyComponent, selector: "tip-editor-body, tip-editor-body[minHeight][maxHeight]", inputs: { minHeight: "minHeight", maxHeight: "maxHeight" }, viewQueries: [{ propertyName: "_editorElement", first: true, predicate: ["editorBody"], descendants: true }, { propertyName: "_bodyWrapper", first: true, predicate: ["bodyWrapper"], descendants: true }], ngImport: i0, template: `
<div class="editor-body" [ngStyle]="{minHeight: minHeight, maxHeight: maxHeight}"
#bodyWrapper
>
<div class="tiptap-view" #editorBody></div>
</div>
`, isInline: true, styles: [".editor-body{display:flex;overflow:auto;flex-direction:column;height:100%;padding:1rem;border:solid 1px var(--tip-border-color)}.curve-top{border-top-left-radius:var(--tip-border-radius);border-top-right-radius:var(--tip-border-radius)}.curve-bottom{border-bottom-right-radius:var(--tip-border-radius);border-bottom-left-radius:var(--tip-border-radius)}::ng-deep .ProseMirror>*:first-child{margin-top:0}::ng-deep .ProseMirror>*:last-child{margin-bottom:0}.tiptap-view{display:flex;flex-direction:column;flex-grow:1;height:100%}::ng-deep tip-editor-body .ProseMirror{flex-grow:1}\n"], directives: [{ type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: EditorBodyComponent, decorators: [{
type: Component,
args: [{ selector: 'tip-editor-body, tip-editor-body[minHeight][maxHeight]', template: `
<div class="editor-body" [ngStyle]="{minHeight: minHeight, maxHeight: maxHeight}"
#bodyWrapper
>
<div class="tiptap-view" #editorBody></div>
</div>
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".editor-body{display:flex;overflow:auto;flex-direction:column;height:100%;padding:1rem;border:solid 1px var(--tip-border-color)}.curve-top{border-top-left-radius:var(--tip-border-radius);border-top-right-radius:var(--tip-border-radius)}.curve-bottom{border-bottom-right-radius:var(--tip-border-radius);border-bottom-left-radius:var(--tip-border-radius)}::ng-deep .ProseMirror>*:first-child{margin-top:0}::ng-deep .ProseMirror>*:last-child{margin-bottom:0}.tiptap-view{display:flex;flex-direction:column;flex-grow:1;height:100%}::ng-deep tip-editor-body .ProseMirror{flex-grow:1}\n"] }]
}], propDecorators: { minHeight: [{
type: Input
}], maxHeight: [{
type: Input
}], _editorElement: [{
type: ViewChild,
args: ['editorBody']
}], _bodyWrapper: [{
type: ViewChild,
args: ['bodyWrapper']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWRpdG9yLWJvZHkuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXRpcHRhcC1lZGl0b3Ivc3JjL2xpYi9jb21wb25lbnRzL2VkaXRvci1ib2R5L2VkaXRvci1ib2R5LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFjLEtBQUssRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7OztBQWVqRyxNQUFNLE9BQU8sbUJBQW1CO0lBWmhDO1FBYWtCLGNBQVMsR0FBRyxFQUFFLENBQUM7UUFDZixjQUFTLEdBQUcsRUFBRSxDQUFDO1FBQ3ZCLHNCQUFpQixHQUFHLElBQUksQ0FBQztRQUN6Qix5QkFBb0IsR0FBRyxJQUFJLENBQUM7UUFDNUIsV0FBTSxHQUFrQixJQUFJLENBQUM7UUFDSixtQkFBYyxHQUFzQyxJQUFJLENBQUM7UUFDeEQsaUJBQVksR0FBc0MsSUFBSSxDQUFDO0tBcUQxRjtJQW5EQyxJQUFXLGdCQUFnQixDQUFDLEtBQWM7UUFDeEMsSUFBSSxDQUFDLGlCQUFpQixHQUFHLEtBQUssQ0FBQztRQUMvQixJQUFJLENBQUMsa0JBQWtCLEVBQUUsQ0FBQztJQUM1QixDQUFDO0lBRUQsSUFBVyxtQkFBbUIsQ0FBQyxLQUFjO1FBQzNDLElBQUksQ0FBQyxvQkFBb0IsR0FBRyxLQUFLLENBQUM7UUFDbEMsSUFBSSxDQUFDLGtCQUFrQixFQUFFLENBQUM7SUFFNUIsQ0FBQztJQUVELElBQUksYUFBYTtRQUNmLE9BQU8sSUFBSSxDQUFDLGNBQWMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLGNBQWMsQ0FBQyxhQUFhLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQztJQUN4RSxDQUFDO0lBRUQsSUFBVyxNQUFNO1FBQ2YsSUFBSSxJQUFJLENBQUMsU0FBUyxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsRUFBRTtZQUVyQyxPQUFPLElBQUksQ0FBQyxTQUFTLENBQUM7U0FDdkI7UUFFRCxJQUFJLElBQUksQ0FBQyxTQUFTLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUyxJQUFJLElBQUksQ0FBQyxTQUFTLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUyxFQUFFO1lBQzFFLE9BQU8sQ0FBQyxJQUFJLENBQUMsMkZBQTJGO2dCQUN0RyxvQ0FBb0MsQ0FBQyxDQUFDO1lBQ3hDLE9BQU8sRUFBRSxDQUFDO1NBQ1g7YUFBTSxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLEVBQUU7WUFDN0MsT0FBTyxFQUFFLENBQUM7U0FDWDtRQUVELE9BQU8sT0FBTyxDQUFDO0lBQ2pCLENBQUM7SUFFTSxTQUFTLENBQUMsWUFBb0I7UUFDbkMsSUFBSSxDQUFDLE1BQU0sR0FBRyxZQUFZLENBQUM7SUFDN0IsQ0FBQztJQUVPLGtCQUFrQjtRQUN4QixJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVk7WUFBRSxPQUFPO1FBQy9CLE1BQU0sY0FBYyxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUMsYUFBYSxDQUFDO1FBQ3ZELElBQUksSUFBSSxDQUFDLG9CQUFvQixFQUFFO1lBQzdCLGNBQWMsQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLGNBQWMsQ0FBQyxDQUFDO1NBQzlDO2FBQU07WUFDTCxjQUFjLENBQUMsU0FBUyxDQUFDLE1BQU0sQ0FBQyxjQUFjLENBQUMsQ0FBQztTQUNqRDtRQUNELElBQUksSUFBSSxDQUFDLGlCQUFpQixFQUFFO1lBQzFCLGNBQWMsQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLFdBQVcsQ0FBQyxDQUFDO1NBQzNDO2FBQU07WUFDTCxjQUFjLENBQUMsU0FBUyxDQUFDLE1BQU0sQ0FBQyxXQUFXLENBQUMsQ0FBQztTQUM5QztJQUNILENBQUM7O2dIQTFEVSxtQkFBbUI7b0dBQW5CLG1CQUFtQixzV0FWcEI7Ozs7OztHQU1UOzJGQUlVLG1CQUFtQjtrQkFaL0IsU0FBUzsrQkFDRSx3REFBd0QsWUFDeEQ7Ozs7OztHQU1ULG1CQUNnQix1QkFBdUIsQ0FBQyxNQUFNOzhCQUkvQixTQUFTO3NCQUF4QixLQUFLO2dCQUNVLFNBQVM7c0JBQXhCLEtBQUs7Z0JBSTJCLGNBQWM7c0JBQTlDLFNBQVM7dUJBQUMsWUFBWTtnQkFDVyxZQUFZO3NCQUE3QyxTQUFTO3VCQUFDLGFBQWEiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBJbnB1dCwgVmlld0NoaWxkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgdHlwZSB7IEVkaXRvciB9IGZyb20gJ0B0aXB0YXAvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3RpcC1lZGl0b3ItYm9keSwgdGlwLWVkaXRvci1ib2R5W21pbkhlaWdodF1bbWF4SGVpZ2h0XScsXG4gIHRlbXBsYXRlOiBgXG4gICAgPGRpdiBjbGFzcz1cImVkaXRvci1ib2R5XCIgW25nU3R5bGVdPVwie21pbkhlaWdodDogbWluSGVpZ2h0LCBtYXhIZWlnaHQ6IG1heEhlaWdodH1cIlxuICAgICAgICAgI2JvZHlXcmFwcGVyXG4gICAgPlxuICAgICAgPGRpdiBjbGFzcz1cInRpcHRhcC12aWV3XCIgI2VkaXRvckJvZHk+PC9kaXY+XG4gICAgPC9kaXY+XG4gIGAsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBzdHlsZVVybHM6IFsnLi9lZGl0b3ItYm9keS5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIEVkaXRvckJvZHlDb21wb25lbnQge1xuICBASW5wdXQoKSBwdWJsaWMgbWluSGVpZ2h0ID0gJyc7XG4gIEBJbnB1dCgpIHB1YmxpYyBtYXhIZWlnaHQgPSAnJztcbiAgcHJpdmF0ZSBfZGlzcGxheVRvcEN1cnZlcyA9IHRydWU7XG4gIHByaXZhdGUgX2Rpc3BsYXlCb3R0b21DdXJ2ZXMgPSB0cnVlO1xuICBwcml2YXRlIGVkaXRvcjogRWRpdG9yIHwgbnVsbCA9IG51bGw7XG4gIEBWaWV3Q2hpbGQoJ2VkaXRvckJvZHknKSBwcml2YXRlIF9lZGl0b3JFbGVtZW50OiBFbGVtZW50UmVmPEhUTUxEaXZFbGVtZW50PiB8IG51bGwgPSBudWxsO1xuICBAVmlld0NoaWxkKCdib2R5V3JhcHBlcicpIHByaXZhdGUgX2JvZHlXcmFwcGVyOiBFbGVtZW50UmVmPEhUTUxEaXZFbGVtZW50PiB8IG51bGwgPSBudWxsO1xuXG4gIHB1YmxpYyBzZXQgZGlzcGxheVRvcEN1cnZlcyh2YWx1ZTogYm9vbGVhbikge1xuICAgIHRoaXMuX2Rpc3BsYXlUb3BDdXJ2ZXMgPSB2YWx1ZTtcbiAgICB0aGlzLmFwcGx5Qm9yZGVyQ2xhc3NlcygpO1xuICB9XG5cbiAgcHVibGljIHNldCBkaXNwbGF5Qm90dG9tQ3VydmVzKHZhbHVlOiBib29sZWFuKSB7XG4gICAgdGhpcy5fZGlzcGxheUJvdHRvbUN1cnZlcyA9IHZhbHVlO1xuICAgIHRoaXMuYXBwbHlCb3JkZXJDbGFzc2VzKCk7XG5cbiAgfVxuXG4gIGdldCBlZGl0b3JFbGVtZW50KCk6IEhUTUxEaXZFbGVtZW50IHwgbnVsbCB7XG4gICAgcmV0dXJuIHRoaXMuX2VkaXRvckVsZW1lbnQgPyB0aGlzLl9lZGl0b3JFbGVtZW50Lm5hdGl2ZUVsZW1lbnQgOiBudWxsO1xuICB9XG5cbiAgcHVibGljIGdldCBoZWlnaHQoKTogc3RyaW5nIHtcbiAgICBpZiAodGhpcy5taW5IZWlnaHQgJiYgIXRoaXMubWF4SGVpZ2h0KSB7XG5cbiAgICAgIHJldHVybiB0aGlzLm1pbkhlaWdodDtcbiAgICB9XG5cbiAgICBpZiAodGhpcy5taW5IZWlnaHQgJiYgIXRoaXMubWF4SGVpZ2h0IHx8IHRoaXMubWF4SGVpZ2h0ICYmICF0aGlzLm1pbkhlaWdodCkge1xuICAgICAgY29uc29sZS53YXJuKCdZb3UgaGF2ZSB0byBzZXQgbWluSGVpZ2h0IGFuZCBtYXhIZWlnaHQgb2YgdGhlIHRpcC1lZGl0b3ItYm9keSBmb3IgaXQgdG8gd29yayBwcm9wZXJseS5cXG4nICtcbiAgICAgICAgJ1RoZSB2YWx1ZXMgaG93ZXZlciBjYW4gYmUgdGhlIHNhbWUnKTtcbiAgICAgIHJldHVybiAnJztcbiAgICB9IGVsc2UgaWYgKCF0aGlzLm1pbkhlaWdodCAmJiAhdGhpcy5tYXhIZWlnaHQpIHtcbiAgICAgIHJldHVybiAnJztcbiAgICB9XG5cbiAgICByZXR1cm4gJzIwMHZoJztcbiAgfVxuXG4gIHB1YmxpYyBzZXRFZGl0b3IodGlwdGFwRWRpdG9yOiBFZGl0b3IpOiB2b2lkIHtcbiAgICB0aGlzLmVkaXRvciA9IHRpcHRhcEVkaXRvcjtcbiAgfVxuXG4gIHByaXZhdGUgYXBwbHlCb3JkZXJDbGFzc2VzKCk6IHZvaWQge1xuICAgIGlmICghdGhpcy5fYm9keVdyYXBwZXIpIHJldHVybjtcbiAgICBjb25zdCB3cmFwcGVyRWxlbWVudCA9IHRoaXMuX2JvZHlXcmFwcGVyLm5hdGl2ZUVsZW1lbnQ7XG4gICAgaWYgKHRoaXMuX2Rpc3BsYXlCb3R0b21DdXJ2ZXMpIHtcbiAgICAgIHdyYXBwZXJFbGVtZW50LmNsYXNzTGlzdC5hZGQoJ2N1cnZlLWJvdHRvbScpO1xuICAgIH0gZWxzZSB7XG4gICAgICB3cmFwcGVyRWxlbWVudC5jbGFzc0xpc3QucmVtb3ZlKCdjdXJ2ZS1ib3R0b20nKTtcbiAgICB9XG4gICAgaWYgKHRoaXMuX2Rpc3BsYXlUb3BDdXJ2ZXMpIHtcbiAgICAgIHdyYXBwZXJFbGVtZW50LmNsYXNzTGlzdC5hZGQoJ2N1cnZlLXRvcCcpO1xuICAgIH0gZWxzZSB7XG4gICAgICB3cmFwcGVyRWxlbWVudC5jbGFzc0xpc3QucmVtb3ZlKCdjdXJ2ZS10b3AnKTtcbiAgICB9XG4gIH1cblxufVxuIl19