workspace per-block

docs/components/blockly_workspace.vue

@@ -1,28 +1,44 @@
+<script setup>
+  import { onMounted, onUnmounted } from 'vue'
+  import { dispose, inject } from "../blockly/blockly.js"
+
+  const
+    props = defineProps(['block'])
+
+  onMounted(() => {
+    console.log('mounted, block:', props.block)
+    inject("blocklyDiv", {
+      injectOptions: { toolbox: false },
+      workspaceJson: {
+        "blocks": {
+          "languageVersion": 0,
+          "blocks": [
+            {
+              "type": props.block,
+              "deletable": false,
+              "x": 50,
+              "y": 50
+            }
+          ]
+        }
+      }
+    })
+  })
+
+  onUnmounted(() => {
+    console.log('unmounted')
+    // clear workspace
+    dispose()
+  })
+</script>
+
 <template>
   <div id="blocklyDiv" />
 </template>
 
-<script setup>
-import { onMounted, onUnmounted } from 'vue'
-// import "/blockly.min.js"
-import { dispose, inject } from "/blockly_app.js"
-
-console.log('what now')
-onMounted(() => {
-  console.log('mounted')
-  inject("blocklyDiv", {})
-})
-
-onUnmounted(() => {
-  console.log('unmounted')
-  // clear workspace
-  dispose()
-})
-</script>
-
 <style>
-div#blocklyDiv {
-  width: 400px;
-  height: 200px;
-}
+  div#blocklyDiv {
+    width: 100%;
+    height: 200px;
+  }
 </style>

export_documentation.js

@@ -73,7 +73,7 @@ editLink: true
 
 ## Workspace
 
-<BlocklyWorkspace />
+<BlocklyWorkspace block="${ definition.type }" />
 
 ## Fields