Merge 81175d9b29 into e1a436f6f9

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,19 @@ interface Props {
 	children: any;
 }
 
+interface BannerProps {
+	isVisible: boolean;
+}
+
+const SwitchToNewEditorBanner = (props: BannerProps) => <BannerContent
+	acceptMessage={_('Switch to the new editor')}
+	onAccept={() => Setting.setValue('editor.legacyMarkdown', false)}
+	visible={props.isVisible}
+>
+	{_('The legacy Markdown editor might be incompatible with a number of plugins. We recommend using the new editor.')}
+	<br/>
+</BannerContent>;
+
 export default class ErrorBoundary extends React.Component<Props, State> {
 
 	public state: State = { error: null, errorInfo: null, pluginInfos: [], plugins: {} };
@@ -130,8 +145,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>;
 };