diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/linking/LinkMenu.tsx | 63 | ||||
| -rw-r--r-- | src/client/views/nodes/LinkDocPreview.tsx | 16 |
2 files changed, 42 insertions, 37 deletions
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<Props> { 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<Props> { * @returns list of link JSX elements if there at least one linked element */ renderAllGroups = (groups: Map<string, Array<Doc>>): Array<JSX.Element> => { - const linkItems = Array.from(groups.entries()).map(group => + const linkItems = Array.from(groups.entries()).map(group => ( <LinkMenuGroup key={group[0]} itemHandler={this.props.itemHandler} @@ -60,23 +63,25 @@ export class LinkMenu extends React.Component<Props> { 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 ? [<></>] : [<p key="">No links have been created yet. Drag the linking button onto another document to create a link.</p>]; - } + }; render() { const sourceDoc = this.props.docView.props.Document; - return <div className="linkMenu" ref={this._linkMenuRef} - style={{ left: this.position.x, top: this.props.docView.topMost ? undefined : this.position.y, bottom: this.props.docView.topMost ? 20 : undefined }} - > - {this._editingLink ? - <div className="linkMenu-listEditor"> - <LinkEditor sourceDoc={sourceDoc} linkDoc={this._editingLink} showLinks={action(() => this._editingLink = undefined)} /> - </div> : - <div className="linkMenu-list" > - {this.renderAllGroups(LinkManager.Instance.getRelatedGroupedLinks(sourceDoc))} - </div>} - </div>; + return ( + <div className="linkMenu" ref={this._linkMenuRef} style={{ left: this.position.x, top: this.props.docView.topMost ? undefined : this.position.y, bottom: this.props.docView.topMost ? 20 : undefined }}> + {this._editingLink ? ( + <div className="linkMenu-listEditor"> + <LinkEditor sourceDoc={sourceDoc} linkDoc={this._editingLink} showLinks={action(() => (this._editingLink = undefined))} /> + </div> + ) : ( + <div className="linkMenu-list">{this.renderAllGroups(LinkManager.Instance.getRelatedGroupedLinks(sourceDoc))}</div> + )} + </div> + ); } -}
\ 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<LinkDocPreviewProps> { } 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) => { |