@actualwave/react-native-codeditor 1.0.0 → 1.1.0

package/README.md

@@ -216,6 +216,7 @@ export default function EditorScreen() {
 | `onLog` | `(...args: unknown[]) => void` | Receives `window.log(...)` calls from inside the WebView. |
 | `onError` | `(error: unknown) => void` | Receives `window.onerror` events from inside the WebView. |
 | `onSelectionChange` | `(text: string) => void` | Optional. Called when the user changes the selection; receives the selected text (empty string when selection collapses). |
+| `onShortcut` | `(name: string) => void` | Optional. Called when a keyboard shortcut registered via `api.editor.registerShortcut()` is triggered. Receives the name string passed at registration time. |
 
 ### Editor configuration
 
@@ -426,6 +427,45 @@ api.editor.setSoftKeyboard(enabled: boolean): Promise<void>
 // Enable or disable the soft keyboard for the WebView editor area.
 ```
 
+### Keyboard shortcuts
+
+Register keyboard shortcuts from the React Native side. When triggered inside the editor,
+the shortcut fires `onShortcut` on the `<CodeEditor>` component with the registered name.
+
+Key strings follow [CodeMirror's key binding format](https://codemirror.net/docs/ref/#view.KeyBinding):
+`Mod` resolves to `Cmd` on macOS / iOS and `Ctrl` on Android / Windows.
+
+```ts
+api.editor.registerShortcut(key: string, name: string): Promise<void>
+// Register a keyboard shortcut. When the key combination is pressed, onShortcut(name)
+// fires on the React Native side.
+// e.g. await api.editor.registerShortcut('Mod-s', 'save')
+//      await api.editor.registerShortcut('Mod-Enter', 'run')
+//      await api.editor.registerShortcut('Mod-Shift-Enter', 'fullRun')
+
+api.editor.unregisterShortcut(key: string): Promise<void>
+// Remove a previously registered shortcut.
+```
+
+**Example:**
+
+```tsx
+<CodeEditor
+  onInitialized={(api) => {
+    void api.editor.registerShortcut('Mod-s', 'save');
+    void api.editor.registerShortcut('Mod-Enter', 'run');
+  }}
+  onShortcut={(name) => {
+    if (name === 'save') handleSave();
+    if (name === 'run') handleRun();
+  }}
+  ...
+/>
+```
+
+Shortcuts are registered with `Prec.highest` so they take priority over CodeMirror's
+built-in key bindings.
+
 ### Advanced
 
 ```ts

package/lib/module/CodeEditor.js

@@ -38,6 +38,7 @@ const CodeEditor = ({
   onError,
   onContentUpdate,
   onSelectionChange,
+  onShortcut,
   onWebViewRefUpdated,
   onLoad,
   onLoadStart,
@@ -63,6 +64,7 @@ const CodeEditor = ({
     onInitialized,
     onContentUpdate,
     onSelectionChange,
+    onShortcut,
     onHistorySizeUpdate,
     onLog,
     onError,
@@ -72,6 +74,7 @@ const CodeEditor = ({
     onInitialized,
     onContentUpdate,
     onSelectionChange,
+    onShortcut,
     onHistorySizeUpdate,
     onLog,
     onError,
@@ -103,6 +106,7 @@ const CodeEditor = ({
         callbacksRef.current.onContentUpdate(value);
       },
       onSelectionChange: text => callbacksRef.current.onSelectionChange?.(text),
+      onShortcut: name => callbacksRef.current.onShortcut?.(name),
       onHistorySizeUpdate: size => callbacksRef.current.onHistorySizeUpdate(size),
       onLog: (...args) => callbacksRef.current.onLog(...args),
       onError: error => callbacksRef.current.onError(error)

package/lib/module/WebViewAPI.js

@@ -99,6 +99,10 @@ class WebViewAPI {
           this.handlers.onSelectionChange?.(typeof parsed.data === 'string' ? parsed.data : '');
           return;
         }
+        if (parsed?.type === '__shortcut__') {
+          this.handlers.onShortcut?.(typeof parsed.data === 'string' ? parsed.data : '');
+          return;
+        }
       } catch {
         // not JSON — fall through to DDA
       }

package/lib/typescript/src/CodeEditor.d.ts

@@ -9,6 +9,7 @@ export interface CodeEditorProps {
     onError: (error: unknown) => void;
     onContentUpdate: (content: string) => void;
     onSelectionChange?: (text: string) => void;
+    onShortcut?: (name: string) => void;
     onWebViewRefUpdated?: (webView: WebView | null) => void;
     onLoad?: (event: unknown) => void;
     onLoadStart?: (event: unknown) => void;
@@ -28,6 +29,6 @@ export interface CodeEditorProps {
     /** Override the default editor HTML URI (useful on iOS where the bundle path varies). */
     editorUri?: string;
 }
-declare const CodeEditor: ({ onInitialized, onHistorySizeUpdate, onLog, onError, onContentUpdate, onSelectionChange, onWebViewRefUpdated, onLoad, onLoadStart, onLoadProgress, onLoadEnd, onNavigationStateChange, renderBlockingView, language, extensions, theme, content, viewport, allowFileAccess, editorUri, }: CodeEditorProps) => import("react/jsx-runtime").JSX.Element;
+declare const CodeEditor: ({ onInitialized, onHistorySizeUpdate, onLog, onError, onContentUpdate, onSelectionChange, onShortcut, onWebViewRefUpdated, onLoad, onLoadStart, onLoadProgress, onLoadEnd, onNavigationStateChange, renderBlockingView, language, extensions, theme, content, viewport, allowFileAccess, editorUri, }: CodeEditorProps) => import("react/jsx-runtime").JSX.Element;
 export default CodeEditor;
 //# sourceMappingURL=CodeEditor.d.ts.map

package/lib/typescript/src/EditorAPI.d.ts

@@ -60,6 +60,8 @@ export interface EditorAPI {
     startCompletion(): Promise<void>;
     setCompletions(items: CompletionItem[]): Promise<void>;
     setSoftKeyboard(enabled: boolean): Promise<void>;
+    registerShortcut(key: string, name: string): Promise<void>;
+    unregisterShortcut(key: string): Promise<void>;
     loadExtension(moduleName: string): Promise<object>;
     destroy(): Promise<void>;
 }

package/lib/typescript/src/WebViewAPI.d.ts

@@ -4,6 +4,7 @@ export interface WebViewAPIHandlers {
     onHistorySizeUpdate: (size: HistorySize) => void;
     onContentUpdate: (content: string) => void;
     onSelectionChange?: (text: string) => void;
+    onShortcut?: (name: string) => void;
     onLog: (...args: unknown[]) => void;
     onError: (error: unknown) => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actualwave/react-native-codeditor",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "CodeMirror 6 code editor for React Native, embedded in a WebView with a full bidirectional RPC bridge. Offline, no CDN required.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/assets/editor.html

@@ -143,7 +143,7 @@
 
     // Separate compartment for the theme so setTheme and setExtensions never clobber each other.
     // appendConfig adds it to the live state; themeCompartment.reconfigure() updates it in-place.
-    const { Compartment, StateEffect, Transaction } = await requireAsyncModule('@codemirror/state');
+    const { Compartment, StateEffect, Transaction, Prec } = await requireAsyncModule('@codemirror/state');
     const themeCompartment = new Compartment();
     editor.view.dispatch({ effects: StateEffect.appendConfig.of(themeCompartment.of([])) });
 
@@ -189,6 +189,19 @@
       ]),
     });
 
+    // Compartment for shortcuts registered from the React Native side at runtime.
+    const shortcutCompartment = new Compartment();
+    editor.view.dispatch({ effects: StateEffect.appendConfig.of(Prec.highest(shortcutCompartment.of([]))) });
+
+    const _registeredShortcuts = new Map();
+    const _updateShortcutKeymap = () => {
+      const entries = Array.from(_registeredShortcuts.entries()).map(([key, name]) => ({
+        key,
+        run: () => { _rnPost('__shortcut__', name); return true; },
+      }));
+      editor.view.dispatch({ effects: shortcutCompartment.reconfigure(keymap.of(entries)) });
+    };
+
     // Spread EditorController methods directly — getValue, setValue, setLanguage,
     // setExtensions, loadExtension, destroy — then add methods not in EditorController.
     const { getValue, setValue, setLanguage, setExtensions, loadExtension, destroy } = editor;
@@ -344,6 +357,16 @@
           effects: EditorView.scrollIntoView(head, margin !== undefined ? { y: 'center' } : {}),
         });
       },
+
+      registerShortcut: (key, name) => {
+        _registeredShortcuts.set(key, name);
+        _updateShortcutKeymap();
+      },
+
+      unregisterShortcut: (key) => {
+        _registeredShortcuts.delete(key);
+        _updateShortcutKeymap();
+      },
     });
 
     if (config.viewport) {