diff options
| author | bobzel <zzzman@gmail.com> | 2024-05-19 01:01:02 -0400 |
|---|---|---|
| committer | bobzel <zzzman@gmail.com> | 2024-05-19 01:01:02 -0400 |
| commit | 6e72f969029c22fe797397a6437836a0482260b6 (patch) | |
| tree | e8ccde75702e557b2226c9069263e1bc3bd21a4b /src/client/views/PreviewCursor.tsx | |
| parent | 5ff0bef5d3c4825aa7210a26c98aae3b24f4a835 (diff) | |
| parent | 13dc6de0e0099f699ad0d2bb54401e6a0aa25018 (diff) | |
Merge branch 'restoringEslint' into alyssa-starter
Diffstat (limited to 'src/client/views/PreviewCursor.tsx')
| -rw-r--r-- | src/client/views/PreviewCursor.tsx | 33 |
1 files changed, 19 insertions, 14 deletions
diff --git a/src/client/views/PreviewCursor.tsx b/src/client/views/PreviewCursor.tsx index a94c18295..034ade50b 100644 --- a/src/client/views/PreviewCursor.tsx +++ b/src/client/views/PreviewCursor.tsx @@ -1,9 +1,10 @@ import { action, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { lightOrDark, returnFalse } from '../../Utils'; +import { lightOrDark, returnFalse } from '../../ClientUtils'; import { Doc, Opt } from '../../fields/Doc'; -import { DocUtils, Docs, DocumentOptions } from '../documents/Documents'; +import { Docs, DocumentOptions } from '../documents/Documents'; +import { DocUtils } from '../documents/DocUtils'; import { ImageUtils } from '../util/Import & Export/ImageUtils'; import { Transform } from '../util/Transform'; import { UndoManager, undoBatch } from '../util/UndoManager'; @@ -13,12 +14,13 @@ import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox'; @observer export class PreviewCursor extends ObservableReactComponent<{}> { + // eslint-disable-next-line no-use-before-define static _instance: PreviewCursor; public static get Instance() { return PreviewCursor._instance; } - _onKeyPress?: (e: KeyboardEvent) => void; + _onKeyDown?: (e: KeyboardEvent) => void; _getTransform?: () => Transform; _addDocument?: (doc: Doc | Doc[]) => boolean; _addLiveTextDoc?: (doc: Doc) => void; @@ -32,14 +34,16 @@ export class PreviewCursor extends ObservableReactComponent<{}> { makeObservable(this); PreviewCursor._instance = this; this._clickPoint = observable([0, 0]); - document.addEventListener('keydown', this.onKeyPress); + document.addEventListener('keydown', this.onKeyDown); document.addEventListener('paste', this.paste, true); } paste = async (e: ClipboardEvent) => { if (this.Visible && e.clipboardData) { const newPoint = this._getTransform?.().transformPoint(this._clickPoint[0], this._clickPoint[1]); - runInAction(() => (this.Visible = false)); + runInAction(() => { + this.Visible = false; + }); // tests for URL and makes web document const re: any = /^https?:\/\//g; @@ -88,10 +92,10 @@ export class PreviewCursor extends ObservableReactComponent<{}> { UndoManager.RunInBatch(() => this._addLiveTextDoc?.(DocUtils.GetNewTextDoc('', newPoint[0], newPoint[1], 500, undefined, undefined)), 'paste'); } } - //pasting in images + // pasting in images else if (e.clipboardData.getData('text/html') !== '' && e.clipboardData.getData('text/html').includes('<img src=')) { - const re: any = /<img src="(.*?)"/g; - const arr: any[] = re.exec(e.clipboardData.getData('text/html')); + const regEx: any = /<img src="(.*?)"/g; + const arr: any[] = regEx.exec(e.clipboardData.getData('text/html')); if (newPoint) { undoBatch(() => { @@ -120,9 +124,9 @@ export class PreviewCursor extends ObservableReactComponent<{}> { }; @action - onKeyPress = (e: KeyboardEvent) => { + onKeyDown = (e: KeyboardEvent) => { // Mixing events between React and Native is finicky. - //if not these keys, make a textbox if preview cursor is active! + // if not these keys, make a textbox if preview cursor is active! if ( e.key !== 'Escape' && e.key !== 'Backspace' && @@ -146,7 +150,7 @@ export class PreviewCursor extends ObservableReactComponent<{}> { ) { if ((!e.metaKey && !e.ctrlKey) || (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 65 && e.keyCode <= 90)) { // /^[a-zA-Z0-9$*^%#@+-=_|}{[]"':;?/><.,}]$/.test(e.key)) { - this.Visible && this._onKeyPress?.(e); + this.Visible && this._onKeyDown?.(e); ((!e.ctrlKey && !e.metaKey) || e.key !== 'v') && (this.Visible = false); } } else if (this.Visible) { @@ -162,7 +166,7 @@ export class PreviewCursor extends ObservableReactComponent<{}> { } }; - //when focus is lost, this will remove the preview cursor + // when focus is lost, this will remove the preview cursor @action onBlur = (): void => { this.Visible = false; }; @@ -171,7 +175,7 @@ export class PreviewCursor extends ObservableReactComponent<{}> { public static Show( x: number, y: number, - onKeyPress: (e: KeyboardEvent) => void, + onKeyDown: (e: KeyboardEvent) => void, addLiveText: (doc: Doc) => void, getTransform: () => Transform, addDocument: undefined | ((doc: Doc | Doc[]) => boolean), @@ -181,7 +185,7 @@ export class PreviewCursor extends ObservableReactComponent<{}> { const self = PreviewCursor.Instance; if (self) { self._clickPoint = [x, y]; - self._onKeyPress = onKeyPress; + self._onKeyDown = onKeyDown; self._addLiveTextDoc = addLiveText; self._getTransform = getTransform; self._addDocument = addDocument || returnFalse; @@ -192,6 +196,7 @@ export class PreviewCursor extends ObservableReactComponent<{}> { } render() { return !this._clickPoint || !this.Visible ? null : ( + // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex <div className="previewCursor" onBlur={this.onBlur} tabIndex={0} ref={e => e?.focus()} style={{ color: lightOrDark(this.Doc?.backgroundColor ?? 'white'), transform: `translate(${this._clickPoint[0]}px, ${this._clickPoint[1]}px)` }}> I </div> |
