@adcops/autocore-react 3.0.23 → 3.0.25

package/dist/components/BlocklyEditor.d.ts

@@ -1,5 +1,5 @@
-import Blockly from "blockly";
 import React from 'react';
+import Blockly from "blockly";
 import "./BlocklyEditor.css";
 /**
  * Properties for the Blockly Editor.
@@ -9,7 +9,7 @@ interface BlocklyEditorProps {
      * The initial XML representation of the Blockly workspace. Can be undefined
      * if the workspace should start empty.
      */
-    initialXml: string | undefined;
+    initialXml?: string | undefined;
     /**
      * The configuration definition for the Blockly Toolbox.
      */
@@ -30,7 +30,7 @@ interface BlocklyEditorProps {
      * Callback fired when the Blockly workspace content changes.
      * Note: This does not directly reflect changes to the XML or the code.
      */
-    onWorkspaceChanged?: () => void;
+    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.
@@ -41,36 +41,11 @@ interface BlocklyEditorProps {
      * @param code The updated generated code.
      */
     onCodeChanged?: (code: string) => void;
-}
-/**
- * State of the BlocklyEditor
- */
-interface BlocklyEditorState {
-    /**
-     * A name for the Blockly editor, potentially used for identification.
-     */
-    name: string;
-    /**
-     * The current XML representation of the workspace.
-     */
-    xml: string;
     /**
-     * The current generated code (e.g., Python).
+     * Callback fired when an error occurs.
+     * Includes an error message.
      */
-    code: string;
-    /**
-     * The height of the first parent container with
-     * classname "blockly-container". It is important to set
-     * a parent container with this class name for auto-sizing to work!
-     */
-    parentHeight: number;
-    /**
-     * The width of the first parent container with
-     * classname "blockly-container". It is important to set
-     * a parent container with this class name for auto-sizing to work!
-     */
-    parentWidth: number;
-    initialXmlLoaded: boolean;
+    onError?: (message: string) => void;
 }
 /**
  * A view that contains the blockly editor, wrapping the react-blockly BlocklyWorkspace
@@ -84,30 +59,52 @@ interface BlocklyEditorState {
  *
  * 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 declare class BlocklyEditor extends React.Component<BlocklyEditorProps, BlocklyEditorState> {
-    static defaultProps: {
-        initialXml: undefined;
-        widthAdjustment: number;
-        heightAdjustment: number;
-        onWorkspaceChanged: undefined;
-        onXmlChanged: undefined;
-        onCodeChanged: undefined;
-    };
-    private ref;
-    /**
-     * Constructor
-     */
-    constructor(props: BlocklyEditorProps);
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: BlocklyEditorProps): void;
-    componentWillUnmount(): void;
-    updateParentSize: () => void;
-    private onWorkspaceChanged;
-    private setXml;
-    private onInject;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+export declare const BlocklyEditor: React.ForwardRefExoticComponent<BlocklyEditorProps & React.RefAttributes<unknown>>;
 export default BlocklyEditor;
 /**
  * Creates a custom Blockly toolbox XML string by inserting additional XML before and after

package/dist/components/BlocklyEditor.js

@@ -1 +1 @@
-import{jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";import{pythonGenerator}from"blockly/python";import{BlocklyWorkspace}from"react-blockly";import React from"react";import"./BlocklyEditor.css";export class BlocklyEditor extends React.Component{constructor(e){super(e),Object.defineProperty(this,"ref",{enumerable:!0,configurable:!0,writable:!0,value:React.createRef()}),Object.defineProperty(this,"updateParentSize",{enumerable:!0,configurable:!0,writable:!0,value:()=>{if(this.ref.current){let e=0,n=0,t=this.ref.current.parentElement;for(;null!=t&&(e=t.offsetWidth,n=t.offsetHeight,!(t.className.indexOf("blockly-container")>=0));)t=t.parentElement;e<300&&(e=300),n<300&&(n=300),this.setState({parentWidth:.9*e+this.props.widthAdjustment,parentHeight:.9*n+this.props.heightAdjustment})}}}),Object.defineProperty(this,"onWorkspaceChanged",{enumerable:!0,configurable:!0,writable:!0,value:e=>{const n=pythonGenerator.workspaceToCode(e);this.setState({code:n}),void 0!==this.props.onWorkspaceChanged&&null!==this.props.onWorkspaceChanged&&this.props.onWorkspaceChanged(),void 0!==this.props.onCodeChanged&&null!==this.props.onCodeChanged&&this.props.onCodeChanged(n)}}),Object.defineProperty(this,"setXml",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.props.onXmlChanged&&this.props.onXmlChanged(e),this.setState({xml:e,initialXmlLoaded:!0})}}),Object.defineProperty(this,"onInject",{enumerable:!0,configurable:!0,writable:!0,value:e=>{}}),this.state={name:"",xml:"",code:"",parentWidth:0,parentHeight:0,initialXmlLoaded:!1}}componentDidMount(){this.updateParentSize(),window.addEventListener("resize",this.updateParentSize)}componentDidUpdate(e){}componentWillUnmount(){window.removeEventListener("resize",this.updateParentSize)}render(){return _jsx(_Fragment,{children:_jsx(BlocklyWorkspace,{className:"fill-height",toolboxConfiguration:this.props.toolbox,initialXml:this.props.initialXml,onWorkspaceChange:this.onWorkspaceChanged,onXmlChange:this.setXml,onInject:this.onInject,workspaceConfiguration:{grid:{spacing:20,length:3,colour:"#ccc",snap:!0}}})})}}Object.defineProperty(BlocklyEditor,"defaultProps",{enumerable:!0,configurable:!0,writable:!0,value:{initialXml:void 0,widthAdjustment:0,heightAdjustment:0,onWorkspaceChanged:void 0,onXmlChanged:void 0,onCodeChanged:void 0}});export default BlocklyEditor;export const createCustomToolbox=(e,n)=>{const t="\x3c!-- END: Built-in Blockly Blocks //--\x3e",a=StandardToolbox.indexOf("\x3c!-- BEGIN: Built-in Blockly Blocks //--\x3e"),l=StandardToolbox.indexOf(t);if(-1===a||-1===l)throw new Error("Could not find markers in standard toolbox");return StandardToolbox.slice(0,a)+(e||"")+StandardToolbox.slice(a,l+39)+(n||"")+StandardToolbox.slice(l+39+1)};export const StandardToolbox='\n    <xml id="toolbox" style="display: none">\n    \x3c!-- BEGIN: Built-in Blockly Blocks //--\x3e\n    <category name="Logic" categorystyle="logic_category">\n        <block type="controls_if"></block>\n        <block type="logic_compare"></block>\n        <block type="logic_operation"></block>\n        <block type="logic_negate"></block>\n        <block type="logic_boolean"></block>\n        <block type="logic_null" disabled="true"></block>\n        <block type="logic_ternary"></block>\n    </category>\n    <category name="Loops" categorystyle="loop_category">\n        <block type="controls_repeat_ext">\n            <value name="TIMES">\n                <shadow type="math_number">\n                    <field name="NUM">10</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="controls_repeat" disabled="true"></block>\n        <block type="controls_whileUntil"></block>\n        <block type="controls_for">\n            <value name="FROM">\n                <shadow type="math_number">\n                    <field name="NUM">1</field>\n                </shadow>\n            </value>\n            <value name="TO">\n                <shadow type="math_number">\n                    <field name="NUM">10</field>\n                </shadow>\n            </value>\n            <value name="BY">\n                <shadow type="math_number">\n                    <field name="NUM">1</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="controls_forEach"></block>\n        <block type="controls_flow_statements"></block>\n    </category>\n    <category name="Math" categorystyle="math_category">\n        <block type="math_number" gap="32">\n            <field name="NUM">123</field>\n        </block>\n        <block type="math_arithmetic">\n            <value name="A">\n                <shadow type="math_number">\n                    <field name="NUM">1</field>\n                </shadow>\n            </value>\n            <value name="B">\n                <shadow type="math_number">\n                    <field name="NUM">1</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="math_single">\n            <value name="NUM">\n                <shadow type="math_number">\n                    <field name="NUM">9</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="math_trig">\n            <value name="NUM">\n                <shadow type="math_number">\n                    <field name="NUM">45</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="math_constant"></block>\n        <block type="math_number_property">\n            <value name="NUMBER_TO_CHECK">\n                <shadow type="math_number">\n                    <field name="NUM">0</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="math_round">\n            <value name="NUM">\n                <shadow type="math_number">\n                    <field name="NUM">3.1</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="math_on_list"></block>\n        <block type="math_modulo">\n            <value name="DIVIDEND">\n                <shadow type="math_number">\n                    <field name="NUM">64</field>\n                </shadow>\n            </value>\n            <value name="DIVISOR">\n                <shadow type="math_number">\n                    <field name="NUM">10</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="math_constrain">\n            <value name="VALUE">\n                <shadow type="math_number">\n                    <field name="NUM">50</field>\n                </shadow>\n            </value>\n            <value name="LOW">\n                <shadow type="math_number">\n                    <field name="NUM">1</field>\n                </shadow>\n            </value>\n            <value name="HIGH">\n                <shadow type="math_number">\n                    <field name="NUM">100</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="math_random_int">\n            <value name="FROM">\n                <shadow type="math_number">\n                    <field name="NUM">1</field>\n                </shadow>\n            </value>\n            <value name="TO">\n                <shadow type="math_number">\n                    <field name="NUM">100</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="math_random_float"></block>\n        <block type="math_atan2">\n            <value name="X">\n                <shadow type="math_number">\n                    <field name="NUM">1</field>\n                </shadow>\n            </value>\n            <value name="Y">\n                <shadow type="math_number">\n                    <field name="NUM">1</field>\n                </shadow>\n            </value>\n        </block>\n    </category>\n    <category name="Text" categorystyle="text_category">\n        <block type="text"></block>\n        <block type="text_multiline"></block>\n        <block type="text_join"></block>\n        <block type="text_append">\n            <value name="TEXT">\n                <shadow type="text"></shadow>\n            </value>\n        </block>\n        <block type="text_length">\n            <value name="VALUE">\n                <shadow type="text">\n                    <field name="TEXT">abc</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="text_isEmpty">\n            <value name="VALUE">\n                <shadow type="text">\n                    <field name="TEXT"></field>\n                </shadow>\n            </value>\n        </block>\n        <block type="text_indexOf">\n            <value name="VALUE">\n                <block type="variables_get">\n                    <field name="VAR">text</field>\n                </block>\n            </value>\n            <value name="FIND">\n                <shadow type="text">\n                    <field name="TEXT">abc</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="text_charAt">\n            <value name="VALUE">\n                <block type="variables_get">\n                    <field name="VAR">text</field>\n                </block>\n            </value>\n        </block>\n        <block type="text_getSubstring">\n            <value name="STRING">\n                <block type="variables_get">\n                    <field name="VAR">text</field>\n                </block>\n            </value>\n        </block>\n        <block type="text_changeCase">\n            <value name="TEXT">\n                <shadow type="text">\n                    <field name="TEXT">abc</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="text_trim">\n            <value name="TEXT">\n                <shadow type="text">\n                    <field name="TEXT">abc</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="text_count">\n            <value name="SUB">\n                <shadow type="text"></shadow>\n            </value>\n            <value name="TEXT">\n                <shadow type="text"></shadow>\n            </value>\n        </block>\n        <block type="text_replace">\n            <value name="FROM">\n                <shadow type="text"></shadow>\n            </value>\n            <value name="TO">\n                <shadow type="text"></shadow>\n            </value>\n            <value name="TEXT">\n                <shadow type="text"></shadow>\n            </value>\n        </block>\n        <block type="text_reverse">\n            <value name="TEXT">\n                <shadow type="text"></shadow>\n            </value>\n        </block>\n        <label text="Input/Output:" web-class="ioLabel"></label>\n        <block type="text_print">\n            <value name="TEXT">\n                <shadow type="text">\n                    <field name="TEXT">abc</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="text_prompt_ext">\n            <value name="TEXT">\n                <shadow type="text">\n                    <field name="TEXT">abc</field>\n                </shadow>\n            </value>\n        </block>\n    </category>\n    <category name="Lists" categorystyle="list_category">\n        <block type="lists_create_with">\n            <mutation items="0"></mutation>\n        </block>\n        <block type="lists_create_with"></block>\n        <block type="lists_repeat">\n            <value name="NUM">\n                <shadow type="math_number">\n                    <field name="NUM">5</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="lists_length"></block>\n        <block type="lists_isEmpty"></block>\n        <block type="lists_indexOf">\n            <value name="VALUE">\n                <block type="variables_get">\n                    <field name="VAR">list</field>\n                </block>\n            </value>\n        </block>\n        <block type="lists_getIndex">\n            <value name="VALUE">\n                <block type="variables_get">\n                    <field name="VAR">list</field>\n                </block>\n            </value>\n        </block>\n        <block type="lists_setIndex">\n            <value name="LIST">\n                <block type="variables_get">\n                    <field name="VAR">list</field>\n                </block>\n            </value>\n        </block>\n        <block type="lists_getSublist">\n            <value name="LIST">\n                <block type="variables_get">\n                    <field name="VAR">list</field>\n                </block>\n            </value>\n        </block>\n        <block type="lists_split">\n            <value name="DELIM">\n                <shadow type="text">\n                    <field name="TEXT">,</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="lists_sort"></block>\n        <block type="lists_reverse"></block>\n    </category>\n    <category name="Variables" categorystyle="variable_category" custom="VARIABLE"></category>\n    <category name="Functions" categorystyle="procedure_category" custom="PROCEDURE"></category>\n\n    \x3c!-- END: Built-in Blockly Blocks //--\x3e\n\n    </xml>\n';
+import{jsx as _jsx}from"react/jsx-runtime";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";export const BlocklyEditor=forwardRef(((e,n)=>{const[l,t]=useState(""),[a,o]=useState(""),[c,d]=useState(0),[s,i]=useState(0),[m,r]=useState(void 0),b=React.createRef();useImperativeHandle(n,(()=>({newBlockly(){m&&m.clear()},loadBlockly(n){if(m)try{m.clear();const e=Blockly.utils.xml.textToDom(n);Blockly.Xml.domToWorkspace(e,m)}catch(n){e.onError&&e.onError(`${n}`)}}}))),React.useEffect((()=>(y(),window.addEventListener("resize",y),()=>{window.removeEventListener("resize",y)})),[]);const y=useCallback((()=>{if(b.current){let n=0,l=0,t=b.current.parentElement;for(;null!==t&&(n=t.offsetWidth,l=t.offsetHeight,!(t.className.indexOf("blockly-container")>=0));)t=t.parentElement;n<300&&(n=300),l<300&&(l=300),d(.9*n+e.widthAdjustment),i(.9*l+e.heightAdjustment)}}),[e.widthAdjustment,e.heightAdjustment]);return _jsx("div",{ref:b,style:{width:c,height:s},children:_jsx(BlocklyWorkspace,{className:"fill-height",toolboxConfiguration:e.toolbox,initialXml:e.initialXml,onWorkspaceChange:n=>{const l=pythonGenerator.workspaceToCode(n);o(l),e.onWorkspaceChanged&&e.onWorkspaceChanged(n),e.onCodeChanged&&e.onCodeChanged(l)},onXmlChange:n=>{t(n),void 0!==e.onXmlChanged&&null!==e.onXmlChanged&&e.onXmlChanged(n)},onInject:e=>{r(e)},workspaceConfiguration:{grid:{spacing:20,length:3,colour:"#ccc",snap:!0}}})})}));export default BlocklyEditor;export const createCustomToolbox=(e,n)=>{const l="\x3c!-- END: Built-in Blockly Blocks //--\x3e",t=StandardToolbox.indexOf("\x3c!-- BEGIN: Built-in Blockly Blocks //--\x3e"),a=StandardToolbox.indexOf(l);if(-1===t||-1===a)throw new Error("Could not find markers in standard toolbox");return StandardToolbox.slice(0,t)+(e||"")+StandardToolbox.slice(t,a+39)+(n||"")+StandardToolbox.slice(a+39+1)};export const StandardToolbox='\n    <xml id="toolbox" style="display: none">\n    \x3c!-- BEGIN: Built-in Blockly Blocks //--\x3e\n    <category name="Logic" categorystyle="logic_category">\n        <block type="controls_if"></block>\n        <block type="logic_compare"></block>\n        <block type="logic_operation"></block>\n        <block type="logic_negate"></block>\n        <block type="logic_boolean"></block>\n        <block type="logic_null" disabled="true"></block>\n        <block type="logic_ternary"></block>\n    </category>\n    <category name="Loops" categorystyle="loop_category">\n        <block type="controls_repeat_ext">\n            <value name="TIMES">\n                <shadow type="math_number">\n                    <field name="NUM">10</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="controls_repeat" disabled="true"></block>\n        <block type="controls_whileUntil"></block>\n        <block type="controls_for">\n            <value name="FROM">\n                <shadow type="math_number">\n                    <field name="NUM">1</field>\n                </shadow>\n            </value>\n            <value name="TO">\n                <shadow type="math_number">\n                    <field name="NUM">10</field>\n                </shadow>\n            </value>\n            <value name="BY">\n                <shadow type="math_number">\n                    <field name="NUM">1</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="controls_forEach"></block>\n        <block type="controls_flow_statements"></block>\n    </category>\n    <category name="Math" categorystyle="math_category">\n        <block type="math_number" gap="32">\n            <field name="NUM">123</field>\n        </block>\n        <block type="math_arithmetic">\n            <value name="A">\n                <shadow type="math_number">\n                    <field name="NUM">1</field>\n                </shadow>\n            </value>\n            <value name="B">\n                <shadow type="math_number">\n                    <field name="NUM">1</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="math_single">\n            <value name="NUM">\n                <shadow type="math_number">\n                    <field name="NUM">9</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="math_trig">\n            <value name="NUM">\n                <shadow type="math_number">\n                    <field name="NUM">45</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="math_constant"></block>\n        <block type="math_number_property">\n            <value name="NUMBER_TO_CHECK">\n                <shadow type="math_number">\n                    <field name="NUM">0</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="math_round">\n            <value name="NUM">\n                <shadow type="math_number">\n                    <field name="NUM">3.1</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="math_on_list"></block>\n        <block type="math_modulo">\n            <value name="DIVIDEND">\n                <shadow type="math_number">\n                    <field name="NUM">64</field>\n                </shadow>\n            </value>\n            <value name="DIVISOR">\n                <shadow type="math_number">\n                    <field name="NUM">10</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="math_constrain">\n            <value name="VALUE">\n                <shadow type="math_number">\n                    <field name="NUM">50</field>\n                </shadow>\n            </value>\n            <value name="LOW">\n                <shadow type="math_number">\n                    <field name="NUM">1</field>\n                </shadow>\n            </value>\n            <value name="HIGH">\n                <shadow type="math_number">\n                    <field name="NUM">100</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="math_random_int">\n            <value name="FROM">\n                <shadow type="math_number">\n                    <field name="NUM">1</field>\n                </shadow>\n            </value>\n            <value name="TO">\n                <shadow type="math_number">\n                    <field name="NUM">100</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="math_random_float"></block>\n        <block type="math_atan2">\n            <value name="X">\n                <shadow type="math_number">\n                    <field name="NUM">1</field>\n                </shadow>\n            </value>\n            <value name="Y">\n                <shadow type="math_number">\n                    <field name="NUM">1</field>\n                </shadow>\n            </value>\n        </block>\n    </category>\n    <category name="Text" categorystyle="text_category">\n        <block type="text"></block>\n        <block type="text_multiline"></block>\n        <block type="text_join"></block>\n        <block type="text_append">\n            <value name="TEXT">\n                <shadow type="text"></shadow>\n            </value>\n        </block>\n        <block type="text_length">\n            <value name="VALUE">\n                <shadow type="text">\n                    <field name="TEXT">abc</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="text_isEmpty">\n            <value name="VALUE">\n                <shadow type="text">\n                    <field name="TEXT"></field>\n                </shadow>\n            </value>\n        </block>\n        <block type="text_indexOf">\n            <value name="VALUE">\n                <block type="variables_get">\n                    <field name="VAR">text</field>\n                </block>\n            </value>\n            <value name="FIND">\n                <shadow type="text">\n                    <field name="TEXT">abc</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="text_charAt">\n            <value name="VALUE">\n                <block type="variables_get">\n                    <field name="VAR">text</field>\n                </block>\n            </value>\n        </block>\n        <block type="text_getSubstring">\n            <value name="STRING">\n                <block type="variables_get">\n                    <field name="VAR">text</field>\n                </block>\n            </value>\n        </block>\n        <block type="text_changeCase">\n            <value name="TEXT">\n                <shadow type="text">\n                    <field name="TEXT">abc</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="text_trim">\n            <value name="TEXT">\n                <shadow type="text">\n                    <field name="TEXT">abc</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="text_count">\n            <value name="SUB">\n                <shadow type="text"></shadow>\n            </value>\n            <value name="TEXT">\n                <shadow type="text"></shadow>\n            </value>\n        </block>\n        <block type="text_replace">\n            <value name="FROM">\n                <shadow type="text"></shadow>\n            </value>\n            <value name="TO">\n                <shadow type="text"></shadow>\n            </value>\n            <value name="TEXT">\n                <shadow type="text"></shadow>\n            </value>\n        </block>\n        <block type="text_reverse">\n            <value name="TEXT">\n                <shadow type="text"></shadow>\n            </value>\n        </block>\n        <label text="Input/Output:" web-class="ioLabel"></label>\n        <block type="text_print">\n            <value name="TEXT">\n                <shadow type="text">\n                    <field name="TEXT">abc</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="text_prompt_ext">\n            <value name="TEXT">\n                <shadow type="text">\n                    <field name="TEXT">abc</field>\n                </shadow>\n            </value>\n        </block>\n    </category>\n    <category name="Lists" categorystyle="list_category">\n        <block type="lists_create_with">\n            <mutation items="0"></mutation>\n        </block>\n        <block type="lists_create_with"></block>\n        <block type="lists_repeat">\n            <value name="NUM">\n                <shadow type="math_number">\n                    <field name="NUM">5</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="lists_length"></block>\n        <block type="lists_isEmpty"></block>\n        <block type="lists_indexOf">\n            <value name="VALUE">\n                <block type="variables_get">\n                    <field name="VAR">list</field>\n                </block>\n            </value>\n        </block>\n        <block type="lists_getIndex">\n            <value name="VALUE">\n                <block type="variables_get">\n                    <field name="VAR">list</field>\n                </block>\n            </value>\n        </block>\n        <block type="lists_setIndex">\n            <value name="LIST">\n                <block type="variables_get">\n                    <field name="VAR">list</field>\n                </block>\n            </value>\n        </block>\n        <block type="lists_getSublist">\n            <value name="LIST">\n                <block type="variables_get">\n                    <field name="VAR">list</field>\n                </block>\n            </value>\n        </block>\n        <block type="lists_split">\n            <value name="DELIM">\n                <shadow type="text">\n                    <field name="TEXT">,</field>\n                </shadow>\n            </value>\n        </block>\n        <block type="lists_sort"></block>\n        <block type="lists_reverse"></block>\n    </category>\n    <category name="Variables" categorystyle="variable_category" custom="VARIABLE"></category>\n    <category name="Functions" categorystyle="procedure_category" custom="PROCEDURE"></category>\n\n    \x3c!-- END: Built-in Blockly Blocks //--\x3e\n\n    </xml>\n';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adcops/autocore-react",
-    "version": "3.0.23",
+    "version": "3.0.25",
     "description": "A React component library for industrial user interfaces.",
     "private": false,
     "type": "module",

package/src/components/BlocklyEditor.tsx

@@ -2,17 +2,17 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-03-15 13:21:06
  * -----
- * Last Modified: 2024-05-17 11:36:58
+ * 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 React from 'react';
 
 import "./BlocklyEditor.css";
 
@@ -25,7 +25,7 @@ interface BlocklyEditorProps {
      * The initial XML representation of the Blockly workspace. Can be undefined 
      * if the workspace should start empty.
      */
-    initialXml: string | undefined;
+    initialXml?: string | undefined;
 
     /**
      * The configuration definition for the Blockly Toolbox.
@@ -52,7 +52,7 @@ interface BlocklyEditorProps {
      * Callback fired when the Blockly workspace content changes.
      * Note: This does not directly reflect changes to the XML or the code.
      */
-    onWorkspaceChanged?: () => void;
+    onWorkspaceChanged?: (workspace: Blockly.WorkspaceSvg | undefined) => void;
 
     /**
      * Callback fired when the XML representation of the workspace changes.
@@ -66,45 +66,12 @@ interface BlocklyEditorProps {
      */
     onCodeChanged?: (code: string) => void;
 
-}
-
-
-/**
- * State of the BlocklyEditor
- */
-interface BlocklyEditorState {
-
-    /**
-     * A name for the Blockly editor, potentially used for identification.
-     */
-    name: string;
-
-    /**
-     * The current XML representation of the workspace.
-     */
-    xml: string;
-
-    /**
-     * The current generated code (e.g., Python).
-     */
-    code: string;
-
-    /**
-     * The height of the first parent container with
-     * classname "blockly-container". It is important to set
-     * a parent container with this class name for auto-sizing to work!
-     */
-    parentHeight: number;
 
     /**
-     * The width of the first parent container with
-     * classname "blockly-container". It is important to set
-     * a parent container with this class name for auto-sizing to work!
+     * Callback fired when an error occurs.
+     * Includes an error message.
      */
-    parentWidth: number;
-
-
-    initialXmlLoaded : boolean;
+    onError? : (message : string) => void;
 
 }
 
@@ -121,63 +88,107 @@ interface BlocklyEditorState {
  * 
  * 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 class BlocklyEditor extends React.Component<BlocklyEditorProps, BlocklyEditorState> {
-
-    static defaultProps = {
-        initialXml: undefined,
-        widthAdjustment: 0,
-        heightAdjustment: 0,
-        onWorkspaceChanged: undefined,
-        onXmlChanged : undefined,
-        onCodeChanged : undefined  
-    };
-
-    // Explicitly type the ref as a reference to a HTMLDivElement
-    private ref = React.createRef<HTMLDivElement>();
+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}`);
+                    }
+                }
+            }
+        }
+    }));
 
-    /**
-     * Constructor
-     */
-    constructor(props: BlocklyEditorProps) {
-        super(props);
-        this.state = {
-            name: '',
-            xml: '',
-            code: '',
-            parentWidth: 0,
-            parentHeight: 0,
-            initialXmlLoaded : false
+    React.useEffect(() => {
+        updateParentSize();
+        window.addEventListener('resize', updateParentSize);
+        return () => {
+            window.removeEventListener('resize', updateParentSize);
         };
+    }, []);
 
-    }
-
-    componentDidMount() {
-        this.updateParentSize();
-        window.addEventListener('resize', this.updateParentSize);
-    }
-
-    componentDidUpdate(prevProps: BlocklyEditorProps) {
-        prevProps;        
-        // Logic to handle updates in props, if necessary        
-    }
-
-    componentWillUnmount() {
-        window.removeEventListener('resize', this.updateParentSize);
-    }
-
-
-    updateParentSize = () => {
-
-        if (this.ref.current) {
-
-
-            const parent = this.ref.current.parentElement;
+    /**
+     * 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 = parent;
+            let p = containerRef.current.parentElement;
 
-            while (p !== undefined && p !== null) {
+            while (p !== null) {
                 w = p.offsetWidth;
                 h = p.offsetHeight;
 
@@ -188,75 +199,68 @@ export class BlocklyEditor extends React.Component<BlocklyEditorProps, BlocklyEd
                 p = p.parentElement;
             }
 
-            if (w < 300) {
-                w = 300;
-            }
-
-            if (h < 300)
-                h = 300;
+            if (w < 300) w = 300;
+            if (h < 300) h = 300;
 
-            this.setState({
-                parentWidth: (w * 0.9) + this.props.widthAdjustment,
-                parentHeight: (h * 0.9) + this.props.heightAdjustment,
-            });
+            setParentWidth((w * 0.9) + props.widthAdjustment);
+            setParentHeight((h * 0.9) + props.heightAdjustment);
         }
-    };
+    }, [props.widthAdjustment, props.heightAdjustment]);
 
-
-
-
-    private onWorkspaceChanged = (workspace: Blockly.WorkspaceSvg | undefined) => {
+    /**
+     * 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);
-        this.setState({ code: code });
-        if (this.props.onWorkspaceChanged !== undefined && this.props.onWorkspaceChanged !== null)
-            this.props.onWorkspaceChanged();
-
-        if (this.props.onCodeChanged !== undefined && this.props.onCodeChanged !== null)
-            this.props.onCodeChanged(code);
-    }
+        setCode(code);
+        if (props.onWorkspaceChanged) props.onWorkspaceChanged(workspace);
+        if (props.onCodeChanged) props.onCodeChanged(code);
+    };
 
-    private setXml = (xml: string) => {
 
-        if (this.props.onXmlChanged) {
-            this.props.onXmlChanged(xml);
+    /**
+     * 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);
         }
-        
-        this.setState({ xml: xml, initialXmlLoaded: true });
-    }
-
-    private onInject = (workspace: Blockly.WorkspaceSvg) => {
-        workspace;
-    }
-
-
-    render() {
-
-        return (
-            <>
-                <BlocklyWorkspace
-                    className="fill-height" // you can use whatever classes are appropriate for your app's CSS
-                    toolboxConfiguration={this.props.toolbox} // this must be a JSON toolbox definition
-                    initialXml={this.props.initialXml}
-                    onWorkspaceChange={this.onWorkspaceChanged}
-                    onXmlChange={this.setXml}
-                    onInject={this.onInject}
-                    workspaceConfiguration={{
-                        grid: {
-                            spacing: 20,
-                            length: 3,
-                            colour: "#ccc",
-                            snap: true,
-                        },
-                    }}
-                />
-
-            </>
-
-        )
     }
 
+    /**
+     * 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;