1 files changed, 20 insertions, 9 deletions
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index f5a9716cd..4c2d2f0a9 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -57,7 +57,7 @@ export interface EditableProps {
     highlight?: boolean;
     positions?: number[];
     search?: string;
-    bing?: () => string;
+    bing?: () => string|undefined;
 }
 
 /**
@@ -189,24 +189,35 @@ export class EditableView extends React.Component<EditableProps> {
 
     returnHighlights() {
         let results = [];
-        let length = this.props.search!.length + 1;
-        let contents = "";
-        contents = this.props.bing!();
+        let contents = this.props.bing!();
+
+        if (contents!== undefined){
+        if (this.props.positions!==undefined){
+        let positions = this.props.positions;
+        let length = this.props.search!.length;
         console.log(contents);
+        console.log(this.props.contents?.valueOf());
         // contents = String(this.props.contents.valueOf());
+
         results.push(<span style={{ fontStyle: this.props.fontStyle, fontSize: this.props.fontSize, color: this.props.contents ? "black" : "grey" }}>{contents ? contents.slice(0, this.props.positions![0]) : this.props.placeholder?.valueOf()}</span>);
-        this.props.positions?.forEach((num, cur) => {
+        positions.forEach((num, cur) => {
             results.push(<span style={{ backgroundColor: "#FFFF00", fontStyle: this.props.fontStyle, fontSize: this.props.fontSize, color: this.props.contents ? "black" : "grey" }}>{contents ? contents.slice(num, num + length) : this.props.placeholder?.valueOf()}</span>);
             let end = 0;
-            cur === this.props.positions!.length - 1 ? end = contents.length - 1 : end = this.props.positions![cur + 1];
-            results.push(<span style={{ fontStyle: this.props.fontStyle, fontSize: this.props.fontSize, color: this.props.contents ? "black" : "grey" }}>{contents ? contents.slice(num + length - 1, end) : this.props.placeholder?.valueOf()}</span>);
+            console.log
+            cur === positions.length-1? end = contents.length: end = positions[cur + 1];
+            results.push(<span style={{ fontStyle: this.props.fontStyle, fontSize: this.props.fontSize, color: this.props.contents ? "black" : "grey" }}>{contents ? contents.slice(num + length, end) : this.props.placeholder?.valueOf()}</span>);
         }
         )
-
+    }
         return results;
+}
+else{
+    return <span style={{ fontStyle: this.props.fontStyle, fontSize: this.props.fontSize, color: this.props.contents ? "black" : "grey" }}>{this.props.contents ? this.props.contents?.valueOf() : this.props.placeholder?.valueOf()}</span>;
+}
     }
 
     render() {
+        console.log(this.props.highlight === undefined);
         if (this._editing && this.props.GetValue() !== undefined) {
             return this.props.sizeToContent ?
                 <div style={{ display: "grid", minWidth: 100 }}>
@@ -220,7 +231,7 @@ export class EditableView extends React.Component<EditableProps> {
                     ref={this._ref}
                     style={{ display: this.props.display, minHeight: "20px", height: `${this.props.height ? this.props.height : "auto"}`, maxHeight: `${this.props.maxHeight}` }}
                     onClick={this.onClick} placeholder={this.props.placeholder}>
-                    {this.props.highlight === undefined ? <span style={{ fontStyle: this.props.fontStyle, fontSize: this.props.fontSize, color: this.props.contents ? "black" : "grey" }}>{this.props.contents ? this.props.contents?.valueOf() : this.props.placeholder?.valueOf()}</span>
+                    {this.props.highlight === undefined || this.props.positions===undefined || this.props.bing===undefined? <span style={{ fontStyle: this.props.fontStyle, fontSize: this.props.fontSize, color: this.props.contents ? "black" : "grey" }}>{this.props.contents ? this.props.contents?.valueOf() : this.props.placeholder?.valueOf()}</span>
                         : this.returnHighlights()}
                 </div>
             );