58 lines
1.5 KiB
JavaScript
58 lines
1.5 KiB
JavaScript
// public/packages/excalidraw/index.js
|
|
// This version fetches initial data from /api/state and saves changes back.
|
|
// Make sure your Go server (from previous snippets) is running and serving /api/state.
|
|
// Assumes a simple backend that returns/accepts JSON of the Excalidraw file.
|
|
|
|
const { useState, useEffect } = React;
|
|
|
|
function App() {
|
|
const [initialData, setInitialData] = useState(null);
|
|
|
|
useEffect(() => {
|
|
fetch("/api/state")
|
|
.then((res) => {
|
|
console.log("Fetch response:", res);
|
|
return res.json();
|
|
})
|
|
.then((data) => {
|
|
console.log("Fetched data:", data);
|
|
setInitialData(data);
|
|
})
|
|
.catch((err) => {
|
|
console.error("Error loading initial data:", err);
|
|
setInitialData({});
|
|
});
|
|
}, []);
|
|
|
|
const handleChange = (elements, appState) => {
|
|
const data = {
|
|
type: "excalidraw",
|
|
version: 2,
|
|
source: "excalidraw",
|
|
elements: elements,
|
|
appState: appState,
|
|
files: {},
|
|
};
|
|
|
|
fetch("/api/state", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(data),
|
|
}).catch(console.error);
|
|
};
|
|
|
|
return React.createElement(
|
|
"div",
|
|
{ style: { height: "100vh" } },
|
|
initialData &&
|
|
React.createElement(ExcalidrawLib.Excalidraw, {
|
|
initialData: initialData,
|
|
onChange: handleChange,
|
|
}),
|
|
);
|
|
}
|
|
|
|
const excalidrawWrapper = document.getElementById("app");
|
|
const root = ReactDOM.createRoot(excalidrawWrapper);
|
|
root.render(React.createElement(App));
|