Update anki-templates.js to control the value of fieldTemplates

Also assigns a value of null when using the default value

2 files changed, 32 insertions, 8 deletions

diff --git a/ext/bg/js/settings/anki-templates.js b/ext/bg/js/settings/anki-templates.js
index 0e6e3cbd..281383a7 100644
--- a/ext/bg/js/settings/anki-templates.js
+++ b/ext/bg/js/settings/anki-templates.js
@@ -42,10 +42,22 @@ function ankiTemplatesInitialize() {
         node.addEventListener('click', onAnkiTemplateMarkerClicked, false);
     }
 
-    $('#field-templates').on('change', (e) => onAnkiTemplatesValidateCompile(e));
+    $('#field-templates').on('change', (e) => onAnkiFieldTemplatesChanged(e));
     $('#field-template-render').on('click', (e) => onAnkiTemplateRender(e));
     $('#field-templates-reset').on('click', (e) => onAnkiFieldTemplatesReset(e));
     $('#field-templates-reset-confirm').on('click', (e) => onAnkiFieldTemplatesResetConfirm(e));
+
+    ankiTemplatesUpdateValue();
+}
+
+async function ankiTemplatesUpdateValue() {
+    const optionsContext = getOptionsContext();
+    const options = await apiOptionsGet(optionsContext);
+    let templates = options.anki.fieldTemplates;
+    if (typeof templates !== 'string') { templates = profileOptionsGetDefaultFieldTemplates(); }
+    $('#field-templates').val(templates);
+
+    onAnkiTemplatesValidateCompile();
 }
 
 const ankiTemplatesValidateGetDefinition = (() => {
@@ -91,6 +103,24 @@ async function ankiTemplatesValidate(infoNode, field, mode, showSuccessResult, i
     }
 }
 
+async function onAnkiFieldTemplatesChanged(e) {
+    // Get value
+    let templates = e.currentTarget.value;
+    if (templates === profileOptionsGetDefaultFieldTemplates()) {
+        // Default
+        templates = null;
+    }
+
+    // Overwrite
+    const optionsContext = getOptionsContext();
+    const options = await getOptionsMutable(optionsContext);
+    options.anki.fieldTemplates = templates;
+    await settingsSaveOptions();
+
+    // Compile
+    onAnkiTemplatesValidateCompile();
+}
+
 function onAnkiTemplatesValidateCompile() {
     const infoNode = document.querySelector('#field-template-compile-result');
     ankiTemplatesValidate(infoNode, '{expression}', 'term-kanji', false, true);
diff --git a/ext/bg/js/settings/main.js b/ext/bg/js/settings/main.js
index c0b2deb6..3c7d6fce 100644
--- a/ext/bg/js/settings/main.js
+++ b/ext/bg/js/settings/main.js
@@ -80,7 +80,6 @@ async function formRead(options) {
     options.anki.server = $('#interface-server').val();
     options.anki.screenshot.format = $('#screenshot-format').val();
     options.anki.screenshot.quality = parseInt($('#screenshot-quality').val(), 10);
-    options.anki.fieldTemplates = $('#field-templates').val();
 
     if (optionsAnkiEnableOld && !ankiErrorShown()) {
         options.anki.terms.deck = $('#anki-terms-deck').val();
@@ -146,12 +145,7 @@ async function formWrite(options) {
     $('#screenshot-format').val(options.anki.screenshot.format);
     $('#screenshot-quality').val(options.anki.screenshot.quality);
 
-    let templates = options.anki.fieldTemplates;
-    if (typeof templates !== 'string') { templates = profileOptionsGetDefaultFieldTemplates(); }
-
-    $('#field-templates').val(templates);
-
-    onAnkiTemplatesValidateCompile();
+    await ankiTemplatesUpdateValue();
     await onAnkiOptionsChanged(options);
     await onDictionaryOptionsChanged(options);