🔮 fix: Artifacts readOnly to Re-render when Expected (#8954)

client/src/components/Artifacts/ArtifactCodeEditor.tsx

@@ -1,5 +1,5 @@
 import debounce from 'lodash/debounce';
-import React, { memo, useEffect, useMemo, useCallback, useState } from 'react';
+import React, { useMemo, useState, useEffect, useCallback } from 'react';
 import {
   useSandpack,
   SandpackCodeEditor,
@@ -10,8 +10,8 @@ import type { SandpackBundlerFile } from '@codesandbox/sandpack-client';
 import type { CodeEditorRef } from '@codesandbox/sandpack-react';
 import type { ArtifactFiles, Artifact } from '~/common';
 import { useEditArtifact, useGetStartupConfig } from '~/data-provider';
+import { useEditorContext, useArtifactsContext } from '~/Providers';
 import { sharedFiles, sharedOptions } from '~/utils/artifacts';
-import { useEditorContext } from '~/Providers';
 
 const createDebouncedMutation = (
   callback: (params: {
@@ -29,7 +29,7 @@ const CodeEditor = ({
   editorRef,
 }: {
   fileKey: string;
-  readOnly: boolean;
+  readOnly?: boolean;
   artifact: Artifact;
   editorRef: React.MutableRefObject<CodeEditorRef>;
 }) => {
@@ -112,33 +112,32 @@ const CodeEditor = ({
     <SandpackCodeEditor
       ref={editorRef}
       showTabs={false}
-      readOnly={readOnly}
       showRunButton={false}
       showLineNumbers={true}
       showInlineErrors={true}
+      readOnly={readOnly === true}
       className="hljs language-javascript bg-black"
     />
   );
 };
 
-export const ArtifactCodeEditor = memo(function ({
+export const ArtifactCodeEditor = function ({
   files,
   fileKey,
   template,
   artifact,
   editorRef,
   sharedProps,
-  isSubmitting,
 }: {
   fileKey: string;
   artifact: Artifact;
   files: ArtifactFiles;
-  isSubmitting: boolean;
   template: SandpackProviderProps['template'];
   sharedProps: Partial<SandpackProviderProps>;
   editorRef: React.MutableRefObject<CodeEditorRef>;
 }) {
   const { data: config } = useGetStartupConfig();
+  const { isSubmitting } = useArtifactsContext();
   const options: typeof sharedOptions = useMemo(() => {
     if (!config) {
       return sharedOptions;
@@ -148,6 +147,10 @@ export const ArtifactCodeEditor = memo(function ({
       bundlerURL: template === 'static' ? config.staticBundlerURL : config.bundlerURL,
     };
   }, [config, template]);
+  const [readOnly, setReadOnly] = useState(isSubmitting ?? false);
+  useEffect(() => {
+    setReadOnly(isSubmitting ?? false);
+  }, [isSubmitting]);
 
   if (Object.keys(files).length === 0) {
     return null;
@@ -164,12 +167,7 @@ export const ArtifactCodeEditor = memo(function ({
       {...sharedProps}
       template={template}
     >
-      <CodeEditor
-        editorRef={editorRef}
-        fileKey={fileKey}
-        readOnly={isSubmitting}
-        artifact={artifact}
-      />
+      <CodeEditor fileKey={fileKey} artifact={artifact} editorRef={editorRef} readOnly={readOnly} />
     </StyledProvider>
   );
-});
+};

client/src/components/Artifacts/ArtifactTabs.tsx

@@ -2,12 +2,12 @@ import { useRef, useEffect } from 'react';
 import * as Tabs from '@radix-ui/react-tabs';
 import type { SandpackPreviewRef, CodeEditorRef } from '@codesandbox/sandpack-react';
 import type { Artifact } from '~/common';
+import { useEditorContext, useArtifactsContext } from '~/Providers';
 import useArtifactProps from '~/hooks/Artifacts/useArtifactProps';
 import { useAutoScroll } from '~/hooks/Artifacts/useAutoScroll';
 import { ArtifactCodeEditor } from './ArtifactCodeEditor';
 import { useGetStartupConfig } from '~/data-provider';
 import { ArtifactPreview } from './ArtifactPreview';
-import { useEditorContext } from '~/Providers';
 import { cn } from '~/utils';
 
 export default function ArtifactTabs({
@@ -15,14 +15,13 @@ export default function ArtifactTabs({
   isMermaid,
   editorRef,
   previewRef,
-  isSubmitting,
 }: {
   artifact: Artifact;
   isMermaid: boolean;
-  isSubmitting: boolean;
   editorRef: React.MutableRefObject<CodeEditorRef>;
   previewRef: React.MutableRefObject<SandpackPreviewRef>;
 }) {
+  const { isSubmitting } = useArtifactsContext();
   const { currentCode, setCurrentCode } = useEditorContext();
   const { data: startupConfig } = useGetStartupConfig();
   const lastIdRef = useRef<string | null>(null);
@@ -52,7 +51,6 @@ export default function ArtifactTabs({
           artifact={artifact}
           editorRef={editorRef}
           sharedProps={sharedProps}
-          isSubmitting={isSubmitting}
         />
       </Tabs.Content>
       <Tabs.Content

client/src/components/Artifacts/Artifacts.tsx

@@ -29,7 +29,6 @@ export default function Artifacts() {
     isMermaid,
     setActiveTab,
     currentIndex,
-    isSubmitting,
     cycleArtifact,
     currentArtifact,
     orderedArtifactIds,
@@ -116,7 +115,6 @@ export default function Artifacts() {
           <ArtifactTabs
             isMermaid={isMermaid}
             artifact={currentArtifact}
-            isSubmitting={isSubmitting}
             editorRef={editorRef as React.MutableRefObject<CodeEditorRef>}
             previewRef={previewRef as React.MutableRefObject<SandpackPreviewRef>}
           />

client/src/hooks/Artifacts/useArtifacts.ts

@@ -135,7 +135,6 @@ export default function useArtifacts() {
     isMermaid,
     setActiveTab,
     currentIndex,
-    isSubmitting,
     cycleArtifact,
     currentArtifact,
     orderedArtifactIds,