Merge branch 'develop'

CHANGELOG.md

@@ -1,3 +1,8 @@
+# 2.4.2
+
+### Notable enhancements and fixes
+- Fixed a german translation in the english translation file.
+
 # 2.4.1
 
 ### Notable enhancements and fixes

admin/package.json

@@ -1,7 +1,7 @@
 {
   "name": "admin",
   "private": true,
-  "version": "2.4.1",
+  "version": "2.4.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

bin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bin",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "description": "",
   "main": "checkAllPads.js",
   "directories": {

package.json

@@ -50,6 +50,6 @@
     "type": "git",
     "url": "https://github.com/ether/etherpad-lite.git"
   },
-  "version": "2.4.1",
+  "version": "2.4.2",
   "license": "Apache-2.0"
 }

settings.json.docker

@@ -194,6 +194,12 @@
    */
   "authenticationMethod": "${AUTHENTICATION_METHOD:sso}",
 
+  /**
+  * Allow setting dark mode for the enduser. This is so if the user has preferred dark mode in their browser, Etherpad will respect that.
+  * Of course this overrides all the skin variants and the skinName set by the administrator.
+  **/
+  "enableDarkMode": "${ENABLE_DARK_MODE:true}",
+
   /*
    * Node native SSL support
    *

settings.json.template

@@ -617,6 +617,12 @@
    */
   "authenticationMethod": "${AUTHENTICATION_METHOD:sso}",
 
+    /**
+    * Allow setting dark mode for the enduser. This is so if the user has preferred dark mode in their browser, Etherpad will respect that.
+    * Of course this overrides all the skin variants and the skinName set by the administrator.
+    **/
+    "enableDarkMode": "${ENABLE_DARK_MODE:true}",
+
   /*
    * From Etherpad 1.8.5 onwards, when Etherpad is in production mode commits from individual users are rate limited
    *

src/locales/en.json

@@ -40,7 +40,7 @@
   "index.recentPadsEmpty": "No recent pads found.",
   "index.generateNewPad": "Generate random pad name",
   "index.labelPad": "Pad name (optional)",
-  "index.placeholderPadEnter": "Gib den Namen des Pads ein...",
+  "index.placeholderPadEnter": "Please enter a pad name...",
   "index.createAndShareDocuments": "Create and share documents in real time",
   "index.createAndShareDocumentsDescription": "Etherpad allows you to edit documents collaboratively in real-time, much like a live multi-player editor that runs in your browser.",
 

src/node/handler/PadMessageHandler.ts

@@ -990,6 +990,7 @@ const handleClientReady = async (socket:any, message: ClientReadyMessage) => {
       accountPrivs: {
         maxRevisions: 100,
       },
+      enableDarkMode: settings.enableDarkMode,
       automaticReconnectionTimeout: settings.automaticReconnectionTimeout,
       initialRevisionList: [],
       initialOptions: {},

src/node/utils/Settings.ts

@@ -109,6 +109,7 @@ exports.ttl = {
 
 exports.updateServer = "https://static.etherpad.org"
 
+exports.enableDarkMode = true;
 
 /*
  * Skin name.

src/package.json

@@ -144,6 +144,6 @@
     "debug:socketio": "cross-env DEBUG=socket.io* node --require tsx/cjs node/server.ts",
     "test:vitest": "vitest"
   },
-  "version": "2.4.1",
+  "version": "2.4.2",
   "license": "Apache-2.0"
 }

src/static/js/pad.ts

@@ -1,5 +1,6 @@
 // @ts-nocheck
 'use strict';
+const skinVariants = require('./skin_variants');
 
 /**
  * This code is mostly from the old Etherpad. Please help us to comment this code.
@@ -479,6 +480,9 @@ const pad = {
       setTimeout(() => { checkChatAndUsersVisibility(mobileMatch); }, 0); // check now after load
 
       $('#editorcontainer').addClass('initialized');
+      if (window.location.hash.toLowerCase() !== '#skinvariantsbuilder' && window.clientVars.enableDarkMode && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        skinVariants.updateSkinVariantsClasses(['super-dark-editor', 'dark-background', 'super-dark-toolbar']);
+      }
 
       hooks.aCallAll('postAceInit', {ace: padeditor.ace, clientVars, pad});
     };

src/static/js/skin_variants.ts

@@ -1,38 +1,43 @@
 // @ts-nocheck
 'use strict';
 
+const containers = ['editor', 'background', 'toolbar'];
+const colors = ['super-light', 'light', 'dark', 'super-dark'];
+
+// add corresponding classes when config change
+const updateSkinVariantsClasses = (newClasses) => {
+  const domsToUpdate = [
+    $('html'),
+    $('iframe[name=ace_outer]').contents().find('html'),
+    $('iframe[name=ace_outer]').contents().find('iframe[name=ace_inner]').contents().find('html'),
+  ];
+
+  colors.forEach((color) => {
+    containers.forEach((container) => {
+      domsToUpdate.forEach((el) => { el.removeClass(`${color}-${container}`); });
+    });
+  });
+
+  domsToUpdate.forEach((el) => { el.removeClass('full-width-editor'); });
+
+  domsToUpdate.forEach((el) => { el.addClass(newClasses.join(' ')); });
+};
+
 // Specific hash to display the skin variants builder popup
 if (window.location.hash.toLowerCase() === '#skinvariantsbuilder') {
   $('#skin-variants').addClass('popup-show');
 
-  const containers = ['editor', 'background', 'toolbar'];
-  const colors = ['super-light', 'light', 'dark', 'super-dark'];
-
-  // add corresponding classes when config change
-  const updateSkinVariantsClasses = () => {
-    const domsToUpdate = [
-      $('html'),
-      $('iframe[name=ace_outer]').contents().find('html'),
-      $('iframe[name=ace_outer]').contents().find('iframe[name=ace_inner]').contents().find('html'),
-    ];
-    colors.forEach((color) => {
-      containers.forEach((container) => {
-        domsToUpdate.forEach((el) => { el.removeClass(`${color}-${container}`); });
-      });
-    });
-
-    domsToUpdate.forEach((el) => { el.removeClass('full-width-editor'); });
-
+  const getNewClasses = () => {
     const newClasses = [];
     $('select.skin-variant-color').each(function () {
       newClasses.push(`${$(this).val()}-${$(this).data('container')}`);
     });
     if ($('#skin-variant-full-width').is(':checked')) newClasses.push('full-width-editor');
 
-    domsToUpdate.forEach((el) => { el.addClass(newClasses.join(' ')); });
-
     $('#skin-variants-result').val(`"skinVariants": "${newClasses.join(' ')}",`);
-  };
+
+    return newClasses;
+  }
 
   // run on init
   const updateCheckboxFromSkinClasses = () => {
@@ -48,9 +53,11 @@ if (window.location.hash.toLowerCase() === '#skinvariantsbuilder') {
   };
 
   $('.skin-variant').on('change', () => {
-    updateSkinVariantsClasses();
+    updateSkinVariantsClasses(getNewClasses());
   });
 
   updateCheckboxFromSkinClasses();
-  updateSkinVariantsClasses();
+  updateSkinVariantsClasses(getNewClasses());
 }
+
+exports.updateSkinVariantsClasses = updateSkinVariantsClasses;