Replaced Input with Div + contenteditable

[davidfig]

fixes #432

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
quadratic	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 3, 2023 1:37pm

[jimniels]

🐞 Changing formatting while you're editing characters in the cell works but doesn't apply to the saved cell when you hit enter.

For example, take a cell and begin editing it and hit CMD + I to make the text italic. It appears italic in the contenteditable but once you hit "ENTER" the saved value doesn't have italics applied (presumably it's only applying the italics to the contenteditable element and not the attribute of the cell itself)

You can see this play out if you try to apply formatting to only certain parts of the text of a cell but not others

I looked at excel (on web) to see what they do. They do appear to allow formatting to independent parts of text in a cell, though some of their formatting gets lost between editing/saving change too ha

Sheets also allows formatting to independent pieces of text

I imagine if we're not going to (initially) allow people to format independent pieces of text in a cell, we should disable the ability to do this in the contenteditable block.

Edit: after discussing, we think it would be best to just have commands like CMD + I or B just apply formatting to the entire cell and Quadratic won't support discrete formatting on pieces of text within a cell for now.

[jimniels]

🐞 Edit a cell and, before you hit enter, click on another cell. It copies your changes to the new cell (and reverts the changes on the one you had in focus)

[jimniels]

📝 Playing with this functionality in Excel and Sheets, I noticed that when you begin to edit a cell, the regular cursor highlight disappears and the cursor style outline applies around the entire box that's in focus.

For example, notice how in Sheets the little square in the bottom right disappears when you're editing (so you can't "drag/autocomplete" while editing a cell). The active cell gets highlighted with the style of the cursor but without the draggable circle.

Same thing happens in Excel:

In quadratic, however, as you edit, the draggable cursor stays on screen and stays fixed on the original width of the cell regardless of how much text is being entered.

I feel like I would expect quadratic to act similar to these other apps, e.g. when a cell becomes active for editing, the "drag" cursor disappears and the entire length of the input gets the focus style of the active cell. Example mockup:

[jimniels]

🐞 (small) there's a tiny but noticeable overflow when you edit a cell with a background that happens when you go into "edit" mode on a cell. Note how, upon entering to edit the cell, the background color overflows the width of the cell.

[jimniels]

🐞 This comment seems to have been fixed in most places, but I am still seeing it in a few contexts. Like this one: this is from the default example file.

When you click to edit the cell, the background goes longer than the cell

Honestly doesn't seem like the biggest of deals, as it's working as expected across most cells (click to edit, and it's the size of the current cell) but in this one particular case it's longer than the current cell for some reason.

Edit: it looks like this happens with columns you resize. If you don't resize a column, the width of the input is the width of the cell. Once you resize, the width of the input is slightly off the width of the cell.

[jimniels]

🐞 When you add spaces to the beginning of a cell, it's like the spaces aren't the same width between the cell input and the cell on the grid (when you go to edit it, the spacing isn't the same width)

Update: this is working if i manually add the spaces, but for files that already have the spaces it seems to get lost? For example, open the Default example file and try editing one of those cells that has spaces at the beginning. Note how the spaces get erased. But if you add them back, then they don't disappear, even on subsequent edits.

[jimniels]

🐞 Selecting just one part of text and formatting to italic changes the whole cell (this is good). But then when you commit those changes to the cell, then go back and select the same text and toggle italics again, it changes everything in that cell except what you had highlighted (and then changes it all to not italic when you hit 'Enter')

Update this doesn't appear to be working for me. I can still select a cell, highlight a piece of text, and use CMD + B and it doesn't change the entire input string (but once i click outside the cell input and the changes go to the grid, you can see it does work).

[jimniels]

🐞 When you have two cells next to each other and the first one's length is longer than itself and the one next to it, then when you edit the one next to it, the first one's overflow becomes visible.

That seemed like a bug to me, but I double checked excel/sheets to see how they do it and they don't allow the clipping of other cells to become visibile when you're editing a cell. So it is a bug in my mind. This is what I would expect (from Sheets):

---

Edit: the clipping seems to have disappeared entirely on this because now it looks like this when two cells are next to each other:

And when you edit the second cell, you still see the contents of the cell on the left overflow

[HactarCE]

Bug (I think): Ctrl+scroll doesn't zoom in when my cursor is over the ContentEditable

EDIT: Excel doesn't allow ctrl+scroll to zoom at all when editing a cell. Sheets doesn't allow ctrl+scroll to zoom ever, but when hovering over a cell I can trigger the browser's zoom.

[jimniels]

Zooming while your cursor is over the cell input is doesn't appear to be specific to this PR. It's happening in prod today. We can probably file a separate issue for that apart from this chunk of work.

[jimniels]

I'm still seeing these two bugs:

1. This comment
2. This comment