some progress on eq text highlighting

5 files changed, 48 insertions, 10 deletions

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
index d1f1e3a13..6b53eb1cc 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
@@ -313,3 +313,8 @@
     }
 }
 
+.schemaField-editing {
+    outline: none;
+}
+
+
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index c287b7d44..5c8a84163 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) => {
+    findCellRefs = (text: string, retRawMatches?: boolean) => {
         const pattern = /(this|d(\d+))\.(\w+)/g;
         interface Match { docRef: string; field: string; }
 
@@ -545,6 +545,8 @@ 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;
diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index 3af3b1d61..4ba8c8469 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -15,6 +15,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[] | [];
 }
 
 @observer
@@ -72,10 +73,25 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         this.finalizeEdit(false, true, false);
     }
 
+    chunkContent = (content: string) => {
+        const matches = this._props.func(content, true);
+        const cells = this._props.func(content, false);
+        let chunkedText = content;
+        let matchNum = 0;
+        matches.forEach((docRef, field) => {
+            console.log('cell: ' + cells[matchNum] + ' border: ' + cells[matchNum].style.borderTop)
+            chunkedText = chunkedText.replace(`d5.type`, `<span style="color: ${cells[matchNum].style.borderTop.replace('2px solid', '')}">d5.type</span>`);
+            ++matchNum;
+        })
+        return chunkedText;
+    }
+
     @action 
     setContent = (content: string) => {
-        this._displayedContent = content;
-    };
+        console.log(this.chunkContent(content));
+        this._displayedContent = this.chunkContent(content);
+        console.log('displayed: ' + this._displayedContent);
+    }
 
     @action
     setIsFocused = (value: boolean) => {
@@ -126,10 +142,13 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             }
             return false;
         }
+
+        setRange(this._inputref.childNodes);
     };
 
     onChange = (e: FormEvent<HTMLDivElement>) => {
         const cursorPos = this.cursorPosition;
+        const prevVal = this._content;
         const targVal = e.currentTarget.innerText;
         if (!(targVal.startsWith(':=') || targVal.startsWith('='))) {
             this._overlayDisposer?.();
@@ -138,8 +157,10 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
         }
         this._content = targVal;
-        this.setContent(targVal);
-        setTimeout(() => this.restoreCursorPosition(cursorPos), 0);
+        if (this._props.func(targVal, true).length > this._props.func(prevVal, true).length) {
+            this.setContent(targVal);
+            setTimeout(() => this.restoreCursorPosition(cursorPos), 0);
+        }
         this._props.highlightCells?.(targVal);
     };
 
@@ -208,15 +229,15 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             this._props.fieldContents ? <FieldView {...this._props.fieldContents} /> : this.props.contents ? this._props.contents?.valueOf() : ''
         }
         </span>
-    };
+    }
 
     renderEditor = () => {
         return (
             <div 
             contentEditable
-            className='editableView-static'
+            className='schemaField-editing'
             ref={r => { this._inputref = r; }}
-            style={{ overflow: 'auto', minHeight: `min(100%, ${(this._props.GetValue()?.split('\n').length || 1) * 15})`, minWidth: 20, }}
+            style={{ outline: 'none', overflow: 'auto', minHeight: `min(100%, ${(this._props.GetValue()?.split('\n').length || 1) * 15})`, minWidth: 20, }}
             onBlur={e => this.finalizeEdit(false, true, false)}
             autoFocus
             onInput={this.onChange}
@@ -228,7 +249,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             >
             </div>
         );
-    };
+    }
 
     render() {
         const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n');
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 4902a49ff..121605a2b 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -122,6 +122,10 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
     columnWidth = computedFn((index: number) => () => this.schemaView?.displayColumnWidths[index] ?? CollectionSchemaView._minColWidth);
     computeRowIndex = () => this.schemaView?.rowIndex(this.Document);
     highlightCells = (text: string) => this.schemaView?.highlightCells(text);
+    equationHighlightRef = (text: string) => {
+    
+    }
+    eqHighlightFunc = (text: string, raw: boolean) => {return this.schemaView.findCellRefs(text, raw)};
     render() {
         return (
             <div
@@ -164,6 +168,8 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                 <div className="row-cells">
                     {this.schemaView?.columnKeys?.map((key, index) => (
                         <SchemaTableCell
+                            func={this.eqHighlightFunc}
+                            equationHighlightRef={this.schemaView._cellHighlightColors}
                             highlightCells={this.highlightCells}
                             isolatedSelection={this.isolatedSelection}
                             key={key}
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 74c001397..74ee46065 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -3,7 +3,7 @@
 /* eslint-disable no-use-before-define */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Popup, Size, Type } from 'browndash-components';
-import { action, computed, makeObservable, observable } from 'mobx';
+import { ObservableMap, action, computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { extname } from 'path';
 import * as React from 'react';
@@ -62,6 +62,9 @@ export interface SchemaTableCellProps {
     rowSelected: () => boolean;
     isolatedSelection: [boolean, boolean];
     highlightCells: (text: string) => void;
+    equationHighlightRef: ObservableMap<HTMLDivElement, string>;
+    func: (text: string, raw: boolean) => HTMLDivElement[] | [];
+
 }
 
 function selectedCell(props: SchemaTableCellProps) {
@@ -179,6 +182,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                 }}>
                 <SchemaCellField
                     highlightCells={this.adjustedHighlight}
+                    func={this._props.func}
                     ref={r => selectedCell(this._props) && this._props.autoFocus && r?.setIsFocused(true)}
                     oneLine={this._props.oneLine}
                     contents={undefined}