@ckeditor/ckeditor5-link 48.3.1 → 48.4.0-alpha.0

package/dist/index.js

@@ -1146,6 +1146,11 @@ var LinkFormView = class extends View {
 	*/
 	saveButtonView;
 	/**
+	* A button that opens the {@link module:link/ui/linkpropertiesview~LinkPropertiesView} allowing the user to
+	* configure manual decorators for the link handled by this form.
+	*/
+	manualDecoratorsButtonView;
+	/**
 	* The "Displayed text" input view.
 	*/
 	displayedTextInputView;
@@ -1186,6 +1191,7 @@ var LinkFormView = class extends View {
 		this._validators = validators;
 		this.backButtonView = this._createBackButton();
 		this.saveButtonView = this._createSaveButton();
+		this.manualDecoratorsButtonView = this._createManualDecoratorsButton();
 		this.displayedTextInputView = this._createDisplayedTextInput();
 		this.urlInputView = this._createUrlInput();
 		this.providersListChildren = this.createCollection();
@@ -1226,6 +1232,7 @@ var LinkFormView = class extends View {
 		submitHandler({ view: this });
 		[
 			this.urlInputView,
+			this.manualDecoratorsButtonView,
 			this.saveButtonView,
 			...this.providersListChildren,
 			this.backButtonView,
@@ -1304,6 +1311,21 @@ var LinkFormView = class extends View {
 		return saveButton;
 	}
 	/**
+	* Creates a button that opens the link properties view.
+	*/
+	_createManualDecoratorsButton() {
+		const t = this.locale.t;
+		const button = new ButtonView(this.locale);
+		button.set({
+			label: t("Link properties"),
+			icon: IconSettings,
+			tooltip: true,
+			isVisible: false
+		});
+		button.delegate("execute").to(this, "showDecorators");
+		return button;
+	}
+	/**
 	* Creates a header view for the form.
 	*/
 	_createHeaderView() {
@@ -1357,7 +1379,11 @@ var LinkFormView = class extends View {
 			class: ["ck-form__row_large-top-padding"]
 		}));
 		this.children.add(new FormRowView(this.locale, {
-			children: [this.urlInputView, this.saveButtonView],
+			children: [
+				this.urlInputView,
+				this.manualDecoratorsButtonView,
+				this.saveButtonView
+			],
 			class: [
 				"ck-form__row_with-submit",
 				"ck-form__row_large-top-padding",
@@ -1919,6 +1945,10 @@ var LinkUI = class extends Plugin {
 			cancel();
 		});
 		formView.providersListChildren.bindTo(this._linksProviders).using((provider) => this._createLinksListProviderButton(provider));
+		formView.manualDecoratorsButtonView.isVisible = linkCommand.manualDecorators.length > 0;
+		this.listenTo(formView, "showDecorators", () => {
+			this._addPropertiesView();
+		});
 		return formView;
 	}
 	/**
@@ -1968,8 +1998,13 @@ var LinkUI = class extends Plugin {
 		const linkCommand = this.editor.commands.get("link");
 		const view = new (CssTransitionDisablerMixin(LinkPropertiesView))(editor.locale);
 		this.listenTo(view, "back", () => {
-			editor.editing.view.focus();
-			this._removePropertiesView();
+			if (this._isFormInPanel) {
+				this._removePropertiesView();
+				this.formView.focus();
+			} else {
+				editor.editing.view.focus();
+				this._removePropertiesView();
+			}
 		});
 		view.listChildren.bindTo(linkCommand.manualDecorators).using((manualDecorator) => {
 			const button = new SwitchButtonView(editor.locale);
@@ -1981,10 +2016,12 @@ var LinkUI = class extends Plugin {
 				return commandValue === void 0 && decoratorValue === void 0 ? !!manualDecorator.defaultValue : !!decoratorValue;
 			});
 			button.on("execute", () => {
-				editor.execute("link", linkCommand.value, {
+				const newValue = !button.isOn;
+				if (linkCommand.value !== void 0) editor.execute("link", linkCommand.value, {
 					...this._getDecoratorSwitchesState(),
-					[manualDecorator.id]: !button.isOn
+					[manualDecorator.id]: newValue
 				});
+				else this._togglePendingManualDecorator(manualDecorator, newValue);
 			});
 			return button;
 		});
@@ -2004,6 +2041,37 @@ var LinkUI = class extends Plugin {
 		}, {});
 	}
 	/**
+	* Toggles the state of a manual decorator while a new link is being created, that is, before it is
+	* inserted into the document. Since there is no link (and no command value) to execute the `'link'`
+	* command against yet, the new state is kept on the decorator's own observable
+	* {@link module:link/utils/manualdecorator~LinkManualDecorator#value} instead of the model.
+	*/
+	_togglePendingManualDecorator(manualDecorator, newValue) {
+		const linkCommand = this.editor.commands.get("link");
+		const allDecorators = Array.from(linkCommand.manualDecorators);
+		const decoratorStates = this._getDecoratorSwitchesState();
+		const previousDecoratorStates = allDecorators.map((decorator) => ({
+			id: decorator.id,
+			attributes: decorator.attributes,
+			styles: decorator.styles,
+			value: decoratorStates[decorator.id]
+		}));
+		decoratorStates[manualDecorator.id] = newValue;
+		const resolvedStates = resolveConflictingDecorators({
+			decoratorStates,
+			allDecorators: previousDecoratorStates
+		});
+		for (const decorator of allDecorators) decorator.value = resolvedStates[decorator.id];
+	}
+	/**
+	* Clears the state of all manual decorators that may have been toggled while creating a link that,
+	* in the end, was never inserted into the document (for example, the user canceled the form).
+	*/
+	_resetPendingManualDecoratorsState() {
+		const linkCommand = this.editor.commands.get("link");
+		for (const manualDecorator of linkCommand.manualDecorators) manualDecorator.value = void 0;
+	}
+	/**
 	* Registers listeners used in editing plugin, used to open links.
 	*/
 	_registerEditingOpeners() {
@@ -2120,7 +2188,7 @@ var LinkUI = class extends Plugin {
 				icon: IconSettings,
 				tooltip: true
 			});
-			button.bind("isEnabled").to(linkCommand, "isEnabled", linkCommand, "value", linkCommand, "manualDecorators", (isEnabled, href, manualDecorators) => isEnabled && !!href && manualDecorators.length > 0);
+			button.bind("isEnabled").to(linkCommand, "isEnabled", linkCommand, "value", linkCommand, "manualDecorators", (isEnabled, href, manualDecorators) => isEnabled && href !== void 0 && manualDecorators.length > 0);
 			this.listenTo(button, "execute", () => {
 				this._addPropertiesView();
 			});
@@ -2302,9 +2370,11 @@ var LinkUI = class extends Plugin {
 	*/
 	_removeFormView(updateFocus = true) {
 		if (this._isFormInPanel) {
+			const linkCommand = this.editor.commands.get("link");
 			this.formView.saveButtonView.focus();
 			this.formView.displayedTextInputView.fieldView.reset();
 			this.formView.urlInputView.fieldView.reset();
+			if (linkCommand.value === void 0) this._resetPendingManualDecoratorsState();
 			this._balloon.remove(this.formView);
 			if (updateFocus) this.editor.editing.view.focus();
 			this._hideFakeVisualSelection();