[5.0] Add basic support for conditional dark mode themes in our editors

New language relevant PR in upstream repo: https://github.com/joomla/joomla-cms/pull/42322 Here are the upstream changes:

Click to expand the diff!

```diff diff --git a/administrator/language/en-GB/plg_editors_tinymce.ini b/administrator/language/en-GB/plg_editors_tinymce.ini index ef171428acf82..7359a2b846992 100644 --- a/administrator/language/en-GB/plg_editors_tinymce.ini +++ b/administrator/language/en-GB/plg_editors_tinymce.ini @@ -53,9 +53,11 @@ PLG_TINY_FIELD_RESIZE_HORIZONTAL_LABEL="Horizontal Resizing" PLG_TINY_FIELD_RESIZING_LABEL="Resizing" PLG_TINY_FIELD_SETACCESS_LABEL="Assign this Set to" PLG_TINY_FIELD_SKIN_ADMIN_LABEL="Administrator Skin" +PLG_TINY_FIELD_SKIN_ADMIN_DARK_LABEL="Administrator Skin (Dark Mode)" PLG_TINY_FIELD_SKIN_INFO_DESC="Copy your new skins to: /media/vendor/tinymce/skins/ui." PLG_TINY_FIELD_SKIN_INFO_LABEL="For customised skins go to: Skin Creator" PLG_TINY_FIELD_SKIN_LABEL="Site Skin" +PLG_TINY_FIELD_SKIN_DARK_LABEL="Site Skin (Dark Mode)" PLG_TINY_FIELD_SOURCECODE_LABEL="Source Code Highlighting" PLG_TINY_FIELD_TEXTPATTERN_DESC="Use Markdown syntax to compose content with links, lists, and other styles." ; Do not translate the word Markdown PLG_TINY_FIELD_TEXTPATTERN_LABEL="Markdown" diff --git a/administrator/templates/atum/index.php b/administrator/templates/atum/index.php index 35983c500df8c..d0cf76da2a57c 100644 --- a/administrator/templates/atum/index.php +++ b/administrator/templates/atum/index.php @@ -106,7 +106,7 @@ - +

diff --git a/build/media_source/plg_editors_codemirror/css/codemirror.css b/build/media_source/plg_editors_codemirror/css/codemirror.css index 0b0c2b53db1d1..f4a7a40614c0d 100644 --- a/build/media_source/plg_editors_codemirror/css/codemirror.css +++ b/build/media_source/plg_editors_codemirror/css/codemirror.css @@ -5,7 +5,6 @@ joomla-editor-codemirror { display: block; - background-color: #fff; } .cm-editor { margin-bottom: 16px; diff --git a/build/media_source/plg_editors_codemirror/js/codemirror.es6.js b/build/media_source/plg_editors_codemirror/js/codemirror.es6.js index 2733b35760dec..0d06c56a85386 100644 --- a/build/media_source/plg_editors_codemirror/js/codemirror.es6.js +++ b/build/media_source/plg_editors_codemirror/js/codemirror.es6.js @@ -22,6 +22,7 @@ import { } from '@codemirror/commands'; import { highlightSelectionMatches, searchKeymap } from '@codemirror/search'; import { closeBrackets } from '@codemirror/autocomplete'; +import { oneDark } from '@codemirror/theme-one-dark'; const minimalSetup = (() => [ highlightSpecialChars(), @@ -60,7 +61,7 @@ const optionsToExtensions = async (options) => { extensions.push(modeMod[options.mode](modeOptions)); }).catch((error) => { // eslint-disable-next-line no-console - console.error(`Cannot creat an extension for "${options.mode}" syntax mode.`, error); + console.error(`Cannot create an extension for "${options.mode}" syntax mode.`, error); })); } @@ -104,6 +105,11 @@ const optionsToExtensions = async (options) => { readOnly.$j_name = 'readOnly'; extensions.push(readOnly.of(EditorState.readOnly.of(!!options.readOnly))); + // TODO: Use compartments to update on change of dark mode like: https://discuss.codemirror.net/t/dynamic-light-mode-dark-mode-how/4709 + if ('colorSchemeOs' in document.body.dataset && window.matchMedia('(prefers-color-scheme: dark)').matches) { + extensions.push(oneDark); + } + // Check for custom extensions, // in format [['module1 name or URL', ['init method2']], ['module2 name or URL', ['init method2']], () => ] if (options.customExtensions && options.customExtensions.length) { diff --git a/build/media_source/plg_editors_tinymce/js/tinymce.es6.js b/build/media_source/plg_editors_tinymce/js/tinymce.es6.js index 8c9b9937ccdec..235effdd9d785 100644 --- a/build/media_source/plg_editors_tinymce/js/tinymce.es6.js +++ b/build/media_source/plg_editors_tinymce/js/tinymce.es6.js @@ -155,6 +155,18 @@ Joomla.JoomlaTinyMCE = { options.target = element; } + const skinLight = options.skin_light; + const skinDark = options.skin_dark; + + if ('colorSchemeOs' in document.body.dataset) { + options.skin = (window.matchMedia('(prefers-color-scheme: dark)').matches ? skinDark : skinLight); + } else { + options.skin = skinLight; + } + + delete options.skin_light; + delete options.skin_dark; + // Ensure tinymce is initialised in readonly mode if the textarea has readonly applied let readOnlyMode = false; diff --git a/layouts/plugins/editors/tinymce/field/tinymcebuilder.php b/layouts/plugins/editors/tinymce/field/tinymcebuilder.php index eaedcdbac0c43..c2caef06fb040 100644 --- a/layouts/plugins/editors/tinymce/field/tinymcebuilder.php +++ b/layouts/plugins/editors/tinymce/field/tinymcebuilder.php @@ -62,6 +62,7 @@ $wa->getRegistry()->addExtensionRegistryFile('plg_editors_tinymce'); $wa->registerAndUseStyle('tinymce.skin', 'media/vendor/tinymce/skins/ui/oxide/skin.min.css') + ->registerAndUseStyle('tinymce.skin.dark', 'media/vendor/tinymce/skins/ui/oxide-dark/skin.min.css') ->registerAndUseStyle('plg_editors_tinymce.builder', 'plg_editors_tinymce/tinymce-builder.css', [], [], ['tinymce.skin', 'dragula']) ->registerScript('plg_editors_tinymce.builder', 'plg_editors_tinymce/tinymce-builder.js', [], ['type' => 'module'], ['dragula', 'plg_editors_tinymce']) ->useScript('plg_editors_tinymce.builder') diff --git a/package-lock.json b/package-lock.json index 3c16f6c011f4b..6a8dfa32af32f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "joomla", - "version": "5.0.0", + "version": "5.0.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "joomla", - "version": "5.0.0", + "version": "5.0.1", "hasInstallScript": true, "license": "GPL-2.0-or-later", "dependencies": { @@ -24,6 +24,7 @@ "@codemirror/lint": "^6.4.1", "@codemirror/search": "^6.5.2", "@codemirror/state": "^6.2.1", + "@codemirror/theme-one-dark": "^6.1.2", "@codemirror/view": "^6.17.1", "@fortawesome/fontawesome-free": "^6.4.2", "@joomla/joomla-a11y-checker": "^1.0.0", @@ -1934,6 +1935,17 @@ "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.2.1.tgz", "integrity": "sha512-RupHSZ8+OjNT38zU9fKH2sv+Dnlr8Eb8sl4NOnnqz95mCFTZUaiRP8Xv5MeeaG0px2b8Bnfe7YGwCV3nsBhbuw==" }, + "node_modules/@codemirror/theme-one-dark": { + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.2.tgz", + "integrity": "sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/highlight": "^1.0.0" + } + }, "node_modules/@codemirror/view": { "version": "6.17.1", "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.17.1.tgz", diff --git a/package.json b/package.json index 9f2bb429e5a7d..10164bd41dfca 100644 --- a/package.json +++ b/package.json @@ -51,6 +51,7 @@ "@codemirror/lint": "^6.4.1", "@codemirror/search": "^6.5.2", "@codemirror/state": "^6.2.1", + "@codemirror/theme-one-dark": "^6.1.2", "@codemirror/view": "^6.17.1", "@fortawesome/fontawesome-free": "^6.4.2", "@joomla/joomla-a11y-checker": "^1.0.0", @@ -129,4 +130,4 @@ "stylelint-scss": "^4.7.0", "terser": "^5.19.4" } -} \ No newline at end of file +} diff --git a/plugins/editors/tinymce/forms/setoptions.xml b/plugins/editors/tinymce/forms/setoptions.xml index 25131a45d4211..8179e5772e684 100644 --- a/plugins/editors/tinymce/forms/setoptions.xml +++ b/plugins/editors/tinymce/forms/setoptions.xml @@ -29,6 +29,16 @@ validate="options" /> + + + + loadObject($extraOptions); // Set the selected skin - $skin = $levelParams->get($app->isClient('administrator') ? 'skin_admin' : 'skin', 'oxide'); + $skin = $levelParams->get($app->isClient('administrator') ? 'skin_admin' : 'skin', 'oxide'); + $skinDark = $levelParams->get($app->isClient('administrator') ? 'skin_admin_dark' : 'skin_dark', 'oxide-dark'); // Check that selected skin exists. - $skin = Folder::exists(JPATH_ROOT . '/media/vendor/tinymce/skins/ui/' . $skin) ? $skin : 'oxide'; + $skin = Folder::exists(JPATH_ROOT . '/media/vendor/tinymce/skins/ui/' . $skin) ? $skin : 'oxide'; + $skinDark = Folder::exists(JPATH_ROOT . '/media/vendor/tinymce/skins/ui/' . $skinDark) ? $skinDark : 'oxide-dark'; if (!$levelParams->get('lang_mode', 1)) { // Admin selected language @@ -390,7 +392,8 @@ public function display(string $name, string $content = '', array $attributes = 'directionality' => $language->isRtl() ? 'rtl' : 'ltr', 'language' => $langPrefix, 'autosave_restore_when_empty' => false, - 'skin' => $skin, + 'skin_light' => $skin, + 'skin_dark' => $skinDark, 'theme' => $theme, 'schema' => 'html5', ```

Githubissues is a development platform for aggregating issues.

hljs.highlightAll();

joomlagerman / joomla

[5.0] Add basic support for conditional dark mode themes in our editors #3046