@ckeditor/ckeditor5-html-support 47.6.1 → 48.0.0-alpha.1

package/src/generalhtmlsupport.js

@@ -1,257 +0,0 @@
-/**
- * @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 html-support/generalhtmlsupport
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { toArray } from 'ckeditor5/src/utils.js';
-import { DataFilter } from './datafilter.js';
-import { CodeBlockElementSupport } from './integrations/codeblock.js';
-import { DualContentModelElementSupport } from './integrations/dualcontent.js';
-import { HeadingElementSupport } from './integrations/heading.js';
-import { ImageElementSupport } from './integrations/image.js';
-import { MediaEmbedElementSupport } from './integrations/mediaembed.js';
-import { ScriptElementSupport } from './integrations/script.js';
-import { TableElementSupport } from './integrations/table.js';
-import { StyleElementSupport } from './integrations/style.js';
-import { ListElementSupport } from './integrations/list.js';
-import { HorizontalLineElementSupport } from './integrations/horizontalline.js';
-import { IframeElementSupport } from './integrations/iframe.js';
-import { CustomElementSupport } from './integrations/customelement.js';
-import { getHtmlAttributeName, modifyGhsAttribute, removeFormatting } from './utils.js';
-/**
- * The General HTML Support feature.
- *
- * This is a "glue" plugin which initializes the {@link module:html-support/datafilter~DataFilter data filter} configuration
- * and features integration with the General HTML Support.
- */
-export class GeneralHtmlSupport extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'GeneralHtmlSupport';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [
-            DataFilter,
-            CodeBlockElementSupport,
-            DualContentModelElementSupport,
-            HeadingElementSupport,
-            ImageElementSupport,
-            MediaEmbedElementSupport,
-            ScriptElementSupport,
-            TableElementSupport,
-            StyleElementSupport,
-            ListElementSupport,
-            HorizontalLineElementSupport,
-            IframeElementSupport,
-            CustomElementSupport
-        ];
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const editor = this.editor;
-        const dataFilter = editor.plugins.get(DataFilter);
-        // Load the allowed empty inline elements' configuration.
-        // Note that this modifies DataSchema so must be loaded before registering filtering rules.
-        dataFilter.loadAllowedEmptyElementsConfig(editor.config.get('htmlSupport.allowEmpty') || []);
-        // Load the filtering configuration.
-        dataFilter.loadAllowedConfig(editor.config.get('htmlSupport.allow') || []);
-        dataFilter.loadDisallowedConfig(editor.config.get('htmlSupport.disallow') || []);
-    }
-    /**
-     * @inheritDoc
-     */
-    afterInit() {
-        const removeFormatCommand = this.editor.commands.get('removeFormat');
-        removeFormatCommand?.registerCustomAttribute(attributeName => attributeName.startsWith('html') && attributeName.endsWith('Attributes'), removeFormatting);
-    }
-    /**
-     * 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));
-        const inlineDefinition = definitions.find(definition => (definition.isInline && !definitions[0].isObject));
-        if (inlineDefinition) {
-            return inlineDefinition.model;
-        }
-        return getHtmlAttributeName(viewElementName);
-    }
-    /**
-     * Updates GHS model attribute for a specified view element name, so it includes the given class name.
-     *
-     * @internal
-     * @param viewElementName A view element name.
-     * @param className The css class to add.
-     * @param selectable The selection or element to update.
-     */
-    addModelHtmlClass(viewElementName, className, selectable) {
-        const model = this.editor.model;
-        const ghsAttributeName = this.getGhsAttributeNameForElement(viewElementName);
-        model.change(writer => {
-            for (const item of getItemsToUpdateGhsAttribute(model, selectable, ghsAttributeName)) {
-                modifyGhsAttribute(writer, item, ghsAttributeName, 'classes', classes => {
-                    for (const value of toArray(className)) {
-                        classes.add(value);
-                    }
-                });
-            }
-        });
-    }
-    /**
-     * Updates GHS model attribute for a specified view element name, so it does not include the given class name.
-     *
-     * @internal
-     * @param viewElementName A view element name.
-     * @param className The css class to remove.
-     * @param selectable The selection or element to update.
-     */
-    removeModelHtmlClass(viewElementName, className, selectable) {
-        const model = this.editor.model;
-        const ghsAttributeName = this.getGhsAttributeNameForElement(viewElementName);
-        model.change(writer => {
-            for (const item of getItemsToUpdateGhsAttribute(model, selectable, ghsAttributeName)) {
-                modifyGhsAttribute(writer, item, ghsAttributeName, 'classes', classes => {
-                    for (const value of toArray(className)) {
-                        classes.delete(value);
-                    }
-                });
-            }
-        });
-    }
-    /**
-     * Updates GHS model attribute for a specified view element name, so it includes the given attribute.
-     *
-     * @param viewElementName A view element name.
-     * @param attributes The object with attributes to set.
-     * @param selectable The selection or element to update.
-     */
-    setModelHtmlAttributes(viewElementName, attributes, selectable) {
-        const model = this.editor.model;
-        const ghsAttributeName = this.getGhsAttributeNameForElement(viewElementName);
-        model.change(writer => {
-            for (const item of getItemsToUpdateGhsAttribute(model, selectable, ghsAttributeName)) {
-                modifyGhsAttribute(writer, item, ghsAttributeName, 'attributes', attributesMap => {
-                    for (const [key, value] of Object.entries(attributes)) {
-                        attributesMap.set(key, value);
-                    }
-                });
-            }
-        });
-    }
-    /**
-     * Updates GHS model attribute for a specified view element name, so it does not include the given attribute.
-     *
-     * @param viewElementName A view element name.
-     * @param attributeName The attribute name (or names) to remove.
-     * @param selectable The selection or element to update.
-     */
-    removeModelHtmlAttributes(viewElementName, attributeName, selectable) {
-        const model = this.editor.model;
-        const ghsAttributeName = this.getGhsAttributeNameForElement(viewElementName);
-        model.change(writer => {
-            for (const item of getItemsToUpdateGhsAttribute(model, selectable, ghsAttributeName)) {
-                modifyGhsAttribute(writer, item, ghsAttributeName, 'attributes', attributesMap => {
-                    for (const key of toArray(attributeName)) {
-                        attributesMap.delete(key);
-                    }
-                });
-            }
-        });
-    }
-    /**
-     * Updates GHS model attribute for a specified view element name, so it includes a given style.
-     *
-     * @param viewElementName A view element name.
-     * @param styles The object with styles to set.
-     * @param selectable The selection or element to update.
-     */
-    setModelHtmlStyles(viewElementName, styles, selectable) {
-        const model = this.editor.model;
-        const ghsAttributeName = this.getGhsAttributeNameForElement(viewElementName);
-        model.change(writer => {
-            for (const item of getItemsToUpdateGhsAttribute(model, selectable, ghsAttributeName)) {
-                modifyGhsAttribute(writer, item, ghsAttributeName, 'styles', stylesMap => {
-                    for (const [key, value] of Object.entries(styles)) {
-                        stylesMap.set(key, value);
-                    }
-                });
-            }
-        });
-    }
-    /**
-     * Updates GHS model attribute for a specified view element name, so it does not include a given style.
-     *
-     * @param viewElementName A view element name.
-     * @param properties The style (or styles list) to remove.
-     * @param selectable The selection or element to update.
-     */
-    removeModelHtmlStyles(viewElementName, properties, selectable) {
-        const model = this.editor.model;
-        const ghsAttributeName = this.getGhsAttributeNameForElement(viewElementName);
-        model.change(writer => {
-            for (const item of getItemsToUpdateGhsAttribute(model, selectable, ghsAttributeName)) {
-                modifyGhsAttribute(writer, item, ghsAttributeName, 'styles', stylesMap => {
-                    for (const key of toArray(properties)) {
-                        stylesMap.delete(key);
-                    }
-                });
-            }
-        });
-    }
-}
-/**
- * Returns an iterator over an items in the selectable that accept given GHS attribute.
- */
-function* getItemsToUpdateGhsAttribute(model, selectable, ghsAttributeName) {
-    if (!selectable) {
-        return;
-    }
-    if (!(Symbol.iterator in selectable) && selectable.is('documentSelection') && selectable.isCollapsed) {
-        if (model.schema.checkAttributeInSelection(selectable, ghsAttributeName)) {
-            yield selectable;
-        }
-    }
-    else {
-        for (const range of getValidRangesForSelectable(model, selectable, ghsAttributeName)) {
-            yield* range.getItems({ shallow: true });
-        }
-    }
-}
-/**
- * Translates a given selectable to an iterable of ranges.
- */
-function getValidRangesForSelectable(model, selectable, ghsAttributeName) {
-    if (!(Symbol.iterator in selectable) &&
-        (selectable.is('node') ||
-            selectable.is('$text') ||
-            selectable.is('$textProxy'))) {
-        if (model.schema.checkAttribute(selectable, ghsAttributeName)) {
-            return [model.createRangeOn(selectable)];
-        }
-        else {
-            return [];
-        }
-    }
-    else {
-        return model.schema.getValidRanges(model.createSelection(selectable).getRanges(), ghsAttributeName);
-    }
-}

package/src/generalhtmlsupportconfig.js

@@ -1,5 +0,0 @@
-/**
- * @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
- */
-export {};

package/src/htmlcomment.js

@@ -1,225 +0,0 @@
-/**
- * @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
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { uid } from 'ckeditor5/src/utils.js';
-/**
- * The HTML comment feature. It preserves the HTML comments (`<!-- -->`) in the editor data.
- *
- * For a detailed overview, check the {@glink features/html/html-comments HTML comment feature documentation}.
- */
-export class HtmlComment extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'HtmlComment';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const editor = this.editor;
-        const loadedCommentsContent = new Map();
-        editor.data.processor.skipComments = false;
-        // Allow storing comment's content as the $root attribute with the name `$comment:<unique id>`.
-        editor.model.schema.addAttributeCheck((context, attributeName) => {
-            if (context.endsWith('$root') && attributeName.startsWith('$comment')) {
-                return true;
-            }
-        });
-        // Convert the `$comment` view element to `$comment:<unique id>` marker and store its content (the comment itself) as a $root
-        // attribute. The comment content is needed in the `dataDowncast` pipeline to re-create the comment node.
-        editor.conversion.for('upcast').elementToMarker({
-            view: '$comment',
-            model: viewElement => {
-                const markerUid = uid();
-                const markerName = `$comment:${markerUid}`;
-                const commentContent = viewElement.getCustomProperty('$rawContent');
-                loadedCommentsContent.set(markerName, commentContent);
-                return markerName;
-            }
-        });
-        // Convert the `$comment` marker to `$comment` UI element with `$rawContent` custom property containing the comment content.
-        editor.conversion.for('dataDowncast').markerToElement({
-            model: '$comment',
-            view: (modelElement, { writer }) => {
-                let root = undefined;
-                for (const rootName of this.editor.model.document.getRootNames()) {
-                    root = this.editor.model.document.getRoot(rootName);
-                    if (root.hasAttribute(modelElement.markerName)) {
-                        break;
-                    }
-                }
-                const markerName = modelElement.markerName;
-                const commentContent = root.getAttribute(markerName);
-                const comment = writer.createUIElement('$comment');
-                writer.setCustomProperty('$rawContent', commentContent, comment);
-                return comment;
-            }
-        });
-        // Remove comments' markers and their corresponding $root attributes, which are moved to the graveyard.
-        editor.model.document.registerPostFixer(writer => {
-            let changed = false;
-            const markers = editor.model.document.differ.getChangedMarkers().filter(marker => marker.name.startsWith('$comment:'));
-            for (const marker of markers) {
-                const { oldRange, newRange } = marker.data;
-                if (oldRange && newRange && oldRange.root == newRange.root) {
-                    // The marker was moved in the same root. Don't do anything.
-                    continue;
-                }
-                if (oldRange) {
-                    // The comment marker was moved from one root to another (most probably to the graveyard).
-                    // Remove the related attribute from the previous root.
-                    const oldRoot = oldRange.root;
-                    if (oldRoot.hasAttribute(marker.name)) {
-                        writer.removeAttribute(marker.name, oldRoot);
-                        changed = true;
-                    }
-                }
-                if (newRange) {
-                    const newRoot = newRange.root;
-                    if (newRoot.rootName == '$graveyard') {
-                        // Comment marker was moved to the graveyard -- remove it entirely.
-                        writer.removeMarker(marker.name);
-                        changed = true;
-                    }
-                    else if (!newRoot.hasAttribute(marker.name)) {
-                        // Comment marker was just added or was moved to another root - updated roots attributes.
-                        //
-                        // Added fallback to `''` for the comment content in case if someone incorrectly added just the marker "by hand"
-                        // and forgot to add the root attribute or add them in different change blocks.
-                        //
-                        // It caused an infinite loop in one of the unit tests.
-                        writer.setAttribute(marker.name, loadedCommentsContent.get(marker.name) || '', newRoot);
-                        changed = true;
-                    }
-                }
-            }
-            return changed;
-        });
-        // Delete all comment markers from the document before setting new data.
-        editor.data.on('set', () => {
-            for (const commentMarker of editor.model.markers.getMarkersGroup('$comment')) {
-                this.removeHtmlComment(commentMarker.name);
-            }
-        }, { priority: 'high' });
-        // Delete all comment markers that are within a removed range.
-        // Delete all comment markers at the limit element boundaries if the whole content of the limit element is removed.
-        editor.model.on('deleteContent', (evt, [selection]) => {
-            for (const range of selection.getRanges()) {
-                const limitElement = editor.model.schema.getLimitElement(range);
-                const firstPosition = editor.model.createPositionAt(limitElement, 0);
-                const lastPosition = editor.model.createPositionAt(limitElement, 'end');
-                let affectedCommentIDs;
-                if (firstPosition.isTouching(range.start) && lastPosition.isTouching(range.end)) {
-                    affectedCommentIDs = this.getHtmlCommentsInRange(editor.model.createRange(firstPosition, lastPosition));
-                }
-                else {
-                    affectedCommentIDs = this.getHtmlCommentsInRange(range, { skipBoundaries: true });
-                }
-                for (const commentMarkerID of affectedCommentIDs) {
-                    this.removeHtmlComment(commentMarkerID);
-                }
-            }
-        }, { priority: 'high' });
-    }
-    /**
-     * Creates an HTML comment on the specified position and returns its ID.
-     *
-     * *Note*: If two comments are created at the same position, the second comment will be inserted before the first one.
-     *
-     * @returns Comment ID. This ID can be later used to e.g. remove the comment from the content.
-     */
-    createHtmlComment(position, content) {
-        const id = uid();
-        const editor = this.editor;
-        const model = editor.model;
-        const root = model.document.getRoot(position.root.rootName);
-        const markerName = `$comment:${id}`;
-        return model.change(writer => {
-            const range = writer.createRange(position);
-            writer.addMarker(markerName, {
-                usingOperation: true,
-                affectsData: true,
-                range
-            });
-            writer.setAttribute(markerName, content, root);
-            return markerName;
-        });
-    }
-    /**
-     * Removes an HTML comment with the given comment ID.
-     *
-     * It does nothing and returns `false` if the comment with the given ID does not exist.
-     * Otherwise it removes the comment and returns `true`.
-     *
-     * Note that a comment can be removed also by removing the content around the comment.
-     *
-     * @param commentID The ID of the comment to be removed.
-     * @returns `true` when the comment with the given ID was removed, `false` otherwise.
-     */
-    removeHtmlComment(commentID) {
-        const editor = this.editor;
-        const marker = editor.model.markers.get(commentID);
-        if (!marker) {
-            return false;
-        }
-        editor.model.change(writer => {
-            writer.removeMarker(marker);
-        });
-        return true;
-    }
-    /**
-     * Gets the HTML comment data for the comment with a given ID.
-     *
-     * Returns `null` if the comment does not exist.
-     */
-    getHtmlCommentData(commentID) {
-        const editor = this.editor;
-        const marker = editor.model.markers.get(commentID);
-        if (!marker) {
-            return null;
-        }
-        let content = '';
-        for (const root of this.editor.model.document.getRoots()) {
-            if (root.hasAttribute(commentID)) {
-                content = root.getAttribute(commentID);
-                break;
-            }
-        }
-        return {
-            content,
-            position: marker.getStart()
-        };
-    }
-    /**
-     * Gets all HTML comments in the given range.
-     *
-     * By default, it includes comments at the range boundaries.
-     *
-     * @param range The range to search for HTML comments.
-     * @param options Additional options.
-     * @param options.skipBoundaries When set to `true` the range boundaries will be skipped.
-     * @returns HTML comment IDs
-     */
-    getHtmlCommentsInRange(range, { skipBoundaries = false } = {}) {
-        const includeBoundaries = !skipBoundaries;
-        // Unfortunately, MarkerCollection#getMarkersAtPosition() filters out collapsed markers.
-        return Array.from(this.editor.model.markers.getMarkersGroup('$comment'))
-            .filter(marker => isCommentMarkerInRange(marker, range))
-            .map(marker => marker.name);
-        function isCommentMarkerInRange(commentMarker, range) {
-            const position = commentMarker.getRange().start;
-            return ((position.isAfter(range.start) || (includeBoundaries && position.isEqual(range.start))) &&
-                (position.isBefore(range.end) || (includeBoundaries && position.isEqual(range.end))));
-        }
-    }
-}

package/src/htmlpagedataprocessor.js

@@ -1,70 +0,0 @@
-/**
- * @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 html-support/htmlpagedataprocessor
- */
-import { HtmlDataProcessor, ViewUpcastWriter } from 'ckeditor5/src/engine.js';
-/**
- * The full page HTML data processor class.
- * This data processor implementation uses HTML as input and output data.
- */
-export class HtmlPageDataProcessor extends HtmlDataProcessor {
-    /**
-     * @inheritDoc
-     */
-    toView(data) {
-        // Ignore content that is not a full page source.
-        if (!/<(?:html|body|head|meta)(?:\s[^>]*)?>/i.test(data.trim().slice(0, 10000))) {
-            return super.toView(data);
-        }
-        // Store doctype and xml declaration in a separate properties as they can't be stringified later.
-        let docType = '';
-        let xmlDeclaration = '';
-        data = data.trim().replace(/<\?xml\s[^?]*\?>/i, match => {
-            xmlDeclaration = match;
-            return '';
-        });
-        data = data.trim().replace(/^<!DOCTYPE\s[^>]*?>/i, match => {
-            docType = match;
-            return '';
-        });
-        // Convert input HTML data to DOM DocumentFragment.
-        const domFragment = this._toDom(data);
-        // Convert DOM DocumentFragment to view DocumentFragment.
-        const viewFragment = this.domConverter.domToView(domFragment, { skipComments: this.skipComments });
-        const writer = new ViewUpcastWriter(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);
-        }
-        if (xmlDeclaration) {
-            writer.setCustomProperty('$fullPageXmlDeclaration', xmlDeclaration, viewFragment);
-        }
-        return viewFragment;
-    }
-    /**
-     * @inheritDoc
-     */
-    toData(viewFragment) {
-        let data = super.toData(viewFragment);
-        const page = viewFragment.getCustomProperty('$fullPageDocument');
-        const docType = viewFragment.getCustomProperty('$fullPageDocType');
-        const xmlDeclaration = viewFragment.getCustomProperty('$fullPageXmlDeclaration');
-        if (page) {
-            data = page.replace(/<\/body\s*>/, data + '$&');
-            if (docType) {
-                data = docType + '\n' + data;
-            }
-            if (xmlDeclaration) {
-                data = xmlDeclaration + '\n' + data;
-            }
-        }
-        return data;
-    }
-}

package/src/index.js

@@ -1,31 +0,0 @@
-/**
- * @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 html-support
- */
-export { GeneralHtmlSupport } from './generalhtmlsupport.js';
-export { DataFilter } from './datafilter.js';
-export { DataSchema } from './dataschema.js';
-export { HtmlComment } from './htmlcomment.js';
-export { FullPage } from './fullpage.js';
-export { HtmlPageDataProcessor } from './htmlpagedataprocessor.js';
-export { EmptyBlock } from './emptyblock.js';
-export { CodeBlockElementSupport } from './integrations/codeblock.js';
-export { CustomElementSupport } from './integrations/customelement.js';
-export { ListElementSupport } from './integrations/list.js';
-export { DualContentModelElementSupport } from './integrations/dualcontent.js';
-export { HeadingElementSupport } from './integrations/heading.js';
-export { ImageElementSupport } from './integrations/image.js';
-export { MediaEmbedElementSupport } from './integrations/mediaembed.js';
-export { ScriptElementSupport } from './integrations/script.js';
-export { StyleElementSupport } from './integrations/style.js';
-export { TableElementSupport } from './integrations/table.js';
-export { IframeElementSupport } from './integrations/iframe.js';
-export { HorizontalLineElementSupport } from './integrations/horizontalline.js';
-export { viewToModelObjectConverter as _viewToModelObjectContentHtmlSupportConverter, toObjectWidgetConverter as _toObjectWidgetHtmlSupportConverter, createObjectView as _createObjectHtmlSupportView, viewToAttributeInlineConverter as _viewToAttributeInlineHtmlSupportConverter, emptyInlineModelElementToViewConverter as _emptyInlineModelElementToViewHtmlSupportConverter, attributeToViewInlineConverter as _attributeToInlineHtmlSupportConverter, viewToModelBlockAttributeConverter as _viewToModelBlockAttributeHtmlSupportConverter, modelToViewBlockAttributeConverter as _modelToViewBlockAttributeHtmlSupportConverter } from './converters.js';
-export { getDescendantElement as _getHtmlSupportDescendantElement } from './integrations/integrationutils.js';
-export { defaultConfig as _HTML_SUPPORT_SCHEMA_DEFINITIONS } from './schemadefinitions.js';
-export { updateViewAttributes as _updateHtmlSupportViewAttributes, setViewAttributes as _setHtmlSupportViewAttributes, removeViewAttributes as _removeHtmlSupportViewAttributes, mergeViewElementAttributes as _mergeHtmlSupportViewElementAttributes, modifyGhsAttribute as _modifyHtmlSupportGhsAttribute, toPascalCase as _toHtmlSupportPascalCase, getHtmlAttributeName as _getHtmlSupportAttributeName } from './utils.js';
-import './augmentation.js';