fix(playground): remove code sharing functions (#10)

We decided to remove the save/share functions from the playground since there is a security discussion we should be having first.

The problem we are seeing is that the "Run" functionality essentially allows execution of arbitrary code on the user's machine, which is obviously not ideal (basically, XSS as a feature).

The two options to implement this would be to lock down the execution environment and to make sure users are aware of potential problems, ideally in combination. But since this takes some time to get right, we disable the feature for now.

Co-authored-by: Alex Muramoto <amuramoto@users.noreply.github.com>

examples/playground/README.md

@@ -27,8 +27,7 @@ This directory contains a simple playground application for the marker API.
 The playground is a side-by-side view of a google map with a monaco editor (the
 editor-component of VSCode) where typescript code using the new
 marker-API can be written and executed to get a feel for the api and test
-different usage-scenarios in a fast way. The contents of the editor can be
-serialized into the URL for sharing.
+different usage-scenarios in a fast way.
 
 Compiling the typescript from the editor happens in a worker via the typescript-support
 already built into the monaco-editor. For execution, a wrapper emulates the

examples/playground/src/code-samples/00.default.ts

@@ -1,4 +1,4 @@
-/**
+/*
  * Copyright 2023 Google LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -14,14 +14,9 @@
  * limitations under the License.
  */
 
-// Marker-API Example Playground
-//
-// Edit the code and hit CMD + Enter to execute it.
 //
-// Key bindings:
-//
-// <Cmd> + <Return>   compile typescript and execute
-// <Cmd> + <S>        save the code to the URL
+// Marker-API Example Playground
+// Edit the code and hit <CMD> + <Return> to execute it.
 //
 
 import {Marker} from '@googlemaps/adv-markers-utils';
@@ -32,10 +27,12 @@ export default (map: google.maps.Map) => {
 
   const m1 = new Marker();
   m1.position = {lat: 53.555, lng: 10.001};
+
+  // dynamically scale the marker so it gets bigger and smaller with increasing/decreasing zoom
   m1.scale = ({map}) => Math.max(1, Math.pow(1.45, map.zoom) / 64);
-  m1.map = map;
   m1.icon = 'restaurant';
   m1.color = '#DB4437';
+  m1.map = map;
 
   type M2Data = {color: string};
   const m2 = new Marker<M2Data>({
@@ -54,7 +51,8 @@ export default (map: google.maps.Map) => {
     colorIdx = (colorIdx + 1) % colors.length;
   }, 1000);
 
-  // the returned function will run before the running code is updated.
+  // the function returned here is a cleanup-function and will be executed before
+  // the sample currently running is replaced with a new version or another sample.
   // This gives you an opportunity to clean up everything that has been added
   // (don't worry about removing the markers, they will be automatically removed
   // from the map)

examples/playground/src/init-editor.ts

@@ -1,4 +1,4 @@
-/**
+/*
  * Copyright 2023 Google LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -15,15 +15,10 @@
  */
 
 import {editor, KeyCode, KeyMod, languages, Uri} from 'monaco-editor';
-import {decode, encode} from './snippet-encoder';
-
+import {configureMonacoWorkers} from './configure-monaco-workers';
 import packageJson from '../../../package.json';
 
-const {name: packageName}: {name: string} = packageJson as never;
-
-import './configure-monaco-workers';
-
-import {configureMonacoWorkers} from './configure-monaco-workers';
+const {name: packageName} = packageJson;
 
 /**
  * Set up the extraLibs for the typescript-editor to do code-completion for the
@@ -84,38 +79,6 @@ async function loadCodeSamples(): Promise<Record<string, CodeSample>> {
   return codeSamples;
 }
 
-/**
- * Load code from url-parameters and validate the version against the current
- * version.
- */
-function createModelFromUrl(): editor.IModel | null {
-  if (!location.hash) {
-    return null;
-  }
-
-  console.log('loading snippet from URL.');
-  const {code, version} = decode(location.hash.slice(1));
-
-  const [currentMajorVersion] = API_VERSION.split('.');
-  const [encodedMajorVersion] = version.split('.');
-
-  console.info(`loaded version ${version} (current ${API_VERSION})`);
-
-  if (import.meta.env.PROD && encodedMajorVersion !== currentMajorVersion) {
-    alert(
-      `The code-snippet you are loading was created with a different ` +
-        `API-version (loaded: ${version} / current: ${API_VERSION}).\n\n` +
-        `There might have been breaking changes.`
-    );
-  }
-
-  return editor.createModel(
-    code,
-    'typescript',
-    Uri.parse('file:///example.ts')
-  );
-}
-
 function createEditorActions(
   editorInstance: editor.IStandaloneCodeEditor,
   runCallback: (jsCode: string) => Promise<void>
@@ -141,19 +104,6 @@ function createEditorActions(
       await runCallback(jsCode);
     }
   });
-
-  editorInstance.addAction({
-    id: 'save-to-url',
-    label: 'Save to URL',
-    keybindings: [KeyMod.CtrlCmd | KeyCode.KeyS],
-    run(editor) {
-      const tsCode = editor.getModel()?.getValue();
-
-      if (!tsCode) return;
-
-      location.hash = encode({code: tsCode, version: API_VERSION});
-    }
-  });
 }
 
 function configureTypescriptDefaults() {
@@ -174,7 +124,6 @@ export async function initEditor(
   configureTypescriptDefaults();
 
   await initEditorFilesystem();
-  const userCodeModel = createModelFromUrl();
   const codeSamples = await loadCodeSamples();
 
   const editorContainer = document.querySelector('#editor') as HTMLElement;
@@ -195,7 +144,7 @@ export async function initEditor(
   }
 
   const defaultModel = codeSampleIds[0];
-  editorInstance.setModel(userCodeModel || codeSamples[defaultModel].model);
+  editorInstance.setModel(codeSamples[defaultModel].model);
 
   // populate examples dropdown
   const exampleSelect = document.querySelector(