diff options
Diffstat (limited to 'src/client/views/nodes/DocumentContentsView.tsx')
| -rw-r--r-- | src/client/views/nodes/DocumentContentsView.tsx | 51 |
1 files changed, 32 insertions, 19 deletions
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index 192c7875e..afc160297 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -4,7 +4,7 @@ import { observer } from 'mobx-react'; import * as React from 'react'; import * as XRegExp from 'xregexp'; import { OmitKeys } from '../../../ClientUtils'; -import { Without, emptyPath } from '../../../Utils'; +import { Without } from '../../../Utils'; import { Doc, Opt } from '../../../fields/Doc'; import { AclPrivate, DocData } from '../../../fields/DocSymbols'; import { ScriptField } from '../../../fields/ScriptField'; @@ -43,26 +43,37 @@ interface HTMLtagProps { @observer export class HTMLtag extends React.Component<HTMLtagProps> { click = () => { - const clickScript = (this.props as any).onClick as Opt<ScriptField>; + const clickScript = this.props.onClick as Opt<ScriptField>; clickScript?.script.run({ this: this.props.Document, scale: this.props.scaling }); }; - onInput = (e: React.FormEvent<HTMLDivElement>) => { - const onInputScript = (this.props as any).onInput as Opt<ScriptField>; - onInputScript?.script.run({ this: this.props.Document, value: (e.target as any).textContent }); + onInput = (e: React.FormEvent<unknown>) => { + const onInputScript = this.props.onInput as Opt<ScriptField>; + onInputScript?.script.run({ this: this.props.Document, value: (e.target as HTMLElement).textContent }); }; render() { - const style: { [key: string]: any } = {}; - const divKeys = OmitKeys(this.props, ['children', 'dragStarting', 'dragEnding', 'htmltag', 'scaling', 'Document', 'key', 'onInput', 'onClick', '__proto__']).omit; - const replacer = (match: any, expr: string) => + const style: { [key: string]: unknown } = {}; + const divKeys = OmitKeys(this.props, [ + 'children', // + 'dragStarting', + 'dragEnding', + 'htmltag', + 'scaling', + 'Document', + 'key', + 'onInput', + 'onClick', + '__proto__', + ]).omit; + const replacer = (match: string, expr: string) => // bcz: this executes a script to convert a property expression string: { script } into a value (ScriptField.MakeFunction(expr, { this: Doc.name, scale: 'number' })?.script.run({ this: this.props.Document, scale: this.props.scaling }).result as string) || ''; Object.keys(divKeys).forEach((prop: string) => { - const p = (this.props as any)[prop] as string; + const p = (this.props as unknown as { [key: string]: string })[prop] as string; style[prop] = p?.replace(/{([^.'][^}']+)}/g, replacer); }); const Tag = this.props.htmltag as keyof JSX.IntrinsicElements; return ( - <Tag style={style} onClick={this.click} onInput={this.onInput as any}> + <Tag style={style} onClick={this.click} onInput={this.onInput}> {this.props.children} </Tag> ); @@ -78,12 +89,12 @@ export class DocumentContentsView extends ObservableReactComponent<DocumentConte /** * Set of all available rendering componets for Docs (e.g., ImageBox, CollectionFreeFormView, etc) */ - private static Components: { [key: string]: any }; - public static Init(defaultLayoutString: string, components: { [key: string]: any }) { + private static Components: { [key: string]: unknown }; + public static Init(defaultLayoutString: string, components: { [key: string]: unknown }) { DocumentContentsView.DefaultLayoutString = defaultLayoutString; DocumentContentsView.Components = components; } - constructor(props: any) { + constructor(props: DocumentContentsViewProps) { super(props); makeObservable(this); } @@ -132,13 +143,13 @@ export class DocumentContentsView extends ObservableReactComponent<DocumentConte ...this._props, Document: this.layoutDoc ?? this._props.Document, TemplateDataDocument: templateDataDoc instanceof Promise ? undefined : templateDataDoc, - onClick: onClick as any as React.MouseEventHandler, // pass onClick script as if it were a real function -- it will be interpreted properly in the HTMLtag - onInput: onInput as any as React.FormEventHandler, + onClick: onClick as unknown as React.MouseEventHandler, // pass onClick script as if it were a real function -- it will be interpreted properly in the HTMLtag + onInput: onInput as unknown as React.FormEventHandler, }; return { props: { ...OmitKeys(list, [...docOnlyProps], '').omit, - }, + } as BindingProps, }; } @@ -151,11 +162,11 @@ export class DocumentContentsView extends ObservableReactComponent<DocumentConte let layoutFrame = this.layout; // replace code content with a script >{content}< as in <HTMLdiv>{this.title}</HTMLdiv> - const replacer = (match: any, prefix: string, expr: string, postfix: string) => prefix + ((ScriptField.MakeFunction(expr, { this: Doc.name })?.script.run({ this: this._props.Document }).result as string) || '') + postfix; + const replacer = (match: string, prefix: string, expr: string, postfix: string) => prefix + ((ScriptField.MakeFunction(expr, { this: Doc.name })?.script.run({ this: this._props.Document }).result as string) || '') + postfix; layoutFrame = layoutFrame.replace(/(>[^{]*)[^=]\{([^.'][^<}]+)\}([^}]*<)/g, replacer); // replace HTML<tag> with corresponding HTML tag as in: <HTMLdiv> becomes <HTMLtag Document={props.Document} htmltag='div'> - const replacer2 = (match: any, p1: string) => `<HTMLtag Document={props.Document} scaling='${this._props.NativeDimScaling?.() || 1}' htmltag='${p1}'`; + const replacer2 = (match: string, p1: string) => `<HTMLtag Document={props.Document} scaling='${this._props.NativeDimScaling?.() || 1}' htmltag='${p1}'`; layoutFrame = layoutFrame.replace(/<HTML([a-zA-Z0-9_-]+)/g, replacer2); // replace /HTML<tag> with </HTMLdiv> as in: </HTMLdiv> becomes </HTMLtag> @@ -181,6 +192,7 @@ export class DocumentContentsView extends ObservableReactComponent<DocumentConte return { bindings, layoutFrame }; } + blacklistedAttrs = []; render() { TraceMobx(); const { bindings, layoutFrame } = this.renderData; @@ -188,12 +200,13 @@ export class DocumentContentsView extends ObservableReactComponent<DocumentConte return this._props.renderDepth > 12 || !layoutFrame || !this.layoutDoc || GetEffectiveAcl(this.layoutDoc) === AclPrivate ? null : ( <ObserverJsxParser key={42} - blacklistedAttrs={emptyPath} + blacklistedAttrs={this.blacklistedAttrs} renderInWrapper={false} components={DocumentContentsView.Components} bindings={bindings} jsx={layoutFrame} showWarnings + // eslint-disable-next-line @typescript-eslint/no-explicit-any onError={(test: any) => { console.log('DocumentContentsView:' + test, bindings, layoutFrame); }} |