self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-03-26 21:12:59 +02:00
Code Issues Releases Activity

Chore: Remove Redux withRef implementation to simplify code and fix issue

Browse Source
This commit is contained in:
Laurent Cozic 2022-11-14 16:48:41 +00:00
parent 673653a141
commit a7213453c7
6 changed files with 17 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx
View File

@ -116,7 +116,7 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
scrollTo: (options: ScrollOptions) => {
if (options.type === ScrollOptionTypes.Hash) {
if (!webviewRef.current) return;
webviewRef.current.wrappedInstance.send('scrollToHash', options.value as string);
webviewRef.current.send('scrollToHash', options.value as string);
} else if (options.type === ScrollOptionTypes.Percent) {
const percent = options.value as number;
setEditorPercentScroll(percent);
@ -151,9 +151,10 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
if (props.visiblePanes.indexOf('editor') >= 0) {
editorRef.current.focus();
} else {
// If we just call wrappedInstance.focus() then the iframe is focused,
// but not its content, such that scrolling up / down with arrow keys fails
webviewRef.current.wrappedInstance.send('focus');
// If we just call focus() then the iframe is focused,
// but not its content, such that scrolling up / down
// with arrow keys fails
webviewRef.current.send('focus');
}
} else {
commandProcessed = false;
@ -656,13 +657,13 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
// mounted, webviewReady might be true, but webviewRef.current will be
// undefined. Maybe due to the error boundary that unmount components.
// Since we can't do much about it we just print an error.
if (webviewRef.current && webviewRef.current.wrappedInstance) {
if (webviewRef.current) {
// To keep consistency among CodeMirror's editing and scroll percents
// of Editor and Viewer.
const percent = getLineScrollPercent();
setEditorPercentScroll(percent);
options.percent = percent;
webviewRef.current.wrappedInstance.send('setHtml', renderedBody.html, options);
webviewRef.current.send('setHtml', renderedBody.html, options);
} else {
console.error('Trying to set HTML on an undefined webview ref');
}
@ -681,8 +682,8 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
// props.content has been updated).
const textChanged = props.searchMarkers.keywords.length > 0 && (props.content !== previousContent || renderedBody !== previousRenderedBody);
if (webviewRef.current?.wrappedInstance && (props.searchMarkers !== previousSearchMarkers || textChanged)) {
webviewRef.current.wrappedInstance.send('setMarkers', props.searchMarkers.keywords, props.searchMarkers.options);
if (webviewRef.current && (props.searchMarkers !== previousSearchMarkers || textChanged)) {
webviewRef.current.send('setMarkers', props.searchMarkers.keywords, props.searchMarkers.options);
if (editorRef.current) {
const matches = editorRef.current.setMarkers(props.searchMarkers.keywords, props.searchMarkers.options);

2
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useScrollHandler.ts
View File

@ -99,7 +99,7 @@ export default function useScrollHandler(editorRef: any, webviewRef: any, onScro
const setViewerPercentScroll = useCallback((percent: number) => {
if (webviewRef.current) {
webviewRef.current.wrappedInstance.send('setPercentScroll', percent);
webviewRef.current.send('setPercentScroll', percent);
scheduleOnScroll({ percent });
}
// eslint-disable-next-line @seiyab/react-hooks/exhaustive-deps -- Old code before rule was applied

1
packages/app-desktop/gui/NoteEditor/NoteEditor.tsx
View File

@ -495,6 +495,7 @@ function NoteEditor(props: NoteEditorProps) {
return (
<NoteSearchBar
ref={noteSearchBarRef}
themeId={props.themeId}
style={{
display: 'flex',
height: 35,

6
packages/app-desktop/gui/NoteRevisionViewer.jsx
View File

@ -55,7 +55,7 @@ class NoteRevisionViewerComponent extends React.PureComponent {
}
async viewer_domReady() {
// this.viewerRef_.current.wrappedInstance.openDevTools();
// this.viewerRef_.current.openDevTools();
const revisions = await Revision.allByType(BaseModel.TYPE_NOTE, this.props.noteId);
@ -127,7 +127,7 @@ class NoteRevisionViewerComponent extends React.PureComponent {
postMessageSyntax: 'ipcProxySendToHost',
});
this.viewerRef_.current.wrappedInstance.send('setHtml', result.html, {
this.viewerRef_.current.send('setHtml', result.html, {
cssFiles: result.cssFiles,
pluginAssets: result.pluginAssets,
});
@ -199,7 +199,7 @@ class NoteRevisionViewerComponent extends React.PureComponent {
</div>
);
const viewer = <NoteTextViewer viewerStyle={{ display: 'flex', flex: 1, borderLeft: 'none' }} ref={this.viewerRef_} onDomReady={this.viewer_domReady} onIpcMessage={this.webview_ipcMessage} />;
const viewer = <NoteTextViewer themeId={this.props.themeId} viewerStyle={{ display: 'flex', flex: 1, borderLeft: 'none' }} ref={this.viewerRef_} onDomReady={this.viewer_domReady} onIpcMessage={this.webview_ipcMessage} />;
return (
<div style={style.root}>

16
packages/app-desktop/gui/NoteSearchBar.jsx
View File

@ -1,9 +1,8 @@
const React = require('react');
const { connect } = require('react-redux');
const { themeStyle } = require('@joplin/lib/theme');
const { _ } = require('@joplin/lib/locale');
class NoteSearchBarComponent extends React.Component {
class NoteSearchBar extends React.Component {
constructor() {
super();
@ -177,17 +176,4 @@ class NoteSearchBarComponent extends React.Component {
}
}
const mapStateToProps = state => {
return {
themeId: state.settings.theme,
};
};
const NoteSearchBar = connect(
mapStateToProps,
null,
null,
{ withRef: true }
)(NoteSearchBarComponent);
module.exports = NoteSearchBar;

19
packages/app-desktop/gui/NoteTextViewer.tsx
View File

@ -1,15 +1,15 @@
import PostMessageService, { MessageResponse, ResponderComponentType } from '@joplin/lib/services/PostMessageService';
import * as React from 'react';
const { connect } = require('react-redux');
import { reg } from '@joplin/lib/registry';
interface Props {
onDomReady: Function;
onIpcMessage: Function;
viewerStyle: any;
contentMaxWidth: number;
}
class NoteTextViewerComponent extends React.Component<Props, any> {
export default class NoteTextViewerComponent extends React.Component<Props, any> {
private initialized_: boolean = false;
private domReady_: boolean = false;
@ -176,18 +176,3 @@ class NoteTextViewerComponent extends React.Component<Props, any> {
return <iframe className="noteTextViewer" ref={this.webviewRef_} style={viewerStyle} src="gui/note-viewer/index.html"></iframe>;
}
}
const mapStateToProps = (state: any) => {
return {
themeId: state.settings.theme,
};
};
const NoteTextViewer = connect(
mapStateToProps,
null,
null,
{ withRef: true }
)(NoteTextViewerComponent);
export default NoteTextViewer;