aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/WebBox.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/WebBox.tsx')
-rw-r--r--src/client/views/nodes/WebBox.tsx47
1 files changed, 25 insertions, 22 deletions
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index be7e0f483..1fd73c226 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -1,4 +1,5 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Property } from 'csstype';
import { htmlToText } from 'html-to-text';
import { action, computed, IReactionDisposer, makeObservable, observable, ObservableMap, reaction, runInAction } from 'mobx';
import { observer } from 'mobx-react';
@@ -21,7 +22,7 @@ import { DocumentType } from '../../documents/DocumentTypes';
import { DocUtils } from '../../documents/DocUtils';
import { ScriptingGlobals } from '../../util/ScriptingGlobals';
import { SnappingManager } from '../../util/SnappingManager';
-import { undoBatch, UndoManager } from '../../util/UndoManager';
+import { undoable, UndoManager } from '../../util/UndoManager';
import { MarqueeOptionsMenu } from '../collections/collectionFreeForm';
import { CollectionFreeFormView } from '../collections/collectionFreeForm/CollectionFreeFormView';
import { ContextMenu } from '../ContextMenu';
@@ -83,7 +84,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
this._marqueeing = val;
}
@observable private _iframe: HTMLIFrameElement | null = null;
- @observable private _savedAnnotations = new ObservableMap<number, (HTMLDivElement& { marqueeing?: boolean})[]>();
+ @observable private _savedAnnotations = new ObservableMap<number, (HTMLDivElement & { marqueeing?: boolean })[]>();
@observable private _scrollHeight = NumCast(this.layoutDoc.scrollHeight);
@computed get _url() {
return this.webField?.toString() || '';
@@ -121,11 +122,12 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
});
}
try {
+ const contentWindow = this._iframe?.contentWindow;
if (clear) {
- this._iframe?.contentWindow?.getSelection()?.empty();
+ contentWindow?.getSelection()?.empty();
}
- if (searchString) {
- (this._iframe?.contentWindow as any)?.find(searchString, false, bwd, true);
+ if (searchString && contentWindow && 'find' in contentWindow) {
+ (contentWindow.find as (str: string, caseSens?: boolean, backward?: boolean, wrapAround?: boolean) => void)(searchString, false, bwd, true);
}
} catch (e) {
console.log('WebBox search error', e);
@@ -142,7 +144,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
}
};
- updateThumb = async () => {
+ updateIcon = async () => {
if (!this._iframe) return;
const scrollTop = NumCast(this.layoutDoc._layout_scrollTop);
const nativeWidth = NumCast(this.layoutDoc.nativeWidth);
@@ -154,7 +156,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
this.layoutDoc.thumb = undefined;
this.Document.thumbLockout = true; // lock to prevent multiple thumb updates.
CreateImage(this._webUrl.endsWith('/') ? this._webUrl.substring(0, this._webUrl.length - 1) : this._webUrl, this._iframe.contentDocument?.styleSheets ?? [], htmlString, nativeWidth, nativeHeight, scrollTop)
- .then((dataUrl: any) => {
+ .then((dataUrl: string) => {
if (dataUrl.includes('<!DOCTYPE')) {
console.log('BAD DATA IN THUMB CREATION');
return;
@@ -172,7 +174,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
)
);
})
- .catch((error: any) => {
+ .catch((error: object) => {
console.error('oops, something went wrong!', error);
});
};
@@ -359,8 +361,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
return anchor;
};
- _textAnnotationCreator: (() => ObservableMap<number, (HTMLDivElement & { marqueeing?: boolean})[]>) | undefined;
- savedAnnotationsCreator: () => ObservableMap<number, (HTMLDivElement & { marqueeing?: boolean})[]> = () => this._textAnnotationCreator?.() || this._savedAnnotations;
+ _textAnnotationCreator: (() => ObservableMap<number, (HTMLDivElement & { marqueeing?: boolean })[]>) | undefined;
+ savedAnnotationsCreator: () => ObservableMap<number, (HTMLDivElement & { marqueeing?: boolean })[]> = () => this._textAnnotationCreator?.() || this._savedAnnotations;
@action
iframeMove = (e: PointerEvent) => {
@@ -424,11 +426,11 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
sel.empty(); // Chrome
else if (sel?.removeAllRanges) sel.removeAllRanges(); // Firefox
// bcz: NEED TO unrotate e.clientX and e.clientY
- const word = getWordAtPoint(e.target, e.clientX, e.clientY);
+ const target = e.target as HTMLElement;
+ const word = target && getWordAtPoint(target, e.clientX, e.clientY);
this._setPreviewCursor?.(e.clientX, e.clientY, false, true, this.Document);
MarqueeAnnotator.clearAnnotations(this._savedAnnotations);
- const target = e.target as HTMLElement;
if (!word && !target?.className?.includes('rangeslider') && !target?.onclick && !target?.parentElement?.onclick) {
if (e.button !== 2) this.marqueeing = [e.clientX, e.clientY];
e.preventDefault();
@@ -468,8 +470,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
.inverse()
.transformPoint(e.clientX, e.clientY - NumCast(this.layoutDoc.layout_scrollTop));
MarqueeAnnotator.clearAnnotations(this._savedAnnotations);
- const word = getWordAtPoint(e.target, e.clientX, e.clientY);
const target = e.target as HTMLElement;
+ const word = target && getWordAtPoint(target, e.clientX, e.clientY);
if (!word && !target?.className?.includes('rangeslider') && !target?.onclick && !target?.parentElement?.onclick) {
this.marqueeing = theclick;
this._marqueeref.current?.onInitiateSelection(this.marqueeing);
@@ -488,7 +490,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
}
return undefined;
}
- addWebStyleSheetRule(sheet: CSSStyleSheet | null | undefined, selector: string, css: {[key:string]: string}, selectorPrefix = '.') {
+ addWebStyleSheetRule(sheet: CSSStyleSheet | null | undefined, selector: string, css: { [key: string]: string }, selectorPrefix = '.') {
const propText =
typeof css === 'string'
? css
@@ -498,7 +500,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
return sheet?.insertRule(selectorPrefix + selector + '{' + propText + '}', sheet.cssRules.length);
}
- _iframetimeout: NodeJS.Timeout|undefined = undefined;
+ _iframetimeout: NodeJS.Timeout | undefined = undefined;
@observable _warning = 0;
@action
iframeLoaded = () => {
@@ -520,7 +522,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
if (requrlraw !== this._url.toString()) {
if (requrlraw.match(/q=.*&/)?.length && this._url.toString().match(/q=.*&/)?.length) {
const matches = requrlraw.match(/[^a-zA-z]q=[^&]*/g);
- const newsearch = matches?.lastElement() || "";
+ const newsearch = matches?.lastElement() || '';
if (matches) {
requrlraw = requrlraw.substring(0, requrlraw.indexOf(newsearch));
for (let i = 1; i < Array.from(matches)?.length; i++) {
@@ -567,12 +569,12 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
);
iframeContent.addEventListener(
'click',
- undoBatch(
+ undoable(
action((e: MouseEvent) => {
let eleHref = '';
for (let ele = e.target as HTMLElement | Element | null; ele; ele = ele.parentElement) {
if (ele instanceof HTMLAnchorElement) {
- eleHref = (typeof ele.href === 'string' ? ele.href : eleHref) || (ele.parentElement && ("href" in ele.parentElement) ? ele.parentElement.href as string: eleHref);
+ eleHref = (typeof ele.href === 'string' ? ele.href : eleHref) || (ele.parentElement && 'href' in ele.parentElement ? (ele.parentElement.href as string) : eleHref);
}
}
const origin = this.webField?.origin;
@@ -588,7 +590,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
this._outerRef.current.scrollLeft = 0;
}
}
- })
+ }),
+ 'follow web link'
)
);
iframe.contentDocument.addEventListener('wheel', this.iframeWheel, { passive: false });
@@ -792,7 +795,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
},
icon: 'snowflake',
});
- funcs.push({ description: 'Create Thumbnail', event: () => this.updateThumb(), icon: 'portrait' });
+ !Doc.noviceMode && funcs.push({ description: 'Update Icon', event: () => this.updateIcon(), icon: 'portrait' });
cm.addItem({ description: 'Options...', subitems: funcs, icon: 'asterisk' });
}
};
@@ -1085,7 +1088,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
@computed get webpage() {
TraceMobx();
const previewScale = this._previewNativeWidth ? 1 - this.sidebarWidth() / this._previewNativeWidth : 1;
- const pointerEvents = this.layoutDoc._lockedPosition ? 'none' : (this._props.pointerEvents?.() as "none" | "all" | "visiblePainted" | undefined)
+ const pointerEvents = this.layoutDoc._lockedPosition ? 'none' : (this._props.pointerEvents?.() as Property.PointerEvents | undefined);
const scale = previewScale * (this._props.NativeDimScaling?.() || 1);
return (
<div
@@ -1170,7 +1173,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
render() {
TraceMobx();
const previewScale = this._previewNativeWidth ? 1 - this.sidebarWidth() / this._previewNativeWidth : 1;
- const pointerEvents = this.layoutDoc._lockedPosition ? 'none' : (this._props.pointerEvents?.() as 'none' | 'all' | 'visiblePainted' | undefined);
+ const pointerEvents = this.layoutDoc._lockedPosition ? 'none' : (this._props.pointerEvents?.() as Property.PointerEvents);
const scale = previewScale * (this._props.NativeDimScaling?.() || 1);
return (
<div
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-20 15:37:03 +0000