@ckeditor/ckeditor5-link 41.3.1 → 41.4.0

package/lang/translations/vi.po

@@ -29,6 +29,10 @@ msgctxt "Label for the URL input in the Link URL editing balloon."
 msgid "Link URL"
 msgstr "Đường dẫn liên kết"
 
+msgctxt "An error text displayed when user attempted to enter an empty URL."
+msgid "Link URL must not be empty."
+msgstr "Không được để trống URL đường liên kết."
+
 msgctxt "Label for the image link button."
 msgid "Link image"
 msgstr "Liên kết của ảnh"

package/lang/translations/zh-cn.po

@@ -29,6 +29,10 @@ msgctxt "Label for the URL input in the Link URL editing balloon."
 msgid "Link URL"
 msgstr "链接网址"
 
+msgctxt "An error text displayed when user attempted to enter an empty URL."
+msgid "Link URL must not be empty."
+msgstr "链接 URL 不能为空。"
+
 msgctxt "Label for the image link button."
 msgid "Link image"
 msgstr "链接图片"

package/lang/translations/zh.po

@@ -29,6 +29,10 @@ msgctxt "Label for the URL input in the Link URL editing balloon."
 msgid "Link URL"
 msgstr "連結˙ URL"
 
+msgctxt "An error text displayed when user attempted to enter an empty URL."
+msgid "Link URL must not be empty."
+msgstr "連結 URL 不得為空白。"
+
 msgctxt "Label for the image link button."
 msgid "Link image"
 msgstr "圖片連結"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-link",
-  "version": "41.3.1",
+  "version": "41.4.0",
   "description": "Link feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -13,8 +13,8 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-ui": "41.3.1",
-    "ckeditor5": "41.3.1",
+    "@ckeditor/ckeditor5-ui": "41.4.0",
+    "ckeditor5": "41.4.0",
     "lodash-es": "4.17.21"
   },
   "author": "CKSource (http://cksource.com/)",
@@ -27,6 +27,7 @@
     "directory": "packages/ckeditor5-link"
   },
   "files": [
+    "dist",
     "lang",
     "src/**/*.js",
     "src/**/*.d.ts",

package/src/index.d.ts

@@ -12,7 +12,7 @@ export { default as LinkImage } from './linkimage.js';
 export { default as LinkImageEditing } from './linkimageediting.js';
 export { default as LinkImageUI } from './linkimageui.js';
 export { default as AutoLink } from './autolink.js';
-export { LinkConfig, type LinkDecoratorDefinition } from './linkconfig.js';
+export type { LinkConfig, LinkDecoratorDefinition } from './linkconfig.js';
 export { default as LinkCommand } from './linkcommand.js';
 export { default as UnlinkCommand } from './unlinkcommand.js';
 import './augmentation.js';

package/src/linkui.js

@@ -148,19 +148,24 @@ export default class LinkUI extends Plugin {
         const editor = this.editor;
         const linkCommand = editor.commands.get('link');
         const defaultProtocol = editor.config.get('link.defaultProtocol');
-        const allowCreatingEmptyLinks = editor.config.get('link.allowCreatingEmptyLinks');
-        const formView = new (CssTransitionDisablerMixin(LinkFormView))(editor.locale, linkCommand);
+        const formView = new (CssTransitionDisablerMixin(LinkFormView))(editor.locale, linkCommand, getFormValidators(editor));
         formView.urlInputView.fieldView.bind('value').to(linkCommand, 'value');
         // Form elements should be read-only when corresponding commands are disabled.
         formView.urlInputView.bind('isEnabled').to(linkCommand, 'isEnabled');
-        // Disable the "save" button if the command is disabled or the input is empty despite being required.
-        formView.saveButtonView.bind('isEnabled').to(linkCommand, 'isEnabled', formView.urlInputView, 'isEmpty', (isCommandEnabled, isInputEmpty) => isCommandEnabled && (allowCreatingEmptyLinks || !isInputEmpty));
+        // Disable the "save" button if the command is disabled.
+        formView.saveButtonView.bind('isEnabled').to(linkCommand, 'isEnabled');
         // Execute link command after clicking the "Save" button.
         this.listenTo(formView, 'submit', () => {
-            const { value } = formView.urlInputView.fieldView.element;
-            const parsedUrl = addLinkProtocolIfApplicable(value, defaultProtocol);
-            editor.execute('link', parsedUrl, formView.getDecoratorSwitchesState());
-            this._closeFormView();
+            if (formView.isValid()) {
+                const { value } = formView.urlInputView.fieldView.element;
+                const parsedUrl = addLinkProtocolIfApplicable(value, defaultProtocol);
+                editor.execute('link', parsedUrl, formView.getDecoratorSwitchesState());
+                this._closeFormView();
+            }
+        });
+        // Update balloon position when form error changes.
+        this.listenTo(formView.urlInputView, 'change:errorText', () => {
+            editor.ui.update();
         });
         // Hide the panel after clicking the "Cancel" button.
         this.listenTo(formView, 'cancel', () => {
@@ -299,6 +304,7 @@ export default class LinkUI extends Plugin {
         const editor = this.editor;
         const linkCommand = editor.commands.get('link');
         this.formView.disableCssTransitions();
+        this.formView.resetFormStatus();
         this._balloon.add({
             view: this.formView,
             position: this._getBalloonPositionData()
@@ -615,3 +621,19 @@ export default class LinkUI extends Plugin {
 function findLinkElementAncestor(position) {
     return position.getAncestors().find((ancestor) => isLinkElement(ancestor)) || null;
 }
+/**
+ * Returns link form validation callbacks.
+ *
+ * @param editor Editor instance.
+ */
+function getFormValidators(editor) {
+    const t = editor.t;
+    const allowCreatingEmptyLinks = editor.config.get('link.allowCreatingEmptyLinks');
+    return [
+        form => {
+            if (!allowCreatingEmptyLinks && !form.url.length) {
+                return t('Link URL must not be empty.');
+            }
+        }
+    ];
+}

package/src/ui/linkformview.d.ts

@@ -46,6 +46,10 @@ export default class LinkFormView extends View {
      * A collection of child views in the form.
      */
     readonly children: ViewCollection;
+    /**
+     * An array of form validators used by {@link #isValid}.
+     */
+    private readonly _validators;
     /**
      * A collection of views that can be focused in the form.
      */
@@ -61,8 +65,9 @@ export default class LinkFormView extends View {
      *
      * @param locale The localization services instance.
      * @param linkCommand Reference to {@link module:link/linkcommand~LinkCommand}.
+     * @param validators  Form validators used by {@link #isValid}.
      */
-    constructor(locale: Locale, linkCommand: LinkCommand);
+    constructor(locale: Locale, linkCommand: LinkCommand, validators: Array<LinkFormValidatorCallback>);
     /**
      * Obtains the state of the {@link module:ui/button/switchbuttonview~SwitchButtonView switch buttons} representing
      * {@link module:link/linkcommand~LinkCommand#manualDecorators manual link decorators}
@@ -83,6 +88,17 @@ export default class LinkFormView extends View {
      * Focuses the fist {@link #_focusables} in the form.
      */
     focus(): void;
+    /**
+     * Validates the form and returns `false` when some fields are invalid.
+     */
+    isValid(): boolean;
+    /**
+     * Cleans up the supplementary error and information text of the {@link #urlInputView}
+     * bringing them back to the state when the form has been displayed for the first time.
+     *
+     * See {@link #isValid}.
+     */
+    resetFormStatus(): void;
     /**
      * Creates a labeled input view.
      *
@@ -119,7 +135,21 @@ export default class LinkFormView extends View {
      * @returns The children of link form view.
      */
     private _createFormChildren;
+    /**
+     * The native DOM `value` of the {@link #urlInputView} element.
+     *
+     * **Note**: Do not confuse it with the {@link module:ui/inputtext/inputtextview~InputTextView#value}
+     * which works one way only and may not represent the actual state of the component in the DOM.
+     */
+    get url(): string | null;
 }
+/**
+ * Callback used by {@link ~LinkFormView} to check if passed form value is valid.
+ *
+ * 	* If `undefined` is returned, it is assumed that the form value is correct and there is no error.
+ * 	* If string is returned, it is assumed that the form value is incorrect and the returned string is displayed in the error label
+ */
+export type LinkFormValidatorCallback = (form: LinkFormView) => string | undefined;
 /**
  * Fired when the form view is submitted (when one of the children triggered the submit event),
  * for example with a click on {@link ~LinkFormView#saveButtonView}.

package/src/ui/linkformview.js

@@ -25,8 +25,9 @@ export default class LinkFormView extends View {
      *
      * @param locale The localization services instance.
      * @param linkCommand Reference to {@link module:link/linkcommand~LinkCommand}.
+     * @param validators  Form validators used by {@link #isValid}.
      */
-    constructor(locale, linkCommand) {
+    constructor(locale, linkCommand, validators) {
         super(locale);
         /**
          * Tracks information about DOM focus in the form.
@@ -41,6 +42,7 @@ export default class LinkFormView extends View {
          */
         this._focusables = new ViewCollection();
         const t = locale.t;
+        this._validators = validators;
         this.urlInputView = this._createUrlInput();
         this.saveButtonView = this._createButton(t('Save'), icons.check, 'ck-button-save');
         this.saveButtonView.type = 'submit';
@@ -124,6 +126,31 @@ export default class LinkFormView extends View {
     focus() {
         this._focusCycler.focusFirst();
     }
+    /**
+     * Validates the form and returns `false` when some fields are invalid.
+     */
+    isValid() {
+        this.resetFormStatus();
+        for (const validator of this._validators) {
+            const errorText = validator(this);
+            // One error per field is enough.
+            if (errorText) {
+                // Apply updated error.
+                this.urlInputView.errorText = errorText;
+                return false;
+            }
+        }
+        return true;
+    }
+    /**
+     * Cleans up the supplementary error and information text of the {@link #urlInputView}
+     * bringing them back to the state when the form has been displayed for the first time.
+     *
+     * See {@link #isValid}.
+     */
+    resetFormStatus() {
+        this.urlInputView.errorText = null;
+    }
     /**
      * Creates a labeled input view.
      *
@@ -229,4 +256,17 @@ export default class LinkFormView extends View {
         children.add(this.cancelButtonView);
         return children;
     }
+    /**
+     * The native DOM `value` of the {@link #urlInputView} element.
+     *
+     * **Note**: Do not confuse it with the {@link module:ui/inputtext/inputtextview~InputTextView#value}
+     * which works one way only and may not represent the actual state of the component in the DOM.
+     */
+    get url() {
+        const { element } = this.urlInputView.fieldView;
+        if (!element) {
+            return null;
+        }
+        return element.value.trim();
+    }
 }

package/theme/linkform.css

@@ -7,6 +7,7 @@
 
 .ck.ck-link-form {
 	display: flex;
+	align-items: flex-start;
 
 	& .ck-label {
 		display: none;