Editor panel from @codemirror/view on a side

1

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:
image

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?

2

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
3

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

4

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