@ckeditor/ckeditor5-html-support 38.0.1 → 38.1.0

package/src/integrations/dualcontent.d.ts

@@ -29,7 +29,7 @@ export default class DualContentModelElementSupport extends Plugin {
     /**
      * @inheritDoc
      */
-    static get pluginName(): 'DualContentModelElementSupport';
+    static get pluginName(): "DualContentModelElementSupport";
     /**
      * @inheritDoc
      */

package/src/integrations/dualcontent.js

@@ -6,6 +6,7 @@ import { Plugin } from 'ckeditor5/src/core';
 import { priorities } from 'ckeditor5/src/utils';
 import { modelToViewBlockAttributeConverter, viewToModelBlockAttributeConverter } from '../converters';
 import DataFilter from '../datafilter';
+import { getHtmlAttributeName } from '../utils';
 /**
  * Provides the General HTML Support integration for elements which can behave like sectioning element (e.g. article) or
  * element accepting only inline content (e.g. paragraph).
@@ -71,7 +72,7 @@ export default class DualContentModelElementSupport extends Plugin {
                 },
                 // With a `low` priority, `paragraph` plugin auto-paragraphing mechanism is executed. Make sure
                 // this listener is called before it. If not, some elements will be transformed into a paragraph.
-                converterPriority: priorities.get('low') + 0.5
+                converterPriority: priorities.low + 0.5
             });
             conversion.for('downcast').elementToElement({
                 view: blockDefinition.view,
@@ -110,7 +111,7 @@ export default class DualContentModelElementSupport extends Plugin {
         const conversion = editor.conversion;
         const dataFilter = editor.plugins.get(DataFilter);
         editor.model.schema.extend(definition.model, {
-            allowAttributes: 'htmlAttributes'
+            allowAttributes: getHtmlAttributeName(definition.view)
         });
         conversion.for('upcast').add(viewToModelBlockAttributeConverter(definition, dataFilter));
         conversion.for('downcast').add(modelToViewBlockAttributeConverter(definition));

package/src/integrations/heading.d.ts

@@ -19,7 +19,7 @@ export default class HeadingElementSupport extends Plugin {
     /**
      * @inheritDoc
      */
-    static get pluginName(): 'HeadingElementSupport';
+    static get pluginName(): "HeadingElementSupport";
     /**
      * @inheritDoc
      */
@@ -28,8 +28,4 @@ export default class HeadingElementSupport extends Plugin {
      * 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

@@ -8,7 +8,6 @@
 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.
  */
@@ -35,7 +34,6 @@ export default class HeadingElementSupport extends Plugin {
         }
         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.
@@ -59,17 +57,4 @@ 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.d.ts

@@ -18,7 +18,7 @@ export default class ImageElementSupport extends Plugin {
     /**
      * @inheritDoc
      */
-    static get pluginName(): 'ImageElementSupport';
+    static get pluginName(): "ImageElementSupport";
     /**
      * @inheritDoc
      */

package/src/integrations/image.js

@@ -47,7 +47,7 @@ export default class ImageElementSupport extends Plugin {
             if (schema.isRegistered('imageBlock')) {
                 schema.extend('imageBlock', {
                     allowAttributes: [
-                        'htmlAttributes',
+                        'htmlImgAttributes',
                         // Figure and Link don't have model counterpart.
                         // We will preserve attributes on image model element using these attribute keys.
                         'htmlFigureAttributes',
@@ -60,7 +60,7 @@ export default class ImageElementSupport extends Plugin {
                     allowAttributes: [
                         // `htmlA` is needed for standard GHS link integration.
                         'htmlA',
-                        'htmlAttributes'
+                        'htmlImgAttributes'
                     ]
                 });
             }
@@ -84,7 +84,7 @@ function viewToModelImageAttributeConverter(dataFilter) {
             }
             const viewImageElement = data.viewItem;
             const viewContainerElement = viewImageElement.parent;
-            preserveElementAttributes(viewImageElement, 'htmlAttributes');
+            preserveElementAttributes(viewImageElement, 'htmlImgAttributes');
             if (viewContainerElement.is('element', 'a')) {
                 preserveLinkAttributes(viewContainerElement);
             }
@@ -129,8 +129,8 @@ function viewToModelFigureAttributeConverter(dataFilter) {
  */
 function modelToViewImageAttributeConverter() {
     return (dispatcher) => {
-        addInlineAttributeConversion('htmlAttributes');
-        addBlockAttributeConversion('img', 'htmlAttributes');
+        addInlineAttributeConversion('htmlImgAttributes');
+        addBlockAttributeConversion('img', 'htmlImgAttributes');
         addBlockAttributeConversion('figure', 'htmlFigureAttributes');
         addBlockAttributeConversion('a', 'htmlLinkAttributes');
         function addInlineAttributeConversion(attributeName) {

package/src/integrations/mediaembed.d.ts

@@ -18,7 +18,7 @@ export default class MediaEmbedElementSupport extends Plugin {
     /**
      * @inheritDoc
      */
-    static get pluginName(): 'MediaEmbedElementSupport';
+    static get pluginName(): "MediaEmbedElementSupport";
     /**
      * @inheritDoc
      */

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 '../utils';
+import { updateViewAttributes, getHtmlAttributeName } from '../utils';
 import { getDescendantElement } from './integrationutils';
 /**
  * Provides the General HTML Support integration with {@link module:media-embed/mediaembed~MediaEmbed Media Embed} feature.
@@ -55,7 +55,7 @@ export default class MediaEmbedElementSupport extends Plugin {
             }
             schema.extend('media', {
                 allowAttributes: [
-                    'htmlAttributes',
+                    getHtmlAttributeName(mediaElementName),
                     'htmlFigureAttributes'
                 ]
             });
@@ -68,7 +68,7 @@ export default class MediaEmbedElementSupport extends Plugin {
 function viewToModelMediaAttributesConverter(dataFilter, mediaElementName) {
     const upcastMedia = (evt, data, conversionApi) => {
         const viewMediaElement = data.viewItem;
-        preserveElementAttributes(viewMediaElement, 'htmlAttributes');
+        preserveElementAttributes(viewMediaElement, getHtmlAttributeName(mediaElementName));
         function preserveElementAttributes(viewElement, attributeName) {
             const viewAttributes = dataFilter.processViewAttributes(viewElement, conversionApi);
             if (viewAttributes) {
@@ -102,7 +102,7 @@ function viewToModelFigureAttributesConverter(dataFilter) {
 }
 function modelToViewMediaAttributeConverter(mediaElementName) {
     return (dispatcher) => {
-        addAttributeConversionDispatcherHandler(mediaElementName, 'htmlAttributes');
+        addAttributeConversionDispatcherHandler(mediaElementName, getHtmlAttributeName(mediaElementName));
         addAttributeConversionDispatcherHandler('figure', 'htmlFigureAttributes');
         function addAttributeConversionDispatcherHandler(elementName, attributeName) {
             dispatcher.on(`attribute:${attributeName}:media`, (evt, data, conversionApi) => {

package/src/integrations/script.d.ts

@@ -18,7 +18,7 @@ export default class ScriptElementSupport extends Plugin {
     /**
      * @inheritDoc
      */
-    static get pluginName(): 'ScriptElementSupport';
+    static get pluginName(): "ScriptElementSupport";
     /**
      * @inheritDoc
      */

package/src/integrations/script.js

@@ -35,7 +35,7 @@ export default class ScriptElementSupport extends Plugin {
             const conversion = editor.conversion;
             schema.register('htmlScript', definition.modelSchema);
             schema.extend('htmlScript', {
-                allowAttributes: ['htmlAttributes', 'htmlContent'],
+                allowAttributes: ['htmlScriptAttributes', 'htmlContent'],
                 isContent: true
             });
             editor.data.registerRawContentMatcher({

package/src/integrations/style.d.ts

@@ -18,7 +18,7 @@ export default class StyleElementSupport extends Plugin {
     /**
      * @inheritDoc
      */
-    static get pluginName(): 'StyleElementSupport';
+    static get pluginName(): "StyleElementSupport";
     /**
      * @inheritDoc
      */

package/src/integrations/style.js

@@ -35,7 +35,7 @@ export default class StyleElementSupport extends Plugin {
             const conversion = editor.conversion;
             schema.register('htmlStyle', definition.modelSchema);
             schema.extend('htmlStyle', {
-                allowAttributes: ['htmlAttributes', 'htmlContent'],
+                allowAttributes: ['htmlStyleAttributes', 'htmlContent'],
                 isContent: true
             });
             editor.data.registerRawContentMatcher({

package/src/integrations/table.d.ts

@@ -15,7 +15,7 @@ export default class TableElementSupport extends Plugin {
     /**
      * @inheritDoc
      */
-    static get pluginName(): 'TableElementSupport';
+    static get pluginName(): "TableElementSupport";
     /**
      * @inheritDoc
      */

package/src/integrations/table.js

@@ -43,7 +43,7 @@ export default class TableElementSupport extends Plugin {
             }
             schema.extend('table', {
                 allowAttributes: [
-                    'htmlAttributes',
+                    'htmlTableAttributes',
                     // Figure, thead and tbody elements don't have model counterparts.
                     // We will be preserving attributes on table element using these attribute keys.
                     'htmlFigureAttributes', 'htmlTheadAttributes', 'htmlTbodyAttributes'
@@ -95,7 +95,7 @@ function viewToModelTableAttributeConverter(dataFilter) {
                 return;
             }
             const viewTableElement = data.viewItem;
-            preserveElementAttributes(viewTableElement, 'htmlAttributes');
+            preserveElementAttributes(viewTableElement, 'htmlTableAttributes');
             for (const childNode of viewTableElement.getChildren()) {
                 if (childNode.is('element', 'thead')) {
                     preserveElementAttributes(childNode, 'htmlTheadAttributes');
@@ -141,7 +141,7 @@ function viewToModelFigureAttributeConverter(dataFilter) {
  */
 function modelToViewTableAttributeConverter() {
     return (dispatcher) => {
-        addAttributeConversionDispatcherHandler('table', 'htmlAttributes');
+        addAttributeConversionDispatcherHandler('table', 'htmlTableAttributes');
         addAttributeConversionDispatcherHandler('figure', 'htmlFigureAttributes');
         addAttributeConversionDispatcherHandler('thead', 'htmlTheadAttributes');
         addAttributeConversionDispatcherHandler('tbody', 'htmlTbodyAttributes');

package/src/schemadefinitions.js

@@ -513,17 +513,20 @@ export default {
         {
             model: 'htmlLiAttributes',
             view: 'li',
-            appliesToBlock: true
+            appliesToBlock: true,
+            coupledAttribute: 'listItemId'
         },
         {
-            model: 'htmlListAttributes',
+            model: 'htmlOlAttributes',
             view: 'ol',
-            appliesToBlock: true
+            appliesToBlock: true,
+            coupledAttribute: 'listItemId'
         },
         {
-            model: 'htmlListAttributes',
+            model: 'htmlUlAttributes',
             view: 'ul',
-            appliesToBlock: true
+            appliesToBlock: true,
+            coupledAttribute: 'listItemId'
         },
         {
             model: 'htmlFigureAttributes',
@@ -945,6 +948,7 @@ export default {
             view: '$customElement',
             modelSchema: {
                 allowWhere: ['$text', '$block'],
+                allowAttributesOf: '$inlineObject',
                 isInline: true
             }
         }

package/src/utils.d.ts

@@ -58,4 +58,15 @@ export declare function modifyGhsAttribute(writer: Writer, item: Item | Document
  * @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/src/utils.js

@@ -2,7 +2,7 @@
  * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-import { cloneDeep } from 'lodash-es';
+import { startCase, cloneDeep } from 'lodash-es';
 /**
 * Helper function for the downcast converter. Updates attributes on the given view element.
 *
@@ -122,3 +122,18 @@ export function modifyGhsAttribute(writer, item, ghsAttributeName, subject, call
         }
     }
 }
+/**
+ * Transforms passed string to PascalCase format. Examples:
+ * * `div` => `Div`
+ * * `h1` => `H1`
+ * * `table` => `Table`
+ */
+export function toPascalCase(data) {
+    return startCase(data).replace(/ /g, '');
+}
+/**
+ * Returns the attribute name of the model element that holds raw HTML attributes.
+ */
+export function getHtmlAttributeName(viewElementName) {
+    return `html${toPascalCase(viewElementName)}Attributes`;
+}