CSS 'Active Line' Fails When Highlighting Text

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 :link: (highlighting line 3)

4 Likes

That Al’s occurs as well when using this css: Meta Post - Common CSS Hacks

The line goes into preview mode when highlighting.

2 Likes

@death.au is this still a thing?

is this an upstream problem with codemirror?

Yes to both. I think it’s because codemirror wasn’t built for this.
A selected line isn’t necessarily an “active” line, either, but there’s no class for “Selected line” as a selection can comprise multiple lines or a section of a line (or both).
Relatedly, codemirror has trouble with cursor positioning when resizing things based on activeline like this example.

this plugin can help for workaround GitHub - nothingislost/obsidian-codemirror-options

4 Likes

@jokysatria Obsidian sees the plugin but fails to load it when I try to activate it? I’m on Obsidian 0.12.15…

I don’t have any problem when install it via community plugin store. where did you install it from? (my obsidian also 0.12.15, installer version 0.12.12)

1 Like

Ah, I see! I misunderstood and thought it had to be manually installed. Thank you; problem fixed.

Do you know how to prevent the line going into preview mode when highlighting?

Have you tried the plugin people mentioned in replies to this post?

I have now! I had to reread the original post to fully grasp what was being said (sorry very new to css).

I also had to install the ‘Editor Syntax Highlight’ plugin for the ‘Codemirror Options’ plugin to make it work like I want it to.

Thanks for the quick reply!

1 Like