@adcops/autocore-react 3.0.22 → 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,35 +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;
+    onError?: (message: string) => void;
 }
 /**
  * A view that contains the blockly editor, wrapping the react-blockly BlocklyWorkspace
@@ -83,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.setState({xml:e}),void 0!==this.props.onXmlChanged&&null!==this.props.onXmlChanged&&this.props.onXmlChanged(e)}}),Object.defineProperty(this,"onInject",{enumerable:!0,configurable:!0,writable:!0,value:e=>{}}),this.state={name:"",xml:"",code:"",parentWidth:0,parentHeight:0}}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/dist/components/TextInput.d.ts

@@ -1,10 +1,11 @@
 import React from "react";
+import { InputTextProps } from 'primereact/inputtext';
 import { EventEmitterContext } from "../core/EventEmitterContext.js";
 import { KeyFilterType } from "primereact/keyfilter";
 /**
  * Properties of the component.
  */
-interface TextInputProps {
+interface TextInputProps extends Omit<InputTextProps, "prefix"> {
     /**
      * The label for the field.
      */

package/dist/components/TextInput.js

@@ -1 +1 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import React from"react";import{InputText}from"primereact/inputtext";import{Button}from"primereact/button";import{EventEmitterContext}from"../core/EventEmitterContext.js";export class TextInput extends React.Component{constructor(t){super(t),Object.defineProperty(this,"validateValue",{enumerable:!0,configurable:!0,writable:!0,value:t=>void 0===this.props.validator||null===this.props.validator||this.props.validator.test(t)}),this.state={entryValue:t.value,isValid:void 0!==t.value&&this.validateValue(t.value),editing:!1}}componentDidMount(){}componentDidUpdate(t){t.value!==this.props.value&&this.setState({entryValue:this.props.value,editing:!1})}onAcceptValue(){void 0!==this.state.entryValue&&this.validateValue(this.state.entryValue)?(this.setState({isValid:!0,editing:!1}),this.props.onValueChanged&&this.props.onValueChanged(this.state.entryValue),void 0!==this.props.dispatchTopic&&this.context.dispatch({topic:this.props.dispatchTopic,payload:this.state.entryValue})):this.setState({isValid:!1})}onResetValue(){this.setState({entryValue:this.props.value,isValid:void 0!==this.props.value&&this.validateValue(this.props.value),editing:!1})}render(){return _jsxs("div",{children:[_jsxs("div",{className:"p-inputgroup flex-1",children:[_jsx("span",{className:"p-inputgroup-addon",children:this.props.label}),void 0!==this.props.prefix&&_jsx("span",{className:"p-inputgroup-addon",children:this.props.prefix}),_jsx(InputText,{keyfilter:this.props.keyFilter,placeholder:this.props.placeholder,value:this.state.entryValue,onChange:t=>{this.setState({entryValue:t.target.value,editing:!0})},className:this.state.isValid?"":"p-invalid",onKeyDown:t=>{"Enter"===t.key?this.onAcceptValue():"Escape"===t.key&&this.onResetValue()},disabled:this.props.disabled}),void 0!==this.props.suffix&&_jsx("span",{className:"p-inputgroup-addon",children:this.props.suffix}),_jsx(Button,{icon:"pi pi-check",disabled:this.props.disabled||!this.state.editing,className:"p-button-success",onClick:()=>this.onAcceptValue(),visible:this.state.editing}),_jsx(Button,{icon:"pi pi-times",disabled:this.props.disabled||!this.state.editing,className:"p-button-danger",onClickCapture:()=>this.onResetValue(),visible:this.state.editing})]}),void 0!==this.props.description&&_jsx("small",{children:this.props.description})]})}}Object.defineProperty(TextInput,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:EventEmitterContext}),Object.defineProperty(TextInput,"defaultProps",{enumerable:!0,configurable:!0,writable:!0,value:{label:"",value:void 0,keyFilter:void 0,writeTopic:void 0,onValueChanged:void 0,description:void 0,prefix:void 0,suffix:void 0,disabled:!1,dispatchTopic:void 0,placeholder:void 0,validator:void 0}});
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import React from"react";import{InputText}from"primereact/inputtext";import{Button}from"primereact/button";import{EventEmitterContext}from"../core/EventEmitterContext.js";export class TextInput extends React.Component{constructor(t){super(t),Object.defineProperty(this,"validateValue",{enumerable:!0,configurable:!0,writable:!0,value:t=>void 0===this.props.validator||null===this.props.validator||this.props.validator.test(t)}),this.state={entryValue:t.value,isValid:void 0!==t.value&&this.validateValue(t.value),editing:!1}}componentDidMount(){}componentDidUpdate(t){t.value!==this.props.value&&this.setState({entryValue:this.props.value,editing:!1})}onAcceptValue(){void 0!==this.state.entryValue&&this.validateValue(this.state.entryValue)?(this.setState({isValid:!0,editing:!1}),this.props.onValueChanged&&this.props.onValueChanged(this.state.entryValue),void 0!==this.props.dispatchTopic&&this.context.dispatch({topic:this.props.dispatchTopic,payload:this.state.entryValue})):this.setState({isValid:!1})}onResetValue(){this.setState({entryValue:this.props.value,isValid:void 0!==this.props.value&&this.validateValue(this.props.value),editing:!1})}render(){const{prefix:t,...e}=this.props;return _jsxs("div",{children:[_jsxs("div",{className:"p-inputgroup flex-1",children:[_jsx("span",{className:"p-inputgroup-addon",children:this.props.label}),void 0!==this.props.prefix&&_jsx("span",{className:"p-inputgroup-addon",children:this.props.prefix}),_jsx(InputText,{...e,keyfilter:this.props.keyFilter,placeholder:this.props.placeholder,value:this.state.entryValue,onChange:t=>{this.setState({entryValue:t.target.value,editing:!0})},className:this.state.isValid?"":"p-invalid",onKeyDown:t=>{"Enter"===t.key?this.onAcceptValue():"Escape"===t.key&&this.onResetValue()},disabled:this.props.disabled}),void 0!==this.props.suffix&&_jsx("span",{className:"p-inputgroup-addon",children:this.props.suffix}),_jsx(Button,{icon:"pi pi-check",disabled:this.props.disabled||!this.state.editing,className:"p-button-success",onClick:()=>this.onAcceptValue(),visible:this.state.editing}),_jsx(Button,{icon:"pi pi-times",disabled:this.props.disabled||!this.state.editing,className:"p-button-danger",onClickCapture:()=>this.onResetValue(),visible:this.state.editing})]}),void 0!==this.props.description&&_jsx("small",{children:this.props.description})]})}}Object.defineProperty(TextInput,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:EventEmitterContext}),Object.defineProperty(TextInput,"defaultProps",{enumerable:!0,configurable:!0,writable:!0,value:{label:"",value:void 0,keyFilter:void 0,writeTopic:void 0,onValueChanged:void 0,description:void 0,prefix:void 0,suffix:void 0,disabled:!1,dispatchTopic:void 0,placeholder:void 0,validator:void 0}});

package/dist/components/ValueInput.d.ts

@@ -47,10 +47,11 @@
  * to the console when accepted.
  */
 import React from 'react';
+import { InputNumberProps } from 'primereact/inputnumber';
 /**
  * Properties of the ValueInput component.
  */
-interface ValueInputProps {
+interface ValueInputProps extends Omit<InputNumberProps, 'value'> {
     /**
      * The label for the ValueInput field.
      */

package/dist/components/ValueInput.js

@@ -1 +1 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState,useRef,useEffect,useContext}from"react";import{InputNumber}from"primereact/inputnumber";import{EventEmitterContext}from"../core/EventEmitterContext";import{Button}from"primereact/button";export const ValueInput=({label:e="",value:t=null,min:s,max:i,minPrecision:n=0,maxPrecision:o=3,mode:a="decimal",currency:u="USD",prefix:l,suffix:r,showButtons:c=!1,step:p=1,locale:m="en-US",description:d,disabled:x=!1,dispatchTopic:f,placeholder:v,onValueChanged:b})=>{const[h,j]=useState(t),[C,E]=useState(t),[_,S]=useState(t),[g,y]=useState(!1),[N,k]=useState(!1),B=useRef(null),D=useContext(EventEmitterContext);useEffect((()=>{null!==_?(E(_),S(null),k(!1)):t!==C&&(E(t),j(t),y(!1),k(!1))}),[t,C]);const F=()=>{var e;g&&null!==h&&(e=h,void 0!==i&&e>i||void 0!==s&&e<s?k(!0):(E(h),y(!1),b?.(h),k(!1),f&&D.dispatch({topic:f,payload:h})))},I=()=>{g&&(j(null),E(null),y(!1),k(!1))};return _jsxs("div",{children:[_jsxs("div",{className:"p-inputgroup flex-1",children:[_jsx("span",{className:"p-inputgroup-addon",children:e}),_jsx(InputNumber,{ref:B,invalid:N,min:s,max:i,minFractionDigits:n,maxFractionDigits:o,mode:a,prefix:l,suffix:r,showButtons:c,step:p,placeholder:v,value:C,onChange:e=>{return t=e.value,g||(S(C),y(!0)),void j(t);var t},locale:m,currency:u,onKeyDown:e=>{"Enter"===e.key?F():"Escape"===e.key&&I()},disabled:x}),_jsx(Button,{icon:"pi pi-check",disabled:x||!g,className:"p-button-success",onClick:()=>F(),visible:g,size:"small",autoFocus:!1}),_jsx(Button,{icon:"pi pi-times",disabled:x||!g,className:"p-button-danger",onClickCapture:()=>I(),visible:g,size:"small",autoFocus:!1})]}),d&&_jsx("small",{children:d})]})};export default ValueInput;
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState,useRef,useEffect,useContext}from"react";import{InputNumber}from"primereact/inputnumber";import{EventEmitterContext}from"../core/EventEmitterContext";import{Button}from"primereact/button";export const ValueInput=({label:e="",value:t=null,min:s,max:i,minPrecision:n=0,maxPrecision:o=3,mode:a="decimal",currency:u="USD",prefix:l,suffix:r,showButtons:c=!1,step:p=1,locale:m="en-US",description:d,disabled:x=!1,dispatchTopic:f,placeholder:v,onValueChanged:b,...h})=>{const[j,C]=useState(t),[E,_]=useState(t),[S,g]=useState(t),[y,N]=useState(!1),[k,B]=useState(!1),D=useRef(null),F=useContext(EventEmitterContext);useEffect((()=>{null!==S?(_(S),g(null),B(!1)):t!==E&&(_(t),C(t),N(!1),B(!1))}),[t,E]);const I=()=>{var e;y&&null!==j&&(e=j,void 0!==i&&e>i||void 0!==s&&e<s?B(!0):(_(j),N(!1),b?.(j),B(!1),f&&F.dispatch({topic:f,payload:j})))},w=()=>{y&&(C(null),_(null),N(!1),B(!1))};return _jsxs("div",{children:[_jsxs("div",{className:"p-inputgroup flex-1",children:[_jsx("span",{className:"p-inputgroup-addon",children:e}),_jsx(InputNumber,{...h,ref:D,invalid:k,min:s,max:i,minFractionDigits:n,maxFractionDigits:o,mode:a,prefix:l,suffix:r,showButtons:c,step:p,placeholder:v,value:E,onChange:e=>{return t=e.value,y||(g(E),N(!0)),void C(t);var t},locale:m,currency:u,onKeyDown:e=>{"Enter"===e.key?I():"Escape"===e.key&&w()},disabled:x}),_jsx(Button,{icon:"pi pi-check",disabled:x||!y,className:"p-button-success",onClick:()=>I(),visible:y,size:"small",autoFocus:!1}),_jsx(Button,{icon:"pi pi-times",disabled:x||!y,className:"p-button-danger",onClickCapture:()=>w(),visible:y,size:"small",autoFocus:!1})]}),d&&_jsx("small",{children:d})]})};export default ValueInput;

package/dist/hooks/adsHooks.d.ts

@@ -29,7 +29,7 @@
  * and update the `speed` and `temperature` states via `setSpeed` and `setTemperature` respectively
  * whenever new data is received.
  */
-export declare const useAdsRegisterSymbols: (setters: Record<string, (value: any) => void>, symbols: Record<string, string>) => null;
+export declare const useAdsRegisterSymbols: (setters: Record<string, (value: any) => void>, symbols: Record<string, string>, options?: Record<string, {}>) => null;
 /**
  * Custom hook to create a function that sends a specified value to a remote device or server.
  * This hook abstracts the repetitive logic involved in sending these values,

package/dist/hooks/adsHooks.js

@@ -1 +1 @@
-import{useContext,useRef,useEffect,useCallback}from"react";import{EventEmitterContext}from"../core/EventEmitterContext";function sleep(e){return new Promise((t=>setTimeout(t,e)))}export const useAdsRegisterSymbols=(e,t)=>{const{invoke:n,subscribe:r,unsubscribe:s,isConnected:o}=useContext(EventEmitterContext),u=useRef([]),c=useRef(!0);return useEffect((()=>{c.current=!0;const a=async()=>{for(const[s,o]of Object.entries(t))try{await n("ADS","register_symbol",{symbol_name:o});const t=r(`ADS/${o}`,(t=>{if(c.current){const n=e[s];n&&n(t.value)}}));u.current.push(t)}catch(e){}await n("ADS","refresh",{})};if(o())a();else{let e=r("HUB/connected",(()=>{a(),s(e)}));u.current.push(e)}return()=>{c.current=!1,u.current.forEach((e=>s(e))),u.current=[]}}),[]),null};export function useAdsWriteValue(e){const{invoke:t}=useContext(EventEmitterContext);return async n=>{try{await t("ADS","write_value",{symbol_name:e,value:n})}catch(e){}}}export function useAdsWriteScaledValue(e,t,n){const{invoke:r}=useContext(EventEmitterContext);return useCallback((async s=>{const o=(s-n)/t;try{await r("ADS","write_value",{symbol_name:e,value:o})}catch(e){}}),[e,t,n,r])}export function useAdsTapValue(e){const{invoke:t}=useContext(EventEmitterContext),n="write_value";return async()=>{try{await t("ADS",n,{symbol_name:e,value:!0}),await sleep(300),await t("ADS",n,{symbol_name:e,value:!1})}catch(e){}}}
+import{useContext,useRef,useEffect,useCallback}from"react";import{EventEmitterContext}from"../core/EventEmitterContext";function sleep(e){return new Promise((t=>setTimeout(t,e)))}export const useAdsRegisterSymbols=(e,t,n={})=>{const{invoke:r,subscribe:s,unsubscribe:o,isConnected:u}=useContext(EventEmitterContext),c=useRef([]),a=useRef(!0);return useEffect((()=>{a.current=!0;const i=async()=>{for(const[o,u]of Object.entries(t))try{const t=n[o]?{symbol_name:u,options:n[o]}:{symbol_name:u};await r("ADS","register_symbol",t);const i=s(`ADS/${u}`,(t=>{if(a.current){const n=e[o];n&&n(t.value)}}));c.current.push(i)}catch(e){}await r("ADS","refresh",{})};if(u())i();else{let e=s("HUB/connected",(()=>{i(),o(e)}));c.current.push(e)}return()=>{a.current=!1,c.current.forEach((e=>o(e))),c.current=[]}}),[]),null};export function useAdsWriteValue(e){const{invoke:t}=useContext(EventEmitterContext);return async n=>{try{await t("ADS","write_value",{symbol_name:e,value:n})}catch(e){}}}export function useAdsWriteScaledValue(e,t,n){const{invoke:r}=useContext(EventEmitterContext);return useCallback((async s=>{const o=(s-n)/t;try{await r("ADS","write_value",{symbol_name:e,value:o})}catch(e){}}),[e,t,n,r])}export function useAdsTapValue(e){const{invoke:t}=useContext(EventEmitterContext),n="write_value";return async()=>{try{await t("ADS",n,{symbol_name:e,value:!0}),await sleep(300),await t("ADS",n,{symbol_name:e,value:!1})}catch(e){}}}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adcops/autocore-react",
-    "version": "3.0.22",
+    "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-03-18 11:31:36
+ * 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,42 +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;
+    onError? : (message : string) => void;
 
 }
 
@@ -118,62 +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
+    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;
 
@@ -184,72 +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);
-    }
-
-    private setXml = (xml: string) => {
-        this.setState({ xml: xml });
-
-        if (this.props.onXmlChanged !== undefined && this.props.onXmlChanged !== null)
-            this.props.onXmlChanged(xml);
-    }
-
-    private onInject = (workspace: Blockly.WorkspaceSvg) => {
-        workspace;
-    }
+        setCode(code);
+        if (props.onWorkspaceChanged) props.onWorkspaceChanged(workspace);
+        if (props.onCodeChanged) props.onCodeChanged(code);
+    };
 
 
-    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 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;
 

package/src/components/TextInput.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-03-20 13:05:42
  * -----
- * Last Modified: 2024-04-27 17:33:46
+ * Last Modified: 2024-05-17 10:04:53
  * -----
  * 
  */
@@ -10,7 +10,7 @@
 
 import React from "react";
 
-import { InputText } from 'primereact/inputtext';
+import { InputText, InputTextProps } from 'primereact/inputtext';
 import { Button } from "primereact/button";
 
 import { EventEmitterContext } from "../core/EventEmitterContext.js";
@@ -19,7 +19,7 @@ import { KeyFilterType } from "primereact/keyfilter";
 /**
  * Properties of the component.
  */
-interface TextInputProps {
+interface TextInputProps extends Omit<InputTextProps, "prefix"> {
 
     /**
      * The label for the field.
@@ -211,6 +211,8 @@ export class TextInput extends React.Component<TextInputProps, TextInputState> {
 
     render() {
 
+        const { prefix, ...restProps} = this.props;
+
         return(
             <div>
                 <div className="p-inputgroup flex-1" >
@@ -223,6 +225,7 @@ export class TextInput extends React.Component<TextInputProps, TextInputState> {
                         </span>
                     }                    
                     <InputText 
+                        {...restProps}
                         keyfilter={this.props.keyFilter}                         
                         placeholder={this.props.placeholder} 
                         value={this.state.entryValue}

package/src/components/ValueInput.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-03-20 13:05:42
  * -----
- * Last Modified: 2024-04-30 08:33:37
+ * Last Modified: 2024-05-17 10:01:45
  * -----
  * 
  */
@@ -58,14 +58,14 @@
 
 
 import React, { useState, useRef, useEffect, useContext } from 'react';
-import { InputNumber } from 'primereact/inputnumber';
+import { InputNumber, InputNumberProps } from 'primereact/inputnumber';
 import { EventEmitterContext } from "../core/EventEmitterContext";
 import { Button } from 'primereact/button';
 
 /**
  * Properties of the ValueInput component.
  */
-interface ValueInputProps {
+interface ValueInputProps extends Omit<InputNumberProps, 'value'>  {
 
     /**
      * The label for the ValueInput field.
@@ -209,7 +209,8 @@ export const ValueInput: React.FC<ValueInputProps> = ({
     disabled = false,
     dispatchTopic = undefined,
     placeholder = undefined,
-    onValueChanged = undefined
+    onValueChanged = undefined,
+    ...restProps
 }) => {
     const [entryValue, setEntryValue] = useState<number | null>(value);
     const [currentValue, setCurrentValue] = useState<number | null>(value);
@@ -311,6 +312,7 @@ export const ValueInput: React.FC<ValueInputProps> = ({
             <div className="p-inputgroup flex-1">
                 <span className="p-inputgroup-addon">{label}</span>
                 <InputNumber
+                    {...restProps}
                     ref={inputRef}
                     invalid={invalidValue}
                     min={min}

package/src/hooks/adsHooks.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-04-26 09:04:40
  * -----
- * Last Modified: 2024-04-30 21:32:01
+ * Last Modified: 2024-05-17 10:47:22
  * -----
  * 
  */
@@ -55,7 +55,11 @@ function sleep(ms: number): Promise<void> {
  * and update the `speed` and `temperature` states via `setSpeed` and `setTemperature` respectively
  * whenever new data is received.
  */
-export const useAdsRegisterSymbols = (setters: Record<string, (value: any) => void>, symbols: Record<string, string>) => {
+export const useAdsRegisterSymbols = (
+    setters: Record<string, (value: any) => void>, 
+    symbols: Record<string, string>,
+    options: Record<string, {}> = {},
+) => {
     const { invoke, subscribe, unsubscribe, isConnected } = useContext(EventEmitterContext);
     const subscriptions = useRef<number[]>([]);
     const isMounted = useRef(true);
@@ -66,7 +70,9 @@ export const useAdsRegisterSymbols = (setters: Record<string, (value: any) => vo
         const registerAndSubscribe = async () => {
             for (const [key, symbolName] of Object.entries(symbols)) {
                 try {
-                    await invoke("ADS", "register_symbol", { symbol_name: symbolName });
+                    const invokeOptions = options[key] ? { symbol_name: symbolName, options : options[key] } : { symbol_name: symbolName };
+                    await invoke("ADS", "register_symbol", invokeOptions);
+
                     //console.log(`Subscribe... ADS/${symbolName}`);
                     const subscriptionId = subscribe(`ADS/${symbolName}`, (data) => {
                         if (isMounted.current) {