@ckeditor/ckeditor5-link 47.5.0 → 47.6.0-alpha.0

package/src/utils/automaticdecorators.js

@@ -5,7 +5,7 @@
 /**
  * @module link/utils/automaticdecorators
  */
-import { toMap } from 'ckeditor5/src/utils.js';
+import { toMap, priorities } from 'ckeditor5/src/utils.js';
 /**
  * Helper class that ties together all {@link module:link/linkconfig~LinkDecoratorAutomaticDefinition} and provides
  * the {@link module:engine/conversion/downcasthelpers~DowncastHelpers#attributeToElement downcast dispatchers} for them.
@@ -16,6 +16,11 @@ export class AutomaticLinkDecorators {
      * This data is used as a source for a downcast dispatcher to create a proper conversion to output data.
      */
     _definitions = new Set();
+    /**
+     * A callback that checks if a decorator can be applied to a given element.
+     * Returns `true` if there is a conflict preventing the decorator from being applied.
+     */
+    _conflictChecker;
     /**
      * Gives information about the number of decorators stored in the {@link module:link/utils/automaticdecorators~AutomaticLinkDecorators}
      * instance.
@@ -23,6 +28,14 @@ export class AutomaticLinkDecorators {
     get length() {
         return this._definitions.size;
     }
+    /**
+     * Sets a callback that checks if a decorator can be applied to a given element.
+     *
+     * @param checker A function that returns `true` if there is a conflict preventing the decorator from being applied.
+     */
+    setConflictChecker(checker) {
+        this._conflictChecker = checker;
+    }
     /**
      * Adds automatic decorator objects or an array with them to be used during downcasting.
      *
@@ -43,44 +56,57 @@ export class AutomaticLinkDecorators {
      */
     getDispatcher() {
         return dispatcher => {
-            dispatcher.on('attribute:linkHref', (evt, data, conversionApi) => {
-                // There is only test as this behavior decorates links and
-                // it is run before dispatcher which actually consumes this node.
-                // This allows on writing own dispatcher with highest priority,
-                // which blocks both native converter and this additional decoration.
-                if (!conversionApi.consumable.test(data.item, 'attribute:linkHref')) {
-                    return;
+            const elementCreator = (item, viewWriter) => {
+                const viewElement = viewWriter.createAttributeElement('a', item.attributes, {
+                    priority: 5
+                });
+                if (item.classes) {
+                    viewWriter.addClass(item.classes, viewElement);
                 }
-                // Automatic decorators for block links are handled e.g. in LinkImageEditing.
-                if (!(data.item.is('selection') || conversionApi.schema.isInline(data.item))) {
-                    return;
+                for (const key in item.styles) {
+                    viewWriter.setStyle(key, item.styles[key], viewElement);
                 }
-                const viewWriter = conversionApi.writer;
-                const viewSelection = viewWriter.document.selection;
-                for (const item of this._definitions) {
-                    const viewElement = viewWriter.createAttributeElement('a', item.attributes, {
-                        priority: 5
-                    });
-                    if (item.classes) {
-                        viewWriter.addClass(item.classes, viewElement);
+                viewWriter.setCustomProperty('link', true, viewElement);
+                return viewElement;
+            };
+            const createConverter = (isApplyingConverter) => {
+                return (evt, data, conversionApi) => {
+                    if (!data.attributeKey.startsWith('link')) {
+                        return;
+                    }
+                    // There is only test as this behavior decorates links and
+                    // it is run before dispatcher which actually consumes this node.
+                    // This allows on writing own dispatcher with highest priority,
+                    // which blocks both native converter and this additional decoration.
+                    if (data.attributeKey == 'linkHref' && !conversionApi.consumable.test(data.item, 'attribute:linkHref')) {
+                        return;
                     }
-                    for (const key in item.styles) {
-                        viewWriter.setStyle(key, item.styles[key], viewElement);
+                    // Automatic decorators for block links are handled e.g. in LinkImageEditing.
+                    if (!data.item.is('selection') && !conversionApi.schema.isInline(data.item)) {
+                        return;
                     }
-                    viewWriter.setCustomProperty('link', true, viewElement);
-                    if (item.callback(data.attributeNewValue)) {
-                        if (data.item.is('selection')) {
-                            viewWriter.wrap(viewSelection.getFirstRange(), viewElement);
+                    for (const decorator of this._definitions) {
+                        // Check if automatic decorator is matched and does not conflict with any other active manual decorator.
+                        if (decorator.callback(data.item.getAttribute('linkHref')) &&
+                            !this._conflictChecker?.(decorator, data.item) &&
+                            isApplyingConverter) {
+                            if (data.item.is('selection')) {
+                                conversionApi.writer.wrap(conversionApi.writer.document.selection.getFirstRange(), elementCreator(decorator, conversionApi.writer));
+                            }
+                            else {
+                                conversionApi.writer.wrap(conversionApi.mapper.toViewRange(data.range), elementCreator(decorator, conversionApi.writer));
+                            }
                         }
                         else {
-                            viewWriter.wrap(conversionApi.mapper.toViewRange(data.range), viewElement);
+                            conversionApi.writer.unwrap(conversionApi.mapper.toViewRange(data.range), elementCreator(decorator, conversionApi.writer));
                         }
                     }
-                    else {
-                        viewWriter.unwrap(conversionApi.mapper.toViewRange(data.range), viewElement);
-                    }
-                }
-            }, { priority: 'high' });
+                };
+            };
+            dispatcher.on('attribute', createConverter(false), { priority: priorities.high - 1 });
+            // Apply decorators after all automatic and manual decorators are removed so removing one decorator
+            // won't strip part of the other decorator's attributes, classes or styles.
+            dispatcher.on('attribute', createConverter(true), { priority: priorities.high - 2 });
         };
     }
     /**
@@ -91,54 +117,65 @@ export class AutomaticLinkDecorators {
      */
     getDispatcherForLinkedImage() {
         return dispatcher => {
-            dispatcher.on('attribute:linkHref:imageBlock', (evt, data, { writer, mapper }) => {
-                const viewFigure = mapper.toViewElement(data.item);
-                const linkInImage = Array.from(viewFigure.getChildren())
-                    .find((child) => child.is('element', 'a'));
-                // It's not guaranteed that the anchor is present in the image block during execution of this dispatcher.
-                // It might have been removed during the execution of unlink command that runs the image link downcast dispatcher
-                // that is executed before this one and removes the anchor from the image block.
-                if (!linkInImage) {
-                    return;
-                }
-                for (const item of this._definitions) {
-                    const attributes = toMap(item.attributes);
-                    if (item.callback(data.attributeNewValue)) {
-                        for (const [key, val] of attributes) {
-                            // Left for backward compatibility. Since v30 decorator should
-                            // accept `classes` and `styles` separately from `attributes`.
-                            if (key === 'class') {
-                                writer.addClass(val, linkInImage);
+            const createConverter = (isApplyingConverter) => {
+                return (evt, data, { writer, mapper }) => {
+                    if (!data.item.is('element', 'imageBlock') || !data.attributeKey.startsWith('link')) {
+                        return;
+                    }
+                    const viewFigure = mapper.toViewElement(data.item);
+                    const linkInImage = Array.from(viewFigure.getChildren())
+                        .find((child) => child.is('element', 'a'));
+                    // It's not guaranteed that the anchor is present in the image block during execution of this dispatcher.
+                    // It might have been removed during the execution of unlink command that runs the image link downcast dispatcher
+                    // that is executed before this one and removes the anchor from the image block.
+                    if (!linkInImage) {
+                        return;
+                    }
+                    for (const decorator of this._definitions) {
+                        const attributes = toMap(decorator.attributes);
+                        if (decorator.callback(data.item.getAttribute('linkHref')) &&
+                            !this._conflictChecker?.(decorator, data.item) &&
+                            isApplyingConverter) {
+                            for (const [key, val] of attributes) {
+                                // Left for backward compatibility. Since v30 decorator should
+                                // accept `classes` and `styles` separately from `attributes`.
+                                if (key === 'class') {
+                                    writer.addClass(val, linkInImage);
+                                }
+                                else {
+                                    writer.setAttribute(key, val, false, linkInImage);
+                                }
                             }
-                            else {
-                                writer.setAttribute(key, val, linkInImage);
+                            if (decorator.classes) {
+                                writer.addClass(decorator.classes, linkInImage);
+                            }
+                            for (const key in decorator.styles) {
+                                writer.setStyle(key, decorator.styles[key], linkInImage);
                             }
                         }
-                        if (item.classes) {
-                            writer.addClass(item.classes, linkInImage);
-                        }
-                        for (const key in item.styles) {
-                            writer.setStyle(key, item.styles[key], linkInImage);
-                        }
-                    }
-                    else {
-                        for (const [key, val] of attributes) {
-                            if (key === 'class') {
-                                writer.removeClass(val, linkInImage);
+                        else {
+                            for (const [key, val] of attributes) {
+                                if (key === 'class') {
+                                    writer.removeClass(val, linkInImage);
+                                }
+                                else {
+                                    writer.removeAttribute(key, val, linkInImage);
+                                }
                             }
-                            else {
-                                writer.removeAttribute(key, linkInImage);
+                            if (decorator.classes) {
+                                writer.removeClass(decorator.classes, linkInImage);
+                            }
+                            for (const key in decorator.styles) {
+                                writer.removeStyle(key, linkInImage);
                             }
-                        }
-                        if (item.classes) {
-                            writer.removeClass(item.classes, linkInImage);
-                        }
-                        for (const key in item.styles) {
-                            writer.removeStyle(key, linkInImage);
                         }
                     }
-                }
-            });
+                };
+            };
+            dispatcher.on('attribute', createConverter(false), { priority: priorities.high - 1 });
+            // Apply decorators after all automatic and manual decorators are removed so removing one decorator
+            // won't strip part of the other decorator's attributes, classes or styles.
+            dispatcher.on('attribute', createConverter(true), { priority: priorities.high - 2 });
         };
     }
 }

package/src/utils/conflictingdecorators.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+/**
+ * @module link/utils/conflictingdecorators
+ */
+/**
+ * Checks if two decorators conflict with each other.
+ *
+ * Decorators conflict when they share the same HTML attribute names (excluding mergeable attributes)
+ * or style properties.
+ *
+ * @internal
+ * @param a The first decorator.
+ * @param b The second decorator.
+ */
+export declare function areDecoratorsConflicting(a: DecoratorLike, b: DecoratorLike): boolean;
+/**
+ * Resolves conflicting manual decorators by automatically disabling decorators that share
+ * the same HTML attributes with newly enabled decorators.
+ *
+ * @internal
+ * @param options Configuration object.
+ * @param options.decoratorStates Initial decorator states.
+ * @param options.allDecorators Collection of all manual decorators.
+ * @returns Updated decorator states with conflicts resolved.
+ */
+export declare function resolveConflictingDecorators({ decoratorStates, allDecorators }: {
+    decoratorStates: Record<string, boolean>;
+    allDecorators: Array<DecoratorLike & {
+        value?: boolean;
+    }>;
+}): Record<string, boolean>;
+/**
+ * Decorator-like object representing attributes and styles.
+ */
+type DecoratorLike = {
+    id: string;
+    attributes?: Record<string, string>;
+    styles?: Record<string, string>;
+};
+export {};

package/src/utils/conflictingdecorators.js

@@ -0,0 +1,80 @@
+/**
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+/**
+ * @module link/utils/conflictingdecorators
+ */
+/**
+ * Checks if two decorators conflict with each other.
+ *
+ * Decorators conflict when they share the same HTML attribute names (excluding mergeable attributes)
+ * or style properties.
+ *
+ * @internal
+ * @param a The first decorator.
+ * @param b The second decorator.
+ */
+export function areDecoratorsConflicting(a, b) {
+    if (a.attributes && b.attributes) {
+        const hasConflict = Object.keys(a.attributes).some(key => !isMergeableAttribute(key) && key in b.attributes);
+        if (hasConflict) {
+            return true;
+        }
+    }
+    // Check for conflicting style properties (same CSS property names).
+    if (a.styles && b.styles) {
+        const hasConflict = Object.keys(a.styles).some(key => key in b.styles);
+        if (hasConflict) {
+            return true;
+        }
+    }
+    // Classes don't conflict with each other - they can be merged.
+    return false;
+    function isMergeableAttribute(key) {
+        return key === 'class' || key === 'style' || key === 'rel';
+    }
+}
+/**
+ * Resolves conflicting manual decorators by automatically disabling decorators that share
+ * the same HTML attributes with newly enabled decorators.
+ *
+ * @internal
+ * @param options Configuration object.
+ * @param options.decoratorStates Initial decorator states.
+ * @param options.allDecorators Collection of all manual decorators.
+ * @returns Updated decorator states with conflicts resolved.
+ */
+export function resolveConflictingDecorators({ decoratorStates, allDecorators }) {
+    const resolved = { ...decoratorStates };
+    for (const name in decoratorStates) {
+        if (decoratorStates[name] && isNewlyAddedDecorator(name)) {
+            const conflicts = getConflictingManualDecorators(name, allDecorators);
+            for (const conflict of conflicts) {
+                resolved[conflict] = false;
+            }
+        }
+    }
+    function isNewlyAddedDecorator(name) {
+        return allDecorators.some(item => item.id === name && !item.value);
+    }
+    return resolved;
+}
+/**
+ * Returns array of decorator names that conflict with the given decorator.
+ * Decorators conflict when they share the same HTML attribute names or style properties.
+ *
+ * @param decoratorId The id/name of the manual decorator to check for conflicts.
+ * @param manualDecorators Collection of all manual decorators.
+ * @returns Array of conflicting decorator names.
+ */
+function getConflictingManualDecorators(decoratorId, manualDecorators) {
+    const decorator = manualDecorators.find(item => item.id === decoratorId);
+    /* istanbul ignore next -- @preserve */
+    if (!decorator) {
+        return [];
+    }
+    return manualDecorators
+        .filter(otherDecorator => otherDecorator.id !== decoratorId && areDecoratorsConflicting(decorator, otherDecorator))
+        .map(item => item.id);
+}