Mac: Fixes #13214: Markdown editor: Don't open links on ctrl-click (#13792)

Author: personalizedrefrigerator

.eslintignore

@@ -1028,6 +1028,7 @@ packages/editor/CodeMirror/editorCommands/supportsCommand.js
 packages/editor/CodeMirror/extensions/biDirectionalTextExtension.js
 packages/editor/CodeMirror/extensions/ctrlClickActionExtension.js
 packages/editor/CodeMirror/extensions/ctrlClickCheckboxExtension.js
+packages/editor/CodeMirror/extensions/editorSettingsExtension.js
 packages/editor/CodeMirror/extensions/highlightActiveLineExtension.js
 packages/editor/CodeMirror/extensions/keyUpHandlerExtension.js
 packages/editor/CodeMirror/extensions/links/ctrlClickLinksExtension.js

.gitignore

@@ -1000,6 +1000,7 @@ packages/editor/CodeMirror/editorCommands/supportsCommand.js
 packages/editor/CodeMirror/extensions/biDirectionalTextExtension.js
 packages/editor/CodeMirror/extensions/ctrlClickActionExtension.js
 packages/editor/CodeMirror/extensions/ctrlClickCheckboxExtension.js
+packages/editor/CodeMirror/extensions/editorSettingsExtension.js
 packages/editor/CodeMirror/extensions/highlightActiveLineExtension.js
 packages/editor/CodeMirror/extensions/keyUpHandlerExtension.js
 packages/editor/CodeMirror/extensions/links/ctrlClickLinksExtension.js

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

@@ -366,6 +366,7 @@ const CodeMirror = (props: NoteBodyEditorProps, ref: ForwardedRef<NoteBodyEditor
 			ignoreModifiers: true,
 			spellcheckEnabled: Setting.value('editor.spellcheckBeta'),
 			keymap: keyboardMode,
+			preferMacShortcuts: shim.isMac(),
 			indentWithTabs: true,
 			tabMovesFocus: props.tabMovesFocus,
 			editorLabel: _('Markdown editor'),

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

@@ -274,6 +274,7 @@ function NoteEditor(props: Props) {
 		highlightActiveLine,
 
 		keymap: EditorKeymap.Default,
+		preferMacShortcuts: shim.mobilePlatform() === 'ios',
 
 		automatchBraces: false,
 		ignoreModifiers: false,

packages/editor/CodeMirror/createEditor.ts

@@ -40,6 +40,7 @@ import ctrlKeyStateClassExtension from './extensions/modifierKeyCssExtension';
 import ctrlClickLinksExtension from './extensions/links/ctrlClickLinksExtension';
 import { RenderedContentContext } from './extensions/rendering/types';
 import ctrlClickCheckboxExtension from './extensions/ctrlClickCheckboxExtension';
+import editorSettingsExtension, { setEditorSettingsEffect } from './extensions/editorSettingsExtension';
 
 // Newer versions of CodeMirror by default use Chrome's EditContext API.
 // While this might be stable enough for desktop use, it causes significant
@@ -300,6 +301,7 @@ const createEditor = (
 				biDirectionalTextExtension,
 				overwriteModeExtension,
 				ctrlKeyStateClassExtension,
+				editorSettingsExtension(settings),
 
 				selectedNoteIdExtension,
 
@@ -345,9 +347,12 @@ const createEditor = (
 		onSettingsChange: (newSettings: EditorSettings) => {
 			settings = newSettings;
 			editor.dispatch({
-				effects: dynamicConfig.reconfigure(
-					configFromSettings(newSettings, context),
-				),
+				effects: [
+					dynamicConfig.reconfigure(
+						configFromSettings(newSettings, context),
+					),
+					setEditorSettingsEffect.of(newSettings),
+				],
 			});
 		},
 		onUndoRedo: () => {

packages/editor/CodeMirror/extensions/ctrlClickActionExtension.ts

@@ -1,5 +1,6 @@
 import { EditorView } from '@codemirror/view';
 import { Prec } from '@codemirror/state';
+import { editorSettingsFacet } from './editorSettingsExtension';
 
 const hasMultipleCursors = (view: EditorView) => {
 	return view.state.selection.ranges.length > 1;
@@ -12,7 +13,9 @@ const ctrlClickActionExtension = (onCtrlClick: OnCtrlClick) => {
 		Prec.high([
 			EditorView.domEventHandlers({
 				mousedown: (event: MouseEvent, view: EditorView) => {
-					const hasModifier = event.ctrlKey || event.metaKey;
+					const editorSettings = view.state.facet(editorSettingsFacet);
+					const hasModifier = editorSettings.preferMacShortcuts ? event.metaKey : event.ctrlKey;
+
 					// The default CodeMirror action for ctrl-click is to add another cursor
 					// to the document. If the user already has multiple cursors, assume that
 					// the ctrl-click action is intended to add another.

packages/editor/CodeMirror/extensions/editorSettingsExtension.ts

@@ -0,0 +1,25 @@
+import { Facet, StateEffect, StateField } from '@codemirror/state';
+import { EditorSettings } from '../../types';
+
+export const setEditorSettingsEffect = StateEffect.define<EditorSettings>();
+
+export const editorSettingsFacet = Facet.define<EditorSettings|null, EditorSettings|null>({
+	combine: (possibleValues) => {
+		return possibleValues.filter(value => !!value)[0] ?? null;
+	},
+});
+
+export default (initialSettings: EditorSettings) => [
+	StateField.define<EditorSettings|null>({
+		create: () => initialSettings,
+		update: (oldValue, transaction) => {
+			for (const e of transaction.effects) {
+				if (e.is(setEditorSettingsEffect)) {
+					return e.value;
+				}
+			}
+			return oldValue;
+		},
+		provide: (field) => editorSettingsFacet.from(field),
+	}),
+];

packages/editor/CodeMirror/extensions/modifierKeyCssExtension.ts

@@ -1,6 +1,9 @@
 import { StateEffect, StateField, Transaction } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
+import { editorSettingsFacet } from './editorSettingsExtension';
 
+// On MacOS: Tracks the meta key
+// On other platforms: Tracks the ctrl key.
 const ctrlOrMetaChangedEffect = StateEffect.define<boolean>();
 
 const ctrlOrMetaPressedField = StateField.define<boolean>({
@@ -18,11 +21,13 @@ const ctrlOrMetaPressedField = StateField.define<boolean>({
 		})),
 		...(() => {
 			const onEvent = (event: KeyboardEvent|MouseEvent, view: EditorView) => {
-				const ctrlOrCmdPressed = event.ctrlKey || event.metaKey;
-				if (ctrlOrCmdPressed !== view.state.field(ctrlOrMetaPressedField)) {
+				const editorSettings = view.state.facet(editorSettingsFacet);
+				const hasModifier = editorSettings.preferMacShortcuts ? event.metaKey : event.ctrlKey;
+
+				if (hasModifier !== view.state.field(ctrlOrMetaPressedField)) {
 					view.dispatch({
 						effects: [
-							ctrlOrMetaChangedEffect.of(ctrlOrCmdPressed),
+							ctrlOrMetaChangedEffect.of(hasModifier),
 						],
 					});
 				}

packages/editor/testing/createEditorSettings.ts

@@ -17,6 +17,7 @@ const createEditorSettings = (themeId: number) => {
 		highlightActiveLine: false,
 
 		keymap: EditorKeymap.Default,
+		preferMacShortcuts: false,
 		language: EditorLanguageType.Markdown,
 		themeData,
 

packages/editor/types.ts

@@ -180,6 +180,7 @@ export interface EditorSettings {
 	language: EditorLanguageType;
 
 	keymap: EditorKeymap;
+	preferMacShortcuts: boolean;
 	tabMovesFocus: boolean;
 
 	markdownMarkEnabled: boolean;