Fix bug where the turtle canvas couldn't be found (#1082)

closes
RaspberryPiFoundation/editor-standalone#388

Author: loiswells97

CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Fixed
+
+- Enabling web component to find the `turtle` canvas
+
 ## [0.27.0] - 2024-09-26
 
 ### Added

src/components/Editor/Runners/PythonRunner/VisualOutputPane.jsx

@@ -18,15 +18,15 @@ const VisualOutputPane = () => {
   const projectImages = useSelector((state) => state.editor.project.image_list);
   const error = useSelector((state) => state.editor.error);
 
-  const outputCanvas = useRef();
+  const turtleOutput = useRef();
   const pygalOutput = useRef();
   const p5Output = useRef();
   const dispatch = useDispatch();
   const { t } = useTranslation();
 
   useEffect(() => {
     if (codeRunTriggered) {
-      outputCanvas.current.innerHTML = "";
+      turtleOutput.current.innerHTML = "";
       pygalOutput.current.innerHTML = "";
       p5Output.current.innerHTML = "";
 
@@ -43,7 +43,8 @@ const VisualOutputPane = () => {
 
       (Sk.pygal || (Sk.pygal = {})).outputCanvas = pygalOutput.current;
 
-      (Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = "outputCanvas";
+      (Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target =
+        turtleOutput.current;
       Sk.TurtleGraphics.assets = Object.assign(
         {},
         ...projectImages.map((image) => ({
@@ -78,8 +79,8 @@ const VisualOutputPane = () => {
       <div id="pygalOutput" ref={pygalOutput} />
       <div className="pythonrunner-canvas-container">
         <div
-          id="outputCanvas"
-          ref={outputCanvas}
+          id="turtleOutput"
+          ref={turtleOutput}
           className="pythonrunner-graphic"
         />
       </div>