Some links are very long and when they expand they are very distracting.
Often I don’t need to see the exact link and want to only edit the title of the link because I’m used to editors like workflowy (mentioned here How to make the url link shorter in edit mode?).
Why current default editor’s behaviour doesn’t help:
Current behaviour (Version 1.5.12) shows only link title and shows URL only if cursor is on title.
Title can be very long and if I have multiple links on each line moving cursor vertically can be distracting as they expand.
Solution:
CSS snippet that replaces link URL with a emoji and shows it only if you hove mouse over it.
This also perfectly works on iOS devices. (Tap next to link to put cursor, drag cursor to the link, then tap on emoji to show URL)
This forum is very confusing, I couldn’t publish edits to my post and I couldn’t delete the post, so here is the end of the post:
You will need to install CSS snippet below.
(Instructions for installing snippet are provided in this video: https://youtu.be/UM7HH_sGRxs)
CSS code:
/* Hide the URL text and show the symbol */
div.cm-line .cm-string.cm-url:not(.cm-formatting) {
font-size: 0;
}
/* Display a symbol after the URL */
div.cm-line .cm-string.cm-url:not(.cm-formatting)::after {
content: '🔗'; /* Replace with your desired symbol */
font-size: 1rem; /* Adjust font size as needed */
color: inherit; /* Inherit color from the parent element */
}
/* Ensure the URL text is visible when the cursor is over it */
div.cm-line .cm-string.cm-url:not(.cm-formatting):hover {
font-size: inherit;
}
/* Hide the symbol when the cursor is over the URL */
div.cm-line .cm-string.cm-url:not(.cm-formatting):hover::after {
content: '';
}
