20.3.3 release

ChangeLog

@@ -1,3 +1,11 @@
+19-SEP-2022: 20.3.3
+
+- Replaces CSS classname in live UI refresh to avoid extension clash [DS-909]
+
+16-SEP-2022: 20.3.2
+
+- Keep SVG content attribute in DOMPurify [DID-6193]
+
 15-SEP-2022: 20.3.1
 
 - Multiple commits preparing for live UI switch [DS-909]

VERSION

@@ -1 +1 @@
-20.3.1
+20.3.3

src/main/webapp/electron.js

@@ -1871,7 +1871,7 @@ async function saveDraft(fileObject, data)
 			try
 			{
 				// Add Hidden attribute:
-				spawn("attrib", ["+h", draftFileName]);
+				spawn('attrib', ['+h', draftFileName], {shell: true});
 			} catch(e) {}
 		}
 
@@ -1974,7 +1974,7 @@ async function saveFile(fileObject, data, origStat, overwrite, defEnc)
 					try
 					{
 						// Add Hidden attribute:
-						spawn("attrib", ["+h", bkpPath]);
+						spawn('attrib', ['+h', bkpPath], {shell: true});
 					} catch(e) {}
 				}
 			}

src/main/webapp/index.html

@@ -379,8 +379,8 @@
 			padding-top:0px;
 		}
 		.geEditor *:not(.geScrollable)::-webkit-scrollbar {
-		    width:14px;
-		    height:14px;
+		    width:10px;
+		    height:10px;
 		}
 		.geEditor ::-webkit-scrollbar-track {
 			background-clip:padding-box;

src/main/webapp/js/diagramly/Devel.js

@@ -31,9 +31,9 @@ if (!mxIsElectron && location.protocol !== 'http:')
 			//---------------------------------------------------------//
 			'; ';
 
-		var styleHashes = '\'sha256-JjkxVHHCCVO0nllPD6hU8bBYSlsikA8TM/o3fhr0bas=\' ' + // index.html
-			'\'sha256-8bAFhdIVH8/EjuHhNVZCG8isp9LZEPSQ23SJ7e54VWI=\' ' + // Minimal.js/Light
-			'\'sha256-fSmyKEwMytIGzQ+V1A8gi8iNvdN+rLOrqJvCL179k8Q=\' ' + // Minimal.js/Dark
+		var styleHashes = '\'sha256-pVoUz0B9cDvBP/6KP+5uOMqPh1c14hF0KFqSELqeyNQ=\' ' + // index.html
+			'\'sha256-BQGhEU60vmf18K8QE+zptQ8TcrOlYdgSrnP4l6mBG7o=\' ' + // Minimal.js/Light
+			'\'sha256-lWJz8BSQdD8MyBxQ2ENWc5uVhHlYKn+e9VsLpWu1tbg=\' ' + // Minimal.js/Dark
 			'\'sha256-7kY8ozVqKLIIBwZ24dhdmZkM26PsOlZmEi72RhmZKoM=\' ' + // mxTooltipHandler.js
 			'\'sha256-kuk5TvxZ/Kwuobo4g6uasb1xRQwr1+nfa1A3YGePO7U=\' ' + // MathJax
 			'\'sha256-ByOXYIXIkfNC3flUR/HoxR4Ak0pjOEF1q8XmtuIa6po=\' ' + // purify.min.js

src/main/webapp/js/diagramly/Editor.js

@@ -46,6 +46,13 @@
 		{ext: 'png', title: 'filetypePng'},
 		{ext: 'svg', title: 'filetypeSvg'}];
 	
+	/**
+	 * Definitions for sketch font styles.
+	 */
+	Editor.sketchFontFamily = 'Architects Daughter';
+	Editor.sketchFontSource = 'https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter';
+	Editor.sketchFonts = [{'fontFamily': Editor.sketchFontFamily, 'fontUrl': decodeURIComponent(Editor.sketchFontSource)}];
+	
 	/**
 	 * 
 	 */

src/main/webapp/js/diagramly/EditorUi.js

@@ -3804,10 +3804,6 @@
 			mxConstants.DROP_TARGET_COLOR = '#00ff00';
     	}
 
-		Editor.sketchFontFamily = 'Architects Daughter';
-		Editor.sketchFontSource = 'https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter';
-		Editor.sketchFonts = [{'fontFamily': Editor.sketchFontFamily, 'fontUrl': decodeURIComponent(Editor.sketchFontSource)}];
-
 		// Implements the sketch-min UI
 		if (urlParams['sketch'] == '1')
 		{
@@ -3830,7 +3826,10 @@
 		}
     };
     
-    EditorUi.initTheme();
+	if (urlParams['live-ui'] != '1')
+	{
+    	EditorUi.initTheme();
+	}
 
 	/**
 	 * Overrides image dialog to add image search and Google+.
@@ -9689,7 +9688,7 @@
 						href = source.getAttribute('href');
 					}
 				}
-
+				
 				if (href != null && graph.isCustomLink(href) &&
 					(mxEvent.isTouchEvent(evt) ||
 					!mxEvent.isPopupTrigger(evt)) &&
@@ -9865,6 +9864,7 @@
 			this.keyHandler.bindAction(70, false, 'insertEllipse'); // F
 			this.keyHandler.bindAction(67, false, 'insertEdge'); // C
 			this.keyHandler.bindAction(88, false, 'insertFreehand'); // X
+			this.keyHandler.bindAction(75, true, 'toggleShapes', true); // Ctrl+Shift+K
 			this.altShiftActions[83] = 'synchronize'; // Alt+Shift+S
 
 		    this.installImagePasteHandler();
@@ -10278,14 +10278,13 @@
 			graph.refresh();
 			graph.view.validateBackground();
 			this.updateTabContainer();
+			this.hideShapePicker();
 		});
 
 		this.addListener('darkModeChanged', themeChangeListener);
 		this.addListener('sketchModeChanged', themeChangeListener);
-
 		this.addListener('currentThemeChanged', mxUtils.bind(this, function()
 		{
-			this.updateUserElement();
 			this.refresh();
 		}));
 
@@ -10294,7 +10293,8 @@
 			this.doSetDarkMode(true);
 			this.fireEvent(new mxEventObject('darkModeChanged'));
 		}
-		else if (uiTheme == 'min' && urlParams['embedInline'] != '1')
+		else if (urlParams['live-ui'] == '1' || (uiTheme == 'min' &&
+			urlParams['embedInline'] != '1'))
 		{
 			this.doSetDarkMode((urlParams['dark'] != null) ?
 				urlParams['dark'] == 1 && !mxClient.IS_IE &&
@@ -10598,7 +10598,7 @@
 	/**
 	 * Changes the current UI theme.
 	 */
-	EditorUi.prototype.doSetCurrentTheme = function(value)
+	EditorUi.prototype.doSetCurrentTheme = function(value, delay)
 	{
 		function isDefault(theme)
 		{
@@ -10627,9 +10627,14 @@
 			var x = this.editor.graph.container.scrollLeft - off.x;
 			var y = this.editor.graph.container.scrollTop - off.y;
 
-			var delay = 100;
+			delay = (delay != null) ? delay : 100;
 			mxUtils.setPrefixedStyle(this.container.style, 'transition', 'all ' + delay + 'ms');
 
+			if (delay == 0)
+			{
+				this.container.style.opacity = '0';
+			}
+
 			window.setTimeout(mxUtils.bind(this, function()
 			{
 				this.container.style.opacity = '0';
@@ -10686,12 +10691,15 @@
 
 		return transition;
 	};
-
+	
 	/**
 	 * Overrides image dialog to add image search and Google+.
 	 */
 	EditorUi.prototype.switchTheme = function(value)
 	{
+		this.destroyWindows();
+		this.updateUserElement();
+		this.updateDefaultStyles();
 		this.switchThemeConstants(value);
 		this.switchCssForTheme(value);
 		this.createWrapperForTheme(value);
@@ -10824,7 +10832,10 @@
 	 */
 	EditorUi.prototype.switchThemeConstants = function(value)
 	{
-		this.destroyWindows();
+		var graph = this.editor.graph;
+		graph.defaultEdgeLength = Graph.prototype.defaultEdgeLength;
+		graph.defaultGridEnabled = Graph.prototype.defaultGridEnabled;
+		graph.defaultPageVisible = Graph.prototype.defaultPageVisible;
 
 		if (value == 'sketch')
 		{
@@ -10834,12 +10845,26 @@
 				'<path d="M 3 7 L 7 3 L 11 7" stroke="#C0C0C0" stroke-width="2" fill="none"/>').src;
 			mxWindow.prototype.normalizeImage = Graph.createSvgImage(14, 10,
 				'<path d="M 3 3 L 7 7 L 11 3" stroke="#C0C0C0" stroke-width="2" fill="none"/>').src;
+			Editor.fitWindowBorders = new mxRectangle(60, 30, 30, 30);
+
+			graph.defaultEdgeLength = 120;
+
+			if (urlParams['grid'] == null)
+			{
+				graph.defaultGridEnabled = false;
+			}
+
+			if (urlParams['pv'] == null)
+			{
+				graph.defaultPageVisible = false;
+			}
 		}
 		else
 		{
 			mxWindow.prototype.closeImage = mxClient.imageBasePath + '/close.gif';
 			mxWindow.prototype.minimizeImage = mxClient.imageBasePath + '/minimize.gif';
 			mxWindow.prototype.normalizeImage = mxClient.imageBasePath + '/normalize.gif';
+			Editor.fitWindowBorders = null;
 		}
 	};
 
@@ -10939,7 +10964,7 @@
 			{
 				this.sketchFooterMenuElt = document.createElement('div');
 				this.sketchFooterMenuElt.className = 'geToolbarContainer';
-				this.sketchFooterMenuElt.style.cssText = 'position:absolute;right:14px;bottom:14px;height:44px;' +
+				this.sketchFooterMenuElt.style.cssText = 'position:absolute;right:12px;bottom:12px;height:44px;' +
 					'border-radius:4px;padding:9px 12px;overflow:hidden;z-index:1;white-space:nowrap;' +
 					'text-align:right;user-select:none;box-sizing:border-box;border-bottom:1px solid lightgray;';
 
@@ -11227,12 +11252,18 @@
 			{
 				this.sketchMenubarElt = document.createElement('div');
 				this.sketchMenubarElt.className = 'geToolbarContainer';
-				this.sketchMenubarElt.style.cssText = 'position:absolute;right:14px;top:10px;height:44px;' +
+				this.sketchMenubarElt.style.cssText = 'position:absolute;right:12px;top:10px;height:44px;' +
 					'border-radius:4px;padding:7px 12px;overflow:hidden;z-index:1;white-space:nowrap;' +
 					'text-align:right;user-select:none;box-sizing:border-box;border-bottom:1px solid lightgray;';
 				this.sketchWrapperElt.appendChild(this.sketchMenubarElt);
 			}
 
+			if (this.statusContainer != null)
+			{
+				this.sketchMenubarElt.appendChild(this.statusContainer);
+				this.statusContainer.style.marginTop = '4px';
+			}
+
 			if (this.userElement != null)
 			{
 				this.sketchMenubarElt.appendChild(this.userElement);
@@ -11253,6 +11284,12 @@
 		}
 		else
 		{
+			if (this.statusContainer != null)
+			{
+				this.menubar.container.appendChild(this.statusContainer);
+				this.statusContainer.style.marginTop = '';
+			}
+
 			if (this.userElement != null)
 			{
 				this.menubarContainer.appendChild(this.userElement);
@@ -11396,6 +11433,72 @@
 		}
 	};
 
+	/**
+	 * 
+	 */
+	var editorUiToggleFormatPanel = EditorUi.prototype.toggleFormatPanel;
+
+	EditorUi.prototype.toggleFormatPanel = function(visible)
+	{
+		var wnd = this.formatWindow;
+		
+		if (wnd != null)
+		{
+			wnd.window.setVisible((visible != null) ? visible :
+				!this.isFormatPanelVisible());
+		}
+		else
+		{
+			editorUiToggleFormatPanel.apply(this, arguments);
+		}
+	};
+	
+	/**
+	 * 
+	 */
+	var editorUiIsFormatPanelVisible = EditorUi.prototype.isFormatPanelVisible;
+
+	EditorUi.prototype.isFormatPanelVisible = function()
+	{
+		var wnd = this.formatWindow;
+		
+		if (wnd != null)
+		{
+			return wnd.window.isVisible();
+		}
+		else
+		{
+			return editorUiIsFormatPanelVisible.apply(this, arguments);
+		}
+	};
+
+	var editorUiRefresh = EditorUi.prototype.refresh;
+
+	/**
+	 * Changes refresh to only update the diagram container in sketch mode.
+	 */
+	EditorUi.prototype.refresh = function(sizeDidChange)
+	{
+		if (this.sketchWrapperElt != null && this.sketchWrapperElt.parentNode != null)
+		{
+			sizeDidChange = (sizeDidChange != null) ? sizeDidChange : true;
+			
+			this.diagramContainer.style.left = '0';
+			this.diagramContainer.style.top = '0';
+			this.diagramContainer.style.right = '0';
+			this.diagramContainer.style.bottom = '0';
+
+			if (sizeDidChange)
+			{
+				this.editor.graph.sizeDidChange();
+			}
+		}
+		else
+		{
+			editorUiRefresh.apply(this, arguments);
+		}
+	};
+
 	/**
 	 * Overrides image dialog to add image search and Google+.
 	 */
@@ -11739,51 +11842,87 @@
 	{
 		if (Editor.sketchMode != value)
 		{
-			var graph = this.editor.graph;
 			Editor.sketchMode = value;
+			this.updateDefaultStyles();
+		}
+	};
 
-			function setStyle(style, key, value)
-			{
-				if (style[key] == null)
-				{
-					style[key] = value;
-				}
-			};
+	/**
+	 * Overrides image dialog to add image search and Google+.
+	 */
+	EditorUi.prototype.updateDefaultStyles = function()
+	{
+		function setStyle(style, key, value)
+		{
+			style[key] = value;
+		};
+		
+		var graph = this.editor.graph;
+		graph.defaultVertexStyle = mxUtils.clone(Graph.prototype.defaultVertexStyle);
+		graph.defaultEdgeStyle = mxUtils.clone(Graph.prototype.defaultEdgeStyle);
+
+		if (Editor.sketchMode)
+		{
+			this.menus.defaultFontSize = 20;
+		}
+		else if (Editor.currentTheme == 'sketch')
+		{
+			this.menus.defaultFontSize = 16;
+		}
+		else
+		{
+			this.menus.defaultFontSize = Menus.prototype.defaultFontSize;
+		}
 
-			this.menus.defaultFontSize = (value) ? 20 : 16;
-			graph.defaultVertexStyle = mxUtils.clone(Graph.prototype.defaultVertexStyle);
-			setStyle(graph.defaultVertexStyle, 'fontSize', this.menus.defaultFontSize);
+		if (this.menus.defaultFontSize == Menus.prototype.defaultFontSize)
+		{
+			setStyle(graph.defaultEdgeStyle, 'fontSize', null);
+			setStyle(graph.defaultVertexStyle, 'fontSize', null);
+		}
+		else
+		{
+			setStyle(graph.defaultVertexStyle, 'fontSize', this.menus.defaultFontSize);	
+			setStyle(graph.defaultEdgeStyle, 'fontSize', parseInt(this.menus.defaultFontSize) - 4);
+		}
 
-			graph.defaultEdgeStyle = mxUtils.clone(Graph.prototype.defaultEdgeStyle);
-			setStyle(graph.defaultEdgeStyle, 'fontSize', this.menus.defaultFontSize - 4);
+		if (Editor.currentTheme == 'sketch')
+		{
 			setStyle(graph.defaultEdgeStyle, 'edgeStyle', 'none');
-			setStyle(graph.defaultEdgeStyle, 'rounded', '0');
 			setStyle(graph.defaultEdgeStyle, 'curved', '1');
+			setStyle(graph.defaultEdgeStyle, 'rounded', '0');
 			setStyle(graph.defaultEdgeStyle, 'jettySize', 'auto');
 			setStyle(graph.defaultEdgeStyle, 'orthogonalLoop', '1');
 			setStyle(graph.defaultEdgeStyle, 'endArrow', 'open');
 			setStyle(graph.defaultEdgeStyle, 'endSize', '14');
 			setStyle(graph.defaultEdgeStyle, 'startSize', '14');
-			
-			if (value)
-			{
-				setStyle(graph.defaultVertexStyle, 'fontFamily', Editor.sketchFontFamily);
-				setStyle(graph.defaultVertexStyle, 'fontSource', Editor.sketchFontSource);
-				setStyle(graph.defaultVertexStyle, 'hachureGap', '4');
-				setStyle(graph.defaultVertexStyle, 'sketch', '1');
+			setStyle(graph.defaultEdgeStyle, 'sourcePerimeterSpacing', '8');
+			setStyle(graph.defaultEdgeStyle, 'targetPerimeterSpacing', '8');
+		}
 
-				setStyle(graph.defaultEdgeStyle, 'fontFamily', Editor.sketchFontFamily);
-				setStyle(graph.defaultEdgeStyle, 'fontSource', Editor.sketchFontSource);
-				setStyle(graph.defaultEdgeStyle, 'sketch', '1');
-				setStyle(graph.defaultEdgeStyle, 'hachureGap', '4');
-				setStyle(graph.defaultEdgeStyle, 'sourcePerimeterSpacing', '8');
-				setStyle(graph.defaultEdgeStyle, 'targetPerimeterSpacing', '8');
-			}
+		if (Editor.sketchMode)
+		{
+			this.menus.defaultFonts = Menus.prototype.defaultFonts.concat(Editor.sketchFonts);
+			
+			setStyle(graph.defaultVertexStyle, 'fontFamily', Editor.sketchFontFamily);
+			setStyle(graph.defaultVertexStyle, 'fontSource', Editor.sketchFontSource);
+			setStyle(graph.defaultVertexStyle, 'hachureGap', '4');
+			setStyle(graph.defaultVertexStyle, 'sketch', '1');
+			setStyle(graph.defaultVertexStyle, 'jiggle', '2');
 
-			graph.currentVertexStyle = mxUtils.clone(graph.defaultVertexStyle);
-			graph.currentEdgeStyle = mxUtils.clone(graph.defaultEdgeStyle);
-			this.clearDefaultStyle();
+			setStyle(graph.defaultEdgeStyle, 'fontFamily', Editor.sketchFontFamily);
+			setStyle(graph.defaultEdgeStyle, 'fontSource', Editor.sketchFontSource);
+			setStyle(graph.defaultEdgeStyle, 'sketch', '1');
+			setStyle(graph.defaultEdgeStyle, 'jiggle', '2');
+			setStyle(graph.defaultEdgeStyle, 'hachureGap', '4');
 		}
+		else
+		{
+			this.menus.defaultFonts = Menus.prototype.defaultFonts;
+		}
+
+		graph.currentVertexStyle = mxUtils.clone(graph.defaultVertexStyle);
+		graph.currentEdgeStyle = mxUtils.clone(graph.defaultEdgeStyle);
+		this.clearDefaultStyle();
 	};
 
 	/**

src/main/webapp/js/diagramly/Menus.js

@@ -314,6 +314,22 @@
 		toggleDarkModeAction.setToggleAction(true);
 		toggleDarkModeAction.setSelectedCallback(function() { return Editor.isDarkMode(); });
 		
+        var toggleSimpleModeAction = editorUi.actions.put('toggleSimpleMode', new Action(mxResources.get('simple'), function(e)
+        {
+			editorUi.setCurrentTheme((Editor.currentTheme == 'sketch') ? '' : 'sketch');
+        }));
+
+		toggleSimpleModeAction.setToggleAction(true);
+		toggleSimpleModeAction.setSelectedCallback(function() { return Editor.currentTheme == 'sketch'; });
+		
+        var toggleSketchModeAction = editorUi.actions.put('toggleSketchMode', new Action(mxResources.get('sketch'), function(e)
+        {
+			editorUi.setSketchMode(!Editor.sketchMode);
+        }));
+
+		toggleSketchModeAction.setToggleAction(true);
+		toggleSketchModeAction.setSelectedCallback(function() { return Editor.sketchMode; });
+		
 		editorUi.actions.addAction('properties...', function()
 		{
 			var dlg = new FilePropertiesDialog(editorUi);
@@ -2892,16 +2908,8 @@
 			{
 				this.addMenuItems(menu, ['toggleDarkMode'], parent);
 			}
-			
-			var item = menu.addItem(mxResources.get('simple'), null, function()
-			{
-				editorUi.setCurrentTheme((Editor.currentTheme == 'sketch') ? '' : 'sketch');
-			}, parent);
 
-			if (Editor.currentTheme == 'sketch')
-			{
-				menu.addCheckmark(item, Editor.checkmarkImage);
-			}
+			this.addMenuItems(menu, ['toggleSimpleMode', 'toggleSketchMode', 'fullscreen'], parent);
 		})));
 
 		this.put('theme', new Menu(mxUtils.bind(this, function(menu, parent)
@@ -3351,22 +3359,6 @@
 			}
 		}, null, null, 'C')).isEnabled = isGraphEnabled;
 
-		var toggleFormat = editorUi.actions.put('toggleFormat', new Action(mxResources.get('format'), function()
-        {
-			if (editorUi.formatWindow != null)
-			{
-				editorUi.formatWindow.window.setVisible(
-					!editorUi.formatWindow.window.isVisible());
-			}
-        }));
-
-		toggleFormat.shortcut = editorUi.actions.get('formatPanel').shortcut;
-		toggleFormat.setToggleAction(true);
-		toggleFormat.setSelectedCallback(mxUtils.bind(this, function()
-		{
-			return editorUi.formatWindow != null && editorUi.formatWindow.window.isVisible();
-		}));
-		
 		var toggleShapes = editorUi.actions.put('toggleShapes', new Action(mxResources.get('shapes'), function()
         {
 			if (editorUi.sidebarWindow != null)
@@ -3374,9 +3366,14 @@
 				editorUi.sidebarWindow.window.setVisible(
 					!editorUi.sidebarWindow.window.isVisible());
 			}
-        }));
+			else
+			{
+				editorUi.hsplitPosition = (editorUi.hsplitPosition == 0) ?
+					EditorUi.prototype.hsplitPosition : 0;
+				editorUi.refresh();
+			}
+        }, null, null, Editor.ctrlKey + '+Shift+K'));
 
-		toggleShapes.shortcut = editorUi.actions.get('formatPanel').shortcut;
 		toggleShapes.setToggleAction(true);
 		toggleShapes.setSelectedCallback(mxUtils.bind(this, function()
 		{
@@ -3976,7 +3973,7 @@
 		// Overrides view menu to add search and scratchpad
 		this.put('view', new Menu(mxUtils.bind(this, function(menu, parent)
 		{
-			this.addMenuItems(menu, ((this.editorUi.format != null) ? ['formatPanel'] : []).
+			this.addMenuItems(menu, ((this.editorUi.format != null) ? ['format'] : []).
 				concat(['outline', 'layers', 'tags']).concat((editorUi.commentsSupported()) ?
 				['comments', '-'] : ['-']));
 			
@@ -4007,7 +4004,7 @@
 
 			if (urlParams['sketch'] != '1')
 			{
-				 this.addMenuItems(menu, ['-', 'fullscreen'], parent);
+				this.addMenuItems(menu, ['-', 'fullscreen'], parent);
 			}
 		})));
 		
@@ -4361,7 +4358,7 @@
 				editorUi.menus.addMenuItems(menu, ['comments', '-'], parent);
 			}
 	
-			editorUi.menus.addMenuItems(menu, ['toggleFormat', 'layers', 'tags', '-', 'pageSetup'], parent);
+			editorUi.menus.addMenuItems(menu, ['format', 'layers', 'tags', '-', 'pageSetup'], parent);
 	
 			// Cannot use print in standalone mode on iOS as we cannot open new windows
 			if (urlParams['noFileMenu'] != '1' && (!mxClient.IS_IOS || !navigator.standalone))

src/main/webapp/js/diagramly/Minimal.js

@@ -1,3 +1,13 @@
+/**
+ * Uses live UI theme switching for sketch mode.
+ */
+if (urlParams['live-ui'] == '1' && uiTheme == 'min' &&
+	urlParams['sketch'] == '1')
+{
+	Editor.currentTheme = 'sketch';
+	uiTheme = 'kennedy';
+}
+
 /**
  * Testing dockable windows.
  */
@@ -37,7 +47,7 @@ EditorUi.initMinimalTheme = function()
 			if (ui.formatWindow == null)
 			{
 				var x = (urlParams['sketch'] == '1') ?
-					Math.max(10, ui.diagramContainer.clientWidth - 241) :
+					Math.max(10, ui.diagramContainer.clientWidth - 244) :
 					Math.max(10, ui.diagramContainer.clientWidth - 248);
 				var y = urlParams['winCtrls'] == '1' && urlParams['sketch'] == '1'? 80 : 60;
 				var h = (urlParams['embedInline'] == '1') ? 580 :
@@ -612,6 +622,12 @@ EditorUi.initMinimalTheme = function()
         	toggleFormat(this);
         }
     };
+	
+    EditorUi.prototype.isFormatPanelVisible = function()
+    {
+		return this.formatWindow != null &&
+			this.formatWindow.window.isVisible();
+    };
 
     DiagramFormatPanel.prototype.isMathOptionVisible = function()
     {
@@ -685,18 +701,6 @@ EditorUi.initMinimalTheme = function()
         	toggleShapes(ui);
         }, null, null, Editor.ctrlKey + '+Shift+K'));
 
-        var action = ui.actions.put('toggleFormat', new Action(mxResources.get('format'), function()
-        {
-        	toggleFormat(ui);
-        }));
-
-		action.shortcut = ui.actions.get('formatPanel').shortcut;
-		action.setToggleAction(true);
-		action.setSelectedCallback(mxUtils.bind(this, function()
-		{
-			return ui.formatWindow != null && ui.formatWindow.window.isVisible();
-		}));
-
         if (EditorUi.enablePlantUml && !ui.isOffline())
         {
 	        ui.actions.put('plantUml', new Action(mxResources.get('plantUml') + '...', function()
@@ -928,10 +932,7 @@ EditorUi.initMinimalTheme = function()
 				mxUtils.fit(this.div);
 			}
 		};
-
-		// Overrides insert ellipse shortcut
-		this.keyHandler.bindAction(75, true, 'toggleShapes', true); // Ctrl+Shift+K
-
+		
 		if (EditorUi.windowed && (urlParams['sketch'] == '1' || iw >= 1000))
 		{
 			if (urlParams['embedInline'] != '1')
@@ -1855,13 +1856,13 @@ EditorUi.initMinimalTheme = function()
 				}
 
 				ui.tabContainer.style.visibility = 'hidden';
-				menubar.style.cssText = 'position:absolute;right:14px;top:10px;height:30px;z-index:1;border-radius:4px;' +
+				menubar.style.cssText = 'position:absolute;right:12px;top:10px;height:30px;z-index:1;border-radius:4px;' +
 					'box-shadow:0px 0px 3px 1px #d1d1d1;padding:6px;border-bottom:1px solid lightgray;' +
 					'text-align:right;white-space:nowrap;overflow:hidden;user-select:none;';
 				toolbar.style.cssText = 'position:absolute;left:10px;top:10px;height:30px;z-index:1;border-radius:4px;' +
 					'box-shadow:0px 0px 3px 1px #d1d1d1;padding:6px;border-bottom:1px solid lightgray;' +
 					'text-align:right;white-space:nowrap;overflow:hidden;user-select:none;';
-				footer.style.cssText = 'position:absolute;right:14px;bottom:14px;height:28px;z-index:1;border-radius:4px;' +
+				footer.style.cssText = 'position:absolute;right:12px;bottom:12px;height:28px;z-index:1;border-radius:4px;' +
 					'box-shadow:0px 0px 3px 1px #d1d1d1;padding:8px;white-space:nowrap;user-select:none;';
 				wrapper.appendChild(toolbar);
 				wrapper.appendChild(footer);
@@ -2014,8 +2015,8 @@ EditorUi.initMinimalTheme = function()
 
 				createGroup([appElt, addMenuItem(mxResources.get('shapes'), ui.actions.get('toggleShapes').funct, null,
 					mxResources.get('shapes'), ui.actions.get('image'), (small) ? Editor.shapesImage : null),
-	       			addMenuItem(mxResources.get('format'), ui.actions.get('toggleFormat').funct, null,
-	       			mxResources.get('format') + ' (' + ui.actions.get('formatPanel').shortcut + ')', ui.actions.get('image'),
+	       			addMenuItem(mxResources.get('format'), ui.actions.get('format').funct, null,
+	       			mxResources.get('format') + ' (' + ui.actions.get('format').shortcut + ')', ui.actions.get('image'),
 	   				(small) ? Editor.formatImage : null)],
 	   				(small) ? 60 : null);
 			

src/main/webapp/js/grapheditor/Actions.js

@@ -1826,12 +1826,12 @@ Actions.prototype.init = function()
 	}), null, null, Editor.ctrlKey + '+Shift+L');
 	action.setToggleAction(true);
 	action.setSelectedCallback(mxUtils.bind(this, function() { return this.layersWindow != null && this.layersWindow.window.isVisible(); }));
-	action = this.addAction('formatPanel', mxUtils.bind(this, function()
+	action = this.addAction('format', mxUtils.bind(this, function()
 	{
 		ui.toggleFormatPanel();
 	}), null, null, Editor.ctrlKey + '+Shift+P');
 	action.setToggleAction(true);
-	action.setSelectedCallback(mxUtils.bind(this, function() { return ui.formatWidth > 0; }));
+	action.setSelectedCallback(mxUtils.bind(this, function() { return ui.isFormatPanelVisible(); }));
 	action = this.addAction('outline', mxUtils.bind(this, function()
 	{
 		if (this.outlineWindow == null)

src/main/webapp/js/grapheditor/Editor.js

@@ -2577,7 +2577,8 @@ var WrapperWindow = function(editorUi, title, x, y, w, h, fn)
 	mxGraphView.prototype.validateBackgroundStyles = function()
 	{
 		var graph = this.graph;
-		var color = (graph.background == null || graph.background == mxConstants.NONE) ? graph.defaultPageBackgroundColor : graph.background;
+		var color = (graph.background == null || graph.background == mxConstants.NONE) ?
+			graph.defaultPageBackgroundColor : graph.background;
 		var gridColor = (color != null && this.gridColor != color.toLowerCase()) ? this.gridColor : '#ffffff';
 		var image = 'none';
 		var position = '';
@@ -2632,13 +2633,31 @@ var WrapperWindow = function(editorUi, title, x, y, w, h, fn)
 			graph.container.className = 'geDiagramContainer geDiagramBackdrop';
 			canvas.style.backgroundImage = 'none';
 			canvas.style.backgroundColor = '';
+
+			if (!Editor.isDarkMode() && Editor.currentTheme == 'sketch')
+			{
+				graph.container.style.backgroundColor = graph.sketchBackgroundColor;
+			}
+			else
+			{
+				graph.container.style.backgroundColor = '';
+			}
 		}
 		else
 		{
 			graph.container.className = 'geDiagramContainer';
 			canvas.style.backgroundPosition = position;
-			canvas.style.backgroundColor = color;
 			canvas.style.backgroundImage = image;
+			
+			if ((graph.background == null || graph.background == mxConstants.NONE) &&
+				!Editor.isDarkMode() && Editor.currentTheme == 'sketch')
+			{
+				canvas.style.backgroundColor = graph.sketchBackgroundColor;
+			}
+			else
+			{
+				canvas.style.backgroundColor = color;
+			}
 		}
 	};
 	

src/main/webapp/js/grapheditor/EditorUi.js

@@ -3432,6 +3432,14 @@ EditorUi.prototype.toggleFormatPanel = function(visible)
 	}
 };
 
+/**
+ * 
+ */
+EditorUi.prototype.isFormatPanelVisible = function()
+{
+	return this.formatWidth > 0;
+};
+
 /**
  * Adds support for placeholders in labels.
  */
@@ -4296,17 +4304,6 @@ EditorUi.prototype.getDiagramContainerOffset = function()
  */
 EditorUi.prototype.refresh = function(sizeDidChange)
 {
-	if (this.formatContainer != null && this.formatContainer.parentNode != null &&
-		this.formatContainer.parentNode.className != 'geEditor')
-	{
-		this.diagramContainer.style.left = '0';
-		this.diagramContainer.style.top = '0';
-		this.diagramContainer.style.right = '0';
-		this.diagramContainer.style.bottom = '0';
-
-		return;
-	}
-
 	sizeDidChange = (sizeDidChange != null) ? sizeDidChange : true;
 	
 	var w = this.container.clientWidth;
@@ -5931,7 +5928,7 @@ EditorUi.prototype.createKeyHandler = function(editor)
 		keyHandler.bindAction(73, true, 'italic'); // Ctrl+I
 		keyHandler.bindAction(76, true, 'lockUnlock'); // Ctrl+L
 		keyHandler.bindAction(76, true, 'layers', true); // Ctrl+Shift+L
-		keyHandler.bindAction(80, true, 'formatPanel', true); // Ctrl+Shift+P
+		keyHandler.bindAction(80, true, 'format', true); // Ctrl+Shift+P
 		keyHandler.bindAction(85, true, 'underline'); // Ctrl+U
 		keyHandler.bindAction(85, true, 'ungroup', true); // Ctrl+Shift+U
 		keyHandler.bindAction(190, true, 'superscript'); // Ctrl+.

src/main/webapp/js/grapheditor/Format.js

@@ -341,7 +341,7 @@ Format.prototype.immediateRefresh = function()
 			
 			mxEvent.addListener(img, 'click', function()
 			{
-				ui.actions.get('formatPanel').funct();
+				ui.actions.get('format').funct();
 			});
 			
 			div.appendChild(label2);

src/main/webapp/js/grapheditor/Graph.js

@@ -1747,14 +1747,21 @@ Graph.sanitizeHtml = function(value, editing)
 /**
  * Returns the size of the page format scaled with the page size.
  */
-Graph.sanitizeLink = function(href)
-{
-	var a = document.createElement('a');
-	a.setAttribute('href', href);
-	Graph.sanitizeNode(a);
-	
-	return a.getAttribute('href');
-};
+ Graph.sanitizeLink = function(href)
+ {
+	 if (href == null)
+	 {
+		 return null;
+	 }
+	 else
+	 {
+		 var a = document.createElement('a');
+		 a.setAttribute('href', href);
+		 Graph.sanitizeNode(a);
+		 
+		 return a.getAttribute('href');
+	 }
+ };
 
 /**
  * Sanitizes the given DOM node in-place.
@@ -1772,7 +1779,18 @@ DOMPurify.addHook('afterSanitizeAttributes', function(node)
 		(node.getAttribute('href') != null && !node.getAttribute('href').startsWith('#'))))
 	{
 		node.remove();
-	} 
+	}
+});
+
+// Workaround for removed content with empty nodes
+DOMPurify.addHook('uponSanitizeAttribute', function (node, evt)
+{
+	if (node.nodeName == 'svg' && evt.attrName == 'content')
+	{
+		evt.forceKeepAttr = true;
+	}
+	
+	return node;
 });
 
 /**
@@ -1810,6 +1828,7 @@ Graph.clipSvgDataUri = function(dataUri, ignorePreserveAspect)
 			{
 				// Strips leading XML declaration and doctypes
 				div.innerHTML = Graph.sanitizeHtml(data.substring(idx));
+				//div.innerHTML = data.substring(idx);
 				
 				// Gets the size and removes from DOM
 				var svgs = div.getElementsByTagName('svg');
@@ -2029,6 +2048,11 @@ Graph.prototype.lightbox = false;
  */
 Graph.prototype.defaultPageBackgroundColor = '#ffffff';
 
+/**
+ * 
+ */
+Graph.prototype.sketchBackgroundColor = '#f0f0f0';
+
 /**
  * 
  */
@@ -2975,6 +2999,12 @@ Graph.prototype.labelLinkClicked = function(state, elt, evt)
 {
 	var href = elt.getAttribute('href');
 	
+	// Blocks and removes unsafe links in labels
+	if (href != Graph.sanitizeLink(href))
+	{
+		Graph.sanitizeNode(elt);
+	}
+	
 	if (href != null && !this.isCustomLink(href) && ((mxEvent.isLeftMouseButton(evt) &&
 		!mxEvent.isPopupTrigger(evt)) || mxEvent.isTouchEvent(evt)))
 	{
@@ -4539,7 +4569,7 @@ Graph.prototype.getIndexableText = function(cells)
 		{
 			if (this.isHtmlLabel(cell))
 			{
-				tmp.innerHTML = this.sanitizeHtml(this.getLabel(cell));
+				tmp.innerHTML = Graph.sanitizeHtml(this.getLabel(cell));
 				label = mxUtils.extractTextWithWhitespace([tmp]);
 			}
 			else
@@ -5165,7 +5195,7 @@ Graph.prototype.getTooltipForCell = function(cell)
 				tmp = this.replacePlaceholders(cell, tmp);
 			}
 			
-			tip = this.sanitizeHtml(tmp);
+			tip = Graph.sanitizeHtml(tmp);
 		}
 		else
 		{

src/main/webapp/js/grapheditor/Menus.js

@@ -505,7 +505,7 @@ Menus.prototype.init = function()
 	})));
 	this.put('view', new Menu(mxUtils.bind(this, function(menu, parent)
 	{
-		this.addMenuItems(menu, ((this.editorUi.format != null) ? ['formatPanel'] : []).
+		this.addMenuItems(menu, ((this.editorUi.format != null) ? ['format'] : []).
 			concat(['outline', 'layers', '-', 'pageView', 'pageScale', '-', 'scrollbars', 'tooltips', '-',
 			        'grid', 'guides', '-', 'connectionArrows', 'connectionPoints', '-',
 			        'resetView', 'zoomIn', 'zoomOut'], parent));
@@ -515,7 +515,7 @@ Menus.prototype.init = function()
 	{
 		if (this.editorUi.format != null)
 		{
-			this.addMenuItems(menu, ['formatPanel'], parent);
+			this.addMenuItems(menu, ['format'], parent);
 		}
 		
 		this.addMenuItems(menu, ['outline', 'layers'], parent);

src/main/webapp/resources/dia_fr.txt

@@ -113,7 +113,7 @@ diagramSvgDesc=Image vectorielle éditable
 didYouMeanToExportToPdf=Vouliez vous exporter en PDF ?
 draftFound=Un brouillon pour '{1}' a été trouvé. Pour poursuivre, souhaitez-vous l'afficher dans l'éditeur ou l'ignorer ?
 draftRevisionMismatch=There is a different version of this diagram on a shared draft of this page. Please edit the diagram from the draft to ensure you are working with the latest version.
-selectDraft=Select a draft to continue editing:
+selectDraft=Sélectionner un brouillon pour poursuivre l'édition :
 dragAndDropNotSupported=Le glisser-déposer n'est pas supporté pour les images. Voulez-vous importer à la place?
 dropboxCharsNotAllowed=Les caractères suivants ne sont pas autorisés : \ / : ? * " |
 check=Vérifier
@@ -551,7 +551,7 @@ openRecent=Ouvrir récent
 openSupported=Les formats supportés sont les fichiers sauvegardés depuis ce logiciel (.xml), .vsdx et .gliffy
 options=Options
 organic=Organique
-orgChart=Org Chart
+orgChart=Organigramme
 orthogonal=Orthogonale
 otherViewer=autre lecteur
 otherViewers=autres lecteurs
@@ -822,8 +822,8 @@ recentlyUsed=Recently used
 listView=Vue liste
 gridView=Vue table
 resultsFor=Résultats pour '{1}'
-oneDriveCharsNotAllowed=The following characters are not allowed: ~ " # %  * : < > ? / \ { | }
-oneDriveInvalidDeviceName=The specified device name is invalid
+oneDriveCharsNotAllowed=Les caractères suivants ne sont pas autorisés : ~ " # % * : < > ? / \ { | }
+oneDriveInvalidDeviceName=Le nom de l'appareil spécifié n'est pas valide
 officeNotLoggedOD=You are not logged in to OneDrive. Please open draw.io task pane and login first.
 officeSelectSingleDiag=Please select a single draw.io diagram only without other contents.
 officeSelectDiag=Choisir un diagramme draw.io
@@ -976,13 +976,13 @@ working=Working
 confAConfSpaceDesc=This space is used to store draw.io configuration files and custom libraries/templates
 confANoCustLib=No Custom Libraries
 delFailed=Delete failed!
-showID=Show ID
+showID=Afficher l'ID
 confAIncorrectLibFileType=Incorrect file type. Libraries should be XML files.
 uploading=Uploading
 confALibExist=This library already exists
 confAUploadSucc=Uploaded successfully
 confAUploadFailErr=Upload Failed (Unexpected Error)
-hiResPreview=High Res Preview
+hiResPreview=Aperçu en haute résolution
 officeNotLoggedGD=You are not logged in to Google Drive. Please open draw.io task pane and login first.
 officePopupInfo=Please complete the process in the pop-up window.
 pickODFile=Pick OneDrive File
@@ -998,7 +998,7 @@ inches=Pouces
 millimeters=Millimètres
 confEditDraftDelOrExt=This diagram is in a draft page, is deleted from the page, or is edited externally. It will be saved as a new attachment version and may not be reflected in the page.
 confDiagEditedExt=Diagram is edited in another session. It will be saved as a new attachment version but the page will show other session's modifications.
-macroNotFound=Macro Not Found
+macroNotFound=Macro non trouvée
 confAInvalidPageIdsFormat=Incorrect Page IDs file format
 confACollectingCurPages=Collecting current pages
 confABuildingPagesMap=Building pages mapping
@@ -1070,19 +1070,19 @@ pageLayers=Page and Layers
 customize=Personnaliser
 firstPage=First Page (All Layers)
 curEditorState=Current Editor State
-noAnchorsFound=No anchors found
-attachment=Attachment
+noAnchorsFound=Aucun ancrage trouvé
+attachment=Pièce jointe
 curDiagram=Current Diagram
 recentDiags=Recent Diagrams
 csvImport=CSV Import
 chooseFile=Choisir un fichier...
 choose=Choisir
-gdriveFname=Google Drive filename
+gdriveFname=Nom de fichier Google Drive
 widthOfViewer=Width of the viewer (px)
 heightOfViewer=Height of the viewer (px)
 autoSetViewerSize=Automatically set the size of the viewer
 thumbnail=Miniature
-prevInDraw=Preview in draw.io
+prevInDraw=Aperçu dans draw.io
 onedriveFname=OneDrive filename
 diagFname=Diagram filename
 diagUrl=Diagram URL
@@ -1113,14 +1113,14 @@ plsSelectFile=Veuillez sélectionner un fichier
 mustBgtZ={1} must be greater than zero
 cantLoadPrev=Cannot load file preview.
 errAccessFile=Error: Access Denied. You do not have permission to access "{1}".
-noPrevAvail=No preview is available.
-personalAccNotSup=Personal accounts are not supported.
+noPrevAvail=Aucun aperçu n'est disponible.
+personalAccNotSup=Les comptes personnels ne sont pas supportés.
 errSavingTryLater=Error occurred during saving, please try again later.
 plsEnterFld=Please enter {1}
 invalidDiagUrl=Invalid Diagram URL
 unsupportedVsdx=Unsupported vsdx file
-unsupportedImg=Unsupported image file
-unsupportedFormat=Unsupported file format
+unsupportedImg=Fichier image non supporté
+unsupportedFormat=Format de fichier non supporté
 plsSelectSingleFile=Please select a single file only
 attCorrupt=Attachment file "{1}" is corrupted
 loadAttFailed=Failed to load attachment "{1}"
@@ -1158,9 +1158,9 @@ draftErrDataLoss=An error occurred while reading the draft file. The diagram can
 ibm=IBM
 linkToDiagramHint=Add a link to this diagram. The diagram can only be edited from the page that owns it.
 linkToDiagram=Link to Diagram
-changedBy=Changed By
+changedBy=Modifié par
 lastModifiedOn=Last modified on
-searchResults=Search Results
+searchResults=Résultats de la recherche
 showAllTemps=Afficher tous les modèles
 notionToken=Notion Token
 selectDB=Sélectionner une base de données
@@ -1173,7 +1173,7 @@ repository=Repository
 branch=Branch
 meters=Mètres
 teamsNoEditingMsg=Editor functionality is only available in Desktop environment (in MS Teams App or a web browser)
-contactOwner=Contact Owner
+contactOwner=Contacter le propriétaire
 viewerOnlyMsg=You cannot edit the diagrams in the mobile platform, please use the desktop client or a web browser.
 website=Site web
 check4Updates=Rechercher les mises à jour
@@ -1197,7 +1197,7 @@ confAFileCleanFailed=Cleaning diagram draft "{1}" failed
 confACleanOnly=Clean Diagram Drafts Only
 brush=Brush
 openDevTools=Open Developer Tools
-autoBkp=Automatic Backup
+autoBkp=Sauvegarde automatique
 confAIgnoreCollectErr=Ignore collecting current pages errors
 drafts=Brouillons
 draftSaveInt=Draft save interval [sec] (0 to disable)

src/main/webapp/teams.html

@@ -379,8 +379,8 @@
 			padding-top:0px;
 		}
 		.geEditor *:not(.geScrollable)::-webkit-scrollbar {
-		    width:14px;
-		    height:14px;
+		    width:10px;
+		    height:10px;
 		}
 		.geEditor ::-webkit-scrollbar-track {
 			background-clip:padding-box;