When creating dom elements the xml namespace should be respected

[Sebobo]

Is this a bug report or feature request? (choose one)

🐞 Bug report

💻 Version of CKEditor

CKEditor Engine 13.1.1

📋 Steps to reproduce

1. Similar to the placeholder example do the following:

        function createIconView(modelItem, viewWriter) {
            const icon = modelItem.getAttribute('icon');

            const svgTag = viewWriter.createContainerElement('svg', {
                'class': 'icon icon--medium',
                'viewbox': '0 0 100 100',
                'xmlns': 'http://www.w3.org/2000/svg',
            });
            const useTag = viewWriter.createEmptyElement('use', {
                'href': '#' + icon,
                'xmlns': 'http://www.w3.org/2000/svg',
            });

            viewWriter.insert(viewWriter.createPositionAt(svgTag, 0), useTag);

            return svgTag;
        }

✅ Expected result

The icon should be rendered and the SVG and USE tags should be valid SVG nodes instead of simple document nodes.

❎ Actual result

The icon is not shown and the SVG and USE nodes are normal DOM elements not SVGSVGElement when inspecting the nodes.

📃 Other details that might be useful

The issue is because in domconverter.js and createelement.js only createElement is used and no check is there that looks for an xmlns attribute and then uses createElementNS instead.

I can create a PR for this. It worked well when I modified the two mentioned classes. I'm not sure if there are other places I have to check.

[Reinmar]

Thanks! Interesting use case.

Am I right that it seems something pretty simple to implement? Did you try patching those classes already? Curious if it'll be enough.

[Sebobo]

Yes it worked for me. Basically it's this:

createelement.js

export default function createElement( doc, name, attributes = {}, children = [] ) {
    const namespace = attributes.xmlns;
    const element = namespace ? doc.createElementNS(namespace, name ) : doc.createElement( name );

and the domconverter.js viewToDom method:

// Create DOM element.
const namespace = viewNode.getAttribute( 'xmlns' );
domElement = namespace ? domDocument.createElementNS(namespace, viewNode.name ) : domDocument.createElement( viewNode.name );

[Sebobo]

Creating a PR might take a while for me as I don't have the contributions cla yet :/

[Reinmar]

I think that ckeditor/ckeditor5-utils#307 and ckeditor/ckeditor5-engine#1798 are enough to close this ticket. If support for xmlns will be needed in other places too, let's open new tickets for those.

Thanks @Sebobo!