Mobile: Add setting to enable/disable the markdown toolbar (#7929)

packages/app-mobile/components/NoteEditor/NoteEditor.tsx

@@ -30,6 +30,7 @@ interface Props {
 	initialSelection?: Selection;
 	style: ViewStyle;
 	contentStyle?: ViewStyle;
+	toolbarEnabled: boolean;
 
 	onChange: ChangeEventHandler;
 	onSelectionChange: SelectionChangeEventHandler;
@@ -364,6 +365,19 @@ function NoteEditor(props: Props, ref: any) {
 		console.error('NoteEditor: webview error');
 	}, []);
 
+	const toolbar = <MarkdownToolbar
+		style={{
+			// Don't show the markdown toolbar if there isn't enough space
+			// for it:
+			flexShrink: 1,
+		}}
+		editorSettings={editorSettings}
+		editorControl={editorControl}
+		selectionState={selectionState}
+		searchState={searchState}
+		onAttach={props.onAttach}
+	/>;
+
 	// - `scrollEnabled` prevents iOS from scrolling the document (has no effect on Android)
 	//    when an editable region (e.g. a the full-screen NoteEditor) is focused.
 	return (
@@ -401,18 +415,7 @@ function NoteEditor(props: Props, ref: any) {
 				searchState={searchState}
 			/>
 
-			<MarkdownToolbar
-				style={{
-					// Don't show the markdown toolbar if there isn't enough space
-					// for it:
-					flexShrink: 1,
-				}}
-				editorSettings={editorSettings}
-				editorControl={editorControl}
-				selectionState={selectionState}
-				searchState={searchState}
-				onAttach={props.onAttach}
-			/>
+			{props.toolbarEnabled ? toolbar : null}
 		</View>
 	);
 }

packages/app-mobile/components/screens/Note.tsx

@@ -1118,6 +1118,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 
 				bodyComponent = <NoteEditor
 					ref={this.editorRef}
+					toolbarEnabled={this.props.toolbarEnabled}
 					themeId={this.props.themeId}
 					initialText={note.body}
 					initialSelection={this.selection}
@@ -1231,6 +1232,7 @@ const NoteScreen = connect((state: any) => {
 		themeId: state.settings.theme,
 		editorFont: [state.settings['style.editor.fontFamily']],
 		editorFontSize: state.settings['style.editor.fontSize'],
+		toolbarEnabled: state.settings['editor.mobile.toolbarEnabled'],
 		ftsEnabled: state.settings['db.ftsEnabled'],
 		sharedData: state.sharedData,
 		showSideMenu: state.showSideMenu,

packages/lib/models/Setting.ts

@@ -1050,6 +1050,17 @@ class Setting extends BaseModel {
 				isGlobal: true,
 			},
 
+			'editor.mobile.toolbarEnabled': {
+				value: true,
+				type: SettingItemType.Bool,
+				section: 'note',
+				public: true,
+				appTypes: [AppType.Mobile],
+				label: () => _('Enable the Markdown toolbar'),
+				storage: SettingStorage.File,
+				isGlobal: true,
+			},
+
 			// Works around a bug in which additional space is visible beneath the toolbar on some devices.
 			// See https://github.com/laurent22/joplin/pull/6823
 			'editor.mobile.removeSpaceBelowToolbar': {