@ckeditor/ckeditor5-html-support 41.1.0 → 41.3.0-alpha.0

package/dist/types/utils.d.ts

@@ -0,0 +1,72 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module html-support/utils
+ */
+import type { DocumentSelection, DowncastWriter, Item, ViewElement, Writer } from 'ckeditor5/src/engine.js';
+export interface GHSViewAttributes {
+    attributes?: Record<string, unknown>;
+    classes?: Array<string>;
+    styles?: Record<string, string>;
+}
+/**
+* Helper function for the downcast converter. Updates attributes on the given view element.
+*
+* @param writer The view writer.
+* @param oldViewAttributes The previous GHS attribute value.
+* @param newViewAttributes The current GHS attribute value.
+* @param viewElement The view element to update.
+*/
+export declare function updateViewAttributes(writer: DowncastWriter, oldViewAttributes: GHSViewAttributes, newViewAttributes: GHSViewAttributes, viewElement: ViewElement): void;
+/**
+ * Helper function for the downcast converter. Sets attributes on the given view element.
+ *
+ * @param writer The view writer.
+ * @param viewAttributes The GHS attribute value.
+ * @param viewElement The view element to update.
+ */
+export declare function setViewAttributes(writer: DowncastWriter, viewAttributes: GHSViewAttributes, viewElement: ViewElement): void;
+/**
+ * Helper function for the downcast converter. Removes attributes on the given view element.
+ *
+ * @param writer The view writer.
+ * @param viewAttributes The GHS attribute value.
+ * @param viewElement The view element to update.
+ */
+export declare function removeViewAttributes(writer: DowncastWriter, viewAttributes: GHSViewAttributes, viewElement: ViewElement): void;
+/**
+* Merges view element attribute objects.
+*/
+export declare function mergeViewElementAttributes(target: GHSViewAttributes, source: GHSViewAttributes): GHSViewAttributes;
+type ModifyGhsAttributesCallback = (t: Map<string, unknown>) => void;
+type ModifyGhsClassesCallback = (t: Set<string>) => void;
+type ModifyGhsStylesCallback = (t: Map<string, string>) => void;
+/**
+ * Updates a GHS attribute on a specified item.
+ * @param callback That receives a map as an argument and should modify it (add or remove entries).
+ */
+export declare function modifyGhsAttribute(writer: Writer, item: Item | DocumentSelection, ghsAttributeName: string, subject: 'attributes', callback: ModifyGhsAttributesCallback): void;
+/**
+ * Updates a GHS attribute on a specified item.
+ * @param callback That receives a set as an argument and should modify it (add or remove entries).
+ */
+export declare function modifyGhsAttribute(writer: Writer, item: Item | DocumentSelection, ghsAttributeName: string, subject: 'classes', callback: ModifyGhsClassesCallback): void;
+/**
+ * Updates a GHS attribute on a specified item.
+ * @param callback That receives a map as an argument and should modify it (add or remove entries).
+ */
+export declare function modifyGhsAttribute(writer: Writer, item: Item | DocumentSelection, ghsAttributeName: string, subject: 'styles', callback: ModifyGhsStylesCallback): void;
+/**
+ * Transforms passed string to PascalCase format. Examples:
+ * * `div` => `Div`
+ * * `h1` => `H1`
+ * * `table` => `Table`
+ */
+export declare function toPascalCase(data: string): string;
+/**
+ * Returns the attribute name of the model element that holds raw HTML attributes.
+ */
+export declare function getHtmlAttributeName(viewElementName: string): string;
+export {};

package/lang/translations/he.po

@@ -14,7 +14,7 @@ msgid ""
 msgstr ""
 "Language-Team: Hebrew (https://app.transifex.com/ckeditor/teams/11143/he/)\n"
 "Language: he\n"
-"Plural-Forms: nplurals=4; plural=(n == 1 && n % 1 == 0) ? 0 : (n == 2 && n % 1 == 0) ? 1: (n % 10 == 0 && n % 1 == 0 && n > 10) ? 2 : 3;\n"
+"Plural-Forms: nplurals=3; plural=(n == 1 && n % 1 == 0) ? 0 : (n == 2 && n % 1 == 0) ? 1: 2;\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 
 msgctxt "A label describing an HTML object widget."

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-html-support",
-  "version": "41.1.0",
+  "version": "41.3.0-alpha.0",
   "description": "HTML Support feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -17,7 +17,7 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "ckeditor5": "41.1.0",
+    "ckeditor5": "41.3.0-alpha.0",
     "lodash-es": "4.17.21"
   },
   "author": "CKSource (http://cksource.com/)",
@@ -30,6 +30,7 @@
     "directory": "packages/ckeditor5-html-support"
   },
   "files": [
+    "dist",
     "lang",
     "src/**/*.js",
     "src/**/*.d.ts",

package/src/datafilter.js

@@ -6,13 +6,13 @@
  * @module html-support/datafilter
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import { Matcher } from 'ckeditor5/src/engine.js';
+import { Matcher, StylesMap } from 'ckeditor5/src/engine.js';
 import { CKEditorError, priorities, isValidAttributeName } from 'ckeditor5/src/utils.js';
 import { Widget } from 'ckeditor5/src/widget.js';
 import { viewToModelObjectConverter, toObjectWidgetConverter, createObjectView, viewToAttributeInlineConverter, attributeToViewInlineConverter, emptyInlineModelElementToViewConverter, viewToModelBlockAttributeConverter, modelToViewBlockAttributeConverter } from './converters.js';
 import { default as DataSchema } from './dataschema.js';
 import { getHtmlAttributeName } from './utils.js';
-import { isPlainObject, pull as removeItemFromArray } from 'lodash-es';
+import { isPlainObject } from 'lodash-es';
 import '../theme/datafilter.css';
 /**
  * Allows to validate elements and element attributes registered by {@link module:html-support/dataschema~DataSchema}.
@@ -213,10 +213,11 @@ export default class DataFilter extends Plugin {
      * - classes Set with matched class names.
      */
     processViewAttributes(viewElement, conversionApi) {
+        const { consumable } = conversionApi;
         // Make sure that the disabled attributes are handled before the allowed attributes are called.
         // For example, for block images the <figure> converter triggers conversion for <img> first and then for other elements, i.e. <a>.
-        consumeAttributes(viewElement, conversionApi, this._disallowedAttributes);
-        return consumeAttributes(viewElement, conversionApi, this._allowedAttributes);
+        matchAndConsumeAttributes(viewElement, this._disallowedAttributes, consumable);
+        return prepareGHSAttribute(viewElement, matchAndConsumeAttributes(viewElement, this._allowedAttributes, consumable));
     }
     /**
      * Adds allowed element definition and fires registration event.
@@ -605,104 +606,101 @@ export default class DataFilter extends Plugin {
     }
 }
 /**
- * Matches and consumes the given view attributes.
- */
-function consumeAttributes(viewElement, conversionApi, matcher) {
-    const matches = consumeAttributeMatches(viewElement, conversionApi, matcher);
-    const { attributes, styles, classes } = mergeMatchResults(matches);
-    const viewAttributes = {};
-    // Remove invalid DOM element attributes.
-    if (attributes.size) {
-        for (const key of attributes) {
-            if (!isValidAttributeName(key)) {
-                attributes.delete(key);
-            }
-        }
-    }
-    if (attributes.size) {
-        viewAttributes.attributes = iterableToObject(attributes, key => viewElement.getAttribute(key));
-    }
-    if (styles.size) {
-        viewAttributes.styles = iterableToObject(styles, key => viewElement.getStyle(key));
-    }
-    if (classes.size) {
-        viewAttributes.classes = Array.from(classes);
-    }
-    if (!Object.keys(viewAttributes).length) {
-        return null;
-    }
-    return viewAttributes;
-}
-/**
- * Consumes matched attributes.
+ * Matches and consumes matched attributes.
  *
- * @returns Array with match information about found attributes.
+ * @returns Object with following properties:
+ * - attributes Array with matched attribute names.
+ * - classes Array with matched class names.
+ * - styles Array with matched style names.
  */
-function consumeAttributeMatches(viewElement, { consumable }, matcher) {
+function matchAndConsumeAttributes(viewElement, matcher, consumable) {
     const matches = matcher.matchAll(viewElement) || [];
-    const consumedMatches = [];
-    for (const match of matches) {
-        removeConsumedAttributes(consumable, viewElement, match);
-        // We only want to consume attributes, so element can be still processed by other converters.
-        delete match.match.name;
-        consumable.consume(viewElement, match.match);
-        consumedMatches.push(match);
-    }
-    return consumedMatches;
-}
-/**
- * Removes attributes from the given match that were already consumed by other converters.
- */
-function removeConsumedAttributes(consumable, viewElement, match) {
-    for (const key of ['attributes', 'classes', 'styles']) {
-        const attributes = match.match[key];
-        if (!attributes) {
-            continue;
+    const stylesProcessor = viewElement.document.stylesProcessor;
+    return matches.reduce((result, { match }) => {
+        // Verify and consume styles.
+        for (const style of match.styles || []) {
+            // Check longer forms of the same style as those could be matched
+            // but not present in the element directly.
+            // Consider only longhand (or longer than current notation) so that
+            // we do not include all sides of the box if only one side is allowed.
+            const sortedRelatedStyles = stylesProcessor.getRelatedStyles(style)
+                .filter(relatedStyle => relatedStyle.split('-').length > style.split('-').length)
+                .sort((a, b) => b.split('-').length - a.split('-').length);
+            for (const relatedStyle of sortedRelatedStyles) {
+                if (consumable.consume(viewElement, { styles: [relatedStyle] })) {
+                    result.styles.push(relatedStyle);
+                }
+            }
+            // Verify and consume style as specified in the matcher.
+            if (consumable.consume(viewElement, { styles: [style] })) {
+                result.styles.push(style);
+            }
         }
-        // Iterating over a copy of an array so removing items doesn't influence iteration.
-        for (const value of Array.from(attributes)) {
-            if (!consumable.test(viewElement, ({ [key]: [value] }))) {
-                removeItemFromArray(attributes, value);
+        // Verify and consume class names.
+        for (const className of match.classes || []) {
+            if (consumable.consume(viewElement, { classes: [className] })) {
+                result.classes.push(className);
             }
         }
-    }
+        // Verify and consume other attributes.
+        for (const attributeName of match.attributes || []) {
+            if (consumable.consume(viewElement, { attributes: [attributeName] })) {
+                result.attributes.push(attributeName);
+            }
+        }
+        return result;
+    }, {
+        attributes: [],
+        classes: [],
+        styles: []
+    });
 }
 /**
- * Merges the result of {@link module:engine/view/matcher~Matcher#matchAll} method.
- *
- * @param matches
- * @returns Object with following properties:
- * - attributes Set with matched attribute names.
- * - styles Set with matched style names.
- * - classes Set with matched class names.
+ * Prepares the GHS attribute value as an object with element attributes' values.
  */
-function mergeMatchResults(matches) {
-    const matchResult = {
-        attributes: new Set(),
-        classes: new Set(),
-        styles: new Set()
-    };
-    for (const match of matches) {
-        for (const key in matchResult) {
-            const values = match.match[key] || [];
-            values.forEach(value => (matchResult[key]).add(value));
-        }
+function prepareGHSAttribute(viewElement, { attributes, classes, styles }) {
+    if (!attributes.length && !classes.length && !styles.length) {
+        return null;
     }
-    return matchResult;
+    return {
+        ...(attributes.length && {
+            attributes: getAttributes(viewElement, attributes)
+        }),
+        ...(styles.length && {
+            styles: getReducedStyles(viewElement, styles)
+        }),
+        ...(classes.length && {
+            classes
+        })
+    };
 }
 /**
- * Converts the given iterable object into an object.
+ * Returns attributes as an object with names and values.
  */
-function iterableToObject(iterable, getValue) {
+function getAttributes(viewElement, attributes) {
     const attributesObject = {};
-    for (const prop of iterable) {
-        const value = getValue(prop);
-        if (value !== undefined) {
-            attributesObject[prop] = getValue(prop);
+    for (const key of attributes) {
+        const value = viewElement.getAttribute(key);
+        if (value !== undefined && isValidAttributeName(key)) {
+            attributesObject[key] = value;
         }
     }
     return attributesObject;
 }
+/**
+ * Returns styles as an object reduced to shorthand notation without redundant entries.
+ */
+function getReducedStyles(viewElement, styles) {
+    // Use StyleMap to reduce style value to the minimal form (without shorthand and long-hand notation and duplication).
+    const stylesMap = new StylesMap(viewElement.document.stylesProcessor);
+    for (const key of styles) {
+        const styleValue = viewElement.getStyle(key);
+        if (styleValue !== undefined) {
+            stylesMap.set(key, styleValue);
+        }
+    }
+    return Object.fromEntries(stylesMap.getStylesEntries());
+}
 /**
  * Matcher by default has to match **all** patterns to count it as an actual match. Splitting the pattern
  * into separate patterns means that any matched pattern will be count as a match.
@@ -714,7 +712,8 @@ function splitPattern(pattern, attributeName) {
     const { name } = pattern;
     const attributeValue = pattern[attributeName];
     if (isPlainObject(attributeValue)) {
-        return Object.entries(attributeValue).map(([key, value]) => ({
+        return Object.entries(attributeValue)
+            .map(([key, value]) => ({
             name,
             [attributeName]: {
                 [key]: value
@@ -722,7 +721,8 @@ function splitPattern(pattern, attributeName) {
         }));
     }
     if (Array.isArray(attributeValue)) {
-        return attributeValue.map(value => ({
+        return attributeValue
+            .map(value => ({
             name,
             [attributeName]: [value]
         }));