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

// Excalidraw 임베딩 위젯 // 제작자: Senouis // Excalidraw는 MIT 라이선스에 따라 배포됩니다. GitHub 리포지토리의 라이선스 안내 // 이 코드 역시 MIT 라이선스를 따릅니다.

// 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 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 스크립트 로딩 실패, 저장소에 연결할 수 없습니다."); }); }).catch(function (e){ console.log("React DOM 라이브러리 로딩 실패, 저장소에 연결할 수 없습니다."); }); }).catch(function (e){ console.log("React 라이브러리 로딩 실패, 저장소에 연결할 수 없습니다."); }); }

$(LoadExcalidraw);