Ability to paste rich text into the editor (and have it auto-convert to an element if no element is selected)

[jauyong]

Feature Description

As an editor I want to be able to paste rich text into the editor.

Feature Brief

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance Criteria

1. When not focused on an input, a new element should be created (with stripped away styling except for bold, etc.) (partly DONE in Basic text paste #1105, needs moving to global level)
2. We should strip away styling with the exception of bold, italic, underline and strikethrough (DONE in Basic text paste #1105)
3. When focused on text inputs, fallback to browser native cut/copy/paste
4. NOTE: strikethrough can come later, as it's not in the editor UI yet
5. See comments for required investigation for character sets

As of Apr 21:

QA Instructions

Please see notes in PR #5112.

[jauyong]

@pbakaus

1. Should paste also include any rich styling (bold, hyperlink, etc...)?
2. What about character sets and special characters? (UTF8MB4)

[pbakaus]

@jauyong great questions:

1. We should strip away styling with the exception of bold, italic, underline and strikethrough ( strikethrough can come later, as it's not in the editor UI yet).

2. Actually not sure – when I copy text from a, say, ASCII encoding and paste it in the browser, does the browser not automatically convert/normalize to UTF-8? Might need some exploration.

[miina]

@jauyong To confirm -- based on the description, the issue seems to be about handling inputs only, if I understand correctly then it's actually the opposite:
When not focused on an input, a new element should be created (with stripped away styling except for bold, etc.), that being the main goal/change of the issue. And when focused on inputs, the native browsers copy/paste should continue working as-is.

Let me know if I misunderstood.

[jauyong]

Hey @miina yea what you said is correct. I added your note as AC1.

[pbakaus]

@samitron7 I think this might warrant some Figma love for the final feature..your flow should describe what happens when I paste rich text from Google Docs, or a block of HTML with an image in it etc.

[miina]

Moving this back to todo since the basic pasting got partly implemented via #1105, however, there are still parts that need implementation, such as:

• Moving pasting to global level (related: Global Copy, Cut, Paste and Duplicate Elements #519)
• Improving pasting based on the results from UX.

[jauyong]

We are pushing this from sprint 27 / 1.0 Beta while we wait for the other text fixes that Morten is working on

[csossi]

Verified in QA

Works as described in PR#5112 with some formatting NOT pasted

[samitron7]

Is there a reason why the rich text is pasted in centered aligned and not left justified for the pure canvas case? All our text presets are left aligned. @barklund FYI

[o-fernandez]

@barklund looks good, but @samitron7 has a question that would be worth addressing. I also noticed that it's all center aligned on paste, unless I first add a text element and then paste while in edit mode.

Original in docs

Pasted in canvas - first by just cmd+V on canvas, second by adding a paragraph text element and cmd+v while in text edit mode.

[o-fernandez]

Checked in UAT, still pastes as center aligned even if original content is not. Is this expected? @barklund @samitron7

[swissspidy]

Sounds unexpected to me. Would need a new ticket to resolve.

[o-fernandez]

@bmattb @barklund mind following up and ensuring there's a ticket/something to address this?

[barklund]

@o-fernandez , @samitron7: The default text set added by pressing the quick "+" next to the T in the library tab adds a new text field with center alignment. This same preset is used for pasted text so the alignment (and font size, family, etc) is taken from there.

[ivayloklissarov]

Tested and rich text works fine now. Closing the ticket. @tmagalhaes-huge