From 03bd77c107a4c460f579f9a9c8cd18615060e57f Mon Sep 17 00:00:00 2001
From: Henry Heino <46334387+personalizedrefrigerator@users.noreply.github.com>
Date: Sun, 22 Oct 2023 04:00:19 -0700
Subject: [PATCH] Desktop: Resolves #8749: Use plain text editor in safe mode
 (#8750)

---
 .eslintignore                                 |  1 +
 .gitignore                                    |  1 +
 .../app-desktop/gui/MainScreen/MainScreen.tsx |  4 +-
 .../NoteBody/PlainEditor/PlainEditor.tsx      | 56 +++++++++++++++++++
 .../NoteBody/PlainEditor/PlainEditor_tsx.txt  | 50 -----------------
 .../app-desktop/gui/NoteEditor/NoteEditor.tsx |  7 ++-
 .../utils/useWindowCommandHandler.ts          | 18 +++---
 .../commands/stateToWhenClauseContext.ts      |  5 +-
 8 files changed, 80 insertions(+), 62 deletions(-)
 create mode 100644 packages/app-desktop/gui/NoteEditor/NoteBody/PlainEditor/PlainEditor.tsx
 delete mode 100644 packages/app-desktop/gui/NoteEditor/NoteBody/PlainEditor/PlainEditor_tsx.txt

diff --git a/.eslintignore b/.eslintignore
index af0c2646a..55c6201db 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -242,6 +242,7 @@ packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v5/Editor.js
 packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v6/CodeMirror.js
 packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v6/Editor.js
 packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v6/useEditorCommands.js
+packages/app-desktop/gui/NoteEditor/NoteBody/PlainEditor/PlainEditor.js
 packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.js
 packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/styles/index.js
 packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/joplinCommandToTinyMceCommands.js
diff --git a/.gitignore b/.gitignore
index 0369bbbcf..c7934e5d6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -224,6 +224,7 @@ packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v5/Editor.js
 packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v6/CodeMirror.js
 packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v6/Editor.js
 packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v6/useEditorCommands.js
+packages/app-desktop/gui/NoteEditor/NoteBody/PlainEditor/PlainEditor.js
 packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.js
 packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/styles/index.js
 packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/joplinCommandToTinyMceCommands.js
diff --git a/packages/app-desktop/gui/MainScreen/MainScreen.tsx b/packages/app-desktop/gui/MainScreen/MainScreen.tsx
index ad4b98ede..ed3c79665 100644
--- a/packages/app-desktop/gui/MainScreen/MainScreen.tsx
+++ b/packages/app-desktop/gui/MainScreen/MainScreen.tsx
@@ -740,7 +740,9 @@ class MainScreenComponent extends React.Component<Props, State> {
 			editor: () => {
 				let bodyEditor = this.props.settingEditorCodeView ? 'CodeMirror' : 'TinyMCE';
 
-				if (this.props.settingEditorCodeView && this.props.enableBetaMarkdownEditor) {
+				if (this.props.isSafeMode) {
+					bodyEditor = 'PlainText';
+				} else if (this.props.settingEditorCodeView && this.props.enableBetaMarkdownEditor) {
 					bodyEditor = 'CodeMirror6';
 				}
 				return <NoteEditor key={key} bodyEditor={bodyEditor} />;
diff --git a/packages/app-desktop/gui/NoteEditor/NoteBody/PlainEditor/PlainEditor.tsx b/packages/app-desktop/gui/NoteEditor/NoteBody/PlainEditor/PlainEditor.tsx
new file mode 100644
index 000000000..518e1a1e3
--- /dev/null
+++ b/packages/app-desktop/gui/NoteEditor/NoteBody/PlainEditor/PlainEditor.tsx
@@ -0,0 +1,56 @@
+
+// Used in safe mode
+
+import * as React from 'react';
+import { ForwardedRef } from 'react';
+import { useEffect, useCallback, useRef, forwardRef, useImperativeHandle } from 'react';
+import { NoteBodyEditorProps, NoteBodyEditorRef } from '../../utils/types';
+
+const PlainEditor = (props: NoteBodyEditorProps, ref: ForwardedRef<NoteBodyEditorRef>) => {
+	const editorRef = useRef<HTMLTextAreaElement>();
+
+	useImperativeHandle(ref, () => {
+		return {
+			content: () => editorRef.current?.value ?? '',
+			resetScroll: () => {
+				editorRef.current.scrollTop = 0;
+			},
+			scrollTo: () => {
+				// Not supported
+			},
+
+			supportsCommand: _name => {
+				return false;
+			},
+			execCommand: async _command => {
+				// Not supported
+			},
+		};
+	}, []);
+
+	useEffect(() => {
+		if (!editorRef.current) return;
+
+		if (editorRef.current.value !== props.content) {
+			editorRef.current.value = props.content;
+		}
+	}, [props.content]);
+
+	const onChange = useCallback((event: any) => {
+		props.onChange({ changeId: null, content: event.target.value });
+	}, [props.onChange]);
+
+	return (
+		<div style={props.style}>
+			<textarea
+				ref={editorRef}
+				style={{ width: '100%', height: '100%' }}
+				defaultValue={props.content}
+				onChange={onChange}
+			/>
+		</div>
+	);
+};
+
+export default forwardRef(PlainEditor);
+
diff --git a/packages/app-desktop/gui/NoteEditor/NoteBody/PlainEditor/PlainEditor_tsx.txt b/packages/app-desktop/gui/NoteEditor/NoteBody/PlainEditor/PlainEditor_tsx.txt
deleted file mode 100644
index bdc97b9c7..000000000
--- a/packages/app-desktop/gui/NoteEditor/NoteBody/PlainEditor/PlainEditor_tsx.txt
+++ /dev/null
@@ -1,50 +0,0 @@
-// Kept only for reference
-
-import * as React from 'react';
-import { useEffect, useCallback, useRef, forwardRef, useImperativeHandle } from 'react';
-
-export interface OnChangeEvent {
-	changeId: number,
-	content: any,
-}
-
-interface PlainEditorProps {
-	style: any,
-	onChange(event: OnChangeEvent): void,
-	onWillChange(event:any): void,
-	markupToHtml: Function,
-	disabled: boolean,
-}
-
-const PlainEditor = (props:PlainEditorProps, ref:any) => {
-	const editorRef = useRef<any>();
-
-	useImperativeHandle(ref, () => {
-		return {
-			content: () => '',
-		};
-	}, []);
-
-	useEffect(() => {
-		if (!editorRef.current) return;
-		editorRef.current.value = props.defaultEditorState.value;
-	}, [props.defaultEditorState]);
-
-	const onChange = useCallback((event:any) => {
-		props.onChange({ changeId: null, content: event.target.value });
-	}, [props.onWillChange, props.onChange]);
-
-	return (
-		<div style={props.style}>
-			<textarea
-				ref={editorRef}
-				style={{ width: '100%', height: '100%' }}
-				defaultValue={props.defaultEditorState.value}
-				onChange={onChange}
-			/>;
-		</div>
-	);
-};
-
-export default forwardRef(PlainEditor);
-
diff --git a/packages/app-desktop/gui/NoteEditor/NoteEditor.tsx b/packages/app-desktop/gui/NoteEditor/NoteEditor.tsx
index f94c3daea..651bda5a1 100644
--- a/packages/app-desktop/gui/NoteEditor/NoteEditor.tsx
+++ b/packages/app-desktop/gui/NoteEditor/NoteEditor.tsx
@@ -14,7 +14,7 @@ import useFormNote, { OnLoadEvent } from './utils/useFormNote';
 import useEffectiveNoteId from './utils/useEffectiveNoteId';
 import useFolder from './utils/useFolder';
 import styles_ from './styles';
-import { NoteEditorProps, FormNote, ScrollOptions, ScrollOptionTypes, OnChangeEvent, NoteBodyEditorProps, AllAssetsOptions } from './utils/types';
+import { NoteEditorProps, FormNote, ScrollOptions, ScrollOptionTypes, OnChangeEvent, NoteBodyEditorProps, AllAssetsOptions, NoteBodyEditorRef } from './utils/types';
 import ResourceEditWatcher from '@joplin/lib/services/ResourceEditWatcher/index';
 import CommandService from '@joplin/lib/services/CommandService';
 import ToolbarButton from '../ToolbarButton/ToolbarButton';
@@ -45,6 +45,7 @@ import { ModelType } from '@joplin/lib/BaseModel';
 import BaseItem from '@joplin/lib/models/BaseItem';
 import { ErrorCode } from '@joplin/lib/errors';
 import ItemChange from '@joplin/lib/models/ItemChange';
+import PlainEditor from './NoteBody/PlainEditor/PlainEditor';
 import CodeMirror6 from './NoteBody/CodeMirror/v6/CodeMirror';
 import CodeMirror5 from './NoteBody/CodeMirror/v5/CodeMirror';
 
@@ -60,7 +61,7 @@ function NoteEditor(props: NoteEditorProps) {
 	const [scrollWhenReady, setScrollWhenReady] = useState<ScrollOptions>(null);
 	const [isReadOnly, setIsReadOnly] = useState<boolean>(false);
 
-	const editorRef = useRef<any>();
+	const editorRef = useRef<NoteBodyEditorRef>();
 	const titleInputRef = useRef<any>();
 	const isMountedRef = useRef(true);
 	const noteSearchBarRef = useRef(null);
@@ -462,6 +463,8 @@ function NoteEditor(props: NoteEditorProps) {
 
 	if (props.bodyEditor === 'TinyMCE') {
 		editor = <TinyMCE {...editorProps}/>;
+	} else if (props.bodyEditor === 'PlainText') {
+		editor = <PlainEditor {...editorProps}/>;
 	} else if (props.bodyEditor === 'CodeMirror') {
 		editor = <CodeMirror5 {...editorProps}/>;
 	} else if (props.bodyEditor === 'CodeMirror6') {
diff --git a/packages/app-desktop/gui/NoteEditor/utils/useWindowCommandHandler.ts b/packages/app-desktop/gui/NoteEditor/utils/useWindowCommandHandler.ts
index 980032fe8..339a1e263 100644
--- a/packages/app-desktop/gui/NoteEditor/utils/useWindowCommandHandler.ts
+++ b/packages/app-desktop/gui/NoteEditor/utils/useWindowCommandHandler.ts
@@ -1,5 +1,5 @@
-import { useEffect } from 'react';
-import { FormNote, ScrollOptionTypes } from './types';
+import { RefObject, useEffect } from 'react';
+import { FormNote, NoteBodyEditorRef, ScrollOptionTypes } from './types';
 import editorCommandDeclarations, { enabledCondition } from '../editorCommandDeclarations';
 import CommandService, { CommandDeclaration, CommandRuntime, CommandContext } from '@joplin/lib/services/CommandService';
 import time from '@joplin/lib/time';
@@ -12,6 +12,8 @@ const commandsWithDependencies = [
 	require('../commands/pasteAsText'),
 ];
 
+type SetFormNoteCallback = (callback: (prev: FormNote)=> FormNote)=> void;
+
 interface HookDependencies {
 	formNote: FormNote;
 	// eslint-disable-next-line @typescript-eslint/ban-types -- Old code before rule was applied
@@ -19,16 +21,18 @@ interface HookDependencies {
 	// eslint-disable-next-line @typescript-eslint/ban-types -- Old code before rule was applied
 	dispatch: Function;
 	noteSearchBarRef: any;
-	editorRef: any;
+	editorRef: RefObject<NoteBodyEditorRef>;
 	titleInputRef: any;
 	// eslint-disable-next-line @typescript-eslint/ban-types -- Old code before rule was applied
 	saveNoteAndWait: Function;
-	// eslint-disable-next-line @typescript-eslint/ban-types -- Old code before rule was applied
-	setFormNote: Function;
+	setFormNote: SetFormNoteCallback;
 }
 
-// eslint-disable-next-line @typescript-eslint/ban-types -- Old code before rule was applied
-function editorCommandRuntime(declaration: CommandDeclaration, editorRef: any, setFormNote: Function): CommandRuntime {
+function editorCommandRuntime(
+	declaration: CommandDeclaration,
+	editorRef: RefObject<NoteBodyEditorRef>,
+	setFormNote: SetFormNoteCallback,
+): CommandRuntime {
 	return {
 		execute: async (_context: CommandContext, ...args: any[]) => {
 			if (!editorRef.current) {
diff --git a/packages/app-desktop/services/commands/stateToWhenClauseContext.ts b/packages/app-desktop/services/commands/stateToWhenClauseContext.ts
index fe468f1b7..c35c6b348 100644
--- a/packages/app-desktop/services/commands/stateToWhenClauseContext.ts
+++ b/packages/app-desktop/services/commands/stateToWhenClauseContext.ts
@@ -12,8 +12,9 @@ export default function stateToWhenClauseContext(state: AppState, options: WhenC
 		...libStateToWhenClauseContext(state, options),
 
 		// UI elements
-		markdownEditorVisible: !!state.settings['editor.codeView'],
-		richTextEditorVisible: !state.settings['editor.codeView'],
+		markdownEditorVisible: !!state.settings['editor.codeView'] && !state.settings['isSafeMode'],
+		richTextEditorVisible: !state.settings['editor.codeView'] && !state.settings['isSafeMode'],
+
 		markdownEditorPaneVisible: state.settings['editor.codeView'] && state.noteVisiblePanes.includes('editor'),
 		markdownViewerPaneVisible: state.settings['editor.codeView'] && state.noteVisiblePanes.includes('viewer'),
 		modalDialogVisible: !!Object.keys(state.visibleDialogs).length,