Skip to content

Commit

Permalink
🚧 [#1924] Dark scheme for django-tinymce
Browse files Browse the repository at this point in the history
  • Loading branch information
SilviaAmAm committed Oct 19, 2022
1 parent ca44846 commit 3243bb1
Show file tree
Hide file tree
Showing 2 changed files with 92 additions and 1 deletion.
2 changes: 1 addition & 1 deletion src/openforms/js/index.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {Formio} from 'react-formio';

import './initTinymce';
import './components';
import OpenForms from './formio_module';

Expand Down
91 changes: 91 additions & 0 deletions src/openforms/js/initTinymce.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
// Taken from https://github.com/jazzband/django-tinymce/blob/master/tinymce/static/django_tinymce/init_tinymce.js
// Updated to add dark theme detection (L35-44)

'use strict';

{
function initTinyMCE(el) {
if (el.closest('.empty-form') === null) { // Don't do empty inlines
var mce_conf = JSON.parse(el.dataset.mceConf);

// There is no way to pass a JavaScript function as an option
// because all options are serialized as JSON.
const fns = [
'color_picker_callback',
'file_browser_callback',
'file_picker_callback',
'images_dataimg_filter',
'images_upload_handler',
'paste_postprocess',
'paste_preprocess',
'setup',
'urlconverter_callback',
];
fns.forEach((fn_name) => {
if (typeof mce_conf[fn_name] != 'undefined') {
if (mce_conf[fn_name].includes('(')) {
mce_conf[fn_name] = eval('(' + mce_conf[fn_name] + ')');
}
else {
mce_conf[fn_name] = window[mce_conf[fn_name]];
}
}
});

// TODO Django 4.2: use explicit theme names rather than the media query approach:
// https://github.com/django/django/blob/main/django/contrib/admin/static/admin/css/dark_mode.css#L36
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 ('elements' in mce_conf && mce_conf['mode'] == 'exact') {
mce_conf['elements'] = id;
}
if (el.dataset.mceGzConf) {
tinyMCE_GZ.init(JSON.parse(el.dataset.mceGzConf));
}
if (!tinyMCE.get(id)) {
tinyMCE.init(mce_conf);
}
}
}

// Call function fn when the DOM is loaded and ready. If it is already
// loaded, call the function now.
// https://youmightnotneedjquery.com/#ready
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);

// initialize the TinyMCE editor after adding an inline in the django admin context.
if (typeof(django) !== 'undefined' && typeof(django.jQuery) !== 'undefined') {
django.jQuery(document).on('formset:added', (event, $row, formsetName) => {
if (event.detail && event.detail.formsetName) {
// Django >= 4.1
initializeTinyMCE(event.target);
} else {
// Django < 4.1, use $row
initializeTinyMCE($row.get(0));
}
});
}
});
}

0 comments on commit 3243bb1

Please sign in to comment.