diff options
Diffstat (limited to 'src/client/views/nodes/formattedText/FormattedTextBox.tsx')
-rw-r--r-- | src/client/views/nodes/formattedText/FormattedTextBox.tsx | 95 |
1 files changed, 59 insertions, 36 deletions
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index e4f47953d..61940ac09 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -18,7 +18,7 @@ import { PrefetchProxy } from '../../../../fields/Proxy'; import { RichTextField } from '../../../../fields/RichTextField'; import { RichTextUtils } from '../../../../fields/RichTextUtils'; import { ComputedField } from '../../../../fields/ScriptField'; -import { Cast, FieldValue, NumCast, ScriptCast, StrCast } from '../../../../fields/Types'; +import { BoolCast, Cast, FieldValue, NumCast, ScriptCast, StrCast } from '../../../../fields/Types'; import { GetEffectiveAcl, TraceMobx } from '../../../../fields/util'; import { addStyleSheet, addStyleSheetRule, clearStyleSheetRules, emptyFunction, numberRange, OmitKeys, returnZero, setupMoveUpEvents, smoothScroll, unimplementedFunction, Utils } from '../../../../Utils'; import { GoogleApiClientUtils, Pulls, Pushes } from '../../../apis/google_docs/GoogleApiClientUtils'; @@ -651,9 +651,53 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps return false; }; + @undoBatch + deleteAnnotation = (anchor: Doc) => { + LinkManager.Instance.deleteLink(DocListCast(anchor.links)[0]); + // const docAnnotations = DocListCast(this.props.dataDoc[this.props.fieldKey]); + // this.props.dataDoc[this.props.fieldKey] = new List<Doc>(docAnnotations.filter(a => a !== this.annoTextRegion)); + // AnchorMenu.Instance.fadeOut(true); + this.props.select(false); + }; + + @undoBatch + pinToPres = (anchor: Doc) => this.props.pinToPres(anchor); + + @undoBatch + makePushpin = (anchor: Doc) => (anchor.isPushpin = !anchor.isPushpin); + + isPushpin = (anchor: Doc) => BoolCast(anchor.isPushpin); + specificContextMenu = (e: React.MouseEvent): void => { const cm = ContextMenu.Instance; + const editor = this._editorView!; + const pcords = editor.posAtCoords({ left: e.clientX, top: e.clientY }); + let target = (e.target as any).parentElement; // hrefs are stored on the database of the <a> node that wraps the hyerlink <span> + while (target && !target.dataset?.targethrefs) target = target.parentElement; + if (target) { + const hrefs = (target.dataset?.targethrefs as string) + ?.trim() + .split(' ') + .filter(h => h); + const anchorDoc = Array.from(hrefs).lastElement().replace(Doc.localServerPath(), '').split('?')[0]; + e.persist(); + anchorDoc && + DocServer.GetRefField(anchorDoc).then( + action(anchor => { + AnchorMenu.Instance.Status = 'annotation'; + AnchorMenu.Instance.Delete = () => this.deleteAnnotation(anchor as Doc); + AnchorMenu.Instance.Pinned = false; + AnchorMenu.Instance.PinToPres = () => this.pinToPres(anchor as Doc); + AnchorMenu.Instance.MakePushpin = () => this.makePushpin(anchor as Doc); + AnchorMenu.Instance.IsPushpin = () => this.isPushpin(anchor as Doc); + AnchorMenu.Instance.jumpTo(e.clientX, e.clientY, true); + }) + ); + e.stopPropagation(); + return; + } + const changeItems: ContextMenuProps[] = []; changeItems.push({ description: 'plain', @@ -845,8 +889,10 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps } scrollFocus = (textAnchor: Doc, smooth: boolean) => { + let didToggle = false; if (DocListCast(this.Document[this.fieldKey + '-sidebar']).includes(textAnchor) && !this.SidebarShown) { this.toggleSidebar(!smooth); + didToggle = true; } const textAnchorId = textAnchor[Id]; const findAnchorFrag = (frag: Fragment, editor: EditorView) => { @@ -899,7 +945,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps } } - return this._didScroll ? this._focusSpeed : undefined; // if we actually scrolled, then return some focusSpeed + return this._didScroll ? this._focusSpeed : didToggle ? 1 : undefined; // if we actually scrolled, then return some focusSpeed }; getScrollHeight = () => this.scrollHeight; @@ -1337,6 +1383,10 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps } onPointerDown = (e: React.PointerEvent): void => { + if ((e.nativeEvent as any).handledByInnerReactInstance) { + return e.stopPropagation(); + } else (e.nativeEvent as any).handledByInnerReactInstance = true; + if (this.Document.forceActive) e.stopPropagation(); this.tryUpdateScrollHeight(); // if a doc a fitwidth doc is being viewed in different context (eg freeform & lightbox), then it will have conflicting heights. so when the doc is clicked on, we want to make sure it has the appropriate height for the selected view. if ((e.target as any).tagName === 'AUDIOTAG') { @@ -1390,10 +1440,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps if (!this._editorView?.state.selection.empty && FormattedTextBox._canAnnotate) this.setupAnchorMenu(); if (!this._downEvent) return; this._downEvent = false; - if ((e.nativeEvent as any).formattedHandled) { - console.log('handled'); - } - if (!(e.nativeEvent as any).formattedHandled && this.props.isContentActive(true)) { + if (this.props.isContentActive(true)) { const editor = this._editorView!; const pcords = editor.posAtCoords({ left: e.clientX, top: e.clientY }); !this.props.isSelected(true) && editor.dispatch(editor.state.tr.setSelection(new TextSelection(editor.state.doc.resolve(pcords?.pos || 0)))); @@ -1401,9 +1448,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps while (target && !target.dataset?.targethrefs) target = target.parentElement; FormattedTextBoxComment.update(this, editor, undefined, target?.dataset?.targethrefs, target?.dataset.linkdoc); } - (e.nativeEvent as any).formattedHandled = true; - if (e.buttons === 1 && this.props.isSelected(true) && !e.altKey) { + if (e.button === 0 && this.props.isSelected(true) && !e.altKey) { e.stopPropagation(); } }; @@ -1421,8 +1467,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps } FormattedTextBoxComment.Hide(); - (e.nativeEvent as any).formattedHandled = true; - if (e.buttons === 1 && this.props.isSelected(true) && !e.altKey) { e.stopPropagation(); } @@ -1441,6 +1485,10 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps @observable public static Focused: FormattedTextBox | undefined; onClick = (e: React.MouseEvent): void => { + if ((e.nativeEvent as any).handledByInnerReactInstance) { + e.stopPropagation(); + return; + } if (Math.abs(e.clientX - this._downX) > 4 || Math.abs(e.clientY - this._downY) > 4) { this._forceDownNode = undefined; return; @@ -1465,13 +1513,9 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps this._editorView!.dispatch(this._editorView!.state.tr.setSelection(NodeSelection.create(this._editorView!.state.doc, pcords.pos))); } } - if ((e.nativeEvent as any).formattedHandled) { - e.stopPropagation(); - return; - } if (this.props.isSelected(true)) { // if text box is selected, then it consumes all click events - (e.nativeEvent as any).formattedHandled = true; + (e.nativeEvent as any).handledByInnerReactInstance = true; if (this.ProseRef?.children[0] !== e.nativeEvent.target) e.stopPropagation(); // if you double click on text, then it will be selected instead of sending a double click to DocumentView & opening a lightbox. Also,if a text box has isLinkButton, this will prevent link following if you've selected the document to edit it. // e.stopPropagation(); // bcz: not sure why this was here. We need to allow the DocumentView to get clicks to process doubleClicks (see above comment) this.hitBulletTargets(e.clientX, e.clientY, !this._editorView?.state.selection.empty || this._forceUncollapse, false, this._forceDownNode, e.shiftKey); @@ -1512,26 +1556,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps } } } - onMouseUp = (e: React.MouseEvent): void => { - e.stopPropagation(); - - const view = this._editorView as any; - // this interposes on prosemirror's upHandler to prevent prosemirror's up from invoked multiple times when there - // are nested prosemirrors. We only want the lowest level prosemirror to be invoked. - if (view.mouseDown) { - const originalUpHandler = view.mouseDown.up; - view.root.removeEventListener('mouseup', originalUpHandler); - view.mouseDown.up = (e: MouseEvent) => { - if (!(e as any).formattedHandled) { - originalUpHandler(e); - (e as any).formattedHandled = true; - } else { - console.log('prehandled'); - } - }; - view.root.addEventListener('mouseup', view.mouseDown.up); - } - }; startUndoTypingBatch() { !this._undoTyping && (this._undoTyping = UndoManager.StartBatch('undoTyping')); } @@ -1802,7 +1826,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps onBlur={this.onBlur} onPointerUp={this.onPointerUp} onPointerDown={this.onPointerDown} - onMouseUp={this.onMouseUp} onDoubleClick={this.onDoubleClick}> <div className={`formattedTextBox-outer${selected ? '-selected' : ''}`} |