59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
import {
|
|
DefaultMainMenu,
|
|
TldrawUiMenuItem,
|
|
Editor,
|
|
TLContent,
|
|
DefaultMainMenuContent,
|
|
useEditor,
|
|
useExportAs,
|
|
} from "tldraw";
|
|
|
|
export function CustomMainMenu() {
|
|
const editor = useEditor()
|
|
const exportAs = useExportAs()
|
|
|
|
const importJSON = (editor: Editor) => {
|
|
const input = document.createElement("input");
|
|
input.type = "file";
|
|
input.accept = ".json";
|
|
input.onchange = (event) => {
|
|
const file = (event.target as HTMLInputElement).files?.[0];
|
|
const reader = new FileReader();
|
|
reader.onload = (event) => {
|
|
if (typeof event.target?.result !== 'string') {
|
|
return
|
|
}
|
|
const jsonData = JSON.parse(event.target.result) as TLContent
|
|
editor.putContentOntoCurrentPage(jsonData, { select: true })
|
|
};
|
|
if (file) {
|
|
reader.readAsText(file);
|
|
}
|
|
};
|
|
input.click();
|
|
};
|
|
const exportJSON = (editor: Editor) => {
|
|
const exportName = `props-${Math.round(+new Date() / 1000).toString().slice(5)}`
|
|
exportAs(Array.from(editor.getCurrentPageShapeIds()), 'json', exportName)
|
|
};
|
|
|
|
return (
|
|
<DefaultMainMenu>
|
|
<DefaultMainMenuContent />
|
|
<TldrawUiMenuItem
|
|
id="export"
|
|
label="Export JSON"
|
|
icon="external-link"
|
|
readonlyOk
|
|
onSelect={() => exportJSON(editor)}
|
|
/>
|
|
<TldrawUiMenuItem
|
|
id="import"
|
|
label="Import JSON"
|
|
icon="external-link"
|
|
readonlyOk
|
|
onSelect={() => importJSON(editor)}
|
|
/>
|
|
</DefaultMainMenu>
|
|
)
|
|
} |