hyperfiddle-2020 icon indicating copy to clipboard operation
hyperfiddle-2020 copied to clipboard

Datagrid cell floating explorations

Open dustingetz opened this issue 6 years ago • 1 comments

Inspiration: a text cell that floats a widget when focused

image

My first whack, I tried to have a codemirror in a grid cell, and then i used CSS to expand/float the codemirror inline. The problem is that you need window clipping detection, and if you have to "nudge" it, the textarea has to jump (jumping your cursor with it). Also, edge detection is hard. Using ReactTinyPopover, it is very easy to float a codemirror, but it had two problems: 1) the codemirror is recreated losing state (we would need to detach the codemirror element and reparent it in the popover to preserve cursor state); 2) ReactTinyPopover needs to be forked to measure the CodeMirror as the dom is not quite what ReactTinyPopover expects (due to the codemirror being the second element after a hidden textarea which is what the popover measures with a firstChild call)

I see now in this spreadsheet that a second whack should just have a text renderer and position a widget underneath, this means no cursor state is lost – but does that really help with CodeMirror case? Maybe it is fine for a while.

If all grids have only text in their cells, what does that mean for admin dashboards like the domain editor?

image

image

dustingetz avatar Dec 14 '18 14:12 dustingetz

So options work out – they become autocompletes and its a floaty widget.

dustingetz avatar Dec 14 '18 14:12 dustingetz