ngx-editor
Version:
Rich Text Editor for angular using ProseMirror
91 lines • 13.6 kB
JavaScript
import { Component, HostListener, Input, } from '@angular/core';
import { ToggleCommands } from '../MenuCommands';
import * as i0 from "@angular/core";
import * as i1 from "../../../editor.service";
import * as i2 from "../menu.service";
import * as i3 from "@angular/common";
export class DropdownComponent {
constructor(ngxeService, menuService, el) {
this.ngxeService = ngxeService;
this.menuService = menuService;
this.el = el;
this.isDropdownOpen = false;
this.disabledItems = [];
this.update = (view) => {
const { state } = view;
this.disabledItems = [];
const activeItems = [];
this.items.forEach((item) => {
const command = ToggleCommands[item];
const isActive = command.isActive(state);
if (isActive) {
activeItems.push(item);
}
if (!command.canExecute(state)) {
this.disabledItems.push(item);
}
});
if (activeItems.length === 1) {
[this.activeItem] = activeItems;
}
else {
this.activeItem = null;
}
};
}
get isSelected() {
return Boolean(this.activeItem || this.isDropdownOpen);
}
get isDropdownDisabled() {
return this.disabledItems.length === this.items.length;
}
onDocumentClick(target) {
if (!this.el.nativeElement.contains(target) && this.isDropdownOpen) {
this.isDropdownOpen = false;
}
}
getName(key) {
return this.ngxeService.locals.get(key);
}
toggleDropdown(e) {
e.preventDefault();
this.isDropdownOpen = !this.isDropdownOpen;
}
trackByIndex(index) {
return index;
}
onClick(e, item) {
e.preventDefault();
// consider only left click
if (e.button !== 0) {
return;
}
const command = ToggleCommands[item];
const { state, dispatch } = this.editorView;
command.toggle()(state, dispatch);
this.isDropdownOpen = false;
}
ngOnInit() {
this.editorView = this.menuService.editor.view;
this.updateSubscription = this.menuService.editor.update.subscribe((view) => {
this.update(view);
});
}
ngOnDestroy() {
this.updateSubscription.unsubscribe();
}
}
DropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DropdownComponent, deps: [{ token: i1.NgxEditorService }, { token: i2.MenuService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: DropdownComponent, selector: "ngx-dropdown", inputs: { group: "group", items: "items" }, host: { listeners: { "document:mousedown": "onDocumentClick($event.target)" } }, ngImport: i0, template: "<div class=\"NgxEditor__Dropdown--Text\" [class.NgxEditor__Dropdown--Selected]=\"isSelected\"\n [class.NgxEditor--Disabled]=\"isDropdownDisabled\" (mousedown)=\"toggleDropdown($event)\">\n {{getName(activeItem || group)}}\n</div>\n\n<div class=\"NgxEditor__Dropdown--DropdownMenu\" *ngIf=\"isDropdownOpen\">\n <div class=\"NgxEditor__Dropdown--Item\" *ngFor=\"let item of items; trackBy: trackByIndex\"\n (mousedown)=\"onClick($event, item)\"\n [ngClass]=\"{'NgxEditor__Dropdown--Active': item === activeItem, 'NgxEditor--Disabled':disabledItems.includes(item)}\">\n {{getName(item)}}\n </div>\n</div>\n", styles: [""], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DropdownComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-dropdown', template: "<div class=\"NgxEditor__Dropdown--Text\" [class.NgxEditor__Dropdown--Selected]=\"isSelected\"\n [class.NgxEditor--Disabled]=\"isDropdownDisabled\" (mousedown)=\"toggleDropdown($event)\">\n {{getName(activeItem || group)}}\n</div>\n\n<div class=\"NgxEditor__Dropdown--DropdownMenu\" *ngIf=\"isDropdownOpen\">\n <div class=\"NgxEditor__Dropdown--Item\" *ngFor=\"let item of items; trackBy: trackByIndex\"\n (mousedown)=\"onClick($event, item)\"\n [ngClass]=\"{'NgxEditor__Dropdown--Active': item === activeItem, 'NgxEditor--Disabled':disabledItems.includes(item)}\">\n {{getName(item)}}\n </div>\n</div>\n", styles: [""] }]
}], ctorParameters: function () { return [{ type: i1.NgxEditorService }, { type: i2.MenuService }, { type: i0.ElementRef }]; }, propDecorators: { group: [{
type: Input
}], items: [{
type: Input
}], onDocumentClick: [{
type: HostListener,
args: ['document:mousedown', ['$event.target']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWVkaXRvci9zcmMvbGliL21vZHVsZXMvbWVudS9kcm9wZG93bi9kcm9wZG93bi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtZWRpdG9yL3NyYy9saWIvbW9kdWxlcy9tZW51L2Ryb3Bkb3duL2Ryb3Bkb3duLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsWUFBWSxFQUFFLEtBQUssR0FDcEIsTUFBTSxlQUFlLENBQUM7QUFNdkIsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLGlCQUFpQixDQUFDOzs7OztBQVFqRCxNQUFNLE9BQU8saUJBQWlCO0lBWTVCLFlBQ1UsV0FBNkIsRUFDN0IsV0FBd0IsRUFDeEIsRUFBYztRQUZkLGdCQUFXLEdBQVgsV0FBVyxDQUFrQjtRQUM3QixnQkFBVyxHQUFYLFdBQVcsQ0FBYTtRQUN4QixPQUFFLEdBQUYsRUFBRSxDQUFZO1FBUnhCLG1CQUFjLEdBQUcsS0FBSyxDQUFDO1FBRXZCLGtCQUFhLEdBQWEsRUFBRSxDQUFDO1FBa0RyQixXQUFNLEdBQUcsQ0FBQyxJQUFnQixFQUFFLEVBQUU7WUFDcEMsTUFBTSxFQUFFLEtBQUssRUFBRSxHQUFHLElBQUksQ0FBQztZQUN2QixJQUFJLENBQUMsYUFBYSxHQUFHLEVBQUUsQ0FBQztZQUN4QixNQUFNLFdBQVcsR0FBRyxFQUFFLENBQUM7WUFFdkIsSUFBSSxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUMsQ0FBQyxJQUFvQixFQUFFLEVBQUU7Z0JBQzFDLE1BQU0sT0FBTyxHQUFHLGNBQWMsQ0FBQyxJQUFJLENBQUMsQ0FBQztnQkFDckMsTUFBTSxRQUFRLEdBQUcsT0FBTyxDQUFDLFFBQVEsQ0FBQyxLQUFLLENBQUMsQ0FBQztn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QUFDLGVBQWUsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCwgRWxlbWVudFJlZixcbiAgSG9zdExpc3RlbmVyLCBJbnB1dCwgT25EZXN0cm95LCBPbkluaXQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRWRpdG9yVmlldyB9IGZyb20gJ3Byb3NlbWlycm9yLXZpZXcnO1xuaW1wb3J0IHsgU3Vic2NyaXB0aW9uIH0gZnJvbSAncnhqcyc7XG5cbmltcG9ydCB7IE5neEVkaXRvclNlcnZpY2UgfSBmcm9tICcuLi8uLi8uLi9lZGl0b3Iuc2VydmljZSc7XG5pbXBvcnQgeyBNZW51U2VydmljZSB9IGZyb20gJy4uL21lbnUuc2VydmljZSc7XG5pbXBvcnQgeyBUb2dnbGVDb21tYW5kcyB9IGZyb20gJy4uL01lbnVDb21tYW5kcyc7XG5pbXBvcnQgeyBUQkhlYWRpbmdJdGVtcyB9IGZyb20gJy4uLy4uLy4uL3R5cGVzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbmd4LWRyb3Bkb3duJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2Ryb3Bkb3duLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vZHJvcGRvd24uY29tcG9uZW50LnNjc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgRHJvcGRvd25Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XG4gIHByaXZhdGUgZWRpdG9yVmlldzogRWRpdG9yVmlldztcbiAgcHJpdmF0ZSB1cGRhdGVTdWJzY3JpcHRpb246IFN1YnNjcmlwdGlvbjtcblxuICBASW5wdXQoKSBncm91cDogc3RyaW5nO1xuICBASW5wdXQoKSBpdGVtczogVEJIZWFkaW5nSXRlbXNbXTtcblxuICBpc0Ryb3Bkb3duT3BlbiA9IGZhbHNlO1xuXG4gIGRpc2FibGVkSXRlbXM6IHN0cmluZ1tdID0gW107XG4gIGFjdGl2ZUl0ZW06IHN0cmluZyB8IG51bGw7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBuZ3hlU2VydmljZTogTmd4RWRpdG9yU2VydmljZSxcbiAgICBwcml2YXRlIG1lbnVTZXJ2aWNlOiBNZW51U2VydmljZSxcbiAgICBwcml2YXRlIGVsOiBFbGVtZW50UmVmLFxuICApIHsgfVxuXG4gIGdldCBpc1NlbGVjdGVkKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiBCb29sZWFuKHRoaXMuYWN0aXZlSXRlbSB8fCB0aGlzLmlzRHJvcGRvd25PcGVuKTtcbiAgfVxuXG4gIGdldCBpc0Ryb3Bkb3duRGlzYWJsZWQoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMuZGlzYWJsZWRJdGVtcy5sZW5ndGggPT09IHRoaXMuaXRlbXMubGVuZ3RoO1xuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignZG9jdW1lbnQ6bW91c2Vkb3duJywgWyckZXZlbnQudGFyZ2V0J10pIG9uRG9jdW1lbnRDbGljayh0YXJnZXQ6IE5vZGUpOiB2b2lkIHtcbiAgICBpZiAoIXRoaXMuZWwubmF0aXZlRWxlbWVudC5jb250YWlucyh0YXJnZXQpICYmIHRoaXMuaXNEcm9wZG93bk9wZW4pIHtcbiAgICAgIHRoaXMuaXNEcm9wZG93bk9wZW4gPSBmYWxzZTtcbiAgICB9XG4gIH1cblxuICBnZXROYW1lKGtleTogc3RyaW5nKTogc3RyaW5nIHtcbiAgICByZXR1cm4gdGhpcy5uZ3hlU2VydmljZS5sb2NhbHMuZ2V0KGtleSk7XG4gIH1cblxuICB0b2dnbGVEcm9wZG93bihlOiBNb3VzZUV2ZW50KTogdm9pZCB7XG4gICAgZS5wcmV2ZW50RGVmYXVsdCgpO1xuICAgIHRoaXMuaXNEcm9wZG93bk9wZW4gPSAhdGhpcy5pc0Ryb3Bkb3duT3BlbjtcbiAgfVxuXG4gIHRyYWNrQnlJbmRleChpbmRleDogbnVtYmVyKTogbnVtYmVyIHtcbiAgICByZXR1cm4gaW5kZXg7XG4gIH1cblxuICBvbkNsaWNrKGU6IE1vdXNlRXZlbnQsIGl0ZW06IFRCSGVhZGluZ0l0ZW1zKTogdm9pZCB7XG4gICAgZS5wcmV2ZW50RGVmYXVsdCgpO1xuXG4gICAgLy8gY29uc2lkZXIgb25seSBsZWZ0IGNsaWNrXG4gICAgaWYgKGUuYnV0dG9uICE9PSAwKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgY29uc3QgY29tbWFuZCA9IFRvZ2dsZUNvbW1hbmRzW2l0ZW1dO1xuICAgIGNvbnN0IHsgc3RhdGUsIGRpc3BhdGNoIH0gPSB0aGlzLmVkaXRvclZpZXc7XG4gICAgY29tbWFuZC50b2dnbGUoKShzdGF0ZSwgZGlzcGF0Y2gpO1xuICAgIHRoaXMuaXNEcm9wZG93bk9wZW4gPSBmYWxzZTtcbiAgfVxuXG4gIHByaXZhdGUgdXBkYXRlID0gKHZpZXc6IEVkaXRvclZpZXcpID0+IHtcbiAgICBjb25zdCB7IHN0YXRlIH0gPSB2aWV3O1xuICAgIHRoaXMuZGlzYWJsZWRJdGVtcyA9IFtdO1xuICAgIGNvbnN0IGFjdGl2ZUl0ZW1zID0gW107XG5cbiAgICB0aGlzLml0ZW1zLmZvckVhY2goKGl0ZW06IFRCSGVhZGluZ0l0ZW1zKSA9PiB7XG4gICAgICBjb25zdCBjb21tYW5kID0gVG9nZ2xlQ29tbWFuZHNbaXRlbV07XG4gICAgICBjb25zdCBpc0FjdGl2ZSA9IGNvbW1hbmQuaXNBY3RpdmUoc3RhdGUpO1xuXG4gICAgICBpZiAoaXNBY3RpdmUpIHtcbiAgICAgICAgYWN0aXZlSXRlbXMucHVzaChpdGVtKTtcbiAgICAgIH1cblxuICAgICAgaWYgKCFjb21tYW5kLmNhbkV4ZWN1dGUoc3RhdGUpKSB7XG4gICAgICAgIHRoaXMuZGlzYWJsZWRJdGVtcy5wdXNoKGl0ZW0pO1xuICAgICAgfVxuICAgIH0pO1xuXG4gICAgaWYgKGFjdGl2ZUl0ZW1zLmxlbmd0aCA9PT0gMSkge1xuICAgICAgW3RoaXMuYWN0aXZlSXRlbV0gPSBhY3RpdmVJdGVtcztcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5hY3RpdmVJdGVtID0gbnVsbDtcbiAgICB9XG4gIH07XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5lZGl0b3JWaWV3ID0gdGhpcy5tZW51U2VydmljZS5lZGl0b3IudmlldztcblxuICAgIHRoaXMudXBkYXRlU3Vic2NyaXB0aW9uID0gdGhpcy5tZW51U2VydmljZS5lZGl0b3IudXBkYXRlLnN1YnNjcmliZSgodmlldzogRWRpdG9yVmlldykgPT4ge1xuICAgICAgdGhpcy51cGRhdGUodmlldyk7XG4gICAgfSk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICB0aGlzLnVwZGF0ZVN1YnNjcmlwdGlvbi51bnN1YnNjcmliZSgpO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiTmd4RWRpdG9yX19Ecm9wZG93bi0tVGV4dFwiIFtjbGFzcy5OZ3hFZGl0b3JfX0Ryb3Bkb3duLS1TZWxlY3RlZF09XCJpc1NlbGVjdGVkXCJcbiAgW2NsYXNzLk5neEVkaXRvci0tRGlzYWJsZWRdPVwiaXNEcm9wZG93bkRpc2FibGVkXCIgKG1vdXNlZG93bik9XCJ0b2dnbGVEcm9wZG93bigkZXZlbnQpXCI+XG4gIHt7Z2V0TmFtZShhY3RpdmVJdGVtIHx8IGdyb3VwKX19XG48L2Rpdj5cblxuPGRpdiBjbGFzcz1cIk5neEVkaXRvcl9fRHJvcGRvd24tLURyb3Bkb3duTWVudVwiICpuZ0lmPVwiaXNEcm9wZG93bk9wZW5cIj5cbiAgPGRpdiBjbGFzcz1cIk5neEVkaXRvcl9fRHJvcGRvd24tLUl0ZW1cIiAqbmdGb3I9XCJsZXQgaXRlbSBvZiBpdGVtczsgdHJhY2tCeTogdHJhY2tCeUluZGV4XCJcbiAgICAobW91c2Vkb3duKT1cIm9uQ2xpY2soJGV2ZW50LCBpdGVtKVwiXG4gICAgW25nQ2xhc3NdPVwieydOZ3hFZGl0b3JfX0Ryb3Bkb3duLS1BY3RpdmUnOiBpdGVtID09PSBhY3RpdmVJdGVtLCAnTmd4RWRpdG9yLS1EaXNhYmxlZCc6ZGlzYWJsZWRJdGVtcy5pbmNsdWRlcyhpdGVtKX1cIj5cbiAgICB7e2dldE5hbWUoaXRlbSl9fVxuICA8L2Rpdj5cbjwvZGl2PlxuIl19