From 16ca04a7556caa45a84fbf735520e9efe8411208 Mon Sep 17 00:00:00 2001
From: Zuzanna <zuzanna.ludzik@gmail.com>
Date: Fri, 13 Feb 2026 10:16:32 +0100
Subject: [PATCH 01/25] #2186 added button/url param to let users choose
 diagram mode

---
 www/diagram/inner.js | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/www/diagram/inner.js b/www/diagram/inner.js
index 40803d41d..51e9c09db 100644
--- a/www/diagram/inner.js
+++ b/www/diagram/inner.js
@@ -193,6 +193,8 @@ define([
                 modified: 'unsavedChanges',
                 proto: 'json',
 
+                ui: 'sketch',
+
                 lang: Messages._languageUsed
             });
 
@@ -209,8 +211,41 @@ define([
                 }
             }
         }, false);
+
+
+        var mkModeButton = function (framework) {
+            var modes = ['kennedy', 'sketch']
+            var types = [];
+            modes.forEach(function(mode){
+                types.push({
+                    tag: 'a',
+                    attributes: {
+                        'data-value': mode,
+                    },
+                    content: mode,
+                    action: function () {
+                        parameters.ui = mode;
+                        framework.onEditableChange();
+                    },
+                });
+            })
+                        
+            const $drawer = UIElements.createDropdown({
+                text: 'Modes', //XXXX
+                options: types,
+                common: framework._.sfCommon,
+                iconCls: 'color-palette'
+            });
+            framework._.toolbar.$theme = $drawer.find('ul.cp-dropdown-content');
+            framework._.toolbar.$bottomL.append($drawer);
+            $drawer.addClass('cp-toolbar-appmenu');
+        };
+
+        mkModeButton(framework);
     };
 
+
+
     $('#cp-app-diagram-editor').hide();
     // Framework initialization
     Framework.create({

From e38e8c7ecbece2fed9c75807922c2fabe5b28f6b Mon Sep 17 00:00:00 2001
From: Zuzanna <zuzanna.ludzik@gmail.com>
Date: Mon, 16 Feb 2026 09:57:18 +0100
Subject: [PATCH 02/25] set parameters and refresh

---
 www/diagram/inner.js | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/www/diagram/inner.js b/www/diagram/inner.js
index 51e9c09db..3f816c9bc 100644
--- a/www/diagram/inner.js
+++ b/www/diagram/inner.js
@@ -190,11 +190,11 @@ define([
                 noDevice: 1,
                 filesupport: 0,
 
+                ui: 'sketch',
+
                 modified: 'unsavedChanges',
                 proto: 'json',
 
-                ui: 'sketch',
-
                 lang: Messages._languageUsed
             });
 
@@ -224,8 +224,9 @@ define([
                     },
                     content: mode,
                     action: function () {
-                        parameters.ui = mode;
-                        framework.onEditableChange();
+                        parameters.set('ui', mode);
+                        drawioFrame.src = ApiConfig.httpSafeOrigin + '/components/drawio/src/main/webapp/index.html?'
+                        + parameters;
                     },
                 });
             })
@@ -240,8 +241,10 @@ define([
             framework._.toolbar.$bottomL.append($drawer);
             $drawer.addClass('cp-toolbar-appmenu');
         };
-
-        mkModeButton(framework);
+        if (!framework.isIntegrated()) {
+            mkModeButton(framework);
+        }
+        
     };
 
 

From 2e51d7f3c4f5b06c838013623404e41f859d26c1 Mon Sep 17 00:00:00 2001
From: Zuzanna <zuzanna.ludzik@gmail.com>
Date: Tue, 17 Feb 2026 14:43:40 +0100
Subject: [PATCH 03/25] set kennedy theme as default for nextcloud users

---
 www/diagram/inner.js | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/www/diagram/inner.js b/www/diagram/inner.js
index 3f816c9bc..d2a6450e0 100644
--- a/www/diagram/inner.js
+++ b/www/diagram/inner.js
@@ -190,7 +190,7 @@ define([
                 noDevice: 1,
                 filesupport: 0,
 
-                ui: 'sketch',
+                ui: framework.isIntegrated() ? 'kennedy' : 'sketch',
 
                 modified: 'unsavedChanges',
                 proto: 'json',
@@ -212,7 +212,6 @@ define([
             }
         }, false);
 
-
         var mkModeButton = function (framework) {
             var modes = ['kennedy', 'sketch']
             var types = [];
@@ -241,10 +240,7 @@ define([
             framework._.toolbar.$bottomL.append($drawer);
             $drawer.addClass('cp-toolbar-appmenu');
         };
-        if (!framework.isIntegrated()) {
-            mkModeButton(framework);
-        }
-        
+        mkModeButton(framework);        
     };
 
 

From 4da2fc5007a1ebc64b4802170092ad4ee31418e9 Mon Sep 17 00:00:00 2001
From: Zuzanna <zuzanna.ludzik@gmail.com>
Date: Thu, 19 Feb 2026 16:27:49 +0100
Subject: [PATCH 04/25] Added diagram theme settings to local storage

---
 customize.dist/messages.js |  1 +
 www/diagram/inner.js       | 33 ++++++++++++++++++++++++++++-----
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/customize.dist/messages.js b/customize.dist/messages.js
index 06268dfd3..3675b9a58 100755
--- a/customize.dist/messages.js
+++ b/customize.dist/messages.js
@@ -134,6 +134,7 @@ define(req, function(AppConfig, Default, Language) {
         }
     };
 
+    Messages.diagram_modes = "Modes"; // XXX
     return Messages;
 
 });
diff --git a/www/diagram/inner.js b/www/diagram/inner.js
index d2a6450e0..7bae56da8 100644
--- a/www/diagram/inner.js
+++ b/www/diagram/inner.js
@@ -11,6 +11,7 @@ define([
     '/components/x2js/x2js.js',
     '/diagram/util.js',
     '/common/common-ui-elements.js',
+
     '/components/tweetnacl/nacl-fast.min.js',
     'less!/diagram/app-diagram.less',
     'css!/diagram/drawio.css',
@@ -170,6 +171,20 @@ define([
         // starting the CryptPad framework
         framework.start();
 
+        var checkTheme = function (fileChannel) {
+            var themes = localStorage.original.getItem('drawio-theme') || [];
+            return JSON.parse(themes).some(theme => theme[fileChannel]);
+        };
+
+        var defaultTheme;
+        if (framework.isIntegrated()) {
+            defaultTheme = 'kennedy';
+        } else if (checkTheme(privateData.channel)) {
+            defaultTheme = localStorage.original.getItem('drawio-theme')[privateData.channel];
+        } else {
+            defaultTheme = 'sketch';
+        }
+
         parameters = new URLSearchParams({
                 test: 1,
                 stealth: 1,
@@ -190,7 +205,7 @@ define([
                 noDevice: 1,
                 filesupport: 0,
 
-                ui: framework.isIntegrated() ? 'kennedy' : 'sketch',
+                ui: defaultTheme,
 
                 modified: 'unsavedChanges',
                 proto: 'json',
@@ -212,8 +227,14 @@ define([
             }
         }, false);
 
+        var addTheme = function (theme) {
+            var existingThemes = JSON.parse(localStorage.original.getItem('drawio-theme')) || [];
+            existingThemes.push(theme);
+            localStorage.original.setItem('drawio-theme', JSON.stringify(existingThemes));
+        };
+
         var mkModeButton = function (framework) {
-            var modes = ['kennedy', 'sketch']
+            var modes = ['kennedy', 'sketch'];
             var types = [];
             modes.forEach(function(mode){
                 types.push({
@@ -226,12 +247,14 @@ define([
                         parameters.set('ui', mode);
                         drawioFrame.src = ApiConfig.httpSafeOrigin + '/components/drawio/src/main/webapp/index.html?'
                         + parameters;
+                        addTheme({[privateData.channel]: mode});
+
                     },
                 });
-            })
+            });
                         
             const $drawer = UIElements.createDropdown({
-                text: 'Modes', //XXXX
+                text: Messages.diagram_modes, // XXX
                 options: types,
                 common: framework._.sfCommon,
                 iconCls: 'color-palette'
@@ -240,7 +263,7 @@ define([
             framework._.toolbar.$bottomL.append($drawer);
             $drawer.addClass('cp-toolbar-appmenu');
         };
-        mkModeButton(framework);        
+        mkModeButton(framework);
     };
 
 

From a18ca8fd8c0c632de6a8c9dacacdfdb2af35d627 Mon Sep 17 00:00:00 2001
From: Zuzanna <zuzanna.ludzik@gmail.com>
Date: Tue, 24 Feb 2026 10:45:15 +0100
Subject: [PATCH 05/25] check for default theme

---
 customize.dist/messages.js |  3 ++-
 www/diagram/inner.js       | 15 ++++++++++-----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/customize.dist/messages.js b/customize.dist/messages.js
index 3675b9a58..e08372af1 100755
--- a/customize.dist/messages.js
+++ b/customize.dist/messages.js
@@ -134,7 +134,8 @@ define(req, function(AppConfig, Default, Language) {
         }
     };
 
-    Messages.diagram_modes = "Modes"; // XXX
+    Messages.diagram_modes = "Themes"; // XXX
+    Messages.diagram_modesOptionLabel = "Change theme to {0}, will refresh app"; // XXX
     return Messages;
 
 });
diff --git a/www/diagram/inner.js b/www/diagram/inner.js
index 7bae56da8..d50ea60c8 100644
--- a/www/diagram/inner.js
+++ b/www/diagram/inner.js
@@ -173,7 +173,7 @@ define([
 
         var checkTheme = function (fileChannel) {
             var themes = localStorage.original.getItem('drawio-theme') || [];
-            return JSON.parse(themes).some(theme => theme[fileChannel]);
+            if (themes.length) { return JSON.parse(themes).some(theme => theme[fileChannel]) };
         };
 
         var defaultTheme;
@@ -227,9 +227,13 @@ define([
             }
         }, false);
 
-        var addTheme = function (theme) {
+        var addTheme = function (fileChannel, theme) {
             var existingThemes = JSON.parse(localStorage.original.getItem('drawio-theme')) || [];
-            existingThemes.push(theme);
+            if (checkTheme(fileChannel)) {
+                existingThemes[fileChannel] = theme;
+            } else {
+                existingThemes.push({[fileChannel]: theme});
+            }
             localStorage.original.setItem('drawio-theme', JSON.stringify(existingThemes));
         };
 
@@ -241,14 +245,14 @@ define([
                     tag: 'a',
                     attributes: {
                         'data-value': mode,
+                        'aria-label': Messages._getKey('diagram_modesOptionLabel', [mode]),
                     },
                     content: mode,
                     action: function () {
                         parameters.set('ui', mode);
                         drawioFrame.src = ApiConfig.httpSafeOrigin + '/components/drawio/src/main/webapp/index.html?'
                         + parameters;
-                        addTheme({[privateData.channel]: mode});
-
+                        addTheme(privateData.channel, mode);
                     },
                 });
             });
@@ -264,6 +268,7 @@ define([
             $drawer.addClass('cp-toolbar-appmenu');
         };
         mkModeButton(framework);
+        console.log("filechannel", privateData.channel)
     };
 
 

From 14e69df15436a96c9e26641f54447a0c8953748e Mon Sep 17 00:00:00 2001
From: Zuzanna <zuzanna.ludzik@gmail.com>
Date: Wed, 25 Feb 2026 21:47:59 +0100
Subject: [PATCH 06/25] theme setter function now accounts for channel update
 during loading

---
 www/diagram/inner.js | 76 ++++++++++++++++++++++++--------------------
 1 file changed, 42 insertions(+), 34 deletions(-)

diff --git a/www/diagram/inner.js b/www/diagram/inner.js
index d50ea60c8..d347dd1f8 100644
--- a/www/diagram/inner.js
+++ b/www/diagram/inner.js
@@ -173,51 +173,57 @@ define([
 
         var checkTheme = function (fileChannel) {
             var themes = localStorage.original.getItem('drawio-theme') || [];
-            if (themes.length) { return JSON.parse(themes).some(theme => theme[fileChannel]) };
+            if (themes.length) { return JSON.parse(themes).some(theme => theme[fileChannel]); };
         };
 
-        var defaultTheme;
-        if (framework.isIntegrated()) {
-            defaultTheme = 'kennedy';
-        } else if (checkTheme(privateData.channel)) {
-            defaultTheme = localStorage.original.getItem('drawio-theme')[privateData.channel];
-        } else {
-            defaultTheme = 'sketch';
-        }
+        var loadDiagram = function () {
+            privateData = framework._.cpNfInner.metadataMgr.getPrivateData();
 
-        parameters = new URLSearchParams({
-                test: 1,
-                stealth: 1,
-                embed: 1,
-                drafts: 0,
-                p: 'cryptpad',
-                integrated: framework.isIntegrated() ? 'true' : 'false',
+            var defaultTheme;
+            if (framework.isIntegrated()) {
+                defaultTheme = 'kennedy';
+            } else if (checkTheme(privateData.channel)) {
+                defaultTheme = localStorage.original.getItem('drawio-theme')[privateData.channel];
+            } else {
+                defaultTheme = 'sketch';
+            }
 
-                chrome: framework.isReadOnly() ? 0 : 1,
-                dark: window.CryptPad_theme === "dark" ? 1 : 0,
+            parameters = new URLSearchParams({
+                    test: 1,
+                    stealth: 1,
+                    embed: 1,
+                    drafts: 0,
+                    p: 'cryptpad',
+                    integrated: framework.isIntegrated() ? 'true' : 'false',
 
-                // Hide save and exit buttons
-                noSaveBtn: 1,
-                saveAndExit: 0,
-                noExitBtn: 1,
-                browser: 0,
+                    chrome: framework.isReadOnly() ? 0 : 1,
+                    dark: window.CryptPad_theme === "dark" ? 1 : 0,
 
-                noDevice: 1,
-                filesupport: 0,
+                    // Hide save and exit buttons
+                    noSaveBtn: 1,
+                    saveAndExit: 0,
+                    noExitBtn: 1,
+                    browser: 0,
 
-                ui: defaultTheme,
+                    noDevice: 1,
+                    filesupport: 0,
 
-                modified: 'unsavedChanges',
-                proto: 'json',
+                    ui: defaultTheme,
 
-                lang: Messages._languageUsed
-            });
+                    modified: 'unsavedChanges',
+                    proto: 'json',
 
-        drawioFrame.src = ApiConfig.httpSafeOrigin + '/components/drawio/src/main/webapp/index.html?'
-            + parameters;
+                    lang: Messages._languageUsed
+                });
+
+            drawioFrame.src = ApiConfig.httpSafeOrigin + '/components/drawio/src/main/webapp/index.html?'
+                + parameters;
+        };
 
         window.addEventListener("message", (event) => {
-            if (event.source === drawioFrame.contentWindow) {
+            if (event.data?.q === 'EV_METADATA_UPDATE') {
+                loadDiagram();
+            } else if (event.source === drawioFrame.contentWindow) {
                 var data = JSON.parse(event.data);
                 var eventType = data.event;
                 var handler = drawioHandlers[eventType];
@@ -252,6 +258,7 @@ define([
                         parameters.set('ui', mode);
                         drawioFrame.src = ApiConfig.httpSafeOrigin + '/components/drawio/src/main/webapp/index.html?'
                         + parameters;
+                        privateData = framework._.cpNfInner.metadataMgr.getPrivateData();
                         addTheme(privateData.channel, mode);
                     },
                 });
@@ -268,7 +275,8 @@ define([
             $drawer.addClass('cp-toolbar-appmenu');
         };
         mkModeButton(framework);
-        console.log("filechannel", privateData.channel)
+
+        
     };
 
 

From 13ffd83ce6b71870169d9ed8e130c0161661961c Mon Sep 17 00:00:00 2001
From: Zuzanna <zuzanna.ludzik@gmail.com>
Date: Wed, 25 Feb 2026 22:43:43 +0100
Subject: [PATCH 07/25] fixed loading of default theme

---
 www/diagram/inner.js | 57 ++++++++++++++++++++------------------------
 1 file changed, 26 insertions(+), 31 deletions(-)

diff --git a/www/diagram/inner.js b/www/diagram/inner.js
index d347dd1f8..cd47899da 100644
--- a/www/diagram/inner.js
+++ b/www/diagram/inner.js
@@ -11,7 +11,6 @@ define([
     '/components/x2js/x2js.js',
     '/diagram/util.js',
     '/common/common-ui-elements.js',
-
     '/components/tweetnacl/nacl-fast.min.js',
     'less!/diagram/app-diagram.less',
     'css!/diagram/drawio.css',
@@ -153,7 +152,31 @@ define([
             }, true
         );
 
-        var parameters;
+        var parameters = new URLSearchParams({
+            test: 1,
+            stealth: 1,
+            embed: 1,
+            drafts: 0,
+            p: 'cryptpad',
+            integrated: framework.isIntegrated() ? 'true' : 'false',
+
+            chrome: framework.isReadOnly() ? 0 : 1,
+            dark: window.CryptPad_theme === "dark" ? 1 : 0,
+
+            // Hide save and exit buttons
+            noSaveBtn: 1,
+            saveAndExit: 0,
+            noExitBtn: 1,
+            browser: 0,
+
+            noDevice: 1,
+            filesupport: 0,
+
+            modified: 'unsavedChanges',
+            proto: 'json',
+
+            lang: Messages._languageUsed
+        });
 
         framework.onEditableChange(function () {
             var readOnly = framework.isReadOnly() || framework.isLocked();
@@ -188,33 +211,7 @@ define([
                 defaultTheme = 'sketch';
             }
 
-            parameters = new URLSearchParams({
-                    test: 1,
-                    stealth: 1,
-                    embed: 1,
-                    drafts: 0,
-                    p: 'cryptpad',
-                    integrated: framework.isIntegrated() ? 'true' : 'false',
-
-                    chrome: framework.isReadOnly() ? 0 : 1,
-                    dark: window.CryptPad_theme === "dark" ? 1 : 0,
-
-                    // Hide save and exit buttons
-                    noSaveBtn: 1,
-                    saveAndExit: 0,
-                    noExitBtn: 1,
-                    browser: 0,
-
-                    noDevice: 1,
-                    filesupport: 0,
-
-                    ui: defaultTheme,
-
-                    modified: 'unsavedChanges',
-                    proto: 'json',
-
-                    lang: Messages._languageUsed
-                });
+            parameters.set('ui', defaultTheme);
 
             drawioFrame.src = ApiConfig.httpSafeOrigin + '/components/drawio/src/main/webapp/index.html?'
                 + parameters;
@@ -275,8 +272,6 @@ define([
             $drawer.addClass('cp-toolbar-appmenu');
         };
         mkModeButton(framework);
-
-        
     };
 
 

From b27d5bfc5dd8d4d5523e26c31417f0bb61d539cc Mon Sep 17 00:00:00 2001
From: Zuzanna <zuzanna.ludzik@gmail.com>
Date: Tue, 10 Mar 2026 11:30:47 +0100
Subject: [PATCH 08/25] improvements to dropdown and storing theme settings

---
 www/common/common-ui-elements.js | 12 ++++++++---
 www/diagram/inner.js             | 36 +++++++++++++++++++-------------
 2 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index a559d7fc5..8870dd49a 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -1611,7 +1611,6 @@ define([
                     }
                 });
             }
-
             // Everything is added as an "li" tag
             // Links and items with action are focusable
             // Add correct "role" attribute
@@ -1642,7 +1641,14 @@ define([
                     if ($(e.target).attr('href') === '#') {
                         e.preventDefault();
                     }
-                    if (config.isSelect) { return; }
+                    if (config.isSelect && config.attributes["data-app"] !== 'diagram') { return; }
+                    if ($el.length !== 1) { return; }
+                    if (config.attributes["data-app"] === 'diagram') {
+                        $('.cp-dropdown-content').find('.cp-dropdown-element-active').removeClass('cp-dropdown-element-active');
+                        $el.addClass('cp-dropdown-element-active');
+                        $el.closest('li').focus();
+                    }
+                    
                     e.stopPropagation();
                     if (typeof(config.action) === "function") {
                         var close = config.action(e);
@@ -1829,7 +1835,7 @@ define([
             }
             $innerblock.find('.cp-dropdown-element-active').removeClass('cp-dropdown-element-active');
             setTimeout(() => {
-                if (config.isSelect && value) {
+                if (config.isSelect && value || config.attributes && config.attributes["data-app"] === 'diagram' && value) {
                     // We use JSON.stringify here to escape quotes
                     if (typeof(value) === "object") { value = JSON.stringify(value); }
                     var $val = $innerblock.find('[data-value='+JSON.stringify(value)+']');
diff --git a/www/diagram/inner.js b/www/diagram/inner.js
index cd47899da..9c7ad4865 100644
--- a/www/diagram/inner.js
+++ b/www/diagram/inner.js
@@ -194,23 +194,27 @@ define([
         // starting the CryptPad framework
         framework.start();
 
+        var themes = JSON.parse(localStorage.original.getItem('drawio-theme')) || [];
+
         var checkTheme = function (fileChannel) {
-            var themes = localStorage.original.getItem('drawio-theme') || [];
-            if (themes.length) { return JSON.parse(themes).some(theme => theme[fileChannel]); };
+            if (themes.length) { return themes.find(obj => obj.hasOwnProperty(fileChannel)); };
         };
 
-        var loadDiagram = function () {
+        var checkDefaultTheme = function () {
             privateData = framework._.cpNfInner.metadataMgr.getPrivateData();
-
             var defaultTheme;
             if (framework.isIntegrated()) {
                 defaultTheme = 'kennedy';
             } else if (checkTheme(privateData.channel)) {
-                defaultTheme = localStorage.original.getItem('drawio-theme')[privateData.channel];
+                defaultTheme = themes.find(item => item[privateData.channel])?.[privateData.channel];
             } else {
                 defaultTheme = 'sketch';
             }
+            return defaultTheme;
+        };
 
+        var loadDiagram = function () {
+            var defaultTheme = checkDefaultTheme();
             parameters.set('ui', defaultTheme);
 
             drawioFrame.src = ApiConfig.httpSafeOrigin + '/components/drawio/src/main/webapp/index.html?'
@@ -230,25 +234,27 @@ define([
             }
         }, false);
 
-        var addTheme = function (fileChannel, theme) {
-            var existingThemes = JSON.parse(localStorage.original.getItem('drawio-theme')) || [];
+        var setTheme = function (fileChannel, theme) {
             if (checkTheme(fileChannel)) {
-                existingThemes[fileChannel] = theme;
+                var currentTheme = themes.find(obj => obj.hasOwnProperty(fileChannel));
+                currentTheme[fileChannel] = theme;
             } else {
-                existingThemes.push({[fileChannel]: theme});
+                themes.push({[fileChannel]: theme});
             }
-            localStorage.original.setItem('drawio-theme', JSON.stringify(existingThemes));
+            localStorage.original.setItem('drawio-theme', JSON.stringify(themes));
         };
 
         var mkModeButton = function (framework) {
             var modes = ['kennedy', 'sketch'];
             var types = [];
+            
             modes.forEach(function(mode){
                 types.push({
                     tag: 'a',
                     attributes: {
                         'data-value': mode,
                         'aria-label': Messages._getKey('diagram_modesOptionLabel', [mode]),
+                        'data-app': 'diagram'
                     },
                     content: mode,
                     action: function () {
@@ -256,16 +262,18 @@ define([
                         drawioFrame.src = ApiConfig.httpSafeOrigin + '/components/drawio/src/main/webapp/index.html?'
                         + parameters;
                         privateData = framework._.cpNfInner.metadataMgr.getPrivateData();
-                        addTheme(privateData.channel, mode);
+                        setTheme(privateData.channel, mode);
                     },
                 });
             });
                         
-            const $drawer = UIElements.createDropdown({
-                text: Messages.diagram_modes, // XXX
+            var $drawer = UIElements.createDropdown({
+                text: Messages.diagram_modes,
                 options: types,
                 common: framework._.sfCommon,
-                iconCls: 'color-palette'
+                isSelect: true,
+                iconCls: 'color-palette',
+                initialValue: parameters.get('ui') || checkDefaultTheme(),
             });
             framework._.toolbar.$theme = $drawer.find('ul.cp-dropdown-content');
             framework._.toolbar.$bottomL.append($drawer);

From 9d1dd5f31820b2adc802d87a9ae0f8f1aecbfbeb Mon Sep 17 00:00:00 2001
From: Zuzanna <zuzanna.ludzik@gmail.com>
Date: Tue, 10 Mar 2026 13:09:49 +0100
Subject: [PATCH 09/25] fixed loading of default theme

---
 www/diagram/inner.js | 40 ++++++++++++++++++++--------------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/www/diagram/inner.js b/www/diagram/inner.js
index 9c7ad4865..604617eb4 100644
--- a/www/diagram/inner.js
+++ b/www/diagram/inner.js
@@ -152,6 +152,25 @@ define([
             }, true
         );
 
+        var themes = JSON.parse(localStorage.original.getItem('drawio-theme')) || [];
+
+        var checkTheme = function (fileChannel) {
+            if (themes.length) { return themes.find(obj => obj.hasOwnProperty(fileChannel)); };
+        };
+
+        var checkDefaultTheme = function () {
+            privateData = framework._.cpNfInner.metadataMgr.getPrivateData();
+            var defaultTheme;
+            if (framework.isIntegrated()) {
+                defaultTheme = 'kennedy';
+            } else if (checkTheme(privateData.channel)) {
+                defaultTheme = themes.find(item => item[privateData.channel])?.[privateData.channel];
+            } else {
+                defaultTheme = 'sketch';
+            }
+            return defaultTheme;
+        };
+
         var parameters = new URLSearchParams({
             test: 1,
             stealth: 1,
@@ -168,6 +187,7 @@ define([
             saveAndExit: 0,
             noExitBtn: 1,
             browser: 0,
+            ui: checkDefaultTheme(),
 
             noDevice: 1,
             filesupport: 0,
@@ -194,29 +214,9 @@ define([
         // starting the CryptPad framework
         framework.start();
 
-        var themes = JSON.parse(localStorage.original.getItem('drawio-theme')) || [];
-
-        var checkTheme = function (fileChannel) {
-            if (themes.length) { return themes.find(obj => obj.hasOwnProperty(fileChannel)); };
-        };
-
-        var checkDefaultTheme = function () {
-            privateData = framework._.cpNfInner.metadataMgr.getPrivateData();
-            var defaultTheme;
-            if (framework.isIntegrated()) {
-                defaultTheme = 'kennedy';
-            } else if (checkTheme(privateData.channel)) {
-                defaultTheme = themes.find(item => item[privateData.channel])?.[privateData.channel];
-            } else {
-                defaultTheme = 'sketch';
-            }
-            return defaultTheme;
-        };
-
         var loadDiagram = function () {
             var defaultTheme = checkDefaultTheme();
             parameters.set('ui', defaultTheme);
-
             drawioFrame.src = ApiConfig.httpSafeOrigin + '/components/drawio/src/main/webapp/index.html?'
                 + parameters;
         };

From 3649a4765fb6d7a8d5dfa8c42b93de53aea93e6b Mon Sep 17 00:00:00 2001
From: Zuzanna <zuzanna.ludzik@gmail.com>
Date: Tue, 10 Mar 2026 13:20:10 +0100
Subject: [PATCH 10/25] cleaning

---
 www/common/common-ui-elements.js | 1 +
 www/diagram/inner.js             | 2 --
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index 8870dd49a..c44766ff5 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -1611,6 +1611,7 @@ define([
                     }
                 });
             }
+
             // Everything is added as an "li" tag
             // Links and items with action are focusable
             // Add correct "role" attribute
diff --git a/www/diagram/inner.js b/www/diagram/inner.js
index 604617eb4..c3d31c897 100644
--- a/www/diagram/inner.js
+++ b/www/diagram/inner.js
@@ -282,8 +282,6 @@ define([
         mkModeButton(framework);
     };
 
-
-
     $('#cp-app-diagram-editor').hide();
     // Framework initialization
     Framework.create({

From 8ed9bb936e995fb1942e656e2a7e6e4d2c3b245a Mon Sep 17 00:00:00 2001
From: Zuzanna <zuzanna.ludzik@gmail.com>
Date: Tue, 17 Mar 2026 15:53:38 +0100
Subject: [PATCH 11/25] moved code for selecting active dropdown option

---
 www/common/common-ui-elements.js | 11 ++---------
 www/diagram/inner.js             | 14 ++++++++++----
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index c44766ff5..769a7b059 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -1642,14 +1642,7 @@ define([
                     if ($(e.target).attr('href') === '#') {
                         e.preventDefault();
                     }
-                    if (config.isSelect && config.attributes["data-app"] !== 'diagram') { return; }
-                    if ($el.length !== 1) { return; }
-                    if (config.attributes["data-app"] === 'diagram') {
-                        $('.cp-dropdown-content').find('.cp-dropdown-element-active').removeClass('cp-dropdown-element-active');
-                        $el.addClass('cp-dropdown-element-active');
-                        $el.closest('li').focus();
-                    }
-                    
+                    if (config.isSelect) { return; } 
                     e.stopPropagation();
                     if (typeof(config.action) === "function") {
                         var close = config.action(e);
@@ -1836,7 +1829,7 @@ define([
             }
             $innerblock.find('.cp-dropdown-element-active').removeClass('cp-dropdown-element-active');
             setTimeout(() => {
-                if (config.isSelect && value || config.attributes && config.attributes["data-app"] === 'diagram' && value) {
+                if (config.isSelect && value) {
                     // We use JSON.stringify here to escape quotes
                     if (typeof(value) === "object") { value = JSON.stringify(value); }
                     var $val = $innerblock.find('[data-value='+JSON.stringify(value)+']');
diff --git a/www/diagram/inner.js b/www/diagram/inner.js
index c3d31c897..147ae34b1 100644
--- a/www/diagram/inner.js
+++ b/www/diagram/inner.js
@@ -254,32 +254,38 @@ define([
                     attributes: {
                         'data-value': mode,
                         'aria-label': Messages._getKey('diagram_modesOptionLabel', [mode]),
-                        'data-app': 'diagram'
                     },
                     content: mode,
                     action: function () {
+                        var $self = $('a[data-value="' + mode + '"]');
                         parameters.set('ui', mode);
                         drawioFrame.src = ApiConfig.httpSafeOrigin + '/components/drawio/src/main/webapp/index.html?'
                         + parameters;
                         privateData = framework._.cpNfInner.metadataMgr.getPrivateData();
                         setTheme(privateData.channel, mode);
+                        $('.cp-dropdown-content').find('.cp-dropdown-element-active').removeClass('cp-dropdown-element-active');
+                        $self.addClass('cp-dropdown-element-active');
+                        $self.closest('li').focus();
                     },
                 });
             });
-                        
+            var initialMode = parameters.get('ui') || checkDefaultTheme();
             var $drawer = UIElements.createDropdown({
                 text: Messages.diagram_modes,
                 options: types,
                 common: framework._.sfCommon,
-                isSelect: true,
                 iconCls: 'color-palette',
-                initialValue: parameters.get('ui') || checkDefaultTheme(),
+                initialValue: initialMode
             });
             framework._.toolbar.$theme = $drawer.find('ul.cp-dropdown-content');
             framework._.toolbar.$bottomL.append($drawer);
             $drawer.addClass('cp-toolbar-appmenu');
+            $drawer.on('click', function () {
+                $('a[data-value="' + initialMode + '"]').addClass('cp-dropdown-element-active');
+            });
         };
         mkModeButton(framework);
+        
     };
 
     $('#cp-app-diagram-editor').hide();

From be5b359e35a7e7eb69b82df954c254977fe123c3 Mon Sep 17 00:00:00 2001
From: Zuzanna <zuzanna.ludzik@gmail.com>
Date: Tue, 17 Mar 2026 15:54:26 +0100
Subject: [PATCH 12/25] cleaning

---
 www/common/common-ui-elements.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index 769a7b059..a559d7fc5 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -1642,7 +1642,7 @@ define([
                     if ($(e.target).attr('href') === '#') {
                         e.preventDefault();
                     }
-                    if (config.isSelect) { return; } 
+                    if (config.isSelect) { return; }
                     e.stopPropagation();
                     if (typeof(config.action) === "function") {
                         var close = config.action(e);

From 2667e3a3885553ff64c1ea8a6f8230cb07d346ee Mon Sep 17 00:00:00 2001
From: Zuzanna <zuzanna.ludzik@gmail.com>
Date: Fri, 20 Mar 2026 20:51:58 +0100
Subject: [PATCH 13/25] localized theme names, dropdown improvements

---
 customize.dist/messages.js |  6 +++++-
 www/diagram/inner.js       | 10 +++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/customize.dist/messages.js b/customize.dist/messages.js
index e08372af1..b71bea9da 100755
--- a/customize.dist/messages.js
+++ b/customize.dist/messages.js
@@ -134,8 +134,12 @@ define(req, function(AppConfig, Default, Language) {
         }
     };
 
-    Messages.diagram_modes = "Themes"; // XXX
     Messages.diagram_modesOptionLabel = "Change theme to {0}, will refresh app"; // XXX
+    Messages.diagram_sketchTheme = "sketch"
+    Messages.diagram_simpleTheme = "simple"
+    Messages.diagram_classicTheme = "classic"
+
+
     return Messages;
 
 });
diff --git a/www/diagram/inner.js b/www/diagram/inner.js
index 147ae34b1..7401cb8a3 100644
--- a/www/diagram/inner.js
+++ b/www/diagram/inner.js
@@ -245,7 +245,7 @@ define([
         };
 
         var mkModeButton = function (framework) {
-            var modes = ['kennedy', 'sketch'];
+            var modes = [Messages.diagram_sketchTheme, Messages.diagram_simpleTheme, Messages.diagram_classicTheme];
             var types = [];
             
             modes.forEach(function(mode){
@@ -266,22 +266,22 @@ define([
                         $('.cp-dropdown-content').find('.cp-dropdown-element-active').removeClass('cp-dropdown-element-active');
                         $self.addClass('cp-dropdown-element-active');
                         $self.closest('li').focus();
+                        $('.cp-dropdown-content').hide();
                     },
                 });
             });
-            var initialMode = parameters.get('ui') || checkDefaultTheme();
             var $drawer = UIElements.createDropdown({
-                text: Messages.diagram_modes,
+                text: Messages.themeButton,
                 options: types,
                 common: framework._.sfCommon,
                 iconCls: 'color-palette',
-                initialValue: initialMode
+                initialValue: parameters.get('ui') || checkDefaultTheme()
             });
             framework._.toolbar.$theme = $drawer.find('ul.cp-dropdown-content');
             framework._.toolbar.$bottomL.append($drawer);
             $drawer.addClass('cp-toolbar-appmenu');
             $drawer.on('click', function () {
-                $('a[data-value="' + initialMode + '"]').addClass('cp-dropdown-element-active');
+                $('a[data-value="' + parameters.get('ui') || checkDefaultTheme() + '"]').addClass('cp-dropdown-element-active');
             });
         };
         mkModeButton(framework);

From 9d7d3ab2ab9c15dbe67323a282ccfd51af7684fb Mon Sep 17 00:00:00 2001
From: Zuzanna Ludzik <zuzanna.maria@protonmail.com>
Date: Mon, 6 Apr 2026 20:34:52 +0200
Subject: [PATCH 14/25] remove default page view

---
 www/diagram/inner.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/www/diagram/inner.js b/www/diagram/inner.js
index 7401cb8a3..333bcd806 100644
--- a/www/diagram/inner.js
+++ b/www/diagram/inner.js
@@ -178,7 +178,6 @@ define([
             drafts: 0,
             p: 'cryptpad',
             integrated: framework.isIntegrated() ? 'true' : 'false',
-
             chrome: framework.isReadOnly() ? 0 : 1,
             dark: window.CryptPad_theme === "dark" ? 1 : 0,
 
@@ -188,6 +187,7 @@ define([
             noExitBtn: 1,
             browser: 0,
             ui: checkDefaultTheme(),
+            pv: 0,
 
             noDevice: 1,
             filesupport: 0,

From 48ca42110df29f6647b1f6f5dbc56af3260299ad Mon Sep 17 00:00:00 2001
From: Zuzanna Ludzik <zuzanna.maria@protonmail.com>
Date: Mon, 20 Apr 2026 11:03:31 +0200
Subject: [PATCH 15/25] linting

---
 customize.dist/messages.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/customize.dist/messages.js b/customize.dist/messages.js
index b71bea9da..8c7dd9d04 100755
--- a/customize.dist/messages.js
+++ b/customize.dist/messages.js
@@ -135,9 +135,9 @@ define(req, function(AppConfig, Default, Language) {
     };
 
     Messages.diagram_modesOptionLabel = "Change theme to {0}, will refresh app"; // XXX
-    Messages.diagram_sketchTheme = "sketch"
-    Messages.diagram_simpleTheme = "simple"
-    Messages.diagram_classicTheme = "classic"
+    Messages.diagram_sketchTheme = "sketch";
+    Messages.diagram_simpleTheme = "simple";
+    Messages.diagram_classicTheme = "classic";
 
 
     return Messages;

From 22fe846d75a7cdbc9a98878dd9c131ed5dbf5fe0 Mon Sep 17 00:00:00 2001
From: Zuzanna Ludzik <zuzanna.maria@protonmail.com>
Date: Mon, 20 Apr 2026 15:14:39 +0200
Subject: [PATCH 16/25] drawio version update

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f10a82942..27dc4b22b 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "cookie-parser": "^1.4.7",
     "croppie": "^2.5.0",
     "dragula": "3.7.2",
-    "drawio": "github:cryptpad/drawio-npm#npm-21.8.2+6",
+    "drawio": "github:cryptpad/drawio-npm#npm-29.6.7",
     "express": "~4.22.1",
     "file-saver": "1.3.1",
     "fs-extra": "^7.0.0",

From e101e00e78256a67f74ea374969e3187bad3a1ec Mon Sep 17 00:00:00 2001
From: Zuzanna Ludzik <zuzanna.maria@protonmail.com>
Date: Wed, 22 Apr 2026 15:28:48 +0200
Subject: [PATCH 17/25] diagram theme stored in drive settings instead of
 localstorage

---
 www/diagram/inner.js | 89 +++++++++++++++++++++-----------------------
 1 file changed, 43 insertions(+), 46 deletions(-)

diff --git a/www/diagram/inner.js b/www/diagram/inner.js
index 333bcd806..6e8257299 100644
--- a/www/diagram/inner.js
+++ b/www/diagram/inner.js
@@ -152,23 +152,15 @@ define([
             }, true
         );
 
-        var themes = JSON.parse(localStorage.original.getItem('drawio-theme')) || [];
-
-        var checkTheme = function (fileChannel) {
-            if (themes.length) { return themes.find(obj => obj.hasOwnProperty(fileChannel)); };
-        };
-
-        var checkDefaultTheme = function () {
-            privateData = framework._.cpNfInner.metadataMgr.getPrivateData();
-            var defaultTheme;
-            if (framework.isIntegrated()) {
-                defaultTheme = 'kennedy';
-            } else if (checkTheme(privateData.channel)) {
-                defaultTheme = themes.find(item => item[privateData.channel])?.[privateData.channel];
+        var checkDefaultTheme = function(cb) {
+            var privateData = framework._.cpNfInner.metadataMgr.getPrivateData();
+            if (!privateData.settings['diagram'] || !privateData.settings['diagram'].mode) {
+                framework._.sfCommon.setAttribute(['diagram', 'mode'], 'sketch', function() {
+                    cb('sketch');
+                });
             } else {
-                defaultTheme = 'sketch';
+                cb(privateData.settings['diagram'].mode);
             }
-            return defaultTheme;
         };
 
         var parameters = new URLSearchParams({
@@ -186,7 +178,6 @@ define([
             saveAndExit: 0,
             noExitBtn: 1,
             browser: 0,
-            ui: checkDefaultTheme(),
             pv: 0,
 
             noDevice: 1,
@@ -214,11 +205,18 @@ define([
         // starting the CryptPad framework
         framework.start();
 
+        var isLoading = false;
         var loadDiagram = function () {
-            var defaultTheme = checkDefaultTheme();
-            parameters.set('ui', defaultTheme);
-            drawioFrame.src = ApiConfig.httpSafeOrigin + '/components/drawio/src/main/webapp/index.html?'
-                + parameters;
+            if (isLoading) {
+                return;
+            }
+            isLoading = true;
+            checkDefaultTheme(function(theme) {
+                var defaultTheme = theme;
+                parameters.set('ui', defaultTheme);
+                drawioFrame.src = ApiConfig.httpSafeOrigin + '/components/drawio/src/main/webapp/index.html?' + parameters;
+                setTimeout(() => { isLoading = false; }, 300);
+            });
         };
 
         window.addEventListener("message", (event) => {
@@ -234,14 +232,10 @@ define([
             }
         }, false);
 
-        var setTheme = function (fileChannel, theme) {
-            if (checkTheme(fileChannel)) {
-                var currentTheme = themes.find(obj => obj.hasOwnProperty(fileChannel));
-                currentTheme[fileChannel] = theme;
-            } else {
-                themes.push({[fileChannel]: theme});
-            }
-            localStorage.original.setItem('drawio-theme', JSON.stringify(themes));
+        var setTheme = function (theme, cb) {
+            framework._.sfCommon.setAttribute(['diagram', 'mode'], theme, function() {
+                cb();
+            });
         };
 
         var mkModeButton = function (framework) {
@@ -261,28 +255,31 @@ define([
                         parameters.set('ui', mode);
                         drawioFrame.src = ApiConfig.httpSafeOrigin + '/components/drawio/src/main/webapp/index.html?'
                         + parameters;
-                        privateData = framework._.cpNfInner.metadataMgr.getPrivateData();
-                        setTheme(privateData.channel, mode);
-                        $('.cp-dropdown-content').find('.cp-dropdown-element-active').removeClass('cp-dropdown-element-active');
-                        $self.addClass('cp-dropdown-element-active');
-                        $self.closest('li').focus();
-                        $('.cp-dropdown-content').hide();
+                        setTheme(mode, function() {
+                            $('.cp-dropdown-content').find('.cp-dropdown-element-active').removeClass('cp-dropdown-element-active');
+                            $self.addClass('cp-dropdown-element-active');
+                            $self.closest('li').focus();
+                            $('.cp-dropdown-content').hide();
+}                       );
                     },
                 });
             });
-            var $drawer = UIElements.createDropdown({
-                text: Messages.themeButton,
-                options: types,
-                common: framework._.sfCommon,
-                iconCls: 'color-palette',
-                initialValue: parameters.get('ui') || checkDefaultTheme()
-            });
-            framework._.toolbar.$theme = $drawer.find('ul.cp-dropdown-content');
-            framework._.toolbar.$bottomL.append($drawer);
-            $drawer.addClass('cp-toolbar-appmenu');
-            $drawer.on('click', function () {
-                $('a[data-value="' + parameters.get('ui') || checkDefaultTheme() + '"]').addClass('cp-dropdown-element-active');
+            checkDefaultTheme(function(theme) {
+                var $drawer = UIElements.createDropdown({
+                    text: Messages.themeButton,
+                    options: types,
+                    common: framework._.sfCommon,
+                    iconCls: 'color-palette',
+                    initialValue: parameters.get('ui') || theme
+                });
+                framework._.toolbar.$theme = $drawer.find('ul.cp-dropdown-content');
+                framework._.toolbar.$bottomL.append($drawer);
+                $drawer.addClass('cp-toolbar-appmenu');
+                $drawer.on('click', function () {
+                    $('a[data-value="' + parameters.get('ui') || theme + '"]').addClass('cp-dropdown-element-active');
+                });
             });
+
         };
         mkModeButton(framework);
         

From 993e2e2c522f7c854ccfa3e5eca136cb3a47e4d1 Mon Sep 17 00:00:00 2001
From: Zuzanna Ludzik <zuzanna.maria@protonmail.com>
Date: Wed, 22 Apr 2026 16:44:04 +0200
Subject: [PATCH 18/25] removed redundant code

---
 www/diagram/inner.js | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/www/diagram/inner.js b/www/diagram/inner.js
index 6e8257299..4cb54f7cd 100644
--- a/www/diagram/inner.js
+++ b/www/diagram/inner.js
@@ -155,9 +155,7 @@ define([
         var checkDefaultTheme = function(cb) {
             var privateData = framework._.cpNfInner.metadataMgr.getPrivateData();
             if (!privateData.settings['diagram'] || !privateData.settings['diagram'].mode) {
-                framework._.sfCommon.setAttribute(['diagram', 'mode'], 'sketch', function() {
-                    cb('sketch');
-                });
+                cb('sketch');
             } else {
                 cb(privateData.settings['diagram'].mode);
             }
@@ -205,17 +203,11 @@ define([
         // starting the CryptPad framework
         framework.start();
 
-        var isLoading = false;
         var loadDiagram = function () {
-            if (isLoading) {
-                return;
-            }
-            isLoading = true;
             checkDefaultTheme(function(theme) {
                 var defaultTheme = theme;
                 parameters.set('ui', defaultTheme);
                 drawioFrame.src = ApiConfig.httpSafeOrigin + '/components/drawio/src/main/webapp/index.html?' + parameters;
-                setTimeout(() => { isLoading = false; }, 300);
             });
         };
 

From 2c5d6a4e035f2e4510288e14b66ec63326028ad6 Mon Sep 17 00:00:00 2001
From: Zuzanna Ludzik <zuzanna.maria@protonmail.com>
Date: Thu, 23 Apr 2026 10:34:54 +0200
Subject: [PATCH 19/25] update package-lock.json

---
 package-lock.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 16aa238b3..024656ae8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,7 +26,7 @@
         "cookie-parser": "^1.4.7",
         "croppie": "^2.5.0",
         "dragula": "3.7.2",
-        "drawio": "github:cryptpad/drawio-npm#npm-21.8.2+6",
+        "drawio": "github:cryptpad/drawio-npm#npm-29.6.7",
         "express": "~4.22.1",
         "file-saver": "1.3.1",
         "fs-extra": "^7.0.0",

From 18517a8004d8e22c0c2b7b221d02fad2758e636f Mon Sep 17 00:00:00 2001
From: Zuzanna Ludzik <zuzanna.maria@protonmail.com>
Date: Fri, 24 Apr 2026 15:10:03 +0200
Subject: [PATCH 20/25] update npm version

---
 package-lock.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 024656ae8..1dd24e43c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,7 +26,7 @@
         "cookie-parser": "^1.4.7",
         "croppie": "^2.5.0",
         "dragula": "3.7.2",
-        "drawio": "github:cryptpad/drawio-npm#npm-29.6.7",
+        "drawio": "github:cryptpad/drawio-npm#npm-29.6.7+1",
         "express": "~4.22.1",
         "file-saver": "1.3.1",
         "fs-extra": "^7.0.0",
diff --git a/package.json b/package.json
index 27dc4b22b..0228be7c9 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "cookie-parser": "^1.4.7",
     "croppie": "^2.5.0",
     "dragula": "3.7.2",
-    "drawio": "github:cryptpad/drawio-npm#npm-29.6.7",
+    "drawio": "github:cryptpad/drawio-npm#npm-29.6.7+1",
     "express": "~4.22.1",
     "file-saver": "1.3.1",
     "fs-extra": "^7.0.0",

From 3ef0ffac9ff6f522c2832d5d8604d379a7bf9ecc Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Fri, 24 Apr 2026 15:27:30 +0200
Subject: [PATCH 21/25] chore: update package-lock.json

---
 package-lock.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1dd24e43c..2dd6b7101 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1797,8 +1797,8 @@
       }
     },
     "node_modules/drawio": {
-      "version": "21.8.2+6",
-      "resolved": "git+ssh://git@github.com/cryptpad/drawio-npm.git#61699f777690d23aab727461ff58b60e198ab0e4"
+      "version": "29.6.7+1",
+      "resolved": "git+ssh://git@github.com/cryptpad/drawio-npm.git#9da41bba34dd5226a3b7147c8974433523970db3"
     },
     "node_modules/dunder-proto": {
       "version": "1.0.1",

From 68a7018f1ceee0d4fbdd0e0a9e27ccf29cf19be5 Mon Sep 17 00:00:00 2001
From: Zuzanna Ludzik <zuzanna.maria@protonmail.com>
Date: Wed, 29 Apr 2026 18:09:23 +0200
Subject: [PATCH 22/25] stop reloading UI, hide GH button and edit img context
 menu opt

---
 www/diagram/inner.js | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/www/diagram/inner.js b/www/diagram/inner.js
index 4cb54f7cd..b4f4738d5 100644
--- a/www/diagram/inner.js
+++ b/www/diagram/inner.js
@@ -196,6 +196,10 @@ define([
                 parameters.set('chrome', '1');
                 parameters.set('grid', '1');
             }
+            checkDefaultTheme(function(theme) {
+                var defaultTheme = theme;
+                parameters.set('ui', defaultTheme);
+            });
             drawioFrame.src = ApiConfig.httpSafeOrigin + '/components/drawio/src/main/webapp/index.html?'
             + parameters;
         });
@@ -203,18 +207,8 @@ define([
         // starting the CryptPad framework
         framework.start();
 
-        var loadDiagram = function () {
-            checkDefaultTheme(function(theme) {
-                var defaultTheme = theme;
-                parameters.set('ui', defaultTheme);
-                drawioFrame.src = ApiConfig.httpSafeOrigin + '/components/drawio/src/main/webapp/index.html?' + parameters;
-            });
-        };
-
         window.addEventListener("message", (event) => {
-            if (event.data?.q === 'EV_METADATA_UPDATE') {
-                loadDiagram();
-            } else if (event.source === drawioFrame.contentWindow) {
+            if (event.source === drawioFrame.contentWindow) {
                 var data = JSON.parse(event.data);
                 var eventType = data.event;
                 var handler = drawioHandlers[eventType];

From 61e02c82edd37481e56bfcbd3def326b17b552fc Mon Sep 17 00:00:00 2001
From: Zuzanna Ludzik <zuzanna.maria@protonmail.com>
Date: Wed, 29 Apr 2026 18:38:38 +0200
Subject: [PATCH 23/25] updated package-lock.json

---
 package-lock.json | 6 +++---
 package.json      | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2dd6b7101..211b7f6f8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,7 +26,7 @@
         "cookie-parser": "^1.4.7",
         "croppie": "^2.5.0",
         "dragula": "3.7.2",
-        "drawio": "github:cryptpad/drawio-npm#npm-29.6.7+1",
+        "drawio": "github:cryptpad/drawio-npm#npm-29.6.7+3",
         "express": "~4.22.1",
         "file-saver": "1.3.1",
         "fs-extra": "^7.0.0",
@@ -1797,8 +1797,8 @@
       }
     },
     "node_modules/drawio": {
-      "version": "29.6.7+1",
-      "resolved": "git+ssh://git@github.com/cryptpad/drawio-npm.git#9da41bba34dd5226a3b7147c8974433523970db3"
+      "version": "29.6.7+3",
+      "resolved": "git+ssh://git@github.com/cryptpad/drawio-npm.git#c3493636b4f3a65d9f068245a968887fd1332326"
     },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
diff --git a/package.json b/package.json
index 0228be7c9..31c3b7cb3 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "cookie-parser": "^1.4.7",
     "croppie": "^2.5.0",
     "dragula": "3.7.2",
-    "drawio": "github:cryptpad/drawio-npm#npm-29.6.7+1",
+    "drawio": "github:cryptpad/drawio-npm#npm-29.6.7+3",
     "express": "~4.22.1",
     "file-saver": "1.3.1",
     "fs-extra": "^7.0.0",

From efee4ca25a413c3cb2693a6315b8e589f087fa3b Mon Sep 17 00:00:00 2001
From: Zuzanna Ludzik <zuzanna.maria@protonmail.com>
Date: Mon, 4 May 2026 13:03:10 +0200
Subject: [PATCH 24/25] load diagram after metadata update

---
 www/diagram/inner.js | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/www/diagram/inner.js b/www/diagram/inner.js
index b4f4738d5..d0f5bc71f 100644
--- a/www/diagram/inner.js
+++ b/www/diagram/inner.js
@@ -196,17 +196,30 @@ define([
                 parameters.set('chrome', '1');
                 parameters.set('grid', '1');
             }
+        });
+
+         var loadDiagram = function () {
             checkDefaultTheme(function(theme) {
                 var defaultTheme = theme;
                 parameters.set('ui', defaultTheme);
             });
             drawioFrame.src = ApiConfig.httpSafeOrigin + '/components/drawio/src/main/webapp/index.html?'
             + parameters;
-        });
+        };
 
         // starting the CryptPad framework
         framework.start();
 
+        //wait for metadata to update before checking the theme and loading Drawio UI
+        var metadataMgr = framework._.sfCommon.getMetadataMgr();
+        var onChange = function () {
+            var privateData = metadataMgr.getPrivateData();
+            if (!privateData.settings.toolbar) { return; }
+            loadDiagram();
+            metadataMgr.off('change', onChange);
+        };
+        metadataMgr.onChange(onChange);
+
         window.addEventListener("message", (event) => {
             if (event.source === drawioFrame.contentWindow) {
                 var data = JSON.parse(event.data);

From 4cbad3bc9db51debbfb34cfdcf18819a67e73c08 Mon Sep 17 00:00:00 2001
From: Zuzanna Ludzik <zuzanna.maria@protonmail.com>
Date: Mon, 4 May 2026 16:59:29 +0200
Subject: [PATCH 25/25] fixed drawio UI initialization conflict

---
 www/diagram/inner.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/www/diagram/inner.js b/www/diagram/inner.js
index d0f5bc71f..2f15c4d4d 100644
--- a/www/diagram/inner.js
+++ b/www/diagram/inner.js
@@ -203,6 +203,8 @@ define([
                 var defaultTheme = theme;
                 parameters.set('ui', defaultTheme);
             });
+            var isReadOnly = framework.isReadOnly() ? 0 : 1;
+            parameters.set('chrome', isReadOnly);
             drawioFrame.src = ApiConfig.httpSafeOrigin + '/components/drawio/src/main/webapp/index.html?'
             + parameters;
         };