#1

Kind of a niche request but here goes. While we’re waiting for the WYSIWYG editor, I’m using CSS tweaks to hide markdown in the editor except on the .CodeMirror-activeline line. I know others do the same from threads such as this.

The only inconvenience with this method is that the .CodeMirror-activeline class disappears on text selection. This makes the text selection action itself more difficult because the line underneath the cursor jerks around.

Please see video below. (Not my video, but from the aforementioned thread.)

Proposed solution

Persist the .CodeMirror-activeline class on editor text selection. Or add a different class. Simply anything that could be targeted with CSS, really.

Thank you. :heart: Obsidian.

2 Likes
#2

I am using a snippet that gives that WYSIWYG feeling by hiding markdown format when you are not on the active line.

When you are on the active line, it shows the formatting and text selection is no problem. I think it is a snippet by death_au.

Anyway, here it is.
clutter-free-formatting.css (1.3 KB)

If I misunderstood your issue I apologize.

1 Like
#3

It’s an interesting approach to make the markdown tags transparent rather than hide them, but it has its own issue of leaving a lot of awkward gaps in the text and misaligned headings, even though it does enable easy text selection.

Thank you for the idea, I’ll keep it in mind as I play around with the CSS. But I would still rather see .CodeMirror-activeline persist on selected text. Such a small change but such a big difference for CSS hackability.

#4

@Gem : yes, these are gaps, and what I assume you mean by “misaligned” headers, are done on purpose to avoid the issue you mentioned in your OP.

Don’t forget this is a temporary measure, a workaround, while we await the advent of WYSIWYG.

Feature requests are for permanent measures, but when we get WYSIWYG it does not make sense to have this feature anymore.

#5

I don’t think WYSIWYG mode would make the request for a robust active line selector obsolete. Simulating WYSIWYG was how I wanted to utilize it, but it has other utility, including styling the future WYSIWYG mode itself. Clearly there is value in an active line class, or there would not be one at all. I just think the active line class should not disappear when text is selected in the active line.

Anyway, I just fixed it myself.

WYSIWYG

Unfortunately I can’t share instructions because I’m unsure modifying Obsidian at the layer this change needed to be made is within the forum rules. But if a developer wants to PM me I’ll be glad to tell them what to change.

2 Likes
#6

Could you please instruct me for doing this. It’s very interesting.

#7

This can actually be done fairly straightforwardly with a plugin. The .CodeMirror-activeline class is set by CodeMirror’s active-line addon. There is a configuration option in CodeMirror’s API that preserves this class when the text selection is contained in the active line, but the obsidian developers have not enabled it. Fortunately, Obsidian’s API exposes the embedded CodeMirror editor, so we can enable this feature manually by writing an obsidian plugin with the following code:

import { Plugin } from 'obsidian';
import { } from 'codemirror/addon/selection/active-line';

export default class MyPlugin extends Plugin {
    async onload() {
        this.registerCodeMirror(editor => {
            editor.setOption('styleActiveLine', { nonEmpty: true });
        })
    }
}

This will become deprecated in the future, but it should continue to work until WYSIWYG is implemented, at which point this plugin is no longer needed.

Source: javascript - Highlight active line in CodeMirror - Stack Overflow

1 Like
#8

Thank you @hey it works fine. I’ve created a plugin from this code SlidEnergy/persist-activeline-on-editor-text-selection but I don’t publish this plugin into the obsidian repository because I found out already existing plugin nothingislost/obsidian-codemirror-options: Obsidian plugin with options to customize the behavior of CodeMirror which works better and have additional functionalities.

1 Like