Question about extra empty <tspan> generated when using textWrap

[Willia-Yang]

Introduction

Hello JointJS Team,

I am using JointJS to render elements with the textWrap attribute enabled. Everything works well in terms of automatic line wrapping.

newAttrs[selector] = {
          y: currentY,
          x: SECTION_ITEM_LEFT_PADDING,
          fontSize: 13,
          textAnchor: 'start',
          dominantBaseline: 'middle',
          textWrap: {
            width: bodyWidth - SECTION_ITEM_LEFT_PADDING * 2,
            preserveSpaces: false,
          },
        };

However, I noticed that for some text content, an extra empty with the class v-empty-line is being generated.

<tspan dy="20" x="15" class="v-line v-empty-line" style="fill-opacity: 0; stroke-opacity: 0;">-</tspan>

This extra empty sometimes causes problems when I have multiple section items in a diagram. It affects the layout.

Could you please clarify:
Why does JointJS generate these empty s?
Is there a way to prevent them from being added, especially when textWrap is enabled?
Thank you very much for your help!
Best regards,

Steps to reproduce

No response

Restrictions & Constraints

No response

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

JointJS, JointJS+

[Geliogabalus]

Hello,

We are adding this empty line elements when the text is split in such way that there are empty lines, inluding the case when there is no text visible. It is done to make possible proper layouting of tspan elements when there are multiple lines. Additionally, it allows user to interact with the empty text element (for example, user can click on it to edit it).

There is no option to remove these empty line elements but you can use v-empty-line class to apply style which will hide the element.