diff --git a/webapp/src/components/WorksheetCanvas/worksheetCanvas.ts b/webapp/src/components/WorksheetCanvas/worksheetCanvas.ts index e624fd5..91ddcbe 100644 --- a/webapp/src/components/WorksheetCanvas/worksheetCanvas.ts +++ b/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; diff --git a/webapp/src/components/editor/editor.tsx b/webapp/src/components/editor/editor.tsx index 10e29a5..86d808a 100644 --- a/webapp/src/components/editor/editor.tsx +++ b/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(null); const maskRef = useRef(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 (
void; workbookState: WorkbookState; textareaRef: RefObject; - 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 }; }; diff --git a/webapp/src/components/editor/util.tsx b/webapp/src/components/editor/util.tsx index 91f6054..85f9487 100644 --- a/webapp/src/components/editor/util.tsx +++ b/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({formula.slice(start, end)}); } } - // If there is a reference range add it at the end - if (referenceRange !== "") { - html.push({referenceRange}); - } html = [=].concat(html); } else { html = [{text}]; diff --git a/webapp/src/components/worksheet.tsx b/webapp/src/components/worksheet.tsx index 3e10f15..0c782ad 100644 --- a/webapp/src/components/worksheet.tsx +++ b/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: { { props.refresh(); }}