How can I fix incorrect cell offsets?

Community Help
1

I’ve got a notebook that loads CodeMirror into one of the first cells. Unfortunately this results in every following cell content being slightly misplaced:

image
image2022×914 71.6 KB

I’d appreciate any pointers on how to fix this. Notebook link:

Thanks!

1 Like
2

It looks like changing the margin: -14px to margin: 0 -14px 0 -14px fixes this?

viewof editor = {
  const view = html`<div>`;
  view.appendChild(html`<style>
.CodeMirror {
  -background: hsl(200, 100%, 98%) !important;
  margin: 0 -14px 0 -14px; padding: 6px 10px;
  ;
}`);
// etc.

(Assuming that you just wanted to expand the editor’s width?)

1 Like
3

Ha, had totally forgotten about that CSS snippet. Thanks!

4

Oooh, how does CodeMirror compare to Ace in terms of how lightweight it is? Because I couldn’t get CM to work initially and that’s why I used Ace instead:

… which works great, but I also think it’s a bit overkill for most of my use-cases. Plus it’s a bit old (still actively maintained though).

Let me know when you publish the notebook, I’ll link to it as an alternative from mine (especially if it’s more lightweight - I don’t want to contribute to the website obesity crisis any more than I have to)

1 Like
5

I have no idea, to be honest. The notebook exists only because I wanted to mimic Observable’s editor and all the CodeMirror examples I found used some sort of inelegant workaround or didn’t expose a clean API.

I had planned to let it sit and rot for a while until can take a stab at integrating Svelte’s REPL bundler. If you can offer some feedback on the current state (e.g. what you’d like to see in a more polished version of the notebook) I’d happy to release it earlier though.

2 Likes
6

Heh, so it’s not unlike the reasons I had to create an Ace notebook :sweat_smile:. A quick internet search suggests they’re quite comparable though, although Ace (at least how I use it in my notebook) seems to download a few hundred KiB more.

If you can offer some feedback on the current state (e.g. what you’d like to see in a more polished version of the notebook) I’d happy to release it earlier though.

Well, first of all I just stole a bit of the style you used in your viewof approach to clean up my Ace notebook, thanks for that!

I don’t know, I just changed the one with Ace to include an example of an editor only updates on Shift+Enter, and also has a “play” button-based trigger for mobile, to make it more like the Observable cells. Annoyingly, there are some weird focus trapping issues with that particular approach on mobile for now, the trick I use probably goes against Observable best practices somehow.

Anyway, maybe that would be a nice addition? Other than that it already looks pretty nice

1 Like