Plugin for Bullet Threading

[sofiaantonieta]

Hey!

I couldn’t find any thread related to what I need.
The idea it is to have the same bullet connection that there is in LOGSEQ for the bullets.
I work a lot with bullets and indentations, it will pretty helpful to have this kind of guide for this cases.

If there’s something that already exists for this kind of request, let me know!

[andreirs]

Happy to see that I’m not the only one who is missing this functionality from Logseq

Unfortunately, I did not find a solution, more a workaround…

Since I use bullet list style only for my daily notes, I share the vault with Logseq and edit the file using their editor. You would need to keep some formating settings in sync (e.g. tab size), but I would not consider it overhead.

Would love to hear if someone has a solution in Obsidian.

[berot3]

I like obsidian more, and would like to see this feature added! Anyone?

[nil]

it’s one of the great logseq features, the plugin for bullet threading is a wrapper on the dev theme in logseq’s marketplace ,
would love something similar thing in obsidian

[gaopangpang]

+1 I need for this.

[gaopangpang]

1.1.9 update to electron 21

some one could add this features

[Luk]

Would also love to have this feature! The css-snippet in this thread works for the outline. Could someone with css-knowledge adapt it for the editor?

[thais]

~In a world full of nested knowledge the bullet threading plugin emerges as a must~

Guys I fully moved to Obsidian from Logseq but this incredible plugin named Bullet Threading is the only thing I could not find a corresponding solution yet.

I read it could be resolved with a CSS Snippet, but due to my lack of knowledge (and everytime I try to implement a snippet on my vault it fails, I don’t know it just doesn’t work none of them) I’m unable to address this matter.

Can somebody help this poor little needy girl? I have ADHD and this plugin was so handy to keep my focus

Bullet Threading works as it follows below:

[thais]

Good news people!!! The amazing @FirelsGood cracked the game and built the following snippet that totally replicates Bullet Threading plugin!

I’m going to leave the link to his message with the mentioned Css Snippet code below:

Discord - A New Way to Chat with Friends & Communities

[CawlinTeffid]

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)

[chintuosp]

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?

[CawlinTeffid]

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?

[chintuosp]

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

Any suggestions?

[CawlinTeffid]

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

[efemkay]

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.

[ycb]

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.

[Aleph]

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

[jmbenedetto]

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

[KillyMXI]

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.

[efemkay]

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