enhance (wip): customizable shortcuts

src/main/frontend/components/shortcut.cljs

@@ -181,4 +181,5 @@
    (shortcut-table :shortcut.category/block-selection true)
    (shortcut-table :shortcut.category/formatting true)
    (shortcut-table :shortcut.category/toggle true)
+   (shortcut-table :shortcut.category/whiteboard true)
    (shortcut-table :shortcut.category/others true)])

src/main/frontend/components/whiteboard.cljs

@@ -11,6 +11,7 @@
             [frontend.handler.common :as common-handler]
             [frontend.handler.route :as route-handler]
             [frontend.handler.whiteboard :as whiteboard-handler]
+            [frontend.modules.shortcut.core :as shortcut]
             [frontend.rum :refer [use-bounding-client-rect use-breakpoint
                                   use-click-outside]]
             [frontend.state :as state]
@@ -290,7 +291,8 @@
                                                                       {:extension? true})])})]]
      (tldraw-app page-name block-id)]))
 
-(rum/defc whiteboard-route
+(rum/defc whiteboard-route <
+(shortcut/mixin :shortcut.handler/whiteboard)
   [route-match]
   (let [name (get-in route-match [:parameters :path :name])
         {:keys [block-id]} (get-in route-match [:parameters :query])]

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

@@ -71,6 +71,21 @@
    :pdf/find                     {:binding "alt+f"
                                   :fn      pdf-utils/open-finder}
 
+   :whiteboard/lock              {:binding "mod+l"
+                                  :fn      #(.setLocked (state/active-tldraw-app) true)}
+
+   :whiteboard/unlock            {:binding "mod+shift+l"
+                                  :fn      #(.setLocked (state/active-tldraw-app) false)}
+
+   :whiteboard/group             {:binding "mod+g"
+                                  :fn      #(.doGroup (.-api ^js (state/active-tldraw-app)))}
+
+   :whiteboard/ungroup           {:binding "mod+shift+g"
+                                  :fn      #(.unGroup (.-api ^js (state/active-tldraw-app)))}
+
+   :whiteboard/toggle-grid       {:binding "mod+shift+g"
+                                  :fn      #(.toggleGrid (.-api ^js (state/active-tldraw-app)))}
+
    :auto-complete/complete       {:binding "enter"
                                   :fn      ui-handler/auto-complete-complete}
 
@@ -338,7 +353,7 @@
 
    :graph/re-index                 {:fn (fn []
                                           (p/let [multiple-windows? (ipc/ipc "graphHasMultipleWindows" (state/get-current-repo))]
-                                                 (state/pub-event! [:graph/ask-for-re-index (atom multiple-windows?) nil])))
+                                            (state/pub-event! [:graph/ask-for-re-index (atom multiple-windows?) nil])))
                                     :binding false}
 
    :command/run                    {:binding "mod+shift+1"
@@ -507,6 +522,13 @@
                              :pdf/find])
         (with-meta {:before m/enable-when-not-editing-mode!}))
 
+    :shortcut.handler/whiteboard
+    (-> (build-category-map [:whiteboard/lock
+                             :whiteboard/unlock
+                             :whiteboard/group
+                             :whiteboard/ungroup])
+        (with-meta {:before m/enable-when-not-editing-mode!}))
+
     :shortcut.handler/auto-complete
     (build-category-map [:auto-complete/complete
                          :auto-complete/prev
@@ -552,8 +574,7 @@
 
     :shortcut.handler/editor-global
     (->
-     (build-category-map [
-                          :graph/export-as-html
+     (build-category-map [:graph/export-as-html
                           :graph/open
                           :graph/remove
                           :graph/add
@@ -759,6 +780,12 @@
     :ui/toggle-settings
     :ui/toggle-contents]
 
+   :shortcut.category/whiteboard
+   [:whiteboard/lock
+    :whiteboard/unlock
+    :whiteboard/group
+    :whiteboard/ungroup]
+   
    :shortcut.category/others
    [:pdf/previous-page
     :pdf/next-page

src/main/frontend/modules/shortcut/dicts.cljc

@@ -79,6 +79,11 @@
    :editor/zoom-in                 "Zoom in editing block / Forwards otherwise"
    :editor/zoom-out                "Zoom out editing block / Backwards otherwise"
    :editor/toggle-undo-redo-mode   "Toggle undo redo mode (global or page only)"
+   :whiteboard/lock                "Lock selected elements"
+   :whiteboard/unlock              "Unlock selected elements"
+   :whiteboard/group               "Group selected elements"
+   :whiteboard/ungroup             "Ungroup selected elements"
+   :whiteboard/toggle-grid         "Toggle the canvas grid"
    :ui/toggle-brackets             "Toggle whether to display brackets"
    :go/search-in-page              "Search blocks in the current page"
    :go/electron-find-in-page       "Find text in page"
@@ -145,6 +150,7 @@
    :shortcut.category/block-command-editing "Block command editing"
    :shortcut.category/block-selection "Block selection (press Esc to quit selection)"
    :shortcut.category/toggle "Toggle"
+   :shortcut.category/whiteboard "Whiteboard"
    :shortcut.category/others "Others"})
 
 (def ^:large-vars/data-var dicts

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

@@ -77,7 +77,6 @@ export class TLApp<
     this.notify('mount', null)
   }
 
-  keybindingRegistered = false
   uuid = uniqueId()
 
   readOnly: boolean | undefined
@@ -93,16 +92,7 @@ export class TLApp<
 
   Tools: TLToolConstructor<S, K>[] = []
 
-  dispose() {
-    super.dispose()
-    this.keybindingRegistered = false
-    return this
-  }
-
   initKeyboardShortcuts() {
-    if (this.keybindingRegistered) {
-      return
-    }
     const ownShortcuts: TLShortcut<S, K>[] = [
       {
         keys: 'shift+0',
@@ -187,63 +177,7 @@ export class TLApp<
           }
         },
       },
-      {
-        keys: 'mod+g',
-        fn: () => {
-          this.api.doGroup()
-        },
-      },
-      {
-        keys: 'mod+shift+g',
-        fn: () => {
-          this.api.unGroup()
-        },
-      },
-      {
-        keys: 'shift+g',
-        fn: () => {
-          this.api.toggleGrid()
-        },
-      },
-      {
-        keys: 'mod+l',
-        fn: () => {
-          this.setLocked(true)
-        },
-      },
-      {
-        keys: 'mod+shift+l',
-        fn: () => {
-          this.setLocked(false)
-        },
-      },
     ]
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    const shortcuts = (this.constructor['shortcuts'] || []) as TLShortcut<S, K>[]
-    const childrenShortcuts = Array.from(this.children.values())
-      // @ts-expect-error ???
-      .filter(c => c.constructor['shortcut'])
-      .map(child => {
-        return {
-          // @ts-expect-error ???
-          keys: child.constructor['shortcut'] as string | string[],
-          fn: (_: any, __: any, e: KeyboardEvent) => {
-            this.selectTool(child.id)
-            // hack: allows logseq related shortcut combinations to work
-            // fixme?: unsure if it will cause unexpected issues
-            // e.stopPropagation()
-          },
-        }
-      })
-    this._disposables.push(
-      ...[...ownShortcuts, ...shortcuts, ...childrenShortcuts].map(({ keys, fn }) => {
-        return KeyUtils.registerShortcut(keys, e => {
-          fn(this, this, e)
-        })
-      })
-    )
-    this.keybindingRegistered = true
   }
 
   /* --------------------- History -------------------- */

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

@@ -11,7 +11,6 @@ export function useAppSetup<S extends TLReactShape, R extends TLReactApp<S> = TL
   )
 
   React.useLayoutEffect(() => {
-    app.initKeyboardShortcuts()
     return () => {
       app.dispose()
     }