DisplayAnki (#1791)

* Remove anki functionality from display

* Rename function

* Display API updates

* Use DisplayAnki

* TODO

4 files changed, 621 insertions, 489 deletions

diff --git a/ext/js/display/display-anki.js b/ext/js/display/display-anki.js
new file mode 100644
index 00000000..8dd94214
--- /dev/null
+++ b/ext/js/display/display-anki.js
@@ -0,0 +1,582 @@
+/*
+ * Copyright (C) 2021  Yomichan Authors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+/* global
+ * AnkiNoteBuilder
+ * AnkiUtil
+ * DisplayNotification
+ */
+
+class DisplayAnki {
+    constructor(display) {
+        this._display = display;
+        this._ankiFieldTemplates = null;
+        this._ankiFieldTemplatesDefault = null;
+        this._ankiNoteBuilder = new AnkiNoteBuilder();
+        this._ankiNoteNotification = null;
+        this._ankiNoteNotificationEventListeners = null;
+        this._ankiTagNotification = null;
+        this._updateAdderButtonsPromise = Promise.resolve();
+        this._updateAdderButtonsToken = null;
+        this._eventListeners = new EventListenerCollection();
+        this._checkForDuplicates = false;
+        this._suspendNewCards = false;
+        this._compactTags = false;
+        this._resultOutputMode = 'split';
+        this._glossaryLayoutMode = 'default';
+        this._displayTags = 'never';
+        this._duplicateScope = 'collection';
+        this._screenshotFormat = 'png';
+        this._screenshotQuality = 100;
+        this._noteTags = [];
+        this._modeOptions = new Map();
+        this._onShowTagsBind = this._onShowTags.bind(this);
+        this._onNoteAddBind = this._onNoteAdd.bind(this);
+        this._onNoteViewBind = this._onNoteView.bind(this);
+    }
+
+    prepare() {
+        this._display.hotkeyHandler.registerActions([
+            ['addNoteKanji',      () => { this._tryAddAnkiNoteForSelectedEntry('kanji'); }],
+            ['addNoteTermKanji',  () => { this._tryAddAnkiNoteForSelectedEntry('term-kanji'); }],
+            ['addNoteTermKana',   () => { this._tryAddAnkiNoteForSelectedEntry('term-kana'); }],
+            ['viewNote',          () => { this._tryViewAnkiNoteForSelectedEntry(); }]
+        ]);
+        this._display.on('optionsUpdated', this._onOptionsUpdated.bind(this));
+    }
+
+    cleanupEntries() {
+        this._updateAdderButtonsToken = null;
+        this._hideAnkiNoteErrors(false);
+    }
+
+    setupEntry(entry) {
+        this._addMultipleEventListeners(entry, '.action-view-tags', 'click', this._onShowTagsBind);
+        this._addMultipleEventListeners(entry, '.action-add-note', 'click', this._onNoteAddBind);
+        this._addMultipleEventListeners(entry, '.action-view-note', 'click', this._onNoteViewBind);
+    }
+
+    setupEntriesComplete(isTerms, dictionaryEntries) { // TODO : Don't pass (isTerms, dictionaryEntries)
+        this._updateAdderButtons(isTerms, dictionaryEntries);
+    }
+
+    async getLogData(dictionaryEntry) {
+        const result = {};
+
+        // Anki note data
+        let ankiNoteData;
+        let ankiNoteDataException;
+        try {
+            const context = this._getNoteContext();
+            ankiNoteData = await this._ankiNoteBuilder.getRenderingData({
+                dictionaryEntry,
+                mode: 'test',
+                context,
+                resultOutputMode: this.resultOutputMode,
+                glossaryLayoutMode: this._glossaryLayoutMode,
+                compactTags: this._compactTags,
+                injectedMedia: null,
+                marker: 'test'
+            });
+        } catch (e) {
+            ankiNoteDataException = e;
+        }
+        result.ankiNoteData = ankiNoteData;
+        if (typeof ankiNoteDataException !== 'undefined') {
+            result.ankiNoteDataException = ankiNoteDataException;
+        }
+
+        // Anki notes
+        const ankiNotes = [];
+        const modes = this._getModes(dictionaryEntry.type === 'term');
+        for (const mode of modes) {
+            let note;
+            let errors;
+            try {
+                const noteContext = this._getNoteContext();
+                ({note: note, errors} = await this._createNote(dictionaryEntry, mode, noteContext, false));
+            } catch (e) {
+                errors = [e];
+            }
+            const entry = {mode, note};
+            if (Array.isArray(errors) && errors.length > 0) {
+                entry.errors = errors;
+            }
+            ankiNotes.push(entry);
+        }
+        result.ankiNotes = ankiNotes;
+
+        return result;
+    }
+
+    // Private
+
+    _onOptionsUpdated({options}) {
+        const {
+            general: {resultOutputMode, glossaryLayoutMode, compactTags},
+            anki: {tags, duplicateScope, suspendNewCards, checkForDuplicates, displayTags, kanji, terms, screenshot: {format, quality}}
+        } = options;
+
+        this._checkForDuplicates = checkForDuplicates;
+        this._suspendNewCards = suspendNewCards;
+        this._compactTags = compactTags;
+        this._resultOutputMode = resultOutputMode;
+        this._glossaryLayoutMode = glossaryLayoutMode;
+        this._displayTags = displayTags;
+        this._duplicateScope = duplicateScope;
+        this._screenshotFormat = format;
+        this._screenshotQuality = quality;
+        this._noteTags = [...tags];
+        this._modeOptions.clear();
+        this._modeOptions.set('kanji', kanji);
+        this._modeOptions.set('term-kanji', terms);
+        this._modeOptions.set('term-kana', terms);
+
+        this._updateAnkiFieldTemplates(options);
+    }
+
+    _onNoteAdd(e) {
+        e.preventDefault();
+        const node = e.currentTarget;
+        const index = this._display.getElementDictionaryEntryIndex(node);
+        this._addAnkiNote(index, node.dataset.mode);
+    }
+
+    _onShowTags(e) {
+        e.preventDefault();
+        const tags = e.currentTarget.title;
+        this._showAnkiTagsNotification(tags);
+    }
+
+    _onNoteView(e) {
+        e.preventDefault();
+        const link = e.currentTarget;
+        yomichan.api.noteView(link.dataset.noteId);
+    }
+
+    _addMultipleEventListeners(container, selector, ...args) {
+        for (const node of container.querySelectorAll(selector)) {
+            this._eventListeners.addEventListener(node, ...args);
+        }
+    }
+
+    _adderButtonFind(index, mode) {
+        const entry = this._getEntry(index);
+        return entry !== null ? entry.querySelector(`.action-add-note[data-mode="${mode}"]`) : null;
+    }
+
+    _tagsIndicatorFind(index) {
+        const entry = this._getEntry(index);
+        return entry !== null ? entry.querySelector('.action-view-tags') : null;
+    }
+
+    _viewerButtonFind(index) {
+        const entry = this._getEntry(index);
+        return entry !== null ? entry.querySelector('.action-view-note') : null;
+    }
+
+    _getEntry(index) {
+        const entries = this._display.dictionaryEntryNodes;
+        return index >= 0 && index < entries.length ? entries[index] : null;
+    }
+
+    _viewerButtonShow(index, noteId) {
+        const viewerButton = this._viewerButtonFind(index);
+        if (viewerButton === null) {
+            return;
+        }
+        viewerButton.disabled = false;
+        viewerButton.hidden = false;
+        viewerButton.dataset.noteId = noteId;
+    }
+
+    _getNoteContext() {
+        const {state} = this._display.history;
+        let {documentTitle, url, sentence} = (isObject(state) ? state : {});
+        if (typeof documentTitle !== 'string') {
+            documentTitle = document.title;
+        }
+        if (typeof url !== 'string') {
+            url = window.location.href;
+        }
+        sentence = this._getValidSentenceData(sentence);
+        return {
+            url,
+            sentence,
+            documentTitle,
+            query: this._display.query,
+            fullQuery: this._display.fullQuery
+        };
+    }
+
+    _getDictionaryEntryDetailsForNote(dictionaryEntry) {
+        const {type} = dictionaryEntry;
+        if (type === 'kanji') {
+            const {character} = dictionaryEntry;
+            return {type, character};
+        }
+
+        const {headwords} = dictionaryEntry;
+        let bestIndex = -1;
+        for (let i = 0, ii = headwords.length; i < ii; ++i) {
+            const {term, reading, sources} = headwords[i];
+            for (const {deinflectedText} of sources) {
+                if (term === deinflectedText) {
+                    bestIndex = i;
+                    i = ii;
+                    break;
+                } else if (reading === deinflectedText && bestIndex < 0) {
+                    bestIndex = i;
+                    break;
+                }
+            }
+        }
+
+        const {term, reading} = headwords[Math.max(0, bestIndex)];
+        return {type, term, reading};
+    }
+
+    async _updateAdderButtons(isTerms, dictionaryEntries) {
+        const token = {};
+        this._updateAdderButtonsToken = token;
+        await this._updateAdderButtonsPromise;
+        if (this._updateAdderButtonsToken !== token) { return; }
+
+        const {promise, resolve} = deferPromise();
+        try {
+            this._updateAdderButtonsPromise = promise;
+
+            const modes = this._getModes(isTerms);
+            let states;
+            try {
+                const noteContext = this._getNoteContext();
+                states = await this._areDictionaryEntriesAddable(
+                    dictionaryEntries,
+                    modes,
+                    noteContext,
+                    this._checkForDuplicates ? null : true,
+                    this._displayTags !== 'never'
+                );
+            } catch (e) {
+                return;
+            }
+
+            if (this._updateAdderButtonsToken !== token) { return; }
+
+            this._updateAdderButtons2(states, modes);
+        } finally {
+            resolve();
+        }
+    }
+
+    _updateAdderButtons2(states, modes) {
+        const displayTags = this._displayTags;
+        for (let i = 0, ii = states.length; i < ii; ++i) {
+            const infos = states[i];
+            let noteId = null;
+            for (let j = 0, jj = infos.length; j < jj; ++j) {
+                const {canAdd, noteIds, noteInfos} = infos[j];
+                const mode = modes[j];
+                const button = this._adderButtonFind(i, mode);
+                if (button === null) {
+                    continue;
+                }
+
+                if (Array.isArray(noteIds) && noteIds.length > 0) {
+                    noteId = noteIds[0];
+                }
+                button.disabled = !canAdd;
+                button.hidden = false;
+
+                if (displayTags !== 'never' && Array.isArray(noteInfos)) {
+                    this._setupTagsIndicator(i, noteInfos);
+                }
+            }
+            if (noteId !== null) {
+                this._viewerButtonShow(i, noteId);
+            }
+        }
+    }
+
+    _setupTagsIndicator(i, noteInfos) {
+        const tagsIndicator = this._tagsIndicatorFind(i);
+        if (tagsIndicator === null) {
+            return;
+        }
+
+        const displayTags = new Set();
+        for (const {tags} of noteInfos) {
+            for (const tag of tags) {
+                displayTags.add(tag);
+            }
+        }
+        if (this._displayTags === 'non-standard') {
+            for (const tag of this._noteTags) {
+                displayTags.delete(tag);
+            }
+        }
+
+        if (displayTags.size > 0) {
+            tagsIndicator.disabled = false;
+            tagsIndicator.hidden = false;
+            tagsIndicator.title = `Card tags: ${[...displayTags].join(', ')}`;
+        }
+    }
+
+    _showAnkiTagsNotification(message) {
+        if (this._ankiTagNotification === null) {
+            const node = this._display.displayGenerator.createEmptyFooterNotification();
+            node.classList.add('click-scannable');
+            this._ankiTagNotification = new DisplayNotification(this._display.notificationContainer, node);
+        }
+
+        this._ankiTagNotification.setContent(message);
+        this._ankiTagNotification.open();
+    }
+
+
+    _tryAddAnkiNoteForSelectedEntry(mode) {
+        const index = this._display.selectedIndex;
+        this._addAnkiNote(index, mode);
+    }
+
+    _tryViewAnkiNoteForSelectedEntry() {
+        const index = this._display.selectedIndex;
+        const button = this._viewerButtonFind(index);
+        if (button !== null && !button.disabled) {
+            yomichan.api.noteView(button.dataset.noteId);
+        }
+    }
+
+    async _addAnkiNote(dictionaryEntryIndex, mode) {
+        const dictionaryEntries = this._display.dictionaryEntries;
+        if (dictionaryEntryIndex < 0 || dictionaryEntryIndex >= dictionaryEntries.length) { return; }
+        const dictionaryEntry = dictionaryEntries[dictionaryEntryIndex];
+
+        const button = this._adderButtonFind(dictionaryEntryIndex, mode);
+        if (button === null || button.disabled) { return; }
+
+        this._hideAnkiNoteErrors(true);
+
+        const allErrors = [];
+        const progressIndicatorVisible = this._display.progressIndicatorVisible;
+        const overrideToken = progressIndicatorVisible.setOverride(true);
+        try {
+            const noteContext = this._getNoteContext();
+            const {note, errors} = await this._createNote(dictionaryEntry, mode, noteContext, true);
+            allErrors.push(...errors);
+
+            let noteId = null;
+            let addNoteOkay = false;
+            try {
+                noteId = await yomichan.api.addAnkiNote(note);
+                addNoteOkay = true;
+            } catch (e) {
+                allErrors.length = 0;
+                allErrors.push(e);
+            }
+
+            if (addNoteOkay) {
+                if (noteId === null) {
+                    allErrors.push(new Error('Note could not be added'));
+                } else {
+                    if (this._suspendNewCards) {
+                        try {
+                            await yomichan.api.suspendAnkiCardsForNote(noteId);
+                        } catch (e) {
+                            allErrors.push(e);
+                        }
+                    }
+                    button.disabled = true;
+                    this._viewerButtonShow(dictionaryEntryIndex, noteId);
+                }
+            }
+        } catch (e) {
+            allErrors.push(e);
+        } finally {
+            progressIndicatorVisible.clearOverride(overrideToken);
+        }
+
+        if (allErrors.length > 0) {
+            this._showAnkiNoteErrors(allErrors);
+        } else {
+            this._hideAnkiNoteErrors(true);
+        }
+    }
+
+    _showAnkiNoteErrors(errors) {
+        if (this._ankiNoteNotificationEventListeners !== null) {
+            this._ankiNoteNotificationEventListeners.removeAllEventListeners();
+        }
+
+        if (this._ankiNoteNotification === null) {
+            const node = this._display.displayGenerator.createEmptyFooterNotification();
+            this._ankiNoteNotification = new DisplayNotification(this._display.notificationContainer, node);
+            this._ankiNoteNotificationEventListeners = new EventListenerCollection();
+        }
+
+        const content = this._display.displayGenerator.createAnkiNoteErrorsNotificationContent(errors);
+        for (const node of content.querySelectorAll('.anki-note-error-log-link')) {
+            this._ankiNoteNotificationEventListeners.addEventListener(node, 'click', () => {
+                console.log({ankiNoteErrors: errors});
+            }, false);
+        }
+
+        this._ankiNoteNotification.setContent(content);
+        this._ankiNoteNotification.open();
+    }
+
+    _hideAnkiNoteErrors(animate) {
+        if (this._ankiNoteNotification === null) { return; }
+        this._ankiNoteNotification.close(animate);
+        this._ankiNoteNotificationEventListeners.removeAllEventListeners();
+    }
+
+    async _updateAnkiFieldTemplates(options) {
+        this._ankiFieldTemplates = await this._getAnkiFieldTemplates(options);
+    }
+
+    async _getAnkiFieldTemplates(options) {
+        let templates = options.anki.fieldTemplates;
+        if (typeof templates === 'string') { return templates; }
+
+        templates = this._ankiFieldTemplatesDefault;
+        if (typeof templates === 'string') { return templates; }
+
+        templates = await yomichan.api.getDefaultAnkiFieldTemplates();
+        this._ankiFieldTemplatesDefault = templates;
+        return templates;
+    }
+
+    async _areDictionaryEntriesAddable(dictionaryEntries, modes, context, forceCanAddValue, fetchAdditionalInfo) {
+        const modeCount = modes.length;
+        const notePromises = [];
+        for (const dictionaryEntry of dictionaryEntries) {
+            for (const mode of modes) {
+                const notePromise = this._createNote(dictionaryEntry, mode, context, false);
+                notePromises.push(notePromise);
+            }
+        }
+        const notes = (await Promise.all(notePromises)).map(({note}) => note);
+
+        let infos;
+        if (forceCanAddValue !== null) {
+            if (!await yomichan.api.isAnkiConnected()) {
+                throw new Error('Anki not connected');
+            }
+            infos = this._getAnkiNoteInfoForceValue(notes, forceCanAddValue);
+        } else {
+            infos = await yomichan.api.getAnkiNoteInfo(notes, fetchAdditionalInfo);
+        }
+
+        const results = [];
+        for (let i = 0, ii = infos.length; i < ii; i += modeCount) {
+            results.push(infos.slice(i, i + modeCount));
+        }
+        return results;
+    }
+
+    _getAnkiNoteInfoForceValue(notes, canAdd) {
+        const results = [];
+        for (const note of notes) {
+            const valid = AnkiUtil.isNoteDataValid(note);
+            results.push({canAdd, valid, noteIds: null});
+        }
+        return results;
+    }
+
+    async _createNote(dictionaryEntry, mode, context, injectMedia) {
+        const modeOptions = this._modeOptions.get(mode);
+        if (typeof modeOptions === 'undefined') { throw new Error(`Unsupported note type: ${mode}`); }
+        const template = this._ankiFieldTemplates;
+        const {deck: deckName, model: modelName} = modeOptions;
+        const fields = Object.entries(modeOptions.fields);
+
+        const errors = [];
+        let injectedMedia = null;
+        if (injectMedia) {
+            let errors2;
+            ({result: injectedMedia, errors: errors2} = await this._injectAnkiNoteMedia(dictionaryEntry, fields));
+            for (const error of errors2) {
+                errors.push(deserializeError(error));
+            }
+        }
+
+        const {note, errors: createNoteErrors} = await this._ankiNoteBuilder.createNote({
+            dictionaryEntry,
+            mode,
+            context,
+            template,
+            deckName,
+            modelName,
+            fields,
+            tags: this._noteTags,
+            checkForDuplicates: this._checkForDuplicates,
+            duplicateScope: this._duplicateScope,
+            resultOutputMode: this.resultOutputMode,
+            glossaryLayoutMode: this._glossaryLayoutMode,
+            compactTags: this._compactTags,
+            injectedMedia,
+            errors
+        });
+        errors.push(...createNoteErrors);
+        return {note, errors};
+    }
+
+    async _injectAnkiNoteMedia(dictionaryEntry, fields) {
+        const timestamp = Date.now();
+
+        const dictionaryEntryDetails = this._getDictionaryEntryDetailsForNote(dictionaryEntry);
+
+        const audioDetails = (
+            dictionaryEntryDetails.type !== 'kanji' && AnkiUtil.fieldsObjectContainsMarker(fields, 'audio') ?
+            this._display.getAnkiNoteMediaAudioDetails(dictionaryEntryDetails.term, dictionaryEntryDetails.reading) :
+            null
+        );
+
+        const {tabId, frameId} = this._display.getContentOrigin();
+        const screenshotDetails = (
+            AnkiUtil.fieldsObjectContainsMarker(fields, 'screenshot') && typeof tabId === 'number' ?
+            {tabId, frameId, format: this._screenshotFormat, quality: this._screenshotQuality} :
+            null
+        );
+
+        const clipboardDetails = {
+            image: AnkiUtil.fieldsObjectContainsMarker(fields, 'clipboard-image'),
+            text: AnkiUtil.fieldsObjectContainsMarker(fields, 'clipboard-text')
+        };
+
+        return await yomichan.api.injectAnkiNoteMedia(
+            timestamp,
+            dictionaryEntryDetails,
+            audioDetails,
+            screenshotDetails,
+            clipboardDetails
+        );
+    }
+
+    _getModes(isTerms) {
+        return isTerms ? ['term-kanji', 'term-kana'] : ['kanji'];
+    }
+
+    _getValidSentenceData(sentence) {
+        let {text, offset} = (isObject(sentence) ? sentence : {});
+        if (typeof text !== 'string') { text = ''; }
+        if (typeof offset !== 'number') { offset = 0; }
+        return {text, offset};
+    }
+}
diff --git a/ext/js/display/display.js b/ext/js/display/display.js
index bb7ced66..8387ae4f 100644
--- a/ext/js/display/display.js
+++ b/ext/js/display/display.js
@@ -16,8 +16,7 @@
  */
 
 /* global
- * AnkiNoteBuilder
- * AnkiUtil
+ * DisplayAnki
  * DisplayAudio
  * DisplayGenerator
  * DisplayHistory
@@ -86,10 +85,6 @@ class Display extends EventDispatcher {
             getSearchContext: this._getSearchContext.bind(this),
             documentUtil: this._documentUtil
         });
-        this._ankiFieldTemplates = null;
-        this._ankiFieldTemplatesDefault = null;
-        this._ankiNoteBuilder = new AnkiNoteBuilder();
-        this._updateAdderButtonsPromise = Promise.resolve();
         this._contentScrollElement = document.querySelector('#content-scroll');
         this._contentScrollBodyElement = document.querySelector('#content-body');
         this._windowScroll = new ScrollElement(this._contentScrollElement);
@@ -111,12 +106,10 @@ class Display extends EventDispatcher {
         this._tagNotification = null;
         this._footerNotificationContainer = document.querySelector('#content-footer');
         this._displayAudio = new DisplayAudio(this);
-        this._ankiNoteNotification = null;
-        this._ankiNoteNotificationEventListeners = null;
-        this._ankiTagNotification = null;
         this._queryPostProcessor = null;
         this._optionToggleHotkeyHandler = new OptionToggleHotkeyHandler(this);
         this._elementOverflowController = new ElementOverflowController();
+        this._displayAnki = new DisplayAnki(this);
 
         this._hotkeyHandler.registerActions([
             ['close',             () => { this._onHotkeyClose(); }],
@@ -126,10 +119,6 @@ class Display extends EventDispatcher {
             ['firstEntry',        () => { this._focusEntry(0, true); }],
             ['historyBackward',   () => { this._sourceTermView(); }],
             ['historyForward',    () => { this._nextTermView(); }],
-            ['addNoteKanji',      () => { this._tryAddAnkiNoteForSelectedEntry('kanji'); }],
-            ['addNoteTermKanji',  () => { this._tryAddAnkiNoteForSelectedEntry('term-kanji'); }],
-            ['addNoteTermKana',   () => { this._tryAddAnkiNoteForSelectedEntry('term-kana'); }],
-            ['viewNote',          () => { this._tryViewAnkiNoteForSelectedEntry(); }],
             ['playAudio',         () => { this._playAudioCurrent(); }],
             ['playAudioFromSource', this._onHotkeyActionPlayAudioFromSource.bind(this)],
             ['copyHostSelection', () => this._copyHostSelection()],
@@ -202,6 +191,22 @@ class Display extends EventDispatcher {
         return this._footerNotificationContainer;
     }
 
+    get selectedIndex() {
+        return this._index;
+    }
+
+    get history() {
+        return this._history;
+    }
+
+    get query() {
+        return this._query;
+    }
+
+    get fullQuery() {
+        return this._fullQuery;
+    }
+
     async prepare() {
         // State setup
         const {documentElement} = document;
@@ -216,6 +221,7 @@ class Display extends EventDispatcher {
         await this._hotkeyHelpController.prepare();
         await this._displayGenerator.prepare();
         this._displayAudio.prepare();
+        this._displayAnki.prepare();
         this._queryParser.prepare();
         this._history.prepare();
         this._optionToggleHotkeyHandler.prepare();
@@ -291,10 +297,8 @@ class Display extends EventDispatcher {
 
     async updateOptions() {
         const options = await yomichan.api.optionsGet(this.getOptionsContext());
-        const templates = await this._getAnkiFieldTemplates(options);
         const {scanning: scanningOptions, sentenceParsing: sentenceParsingOptions} = options;
         this._options = options;
-        this._ankiFieldTemplates = templates;
 
         this._updateHotkeys(options);
         this._updateDocumentOptions(options);
@@ -441,6 +445,17 @@ class Display extends EventDispatcher {
         return await yomichan.crossFrame.invoke(this._parentFrameId, action, params);
     }
 
+    getElementDictionaryEntryIndex(element) {
+        const node = element.closest('.entry');
+        if (node === null) { return -1; }
+        const index = parseInt(node.dataset.index, 10);
+        return Number.isFinite(index) ? index : -1;
+    }
+
+    getAnkiNoteMediaAudioDetails(term, reading) {
+        return this._displayAudio.getAnkiNoteMediaAudioDetails(term, reading);
+    }
+
     // Message handlers
 
     _onDirectMessage(data) {
@@ -530,8 +545,8 @@ class Display extends EventDispatcher {
             this._eventListeners.removeAllEventListeners();
             this._mediaLoader.unloadAll();
             this._displayAudio.cleanupEntries();
+            this._displayAnki.cleanupEntries();
             this._hideTagNotification(false);
-            this._hideAnkiNoteErrors(false);
             this._dictionaryEntries = [];
             this._dictionaryEntryNodes = [];
             this._elementOverflowController.clearElements();
@@ -712,19 +727,6 @@ class Display extends EventDispatcher {
         }
     }
 
-    _onNoteAdd(e) {
-        e.preventDefault();
-        const link = e.currentTarget;
-        const index = this._getClosestDictionaryEntryIndex(link);
-        this._addAnkiNote(index, link.dataset.mode);
-    }
-
-    _onNoteView(e) {
-        e.preventDefault();
-        const link = e.currentTarget;
-        yomichan.api.noteView(link.dataset.noteId);
-    }
-
     _onWheel(e) {
         if (e.altKey) {
             if (e.deltaY !== 0) {
@@ -752,7 +754,7 @@ class Display extends EventDispatcher {
 
     _onDebugLogClick(e) {
         const link = e.currentTarget;
-        const index = this._getClosestDictionaryEntryIndex(link);
+        const index = this.getElementDictionaryEntryIndex(link);
         this._logDictionaryEntryData(index);
     }
 
@@ -810,7 +812,7 @@ class Display extends EventDispatcher {
             this._tagNotification = new DisplayNotification(this._footerNotificationContainer, node);
         }
 
-        const index = this._getClosestDictionaryEntryIndex(tagNode);
+        const index = this.getElementDictionaryEntryIndex(tagNode);
         const dictionaryEntry = (index >= 0 && index < this._dictionaryEntries.length ? this._dictionaryEntries[index] : null);
 
         const content = this._displayGenerator.createTagFooterNotificationDetails(tagNode, dictionaryEntry);
@@ -960,6 +962,7 @@ class Display extends EventDispatcher {
             this._dictionaryEntryNodes.push(entry);
             this._addEntryEventListeners(entry);
             this._displayAudio.setupEntry(entry, i);
+            this._displayAnki.setupEntry(entry, i);
             container.appendChild(entry);
             if (focusEntry === i) {
                 this._focusEntry(i, false);
@@ -977,8 +980,7 @@ class Display extends EventDispatcher {
         }
 
         this._displayAudio.setupEntriesComplete();
-
-        this._updateAdderButtons(token, isTerms, dictionaryEntries);
+        this._displayAnki.setupEntriesComplete(isTerms, dictionaryEntries);
     }
 
     _setContentExtensionUnloaded() {
@@ -1065,104 +1067,6 @@ class Display extends EventDispatcher {
         }
     }
 
-    async _updateAdderButtons(token, isTerms, dictionaryEntries) {
-        await this._updateAdderButtonsPromise;
-        if (this._setContentToken !== token) { return; }
-
-        const {promise, resolve} = deferPromise();
-        try {
-            this._updateAdderButtonsPromise = promise;
-
-            const modes = this._getModes(isTerms);
-            let states;
-            try {
-                const noteContext = this._getNoteContext();
-                const {checkForDuplicates, displayTags} = this._options.anki;
-                states = await this._areDictionaryEntriesAddable(dictionaryEntries, modes, noteContext, checkForDuplicates ? null : true, displayTags !== 'never');
-            } catch (e) {
-                return;
-            }
-
-            if (this._setContentToken !== token) { return; }
-
-            this._updateAdderButtons2(states, modes);
-        } finally {
-            resolve();
-        }
-    }
-
-    _updateAdderButtons2(states, modes) {
-        const {displayTags} = this._options.anki;
-        for (let i = 0, ii = states.length; i < ii; ++i) {
-            const infos = states[i];
-            let noteId = null;
-            for (let j = 0, jj = infos.length; j < jj; ++j) {
-                const {canAdd, noteIds, noteInfos} = infos[j];
-                const mode = modes[j];
-                const button = this._adderButtonFind(i, mode);
-                if (button === null) {
-                    continue;
-                }
-
-                if (Array.isArray(noteIds) && noteIds.length > 0) {
-                    noteId = noteIds[0];
-                }
-                button.disabled = !canAdd;
-                button.hidden = false;
-
-                if (displayTags !== 'never' && Array.isArray(noteInfos)) {
-                    this._setupTagsIndicator(i, noteInfos);
-                }
-            }
-            if (noteId !== null) {
-                this._viewerButtonShow(i, noteId);
-            }
-        }
-    }
-
-    _setupTagsIndicator(i, noteInfos) {
-        const tagsIndicator = this._tagsIndicatorFind(i);
-        if (tagsIndicator === null) {
-            return;
-        }
-
-        const {tags: optionTags, displayTags} = this._options.anki;
-        const noteTags = new Set();
-        for (const {tags} of noteInfos) {
-            for (const tag of tags) {
-                noteTags.add(tag);
-            }
-        }
-        if (displayTags === 'non-standard') {
-            for (const tag of optionTags) {
-                noteTags.delete(tag);
-            }
-        }
-
-        if (noteTags.size > 0) {
-            tagsIndicator.disabled = false;
-            tagsIndicator.hidden = false;
-            tagsIndicator.title = `Card tags: ${[...noteTags].join(', ')}`;
-        }
-    }
-
-    _onShowTags(e) {
-        e.preventDefault();
-        const tags = e.currentTarget.title;
-        this._showAnkiTagsNotification(tags);
-    }
-
-    _showAnkiTagsNotification(message) {
-        if (this._ankiTagNotification === null) {
-            const node = this._displayGenerator.createEmptyFooterNotification();
-            node.classList.add('click-scannable');
-            this._ankiTagNotification = new DisplayNotification(this._footerNotificationContainer, node);
-        }
-
-        this._ankiTagNotification.setContent(message);
-        this._ankiTagNotification.open();
-    }
-
     _entrySetCurrent(index) {
         const entryPre = this._getEntry(this._index);
         if (entryPre !== null) {
@@ -1239,100 +1143,6 @@ class Display extends EventDispatcher {
         }
     }
 
-    _tryAddAnkiNoteForSelectedEntry(mode) {
-        this._addAnkiNote(this._index, mode);
-    }
-
-    _tryViewAnkiNoteForSelectedEntry() {
-        const button = this._viewerButtonFind(this._index);
-        if (button !== null && !button.disabled) {
-            yomichan.api.noteView(button.dataset.noteId);
-        }
-    }
-
-    async _addAnkiNote(dictionaryEntryIndex, mode) {
-        if (dictionaryEntryIndex < 0 || dictionaryEntryIndex >= this._dictionaryEntries.length) { return; }
-        const dictionaryEntry = this._dictionaryEntries[dictionaryEntryIndex];
-
-        const button = this._adderButtonFind(dictionaryEntryIndex, mode);
-        if (button === null || button.disabled) { return; }
-
-        this._hideAnkiNoteErrors(true);
-
-        const allErrors = [];
-        const overrideToken = this._progressIndicatorVisible.setOverride(true);
-        try {
-            const {anki: {suspendNewCards}} = this._options;
-            const noteContext = this._getNoteContext();
-            const {note, errors} = await this._createNote(dictionaryEntry, mode, noteContext, true);
-            allErrors.push(...errors);
-
-            let noteId = null;
-            let addNoteOkay = false;
-            try {
-                noteId = await yomichan.api.addAnkiNote(note);
-                addNoteOkay = true;
-            } catch (e) {
-                allErrors.length = 0;
-                allErrors.push(e);
-            }
-
-            if (addNoteOkay) {
-                if (noteId === null) {
-                    allErrors.push(new Error('Note could not be added'));
-                } else {
-                    if (suspendNewCards) {
-                        try {
-                            await yomichan.api.suspendAnkiCardsForNote(noteId);
-                        } catch (e) {
-                            allErrors.push(e);
-                        }
-                    }
-                    button.disabled = true;
-                    this._viewerButtonShow(dictionaryEntryIndex, noteId);
-                }
-            }
-        } catch (e) {
-            allErrors.push(e);
-        } finally {
-            this._progressIndicatorVisible.clearOverride(overrideToken);
-        }
-
-        if (allErrors.length > 0) {
-            this._showAnkiNoteErrors(allErrors);
-        } else {
-            this._hideAnkiNoteErrors(true);
-        }
-    }
-
-    _showAnkiNoteErrors(errors) {
-        if (this._ankiNoteNotificationEventListeners !== null) {
-            this._ankiNoteNotificationEventListeners.removeAllEventListeners();
-        }
-
-        if (this._ankiNoteNotification === null) {
-            const node = this._displayGenerator.createEmptyFooterNotification();
-            this._ankiNoteNotification = new DisplayNotification(this._footerNotificationContainer, node);
-            this._ankiNoteNotificationEventListeners = new EventListenerCollection();
-        }
-
-        const content = this._displayGenerator.createAnkiNoteErrorsNotificationContent(errors);
-        for (const node of content.querySelectorAll('.anki-note-error-log-link')) {
-            this._ankiNoteNotificationEventListeners.addEventListener(node, 'click', () => {
-                console.log({ankiNoteErrors: errors});
-            }, false);
-        }
-
-        this._ankiNoteNotification.setContent(content);
-        this._ankiNoteNotification.open();
-    }
-
-    _hideAnkiNoteErrors(animate) {
-        if (this._ankiNoteNotification === null) { return; }
-        this._ankiNoteNotification.close(animate);
-        this._ankiNoteNotificationEventListeners.removeAllEventListeners();
-    }
-
     async _playAudioCurrent() {
         await this._displayAudio.playAudio(this._index, 0);
     }
@@ -1342,74 +1152,12 @@ class Display extends EventDispatcher {
         return index >= 0 && index < entries.length ? entries[index] : null;
     }
 
-    _getValidSentenceData(sentence) {
-        let {text, offset} = (isObject(sentence) ? sentence : {});
-        if (typeof text !== 'string') { text = ''; }
-        if (typeof offset !== 'number') { offset = 0; }
-        return {text, offset};
-    }
-
-    _getClosestDictionaryEntryIndex(element) {
-        return this._getClosestIndex(element, '.entry');
-    }
-
-    _getClosestIndex(element, selector) {
-        const node = element.closest(selector);
-        if (node === null) { return -1; }
-        const index = parseInt(node.dataset.index, 10);
-        return Number.isFinite(index) ? index : -1;
-    }
-
-    _adderButtonFind(index, mode) {
-        const entry = this._getEntry(index);
-        return entry !== null ? entry.querySelector(`.action-add-note[data-mode="${mode}"]`) : null;
-    }
-
-    _tagsIndicatorFind(index) {
-        const entry = this._getEntry(index);
-        return entry !== null ? entry.querySelector('.action-view-tags') : null;
-    }
-
-    _viewerButtonFind(index) {
-        const entry = this._getEntry(index);
-        return entry !== null ? entry.querySelector('.action-view-note') : null;
-    }
-
-    _viewerButtonShow(index, noteId) {
-        const viewerButton = this._viewerButtonFind(index);
-        if (viewerButton === null) {
-            return;
-        }
-        viewerButton.disabled = false;
-        viewerButton.hidden = false;
-        viewerButton.dataset.noteId = noteId;
-    }
-
     _getElementTop(element) {
         const elementRect = element.getBoundingClientRect();
         const documentRect = this._contentScrollBodyElement.getBoundingClientRect();
         return elementRect.top - documentRect.top;
     }
 
-    _getNoteContext() {
-        const {state} = this._history;
-        let {documentTitle, url, sentence} = (isObject(state) ? state : {});
-        if (typeof documentTitle !== 'string') {
-            documentTitle = document.title;
-        }
-        if (typeof url !== 'string') {
-            url = window.location.href;
-        }
-        sentence = this._getValidSentenceData(sentence);
-        return {
-            url,
-            sentence,
-            documentTitle,
-            query: this._query,
-            fullQuery: this._fullQuery
-        };
-    }
-
     _historyHasState() {
         return isObject(this._history.state);
     }
@@ -1464,158 +1212,6 @@ class Display extends EventDispatcher {
         yomichan.trigger('closePopups');
     }
 
-    async _getAnkiFieldTemplates(options) {
-        let templates = options.anki.fieldTemplates;
-        if (typeof templates === 'string') { return templates; }
-
-        templates = this._ankiFieldTemplatesDefault;
-        if (typeof templates === 'string') { return templates; }
-
-        templates = await yomichan.api.getDefaultAnkiFieldTemplates();
-        this._ankiFieldTemplatesDefault = templates;
-        return templates;
-    }
-
-    async _areDictionaryEntriesAddable(dictionaryEntries, modes, context, forceCanAddValue, fetchAdditionalInfo) {
-        const modeCount = modes.length;
-        const notePromises = [];
-        for (const dictionaryEntry of dictionaryEntries) {
-            for (const mode of modes) {
-                const notePromise = this._createNote(dictionaryEntry, mode, context, false);
-                notePromises.push(notePromise);
-            }
-        }
-        const notes = (await Promise.all(notePromises)).map(({note}) => note);
-
-        let infos;
-        if (forceCanAddValue !== null) {
-            if (!await yomichan.api.isAnkiConnected()) {
-                throw new Error('Anki not connected');
-            }
-            infos = this._getAnkiNoteInfoForceValue(notes, forceCanAddValue);
-        } else {
-            infos = await yomichan.api.getAnkiNoteInfo(notes, fetchAdditionalInfo);
-        }
-
-        const results = [];
-        for (let i = 0, ii = infos.length; i < ii; i += modeCount) {
-            results.push(infos.slice(i, i + modeCount));
-        }
-        return results;
-    }
-
-    _getAnkiNoteInfoForceValue(notes, canAdd) {
-        const results = [];
-        for (const note of notes) {
-            const valid = AnkiUtil.isNoteDataValid(note);
-            results.push({canAdd, valid, noteIds: null});
-        }
-        return results;
-    }
-
-    async _createNote(dictionaryEntry, mode, context, injectMedia) {
-        const options = this._options;
-        const template = this._ankiFieldTemplates;
-        const {
-            general: {resultOutputMode, glossaryLayoutMode, compactTags},
-            anki: ankiOptions
-        } = options;
-        const {tags, checkForDuplicates, duplicateScope} = ankiOptions;
-        const modeOptions = (mode === 'kanji') ? ankiOptions.kanji : ankiOptions.terms;
-        const {deck: deckName, model: modelName} = modeOptions;
-        const fields = Object.entries(modeOptions.fields);
-
-        const errors = [];
-        let injectedMedia = null;
-        if (injectMedia) {
-            let errors2;
-            ({result: injectedMedia, errors: errors2} = await this._injectAnkiNoteMedia(dictionaryEntry, options, fields));
-            for (const error of errors2) {
-                errors.push(deserializeError(error));
-            }
-        }
-
-        const {note, errors: createNoteErrors} = await this._ankiNoteBuilder.createNote({
-            dictionaryEntry,
-            mode,
-            context,
-            template,
-            deckName,
-            modelName,
-            fields,
-            tags,
-            checkForDuplicates,
-            duplicateScope,
-            resultOutputMode,
-            glossaryLayoutMode,
-            compactTags,
-            injectedMedia,
-            errors
-        });
-        errors.push(...createNoteErrors);
-        return {note, errors};
-    }
-
-    async _injectAnkiNoteMedia(dictionaryEntry, options, fields) {
-        const {anki: {screenshot: {format, quality}}} = options;
-
-        const timestamp = Date.now();
-
-        const dictionaryEntryDetails = this._getDictionaryEntryDetailsForNote(dictionaryEntry);
-
-        const audioDetails = (
-            dictionaryEntryDetails.type !== 'kanji' && AnkiUtil.fieldsObjectContainsMarker(fields, 'audio') ?
-            this._displayAudio.getAnkiNoteMediaAudioDetails(dictionaryEntryDetails.term, dictionaryEntryDetails.reading) :
-            null
-        );
-
-        const screenshotDetails = (
-            AnkiUtil.fieldsObjectContainsMarker(fields, 'screenshot') && typeof this._contentOriginTabId === 'number' ?
-            {tabId: this._contentOriginTabId, frameId: this._contentOriginFrameId, format, quality} :
-            null
-        );
-
-        const clipboardDetails = {
-            image: AnkiUtil.fieldsObjectContainsMarker(fields, 'clipboard-image'),
-            text: AnkiUtil.fieldsObjectContainsMarker(fields, 'clipboard-text')
-        };
-
-        return await yomichan.api.injectAnkiNoteMedia(
-            timestamp,
-            dictionaryEntryDetails,
-            audioDetails,
-            screenshotDetails,
-            clipboardDetails
-        );
-    }
-
-    _getDictionaryEntryDetailsForNote(dictionaryEntry) {
-        const {type} = dictionaryEntry;
-        if (type === 'kanji') {
-            const {character} = dictionaryEntry;
-            return {type, character};
-        }
-
-        const {headwords} = dictionaryEntry;
-        let bestIndex = -1;
-        for (let i = 0, ii = headwords.length; i < ii; ++i) {
-            const {term, reading, sources} = headwords[i];
-            for (const {deinflectedText} of sources) {
-                if (term === deinflectedText) {
-                    bestIndex = i;
-                    i = ii;
-                    break;
-                } else if (reading === deinflectedText && bestIndex < 0) {
-                    bestIndex = i;
-                    break;
-                }
-            }
-        }
-
-        const {term, reading} = headwords[Math.max(0, bestIndex)];
-        return {type, term, reading};
-    }
-
     async _setOptionsContextIfDifferent(optionsContext) {
         if (deepEqual(this._optionsContext, optionsContext)) { return; }
         await this.setOptionsContext(optionsContext);
@@ -1755,9 +1351,6 @@ class Display extends EventDispatcher {
 
     _addEntryEventListeners(entry) {
         this._eventListeners.addEventListener(entry, 'click', this._onEntryClick.bind(this));
-        this._addMultipleEventListeners(entry, '.action-view-tags', 'click', this._onShowTags.bind(this));
-        this._addMultipleEventListeners(entry, '.action-add-note', 'click', this._onNoteAdd.bind(this));
-        this._addMultipleEventListeners(entry, '.action-view-note', 'click', this._onNoteView.bind(this));
         this._addMultipleEventListeners(entry, '.headword-kanji-link', 'click', this._onKanjiLookup.bind(this));
         this._addMultipleEventListeners(entry, '.debug-log-link', 'click', this._onDebugLogClick.bind(this));
         this._addMultipleEventListeners(entry, '.tag-label', 'click', this._onTagClick.bind(this));
@@ -1924,58 +1517,13 @@ class Display extends EventDispatcher {
         return typeof queryPostProcessor === 'function' ? queryPostProcessor(query) : query;
     }
 
-    _getModes(isTerms) {
-        return isTerms ? ['term-kanji', 'term-kana'] : ['kanji'];
-    }
-
     async _logDictionaryEntryData(index) {
         if (index < 0 || index >= this._dictionaryEntries.length) { return; }
         const dictionaryEntry = this._dictionaryEntries[index];
         const result = {dictionaryEntry};
 
-        // Anki note data
-        let ankiNoteData;
-        let ankiNoteDataException;
-        try {
-            const context = this._getNoteContext();
-            const {general: {resultOutputMode, glossaryLayoutMode, compactTags}} = this._options;
-            ankiNoteData = await this._ankiNoteBuilder.getRenderingData({
-                dictionaryEntry,
-                mode: 'test',
-                context,
-                resultOutputMode,
-                glossaryLayoutMode,
-                compactTags,
-                injectedMedia: null,
-                marker: 'test'
-            });
-        } catch (e) {
-            ankiNoteDataException = e;
-        }
-        result.ankiNoteData = ankiNoteData;
-        if (typeof ankiNoteDataException !== 'undefined') {
-            result.ankiNoteDataException = ankiNoteDataException;
-        }
-
-        // Anki notes
-        const ankiNotes = [];
-        const modes = this._getModes(dictionaryEntry.type === 'term');
-        for (const mode of modes) {
-            let note;
-            let errors;
-            try {
-                const noteContext = this._getNoteContext();
-                ({note: note, errors} = await this._createNote(dictionaryEntry, mode, noteContext, false));
-            } catch (e) {
-                errors = [e];
-            }
-            const entry = {mode, note};
-            if (Array.isArray(errors) && errors.length > 0) {
-                entry.errors = errors;
-            }
-            ankiNotes.push(entry);
-        }
-        result.ankiNotes = ankiNotes;
+        const result2 = await this._displayAnki.getLogData(dictionaryEntry);
+        Object.assign(result, result2);
 
         console.log(result);
     }
diff --git a/ext/popup.html b/ext/popup.html
index 3018f8bf..ae5685f5 100644
--- a/ext/popup.html
+++ b/ext/popup.html
@@ -100,6 +100,7 @@
 <script src="/js/data/anki-note-builder.js"></script>
 <script src="/js/data/anki-util.js"></script>
 <script src="/js/display/display.js"></script>
+<script src="/js/display/display-anki.js"></script>
 <script src="/js/display/display-audio.js"></script>
 <script src="/js/display/display-generator.js"></script>
 <script src="/js/display/display-history.js"></script>
diff --git a/ext/search.html b/ext/search.html
index 2e25620e..44d3c680 100644
--- a/ext/search.html
+++ b/ext/search.html
@@ -86,6 +86,7 @@
 <script src="/js/data/anki-note-builder.js"></script>
 <script src="/js/data/anki-util.js"></script>
 <script src="/js/display/display.js"></script>
+<script src="/js/display/display-anki.js"></script>
 <script src="/js/display/display-audio.js"></script>
 <script src="/js/display/display-generator.js"></script>
 <script src="/js/display/display-history.js"></script>