diff options
| -rw-r--r-- | src/client/views/KeywordBox.tsx | 16 |
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} </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>) => { |