@progress/kendo-angular-editor
Version:
Kendo UI Editor for Angular
254 lines (253 loc) • 13.4 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Component, Input, ViewChild } from '@angular/core';
import { NgIf } from '@angular/common';
import { FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
import { DialogContentBase, DialogRef, DialogActionsComponent, DialogTitleBarComponent } from '@progress/kendo-angular-dialog';
import { TextBoxComponent, CheckBoxDirective, FormFieldComponent } from '@progress/kendo-angular-inputs';
import { ButtonComponent } from '@progress/kendo-angular-buttons';
import { LabelDirective, LabelComponent } from '@progress/kendo-angular-label';
import { getMark, getSelectionText, expandSelection } from '@progress/kendo-editor-common';
import { isPresent } from '../util';
import { EditorLocalizationService } from '../localization/editor-localization.service';
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-dialog";
import * as i2 from "../localization/editor-localization.service";
import * as i3 from "@angular/forms";
/**
* @hidden
*/
export class FileLinkDialogComponent extends DialogContentBase {
dialog;
localization;
editor;
command;
hrefInput;
linkForm = new FormGroup({
'href': new FormControl('', Validators.required),
'text': new FormControl({ value: '', disabled: true }, Validators.required),
'title': new FormControl('')
});
constructor(dialog, localization) {
super(dialog);
this.dialog = dialog;
this.localization = localization;
}
onCancelAction() {
this.dialog.close();
}
onConfirmAction() {
const linkData = this.getData();
this.editor.exec(this.command, linkData);
this.dialog.close();
this.editor.view.focus();
}
get titleText() {
return this.localization.get(this.command);
}
setData(state, options) {
if (this.command === 'createLink') {
this.linkForm.addControl('target', new FormControl());
}
const linkMark = getMark(state, state.schema.marks['link']);
if (linkMark) {
this.linkForm.reset({
href: linkMark.attrs['href'],
title: linkMark.attrs['title'],
target: isPresent(linkMark.attrs['target']),
text: this.setLinkText(state)
});
return;
}
if (state.selection.empty) {
const currentState = options.applyToWord ? expandSelection(state, () => { }, options).state : state;
if (!currentState.selection.empty) {
this.linkForm.patchValue({
'text': getSelectionText(currentState)
});
}
}
else {
this.linkForm.patchValue({
'text': getSelectionText(state)
});
}
}
textForWithPrefix(key) {
const prefix = this.command === 'createLink' ? 'link' : 'file';
return this.textFor(prefix + key);
}
textFor(key) {
return this.localization.get(key);
}
setLinkText(state) {
const selection = state.selection;
if (selection.empty && selection.$cursor) {
const cursor = selection.$cursor;
const cursorNodeIndex = cursor.index();
const parentNode = cursor.parent;
return parentNode.child(cursorNodeIndex).text;
}
else {
return getSelectionText(state);
}
}
getData() {
const linkData = this.linkForm.value;
if (isPresent(this.linkForm.controls['target'])) {
linkData.target = linkData.target ? '_blank' : null;
}
return linkData;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileLinkDialogComponent, deps: [{ token: i1.DialogRef }, { token: i2.EditorLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FileLinkDialogComponent, isStandalone: true, selector: "ng-component", inputs: { editor: "editor", command: "command" }, viewQueries: [{ propertyName: "hrefInput", first: true, predicate: ["hrefInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
<kendo-dialog-titlebar (close)="onCancelAction()">
{{ titleText }}
</kendo-dialog-titlebar>
<form class="k-form k-form-md" novalidate [formGroup]="linkForm">
<kendo-formfield>
<kendo-label
labelCssClass="k-form-label"
[for]="hrefInput"
[text]="textForWithPrefix('WebAddress')"
></kendo-label>
<kendo-textbox
#hrefInput
formControlName="href"
></kendo-textbox>
</kendo-formfield>
<kendo-formfield>
<kendo-label
labelCssClass="k-form-label"
[for]="textInput"
[text]="textForWithPrefix('Text')"
></kendo-label>
<kendo-textbox
#textInput
formControlName="text"
></kendo-textbox>
</kendo-formfield>
<kendo-formfield>
<kendo-label
labelCssClass="k-form-label"
[for]="titleInput"
[text]="textForWithPrefix('Title')"
></kendo-label>
<kendo-textbox
#titleInput
formControlName="title"
></kendo-textbox>
</kendo-formfield>
<ng-container *ngIf="command === 'createLink'">
<kendo-formfield>
<ng-container>
<span class="k-checkbox-wrap">
<input
id='k-target-blank'
type='checkbox'
kendoCheckBox
formControlName="target"
/>
</span>
<label [labelClass]="false" class='k-checkbox-label' for='k-target-blank'>{{ textForWithPrefix('OpenInNewWindow') }}</label>
</ng-container>
</kendo-formfield>
</ng-container>
</form>
<kendo-dialog-actions layout="start">
<button
kendoButton
[disabled]="linkForm.invalid"
[primary]="true"
(click)="onConfirmAction()"
>{{ textFor('dialogInsert') }}</button>
<button
kendoButton
(click)="onCancelAction()"
>{{ textFor('dialogCancel') }}</button>
</kendo-dialog-actions>
`, isInline: true, dependencies: [{ kind: "component", type: DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors", "colSpan"] }, { kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "directive", type: LabelDirective, selector: "label[for]", inputs: ["for", "labelClass"] }, { kind: "component", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileLinkDialogComponent, decorators: [{
type: Component,
args: [{
template: `
<kendo-dialog-titlebar (close)="onCancelAction()">
{{ titleText }}
</kendo-dialog-titlebar>
<form class="k-form k-form-md" novalidate [formGroup]="linkForm">
<kendo-formfield>
<kendo-label
labelCssClass="k-form-label"
[for]="hrefInput"
[text]="textForWithPrefix('WebAddress')"
></kendo-label>
<kendo-textbox
#hrefInput
formControlName="href"
></kendo-textbox>
</kendo-formfield>
<kendo-formfield>
<kendo-label
labelCssClass="k-form-label"
[for]="textInput"
[text]="textForWithPrefix('Text')"
></kendo-label>
<kendo-textbox
#textInput
formControlName="text"
></kendo-textbox>
</kendo-formfield>
<kendo-formfield>
<kendo-label
labelCssClass="k-form-label"
[for]="titleInput"
[text]="textForWithPrefix('Title')"
></kendo-label>
<kendo-textbox
#titleInput
formControlName="title"
></kendo-textbox>
</kendo-formfield>
<ng-container *ngIf="command === 'createLink'">
<kendo-formfield>
<ng-container>
<span class="k-checkbox-wrap">
<input
id='k-target-blank'
type='checkbox'
kendoCheckBox
formControlName="target"
/>
</span>
<label [labelClass]="false" class='k-checkbox-label' for='k-target-blank'>{{ textForWithPrefix('OpenInNewWindow') }}</label>
</ng-container>
</kendo-formfield>
</ng-container>
</form>
<kendo-dialog-actions layout="start">
<button
kendoButton
[disabled]="linkForm.invalid"
[primary]="true"
(click)="onConfirmAction()"
>{{ textFor('dialogInsert') }}</button>
<button
kendoButton
(click)="onCancelAction()"
>{{ textFor('dialogCancel') }}</button>
</kendo-dialog-actions>
`,
standalone: true,
imports: [DialogTitleBarComponent, ReactiveFormsModule, FormFieldComponent, LabelComponent, TextBoxComponent, NgIf, CheckBoxDirective, LabelDirective, DialogActionsComponent, ButtonComponent]
}]
}], ctorParameters: function () { return [{ type: i1.DialogRef }, { type: i2.EditorLocalizationService }]; }, propDecorators: { editor: [{
type: Input
}], command: [{
type: Input
}], hrefInput: [{
type: ViewChild,
args: ['hrefInput']
}] } });