Weird bug with text selection

v2: Troubleshooting
1

I am running into a weird bug with text selection, using latest Firefox (or Zen Browser). Both based on Firefox 138.0.1, running on MacOS.

Say I have a note with the following text:

## Multi list bug
- I have a list
- with items in it

## Yet another list
- Weird
- Strange
- Bug

## Another list
- Blah
- Blah
- Blah

## Then a sub list
- With one item
- And another item
- Foobar item
- And yet another item

Then, if I click in any list, in any bullet item, except for the last one: my cursor is moved where I clicked, exactly as I expect.

But if I do the same in the last list, then depending on my initial position, and the target position of the click, my cursor sometimes ends up in the correct location OR at the end of the last list.

This is pretty annoying, because then I can’t easily update a bullet item in the middle of the last list.

I don’t know why, but it seems a few things seem to affect this bug:

  • the more lists I create before the last one, the more bullet items are affected by the bug in the final list
  • if I add empty lines after the final list, it seems to help a bit, and sometimes allow me to click in the last list’s bullet items. Of course this is not a nice workaround :slight_smile:

Are others experiencing this? I’ll create a github issue too, just in case…

[edit] text selection sometimes broken with multiple lists · Issue #1384 · silverbulletmd/silverbullet · GitHub

2

Do you have any custom space-style?

3

I do!

#sb-root {
  /* Make the editor take most of the screen */
  --editor-width: min(100%, 1000px);
  line-height: 1.5em;
}

.sb-line-h1, .sb-line-h2, .sb-line-h3, .sb-line-h4, .sb-line-h5, .sb-line-h6,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ui-font);
  margin-top: 1rem;
}

Is the header margin causing all this trouble?

[edit] confirmed, if i remove this part, the bug doesn’t happen anymore :confused:

.sb-line-h1, .sb-line-h2, .sb-line-h3, .sb-line-h4, .sb-line-h5, .sb-line-h6,
4

I had run into a similar issue trying to add some vertical space around header tags. I think CodeMirror generally frowns on using vertical margins, at least in widgets.

Does using padding instead of margin prevent some of these issues? You might have to be hyper-specific with the CSS selector to get it to apply:

#sb-main .cm-editor .cm-line.sb-line-h1, #sb-main .cm-editor .cm-line.sb-line-h2, #sb-main .cm-editor .cm-line.sb-line-h3, #sb-main .cm-editor .cm-line.sb-line-h4, #sb-main .cm-editor .cm-line.sb-line-h5, #sb-main .cm-editor .cm-line.sb-line-h6 {
  padding-top: 1rem;
}

(I used the inspect tool to find the CSS selector applying padding to sb-line-h1.)

5

Thanks, indeed padding seems to work. I haven’t used the CSS excerpt you’ve shown, but tweaked the CSS line in my selector from:

.sb-line-h1, .sb-line-h2, .sb-line-h3, .sb-line-h4, .sb-line-h5, .sb-line-h6,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ui-font);
  margin-top: 1rem;
}

to

.sb-line-h1, .sb-line-h2, .sb-line-h3, .sb-line-h4, .sb-line-h5, .sb-line-h6,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ui-font);
  padding-top: 1rem !important;
}

!important FTW :partying_face: Not sure if using margin-top and this causing issues with selection is a bug in Silverbullet and if that needs fixing, though.

1 Like
6

I always forget about !important, nice!