expose app to outside using a callback

tldraw/apps/tldraw-logseq/src/app.tsx

@@ -1,11 +1,12 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { TLDocumentModel } from '@tldraw/core'
-import type {
+import {
   TLReactCallbacks,
   TLReactComponents,
   TLReactShapeConstructor,
   TLReactToolConstructor,
+  useApp,
 } from '@tldraw/react'
 import { AppCanvas, AppProvider } from '@tldraw/react'
 import * as React from 'react'
@@ -89,22 +90,32 @@ interface LogseqTldrawProps {
   model?: TLDocumentModel<Shape>
   onMount?: TLReactCallbacks<Shape>['onMount']
   onPersist?: TLReactCallbacks<Shape>['onPersist']
+  onApp?: (app: any) => void
+}
+
+function TldrawAppHacker({ onApp }: { onApp: (app: any) => void }) {
+  const app = useApp()
+
+  React.useEffect(() => {
+    onApp(app)
+  }, [app])
+
+  return null
 }
 
 export const App = function App(props: LogseqTldrawProps): JSX.Element {
   const onFileDrop = useFileDrop()
 
-  const Page = React.useMemo(() => React.memo(props.PageComponent), []);
+  const Page = React.useMemo(() => React.memo(props.PageComponent), [])
 
   return (
-    <LogseqContext.Provider
-      value={{ Page, search: props.searchHandler }}
-    >
+    <LogseqContext.Provider value={{ Page, search: props.searchHandler }}>
       <AppProvider Shapes={shapes} Tools={tools} onFileDrop={onFileDrop} {...props}>
         <div className="logseq-tldraw logseq-tldraw-wrapper">
           <AppCanvas components={components} />
           <AppUI />
         </div>
+        <TldrawAppHacker onApp={props.onApp ?? (() => null)} />
       </AppProvider>
     </LogseqContext.Provider>
   )

tldraw/demo/src/App.jsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { App as TldrawApp } from 'tldraw-logseq'
 
 const storingKey = 'playground.index'
@@ -48,6 +49,8 @@ const Page = props => {
 }
 
 export default function App() {
+  const [app, setApp] = React.useState();
+  console.log(app) // demos how to get the Tldraw app instance
   return (
     <div className="h-screen w-screen">
       <TldrawApp
@@ -55,6 +58,7 @@ export default function App() {
         searchHandler={q => (q ? list : [])}
         model={documentModel}
         onPersist={onPersist}
+        onApp={setApp}
       />
     </div>
   )