This is a minor bug relating to the ‘Active Line’ in CSS. As such, I don’t know of a way to reveal it without a custom CSS, but I thought I would share it anyway. I discovered it when using the URL shortening code from @death.au on this custom-css topic from back in May. The provided code acts to hide URLs in the editor to keep things readable. It uses the Active Line to determine whether to show an icon or the entire URL (to maintain editability).
This works beautifully, except when highlighting text in the editor. Highlighting seems to deactivate the line, triggering the link icon to show up, rather than the whole URL. Once again, this is likely an irrelevant bug, but I figure it could become relevant for development of a WYSIWYG editor.
Steps to reproduce
Add the following code (courtesy of death.au) to your custom obsidian.css:
div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-string.cm-url:not(.cm-formatting) {
font-size: 0;
}
div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-string.cm-url:not(.cm-formatting)::after {
content: '🔗';
font-size: 1rem;
}
Create a link in the editor:
[Show URL when line is active, icon when inactive](myurl.fake-a-link)
[Second link just because](another.url)
Highlight some of the text by Shift + <-- or Click + Drag
Expected result
The URL should be visible whenever working on the line - whether typing or highlighting text (indicating that CSS sees the line as active). When not editing the line, the link icons should replace the URL (indicating that CSS sees the line as inactive).
Actual result
Highlighting the line causes the icon to show, indicating that CSS sees the highlighted line as inactive.
Environment
- Operating system: Windows 10 1909
- Obsidian version: v0.8.1
Additional information
Figure 1. Expected Behavior. Active line shows URL (my cursor is on line 3)
Figure 2. Unexpected Behavior. Active line shows
(highlighting line 3)