fix(whiteboard): some shortcut conflicting issues

src/main/frontend/handler/whiteboard.cljs

@@ -153,7 +153,7 @@
    By default it will be placed next to the given shape id"
   [block-uuid source-shape & {:keys [link? bottom?]}]
   (let [app (state/active-tldraw-app)
-        api (.-api app)
+        ^js api (.-api app)
         point (-> (.getShapeById app source-shape)
                   (.-bounds)
                   ((fn [bounds] (if bottom?

src/main/frontend/modules/shortcut/before.cljs

@@ -33,7 +33,5 @@
   [f]
   (fn [e]
     (when (or (contains? #{:srs :page-histories} (state/get-modal-id))
-              (not (state/block-component-editing?))
-              ;; when in whiteboard mode and editing a logseq block
-              (and (state/active-tldraw-app) (state/tldraw-editing-logseq-block?)))
+              (not (state/block-component-editing?)))
       (f e))))

src/main/frontend/state.cljs

@@ -1429,7 +1429,8 @@ Similar to re-frame subscriptions"
 
 (defn active-tldraw-app
   []
-  ^js js/window.tln)
+  (when-let [tldraw-el (.closest js/document.activeElement ".logseq-tldraw[data-tlapp]")]
+    (gobj/get js/window.tlapps (.. tldraw-el -dataset -tlapp))))
 
 (defn tldraw-editing-logseq-block?
   []
@@ -1622,9 +1623,14 @@ Similar to re-frame subscriptions"
   [args]
   (set-state! :editor/args args))
 
+(defn whiteboard-active-but-not-editing-portal?
+  []
+  (and (active-tldraw-app) (not (tldraw-editing-logseq-block?))))
+
 (defn block-component-editing?
   []
-  (:block/component-editing-mode? @state))
+  (or (:block/component-editing-mode? @state)
+      (whiteboard-active-but-not-editing-portal?)))
 
 (defn set-block-component-editing-mode!
   [value]

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

@@ -7,6 +7,7 @@ import {
   TLReactCallbacks,
   TLReactComponents,
   TLReactToolConstructor,
+  useApp,
 } from '@tldraw/react'
 import * as React from 'react'
 import { AppUI } from './components/AppUI'
@@ -61,6 +62,20 @@ interface LogseqTldrawProps {
   onPersist?: TLReactCallbacks<Shape>['onPersist']
 }
 
+const AppImpl = () => {
+  const ref = React.useRef<HTMLDivElement>(null)
+  const app = useApp()
+  return (
+    <ContextMenu collisionRef={ref}>
+      <div ref={ref} className="logseq-tldraw logseq-tldraw-wrapper" data-tlapp={app.uuid}>
+        <AppCanvas components={components}>
+          <AppUI />
+        </AppCanvas>
+      </div>
+    </ContextMenu>
+  )
+}
+
 const AppInner = ({
   onPersist,
   model,
@@ -69,7 +84,6 @@ const AppInner = ({
   const onDrop = useDrop()
   const onPaste = usePaste()
   const onQuickAdd = useQuickAdd()
-  const ref = React.useRef<HTMLDivElement>(null)
 
   const onPersistOnDiff: TLReactCallbacks<Shape>['onPersist'] = React.useCallback(
     (app, info) => {
@@ -91,13 +105,7 @@ const AppInner = ({
       model={model}
       {...rest}
     >
-      <ContextMenu collisionRef={ref}>
-        <div ref={ref} className="logseq-tldraw logseq-tldraw-wrapper">
-          <AppCanvas components={components}>
-            <AppUI />
-          </AppCanvas>
-        </div>
-      </ContextMenu>
+      <AppImpl />
     </AppProvider>
   )
 }

tldraw/packages/core/src/lib/TLApp/TLApp.ts

@@ -17,7 +17,7 @@ import type {
   TLSubscriptionEventName,
 } from '../../types'
 import { AlignType, DistributeType } from '../../types'
-import { BoundsUtils, createNewLineBinding, isNonNullable, KeyUtils } from '../../utils'
+import { BoundsUtils, createNewLineBinding, isNonNullable, KeyUtils, uniqueId } from '../../utils'
 import type { TLShape, TLShapeConstructor, TLShapeModel } from '../shapes'
 import { TLApi } from '../TLApi'
 import { TLCursors } from '../TLCursors'
@@ -69,7 +69,8 @@ export class TLApp<
   }
 
   keybindingRegistered = false
-
+  uuid = uniqueId()
+  
   static id = 'app'
   static initial = 'select'
 

tldraw/packages/react/src/hooks/useSetup.ts

@@ -2,7 +2,7 @@ import * as React from 'react'
 import type { TLAppPropsWithApp, TLAppPropsWithoutApp } from '../components'
 import type { TLReactApp, TLReactShape } from '../lib'
 
-declare const window: Window & { tln?: TLReactApp<any> }
+declare const window: Window & { tlapps?: Record<string, TLReactApp<any>> }
 
 export function useSetup<
   S extends TLReactShape = TLReactShape,
@@ -27,11 +27,16 @@ export function useSetup<
     const unsubs: (() => void)[] = []
     if (!app) return
     app.history.reset()
-    if (typeof window !== undefined) window['tln'] = app
+    if (typeof window !== undefined) {
+      window['tlapps'] = window['tlapps'] || {}
+      window['tlapps'][app.uuid] = app
+    }
     if (onMount) onMount(app, null)
     return () => {
       unsubs.forEach(unsub => unsub())
-      window['tln'] = undefined
+      if (typeof window !== undefined && window['tlapps']) {
+        delete window['tlapps'][app.uuid]
+      }
     }
   }, [app])