[chore] repo-map.tldr, vscode extension improvements (#332)

* v1.1.1

* add repo-map.tldr, minor changes to extension commands

.gitignore

@@ -11,6 +11,7 @@ coverage
 
 .vercel
 .next
+apps/www/public/workbox-*
 apps/www/public/worker-*
 apps/www/public/sw.js
 apps/www/public/sw.js.map

apps/vscode/editor/src/app.tsx

@@ -15,17 +15,17 @@ export default function App(): JSX.Element {
   )
 
   // When the editor mounts, save the state instance in a ref.
-  const handleMount = React.useCallback((state: TldrawApp) => {
-    rTldrawApp.current = state
+  const handleMount = React.useCallback((app: TldrawApp) => {
+    rTldrawApp.current = app
   }, [])
 
   // When the editor's document changes, post the stringified document to the vscode extension.
-  const handlePersist = React.useCallback((state: TldrawApp) => {
+  const handlePersist = React.useCallback((app: TldrawApp) => {
     vscode.postMessage({
       type: 'editorUpdated',
       text: JSON.stringify({
         ...currentFile,
-        document: state.document,
+        document: app.document,
         assets: {},
       } as TDFile),
     } as MessageFromWebview)
@@ -37,8 +37,9 @@ export default function App(): JSX.Element {
       if (data.type === 'openedFile') {
         try {
           const { document } = JSON.parse(data.text) as TDFile
-          const state = rTldrawApp.current!
-          state.updateDocument(document)
+          const app = rTldrawApp.current!
+          app.updateDocument(document)
+          app.zoomToFit()
         } catch (e) {
           console.warn('Failed to parse file:', data.text)
         }

apps/vscode/extension/package.json

@@ -2,7 +2,7 @@
 	"name": "tldraw-vscode",
 	"displayName": "tldraw",
 	"description": "The tldraw Extension for VS Code.",
-	"version": "1.1.0",
+	"version": "1.1.1",
 	"license": "MIT",
 	"publisher": "tldraw-org",
 	"repository": {
@@ -52,6 +52,13 @@
 			}
 		],
 		"keybindings": [
+			{
+				"key": "cmd+shift+d",
+				"title": "Zoom In",
+				"command": "tldraw.tldr.toggleDarkMode",
+				"category": "tldraw",
+				"enablement": "resourceExtname == .tldr"
+			},
 			{
 				"key": "cmd+numpad_add",
 				"title": "Zoom In",
@@ -119,4 +126,4 @@
 		"vsce": "^2.2.0"
 	},
 	"gitHead": "325008ff82bd27b63d625ad1b760f8871fb71af9"
-}
+}

apps/vscode/extension/src/TldrawEditorProvider.ts

@@ -15,10 +15,16 @@ export class TldrawEditorProvider implements vscode.CustomTextEditorProvider {
   private static readonly viewType = 'tldraw.tldr'
 
   public static register = (context: vscode.ExtensionContext): vscode.Disposable => {
-    // Register the 'Create new Tldraw file' command, which creates
-    // a temporary .tldr file and opens it in the editor.
-    vscode.commands.registerCommand('tldraw.tldr.new', () => {
-      const id = TldrawEditorProvider.newTDFileId++
+    // Several commands exist only to prevent the default keyboard shortcuts
+    const noopCmds = ['zoomIn', 'zoomOut', 'resetZoom', 'toggleDarkMode']
+    noopCmds.forEach((name) =>
+      vscode.commands.registerCommand(`${this.viewType}.${name}`, () => null)
+    )
+
+    // Register the 'Create New File' command, which creates a temporary
+    // .tldr file and opens it in the editor.
+    vscode.commands.registerCommand(`${this.viewType}.new`, () => {
+      const id = this.newTDFileId++
       const name = id > 1 ? `New Document ${id}.tldr` : `New Document.tldr`
 
       const workspaceFolders = vscode.workspace.workspaceFolders
@@ -27,34 +33,17 @@ export class TldrawEditorProvider implements vscode.CustomTextEditorProvider {
       vscode.commands.executeCommand(
         'vscode.openWith',
         vscode.Uri.joinPath(path, name).with({ scheme: 'untitled' }),
-        TldrawEditorProvider.viewType
+        this.viewType
       )
     })
 
-    vscode.commands.registerCommand('tldraw.tldr.zoomIn', () => {
-      // Noop
-    })
-
-    vscode.commands.registerCommand('tldraw.tldr.zoomOut', () => {
-      // Noop
-    })
-
-    vscode.commands.registerCommand('tldraw.tldr.resetZoom', () => {
-      // Noop
-    })
-
     // Register our editor provider, indicating to VS Code that we can
     // handle files with the .tldr extension.
     return vscode.window.registerCustomEditorProvider(
-      TldrawEditorProvider.viewType,
+      this.viewType,
       new TldrawEditorProvider(context),
       {
-        webviewOptions: {
-          // See https://code.visualstudio.com/api/extension-guides/webview#retaincontextwhenhidden
-          retainContextWhenHidden: true,
-        },
-
-        // See https://code.visualstudio.com/api/extension-guides/custom-editors#custom-editor-lifecycle
+        webviewOptions: { retainContextWhenHidden: true },
         supportsMultipleEditorsPerDocument: true,
       }
     )