Desktop,Mobile: Add setting to disable markup autocompletion

packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v6/CodeMirror.tsx

@@ -381,6 +381,7 @@ const CodeMirror = (props: NoteBodyEditorProps, ref: ForwardedRef<NoteBodyEditor
 				monospaceFont: Setting.value('style.editor.monospaceFontFamily'),
 			},
 			automatchBraces: Setting.value('editor.autoMatchingBraces'),
+			autocompleteMarkup: Setting.value('editor.autocompleteMarkup'),
 			useExternalSearch: false,
 			ignoreModifiers: true,
 			spellcheckEnabled: Setting.value('editor.spellcheckBeta'),

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

@@ -345,6 +345,7 @@ function NoteEditor(props: Props, ref: any) {
 
 		automatchBraces: false,
 		ignoreModifiers: false,
+		autocompleteMarkup: Setting.value('editor.autocompleteMarkup'),
 
 		indentWithTabs: true,
 	}), [props.themeId, props.readOnly]);

packages/editor/CodeMirror/configFromSettings.ts

@@ -28,11 +28,21 @@ const configFromSettings = (settings: EditorSettings) => {
 						settings.katexEnabled ? MarkdownMathExtension : [],
 					],
 					codeLanguages: lookUpLanguage,
+
+					...(settings.autocompleteMarkup ? {
+						// Most Markup completion is enabled by default
+					} : {
+						addKeymap: false,
+						completeHTMLTags: false,
+						htmlTagLanguage: html({ matchClosingTags: false, autoCloseTags: false }),
+					}),
+				}),
+				markdownLanguage.data.of({
+					closeBrackets: openingBrackets,
 				}),
-				markdownLanguage.data.of({ closeBrackets: openingBrackets }),
 			];
 		} else if (language === EditorLanguageType.Html) {
-			return html();
+			return html({ autoCloseTags: settings.autocompleteMarkup });
 		} else {
 			const exhaustivenessCheck: never = language;
 			return exhaustivenessCheck;

packages/editor/CodeMirror/createEditor.ts

@@ -7,7 +7,7 @@ import { classHighlighter } from '@lezer/highlight';
 import {
 	EditorView, drawSelection, highlightSpecialChars, ViewUpdate, Command, rectangularSelection,
 } from '@codemirror/view';
-import { history, undoDepth, redoDepth, standardKeymap } from '@codemirror/commands';
+import { history, undoDepth, redoDepth, standardKeymap, insertTab } from '@codemirror/commands';
 
 import { keymap, KeyBinding } from '@codemirror/view';
 import { searchKeymap } from '@codemirror/search';
@@ -33,6 +33,16 @@ import biDirectionalTextExtension from './utils/biDirectionalTextExtension';
 import searchExtension from './utils/searchExtension';
 import isCursorAtBeginning from './utils/isCursorAtBeginning';
 
+// Newer versions of CodeMirror by default use Chrome's EditContext API.
+// While this might be stable enough for desktop use, it causes significant
+// problems on Android:
+// - https://github.com/codemirror/dev/issues/1450
+// - https://github.com/codemirror/dev/issues/1451
+// For now, CodeMirror allows disabling EditContext to work around these issues:
+// https://discuss.codemirror.net/t/experimental-support-for-editcontext/8144/3
+type ExtendedEditorView = typeof EditorView & { EDIT_CONTEXT: boolean };
+(EditorView as ExtendedEditorView).EDIT_CONTEXT = false;
+
 const createEditor = (
 	parentElement: HTMLElement, props: EditorProps,
 ): CodeMirrorControl => {
@@ -176,7 +186,13 @@ const createEditor = (
 			notifyLinkEditRequest();
 			return true;
 		}),
-		keyCommand('Tab', insertOrIncreaseIndent, true),
+		keyCommand('Tab', (view: EditorView) => {
+			if (settings.autocompleteMarkup) {
+				return insertOrIncreaseIndent(view);
+			}
+			// Use the default indent behavior (which doesn't adjust markup)
+			return insertTab(view);
+		}, true),
 		keyCommand('Shift-Tab', (view) => {
 			// When at the beginning of the editor, allow shift-tab to act
 			// normally.

packages/editor/CodeMirror/testUtil/createEditorSettings.ts

@@ -10,6 +10,7 @@ const createEditorSettings = (themeId: number) => {
 		readOnly: false,
 		automatchBraces: false,
 		ignoreModifiers: false,
+		autocompleteMarkup: true,
 
 		keymap: EditorKeymap.Default,
 		language: EditorLanguageType.Markdown,

packages/editor/package.json

@@ -26,20 +26,20 @@
     "typescript": "5.4.5"
   },
   "dependencies": {
-    "@codemirror/autocomplete": "6.13.0",
-    "@codemirror/commands": "6.3.3",
-    "@codemirror/lang-html": "6.4.8",
-    "@codemirror/lang-markdown": "6.2.4",
-    "@codemirror/language": "6.10.1",
+    "@codemirror/autocomplete": "6.18.1",
+    "@codemirror/commands": "6.7.0",
+    "@codemirror/lang-html": "6.4.9",
+    "@codemirror/lang-markdown": "6.3.0",
+    "@codemirror/language": "6.10.3",
     "@codemirror/language-data": "6.3.1",
-    "@codemirror/legacy-modes": "6.3.3",
-    "@codemirror/lint": "6.5.0",
+    "@codemirror/legacy-modes": "6.4.1",
+    "@codemirror/lint": "6.8.2",
     "@codemirror/search": "6.5.6",
     "@codemirror/state": "6.4.1",
-    "@codemirror/view": "6.26.3",
-    "@lezer/common": "1.2.1",
-    "@lezer/highlight": "1.2.0",
-    "@lezer/markdown": "1.2.0",
+    "@codemirror/view": "6.34.1",
+    "@lezer/common": "1.2.3",
+    "@lezer/highlight": "1.2.1",
+    "@lezer/markdown": "1.3.1",
     "@replit/codemirror-vim": "6.2.0"
   }
 }

packages/editor/types.ts

@@ -152,6 +152,7 @@ export interface EditorSettings {
 	useExternalSearch: boolean;
 
 	automatchBraces: boolean;
+	autocompleteMarkup: boolean;
 
 	// True if internal command keyboard shortcuts should be ignored (thus
 	// allowing Joplin shortcuts to run).

packages/lib/models/settings/builtInMetadata.ts

@@ -641,6 +641,18 @@ const builtInMetadata = (Setting: typeof SettingType) => {
 			storage: SettingStorage.File,
 			isGlobal: true,
 		},
+		'editor.autocompleteMarkup': {
+			value: true,
+			advanced: true,
+			type: SettingItemType.Bool,
+			public: true,
+			section: 'note',
+			appTypes: [AppType.Desktop, AppType.Mobile],
+			label: () => _('Autocomplete Markdown and HTML'),
+			description: () => _('Enables Markdown list continuation, auto-closing HTML tags, and other markup autocompletions.'),
+			storage: SettingStorage.File,
+			isGlobal: true,
+		},
 		'notes.columns': {
 			value: defaultListColumns(),
 			public: false,