CodeMirror 6 / beta editor support

api/types.ts

@@ -1,3 +1,5 @@
+/* eslint-disable multiline-comment-style */
+
 // =================================================================
 // Command API types
 // =================================================================
@@ -221,6 +223,12 @@ export enum ModelType {
 	Command = 16,
 }
 
+export interface VersionInfo {
+	version: string;
+	profileVersion: number;
+	syncVersion: number;
+}
+
 // =================================================================
 // Menu types
 // =================================================================
@@ -351,6 +359,18 @@ export interface DialogResult {
 	formData?: any;
 }
 
+export interface Size {
+	width?: number;
+	height?: number;
+}
+
+export interface Rectangle {
+	x?: number;
+	y?: number;
+	width?: number;
+	height?: number;
+}
+
 // =================================================================
 // Settings types
 // =================================================================
@@ -499,6 +519,57 @@ export interface ContentScriptContext {
 	postMessage: PostMessageHandler;
 }
 
+export interface ContentScriptModuleLoadedEvent {
+	userData?: any;
+}
+
+export interface ContentScriptModule {
+	onLoaded?: (event: ContentScriptModuleLoadedEvent)=> void;
+	plugin: ()=> any;
+	assets?: ()=> void;
+}
+
+export interface MarkdownItContentScriptModule extends Omit<ContentScriptModule, 'plugin'> {
+	plugin: (markdownIt: any, options: any)=> any;
+}
+
+type EditorCommandCallback = (...args: any[])=> any;
+
+export interface CodeMirrorControl {
+	/** Points to a CodeMirror 6 EditorView instance. */
+	editor: any;
+	cm6: any;
+
+	/** `extension` should be a [CodeMirror 6 extension](https://codemirror.net/docs/ref/#state.Extension). */
+	addExtension(extension: any|any[]): void;
+
+	supportsCommand(name: string): boolean;
+	execCommand(name: string, ...args: any[]): any;
+	registerCommand(name: string, callback: EditorCommandCallback): void;
+
+	joplinExtensions: {
+		/**
+		 * Returns a [CodeMirror 6 extension](https://codemirror.net/docs/ref/#state.Extension) that
+		 * registers the given [CompletionSource](https://codemirror.net/docs/ref/#autocomplete.CompletionSource).
+		 *
+		 * Use this extension rather than the built-in CodeMirror [`autocompletion`](https://codemirror.net/docs/ref/#autocomplete.autocompletion)
+		 * if you don't want to use [langaugeData-based autocompletion](https://codemirror.net/docs/ref/#autocomplete.autocompletion^config.override).
+		 *
+		 * Using `autocompletion({ override: [ ... ]})` causes errors when done by multiple plugins.
+		 */
+		completionSource(completionSource: any): any;
+
+		/**
+		 * Creates an extension that enables or disables [`languageData`-based autocompletion](https://codemirror.net/docs/ref/#autocomplete.autocompletion^config.override).
+		 */
+		enableLanguageDataAutocomplete: { of: (enabled: boolean)=> any };
+	};
+}
+
+export interface MarkdownEditorContentScriptModule extends Omit<ContentScriptModule, 'plugin'> {
+	plugin: (editorControl: CodeMirrorControl)=> void;
+}
+
 export enum ContentScriptType {
 	/**
 	 * Registers a new Markdown-It plugin, which should follow the template
@@ -508,7 +579,7 @@ export enum ContentScriptType {
 	 * module.exports = {
 	 *     default: function(context) {
 	 *         return {
-	 *             plugin: function(markdownIt, options) {
+	 *             plugin: function(markdownIt, pluginOptions) {
 	 *                 // ...
 	 *             },
 	 *             assets: {
@@ -518,6 +589,7 @@ export enum ContentScriptType {
 	 *     }
 	 * }
 	 * ```
+	 *
 	 * See [the
 	 * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/content_script)
 	 * for a simple Markdown-it plugin example.
@@ -530,17 +602,19 @@ export enum ContentScriptType {
 	 *
 	 * - The **required** `plugin` key is the actual Markdown-It plugin - check
 	 *   the [official doc](https://github.com/markdown-it/markdown-it) for more
-	 *   information. The `options` parameter is of type
-	 *   [RuleOptions](https://github.com/laurent22/joplin/blob/dev/packages/renderer/MdToHtml.ts),
-	 *   which contains a number of options, mostly useful for Joplin's internal
-	 *   code.
+	 *   information.
 	 *
 	 * - Using the **optional** `assets` key you may specify assets such as JS
 	 *   or CSS that should be loaded in the rendered HTML document. Check for
 	 *   example the Joplin [Mermaid
 	 *   plugin](https://github.com/laurent22/joplin/blob/dev/packages/renderer/MdToHtml/rules/mermaid.ts)
 	 *   to see how the data should be structured.
 	 *
+	 * ## Getting the settings from the renderer
+	 *
+	 * You can access your plugin settings from the renderer by calling
+	 * `pluginOptions.settingValue("your-setting-key')`.
+	 *
 	 * ## Posting messages from the content script to your plugin
 	 *
 	 * The application provides the following function to allow executing
@@ -671,4 +745,4 @@ export enum ContentScriptType {
 	 *
 	 */
 	CodeMirrorPlugin = 'codeMirrorPlugin',
-}
+}

package.json

@@ -3,10 +3,10 @@
   "version": "1.5.13",
   "description": "",
   "scripts": {
-    "dist": "sh scripts/prepare.sh && webpack --joplin-plugin-config buildMain && webpack --joplin-plugin-config buildExtraScripts && webpack --joplin-plugin-config createArchive",
-    "postinstall": "npm run dist",
+    "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",
     "lint": "eslint --ext .js,.ts src",
     "test": "jest"
   },
@@ -15,32 +15,35 @@
   ],
   "license": "MIT",
   "devDependencies": {
+    "@codemirror/language": "^6.10.1",
+    "@codemirror/state": "^6.4.1",
     "@types/jest": "^27.5.2",
-    "@types/node": "^14.0.14",
+    "@types/node": "^18.7.13",
     "@typescript-eslint/eslint-plugin": "^4.28.2",
     "@typescript-eslint/parser": "^4.28.2",
     "chalk": "^4.1.0",
-    "copy-webpack-plugin": "^6.1.0",
+    "copy-webpack-plugin": "^11.0.0",
     "eslint": "^7.30.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-import-resolver-typescript": "^2.4.0",
     "eslint-plugin-import": "^2.23.4",
-    "fs-extra": "^9.0.1",
-    "glob": "^7.1.6",
+    "fs-extra": "^10.1.0",
+    "glob": "^8.0.3",
     "jest": "^27.5.1",
     "on-build-webpack": "^0.1.0",
-    "tar": "^6.0.5",
+    "tar": "^6.1.11",
     "ts-jest": "^27.1.5",
-    "ts-loader": "^7.0.5",
-    "typescript": "^3.9.3",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11",
+    "ts-loader": "^9.3.1",
+    "typescript": "^4.8.2",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
     "yargs": "^16.2.0"
   },
   "browser": {
     "fs": false
   },
   "dependencies": {
+    "@codemirror/view": "^6.26.0",
     "katex": "^0.16.2",
     "markdown-it": "^13.0.1",
     "markdown-it-mark": "^3.0.1",

plugin.config.json

@@ -1,3 +1,3 @@
 {
-	"extraScripts": []
+	"extraScripts": ["codeMirror6Scroller.ts"]
 }

src/codeMirrorScroller.js → src/codeMirror5Scroller.js

@@ -1,4 +1,6 @@
 function plugin(CodeMirror) {
+  if (CodeMirror.cm6) { return; }
+
   CodeMirror.defineExtension('scrollToLine', function scrollToLine(lineno) {
     // temporary fix: sometimes the first coordinate is incorrect,
     // resulting in a difference about +- 10 px,

src/codeMirror6Scroller.ts

@@ -0,0 +1,31 @@
+import type { ContentScriptContext, MarkdownEditorContentScriptModule } from 'api/types';
+import { EditorView } from '@codemirror/view';
+
+// modified from: https://github.com/personalizedrefrigerator/bug-report/tree/example/plugin-scroll-to-line
+export default (context: ContentScriptContext): MarkdownEditorContentScriptModule => {
+	return {
+		plugin: (editorControl: any) => {
+			if (!editorControl.cm6) { return; }
+
+      // Running in CM6
+      editorControl.registerCommand('scrollToLine', (lineNumber: number) => {
+        const editor: EditorView = editorControl.editor;
+        console.log('scrollToLine', lineNumber);
+
+        // Bounds checking
+        if (lineNumber < 0) {
+          lineNumber = 0;
+        }
+        if (lineNumber > editor.state.doc.lines) {
+          lineNumber = editor.state.doc.lines;
+        }
+
+        // Scroll to line, place the line at the *top* of the editor
+        const lineInfo = editor.state.doc.line(lineNumber);
+        editor.dispatch(editor.state.update({
+            effects: EditorView.scrollIntoView(lineInfo.from, {y: 'start'})
+        }));
+      });
+		},
+	};
+};

src/index.ts

@@ -10,8 +10,13 @@ joplin.plugins.register({
 
     await joplin.contentScripts.register(
       ContentScriptType.CodeMirrorPlugin,
-      'codeMirrorScroller',
-      './codeMirrorScroller.js',
+      'codeMirror5Scroller',
+      './codeMirror5Scroller.js',
+    );
+    await joplin.contentScripts.register(
+      ContentScriptType.CodeMirrorPlugin,
+      'codeMirror6Scroller',
+      './codeMirror6Scroller.js',
     );
 
     const { panels } = joplin.views;
@@ -32,7 +37,7 @@ joplin.plugins.register({
           // scroll in raw markdown editor
           await joplin.commands.execute('editor.execCommand', {
             name: 'scrollToLine',
-            args: [message.lineno],
+            args: [parseInt(message.lineno)],
           });
         } else {
           // scroll in WYSIWYG editor or viewer