THR-18: dev feature h5p editor

Dockerfile

@@ -24,6 +24,9 @@ RUN echo "{\"sha\": \"$(git rev-parse HEAD)\", \"version\": \"$(git describe --t
 FROM docker.io/nginx:1.25
 RUN mkdir /etc/nginx/templates
 COPY dockerconf/nginx.conf.template /etc/nginx/templates/default.conf.template
-COPY --from=build-stage /app/dist /usr/share/nginx/html
+COPY --from=build-stage /app/dist /usr/share/nginx/html/frontend
+# second index.html needed for the location /h5p/ in csp rules
+COPY --from=build-stage /app/dist /usr/share/nginx/html/h5p
+
 EXPOSE 4000
 CMD ["nginx", "-g", "daemon off;"]

dockerconf/nginx.conf.template

@@ -4,6 +4,8 @@ server {
 
     set $csp "default-src 'self'; base-uri 'self'; script-src 'nonce-$request_id' 'strict-dynamic' 'unsafe-inline' https:; object-src 'none'; font-src 'self' data:; img-src 'self' data:; style-src 'self' 'unsafe-inline'; frame-src 'self' ${H5P_FRAME_SRC_URLS}";
 
+    set $h5pcsp "default-src 'self'; base-uri 'self'; script-src ${H5P_SCRIPT_SRC_URLS} 'unsafe-inline' https:; object-src 'none'; font-src 'self' data:; img-src 'self' ${H5P_IMG_SRC_URLS} data:; style-src 'self' 'unsafe-inline'; frame-src 'self' ${H5P_FRAME_SRC_URLS}";
+
     location /status {
         stub_status;
     }
@@ -61,8 +63,22 @@ server {
         proxy_pass ${LEGACY_CLIENT_URL};
     }
 
+    location /h5p/ {
+        root   /usr/share/nginx/html/h5p;
+        index  index.html index.htm;
+        add_header Content-Security-Policy "${h5pcsp}";
+        add_header X-Content-Type-Options nosniff;
+        add_header Referrer-Policy 'same-origin';
+        add_header X-XSS-Protection '1; mode=block';
+        add_header X-Frame-Options 'SAMEORIGIN';
+        add_header Permissions-Policy 'fullscreen=(*), sync-xhr=(*), geolocation=(self), midi=(self), microphone=(self), camera=(self), magnetometer=(self), gyroscope=(self), payment=()';
+        sub_filter_once off;
+        sub_filter '**CSP_NONCE**' $request_id;
+        try_files $uri /index.html =404;
+    }
+
     location / {
-        root   /usr/share/nginx/html;
+        root   /usr/share/nginx/html/frontend;
         index  index.html index.htm;
         add_header Content-Security-Policy "${csp}";
         add_header X-Content-Type-Options nosniff;

package.json

@@ -18,6 +18,7 @@
 		"@braintree/sanitize-url": "^6.0.4",
 		"@ckeditor/ckeditor5-vue2": "^3.0.1",
 		"@hpi-schul-cloud/ckeditor": "0.4.0",
+		"@lumieducation/h5p-webcomponents": "^9.2.2",
 		"@mdi/js": "^7.3.67",
 		"@types/vuelidate": "^0.7.21",
 		"@vueuse/components": "^10.5.0",

src/components/h5p/H5PEditor.unit.ts

@@ -0,0 +1,45 @@
+import { mount } from "@vue/test-utils";
+import H5PEditor from "./H5PEditor.vue";
+import { I18N_KEY } from "@/utils/inject";
+import VueI18n from "vue-i18n";
+import createComponentMocks from "@@/tests/test-utils/componentMocks";
+import { H5PEditorComponent } from "@lumieducation/h5p-webcomponents";
+
+describe("H5PEditor", () => {
+	const contentId = "test-content-id";
+	const parentType = "test-parent-type";
+	const parentId = "test-parent-id";
+
+	const i18nMock = new VueI18n({
+		locale: "en",
+	});
+
+	const createWrapper = (propsData = {}) => {
+		return mount(H5PEditor, {
+			...createComponentMocks({
+				i18n: true,
+			}),
+			propsData: {
+				contentId,
+				parentType,
+				parentId,
+				...propsData,
+			},
+			provide: {
+				[I18N_KEY as any]: i18nMock,
+			},
+		});
+	};
+
+	it("renders without errors with standard props", async () => {
+		const wrapper = createWrapper();
+		const h5pEditor = wrapper.findComponent({ ref: "h5pEditorRef" });
+		expect(wrapper.exists()).toBe(true);
+		expect(h5pEditor).toBeDefined();
+
+		await wrapper.vm.$nextTick();
+		const h5pEditorComponent = h5pEditor.element as H5PEditorComponent;
+		expect(h5pEditorComponent.loadContentCallback).toBeDefined();
+		expect(h5pEditorComponent.saveContentCallback).toBeDefined();
+	});
+});

src/components/h5p/H5PEditor.vue

@@ -0,0 +1,115 @@
+/* eslint-disable */
+
+<template>
+	<div>
+		<h5p-editor
+			ref="h5pEditorRef"
+			:content-id="contentId"
+			@validation-error="onValidationError"
+		/>
+	</div>
+</template>
+
+<script lang="ts">
+import {
+	defineElements,
+	H5PEditorComponent,
+} from "@lumieducation/h5p-webcomponents";
+import { I18N_KEY, injectStrict } from "@/utils/inject";
+import { defineComponent, ref, watch, PropType } from "vue";
+import {
+	H5PContentParentType,
+	H5pEditorApiFactory,
+	LanguageType,
+	PostH5PContentCreateParams,
+} from "@/h5pEditorApi/v3";
+import { $axios } from "@/utils/api";
+
+defineElements("h5p-editor");
+
+export default defineComponent({
+	name: "H5PEditorComponent",
+	props: {
+		contentId: {
+			type: String,
+			default: "new",
+		},
+		parentType: {
+			type: String as PropType<H5PContentParentType>,
+			required: true,
+		},
+		parentId: {
+			type: String,
+			required: true,
+		},
+	},
+	emits: ["saved", "save-error", "load-error", "validation-error"],
+	setup(props, { emit, expose }) {
+		const h5pEditorRef = ref<H5PEditorComponent>();
+
+		const h5pEditorApi = H5pEditorApiFactory(undefined, "v3", $axios);
+		const i18n = injectStrict(I18N_KEY);
+		const language = i18n.locale as LanguageType;
+
+		const loadContent = async (id?: string) => {
+			try {
+				const { data } = id
+					? await h5pEditorApi.h5PEditorControllerGetH5PEditor(id, language)
+					: await h5pEditorApi.h5PEditorControllerGetNewH5PEditor(language);
+
+				return data;
+			} catch (err) {
+				emit("load-error", err);
+			}
+		};
+
+		const saveContent = async (
+			contentId: string,
+			requestBody: { library: string; params: object }
+		) => {
+			const createParams: PostH5PContentCreateParams = {
+				library: requestBody.library,
+				params: requestBody.params,
+				parentId: props.parentId,
+				parentType: props.parentType,
+			};
+
+			const { data } = contentId
+				? await h5pEditorApi.h5PEditorControllerSaveH5pContent(
+						contentId,
+						createParams
+				  )
+				: await h5pEditorApi.h5PEditorControllerCreateH5pContent(createParams);
+
+			return data;
+		};
+
+		watch(h5pEditorRef, (editor) => {
+			if (editor) {
+				// Attach callbacks to H5P Editor
+				editor.loadContentCallback = loadContent;
+				editor.saveContentCallback = saveContent;
+			}
+		});
+
+		const save = () => {
+			if (h5pEditorRef.value) {
+				return h5pEditorRef.value.save();
+			} else {
+				throw new Error("Editor not loaded");
+			}
+		};
+
+		const onValidationError = (error: unknown) => {
+			emit("validation-error", error);
+		};
+
+		expose({ save });
+
+		return {
+			h5pEditorRef,
+			onValidationError,
+		};
+	},
+});
+</script>

src/components/h5p/H5PPlayer.unit.ts

@@ -0,0 +1,39 @@
+import { mount } from "@vue/test-utils";
+import H5PPlayer from "./H5PPlayer.vue";
+import { I18N_KEY } from "@/utils/inject";
+import VueI18n from "vue-i18n";
+import createComponentMocks from "@@/tests/test-utils/componentMocks";
+import { H5PPlayerComponent } from "@lumieducation/h5p-webcomponents";
+
+describe("H5PPlayer", () => {
+	const contentId = "test-content-id";
+
+	const i18nMock = new VueI18n({
+		locale: "en",
+	});
+
+	const createWrapper = (propsData = {}) => {
+		return mount(H5PPlayer, {
+			...createComponentMocks({
+				i18n: true,
+			}),
+			propsData: {
+				contentId,
+				...propsData,
+			},
+			provide: {
+				[I18N_KEY as any]: i18nMock,
+			},
+		});
+	};
+
+	it("renders without errors with standard props", async () => {
+		const wrapper = createWrapper();
+		const h5pPlayer = wrapper.findComponent({ ref: "h5pPlayerRef" });
+		expect(wrapper.exists()).toBe(true);
+		expect(h5pPlayer).toBeDefined();
+		await wrapper.vm.$nextTick();
+		const h5pPlayerComponent = h5pPlayer.element as H5PPlayerComponent;
+		expect(h5pPlayerComponent.loadContentCallback).toBeDefined();
+	});
+});