aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx5
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx5
-rw-r--r--src/client/views/linking/LinkEditor.scss65
-rw-r--r--src/client/views/linking/LinkEditor.tsx141
-rw-r--r--src/client/views/linking/LinkMenuItem.tsx89
-rw-r--r--src/client/views/nodes/DocumentLinksButton.tsx2
-rw-r--r--src/client/views/nodes/DocumentView.tsx16
-rw-r--r--src/client/views/nodes/LinkAnchorBox.tsx2
-rw-r--r--src/client/views/nodes/LinkDocPreview.tsx18
-rw-r--r--src/client/views/nodes/formattedText/FormattedTextBox.tsx4
10 files changed, 149 insertions, 198 deletions
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index d979ef961..bf9de6760 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -195,7 +195,10 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
const bDocBounds = (B.props as any).DocumentView?.().getBounds() || { left: 0, right: 0, top: 0, bottom: 0 };
const aleft = this.visibleX(adiv);
const bleft = this.visibleX(bdiv);
- const clipped = aleft !== a.left || atop !== a.top || bleft !== b.left || btop !== b.top;
+ const aclipped = aleft !== a.left || atop !== a.top;
+ const bclipped = bleft !== b.left || btop !== b.top;
+ if (aclipped && bclipped) return undefined;
+ const clipped = aclipped || bclipped;
const pt1 = [aleft + a.width / 2, atop + a.height / 2];
const pt2 = [bleft + b.width / 2, btop + b.width / 2];
const pt1vec = [(bDocBounds.left + bDocBounds.right) / 2 - pt1[0], (bDocBounds.top + bDocBounds.bottom) / 2 - pt1[1]];
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
index 8720c9097..b8344dc0c 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
@@ -5,11 +5,14 @@ import { DocumentManager } from '../../../util/DocumentManager';
import './CollectionFreeFormLinksView.scss';
import { CollectionFreeFormLinkView } from './CollectionFreeFormLinkView';
import React = require('react');
+import { LightboxView } from '../../LightboxView';
@observer
export class CollectionFreeFormLinksView extends React.Component<React.PropsWithChildren<{}>> {
@computed get uniqueConnections() {
- return Array.from(new Set(DocumentManager.Instance.LinkedDocumentViews)).map(c => <CollectionFreeFormLinkView key={c.l[Id]} A={c.a} B={c.b} LinkDocs={[c.l]} />);
+ return Array.from(new Set(DocumentManager.Instance.LinkedDocumentViews))
+ .filter(c => !LightboxView.LightboxDoc || (LightboxView.IsLightboxDocView(c.a.docViewPath) && LightboxView.IsLightboxDocView(c.b.docViewPath)))
+ .map(c => <CollectionFreeFormLinkView key={c.l[Id]} A={c.a} B={c.b} LinkDocs={[c.l]} />);
}
render() {
diff --git a/src/client/views/linking/LinkEditor.scss b/src/client/views/linking/LinkEditor.scss
index 1d6496d3c..b0ee4e46d 100644
--- a/src/client/views/linking/LinkEditor.scss
+++ b/src/client/views/linking/LinkEditor.scss
@@ -1,10 +1,11 @@
-@import "../global/globalCssVariables";
+@import '../global/globalCssVariables';
.linkEditor {
width: 100%;
height: auto;
font-size: 13px; // TODO
user-select: none;
+ max-width: 280px;
}
.linkEditor-button-back {
@@ -20,19 +21,20 @@
}
.linkEditor-info {
- //border-bottom: 0.5px solid $light-gray;
- //padding-bottom: 1px;
- padding: 12px;
+ padding-top: 12px;
padding-left: 5px;
+ padding-bottom: 3px;
//margin-bottom: 6px;
display: flex;
justify-content: space-between;
color: black;
.linkEditor-linkedTo {
- width: calc(100% - 26px);
- padding-left: 5px;
- padding-right: 5px;
+ width: calc(100% - 46px);
+ overflow: hidden;
+ position: relative;
+ text-overflow: ellipsis;
+ white-space: pre;
.linkEditor-downArrow {
&:hover {
@@ -77,11 +79,14 @@
width: 20px;
}
}
+.linkEditor-deleteBtn {
+ padding-left: 3px;
+}
.linkEditor-description {
padding-left: 26px;
- padding-right: 6.5px;
padding-bottom: 3.5px;
+ display: flex;
.linkEditor-description-label {
text-decoration-color: black;
@@ -96,7 +101,6 @@
//border: 1px solid grey;
//border-radius: 4px;
padding-left: 2px;
- padding-right: 2px;
//margin-right: 4px;
color: black;
text-decoration-color: grey;
@@ -104,17 +108,13 @@
.linkEditor-description-add-button {
display: inline;
- /* float: right; */
border-radius: 7px;
font-size: 9px;
background: black;
- /* padding: 3px; */
- padding-top: 4px;
- padding-left: 7px;
- padding-bottom: 4px;
- padding-right: 8px;
height: 80%;
color: white;
+ padding: 3px;
+ margin-left: 3px;
&:hover {
cursor: pointer;
@@ -146,6 +146,7 @@
padding-left: 26px;
padding-right: 6.5px;
padding-bottom: 15px;
+ display: flex;
&:hover {
cursor: pointer;
@@ -153,12 +154,11 @@
.linkEditor-followingDropdown-label {
color: black;
+ padding-right: 3px;
}
.linkEditor-followingDropdown-dropdown {
-
.linkEditor-followingDropdown-header {
-
border: 1px solid grey;
border-radius: 4px;
//background-color: rgb(236, 236, 236);
@@ -195,27 +195,25 @@
background-color: rgb(187, 220, 231);
}
}
-
}
}
-
-
}
-
-
-
-
-
.linkEditor-button,
.linkEditor-addbutton {
- width: 18px;
- height: 18px;
- padding: 0;
- // font-size: 12px;
- border-radius: 10px;
-
-
+ width: 15%;
+ border-radius: 7px;
+ font-size: 9px;
+ background: black;
+ padding: 3px;
+ height: 80%;
+ color: white;
+ text-align: center;
+ margin: auto;
+ margin-left: 3px;
+ > svg {
+ margin: auto;
+ }
&:disabled {
background-color: gray;
}
@@ -270,7 +268,6 @@
}
}
-
.linkEditor-dropdown {
width: 100%;
position: relative;
@@ -334,4 +331,4 @@
.linkEditor-button {
margin-left: 3px;
}
-} \ No newline at end of file
+}
diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx
index ba301962b..d23d38854 100644
--- a/src/client/views/linking/LinkEditor.tsx
+++ b/src/client/views/linking/LinkEditor.tsx
@@ -9,11 +9,12 @@ import { undoBatch } from '../../util/UndoManager';
import './LinkEditor.scss';
import { LinkRelationshipSearch } from './LinkRelationshipSearch';
import React = require('react');
+import { emptyFunction, returnFalse, setupMoveUpEvents } from '../../../Utils';
interface LinkEditorProps {
sourceDoc: Doc;
linkDoc: Doc;
- showLinks: () => void;
+ showLinks?: () => void;
hideback?: boolean;
}
@observer
@@ -22,13 +23,6 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
@observable relationship = StrCast(LinkManager.currentLink?.linkRelationship);
@observable zoomFollow = StrCast(this.props.sourceDoc.followLinkZoom);
@observable openDropdown: boolean = false;
- @observable showInfo: boolean = false;
- @computed get infoIcon() {
- if (this.showInfo) {
- return 'chevron-up';
- }
- return 'chevron-down';
- }
@observable private buttonColor: string = '';
@observable private relationshipButtonColor: string = '';
@observable private relationshipSearchVisibility: string = 'none';
@@ -37,12 +31,6 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
//@observable description = this.props.linkDoc.description ? StrCast(this.props.linkDoc.description) : "DESCRIPTION";
@undoBatch
- deleteLink = (): void => {
- LinkManager.Instance.deleteLink(this.props.linkDoc);
- this.props.showLinks();
- };
-
- @undoBatch
setRelationshipValue = action((value: string) => {
if (LinkManager.currentLink) {
const prevRelationship = LinkManager.currentLink.linkRelationship as string;
@@ -173,7 +161,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
//NOTE: confusingly, the classnames for the following relationship JSX elements are the same as the for the description elements for shared CSS
return (
<div className="linkEditor-description">
- <div className="linkEditor-description-label">Link Relationship:</div>
+ <div className="linkEditor-description-label">Relationship:</div>
<div className="linkEditor-description-input">
<div className="linkEditor-description-editing">
<input
@@ -214,7 +202,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
get editDescription() {
return (
<div className="linkEditor-description">
- <div className="linkEditor-description-label">Link Description:</div>
+ <div className="linkEditor-description-label">Description:</div>
<div className="linkEditor-description-input">
<div className="linkEditor-description-editing">
<input style={{ width: '100%' }} autoComplete={'off'} id="input" value={this.description} placeholder={'Enter link description'} onKeyDown={this.onDescriptionKey} onChange={this.handleDescriptionChange}></input>
@@ -284,68 +272,99 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
);
}
- @action
- changeInfo = () => {
- this.showInfo = !this.showInfo;
+ autoMove = (e: React.PointerEvent) => {
+ setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => (this.props.linkDoc.linkAutoMove = !this.props.linkDoc.linkAutoMove))));
+ };
+
+ showAnchor = (e: React.PointerEvent) => {
+ setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => (this.props.linkDoc.hidden = !this.props.linkDoc.hidden))));
+ };
+
+ showLink = (e: React.PointerEvent) => {
+ setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => (this.props.linkDoc.linkDisplay = !this.props.linkDoc.linkDisplay))));
+ };
+
+ deleteLink = (e: React.PointerEvent): void => {
+ setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => LinkManager.Instance.deleteLink(this.props.linkDoc))));
};
render() {
const destination = LinkManager.getOppositeAnchor(this.props.linkDoc, this.props.sourceDoc);
return !destination ? null : (
- <div className="linkEditor" tabIndex={0} onKeyDown={e => e.stopPropagation()}>
+ <div className="linkEditor" tabIndex={0} onKeyDown={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
<div className="linkEditor-info">
- <Tooltip
- title={
- <>
- <div className="dash-tooltip">Return to link menu</div>
- </>
- }
- placement="top">
- <button className="linkEditor-button-back" style={{ display: this.props.hideback ? 'none' : '' }} onClick={this.props.showLinks}>
- <FontAwesomeIcon icon="arrow-left" size="sm" />{' '}
- </button>
- </Tooltip>
+ {!this.props.showLinks ? null : (
+ <Tooltip title={<div className="dash-tooltip">Return to link menu</div>} placement="top">
+ <button className="linkEditor-button-back" style={{ display: this.props.hideback ? 'none' : '' }} onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, () => this.props.showLinks?.())}>
+ <FontAwesomeIcon icon="arrow-left" size="sm" />{' '}
+ </button>
+ </Tooltip>
+ )}
<p className="linkEditor-linkedTo">
Editing Link to: <b>{StrCast(destination.proto?.title, StrCast(destination.title, 'untitled'))}</b>
</p>
- <Tooltip
- title={
- <>
- <div className="dash-tooltip">Show more link information</div>
- </>
- }
- placement="top">
- <div className="linkEditor-downArrow">
- <FontAwesomeIcon className="button" icon={this.infoIcon} size="lg" onPointerDown={this.changeInfo} />
+ <Tooltip title={<div className="dash-tooltip">Delete Link</div>}>
+ <div className="linkEditor-deleteBtn" onPointerDown={this.deleteLink} onClick={e => e.stopPropagation()}>
+ <FontAwesomeIcon className="fa-icon" icon="trash" size="sm" />
</div>
</Tooltip>
</div>
- {this.showInfo ? (
- <div className="linkEditor-moreInfo">
- <div>
- {this.props.linkDoc.author ? (
- <div>
- {' '}
- <b>Author:</b> {StrCast(this.props.linkDoc.author)}
- </div>
- ) : null}
- </div>
- <div>
- {this.props.linkDoc.creationDate ? (
- <div>
- {' '}
- <b>Creation Date:</b>
- {DateCast(this.props.linkDoc.creationDate).toString()}
- </div>
- ) : null}
- </div>
- </div>
- ) : null}
+ <div className="linkEditor-moreInfo">
+ {this.props.linkDoc.author ? (
+ <>
+ {' '}
+ <b>Author:</b> {StrCast(this.props.linkDoc.author)}
+ </>
+ ) : null}
+ {this.props.linkDoc.creationDate ? (
+ <>
+ {' '}
+ <b>Creation Date:</b>
+ {DateCast(this.props.linkDoc.creationDate).toString()}
+ </>
+ ) : null}
+ </div>
{this.editDescription}
{this.editRelationship}
{this.editZoomFollow}
+ <div className="linkEditor-description">
+ Show Anchor:
+ <Tooltip title={<div className="dash-tooltip">{this.props.linkDoc.hidden ? 'Show Link Anchor' : 'Hide Link Anchor'}</div>}>
+ <div
+ className="linkEditor-button"
+ style={{ background: this.props.linkDoc.hidden ? 'gray' : '#4476f7' /* $medium-blue */ }}
+ onPointerDown={this.showAnchor}
+ onClick={e => e.stopPropagation()}>
+ <FontAwesomeIcon className="fa-icon" icon={'eye'} size="sm" />
+ </div>
+ </Tooltip>
+ </div>
+ <div className="linkEditor-description">
+ Show Link Line:
+ <Tooltip title={<div className="dash-tooltip">{this.props.linkDoc.linkDisplay ? 'Hide Link Line' : 'Show Link Line'}</div>}>
+ <div
+ className="linkEditor-button"
+ style={{ background: this.props.linkDoc.hidden ? 'gray' : this.props.linkDoc.linkDisplay ? '#4476f7' /* $medium-blue */ : '' }}
+ onPointerDown={this.showLink}
+ onClick={e => e.stopPropagation()}>
+ <FontAwesomeIcon className="fa-icon" icon={'project-diagram'} size="sm" />
+ </div>
+ </Tooltip>
+ </div>
+ <div className="linkEditor-description">
+ Freeze Anchor:
+ <Tooltip title={<div className="dash-tooltip">{this.props.linkDoc.linkAutoMove ? 'Click to freeze link anchor position' : 'Click to auto move link anchor'}</div>}>
+ <div
+ className="linkEditor-button"
+ style={{ background: this.props.linkDoc.hidden ? 'gray' : this.props.linkDoc.linkAutoMove ? '' : '#4476f7' /* $medium-blue */ }}
+ onPointerDown={this.autoMove}
+ onClick={e => e.stopPropagation()}>
+ <FontAwesomeIcon className="fa-icon" icon={'play'} size="sm" />
+ </div>
+ </Tooltip>
+ </div>
{this.followingDropdown}
</div>
);
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index ed856a4ab..60428fc98 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -125,33 +125,6 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
);
};
- deleteLink = (e: React.PointerEvent): void => {
- setupMoveUpEvents(
- this,
- e,
- returnFalse,
- emptyFunction,
- undoBatch(
- action(() => {
- this.props.linkDoc.linksToAnnotation && Hypothesis.deleteLink(this.props.linkDoc, this.props.sourceDoc, this.props.destinationDoc);
- LinkManager.Instance.deleteLink(this.props.linkDoc);
- })
- )
- );
- };
-
- autoMove = (e: React.PointerEvent) => {
- setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => (this.props.linkDoc.linkAutoMove = !this.props.linkDoc.linkAutoMove))));
- };
-
- showLink = (e: React.PointerEvent) => {
- setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => (this.props.linkDoc.linkDisplay = !this.props.linkDoc.linkDisplay))));
- };
-
- showAnchor = (e: React.PointerEvent) => {
- setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => (this.props.linkDoc.hidden = !this.props.linkDoc.hidden))));
- };
-
render() {
const destinationIcon = Doc.toIcon(this.props.destinationDoc) as any as IconProp;
@@ -183,7 +156,7 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
linkSrc: this.props.sourceDoc,
linkDoc: this.props.linkDoc,
showHeader: false,
- location: [e.clientX, e.clientY + 20],
+ location: [this._drag.current?.getBoundingClientRect().right ?? 100, this._drag.current?.getBoundingClientRect().top ?? e.clientY],
})
}
onPointerDown={this.onLinkButtonDown}>
@@ -206,69 +179,11 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
</div>
<div className="linkMenu-item-buttons" ref={this._buttonRef}>
- <Tooltip
- title={
- <>
- <div className="dash-tooltip">{this.props.linkDoc.hidden ? 'Show Link Anchor' : 'Hide Link Anchor'}</div>
- </>
- }>
- <div className="button" ref={this._editRef} style={{ background: this.props.linkDoc.hidden ? '' : '#4476f7' /* $medium-blue */ }} onPointerDown={this.showAnchor} onClick={e => e.stopPropagation()}>
- <FontAwesomeIcon className="fa-icon" icon={'eye'} size="sm" />
- </div>
- </Tooltip>
-
- <Tooltip
- title={
- <>
- <div className="dash-tooltip">{this.props.linkDoc.linkDisplay ? 'Hide Link Line' : 'Show Link Line'}</div>
- </>
- }>
- <div
- className="button"
- ref={this._editRef}
- style={{ background: this.props.linkDoc.hidden ? 'gray' : this.props.linkDoc.linkDisplay ? '#4476f7' /* $medium-blue */ : '' }}
- onPointerDown={this.showLink}
- onClick={e => e.stopPropagation()}>
- <FontAwesomeIcon className="fa-icon" icon={'project-diagram'} size="sm" />
- </div>
- </Tooltip>
-
- <Tooltip
- title={
- <>
- <div className="dash-tooltip">{this.props.linkDoc.linkAutoMove ? 'Click to freeze link anchor position' : 'Click to auto move link anchor'}</div>
- </>
- }>
- <div
- className="button"
- ref={this._editRef}
- style={{ background: this.props.linkDoc.hidden ? 'gray' : !this.props.linkDoc.linkAutoMove ? '' : '#4476f7' /* $medium-blue */ }}
- onPointerDown={this.autoMove}
- onClick={e => e.stopPropagation()}>
- <FontAwesomeIcon className="fa-icon" icon={'play'} size="sm" />
- </div>
- </Tooltip>
-
- <Tooltip
- title={
- <>
- <div className="dash-tooltip">Edit Link</div>
- </>
- }>
+ <Tooltip title={<div className="dash-tooltip">Edit Link</div>}>
<div className="button" ref={this._editRef} onPointerDown={this.onEdit} onClick={e => e.stopPropagation()}>
<FontAwesomeIcon className="fa-icon" icon="edit" size="sm" />
</div>
</Tooltip>
- <Tooltip
- title={
- <>
- <div className="dash-tooltip">Delete Link</div>
- </>
- }>
- <div className="button" onPointerDown={this.deleteLink} onClick={e => e.stopPropagation()}>
- <FontAwesomeIcon className="fa-icon" icon="trash" size="sm" />
- </div>
- </Tooltip>
</div>
</div>
</div>
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index 5939d1680..a37de7f69 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -307,7 +307,7 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
<div
className="documentLinksButton-wrapper"
style={{
- transform: this.props.InMenu ? undefined : `scale(${this.props.scaling})`,
+ transform: `scale(${this.props.scaling?.() || 1})`,
}}>
{(this.props.InMenu && (DocumentLinksButton.StartLink || this.props.StartLink)) || (!DocumentLinksButton.LinkEditorDocView && !this.props.InMenu) ? (
<Tooltip title={<div className="dash-tooltip">{title}</div>}>{this.linkButtonInner}</Tooltip>
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 1ee1aec5a..2524d66dd 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1070,7 +1070,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
<DocumentLinksButton
View={this.props.DocumentView()}
scaling={this.linkButtonInverseScaling}
- Offset={[this.topMost ? 0 : !this.props.isSelected() ? -15 : -30, undefined, undefined, this.topMost ? 10 : !this.props.isSelected() ? -15 : -30]}
+ Offset={[this.topMost ? 0 : !this.props.isSelected() ? -15 : -36, undefined, undefined, this.topMost ? 10 : !this.props.isSelected() ? -15 : -28]}
/>
)}
{audioView}
@@ -1298,6 +1298,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
isHovering = () => this._isHovering;
@observable _isHovering = false;
@observable _: string = '';
+ _hoverTimeout: any = undefined;
@computed get renderDoc() {
TraceMobx();
const thumb = ImageCast(this.layoutDoc['thumb-frozen'], ImageCast(this.layoutDoc.thumb))?.url?.href.replace('.png', '_m.png');
@@ -1308,8 +1309,17 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
<div
className={`documentView-node${this.topMost ? '-topmost' : ''}`}
id={this.props.Document[Id]}
- onPointerEnter={action(() => (this._isHovering = true))}
- onPointerLeave={action(() => (this._isHovering = false))}
+ onPointerEnter={action(() => {
+ clearTimeout(this._hoverTimeout);
+ this._isHovering = true;
+ })}
+ onPointerLeave={action(() => {
+ clearTimeout(this._hoverTimeout);
+ this._hoverTimeout = setTimeout(
+ action(() => (this._isHovering = false)),
+ 500
+ );
+ })}
style={{
background: isButton || thumb ? undefined : this.backgroundColor,
opacity: this.opacity,
diff --git a/src/client/views/nodes/LinkAnchorBox.tsx b/src/client/views/nodes/LinkAnchorBox.tsx
index 85a8622ec..5102eae51 100644
--- a/src/client/views/nodes/LinkAnchorBox.tsx
+++ b/src/client/views/nodes/LinkAnchorBox.tsx
@@ -136,7 +136,7 @@ export class LinkAnchorBox extends ViewBoxBaseComponent<FieldViewProps>() {
return (
<div
className={`linkAnchorBox-cont${small ? '-small' : ''}`}
- onPointerLeave={LinkDocPreview.Clear}
+ //onPointerLeave={} //LinkDocPreview.Clear}
onPointerEnter={e =>
LinkDocPreview.SetLinkInfo({
docProps: this.props,
diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx
index 85b1f8d9e..93ca22d5d 100644
--- a/src/client/views/nodes/LinkDocPreview.tsx
+++ b/src/client/views/nodes/LinkDocPreview.tsx
@@ -17,6 +17,7 @@ import { undoBatch } from '../../util/UndoManager';
import { DocumentView, DocumentViewSharedProps } from './DocumentView';
import './LinkDocPreview.scss';
import React = require('react');
+import { LinkEditor } from '../linking/LinkEditor';
interface LinkDocPreviewProps {
linkDoc?: Doc;
@@ -118,13 +119,15 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> {
}
return undefined;
}
- deleteLink = (e: React.PointerEvent) => {
+ @observable _showEditor = false;
+ editLink = (e: React.PointerEvent): void => {
+ LinkManager.currentLink = this.props.linkDoc;
setupMoveUpEvents(
this,
e,
returnFalse,
emptyFunction,
- undoBatch(() => this._linkDoc && LinkManager.Instance.deleteLink(this._linkDoc))
+ action(() => (this._showEditor = !this._showEditor))
);
};
nextHref = (e: React.PointerEvent) => {
@@ -183,9 +186,9 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> {
</div>
</Tooltip>
- <Tooltip title={<div className="dash-tooltip">Delete Link</div>} placement="top">
- <div className="linkDocPreview-button" onPointerDown={this.deleteLink}>
- <FontAwesomeIcon className="linkDocPreview-fa-icon" icon="trash" color="white" size="sm" />
+ <Tooltip title={<div className="dash-tooltip">Edit Link</div>} placement="top">
+ <div className="linkDocPreview-button" onPointerDown={this.editLink}>
+ <FontAwesomeIcon className="linkDocPreview-fa-icon" icon="edit" color="white" size="sm" />
</div>
</Tooltip>
</div>
@@ -271,8 +274,9 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> {
className="linkDocPreview"
ref={this._linkDocRef}
onPointerDown={this.followLinkPointerDown}
- style={{ left: this.props.location[0], top: this.props.location[1], width: this.width() + borders, height: this.height() + borders + (this.props.showHeader ? 37 : 0) }}>
- {this.docPreview}
+ style={{ left: this.props.location[0], top: this.props.location[1], width: this._showEditor ? 'auto' : this.width() + borders, height: this._showEditor ? 'max-content' : this.height() + borders + (this.props.showHeader ? 37 : 0) }}>
+ {this._showEditor ? null : this.docPreview}
+ {!this._showEditor || !this._linkSrc || !this._linkDoc ? null : <LinkEditor sourceDoc={this._linkSrc} linkDoc={this._linkDoc} showLinks={action(() => (this._showEditor = !this._showEditor))} />}
</div>
);
}
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index a018f51c2..40b0d285c 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -24,7 +24,7 @@ import { addStyleSheet, addStyleSheetRule, clearStyleSheetRules, emptyFunction,
import { GoogleApiClientUtils, Pulls, Pushes } from '../../../apis/google_docs/GoogleApiClientUtils';
import { DocServer } from '../../../DocServer';
import { Docs, DocUtils } from '../../../documents/Documents';
-import { DocumentType } from '../../../documents/DocumentTypes';
+import { CollectionViewType, DocumentType } from '../../../documents/DocumentTypes';
import { DictationManager } from '../../../util/DictationManager';
import { DocumentManager } from '../../../util/DocumentManager';
import { DragManager } from '../../../util/DragManager';
@@ -1751,7 +1751,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
}
@computed get sidebarCollection() {
const renderComponent = (tag: string) => {
- const ComponentTag = tag === 'freeform' ? CollectionFreeFormView : tag === 'tree' ? CollectionTreeView : tag === 'translation' ? FormattedTextBox : CollectionStackingView;
+ const ComponentTag = tag === CollectionViewType.Freeform ? CollectionFreeFormView : tag === CollectionViewType.Tree ? CollectionTreeView : tag === 'translation' ? FormattedTextBox : CollectionStackingView;
return ComponentTag === CollectionStackingView ? (
<SidebarAnnos
ref={this._sidebarRef}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 05:10:14 +0000