@ckeditor/ckeditor5-html-support 37.1.0 → 38.0.0-rc.0

package/src/generalhtmlsupport.js

@@ -18,6 +18,7 @@ import TableElementSupport from './integrations/table';
 import StyleElementSupport from './integrations/style';
 import DocumentListElementSupport from './integrations/documentlist';
 import CustomElementSupport from './integrations/customelement';
+import { modifyGhsAttribute } from './utils';
 /**
  * The General HTML Support feature.
  *
@@ -62,16 +63,15 @@ export default class GeneralHtmlSupport extends Plugin {
     /**
      * Returns a GHS model attribute name related to a given view element name.
      *
+     * @internal
      * @param viewElementName A view element name.
      */
     getGhsAttributeNameForElement(viewElementName) {
         const dataSchema = this.editor.plugins.get('DataSchema');
         const definitions = Array.from(dataSchema.getDefinitionsForView(viewElementName, false));
-        if (definitions &&
-            definitions.length &&
-            definitions[0].isInline &&
-            !definitions[0].isObject) {
-            return definitions[0].model;
+        const inlineDefinition = definitions.find(definition => (definition.isInline && !definitions[0].isObject));
+        if (inlineDefinition) {
+            return inlineDefinition.model;
         }
         return 'htmlAttributes';
     }
@@ -202,7 +202,10 @@ export default class GeneralHtmlSupport extends Plugin {
  * Returns an iterator over an items in the selectable that accept given GHS attribute.
  */
 function* getItemsToUpdateGhsAttribute(model, selectable, ghsAttributeName) {
-    if (selectable.is('documentSelection') && selectable.isCollapsed) {
+    if (!selectable) {
+        return;
+    }
+    if (!(Symbol.iterator in selectable) && selectable.is('documentSelection') && selectable.isCollapsed) {
         if (model.schema.checkAttributeInSelection(selectable, ghsAttributeName)) {
             yield selectable;
         }
@@ -217,7 +220,10 @@ function* getItemsToUpdateGhsAttribute(model, selectable, ghsAttributeName) {
  * Translates a given selectable to an iterable of ranges.
  */
 function getValidRangesForSelectable(model, selectable, ghsAttributeName) {
-    if (selectable.is('node') || selectable.is('$text') || selectable.is('$textProxy')) {
+    if (!(Symbol.iterator in selectable) &&
+        (selectable.is('node') ||
+            selectable.is('$text') ||
+            selectable.is('$textProxy'))) {
         if (model.schema.checkAttribute(selectable, ghsAttributeName)) {
             return [model.createRangeOn(selectable)];
         }
@@ -229,50 +235,3 @@ function getValidRangesForSelectable(model, selectable, ghsAttributeName) {
         return model.schema.getValidRanges(model.createSelection(selectable).getRanges(), ghsAttributeName);
     }
 }
-/**
- * Updates a GHS attribute on a specified item.
- * @param callback That receives a map or set as an argument and should modify it (add or remove entries).
- */
-function modifyGhsAttribute(writer, item, ghsAttributeName, subject, callback) {
-    const oldValue = item.getAttribute(ghsAttributeName);
-    const newValue = {};
-    for (const kind of ['attributes', 'styles', 'classes']) {
-        // Properties other than `subject` should be assigned from `oldValue`.
-        if (kind != subject) {
-            if (oldValue && oldValue[kind]) {
-                newValue[kind] = oldValue[kind];
-            }
-            continue;
-        }
-        // `callback` should be applied on property [`subject`].
-        if (subject == 'classes') {
-            const values = new Set(oldValue && oldValue.classes || []);
-            callback(values);
-            if (values.size) {
-                newValue[kind] = Array.from(values);
-            }
-            continue;
-        }
-        const values = new Map(Object.entries(oldValue && oldValue[kind] || {}));
-        callback(values);
-        if (values.size) {
-            newValue[kind] = Object.fromEntries(values);
-        }
-    }
-    if (Object.keys(newValue).length) {
-        if (item.is('documentSelection')) {
-            writer.setSelectionAttribute(ghsAttributeName, newValue);
-        }
-        else {
-            writer.setAttribute(ghsAttributeName, newValue, item);
-        }
-    }
-    else if (oldValue) {
-        if (item.is('documentSelection')) {
-            writer.removeSelectionAttribute(ghsAttributeName);
-        }
-        else {
-            writer.removeAttribute(ghsAttributeName, item);
-        }
-    }
-}

package/src/integrations/codeblock.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 import { Plugin } from 'ckeditor5/src/core';
-import { updateViewAttributes } from '../conversionutils';
+import { updateViewAttributes } from '../utils';
 import DataFilter from '../datafilter';
 /**
  * Provides the General HTML Support integration with {@link module:code-block/codeblock~CodeBlock Code Block} feature.

package/src/integrations/customelement.js

@@ -10,7 +10,7 @@ import { Plugin } from 'ckeditor5/src/core';
 import { UpcastWriter } from 'ckeditor5/src/engine';
 import DataSchema from '../dataschema';
 import DataFilter from '../datafilter';
-import { setViewAttributes } from '../conversionutils';
+import { setViewAttributes } from '../utils';
 /**
  * Provides the General HTML Support for custom elements (not registered in the {@link module:html-support/dataschema~DataSchema}).
  */

package/src/integrations/documentlist.js

@@ -7,7 +7,7 @@
  */
 import { isEqual } from 'lodash-es';
 import { Plugin } from 'ckeditor5/src/core';
-import { setViewAttributes } from '../conversionutils';
+import { setViewAttributes } from '../utils';
 import DataFilter from '../datafilter';
 /**
  * Provides the General HTML Support integration with the {@link module:list/documentlist~DocumentList Document List} feature.

package/src/integrations/heading.d.ts

@@ -6,6 +6,7 @@
  * @module html-support/integrations/heading
  */
 import { Plugin } from 'ckeditor5/src/core';
+import { Enter } from 'ckeditor5/src/enter';
 import DataSchema from '../dataschema';
 /**
  * Provides the General HTML Support integration with {@link module:heading/heading~Heading Heading} feature.
@@ -14,7 +15,7 @@ export default class HeadingElementSupport extends Plugin {
     /**
      * @inheritDoc
      */
-    static get requires(): readonly [typeof DataSchema];
+    static get requires(): readonly [typeof DataSchema, typeof Enter];
     /**
      * @inheritDoc
      */
@@ -23,4 +24,12 @@ export default class HeadingElementSupport extends Plugin {
      * @inheritDoc
      */
     init(): void;
+    /**
+     * Registers all elements supported by HeadingEditing to enable custom attributes for those elements.
+     */
+    private registerHeadingElements;
+    /**
+     * Removes css classes from "htmlAttributes" of new paragraph created when hitting "enter" in heading.
+     */
+    private removeClassesOnEnter;
 }

package/src/integrations/heading.js

@@ -6,7 +6,9 @@
  * @module html-support/integrations/heading
  */
 import { Plugin } from 'ckeditor5/src/core';
+import { Enter } from 'ckeditor5/src/enter';
 import DataSchema from '../dataschema';
+import { modifyGhsAttribute } from '../utils';
 /**
  * Provides the General HTML Support integration with {@link module:heading/heading~Heading Heading} feature.
  */
@@ -15,7 +17,7 @@ export default class HeadingElementSupport extends Plugin {
      * @inheritDoc
      */
     static get requires() {
-        return [DataSchema];
+        return [DataSchema, Enter];
     }
     /**
      * @inheritDoc
@@ -31,11 +33,16 @@ export default class HeadingElementSupport extends Plugin {
         if (!editor.plugins.has('HeadingEditing')) {
             return;
         }
-        const dataSchema = editor.plugins.get(DataSchema);
         const options = editor.config.get('heading.options');
+        this.registerHeadingElements(editor, options);
+        this.removeClassesOnEnter(editor, options);
+    }
+    /**
+     * Registers all elements supported by HeadingEditing to enable custom attributes for those elements.
+     */
+    registerHeadingElements(editor, options) {
+        const dataSchema = editor.plugins.get(DataSchema);
         const headerModels = [];
-        // We are registering all elements supported by HeadingEditing
-        // to enable custom attributes for those elements.
         for (const option of options) {
             if ('model' in option && 'view' in option) {
                 dataSchema.registerBlockElement({
@@ -52,4 +59,17 @@ export default class HeadingElementSupport extends Plugin {
             }
         });
     }
+    /**
+     * Removes css classes from "htmlAttributes" of new paragraph created when hitting "enter" in heading.
+     */
+    removeClassesOnEnter(editor, options) {
+        const enterCommand = editor.commands.get('enter');
+        this.listenTo(enterCommand, 'afterExecute', (evt, data) => {
+            const positionParent = editor.model.document.selection.getFirstPosition().parent;
+            const isHeading = options.some(option => positionParent.is('element', option.model));
+            if (isHeading && positionParent.childCount === 0) {
+                modifyGhsAttribute(data.writer, positionParent, 'htmlAttributes', 'classes', classes => classes.clear());
+            }
+        });
+    }
 }

package/src/integrations/image.js

@@ -7,7 +7,7 @@
  */
 import { Plugin } from 'ckeditor5/src/core';
 import DataFilter from '../datafilter';
-import { setViewAttributes, updateViewAttributes } from '../conversionutils';
+import { setViewAttributes, updateViewAttributes } from '../utils';
 import { getDescendantElement } from './integrationutils';
 /**
  * Provides the General HTML Support integration with the {@link module:image/image~Image Image} feature.

package/src/integrations/mediaembed.js

@@ -8,7 +8,7 @@
 import { Plugin } from 'ckeditor5/src/core';
 import DataFilter from '../datafilter';
 import DataSchema from '../dataschema';
-import { updateViewAttributes } from '../conversionutils';
+import { updateViewAttributes } from '../utils';
 import { getDescendantElement } from './integrationutils';
 /**
  * Provides the General HTML Support integration with {@link module:media-embed/mediaembed~MediaEmbed Media Embed} feature.

package/src/integrations/table.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 import { Plugin } from 'ckeditor5/src/core';
-import { setViewAttributes } from '../conversionutils';
+import { updateViewAttributes } from '../utils';
 import DataFilter from '../datafilter';
 import { getDescendantElement } from './integrationutils';
 /**
@@ -33,6 +33,7 @@ export default class TableElementSupport extends Plugin {
         const schema = editor.model.schema;
         const conversion = editor.conversion;
         const dataFilter = editor.plugins.get(DataFilter);
+        const tableUtils = editor.plugins.get('TableUtils');
         dataFilter.on('register:figure', () => {
             conversion.for('upcast').add(viewToModelFigureAttributeConverter(dataFilter));
         });
@@ -50,10 +51,37 @@ export default class TableElementSupport extends Plugin {
             });
             conversion.for('upcast').add(viewToModelTableAttributeConverter(dataFilter));
             conversion.for('downcast').add(modelToViewTableAttributeConverter());
+            editor.model.document.registerPostFixer(createHeadingRowsPostFixer(editor.model, tableUtils));
             evt.stop();
         });
     }
 }
+/**
+ * Creates a model post-fixer for thead and tbody GHS related attributes.
+ */
+function createHeadingRowsPostFixer(model, tableUtils) {
+    return writer => {
+        const changes = model.document.differ.getChanges();
+        let wasFixed = false;
+        for (const change of changes) {
+            if (change.type != 'attribute' || change.attributeKey != 'headingRows') {
+                continue;
+            }
+            const table = change.range.start.nodeAfter;
+            const hasTHeadAttributes = table.getAttribute('htmlTheadAttributes');
+            const hasTBodyAttributes = table.getAttribute('htmlTbodyAttributes');
+            if (hasTHeadAttributes && !change.attributeNewValue) {
+                writer.removeAttribute('htmlTheadAttributes', table);
+                wasFixed = true;
+            }
+            else if (hasTBodyAttributes && change.attributeNewValue == tableUtils.getRows(table)) {
+                writer.removeAttribute('htmlTbodyAttributes', table);
+                wasFixed = true;
+            }
+        }
+        return wasFixed;
+    };
+}
 /**
  * View-to-model conversion helper preserving allowed attributes on {@link module:table/table~Table Table}
  * feature model element.
@@ -63,6 +91,9 @@ export default class TableElementSupport extends Plugin {
 function viewToModelTableAttributeConverter(dataFilter) {
     return (dispatcher) => {
         dispatcher.on('element:table', (evt, data, conversionApi) => {
+            if (!data.modelRange) {
+                return;
+            }
             const viewTableElement = data.viewItem;
             preserveElementAttributes(viewTableElement, 'htmlAttributes');
             for (const childNode of viewTableElement.getChildren()) {
@@ -116,12 +147,16 @@ function modelToViewTableAttributeConverter() {
         addAttributeConversionDispatcherHandler('tbody', 'htmlTbodyAttributes');
         function addAttributeConversionDispatcherHandler(elementName, attributeName) {
             dispatcher.on(`attribute:${attributeName}:table`, (evt, data, conversionApi) => {
-                if (!conversionApi.consumable.consume(data.item, evt.name)) {
+                if (!conversionApi.consumable.test(data.item, evt.name)) {
                     return;
                 }
                 const containerElement = conversionApi.mapper.toViewElement(data.item);
                 const viewElement = getDescendantElement(conversionApi.writer, containerElement, elementName);
-                setViewAttributes(conversionApi.writer, data.attributeNewValue, viewElement);
+                if (!viewElement) {
+                    return;
+                }
+                conversionApi.consumable.consume(data.item, evt.name);
+                updateViewAttributes(conversionApi.writer, data.attributeOldValue, data.attributeNewValue, viewElement);
             });
         }
     };

package/src/schemadefinitions.js

@@ -46,7 +46,7 @@
 // noscript
 export default {
     block: [
-        // Existing features
+        // Existing features.
         {
             model: 'codeBlock',
             view: 'pre'
@@ -111,7 +111,7 @@ export default {
             model: 'imageInline',
             view: 'img'
         },
-        // Compatibility features
+        // Compatibility features.
         {
             model: 'htmlP',
             view: 'p',
@@ -509,102 +509,153 @@ export default {
         }
     ],
     inline: [
+        // Existing features (attribute set on an existing model element).
+        {
+            model: 'htmlLiAttributes',
+            view: 'li',
+            appliesToBlock: true
+        },
+        {
+            model: 'htmlListAttributes',
+            view: 'ol',
+            appliesToBlock: true
+        },
+        {
+            model: 'htmlListAttributes',
+            view: 'ul',
+            appliesToBlock: true
+        },
+        {
+            model: 'htmlFigureAttributes',
+            view: 'figure',
+            appliesToBlock: 'table'
+        },
+        {
+            model: 'htmlTheadAttributes',
+            view: 'thead',
+            appliesToBlock: 'table'
+        },
+        {
+            model: 'htmlTbodyAttributes',
+            view: 'tbody',
+            appliesToBlock: 'table'
+        },
+        {
+            model: 'htmlFigureAttributes',
+            view: 'figure',
+            appliesToBlock: 'imageBlock'
+        },
+        // Compatibility features.
         {
             model: 'htmlAcronym',
             view: 'acronym',
             attributeProperties: {
-                copyOnEnter: true
+                copyOnEnter: true,
+                isFormatting: true
             }
         },
         {
             model: 'htmlTt',
             view: 'tt',
             attributeProperties: {
-                copyOnEnter: true
+                copyOnEnter: true,
+                isFormatting: true
             }
         },
         {
             model: 'htmlFont',
             view: 'font',
             attributeProperties: {
-                copyOnEnter: true
+                copyOnEnter: true,
+                isFormatting: true
             }
         },
         {
             model: 'htmlTime',
             view: 'time',
             attributeProperties: {
-                copyOnEnter: true
+                copyOnEnter: true,
+                isFormatting: true
             }
         },
         {
             model: 'htmlVar',
             view: 'var',
             attributeProperties: {
-                copyOnEnter: true
+                copyOnEnter: true,
+                isFormatting: true
             }
         },
         {
             model: 'htmlBig',
             view: 'big',
             attributeProperties: {
-                copyOnEnter: true
+                copyOnEnter: true,
+                isFormatting: true
             }
         },
         {
             model: 'htmlSmall',
             view: 'small',
             attributeProperties: {
-                copyOnEnter: true
+                copyOnEnter: true,
+                isFormatting: true
             }
         },
         {
             model: 'htmlSamp',
             view: 'samp',
             attributeProperties: {
-                copyOnEnter: true
+                copyOnEnter: true,
+                isFormatting: true
             }
         },
         {
             model: 'htmlQ',
             view: 'q',
             attributeProperties: {
-                copyOnEnter: true
+                copyOnEnter: true,
+                isFormatting: true
             }
         },
         {
             model: 'htmlOutput',
             view: 'output',
             attributeProperties: {
-                copyOnEnter: true
+                copyOnEnter: true,
+                isFormatting: true
             }
         },
         {
             model: 'htmlKbd',
             view: 'kbd',
             attributeProperties: {
-                copyOnEnter: true
+                copyOnEnter: true,
+                isFormatting: true
             }
         },
         {
             model: 'htmlBdi',
             view: 'bdi',
             attributeProperties: {
-                copyOnEnter: true
+                copyOnEnter: true,
+                isFormatting: true
             }
         },
         {
             model: 'htmlBdo',
             view: 'bdo',
             attributeProperties: {
-                copyOnEnter: true
+                copyOnEnter: true,
+                isFormatting: true
             }
         },
         {
             model: 'htmlAbbr',
             view: 'abbr',
             attributeProperties: {
-                copyOnEnter: true
+                copyOnEnter: true,
+                isFormatting: true
             }
         },
         {
@@ -667,7 +718,8 @@ export default {
             view: 'del',
             coupledAttribute: 'strikethrough',
             attributeProperties: {
-                copyOnEnter: true
+                copyOnEnter: true,
+                isFormatting: true
             }
         },
         // TODO According to HTML-spec can behave as div-like element, although CKE4 only handles it as an inline element.
@@ -675,7 +727,8 @@ export default {
             model: 'htmlIns',
             view: 'ins',
             attributeProperties: {
-                copyOnEnter: true
+                copyOnEnter: true,
+                isFormatting: true
             }
         },
         {
@@ -718,38 +771,43 @@ export default {
             model: 'htmlMark',
             view: 'mark',
             attributeProperties: {
-                copyOnEnter: true
+                copyOnEnter: true,
+                isFormatting: true
             }
         },
         {
             model: 'htmlSpan',
             view: 'span',
             attributeProperties: {
-                copyOnEnter: true
+                copyOnEnter: true,
+                isFormatting: true
             }
         },
         {
             model: 'htmlCite',
             view: 'cite',
             attributeProperties: {
-                copyOnEnter: true
+                copyOnEnter: true,
+                isFormatting: true
             }
         },
         {
             model: 'htmlLabel',
             view: 'label',
             attributeProperties: {
-                copyOnEnter: true
+                copyOnEnter: true,
+                isFormatting: true
             }
         },
         {
             model: 'htmlDfn',
             view: 'dfn',
             attributeProperties: {
-                copyOnEnter: true
+                copyOnEnter: true,
+                isFormatting: true
             }
         },
-        // Objects
+        // Objects.
         {
             model: 'htmlObject',
             view: 'object',

package/src/{conversionutils.d.ts → utils.d.ts}

@@ -3,9 +3,9 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 /**
- * @module html-support/conversionutils
+ * @module html-support/utils
  */
-import type { DowncastWriter, ViewElement } from 'ckeditor5/src/engine';
+import type { DocumentSelection, DowncastWriter, Item, ViewElement, Writer } from 'ckeditor5/src/engine';
 export interface GHSViewAttributes {
     attributes?: Record<string, unknown>;
     classes?: Array<string>;
@@ -40,3 +40,22 @@ export declare function removeViewAttributes(writer: DowncastWriter, viewAttribu
 * 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;
+export {};

package/src/{conversionutils.js → utils.js}

@@ -79,3 +79,46 @@ export function mergeViewElementAttributes(target, source) {
     }
     return result;
 }
+export function modifyGhsAttribute(writer, item, ghsAttributeName, subject, callback) {
+    const oldValue = item.getAttribute(ghsAttributeName);
+    const newValue = {};
+    for (const kind of ['attributes', 'styles', 'classes']) {
+        // Properties other than `subject` should be assigned from `oldValue`.
+        if (kind != subject) {
+            if (oldValue && oldValue[kind]) {
+                newValue[kind] = oldValue[kind];
+            }
+            continue;
+        }
+        // `callback` should be applied on property [`subject`].
+        if (subject == 'classes') {
+            const values = new Set(oldValue && oldValue.classes || []);
+            callback(values);
+            if (values.size) {
+                newValue[kind] = Array.from(values);
+            }
+            continue;
+        }
+        const values = new Map(Object.entries(oldValue && oldValue[kind] || {}));
+        callback(values);
+        if (values.size) {
+            newValue[kind] = Object.fromEntries(values);
+        }
+    }
+    if (Object.keys(newValue).length) {
+        if (item.is('documentSelection')) {
+            writer.setSelectionAttribute(ghsAttributeName, newValue);
+        }
+        else {
+            writer.setAttribute(ghsAttributeName, newValue, item);
+        }
+    }
+    else if (oldValue) {
+        if (item.is('documentSelection')) {
+            writer.removeSelectionAttribute(ghsAttributeName);
+        }
+        else {
+            writer.removeAttribute(ghsAttributeName, item);
+        }
+    }
+}