ngx-tiptap-editor/esm2020/lib/components/controls/control-mention.component.mjs

[](https://github.com/HuiiBuh/ngx-tiptap-editor/actions/workflows/publish.yml) [![Deploy to Github Pages](https://github.com/HuiiBuh/ngx-tiptap-edito

import { ChangeDetectionStrategy, Component, EventEmitter, forwardRef, Output } from '@angular/core';
import { takeUntil } from 'rxjs/operators';
import { BaseControl, ButtonBaseControl } from './base-control';
import * as i0 from "@angular/core";
import * as i1 from "../../services/tiptap-event.service";
import * as i2 from "../../services/tiptap-extension.service";
import * as i3 from "@angular/common";
export class ControlMentionComponent extends ButtonBaseControl {
    constructor(eventService, extensionService) {
        super();
        this.eventService = eventService;
        this.extensionService = extensionService;
        this.createMention = new EventEmitter();
        this.mentionClicked = new EventEmitter();
    }
    onEditorReady(editor) {
        this.mentionExtension = this.extensionService.getExtension('mention');
        this.mentionExtension.onClick$.pipe(takeUntil(this.destroy$)).subscribe(e => this.mentionClicked.emit(e));
    }
    updateMention() {
        this.createMention.emit((props) => this.editor?.chain().focus().setMention({ props }).run());
    }
    isActive() {
        return false;
    }
    can() {
        return !!this.editor?.can().setMention({ props: { id: '' } });
    }
}
ControlMentionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ControlMentionComponent, deps: [{ token: i1.TiptapEventService }, { token: i2.TiptapExtensionService }], target: i0.ɵɵFactoryTarget.Component });
ControlMentionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: ControlMentionComponent, selector: "tip-control-mention", outputs: { createMention: "createMention", mentionClicked: "mentionClicked" }, providers: [{ provide: BaseControl, useExisting: forwardRef(() => ControlMentionComponent) }], usesInheritance: true, ngImport: i0, template: `
    <button class="tip-control-button" type="button" (click)="updateMention()" #button>
      <div class="content-wrapper" #ref>
        <ng-content></ng-content>
      </div>
      <i *ngIf="ref.childNodes.length === 0" class="material-icons">person_add</i>
    </button>
  `, isInline: true, styles: [":host-context{display:contents}.tip-control-button{display:inline-flex;align-items:center;justify-content:center;padding:1px calc(var(--tip-header-padding) / 2);cursor:pointer;color:var(--tip-text-color);border:none;background-color:transparent;-webkit-tap-highlight-color:transparent}@media (pointer: fine){.tip-control-button:hover,.tip-control-button:focus{color:var(--tip-active-color)}}.tip-control-button[disabled]{cursor:default;color:var(--tip-disabled-color)}.content-wrapper{display:contents}.tip-active{color:var(--tip-active-color)}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ControlMentionComponent, decorators: [{
            type: Component,
            args: [{ selector: 'tip-control-mention', template: `
    <button class="tip-control-button" type="button" (click)="updateMention()" #button>
      <div class="content-wrapper" #ref>
        <ng-content></ng-content>
      </div>
      <i *ngIf="ref.childNodes.length === 0" class="material-icons">person_add</i>
    </button>
  `, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: BaseControl, useExisting: forwardRef(() => ControlMentionComponent) }], styles: [":host-context{display:contents}.tip-control-button{display:inline-flex;align-items:center;justify-content:center;padding:1px calc(var(--tip-header-padding) / 2);cursor:pointer;color:var(--tip-text-color);border:none;background-color:transparent;-webkit-tap-highlight-color:transparent}@media (pointer: fine){.tip-control-button:hover,.tip-control-button:focus{color:var(--tip-active-color)}}.tip-control-button[disabled]{cursor:default;color:var(--tip-disabled-color)}.content-wrapper{display:contents}.tip-active{color:var(--tip-active-color)}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.TiptapEventService }, { type: i2.TiptapExtensionService }]; }, propDecorators: { createMention: [{
                type: Output
            }], mentionClicked: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29udHJvbC1tZW50aW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC10aXB0YXAtZWRpdG9yL3NyYy9saWIvY29tcG9uZW50cy9jb250cm9scy9jb250cm9sLW1lbnRpb24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLFVBQVUsRUFBYSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFaEgsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBSTNDLE9BQU8sRUFBRSxXQUFXLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7Ozs7QUFrQmhFLE1BQU0sT0FBTyx1QkFBd0IsU0FBUSxpQkFBaUI7SUFPNUQsWUFDWSxZQUFnQyxFQUNsQyxnQkFBd0M7UUFFaEQsS0FBSyxFQUFFLENBQUM7UUFIRSxpQkFBWSxHQUFaLFlBQVksQ0FBb0I7UUFDbEMscUJBQWdCLEdBQWhCLGdCQUFnQixDQUF3QjtRQVB4QyxrQkFBYSxHQUFHLElBQUksWUFBWSxFQUFtQixDQUFDO1FBQ3BELG1CQUFjLEdBQUcsSUFBSSxZQUFZLEVBQWUsQ0FBQztJQVMzRCxDQUFDO0lBRU0sYUFBYSxDQUFDLE1BQWM7UUFDakMsSUFBSSxDQUFDLGdCQUFnQixHQUFHLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxZQUFZLENBQUMsU0FBUyxDQUEwQixDQUFDO1FBQy9GLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO0lBQzVHLENBQUM7SUFFTSxhQUFhO1FBQ2xCLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLEtBQUssRUFBRSxDQUFDLEtBQUssRUFBRSxDQUFDLFVBQVUsQ0FBQyxFQUFDLEtBQUssRUFBQyxDQUFDLENBQUMsR0FBRyxFQUFFLENBQUMsQ0FBQztJQUM3RixDQUFDO0lBRVMsUUFBUTtRQUNoQixPQUFPLEtBQUssQ0FBQztJQUNmLENBQUM7SUFFUyxHQUFHO1FBQ1gsT0FBTyxDQUFDLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxHQUFHLEVBQUUsQ0FBQyxVQUFVLENBQUMsRUFBQyxLQUFLLEVBQUUsRUFBQyxFQUFFLEVBQUUsRUFBRSxFQUFDLEVBQUMsQ0FBQyxDQUFDO0lBQzVELENBQUM7O29IQTdCVSx1QkFBdUI7d0dBQXZCLHVCQUF1Qiw2SEFGdkIsQ0FBQyxFQUFDLE9BQU8sRUFBRSxXQUFXLEVBQUUsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyx1QkFBdUIsQ0FBQyxFQUFDLENBQUMsaURBVGpGOzs7Ozs7O0dBT1Q7MkZBSVUsdUJBQXVCO2tCQWRuQyxTQUFTOytCQUNFLHFCQUFxQixZQUVyQjs7Ozs7OztHQU9ULG1CQUNnQix1QkFBdUIsQ0FBQyxNQUFNLGFBQ3BDLENBQUMsRUFBQyxPQUFPLEVBQUUsV0FBVyxFQUFFLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLHdCQUF3QixDQUFDLEVBQUMsQ0FBQzs4SUFJakYsYUFBYTtzQkFBdEIsTUFBTTtnQkFDRyxjQUFjO3NCQUF2QixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBmb3J3YXJkUmVmLCBPbkRlc3Ryb3ksIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRWRpdG9yIH0gZnJvbSAnQHRpcHRhcC9jb3JlJztcbmltcG9ydCB7IHRha2VVbnRpbCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcbmltcG9ydCB7IE1lbnRpb25EYXRhLCBOZ3hNZW50aW9uIH0gZnJvbSAnLi4vLi4vZXh0ZW5zaW9ucy9jdXN0b20vbWVudGlvbi9uZ3gtbWVudGlvbic7XG5pbXBvcnQgeyBUaXB0YXBFdmVudFNlcnZpY2UgfSBmcm9tICcuLi8uLi9zZXJ2aWNlcy90aXB0YXAtZXZlbnQuc2VydmljZSc7XG5pbXBvcnQgeyBUaXB0YXBFeHRlbnNpb25TZXJ2aWNlIH0gZnJvbSAnLi4vLi4vc2VydmljZXMvdGlwdGFwLWV4dGVuc2lvbi5zZXJ2aWNlJztcbmltcG9ydCB7IEJhc2VDb250cm9sLCBCdXR0b25CYXNlQ29udHJvbCB9IGZyb20gJy4vYmFzZS1jb250cm9sJztcblxuZXhwb3J0IHR5cGUgTWVudGlvbkNhbGxiYWNrID0gKHByb3BzOiBNZW50aW9uRGF0YSkgPT4gdm9pZDtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAndGlwLWNvbnRyb2wtbWVudGlvbicsXG4gIHN0eWxlVXJsczogWycuLi8uLi8uLi8uLi9fY29udHJvbHMuc2NzcyddLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxidXR0b24gY2xhc3M9XCJ0aXAtY29udHJvbC1idXR0b25cIiB0eXBlPVwiYnV0dG9uXCIgKGNsaWNrKT1cInVwZGF0ZU1lbnRpb24oKVwiICNidXR0b24+XG4gICAgICA8ZGl2IGNsYXNzPVwiY29udGVudC13cmFwcGVyXCIgI3JlZj5cbiAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgICAgPC9kaXY+XG4gICAgICA8aSAqbmdJZj1cInJlZi5jaGlsZE5vZGVzLmxlbmd0aCA9PT0gMFwiIGNsYXNzPVwibWF0ZXJpYWwtaWNvbnNcIj5wZXJzb25fYWRkPC9pPlxuICAgIDwvYnV0dG9uPlxuICBgLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgcHJvdmlkZXJzOiBbe3Byb3ZpZGU6IEJhc2VDb250cm9sLCB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBDb250cm9sTWVudGlvbkNvbXBvbmVudCl9XSxcbn0pXG5leHBvcnQgY2xhc3MgQ29udHJvbE1lbnRpb25Db21wb25lbnQgZXh0ZW5kcyBCdXR0b25CYXNlQ29udHJvbCBpbXBsZW1lbnRzIE9uRGVzdHJveSB7XG5cbiAgQE91dHB1dCgpIGNyZWF0ZU1lbnRpb24gPSBuZXcgRXZlbnRFbWl0dGVyPE1lbnRpb25DYWxsYmFjaz4oKTtcbiAgQE91dHB1dCgpIG1lbnRpb25DbGlja2VkID0gbmV3IEV2ZW50RW1pdHRlcjxNZW50aW9uRGF0YT4oKTtcblxuICBwcml2YXRlIG1lbnRpb25FeHRlbnNpb24hOiBOZ3hNZW50aW9uO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByb3RlY3RlZCBldmVudFNlcnZpY2U6IFRpcHRhcEV2ZW50U2VydmljZSxcbiAgICBwcml2YXRlIGV4dGVuc2lvblNlcnZpY2U6IFRpcHRhcEV4dGVuc2lvblNlcnZpY2VcbiAgKSB7XG4gICAgc3VwZXIoKTtcbiAgfVxuXG4gIHB1YmxpYyBvbkVkaXRvclJlYWR5KGVkaXRvcjogRWRpdG9yKTogdm9pZCB7XG4gICAgdGhpcy5tZW50aW9uRXh0ZW5zaW9uID0gdGhpcy5leHRlbnNpb25TZXJ2aWNlLmdldEV4dGVuc2lvbignbWVudGlvbicpIGFzIHVua25vd24gYXMgTmd4TWVudGlvbjtcbiAgICB0aGlzLm1lbnRpb25FeHRlbnNpb24ub25DbGljayQucGlwZSh0YWtlVW50aWwodGhpcy5kZXN0cm95JCkpLnN1YnNjcmliZShlID0+IHRoaXMubWVudGlvbkNsaWNrZWQuZW1pdChlKSk7XG4gIH1cblxuICBwdWJsaWMgdXBkYXRlTWVudGlvbigpOiB2b2lkIHtcbiAgICB0aGlzLmNyZWF0ZU1lbnRpb24uZW1pdCgocHJvcHMpID0+IHRoaXMuZWRpdG9yPy5jaGFpbigpLmZvY3VzKCkuc2V0TWVudGlvbih7cHJvcHN9KS5ydW4oKSk7XG4gIH1cblxuICBwcm90ZWN0ZWQgaXNBY3RpdmUoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIGZhbHNlO1xuICB9XG5cbiAgcHJvdGVjdGVkIGNhbigpOiBib29sZWFuIHtcbiAgICByZXR1cm4gISF0aGlzLmVkaXRvcj8uY2FuKCkuc2V0TWVudGlvbih7cHJvcHM6IHtpZDogJyd9fSk7XG4gIH1cblxufVxuIl19