Hackathon rich text formatting #593
Conversation
|
Please add either the |
braddialpad
added
the
no-visual-test
|
✔️ Deploy previews ready! |
| .d-rich-text-editor-link-bubble-menu { | ||
| display: flex; | ||
| font: var(--dt-typography-body-md); | ||
| background-color: var(--dt-color-surface-primary); | ||
| border: 1px solid var(--dt-color-border-default); | ||
| border-radius: 2.8rem; | ||
|
|
||
| // Left-Border on all buttons except the first one (separators) | ||
| button + button { | ||
| border-left: 1px solid var(--dt-color-border-default); | ||
| } | ||
|
|
||
| button { | ||
| padding: var(--dt-space-300) var(--dt-space-450); | ||
| } | ||
| } | ||
|
|
There was a problem hiding this comment.
I provided feedback with @francotirabasso on this and some other things, but the key thing:
I say this should be a Popover (or at least emulate Popover style) and just use three straight clear buttons.
Though of course confirm with Franco before doing so.
The result would be effectively...
<dt-popover class="d-p4">
<dt-stack direction="row" gap="200">
<dt-button kind="muted" importance="clear">Edit</dt-button>
<dt-button kind="muted" importance="clear">Open link</dt-button>
<dt-button kind="danger" importance="clear">Remove</dt-button>
</dt-stack>
</dt-popover>Screen.Recording.2024-12-19.at.4.47.52.PM.mov
| padding: var(--dt-space-200) var(--dt-space-300); | ||
| color: var(--dt-color-purple-400); | ||
| background-color: var(--dt-color-purple-100); | ||
| border-radius: var(--dt-size-200); |
There was a problem hiding this comment.
| padding: var(--dt-space-200) var(--dt-space-300); | |
| color: var(--dt-color-purple-400); | |
| background-color: var(--dt-color-purple-100); | |
| border-radius: var(--dt-size-200); | |
| padding: var(--dt-space-200); | |
| color: var(--dt-color-foreground-warning); | |
| background-color: var(--dt-color-surface-secondary-opaque); | |
| border-radius: var(--dt-size-radius-200); | |
| border: var(--dt-size-border-100) solid var(--dt-color-border-subtle); | |
| font: var(--dt-typography-code-md); |
|
For (I'm too lazy to find it in the file changes diff) 
|
|
Line break issue when when converting multiple lines of text to codeblock Screen.Recording.2024-12-19.at.4.19.13.PM.mov |
|
When there are multiple links, it's difficult to move text cursor around. Screen.Recording.2024-12-19.at.4.29.34.PM.mov |
Screen.Recording.2024-12-19.at.4.51.01.PM.mov |
|
A nested list of a different type should only reflect that type as active. Currently it shows as being both number and bullet. Technically true, though ideally the active one should only reflect that type even if nested. Screen.Recording.2024-12-19.at.4.56.32.PM.mov |
| @@ -30,11 +37,28 @@ | |||
| blockquote { | |||
| margin-left: 0; | |||
| padding-left: var(--dt-space-400); | |||
| border-left: var(--dt-size-border-300) solid var(--dt-color-foreground-muted-inverted); | |||
| border-left: var(--dt-size-border-300) solid var(--dt-color-foreground-secondary-inverted); | |||
There was a problem hiding this comment.
| border-left: var(--dt-size-border-300) solid var(--dt-color-foreground-secondary-inverted); | |
| border-left: var(--dt-size-border-300) solid var(--dt-color-border-subtle); |
|
Each action definitely needs a Tooltip, including keyboard shortcut if it has one. @francotirabasso, which treatment do you like? The first one uses Keyboard Shortcut component. The second one is just tertiary color text. 
|
|
@braddialpad, @francotirabasso, I wonder if we should provide keyboard accessibility to the link options when the cursor is within the link. Gmail example attached: Screen.Recording.2024-12-20.at.11.40.22.AM.mov |
|
Thanks for the feedback! |
No description provided.