BlockWrapper Styling

v6
1

I was trying out the new BlockWrapper for decorations cross multiple lines, it works great!

image
image930×1020 102 KB

One minor “issue” I noticed is that it’s quite challenging to add background colors to it, simply adding a background color would hide the selection layer because it has a bigger z-index.

Am I missing something obvious or the correct way to achieve that (like a rounded rect for code blocks) is to leverage pseudo-classes like:

.cm-md-codeBlockWrapper {
  position: relative;
}

.cm-md-codeBlockWrapper::before {
  position: absolute;
  z-index: -3;
  content: '';
  inset: 0;
  background-color: #f5f5f5;
  border-radius: 6px;
}

As always, thanks for your great work!

2

Yes, this is a thing with all backgrounds in CodeMirror, including line elements and inline marks—you want to make them as transparent as possible, so that other elements behind them remain visible.

1 Like
3

Thanks for the explanation!