From 480b6b11d0822015d4fe4515e7a72b495fe78a69 Mon Sep 17 00:00:00 2001
From: Matthias Schmidt <gravatronics@live.com>
Date: Thu, 10 Jun 2021 11:12:56 +0200
Subject: [PATCH] Use requireJS to load CodeMirror

---
 .../files/acp/templates/codemirror.tpl        | 83 ++++++++-----------
 wcfsetup/install/files/js/require.config.js   |  5 ++
 2 files changed, 41 insertions(+), 47 deletions(-)

diff --git a/wcfsetup/install/files/acp/templates/codemirror.tpl b/wcfsetup/install/files/acp/templates/codemirror.tpl
index 5a27c7e6f7..38125aaa3b 100644
--- a/wcfsetup/install/files/acp/templates/codemirror.tpl
+++ b/wcfsetup/install/files/acp/templates/codemirror.tpl
@@ -1,57 +1,47 @@
-{if !$codemirrorLoaded|isset}
-	<script data-relocate="true">window.define.amd = undefined;</script>
-	<script data-relocate="true" src="{@$__wcf->getPath()}js/3rdParty/codemirror/codemirror.js"></script>
-	<script data-relocate="true" src="{@$__wcf->getPath()}js/3rdParty/codemirror/addon/dialog/dialog.js"></script>
-	<script data-relocate="true" src="{@$__wcf->getPath()}js/3rdParty/codemirror/addon/search/searchcursor.js"></script>
-	<script data-relocate="true" src="{@$__wcf->getPath()}js/3rdParty/codemirror/addon/search/search.js"></script>
-	<script data-relocate="true">window.define.amd = window.__require_define_amd;</script>
-{/if}
-{if $codemirrorMode|isset}
-	<script data-relocate="true">window.define.amd = undefined;</script>
-	{if $codemirrorMode != 'smartymixed'}
-	<script data-relocate="true" src="{@$__wcf->getPath()}js/3rdParty/codemirror/mode/{if $codemirrorMode == 'text/x-less'}css/css{else}{$codemirrorMode}/{$codemirrorMode}{/if}.js"></script>
-	{/if}
-	
-	{if $codemirrorMode == 'htmlmixed' || $codemirrorMode == 'smartymixed' || $codemirrorMode == 'php'}
-		{if $codemirrorMode == 'smartymixed'}
-			<script data-relocate="true" src="{@$__wcf->getPath()}js/3rdParty/codemirror/mode/htmlmixed/htmlmixed.js"></script>
-			<script data-relocate="true" src="{@$__wcf->getPath()}js/3rdParty/codemirror/mode/smarty/smarty.js"></script>
-		{elseif $codemirrorMode == 'php'}
-			<script data-relocate="true" src="{@$__wcf->getPath()}js/3rdParty/codemirror/mode/htmlmixed/htmlmixed.js"></script>
-			<script data-relocate="true" src="{@$__wcf->getPath()}js/3rdParty/codemirror/mode/clike/clike.js"></script>
-		{/if}
-		
-		<script data-relocate="true" src="{@$__wcf->getPath()}js/3rdParty/codemirror/mode/css/css.js"></script>
-		<script data-relocate="true" src="{@$__wcf->getPath()}js/3rdParty/codemirror/mode/javascript/javascript.js"></script>
-		<script data-relocate="true" src="{@$__wcf->getPath()}js/3rdParty/codemirror/mode/xml/xml.js"></script>
-	{/if}
-	
-	<script data-relocate="true">window.define.amd = window.__require_define_amd;</script>
-{/if}
 {event name='javascriptIncludes'}
 
 <script data-relocate="true">
-	{if !$codemirrorLoaded|isset}
-		['{@$__wcf->getPath()}js/3rdParty/codemirror/codemirror.css', '{@$__wcf->getPath()}js/3rdParty/codemirror/addon/dialog/dialog.css'].forEach(function(href) {
-			var link = document.createElement('link');
-			link.rel = 'stylesheet';
-			link.href = href;
-			document.head.appendChild(link);
-		});
-	{/if}
+	const codemirrorCss = document.head.querySelector('link[href$="codemirror.css"]');
+	if (codemirrorCss === null) {
+		const link = document.createElement('link');
+		link.rel = 'stylesheet';
+		link.href = '{@$__wcf->getPath()}js/3rdParty/codemirror/codemirror.css';
+		document.head.appendChild(link);
+	}
 	
-	require(['EventHandler', 'Dom/Traverse', 'Dom/Util'], function(EventHandler, DomTraverse, DomUtil) {
+	require([
+		'codemirror',
+		{if $codemirrorMode|isset}
+			{if $codemirrorMode === 'smartymixed'}
+				'codemirror/mode/smarty/smarty',
+			{elseif $codemirrorMode === 'text/x-less'}
+				{* deprecated, legacy support *}
+				'codemirror/mode/css/css',
+			{else}
+				'codemirror/mode/{@$codemirrorMode}/{@$codemirrorMode}',
+			{/if}
+		{/if}
+		'EventHandler',
+		'Dom/Traverse',
+		'Dom/Util'
+	], (
+		CodeMirror,
+		CoreMirrorMode,
+		EventHandler,
+		DomTraverse,
+		DomUtil,
+	) => {
 		var elements = document.querySelectorAll('{@$codemirrorSelector|encodeJS}');
 		var config = {
 			{if $codemirrorMode|isset}
-				{if $codemirrorMode == 'smartymixed'}
-				mode: {
-					name: 'smarty',
-					baseMode: 'text/html',
-					version: 3
-				},
+				{if $codemirrorMode === 'smartymixed'}
+					mode: {
+						name: 'smarty',
+						baseMode: 'text/html',
+						version: 3
+					},
 				{else}
-				mode: '{@$codemirrorMode|encodeJS}',
+					mode: '{@$codemirrorMode|encodeJS}',
 				{/if}
 			{/if}
 			lineWrapping: true,
@@ -120,4 +110,3 @@
 		});
 	});
 </script>
-{assign var='codemirrorLoaded' value=true}
diff --git a/wcfsetup/install/files/js/require.config.js b/wcfsetup/install/files/js/require.config.js
index 041aadc6e1..9e90d71810 100644
--- a/wcfsetup/install/files/js/require.config.js
+++ b/wcfsetup/install/files/js/require.config.js
@@ -11,6 +11,11 @@ requirejs.config({
 		tslib: '3rdParty/tslib',
 		zxcvbn: '3rdParty/zxcvbn',
 	},
+	packages: [{
+		name: "codemirror",
+		location: "3rdParty/codemirror",
+		main: "lib/codemirror"
+	}],
 	shim: {
 		favico: { exports: 'Favico' },
 		'perfect-scrollbar': { exports: 'PerfectScrollbar' },
-- 
2.20.1