Merge pull request #40 from openpatch/copilot/add-vscode-extension-learningmap

Add VS Code extension platform for editing .learningmap files (with browser support and fully configurable keyboard shortcuts)

Author: mikebarkmin

README.md

@@ -9,6 +9,13 @@ explore learning pathways. It is developed by
 - **Repository:** https://github.com/openpath/learningmap
 - **Community**: https://matrix.to/#/#openpatch:matrix.org
 
+## Platforms
+
+- **Web App**: Create and share learningmaps at [learningmap.app](https://learningmap.app)
+- **VS Code Extension**: Edit `.learningmap` files locally in VS Code (see [platforms/vscode](platforms/vscode))
+- **React Component**: Integrate learningmap into your own React app (see [packages/learningmap](packages/learningmap))
+- **Web Component**: Use learningmap in any web application (see [packages/web-component](packages/web-component))
+
 ## Documentation
 
 If you want to work on the documentation, run the

docs/book/development.md

@@ -40,7 +40,8 @@ learningmap/
 │   ├── learningmap/          # Core React component library
 │   └── web-component/        # Web component wrapper
 ├── platforms/
-│   └── web/                  # Web application (learningmap.app)
+│   ├── web/                  # Web application (learningmap.app)
+│   └── vscode/               # VS Code extension
 ├── docs/                     # Documentation (Hyperbook)
 └── scripts/                  # Build and development scripts
 ```
@@ -88,6 +89,23 @@ pnpm docs:dev
 
 The documentation is built with [Hyperbook](https://hyperbook.openpatch.org) and is located in the `docs/` directory.
 
+### VS Code Extension
+
+To develop the VS Code extension:
+
+1. Build the extension:
+   ```bash
+   pnpm --filter learningmap-vscode build
+   ```
+
+2. Open the `platforms/vscode` directory in VS Code
+
+3. Press F5 to launch the Extension Development Host
+
+4. Open or create a `.learningmap` file to test the editor
+
+See [platforms/vscode/DEVELOPMENT.md](../../platforms/vscode/DEVELOPMENT.md) for more details.
+
 ## Testing Your Changes
 
 1. **Type-check**: `pnpm lint`

docs/book/react/index.md

@@ -46,6 +46,65 @@ function App() {
 | `roadmapData` | `string \| RoadmapData` | `undefined` | Initial roadmap data (JSON string or object) |
 | `language` | `string` | `"en"` | UI language (`"en"` or `"de"`) |
 | `jsonStore` | `string` | `"https://json.openpatch.org"` | URL for JSON storage service |
+| `disableSharing` | `boolean` | `false` | Hide the share button (useful in environments without external sharing) |
+| `disableFileOperations` | `boolean` | `false` | Hide open and download buttons (useful when file operations are handled externally) |
+| `keyBindings` | `Partial<KeyBindings>` | `undefined` | Custom keyboard shortcuts (see [Keyboard Shortcuts](#keyboard-shortcuts)) |
+
+#### Keyboard Shortcuts
+
+The editor includes many keyboard shortcuts for efficient editing. You can customize these shortcuts by providing a `keyBindings` prop:
+
+```tsx
+import { LearningMapEditor, KeyBindings } from '@learningmap/learningmap';
+
+const customKeyBindings: Partial<KeyBindings> = {
+  save: undefined, // Disable save shortcut
+  addTaskNode: { key: 't', ctrl: true }, // Change from Ctrl+1 to Ctrl+T
+};
+
+<LearningMapEditor keyBindings={customKeyBindings} />
+```
+
+**Default Keyboard Shortcuts:**
+
+| Action | Default Shortcut | KeyBinding Property |
+|--------|-----------------|-------------------|
+| Add Task Node | `Ctrl+1` | `addTaskNode` |
+| Add Topic Node | `Ctrl+2` | `addTopicNode` |
+| Add Image Node | `Ctrl+3` | `addImageNode` |
+| Add Text Node | `Ctrl+4` | `addTextNode` |
+| Save | `Ctrl+S` | `save` |
+| Undo | `Ctrl+Z` | `undo` |
+| Redo | `Ctrl+Y` | `redo` |
+| Toggle Preview | `Ctrl+P` | `togglePreview` |
+| Toggle Debug | `Ctrl+D` | `toggleDebug` |
+| Zoom In | `Ctrl++` | `zoomIn` |
+| Zoom Out | `Ctrl+-` | `zoomOut` |
+| Reset Zoom | `Ctrl+0` | `resetZoom` |
+| Toggle Grid | `Ctrl+'` | `toggleGrid` |
+| Reset Map | `Ctrl+Delete` | `resetMap` |
+| Cut | `Ctrl+X` | `cut` |
+| Copy | `Ctrl+C` | `copy` |
+| Paste | `Ctrl+V` | `paste` |
+| Select All | `Ctrl+A` | `selectAll` |
+| Fit View | `Shift+!` | `fitView` |
+| Zoom to Selection | `Shift+@` | `zoomToSelection` |
+| Delete Selected | `Delete` | `deleteSelected` |
+| Help | `Ctrl+?` | `help` |
+
+**KeyBinding Type:**
+
+```typescript
+interface KeyBinding {
+  key: string;
+  ctrl?: boolean;
+  shift?: boolean;
+  alt?: boolean;
+  meta?: boolean;
+}
+```
+
+To disable a shortcut, set it to `undefined`. To customize, provide a `KeyBinding` object with the desired key combination.
 
 #### Features
 

docs/book/web-component/index.md

@@ -96,6 +96,22 @@ Interactive editor for creating and editing learning maps.
 |-----------|------|---------|-------------|
 | `roadmap-data` | `string` | `undefined` | JSON string of roadmap data |
 | `language` | `string` | `"en"` | UI language (`"en"` or `"de"`) |
+| `json-store` | `string` | `"https://json.openpatch.org"` | URL for JSON storage service |
+| `disable-sharing` | `boolean` | `false` | Hide the share button (useful in environments without external sharing) |
+| `disable-file-operations` | `boolean` | `false` | Hide open and download buttons (useful when file operations are handled externally) |
+| `key-bindings` | `string` | `undefined` | JSON string of custom keyboard shortcuts (see React docs for KeyBindings type) |
+
+#### Customizing Keyboard Shortcuts
+
+You can customize keyboard shortcuts by passing a JSON string to the `key-bindings` attribute:
+
+```html
+<hyperbook-learningmap-editor
+  key-bindings='{"save": null, "addTaskNode": {"key": "t", "ctrl": true}}'
+></hyperbook-learningmap-editor>
+```
+
+This example disables the save shortcut and changes the "add task" shortcut from `Ctrl+1` to `Ctrl+T`. See the React package documentation for a complete list of available shortcuts and the KeyBindings type definition.
 
 #### Events
 

packages/learningmap/src/EditorToolbar.tsx

@@ -1,7 +1,5 @@
 import React from "react";
 import { Menu, MenuButton, MenuDivider, MenuItem, SubMenu } from "@szhsin/react-menu";
-import "@szhsin/react-menu/dist/index.css";
-import '@szhsin/react-menu/dist/transitions/zoom.css';
 import { Plus, Bug, Settings, Eye, Menu as MenuI, FolderOpen, Download, ImageDown, ExternalLink, Share2, RotateCcw } from "lucide-react";
 import { getTranslations } from "./translations";
 import { useEditorStore } from "./editorStore";
@@ -13,10 +11,14 @@ import { getZIndexForNodeType } from "./zIndexHelper";
 
 interface EditorToolbarProps {
   defaultLanguage?: string;
+  disableSharing?: boolean;
+  disableFileOperations?: boolean;
 }
 
 export const EditorToolbar: React.FC<EditorToolbarProps> = ({
   defaultLanguage = "en",
+  disableSharing = false,
+  disableFileOperations = false,
 }) => {
   const { screenToFlowPosition } = useReactFlow();
 
@@ -112,15 +114,21 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
       </div>
       <div className="toolbar-group">
         <Menu menuButton={<MenuButton className="toolbar-button"><MenuI /></MenuButton>}>
-          <MenuItem onClick={openRoadmap}>
-            <FolderOpen size={16} /> <span>{t.open}</span>
-          </MenuItem>
-          <MenuItem onClick={downloadRoadmap}>
-            <Download size={16} /> <span>{t.download}</span>
-          </MenuItem>
-          <MenuItem onClick={postToJsonStore}>
-            <Share2 size={16} /> <span>{t.share}</span>
-          </MenuItem>
+          {!disableFileOperations && (
+            <MenuItem onClick={openRoadmap}>
+              <FolderOpen size={16} /> <span>{t.open}</span>
+            </MenuItem>
+          )}
+          {!disableFileOperations && (
+            <MenuItem onClick={downloadRoadmap}>
+              <Download size={16} /> <span>{t.download}</span>
+            </MenuItem>
+          )}
+          {!disableSharing && (
+            <MenuItem onClick={postToJsonStore}>
+              <Share2 size={16} /> <span>{t.share}</span>
+            </MenuItem>
+          )}
           <MenuDivider />
           <MenuItem onClick={onReset}>
             <RotateCcw size={16} /> <span>{t.reset}</span>