work on cell field (numerous bugs fixed: spaces now make new divs, invalid refs no longer break things, valid->invalid ref causes update properly)

4 files changed, 59 insertions, 38 deletions

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 308520154..9c4eda3b8 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -533,7 +533,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         return cell;
     }
 
-    findCellRefs = (text: string, retRawMatches?: boolean) => {
+    findCellRefs = (text: string) => {
         const pattern = /(this|d(\d+))\.(\w+)/g;
         interface Match { docRef: string; field: string; }
 
@@ -545,13 +545,12 @@ export class CollectionSchemaView extends CollectionSubView() {
             matches.push({ docRef, field: match[3] });
         }
 
-        if (retRawMatches) return matches;
-
         const cells: Array<any> = [];
         matches.forEach((match: Match) => {
             const {docRef, field} = match;
-            const doc = DocumentManager.Instance.DocumentViews[Number(docRef)].Document;
-            if (this.columnKeys.includes(field)) {cells.push([doc, field])}
+            const docView = DocumentManager.Instance.DocumentViews[Number(docRef)];
+            const doc = docView?.Document ?? undefined;
+            if (this.columnKeys.includes(field) && this._docs.includes(doc)) {cells.push([doc, field])}
         })
 
         return cells;
diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index dcfa4f6f2..e2aa27a95 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -18,7 +18,7 @@ export interface SchemaCellFieldProps {
     highlightCells?: (text: string) => void;
     GetValue(): string | undefined;
     SetValue(value: string, shiftDown?: boolean, enterKey?: boolean): boolean;
-    func: (text: string, raw: boolean) => HTMLDivElement[] | [];
+    getCells: (text: string) => HTMLDivElement[] | [];
 }
 
 @observer
@@ -26,7 +26,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
 
     private _disposers: { [name: string]: IReactionDisposer } = {};
     private _inputref: HTMLDivElement | null = null;
-    private _content: string = '';
+    private _unrenderedContent: string = '';
     _overlayDisposer?: () => void;
     @observable _editing: boolean = false;
     @observable _displayedContent = '';
@@ -40,8 +40,8 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
 
     componentDidMount(): void {
         setTimeout(() => { 
-            this._content = this._props.GetValue() ?? '';
-            this.setContent(this._content);
+            this._unrenderedContent = this._props.GetValue() ?? '';
+            this.setContent(this._unrenderedContent, true);
         }, 0); //must be moved to end of batch or else other docs aren't loaded, so render as d-1 in function
         this._disposers.editing = reaction(
             () => this._editing,
@@ -52,8 +52,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
                             this._overlayDisposer?.();
                             this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
                             this._props.highlightCells?.(this._props.GetValue() ?? '');
-                            if (this._props.Document.type === 'collection') console.log('highlight: ' + this._props.GetValue())
-                            this.setContent(this._content);
+                            this.setContent(this._unrenderedContent, true);
                         } 
                     });
                 } else {
@@ -82,33 +81,44 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         this.finalizeEdit(false, true, false);
     }
 
-    chunkContent = (content: string) => {
-        const pattern = /(this|d(\d+))\.(\w+)/g;
-        interface Match { docRef: string; field: string; }
+    makeSpans = (content: string) => {
+        let chunkedText = content;
+        chunkedText = chunkedText.replace(/ +/g, (match) => {
+            const spanSpaces = '&nbsp;'.repeat(match.length);
+            return `<span>${spanSpaces}</span>`;
+        });
 
-        const matches: Match[] = [];
+        const pattern = /(this|d(\d+))\.(\w+)/g;
+        const matches: string[] = [];
         let match: RegExpExecArray | null;
 
+        const cells: Map<string, HTMLDivElement> = new Map();
+
         while ((match = pattern.exec(content)) !== null) {
-            const docRef = match[1] === 'this' ? match[1] : match[2]; 
-            matches.push({ docRef, field: match[3] });
+            const cell = this._props.getCells(match[0]);
+            if (cell.length) {
+                matches.push(match[0]);
+                cells.set(match[0], cell[0])
+            }
         }
 
-        const cells = this._props.func(content, false);
-        let chunkedText = content;
         let matchNum = 0;
-        matches.forEach((match: Match) => {
-            const {docRef, field} = match;
+        matches.forEach((match: string) => {
             // const refToUse = docRef === 'this' ? `${this.docIndex}` : docRef;
-            chunkedText = chunkedText.replace(`d${docRef}.${field}`, `<span style="color: ${cells[matchNum].style.borderTop.replace('2px solid', '')}">d${docRef}.${field}</span>`);
+            chunkedText = chunkedText.replace(match, `<span style="color: ${cells.get(match)?.style.borderTop.replace('2px solid', '')}">${match}</span>`);
             ++matchNum;
         })
+
         return chunkedText;
     }
 
     @action 
-    setContent = (content: string) => {
-        this._displayedContent = this.chunkContent(content);
+    setContent = (content: string, restoreCursorPos?: boolean) => {
+        this._displayedContent = this.makeSpans(content);
+        if (restoreCursorPos) { 
+            const cursorPos = this.cursorPosition;
+            setTimeout(() => this.restoreCursorPosition(cursorPos), 0);
+        }
     }
 
     @action
@@ -164,9 +174,13 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         setRange(this._inputref.childNodes);
     };
 
+    shouldUpdate = (prevVal: string, currVal: string) => {
+        if (this._props.getCells(currVal).length !== this._props.getCells(prevVal).length) return true;
+        //if (contains self-ref pattern)
+    };
+
     onChange = (e: FormEvent<HTMLDivElement>) => {
-        const cursorPos = this.cursorPosition;
-        const prevVal = this._content;
+        const prevVal = this._unrenderedContent;
         const targVal = e.currentTarget.innerText;
         if (!(targVal.startsWith(':=') || targVal.startsWith('='))) {
             this._overlayDisposer?.();
@@ -174,12 +188,9 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         } else if (!this._overlayDisposer) {
             this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
         }
-        this._content = targVal;
+        this._unrenderedContent = targVal;
         this._props.highlightCells?.(targVal);
-        if (this._props.func(targVal, true).length > this._props.func(prevVal, true).length) {
-            this.setContent(targVal);
-            setTimeout(() => this.restoreCursorPosition(cursorPos), 0);
-        }
+        if (this.shouldUpdate(prevVal, targVal)) {this.setContent(targVal, true)};
     };
 
     @action
@@ -206,6 +217,18 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             case 'ArrowUp': case 'ArrowDown': case 'ArrowLeft': case 'ArrowRight': //prettier-ignore
                 e.stopPropagation();
                 break;
+            case ' ':
+                e.stopPropagation();
+                setTimeout(() => {
+                    this.setContent(this._unrenderedContent);
+                    const cursorPos = this.cursorPosition;
+                    setTimeout(() => this.restoreCursorPosition(cursorPos), 0);
+                }
+                , 0);
+                break;
+            case 'u': // for some reason 'u' otherwise exits the editor
+                e.stopPropagation();
+                break;
             case 'Shift': case 'Alt': case 'Meta': case 'Control': case ':': //prettier-ignore
                 break;
             // eslint-disable-next-line no-fallthrough
@@ -225,8 +248,8 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
 
     @action
     finalizeEdit(shiftDown: boolean, lostFocus: boolean, enterKey: boolean) {
-        this.setContent(this._content);
-        if (this._props.SetValue(this._content, shiftDown, enterKey)) {
+        this.setContent(this._unrenderedContent);
+        if (this._props.SetValue(this._unrenderedContent, shiftDown, enterKey)) {
             this._editing = false;
         } else {
             this._editing = false;
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 6f6b6decf..f4320dc09 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -125,9 +125,8 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
     equationHighlightRef = (text: string) => {
     
     }
-    eqHighlightFunc = (text: string, raw: boolean) => {
-        const info = this.schemaView.findCellRefs(text, raw);
-        if (raw) return info;
+    eqHighlightFunc = (text: string) => {
+        const info = this.schemaView.findCellRefs(text);
         const cells: HTMLDivElement[] = [];
         info.forEach(info => {cells.push(this.schemaView.getCellElement(info[0], info[1]))})
         return cells;
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 94fd9ec7d..ab384a487 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -63,7 +63,7 @@ export interface SchemaTableCellProps {
     isolatedSelection: [boolean, boolean];
     highlightCells: (text: string) => void;
     equationHighlightRef: ObservableMap<HTMLDivElement, string>;
-    func: (text: string, raw: boolean) => HTMLDivElement[] | [];
+    func: (text: string) => HTMLDivElement[] | [];
 
 }
 
@@ -184,7 +184,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                 <SchemaCellField
                     Document={this._props.Document}
                     highlightCells={this.adjustedHighlight}
-                    func={this._props.func}
+                    getCells={this._props.func}
                     ref={r => selectedCell(this._props) && this._props.autoFocus && r?.setIsFocused(true)}
                     oneLine={this._props.oneLine}
                     contents={undefined}