wheel spinning

1 files changed, 22 insertions, 22 deletions

diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index 5048bf899..3be9167fe 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -111,7 +111,6 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
     }
 
     componentDidUpdate(prevProps: Readonly<SchemaCellFieldProps>) {
-        this.addReactComponents();
         super.componentDidUpdate(prevProps);
         if (this._editing && this._props.editing === false) {
             this.finalizeEdit(false, true, false);
@@ -127,24 +126,25 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         this.finalizeEdit(false, true, false);
     }
 
-    addReactComponents = () => {
-        if (!this._inputref) return;
+    // addReactComponents = () => {
+    //     if (!this._inputref) return;
 
-        const dateRefs = Array.from(this._inputref.querySelectorAll('.date-placeholder'));
+    //     const dateRefs = Array.from(this._inputref.querySelectorAll('.date-placeholder'));
 
-        dateRefs.forEach(ref => {
-            const root = createRoot(ref);
-            root.render(<DatePicker dateFormat="Pp" selected={new Date()} onChange={emptyFunction} />);
-        })
-    }
+    //     dateRefs.forEach(ref => {
+    //         const root = createRoot(ref);
+    //         root.render(<DatePicker dateFormat="Pp" selected={new Date} onChange={emptyFunction} />);
+    //     })
+    // }
 
     generateSpan = (text: string, cell: HTMLDivElement | undefined): JSX.Element => {
         const selfRef = text === this.selfRefPattern;
+        const color: string | undefined = cell?.style.borderTop.replace('2px solid', '');
         return (
             <span style={{
                 textDecoration: selfRef ? 'underline' : 'none', 
                 textDecorationColor: 'red', 
-                color: selfRef ? 'gray' : cell?.style.borderTop.replace('2px solid', '')}}>
+                color: selfRef ? 'gray' : color}}>
                 {text}
             </span>
         );
@@ -176,7 +176,6 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         })
 
         chunkedText = chunkedText.replace(/{{date}}/g, `<span class="date-placeholder">placeholder text</span>`);
-        console.log(chunkedText)
 
         return chunkedText;
     }
@@ -206,10 +205,10 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             const cellRef = this.verifyCellRef(text);
             if (cellRef) {
                 eles.push(this.generateSpan(cellRef[0], cellRef[1]));
-            } else if (!text.replace('{{date}}', '')){
+            } else if (text && !text.replace('{{date}}', '')){
                 eles.push(<DatePicker dateFormat="Pp" selected={new Date()} onChange={emptyFunction} />);
-            } else if (!text.replace('{{boolean}}', '')) {
-                eles.push(<div>boolean thing</div>);
+            } else if (text && !text.replace('{{boolean}}', '')) {
+                eles.push(<span>boolean thing</span>);
             } else {
                 eles.push(<span>{text}</span>);
             }
@@ -218,8 +217,8 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         return eles;
     }
 
-    parseElements = () => {
-        let string: string = this._unrenderedContent;
+    parseElements = (content: string) => {
+        let string: string = content;
         if (string.startsWith(':')) string = string.slice(1);
         if (string.startsWith('=')) string = string.slice(1);
 
@@ -229,7 +228,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         let currChar = '';
         for (let i = 0; i < string.length; i++){
             currChar = string[i];
-            if ((currChar === ' ' && subStr.trim()) || (currChar !== ' ' && !subStr.trim())) {
+            if (((string.charCodeAt(i) === 32 || string.charCodeAt(i) === 160) && subStr.trim()) || (currChar !== ' ' && !subStr.trim())) {
                 chunks.push(subStr);
                 subStr = currChar;
             } else {
@@ -256,7 +255,8 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
     @action 
     setContent = (content: string, restoreCursorPos?: boolean) => {
         const pos = this.cursorPosition;
-        this._displayedContent = this.makeSpans(content);
+        this._displayedContent = content;
+        this._displayedElements = this.parseElements(content);
         restoreCursorPos && setTimeout(() => this.setCursorPosition(pos));
     }
 
@@ -339,9 +339,9 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         }
         this._unrenderedContent = targVal;
         this._props.highlightCells?.(targVal);
-        if (this.shouldUpdate(prevVal, targVal)) {this.setContent(targVal, true)};
+        if (this.parseElements(targVal).length > this.parseElements(this._displayedContent).length) this.setContent(targVal, true);
         this.setupRefSelect(this.refSelectConditionMet);
-        console.log(this.parseElements());
+        console.log(this.parseElements(targVal));
     };
 
     setupRefSelect = (enabled: boolean) => {
@@ -461,8 +461,8 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             suppressContentEditableWarning={true}
             //dangerouslySetInnerHTML={{ __html: this._displayedContent }}
             >
-                {this.parseElements().map((ele, index) => {
-                    return <div key={index}>{ele}</div>
+                {this._displayedElements.map((ele, index) => {
+                    return <span key={index}>{ele}</span>;
                 })}
             </div>
         );