미디어위키:Gadget-Excalidraw.js

// Excalidraw 임베딩 위젯
// 제작자 [[사용자:Senouis]]

// 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 LoadExcalidraw(){
	if (!document.getElementById("excalidraw-container")) return;
	asyncJSLoader("https://unpkg.com/react@18.2.0/umd/react.development.js", "text/javascript").then(function (result) {
		console.log("React 로딩 완료");
		asyncJSLoader("https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js", "text/javascript").then( function(result) {
			console.log("React DOM 로딩 완료");
			asyncJSLoader("https://unpkg.com/@excalidraw/excalidraw/dist/excalidraw.development.js", "text/javascript").then(function(result) {
				console.log("Excalidraw 로딩 완료");
				var App = function () {
				  return React.createElement(
				    React.Fragment,
				    null,
				    React.createElement(
				      "div",
				      {
				        style: { height: "500px" },
				      },
				      React.createElement(ExcalidrawLib.Excalidraw)
				    )
				  );
				};
				
				var excalidrawWrapper = document.getElementById("app");
				var root = ReactDOM.createRoot(excalidrawWrapper);
				root.render(React.createElement(App));
				console.log("Excalidraw 로딩 완료!");
			}).catch(function (e){
				console.log("Excalidraw 스크립트 로딩 실패, 저장소에 연결할 수 없습니다.");
			});
		}).catch(function (e){
			console.log("React DOM 라이브러리 로딩 실패, 저장소에 연결할 수 없습니다.");
		});
	}).catch(function (e){
		console.log("React 라이브러리 로딩 실패, 저장소에 연결할 수 없습니다.");
	});
}

$(LoadExcalidraw);