fix(rich-text-editor): NO-JIRA multiple improvements #402

braddialpad · 2024-07-09T22:26:48Z

fix(rich-text-editor): multiple improvements

Obligatory GIF (super important!)

🛠️ Type Of Change

These types will increment the version number on release:

Fix

📖 Jira Ticket

https://dialpad.atlassian.net/browse/DLT-1825
https://dialpad.atlassian.net/browse/DLT-1858
https://dialpad.atlassian.net/browse/DLT-1856
https://dialpad.atlassian.net/browse/DLT-1674

📖 Description

Fixes for multiple reported issues with rich-text-editor / message-input

DLT-1825: prevent the triggering of keydown events in suggestion popover when the item count is 0, this was causing multiple errors
DLT-1858, DLT-1856: trigger enter event from the input field directly rather than the input wrapper.
DLT-1674: Designer reported UI improvements. Lots of these will be fixed when nina's scrollbar PR gets merged. I just changed the button colors as requested.

💡 Context

Reported issues from the implementation of message input into dialpad.

📝 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

For all CSS changes:

I have used design tokens whenever possible.

🔮 Next Steps

Notify the messaging team that these have been fixed.

github-actions · 2024-07-09T22:27:14Z

Please add either the visual-test-ready or no-visual-test label to this PR depending on whether you want to run visual tests or not.
It is recommended to run visual tests if your PR changes any UI. ‼️

iropolo · 2024-07-10T15:02:53Z

On Conversation View -> Message input -> Default vue2 if you press enter, it doesn't add a jump line, it does it in vue3

Screen.Recording.2024-07-10.at.11.59.37.mov

Non on vue3 if you press arrow down key it trigger console error.

Screen.Recording.2024-07-10.at.11.58.03.mov

packages/dialtone-vue2/components/rich_text_editor/extensions/suggestion/SuggestionList.vue

iropolo

Apart from my comments, fixs looks good

braddialpad · 2024-07-10T16:49:55Z

On Conversation View -> Message input -> Default vue2 if you press enter, it doesn't add a jump line, it does it in vue3

It's actually only supposed to add a line if you use "shift + enter" pressing enter normally would send the message. I will look into this.

braddialpad · 2024-07-10T18:07:48Z

Couple more small requested fixes that came in from design today that I will add and document.

braddialpad · 2024-07-10T20:57:09Z

Added:

tertiary foreground color to slash command subtitle
moved max-height to the dialog rather than the child container, so it is retained when scrolling to bottom.
slot for "top" so they can add custom messages above the input field, but still contained within the borders.

iropolo · 2024-07-10T21:35:23Z

On Conversation View -> Message input -> Default vue2 if you press enter, it doesn't add a jump line, it does it in vue3

It's actually only supposed to add a line if you use "shift + enter" pressing enter normally would send the message. I will look into this.

K, seems like in vue3 it sends the actions and also adds a jump line.

iropolo · 2024-07-10T21:38:39Z

packages/dialtone-vue2/components/rich_text_editor/extensions/suggestion/SuggestionList.vue

    onKeyDown ({ event }) {
+      if (this.items.length === 0) return;


This seems like not working, I can still trigger errors in console pressing arrow keys

This seems like not working, I can still trigger errors in console pressing arrow keys

hmm can you tell me the steps you take to trigger this?

ahh, seems like this.items is not empty on a second search so it always pass this validation.

Check the video, after I type @ I start to press the down arrow key.
Then I delete it and type again @ and start to press down arrow key, console error appears.

Screen.Recording.2024-07-10.at.18.55.06.mov

There is another issue but it was there before.
If you press up arrow key it triggers a console error that seems to be related to destroy the popup (probably because you are moving out the @)

To reproduce type @ and quickly up arrow key.

Screen.Recording.2024-07-10.at.18.58.08.mov

Check the video, after I type @ I start to press the down arrow key.
Then I delete it and type again @ and start to press down arrow key, console error appears.

Ah yeah, seems to happen if you press the arrow key before the dialog is loaded

The variables for the component and the popup in suggestion.js were not getting set to null after being destroyed. They still had an object in them even though they were destroyed which kept many things "alive" when they shouldn't have been.

Should be fixed now.

bianca-artola-dialpad · 2024-07-11T12:22:14Z

Sorry for disrupting here, but I noticed some issues with the input when adding :, @ or # and then enter

Screen.Recording.2024-07-11.at.09.16.01.mov

probably we need to execute submit action on those cases?

braddialpad · 2024-07-11T16:37:15Z

Sorry for disrupting here, but I noticed some issues with the input when adding :, @ or # and then enter

Ah yeah, that's definitely a problem, thanks.

braddialpad · 2024-07-12T01:39:48Z

Sorry for disrupting here, but I noticed some issues with the input when adding :, @ or # and then enter

probably we need to execute submit action on those cases?

@bianca-artola-dialpad should be fixed now.

francisrupert · 2024-07-12T03:09:14Z

UPDATE: oops, I guess I meant to address this to @braddialpad (never mind @bianca-artola-dialpad)

New tiny (I promise) improvement while you're in here:

Change...

.dt-message-input--focused {
  ...
}

...to...

.dt-message-input:focus-within {
  ...
}

This will remove the awkward blinking observed as dt-message-input--focused is toggled (view the attached screencast). This tiny change will ensure any amount of keyboard or mouse actions with dt-message-input retains the style (shadow and bold border).

Oh, and I assume remove associated tests and the current toggling of dt-message-input--focused, assuming it's not used for anything other than styling the container.

Thanks much! Let me know if you've any questions.

Screen.Recording.2024-07-11.at.9.52.00.PM.mov

bianca-artola-dialpad · 2024-07-12T12:27:36Z

Sorry for disrupting here, but I noticed some issues with the input when adding :, @ or # and then enter
probably we need to execute submit action on those cases?

@bianca-artola-dialpad should be fixed now.

yeah, I cannot reproduce it anymore, thank you!

braddialpad · 2024-07-12T19:17:57Z

K, seems like in vue3 it sends the actions and also adds a jump line.

Fixed now.

github-actions · 2024-07-12T19:21:56Z

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

# [9.55.0](dialtone/v9.54.2...dialtone/v9.55.0) (2024-07-12) ### Bug Fixes * NO-JIRA corrupted pnpm-lock file ([4f732c8](4f732c8)) * **Rich Text Editor:** NO-JIRA multiple improvements ([#402](#402)) ([c30b3a7](c30b3a7)) ### Documentation * DLT-1787 implement custom TOC ([#397](#397)) ([bf82624](bf82624)) * **Logo:** DLT-1866 modify dialtone documentation logo ([#403](#403)) ([8047550](8047550)) ### Features * **Design Tokens:** DLT-1870 additional expressive typography tokens ([#404](#404)) ([2bdc3a5](2bdc3a5)) * **Design Tokens:** DLT-1871 added gold brand color ([#405](#405)) ([ab0d032](ab0d032)) * **Multi Select:** DLT-1845 allow duplicated names on multiselect ([#394](#394)) ([ff8be5f](ff8be5f)) * **Scrollbar:** DLT-1473 add scrollbar directive ([#391](#391)) ([05af2ff](05af2ff))

# [2.143.0](dialtone-vue2/v2.142.2...dialtone-vue2/v2.143.0) (2024-07-12) ### Bug Fixes * **Rich Text Editor:** NO-JIRA multiple improvements ([#402](#402)) ([c30b3a7](c30b3a7)) ### Features * **Multi Select:** DLT-1845 allow duplicated names on multiselect ([#394](#394)) ([ff8be5f](ff8be5f)) * **Scrollbar:** DLT-1473 add scrollbar directive ([#391](#391)) ([05af2ff](05af2ff))

# [3.136.0](dialtone-vue3/v3.135.2...dialtone-vue3/v3.136.0) (2024-07-12) ### Bug Fixes * **Rich Text Editor:** NO-JIRA multiple improvements ([#402](#402)) ([c30b3a7](c30b3a7)) ### Features * **Multi Select:** DLT-1845 allow duplicated names on multiselect ([#394](#394)) ([ff8be5f](ff8be5f)) * **Scrollbar:** DLT-1473 add scrollbar directive ([#391](#391)) ([05af2ff](05af2ff))

braddialpad added 6 commits July 8, 2024 17:35

fix(rich-text-editor): DLT-1856 emit enter event from rich-text

7421137

vue 3

c6b042e

don't trigger keydown if length is 0

d5b75c4

vue 3

fa1b67e

buttons to foreground muted

198f4aa

vue3

bb721e0

braddialpad self-assigned this Jul 9, 2024

braddialpad requested review from juliodialpad, iropolo, francisrupert and ninamarina as code owners July 9, 2024 22:26

braddialpad changed the title ~~fix(rich-text-editor): multiple improvements~~ fix(rich-text-editor): NO-JIRA multiple improvements Jul 9, 2024

braddialpad added the visual-test-ready Add this tag when the PR is ready for visual test, to trigger GHA visual tests label Jul 9, 2024

iropolo reviewed Jul 10, 2024

View reviewed changes

packages/dialtone-vue2/components/rich_text_editor/extensions/suggestion/SuggestionList.vue Show resolved Hide resolved

iropolo approved these changes Jul 10, 2024

View reviewed changes

braddialpad added 6 commits July 10, 2024 12:19

add tertiary subtitle

fe8efb6

vue 3

a96c5ca

set max height on dialog

2cdccef

vue 3

9a6a07a

add top slot

f9211fb

vue 3

4dbe73a

braddialpad requested a review from iropolo July 10, 2024 20:57

iropolo reviewed Jul 10, 2024

View reviewed changes

fix keypress bugs

3bd12a2

vue 3

ca73516

braddialpad requested a review from iropolo July 10, 2024 23:36

braddialpad added 2 commits July 11, 2024 09:29

remove color override

5f656b5

vue3

c6f0262

braddialpad added 2 commits July 11, 2024 18:36

fix additional errors

5476a3d

vue 3

19a099b

braddialpad added 3 commits July 11, 2024 18:43

Merge branch 'staging' into fix/message-input-various

660ebaf

fix visual test flakiness on hovercard

fea73ae

vue 3

f85a642

braddialpad added 4 commits July 12, 2024 09:30

fix focus flickering

7ec3bae

vue 3

717cc33

remove tests that are no longer necessary

5ad4088

vue 3

31f8725

francisrupert approved these changes Jul 12, 2024

View reviewed changes

braddialpad added 3 commits July 12, 2024 11:57

Merge branch 'staging' into fix/message-input-various

65d8f03

fix enter override vue3

4ec23c5

vue2

8974ee3

braddialpad merged commit c30b3a7 into staging Jul 12, 2024
11 checks passed

braddialpad deleted the fix/message-input-various branch July 12, 2024 19:24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(rich-text-editor): NO-JIRA multiple improvements #402

fix(rich-text-editor): NO-JIRA multiple improvements #402

braddialpad commented Jul 9, 2024

github-actions bot commented Jul 9, 2024

iropolo commented Jul 10, 2024

iropolo left a comment

braddialpad commented Jul 10, 2024

braddialpad commented Jul 10, 2024

braddialpad commented Jul 10, 2024

iropolo commented Jul 10, 2024

iropolo Jul 10, 2024

braddialpad Jul 10, 2024

iropolo Jul 10, 2024

iropolo Jul 10, 2024

braddialpad Jul 10, 2024

braddialpad Jul 10, 2024

bianca-artola-dialpad commented Jul 11, 2024

braddialpad commented Jul 11, 2024

braddialpad commented Jul 12, 2024

francisrupert commented Jul 12, 2024 •

edited

Loading

bianca-artola-dialpad commented Jul 12, 2024

braddialpad commented Jul 12, 2024

github-actions bot commented Jul 12, 2024

fix(rich-text-editor): NO-JIRA multiple improvements #402

fix(rich-text-editor): NO-JIRA multiple improvements #402

Conversation

braddialpad commented Jul 9, 2024

fix(rich-text-editor): multiple improvements

Obligatory GIF (super important!)

🛠️ Type Of Change

📖 Jira Ticket

📖 Description

💡 Context

📝 Checklist

🔮 Next Steps

github-actions bot commented Jul 9, 2024

iropolo commented Jul 10, 2024

iropolo left a comment

Choose a reason for hiding this comment

braddialpad commented Jul 10, 2024

braddialpad commented Jul 10, 2024

braddialpad commented Jul 10, 2024

iropolo commented Jul 10, 2024

iropolo Jul 10, 2024

Choose a reason for hiding this comment

braddialpad Jul 10, 2024

Choose a reason for hiding this comment

iropolo Jul 10, 2024

Choose a reason for hiding this comment

iropolo Jul 10, 2024

Choose a reason for hiding this comment

braddialpad Jul 10, 2024

Choose a reason for hiding this comment

braddialpad Jul 10, 2024

Choose a reason for hiding this comment

bianca-artola-dialpad commented Jul 11, 2024

braddialpad commented Jul 11, 2024

braddialpad commented Jul 12, 2024

francisrupert commented Jul 12, 2024 • edited Loading

bianca-artola-dialpad commented Jul 12, 2024

braddialpad commented Jul 12, 2024

github-actions bot commented Jul 12, 2024

francisrupert commented Jul 12, 2024 •

edited

Loading