Support the beta markdown editor

package.json

@@ -2,9 +2,10 @@
   "name": "joplin-plugin-space-indenter",
   "version": "0.2.2",
   "scripts": {
-    "dist": "webpack --joplin-plugin-config buildMain && webpack --joplin-plugin-config buildExtraScripts && webpack --joplin-plugin-config createArchive",
+    "dist": "webpack --env joplin-plugin-config=buildMain && webpack --env joplin-plugin-config=buildExtraScripts && webpack --env joplin-plugin-config=createArchive",
     "prepare": "npm run dist",
-    "update": "npm install -g generator-joplin && yo joplin --update"
+    "updateVersion": "webpack --env joplin-plugin-config=updateVersion",
+    "update": "npm install -g generator-joplin && yo joplin --node-package-manager npm --update --force"
   },
   "license": "MIT",
   "keywords": [
@@ -14,17 +15,17 @@
     "publish"
   ],
   "devDependencies": {
-    "@types/node": "^14.0.14",
+    "@codemirror/language": "^6.10.1",
+    "@codemirror/state": "^6.4.1",
+    "@types/node": "^18.7.13",
     "chalk": "^4.1.0",
-    "copy-webpack-plugin": "^6.1.0",
-    "fs-extra": "^9.0.1",
-    "glob": "^7.1.6",
-    "on-build-webpack": "^0.1.0",
-    "tar": "^6.0.5",
-    "ts-loader": "^7.0.5",
-    "typescript": "^3.9.3",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11",
-    "yargs": "^16.2.0"
+    "copy-webpack-plugin": "^11.0.0",
+    "fs-extra": "^10.1.0",
+    "glob": "^8.0.3",
+    "tar": "^6.1.11",
+    "ts-loader": "^9.3.1",
+    "typescript": "^4.8.2",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0"
   }
 }

plugin.config.json

@@ -1,3 +1,3 @@
 {
-	"extraScripts": []
+	"extraScripts": ["contentScript/codeMirror5.ts", "contentScript/codeMirror6.ts"]
 }

src/contentScript/codeMirror5.ts

@@ -0,0 +1,49 @@
+import getSettings from "./getSettings";
+import type { IndentSettings } from "../settings";
+import type { PluginContext } from "./types";
+
+export default function(context: PluginContext) {
+	return {
+		plugin: function plugin(CodeMirror: any) {
+			if (CodeMirror.cm6) return;
+
+			CodeMirror.defineOption('enable-space-indenter', false, async function(cm: any, val: boolean, _old: boolean) {
+				if (val) {
+					const settings = await getSettings(context);
+					cm.updateIndentSettings(settings);
+				}
+			});
+
+			CodeMirror.defineExtension('updateIndentSettings', function(newSettings: IndentSettings) {
+				if (!newSettings.indentWithTabs) {
+					// based on: https://github.com/codemirror/codemirror5/issues/988#issuecomment-549644684
+					this.setOption('extraKeys', {
+						Tab: (cm: any) => {
+							const isListItem = /^-|^\*|^\d\./g;
+							if (cm.getMode().name === 'null') {
+								cm.execCommand('insertTab');
+							} else {
+								const line = cm.getLine(cm.getCursor().line).trim();
+								if (cm.somethingSelected() ||
+									isListItem.test(line)) {
+									cm.execCommand('indentMore');
+								} else {
+									cm.execCommand('insertSoftTab');
+								}
+							}
+						},
+						'Shift-Tab': (cm: any) => cm.execCommand('indentLess')
+					});
+				}
+				this.setOption('indentWithTabs', newSettings.indentWithTabs);
+				this.setOption('indentUnit', newSettings.indentUnit);
+				this.setOption('tabSize', newSettings.tabSize);
+				this.setOption('smartIndent', newSettings.smartIndent);
+			});
+		},
+
+		codeMirrorOptions: {
+			'enable-space-indenter': true,
+		},
+	}
+};

src/contentScript/codeMirror6.ts

@@ -0,0 +1,32 @@
+import getSettings from "./getSettings";
+import type { PluginContext } from "./types";
+import { Prec, EditorState } from "@codemirror/state";
+import { indentService, indentUnit } from "@codemirror/language";
+
+export default function(context: PluginContext) {
+	return {
+		plugin: async function plugin(CodeMirror: any) {
+			if (!CodeMirror.cm6) return;
+
+			const settings = await getSettings(context);
+
+			// CodeMirror 6 uses a string indent unit
+			let indentation = ' '.repeat(settings.indentUnit);
+			if (settings.indentWithTabs) {
+				indentation = '\t'.repeat(Math.floor(settings.indentUnit / settings.tabSize));
+			}
+
+			// Returning null: Makes the editor use the indentation of the line above the current.
+			// See https://codemirror.net/docs/ref/#language.indentService
+			const continueIndentIndenter = indentService.of(() => null);
+
+			CodeMirror.addExtension([
+				Prec.high([
+					indentUnit.of(indentation),
+					EditorState.tabSize.of(settings.tabSize),
+					settings.smartIndent ? [] : continueIndentIndenter,
+				]),
+			]);
+		},
+	};
+};

src/contentScript/getSettings.ts

@@ -0,0 +1,28 @@
+import type { IndentSettings } from "../settings";
+import { PluginContext } from "./types";
+
+export default function getSettings(context: PluginContext) {
+	async function get_settings() {
+		return await context.postMessage({name: 'getSettings'});
+	}
+
+	return new Promise<IndentSettings>(resolve => {
+		// trying to do what Rich Markdown does
+		// https://github.com/CalebJohn/joplin-rich-markdown/blob/a32b087fa9d317ae7cf518a4ba79b3bca7556983/src/richMarkdown.ts
+		//
+		// retry to get settings until success
+		async function backoff(timeout: number) {
+			const settings = await get_settings();
+
+			if (!settings) {
+				setTimeout(backoff, timeout * 2, timeout * 2);
+			}
+			else {
+				resolve(settings);
+			}
+		};
+		// Set the first timeout to 50 because settings are usually ready immediately
+		// Set the first backoff to (100*2) to give a little extra time
+		setTimeout(backoff, 50, 100);
+	});
+}

src/contentScript/types.ts

@@ -0,0 +1,2 @@
+
+export type PluginContext = { postMessage: any };

src/index.ts

@@ -2,7 +2,19 @@ import joplin from 'api';
 import { ContentScriptType, ToolbarButtonLocation } from 'api/types';
 import { registerAllSettings, getAllSettings, IndentSettings } from './settings'
 
-const contentScriptId = 'space-indenter';
+async function registerContentScript(sourcePath: string, contentScriptId: string) {
+	await joplin.contentScripts.register(
+		ContentScriptType.CodeMirrorPlugin,
+		contentScriptId,
+		sourcePath,
+	);
+
+	await joplin.contentScripts.onMessage(contentScriptId, async (message:any) => {
+		if (message.name === 'getSettings') {
+			return await getAllSettings();
+		}
+	});
+}
 
 async function reformatTabs(settings: IndentSettings) {
 	let pattern: RegExp, replace: string;
@@ -38,17 +50,8 @@ joplin.plugins.register({
 
 		await joplin.views.toolbarButtons.create('butSpaceIndent', 'spaceindent.reformatTabs', ToolbarButtonLocation.EditorToolbar);
 
-		await joplin.contentScripts.register(
-			ContentScriptType.CodeMirrorPlugin,
-			contentScriptId,
-			'./indent.js'
-		);
-
-		await joplin.contentScripts.onMessage(contentScriptId, async (message:any) => {
-			if (message.name === 'getSettings') {
-				return await getAllSettings();
-			}
-		});
+		await registerContentScript('./contentScript/codeMirror5.js', 'space-indenter-cm5');
+		await registerContentScript('./contentScript/codeMirror6.js', 'space-indenter-cm6');
 
 		await joplin.workspace.onNoteSelectionChange(async () => {
 			const settings = await getAllSettings();