slidev-excalidraw 0.1.0

package/components/Excalidraw.vue

@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { ref, onMounted, watch, onBeforeUnmount } from 'vue'
+
+const props = defineProps<{
+  src: string
+  darkMode?: boolean
+  editable?: boolean
+  persist?: boolean
+}>()
+
+const container = ref<HTMLDivElement>()
+const editorContainer = ref<HTMLDivElement>()
+const editing = ref(false)
+let fileData: any = null
+let reactRoot: any = null
+
+async function loadData() {
+  const res = await fetch(props.src)
+  fileData = await res.json()
+}
+
+async function renderSvg() {
+  if (!container.value || !fileData) return
+
+  const { exportToSvg } = await import('@excalidraw/utils')
+
+  const svg = await exportToSvg({
+    elements: fileData.elements,
+    appState: {
+      ...fileData.appState,
+      exportWithDarkMode: props.darkMode ?? false,
+      exportBackground: false,
+    },
+    files: fileData.files || null,
+  })
+
+  svg.style.width = '100%'
+  svg.style.height = '100%'
+  container.value.innerHTML = ''
+  container.value.appendChild(svg)
+}
+
+async function startEditing() {
+  if (!editorContainer.value || !fileData) return
+  editing.value = true
+
+  const React = await import('react')
+  const ReactDOM = await import('react-dom/client')
+  const { Excalidraw } = await import('@excalidraw/excalidraw')
+  await import('@excalidraw/excalidraw/index.css')
+
+  if (reactRoot) {
+    reactRoot.unmount()
+  }
+  reactRoot = ReactDOM.createRoot(editorContainer.value)
+
+  const onChange = (elements: any, appState: any, files: any) => {
+    fileData = { elements, appState, files }
+  }
+
+  reactRoot.render(
+    React.createElement(Excalidraw, {
+      initialData: fileData,
+      onChange,
+    })
+  )
+}
+
+async function stopEditing() {
+  if (reactRoot) {
+    reactRoot.unmount()
+    reactRoot = null
+  }
+  editing.value = false
+
+  if (props.persist !== false) {
+    const filename = props.src.replace(/^\//, '')
+    await fetch('/api/save-excalidraw', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ file: filename, data: fileData }),
+    })
+  }
+
+  renderSvg()
+}
+
+onMounted(async () => {
+  await loadData()
+  await renderSvg()
+})
+
+onBeforeUnmount(() => {
+  if (reactRoot) {
+    reactRoot.unmount()
+    reactRoot = null
+  }
+})
+
+watch(() => [props.src, props.darkMode], async () => {
+  await loadData()
+  await renderSvg()
+})
+</script>
+
+<template>
+  <div class="excalidraw-wrapper">
+    <div v-show="!editing" ref="container" class="excalidraw-container" @dblclick="editable !== false && startEditing()" />
+    <div v-show="editing" ref="editorContainer" class="excalidraw-editor" />
+    <div class="btn-group">
+      <button v-if="!editing && editable !== false" class="edit-btn" @click="startEditing" title="Edit">
+        ✏️
+      </button>
+      <button v-if="editing" class="edit-btn done-btn" @click="stopEditing" title="Done">
+        ✓
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.excalidraw-wrapper {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.excalidraw-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+.excalidraw-editor {
+  width: 100%;
+  height: 80vh;
+}
+.btn-group {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  z-index: 10;
+  display: flex;
+  gap: 4px;
+}
+.edit-btn {
+  background: rgba(255,255,255,0.8);
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  padding: 2px 6px;
+  cursor: pointer;
+  font-size: 14px;
+  opacity: 0.5;
+  transition: opacity 0.2s;
+}
+.edit-btn:hover {
+  opacity: 1;
+}
+.done-btn {
+  opacity: 0.8;
+  background: rgba(34,197,94,0.8);
+  color: white;
+}
+</style>

package/index.ts

@@ -0,0 +1,27 @@
+import type { Plugin } from 'vite'
+import fs from 'fs'
+import path from 'path'
+
+export function excalidrawSavePlugin(publicDir: string): Plugin {
+  return {
+    name: 'slidev-excalidraw-save',
+    configureServer(server) {
+      server.middlewares.use('/api/save-excalidraw', (req, res) => {
+        if (req.method !== 'POST') {
+          res.statusCode = 405
+          res.end()
+          return
+        }
+        let body = ''
+        req.on('data', (chunk: string) => { body += chunk })
+        req.on('end', () => {
+          const { file, data } = JSON.parse(body)
+          const filePath = path.join(publicDir, file)
+          fs.writeFileSync(filePath, JSON.stringify(data, null, 2))
+          res.statusCode = 200
+          res.end('ok')
+        })
+      })
+    },
+  }
+}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "slidev-excalidraw",
+  "version": "0.1.0",
+  "description": "Excalidraw integration for Slidev with inline editing and auto-save",
+  "type": "module",
+  "main": "index.ts",
+  "keywords": [
+    "slidev",
+    "slidev-addon",
+    "excalidraw",
+    "slides",
+    "presentation",
+    "diagram"
+  ],
+  "license": "MIT",
+  "author": "Seonglae Cho",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/seonglae/slidev-excalidraw"
+  },
+  "files": [
+    "components",
+    "index.ts",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "@excalidraw/excalidraw": ">=0.18",
+    "@excalidraw/utils": ">=0.1",
+    "react": "^18",
+    "react-dom": "^18",
+    "@slidev/cli": ">=52"
+  },
+  "slidev": {
+    "components": "./components"
+  }
+}