Add openRoberta Plugin

src/plugins/roberta/Editor.jsx

@@ -0,0 +1,18 @@
+import React, { useState, useEffect, useContext } from "react"
+import Roberta from "./Roberta"
+import Settings from "./PrimarySettings"
+import { PrimarySettings } from "@edtr-io/editor-ui/"
+
+function Editor(props) {
+    let { PrimarySettingsWrapper } = props
+    return (
+        <React.Fragment>
+            <Roberta {...props} />
+            <PrimarySettings key="robertaEditor">
+                <Settings {...props} />
+            </PrimarySettings>
+        </React.Fragment>
+    )
+}
+
+export default Editor

src/plugins/roberta/Preview.jsx

@@ -0,0 +1,29 @@
+import React from "react"
+import Flex from "~/components/Flex"
+
+const robertaPlugin = {
+    Component: () => {
+        return (
+            <Flex
+                justifyCenter
+                alignCenter
+                style={{
+                    minHeight: 400,
+                    backgroundColor: "rgba(240, 240, 240)",
+                }}>
+                <img
+                    src={require("./assets/logo.svg")}
+                    style={{ height: 50 }}
+                    alt=""
+                />
+            </Flex>
+        )
+    },
+    icon: () => (
+        <img src={require("./assets/logo.svg")} style={{ height: 50 }} alt="" />
+    ),
+    title: "OpenRoberta",
+    description: "Graphical Robot programming.",
+}
+
+export default robertaPlugin

src/plugins/roberta/PrimarySettings.jsx

@@ -0,0 +1,31 @@
+import React, { useState, useEffect, useContext } from "react"
+
+import Input from "~/components/Input/Text"
+import { EditorInput } from "@edtr-io/editor-ui"
+
+function PrimarySettings(props) {
+    let { state } = props
+    return (
+        <EditorInput
+            size={16}
+            full={true}
+            value={state.link.value}
+            label="OpenRoberta URL: "
+            placeholder="Paste openRoberta URL here"
+            textfieldWidth="70%"
+            editorInputWidth="100%"
+            onChange={e => {
+                let evt = e.target.value
+                state.link.set(evt)
+                if (
+                    evt.startsWith("http://localhost") ||
+                    evt.startsWith("https://lab.open-roberta.org")
+                ) {
+                    state.random.set(state.random.value + 1)
+                }
+            }}
+        />
+    )
+}
+
+export default PrimarySettings

src/plugins/roberta/Renderer.jsx

@@ -0,0 +1,13 @@
+import React, { useState, useEffect, useContext } from "react"
+import Editor from "./Editor"
+import Roberta from "./Roberta"
+
+function Renderer(props) {
+    if (props.editable) {
+        return <Editor {...props} />
+    } else {
+        return <Roberta {...props} />
+    }
+}
+
+export default Renderer

src/plugins/roberta/Roberta.jsx

@@ -0,0 +1,60 @@
+import React, { useState, useEffect, useContext } from "react"
+
+
+function Roberta(props) {
+    let robertaFrame
+
+    let { state } = props
+
+    //only render if a valid source link for the openRoberta iFrae has been set
+    if (
+        state.link.value.startsWith("https://lab.open-roberta.org")
+    ) {
+        //render the openRoberta iFrame
+        robertaFrame = (
+            <div>
+                <iframe
+                    src={state.link.value}
+                    key={state.random.value}
+                    sandbox="allow-scripts allow-forms allow-same-origin"
+                    style={{
+                        width: "100%",
+                        height: "600px",
+                    }}
+                    data-identifier="iframe-0"
+                />
+            </div>
+        )
+    } else {
+        //Render placeholder if no link has been defined yet
+        robertaFrame = (
+            <React.Fragment>
+                <img
+                    src={require("./assets/logo.svg")}
+                    style={{ height: 50 }}
+                    alt=""
+                />
+                <ol>
+                    <li>
+                        Programm auf{" "}
+                        <a
+                            href="https://lab.open-roberta.org"
+                            target="_blank"
+                            rel="noopener noreferrer">
+                            lab.open-roberta.org
+                        </a>{" "}
+                        erstellen.
+                    </li>
+                    <li>
+                        Über <i>Bearbeiten/erstelle Programmlink...</i> einen
+                        Programmlink erzeugen
+                    </li>
+                    <li>Programmlink kopieren und hier einfügen</li>
+                </ol>
+            </React.Fragment>
+        )
+    }
+    return robertaFrame
+}
+
+export default Roberta

src/plugins/roberta/index.jsx

@@ -0,0 +1,34 @@
+//import react components and edtr.io state classes
+import React from "react"
+import { StateType } from "@edtr-io/core"
+import Renderer from "./Renderer"
+export const robertaState = StateType.object({
+    link: StateType.string(),
+    random: StateType.scalar(),
+})
+
+//import the renderer for this plugin
+
+const openRobertaPlugin = {
+    Component: Renderer,
+    state: robertaState,
+    icon: () => (
+        <img
+            src={require("./assets/logo.svg")}
+            style={{ width: 100 }}
+            alt="openRoberta Logo"
+        />
+    ),
+    title: "OpenRoberta",
+    description: "Graphical robot programming",
+    onPaste(clipboardData) {
+        const value = clipboardData.getData("text")
+
+        const regex = /^(https?:\/\/)lab\.open-roberta\.org/
+        if (regex.test(value)) {
+            return { state: { link: value } }
+        }
+    },
+}
+
+export default openRobertaPlugin

src/workspace/Lesson/Section/plugins.js

@@ -16,6 +16,7 @@ import { createImagePlugin } from "@edtr-io/plugin-image"
 import nexboardPlugin from "~/plugins/nexboard"
 import etherpadPlugin from "~/plugins/etherpad"
 import notesPlugin from "~/plugins/notes"
+import robertaPlugin from "~/plugins/roberta"
 
 function readFile(file) {
     return new Promise(resolve => {
@@ -92,6 +93,7 @@ const plugins = {
     geogebra: geogebraPlugin,
     inputExercise: inputExercisePlugin,
     video: videoPlugin,
+    roberta: robertaPlugin
     // anchor: anchorPlugin,
     // nexboard: nexboardPlugin,
     // singleMultipleChoice: scMcExercisePlugin,

src/workspace/Lesson/SectionOverview/Preview/Editor.jsx

@@ -4,6 +4,7 @@ import { Editor as Edtr } from "@edtr-io/core"
 
 import etherpadPluginPreview from "~/plugins/etherpad/Preview"
 import nexboardPluginPreview from "~/plugins/nexboard/Preview"
+import robertaPluginPreview from "~/plugins/roberta/Preview"
 import { plugins } from "~/workspace/Lesson/Section/Editor"
 
 const EditorWrapper = styled.div`
@@ -39,6 +40,7 @@ export default class Editor extends React.Component {
                         ...plugins,
                         etherpad: etherpadPluginPreview,
                         nexboard: nexboardPluginPreview,
+                        roberta: robertaPluginPreview,
                     }}
                     defaultPlugin={"text"}
                     editable={false}