@ckeditor/ckeditor5-html-support 44.3.0 → 45.0.0-alpha.0

package/dist/translations/be.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+import type { Translations } from '@ckeditor/ckeditor5-utils';
+declare const translations: Translations;
+export default translations;

package/dist/translations/be.js

@@ -0,0 +1,5 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+export default {"be":{"dictionary":{"HTML object":"HTML аб'ект"},getPluralForm(n){return (n % 10 == 1 && n % 100 != 11 ? 0 : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2);}}}

package/dist/translations/be.umd.js

@@ -0,0 +1,11 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+( e => {
+const { [ 'be' ]: { dictionary, getPluralForm } } = {"be":{"dictionary":{"HTML object":"HTML аб'ект"},getPluralForm(n){return (n % 10 == 1 && n % 100 != 11 ? 0 : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2);}}};
+e[ 'be' ] ||= { dictionary: {}, getPluralForm: null };
+e[ 'be' ].dictionary = Object.assign( e[ 'be' ].dictionary, dictionary );
+e[ 'be' ].getPluralForm = getPluralForm;
+} )( window.CKEDITOR_TRANSLATIONS ||= {} );

package/lang/translations/be.po

@@ -0,0 +1,16 @@
+# Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+#
+# Want to contribute to this file? Submit your changes via a GitHub Pull Request.
+#
+# Check out the official contributor's guide:
+# https://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/contributing.html
+#
+msgid ""
+msgstr ""
+"Language: be\n"
+"Plural-Forms: nplurals=3; plural=(n % 10 == 1 && n % 100 != 11 ? 0 : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2);\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+
+msgctxt "A label describing an HTML object widget."
+msgid "HTML object"
+msgstr "HTML аб'ект"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-html-support",
-  "version": "44.3.0",
+  "version": "45.0.0-alpha.0",
   "description": "HTML Support feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -17,17 +17,17 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "44.3.0",
-    "@ckeditor/ckeditor5-engine": "44.3.0",
-    "@ckeditor/ckeditor5-enter": "44.3.0",
-    "@ckeditor/ckeditor5-heading": "44.3.0",
-    "@ckeditor/ckeditor5-image": "44.3.0",
-    "@ckeditor/ckeditor5-list": "44.3.0",
-    "@ckeditor/ckeditor5-table": "44.3.0",
-    "@ckeditor/ckeditor5-utils": "44.3.0",
-    "@ckeditor/ckeditor5-widget": "44.3.0",
-    "ckeditor5": "44.3.0",
-    "lodash-es": "4.17.21"
+    "@ckeditor/ckeditor5-core": "45.0.0-alpha.0",
+    "@ckeditor/ckeditor5-engine": "45.0.0-alpha.0",
+    "@ckeditor/ckeditor5-enter": "45.0.0-alpha.0",
+    "@ckeditor/ckeditor5-heading": "45.0.0-alpha.0",
+    "@ckeditor/ckeditor5-image": "45.0.0-alpha.0",
+    "@ckeditor/ckeditor5-list": "45.0.0-alpha.0",
+    "@ckeditor/ckeditor5-table": "45.0.0-alpha.0",
+    "@ckeditor/ckeditor5-utils": "45.0.0-alpha.0",
+    "@ckeditor/ckeditor5-widget": "45.0.0-alpha.0",
+    "ckeditor5": "45.0.0-alpha.0",
+    "es-toolkit": "1.32.0"
   },
   "author": "CKSource (http://cksource.com/)",
   "license": "SEE LICENSE IN LICENSE.md",

package/src/datafilter.js

@@ -12,7 +12,7 @@ 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 } from 'lodash-es';
+import { isPlainObject } from 'es-toolkit/compat';
 import '../theme/datafilter.css';
 /**
  * Allows to validate elements and element attributes registered by {@link module:html-support/dataschema~DataSchema}.
@@ -47,6 +47,38 @@ import '../theme/datafilter.css';
  * use the {@link module:html-support/datafilter~DataFilter#processViewAttributes `processViewAttributes()`} method.
  */
 export default class DataFilter extends Plugin {
+    /**
+     * An instance of the {@link module:html-support/dataschema~DataSchema}.
+     */
+    _dataSchema;
+    /**
+     * {@link module:engine/view/matcher~Matcher Matcher} instance describing rules upon which
+     * content attributes should be allowed.
+     */
+    _allowedAttributes;
+    /**
+     * {@link module:engine/view/matcher~Matcher Matcher} instance describing rules upon which
+     * content attributes should be disallowed.
+     */
+    _disallowedAttributes;
+    /**
+     * Allowed element definitions by {@link module:html-support/datafilter~DataFilter#allowElement} method.
+    */
+    _allowedElements;
+    /**
+     * Disallowed element names by {@link module:html-support/datafilter~DataFilter#disallowElement} method.
+     */
+    _disallowedElements;
+    /**
+     * Indicates if {@link module:engine/controller/datacontroller~DataController editor's data controller}
+     * data has been already initialized.
+    */
+    _dataInitialized;
+    /**
+     * Cached map of coupled attributes. Keys are the feature attributes names
+     * and values are arrays with coupled GHS attributes names.
+     */
+    _coupledAttributes;
     constructor(editor) {
         super(editor);
         this._dataSchema = editor.plugins.get('DataSchema');

package/src/dataschema.js

@@ -8,7 +8,7 @@
 import { Plugin } from 'ckeditor5/src/core.js';
 import { toArray } from 'ckeditor5/src/utils.js';
 import defaultConfig from './schemadefinitions.js';
-import { mergeWith } from 'lodash-es';
+import { mergeWith } from 'es-toolkit/compat';
 /**
  * Holds representation of the extended HTML document type definitions to be used by the
  * editor in HTML support.
@@ -42,13 +42,10 @@ import { mergeWith } from 'lodash-es';
  * ```
  */
 export default class DataSchema extends Plugin {
-    constructor() {
-        super(...arguments);
-        /**
-         * A map of registered data schema definitions.
-         */
-        this._definitions = [];
-    }
+    /**
+     * A map of registered data schema definitions.
+     */
+    _definitions = [];
     /**
      * @inheritDoc
      */

package/src/fullpage.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module html-support/fullpage
  */
-import { Plugin } from 'ckeditor5/src/core.js';
+import { Plugin, type Editor } from 'ckeditor5/src/core.js';
 /**
  * The full page editing feature. It preserves the whole HTML page in the editor data.
  */
@@ -18,8 +18,31 @@ export default class FullPage extends Plugin {
      * @inheritDoc
      */
     static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    constructor(editor: Editor);
     /**
      * @inheritDoc
      */
     init(): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+    /**
+     * Checks if in the document exists any `<style>` elements injected by the plugin and removes them,
+     * so these could be re-rendered later.
+     * There is used `data-full-page-style-id` attribute to recognize styles injected by the feature.
+     */
+    private _removeStyleElementsFromDom;
+    /**
+     * Extracts `<style>` elements from the full page data and renders them in the main document `<head>`.
+     * CSS content is sanitized before rendering.
+     */
+    private _renderStyleElementsInDom;
+    /**
+     * Removes existing `<style>` elements injected by the plugin and renders new ones from the full page data.
+     */
+    private _renderStylesFromHead;
 }

package/src/fullpage.js

@@ -6,6 +6,7 @@
  * @module html-support/fullpage
  */
 import { Plugin } from 'ckeditor5/src/core.js';
+import { logWarning, global } from 'ckeditor5/src/utils.js';
 import { UpcastWriter } from 'ckeditor5/src/engine.js';
 import HtmlPageDataProcessor from './htmlpagedataprocessor.js';
 /**
@@ -24,13 +25,38 @@ export default class FullPage extends Plugin {
     static get isOfficialPlugin() {
         return true;
     }
+    /**
+     * @inheritDoc
+     */
+    constructor(editor) {
+        super(editor);
+        editor.config.define('htmlSupport.fullPage', {
+            allowRenderStylesFromHead: false,
+            sanitizeCss: rawCss => {
+                /**
+                 * When using the Full page with the `config.htmlSupport.fullPage.allowRenderStylesFromHead` set to `true`,
+                 * it is strongly recommended to define a sanitize function that will clean up the CSS
+                 * which is present in the `<head>` in editors content in order to avoid XSS vulnerability.
+                 *
+                 * For a detailed overview, check the {@glink features/html/full-page-html Full page HTML feature} documentation.
+                 *
+                 * @error css-full-page-provide-sanitize-function
+                 */
+                logWarning('css-full-page-provide-sanitize-function');
+                return {
+                    css: rawCss,
+                    hasChanged: false
+                };
+            }
+        });
+        editor.data.processor = new HtmlPageDataProcessor(editor.data.viewDocument);
+    }
     /**
      * @inheritDoc
      */
     init() {
         const editor = this.editor;
-        const properties = ['$fullPageDocument', '$fullPageDocType', '$fullPageXmlDeclaration'];
-        editor.data.processor = new HtmlPageDataProcessor(editor.data.viewDocument);
+        const properties = ['$fullPageDocument', '$fullPageDocType', '$fullPageXmlDeclaration', '$fullPageHeadStyles'];
         editor.model.schema.extend('$root', {
             allowAttributes: properties
         });
@@ -45,6 +71,9 @@ export default class FullPage extends Plugin {
                     }
                 }
             });
+            if (isAllowedRenderStylesFromHead(editor)) {
+                this._renderStylesFromHead(root);
+            }
         }, { priority: 'low' });
         // Apply root attributes to the view document fragment.
         editor.data.on('toView', (evt, [modelElementOrFragment]) => {
@@ -83,4 +112,60 @@ export default class FullPage extends Plugin {
             args[0].trim = false;
         }, { priority: 'high' });
     }
+    /**
+     * @inheritDoc
+     */
+    destroy() {
+        super.destroy();
+        if (isAllowedRenderStylesFromHead(this.editor)) {
+            this._removeStyleElementsFromDom();
+        }
+    }
+    /**
+     * Checks if in the document exists any `<style>` elements injected by the plugin and removes them,
+     * so these could be re-rendered later.
+     * There is used `data-full-page-style-id` attribute to recognize styles injected by the feature.
+     */
+    _removeStyleElementsFromDom() {
+        const existingStyleElements = Array.from(global.document.querySelectorAll(`[data-full-page-style-id="${this.editor.id}"]`));
+        for (const style of existingStyleElements) {
+            style.remove();
+        }
+    }
+    /**
+     * Extracts `<style>` elements from the full page data and renders them in the main document `<head>`.
+     * CSS content is sanitized before rendering.
+     */
+    _renderStyleElementsInDom(root) {
+        const editor = this.editor;
+        // Get `<style>` elements list from the `<head>` from the full page data.
+        const styleElements = root.getAttribute('$fullPageHeadStyles');
+        if (!styleElements) {
+            return;
+        }
+        const sanitizeCss = editor.config.get('htmlSupport.fullPage.sanitizeCss');
+        // Add `data-full-page-style-id` attribute to the `<style>` element and render it in `<head>` in the main document.
+        for (const style of styleElements) {
+            style.setAttribute('data-full-page-style-id', editor.id);
+            // Sanitize the CSS content before rendering it in the editor.
+            const sanitizedCss = sanitizeCss(style.innerText);
+            if (sanitizedCss.hasChanged) {
+                style.innerText = sanitizedCss.css;
+            }
+            global.document.head.append(style);
+        }
+    }
+    /**
+     * Removes existing `<style>` elements injected by the plugin and renders new ones from the full page data.
+     */
+    _renderStylesFromHead(root) {
+        this._removeStyleElementsFromDom();
+        this._renderStyleElementsInDom(root);
+    }
+}
+/**
+ * Normalize the Full page configuration option `allowRenderStylesFromHead`.
+ */
+function isAllowedRenderStylesFromHead(editor) {
+    return editor.config.get('htmlSupport.fullPage.allowRenderStylesFromHead');
 }

package/src/generalhtmlsupportconfig.d.ts

@@ -86,4 +86,90 @@ export interface GeneralHtmlSupportConfig {
      * @default false
      */
     preserveEmptyBlocksInEditingView?: boolean;
+    /**
+     * The configuration of the Full page editing feature.
+     * The option is used by the {@link module:html-support/fullpage~FullPage} feature.
+     *
+     * ```ts
+     * ClassicEditor
+     * 	.create( {
+     * 		htmlSupport: {
+     * 			fullPage: ... // Full page feature config.
+     * 		}
+     * 	} )
+     * 	.then( ... )
+     * 	.catch( ... );
+     * ```
+     */
+    fullPage?: FullPageConfig;
+}
+/**
+ * The configuration of the Full page editing feature.
+ */
+export interface FullPageConfig {
+    /**
+     * Whether the feature should allow the editor to render styles from the `<head>` section of editor data content.
+     *
+     * When set to `true`, the editor will render styles from the `<head>` section of editor data content.
+     *
+     * ```ts
+     * ClassicEditor
+     * 	.create( {
+     * 		htmlSupport: {
+     * 			fullPage: {
+     * 				allowRenderStylesFromHead: true
+     * 			}
+     * 		}
+     * 	} )
+     * 	.then( ... )
+     * 	.catch( ... );
+     * ```
+     *
+     * @default false
+     */
+    allowRenderStylesFromHead?: boolean;
+    /**
+     * Callback used to sanitize the CSS provided by the user in editor content
+     * when option `htmlSupport.fullPage.allowRenderStylesFromHead` is set to `true`.
+     *
+     * We strongly recommend overwriting the default function to avoid XSS vulnerabilities.
+     *
+     * The function receives the CSS (as a string), and should return an object
+     * that matches the {@link module:html-support/generalhtmlsupportconfig~CssSanitizeOutput} interface.
+     *
+     * ```ts
+     * ClassicEditor
+     * 	.create( editorElement, {
+     * 		htmlSupport: {
+     * 			fullPage: {
+     * 				allowRenderStylesFromHead: true,
+     *
+     * 				sanitizeCss( CssString ) {
+     * 					const sanitizedCss = sanitize( CssString );
+     *
+     * 					return {
+     * 						css: sanitizedCss,
+     * 						// true or false depending on whether the sanitizer stripped anything.
+     * 						hasChanged: ...
+     * 					};
+     * 				}
+     * 			}
+     * 		}
+     * 	} )
+     * 	.then( ... )
+     * 	.catch( ... );
+     * ```
+     *
+     */
+    sanitizeCss?: (css: string) => CssSanitizeOutput;
+}
+export interface CssSanitizeOutput {
+    /**
+     * An output (safe) CSS that will be inserted into the document.
+     */
+    css: string;
+    /**
+     * A flag that indicates whether the output CSS is different than the input value.
+     */
+    hasChanged: boolean;
 }

package/src/htmlpagedataprocessor.js

@@ -37,6 +37,9 @@ export default class HtmlPageDataProcessor extends HtmlDataProcessor {
         const writer = new UpcastWriter(viewFragment.document);
         // Using the DOM document with body content extracted as a skeleton of the page.
         writer.setCustomProperty('$fullPageDocument', domFragment.ownerDocument.documentElement.outerHTML, viewFragment);
+        // List of `<style>` elements extracted from document's `<head>` element.
+        const headStylesElements = Array.from(domFragment.ownerDocument.querySelectorAll('head style'));
+        writer.setCustomProperty('$fullPageHeadStyles', headStylesElements, viewFragment);
         if (docType) {
             writer.setCustomProperty('$fullPageDocType', docType, viewFragment);
         }

package/src/index.d.ts

@@ -6,7 +6,7 @@
  * @module html-support
  */
 export { default as GeneralHtmlSupport } from './generalhtmlsupport.js';
-export { default as DataFilter } from './datafilter.js';
+export { default as DataFilter, type DataFilterRegisterEvent } from './datafilter.js';
 export { default as DataSchema, type DataSchemaBlockElementDefinition } from './dataschema.js';
 export { default as HtmlComment } from './htmlcomment.js';
 export { default as FullPage } from './fullpage.js';

package/src/integrations/list.js

@@ -5,7 +5,7 @@
 /**
  * @module html-support/integrations/list
  */
-import { isEqual } from 'lodash-es';
+import { isEqual } from 'es-toolkit/compat';
 import { Plugin } from 'ckeditor5/src/core.js';
 import { getHtmlAttributeName, setViewAttributes } from '../utils.js';
 import DataFilter from '../datafilter.js';

package/src/integrations/table.js

@@ -6,6 +6,14 @@ import { Plugin } from 'ckeditor5/src/core.js';
 import { updateViewAttributes } from '../utils.js';
 import DataFilter from '../datafilter.js';
 import { getDescendantElement } from './integrationutils.js';
+const STYLE_ATTRIBUTES_TO_PROPAGATE = [
+    'width',
+    'max-width',
+    'min-width',
+    'height',
+    'min-height',
+    'max-height'
+];
 /**
  * Provides the General HTML Support integration with {@link module:table/table~Table Table} feature.
  */
@@ -162,8 +170,38 @@ function modelToViewTableAttributeConverter() {
                     return;
                 }
                 conversionApi.consumable.consume(data.item, evt.name);
-                updateViewAttributes(conversionApi.writer, data.attributeOldValue, data.attributeNewValue, viewElement);
+                // Downcast selected styles to a figure element instead of a table element.
+                if (attributeName === 'htmlTableAttributes' && containerElement !== viewElement) {
+                    const oldAttributes = splitAttributesForFigureAndTable(data.attributeOldValue);
+                    const newAttributes = splitAttributesForFigureAndTable(data.attributeNewValue);
+                    updateViewAttributes(conversionApi.writer, oldAttributes.tableAttributes, newAttributes.tableAttributes, viewElement);
+                    updateViewAttributes(conversionApi.writer, oldAttributes.figureAttributes, newAttributes.figureAttributes, containerElement);
+                }
+                else {
+                    updateViewAttributes(conversionApi.writer, data.attributeOldValue, data.attributeNewValue, viewElement);
+                }
             });
         }
     };
 }
+/**
+ * Splits styles based on the `STYLE_ATTRIBUTES_TO_PROPAGATE` pattern that should be moved to the parent element
+ * and those that should remain on element.
+ */
+function splitAttributesForFigureAndTable(data) {
+    const figureAttributes = {};
+    const tableAttributes = { ...data };
+    if (!data || !('styles' in data)) {
+        return { figureAttributes, tableAttributes };
+    }
+    tableAttributes.styles = {};
+    for (const [key, value] of Object.entries(data.styles)) {
+        if (STYLE_ATTRIBUTES_TO_PROPAGATE.includes(key)) {
+            figureAttributes.styles = { ...figureAttributes.styles, [key]: value };
+        }
+        else {
+            tableAttributes.styles = { ...tableAttributes.styles, [key]: value };
+        }
+    }
+    return { figureAttributes, tableAttributes };
+}

package/src/utils.js

@@ -2,7 +2,7 @@
  * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
-import { startCase, cloneDeep } from 'lodash-es';
+import { startCase, cloneDeep } from 'es-toolkit/compat';
 /**
 * Helper function for the downcast converter. Updates attributes on the given view element.
 *