how to set link colors (and avoid link clicks)

[j-ro]

Looking at this great project, wondering two link related things:

• how do you set link colors (color, underline, etc...) -- I see colors set in the homepage example, but I'm unclear how to change those settings? There seems to be no top level link controls, no controls in tiptap, etc...
• how do you avoid clicking links? I make a link in tiptap, and then click inside it to, say, edit the wording, and it opens the link in a new tab, not expected behavior

[orkhanahmadov]

Hi @j-ro, glad you like it :)

I already created 2 separate tickets based on your feedback:

• Avoid clicking links in rich text editor #351 (your Q2) is quick fix, I'll ship it as soon as I can.
• Add global link color/underline controls to document settings #352 (your Q1) is an enhancement feature. Currently, links use color:inherit which uses the surrounding text color. Need to think about how to allow link styling

[j-ro]

thanks! looking at unlayer (which is our current editor), they allow setting a text color, link color, and underline (yes/no) option at the overall document level, equivalent to your settings tab, and that seems to be an appropriate place for them. Perhaps someone wants to override these settings on a per link basis, but I think that's probably somewhat rare.

[orkhanahmadov]

@j-ro Great idea! That document-level approach lines up with how the settings tab already works. I've split it into two tickets:

#352: global link color + underline toggle
#355: global default text color

Both will live in the settings tab and apply at the document level. Also agree, per-link setting can be deferred for now.

Thanks for the Unlayer reference, really helpful!

[orkhanahmadov]

Hi @j-ro,

I just merged and published version 0.16.0 which includes global text and link color + link underline control.

Text color defaults to #1a1a1a; links always have underline by default (better for a11y) but has no default color. All can be also configured programmatically, see here: https://docs.templatical.com/guide/styling#template-level-settings.

If you encounter any bugs feel free to open an issue.

Happy emailing! 🎉

[j-ro]

neat! trying it out on the homepage though, does it fully work? here's the link I made:

it doesn't appear blue in tiptap?

[orkhanahmadov]

Forgot to mention, link click opening the link annoying behavior is also fixed, also part of 0.16.0

[orkhanahmadov]

@j-ro that's because home page's demo template has its own defined color for that text block. This global text/link color settings only take effect when block or text doesn't use its own color. Individual block level settings always override global settings.

Start from scratch and try a new template. If you don't apply block level colors then default text and link color will get applied. Here's an example: https://play.templatical.com/?s=PfQENWhcsQ

[j-ro]

huh interesting -- how does block level color work? The block settings I can see for a paragraph block are only background?