fix: rich editor improvements

[yorbi-dp]

fix: rich editor improvements

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/DLT-1523

📖 Description

Some visual improvements in the component/recipe.
Space:

• Horizontal and vertical padding 8px: var(--dt-space-400)
• Gap button-groups 12px: d-stack--gap-450 (also added this space/gap to the stack component)
• Gap between buttons 4px: d-stack--gap-300

Dividers:

• Update from using the d-divide-x d-divide-black-200 because this takes the last:child, we can add something else that represents these dividers between button groups; here is a proposal style.

height: calc(var(--dt-size-550) + var(--dt-size-300));
width: var(--dt-size-100);
background: var(--dt-color-border-subtle);

Buttons:

• All button should be: size="xs"
• Codeblock button icon needs to be update with code-block

💡 Context

📝 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 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.

🔮 Next Steps

https://dialpad.atlassian.net/browse/DLT-1530

[github-actions]

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

[braddialpad]

Looks great! remember to update vue 3 component as well

[github-actions]

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

[yorbi-dp]

Looks great! remember to update vue 3 component as well

Fixed the vue 3 component in the latest commit! :)