Editor panel from @codemirror/view on a side

I was reading CodeMirror Panel Example and I was wondering, what would be the best way to show the panel in the editor on the side?

I would like to create an emoji picker, similar to the one in Facebook:

And I think I would like the in a pane with tabs, and display emojis in a grid. Autocomplete is not good for this, since it displays them in a list; and Editor panels are only on top or bottom.

What would be the best way to create such emoji picker?

The panel extension doesn’t support this, but you should be able to write a custom plugin that adds a DOM element as a sibling of the gutter, which works similarly to the panel extension, to get this effect.

1 Like

Should the custom DOM element be {position:absolute}?

You’ll probably want to let it be part of the flexbox and take up space. Or, if it needs to overlay the code, yeah, position absolutely.

1 Like