feat: ✨ supports slides

src/components/Editor.tsx

@@ -1,6 +1,6 @@
-import { Excalidraw, Button, MainMenu, WelcomeScreen } from '@excalidraw/excalidraw'
+import { Excalidraw, Button, MainMenu, WelcomeScreen, getSceneVersion } from '@excalidraw/excalidraw'
 import type { ExcalidrawElement } from '@excalidraw/excalidraw/types/element/types'
-import type { AppState, BinaryFiles } from '@excalidraw/excalidraw/types/types'
+import type { AppState, BinaryFiles, ExcalidrawImperativeAPI } from '@excalidraw/excalidraw/types/types'
 import type { LibraryItems } from '@excalidraw/excalidraw/types/types'
 import type { BlockIdentity } from '@logseq/libs/dist/LSPlugin'
 import { debounce } from 'lodash'
@@ -14,6 +14,7 @@ import { cn, genBlockData, getExcalidrawInfoFromPage, getLangCode, getMinimalApp
 import getI18N from '@/locales'
 import type { ExcalidrawData, PluginSettings } from '@/type'
 
+import SlidesPreview from './SlidesPreview'
 import TagSelector from './TagSelector'
 
 export type Theme = 'light' | 'dark'
@@ -39,6 +40,9 @@ const Editor: React.FC<
   const blockUUIDRef = useRef<string>()
   const pagePropertyBlockUUIDRef = useRef<string>()
   const currentExcalidrawDataRef = useRef<ExcalidrawData>()
+  const [currentExcalidrawData, setCurrentExcalidrawData] = useState<ExcalidrawData>()
+  const sceneVersionRef = useRef<number>()
+  const [excalidrawAPI, setExcalidrawAPI] = useState<ExcalidrawImperativeAPI | null>(null)
 
   const [aliasName, setAliasName] = useState<string>()
   const [tag, setTag] = useState<string>()
@@ -62,6 +66,16 @@ const Editor: React.FC<
         appState,
         files,
       }
+      const sceneVersion = getSceneVersion(elements)
+      // fix https://github.com/excalidraw/excalidraw/issues/3014
+      if (sceneVersionRef.current !== sceneVersion) {
+        sceneVersionRef.current = sceneVersion
+        setCurrentExcalidrawData({
+          elements,
+          appState,
+          files,
+        })
+      }
     },
     WAIT,
   )
@@ -132,9 +146,10 @@ const Editor: React.FC<
   }, [])
 
   return (
-    <div className={cn('w-screen h-screen pt-5', { 'bg-[#121212]': theme === 'dark' })}>
+    <div className={cn('w-screen h-screen pt-5 relative', { 'bg-[#121212]': theme === 'dark' })}>
       {excalidrawData && libraryItems && (
         <Excalidraw
+          excalidrawAPI={(api) => setExcalidrawAPI(api)}
           langCode={getLangCode((logseq.settings as unknown as PluginSettings)?.langCode)}
           initialData={{
             elements: excalidrawData.elements || [],
@@ -182,6 +197,11 @@ const Editor: React.FC<
           </WelcomeScreen>
         </Excalidraw>
       )}
+      <SlidesPreview
+        elements={currentExcalidrawData?.elements}
+        files={currentExcalidrawData?.files ?? null}
+        api={excalidrawAPI}
+      />
     </div>
   )
 }

src/components/SlidesPreview.tsx

@@ -0,0 +1,44 @@
+import { exportToBlob } from '@excalidraw/excalidraw'
+import { type ExcalidrawElement } from '@excalidraw/excalidraw/types/element/types'
+import type { BinaryFiles, ExcalidrawImperativeAPI } from '@excalidraw/excalidraw/types/types'
+import React, { useState } from 'react'
+
+const SlidesPreview = ({
+  elements,
+  files,
+  api,
+}: {
+  elements?: readonly ExcalidrawElement[]
+  files: BinaryFiles | null
+  api: ExcalidrawImperativeAPI | null
+}) => {
+  console.log('[faiz:] === elements', elements)
+  const frames = elements?.filter((element) => element.type === 'frame')
+  console.log('[faiz:] === frames', frames)
+  const images = frames?.map((frame) => {
+    return exportToBlob({
+      elements: [frame],
+      files,
+    })
+  })
+  console.log('[faiz:] === images', images)
+  const onClickFrame = (frame) => {
+    console.log('[faiz:] === api', api)
+    api?.scrollToContent(frame, {
+      animate: true,
+      duration: 500,
+      fitToViewport: true,
+    })
+  }
+  return (
+    <div className="fixed h-1/2 top-1/3 right-0 w-28 text-white z-50 gap-2 flex flex-col">
+      {frames?.map((frame) => (
+        <div key={frame.id} onClick={() => onClickFrame(frame)}>
+          {frame.id}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default SlidesPreview