@adcops/autocore-react 3.0.34 → 3.0.36

package/dist/components/BlocklyEditor.js

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

@@ -1,108 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/*
- * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
- * Created Date: 2024-03-17 08:43:02
- * -----
- * Last Modified: 2024-03-18 11:29:08
- * -----
- *
- */
-import * as React from 'react';
-//import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
-import Editor from '@monaco-editor/react';
-/**
- * Wrapper for the Microsoft Monaco editor, configured for our most common defaults.
- */
-export class CodeEditor extends React.Component {
-    /**
-     * Constructor
-     * @param props PythonEditorProps
-     */
-    constructor(props) {
-        super(props);
-        /**
-         * The editor is initialized and displayed in the view.
-         * @param editor
-         * @param monaco
-         */
-        Object.defineProperty(this, "editorDidMount", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (editor, monaco) => {
-                monaco;
-                editor.focus();
-            }
-        });
-        /**
-         * The editor is about to mount into the view.
-         * @param monaco Instance of the editor.
-         */
-        Object.defineProperty(this, "handleEditorWillMount", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (monaco) => {
-                monaco;
-            }
-        });
-        /**
-         * Handle changes to the editor's contents.
-         * @param newValue New value of editor content.
-         * @param e
-         */
-        Object.defineProperty(this, "onChange", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (newValue, e) => {
-                e;
-                if (this.props.onCodeChanged !== undefined && this.props.onCodeChanged !== null)
-                    this.props.onCodeChanged(newValue);
-            }
-        });
-        Object.defineProperty(this, "handleEditorValidation", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (markers) => {
-                // model markers
-                markers.forEach(marker => console.log('onValidate:', marker.message));
-            }
-        });
-    }
-    /**
-     * Render the component into the view.
-     * @returns
-     */
-    render() {
-        const options = {
-            selectOnLineNumbers: true,
-            roundedSelection: false,
-            readOnly: this.props.readOnly,
-            cursorStyle: this.props.cursorStyle,
-            automaticLayout: true,
-            theme: this.props.theme,
-            language: this.props.language,
-            folding: false,
-        };
-        return (_jsx(Editor, { value: this.props.code, height: "100%", width: "100%", defaultLanguage: "python", defaultValue: "", onChange: this.onChange, onMount: this.editorDidMount, beforeMount: this.handleEditorWillMount, onValidate: this.handleEditorValidation, theme: 'vs-dark', options: options }));
-    }
-}
-/**
- * Default properties for this component.
- */
-Object.defineProperty(CodeEditor, "defaultProps", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: {
-        code: undefined,
-        language: 'python',
-        theme: 'vs-dark',
-        readOnly: false,
-        cursorStyle: "line",
-        onCodeChanged: undefined
-    }
-});
-export default CodeEditor;
+import{jsx as _jsx}from"react/jsx-runtime";import*as React from"react";import Editor from"@monaco-editor/react";export class CodeEditor extends React.Component{constructor(e){super(e),Object.defineProperty(this,"editorDidMount",{enumerable:!0,configurable:!0,writable:!0,value:(e,o)=>{e.focus()}}),Object.defineProperty(this,"handleEditorWillMount",{enumerable:!0,configurable:!0,writable:!0,value:e=>{}}),Object.defineProperty(this,"onChange",{enumerable:!0,configurable:!0,writable:!0,value:(e,o)=>{void 0!==this.props.onCodeChanged&&null!==this.props.onCodeChanged&&this.props.onCodeChanged(e)}}),Object.defineProperty(this,"handleEditorValidation",{enumerable:!0,configurable:!0,writable:!0,value:e=>{e.forEach((e=>{}))}})}render(){const e={selectOnLineNumbers:!0,roundedSelection:!1,readOnly:this.props.readOnly,cursorStyle:this.props.cursorStyle,automaticLayout:!0,theme:this.props.theme,language:this.props.language,folding:!1};return _jsx(Editor,{value:this.props.code,height:"100%",width:"100%",defaultLanguage:"python",defaultValue:"",onChange:this.onChange,onMount:this.editorDidMount,beforeMount:this.handleEditorWillMount,onValidate:this.handleEditorValidation,theme:"vs-dark",options:e})}}Object.defineProperty(CodeEditor,"defaultProps",{enumerable:!0,configurable:!0,writable:!0,value:{code:void 0,language:"python",theme:"vs-dark",readOnly:!1,cursorStyle:"line",onCodeChanged:void 0}});export default CodeEditor;