make options UI properly read from translations file

Bugs remaining:
- extra whitespace under heading
- existing list is filled with `\n` instead of delimiters
- [reset to default] triggers
  "500 PUT options. Option 'allowedHtmlTags' is not allowed to be changed"

src/public/app/widgets/type_widgets/content_widget.js

@@ -25,6 +25,7 @@ import NoteErasureTimeoutOptions from "./options/other/note_erasure_timeout.js";
 import RevisionsSnapshotIntervalOptions from "./options/other/revisions_snapshot_interval.js";
 import RevisionSnapshotsLimitOptions from "./options/other/revision_snapshots_limit.js";
 import NetworkConnectionsOptions from "./options/other/network_connections.js";
+import HtmlImportTagsOptions from "./options/other/html_import_tags.js";
 import AdvancedSyncOptions from "./options/advanced/sync.js";
 import DatabaseIntegrityCheckOptions from "./options/advanced/database_integrity_check.js";
 import ConsistencyChecksOptions from "./options/advanced/consistency_checks.js";
@@ -94,7 +95,8 @@ const CONTENT_WIDGETS = {
         AttachmentErasureTimeoutOptions,
         RevisionsSnapshotIntervalOptions,
         RevisionSnapshotsLimitOptions,
-        NetworkConnectionsOptions
+        NetworkConnectionsOptions,
+        HtmlImportTagsOptions
     ],
     _optionsAdvanced: [
         DatabaseIntegrityCheckOptions,

src/public/app/widgets/type_widgets/options/other/html_import_tags.js

@@ -3,26 +3,39 @@ import { t } from "../../../../services/i18n.js";
 
 const TPL = `
 <div class="options-section">
-    <h4>${t("options.html_import_tags.title")}</h4>
+    <h4>${t("import.html_import_tags.title")}</h4>
     
-    <p class="form-text">${t("options.html_import_tags.description")}</p>
+    <p class="form-text">${t("import.html_import_tags.description")}</p>
     
     <div class="mb-3">
         <textarea class="allowed-html-tags form-control" style="height: 150px; font-family: monospace;" 
-                  placeholder="${t("options.html_import_tags.placeholder")}"></textarea>
+                  placeholder="${t("import.html_import_tags.placeholder")}"></textarea>
         
         <div class="form-text">
-            ${t("options.html_import_tags.help")}
+            ${t("import.html_import_tags.help")}
         </div>
     </div>
     
     <div>
         <button class="btn btn-sm btn-secondary reset-to-default">
-            ${t("options.html_import_tags.reset_button")}
+            ${t("import.html_import_tags.reset_button")}
         </button>
     </div>
 </div>`;
 
+const defaultTags = [
+    'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'p', 'a', 'ul', 'ol',
+    'li', 'b', 'i', 'strong', 'em', 'strike', 's', 'del', 'abbr', 'code', 'hr', 'br', 'div',
+    'table', 'thead', 'caption', 'tbody', 'tfoot', 'tr', 'th', 'td', 'pre', 'section', 'img',
+    'figure', 'figcaption', 'span', 'label', 'input', 'details', 'summary', 'address', 'aside', 'footer',
+    'header', 'hgroup', 'main', 'nav', 'dl', 'dt', 'menu', 'bdi', 'bdo', 'dfn', 'kbd', 'mark', 'q', 'time',
+    'var', 'wbr', 'area', 'map', 'track', 'video', 'audio', 'picture', 'del', 'ins',
+    'en-media',
+    'acronym', 'article', 'big', 'button', 'cite', 'col', 'colgroup', 'data', 'dd',
+    'fieldset', 'form', 'legend', 'meter', 'noscript', 'option', 'progress', 'rp',
+    'samp', 'small', 'sub', 'sup', 'template', 'textarea', 'tt'
+];
+
 export default class HtmlImportTagsOptions extends OptionsWidget {
     doRender() {
         this.$widget = $(TPL);
@@ -31,46 +44,41 @@ export default class HtmlImportTagsOptions extends OptionsWidget {
         this.$allowedTags = this.$widget.find('.allowed-html-tags');
         this.$resetButton = this.$widget.find('.reset-to-default');
         
-        this.loadTags();
-        
         this.$allowedTags.on('change', () => this.saveTags());
         this.$resetButton.on('click', () => this.resetToDefault());
+        
+        // Load initial tags
+        this.refresh();
     }
     
-    loadTags() {
+    async optionsLoaded(options) {
         try {
-            const tags = JSON.parse(this.getOption('allowedHtmlTags'));
+            if (options.allowedHtmlTags) {
-            this.$allowedTags.val(tags.join('\\n'));
+                const tags = JSON.parse(options.allowedHtmlTags);
+                this.$allowedTags.val(tags.join('\\n'));
+            } else {
+                // If no tags are set, show the defaults
+                this.$allowedTags.val(defaultTags.join('\\n'));
+            }
         }
         catch (e) {
             console.error('Could not load HTML tags:', e);
+            // On error, show the defaults
+            this.$allowedTags.val(defaultTags.join('\\n'));
         }
     }
     
     async saveTags() {
         const tagsText = this.$allowedTags.val();
-        const tags = tagsText.split('\\n')
+        const tags = tagsText.split(/[,\\s]+/) // Split on commas, spaces, or newlines
             .map(tag => tag.trim())
             .filter(tag => tag.length > 0);
             
         await this.updateOption('allowedHtmlTags', JSON.stringify(tags));
     }
     
-    resetToDefault() {
+    async resetToDefault() {
-        const defaultTags = [
+        this.$allowedTags.val(defaultTags.join('\\n')); // Use actual newlines
-            'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'p', 'a', 'ul', 'ol',
+        await this.saveTags();
-            'li', 'b', 'i', 'strong', 'em', 'strike', 's', 'del', 'abbr', 'code', 'hr', 'br', 'div',
-            'table', 'thead', 'caption', 'tbody', 'tfoot', 'tr', 'th', 'td', 'pre', 'section', 'img',
-            'figure', 'figcaption', 'span', 'label', 'input', 'details', 'summary', 'address', 'aside', 'footer',
-            'header', 'hgroup', 'main', 'nav', 'dl', 'dt', 'menu', 'bdi', 'bdo', 'dfn', 'kbd', 'mark', 'q', 'time',
-            'var', 'wbr', 'area', 'map', 'track', 'video', 'audio', 'picture', 'del', 'ins',
-            'en-media',
-            'acronym', 'article', 'big', 'button', 'cite', 'col', 'colgroup', 'data', 'dd',
-            'fieldset', 'form', 'legend', 'meter', 'noscript', 'option', 'progress', 'rp',
-            'samp', 'small', 'sub', 'sup', 'template', 'textarea', 'tt'
-        ];
-        
-        this.$allowedTags.val(defaultTags.join('\\n'));
-        this.saveTags();
     }
 }

src/public/translations/en/translation.json

@@ -174,10 +174,10 @@
     "failed": "Import failed: {{message}}.",
     "html_import_tags": {
       "title": "HTML Import Tags",
-      "description": "Configure which HTML tags are preserved when importing notes.",
+      "description": "Configure which HTML tags should be preserved when importing notes. Tags not in this list will be removed during import.",
       "placeholder": "Enter HTML tags, one per line",
       "help": "Enter HTML tags to preserve during import. Some tags (like 'script') are always removed for security.",
-      "reset_button": "Reset to Default"
+      "reset_button": "Reset to Default List"
     }
   },
   "include_note": {

src/services/options_init.ts

@@ -136,7 +136,7 @@ const defaultOptions: DefaultOption[] = [
     // Text note configuration
     { name: "textNoteEditorType", value: "ckeditor-balloon", isSynced: true },
 
-    // HTML sanitization configuration
+    // HTML import configuration
     { name: "allowedHtmlTags", value: JSON.stringify([
         'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'p', 'a', 'ul', 'ol',
         'li', 'b', 'i', 'strong', 'em', 'strike', 's', 'del', 'abbr', 'code', 'hr', 'br', 'div',
@@ -148,7 +148,7 @@ const defaultOptions: DefaultOption[] = [
         'acronym', 'article', 'big', 'button', 'cite', 'col', 'colgroup', 'data', 'dd',
         'fieldset', 'form', 'legend', 'meter', 'noscript', 'option', 'progress', 'rp',
         'samp', 'small', 'sub', 'sup', 'template', 'textarea', 'tt'
-    ]), isSynced: true }
+    ]), isSynced: true },
 ];
 
 /**