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

Also assigns a value of null when using the default value

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

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;
+    await ankiTemplatesUpdateValue();
-    if (typeof templates !== 'string') { templates = profileOptionsGetDefaultFieldTemplates(); }
-
-    $('#field-templates').val(templates);
-
-    onAnkiTemplatesValidateCompile();
     await onAnkiOptionsChanged(options);
     await onDictionaryOptionsChanged(options);
 

ext/bg/settings.html

@@ -754,7 +754,9 @@
                                 engine. Advanced users can modify these templates for ultimate control of what information gets included in
                                 their Anki cards. If you encounter problems with your changes, you can always reset to the default template settings.
                             </p>
-                            <textarea autocomplete="off" spellcheck="false" wrap="soft" class="form-control" rows="10" id="field-templates"></textarea>
+                            <div class="ignore-form-changes">
+                                <textarea autocomplete="off" spellcheck="false" wrap="soft" class="form-control" rows="10" id="field-templates"></textarea>
+                            </div>
                             <div>
                                 <button class="btn btn-danger" id="field-templates-reset">Reset Templates</button>
                             </div>