diff options
author | Sophie Zhang <sophie_zhang@brown.edu> | 2024-02-22 10:22:58 -0500 |
---|---|---|
committer | Sophie Zhang <sophie_zhang@brown.edu> | 2024-02-22 10:22:58 -0500 |
commit | 3f33a680af31a04b58c6163fda53a80a737837c6 (patch) | |
tree | b84da40da1c13c8ab8ab8cd763b69ac5b39ce93c /src/client/views/nodes/LinkDescriptionPopup.tsx | |
parent | 70cf5ad795055c1f628c918b08a13a96e4ab89a6 (diff) | |
parent | cf85ee4ea73985529a16321d671d893ddb862439 (diff) |
Merge branch 'master' into sophie-ai-images
Diffstat (limited to 'src/client/views/nodes/LinkDescriptionPopup.tsx')
-rw-r--r-- | src/client/views/nodes/LinkDescriptionPopup.tsx | 18 |
1 files changed, 13 insertions, 5 deletions
diff --git a/src/client/views/nodes/LinkDescriptionPopup.tsx b/src/client/views/nodes/LinkDescriptionPopup.tsx index 13f0ac4fc..1645d0813 100644 --- a/src/client/views/nodes/LinkDescriptionPopup.tsx +++ b/src/client/views/nodes/LinkDescriptionPopup.tsx @@ -1,10 +1,11 @@ -import { action, makeObservable, observable } from 'mobx'; +import { action, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { DocData } from '../../../fields/DocSymbols'; import { LinkManager } from '../../util/LinkManager'; import './LinkDescriptionPopup.scss'; import { TaskCompletionBox } from './TaskCompletedBox'; +import { StrCast } from '../../../fields/Types'; @observer export class LinkDescriptionPopup extends React.Component<{}> { @@ -31,21 +32,26 @@ export class LinkDescriptionPopup extends React.Component<{}> { onDismiss = (add: boolean) => { this.display = false; if (add) { - LinkManager.currentLink && (LinkManager.currentLink[DocData].link_description = this.description); + LinkManager.Instance.currentLink && (LinkManager.Instance.currentLink[DocData].link_description = this.description); } + this.description = ''; }; @action onClick = (e: PointerEvent) => { if (this.popupRef && !!!this.popupRef.current?.contains(e.target as any)) { this.display = false; + this.description = ''; TaskCompletionBox.taskCompleted = false; } }; - @action componentDidMount() { document.addEventListener('pointerdown', this.onClick, true); + reaction( + () => this.display, + display => display && (this.description = StrCast(LinkManager.Instance.currentLink?.link_description)) + ); } componentWillUnmount() { @@ -65,8 +71,10 @@ export class LinkDescriptionPopup extends React.Component<{}> { className="linkDescriptionPopup-input" onKeyDown={e => e.stopPropagation()} onKeyPress={e => e.key === 'Enter' && this.onDismiss(true)} - placeholder={'(Optional) Enter link description...'} - onChange={e => this.descriptionChanged(e)}></input> + value={this.description} + placeholder={this.description || '(Optional) Enter link description...'} + onChange={e => this.descriptionChanged(e)} + /> <div className="linkDescriptionPopup-btn"> <div className="linkDescriptionPopup-btn-dismiss" onPointerDown={e => this.onDismiss(false)}> {' '} |