1 files changed, 63 insertions, 23 deletions

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 23da5a666..9722b2d4b 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -7,6 +7,8 @@ import { DocumentIconContainer } from './nodes/DocumentIcon';
 import { FieldView, FieldViewProps } from './nodes/FieldView';
 import { ObservableReactComponent } from './ObservableReactComponent';
 import { OverlayView } from './OverlayView';
+import { Padding } from 'browndash-components';
+import { SchemaFieldType } from './collections/collectionSchema/SchemaColumnHeader';
 
 export interface EditableProps {
     /**
@@ -51,6 +53,13 @@ export interface EditableProps {
     background?: string | undefined;
     placeholder?: string;
     wrap?: string; // nowrap, pre-wrap, etc
+
+    schemaFieldType?: SchemaFieldType;
+    prohibitedText?: Array<string>;
+    onClick?: () => void;
+    updateAlt?: (newAlt: string) => void;
+    updateSearch?: (value: string) => void;
+    highlightCells?: (text: string) => void;
 }
 
 /**
@@ -62,18 +71,17 @@ export interface EditableProps {
 export class EditableView extends ObservableReactComponent<EditableProps> {
     private _ref = React.createRef<HTMLDivElement>();
     private _inputref: HTMLInputElement | HTMLTextAreaElement | null = null;
+    private _disposers: { [name: string]: IReactionDisposer } = {};
     _overlayDisposer?: () => void;
-    _editingDisposer?: IReactionDisposer;
     @observable _editing: boolean = false;
 
     constructor(props: EditableProps) {
         super(props);
         makeObservable(this);
-        this._editing = !!this._props.editing;
     }
 
     componentDidMount(): void {
-        this._editingDisposer = reaction(
+        this._disposers.editing = reaction(
             () => this._editing,
             editing => {
                 if (editing) {
@@ -81,11 +89,13 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
                         if (this._inputref?.value.startsWith('=') || this._inputref?.value.startsWith(':=')) {
                             this._overlayDisposer?.();
                             this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
-                        }
+                            this._props.highlightCells?.(this._props.GetValue() ?? '');
+                        } 
                     });
                 } else {
                     this._overlayDisposer?.();
                     this._overlayDisposer = undefined;
+                    this._props.highlightCells?.('');
                 }
             },
             { fireImmediately: true }
@@ -104,7 +114,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
 
     componentWillUnmount() {
         this._overlayDisposer?.();
-        this._editingDisposer?.();
+        this._disposers.editing?.();
         this._inputref?.value && this.finalizeEdit(this._inputref.value, false, true, false);
     }
 
@@ -116,6 +126,8 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
         } else if (!this._overlayDisposer) {
             this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
         }
+        this._props.updateSearch && this._props.updateSearch(targVal);
+        this._props.highlightCells?.(targVal);
     };
 
     @action
@@ -152,7 +164,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
             case 'ArrowDown':
             case 'ArrowLeft':
             case 'ArrowRight':
-                e.stopPropagation();
+                //e.stopPropagation();
                 break;
             case 'Shift':
             case 'Alt':
@@ -176,9 +188,10 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
     };
 
     @action
-    onClick = (e: React.MouseEvent) => {
+    onClick = (e?: React.MouseEvent) => {
+        this._props.onClick && this._props.onClick();
         if (this._props.editing !== false) {
-            e.nativeEvent.stopPropagation();
+            e?.nativeEvent.stopPropagation();
             if (this._ref.current && this._props.showMenuOnLoad) {
                 this._props.menuCallback?.(this._ref.current.getBoundingClientRect().x, this._ref.current.getBoundingClientRect().y);
             } else {
@@ -187,7 +200,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
             }
         }
     };
-
+    
     @action
     finalizeEdit(value: string, shiftDown: boolean, lostFocus: boolean, enterKey: boolean) {
         if (this._props.SetValue(value, shiftDown, enterKey)) {
@@ -218,6 +231,12 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
         return wasFocused !== this._editing;
     };
 
+    @action
+    setIsEditing = (value: boolean) => {
+        this._editing = value;
+        return this._editing;
+    }
+
     renderEditor() {
         return this._props.autosuggestProps ? (
             <Autosuggest
@@ -235,11 +254,11 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
                     onChange: this._props.autosuggestProps.onChange,
                 }}
             />
-        ) : this._props.oneLine !== false && this._props.GetValue()?.toString().indexOf('\n') === -1 ? (
+        ) : ( this._props.oneLine !== false && this._props.GetValue()?.toString().indexOf('\n') === -1 ? (
             <input
-                className="editableView-input"
+                className="editableView-input" 
                 ref={r => { this._inputref = r; }} // prettier-ignore
-                style={{ display: this._props.display, overflow: 'auto', fontSize: this._props.fontSize, minWidth: 20, background: this._props.background }}
+                style={{ display: this._props.display, overflow: 'auto', fontSize: this._props.fontSize, minWidth: 20, background: this._props.background}}
                 placeholder={this._props.placeholder}
                 onBlur={e => this.finalizeEdit(e.currentTarget.value, false, true, false)}
                 defaultValue={this._props.GetValue()}
@@ -265,16 +284,42 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
                 onClick={this.stopPropagation}
                 onPointerUp={this.stopPropagation}
             />
-        );
+        ));
+    }
+
+    staticDisplay = () => {
+        let toDisplay;
+        const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n');
+        if (this._props.schemaFieldType === SchemaFieldType.Header){
+            toDisplay = <input className="editableView-input"
+            value={gval}
+            placeholder='Add key'
+            readOnly
+            style={{ display: this._props.display, overflow: 'auto', pointerEvents: 'none', fontSize: this._props.fontSize, width: '100%', margin: 0, background: this._props.background}}
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+        />
+        } else {
+            toDisplay = (<span className='editableView-static'
+            style={{
+                fontStyle: this._props.fontStyle,
+                fontSize: this._props.fontSize
+            }}>
+            {
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                this._props.fieldContents ? <FieldView {...this._props.fieldContents} /> : this.props.contents ? this._props.contents?.valueOf() : '' as any
+            }
+        </span>)
+        }
+
+        return toDisplay;
     }
 
     render() {
         const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n');
-        if (this._editing && gval !== undefined) {
+        if ((this._editing && gval !== undefined)) {
             return this._props.sizeToContent ? (
                 <div style={{ display: 'grid', minWidth: 100 }}>
-                    <div style={{ display: 'inline-block', position: 'relative', height: 0, width: '100%', overflow: 'hidden' }}>{gval}</div>
-                    {this.renderEditor()}
+                    <div style={{ display: 'inline-block', position: 'relative', height: 0, width: '100%', overflow: 'hidden' }}>{this.renderEditor()}</div>
                 </div>
             ) : (
                 this.renderEditor()
@@ -291,18 +336,13 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
                     minHeight: '10px',
                     whiteSpace: this._props.oneLine ? 'nowrap' : 'pre-line',
                     height: this._props.height,
+                    width: '100%',
                     maxHeight: this._props.maxHeight,
                     fontStyle: this._props.fontStyle,
                     fontSize: this._props.fontSize,
                 }}
                 onClick={this.onClick}>
-                <span
-                    style={{
-                        fontStyle: this._props.fontStyle,
-                        fontSize: this._props.fontSize,
-                    }}>
-                    {this._props.fieldContents ? <FieldView {...this._props.fieldContents} /> : (this._props.contents ?? '')}
-                </span>
+                {this.staticDisplay()}
             </div>
         );
     }