Plugin for Bullet Threading

Plugins ideas
10

Here’s the full text for anyone who has trouble with the Discord link (the code block is displaying in a scroll-box because it’s a bit long, so make sure you get all of it):

Alright I found a decent solution:

body {
  --outline-guideline-width: var(--size-2-1);
  --outline-guideline-color: var(--color-accent);
  --outline-item-height: calc(var(--nav-item-size) * 1.8);
}

li {
  position: relative;
}

/* In-between items */

li:hover > ul > li:has(~li:hover)::before {
  content: "";
  width: var(--outline-guideline-width);
  position: absolute;
  background-color: var(--outline-guideline-color);
  top: calc(var(--outline-item-height) / 2 * -1);
  left: calc(-2px - 2em - var(--size-4-4));
  height: calc(100% - var(--outline-item-height) + var(--size-4-8) + 2px);
}

/* Elbows items */

li:hover > ul > li:hover::before {
  content: "";
  position: absolute;
  top: calc(var(--outline-item-height) / 2 * -1);
  left: calc(-2px - 2em - var(--size-4-4));
  bottom: calc(100% - (var(--outline-item-height) + var(--size-4-2)) / 2 + 1px);
  width: calc(1em + var(--size-4-4) - 2px);
  border-bottom-left-radius: var(--radius-m);
  border-bottom: var(--outline-guideline-width) solid var(--outline-guideline-color);
  border-left: var(--outline-guideline-width) solid var(--outline-guideline-color);
}

(line styling taken from Maple theme outline code GitHub - subframe7536/obsidian-theme-maple: [Refactoring] An obsidian theme for desktop with graceful animation and awesome components)

5 Likes
11

That did not work for me. I have put the css code in a file with .css extension in the snippets folder and enabled it. I does not do anything when I navigate my cursor up and down the bullet list. Any suggestions or ideas of what I may have done wrong?

12

Did you copy the whole snippet? The last 2 lines are:

  border-left: var(--outline-guideline-width) solid var(--outline-guideline-color);
}

Does it work in the default theme?

13

I did copy the whole snippet. And indeed I am using the default theme. But still it does not work for me.

Screenshot_20230422-004716
Screenshot_20230422-0047161187×870 89.8 KB

Screenshot_20230422-004722
Screenshot_20230422-0047221084×1062 142 KB

Screenshot_20230422-004740
Screenshot_20230422-0047401916×2083 310 KB

Any suggestions?

14

No, sorry. If you’re on Discord you could ask in the #appearance channel, which is where the snippet came from.

15

This isn’t for note outlining. It’s for outlines core plugin that appear on sidebar. Application for note would require a plugin to add identifier which is the parent note. Currently that’s the hurdle.

3 Likes
16

I need this feature too. For me the snippet works for the read mode, not for the outline core plugin, and it’s rather simple and crude. Hope someone could find a better way to implement this in live-preview mode.

17

This might feel like a minor thing to some but for me it would be a game changer

3 Likes
18

Same here. It is the one thing I really miss from LogSeq.

1 Like
19

Here is something for live preview.
It is CSS that will simply highlight hovered list item and its ancestors in the list:

.HyperMD-list-line:hover,
.HyperMD-list-line-1:not(:has(~ .HyperMD-list-line-1 ~ .HyperMD-list-line:hover)):has(~ :is(.HyperMD-list-line-2, .HyperMD-list-line-3, .HyperMD-list-line-4, .HyperMD-list-line-5, .HyperMD-list-line-6):hover),
.HyperMD-list-line-2:not(:has(~ .HyperMD-list-line-2 ~ .HyperMD-list-line:hover)):has(~ :is(.HyperMD-list-line-3, .HyperMD-list-line-4, .HyperMD-list-line-5, .HyperMD-list-line-6):hover),
.HyperMD-list-line-3:not(:has(~ .HyperMD-list-line-3 ~ .HyperMD-list-line:hover)):has(~ :is(.HyperMD-list-line-4, .HyperMD-list-line-5, .HyperMD-list-line-6):hover),
.HyperMD-list-line-4:not(:has(~ .HyperMD-list-line-4 ~ .HyperMD-list-line:hover)):has(~ :is(.HyperMD-list-line-5, .HyperMD-list-line-6):hover),
.HyperMD-list-line-5:not(:has(~ .HyperMD-list-line-5 ~ .HyperMD-list-line:hover)):has(~ :is(.HyperMD-list-line-6):hover) {
  background-color: color-mix(in srgb, var(--color-accent) 20%, transparent);
}

If CSS-only solution to draw guidelines instead of highlight is possible - it will get significantly hairier than this.

20

hey @KillyMXI that seems interesting, how would that look like in action? can u share some screenshot or screenrecord?

21

Here it is:
guideline-1

4 Likes
22

Guess what,
it was a nice challenge.

list-threading list-highlight list-both

I also provide an alternative highlight version with different colors per indentation level. (I find it rather intrusive though, so would either further reduce colors alpha or keep it off edit: I reduced the alpha).

Notes:

  • I’m using the default theme, I haven’t tried with any other themes. It’s up to you if you want to make it work with different styles (edit: seems to work fine with Minimal theme at least);
  • I tried my best to make it work with different font sizes in the default theme though;
  • I only made styles for 6 indentation levels. I wasn’t happy to invent more detailed yet still sequential and relatively distinct gradient. And when you go beyond that - it is likely a time to break down the list into heading sections or files anyway;
  • Turns out using spaces instead of tabs for indentation is kind of broken and most likely impossible to fix due to bad HTML produced by the editor. So, only compatible with tabs, or you have to edit offset variables according to indentation you use.

Until I have a proper place (and time) to share my Obsidian stuff, these CSS snippets will live in a Gist there, so people will always see the most up to date version in case I made any changes:

13 Likes
23

Ok wow. U definitely aced it. This is great and I love it.

1 Like
24

I accidentally used a variable from another snippet, causing some issue for those only using mine. Now fixed in the gist above, along with few small other things.

I don’t know how to align threading lines to bullet points/checkboxes both when list item contains tall content such as images and when it contains long wrapped text (or even both). I keep the current behavior, as least bad default in my opinion, but I added calculations for those who might prefer it the other way around - would require swapping the order of commented lines in 3 places.

25

Hi, love how you’ve managed to integrate bullet threading into Obsidian! Just had a question re: your latest CSS for the same. Could you please elaborate on “the swapping of commented lines in 3 places”?

I mostly work with long-form text and if any of the bulleted points are longer than a line then the threads are not aligned with the bullet, instead converging at the base of the last line of the indented text. Have attached a picture showcasing the same (As you can see the first 3 points align perfectly, the problem only arises with the 4th and 5th blocks, both being longer than a single line).

Cheers

Sam01
Sam013426×1137 176 KB

26

I will likely make the default behavior to prioritize long text – I also realize now that long text is way more common.

I may also try to figure how to make customization easier, probably with Style Settings plugin.

How to do this modification before I get to it:

  • Find 3 places marked with following comments:
      /* priority to wrapped text */
  ... foo ...
  /* priority to images */
  ... bar ...
  • Make it look like this (what comes last - wins):
      /* priority to images */
  ... bar ...
  /* priority to wrapped text */
  ... foo ...
    or like this:
      /* priority to wrapped text */
  ... foo ...
27

Works perfectly now, thanks a ton!

28

This is beautifully done. thanks.

But I’m running into an issue where points with multiple lines leave a blank line at the top:

image

I tried the fix you provided NKS but it didn’t help in this case. I’ve also tried changing themes and disabling all my snippets other than the ones you provided.

Any idea what’s going on?

edit: see recent post

30

This is beautifully done. thanks.

But I’m running into an issue where points with multiple lines leave a blank line at the top:

image

I tried the fix you provided NKS but it didn’t help in this case. I’ve also tried changing themes and disabling all my snippets other than the ones you provided.

Any idea what’s going on?

edit: see recent post

Huh. I switched off all plugins and snippets and the bug remains.

BUT this “bug” actually was caused by my use of a single long word “ssssssssssssssssssssssssssssssssssssssssssssss”

It seems to be causing a line skip, which I’ll be honest is kind of weird default behavior. Like, why does it start wrapping subsequent lines but not the first line? Seems like an issue with Obsidian, but I’m not going to take it up with anyone since I don’t have a use case for it.

If I break that line up as if it’s words, it looks fine.