작은숲:HTML샌드박스/Excalidraw/main.js

큰숲백과, 나무를 보지 말고 큰 숲을 보라.
// Excalidraw 임베딩 위젯
// 제작자: [[사용자:Senouis|Senouis]]
// Excalidraw는 MIT 라이선스에 따라 배포됩니다. [https://github.com/excalidraw/excalidraw?tab=MIT-1-ov-file GitHub 리포지토리의 라이선스 안내]
// 이 코드 역시 MIT 라이선스를 따릅니다.

function asyncJSLoader(url, type) {
	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;
	Promise.all([asyncJSLoader("https://unpkg.com/react@18.2.0/umd/react.development.js", "text/javascript"), asyncJSLoader("https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js", "text/javascript"), asyncJSLoader("https://unpkg.com/@excalidraw/excalidraw/dist/excalidraw.development.js", "text/javascript")])
	.then(function(result) {
		console.log("모든 스크립트 로딩 완료! Excalidraw 실행 시도합니다.");
		var height_canvas = window.screen.height >= 800 ? "800px" : Math.floor(window.screen.height*0.8).toString() + "px";
		var App = function () {
		  return React.createElement(
		    React.Fragment,
		    null,
		    React.createElement(
		      "div",
		      {
		        style: { height: height_canvas },
		      },
		      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 스크립트 로딩 실패, 저장소에 연결할 수 없습니다.");
	});
}

$(LoadExcalidraw);