Remove sharing functionality and add browser support for VS Code extension

- Add disableSharing prop to LearningMapEditor and EditorToolbar components
- Conditionally hide share button when disableSharing is true
- Enable disableSharing in VS Code webview
- Replace Node.js crypto module with Web Crypto API for browser compatibility
- Add "browser" field to package.json for github.dev support
- Use crypto.getRandomValues() which works in both Node.js and browser environments

Co-authored-by: mikebarkmin <2592379+mikebarkmin@users.noreply.github.com>

Author: Copilot

packages/learningmap/src/EditorToolbar.tsx

@@ -13,10 +13,12 @@ import { getZIndexForNodeType } from "./zIndexHelper";
 
 interface EditorToolbarProps {
   defaultLanguage?: string;
+  disableSharing?: boolean;
 }
 
 export const EditorToolbar: React.FC<EditorToolbarProps> = ({
   defaultLanguage = "en",
+  disableSharing = false,
 }) => {
   const { screenToFlowPosition } = useReactFlow();
 
@@ -118,9 +120,11 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
           <MenuItem onClick={downloadRoadmap}>
             <Download size={16} /> <span>{t.download}</span>
           </MenuItem>
-          <MenuItem onClick={postToJsonStore}>
-            <Share2 size={16} /> <span>{t.share}</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>

packages/learningmap/src/LearningMapEditor.tsx

@@ -15,12 +15,14 @@ export interface LearningMapEditorProps {
   roadmapData?: string | RoadmapData;
   language?: string;
   jsonStore?: string;
+  disableSharing?: boolean;
 }
 
 export function LearningMapEditor({
   roadmapData,
   language = "en",
   jsonStore = "https://json.openpatch.org",
+  disableSharing = false,
 }: LearningMapEditorProps) {
   // Only get minimal state needed in this component
   const nodes = useEditorStore(state => state.nodes);
@@ -64,7 +66,7 @@ export function LearningMapEditor({
       <KeyboardShortcuts jsonStore={jsonStore} />
 
       {/* Toolbar */}
-      <EditorToolbar defaultLanguage={language} />
+      <EditorToolbar defaultLanguage={language} disableSharing={disableSharing} />
 
       {/* Preview or Edit mode */}
       {previewMode && <LearningMap roadmapData={getRoadmapData()} language={effectiveLanguage} />}

platforms/vscode/package.json

@@ -28,6 +28,7 @@
   ],
   "activationEvents": [],
   "main": "./dist/extension.js",
+  "browser": "./dist/extension.js",
   "contributes": {
     "customEditors": [
       {

platforms/vscode/src/LearningmapEditorProvider.ts

@@ -1,5 +1,4 @@
 import * as vscode from 'vscode';
-import * as crypto from 'crypto';
 
 /**
  * Provider for learningmap custom editor.
@@ -139,5 +138,17 @@ export class LearningmapEditorProvider implements vscode.CustomTextEditorProvide
 }
 
 function getNonce() {
-  return crypto.randomBytes(16).toString('hex');
+  // Generate a cryptographically secure random string
+  // This works in both Node.js and browser environments
+  const array = new Uint32Array(8);
+  if (typeof crypto !== 'undefined' && crypto.getRandomValues) {
+    // Browser or modern Node.js with Web Crypto API
+    crypto.getRandomValues(array);
+  } else {
+    // Fallback for older environments
+    for (let i = 0; i < array.length; i++) {
+      array[i] = Math.floor(Math.random() * 0xffffffff);
+    }
+  }
+  return Array.from(array, num => num.toString(16).padStart(8, '0')).join('');
 }

platforms/vscode/src/webview.tsx

@@ -127,7 +127,7 @@ function WebviewEditor() {
     return <div style={{ padding: '20px' }}>Loading editor...</div>;
   }
 
-  return <LearningMapEditor />;
+  return <LearningMapEditor disableSharing={true} />;
 }
 
 // Mount the React component