header comments + change to cellfield updating

1 files changed, 34 insertions, 14 deletions

diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index 1ee79fa0b..72dcc00e6 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -9,6 +9,16 @@ import { ObjectField } from "../../../../fields/ObjectField";
 import { Doc } from "../../../../fields/Doc";
 import { DocumentView } from "../../nodes/DocumentView";
 
+/**
+ * The SchemaCellField renders text in schema cells while the user is editing, and updates the
+ * contents of the field based on user input. It handles some cell-side logic for equations, such
+ * as how equations are broken up within the text.
+ * 
+ * The current implementation parses innerHTML to create spans based on the text in the cell. 
+ * A more robust/safer approach would directly add elements in the react structure, but this
+ * has been challenging to implement.  
+ */
+
 export interface SchemaCellFieldProps {
     contents: any;
     fieldContents?: FieldViewProps;
@@ -147,20 +157,30 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         return chunkedText;
     }
 
+    /**
+     * Sets the rendered content of the cell to save user inputs. 
+     * @param content the content to set
+     * @param restoreCursorPos whether the cursor should be set back to where it was rather than the 0th index; should usually be true
+     */
     @action 
     setContent = (content: string, restoreCursorPos?: boolean) => {
         const pos = this.cursorPosition;
         this._displayedContent = this.makeSpans(content);
-        console.log('print', content);
         restoreCursorPos && setTimeout(() => this.setCursorPosition(pos));
     }
 
+    //Called from schemaview when a cell is selected to add a reference to the equation
+    /**
+     * Inserts text at the given index.
+     * @param text The text to append.
+     * @param atPos he index at which to insert the text. If empty, defaults to end.
+     */
     @action
-    appendText = (text: string, atCursorPos?: boolean) => {
+    insertText = (text: string, atPos?: boolean) => {
         const content = this._unrenderedContent;
         const cursorPos = this.cursorPosition;
         const robustPos = cursorPos ?? content.length;
-        const newText = atCursorPos ? content.slice(0, robustPos) + text + content.slice(cursorPos ?? content.length) : this._unrenderedContent.concat(text);
+        const newText = atPos ? content.slice(0, robustPos) + text + content.slice(cursorPos ?? content.length) : this._unrenderedContent.concat(text);
         this.onChange(undefined, newText);
         setTimeout(() => this.setCursorPosition(robustPos + text.length));
     }
@@ -172,6 +192,9 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         return wasFocused !== this._editing;
     };
 
+    /**
+     * Gets the cursor's position index within the text being edited.
+     */
     get cursorPosition() {
         const selection = window.getSelection();
         if (!selection || selection.rangeCount === 0 || !this._inputref) return null; 
@@ -185,6 +208,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         return adjRange.toString().length; 
     }
 
+
     setCursorPosition = (position: number | null) => {
         const selection = window.getSelection();
         if (!selection || position === null || !this._inputref) return; 
@@ -220,9 +244,9 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
 
     //This function checks if a visual update (eg. coloring a cell reference) should be made. It's meant to
     //save on processing upkeep vs. constantly rerendering, but I think the savings are minimal for now
-    // shouldUpdate = (prevVal: string, currVal: string) => {
-    //     if (this._props.getCells(currVal).length !== this._props.getCells(prevVal).length) return true;
-    // };
+    shouldUpdate = (prevVal: string, currVal: string) => {
+        if (this._props.getCells(currVal).length !== this._props.getCells(prevVal).length) return true;
+    };
 
     onChange = (e: FormEvent<HTMLDivElement> | undefined, newText?: string) => {
         const prevVal = this._unrenderedContent;
@@ -235,7 +259,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         }
         this._unrenderedContent = targVal;
         this._props.highlightCells?.(targVal);
-        this.setContent(targVal, true);
+        if (this.shouldUpdate(prevVal, targVal)) this.setContent(targVal, true);
         this.setupRefSelect(this.refSelectConditionMet);
     };
 
@@ -248,10 +272,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
     @action
     onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
         if (e.nativeEvent.defaultPrevented) return; // hack .. DashFieldView grabs native events, but react ignores stoppedPropagation and preventDefault, so we need to check it here
-        // if (e.metaKey) {
-        //     e.stopPropagation();
-        //     e.preventDefault();
-        // }
+
         switch (e.key) {
             case 'Tab':
                 e.stopPropagation();
@@ -295,7 +316,6 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         }
     };
 
-
     @action
     onClick = (e?: React.MouseEvent) => {
         if (this._props.editing !== false) {
@@ -312,6 +332,8 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             this._dependencyMessageShown = true;
             return;
         }
+
+        this.setContent(this._unrenderedContent);
         
         if (this._props.SetValue(this._unrenderedContent, shiftDown, enterKey)) {
             this._editing = false;
@@ -327,8 +349,6 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         }
     }
 
-    //<FieldView {...this._props.fieldContents}/>
-
     staticDisplay = () => {
         return <span className='editableView-static'>
         {