Merge branch 'master' into joanne-tutorialagent

1 files changed, 27 insertions, 54 deletions

diff --git a/src/client/views/nodes/formattedText/DashFieldView.tsx b/src/client/views/nodes/formattedText/DashFieldView.tsx
index 18cf36603..7ea5d1fcf 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,8 +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';
 
 @observer
 export class DashFieldViewMenu extends AntimodeMenu<AntimodeMenuProps> {
@@ -98,7 +99,6 @@ interface IDashFieldViewInternal {
     width: number;
     height: number;
     editable: boolean;
-    nodeSelected: () => boolean;
     node: Node;
     getPos: () => number;
     unclickable: () => boolean;
@@ -111,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);
@@ -139,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;
@@ -148,24 +148,27 @@ export class DashFieldViewInternal extends ObservableReactComponent<IDashFieldVi
             setTimeout(() => !this._props.tbox.ProseRef?.contains(document.activeElement) && this._props.tbox._props.onBlur?.());
         }
     });
-    selectedCells = () => (this._dashDoc ? [this._dashDoc] : undefined);
+    selectedCells = () => (this._dashDoc && this._expanded ? [this._dashDoc] : undefined);
     columnWidth = () => Math.min(this._props.tbox._props.PanelWidth(), Math.max(50, this._props.tbox._props.PanelWidth() - 100)); // try to leave room for the fieldKey
 
+    finfo = (fieldKey: string) => (new DocumentOptions() as Record<string, FInfo>)[fieldKey];
+
     // set the display of the field's value (checkbox for booleans, span of text for strings)
     @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 }}>
+                })}>
                 <SchemaTableCell
-                    Document={this._dashDoc}
+                    Doc={this._dashDoc}
                     col={0}
                     deselectCell={emptyFunction}
-                    selectCell={emptyFunction}
+                    selectCell={() => (this._expanded ? true : undefined)}
+                    autoFocus={true}
                     maxWidth={this._props.hideKey || this._hideKey ? undefined : this._props.tbox._props.PanelWidth}
-                    columnWidth={this._expanded || this._props.nodeSelected() ? this.columnWidth : returnZero}
+                    columnWidth={returnZero}
                     selectedCells={this.selectedCells}
                     selectedCol={returnZero}
                     fieldKey={this._fieldKey}
@@ -178,14 +181,13 @@ export class DashFieldViewInternal extends ObservableReactComponent<IDashFieldVi
                     rowHeight={returnZero}
                     isRowActive={this.isRowActive}
                     padding={0}
-                    getFinfo={emptyFunction}
+                    getFinfo={this.finfo}
                     setColumnValues={returnFalse}
                     allowCRs
-                    oneLine={!this._expanded && !this._props.nodeSelected()}
+                    oneLine={!this._expanded && this._props.editable}
                     finishEdit={this.finishEdit}
                     transform={Transform.Identity}
                     menuTarget={null}
-                    autoFocus
                     rootSelected={this._props.tbox._props.rootSelected}
                 />
             </div>
@@ -196,7 +198,7 @@ export class DashFieldViewInternal extends ObservableReactComponent<IDashFieldVi
         const container = this._props.tbox.DocumentView?.().containerViewPath?.().lastElement();
         if (container) {
             const embedding = Doc.MakeEmbedding(container.Document);
-            embedding._type_collection = CollectionViewType.Time;
+            embedding._type_collection = CollectionViewType.Pivot;
             const colHdrKey = '_' + container.LayoutFieldKey + '_columnHeaders';
             let list = Cast(embedding[colHdrKey], listSpec(SchemaHeaderField));
             if (!list) {
@@ -230,7 +232,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
@@ -252,7 +254,6 @@ 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 }));
@@ -264,7 +265,7 @@ export class DashFieldViewInternal extends ObservableReactComponent<IDashFieldVi
                 className={`dashFieldView${this.isRowActive() ? '-active' : ''}`}
                 ref={this._fieldRef}
                 style={{
-                    width: this._props.width,
+                    // width: this._props.width,
                     height: this._props.height,
                     pointerEvents: this._props.tbox._props.rootSelected?.() || this._props.tbox.isAnyChildContentActive?.() ? undefined : 'none',
                 }}>
@@ -274,7 +275,7 @@ export class DashFieldViewInternal extends ObservableReactComponent<IDashFieldVi
                     </span>
                 )}
                 {this._props.fieldKey.startsWith('#') || this._hideValue ? null : this.fieldValueContent}
-                {!this.values.length ? null : (
+                {!this.values.length || !this.props.editable ? null : (
                     <select className="dashFieldView-select" tabIndex={-1} defaultValue={this._dashDoc && Field.toKeyValueString(this._dashDoc, this._fieldKey)} onChange={this.selectVal}>
                         <option value="-unset-">-unset-</option>
                         {this.values.map(val => (
@@ -294,8 +295,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) {
@@ -308,26 +307,14 @@ 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.style.maxWidth = '100%';
         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();
         };
@@ -348,7 +335,6 @@ export class DashFieldView {
                 hideKey={node.attrs.hideKey}
                 hideValue={node.attrs.hideValue}
                 editable={node.attrs.editable}
-                nodeSelected={this.NodeSelected}
                 tbox={tbox}
             />
         );
@@ -362,19 +348,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() {}
 }