playroom 0.44.1 → 0.44.2-fix-code-loading-ff-20250813004811

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # playroom
 
+## 0.44.2-fix-code-loading-ff-20250813004811
+
+### Patch Changes
+
+- [#442](https://github.com/seek-oss/playroom/pull/442) [`a8f17d8`](https://github.com/seek-oss/playroom/commit/a8f17d88a33ad4e439aa403be261743133e77b6f) Thanks [@michaeltaranto](https://github.com/michaeltaranto)! - Fix code loading on page load in Firefox
+
+  Resolves a timing issue where code would not be hydrated into the editor correctly on page load in Firefox.
+
 ## 0.44.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "playroom",
-  "version": "0.44.1",
+  "version": "0.44.2-fix-code-loading-ff-20250813004811",
   "description": "Design with code, powered by your own component library",
   "bin": {
     "playroom": "bin/cli.cjs"

package/src/components/CodeEditor/CodeEditor.tsx

@@ -73,7 +73,7 @@ export const CodeEditor = ({
   onChange,
   previewCode,
 }: Props) => {
-  const mounted = useRef(false);
+  const previewSnippetsCode = useRef(false);
   const editorInstanceRef = useRef<Editor | null>(null);
   const insertionPointRef = useRef<ReturnType<Editor['addLineClass']> | null>(
     null
@@ -147,7 +147,10 @@ export const CodeEditor = ({
     if (editorInstanceRef.current) {
       if (previewCode) {
         editorInstanceRef.current.setValue(previewCode);
-      } else {
+        previewSnippetsCode.current = true;
+      } else if (previewSnippetsCode.current) {
+        // If existing snippets preview, remove the preview code
+        // from the undo history.
         editorInstanceRef.current.getDoc().undo();
 
         // prevent redo after undo'ing preview code.
@@ -155,6 +158,8 @@ export const CodeEditor = ({
         editorInstanceRef.current
           .getDoc()
           .setHistory({ ...history, undone: [] });
+
+        previewSnippetsCode.current = false;
       }
     }
   }, [previewCode]);
@@ -162,10 +167,9 @@ export const CodeEditor = ({
   useEffect(() => {
     if (editorInstanceRef.current) {
       if (
-        mounted.current &&
-        (editorInstanceRef.current.hasFocus() ||
-          code === editorInstanceRef.current.getValue() ||
-          previewCode)
+        editorInstanceRef.current.hasFocus() ||
+        code === editorInstanceRef.current.getValue() ||
+        previewCode
       ) {
         return;
       }
@@ -211,18 +215,11 @@ export const CodeEditor = ({
     <ReactCodeMirror
       editorDidMount={(editorInstance) => {
         editorInstanceRef.current = editorInstance;
+        editorInstanceRef.current.setValue(code);
         validateCodeInEditor(editorInstance, code);
         if (!editorHidden) {
           setCursorPosition(cursorPosition);
         }
-        /**
-         * This workaround delays the setting of the mounted flag. It allows
-         * the behaviours wired up via `useEffect` to complete without being
-         * interrupted by change or focus events.
-         */
-        setTimeout(() => {
-          mounted.current = true;
-        }, 1);
       }}
       onChange={(editorInstance, data, newCode) => {
         if (editorInstance.hasFocus() && !previewCode) {