upgrade codemirror api

Author: Jannes

.github/workflows/npm-publish.yml

@@ -15,7 +15,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
       - run: npm ci
       - run: npm run dist
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "joplin-plugin-zotero-link",
-  "version": "1.2.1",
+  "version": "2.0.0",
   "scripts": {
     "dist": "webpack --env joplin-plugin-config=buildMain && webpack --env joplin-plugin-config=buildExtraScripts && webpack --env joplin-plugin-config=createArchive",
     "prepare": "npm run dist",
@@ -28,6 +28,9 @@
     "webpack-cli": "^4.10.0"
   },
   "dependencies": {
+    "@codemirror/autocomplete": "^6.18.1",
+    "@codemirror/language": "^6.10.3",
+    "@codemirror/view": "^6.34.1",
     "@types/codemirror": "^5.60.15"
   }
 }

package.json

@@ -22,7 +22,6 @@ joplin.plugins.register({
 		await joplin.contentScripts.onMessage(scriptId, async (msg) => {
 
 			if (msg === 'getSettings') {
-				console.log('received getSettings');
                 const settingValue = await joplin.settings.value(SETTING.Port);
                 return {
                     port: settingValue,

src/index.ts

@@ -1,3 +1,6 @@
+import { Completion, pickedCompletion } from "@codemirror/autocomplete";
+import { EditorView } from "@codemirror/view";
+import { Annotation, AnnotationType, ChangeSet, Text } from "@codemirror/state";
 import { Editor } from "codemirror";
 
 export class ZoteroItem {
@@ -37,24 +40,27 @@ export class ZoteroItem {
       return value ? value.indexOf(query) >= 0 : false;
     }
 
-    getHint() {
+    getHint(): Completion {
       return {
-        text: this.title,
-        render: async (elem, self, data) => {
-            const itemElem = elem.ownerDocument.createElement('div');
-            itemElem.className = 'zotero-results-item';
-
-            itemElem.innerHTML = `
-                <div class="zotero-item-title">${this.title}</div>
-                <div class="zotero-item-meta">${this.creators} <i>${this.date}</i></div>
-            `;
-            elem.appendChild(itemElem);
-        },
-        hint: async (cm: Editor, data, completion) => {
-            const from = completion.from || data.from;
-            from.ch -= 2;
-            cm.replaceRange(`[${this.title}](zotero://select/library/items/${this.key})`, from, cm.getCursor(), "complete");
-        }
+        label: 'z@' + this.titleL + this.creatorsL + this.date,
+        displayLabel: this.title,
+        detail: this.creators + ' ' + this.date,
+        apply: this.apply.bind(this)
+      };
     }
+
+    apply(view: EditorView, completion: Completion, from: number, to: number) {
+      const replacement = `[${this.title}](zotero://select/library/items/${this.key})`;
+
+      const replaceTransaction = view.state.update({
+        changes: {
+          from: from-2,
+          to,
+          insert: replacement
+        },
+        annotations: pickedCompletion.of(completion)
+      });
+
+      view.dispatch(replaceTransaction);
     }
   }

src/zotero-item.ts

@@ -1,23 +1,29 @@
 import { ZoteroQuery } from './zotero-query';
+import { completeFromList, CompletionContext } from '@codemirror/autocomplete';
 
 module.exports = {
     default: function(context) {
 
         const plugin = function (CodeMirror) {
-            
             CodeMirror.defineOption('zoteroLink', false, function(cm, value, prev) {
                 if (!value) return;
-                const zq = new ZoteroQuery(CodeMirror, context, cm);
+                const zq = new ZoteroQuery(context, cm);
 
-                cm.on('inputRead', zq.getInputReadHandler());
+                console.log(CodeMirror);
+                CodeMirror.addExtension([
+                    CodeMirror.joplinExtensions.completionSource(
+                      zq.getCompletions()
+                    ),
+                    
+                    // Joplin also exposes a Facet that allows enabling or disabling CodeMirror's
+                    // built-in autocompletions. These apply, for example, to HTML tags.
+                    CodeMirror.joplinExtensions.enableLanguageDataAutocomplete.of(true)
+                ]);
             });
         };
 
         return {
             plugin,
-            codeMirrorResources: [
-                'addon/hint/show-hint'
-            ],
             codeMirrorOptions: {
                 'zoteroLink': true
             },

src/zotero-link.ts

@@ -1,6 +1,9 @@
+import { start } from "repl";
 import { SETTING } from "./settings";
 import { ZoteroItem } from "./zotero-item";
 
+import { CompletionContext, startCompletion } from "@codemirror/autocomplete";
+
 interface ChangePos {
     line: any;
     ch: any;
@@ -14,69 +17,34 @@ interface Change {
 const COMMAND = 'z@';
 
 export class ZoteroQuery {
-    codeMirror: any;
-    cm: any;
-    context: any;
     start: ChangePos;
     change: Change;
     zoteroItems: ZoteroItem[] = [];
     filteredItems: ZoteroItem[] = [];
     timeout: NodeJS.Timeout | undefined;
 
-    constructor(codeMirror, context, cm) {
-        this.codeMirror = codeMirror;
-        this.context = context;
-        this.cm = cm
-    }
-    
-    getInputReadHandler() {
-        const that = this;
-        return async function (cm, change) {
-            if (!cm.state.completionActive && that.cm.getTokenAt(cm.getCursor()).string === COMMAND) {
-                that.zoteroItems = await that.loadData();
-                that.filteredItems = that.zoteroItems;
-    
-                that.change = change;
-                that.start = {
-                    line: change.from.line,
-                    ch: change.from.ch + 1
-                };
-    
-                setTimeout(() => {
-                    that.codeMirror.showHint(that.cm, that.getPrepareHints(), {
-                        completeSingle: false,
-                        closeOnUnfocus: true,
-                        async: true,
-                        closeCharacters: /[()\[\]{};:>,]/
-                    });
-                }, 10);
-            }
-        }
+    constructor(private context, private cm) {
+        this.loadData().then(items => this.zoteroItems = items);
     }
 
-    getPrepareHints() {
+    getCompletions() {
         const that = this;
-
-        return async function (cm, callback) {
-            const cursor = cm.getCursor();
-            let prefix = cm.getRange(that.start, cursor) || '';
-    
-            const hints = await that.query(prefix);
-            callback({
-                list: hints,
-                from: {
-                    line: that.change.from.line,
-                    ch: that.change.from.ch + 1,
-                },
-                to: {
-                    line: that.change.to.line,
-                    ch: that.change.to.ch + 1,
-                },
-            });
+        return (context: CompletionContext) => {
+            // reload data in background
+            that.loadData().then(items => that.zoteroItems = items);
+            let word = context.matchBefore(/\S+/);
+
+            if (!word || word.from == word.to || !word.text.startsWith('z@'))
+                return null;
+
+            return {
+                from: word.from + 2,
+                options: that.zoteroItems.map(item => item.getHint())
+            }  
         }
-    };
+    }
 
-    async query(query: string) {
+    query(query: string) {
         if (!this.zoteroItems) {
             return [];
         }
@@ -99,12 +67,10 @@ export class ZoteroQuery {
             data = await this.tryZotServer(settings.port);
         }
 
-        console.log(data);
-
         if (!!data) {
             data = data.filter(item => item.itemType !== 'attachment' && item.itemType !== 'note')
                 .map(item => new ZoteroItem(item));
-            console.log('items', data);
+
             data.sort((a: ZoteroItem, b: ZoteroItem) => a.title.localeCompare(b.title));
             return data;
         } else {