From 654bee78a700516904ff69c868e5e1d22790c169 Mon Sep 17 00:00:00 2001
From: Botho <1258870+elbotho@users.noreply.github.com>
Date: Tue, 10 Dec 2024 15:22:52 +0100
Subject: [PATCH 1/4] fix(plugin-blanks): improve margins

---
 .../plugins/blanks-exercise/components/blank-check-button.tsx   | 2 +-
 packages/editor/src/plugins/blanks-exercise/renderer.tsx        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/editor/src/plugins/blanks-exercise/components/blank-check-button.tsx b/packages/editor/src/plugins/blanks-exercise/components/blank-check-button.tsx
index f6bc79d34c..40f3046e7c 100644
--- a/packages/editor/src/plugins/blanks-exercise/components/blank-check-button.tsx
+++ b/packages/editor/src/plugins/blanks-exercise/components/blank-check-button.tsx
@@ -18,7 +18,7 @@ export function BlankCheckButton(props: BlankCheckButtonProps) {
   const isCorrect = [...feedback].every((entry) => entry[1].isCorrect)
 
   return (
-    <div className="mt-2 flex">
+    <div className="mx-side mt-5 flex">
       <button
         className="serlo-button-learner-primary mr-3 h-8"
         onClick={onClick}
diff --git a/packages/editor/src/plugins/blanks-exercise/renderer.tsx b/packages/editor/src/plugins/blanks-exercise/renderer.tsx
index d0b2ece85d..df2bae6137 100644
--- a/packages/editor/src/plugins/blanks-exercise/renderer.tsx
+++ b/packages/editor/src/plugins/blanks-exercise/renderer.tsx
@@ -181,7 +181,7 @@ export function BlanksExerciseRenderer({
       <DndWrapper>
         <div
           className={cn(
-            'mx-side mb-block',
+            'mb-block',
             // Increase Slate line height in the editor
             '[&>div>div>div[data-slate-node="element"]]:leading-[30px]',
             // Increase Slate line height in the renderer

From 5cb0ddd9d53c648dfb97271557f5d74daa002f8a Mon Sep 17 00:00:00 2001
From: Botho <1258870+elbotho@users.noreply.github.com>
Date: Tue, 10 Dec 2024 15:23:47 +0100
Subject: [PATCH 2/4] fix(plugin-exercise): show task again before
 interactive-element selection

---
 .../editor/src/plugins/exercise/editor.tsx    | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/editor/src/plugins/exercise/editor.tsx b/packages/editor/src/plugins/exercise/editor.tsx
index c8ff92eab3..47c8269171 100644
--- a/packages/editor/src/plugins/exercise/editor.tsx
+++ b/packages/editor/src/plugins/exercise/editor.tsx
@@ -88,22 +88,22 @@ export function ExerciseEditor(props: ExerciseProps) {
           </div>
           <div className="h-10"></div>
           <div className="mx-side">
+            {/* Special case for the blanks exercise: Until the child plugin is selected we hide the task to avoid confusion */}
+            {/* Background: Users often add their blanks-text to the task */}
+            <div
+              className={cn(
+                'group-has-[.blanks-child-plugin-selection]/exercise:hidden',
+                '[&_.plugin-rows]:pl-[7px]'
+              )}
+            >
+              {content.render({
+                config: {
+                  textPluginPlaceholder: exStrings.placeholder,
+                },
+              })}
+            </div>
             {interactive.defined ? (
               <>
-                {/* Special case for the blanks exercise: Until the child plugin is selected we hide the task to avoid confusion */}
-                {/* Background: Users often add their blanks-text to the task */}
-                <div
-                  className={cn(
-                    'group-has-[.blanks-child-plugin-selection]/exercise:hidden',
-                    '[&_.plugin-rows]:pl-[7px]'
-                  )}
-                >
-                  {content.render({
-                    config: {
-                      textPluginPlaceholder: exStrings.placeholder,
-                    },
-                  })}
-                </div>
                 {interactive.render()}
                 {hideInteractiveInitially.defined ? (
                   <small className="bg-editor-primary-200 p-1">

From 9e7f6dfe47046c13a9e2f4d99b28e3d60200a6af Mon Sep 17 00:00:00 2001
From: Botho <1258870+elbotho@users.noreply.github.com>
Date: Wed, 11 Dec 2024 16:02:36 +0100
Subject: [PATCH 3/4] feat(editor): add learner event handler to package

---
 packages/editor/src/___dev-demo/preview.tsx    | 5 +++++
 packages/editor/src/package/index.ts           | 1 +
 packages/editor/src/package/serlo-renderer.tsx | 9 +++++++++
 3 files changed, 15 insertions(+)

diff --git a/packages/editor/src/___dev-demo/preview.tsx b/packages/editor/src/___dev-demo/preview.tsx
index a29f50cacc..d4df7eed8d 100644
--- a/packages/editor/src/___dev-demo/preview.tsx
+++ b/packages/editor/src/___dev-demo/preview.tsx
@@ -1,5 +1,6 @@
 import { showToastNotice } from '@editor/editor-ui/show-toast-notice'
 import { EditorPluginType, SerloEditor, SerloRenderer } from '@editor/package'
+import { LearnerEventData } from '@editor/plugin/helpers/editor-learner-event'
 import { parseDocumentString } from '@editor/static-renderer/helper/parse-document-string'
 import { AnyEditorDocument } from '@editor/types/editor-plugins'
 import { useMemo, useState } from 'react'
@@ -90,6 +91,10 @@ export function Preview() {
           <SerloRenderer
             state={parseDocumentString(previewState)}
             editorVariant="unknown"
+            handleLearnerEvent={(data: LearnerEventData) => {
+              // eslint-disable-next-line no-console
+              console.log(data)
+            }}
           />
         </div>
       </section>
diff --git a/packages/editor/src/package/index.ts b/packages/editor/src/package/index.ts
index d762a36a62..e07daf3c00 100644
--- a/packages/editor/src/package/index.ts
+++ b/packages/editor/src/package/index.ts
@@ -3,6 +3,7 @@ export { SerloRenderer, type SerloRendererProps } from './serlo-renderer'
 
 export type { SupportedLanguage } from '@editor/types/language-data'
 export type { BaseEditor } from '@editor/core'
+export type { LearnerEventData } from '@editor/plugin/helpers/editor-learner-event'
 
 // We need to make a distinction between entires on our menu and technical
 // plugin types Internally we have for example a `scMcExercise` which has a
diff --git a/packages/editor/src/package/serlo-renderer.tsx b/packages/editor/src/package/serlo-renderer.tsx
index 0e92e9004e..4f356ab681 100644
--- a/packages/editor/src/package/serlo-renderer.tsx
+++ b/packages/editor/src/package/serlo-renderer.tsx
@@ -2,6 +2,10 @@ import { EditorMetaContext } from '@editor/core/contexts/editor-meta-context'
 import { createRenderers } from '@editor/editor-integration/create-renderers'
 import { EditStringsProvider } from '@editor/i18n/edit-strings-provider'
 import { StaticStringsProvider } from '@editor/i18n/static-strings-provider'
+import {
+  editorLearnerEvent,
+  LearnerEventData,
+} from '@editor/plugin/helpers/editor-learner-event'
 import { editorRenderers } from '@editor/plugin/helpers/editor-renderer'
 import { StaticRenderer } from '@editor/static-renderer/static-renderer'
 import type { SupportedLanguage } from '@editor/types/language-data'
@@ -16,6 +20,7 @@ export interface SerloRendererProps {
   state: unknown
   _ltik?: string
   editorVariant: EditorVariant
+  handleLearnerEvent?: (data: LearnerEventData) => void
 }
 
 export function SerloRenderer(props: SerloRendererProps) {
@@ -36,6 +41,10 @@ export function SerloRenderer(props: SerloRendererProps) {
   const basicRenderers = createRenderers()
   editorRenderers.init(basicRenderers)
 
+  if (props.handleLearnerEvent) {
+    editorLearnerEvent.init(props.handleLearnerEvent)
+  }
+
   return (
     <StaticStringsProvider value={staticStrings}>
       <EditStringsProvider value={editStrings}>

From 047b74fc6836fcc25aace8e8d9339641c2f90451 Mon Sep 17 00:00:00 2001
From: Botho <1258870+elbotho@users.noreply.github.com>
Date: Wed, 11 Dec 2024 16:02:46 +0100
Subject: [PATCH 4/4] feat(editor): update readme

---
 packages/editor/README.md | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/editor/README.md b/packages/editor/README.md
index c0f7c9cf95..a76c5c683d 100644
--- a/packages/editor/README.md
+++ b/packages/editor/README.md
@@ -84,7 +84,13 @@ See below for the current API specification.
 - **Long-Term Support**: Unsure
 - **Needs Change?**: Unsure
 
-### `SerloEditor` component props
+#### 7. `type LearnerEventData`
+
+- **Why Exported/How Used**: This is how the `SerloRenderer` provides the details of a learners interaction to `handleLearnerEvent` (see below).
+- **Long-Term Support**: Unsure
+- **Needs Change?**: Unsure
+
+### `SerloEditor` component props (`SerloEditorProps`)
 
 - **`children`**: When passed in a function as the `children` prop, the `SerloEditor` component provides an `editor` render prop as the argument to the `children` function. This `editor` object provides:
 
@@ -107,6 +113,12 @@ See below for the current API specification.
 
 - **`_ltik` (optional)**: Required by the custom plugin `edusharingAsset` only used in `serlo-editor-for-edusharing`. **To be removed once a better solution is found or the plugin is removed.**
 
+### `SerloRenderer` component props (`SerloRendererProps`)
+
+- For `language`, `state`, `_ltik` and `editorVariant` please see props for `SerloEditor` above.
+
+- **`handleLearnerEvent` (optional)**: Function that receives details about the learners interaction in the form of `LearnerEventData`. Provide if you want to connect the editor to you LRS (Learning Record Store) or similar. [In our wiki you can find more details and a xAPI example](https://github.com/serlo/documentation/wiki/Learner-Events-and-xAPI).
+
 ### `pluginMenuEn` / `pluginMenuDe` constant and `Plugin` enum
 
 Exports two records with following structure which you can use to create your own plugin menu in either German or English. This is useful when you for example want to integrate the Serlo Editor as a block / part of another editor.