aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/PreviewCursor.tsx
diff options
context:
space:
mode:
authorbobzel <zzzman@gmail.com>2024-05-19 01:01:02 -0400
committerbobzel <zzzman@gmail.com>2024-05-19 01:01:02 -0400
commit6e72f969029c22fe797397a6437836a0482260b6 (patch)
treee8ccde75702e557b2226c9069263e1bc3bd21a4b /src/client/views/PreviewCursor.tsx
parent5ff0bef5d3c4825aa7210a26c98aae3b24f4a835 (diff)
parent13dc6de0e0099f699ad0d2bb54401e6a0aa25018 (diff)
Merge branch 'restoringEslint' into alyssa-starter
Diffstat (limited to 'src/client/views/PreviewCursor.tsx')
-rw-r--r--src/client/views/PreviewCursor.tsx33
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>