kopia lustrzana https://github.com/Tldraw/Tldraw
68 wiersze
1.6 KiB
TypeScript
68 wiersze
1.6 KiB
TypeScript
import { useApp } from '@tldraw/editor'
|
|
import { parseAndLoadDocument, serializeTldrawJson } from '@tldraw/file-format'
|
|
import { useDefaultHelpers } from '@tldraw/ui'
|
|
import { debounce } from '@tldraw/utils'
|
|
import React from 'react'
|
|
import '../public/index.css'
|
|
import { vscode } from './utils/vscode'
|
|
|
|
// @ts-ignore
|
|
import type { VscodeMessage } from '../../messages'
|
|
|
|
export const ChangeResponder = () => {
|
|
const app = useApp()
|
|
const { addToast, clearToasts, msg } = useDefaultHelpers()
|
|
|
|
React.useEffect(() => {
|
|
// When a message is received from the VS Code extension, handle it
|
|
function handleMessage({ data: message }: MessageEvent<VscodeMessage>) {
|
|
switch (message.type) {
|
|
// case 'vscode:undo': {
|
|
// app.undo()
|
|
// break
|
|
// }
|
|
// case 'vscode:redo': {
|
|
// app.redo()
|
|
// break
|
|
// }
|
|
case 'vscode:revert': {
|
|
parseAndLoadDocument(app, message.data.fileContents, msg, addToast)
|
|
break
|
|
}
|
|
}
|
|
}
|
|
|
|
window.addEventListener('message', handleMessage)
|
|
|
|
return () => {
|
|
clearToasts()
|
|
window.removeEventListener('message', handleMessage)
|
|
}
|
|
}, [app, msg, addToast, clearToasts])
|
|
|
|
React.useEffect(() => {
|
|
// When the history changes, send the new file contents to VSCode
|
|
const handleChange = debounce(async () => {
|
|
vscode.postMessage({
|
|
type: 'vscode:editor-updated',
|
|
data: {
|
|
fileContents: await serializeTldrawJson(app.store),
|
|
},
|
|
})
|
|
}, 250)
|
|
|
|
vscode.postMessage({
|
|
type: 'vscode:editor-loaded',
|
|
})
|
|
|
|
app.on('change-history', handleChange)
|
|
|
|
return () => {
|
|
handleChange()
|
|
app.off('change-history', handleChange)
|
|
}
|
|
}, [app])
|
|
|
|
return null
|
|
}
|