Add support for guiEditNote to view notes (#2143)

* Add AnkiConnect.guiEditNote

* Update _onApiNoteView to first try guiEditNote

* Add setting

* Update noteView API

* Use setting

* Return which mode was used

* Update DisplayGenerator

* Handle errors in DisplayAnki

* Update docs

* Add isErrorUnsupportedAction function

* Add an allowFallback option to noteView

* Disambiguate

* Simplify now that preferredMode isn't used

* Update settings info

* Implement test buttons

* Update styles

* Update status visibility

* Wrap layout

* Update description

* Update date

7 files changed, 153 insertions, 25 deletions

diff --git a/ext/js/background/backend.js b/ext/js/background/backend.js
index cdbfde1e..07d6fd98 100644
--- a/ext/js/background/backend.js
+++ b/ext/js/background/backend.js
@@ -512,8 +512,22 @@ class Backend {
         );
     }
 
-    async _onApiNoteView({noteId}) {
-        return await this._anki.guiBrowseNote(noteId);
+    async _onApiNoteView({noteId, mode, allowFallback}) {
+        if (mode === 'edit') {
+            try {
+                await this._anki.guiEditNote(noteId);
+                return 'edit';
+            } catch (e) {
+                if (!this._anki.isErrorUnsupportedAction(e)) {
+                    throw e;
+                } else if (!allowFallback) {
+                    throw new Error('Mode not supported');
+                }
+            }
+        }
+        // Fallback
+        await this._anki.guiBrowseNote(noteId);
+        return 'browse';
     }
 
     async _onApiSuspendAnkiCardsForNote({noteId}) {
diff --git a/ext/js/comm/anki.js b/ext/js/comm/anki.js
index 7ffb747b..f5dc62f2 100644
--- a/ext/js/comm/anki.js
+++ b/ext/js/comm/anki.js
@@ -106,6 +106,15 @@ class AnkiConnect {
     }
 
     /**
+     * Opens the note editor GUI.
+     * @param {number} noteId The ID of the note.
+     * @returns {Promise<null>} Nothing is returned.
+     */
+    async guiEditNote(noteId) {
+        return await this._invoke('guiEditNote', {note: noteId});
+    }
+
+    /**
      * Stores a file with the specified base64-encoded content inside Anki's media folder.
      * @param {string} fileName The name of the file.
      * @param {string} content The base64-encoded content of the file.
@@ -187,6 +196,21 @@ class AnkiConnect {
         return actions.includes(action);
     }
 
+    /**
+     * Checks if a specific error object corresponds to an unsupported action.
+     * @param {Error} error An error object generated by an API call.
+     * @returns {boolean} Whether or not the error indicates the action is not supported.
+     */
+    isErrorUnsupportedAction(error) {
+        if (error instanceof Error) {
+            const {data} = error;
+            if (isObject(data) && data.apiError === 'unsupported action') {
+                return true;
+            }
+        }
+        return false;
+    }
+
     // Private
 
     async _checkVersion() {
diff --git a/ext/js/comm/api.js b/ext/js/comm/api.js
index 75a01dd5..2ffe2d8c 100644
--- a/ext/js/comm/api.js
+++ b/ext/js/comm/api.js
@@ -60,8 +60,8 @@ class API {
         return this._invoke('injectAnkiNoteMedia', {timestamp, definitionDetails, audioDetails, screenshotDetails, clipboardDetails, dictionaryMediaDetails});
     }
 
-    noteView(noteId) {
-        return this._invoke('noteView', {noteId});
+    noteView(noteId, mode, allowFallback) {
+        return this._invoke('noteView', {noteId, mode, allowFallback});
     }
 
     suspendAnkiCardsForNote(noteId) {
diff --git a/ext/js/data/options-util.js b/ext/js/data/options-util.js
index 593fed29..f87bfa4b 100644
--- a/ext/js/data/options-util.js
+++ b/ext/js/data/options-util.js
@@ -467,7 +467,8 @@ class OptionsUtil {
             {async: false, update: this._updateVersion15.bind(this)},
             {async: false, update: this._updateVersion16.bind(this)},
             {async: false, update: this._updateVersion17.bind(this)},
-            {async: false, update: this._updateVersion18.bind(this)}
+            {async: false, update: this._updateVersion18.bind(this)},
+            {async: false, update: this._updateVersion19.bind(this)}
         ];
         if (typeof targetVersion === 'number' && targetVersion < result.length) {
             result.splice(targetVersion);
@@ -947,4 +948,13 @@ class OptionsUtil {
         }
         return options;
     }
+
+    _updateVersion19(options) {
+        // Version 19 changes:
+        //  Added anki.noteGuiMode.
+        for (const profile of options.profiles) {
+            profile.options.anki.noteGuiMode = 'browse';
+        }
+        return options;
+    }
 }
diff --git a/ext/js/display/display-anki.js b/ext/js/display/display-anki.js
index 0af8831a..12133ad0 100644
--- a/ext/js/display/display-anki.js
+++ b/ext/js/display/display-anki.js
@@ -47,6 +47,7 @@ class DisplayAnki {
         this._screenshotFormat = 'png';
         this._screenshotQuality = 100;
         this._scanLength = 10;
+        this._noteGuiMode = 'browse';
         this._noteTags = [];
         this._modeOptions = new Map();
         this._dictionaryEntryTypeModeMap = new Map([
@@ -132,7 +133,7 @@ class DisplayAnki {
     _onOptionsUpdated({options}) {
         const {
             general: {resultOutputMode, glossaryLayoutMode, compactTags},
-            anki: {tags, duplicateScope, duplicateScopeCheckAllModels, suspendNewCards, checkForDuplicates, displayTags, kanji, terms, screenshot: {format, quality}},
+            anki: {tags, duplicateScope, duplicateScopeCheckAllModels, suspendNewCards, checkForDuplicates, displayTags, kanji, terms, noteGuiMode, screenshot: {format, quality}},
             scanning: {length: scanLength}
         } = options;
 
@@ -147,6 +148,7 @@ class DisplayAnki {
         this._screenshotFormat = format;
         this._screenshotQuality = quality;
         this._scanLength = scanLength;
+        this._noteGuiMode = noteGuiMode;
         this._noteTags = [...tags];
         this._modeOptions.clear();
         this._modeOptions.set('kanji', kanji);
@@ -418,7 +420,9 @@ class DisplayAnki {
         return error;
     }
 
-    _showErrorNotification(errors) {
+    _showErrorNotification(errors, displayErrors) {
+        if (typeof displayErrors === 'undefined') { displayErrors = errors; }
+
         if (this._errorNotificationEventListeners !== null) {
             this._errorNotificationEventListeners.removeAllEventListeners();
         }
@@ -428,7 +432,7 @@ class DisplayAnki {
             this._errorNotificationEventListeners = new EventListenerCollection();
         }
 
-        const content = this._display.displayGenerator.createAnkiNoteErrorsNotificationContent(errors);
+        const content = this._display.displayGenerator.createAnkiNoteErrorsNotificationContent(displayErrors);
         for (const node of content.querySelectorAll('.anki-note-error-log-link')) {
             this._errorNotificationEventListeners.addEventListener(node, 'click', () => {
                 console.log({ankiNoteErrors: errors});
@@ -634,10 +638,20 @@ class DisplayAnki {
         }
     }
 
-    _viewNote(node) {
+    async _viewNote(node) {
         const noteIds = this._getNodeNoteIds(node);
         if (noteIds.length === 0) { return; }
-        yomichan.api.noteView(noteIds[0]);
+        try {
+            await yomichan.api.noteView(noteIds[0], this._noteGuiMode, false);
+        } catch (e) {
+            const displayErrors = (
+                e.message === 'Mode not supported' ?
+                [this._display.displayGenerator.instantiateTemplateFragment('footer-notification-anki-view-note-error')] :
+                void 0
+            );
+            this._showErrorNotification([e], displayErrors);
+            return;
+        }
     }
 
     _showViewNoteMenu(node) {
diff --git a/ext/js/display/display-generator.js b/ext/js/display/display-generator.js
index 95080e27..851808f2 100644
--- a/ext/js/display/display-generator.js
+++ b/ext/js/display/display-generator.js
@@ -220,23 +220,27 @@ class DisplayGenerator {
         for (const error of errors) {
             const div = document.createElement('li');
             div.className = 'anki-note-error-message';
-            let message = isObject(error) && typeof error.message === 'string' ? error.message : `${error}`;
-            let link = null;
-            if (isObject(error) && isObject(error.data)) {
-                const {referenceUrl} = error.data;
-                if (typeof referenceUrl === 'string') {
-                    message = message.trimEnd();
-                    if (!/[.!?]^/.test()) { message += '.'; }
-                    message += ' ';
-                    link = document.createElement('a');
-                    link.href = referenceUrl;
-                    link.target = '_blank';
-                    link.rel = 'noreferrer noopener';
-                    link.textContent = 'More info';
+            if (error instanceof DocumentFragment || error instanceof Node) {
+                div.appendChild(error);
+            } else {
+                let message = isObject(error) && typeof error.message === 'string' ? error.message : `${error}`;
+                let link = null;
+                if (isObject(error) && isObject(error.data)) {
+                    const {referenceUrl} = error.data;
+                    if (typeof referenceUrl === 'string') {
+                        message = message.trimEnd();
+                        if (!/[.!?]^/.test()) { message += '.'; }
+                        message += ' ';
+                        link = document.createElement('a');
+                        link.href = referenceUrl;
+                        link.target = '_blank';
+                        link.rel = 'noreferrer noopener';
+                        link.textContent = 'More info';
+                    }
                 }
+                this._setTextContent(div, message);
+                if (link !== null) { div.appendChild(link); }
             }
-            this._setTextContent(div, message);
-            if (link !== null) { div.appendChild(link); }
             list.appendChild(div);
         }
 
@@ -251,6 +255,10 @@ class DisplayGenerator {
         return this._templates.instantiate(name);
     }
 
+    instantiateTemplateFragment(name) {
+        return this._templates.instantiateFragment(name);
+    }
+
     // Private
 
     _createTermHeadword(headword, headwordIndex, pronunciations) {
diff --git a/ext/js/pages/settings/anki-controller.js b/ext/js/pages/settings/anki-controller.js
index daf09143..d03fa535 100644
--- a/ext/js/pages/settings/anki-controller.js
+++ b/ext/js/pages/settings/anki-controller.js
@@ -71,6 +71,12 @@ class AnkiController {
             input.addEventListener('change', this._onAnkiCardPrimaryTypeRadioChange.bind(this), false);
         }
 
+        const testAnkiNoteViewerButtons = document.querySelectorAll('.test-anki-note-viewer-button');
+        const onTestAnkiNoteViewerButtonClick = this._onTestAnkiNoteViewerButtonClick.bind(this);
+        for (const button of testAnkiNoteViewerButtons) {
+            button.addEventListener('click', onTestAnkiNoteViewerButtonClick, false);
+        }
+
         document.querySelector('#anki-error-log').addEventListener('click', this._onAnkiErrorLogLinkClick.bind(this));
 
         const options = await this._settingsController.getOptions();
@@ -192,6 +198,10 @@ class AnkiController {
         console.log({error: this._ankiError});
     }
 
+    _onTestAnkiNoteViewerButtonClick(e) {
+        this._testAnkiNoteViewerSafe(e.currentTarget.dataset.mode);
+    }
+
     _setAnkiCardPrimaryType(ankiCardType, ankiCardMenu) {
         if (this._ankiCardPrimary === null) { return; }
         this._ankiCardPrimary.dataset.ankiCardType = ankiCardType;
@@ -336,6 +346,54 @@ class AnkiController {
         const stringComparer = this._stringComparer;
         array.sort((a, b) => stringComparer.compare(a, b));
     }
+
+    async _testAnkiNoteViewerSafe(mode) {
+        this._setAnkiNoteViewerStatus(false, null);
+        try {
+            await this._testAnkiNoteViewer(mode);
+        } catch (e) {
+            this._setAnkiNoteViewerStatus(true, e);
+            return;
+        }
+        this._setAnkiNoteViewerStatus(true, null);
+    }
+
+    async _testAnkiNoteViewer(mode) {
+        const queries = [
+            '"よむ" deck:current',
+            '"よむ"',
+            'deck:current',
+            ''
+        ];
+
+        let noteId = null;
+        for (const query of queries) {
+            const notes = await yomichan.api.findAnkiNotes(query);
+            if (notes.length > 0) {
+                noteId = notes[0];
+                break;
+            }
+        }
+
+        if (noteId === null) {
+            throw new Error('Could not find a note to test with');
+        }
+
+        await yomichan.api.noteView(noteId, mode, false);
+    }
+
+    _setAnkiNoteViewerStatus(visible, error) {
+        const node = document.querySelector('#test-anki-note-viewer-results');
+        if (visible) {
+            const success = (error === null);
+            node.textContent = success ? 'Success!' : error.message;
+            node.dataset.success = `${success}`;
+        } else {
+            node.textContent = '';
+            delete node.dataset.success;
+        }
+        node.hidden = !visible;
+    }
 }
 
 class AnkiCardController {