Ports: How to I set the text content of a span tag using a selector?

[cam-m]

Introduction

I'm using a foreignObject in markup for a port, but I can't work out how to set the text content of a span?

markup: [
        {
            tagName: 'rect',
            selector: 'portBody'
        }, {
            tagName: 'foreignObject',
            selector: 'foreignObject',
            children: [
                {
                    tagName: 'div',
                    style: { height: '100%' },
                    namespaceURI: 'http://www.w3.org/1999/xhtml',
                    children: [
                        {
                            tagName: 'p',
                            style: { display: 'flex' },
                            selector: 'propertyBlock',
                            children: [
                                {
                                    tagName: 'span',
                                    style: { flex: '1 1 auto' },
                                    selector: 'propertyName',
                                    text: ''
                                },
                                ' : ',
                                {
                                    tagName: 'span',
                                    style: { flex: '1 1 auto' },
                                    selector: 'propertyType',
                                    text: ''
                                }
                            ]
                        },

                    ]
                }
            ]
        }

What I want is html like this:

<span>MyPropertyName</span>:<span>MyPropertyType</span>

Using text results in the svg tspan being inserted inside the span:

<span><tspan>MyPropertyName</tspan></span>:<span><tspan>MyPropertyType</tspan></span>

Using textContent adds the attribute 'text-content' to the span tag

<span text-content="MyPropertyName"></span>:<span text-content="MyPropertyType"></span>

The js for adding the port is like this:

// variables for property and type are assumed available 
this.addPort(
            {
                group: LIST_GROUP_NAME,
                attrs: {
                    propertyName: {textContent: 'MyPropertyName'},
                    propertyType: {text: 'MyPropertyType'},
                }
            }
        );

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS

[kumilingus]

You can use html attribute to insert any HTML e.g a text.

this.addPort(
    {
        group: LIST_GROUP_NAME,
        attrs: {
            propertyName: { html: 'MyPropertyName'},
            propertyType: { html: 'MyPropertyType'},
        }
    }
);

I am sorry, it's currently not mentioned in the docs. We will update.

---

Edit: The html attribute is now documented: https://docs.jointjs.com/api/dia/attributes/#html

[cam-m]

Great thanks @kumilingus