add UI widget for allowed html tags option

todo: test with live app
This commit is contained in:
maphew 2024-11-17 16:39:03 -07:00
parent d08f09ae3b
commit 91b48095e4
2 changed files with 84 additions and 1 deletions

View File

@ -0,0 +1,76 @@
import OptionsWidget from "../options_widget.js";
import { t } from "../../../../services/i18n.js";
const TPL = `
<div class="options-section">
<h4>${t("options.html_import_tags.title")}</h4>
<p class="form-text">${t("options.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>
<div class="form-text">
${t("options.html_import_tags.help")}
</div>
</div>
<div>
<button class="btn btn-sm btn-secondary reset-to-default">
${t("options.html_import_tags.reset_button")}
</button>
</div>
</div>`;
export default class HtmlImportTagsOptions extends OptionsWidget {
doRender() {
this.$widget = $(TPL);
this.contentSized();
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());
}
loadTags() {
try {
const tags = JSON.parse(this.getOption('allowedHtmlTags'));
this.$allowedTags.val(tags.join('\\n'));
}
catch (e) {
console.error('Could not load HTML tags:', e);
}
}
async saveTags() {
const tagsText = this.$allowedTags.val();
const tags = tagsText.split('\\n')
.map(tag => tag.trim())
.filter(tag => tag.length > 0);
await this.updateOption('allowedHtmlTags', JSON.stringify(tags));
}
resetToDefault() {
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'
];
this.$allowedTags.val(defaultTags.join('\\n'));
this.saveTags();
}
}

View File

@ -171,7 +171,14 @@
"codeImportedAsCode": "Import recognized code files (e.g. <code>.json</code>) as code notes if it's unclear from metadata",
"replaceUnderscoresWithSpaces": "Replace underscores with spaces in imported note names",
"import": "Import",
"failed": "Import failed: {{message}}."
"failed": "Import failed: {{message}}.",
"html_import_tags": {
"title": "HTML Import Tags",
"description": "Configure which HTML tags are preserved when importing notes.",
"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"
}
},
"include_note": {
"dialog_title": "Include note",