Desktop: Fixes #11548: Show warning when a plugin is not compatible with the new Markdown editor (#12040)

Co-authored-by: Laurent Cozic <laurent22@users.noreply.github.com>

packages/app-desktop/gui/ErrorBoundary.tsx

@@ -3,6 +3,8 @@ import versionInfo, { PackageInfo } from '@joplin/lib/versionInfo';
 import PluginService, { Plugins } from '@joplin/lib/services/plugins/PluginService';
 import Setting from '@joplin/lib/models/Setting';
 import restart from '../services/restart';
+import BannerContent from './NoteEditor/WarningBanner/BannerContent';
+import { _ } from '@joplin/lib/locale';
 const packageInfo: PackageInfo = require('../packageInfo.js');
 const ipcRenderer = require('electron').ipcRenderer;
 
@@ -30,6 +32,28 @@ interface Props {
 	children: any;
 }
 
+interface BannerProps {
+	isVisible: boolean;
+}
+
+const SwitchToNewEditorBanner = (props: BannerProps) => {
+
+	const handleSwitchToNewEditor = () => {
+		Setting.setValue('editor.legacyMarkdown', false);
+		const message = _('You are now using the latest version of the Markdown editor.');
+		// eslint-disable-next-line no-restricted-globals
+		alert(message);
+	};
+
+	return <BannerContent
+		acceptMessage={_('Switch to the new editor')}
+		onAccept={handleSwitchToNewEditor}
+		visible={props.isVisible}
+	>
+		{_('The legacy Markdown editor appears to have crashed due to an incompatibility with a plugin. We recommend using the new editor.')}
+	</BannerContent>;
+};
+
 export default class ErrorBoundary extends React.Component<Props, State> {
 
 	public state: State = { error: null, errorInfo: null, pluginInfos: [], plugins: {} };
@@ -130,8 +154,11 @@ export default class ErrorBoundary extends React.Component<Props, State> {
 					}
 				}
 
+				const isLegacyEditorError = !!this.state.error.stack.includes('CodeMirror/v5');
+
 				return (
 					<div style={{ overflow: 'auto', fontFamily: 'sans-serif', padding: '5px 20px' }}>
+						<SwitchToNewEditorBanner isVisible={isLegacyEditorError} />
 						<h1>Error</h1>
 						{this.renderMessage()}
 						<p>To report the error, please copy the *entire content* of this page and post it on Joplin forum or GitHub.</p>

packages/app-desktop/gui/NoteEditor/WarningBanner/BannerContent.tsx

@@ -5,7 +5,7 @@ interface Props {
 	children: React.ReactNode;
 	acceptMessage: string;
 	onAccept: ()=> void;
-	onDismiss: ()=> void;
+	onDismiss?: ()=> void;
 	visible: boolean;
 }
 
@@ -17,7 +17,7 @@ const BannerContent: React.FC<Props> = props => {
 	return <div className='warning-banner'>
 		{props.children}
 		&nbsp;&nbsp;<a onClick={props.onAccept} className='warning-banner-link' href="#">[ {props.acceptMessage} ]</a>
-		&nbsp;&nbsp;<a onClick={props.onDismiss} className='warning-banner-link' href="#">[ {_('Dismiss')} ]</a>
+		&nbsp;&nbsp;{ props.onDismiss ? <a onClick={props.onDismiss} className='warning-banner-link' href="#">[ {_('Dismiss')} ]</a> : null }
 	</div>;
 };