미디어위키:Gadget-Excalidraw.js

// Excalidraw 임베딩 위젯
// 제작자: [[사용자:Senouis|Senouis]]
// Excalidraw는 MIT 라이선스에 따라 배포됩니다. [https://github.com/excalidraw/excalidraw?tab=MIT-1-ov-file GitHub 리포지토리의 라이선스 안내]

// TODO: ScriptLoader 위젯에 아래 기능을 일임하고 이 위젯이 의존하도록 하기
function asyncJSLoader(url, type) { // UE4, Godot 등의 다른 스크립트 로딩 위젯들과 공유함
	return new Promise(function (resolve, reject) {
	try {
		var scriptElement = document.createElement("script");
		scriptElement.src = url;
		scriptElement.async = true; // force asynchronous loading
		scriptElement.type = type;
		var contextsection = document.getElementById("mw-content-text");
		scriptElement.addEventListener("load", function (ev) {
	        resolve({ status: true });
	    });
	    scriptElement.addEventListener("error", function (ev) {
	        reject({
	            status: false,
	            message: "Failed to load the script"
	        });
	    });
	    contextsection.appendChild(scriptElement);
	} catch (e) {
        reject(e);
    }
	});
}

function loadFromRegistry(url, name) {
	return asyncJSLoader(url, 'text/javascript').then(function (result) {
		console.log(name + " 로딩 완료");
	}, function (e){
		console.log(name + " 스크립트 로딩 실패, 저장소에 연결할 수 없습니다.");
	});
}

function LoadExcalidraw(){
	if (!document.getElementById("excalidraw-container")) return;
	Promise.all([
		loadFromRegistry("https://unpkg.com/react@18.2.0/umd/react.development.js", "React"),
		loadFromRegistry("https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js", "React DOM"),
		loadFromRegistry("https://unpkg.com/@excalidraw/excalidraw/dist/excalidraw.development.js", "Excalidraw")
	]).then(function() {
		function testLangCode(mylang) {
		    var langCodes = ExcalidrawLib.languages.map(function(lang) {
		        return lang.code;
		    });
		    if(langCodes.includes(mylang)) return mylang;
		    var starts = langCodes.filter(function(code) {
		        return code.startsWith(mylang);
		    });
		    if(starts.length) return starts[0];
		    if(mylang.includes('-')) return testLangCode(mylang.split('-')[0]);
		    return null;
		}
		function subscribeTheme(callback) {
			var media = matchMedia('(prefers-color-scheme: dark)');
			var observer = new MutationObserver(callback);
			
			media.addEventListener('change', callback);
			observer.observe($(':root')[0], {
				attributes: true,
				attributeFilter: ['class']
			});
			
			return function() {
				media.removeEventListener('change', callback);
				observer.disconnect();
			};
		}
		function getTheme() {
			var $root = $(':root');
			if($root.hasClass('skin-theme-clientpref-day')) return 'light';
			if($root.hasClass('skin-theme-clientpref-night')) return 'dark';
			if($root.hasClass('skin-theme-clientpref-os')) {
				if(matchMedia('(prefers-color-scheme: light)').matches) return 'light';
				if(matchMedia('(prefers-color-scheme: dark)').matches) return 'dark';
			}
			return 'light';
		}
		
		window.name = mw.config.get('wgRequestId');
		var height_canvas = window.screen.height >= 800 ? "800px" : window.screen.height.toString() + "px";
		var App = function () {
		  var theme = React.useSyncExternalStore(subscribeTheme, getTheme);
		  var excalidrawAPIEntry = React.useState(null);
  		  var excalidrawAPI = excalidrawAPIEntry[0];
		  var setExcalidrawAPI = excalidrawAPIEntry[1];
		  
		  window.ExcalidrawAPI = excalidrawAPI;
		  ExcalidrawLib.useHandleLibrary({ excalidrawAPI: excalidrawAPI });
		  
		  return React.createElement(
		    React.Fragment,
		    null,
		    React.createElement(
		      "div",
		      {
		        style: { height: height_canvas },
		      },
		      React.createElement(
		      	ExcalidrawLib.Excalidraw,
		      	{
		      	  langCode: testLangCode(mw.config.get('wgUserLanguage')),
		      	  theme: getTheme(),
		      	  excalidrawAPI: setExcalidrawAPI
		      	}
		      )
		    )
		  );
		};
		
		var excalidrawWrapper = document.getElementById("app");
		var root = ReactDOM.createRoot(excalidrawWrapper);
		root.render(React.createElement(App));
		console.log("Excalidraw 로딩 완료!");
	});
}

$(LoadExcalidraw);