nothingislost / obsidian-dynamic-highlights

An experimental Obsidian plugin that highlights all occurrences of the word under the cursor
MIT License
137 stars 7 forks source link

FR: Permanent Highlight of certain words? #8

Closed chrisgrieser closed 2 years ago

chrisgrieser commented 2 years ago

I was playing around with the data attribute and realized this should rather be a plugin feature to be more flexible.

So the idea is to stray a bit away form the "word where the cursor is" idea but instead permanently highlighting certain words. One use case could be to automatically apply strikethroughs to filler words. Another one I can think of is to highlight conjunctions ("and", "or", "but", etc.), which would help with recognizing sentence structures at glance. (In most languages, sentences are longer than in English.)

both features would be great features for writers to have. They would stray away from the original idea of this plugin a bit, but nevertheless probably be based on a very similar code base, so it would probably make sense to add this feature to this plugin?

nothingislost commented 2 years ago

Aren't we treading into the territory of SkepticMystic's NLP plugin? Can it not do this?

chrisgrieser commented 2 years ago

hmmm, you are right. that feature could work in both plugins, I guess. Well, your plugin, your decision 🙂

nothingislost commented 2 years ago

I'll leave the fancy language analysis to SkepticMystic but persistent highlighting based on static, user defined, strings I think is reasonable

claremacrae commented 2 years ago

I'll leave the fancy language analysis to SkepticMystic but persistent highlighting based on static, user defined, strings I think is reasonable

I'm currently looking to highlight card-board plugin-related strings, for example:

@due(2022-01-03)
@completed(2021-12-26T13:10:46)

Even just having the @due and @completed would be really useful - but lovelier still would be for regular expressions to be supported, and to be able to chose the highlighting colour for each pattern.

nothingislost commented 2 years ago

@claremacrae @chrisgrieser would you like to provide input on how these regex highlights will be marked in the dom?

I have regex highlighting working but I'm trying to decide what the UX will be and how to mark the matches.

Would it be sufficient to have a plugin settings section that does something along the lines of:

claremacrae commented 2 years ago

@nothingislost Thank you for doing this, and thank you for asking!

I was thinking of something like:

search term: ---------- [x] regular expression colour: ffaabb [color picker button]

So:

  1. the term to search for
    • with a checkbox option to make it a regex - so no need to escape complex characters if it's a consistent string
  2. the colour to use to highlight it
    • with a colour-picker to chose it

How were you thinking the class in the DOM would be used? Would users be needing to provide and enable their own CSS snippets, or would your plugin be doing that?

chrisgrieser commented 2 years ago

Thanks for asking!

Pretty much what Clare said. For some use cases, you would want to have the same highlight, for others you would want to have different highlights.

Also maybe a toggle to switch between emphasizing by highlight or by text color? 🤔

And add a cssclass per query, for users who want to make their own style via css

nothingislost commented 2 years ago

Thanks for the input! I assume you also want a data attribute containing the matched string value?

chrisgrieser commented 2 years ago

Hmm, I am wondering what the use case for that would be? If I want different styling, I'd be able to split it up into multiple queries, wouldn't I?

Well, I can't think of a reason, but it probably also wouldn't hurt in case someone else comes up with a reason and it's no effort for you to implement? 🤔

nothingislost commented 2 years ago

Yeah, I suppose you could technically accomplish anything with enough individual queries but it'd probably be more efficient to minimize the number of queries and use CSS to differentiate the styling based on content.

Each query will iterate the visible content within the editor and mark the content so the more queries, the more passes it has to do. This is a pretty fast and efficient process but just something to keep in mind.

claremacrae commented 2 years ago

Thanks for the input! I assume you also want a data attribute containing the matched string value?

I don't think it matters, but I don't understand the question!

nothingislost commented 2 years ago

It would mean, for your use case, given a regex of "@completed\\([0-9T:-]+\\)" the DOM would look like this:

<div class="cm-line">
  <span class="green" data-contents="@completed(2021-12-26T13:10:46)">@completed(2021-12-26T13:10:46)</span>
</div>

which would allow you to write CSS styles that leveraged the [data-contents] selector like this:

.green[data-contents*="2021"] { background-color: pink }
.green[data-contents*="2022"] { background-color: red }
nothingislost commented 2 years ago

The first draft of this has been delivered in 0.1.0. Expect breaking changes. Check out the readme for more details.

chrisgrieser commented 2 years ago

I tried it out and it works great for me. For the wider audience, however, I'd suggest making some simplifications though:

nothingislost commented 2 years ago

Thanks for the feedback. Much of this has been incorporated into v0.1.2

claremacrae commented 2 years ago

Sorry I haven't had a chance to test this yet, but I really appreciate the work, and the feedback given - thank you!

nothingislost commented 2 years ago

I'm going to close this one out. If you all think of anything else, please raise it as a new issue.

claremacrae commented 2 years ago

Wow, this is absolutely amazing in Edit modes - thank you!

Is there anything I can do to make it work in Reading mode? Does it need to be a feature of the Theme I'm using?

chrisgrieser commented 2 years ago

@claremacrae see #26