made @... create dashField views instead of [@..]. minor cleanup of dashFieldView and schemaCellField. made schemaCellField call focus() when SetIsFocused is called so that dashFieldView boxes are editable when clicked. Made overlay of documentIcons appear whenever cells are focused and disappear on blur.

3 files changed, 8 insertions, 12 deletions

diff --git a/src/client/views/nodes/formattedText/DashFieldView.tsx b/src/client/views/nodes/formattedText/DashFieldView.tsx
index b9ae7ebcf..aa2829aaf 100644
--- a/src/client/views/nodes/formattedText/DashFieldView.tsx
+++ b/src/client/views/nodes/formattedText/DashFieldView.tsx
@@ -148,7 +148,7 @@ 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];
@@ -160,14 +160,13 @@ export class DashFieldViewInternal extends ObservableReactComponent<IDashFieldVi
                 className="dashFieldView-fieldSpan"
                 onPointerDown={action(() => {
                     this._expanded = !this._props.editable ? false : !this._expanded;
-                })}
-                ref={this._valueRef}
-                style={{ width: !this._hideKey && this._expanded ? this.columnWidth() : undefined }}>
+                })}>
                 <SchemaTableCell
                     Document={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={returnZero}
                     selectedCells={this.selectedCells}
@@ -189,7 +188,6 @@ export class DashFieldViewInternal extends ObservableReactComponent<IDashFieldVi
                     finishEdit={this.finishEdit}
                     transform={Transform.Identity}
                     menuTarget={null}
-                    autoFocus
                     rootSelected={this._props.tbox._props.rootSelected}
                 />
             </div>
@@ -261,8 +259,6 @@ export class DashFieldViewInternal extends ObservableReactComponent<IDashFieldVi
         return vals.strings.map(facet => ({ value: facet, label: facet }));
     }
 
-    _valueRef = React.createRef<HTMLDivElement>();
-
     render() {
         return (
             <div
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 38817ac6d..b86536f86 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -2113,7 +2113,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
         setTimeout(() => !this._props.isContentActive() && FormattedTextBoxComment.textBox === this && FormattedTextBoxComment.Hide);
 
         const scrSize = (which: number, view = this._props.docViewPath().slice(-which)[0]) => 
-                [view._props.PanelWidth() / view.screenToLocalScale(), view._props.PanelHeight() / view.screenToLocalScale()]; // prettier-ignore
+                [view?._props.PanelWidth() /(view?.screenToLocalScale()??1), view?._props.PanelHeight() / (view?.screenToLocalScale()??1)]; // prettier-ignore
         const scrMargin = [Math.max(0, (scrSize(2)[0] - scrSize(1)[0]) / 2), Math.max(0, (scrSize(2)[1] - scrSize(1)[1]) / 2)];
         const paddingX = Math.max(NumCast(this.layoutDoc._xMargin), this._props.xPadding ?? 0, 0, ((this._props.screenXPadding?.() ?? 0) - scrMargin[0]) * this.ScreenToLocalBoxXf().Scale);
         const paddingY = Math.max(NumCast(this.layoutDoc._yMargin), 0, ((this._props.yPadding ?? 0) - scrMargin[1]) * this.ScreenToLocalBoxXf().Scale);
diff --git a/src/client/views/nodes/formattedText/RichTextRules.ts b/src/client/views/nodes/formattedText/RichTextRules.ts
index c332c592b..f3ec6cc9d 100644
--- a/src/client/views/nodes/formattedText/RichTextRules.ts
+++ b/src/client/views/nodes/formattedText/RichTextRules.ts
@@ -319,10 +319,10 @@ export class RichTextRules {
             }),
 
             // create a text display of a metadata field on this or another document, or create a hyperlink portal to another document
-            // [@{this,doctitle,}.fieldKey{:,=,:=,=:=}value]
-            // [@{this,doctitle,}.fieldKey]
+            // @{this,doctitle,}.fieldKey{:,=,:=,=:=}value
+            // @{this,doctitle,}.fieldKey
             new InputRule(
-                /\[(@|@this\.|@[a-zA-Z_? \-0-9]+\.)([a-zA-Z_?\-0-9]+)((:|=|:=|=:=)([a-zA-Z,_().@?+\-*/ 0-9()]*))?\]/,
+                /(@|@this\.|@[a-zA-Z_? \-0-9]+\.)([a-zA-Z_?\-0-9]+)((:|=|:=|=:=)([a-zA-Z,_().@?+\-*/ 0-9()]*))?\s/,
                 (state, match, start, end) => {
                     const docTitle = match[1].substring(1).replace(/\.$/, '');
                     const fieldKey = match[2];