fix(playground): more consistent button disabling

allow clear/formatting immediately when opening example only enable share if there's non-whitespace update button state after formatting code
mdn · Jan 10, 2025 · 1ac9cd7 · 1ac9cd7
1 parent 5b48c9c
commit 1ac9cd7
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 18 deletions.
diff --git a/client/src/lit/play/editor.js b/client/src/lit/play/editor.js
@@ -61,6 +61,10 @@ export class PlayEditor extends LitElement {
     return this._editor ? this._editor.state.doc.toString() : this._value;
   }
 
+  _dispatchUpdate() {
+    this.dispatchEvent(new Event("update", { bubbles: true, composed: true }));
+  }
+
   _extensions() {
     const language = (() => {
       switch (this.language) {
@@ -99,9 +103,7 @@ export class PlayEditor extends LitElement {
           }
           this._updateTimer = window?.setTimeout(() => {
             this._updateTimer = -1;
-            this.dispatchEvent(
-              new Event("update", { bubbles: true, composed: true })
-            );
+            this._dispatchUpdate();
           }, 1000);
         }
       }),
@@ -141,10 +143,17 @@ export class PlayEditor extends LitElement {
     })();
     if (config) {
       const plugins = await Promise.all(config.plugins);
-      this.value = await prettier.format(this.value, {
+      const unformatted = this.value;
+      const formatted = await prettier.format(unformatted, {
         parser: config.parser,
         plugins: /** @type {import("prettier").Plugin[]} */ (plugins),
       });
+      if (this.value === unformatted) {
+        if (unformatted !== formatted) {
+          this.value = formatted;
+          this._dispatchUpdate();
+        }
+      }
     }
   }
 

diff --git a/client/src/playground/index.tsx b/client/src/playground/index.tsx
@@ -67,7 +67,8 @@ export default function Playground() {
   let [shared, setShared] = useState(false);
   let [shareUrl, setShareUrl] = useState<URL | null>(null);
   let [state, setState] = useState(State.initial);
-  const [isEmpty, setIsEmpty] = useState<boolean>(true);
+  const [isShareable, setIsShareable] = useState<boolean>(true);
+  const [isClearable, setIsClearable] = useState<boolean>(true);
   const [initialContent, setInitialContent] = useState<EditorContent | null>(
     null
   );
@@ -120,14 +121,24 @@ export default function Playground() {
     };
   }, [initialContent?.src, initialCode?.src]);
 
-  const setEditorContent = (content: EditorContent) => {
-    if (controller.current) {
-      controller.current.code = { ...content };
-      if (content.src) {
-        controller.current.srcPrefix = content.src;
+  const setIsEmpty = useCallback((content: EditorContent) => {
+    const { html, css, js } = content;
+    setIsShareable(!html.trim() && !css.trim() && !js.trim());
+    setIsClearable(!html && !css && !js);
+  }, []);
+
+  const setEditorContent = useCallback(
+    (content: EditorContent) => {
+      if (controller.current) {
+        controller.current.code = { ...content };
+        if (content.src) {
+          controller.current.srcPrefix = content.src;
+        }
+        setIsEmpty(content);
       }
-    }
-  };
+    },
+    [setIsEmpty]
+  );
 
   useEffect(() => {
     (async () => {
@@ -156,12 +167,11 @@ export default function Playground() {
         setState(State.ready);
       }
     })();
-  }, [initialCode, state, gistId, stateParam]);
+  }, [initialCode, state, gistId, stateParam, setEditorContent]);
 
   const clear = async () => {
     setSearchParams([], { replace: true });
     setInitialContent(null);
-    setIsEmpty(true);
     setEditorContent({
       html: HTML_DEFAULT,
       css: CSS_DEFAULT,
@@ -231,8 +241,7 @@ export default function Playground() {
 
   const onEditorUpdate = () => {
     const code = getEditorContent();
-    const { html, css, js } = code;
-    setIsEmpty(!html && !css && !js);
+    setIsEmpty(code);
     store(SESSION_KEY, code);
   };
 
@@ -258,7 +267,7 @@ export default function Playground() {
               <Button
                 type="secondary"
                 id="share"
-                isDisabled={isEmpty}
+                isDisabled={isShareable}
                 onClickHandler={() => {
                   gleanClick(`${PLAYGROUND}: share-click`);
                   setDialogState(DialogState.share);
@@ -269,7 +278,7 @@ export default function Playground() {
               </Button>
               <Button
                 type="secondary"
-                isDisabled={isEmpty}
+                isDisabled={isClearable}
                 id="clear"
                 extraClasses="red"
                 onClickHandler={clearConfirm}