diff --git a/src/open_producten/conf/base.py b/src/open_producten/conf/base.py index b6c8682..c288386 100644 --- a/src/open_producten/conf/base.py +++ b/src/open_producten/conf/base.py @@ -102,6 +102,6 @@ "bold italic backcolor | alignleft aligncenter " "alignright alignjustify | bullist numlist outdent indent | " "removeformat", - "skin": "oxide-dark", - "content_css": "dark", } + +TINYMCE_EXTRA_MEDIA = {"js": ["initTinymce.js"]} diff --git a/src/open_producten/static/initTinymce.js b/src/open_producten/static/initTinymce.js new file mode 100644 index 0000000..281fc01 --- /dev/null +++ b/src/open_producten/static/initTinymce.js @@ -0,0 +1,44 @@ +// Sets the dar/light mode based on the browser. +// Copied minimal needed stuff from open-forms + +'use strict'; +{ + function initTinyMCE(el) { + if (el.closest('.empty-form') === null) { + // Don't do empty inlines + var mce_conf = JSON.parse(el.dataset.mceConf); + const useDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; + + mce_conf = { + ...mce_conf, + ...{ + skin: useDarkMode ? 'oxide-dark' : 'oxide', + content_css: useDarkMode ? 'dark' : 'default', + }, + }; + + const id = el.id; + + if (!tinyMCE.get(id)) { + tinyMCE.init(mce_conf); + } + } + } + + function ready(fn) { + if (document.readyState !== 'loading') { + fn(); + } else { + document.addEventListener('DOMContentLoaded', fn); + } + } + + function initializeTinyMCE(element, formsetName) { + Array.from(element.querySelectorAll('.tinymce')).forEach(area => initTinyMCE(area)); + } + + ready(function () { + // initialize the TinyMCE editors on load + initializeTinyMCE(document); + }); +}