fix: some api cleanup

src/main/frontend/extensions/tldraw.cljs

@@ -37,11 +37,11 @@
                                    s (js/JSON.stringify document)]
                                (draw-handler/save-draw! file s)))
                 :model data
-                :onApp (fn [app]
-                         (state/set-state! [:ui/whiteboards (::id state)] app)
-                         (gobj/set app "pubEvent"
-                                   (fn [type & args]
-                                     (state/pub-event! (cons (keyword type) args)))))})])))
+                :onMount (fn [app]
+                           (state/set-state! [:ui/whiteboards (::id state)] app)
+                           (gobj/set app "pubEvent"
+                                     (fn [type & args]
+                                       (state/pub-event! (cons (keyword type) args)))))})])))
 
 (rum/defc tldraw-app
   [option]

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

@@ -2,13 +2,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { TLDocumentModel } from '@tldraw/core'
 import {
+  AppCanvas,
+  AppProvider,
   TLReactCallbacks,
   TLReactComponents,
   TLReactShapeConstructor,
   TLReactToolConstructor,
-  useApp,
 } from '@tldraw/react'
-import { AppCanvas, AppProvider } from '@tldraw/react'
 import * as React from 'react'
 import { AppUI } from '~components/AppUI'
 import { ContextBar } from '~components/ContextBar/ContextBar'
@@ -22,6 +22,7 @@ import {
   HighlighterShape,
   ImageShape,
   LineShape,
+  LogseqPortalShape,
   PenShape,
   PolygonShape,
   PolylineShape,
@@ -29,7 +30,6 @@ import {
   StarShape,
   TextShape,
   YouTubeShape,
-  LogseqPortalShape,
 } from '~lib/shapes'
 import {
   BoxTool,
@@ -90,17 +90,6 @@ 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 {
@@ -110,12 +99,17 @@ export const App = function App(props: LogseqTldrawProps): JSX.Element {
 
   return (
     <LogseqContext.Provider value={{ Page, search: props.searchHandler }}>
-      <AppProvider Shapes={shapes} Tools={tools} onFileDrop={onFileDrop} {...props}>
+      <AppProvider
+        onMount={props.onMount}
+        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/main.jsx

@@ -6,8 +6,6 @@ import App from './App'
 
 import './index.css'
 
-ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-)
+// Not using strict mode because it may cause side effect problems
+// https://twitter.com/schickling/status/1523378971458498560
+ReactDOM.createRoot(document.getElementById('root')).render(<App />)