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

2 files changed, 42 insertions, 20 deletions

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) {