Playground: Add format button and notification when saving (#2623)

fix #350 Format button <img width="458" alt="image" src="https://github.com/microsoft/typespec/assets/1031227/1a2ebb62-08e7-44ee-ba95-24f37e492ec3"> Notification <img width="321" alt="image" src="https://github.com/microsoft/typespec/assets/1031227/6468966e-f9d8-4d1b-b6a1-bef404f73a7f">
microsoft · Nov 6, 2023 · f757a19 · f757a19
1 parent adba3b9
commit f757a19
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 36 deletions.
diff --git a/common/changes/@typespec/playground/feature-format-playground-button_2023-11-01-19-30.json b/common/changes/@typespec/playground/feature-format-playground-button_2023-11-01-19-30.json
@@ -0,0 +1,15 @@
+{
+  "changes": [
+    {
+      "packageName": "@typespec/playground",
+      "comment": "Add a format button to the playground command bar",
+      "type": "none"
+    },
+    {
+      "packageName": "@typespec/playground",
+      "comment": "Add a notification to the standalone playground when the playground has been saved.",
+      "type": "none"
+    }
+  ],
+  "packageName": "@typespec/playground"
+}
diff --git a/packages/playground/src/react/editor-command-bar.tsx b/packages/playground/src/react/editor-command-bar.tsx
@@ -1,5 +1,4 @@
 import {
-  Button,
   Dialog,
   DialogBody,
   DialogSurface,
@@ -9,7 +8,12 @@ import {
   ToolbarButton,
   Tooltip,
 } from "@fluentui/react-components";
-import { Bug16Regular, Save16Regular, Settings24Regular } from "@fluentui/react-icons";
+import {
+  Broom16Filled,
+  Bug16Regular,
+  Save16Regular,
+  Settings24Regular,
+} from "@fluentui/react-icons";
 import { CompilerOptions } from "@typespec/compiler";
 import { FunctionComponent } from "react";
 import { PlaygroundSample, PlaygroundTspLibrary } from "../types.js";
@@ -20,6 +24,7 @@ import { CompilerSettings } from "./settings/compiler-settings.js";
 export interface EditorCommandBarProps {
   documentationUrl?: string;
   saveCode: () => Promise<void> | void;
+  formatCode: () => Promise<void> | void;
   newIssue?: () => Promise<void> | void;
   libraries: PlaygroundTspLibrary[];
   selectedEmitter: string;
@@ -34,6 +39,7 @@ export interface EditorCommandBarProps {
 export const EditorCommandBar: FunctionComponent<EditorCommandBarProps> = ({
   documentationUrl,
   saveCode,
+  formatCode,
   newIssue,
   libraries,
   selectedEmitter,
@@ -58,12 +64,10 @@ export const EditorCommandBar: FunctionComponent<EditorCommandBarProps> = ({
     <div css={{ borderBottom: "1px solid #f5f5f5" }}>
       <Toolbar>
         <Tooltip content="Save" relationship="description" withArrow>
-          <ToolbarButton
-            appearance="primary"
-            aria-label="Save"
-            icon={<Save16Regular />}
-            onClick={saveCode as any}
-          />
+          <ToolbarButton aria-label="Save" icon={<Save16Regular />} onClick={saveCode as any} />
+        </Tooltip>
+        <Tooltip content="Format" relationship="description" withArrow>
+          <ToolbarButton aria-label="Format" icon={<Broom16Filled />} onClick={formatCode as any} />
         </Tooltip>
         {samples && (
           <SamplesDropdown
@@ -79,7 +83,7 @@ export const EditorCommandBar: FunctionComponent<EditorCommandBarProps> = ({
         />
         <Dialog>
           <DialogTrigger>
-            <Button icon={<Settings24Regular />} />
+            <ToolbarButton icon={<Settings24Regular />} />
           </DialogTrigger>
           <DialogSurface>
             <DialogBody>

diff --git a/packages/playground/src/react/editor.tsx b/packages/playground/src/react/editor.tsx
@@ -5,14 +5,19 @@ export interface EditorProps {
   model: editor.IModel;
   actions?: editor.IActionDescriptor[];
   options: editor.IStandaloneEditorConstructionOptions;
+  onMount?: (data: OnMountData) => void;
+}
+
+export interface OnMountData {
+  editor: editor.IStandaloneCodeEditor;
 }
 
 export interface EditorCommand {
   binding: number;
   handle: () => void;
 }
 
-export const Editor: FunctionComponent<EditorProps> = ({ model, options, actions }) => {
+export const Editor: FunctionComponent<EditorProps> = ({ model, options, actions, onMount }) => {
   const editorContainerRef = useRef(null);
   const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
 
@@ -22,6 +27,7 @@ export const Editor: FunctionComponent<EditorProps> = ({ model, options, actions
       automaticLayout: true,
       ...options,
     });
+    onMount?.({ editor: editorRef.current });
   }, []);
 
   useEffect(() => {

diff --git a/packages/playground/src/react/playground.tsx b/packages/playground/src/react/playground.tsx
@@ -1,12 +1,12 @@
 import { CompilerOptions } from "@typespec/compiler";
 import debounce from "debounce";
 import { KeyCode, KeyMod, MarkerSeverity, Uri, editor } from "monaco-editor";
-import { FunctionComponent, useCallback, useEffect, useMemo, useState } from "react";
+import { FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { CompletionItemTag } from "vscode-languageserver";
 import { getMarkerLocation } from "../services.js";
 import { BrowserHost, PlaygroundSample } from "../types.js";
 import { EditorCommandBar } from "./editor-command-bar.js";
-import { useMonacoModel } from "./editor.js";
+import { OnMountData, useMonacoModel } from "./editor.js";
 import { Footer } from "./footer.js";
 import { useControllableValue } from "./hooks.js";
 import { OutputView } from "./output-view.js";
@@ -80,6 +80,8 @@ export interface PlaygroundLinks {
 
 export const Playground: FunctionComponent<PlaygroundProps> = (props) => {
   const { host, onSave } = props;
+  const editorRef = useRef<editor.IStandaloneCodeEditor | undefined>(undefined);
+
   const [selectedEmitter, onSelectedEmitterChange] = useControllableValue(
     props.emitter,
     props.defaultEmitter,
@@ -181,6 +183,10 @@ export const Playground: FunctionComponent<PlaygroundProps> = (props) => {
     isSampleUntouched,
   ]);
 
+  const formatCode = useCallback(() => {
+    void editorRef.current?.getAction("editor.action.formatDocument")?.run();
+  }, [typespecModel]);
+
   const newIssue = useCallback(async () => {
     saveCode();
     const bodyPayload = encodeURIComponent(`\n\n\n[Playground Link](${document.location.href})`);
@@ -196,6 +202,10 @@ export const Playground: FunctionComponent<PlaygroundProps> = (props) => {
     [saveCode]
   );
 
+  const onTypeSpecEditorMount = useCallback(({ editor }: OnMountData) => {
+    editorRef.current = editor;
+  }, []);
+
   const libraries = useMemo(() => Object.values(host.libraries), [host.libraries]);
 
   return (
@@ -226,10 +236,15 @@ export const Playground: FunctionComponent<PlaygroundProps> = (props) => {
             selectedSampleName={selectedSampleName}
             onSelectedSampleNameChange={onSelectedSampleNameChange}
             saveCode={saveCode}
+            formatCode={formatCode}
             newIssue={props?.links?.githubIssueUrl ? newIssue : undefined}
             documentationUrl={props.links?.documentationUrl}
           />
-          <TypeSpecEditor model={typespecModel} actions={typespecEditorActions} />
+          <TypeSpecEditor
+            model={typespecModel}
+            actions={typespecEditorActions}
+            onMount={onTypeSpecEditorMount}
+          />
         </Pane>
         <Pane>
           <OutputView

diff --git a/packages/playground/src/react/standalone.tsx b/packages/playground/src/react/standalone.tsx
@@ -1,5 +1,13 @@
-import { FluentProvider, webLightTheme } from "@fluentui/react-components";
-import { FunctionComponent } from "react";
+import {
+  FluentProvider,
+  Toast,
+  ToastBody,
+  ToastTitle,
+  Toaster,
+  useToastController,
+  webLightTheme,
+} from "@fluentui/react-components";
+import { FunctionComponent, useId, useMemo } from "react";
 import { createRoot } from "react-dom/client";
 import { createBrowserHost } from "../browser-host.js";
 import { LibraryImportOptions } from "../core.js";
@@ -20,23 +28,38 @@ export async function createReactPlayground(config: ReactPlaygroundConfig) {
 
   const stateStorage = createStandalonePlaygroundStateStorage();
   const initialState = stateStorage.load();
-  const options: PlaygroundProps = {
-    ...config,
-    host,
-    libraries: config.libraries,
-    defaultContent: initialState.content,
-    defaultEmitter: initialState.emitter ?? config.defaultEmitter,
-    defaultCompilerOptions: initialState.options,
-    defaultSampleName: initialState.sampleName,
-    onSave: (value) => {
-      stateStorage.save(value);
-      void navigator.clipboard.writeText(window.location.toString());
-    },
-  };
 
   const App: FunctionComponent = () => {
+    const toasterId = useId();
+    const { dispatchToast } = useToastController(toasterId);
+
+    const options: PlaygroundProps = useMemo(
+      () => ({
+        ...config,
+        host,
+        libraries: config.libraries,
+        defaultContent: initialState.content,
+        defaultEmitter: initialState.emitter ?? config.defaultEmitter,
+        defaultCompilerOptions: initialState.options,
+        defaultSampleName: initialState.sampleName,
+        onSave: (value) => {
+          stateStorage.save(value);
+          void navigator.clipboard.writeText(window.location.toString());
+          dispatchToast(
+            <Toast>
+              <ToastTitle>Saved!</ToastTitle>
+              <ToastBody>Playground link has been copied to the clipboard.</ToastBody>
+            </Toast>,
+            { intent: "success" }
+          );
+        },
+      }),
+      [dispatchToast]
+    );
+
     return (
       <FluentProvider theme={webLightTheme}>
+        <Toaster toasterId={toasterId} />
         <div css={{ height: "100vh" }}>
           <Playground {...options} />
         </div>

diff --git a/packages/playground/src/react/typespec-editor.tsx b/packages/playground/src/react/typespec-editor.tsx
@@ -1,23 +1,26 @@
 import { editor } from "monaco-editor";
 import { FunctionComponent } from "react";
-import { Editor, useMonacoModel } from "./editor.js";
+import { Editor, EditorProps, useMonacoModel } from "./editor.js";
 
-export interface TypeSpecEditorProps {
-  model: editor.IModel;
-  actions?: editor.IActionDescriptor[];
+export interface TypeSpecEditorProps extends Omit<EditorProps, "options"> {
+  options?: editor.IStandaloneEditorConstructionOptions;
 }
 
-export const TypeSpecEditor: FunctionComponent<TypeSpecEditorProps> = (props) => {
-  const options: editor.IStandaloneEditorConstructionOptions = {
+export const TypeSpecEditor: FunctionComponent<TypeSpecEditorProps> = ({
+  actions,
+  options,
+  ...other
+}) => {
+  const resolvedOptions: editor.IStandaloneEditorConstructionOptions = {
     "semanticHighlighting.enabled": true,
     automaticLayout: true,
     tabSize: 2,
     minimap: {
       enabled: false,
     },
+    ...options,
   };
-  // Add shortcuts
-  return <Editor model={props.model} actions={props.actions} options={options}></Editor>;
+  return <Editor actions={actions} options={resolvedOptions} {...other}></Editor>;
 };
 
 export const OutputEditor: FunctionComponent<{ filename: string; value: string }> = ({