From fd9bf7746879323c68a8c307c20e0230d671c1eb Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 12 Mar 2025 15:34:06 -0400
Subject: improving how dash field views work in text boxes (layout, tab
 behavior)

---
 .../views/nodes/formattedText/DashFieldView.tsx    | 65 +++++++---------------
 1 file changed, 19 insertions(+), 46 deletions(-)

(limited to 'src/client/views/nodes/formattedText/DashFieldView.tsx')

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() {}
 }
-- 
cgit v1.2.3-70-g09d2


From 5dda7cf8c9244a5d00e459d539d6178592b40336 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 12 Mar 2025 18:12:27 -0400
Subject: 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.

---
 src/client/views/GlobalKeyHandler.ts               | 14 ------
 .../collections/collectionFreeForm/MarqueeView.tsx |  1 +
 .../collectionSchema/CollectionSchemaView.scss     |  3 ++
 .../collectionSchema/SchemaCellField.tsx           | 58 ++++++++++++----------
 .../collectionSchema/SchemaTableCell.tsx           |  3 +-
 .../views/nodes/formattedText/DashFieldView.tsx    | 12 ++---
 .../views/nodes/formattedText/FormattedTextBox.tsx |  2 +-
 .../views/nodes/formattedText/RichTextRules.ts     |  6 +--
 8 files changed, 44 insertions(+), 55 deletions(-)

(limited to 'src/client/views/nodes/formattedText/DashFieldView.tsx')

diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts
index 2d342d1b1..37060d20c 100644
--- a/src/client/views/GlobalKeyHandler.ts
+++ b/src/client/views/GlobalKeyHandler.ts
@@ -109,20 +109,6 @@ export class KeyManager {
             preventDefault: false,
         };
         switch (keyname) {
-            case 'u':
-                if (document.activeElement?.tagName !== 'INPUT' && document.activeElement?.tagName !== 'TEXTAREA') {
-                    const ungroupings = DocumentView.Selected();
-                    undoable(() => () => ungroupings.forEach(dv => { dv.layoutDoc.group = undefined; }), 'ungroup');
-                    DocumentView.DeselectAll();
-                }
-                break;
-            case 'g':
-                if (document.activeElement?.tagName !== 'INPUT' && document.activeElement?.tagName !== 'TEXTAREA') {
-                    const selected = DocumentView.Selected();
-                    const cv = selected.reduce((col, dv) => (!col || CollectionFreeFormView.from(dv) === col ? CollectionFreeFormView.from(dv) : undefined), undefined as undefined | CollectionFreeFormView);
-                    cv && undoable(() => cv._marqueeViewRef.current?.collection(e, true, DocumentView.SelectedDocs()), 'grouping');
-                }
-                break;
             case ' ':
                 // MarqueeView.DragMarquee = !MarqueeView.DragMarquee; // bcz: this needs a better disclosure UI
                 break;
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 00d7ea451..ad52db496 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -113,6 +113,7 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
         // tslint:disable-next-line:prefer-const
         const cm = ContextMenu.Instance;
         const [x, y] = this.Transform.transformPoint(this._downX, this._downY);
+
         if (e.key === '?') {
             cm.setDefaultItem('?', (str: string) =>
                 this._props.addDocTab(Docs.Create.WebDocument(`https://wikipedia.org/wiki/${str}`, { _width: 400, x, y, _height: 512, _nativeWidth: 850, title: `wiki:${str}`, data_useCors: true }), OpenWhere.addRight)
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
index 0bf78f57c..5fd37cbb1 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
@@ -310,4 +310,7 @@
 .schemaField-editing {
     outline: none;
     height: 100%;
+    cursor: text;
+    outline: none;
+    overflow: auto;
 }
diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index e6acff061..e89822b4c 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -86,15 +86,6 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             editing => {
                 if (editing) {
                     this.setupRefSelect(this.refSelectConditionMet);
-                    setTimeout(() => {
-                        if (this._inputref?.innerText.startsWith('=') || this._inputref?.innerText.startsWith(':=')) {
-                            this._overlayDisposer?.();
-                            this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
-                            this._props.highlightCells?.(this._unrenderedContent);
-                            this.setContent(this._unrenderedContent);
-                            setTimeout(() => this.setCursorPosition(this._unrenderedContent.length));
-                        }
-                    });
                 } else {
                     this._overlayDisposer?.();
                     this._overlayDisposer = undefined;
@@ -192,6 +183,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
     setIsFocused = (value: boolean) => {
         const wasFocused = this._editing;
         this._editing = value;
+        this._editing && setTimeout(() => this._inputref?.focus());
         return wasFocused !== this._editing;
     };
 
@@ -272,8 +264,6 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
 
     @action
     onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-        if (e.nativeEvent.defaultPrevented) return; // hack .. DashFieldView grabs native events, but react ignores stoppedPropagation and preventDefault, so we need to check it here
-
         switch (e.key) {
             case 'Tab':
                 e.stopPropagation();
@@ -284,9 +274,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
                 break;
             case 'Enter':
                 e.stopPropagation();
-                if (!e.ctrlKey) {
-                    this.finalizeEdit(e.shiftKey, false, true);
-                }
+                !e.ctrlKey && this.finalizeEdit(e.shiftKey, false, true);
                 break;
             case 'Escape':
                 e.stopPropagation();
@@ -297,7 +285,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             case 'ArrowLeft':
             case 'ArrowRight': // prettier-ignore
                 e.stopPropagation();
-                setTimeout(() => this.setupRefSelect(this.refSelectConditionMet), 0);
+                setTimeout(() => this.setupRefSelect(this.refSelectConditionMet));
                 break;
             case ' ':
                 {
@@ -306,18 +294,14 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
                     setTimeout(() => {
                         this.setContent(this._unrenderedContent);
                         setTimeout(() => this.setCursorPosition(cursorPos));
-                    }, 0);
+                    });
                 }
                 break;
-            case 'u': // for some reason 'u' otherwise exits the editor
-                e.stopPropagation();
-                break;
             case 'Shift':
             case 'Alt':
             case 'Meta':
             case 'Control':
-            case ':': // prettier-ignore
-                break;
+            case ':':
             default:
                 break;
         }
@@ -361,12 +345,9 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             <div
                 contentEditable
                 className="schemaField-editing"
-                ref={r => {
-                    this._inputref = r;
-                }}
-                style={{ cursor: 'text', outline: 'none', overflow: 'auto', minHeight: `min(100%, ${(this._props.GetValue()?.split('\n').length || 1) * 15})`, minWidth: 20 }}
+                ref={r => (this._inputref = r)}
+                style={{ minHeight: `min(100%, ${(this._props.GetValue()?.split('\n').length || 1) * 15})`, minWidth: 20 }}
                 onBlur={() => (this._props.refSelectModeInfo.enabled ? setTimeout(() => this.setIsFocused(true), 1000) : this.finalizeEdit(false, true, false))}
-                autoFocus
                 onInput={this.onChange}
                 onKeyDown={this.onKeyDown}
                 onPointerDown={e => {
@@ -383,14 +364,37 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         );
     };
 
+    onFocus = () => {
+        if (this._inputref?.innerText.startsWith('=') || this._inputref?.innerText.startsWith(':=')) {
+            this._overlayDisposer?.();
+            this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
+            this._props.highlightCells?.(this._unrenderedContent);
+            this.setContent(this._unrenderedContent);
+            setTimeout(() => this.setCursorPosition(this._unrenderedContent.length));
+        }
+    };
+
+    onBlur = action(() => {
+        this._editing = false;
+    });
+
     render() {
         const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n');
         if (this._editing && gval !== undefined) {
-            return <div className={`editableView-container-editing${this._props.oneLine ? '-oneLine' : ''}`}>{this.renderEditor()}</div>;
+            return (
+                <div
+                    className={`editableView-container-editing${this._props.oneLine ? '-oneLine' : ''}`} //
+                    onFocus={this.onFocus}
+                    onBlur={this.onBlur}>
+                    {this.renderEditor()}
+                </div>
+            );
         } else
             return this._props.contents instanceof ObjectField ? null : (
                 <div
                     className={`editableView-container-editing${this._props.oneLine ? '-oneLine' : ''}`}
+                    onFocus={this.onFocus}
+                    onBlur={this.onBlur}
                     style={{
                         minHeight: '10px',
                         whiteSpace: this._props.oneLine ? 'nowrap' : 'pre-line',
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index d404378eb..5d0a03967 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -102,7 +102,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         return true;
     };
     public static renderProps(props: SchemaTableCellProps) {
-        const { Document, fieldKey, getFinfo, columnWidth, isRowActive } = props;
+        const { Document, fieldKey, /* getFinfo,*/ columnWidth, isRowActive } = props;
         let protoCount = 0;
         let doc: Doc | undefined = Document;
         while (doc) {
@@ -186,7 +186,6 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         return (
             <div
                 className="schemacell-edit-wrapper"
-                // onContextMenu={}
                 style={{
                     color,
                     textDecoration,
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];
-- 
cgit v1.2.3-70-g09d2

