ngx-editor
Version:
Rich Text Editor for angular using ProseMirror
66 lines • 13.2 kB
JavaScript
import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class ImageViewComponent {
constructor() {
this.alt = '';
this.title = '';
this.outerWidth = '';
this.selected = false;
this.imageResize = new EventEmitter();
}
startResizing(e, direction) {
e.preventDefault();
this.resizeImage(e, direction);
}
resizeImage(evt, direction) {
const startX = evt.pageX;
const startWidth = this.imgEl.nativeElement.clientWidth;
const isLeftResize = direction === 'left';
const { width } = window.getComputedStyle(this.view.dom);
const editorWidth = parseInt(width, 10);
const onMouseMove = (e) => {
const currentX = e.pageX;
const diffInPx = currentX - startX;
const computedWidth = isLeftResize ? startWidth - diffInPx : startWidth + diffInPx;
// prevent image overflow the editor
// prevent resizng below 20px
if (computedWidth > editorWidth || computedWidth < 20) {
return;
}
this.outerWidth = `${computedWidth}px`;
};
const onMouseUp = (e) => {
e.preventDefault();
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
this.imageResize.emit();
};
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
}
}
ImageViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: ImageViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
ImageViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: ImageViewComponent, selector: "ngx-image-view", inputs: { src: "src", alt: "alt", title: "title", outerWidth: "outerWidth", selected: "selected", view: "view" }, outputs: { imageResize: "imageResize" }, viewQueries: [{ propertyName: "imgEl", first: true, predicate: ["imgEl"], descendants: true, static: true }], ngImport: i0, template: "<span class=\"NgxEditor__ImageWrapper\" [ngClass]=\"{'NgxEditor__Resizer--Active': selected}\" [style.width]=\"outerWidth\">\n <span class=\"NgxEditor__ResizeHandle\" *ngIf=\"selected\">\n <span class=\"NgxEditor__ResizeHandle--TL\" (mousedown)=\"startResizing($event, 'left')\"></span>\n <span class=\"NgxEditor__ResizeHandle--TR\" (mousedown)=\"startResizing($event, 'right')\"></span>\n <span class=\"NgxEditor__ResizeHandle--BL\" (mousedown)=\"startResizing($event, 'left')\"></span>\n <span class=\"NgxEditor__ResizeHandle--BR\" (mousedown)=\"startResizing($event, 'right')\"></span>\n </span>\n <img [src]=\"src\" [alt]=\"alt\" [title]=\"title\" #imgEl />\n</span>\n", styles: ["*,*:before,*:after{box-sizing:border-box}img{width:100%;height:100%}.NgxEditor__ImageWrapper{position:relative;display:inline-block;line-height:0;padding:2px}.NgxEditor__ImageWrapper.NgxEditor__Resizer--Active{padding:1px;border:1px solid #1a73e8}.NgxEditor__ImageWrapper .NgxEditor__ResizeHandle{position:absolute;height:100%;width:100%}.NgxEditor__ImageWrapper .NgxEditor__ResizeHandle .NgxEditor__ResizeHandle--TL,.NgxEditor__ImageWrapper .NgxEditor__ResizeHandle .NgxEditor__ResizeHandle--BL,.NgxEditor__ImageWrapper .NgxEditor__ResizeHandle .NgxEditor__ResizeHandle--TR,.NgxEditor__ImageWrapper .NgxEditor__ResizeHandle .NgxEditor__ResizeHandle--BR{position:absolute;width:7px;height:7px;background-color:#1a73e8;border:1px solid white}.NgxEditor__ImageWrapper .NgxEditor__ResizeHandle .NgxEditor__ResizeHandle--BR{bottom:-5px;right:-5px;cursor:se-resize}.NgxEditor__ImageWrapper .NgxEditor__ResizeHandle .NgxEditor__ResizeHandle--TR{top:-5px;right:-5px;cursor:ne-resize}.NgxEditor__ImageWrapper .NgxEditor__ResizeHandle .NgxEditor__ResizeHandle--TL{top:-5px;left:-5px;cursor:nw-resize}.NgxEditor__ImageWrapper .NgxEditor__ResizeHandle .NgxEditor__ResizeHandle--BL{bottom:-5px;left:-5px;cursor:sw-resize}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: ImageViewComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-image-view', template: "<span class=\"NgxEditor__ImageWrapper\" [ngClass]=\"{'NgxEditor__Resizer--Active': selected}\" [style.width]=\"outerWidth\">\n <span class=\"NgxEditor__ResizeHandle\" *ngIf=\"selected\">\n <span class=\"NgxEditor__ResizeHandle--TL\" (mousedown)=\"startResizing($event, 'left')\"></span>\n <span class=\"NgxEditor__ResizeHandle--TR\" (mousedown)=\"startResizing($event, 'right')\"></span>\n <span class=\"NgxEditor__ResizeHandle--BL\" (mousedown)=\"startResizing($event, 'left')\"></span>\n <span class=\"NgxEditor__ResizeHandle--BR\" (mousedown)=\"startResizing($event, 'right')\"></span>\n </span>\n <img [src]=\"src\" [alt]=\"alt\" [title]=\"title\" #imgEl />\n</span>\n", styles: ["*,*:before,*:after{box-sizing:border-box}img{width:100%;height:100%}.NgxEditor__ImageWrapper{position:relative;display:inline-block;line-height:0;padding:2px}.NgxEditor__ImageWrapper.NgxEditor__Resizer--Active{padding:1px;border:1px solid #1a73e8}.NgxEditor__ImageWrapper .NgxEditor__ResizeHandle{position:absolute;height:100%;width:100%}.NgxEditor__ImageWrapper .NgxEditor__ResizeHandle .NgxEditor__ResizeHandle--TL,.NgxEditor__ImageWrapper .NgxEditor__ResizeHandle .NgxEditor__ResizeHandle--BL,.NgxEditor__ImageWrapper .NgxEditor__ResizeHandle .NgxEditor__ResizeHandle--TR,.NgxEditor__ImageWrapper .NgxEditor__ResizeHandle .NgxEditor__ResizeHandle--BR{position:absolute;width:7px;height:7px;background-color:#1a73e8;border:1px solid white}.NgxEditor__ImageWrapper .NgxEditor__ResizeHandle .NgxEditor__ResizeHandle--BR{bottom:-5px;right:-5px;cursor:se-resize}.NgxEditor__ImageWrapper .NgxEditor__ResizeHandle .NgxEditor__ResizeHandle--TR{top:-5px;right:-5px;cursor:ne-resize}.NgxEditor__ImageWrapper .NgxEditor__ResizeHandle .NgxEditor__ResizeHandle--TL{top:-5px;left:-5px;cursor:nw-resize}.NgxEditor__ImageWrapper .NgxEditor__ResizeHandle .NgxEditor__ResizeHandle--BL{bottom:-5px;left:-5px;cursor:sw-resize}\n"] }]
}], propDecorators: { src: [{
type: Input
}], alt: [{
type: Input
}], title: [{
type: Input
}], outerWidth: [{
type: Input
}], selected: [{
type: Input
}], view: [{
type: Input
}], imageResize: [{
type: Output
}], imgEl: [{
type: ViewChild,
args: ['imgEl', { static: true }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW1hZ2Utdmlldy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtZWRpdG9yL3NyYy9saWIvY29tcG9uZW50cy9pbWFnZS12aWV3L2ltYWdlLXZpZXcuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWVkaXRvci9zcmMvbGliL2NvbXBvbmVudHMvaW1hZ2Utdmlldy9pbWFnZS12aWV3LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQWMsWUFBWSxFQUNuQyxLQUFLLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFDekIsTUFBTSxlQUFlLENBQUM7OztBQVN2QixNQUFNLE9BQU8sa0JBQWtCO0lBTi9CO1FBUVcsUUFBRyxHQUFHLEVBQUUsQ0FBQztRQUNULFVBQUssR0FBRyxFQUFFLENBQUM7UUFDWCxlQUFVLEdBQUcsRUFBRSxDQUFDO1FBQ2hCLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFHaEIsZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO0tBNEM1QztJQXhDQyxhQUFhLENBQUMsQ0FBYSxFQUFFLFNBQWlCO1FBQzVDLENBQUMsQ0FBQyxjQUFjLEVBQUUsQ0FBQztRQUNuQixJQUFJLENBQUMsV0FBVyxDQUFDLENBQUMsRUFBRSxTQUFTLENBQUMsQ0FBQztJQUNqQyxDQUFDO0lBRUQsV0FBVyxDQUFDLEdBQWUsRUFBRSxTQUFpQjtRQUM1QyxNQUFNLE1BQU0sR0FBRyxHQUFHLENBQUMsS0FBSyxDQUFDO1FBQ3pCLE1BQU0sVUFBVSxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsYUFBYSxDQUFDLFdBQVcsQ0FBQztRQUV4RCxNQUFNLFlBQVksR0FBRyxTQUFTLEtBQUssTUFBTSxDQUFDO1FBRTFDLE1BQU0sRUFBRSxLQUFLLEVBQUUsR0FBRyxNQUFNLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUN6RCxNQUFNLFdBQVcsR0FBRyxRQUFRLENBQUMsS0FBSyxFQUFFLEVBQUUsQ0FBQyxDQUFDO1FBRXhDLE1BQU0sV0FBVyxHQUFHLENBQUMsQ0FBYSxFQUFFLEVBQUU7WUFDcEMsTUFBTSxRQUFRLEdBQUcsQ0FBQyxDQUFDLEtBQUssQ0FBQztZQUN6QixNQUFNLFFBQVEsR0FBRyxRQUFRLEdBQUcsTUFBTSxDQUFDO1lBQ25DLE1BQU0sYUFBYSxHQUFHLFlBQVksQ0FBQyxDQUFDLENBQUMsVUFBVSxHQUFHLFFBQVEsQ0FBQyxDQUFDLENBQUMsVUFBVSxHQUFHLFFBQVEsQ0FBQztZQUVuRixvQ0FBb0M7WUFDcEMsNkJBQTZCO1lBQzdCLElBQUksYUFBYSxHQUFHLFdBQVcsSUFBSSxhQUFhLEdBQUcsRUFBRSxFQUFFO2dCQUNyRCxPQUFPO2FBQ1I7WUFFRCxJQUFJLENBQUMsVUFBVSxHQUFHLEdBQUcsYUFBYSxJQUFJLENBQUM7UUFDekMsQ0FBQyxDQUFDO1FBRUYsTUFBTSxTQUFTLEdBQUcsQ0FBQyxDQUFhLEVBQUUsRUFBRTtZQUNsQyxDQUFDLENBQUMsY0FBYyxFQUFFLENBQUM7WUFFbkIsUUFBUSxDQUFDLG1CQUFtQixDQUFDLFdBQVcsRUFBRSxXQUFXLENBQUMsQ0FBQztZQUN2RCxRQUFRLENBQUMsbUJBQW1CLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQyxDQUFDO1lBRW5ELElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDMUIsQ0FBQyxDQUFDO1FBRUYsUUFBUSxDQUFDLGdCQUFnQixDQUFDLFdBQVcsRUFBRSxXQUFXLENBQUMsQ0FBQztRQUNwRCxRQUFRLENBQUMsZ0JBQWdCLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQyxDQUFDO0lBQ2xELENBQUM7OytHQW5EVSxrQkFBa0I7bUdBQWxCLGtCQUFrQiwrVENaL0Isa3JCQVNBOzJGREdhLGtCQUFrQjtrQkFOOUIsU0FBUzsrQkFDRSxnQkFBZ0I7OEJBTWpCLEdBQUc7c0JBQVgsS0FBSztnQkFDRyxHQUFHO3NCQUFYLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBRUksV0FBVztzQkFBcEIsTUFBTTtnQkFFK0IsS0FBSztzQkFBMUMsU0FBUzt1QkFBQyxPQUFPLEVBQUUsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBFdmVudEVtaXR0ZXIsXG4gIElucHV0LCBPdXRwdXQsIFZpZXdDaGlsZFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEVkaXRvclZpZXcgfSBmcm9tICdwcm9zZW1pcnJvci12aWV3JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbmd4LWltYWdlLXZpZXcnLFxuICB0ZW1wbGF0ZVVybDogJy4vaW1hZ2Utdmlldy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2ltYWdlLXZpZXcuY29tcG9uZW50LnNjc3MnXVxufSlcblxuZXhwb3J0IGNsYXNzIEltYWdlVmlld0NvbXBvbmVudCB7XG4gIEBJbnB1dCgpIHNyYzogc3RyaW5nO1xuICBASW5wdXQoKSBhbHQgPSAnJztcbiAgQElucHV0KCkgdGl0bGUgPSAnJztcbiAgQElucHV0KCkgb3V0ZXJXaWR0aCA9ICcnO1xuICBASW5wdXQoKSBzZWxlY3RlZCA9IGZhbHNlO1xuICBASW5wdXQoKSB2aWV3OiBFZGl0b3JWaWV3O1xuXG4gIEBPdXRwdXQoKSBpbWFnZVJlc2l6ZSA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICBAVmlld0NoaWxkKCdpbWdFbCcsIHsgc3RhdGljOiB0cnVlIH0pIGltZ0VsOiBFbGVtZW50UmVmO1xuXG4gIHN0YXJ0UmVzaXppbmcoZTogTW91c2VFdmVudCwgZGlyZWN0aW9uOiBzdHJpbmcpOiB2b2lkIHtcbiAgICBlLnByZXZlbnREZWZhdWx0KCk7XG4gICAgdGhpcy5yZXNpemVJbWFnZShlLCBkaXJlY3Rpb24pO1xuICB9XG5cbiAgcmVzaXplSW1hZ2UoZXZ0OiBNb3VzZUV2ZW50LCBkaXJlY3Rpb246IHN0cmluZyk6IHZvaWQge1xuICAgIGNvbnN0IHN0YXJ0WCA9IGV2dC5wYWdlWDtcbiAgICBjb25zdCBzdGFydFdpZHRoID0gdGhpcy5pbWdFbC5uYXRpdmVFbGVtZW50LmNsaWVudFdpZHRoO1xuXG4gICAgY29uc3QgaXNMZWZ0UmVzaXplID0gZGlyZWN0aW9uID09PSAnbGVmdCc7XG5cbiAgICBjb25zdCB7IHdpZHRoIH0gPSB3aW5kb3cuZ2V0Q29tcHV0ZWRTdHlsZSh0aGlzLnZpZXcuZG9tKTtcbiAgICBjb25zdCBlZGl0b3JXaWR0aCA9IHBhcnNlSW50KHdpZHRoLCAxMCk7XG5cbiAgICBjb25zdCBvbk1vdXNlTW92ZSA9IChlOiBNb3VzZUV2ZW50KSA9PiB7XG4gICAgICBjb25zdCBjdXJyZW50WCA9IGUucGFnZVg7XG4gICAgICBjb25zdCBkaWZmSW5QeCA9IGN1cnJlbnRYIC0gc3RhcnRYO1xuICAgICAgY29uc3QgY29tcHV0ZWRXaWR0aCA9IGlzTGVmdFJlc2l6ZSA/IHN0YXJ0V2lkdGggLSBkaWZmSW5QeCA6IHN0YXJ0V2lkdGggKyBkaWZmSW5QeDtcblxuICAgICAgLy8gcHJldmVudCBpbWFnZSBvdmVyZmxvdyB0aGUgZWRpdG9yXG4gICAgICAvLyBwcmV2ZW50IHJlc2l6bmcgYmVsb3cgMjBweFxuICAgICAgaWYgKGNvbXB1dGVkV2lkdGggPiBlZGl0b3JXaWR0aCB8fCBjb21wdXRlZFdpZHRoIDwgMjApIHtcbiAgICAgICAgcmV0dXJuO1xuICAgICAgfVxuXG4gICAgICB0aGlzLm91dGVyV2lkdGggPSBgJHtjb21wdXRlZFdpZHRofXB4YDtcbiAgICB9O1xuXG4gICAgY29uc3Qgb25Nb3VzZVVwID0gKGU6IE1vdXNlRXZlbnQpID0+IHtcbiAgICAgIGUucHJldmVudERlZmF1bHQoKTtcblxuICAgICAgZG9jdW1lbnQucmVtb3ZlRXZlbnRMaXN0ZW5lcignbW91c2Vtb3ZlJywgb25Nb3VzZU1vdmUpO1xuICAgICAgZG9jdW1lbnQucmVtb3ZlRXZlbnRMaXN0ZW5lcignbW91c2V1cCcsIG9uTW91c2VVcCk7XG5cbiAgICAgIHRoaXMuaW1hZ2VSZXNpemUuZW1pdCgpO1xuICAgIH07XG5cbiAgICBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCdtb3VzZW1vdmUnLCBvbk1vdXNlTW92ZSk7XG4gICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignbW91c2V1cCcsIG9uTW91c2VVcCk7XG4gIH1cbn1cbiIsIjxzcGFuIGNsYXNzPVwiTmd4RWRpdG9yX19JbWFnZVdyYXBwZXJcIiBbbmdDbGFzc109XCJ7J05neEVkaXRvcl9fUmVzaXplci0tQWN0aXZlJzogc2VsZWN0ZWR9XCIgW3N0eWxlLndpZHRoXT1cIm91dGVyV2lkdGhcIj5cbiAgPHNwYW4gY2xhc3M9XCJOZ3hFZGl0b3JfX1Jlc2l6ZUhhbmRsZVwiICpuZ0lmPVwic2VsZWN0ZWRcIj5cbiAgICA8c3BhbiBjbGFzcz1cIk5neEVkaXRvcl9fUmVzaXplSGFuZGxlLS1UTFwiICAobW91c2Vkb3duKT1cInN0YXJ0UmVzaXppbmcoJGV2ZW50LCAnbGVmdCcpXCI+PC9zcGFuPlxuICAgIDxzcGFuIGNsYXNzPVwiTmd4RWRpdG9yX19SZXNpemVIYW5kbGUtLVRSXCIgKG1vdXNlZG93bik9XCJzdGFydFJlc2l6aW5nKCRldmVudCwgJ3JpZ2h0JylcIj48L3NwYW4+XG4gICAgPHNwYW4gY2xhc3M9XCJOZ3hFZGl0b3JfX1Jlc2l6ZUhhbmRsZS0tQkxcIiAobW91c2Vkb3duKT1cInN0YXJ0UmVzaXppbmcoJGV2ZW50LCAnbGVmdCcpXCI+PC9zcGFuPlxuICAgIDxzcGFuIGNsYXNzPVwiTmd4RWRpdG9yX19SZXNpemVIYW5kbGUtLUJSXCIgKG1vdXNlZG93bik9XCJzdGFydFJlc2l6aW5nKCRldmVudCwgJ3JpZ2h0JylcIj48L3NwYW4+XG4gIDwvc3Bhbj5cbiAgPGltZyBbc3JjXT1cInNyY1wiIFthbHRdPVwiYWx0XCIgW3RpdGxlXT1cInRpdGxlXCIgI2ltZ0VsIC8+XG48L3NwYW4+XG4iXX0=