improving how dash field views work in text boxes (layout, tab behavior)

2 files changed, 25 insertions, 49 deletions

diff --git a/src/client/views/nodes/formattedText/DashFieldView.scss b/src/client/views/nodes/formattedText/DashFieldView.scss
index 78bbb520e..2e2e1d41c 100644
--- a/src/client/views/nodes/formattedText/DashFieldView.scss
+++ b/src/client/views/nodes/formattedText/DashFieldView.scss
@@ -3,7 +3,7 @@
 .dashFieldView-active,
 .dashFieldView {
     position: relative;
-    display: inline-flex;
+    display: contents;
     align-items: center;
 
     .dashFieldView-enumerables {
@@ -33,8 +33,11 @@
         margin-left: 2px;
         margin-right: 5px;
         padding-left: 2px;
-        display: inline-block;
-        background-color: rgba(155, 155, 155, 0.24);
+        font-size: smaller;
+        display: contents;
+        > div {
+            background-color: rgba(155, 155, 155, 0.24);
+        }
         span {
             user-select: all;
             min-width: 100%;
diff --git a/src/client/views/nodes/formattedText/DashFieldView.tsx b/src/client/views/nodes/formattedText/DashFieldView.tsx
index e899b49bc..b9ae7ebcf 100644
--- a/src/client/views/nodes/formattedText/DashFieldView.tsx
+++ b/src/client/views/nodes/formattedText/DashFieldView.tsx
@@ -1,8 +1,10 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@mui/material';
-import { action, computed, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx';
+import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
+import { Node } from 'prosemirror-model';
 import { NodeSelection } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { returnFalse, returnTrue, returnZero, setupMoveUpEvents } from '../../../../ClientUtils';
@@ -13,6 +15,7 @@ import { SchemaHeaderField } from '../../../../fields/SchemaHeaderField';
 import { Cast, DocCast } from '../../../../fields/Types';
 import { emptyFunction } from '../../../../Utils';
 import { DocServer } from '../../../DocServer';
+import { DocumentOptions, FInfo } from '../../../documents/Documents';
 import { CollectionViewType } from '../../../documents/DocumentTypes';
 import { Transform } from '../../../util/Transform';
 import { undoable, undoBatch } from '../../../util/UndoManager';
@@ -23,9 +26,6 @@ import { ObservableReactComponent } from '../../ObservableReactComponent';
 import { OpenWhere } from '../OpenWhere';
 import './DashFieldView.scss';
 import { FormattedTextBox } from './FormattedTextBox';
-import { Node } from 'prosemirror-model';
-import { EditorView } from 'prosemirror-view';
-import { DocumentOptions, FInfo } from '../../../documents/Documents';
 
 @observer
 export class DashFieldViewMenu extends AntimodeMenu<AntimodeMenuProps> {
@@ -99,7 +99,6 @@ interface IDashFieldViewInternal {
     width: number;
     height: number;
     editable: boolean;
-    nodeSelected: () => boolean;
     node: Node;
     getPos: () => number;
     unclickable: () => boolean;
@@ -112,7 +111,7 @@ export class DashFieldViewInternal extends ObservableReactComponent<IDashFieldVi
     _fieldKey: string;
     _fieldRef = React.createRef<HTMLDivElement>();
     @observable _dashDoc: Doc | undefined = undefined;
-    @observable _expanded = this._props.nodeSelected();
+    @observable _expanded = false;
 
     constructor(props: IDashFieldViewInternal) {
         super(props);
@@ -140,7 +139,7 @@ export class DashFieldViewInternal extends ObservableReactComponent<IDashFieldVi
     componentWillUnmount() {
         this._reactionDisposer?.();
     }
-    isRowActive = () => (this._props.nodeSelected() || this._expanded) && this._props.editable;
+    isRowActive = () => this._props.tbox._props.isContentActive() && this._props.editable;
     finishEdit = action(() => {
         if (this._expanded) {
             this._expanded = false;
@@ -158,17 +157,19 @@ export class DashFieldViewInternal extends ObservableReactComponent<IDashFieldVi
     @computed get fieldValueContent() {
         return !this._dashDoc ? null : (
             <div
+                className="dashFieldView-fieldSpan"
                 onPointerDown={action(() => {
                     this._expanded = !this._props.editable ? false : !this._expanded;
                 })}
-                style={{ fontSize: 'smaller', width: !this._hideKey && this._expanded ? this.columnWidth() : undefined }}>
+                ref={this._valueRef}
+                style={{ width: !this._hideKey && this._expanded ? this.columnWidth() : undefined }}>
                 <SchemaTableCell
                     Document={this._dashDoc}
                     col={0}
                     deselectCell={emptyFunction}
                     selectCell={emptyFunction}
                     maxWidth={this._props.hideKey || this._hideKey ? undefined : this._props.tbox._props.PanelWidth}
-                    columnWidth={this._expanded || this._props.nodeSelected() ? () => undefined : returnZero}
+                    columnWidth={returnZero}
                     selectedCells={this.selectedCells}
                     selectedCol={returnZero}
                     fieldKey={this._fieldKey}
@@ -184,7 +185,7 @@ export class DashFieldViewInternal extends ObservableReactComponent<IDashFieldVi
                     getFinfo={this.finfo}
                     setColumnValues={returnFalse}
                     allowCRs
-                    oneLine={!this._expanded && !this._props.nodeSelected()}
+                    oneLine={!this._expanded}
                     finishEdit={this.finishEdit}
                     transform={Transform.Identity}
                     menuTarget={null}
@@ -233,7 +234,7 @@ export class DashFieldViewInternal extends ObservableReactComponent<IDashFieldVi
     }
 
     @computed get _hideValue() {
-        return this._props.hideValue && !this._props.nodeSelected();
+        return this._props.hideValue;
     }
 
     // clicking on the label creates a pivot view collection of all documents
@@ -255,12 +256,13 @@ export class DashFieldViewInternal extends ObservableReactComponent<IDashFieldVi
     };
 
     @computed get values() {
-        if (this._props.nodeSelected()) return [];
         const vals = FilterPanel.gatherFieldValues(DocListCast(Doc.ActiveDashboard?.data), this._fieldKey, []);
 
         return vals.strings.map(facet => ({ value: facet, label: facet }));
     }
 
+    _valueRef = React.createRef<HTMLDivElement>();
+
     render() {
         return (
             <div
@@ -297,8 +299,6 @@ export class DashFieldView {
     node: Node;
     tbox: FormattedTextBox;
     getpos: () => number | undefined;
-    @observable _nodeSelected = false;
-    NodeSelected = () => this._nodeSelected;
 
     unclickable = () => !this.tbox._props.rootSelected?.() && this.node.marks.some(m => m.type === this.tbox.EditorView?.state.schema.marks.linkAnchor && m.attrs.noPreview);
     constructor(node: Node, view: EditorView, getPos: () => number | undefined, tbox: FormattedTextBox) {
@@ -311,26 +311,13 @@ export class DashFieldView {
         this.dom.style.width = node.attrs.width;
         this.dom.style.height = node.attrs.height;
         this.dom.style.position = 'relative';
-        this.dom.style.display = 'inline-block';
+        this.dom.style.display = 'inline-flex';
         this.dom.onkeypress = function (e: KeyboardEvent) {
             e.stopPropagation();
         };
-        this.dom.onkeydown = (e: KeyboardEvent) => {
+        this.dom.onkeydown = action((e: KeyboardEvent) => {
             e.stopPropagation();
-            if (e.key === 'Tab') {
-                e.preventDefault();
-                const editor = tbox.EditorView;
-                if (editor) {
-                    const { state } = editor;
-                    for (let i = getPosition() + 1; i < state.doc.content.size; i++) {
-                        if (state.doc.nodeAt(i)?.type.name === state.schema.nodes.dashField.name) {
-                            editor.dispatch(state.tr.setSelection(new NodeSelection(state.doc.resolve(i))));
-                            return;
-                        }
-                    }
-                }
-            }
-        };
+        });
         this.dom.onkeyup = function (e: KeyboardEvent) {
             e.stopPropagation();
         };
@@ -351,7 +338,6 @@ export class DashFieldView {
                 hideKey={node.attrs.hideKey}
                 hideValue={node.attrs.hideValue}
                 editable={node.attrs.editable}
-                nodeSelected={this.NodeSelected}
                 tbox={tbox}
             />
         );
@@ -365,19 +351,6 @@ export class DashFieldView {
             }
         });
     }
-    deselectNode() {
-        runInAction(() => {
-            this._nodeSelected = false;
-        });
-        this.dom.classList.remove('ProseMirror-selectednode');
-    }
-    selectNode() {
-        setTimeout(
-            action(() => {
-                this._nodeSelected = true;
-            }),
-            100
-        );
-        this.dom.classList.add('ProseMirror-selectednode');
-    }
+    deselectNode() {}
+    selectNode() {}
 }