diff options
Diffstat (limited to 'src/client/views/linking/LinkMenu.tsx')
-rw-r--r-- | src/client/views/linking/LinkMenu.tsx | 18 |
1 files changed, 12 insertions, 6 deletions
diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx index bc922be36..17d28e886 100644 --- a/src/client/views/linking/LinkMenu.tsx +++ b/src/client/views/linking/LinkMenu.tsx @@ -2,8 +2,7 @@ import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; import { Doc } from "../../../fields/Doc"; import { LinkManager } from "../../util/LinkManager"; -import { DocumentLinksButton } from "../nodes/DocumentLinksButton"; -import { DocumentView, DocumentViewSharedProps } from "../nodes/DocumentView"; +import { DocumentView } from "../nodes/DocumentView"; import { LinkDocPreview } from "../nodes/LinkDocPreview"; import { LinkEditor } from "./LinkEditor"; import './LinkMenu.scss'; @@ -14,6 +13,7 @@ interface Props { docView: DocumentView; position?: { x?: number, y?: number }; itemHandler?: (doc: Doc) => void; + clearLinkEditor: () => void; } /** @@ -21,7 +21,7 @@ interface Props { */ @observer export class LinkMenu extends React.Component<Props> { - private _editorRef = React.createRef<HTMLDivElement>(); + _editorRef = React.createRef<HTMLDivElement>(); @observable _editingLink?: Doc; @observable _linkMenuRef = React.createRef<HTMLDivElement>(); @@ -29,16 +29,21 @@ export class LinkMenu extends React.Component<Props> { return this.props.position ?? (dv => ({ x: dv?.left || 0, y: (dv?.bottom || 0) + 15 }))(this.props.docView.getBounds()); } + clear = action(() => { + this.props.clearLinkEditor(); + this._editingLink = undefined; + }); + componentDidMount() { document.addEventListener("pointerdown", this.onPointerDown); } componentWillUnmount() { document.removeEventListener("pointerdown", this.onPointerDown); } - onPointerDown = (e: PointerEvent) => { + onPointerDown = action((e: PointerEvent) => { LinkDocPreview.Clear(); if (!this._linkMenuRef.current?.contains(e.target as any) && !this._editorRef.current?.contains(e.target as any)) { - DocumentLinksButton.ClearLinkEditor(); + this.clear(); } - } + }); /** * maps each link to a JSX element to be rendered @@ -54,6 +59,7 @@ export class LinkMenu extends React.Component<Props> { sourceDoc={this.props.docView.props.Document} group={group[1]} groupType={group[0]} + clearLinkEditor={this.clear} showEditor={action(linkDoc => this._editingLink = linkDoc)} />); return linkItems.length ? linkItems : this.props.position ? [<></>] : [<p key="">No links have been created yet. Drag the linking button onto another document to create a link.</p>]; |