1 files changed, 23 insertions, 23 deletions

diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx
index cd591fa42..66e210c03 100644
--- a/src/client/views/nodes/KeyValueBox.tsx
+++ b/src/client/views/nodes/KeyValueBox.tsx
@@ -13,10 +13,10 @@ import { DocumentType } from '../../documents/DocumentTypes';
 import { Docs } from '../../documents/Documents';
 import { SetupDrag } from '../../util/DragManager';
 import { CompiledScript } from '../../util/Scripting';
-import { undoBatch } from '../../util/UndoManager';
+import { undoable } from '../../util/UndoManager';
 import { ContextMenu } from '../ContextMenu';
 import { ContextMenuProps } from '../ContextMenuItem';
-import { ObservableReactComponent } from '../ObservableReactComponent';
+import { ViewBoxBaseComponent } from '../DocComponent';
 import { DocumentIconContainer } from './DocumentIcon';
 import { FieldView, FieldViewProps } from './FieldView';
 import { ImageBox } from './ImageBox';
@@ -31,7 +31,7 @@ export type KVPScript = {
     onDelegate: boolean;
 };
 @observer
-export class KeyValueBox extends ObservableReactComponent<FieldViewProps> {
+export class KeyValueBox extends ViewBoxBaseComponent<FieldViewProps>() {
     public static LayoutString() {
         return FieldView.LayoutString(KeyValueBox, 'data');
     }
@@ -48,19 +48,17 @@ export class KeyValueBox extends ObservableReactComponent<FieldViewProps> {
     componentDidMount() {
         this._props.setContentViewBox?.(this);
     }
-    isKeyValueBox = returnTrue;
-    able = returnAlways;
-    layout_fitWidth = returnTrue;
-    onClickScriptDisable = returnAlways;
+    // ViewBoxInterface overrides
+    override isUnstyledView = returnTrue; // used by style provider via ViewBoxInterface - ignore opacity, anim effects, titles
+    override dontRegisterView = returnTrue; // don't want to follow links to this view
+    override onClickScriptDisable = returnAlways;
 
     @observable private rows: KeyValuePair[] = [];
     @observable _splitPercentage = 50;
 
     get fieldDocToLayout() {
-        return DocCast(this._props.Document);
+        return DocCast(this.Document);
     }
-    isUnstyledView = returnTrue; // used by style provider via ViewBoxInterface
-    dontRegisterView = returnTrue; // used by ViewBoxInterface
 
     @action
     onEnterKey = (e: React.KeyboardEvent): void => {
@@ -83,7 +81,7 @@ export class KeyValueBox extends ObservableReactComponent<FieldViewProps> {
      * @param value
      * @returns
      */
-    public static CompileKVPScript(rawvalueIn: string): KVPScript | undefined {
+    public static CompileKVPScript = (rawvalueIn: string): KVPScript | undefined => {
         let rawvalue = rawvalueIn;
         const onDelegate = rawvalue.startsWith('=');
         rawvalue = onDelegate ? rawvalue.substring(1) : rawvalue;
@@ -97,9 +95,9 @@ export class KeyValueBox extends ObservableReactComponent<FieldViewProps> {
             script = ScriptField.CompileScript(value, {}, true, undefined, DocumentIconContainer.getTransformer());
         }
         return !script.compiled ? undefined : { script, type, onDelegate };
-    }
+    };
 
-    public static ApplyKVPScript(doc: Doc, key: string, kvpScript: KVPScript, forceOnDelegate?: boolean, setResult?: (value: FieldResult) => void) {
+    public static ApplyKVPScript = (doc: Doc, key: string, kvpScript: KVPScript, forceOnDelegate?: boolean, setResult?: (value: FieldResult) => void) => {
         const { script, type, onDelegate } = kvpScript;
         // const target = onDelegate ? Doc.Layout(doc.layout) : Doc.GetProto(doc); // bcz: TODO need to be able to set fields on layout templates
         const target = forceOnDelegate || onDelegate || key.startsWith('_') ? doc : DocCast(doc.proto, doc);
@@ -127,14 +125,13 @@ export class KeyValueBox extends ObservableReactComponent<FieldViewProps> {
             return true;
         }
         return false;
-    }
+    };
 
-    @undoBatch
-    public static SetField(doc: Doc, key: string, value: string, forceOnDelegate?: boolean, setResult?: (value: FieldResult) => void) {
-        const script = this.CompileKVPScript(value);
+    public static SetField = undoable((doc: Doc, key: string, value: string, forceOnDelegate?: boolean, setResult?: (value: FieldResult) => void) => {
+        const script = KeyValueBox.CompileKVPScript(value);
         if (!script) return false;
-        return this.ApplyKVPScript(doc, key, script, forceOnDelegate, setResult);
-    }
+        return KeyValueBox.ApplyKVPScript(doc, key, script, forceOnDelegate, setResult);
+    }, 'Set Doc Field');
 
     onPointerDown = (e: React.PointerEvent): void => {
         if (e.buttons === 1 && this._props.isSelected()) {
@@ -249,15 +246,15 @@ export class KeyValueBox extends ObservableReactComponent<FieldViewProps> {
     getFieldView = () => {
         const rows = this.rows.filter(row => row.isChecked);
         if (rows.length > 1) {
-            const parent = Docs.Create.StackingDocument([], { _layout_autoHeight: true, _width: 300, title: `field views for ${DocCast(this._props.Document).title}`, _chromeHidden: true });
+            const parent = Docs.Create.StackingDocument([], { _layout_autoHeight: true, _width: 300, title: `field views for ${DocCast(this.Document).title}`, _chromeHidden: true });
             rows.forEach(row => {
-                const field = this.createFieldView(DocCast(this._props.Document), row);
+                const field = this.createFieldView(DocCast(this.Document), row);
                 field && Doc.AddDocToList(parent, 'data', field);
                 row.uncheck();
             });
             return parent;
         }
-        return rows.length ? this.createFieldView(DocCast(this._props.Document), rows.lastElement()) : undefined;
+        return rows.length ? this.createFieldView(DocCast(this.Document), rows.lastElement()) : undefined;
     };
 
     createFieldView = (templateDoc: Doc, row: KeyValuePair) => {
@@ -305,7 +302,7 @@ export class KeyValueBox extends ObservableReactComponent<FieldViewProps> {
         openItems.push({
             description: 'Default Perspective',
             event: () => {
-                this._props.addDocTab(this._props.Document, OpenWhere.close);
+                this._props.addDocTab(this.Document, OpenWhere.close);
                 this._props.addDocTab(this.fieldDocToLayout, OpenWhere.addRight);
             },
             icon: 'image',
@@ -341,6 +338,9 @@ export class KeyValueBox extends ObservableReactComponent<FieldViewProps> {
             </div>
         );
     }
+    public static Init() {
+        Doc.SetField = KeyValueBox.SetField;
+    }
 }
 
 Docs.Prototypes.TemplateMap.set(DocumentType.KVP, {