💄 Fix issue#69 Single line comments are hidden

[ebouchut]

This PR is my attempt to fix issue#69 where non-Todoist single-line comments in a language code block were hidden (Java, Ruby, HTML...) when the ultimate-todoist-sync-for-obsidian plugin was enabled.

@HeroBlackInk I am open to suggestions and would like your guidance to correct this PR if I miss something obvious.

What?

Modified the plugin's stylesheet to replace
the original CSS selector

.cm-line:not(:hover):not(.cm-active) span.cm-comment {
    display: none;
}

with this one:

.cm-line:not(:hover):not(.cm-active) > .cm-comment.cm-comment-start:has(~ .dataview.inline-field > .dataview.inline-field-key[data-dv-key="todoist_id"]),
.cm-line:not(:hover):not(.cm-active) > .cm-comment.cm-comment-start:has(~ .dataview.inline-field > .dataview.inline-field-key[data-dv-key="todoist_id"]) ~ .cm-comment.cm-comment-end
{
    display: none;
}

The new selector only targets and hides the start and end delimiters (%%) of a todoist_id comment. The original selector also targeted other comment types.

Why?

When you add a task tagged #todoist, the ultimate-todoist-sync-for-obsidian plugin automatically creates that task in Todoist and then adds the ID of that Todoist task in an Obsidian comment using this format:

%%[todoist_id:: 123456789]%%

where 123456789 is the ID of the task the plugin created on Todoist (external ID).

By default, the plugin's CSS stylesheet hides the Obsidian start and end delimiters (%%) of the todoist_id comment and only shows them when we hover over the line containing the comment.

❌ The original CSS selector used to do this is not specific enough and also hides non-Todoist comments whereas it should not. For example, it hides all single-line comments in a language code block (See issue#69 for more details).

✅ The fixed CSS selectoronly hides the start and end Todoist comment delimiters and continues showing other single-line comments in language code blocks.

Tests

Here is the Obsidian note I used for my tests.

Obsidian Test Note

[fffaab]

Hi !
I'm new here so I hope i'm not answering in the wrong place, thanks in advance for bearing with me.

I've been using this add-on for a few months now (love it), and up until a couple weeks back, the id between the %% was completely hidden unless while hovering or editing the line. And now only the %% before and after are hidden. All the solutions i found are only adressing this and i would really prefer to have the whole comment hidden, because i don't need to see it and it's giving way to much information for my brain to handle in my todo list (by chance, the comments don't appear when i call them with a dataview command elsewhere, only in the original task)

Any idea would be appreciated. Thanks a lot, have a nice day !

[ebouchut]

@fffaab To completely hide the todoist ID (like for example %%[todoist_id:: 123456789]%%) you need to use another CSS selector.
Give the one below a try.

• Close your Obsidian vault
• Edit YOUR_VAULT_PATH_HERE/.obsidian/plugins/ultimate-todoist-sync/styles.css
  • Replace the current CSS selector in this file with the one below:

    .cm-line:not(:hover):not(.cm-active) > .cm-comment.cm-comment-start:has(~ .dataview.inline- field > .dataview.inline-field-key[data-dv-key="todoist_id"]),
    .cm-line:not(:hover):not(.cm-active) > .cm-comment.cm-comment-start:has(~ .dataview.inline-field > .dataview.inline-field-key[data-dv-key="todoist_id"]) ~ .dataview.inline-field,
    .cm-line:not(:hover):not(.cm-active) > .cm-comment.cm-comment-start:has(~ .dataview.inline-field > .dataview.inline-field-key[data-dv-key="todoist_id"]) ~ .cm-comment.cm-comment-end
    {
            display: none;
    }

• Reopen your vault

In case you also want to remove the visual glitch that occurs when hovering over the mouse over the line, you can remove all occurrences of :not(:hover) from the above selector.

[fffaab]

Oh Geez. it's even better than what i was hoping for ! Thanks a lot 😄