@ckeditor/ckeditor5-html-support 44.2.1 → 44.3.0-alpha.1

package/dist/index.js

@@ -433,6 +433,10 @@ var defaultConfig = {
             model: 'imageInline',
             view: 'img'
         },
+        {
+            model: 'horizontalLine',
+            view: 'hr'
+        },
         // Compatibility features.
         {
             model: 'htmlP',
@@ -856,6 +860,14 @@ var defaultConfig = {
                 inheritAllFrom: '$container',
                 isBlock: false
             }
+        },
+        {
+            model: 'htmlHr',
+            view: 'hr',
+            isEmpty: true,
+            modelSchema: {
+                inheritAllFrom: '$blockObject'
+            }
         }
     ],
     inline: [
@@ -2021,6 +2033,11 @@ var defaultConfig = {
         const conversion = editor.conversion;
         const { view: viewName, model: modelName } = definition;
         if (!schema.isRegistered(definition.model)) {
+            // Do not register converters and empty schema for editor existing feature
+            // as empty schema won't allow element anywhere in the model.
+            if (!definition.modelSchema) {
+                return;
+            }
             schema.register(definition.model, definition.modelSchema);
             if (!viewName) {
                 return;
@@ -2035,7 +2052,7 @@ var defaultConfig = {
             });
             conversion.for('downcast').elementToElement({
                 model: modelName,
-                view: viewName
+                view: (modelElement, { writer })=>definition.isEmpty ? writer.createEmptyElement(viewName) : writer.createContainerElement(viewName)
             });
         }
         if (!viewName) {
@@ -2112,49 +2129,50 @@ var defaultConfig = {
     const matches = matcher.matchAll(viewElement) || [];
     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){
+        for (const [key, token] of match.attributes || []){
+            // Verify and consume styles.
+            if (key == 'style') {
+                const style = token;
+                // 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: [
-                        relatedStyle
+                        style
                     ]
                 })) {
-                    result.styles.push(relatedStyle);
+                    result.styles.push(style);
+                }
+            } else if (key == 'class') {
+                const className = token;
+                if (consumable.consume(viewElement, {
+                    classes: [
+                        className
+                    ]
+                })) {
+                    result.classes.push(className);
+                }
+            } else {
+                // Verify and consume other attributes.
+                if (consumable.consume(viewElement, {
+                    attributes: [
+                        key
+                    ]
+                })) {
+                    result.attributes.push(key);
                 }
-            }
-            // Verify and consume style as specified in the matcher.
-            if (consumable.consume(viewElement, {
-                styles: [
-                    style
-                ]
-            })) {
-                result.styles.push(style);
-            }
-        }
-        // 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;
@@ -3310,6 +3328,75 @@ function modelToViewMediaAttributeConverter(mediaElementName) {
     return listType === 'numbered' || listType == 'customNumbered' ? 'htmlOlAttributes' : 'htmlUlAttributes';
 }
 
+/**
+ * Provides the General HTML Support integration with the {@link module:horizontal-line/horizontalline~HorizontalLine} feature.
+ */ class HorizontalLineElementSupport extends Plugin {
+    /**
+	 * @inheritDoc
+	 */ static get requires() {
+        return [
+            DataFilter
+        ];
+    }
+    /**
+	 * @inheritDoc
+	 */ static get pluginName() {
+        return 'HorizontalLineElementSupport';
+    }
+    /**
+	 * @inheritDoc
+	 */ static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+	 * @inheritDoc
+	 */ init() {
+        const editor = this.editor;
+        if (!editor.plugins.has('HorizontalLineEditing')) {
+            return;
+        }
+        const schema = editor.model.schema;
+        const conversion = editor.conversion;
+        const dataFilter = editor.plugins.get(DataFilter);
+        dataFilter.on('register:hr', (evt, definition)=>{
+            if (definition.model !== 'horizontalLine') {
+                return;
+            }
+            schema.extend('horizontalLine', {
+                allowAttributes: [
+                    'htmlHrAttributes'
+                ]
+            });
+            conversion.for('upcast').add(viewToModelBlockAttributeConverter(definition, dataFilter));
+            conversion.for('downcast').add(modelToViewHorizontalLineAttributeConverter());
+            evt.stop();
+        });
+    }
+}
+/**
+ * A model-to-view conversion helper applying attributes from the
+ * {@link module:horizontal-line/horizontalline~HorizontalLine HorizontalLine} feature.
+ *
+ * @returns Returns a conversion callback.
+ */ function modelToViewHorizontalLineAttributeConverter() {
+    return (dispatcher)=>{
+        dispatcher.on('attribute:htmlHrAttributes:horizontalLine', (evt, data, conversionApi)=>{
+            if (!conversionApi.consumable.test(data.item, evt.name)) {
+                return;
+            }
+            const { attributeOldValue, attributeNewValue } = data;
+            const containerElement = conversionApi.mapper.toViewElement(data.item);
+            const viewElement = getDescendantElement(conversionApi.writer, containerElement, 'hr');
+            if (viewElement) {
+                updateViewAttributes(conversionApi.writer, attributeOldValue, attributeNewValue, viewElement);
+                conversionApi.consumable.consume(data.item, evt.name);
+            }
+        }, {
+            priority: 'low'
+        });
+    };
+}
+
 /**
  * Provides the General HTML Support for custom elements (not registered in the {@link module:html-support/dataschema~DataSchema}).
  */ class CustomElementSupport extends Plugin {
@@ -3501,6 +3588,7 @@ function modelToViewMediaAttributeConverter(mediaElementName) {
             TableElementSupport,
             StyleElementSupport,
             ListElementSupport,
+            HorizontalLineElementSupport,
             CustomElementSupport
         ];
     }
@@ -4036,5 +4124,154 @@ function modelToViewMediaAttributeConverter(mediaElementName) {
     }
 }
 
-export { DataFilter, DataSchema, FullPage, GeneralHtmlSupport, HtmlComment, HtmlPageDataProcessor };
+const EMPTY_BLOCK_MODEL_ATTRIBUTE = 'htmlEmptyBlock';
+/**
+ * This is experimental plugin that allows for preserving empty block elements
+ * in the editor content instead of automatically filling them with block fillers (` `).
+ *
+ * This is useful when you want to:
+ *
+ * * Preserve empty block elements exactly as they were in the source HTML.
+ * * Allow for styling empty blocks with CSS (block fillers can interfere with height/margin).
+ * * Maintain compatibility with external systems that expect empty blocks to remain empty.
+ *
+ * Known limitations:
+ *
+ * * Empty blocks may not work correctly with revision history features.
+ * * Keyboard navigation through the document might behave unexpectedly, especially when
+ *   navigating through structures like lists and tables.
+ *
+ * For example, this allows for HTML like:
+ *
+ * ```html
+ * <p></p>
+ * <p class="spacer"></p>
+ * <td></td>
+ * ```
+ * to remain empty instead of being converted to:
+ *
+ * ```html
+ * <p>&nbsp;</p>
+ * <p class="spacer">&nbsp;</p>
+ * <td>&nbsp;</td>
+ * ```
+ *
+ * **Warning**: This is an experimental plugin. It may have bugs and breaking changes may be introduced without prior notice.
+ */ class EmptyBlock extends Plugin {
+    /**
+	 * @inheritDoc
+	 */ static get pluginName() {
+        return 'EmptyBlock';
+    }
+    /**
+	 * @inheritDoc
+	 */ static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+	 * @inheritDoc
+	 */ afterInit() {
+        const { model, conversion, plugins, config } = this.editor;
+        const schema = model.schema;
+        const preserveEmptyBlocksInEditingView = config.get('htmlSupport.preserveEmptyBlocksInEditingView');
+        schema.extend('$block', {
+            allowAttributes: [
+                EMPTY_BLOCK_MODEL_ATTRIBUTE
+            ]
+        });
+        schema.extend('$container', {
+            allowAttributes: [
+                EMPTY_BLOCK_MODEL_ATTRIBUTE
+            ]
+        });
+        if (schema.isRegistered('tableCell')) {
+            schema.extend('tableCell', {
+                allowAttributes: [
+                    EMPTY_BLOCK_MODEL_ATTRIBUTE
+                ]
+            });
+        }
+        if (preserveEmptyBlocksInEditingView) {
+            conversion.for('downcast').add(createEmptyBlockDowncastConverter());
+        } else {
+            conversion.for('dataDowncast').add(createEmptyBlockDowncastConverter());
+        }
+        conversion.for('upcast').add(createEmptyBlockUpcastConverter(schema));
+        if (plugins.has('ClipboardPipeline')) {
+            this._registerClipboardPastingHandler();
+        }
+    }
+    /**
+	 * Handle clipboard paste events:
+	 *
+	 * * It does not affect *copying* content from the editor, only *pasting*.
+	 * * When content is pasted from another editor instance with `<p></p>`,
+	 *   the `&nbsp;` filler is added, so the getData result is `<p>&nbsp;</p>`.
+	 * * When content is pasted from the same editor instance with `<p></p>`,
+	 *   the `&nbsp;` filler is not added, so the getData result is `<p></p>`.
+	 */ _registerClipboardPastingHandler() {
+        const clipboardPipeline = this.editor.plugins.get('ClipboardPipeline');
+        this.listenTo(clipboardPipeline, 'contentInsertion', (evt, data)=>{
+            if (data.sourceEditorId === this.editor.id) {
+                return;
+            }
+            this.editor.model.change((writer)=>{
+                for (const { item } of writer.createRangeIn(data.content)){
+                    if (item.is('element') && item.hasAttribute(EMPTY_BLOCK_MODEL_ATTRIBUTE)) {
+                        writer.removeAttribute(EMPTY_BLOCK_MODEL_ATTRIBUTE, item);
+                    }
+                }
+            });
+        });
+    }
+}
+/**
+ * Creates a downcast converter for handling empty blocks.
+ * This converter prevents filler elements from being added to elements marked as empty blocks.
+ */ function createEmptyBlockDowncastConverter() {
+    return (dispatcher)=>{
+        dispatcher.on(`attribute:${EMPTY_BLOCK_MODEL_ATTRIBUTE}`, (evt, data, conversionApi)=>{
+            const { mapper, consumable } = conversionApi;
+            const { item } = data;
+            if (!consumable.consume(item, evt.name)) {
+                return;
+            }
+            const viewElement = mapper.toViewElement(item);
+            if (viewElement && data.attributeNewValue) {
+                viewElement.getFillerOffset = ()=>null;
+            }
+        });
+    };
+}
+/**
+ * Creates an upcast converter for handling empty blocks.
+ * The converter detects empty elements and marks them with the empty block attribute.
+ */ function createEmptyBlockUpcastConverter(schema) {
+    return (dispatcher)=>{
+        dispatcher.on('element', (evt, data, conversionApi)=>{
+            const { viewItem, modelRange } = data;
+            if (!viewItem.is('element') || !viewItem.isEmpty || viewItem.getCustomProperty('$hasBlockFiller')) {
+                return;
+            }
+            // Handle element itself.
+            const modelElement = modelRange && modelRange.start.nodeAfter;
+            if (!modelElement || !schema.checkAttribute(modelElement, EMPTY_BLOCK_MODEL_ATTRIBUTE)) {
+                return;
+            }
+            conversionApi.writer.setAttribute(EMPTY_BLOCK_MODEL_ATTRIBUTE, true, modelElement);
+            // Handle an auto-paragraphed bogus paragraph inside empty element.
+            if (modelElement.childCount != 1) {
+                return;
+            }
+            const firstModelChild = modelElement.getChild(0);
+            if (firstModelChild.is('element', 'paragraph') && schema.checkAttribute(firstModelChild, EMPTY_BLOCK_MODEL_ATTRIBUTE)) {
+                conversionApi.writer.setAttribute(EMPTY_BLOCK_MODEL_ATTRIBUTE, true, firstModelChild);
+            }
+        }, {
+            priority: 'lowest'
+        });
+    };
+}
+
+export { DataFilter, DataSchema, EmptyBlock, FullPage, GeneralHtmlSupport, HtmlComment, HtmlPageDataProcessor };
 //# sourceMappingURL=index.js.map