this seems to work to fix origin#125

Author: hcientist

src/BlocklyWorkspace.tsx

@@ -6,6 +6,8 @@ import { BlocklyWorkspaceProps } from "./BlocklyWorkspaceProps";
 const propTypes = {
   initialXml: PropTypes.string,
   initialJson: PropTypes.object,
+  updateXml: PropTypes.string,
+  updateJson: PropTypes.object,
   toolboxConfiguration: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   workspaceConfiguration: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   className: PropTypes.string,
@@ -21,6 +23,8 @@ const propTypes = {
 function BlocklyWorkspace({
   initialXml,
   initialJson,
+  updateXml,
+  updateJson,
   toolboxConfiguration,
   workspaceConfiguration,
   className,
@@ -37,13 +41,16 @@ function BlocklyWorkspace({
     ref: editorDiv,
     initialXml,
     initialJson,
+    updateXml,
+    updateJson,
     toolboxConfiguration,
     workspaceConfiguration,
     onWorkspaceChange,
     onImportXmlError,
     onImportError,
     onInject,
     onDispose,
+
   });
   const onXmlChangeRef = React.useRef(onXmlChange);
   React.useEffect(() => {

src/BlocklyWorkspaceProps.ts

@@ -5,6 +5,8 @@ import { RefObject } from "react";
 export interface CommonBlocklyProps {
   initialXml?: string;
   initialJson?: object;
+  updateXml?: string;
+  updateJson?: object;
   toolboxConfiguration?: Blockly.utils.toolbox.ToolboxDefinition;
   workspaceConfiguration: Blockly.BlocklyOptions;
   onWorkspaceChange?: (workspace: WorkspaceSvg) => void;

src/dev-index.tsx

@@ -15,6 +15,8 @@ const TestEditor = () => {
   const [generatedXml, setGeneratedXml] = useState("");
   const [generatedJson, setGeneratedJson] = useState("");
   const [generatedCode, setGeneratedCode] = useState("");
+  const [updateXml, setUpdateXml] = useState("");
+  const [updateJson, setUpdateJson] = useState({});
 
   React.useEffect(() => {
     window.setTimeout(() => {
@@ -85,7 +87,7 @@ const TestEditor = () => {
   const [serialState, setSerialState] = useState<"XML" | "JSON">("XML");
   return (
     <>
-      <div style={{ height: "600px", width: "800px" }}>
+      <div style={{ height: "600px", width: "800px", marginBlockEnd: "2rem" }}>
         <button
           onClick={(e) =>
             setSerialState(
@@ -116,10 +118,28 @@ const TestEditor = () => {
           onWorkspaceChange={onWorkspaceChange}
           onXmlChange={onXmlChange}
           onJsonChange={onJsonChange}
+          updateXml={updateXml}
+          updateJson={updateJson}
         />
       </div>
-      <pre>{generatedXml}</pre>
-      <p>{generatedJson}</p>
+      <textarea
+        style={{ height: "200px", width: "400px" }}
+        value={generatedXml}
+        onChange={(ev)=>{
+          console.log('onChange generated xml', ev)
+          console.log(ev.target.value)
+          setUpdateXml(ev.target.value)
+        }}
+      />
+      <textarea
+        style={{ height: "200px", width: "400px" }}
+        value={generatedJson}
+        onChange={(ev)=>{
+          console.log('onChange generated json', ev)
+          console.log(ev.target.value)
+          setUpdateJson(JSON.parse(ev.target.value))
+        }}
+      />
       <textarea
         style={{ height: "200px", width: "400px" }}
         value={generatedCode}

src/useBlocklyWorkspace.ts

@@ -23,13 +23,32 @@ function importFromXml(
   }
 }
 
+function repeatableImportFromXml(
+  xml: string,
+  workspace: Workspace,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onImportError?: (error: any) => void
+) {
+  try {
+    workspace.clear();
+    Blockly.Xml.domToWorkspace(Blockly.utils.xml.textToDom(xml), workspace);
+    return true;
+  } catch (e) {
+    if (onImportError) {
+      onImportError(e);
+    }
+    return false;
+  }
+}
+
 function importFromJson(
   json: object,
   workspace: Workspace,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onImportError?: (error: any) => void
 ) {
   try {
+    workspace.clear();
     Blockly.serialization.workspaces.load(json, workspace);
     return true;
   } catch (e) {
@@ -44,6 +63,8 @@ const useBlocklyWorkspace = ({
   ref,
   initialXml,
   initialJson,
+  updateXml,
+  updateJson,
   toolboxConfiguration,
   workspaceConfiguration,
   onWorkspaceChange,
@@ -57,7 +78,7 @@ const useBlocklyWorkspace = ({
   json: object | null;
 } => {
   // onImportError replaces onImportXmlError
-  // This is done for not breaking the signature until depreaction
+  // This is done for not breaking the signature until deprecation
   onImportError = onImportError ?? onImportXmlError;
 
   const [workspace, setWorkspace] = React.useState<WorkspaceSvg | null>(null);
@@ -181,7 +202,7 @@ const useBlocklyWorkspace = ({
     };
   }, [workspace, xml]);
 
-  // Initial Xml Changes
+  // Initial Xml/Json Changes
   React.useEffect(() => {
     if (xml && workspace && !didInitialImport) {
       const success = importFromXml(xml, workspace, onImportError);
@@ -202,6 +223,28 @@ const useBlocklyWorkspace = ({
     }
   }, [json, xml, workspace, didInitialImport, onImportError]);
 
+  // update xml/json
+  React.useEffect(() => {
+    console.log('update xml/json', updateXml, updateJson)
+
+    if (updateXml && workspace) {
+      const success = repeatableImportFromXml(updateXml, workspace, onImportError);
+      if (!success) {
+        setXml(null);
+      }
+    } else if (updateJson && workspace) {
+      const success = importFromJson(updateJson, workspace, onImportError);
+      if (!success) {
+        setJson(null);
+      }
+    }
+
+  }, [updateXml, updateJson, workspace, onImportError]);
+
+  React.useEffect(() => {
+
+  }, [updateJson, workspace, onImportError]);
+
   return { workspace, xml, json };
 };