1 files changed, 37 insertions, 15 deletions

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 684b948af..5b691c507 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import { action, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx';
+import { action, computed, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import * as Autosuggest from 'react-autosuggest';
@@ -54,6 +54,9 @@ export interface EditableProps {
     background?: string | undefined;
     placeholder?: string;
     wrap?: string; // nowrap, pre-wrap, etc
+
+    showKeyNotVal?: boolean;
+    updateAlt?: (newAlt: string) => void;
 }
 
 /**
@@ -155,7 +158,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
             case 'ArrowDown':
             case 'ArrowLeft':
             case 'ArrowRight':
-                e.stopPropagation();
+                //e.stopPropagation();
                 break;
             case 'Shift':
             case 'Alt':
@@ -180,6 +183,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
 
     @action
     onClick = (e: React.MouseEvent) => {
+        if (this._props.GetValue() == 'None' && this._props.updateAlt) this._props.updateAlt('.');
         if (this._props.editing !== false) {
             e.nativeEvent.stopPropagation();
             if (this._ref.current && this._props.showMenuOnLoad) {
@@ -242,9 +246,9 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
             />
         ) : 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()}
@@ -275,9 +279,35 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
         );
     }
 
+    display = () => {
+        let toDisplay;
+        const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n');
+        if (this._props.showKeyNotVal){
+            toDisplay = <input className="editableView-input"
+            value={this._props.GetValue()}
+            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
+            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() : ''
+            }
+        </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>
@@ -298,21 +328,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,
-                    }}>
-                    {
-                        // eslint-disable-next-line react/jsx-props-no-spreading
-                        this._props.fieldContents ? <FieldView {...this._props.fieldContents} /> : this.props.contents ? this._props.contents?.valueOf() : ''
-                    }
-                </span>
+                {this.display()}
             </div>
         );
     }