added '@' prefix syntax to show metadata field value in keywords box

1 files changed, 13 insertions, 3 deletions

diff --git a/src/client/views/KeywordBox.tsx b/src/client/views/KeywordBox.tsx
index fc9c38a11..20cb63d66 100644
--- a/src/client/views/KeywordBox.tsx
+++ b/src/client/views/KeywordBox.tsx
@@ -13,6 +13,7 @@ import { DragManager } from '../util/DragManager';
 import { SnappingManager } from '../util/SnappingManager';
 import { DocumentView } from './nodes/DocumentView';
 import { ObservableReactComponent } from './ObservableReactComponent';
+import { undoable } from '../util/UndoManager';
 
 interface KeywordItemProps {
     doc: Doc;
@@ -123,9 +124,18 @@ export class KeywordItem extends ObservableReactComponent<KeywordItemProps> {
     };
 
     render() {
+        const keyword = this._props.keyword.replace(/^@/, '');
+        const metadata = this._props.keyword.startsWith('@');
         return (
             <div className="keyword" onClick={this._props.setToEditing} onPointerDown={this.handleDragStart} ref={this.ref} key={Utils.GenerateGuid()}>
-                {this._props.keyword}
+                {metadata ? (
+                    <span>
+                        <b style={{ fontSize: 'smaller' }}>{keyword}&nbsp;</b>
+                        {this._props.doc[keyword] as string}{' '}
+                    </span>
+                ) : (
+                    keyword
+                )}
                 {this.props.isEditing && <IconButton tooltip={'Remove label'} onPointerDown={this.removeLabel} icon={'X'} style={{ width: '8px', height: '8px', marginLeft: '10px' }} />}
             </div>
         );
@@ -218,7 +228,7 @@ export class KeywordBox extends ObservableReactComponent<KeywordBoxProps> {
      * Adds the keyword to the document.
      * @param keyword
      */
-    submitLabel = (keyword: string) => {
+    submitLabel = undoable((keyword: string) => {
         // If the active Dashboard does not have a keyword collection, create it.
         if (Doc.ActiveDashboard && !Doc.ActiveDashboard.myKeywordCollections) {
             Doc.ActiveDashboard.myKeywordCollections = new List<Doc>();
@@ -261,7 +271,7 @@ export class KeywordBox extends ObservableReactComponent<KeywordBoxProps> {
             this._props.doc![DocData][`${submittedLabel}`] = true;
             this._currentInput = ''; // Clear the input box
         }
-    };
+    }, 'added doc label');
 
     @action
     onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {