FIX: More fixes to the cell editor

* Font family is Inter, font size 13, line-width 22
* Correct vertical align for multiline text
* Entering multiline text sets the height of the row (!)

webapp/src/components/WorksheetCanvas/worksheetCanvas.ts

@@ -492,9 +492,11 @@ export default class WorksheetCanvas {
     context.clip();
 
     // Is there any better parameter?
-    const lineHeight = fontSize;
+    const lineHeight = 22;
+    const lines = fullText.split("\n");
+    const lineCount = lines.length;
 
-    fullText.split("\n").forEach((text, line) => {
+    lines.forEach((text, line) => {
       const textWidth = context.measureText(text).width;
       let textX: number;
       let textY: number;
@@ -510,14 +512,18 @@ export default class WorksheetCanvas {
         textX = padding + x + textWidth / 2;
       }
       if (verticalAlign === "bottom") {
-        textY = y + height - fontSize / 2 - verticalPadding;
+        textY =
+          y +
+          height -
+          fontSize / 2 -
+          verticalPadding +
+          (line - lineCount + 1) * lineHeight;
       } else if (verticalAlign === "center") {
-        textY = y + height / 2;
+        textY = y + height / 2 + (line + (1 - lineCount) / 2) * lineHeight;
       } else {
         // aligned top
-        textY = y + fontSize / 2 + verticalPadding;
+        textY = y + fontSize / 2 + verticalPadding + line * lineHeight;
       }
-      textY += line * lineHeight;
       context.fillText(text, textX, textY);
       if (style.font) {
         if (style.font.u) {
@@ -1102,8 +1108,7 @@ export default class WorksheetCanvas {
 
   private drawCellEditor(): void {
     const cell = this.workbookState.getEditingCell();
-    const [selectedSheet, selectedRow, selectedColumn] =
-      this.model.getSelectedCell();
+    const selectedSheet = this.model.getSelectedSheet();
     const { editor } = this;
     if (!cell || cell.sheet !== selectedSheet) {
       // If the editing cell is not in the same sheet as the selected sheet
@@ -1112,7 +1117,7 @@ export default class WorksheetCanvas {
       editor.style.top = "-9999px";
       return;
     }
-    const { sheet, row, column } = cell;
+    const { row, column } = cell;
     // const style = this.model.getCellStyle(
     //   selectedSheet,
     //   selectedRow,

webapp/src/components/editor/editor.tsx

@@ -95,13 +95,11 @@ const Editor = (options: EditorOptions) => {
 
   const { onKeyDown } = useKeyDown({
     model,
-    text,
     onEditEnd,
     onTextUpdated,
     workbookState,
     textareaRef,
     setStyledFormula,
-    setText,
   });
 
   useEffect(() => {
@@ -124,6 +122,10 @@ const Editor = (options: EditorOptions) => {
       if (scrollWidth > editorWidth - 5) {
         cell.editorWidth = scrollWidth + 10;
       }
+      const scrollHeight = formulaRef.current.scrollHeight;
+      if (scrollHeight > editorHeight) {
+        cell.editorHeight = scrollHeight;
+      }
     }
   }, [text, workbookState]);
 
@@ -203,6 +205,8 @@ const Editor = (options: EditorOptions) => {
         overflow: "hidden",
         display: showEditor,
         background: "#FFF",
+        fontFamily: "Inter",
+        fontSize: "13px"
       }}
     >
       <div

webapp/src/components/editor/useKeyDown.ts

@@ -6,12 +6,10 @@ import getFormulaHTML, { isInReferenceMode } from "./util";
 
 interface Options {
   model: Model;
-  text: string;
   onEditEnd: () => void;
   onTextUpdated: () => void;
   workbookState: WorkbookState;
   textareaRef: RefObject<HTMLTextAreaElement>;
-  setText: (s: string) => void;
   setStyledFormula: (html: JSX.Element[]) => void;
 }
 
@@ -20,12 +18,10 @@ export const useKeyDown = (
 ): { onKeyDown: (event: KeyboardEvent) => void } => {
   const {
     model,
-    text,
     onEditEnd,
     onTextUpdated,
     workbookState,
     textareaRef,
-    setText,
     setStyledFormula,
   } = options;
   const onKeyDown = useCallback(
@@ -42,13 +38,16 @@ export const useKeyDown = (
             // new line
             const start = textarea.selectionStart;
             const end = textarea.selectionEnd;
-            const newText = `${text.slice(0, start)}\n${text.slice(end)}`;
-            setText(newText);
+            const value = textarea.value;
+            const newText = `${value.slice(0, start)}\n${value.slice(end)}`;
+            cell.text = newText;
+            workbookState.setEditingCell(cell);
             setTimeout(() => {
               textarea.setSelectionRange(start + 1, start + 1);
             }, 0);
             event.stopPropagation();
             event.preventDefault();
+            onTextUpdated();
             return;
           }
           event.stopPropagation();
@@ -408,8 +407,6 @@ export const useKeyDown = (
     },
     [
       model,
-      text,
-      setText,
       setStyledFormula,
       onEditEnd,
       onTextUpdated,