fix: rich text editor warning/error cleanup

[sanjeevdialpad]

fix: Rich text editor warning/error cleanup

🛠️ Type Of Change

These types will increment the version number on release:

• Fix
• Feature
• Performance Improvement
• Refactor

These types will not increment the version number, but will still deploy to documentation site on release:

• Documentation
• Build system
• CI
• Style (code style changes, not css changes)
• Test
• Other (chore)

📖 Jira Ticket

https://dialpad.atlassian.net/browse/DP-93915
https://dialpad.atlassian.net/browse/DP-93919

📖 Description

Three changes in this PR.

• There might be a slight delay in fetching the mention suggestion list from backend due to which the component might not be mounted/rendered. And during this time, we try to access component.ref? where component itself is undefined. Hence have a check onKeyDown() method before accessing ref.

• Similarly there can be a case where the message input itself is unmounted (edit message case) and the click event in the recipe is calling focusEditor. Make sure the ref exists before calling .focusEditor() on it.

• The other fix is kind of a weird one, sometimes (rarely) even though fullName is set on the dt-avatar in MentionSuggestion.vue , vue still complains that we do not pass fullName or imageAlt. Pretty sure the node.name does exist if node.imageSrc exists. So i do not know why it complains. Adding imageAlt and checking if the error is suppressed when dialtone is updated.

📝 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 added / updated unit tests.
• 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.
• I have validated components with a screen reader.
• I have validated components keyboard navigation.

For all CSS changes:

• I have used design tokens whenever possible.
• I have considered how this change will behave on different screen sizes.
• I have visually validated my change in light and dark mode.
• I have used gap or flexbox properties for layout instead of margin whenever possible.

If new component:

• I am exporting any new components or constants:
  • from the index.js in the component directory.
  • from the index.js in the root (either packages/dialtone-vue2 or packages/dialtone-vue3).
• I have added the styles for the new component to the packages/dialtone-css package.
• I have created a page for the new component on the documentation site in apps/dialtone-documentation.
• I have added the new component to common/components_list.cjs in packages/dialtone-vue2 and packages/dialtone-vue3
• I have created a component story in storybook
• I have created story / stories for any relevant component variants in storybook
• I have created a docs page for the component in storybook.
• I have checked that changing all props/slots via the UI in storybook works as expected.

🔮 Next Steps

📷 Screenshots / GIFs

🔗 Sources

[github-actions]

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

[github-actions]

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

[iropolo]

Looks good, thanks