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
96 lines • 13.8 kB
JavaScript
import { ChangeDetectionStrategy, Component, forwardRef, Input } from '@angular/core';
import { getHeadingsExtension } from '../../helpers';
import { BaseControl, SelectBaseControl } from './base-control';
import * as i0 from "@angular/core";
import * as i1 from "../../services/tiptap-event.service";
import * as i2 from "../select/select.component";
import * as i3 from "@angular/common";
const isHeading = (level) => typeof level === 'number';
export class ControlFormatComponent extends SelectBaseControl {
constructor(eventService, cd) {
super();
this.eventService = eventService;
this.cd = cd;
this.disableSanitation = false;
this.levels = [];
this.headingHtml = {};
this.canStyleParams = [];
}
setEditor(editor) {
super.setEditor(editor);
this.levels = getHeadingsExtension(editor).options.levels;
this.canStyleParams = [...this.levels, 'paragraph'];
this.headingHtml = [...this.levels].reduce((previousValue, currentValue) => {
previousValue[currentValue] = `<h${currentValue} class="no-margin light-font">Heading ${currentValue}</h${currentValue}>`;
return previousValue;
}, {});
this.cd.detectChanges();
}
selectTextLevel(format) {
if (isHeading(format)) {
this.setHeading(format);
}
else {
this.setParagraph();
}
}
canStyle(format) {
if (!this.editor)
return false;
if (isHeading(format)) {
return this.editor.can().chain().setHeading({ level: format }).run();
}
else {
return this.editor.can().chain().setParagraph().run();
}
}
currentActive() {
if (this.editor) {
const headingAttributes = this.editor.getAttributes('heading');
if (headingAttributes.level)
return headingAttributes.level;
if (this.editor.isActive('paragraph'))
return 'paragraph';
}
return null;
}
setParagraph() {
this.editor && this.editor.chain().setParagraph().run();
}
setHeading(headingLevel) {
this.editor && this.editor.chain().focus().setHeading({ level: headingLevel }).focus().run();
}
}
ControlFormatComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ControlFormatComponent, deps: [{ token: i1.TiptapEventService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
ControlFormatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: ControlFormatComponent, selector: "tip-format-control", inputs: { disableSanitation: "disableSanitation" }, providers: [{ provide: BaseControl, useExisting: forwardRef(() => ControlFormatComponent) }], usesInheritance: true, ngImport: i0, template: `
<tip-select (change)="selectTextLevel($event)" defaultValue="paragraph"
[disablePreviewSanitation]="disableSanitation">
<tip-option *ngFor="let level of levels" [value]="level">
<div [innerHTML]="headingHtml[level]"></div>
</tip-option>
<tip-option value="paragraph">
<div>
<p class="no-margin light-font">Paragraph</p>
</div>
</tip-option>
</tip-select>
`, 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"], components: [{ type: i2.SelectComponent, selector: "tip-select", inputs: ["width", "placeholder", "defaultValue", "showIcon", "disablePreviewSanitation", "value"], outputs: ["change"] }, { type: i2.OptionComponent, selector: "tip-option[value]", inputs: ["value", "enforceHeight", "useHtml", "disabled"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ControlFormatComponent, decorators: [{
type: Component,
args: [{ selector: 'tip-format-control', template: `
<tip-select (change)="selectTextLevel($event)" defaultValue="paragraph"
[disablePreviewSanitation]="disableSanitation">
<tip-option *ngFor="let level of levels" [value]="level">
<div [innerHTML]="headingHtml[level]"></div>
</tip-option>
<tip-option value="paragraph">
<div>
<p class="no-margin light-font">Paragraph</p>
</div>
</tip-option>
</tip-select>
`, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: BaseControl, useExisting: forwardRef(() => ControlFormatComponent) }], 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: i0.ChangeDetectorRef }]; }, propDecorators: { disableSanitation: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29udHJvbC1mb3JtYXQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXRpcHRhcC1lZGl0b3Ivc3JjL2xpYi9jb21wb25lbnRzL2NvbnRyb2xzL2NvbnRyb2wtZm9ybWF0LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQXFCLFNBQVMsRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRXpHLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUdyRCxPQUFPLEVBQUUsV0FBVyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7Ozs7O0FBRWhFLE1BQU0sU0FBUyxHQUFHLENBQUMsS0FBc0IsRUFBeUIsRUFBRSxDQUFDLE9BQU8sS0FBSyxLQUFLLFFBQVEsQ0FBQztBQXFCL0YsTUFBTSxPQUFPLHNCQUF1QixTQUFRLGlCQUFpQjtJQU0zRCxZQUNZLFlBQWdDLEVBQ2xDLEVBQXFCO1FBRTdCLEtBQUssRUFBRSxDQUFDO1FBSEUsaUJBQVksR0FBWixZQUFZLENBQW9CO1FBQ2xDLE9BQUUsR0FBRixFQUFFLENBQW1CO1FBUGYsc0JBQWlCLEdBQUcsS0FBSyxDQUFDO1FBQ25DLFdBQU0sR0FBbUIsRUFBRSxDQUFDO1FBQzVCLGdCQUFXLEdBQTJCLEVBQUUsQ0FBQztRQUN0QyxtQkFBYyxHQUF3QixFQUFFLENBQUM7SUFPbkQsQ0FBQztJQUVNLFNBQVMsQ0FBQyxNQUFjO1FBQzdCLEtBQUssQ0FBQyxTQUFTLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDeEIsSUFBSSxDQUFDLE1BQU0sR0FBRyxvQkFBb0IsQ0FBQyxNQUFNLENBQUMsQ0FBQyxPQUFPLENBQUMsTUFBTSxDQUFDO1FBQzFELElBQUksQ0FBQyxjQUFjLEdBQUcsQ0FBQyxHQUFHLElBQUksQ0FBQyxNQUFNLEVBQUUsV0FBVyxDQUFDLENBQUM7UUFDcEQsSUFBSSxDQUFDLFdBQVcsR0FBRyxDQUFDLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLGFBQWEsRUFBRSxZQUFZLEVBQUUsRUFBRTtZQUN6RSxhQUFhLENBQUMsWUFBWSxDQUFDLEdBQUcsS0FBSyxZQUFZLHlDQUF5QyxZQUFZLE1BQU0sWUFBWSxHQUFHLENBQUM7WUFDMUgsT0FBTyxhQUFhLENBQUM7UUFDdkIsQ0FBQyxFQUFFLEVBQTRCLENBQUMsQ0FBQztRQUNqQyxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsRUFBRSxDQUFDO0lBQzFCLENBQUM7SUFFTSxlQUFlLENBQUMsTUFBdUI7UUFDNUMsSUFBSSxTQUFTLENBQUMsTUFBTSxDQUFDLEVBQUU7WUFDckIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxNQUFNLENBQUMsQ0FBQztTQUN6QjthQUFNO1lBQ0wsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO1NBQ3JCO0lBQ0gsQ0FBQztJQUVTLFFBQVEsQ0FBQyxNQUF1QjtRQUN4QyxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU07WUFBRSxPQUFPLEtBQUssQ0FBQztRQUMvQixJQUFJLFNBQVMsQ0FBQyxNQUFNLENBQUMsRUFBRTtZQUNyQixPQUFPLElBQUksQ0FBQyxNQUFNLENBQUMsR0FBRyxFQUFFLENBQUMsS0FBSyxFQUFFLENBQUMsVUFBVSxDQUFDLEVBQUMsS0FBSyxFQUFFLE1BQU0sRUFBQyxDQUFDLENBQUMsR0FBRyxFQUFFLENBQUM7U0FDcEU7YUFBTTtZQUNMLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQyxHQUFHLEVBQUUsQ0FBQyxLQUFLLEVBQUUsQ0FBQyxZQUFZLEVBQUUsQ0FBQyxHQUFHLEVBQUUsQ0FBQztTQUN2RDtJQUNILENBQUM7SUFFUyxhQUFhO1FBQ3JCLElBQUksSUFBSSxDQUFDLE1BQU0sRUFBRTtZQUNmLE1BQU0saUJBQWlCLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxhQUFhLENBQUMsU0FBUyxDQUFDLENBQUM7WUFDL0QsSUFBSSxpQkFBaUIsQ0FBQyxLQUFLO2dCQUFFLE9BQU8saUJBQWlCLENBQUMsS0FBSyxDQUFDO1lBQzVELElBQUksSUFBSSxDQUFDLE1BQU0sQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDO2dCQUFFLE9BQU8sV0FBVyxDQUFDO1NBQzNEO1FBQ0QsT0FBTyxJQUFJLENBQUM7SUFDZCxDQUFDO0lBRU8sWUFBWTtRQUNsQixJQUFJLENBQUMsTUFBTSxJQUFJLElBQUksQ0FBQyxNQUFNLENBQUMsS0FBSyxFQUFFLENBQUMsWUFBWSxFQUFFLENBQUMsR0FBRyxFQUFFLENBQUM7SUFDMUQsQ0FBQztJQUVPLFVBQVUsQ0FBQyxZQUEwQjtRQUMzQyxJQUFJLENBQUMsTUFBTSxJQUFJLElBQUksQ0FBQyxNQUFNLENBQUMsS0FBSyxFQUFFLENBQUMsS0FBSyxFQUFFLENBQUMsVUFBVSxDQUFDLEVBQUMsS0FBSyxFQUFFLFlBQVksRUFBQyxDQUFDLENBQUMsS0FBSyxFQUFFLENBQUMsR0FBRyxFQUFFLENBQUM7SUFDN0YsQ0FBQzs7bUhBeERVLHNCQUFzQjt1R0FBdEIsc0JBQXNCLGlHQUZ0QixDQUFDLEVBQUMsT0FBTyxFQUFFLFdBQVcsRUFBRSxXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLHNCQUFzQixDQUFDLEVBQUMsQ0FBQyxpREFkaEY7Ozs7Ozs7Ozs7OztHQVlUOzJGQUlVLHNCQUFzQjtrQkFuQmxDLFNBQVM7K0JBQ0Usb0JBQW9CLFlBRXBCOzs7Ozs7Ozs7Ozs7R0FZVCxtQkFDZ0IsdUJBQXVCLENBQUMsTUFBTSxhQUNwQyxDQUFDLEVBQUMsT0FBTyxFQUFFLFdBQVcsRUFBRSxXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSx1QkFBdUIsQ0FBQyxFQUFDLENBQUM7eUlBRzFFLGlCQUFpQjtzQkFBaEMsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDaGFuZ2VEZXRlY3RvclJlZiwgQ29tcG9uZW50LCBmb3J3YXJkUmVmLCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHR5cGUgeyBFZGl0b3IgfSBmcm9tICdAdGlwdGFwL2NvcmUnO1xuaW1wb3J0IHsgZ2V0SGVhZGluZ3NFeHRlbnNpb24gfSBmcm9tICcuLi8uLi9oZWxwZXJzJztcbmltcG9ydCB7IEhlYWRpbmdMZXZlbCB9IGZyb20gJy4uLy4uL21vZGVscy90eXBlcyc7XG5pbXBvcnQgeyBUaXB0YXBFdmVudFNlcnZpY2UgfSBmcm9tICcuLi8uLi9zZXJ2aWNlcy90aXB0YXAtZXZlbnQuc2VydmljZSc7XG5pbXBvcnQgeyBCYXNlQ29udHJvbCwgU2VsZWN0QmFzZUNvbnRyb2wgfSBmcm9tICcuL2Jhc2UtY29udHJvbCc7XG5cbmNvbnN0IGlzSGVhZGluZyA9IChsZXZlbDogbnVtYmVyIHwgc3RyaW5nKTogbGV2ZWwgaXMgSGVhZGluZ0xldmVsID0+IHR5cGVvZiBsZXZlbCA9PT0gJ251bWJlcic7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3RpcC1mb3JtYXQtY29udHJvbCcsXG4gIHN0eWxlVXJsczogWycuLi8uLi8uLi8uLi9fY29udHJvbHMuc2NzcyddLFxuICB0ZW1wbGF0ZTogYFxuICAgIDx0aXAtc2VsZWN0IChjaGFuZ2UpPVwic2VsZWN0VGV4dExldmVsKCRldmVudClcIiBkZWZhdWx0VmFsdWU9XCJwYXJhZ3JhcGhcIlxuICAgICAgICAgICAgICAgIFtkaXNhYmxlUHJldmlld1Nhbml0YXRpb25dPVwiZGlzYWJsZVNhbml0YXRpb25cIj5cbiAgICAgIDx0aXAtb3B0aW9uICpuZ0Zvcj1cImxldCBsZXZlbCBvZiBsZXZlbHNcIiBbdmFsdWVdPVwibGV2ZWxcIj5cbiAgICAgICAgPGRpdiBbaW5uZXJIVE1MXT1cImhlYWRpbmdIdG1sW2xldmVsXVwiPjwvZGl2PlxuICAgICAgPC90aXAtb3B0aW9uPlxuICAgICAgPHRpcC1vcHRpb24gdmFsdWU9XCJwYXJhZ3JhcGhcIj5cbiAgICAgICAgPGRpdj5cbiAgICAgICAgICA8cCBjbGFzcz1cIm5vLW1hcmdpbiBsaWdodC1mb250XCI+UGFyYWdyYXBoPC9wPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvdGlwLW9wdGlvbj5cbiAgICA8L3RpcC1zZWxlY3Q+XG4gIGAsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBwcm92aWRlcnM6IFt7cHJvdmlkZTogQmFzZUNvbnRyb2wsIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IENvbnRyb2xGb3JtYXRDb21wb25lbnQpfV0sXG59KVxuZXhwb3J0IGNsYXNzIENvbnRyb2xGb3JtYXRDb21wb25lbnQgZXh0ZW5kcyBTZWxlY3RCYXNlQ29udHJvbCB7XG4gIEBJbnB1dCgpIHB1YmxpYyBkaXNhYmxlU2FuaXRhdGlvbiA9IGZhbHNlO1xuICBwdWJsaWMgbGV2ZWxzOiBIZWFkaW5nTGV2ZWxbXSA9IFtdO1xuICBwdWJsaWMgaGVhZGluZ0h0bWw6IFJlY29yZDxudW1iZXIsIHN0cmluZz4gPSB7fTtcbiAgcHJvdGVjdGVkIGNhblN0eWxlUGFyYW1zOiAobnVtYmVyIHwgc3RyaW5nKVtdID0gW107XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJvdGVjdGVkIGV2ZW50U2VydmljZTogVGlwdGFwRXZlbnRTZXJ2aWNlLFxuICAgIHByaXZhdGUgY2Q6IENoYW5nZURldGVjdG9yUmVmXG4gICkge1xuICAgIHN1cGVyKCk7XG4gIH1cblxuICBwdWJsaWMgc2V0RWRpdG9yKGVkaXRvcjogRWRpdG9yKTogdm9pZCB7XG4gICAgc3VwZXIuc2V0RWRpdG9yKGVkaXRvcik7XG4gICAgdGhpcy5sZXZlbHMgPSBnZXRIZWFkaW5nc0V4dGVuc2lvbihlZGl0b3IpLm9wdGlvbnMubGV2ZWxzO1xuICAgIHRoaXMuY2FuU3R5bGVQYXJhbXMgPSBbLi4udGhpcy5sZXZlbHMsICdwYXJhZ3JhcGgnXTtcbiAgICB0aGlzLmhlYWRpbmdIdG1sID0gWy4uLnRoaXMubGV2ZWxzXS5yZWR1Y2UoKHByZXZpb3VzVmFsdWUsIGN1cnJlbnRWYWx1ZSkgPT4ge1xuICAgICAgcHJldmlvdXNWYWx1ZVtjdXJyZW50VmFsdWVdID0gYDxoJHtjdXJyZW50VmFsdWV9IGNsYXNzPVwibm8tbWFyZ2luIGxpZ2h0LWZvbnRcIj5IZWFkaW5nICR7Y3VycmVudFZhbHVlfTwvaCR7Y3VycmVudFZhbHVlfT5gO1xuICAgICAgcmV0dXJuIHByZXZpb3VzVmFsdWU7XG4gICAgfSwge30gYXMgUmVjb3JkPHN0cmluZywgc3RyaW5nPik7XG4gICAgdGhpcy5jZC5kZXRlY3RDaGFuZ2VzKCk7XG4gIH1cblxuICBwdWJsaWMgc2VsZWN0VGV4dExldmVsKGZvcm1hdDogbnVtYmVyIHwgc3RyaW5nKTogdm9pZCB7XG4gICAgaWYgKGlzSGVhZGluZyhmb3JtYXQpKSB7XG4gICAgICB0aGlzLnNldEhlYWRpbmcoZm9ybWF0KTtcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5zZXRQYXJhZ3JhcGgoKTtcbiAgICB9XG4gIH1cblxuICBwcm90ZWN0ZWQgY2FuU3R5bGUoZm9ybWF0OiBudW1iZXIgfCBzdHJpbmcpOiBib29sZWFuIHtcbiAgICBpZiAoIXRoaXMuZWRpdG9yKSByZXR1cm4gZmFsc2U7XG4gICAgaWYgKGlzSGVhZGluZyhmb3JtYXQpKSB7XG4gICAgICByZXR1cm4gdGhpcy5lZGl0b3IuY2FuKCkuY2hhaW4oKS5zZXRIZWFkaW5nKHtsZXZlbDogZm9ybWF0fSkucnVuKCk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHJldHVybiB0aGlzLmVkaXRvci5jYW4oKS5jaGFpbigpLnNldFBhcmFncmFwaCgpLnJ1bigpO1xuICAgIH1cbiAgfVxuXG4gIHByb3RlY3RlZCBjdXJyZW50QWN0aXZlKCk6IHN0cmluZyB8IG51bWJlciB8IG51bGwge1xuICAgIGlmICh0aGlzLmVkaXRvcikge1xuICAgICAgY29uc3QgaGVhZGluZ0F0dHJpYnV0ZXMgPSB0aGlzLmVkaXRvci5nZXRBdHRyaWJ1dGVzKCdoZWFkaW5nJyk7XG4gICAgICBpZiAoaGVhZGluZ0F0dHJpYnV0ZXMubGV2ZWwpIHJldHVybiBoZWFkaW5nQXR0cmlidXRlcy5sZXZlbDtcbiAgICAgIGlmICh0aGlzLmVkaXRvci5pc0FjdGl2ZSgncGFyYWdyYXBoJykpIHJldHVybiAncGFyYWdyYXBoJztcbiAgICB9XG4gICAgcmV0dXJuIG51bGw7XG4gIH1cblxuICBwcml2YXRlIHNldFBhcmFncmFwaCgpOiB2b2lkIHtcbiAgICB0aGlzLmVkaXRvciAmJiB0aGlzLmVkaXRvci5jaGFpbigpLnNldFBhcmFncmFwaCgpLnJ1bigpO1xuICB9XG5cbiAgcHJpdmF0ZSBzZXRIZWFkaW5nKGhlYWRpbmdMZXZlbDogSGVhZGluZ0xldmVsKTogdm9pZCB7XG4gICAgdGhpcy5lZGl0b3IgJiYgdGhpcy5lZGl0b3IuY2hhaW4oKS5mb2N1cygpLnNldEhlYWRpbmcoe2xldmVsOiBoZWFkaW5nTGV2ZWx9KS5mb2N1cygpLnJ1bigpO1xuICB9XG59XG4iXX0=