fix(rich-text-editor): DP-116205 fix line break related issues #573

braddialpad · 2024-11-26T19:53:09Z

fix(rich-text-editor): DP-116205 fix line break related issues

Obligatory GIF (super important!)

🛠️ Type Of Change

These types will increment the version number on release:

Fix

📖 Jira Ticket

https://dialpad.atlassian.net/browse/DP-116205

📖 Description

Changed to a different method to submit line breaks using shift + enter in rich-text-editor

💡 Context

We've been having various issues with the way enter / new lines are handled within rich-text-editor and have to keep putting in workaround hacks to get it to work how we want. (see jira ticket for latest weird issue). HardBreak extension seems to cause various unwanted issues and after browsing around stack overflow it seems the best solution may be to remove it entirely.

I had to fix this already as part of my hackathon project, so I'm moving the code from my hackathon project to the actual component. Appears to work much more reliably as it is using built in tiptap/prosemirror commands. Could be some unknown regression here so I'm going to check with the product teams before merging to ubervoice, and also do more testing on my own.

📝 Checklist

For all PRs:

I have ensured no private Dialpad links or info are in the code or pull request description (Dialtone is a public repo!).
I have reviewed my changes.
I have added all relevant documentation.
I have considered the performance impact of my change.

For all Vue changes:

I have made my changes in Vue 2 and Vue 3. Note: you may sync your changes from Vue 2 to Vue 3 (or vice versa) using the ./scripts/dialtone-vue-sync.sh script. Read docs here: Dialtone Vue Sync Script

🔮 Next Steps

update in ubervoice, confirm the problems are fixed.

🔗 Sources

ueberdosis/tiptap#2755

ninamarina · 2024-11-26T20:21:32Z

packages/dialtone-vue2/components/rich_text_editor/rich_text_editor.vue

+          };
+        },
+      });
+      if (!this.allowLineBreaks) {


Previously, if allowLineBreaks was true, shift + enter would still work to generate a soft break, now it doesn't.

thanks 👍. fixed

ninamarina · 2024-11-26T20:27:01Z

When copying a text that has soft breaks created with shift + enter, the line breaks are removed:

braddialpad · 2024-11-27T00:06:22Z

When copying a text that has soft breaks created with shift + enter, the line breaks are removed:

Good find. I have re-included the "HardBreak" extension but am no longer triggering it when pressing enter so we should still be able to support pasted hard breaks.

iropolo · 2024-11-27T02:22:32Z

This could be an improvement of editor but does not fix the issue.
I can still reproduce copy/paste issue of https://dialpad.atlassian.net/browse/DP-116205

braddialpad · 2024-11-27T03:16:21Z

This could be an improvement of editor but does not fix the issue. I can still reproduce copy/paste issue of https://dialpad.atlassian.net/browse/DP-116205

Hmm yeah as soon as I added the hardbreak extension back in the problem came up again... Will look into more tomorrow.

ninamarina · 2024-11-28T19:07:08Z

Seems like the developers of the extension are fixing this: ueberdosis/tiptap#5679 (comment)

braddialpad · 2024-11-28T21:00:38Z

Seems like the developers of the extension are fixing this: ueberdosis/tiptap#5679 (comment)

oh nice.. yeah I was trying to find a workaround but sounds like they are on top of it.

braddialpad · 2024-11-29T00:27:32Z

Seems like the developers of the extension are fixing this: ueberdosis/tiptap#5679 (comment)

I've implemented the fix they put up in this PR into our own component. This can be removed once the new link-extension release is out but I'm putting it in here right now just for the purposes of fixing this in a timely manner.

Should work correctly now, contains hardbreak extension and allows for pasting links with hardbreaks.

iropolo · 2024-11-29T14:57:21Z

console error on implementation

braddialpad · 2024-11-29T17:38:41Z

console error on implementation

hmm looks like they have already merged the fix and are preparing a release. I'll just wait for the fix.

braddialpad · 2024-12-11T19:58:56Z

The fix hasn't been released with extension-link yet, however it was released in linkifyjs. Just adding the correct version of that dependency has fixed the issue

braddialpad · 2024-12-11T20:16:11Z

To be clear on the new behaviour:

when allowLineBreaks is true:

Enter creates a paragraph
Shift + Enter creates a line break
Ctrl/Cmd + Enter creates a line break

when allowLineBreaks is false:

Enter makes no change and fires an event
Shift + Enter creates a paragraph
Ctrl/Cmd + Enter creates a line break

braddialpad · 2024-12-11T20:17:41Z

Ready for review.

github-actions · 2024-12-11T20:21:10Z

✔️ Deploy previews ready!
😎 Dialtone preview: https://dialtone.dialpad.com/deploy-previews/pr-573/
😎 Dialtone-vue 2 preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-573/
😎 Dialtone-vue 3 the preview: https://dialtone.dialpad.com/vue3/deploy-previews/pr-573/

juliodialpad · 2024-12-12T18:27:10Z

Still broken...

Now the link with soft breaks gets split

juliodialpad

Looking good!

juliodialpad · 2024-12-12T18:53:57Z

package.json

@@ -124,6 +124,7 @@
    "date-fns": "2.30.0",
    "docopt": "0.6.2",
    "emoji-toolkit": "9.0.1",
+    "linkifyjs": "4.2.0",


This is a temp solution while they release the proper fix, right?

yeah basically, they just need to update linkifyjs in extension-link and release it, then we can remove this.

# [9.87.0](dialtone/v9.86.2...dialtone/v9.87.0) (2024-12-12) ### Bug Fixes * recipes css cleanup ([#581](#581)) ([ba85404](ba85404)) * **Rich Text Editor:** DP-116205 fix line break related issues ([#573](#573)) ([a204fd4](a204fd4)) ### Features * **Callbar Button:** DLT-2211 add passthrough tooltip props ([#578](#578)) ([66cf439](66cf439)) * **Emoji:** NO-JIRA update emoji-toolkit to 9.0 ([#587](#587)) ([9684377](9684377)) * **Rich Text Editor:** DLT-2237 add image extension to editor ([#589](#589)) ([72cff78](72cff78))

# [2.168.0](dialtone-vue2/v2.167.1...dialtone-vue2/v2.168.0) (2024-12-12) ### Bug Fixes * recipes css cleanup ([#581](#581)) ([ba85404](ba85404)) * **Rich Text Editor:** DP-116205 fix line break related issues ([#573](#573)) ([a204fd4](a204fd4)) ### Features * **Callbar Button:** DLT-2211 add passthrough tooltip props ([#578](#578)) ([66cf439](66cf439)) * **Emoji:** NO-JIRA update emoji-toolkit to 9.0 ([#587](#587)) ([9684377](9684377)) * **Rich Text Editor:** DLT-2237 add image extension to editor ([#589](#589)) ([72cff78](72cff78))

# [3.161.0](dialtone-vue3/v3.160.1...dialtone-vue3/v3.161.0) (2024-12-12) ### Bug Fixes * recipes css cleanup ([#581](#581)) ([ba85404](ba85404)) * **Rich Text Editor:** DP-116205 fix line break related issues ([#573](#573)) ([a204fd4](a204fd4)) ### Features * **Callbar Button:** DLT-2211 add passthrough tooltip props ([#578](#578)) ([66cf439](66cf439)) * **Emoji:** NO-JIRA update emoji-toolkit to 9.0 ([#587](#587)) ([9684377](9684377)) * **Rich Text Editor:** DLT-2237 add image extension to editor ([#589](#589)) ([72cff78](72cff78))

bianca-artola-dialpad · 2024-12-17T15:44:41Z

hey @braddialpad i'm having some issues when using shift + enter on the message input on beta

Screen.Recording.2024-12-17.at.12.41.32.PM.mov

Error: There is no node type named 'listItem'. Maybe you forgot to add the extension?

is there something we need to add on firespotter side to make it work?

braddialpad · 2024-12-17T21:12:25Z

hey @braddialpad i'm having some issues when using shift + enter on the message input on beta

Screen.Recording.2024-12-17.at.12.41.32.PM.mov
Error: There is no node type named 'listItem'. Maybe you forgot to add the extension?
is there something we need to add on firespotter side to make it work?

@bianca-artola-dialpad strangely I'm not getting this at all when I try. Are you still getting it on beta?

bianca-artola-dialpad · 2024-12-17T21:20:32Z

Not reproducible now on beta but I think is because of the new release process for beta in which we rollbacked to the previous release on Tuesday (so no front-end changes will be displayed for some hours). I'm having this issue when running it locally, but we can wait some hours after beta has the latest front-end changes

braddialpad · 2024-12-17T21:24:19Z

Not reproducible now on beta but I think is because of the new release process for beta in which we rollbacked to the previous release on Tuesday (so no front-end changes will be displayed for some hours). I'm having this issue when running it locally, but we can wait some hours after beta has the latest front-end changes

Ah yeah that must be it.. I'll try locally.

braddialpad · 2024-12-17T21:48:21Z

Found the problem, fix coming shortly.

braddialpad added 2 commits November 26, 2024 11:44

fix(rich-text-editor): DP-116205 fix line break related issues

f4c95af

vue 3

0b44252

braddialpad added the no-visual-test Add this tag when the PR does not need visual testing label Nov 26, 2024

braddialpad self-assigned this Nov 26, 2024

braddialpad requested review from juliodialpad, iropolo, francisrupert and ninamarina as code owners November 26, 2024 19:53

ninamarina reviewed Nov 26, 2024

View reviewed changes

fix behaviours

36ef498

braddialpad requested a review from ninamarina November 29, 2024 00:27

braddialpad force-pushed the fix/rich-text-enter branch 2 times, most recently from e8d77dd to 36ef498 Compare December 11, 2024 18:08

braddialpad added 2 commits December 11, 2024 11:15

update linkify to 4.2.0

379dbad

Merge branch 'staging' into fix/rich-text-enter

84d86e0

braddialpad added 2 commits December 11, 2024 12:14

fix double break

02b77b5

vue 3

3a48c70

braddialpad requested review from ninamarina and removed request for ninamarina December 11, 2024 20:17

juliodialpad approved these changes Dec 12, 2024

View reviewed changes

braddialpad merged commit a204fd4 into staging Dec 12, 2024
10 checks passed

braddialpad deleted the fix/rich-text-enter branch December 12, 2024 19:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(rich-text-editor): DP-116205 fix line break related issues #573

fix(rich-text-editor): DP-116205 fix line break related issues #573

braddialpad commented Nov 26, 2024

ninamarina Nov 26, 2024

braddialpad Nov 27, 2024

ninamarina commented Nov 26, 2024

braddialpad commented Nov 27, 2024

iropolo commented Nov 27, 2024 •

edited

Loading

braddialpad commented Nov 27, 2024

ninamarina commented Nov 28, 2024

braddialpad commented Nov 28, 2024

braddialpad commented Nov 29, 2024

iropolo commented Nov 29, 2024

braddialpad commented Nov 29, 2024

braddialpad commented Dec 11, 2024

braddialpad commented Dec 11, 2024

braddialpad commented Dec 11, 2024

github-actions bot commented Dec 11, 2024

juliodialpad commented Dec 12, 2024

juliodialpad left a comment

juliodialpad Dec 12, 2024

braddialpad Dec 12, 2024

bianca-artola-dialpad commented Dec 17, 2024

braddialpad commented Dec 17, 2024

bianca-artola-dialpad commented Dec 17, 2024

braddialpad commented Dec 17, 2024

braddialpad commented Dec 17, 2024

fix(rich-text-editor): DP-116205 fix line break related issues #573

fix(rich-text-editor): DP-116205 fix line break related issues #573

Conversation

braddialpad commented Nov 26, 2024

fix(rich-text-editor): DP-116205 fix line break related issues

Obligatory GIF (super important!)

🛠️ Type Of Change

📖 Jira Ticket

📖 Description

💡 Context

📝 Checklist

🔮 Next Steps

🔗 Sources

ninamarina Nov 26, 2024

Choose a reason for hiding this comment

braddialpad Nov 27, 2024

Choose a reason for hiding this comment

ninamarina commented Nov 26, 2024

braddialpad commented Nov 27, 2024

iropolo commented Nov 27, 2024 • edited Loading

braddialpad commented Nov 27, 2024

ninamarina commented Nov 28, 2024

braddialpad commented Nov 28, 2024

braddialpad commented Nov 29, 2024

iropolo commented Nov 29, 2024

braddialpad commented Nov 29, 2024

braddialpad commented Dec 11, 2024

braddialpad commented Dec 11, 2024

braddialpad commented Dec 11, 2024

github-actions bot commented Dec 11, 2024

juliodialpad commented Dec 12, 2024

juliodialpad left a comment

Choose a reason for hiding this comment

juliodialpad Dec 12, 2024

Choose a reason for hiding this comment

braddialpad Dec 12, 2024

Choose a reason for hiding this comment

bianca-artola-dialpad commented Dec 17, 2024

braddialpad commented Dec 17, 2024

bianca-artola-dialpad commented Dec 17, 2024

braddialpad commented Dec 17, 2024

braddialpad commented Dec 17, 2024

iropolo commented Nov 27, 2024 •

edited

Loading