FIX[Editor]: More simplifications and fixes

webapp/src/components/WorksheetCanvas/worksheetCanvas.ts

@@ -1,5 +1,6 @@
 import type { Model } from "@ironcalc/wasm";
 import { columnNameFromNumber } from "@ironcalc/wasm";
+import { getColor } from "../editor/util";
 import type { Cell } from "../types";
 import type { WorkbookState } from "../workbookState";
 import {
@@ -17,7 +18,6 @@ import {
   headerTextColor,
   outlineColor,
 } from "./constants";
-import { getColor } from "../editor/util";
 
 export interface CanvasSettings {
   model: Model;

webapp/src/components/editor/editor.tsx

@@ -77,9 +77,6 @@ const Editor = (options: EditorOptions) => {
     options;
 
   const [text, setText] = useState(originalText);
-  const [styledFormula, setStyledFormula] = useState(
-    getFormulaHTML(model, text, "").html,
-  );
 
   const formulaRef = useRef<HTMLDivElement>(null);
   const maskRef = useRef<HTMLDivElement>(null);
@@ -87,11 +84,10 @@ const Editor = (options: EditorOptions) => {
 
   useEffect(() => {
     setText(originalText);
-    setStyledFormula(getFormulaHTML(model, originalText, "").html);
     if (textareaRef.current) {
       textareaRef.current.value = originalText;
     }
-  }, [originalText, model]);
+  }, [originalText]);
 
   const { onKeyDown } = useKeyDown({
     model,
@@ -99,20 +95,10 @@ const Editor = (options: EditorOptions) => {
     onTextUpdated,
     workbookState,
     textareaRef,
-    setStyledFormula,
   });
 
-  useEffect(() => {
-    if (text.length === 0) {
-      // noop
-    }
-  }, [text]);
-
   useEffect(() => {
     const cell = workbookState.getEditingCell();
-    if (text.length === 0) {
-      // noop, just to keep the linter happy
-    }
     if (!cell) {
       return;
     }
@@ -127,7 +113,10 @@ const Editor = (options: EditorOptions) => {
         cell.editorHeight = scrollHeight;
       }
     }
-  }, [text, workbookState]);
+    if (type === cell.focus) {
+      textareaRef.current?.focus();
+    }
+  });
 
   const onChange = useCallback(() => {
     const textarea = textareaRef.current;
@@ -140,7 +129,7 @@ const Editor = (options: EditorOptions) => {
     cell.referencedRange = null;
     cell.cursorStart = textarea.selectionStart;
     cell.cursorEnd = textarea.selectionEnd;
-    const styledFormula = getFormulaHTML(model, cell.text, "");
+    const styledFormula = getFormulaHTML(model, value);
     if (value === "" && type === "cell") {
       // When we delete the content of a cell we jump to accept mode
       cell.mode = "accept";
@@ -149,7 +138,6 @@ const Editor = (options: EditorOptions) => {
 
     workbookState.setActiveRanges(styledFormula.activeRanges);
     setText(cell.text);
-    setStyledFormula(styledFormula.html);
 
     onTextUpdated();
 
@@ -167,7 +155,6 @@ const Editor = (options: EditorOptions) => {
     }
     if (textareaRef.current) {
       textareaRef.current.value = "";
-      setStyledFormula(getFormulaHTML(model, "", "").html);
     }
 
     // This happens if the blur hasn't been taken care before by
@@ -187,14 +174,9 @@ const Editor = (options: EditorOptions) => {
 
   const cell = workbookState.getEditingCell();
 
-  // If we are the focus, the get it
-  if (cell) {
-    if (type === cell.focus) {
-      textareaRef.current?.focus();
-    }
-  }
-
   const showEditor = cell !== null || type === "formula-bar" ? "block" : "none";
+  const mtext = cell ? workbookState.getEditingText() : originalText;
+  const styledFormula = getFormulaHTML(model, mtext).html;
 
   return (
     <div

webapp/src/components/editor/useKeyDown.ts

@@ -2,7 +2,7 @@ import type { Model } from "@ironcalc/wasm";
 import { type KeyboardEvent, type RefObject, useCallback } from "react";
 import { rangeToStr } from "../util";
 import type { WorkbookState } from "../workbookState";
-import getFormulaHTML, { isInReferenceMode } from "./util";
+import { isInReferenceMode } from "./util";
 
 interface Options {
   model: Model;
@@ -10,20 +10,13 @@ interface Options {
   onTextUpdated: () => void;
   workbookState: WorkbookState;
   textareaRef: RefObject<HTMLTextAreaElement>;
-  setStyledFormula: (html: JSX.Element[]) => void;
 }
 
 export const useKeyDown = (
   options: Options,
 ): { onKeyDown: (event: KeyboardEvent) => void } => {
-  const {
-    model,
-    onEditEnd,
-    onTextUpdated,
-    workbookState,
-    textareaRef,
-    setStyledFormula,
-  } = options;
+  const { model, onEditEnd, onTextUpdated, workbookState, textareaRef } =
+    options;
   const onKeyDown = useCallback(
     (event: KeyboardEvent) => {
       const { key, shiftKey, altKey } = event;
@@ -80,7 +73,6 @@ export const useKeyDown = (
           model.setSelectedCell(cell.row, cell.column + sign);
           if (textareaRef.current) {
             textareaRef.current.value = "";
-            setStyledFormula(getFormulaHTML(model, "", "").html);
           }
           event.stopPropagation();
           event.preventDefault();
@@ -164,7 +156,6 @@ export const useKeyDown = (
           }
           if (textareaRef.current) {
             textareaRef.current.value = "";
-            setStyledFormula(getFormulaHTML(model, "", "").html);
           }
 
           onEditEnd();
@@ -233,7 +224,6 @@ export const useKeyDown = (
           }
           if (textareaRef.current) {
             textareaRef.current.value = "";
-            setStyledFormula(getFormulaHTML(model, "", "").html);
           }
 
           onEditEnd();
@@ -307,7 +297,6 @@ export const useKeyDown = (
           }
           if (textareaRef.current) {
             textareaRef.current.value = "";
-            setStyledFormula(getFormulaHTML(model, "", "").html);
           }
 
           onEditEnd();
@@ -377,7 +366,6 @@ export const useKeyDown = (
           }
           if (textareaRef.current) {
             textareaRef.current.value = "";
-            setStyledFormula(getFormulaHTML(model, "", "").html);
           }
 
           onEditEnd();
@@ -405,14 +393,7 @@ export const useKeyDown = (
         }
       }
     },
-    [
-      model,
-      setStyledFormula,
-      onEditEnd,
-      onTextUpdated,
-      workbookState,
-      textareaRef.current,
-    ],
+    [model, onEditEnd, onTextUpdated, workbookState, textareaRef.current],
   );
   return { onKeyDown };
 };

webapp/src/components/editor/util.tsx

@@ -102,7 +102,6 @@ export function getColor(index: number, alpha = 1): string {
 function getFormulaHTML(
   model: Model,
   text: string,
-  referenceRange: string,
 ): { html: JSX.Element[]; activeRanges: ActiveRange[] } {
   let html: JSX.Element[] = [];
   const activeRanges: ActiveRange[] = [];
@@ -180,10 +179,6 @@ function getFormulaHTML(
         html.push(<span key={index}>{formula.slice(start, end)}</span>);
       }
     }
-    // If there is a reference range add it at the end
-    if (referenceRange !== "") {
-      html.push(<span key="reference">{referenceRange}</span>);
-    }
     html = [<span key="equals">=</span>].concat(html);
   } else {
     html = [<span key="single">{text}</span>];

webapp/src/components/worksheet.tsx

@@ -54,8 +54,6 @@ function Worksheet(props: {
 
   const ignoreScrollEventRef = useRef(false);
 
-  const [originalText, setOriginalText] = useState("");
-
   const { model, workbookState, refresh } = props;
   const [clientWidth, clientHeight] = useWindowSize();
 
@@ -330,7 +328,7 @@ function Worksheet(props: {
         onDoubleClick={(event) => {
           // Starts editing cell
           const { sheet, row, column } = model.getSelectedView();
-          const text = model.getCellContent(sheet, row, column) || "";
+          const text = model.getCellContent(sheet, row, column);
           const editorWidth =
             model.getColumnWidth(sheet, column) * COLUMN_WIDTH_SCALE;
           const editorHeight = model.getRowHeight(sheet, row) * ROW_HEIGH_SCALE;
@@ -348,9 +346,8 @@ function Worksheet(props: {
             editorWidth,
             editorHeight,
           });
-          setOriginalText(text);
           event.stopPropagation();
-          event.preventDefault();
+          // event.preventDefault();
           props.refresh();
         }}
       >
@@ -358,7 +355,7 @@ function Worksheet(props: {
         <CellOutline ref={cellOutline} />
         <EditorWrapper ref={editorElement}>
           <Editor
-            originalText={workbookState.getEditingText() || originalText}
+            originalText={workbookState.getEditingText()}
             onEditEnd={(): void => {
               props.refresh();
             }}