diff --git a/docs/WebComponent.md b/docs/WebComponent.md
index 6f12eb251..6186ff612 100644
--- a/docs/WebComponent.md
+++ b/docs/WebComponent.md
@@ -20,9 +20,12 @@ The `set menuItems(newValue)` method shows how data could be set dynamically fro
The `mountReactApp()` method creates a dom element attaches a shadow dom to it and then mounts the React application in it.
-The `static get observedAttributes()` method returns an array of attributes that are allowed to be set on the web component. At present it returns `['code']` meaning you can add the code attribute:
+The `static get observedAttributes()` method returns an array of attributes that are allowed to be set on the web component. At present it returns `['code', 'visualOutput]` meaning you can add these attributes:
-``
+``
+
+* `code` is the prepopulated code
+* `visualOutput` if truthy will show the visual output tab, else it'll show the text output tab
Any other attributes set will not be available in the component and would need to be added to the observedAttributes to make them so.
diff --git a/src/components/Editor/Runners/PythonRunner/PythonRunner.js b/src/components/Editor/Runners/PythonRunner/PythonRunner.js
index a2f433f55..c86159e7f 100644
--- a/src/components/Editor/Runners/PythonRunner/PythonRunner.js
+++ b/src/components/Editor/Runners/PythonRunner/PythonRunner.js
@@ -290,9 +290,11 @@ const PythonRunner = () => {
}
}
+ let tabIndex = projectCode[0] && projectCode[0].visualoutput ? 0 : 1;
+
return (
-
+
Visual Output
Text Output
diff --git a/src/components/WebComponent/WebComponentLoader/WebComponentLoader.js b/src/components/WebComponent/WebComponentLoader/WebComponentLoader.js
index ea0dc3039..6d5f3d7e5 100644
--- a/src/components/WebComponent/WebComponentLoader/WebComponentLoader.js
+++ b/src/components/WebComponent/WebComponentLoader/WebComponentLoader.js
@@ -5,13 +5,13 @@ import WebComponentProject from '../Project/WebComponentProject';
const ProjectComponentLoader = (props) => {
const projectLoaded = useSelector((state) => state.editor.projectLoaded);
- const { code } = props;
+ const { code, visualoutput } = props;
const dispatch = useDispatch()
useEffect(() => {
const proj = {
type: 'python',
- components: [{ name: 'main', extension: 'py', content: code }]
+ components: [{ name: 'main', extension: 'py', content: code, visualoutput: visualoutput}]
}
dispatch(setProject(proj))
dispatch(setProjectLoaded(true))
diff --git a/src/web-component.html b/src/web-component.html
index 84a41f024..050f36dff 100644
--- a/src/web-component.html
+++ b/src/web-component.html
@@ -6,7 +6,7 @@
Editor Web component
-
+
diff --git a/src/web-component.js b/src/web-component.js
index 3fa91a49d..281d9a03c 100644
--- a/src/web-component.js
+++ b/src/web-component.js
@@ -20,7 +20,7 @@ class WebComponent extends HTMLElement {
}
static get observedAttributes() {
- return ['code'];
+ return ['code', 'visualoutput'];
}
attributeChangedCallback(name, _oldVal, newVal) {