feat(editor): DP-131851 added editor support to encase text with div tags

[Aditya Narravula (anarravula-dialpad)]

Dialtone Recipe Editor Support For Encasing Text With Div Tags

Obligatory GIF (super important!)

🛠️ 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-131851

📖 Description

1. Introduced a new extension that extends the existing tiptap paragraph extension that adds div tags to text instead of p tags
2. Added a property to rich text editor to toggle the use of this extension. Default uses the paragraph tags, when enabled it adds the div extension to the editor instead of the paragraph extension
3. Added the same property to the DtRecipeEditor. This way ubervoice can send the property to the component to toggle the extension.

💡 Context

Agent Experience is currently using Dialtone's Recipe Editor (DtRecipeEditor) for composing emails. One of our requirements by our customer is to match the behavior of outlook/gmail when composing emails. In outlook, and gmail when a user starts typing text the text is encased in div tags rather than the paragraph tags used by DtRecipeEditor which uses tiptap to implement the editor. This PR introduces a new extension that replaces the paragraph tags with a div tag. And enabling it when a property is sent to the recipe editor.

Purpose: We want the behavior of the editor to be similar to an editor in outlook or gmail.

Why: Customers were complaining that the email formatting was different in dialpad vs gmail and outlook because dialpad uses p tags and outlook and gmail uses div tags

Problems Solved: Customer will have a similar editing experience in both dialpad and other email clients like outlook and gmail.

📝 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. Read docs here: Dialtone Vue Sync 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.

📷 Screenshots / GIFs

Screenshots of the imported component in ubervoice

[github-actions]

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. ‼️

[Brad Paugh (braddialpad)]

This looks really good thanks!

make sure to port the code to vue 3 by using scripts/dialtone-vue-sync.sh

I don't think this code will need any vue 3 specific changes.

[github-actions]

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

[Aditya Narravula (anarravula-dialpad)]

This looks really good thanks!

make sure to port the code to vue 3 by using scripts/dialtone-vue-sync.sh

I don't think this code will need any vue 3 specific changes.

Done!