PR Fixes

Fixes editor behavior when formula overflows the input.

v3/src/components/common/edit-formula-modal.scss

@@ -1,8 +1,18 @@
 @use "../vars";
+$edit-formula-modal-min-height: 180;
+$edit-formula-modal-min-height-px: #{$edit-formula-modal-min-height}px;
+$edit-formula-modal-min-width: 400;
+$edit-formula-modal-min-width-px: #{$edit-formula-modal-min-width}px;
+
+// https://mattferderer.com/use-sass-variables-in-typescript-and-javascript
+:export {
+  editFormulaModalMinHeight: $edit-formula-modal-min-height;
+  editFormulaModalMinWidth: $edit-formula-modal-min-width;
+}
 
 .codap-modal-content {
-  min-height: 180px;
-  min-width: 400px;
+  min-height: $edit-formula-modal-min-height-px;
+  min-width: $edit-formula-modal-min-width-px;
 
   .formula-modal-body {
     cursor: default;
@@ -32,9 +42,8 @@
         width: 100%;
 
         .formula-editor-input {
-          height: 100%;
-          width: 100%;
-          flex-grow: 1;
+          width: calc(100% - 50px);
+
           .cm-editor {
             height: 100%;
             width: 100%;

v3/src/components/common/edit-formula-modal.scss.d.ts

@@ -0,0 +1,9 @@
+// https://mattferderer.com/use-sass-variables-in-typescript-and-javascript
+export interface IEditFormulaModalShared {
+  editFormulaModalMinHeight: number
+  editFormulaModalMinWidth: number
+}
+
+export const styles: IEditFormulaModalShared
+
+export default styles

v3/src/components/common/edit-formula-modal.tsx

@@ -1,5 +1,5 @@
 import {
-  Box, Button, Flex, FormControl, FormLabel, Input, ModalBody, ModalCloseButton, ModalFooter, ModalHeader, Tooltip
+  Box, Button, Flex, FormControl, FormLabel, Input, ModalBody, ModalFooter, Tooltip
 } from "@chakra-ui/react"
 import React, { useCallback, useEffect, useState } from "react"
 import { observer } from "mobx-react-lite"
@@ -13,7 +13,7 @@ import { InsertFunctionMenu } from "./formula-insert-function-menu"
 import { InsertValuesMenu } from "./formula-insert-values-menu"
 import ResizeHandle from "../../assets/icons/icon-corner-resize-handle.svg"
 
-import "./edit-formula-modal.scss"
+import styles from './edit-formula-modal.scss'
 
 interface IProps {
   applyFormula: (formula: string) => void
@@ -29,14 +29,19 @@ interface IProps {
 export const EditFormulaModal = observer(function EditFormulaModal({
   applyFormula, formulaPrompt, isOpen, onClose, titleInput, titleLabel, titlePlaceholder, value
 }: IProps) {
-  const minWidth = 400
-  const minHeight = 180
+  const minWidth = +styles.editFormulaModalMinWidth
+  const minHeight = +styles.editFormulaModalMinHeight
+  const headerHeight = 36
+  const footerHeight = 56
+  const insertButtonsHeight = 35
+
+  const modalContentRef = React.useRef<HTMLDivElement>(null)
   const [showValuesMenu, setShowValuesMenu] = useState(false)
   const [showFunctionMenu, setShowFunctionMenu] = useState(false)
   const formulaEditorState = useFormulaEditorState(value ?? "")
   const { formula, setFormula } = formulaEditorState
-  const [dimension, setDimension] = useState({ width: minWidth, height: minHeight })
-
+  const [dimensions, setDimensions] = useState({ width: minWidth, height: minHeight })
+  const editorHeight = dimensions.height - headerHeight - footerHeight - insertButtonsHeight
 
   useEffect(() => {
     setFormula(value || "")
@@ -52,7 +57,7 @@ export const EditFormulaModal = observer(function EditFormulaModal({
     setShowFunctionMenu(false)
     setFormula(value || "")
     onClose?.()
-    setDimension({ width: minWidth, height: minHeight })
+    setDimensions({ width: minWidth, height: minHeight })
   }
 
   const handleModalWhitespaceClick = () => {
@@ -97,9 +102,9 @@ export const EditFormulaModal = observer(function EditFormulaModal({
       e.currentTarget.setPointerCapture(e.pointerId)
     }
 
-    const modalRect = document.querySelector(".codap-modal-content")?.getBoundingClientRect()
-    const startWidth = modalRect?.width ?? dimension.width
-    const startHeight = modalRect?.height ?? dimension.height
+    const modalRect = modalContentRef.current?.getBoundingClientRect()
+    const startWidth = modalRect?.width ?? dimensions.width
+    const startHeight = modalRect?.height ?? dimensions.height
     const startPosition = {x: e.pageX, y: e.pageY}
 
     let resizingWidth = startWidth, resizingHeight = startHeight
@@ -109,25 +114,23 @@ export const EditFormulaModal = observer(function EditFormulaModal({
       const yDelta = pointerMoveEvent.pageY - startPosition.y
       resizingWidth = Math.max(startWidth + xDelta, minWidth)
       resizingHeight = Math.max(startHeight + yDelta, minHeight)
-      setDimension({
-        width: resizingWidth, height: resizingHeight,
-      })
+      setDimensions({width: Math.round(resizingWidth), height: Math.round(resizingHeight)})
     }
     const onPointerUp = () => {
       document.body.removeEventListener("pointermove", onPointerMove, { capture: true })
       document.body.removeEventListener("pointerup", onPointerUp, { capture: true })
     }
     document.body.addEventListener("pointermove", onPointerMove, { capture: true })
     document.body.addEventListener("pointerup", onPointerUp, { capture: true })
-  }, [dimension.height, dimension.width])
+  }, [dimensions.height, dimensions.width, minHeight, minWidth])
 
   return (
     <FormulaEditorContext.Provider value={formulaEditorState}>
       <CodapModal
         isOpen={isOpen}
         onClose={closeModal}
-        modalWidth={`${dimension.width}px`}
-        modalHeight={`${dimension.height}px`}
+        modalWidth={`${dimensions.width}px`}
+        modalHeight={`${dimensions.height}px`}
         onClick={handleModalWhitespaceClick}
       >
         <ModalBody className="formula-modal-body" onKeyDown={handleKeyDown}>
@@ -146,7 +149,7 @@ export const EditFormulaModal = observer(function EditFormulaModal({
             </FormLabel>
             <FormLabel className="formula-editor-container">
               {formulaPrompt ?? t("DG.AttrFormView.formulaPrompt")}
-              <FormulaEditor />
+              <FormulaEditor editorHeight={editorHeight}/>
             </FormLabel>
           </FormControl>
           <Flex className="formula-insert-buttons-container" flexDirection="row" justifyContent="flex-start">

v3/src/components/common/formula-editor.tsx

@@ -19,6 +19,8 @@ import { formulaLanguageWithHighlighting } from "../../models/formula/lezer/form
 import { getGlobalValueManager, getSharedModelManager } from "../../models/tiles/tile-environment"
 import { FormulaEditorApi, useFormulaEditorContext } from "./formula-editor-context"
 
+import styles from './edit-formula-modal.scss'
+
 interface ICompletionOptions {
   attributes: boolean
   boundaries: boolean
@@ -35,6 +37,7 @@ const kAllOptions: ICompletionOptions = {
 interface IProps {
   // options default to true if not specified
   options?: Partial<ICompletionOptions>
+  editorHeight?: number
 }
 
 /*
@@ -255,7 +258,7 @@ function cmExtensionsSetup() {
   return extensions.filter(Boolean)
 }
 
-export function FormulaEditor({ options: _options }: IProps) {
+export function FormulaEditor({ options: _options, editorHeight = +styles.editFormulaModalMinHeight }: IProps) {
   const dataSet = useDataSetContext()
   const jsonOptions = JSON.stringify(_options ?? {})
   const options = useMemo(() => JSON.parse(jsonOptions), [jsonOptions])
@@ -283,6 +286,7 @@ export function FormulaEditor({ options: _options }: IProps) {
   // .input-element indicates to CodapModal not to drag the modal from within the element
   const classes = "formula-editor-input input-element"
   return <CodeMirror ref={cmRef} className={classes} data-testid="formula-editor-input" height="70px"
-                     basicSetup={false} extensions={extensions} onCreateEditor={handleCreateEditor}
+                     basicSetup={false} extensions={extensions} style={{height: editorHeight}}
+                     onCreateEditor={handleCreateEditor}
                      value={formula} onChange={handleFormulaChange} />
 }