From c660a8b1846db1bc05cf8f496f77e706fe469711 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 13 Jul 2022 10:48:25 -0400 Subject: fixed linkdoc preview not going away when clicking outside of it. --- src/client/views/linking/LinkMenu.tsx | 63 +++++++++++++++++-------------- src/client/views/nodes/LinkDocPreview.tsx | 16 ++++---- 2 files changed, 42 insertions(+), 37 deletions(-) (limited to 'src') diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx index 17d28e886..0096a58bd 100644 --- a/src/client/views/linking/LinkMenu.tsx +++ b/src/client/views/linking/LinkMenu.tsx @@ -1,17 +1,17 @@ -import { action, computed, observable } from "mobx"; -import { observer } from "mobx-react"; -import { Doc } from "../../../fields/Doc"; -import { LinkManager } from "../../util/LinkManager"; -import { DocumentView } from "../nodes/DocumentView"; -import { LinkDocPreview } from "../nodes/LinkDocPreview"; -import { LinkEditor } from "./LinkEditor"; +import { action, computed, observable } from 'mobx'; +import { observer } from 'mobx-react'; +import { Doc } from '../../../fields/Doc'; +import { LinkManager } from '../../util/LinkManager'; +import { DocumentView } from '../nodes/DocumentView'; +import { LinkDocPreview } from '../nodes/LinkDocPreview'; +import { LinkEditor } from './LinkEditor'; import './LinkMenu.scss'; -import { LinkMenuGroup } from "./LinkMenuGroup"; -import React = require("react"); +import { LinkMenuGroup } from './LinkMenuGroup'; +import React = require('react'); interface Props { docView: DocumentView; - position?: { x?: number, y?: number }; + position?: { x?: number; y?: number }; itemHandler?: (doc: Doc) => void; clearLinkEditor: () => void; } @@ -34,13 +34,16 @@ export class LinkMenu extends React.Component { this._editingLink = undefined; }); - componentDidMount() { document.addEventListener("pointerdown", this.onPointerDown); } - componentWillUnmount() { document.removeEventListener("pointerdown", this.onPointerDown); } + componentDidMount() { + document.addEventListener('pointerdown', this.onPointerDown, true); + } + componentWillUnmount() { + document.removeEventListener('pointerdown', this.onPointerDown, true); + } onPointerDown = action((e: PointerEvent) => { LinkDocPreview.Clear(); - if (!this._linkMenuRef.current?.contains(e.target as any) && - !this._editorRef.current?.contains(e.target as any)) { + if (!this._linkMenuRef.current?.contains(e.target as any) && !this._editorRef.current?.contains(e.target as any)) { this.clear(); } }); @@ -51,7 +54,7 @@ export class LinkMenu extends React.Component { * @returns list of link JSX elements if there at least one linked element */ renderAllGroups = (groups: Map>): Array => { - const linkItems = Array.from(groups.entries()).map(group => + const linkItems = Array.from(groups.entries()).map(group => ( { group={group[1]} groupType={group[0]} clearLinkEditor={this.clear} - showEditor={action(linkDoc => this._editingLink = linkDoc)} />); + showEditor={action(linkDoc => (this._editingLink = linkDoc))} + /> + )); return linkItems.length ? linkItems : this.props.position ? [<>] : [

No links have been created yet. Drag the linking button onto another document to create a link.

]; - } + }; render() { const sourceDoc = this.props.docView.props.Document; - return
- {this._editingLink ? -
- this._editingLink = undefined)} /> -
: -
- {this.renderAllGroups(LinkManager.Instance.getRelatedGroupedLinks(sourceDoc))} -
} -
; + return ( +
+ {this._editingLink ? ( +
+ (this._editingLink = undefined))} /> +
+ ) : ( +
{this.renderAllGroups(LinkManager.Instance.getRelatedGroupedLinks(sourceDoc))}
+ )} +
+ ); } -} \ No newline at end of file +} diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx index c2fb5d4ec..d8b943ae4 100644 --- a/src/client/views/nodes/LinkDocPreview.tsx +++ b/src/client/views/nodes/LinkDocPreview.tsx @@ -3,20 +3,20 @@ import { Tooltip } from '@material-ui/core'; import { action, computed, observable } from 'mobx'; import { observer } from 'mobx-react'; import wiki from 'wikijs'; -import { Doc, DocListCast, HeightSym, Opt, WidthSym, DocCastAsync } from '../../../fields/Doc'; -import { NumCast, StrCast, Cast } from '../../../fields/Types'; -import { emptyFunction, emptyPath, returnEmptyDoclist, returnEmptyFilter, returnFalse, setupMoveUpEvents, Utils } from '../../../Utils'; +import { Doc, DocCastAsync, DocListCast, HeightSym, Opt, WidthSym } from '../../../fields/Doc'; +import { Cast, NumCast, StrCast } from '../../../fields/Types'; +import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, setupMoveUpEvents } from '../../../Utils'; import { DocServer } from '../../DocServer'; import { Docs, DocUtils } from '../../documents/Documents'; +import { DocumentType } from '../../documents/DocumentTypes'; +import { DragManager } from '../../util/DragManager'; +import { LinkFollower } from '../../util/LinkFollower'; import { LinkManager } from '../../util/LinkManager'; import { Transform } from '../../util/Transform'; import { undoBatch } from '../../util/UndoManager'; import { DocumentView, DocumentViewSharedProps } from './DocumentView'; import './LinkDocPreview.scss'; import React = require('react'); -import { DocumentType } from '../../documents/DocumentTypes'; -import { DragManager } from '../../util/DragManager'; -import { LinkFollower } from '../../util/LinkFollower'; interface LinkDocPreviewProps { linkDoc?: Doc; @@ -65,12 +65,12 @@ export class LinkDocPreview extends React.Component { } componentDidMount() { this.init(); - document.addEventListener('pointerdown', this.onPointerDown); + document.addEventListener('pointerdown', this.onPointerDown, true); } componentWillUnmount() { LinkDocPreview.SetLinkInfo(undefined); - document.removeEventListener('pointerdown', this.onPointerDown); + document.removeEventListener('pointerdown', this.onPointerDown, true); } onPointerDown = (e: PointerEvent) => { -- cgit v1.2.3-70-g09d2