@adcops/autocore-react 3.3.9 → 3.3.10

package/src/components/BlocklyEditor.tsx

@@ -1,609 +1,609 @@
-/*
- * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
- * Created Date: 2024-03-15 13:21:06
- * -----
- * Last Modified: 2024-05-20 08:38:24
- * -----
- * 
- */
-
-import React, { forwardRef, useImperativeHandle, useCallback, useState } from 'react';
-import Blockly from "blockly";
-import { pythonGenerator } from 'blockly/python';
-
-import { BlocklyWorkspace } from 'react-blockly';
-
-
-import "./BlocklyEditor.css";
-
-
-/**
- * Properties for the Blockly Editor.
- */
-interface BlocklyEditorProps {
-    /**
-     * The initial XML representation of the Blockly workspace. Can be undefined 
-     * if the workspace should start empty.
-     */
-    initialXml?: string | undefined;
-
-    /**
-     * The configuration definition for the Blockly Toolbox.
-     */
-    toolbox: Blockly.utils.toolbox.ToolboxDefinition;
-
-
-    /**
-     * Allows the parent component to add/subtract from the calculated
-     * width of the BlocklyEditor to account for other components (like a menu, toolbar, switch)
-     * in the view.
-     */
-    widthAdjustment: number;
-
-
-    /**
-     * Allows the parent component to add/subtract from the calculated
-     * height of the BlocklyEditor to account for other components (like a menu, toolbar, switch)
-     * in the view.
-     */
-    heightAdjustment: number;
-
-    /**
-     * Callback fired when the Blockly workspace content changes.
-     * Note: This does not directly reflect changes to the XML or the code.
-     */
-    onWorkspaceChanged?: (workspace: Blockly.WorkspaceSvg | undefined) => void;
-
-    /**
-     * Callback fired when the XML representation of the workspace changes.
-     * @param xml The updated XML representation of the workspace.
-     */
-    onXmlChanged?: (xml: string) => void;
-
-    /**
-     * Callback fired when the generated code (e.g., Python) changes.
-     * @param code The updated generated code.
-     */
-    onCodeChanged?: (code: string) => void;
-
-
-    /**
-     * Callback fired when an error occurs.
-     * Includes an error message.
-     */
-    onError? : (message : string) => void;
-
-}
-
-
-/**
- * A view that contains the blockly editor, wrapping the react-blockly BlocklyWorkspace
- * component. The added value of this BlocklyEditor component is that it will automatically
- * size to the container, which can be a bit tricky when using blockly.
- * 
- * The auto-sizing requires a parent component to have the className "blockly-container". This
- * should be a component that has a known size roughly the size that you want the BlocklyEditor
- * to appear. Otherwise, the BlocklyEditor will use the dimentions of the entire window, which usually is
- * more than you want. 
- * 
- * Right now, the editor only supports generating python code, but a feature to specify the
- * generator for different languages is planned.
- * 
- * ## Usage Example
- * 
- * ```tsx
- * import React, { useRef } from 'react';
- * import BlocklyEditor from './BlocklyEditor';
- * import { StandardToolbox } from './toolbox';
- * 
- * const App: React.FC = () => {
- *   const blocklyEditorRef = useRef<{ newBlockly: () => void; loadBlockly: (xmlString: string) => void }>(null);
- * 
- *   const handleNew = () => {
- *     if (blocklyEditorRef.current) {
- *       blocklyEditorRef.current.newBlockly();
- *     }
- *   };
- * 
- *   const handleLoad = (xmlString: string) => {
- *     if (blocklyEditorRef.current) {
- *       blocklyEditorRef.current.loadBlockly(xmlString);
- *     }
- *   };
- * 
- *   return (
- *     <div className="blockly-container" style={{ height: '500px' }}>
- *       <BlocklyEditor
- *         ref={blocklyEditorRef}
- *         initialXml="<xml xmlns='http://www.w3.org/1999/xhtml'></xml>"
- *         toolbox={StandardToolbox}
- *         widthAdjustment={0}
- *         heightAdjustment={0}
- *         onWorkspaceChanged={(workspace) => console.log('Workspace changed:', workspace)}
- *         onXmlChanged={(xml) => console.log('XML changed:', xml)}
- *         onCodeChanged={(code) => console.log('Code changed:', code)}
- *         onError={(message) => console.error('Error:', message)}
- *       />
- *       <button onClick={handleNew}>New</button>
- *       <button onClick={() => handleLoad('<xml xmlns="http://www.w3.org/1999/xhtml"><block type="controls_if" x="10" y="10"></block></xml>')}>Load</button>
- *     </div>
- *   );
- * };
- * 
- * export default App;
- * ```
- */
-export const BlocklyEditor = forwardRef((props: BlocklyEditorProps, ref) => {
-
-    const [_xml, setXml] = useState<string>("");
-    const [_code, setCode] = useState<string>("");
-    const [parentWidth, setParentWidth] = useState<number>(0);
-    const [parentHeight, setParentHeight] = useState<number>(0);
-    const [editorWorkspace, setEditorWorkspace] = useState<Blockly.WorkspaceSvg | undefined>(undefined);
-
-    const containerRef = React.createRef<HTMLDivElement>();
-
-    useImperativeHandle(ref, () => ({
-        /**
-         * Clears the Blockly workspace, removing all blocks.
-         */        
-        newBlockly() {            
-            if (editorWorkspace) {
-                editorWorkspace.clear();
-            }
-        },
-        /**
-         * Loads the given XML string into the Blockly workspace.
-         * @param xmlString - The XML string representing the Blockly workspace to be loaded.
-         */        
-        loadBlockly(xmlString: string) {
-            if (editorWorkspace) {
-                try {
-                    editorWorkspace.clear();
-                    const xml = Blockly.utils.xml.textToDom(xmlString);
-                    Blockly.Xml.domToWorkspace(xml, editorWorkspace);
-                } catch (err) {
-                    if (props.onError) {
-                        props.onError(`${err}`);
-                    }
-                }
-            }
-        }
-    }));
-
-    React.useEffect(() => {
-        updateParentSize();
-        window.addEventListener('resize', updateParentSize);
-        return () => {
-            window.removeEventListener('resize', updateParentSize);
-        };
-    }, []);
-
-    /**
-     * Updates the size of the parent container to ensure the Blockly workspace fits within it.
-     */    
-    const updateParentSize = useCallback(() => {
-        if (containerRef.current) {
-            let w = 0;
-            let h = 0;
-            let p = containerRef.current.parentElement;
-
-            while (p !== null) {
-                w = p.offsetWidth;
-                h = p.offsetHeight;
-
-                if (p.className.indexOf("blockly-container") >= 0) {
-                    break;
-                }
-
-                p = p.parentElement;
-            }
-
-            if (w < 300) w = 300;
-            if (h < 300) h = 300;
-
-            setParentWidth((w * 0.9) + props.widthAdjustment);
-            setParentHeight((h * 0.9) + props.heightAdjustment);
-        }
-    }, [props.widthAdjustment, props.heightAdjustment]);
-
-    /**
-     * Callback function that is triggered when the Blockly workspace changes.
-     * It updates the generated code and triggers the appropriate callback.
-     * @param workspace - The Blockly workspace that has changed.
-     */    
-    const onWorkspaceChanged = (workspace: Blockly.WorkspaceSvg | undefined) => {
-        const code = pythonGenerator.workspaceToCode(workspace);
-        setCode(code);
-        if (props.onWorkspaceChanged) props.onWorkspaceChanged(workspace);
-        if (props.onCodeChanged) props.onCodeChanged(code);
-    };
-
-
-    /**
-     * Callback function that is triggered when the XML representation of the workspace changes.
-     * @param s - The updated XML string.
-     */    
-    const onXmlChanged = (s : string) => {
-        setXml(s);
-        if (props.onXmlChanged !== undefined && props.onXmlChanged !== null) {
-            props.onXmlChanged(s);
-        }
-    }
-
-    /**
-     * Callback function that is triggered when the Blockly workspace is injected.
-     * It sets the workspace reference.
-     * @param workspace - The Blockly workspace that has been injected.
-     */    
-    const onInject = (workspace: Blockly.WorkspaceSvg) => {
-        setEditorWorkspace(workspace);
-    };
-
-    return (
-        <div ref={containerRef} style={{ width: parentWidth, height: parentHeight }}>
-            <BlocklyWorkspace
-                className="fill-height"
-                toolboxConfiguration={props.toolbox}
-                initialXml={props.initialXml}
-                onWorkspaceChange={onWorkspaceChanged}
-                onXmlChange={onXmlChanged}
-                onInject={onInject}
-                workspaceConfiguration={{
-                    grid: {
-                        spacing: 20,
-                        length: 3,
-                        colour: "#ccc",
-                        snap: true,
-                    },
-                }}
-            />
-        </div>
-    );
-});
-
-export default BlocklyEditor;
-
-
-/**
- * Creates a custom Blockly toolbox XML string by inserting additional XML before and after 
- * the standard Blockly toolbox.
- * 
- * @param {string | undefined} xmlBefore - The XML content to be inserted before the built-in Blockly blocks.
- * @param {string | undefined} xmlAfter - The XML content to be inserted after the built-in Blockly blocks.
- * @returns {string} The customized toolbox XML string.
- */
-export const createCustomToolbox = (xmlBefore: string | undefined, xmlAfter: string | undefined): string => {
-
-    // Define markers for the insertion points.
-    const kStartMarker = "<!-- BEGIN: Built-in Blockly Blocks //-->";
-    const kEndMarker = "<!-- END: Built-in Blockly Blocks //-->";
-
-    const beginInsertPoint = StandardToolbox.indexOf(kStartMarker);
-    const endInsertPoint = StandardToolbox.indexOf(kEndMarker);
-
-    if (beginInsertPoint === -1 || endInsertPoint === -1) {
-        throw new Error('Could not find markers in standard toolbox');
-    }
-
-    // Insert xmlBefore right before the begin comment and xmlAfter right after the end comment.
-    const modifiedToolbox =
-        StandardToolbox.slice(0, beginInsertPoint) +
-        (xmlBefore ? xmlBefore : "") +
-        StandardToolbox.slice(beginInsertPoint, endInsertPoint + kEndMarker.length) +
-        (xmlAfter ? xmlAfter : "") +
-        StandardToolbox.slice(endInsertPoint + kEndMarker.length + 1);
-
-    return modifiedToolbox;
-
-}
-
-
-
-
-export const StandardToolbox = `
-    <xml id="toolbox" style="display: none">
-    <!-- BEGIN: Built-in Blockly Blocks //-->
-    <category name="Logic" categorystyle="logic_category">
-        <block type="controls_if"></block>
-        <block type="logic_compare"></block>
-        <block type="logic_operation"></block>
-        <block type="logic_negate"></block>
-        <block type="logic_boolean"></block>
-        <block type="logic_null" disabled="true"></block>
-        <block type="logic_ternary"></block>
-    </category>
-    <category name="Loops" categorystyle="loop_category">
-        <block type="controls_repeat_ext">
-            <value name="TIMES">
-                <shadow type="math_number">
-                    <field name="NUM">10</field>
-                </shadow>
-            </value>
-        </block>
-        <block type="controls_repeat" disabled="true"></block>
-        <block type="controls_whileUntil"></block>
-        <block type="controls_for">
-            <value name="FROM">
-                <shadow type="math_number">
-                    <field name="NUM">1</field>
-                </shadow>
-            </value>
-            <value name="TO">
-                <shadow type="math_number">
-                    <field name="NUM">10</field>
-                </shadow>
-            </value>
-            <value name="BY">
-                <shadow type="math_number">
-                    <field name="NUM">1</field>
-                </shadow>
-            </value>
-        </block>
-        <block type="controls_forEach"></block>
-        <block type="controls_flow_statements"></block>
-    </category>
-    <category name="Math" categorystyle="math_category">
-        <block type="math_number" gap="32">
-            <field name="NUM">123</field>
-        </block>
-        <block type="math_arithmetic">
-            <value name="A">
-                <shadow type="math_number">
-                    <field name="NUM">1</field>
-                </shadow>
-            </value>
-            <value name="B">
-                <shadow type="math_number">
-                    <field name="NUM">1</field>
-                </shadow>
-            </value>
-        </block>
-        <block type="math_single">
-            <value name="NUM">
-                <shadow type="math_number">
-                    <field name="NUM">9</field>
-                </shadow>
-            </value>
-        </block>
-        <block type="math_trig">
-            <value name="NUM">
-                <shadow type="math_number">
-                    <field name="NUM">45</field>
-                </shadow>
-            </value>
-        </block>
-        <block type="math_constant"></block>
-        <block type="math_number_property">
-            <value name="NUMBER_TO_CHECK">
-                <shadow type="math_number">
-                    <field name="NUM">0</field>
-                </shadow>
-            </value>
-        </block>
-        <block type="math_round">
-            <value name="NUM">
-                <shadow type="math_number">
-                    <field name="NUM">3.1</field>
-                </shadow>
-            </value>
-        </block>
-        <block type="math_on_list"></block>
-        <block type="math_modulo">
-            <value name="DIVIDEND">
-                <shadow type="math_number">
-                    <field name="NUM">64</field>
-                </shadow>
-            </value>
-            <value name="DIVISOR">
-                <shadow type="math_number">
-                    <field name="NUM">10</field>
-                </shadow>
-            </value>
-        </block>
-        <block type="math_constrain">
-            <value name="VALUE">
-                <shadow type="math_number">
-                    <field name="NUM">50</field>
-                </shadow>
-            </value>
-            <value name="LOW">
-                <shadow type="math_number">
-                    <field name="NUM">1</field>
-                </shadow>
-            </value>
-            <value name="HIGH">
-                <shadow type="math_number">
-                    <field name="NUM">100</field>
-                </shadow>
-            </value>
-        </block>
-        <block type="math_random_int">
-            <value name="FROM">
-                <shadow type="math_number">
-                    <field name="NUM">1</field>
-                </shadow>
-            </value>
-            <value name="TO">
-                <shadow type="math_number">
-                    <field name="NUM">100</field>
-                </shadow>
-            </value>
-        </block>
-        <block type="math_random_float"></block>
-        <block type="math_atan2">
-            <value name="X">
-                <shadow type="math_number">
-                    <field name="NUM">1</field>
-                </shadow>
-            </value>
-            <value name="Y">
-                <shadow type="math_number">
-                    <field name="NUM">1</field>
-                </shadow>
-            </value>
-        </block>
-    </category>
-    <category name="Text" categorystyle="text_category">
-        <block type="text"></block>
-        <block type="text_multiline"></block>
-        <block type="text_join"></block>
-        <block type="text_append">
-            <value name="TEXT">
-                <shadow type="text"></shadow>
-            </value>
-        </block>
-        <block type="text_length">
-            <value name="VALUE">
-                <shadow type="text">
-                    <field name="TEXT">abc</field>
-                </shadow>
-            </value>
-        </block>
-        <block type="text_isEmpty">
-            <value name="VALUE">
-                <shadow type="text">
-                    <field name="TEXT"></field>
-                </shadow>
-            </value>
-        </block>
-        <block type="text_indexOf">
-            <value name="VALUE">
-                <block type="variables_get">
-                    <field name="VAR">text</field>
-                </block>
-            </value>
-            <value name="FIND">
-                <shadow type="text">
-                    <field name="TEXT">abc</field>
-                </shadow>
-            </value>
-        </block>
-        <block type="text_charAt">
-            <value name="VALUE">
-                <block type="variables_get">
-                    <field name="VAR">text</field>
-                </block>
-            </value>
-        </block>
-        <block type="text_getSubstring">
-            <value name="STRING">
-                <block type="variables_get">
-                    <field name="VAR">text</field>
-                </block>
-            </value>
-        </block>
-        <block type="text_changeCase">
-            <value name="TEXT">
-                <shadow type="text">
-                    <field name="TEXT">abc</field>
-                </shadow>
-            </value>
-        </block>
-        <block type="text_trim">
-            <value name="TEXT">
-                <shadow type="text">
-                    <field name="TEXT">abc</field>
-                </shadow>
-            </value>
-        </block>
-        <block type="text_count">
-            <value name="SUB">
-                <shadow type="text"></shadow>
-            </value>
-            <value name="TEXT">
-                <shadow type="text"></shadow>
-            </value>
-        </block>
-        <block type="text_replace">
-            <value name="FROM">
-                <shadow type="text"></shadow>
-            </value>
-            <value name="TO">
-                <shadow type="text"></shadow>
-            </value>
-            <value name="TEXT">
-                <shadow type="text"></shadow>
-            </value>
-        </block>
-        <block type="text_reverse">
-            <value name="TEXT">
-                <shadow type="text"></shadow>
-            </value>
-        </block>
-        <label text="Input/Output:" web-class="ioLabel"></label>
-        <block type="text_print">
-            <value name="TEXT">
-                <shadow type="text">
-                    <field name="TEXT">abc</field>
-                </shadow>
-            </value>
-        </block>
-        <block type="text_prompt_ext">
-            <value name="TEXT">
-                <shadow type="text">
-                    <field name="TEXT">abc</field>
-                </shadow>
-            </value>
-        </block>
-    </category>
-    <category name="Lists" categorystyle="list_category">
-        <block type="lists_create_with">
-            <mutation items="0"></mutation>
-        </block>
-        <block type="lists_create_with"></block>
-        <block type="lists_repeat">
-            <value name="NUM">
-                <shadow type="math_number">
-                    <field name="NUM">5</field>
-                </shadow>
-            </value>
-        </block>
-        <block type="lists_length"></block>
-        <block type="lists_isEmpty"></block>
-        <block type="lists_indexOf">
-            <value name="VALUE">
-                <block type="variables_get">
-                    <field name="VAR">list</field>
-                </block>
-            </value>
-        </block>
-        <block type="lists_getIndex">
-            <value name="VALUE">
-                <block type="variables_get">
-                    <field name="VAR">list</field>
-                </block>
-            </value>
-        </block>
-        <block type="lists_setIndex">
-            <value name="LIST">
-                <block type="variables_get">
-                    <field name="VAR">list</field>
-                </block>
-            </value>
-        </block>
-        <block type="lists_getSublist">
-            <value name="LIST">
-                <block type="variables_get">
-                    <field name="VAR">list</field>
-                </block>
-            </value>
-        </block>
-        <block type="lists_split">
-            <value name="DELIM">
-                <shadow type="text">
-                    <field name="TEXT">,</field>
-                </shadow>
-            </value>
-        </block>
-        <block type="lists_sort"></block>
-        <block type="lists_reverse"></block>
-    </category>
-    <category name="Variables" categorystyle="variable_category" custom="VARIABLE"></category>
-    <category name="Functions" categorystyle="procedure_category" custom="PROCEDURE"></category>
-
-    <!-- END: Built-in Blockly Blocks //-->
-
-    </xml>
-`;
-
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-03-15 13:21:06
+ * -----
+ * Last Modified: 2024-05-20 08:38:24
+ * -----
+ * 
+ */
+
+import React, { forwardRef, useImperativeHandle, useCallback, useState } from 'react';
+import Blockly from "blockly";
+import { pythonGenerator } from 'blockly/python';
+
+import { BlocklyWorkspace } from 'react-blockly';
+
+
+import "./BlocklyEditor.css";
+
+
+/**
+ * Properties for the Blockly Editor.
+ */
+interface BlocklyEditorProps {
+    /**
+     * The initial XML representation of the Blockly workspace. Can be undefined 
+     * if the workspace should start empty.
+     */
+    initialXml?: string | undefined;
+
+    /**
+     * The configuration definition for the Blockly Toolbox.
+     */
+    toolbox: Blockly.utils.toolbox.ToolboxDefinition;
+
+
+    /**
+     * Allows the parent component to add/subtract from the calculated
+     * width of the BlocklyEditor to account for other components (like a menu, toolbar, switch)
+     * in the view.
+     */
+    widthAdjustment: number;
+
+
+    /**
+     * Allows the parent component to add/subtract from the calculated
+     * height of the BlocklyEditor to account for other components (like a menu, toolbar, switch)
+     * in the view.
+     */
+    heightAdjustment: number;
+
+    /**
+     * Callback fired when the Blockly workspace content changes.
+     * Note: This does not directly reflect changes to the XML or the code.
+     */
+    onWorkspaceChanged?: (workspace: Blockly.WorkspaceSvg | undefined) => void;
+
+    /**
+     * Callback fired when the XML representation of the workspace changes.
+     * @param xml The updated XML representation of the workspace.
+     */
+    onXmlChanged?: (xml: string) => void;
+
+    /**
+     * Callback fired when the generated code (e.g., Python) changes.
+     * @param code The updated generated code.
+     */
+    onCodeChanged?: (code: string) => void;
+
+
+    /**
+     * Callback fired when an error occurs.
+     * Includes an error message.
+     */
+    onError? : (message : string) => void;
+
+}
+
+
+/**
+ * A view that contains the blockly editor, wrapping the react-blockly BlocklyWorkspace
+ * component. The added value of this BlocklyEditor component is that it will automatically
+ * size to the container, which can be a bit tricky when using blockly.
+ * 
+ * The auto-sizing requires a parent component to have the className "blockly-container". This
+ * should be a component that has a known size roughly the size that you want the BlocklyEditor
+ * to appear. Otherwise, the BlocklyEditor will use the dimentions of the entire window, which usually is
+ * more than you want. 
+ * 
+ * Right now, the editor only supports generating python code, but a feature to specify the
+ * generator for different languages is planned.
+ * 
+ * ## Usage Example
+ * 
+ * ```tsx
+ * import React, { useRef } from 'react';
+ * import BlocklyEditor from './BlocklyEditor';
+ * import { StandardToolbox } from './toolbox';
+ * 
+ * const App: React.FC = () => {
+ *   const blocklyEditorRef = useRef<{ newBlockly: () => void; loadBlockly: (xmlString: string) => void }>(null);
+ * 
+ *   const handleNew = () => {
+ *     if (blocklyEditorRef.current) {
+ *       blocklyEditorRef.current.newBlockly();
+ *     }
+ *   };
+ * 
+ *   const handleLoad = (xmlString: string) => {
+ *     if (blocklyEditorRef.current) {
+ *       blocklyEditorRef.current.loadBlockly(xmlString);
+ *     }
+ *   };
+ * 
+ *   return (
+ *     <div className="blockly-container" style={{ height: '500px' }}>
+ *       <BlocklyEditor
+ *         ref={blocklyEditorRef}
+ *         initialXml="<xml xmlns='http://www.w3.org/1999/xhtml'></xml>"
+ *         toolbox={StandardToolbox}
+ *         widthAdjustment={0}
+ *         heightAdjustment={0}
+ *         onWorkspaceChanged={(workspace) => console.log('Workspace changed:', workspace)}
+ *         onXmlChanged={(xml) => console.log('XML changed:', xml)}
+ *         onCodeChanged={(code) => console.log('Code changed:', code)}
+ *         onError={(message) => console.error('Error:', message)}
+ *       />
+ *       <button onClick={handleNew}>New</button>
+ *       <button onClick={() => handleLoad('<xml xmlns="http://www.w3.org/1999/xhtml"><block type="controls_if" x="10" y="10"></block></xml>')}>Load</button>
+ *     </div>
+ *   );
+ * };
+ * 
+ * export default App;
+ * ```
+ */
+export const BlocklyEditor = forwardRef((props: BlocklyEditorProps, ref) => {
+
+    const [_xml, setXml] = useState<string>("");
+    const [_code, setCode] = useState<string>("");
+    const [parentWidth, setParentWidth] = useState<number>(0);
+    const [parentHeight, setParentHeight] = useState<number>(0);
+    const [editorWorkspace, setEditorWorkspace] = useState<Blockly.WorkspaceSvg | undefined>(undefined);
+
+    const containerRef = React.createRef<HTMLDivElement>();
+
+    useImperativeHandle(ref, () => ({
+        /**
+         * Clears the Blockly workspace, removing all blocks.
+         */        
+        newBlockly() {            
+            if (editorWorkspace) {
+                editorWorkspace.clear();
+            }
+        },
+        /**
+         * Loads the given XML string into the Blockly workspace.
+         * @param xmlString - The XML string representing the Blockly workspace to be loaded.
+         */        
+        loadBlockly(xmlString: string) {
+            if (editorWorkspace) {
+                try {
+                    editorWorkspace.clear();
+                    const xml = Blockly.utils.xml.textToDom(xmlString);
+                    Blockly.Xml.domToWorkspace(xml, editorWorkspace);
+                } catch (err) {
+                    if (props.onError) {
+                        props.onError(`${err}`);
+                    }
+                }
+            }
+        }
+    }));
+
+    React.useEffect(() => {
+        updateParentSize();
+        window.addEventListener('resize', updateParentSize);
+        return () => {
+            window.removeEventListener('resize', updateParentSize);
+        };
+    }, []);
+
+    /**
+     * Updates the size of the parent container to ensure the Blockly workspace fits within it.
+     */    
+    const updateParentSize = useCallback(() => {
+        if (containerRef.current) {
+            let w = 0;
+            let h = 0;
+            let p = containerRef.current.parentElement;
+
+            while (p !== null) {
+                w = p.offsetWidth;
+                h = p.offsetHeight;
+
+                if (p.className.indexOf("blockly-container") >= 0) {
+                    break;
+                }
+
+                p = p.parentElement;
+            }
+
+            if (w < 300) w = 300;
+            if (h < 300) h = 300;
+
+            setParentWidth((w * 0.9) + props.widthAdjustment);
+            setParentHeight((h * 0.9) + props.heightAdjustment);
+        }
+    }, [props.widthAdjustment, props.heightAdjustment]);
+
+    /**
+     * Callback function that is triggered when the Blockly workspace changes.
+     * It updates the generated code and triggers the appropriate callback.
+     * @param workspace - The Blockly workspace that has changed.
+     */    
+    const onWorkspaceChanged = (workspace: Blockly.WorkspaceSvg | undefined) => {
+        const code = pythonGenerator.workspaceToCode(workspace);
+        setCode(code);
+        if (props.onWorkspaceChanged) props.onWorkspaceChanged(workspace);
+        if (props.onCodeChanged) props.onCodeChanged(code);
+    };
+
+
+    /**
+     * Callback function that is triggered when the XML representation of the workspace changes.
+     * @param s - The updated XML string.
+     */    
+    const onXmlChanged = (s : string) => {
+        setXml(s);
+        if (props.onXmlChanged !== undefined && props.onXmlChanged !== null) {
+            props.onXmlChanged(s);
+        }
+    }
+
+    /**
+     * Callback function that is triggered when the Blockly workspace is injected.
+     * It sets the workspace reference.
+     * @param workspace - The Blockly workspace that has been injected.
+     */    
+    const onInject = (workspace: Blockly.WorkspaceSvg) => {
+        setEditorWorkspace(workspace);
+    };
+
+    return (
+        <div ref={containerRef} style={{ width: parentWidth, height: parentHeight }}>
+            <BlocklyWorkspace
+                className="fill-height"
+                toolboxConfiguration={props.toolbox}
+                initialXml={props.initialXml}
+                onWorkspaceChange={onWorkspaceChanged}
+                onXmlChange={onXmlChanged}
+                onInject={onInject}
+                workspaceConfiguration={{
+                    grid: {
+                        spacing: 20,
+                        length: 3,
+                        colour: "#ccc",
+                        snap: true,
+                    },
+                }}
+            />
+        </div>
+    );
+});
+
+export default BlocklyEditor;
+
+
+/**
+ * Creates a custom Blockly toolbox XML string by inserting additional XML before and after 
+ * the standard Blockly toolbox.
+ * 
+ * @param {string | undefined} xmlBefore - The XML content to be inserted before the built-in Blockly blocks.
+ * @param {string | undefined} xmlAfter - The XML content to be inserted after the built-in Blockly blocks.
+ * @returns {string} The customized toolbox XML string.
+ */
+export const createCustomToolbox = (xmlBefore: string | undefined, xmlAfter: string | undefined): string => {
+
+    // Define markers for the insertion points.
+    const kStartMarker = "<!-- BEGIN: Built-in Blockly Blocks //-->";
+    const kEndMarker = "<!-- END: Built-in Blockly Blocks //-->";
+
+    const beginInsertPoint = StandardToolbox.indexOf(kStartMarker);
+    const endInsertPoint = StandardToolbox.indexOf(kEndMarker);
+
+    if (beginInsertPoint === -1 || endInsertPoint === -1) {
+        throw new Error('Could not find markers in standard toolbox');
+    }
+
+    // Insert xmlBefore right before the begin comment and xmlAfter right after the end comment.
+    const modifiedToolbox =
+        StandardToolbox.slice(0, beginInsertPoint) +
+        (xmlBefore ? xmlBefore : "") +
+        StandardToolbox.slice(beginInsertPoint, endInsertPoint + kEndMarker.length) +
+        (xmlAfter ? xmlAfter : "") +
+        StandardToolbox.slice(endInsertPoint + kEndMarker.length + 1);
+
+    return modifiedToolbox;
+
+}
+
+
+
+
+export const StandardToolbox = `
+    <xml id="toolbox" style="display: none">
+    <!-- BEGIN: Built-in Blockly Blocks //-->
+    <category name="Logic" categorystyle="logic_category">
+        <block type="controls_if"></block>
+        <block type="logic_compare"></block>
+        <block type="logic_operation"></block>
+        <block type="logic_negate"></block>
+        <block type="logic_boolean"></block>
+        <block type="logic_null" disabled="true"></block>
+        <block type="logic_ternary"></block>
+    </category>
+    <category name="Loops" categorystyle="loop_category">
+        <block type="controls_repeat_ext">
+            <value name="TIMES">
+                <shadow type="math_number">
+                    <field name="NUM">10</field>
+                </shadow>
+            </value>
+        </block>
+        <block type="controls_repeat" disabled="true"></block>
+        <block type="controls_whileUntil"></block>
+        <block type="controls_for">
+            <value name="FROM">
+                <shadow type="math_number">
+                    <field name="NUM">1</field>
+                </shadow>
+            </value>
+            <value name="TO">
+                <shadow type="math_number">
+                    <field name="NUM">10</field>
+                </shadow>
+            </value>
+            <value name="BY">
+                <shadow type="math_number">
+                    <field name="NUM">1</field>
+                </shadow>
+            </value>
+        </block>
+        <block type="controls_forEach"></block>
+        <block type="controls_flow_statements"></block>
+    </category>
+    <category name="Math" categorystyle="math_category">
+        <block type="math_number" gap="32">
+            <field name="NUM">123</field>
+        </block>
+        <block type="math_arithmetic">
+            <value name="A">
+                <shadow type="math_number">
+                    <field name="NUM">1</field>
+                </shadow>
+            </value>
+            <value name="B">
+                <shadow type="math_number">
+                    <field name="NUM">1</field>
+                </shadow>
+            </value>
+        </block>
+        <block type="math_single">
+            <value name="NUM">
+                <shadow type="math_number">
+                    <field name="NUM">9</field>
+                </shadow>
+            </value>
+        </block>
+        <block type="math_trig">
+            <value name="NUM">
+                <shadow type="math_number">
+                    <field name="NUM">45</field>
+                </shadow>
+            </value>
+        </block>
+        <block type="math_constant"></block>
+        <block type="math_number_property">
+            <value name="NUMBER_TO_CHECK">
+                <shadow type="math_number">
+                    <field name="NUM">0</field>
+                </shadow>
+            </value>
+        </block>
+        <block type="math_round">
+            <value name="NUM">
+                <shadow type="math_number">
+                    <field name="NUM">3.1</field>
+                </shadow>
+            </value>
+        </block>
+        <block type="math_on_list"></block>
+        <block type="math_modulo">
+            <value name="DIVIDEND">
+                <shadow type="math_number">
+                    <field name="NUM">64</field>
+                </shadow>
+            </value>
+            <value name="DIVISOR">
+                <shadow type="math_number">
+                    <field name="NUM">10</field>
+                </shadow>
+            </value>
+        </block>
+        <block type="math_constrain">
+            <value name="VALUE">
+                <shadow type="math_number">
+                    <field name="NUM">50</field>
+                </shadow>
+            </value>
+            <value name="LOW">
+                <shadow type="math_number">
+                    <field name="NUM">1</field>
+                </shadow>
+            </value>
+            <value name="HIGH">
+                <shadow type="math_number">
+                    <field name="NUM">100</field>
+                </shadow>
+            </value>
+        </block>
+        <block type="math_random_int">
+            <value name="FROM">
+                <shadow type="math_number">
+                    <field name="NUM">1</field>
+                </shadow>
+            </value>
+            <value name="TO">
+                <shadow type="math_number">
+                    <field name="NUM">100</field>
+                </shadow>
+            </value>
+        </block>
+        <block type="math_random_float"></block>
+        <block type="math_atan2">
+            <value name="X">
+                <shadow type="math_number">
+                    <field name="NUM">1</field>
+                </shadow>
+            </value>
+            <value name="Y">
+                <shadow type="math_number">
+                    <field name="NUM">1</field>
+                </shadow>
+            </value>
+        </block>
+    </category>
+    <category name="Text" categorystyle="text_category">
+        <block type="text"></block>
+        <block type="text_multiline"></block>
+        <block type="text_join"></block>
+        <block type="text_append">
+            <value name="TEXT">
+                <shadow type="text"></shadow>
+            </value>
+        </block>
+        <block type="text_length">
+            <value name="VALUE">
+                <shadow type="text">
+                    <field name="TEXT">abc</field>
+                </shadow>
+            </value>
+        </block>
+        <block type="text_isEmpty">
+            <value name="VALUE">
+                <shadow type="text">
+                    <field name="TEXT"></field>
+                </shadow>
+            </value>
+        </block>
+        <block type="text_indexOf">
+            <value name="VALUE">
+                <block type="variables_get">
+                    <field name="VAR">text</field>
+                </block>
+            </value>
+            <value name="FIND">
+                <shadow type="text">
+                    <field name="TEXT">abc</field>
+                </shadow>
+            </value>
+        </block>
+        <block type="text_charAt">
+            <value name="VALUE">
+                <block type="variables_get">
+                    <field name="VAR">text</field>
+                </block>
+            </value>
+        </block>
+        <block type="text_getSubstring">
+            <value name="STRING">
+                <block type="variables_get">
+                    <field name="VAR">text</field>
+                </block>
+            </value>
+        </block>
+        <block type="text_changeCase">
+            <value name="TEXT">
+                <shadow type="text">
+                    <field name="TEXT">abc</field>
+                </shadow>
+            </value>
+        </block>
+        <block type="text_trim">
+            <value name="TEXT">
+                <shadow type="text">
+                    <field name="TEXT">abc</field>
+                </shadow>
+            </value>
+        </block>
+        <block type="text_count">
+            <value name="SUB">
+                <shadow type="text"></shadow>
+            </value>
+            <value name="TEXT">
+                <shadow type="text"></shadow>
+            </value>
+        </block>
+        <block type="text_replace">
+            <value name="FROM">
+                <shadow type="text"></shadow>
+            </value>
+            <value name="TO">
+                <shadow type="text"></shadow>
+            </value>
+            <value name="TEXT">
+                <shadow type="text"></shadow>
+            </value>
+        </block>
+        <block type="text_reverse">
+            <value name="TEXT">
+                <shadow type="text"></shadow>
+            </value>
+        </block>
+        <label text="Input/Output:" web-class="ioLabel"></label>
+        <block type="text_print">
+            <value name="TEXT">
+                <shadow type="text">
+                    <field name="TEXT">abc</field>
+                </shadow>
+            </value>
+        </block>
+        <block type="text_prompt_ext">
+            <value name="TEXT">
+                <shadow type="text">
+                    <field name="TEXT">abc</field>
+                </shadow>
+            </value>
+        </block>
+    </category>
+    <category name="Lists" categorystyle="list_category">
+        <block type="lists_create_with">
+            <mutation items="0"></mutation>
+        </block>
+        <block type="lists_create_with"></block>
+        <block type="lists_repeat">
+            <value name="NUM">
+                <shadow type="math_number">
+                    <field name="NUM">5</field>
+                </shadow>
+            </value>
+        </block>
+        <block type="lists_length"></block>
+        <block type="lists_isEmpty"></block>
+        <block type="lists_indexOf">
+            <value name="VALUE">
+                <block type="variables_get">
+                    <field name="VAR">list</field>
+                </block>
+            </value>
+        </block>
+        <block type="lists_getIndex">
+            <value name="VALUE">
+                <block type="variables_get">
+                    <field name="VAR">list</field>
+                </block>
+            </value>
+        </block>
+        <block type="lists_setIndex">
+            <value name="LIST">
+                <block type="variables_get">
+                    <field name="VAR">list</field>
+                </block>
+            </value>
+        </block>
+        <block type="lists_getSublist">
+            <value name="LIST">
+                <block type="variables_get">
+                    <field name="VAR">list</field>
+                </block>
+            </value>
+        </block>
+        <block type="lists_split">
+            <value name="DELIM">
+                <shadow type="text">
+                    <field name="TEXT">,</field>
+                </shadow>
+            </value>
+        </block>
+        <block type="lists_sort"></block>
+        <block type="lists_reverse"></block>
+    </category>
+    <category name="Variables" categorystyle="variable_category" custom="VARIABLE"></category>
+    <category name="Functions" categorystyle="procedure_category" custom="PROCEDURE"></category>
+
+    <!-- END: Built-in Blockly Blocks //-->
+
+    </xml>
+`;
+