Pasted Empty Lines Are Duplicated

Describe the Bug

Pasting an empty line when editing a label results in two empty lines upon rendering. Even though direct editing and the properties panel use the same fix empty lines are duplicated upon rendering a label.

Steps to Reproduce

1. Copy this text

Foo

Bar
Baz

1. Paste it into the direct editing box when editing a label
2. Complete direct editing
3. Rendered text is now

Foo


Bar
Baz

Expected Behavior

Empty lines are neither lost nor duplicated.

Environment

• OS: Windows 10
• Camunda Modeler Version: 4.9.0-rc.4

[Skaiir]

Have done some investigations, and have fully RCA’d this:

• Copy paste isn’t the culprit
• The problem lies within the chromium implementation of https://github.com/bpmn-io/diagram-js-direct-editing/blob/78fe92019daad3ca27f97f187dc5ceb0abcdaccc/lib/TextBox.js#L218
  • This is an educated guess, because I have not found an issue reference for this, and neither have I gone into the chromium source code 🤡, if that’s even accessible
  • The issue is not present on Firefox is the major tell here, but it is present on the Desktop modeler and on Chrome itself
  • The issue presents itself immediately after the execution of the presented line of code
• What is happening here is that under certain circumstances, namely copying newlines and pasting them on top of other newlines via (not all scenarios but most), in chrome, <divs> are created:

• When we then go on to take the innerText from the here, (https://github.com/bpmn-io/diagram-js-direct-editing/blob/78fe92019daad3ca27f97f187dc5ceb0abcdaccc/lib/TextBox.js#L429), the <divs> are treated as their own newlines, which leads to the duplication we see.

Solution proposal:

We could simply sanitize the divs out, if we ever want to include rich text in the labels, this might come back to bite us but from my research combining richText with document.execCommand('insertText' is not advisable anyways and is very buggy.

ExecCommand as it stands is deprecated, but there is no good alternative to this. The clipboard API does not have a replacement function for insertText.

We could also have our own implementation for chromium based browsers, like we do with IE, but that would be a much larger time investment.

@nikku @philippfromme Opinions?

[philippfromme]

It’s the same in Camunda Modeler 4.8.1

Okay, so this issue is not related to https://github.com/camunda/camunda-modeler/issues/2280. Thanks, @barmac, with v4.8.1 on Windows I wasn’t able to test this as empty lines were lost on paste.