controlar re-renderizado en pantalla desafío

src/App.tsx

@@ -23,6 +23,7 @@ import { PilasBloquesApi } from './pbApi';
 import { Ember } from './emberCommunication';
 import { ChallengeView } from './components/challengeView/ChallengeView';
 import { PBSession } from './pbSession';
+import { setXml, xmlBloqueEmpezarAEjecutar } from './components/blockly/blockly';
 
 const AnalyticsComponent = () => {
   const location = useLocation();

src/components/blockly/PBBlocklyWorkspace.tsx

@@ -21,7 +21,7 @@ export type PBBlocklyWorkspaceProps = {
 export const PBBlocklyWorkspace = ({ blockIds, categorized, sx, title, ...props }: PBBlocklyWorkspaceProps) => {
   const { t } = useTranslation("blocks")
 
-  const { blocklyTheme, isSmallScreen } = useThemeContext()
+  const { blocklyTheme } = useThemeContext()
 
   const [blocklyContainer, setBlocklyContainer] = useState<Element>()
 
@@ -31,9 +31,9 @@ export const PBBlocklyWorkspace = ({ blockIds, categorized, sx, title, ...props
 
   setupBlocklyBlocks(t)
 
-  if (blocklyContainer) setupBlockly(blocklyContainer, { theme: blocklyTheme, toolbox, ...props.workspaceConfiguration }) 
+  if (blocklyContainer)  setupBlockly(blocklyContainer, { theme: blocklyTheme, toolbox, ...props.workspaceConfiguration } ) 
 
-  if (blocklyContainer && props.initialXml) setXml(props.initialXml)
+  if (blocklyContainer && props.initialXml) setXml(props.initialXml )
 
   return (
     <PBCard sx={{ ...sx }}>

src/components/blockly/blockly.ts

@@ -1474,7 +1474,7 @@ export const setupBlocklyBlocks = (t: (key: string) => string) => {
   createCommonCode()
 }
 
-export const setXml = (xml: string) => {
+export const setXml = (xml: string ) => {
   Blockly.Xml.domToWorkspace(
     Blockly.utils.xml.textToDom(xml),
     Blockly.getMainWorkspace()
@@ -1483,6 +1483,5 @@ export const setXml = (xml: string) => {
 
 export const setupBlockly = (container: Element, workspaceConfiguration: Blockly.BlocklyOptions) => {
   container.replaceChildren() //Removes previous injection, otherwise it might keep inserting below the current workspace
-
   Blockly.inject(container, workspaceConfiguration)
 }

src/components/challengeView/ChallengeView.tsx

@@ -1,19 +1,21 @@
 import { useParams } from "react-router-dom"
 import { Challenge, PathToChallenge, currentIdFor, getPathToChallenge } from "../../staticData/challenges";
-import { useMediaQuery, PaperProps, Stack } from "@mui/material";
-import { StatementDescription } from "./StatementDescription";
+import { PaperProps, Stack } from "@mui/material";
 import { EditableBlocklyWorkspace } from "./EditableBlocklyWorkspace";
 import { InfoButton, SceneButtons, SceneButtonsVertical } from "./SceneButtons/SceneButtons";
 import { SceneView } from "./SceneView";
+import { StatementDescription } from "./StatementDescription";
 import { ChallengeFooter, InfoDrawer } from "./Info/ChallengeFooter";
 import { LocalStorage } from "../../localStorage"
 import { Header } from "../header/Header"
 import { Scene, SceneMap, SerializedChallenge } from "../serializedChallenge";
 import { useTranslation } from "react-i18next";
 import { useThemeContext } from "../../theme/ThemeContext";
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { StatementTextToShow } from "../creator/Editor/MarkDownEdition/MarkdownEditor";
 import { ChallengeBreadcrumb } from "./ChallengeBreadcrumb";
+import Blockly from "blockly/core"
+import { setXml, xmlBloqueEmpezarAEjecutar } from "../blockly/blockly";
 
 export const serializedSceneToDescriptor = (scene: Scene) => {
   const mapToString = (map: SceneMap) => `"${JSON.stringify(map).replace(/"/g, '')}"`
@@ -24,7 +26,7 @@ export const serializedSceneToDescriptor = (scene: Scene) => {
 
 type ChallengeViewProps = {
   path?: string,
-  height?: string
+  height?: string,
 }
 
 export const ChallengeView = ({path, height}: ChallengeViewProps) => {
@@ -74,9 +76,22 @@ const ChallengeWorkspace = ({ statement, challenge, clue }: ChallengeWorkspacePr
   const { isSmallScreen } = useThemeContext()
   const [descriptionOrClue, setDescriptionOrClue] = useState(statement!)
   const setToShow = (show: StatementTextToShow) => setDescriptionOrClue(show === StatementTextToShow.CLUE ? clue! : statement!)
+  const [first, setFirst] = useState<boolean>(true)
+
+  useEffect(() => {
+    setFirst(false)
+  }, [])
+
   const blocklyWorkspaceProps: EditableBlocklyWorkspaceProps = {
     blockIds: challenge.toolboxBlockIds,
-    categorized: challenge.toolboxStyle !== 'noCategories'
+    categorized: challenge.toolboxStyle !== 'noCategories',
+    initialXml: first ? xmlBloqueEmpezarAEjecutar : Blockly.utils.xml.domToText( Blockly.Xml.workspaceToDom( Blockly.getMainWorkspace()))
+  }
+
+  console.log(blocklyWorkspaceProps.initialXml)
+
+  const InsideChallengeWorkspace = () => {
+    return isSmallScreen ? <VerticalChallengeWorkspace blocklyWorkspaceProps={blocklyWorkspaceProps} challenge={challenge} /> : <HorizontalChallengeWorkspace blocklyWorkspaceProps={blocklyWorkspaceProps} challenge={challenge} />
   }
 
   return <>
@@ -86,7 +101,7 @@ const ChallengeWorkspace = ({ statement, challenge, clue }: ChallengeWorkspacePr
         setShowStatement={setToShow}
         clueIsEnabled={clue !== ''}
         urlImage={challenge.imageURL()} />
-      {isSmallScreen ? <VerticalChallengeWorkspace blocklyWorkspaceProps={blocklyWorkspaceProps} challenge={challenge} /> : <HorizontalChallengeWorkspace blocklyWorkspaceProps={blocklyWorkspaceProps} challenge={challenge} />}
+        <InsideChallengeWorkspace/>
     </Stack>
     {!isSmallScreen ? <ChallengeFooter /> : <></>}
   </>
@@ -99,12 +114,17 @@ type ChallengeWorkspaceDistributionProps = {
 
 type EditableBlocklyWorkspaceProps = {
   blockIds: string[],
-  categorized: boolean
+  categorized: boolean,
+  initialXml: string
 }
 
 const HorizontalChallengeWorkspace = ({ challenge, blocklyWorkspaceProps }: ChallengeWorkspaceDistributionProps) => {
+  const blocklyWorkspace = useMemo<JSX.Element>( () => {
+    return <EditableBlocklyWorkspace blockIds={blocklyWorkspaceProps.blockIds} categorized={blocklyWorkspaceProps.categorized} initialXml={blocklyWorkspaceProps.initialXml} isVertical={false} />
+  },[])
+
   return <Stack direction="row" flexWrap={"wrap"} flexGrow={1}>
-    <EditableBlocklyWorkspace blockIds={blocklyWorkspaceProps.blockIds} categorized={blocklyWorkspaceProps.categorized} isVertical={false} />
+    {blocklyWorkspace}
     <Stack>
       <SceneButtons />
       <SceneView descriptor={challenge.sceneDescriptor} />
@@ -115,9 +135,12 @@ const HorizontalChallengeWorkspace = ({ challenge, blocklyWorkspaceProps }: Chal
 const VerticalChallengeWorkspace = ({ challenge, blocklyWorkspaceProps }: ChallengeWorkspaceDistributionProps) => {
 
   const [openDrawer, setOpenDrawer] = useState<boolean>(false)
+
+  const blocklyWorkspace = useMemo<JSX.Element>( () => {
+    return <EditableBlocklyWorkspace blockIds={blocklyWorkspaceProps.blockIds} categorized={blocklyWorkspaceProps.categorized} initialXml={blocklyWorkspaceProps.initialXml} isVertical={true} /> }, [])
 
   return <Stack flexWrap={"wrap"} flexGrow={1} >
-    <EditableBlocklyWorkspace blockIds={blocklyWorkspaceProps.blockIds} categorized={blocklyWorkspaceProps.categorized} isVertical={true} />
+    {blocklyWorkspace}
     <Stack direction='row' marginBottom='5px' justifyContent='space-evenly'>
       <SceneView descriptor={challenge.sceneDescriptor} />
       <Stack margin='10px' justifyContent='space-between'>

src/components/creator/Editor/CreatorViewMode.tsx

@@ -17,7 +17,6 @@ export const CreatorViewMode = () => {
     const challengeBeingEdited: SerializedChallenge = LocalStorage.getCreatorChallenge()!
 
     //Ember.importChallenge(challengeBeingEdited)
-
     const navigate = useNavigate()
 
     const challengeExists = LocalStorage.getCreatorChallenge()
@@ -30,7 +29,7 @@ export const CreatorViewMode = () => {
         {challengeExists ? (
             <>
                 <Header CenterComponent={<CreatorViewHeader title={challengeBeingEdited.title} />} SubHeader={<EditorSubHeader viewButton={<ReturnToEditionButton />} />} />
-                <ChallengeView height='calc(95% - var(--creator-subheader-height))' path={EMBER_IMPORTED_CHALLENGE_PATH} />
+                <ChallengeView height='calc(95% - var(--creator-subheader-height))' path={EMBER_IMPORTED_CHALLENGE_PATH}/>
 
             </>
         ) : <></>}