eq highlight working 70%

3 files changed, 27 insertions, 11 deletions

diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index 4ba8c8469..6663fb68f 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -6,12 +6,15 @@ import { DocumentIconContainer } from "../../nodes/DocumentIcon";
 import React, { FormEvent } from "react";
 import { FieldView, FieldViewProps } from "../../nodes/FieldView";
 import { ObjectField } from "../../../../fields/ObjectField";
+import { Doc } from "../../../../fields/Doc";
+import { DocumentView } from "../../nodes/DocumentView";
 
 export interface SchemaCellFieldProps {
     contents: any;
     fieldContents?: FieldViewProps;
     editing?: boolean;
     oneLine?: boolean;
+    Document: Doc;
     highlightCells?: (text: string) => void;
     GetValue(): string | undefined;
     SetValue(value: string, shiftDown?: boolean, enterKey?: boolean): boolean;
@@ -33,7 +36,11 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         makeObservable(this);
     }
 
+    get docIndex(){return DocumentView.getDocViewIndex(this._props.Document);} // prettier-ignore
+
     componentDidMount(): void {
+        this._content = this.props.GetValue() ?? '';
+        this.setContent(this._content);
         this._disposers.editing = reaction(
             () => this._editing,
             editing => {
@@ -43,6 +50,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() ?? '');
+                            this.setContent(this._content);
                         } 
                     });
                 } else {
@@ -53,8 +61,6 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             },
             { fireImmediately: true }
         );
-        this._content = this.props.GetValue() ?? '';
-        this.setContent(this._content);
     }
 
     componentDidUpdate(prevProps: Readonly<SchemaCellFieldProps>) {
@@ -74,13 +80,24 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
     }
 
     chunkContent = (content: string) => {
-        const matches = this._props.func(content, true);
+        const pattern = /(this|d(\d+))\.(\w+)/g;
+        interface Match { docRef: string; field: string; }
+
+        const matches: Match[] = [];
+        let match: RegExpExecArray | null;
+
+        while ((match = pattern.exec(content)) !== null) {
+            const docRef = match[1] === 'this' ? match[1] : match[2]; 
+            matches.push({ docRef, field: match[3] });
+        }
+
         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>`);
+        matches.forEach((match: Match) => {
+            const {docRef, field} = match;
+            // 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>`);
             ++matchNum;
         })
         return chunkedText;
@@ -88,9 +105,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
 
     @action 
     setContent = (content: string) => {
-        console.log(this.chunkContent(content));
         this._displayedContent = this.chunkContent(content);
-        console.log('displayed: ' + this._displayedContent);
     }
 
     @action
@@ -157,11 +172,11 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
         }
         this._content = 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);
         }
-        this._props.highlightCells?.(targVal);
     };
 
     @action
@@ -245,7 +260,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             onPointerDown={e => e.stopPropagation}
             onClick={e => e.stopPropagation}
             onPointerUp={e => e.stopPropagation}
-            dangerouslySetInnerHTML={{ __html: `<span>${this._displayedContent}</span>` }}
+            dangerouslySetInnerHTML={{ __html: this._displayedContent }}
             >
             </div>
         );
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 121605a2b..c0ad95141 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -131,7 +131,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
             <div
                 className="schema-row"
                 onPointerDown={e => this.setCursorIndex(e.clientY)}
-                style={{ height: this._props.PanelHeight(), backgroundColor: this._props.isSelected() ? Colors.LIGHT_BLUE : undefined }}
+                style={{ height: this._props.PanelHeight()}}
                 ref={(row: HTMLDivElement | null) => {
                     row && this.schemaView?.addRowRef?.(this.Document, row);
                     this._ref = row;
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 74ee46065..3233e363a 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -181,6 +181,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                     pointerEvents: this.lockedInteraction ? 'none' : pointerEvents,
                 }}>
                 <SchemaCellField
+                    Document={this._props.Document}
                     highlightCells={this.adjustedHighlight}
                     func={this._props.func}
                     ref={r => selectedCell(this._props) && this._props.autoFocus && r?.setIsFocused(true)}