Merge pull request #920 from microsoft/play_fixes

Playground fixes

Author: Orta Therox

packages/playground/src/index.ts

@@ -154,10 +154,19 @@ export const setupPlayground = (
     }, 300)
   })
 
+  // If you set this to true, then the next time the playground would
+  // have set the user's hash it would be skipped - used for setting
+  // the text in examples
+  let suppressNextTextChangeForHashChange = false
+
   // Sets the URL and storage of the sandbox string
   const playgroundDebouncedMainFunction = () => {
     const alwaysUpdateURL = !localStorage.getItem("disable-save-on-type")
     if (alwaysUpdateURL) {
+      if (suppressNextTextChangeForHashChange) {
+        suppressNextTextChangeForHashChange = false
+        return
+      }
       const newURL = sandbox.createURLQueryWithCompilerOptions(sandbox)
       window.history.replaceState({}, "", newURL)
     }
@@ -177,6 +186,9 @@ export const setupPlayground = (
     if (model && plugin.modelChangedDebounce) plugin.modelChangedDebounce(sandbox, model, container)
   })
 
+  const skipInitiallySettingHash = document.location.hash && document.location.hash.includes("example/")
+  if (!skipInitiallySettingHash) playgroundDebouncedMainFunction()
+
   // Setup working with the existing UI, once it's loaded
 
   // Versions of TypeScript
@@ -274,6 +286,7 @@ export const setupPlayground = (
           }
         }
       }
+      return false
     }
   })
 
@@ -293,22 +306,31 @@ export const setupPlayground = (
     }
   }
 
-  // Set up some key commands
-  sandbox.editor.addAction({
+  const shareAction = {
     id: "copy-clipboard",
     label: "Save to clipboard",
     keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S],
 
     contextMenuGroupId: "run",
     contextMenuOrder: 1.5,
 
-    run: function (ed) {
+    run: function () {
       window.navigator.clipboard.writeText(location.href.toString()).then(
         () => ui.flashInfo(i("play_export_clipboard")),
         (e: any) => alert(e)
       )
     },
-  })
+  }
+
+  const shareButton = document.getElementById("share-button")!
+  shareButton.onclick = e => {
+    e.preventDefault()
+    shareAction.run()
+    return false
+  }
+
+  // Set up some key commands
+  sandbox.editor.addAction(shareAction)
 
   sandbox.editor.addAction({
     id: "run-js",
@@ -335,6 +357,7 @@ export const setupPlayground = (
 
       const isJS = sandbox.config.useJavaScript
       ui.flashInfo(i(isJS ? "play_run_js" : "play_run_ts"))
+      return false
     }
   }
 
@@ -391,6 +414,15 @@ export const setupPlayground = (
       }
       settingsToggle.parentElement!.classList.toggle("open")
     }
+
+    settingsToggle.addEventListener("keydown", e => {
+      const isOpen = settingsToggle.parentElement!.classList.contains("open")
+      if (e.keyCode === 9 && isOpen) {
+        const result = document.querySelector(".playground-options li input") as any
+        result.focus()
+        e.preventDefault()
+      }
+    })
   }
 
   // Support grabbing examples from the location hash
@@ -409,16 +441,6 @@ export const setupPlayground = (
           localStorage.setItem("examples-seen", JSON.stringify(seen))
         }
 
-        // Set the menu to be the same section as this current example
-        // this happens behind the scene and isn't visible till you hover
-        // const sectionTitle = example.path[0]
-        // const allSectionTitles = document.getElementsByClassName('section-name')
-        // for (const title of allSectionTitles) {
-        //   if (title.textContent === sectionTitle) {
-        //     title.onclick({})
-        //   }
-        // }
-
         const allLinks = document.querySelectorAll("example-link")
         // @ts-ignore
         for (const link of allLinks) {
@@ -428,8 +450,10 @@ export const setupPlayground = (
         }
 
         document.title = "TypeScript Playground - " + example.title
+        suppressNextTextChangeForHashChange = true
         sandbox.setText(code)
       } else {
+        suppressNextTextChangeForHashChange = true
         sandbox.setText("// There was an issue getting the example, bad URL? Check the console in the developer tools")
       }
     })
@@ -596,14 +620,12 @@ export const setupPlayground = (
 export type Playground = ReturnType<typeof setupPlayground>
 
 const redirectTabPressTo = (element: HTMLElement, container: HTMLElement | undefined, query: string) => {
-  // element.style.backgroundColor = "red"
   element.addEventListener("keydown", e => {
     if (e.keyCode === 9) {
       const host = container || document
       const result = host.querySelector(query) as any
       if (!result) throw new Error(`Expected to find a result for keydown`)
       result.focus()
-      console.log(result)
       e.preventDefault()
     }
   })

packages/typescriptlang-org/src/copy/en/playground.ts

@@ -11,6 +11,7 @@ export const playCopy = {
   play_downloading_version: "Version...", // when loading
   play_toolbar_run: "Run",
   play_toolbar_export: "Export",
+  play_toolbar_share: "Share",
   play_sidebar_js: ".JS",
   play_sidebar_dts: ".D.TS",
   play_sidebar_errors: "Errors",
@@ -27,7 +28,8 @@ export const playCopy = {
     "Disable changing the URL when you type.",
   play_sidebar_plugins: "Plugins",
   play_sidebar_featured_plugins: "Featured Plugins",
-  play_sidebar_plugins_options_external: "3rd Party Plugins <a href='https://www.npmjs.com/search?q=keywords:playground-plugin'>from npm</a>",
+  play_sidebar_plugins_options_external:
+    "3rd Party Plugins <a href='https://www.npmjs.com/search?q=keywords:playground-plugin'>from npm</a>",
   play_sidebar_plugins_options_external_warning:
     "Warning: Code from plugins comes from third-parties.",
   play_sidebar_plugins_options_modules: "Custom npm Modules",

packages/typescriptlang-org/src/templates/pages/community.tsx

@@ -41,17 +41,6 @@ export const Comm: React.FC<Props> = props => {
   const intl = useIntl()
   const i = createInternational<typeof comCopy>(intl)
 
-  // Make an array of all the meetups which share a rough location
-  const meetupByArea = {}
-  meetups.forEach(meetup => {
-    const area = meetup.meetup.continentish
-    if (meetupByArea[area]) {
-      meetupByArea[area].push(meetup.meetup)
-    } else {
-      meetupByArea[area] = [meetup.meetup]
-    }
-  });
-
   return (
     <Layout title={i("com_layout_title")} description={i("com_layout_description")} lang={props.pageContext.lang} allSitePage={props.data.allSitePage}>
       <div className="raised main-content-block container community" style={{ marginTop: "80px" }}>
@@ -193,23 +182,21 @@ export const Comm: React.FC<Props> = props => {
       <div className="raised main-content-block container community">
         <h3 className="centered-highlight">Meetups</h3>
         <div className="events">
-          {Object.keys(meetupByArea)
-            .map(area => (
-              <>
-                <h4>{area}</h4>
-                <div className="callouts">
-                  {meetupByArea[area].map(meetup => (
-                    <Col className="callout">
-                      <img src={require("../../assets/community/meetup-logos/" + meetup.image)} className="icon img-square" alt={"logo of " + meetup.title} />
-                      <div>
-                        <h4 className="community-callout-headline">{meetup.title}</h4>
-                        <div className="text">{meetup.country}<br /><a rel="noopener" target="blank" href={meetup.url}>Website</a>{meetup.twitter ? <a rel="noopener" target="blank" href={meetup.twitter}>Twitter</a> : null}</div>
-                      </div>
-                    </Col>
-                  ))}
+
+          <div className="callouts">
+            {meetups.sort().map(m => m.meetup).map(meetup => (
+              <Col className="callout">
+                <img src={require("../../assets/community/meetup-logos/" + meetup.image)} className="icon img-square" alt={"logo of " + meetup.title} />
+                <div>
+                  <h4 className="community-callout-headline">{meetup.title}</h4>
+                  <div className="text">{meetup.country}<br />
+                    <a rel="noopener" target="blank" href={meetup.url} title={"Website for " + meetup.title}>Website</a>
+                    {meetup.twitter ? <a rel="noopener" target="blank" href={meetup.twitter} title={"Twitter page for " + meetup.title}>Twitter</a> : null}
+                  </div>
                 </div>
-              </>
+              </Col>
             ))}
+          </div>
         </div>
       </div>
     </Layout >

packages/typescriptlang-org/src/templates/pages/css/community.scss

@@ -36,6 +36,10 @@
       width: 48%;
       display: flex;
       line-height: 1.4rem;
+
+      a {
+        margin-right: 8px;
+      }
     }
 
     h3 {

packages/typescriptlang-org/src/templates/play.tsx

@@ -226,7 +226,9 @@ const Play: React.FC<Props> = (props) => {
                     <li><a href="#" onClick={() => playground.exporter.openProjectInStackBlitz()} aria-label={i("play_export_stackblitz")} >{i("play_export_stackblitz")}</a></li>
                   </ul>
                 </li>
+                <li><a id="share-button" href="#" role="button">{i("play_toolbar_share")}</a></li>
               </ul>
+
               <ul className="right">
                 <li><a id="sidebar-toggle" aria-label="Hide Sidebar" href="#">&#x21E5;</a></li>
               </ul>