Fix loading of shared code in playground of website (#1575)

* Fix loading of shared code in playground of website

* Fall back to the default example when the code param fails to decompress

* Show an explicit error placeholder when shared code fails to decompress

* Update editor model when value signal changes to avoid init race

---------

Co-authored-by: Fabian Hiller <hillerfabian11@gmail.com>

Author: lazerg

website/src/components/CodeEditor.tsx

@@ -111,6 +111,14 @@ export const CodeEditor = component$<CodeEditorProps>(
       });
     });
 
+    // Update value of model on change
+    useTask$(({ track }) => {
+      track(value);
+      if (isBrowser && model.value && value.value !== model.value.getValue()) {
+        model.value.setValue(value.value);
+      }
+    });
+
     // Update theme on change
     useTask$(async ({ track }) => {
       track(editorTheme);

website/src/routes/playground/index.tsx

@@ -5,7 +5,6 @@ import {
   type QRL,
   type Signal,
   sync$,
-  useComputed$,
   useSignal,
   useVisibleTask$,
 } from '@builder.io/qwik';
@@ -51,9 +50,8 @@ export const head: DocumentHead = {
 };
 
 export default component$(() => {
-  // Use navigate, location and side bar toggle
+  // Use navigate and side bar toggle
   const navigate = useNavigate();
-  const location = useLocation();
   const toggle = useSideBarToggle();
 
   // Use editor and side bar elements signals
@@ -69,10 +67,18 @@ export default component$(() => {
   const logsElement = useSignal<HTMLOListElement>();
   const lastLogElement = useSignal<Element | null>();
 
-  // Computed initial code of editor
-  const initialCode = useComputed$(() => {
-    const code = location.url.searchParams.get('code');
-    return code ? lz.decompressFromEncodedURIComponent(code) : editorCode;
+  // Use initial code of editor signal
+  const initialCode = useSignal(editorCode);
+
+  // Get initial code of editor from search params
+  // eslint-disable-next-line qwik/no-use-visible-task
+  useVisibleTask$(() => {
+    const code = new URLSearchParams(window.location.search).get('code');
+    if (code) {
+      initialCode.value =
+        lz.decompressFromEncodedURIComponent(code) ||
+        '// Failed to load the shared code. The link may be corrupted or incomplete.';
+    }
   });
 
   /**