Merge branch 'staging' into feat/xapi-editor-example

serlo · Dec 13, 2024 · 874e549 · 874e549
2 parents 43bde93 + f6ab3ac
commit 874e549
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 63 deletions.
diff --git 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.

diff --git 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
@@ -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
@@ -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}>

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
@@ -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
@@ -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

diff --git a/packages/editor/src/plugins/exercise/editor.tsx b/packages/editor/src/plugins/exercise/editor.tsx
@@ -76,72 +76,65 @@ export function ExerciseEditor(props: ExerciseProps) {
                 />
               </Suspense>
             ) : null}
+            <ExerciseToolbar
+              {...props}
+              previewActive={previewActive}
+              setPreviewActive={setPreviewActive}
+            />
+          </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-focus-within/exercise:block',
-                isFocused ? 'block' : 'hidden'
+                'group-has-[.blanks-child-plugin-selection]/exercise:hidden',
+                '[&_.plugin-rows]:pl-[7px]'
               )}
             >
-              <ExerciseToolbar
-                {...props}
-                previewActive={previewActive}
-                setPreviewActive={setPreviewActive}
-              />
+              {content.render({
+                config: {
+                  textPluginPlaceholder: exStrings.placeholder,
+                },
+              })}
             </div>
-            <div className="h-10"></div>
-            <div className="mx-side">
-              {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]'
-                    )}
+            {interactive.defined ? (
+              <>
+                {interactive.render()}
+                {hideInteractiveInitially.defined ? (
+                  <small className="bg-editor-primary-200 p-1">
+                    [{exStrings.hideInteractiveInitially.info}]
+                  </small>
+                ) : null}
+              </>
+            ) : (
+              <InteractiveExercisesSelection interactive={interactive} />
+            )}
+            {solution.defined ? (
+              <div className="-ml-side mt-block">
+                <nav className="flex justify-end">
+                  <button
+                    className="serlo-button-round serlo-button-edit-secondary serlo-tooltip-trigger relative top-[31px] z-20 mr-side"
+                    onClick={() => solution.remove()}
                   >
-                    {content.render({
-                      config: {
-                        textPluginPlaceholder: exStrings.placeholder,
-                      },
-                    })}
-                  </div>
-                  {interactive.render()}
-                  {hideInteractiveInitially.defined ? (
-                    <small className="bg-editor-primary-200 p-1">
-                      [{exStrings.hideInteractiveInitially.info}]
-                    </small>
-                  ) : null}
-                </>
-              ) : (
-                <InteractiveExercisesSelection interactive={interactive} />
-              )}
-              {solution.defined ? (
-                <div className="-ml-side mt-block">
-                  <nav className="flex justify-end">
-                    <button
-                      className="serlo-button-round serlo-button-edit-secondary serlo-tooltip-trigger relative top-[31px] z-20 mr-side"
-                      onClick={() => solution.remove()}
-                    >
-                      <EditorTooltip text={exStrings.removeSolution} />
-                      <FaIcon icon={faTrashAlt} />
-                    </button>
-                  </nav>
-                  {solution.render()}
-                </div>
-              ) : (
-                <div
-                  className={cn(
-                    'mt-12 hidden max-w-[50%] group-focus-within/exercise:block',
-                    isFocused ? 'block' : 'hidden'
-                  )}
-                >
-                  <AddButton onClick={() => solution.create()}>
-                    {exStrings.createSolution}
-                  </AddButton>
-                </div>
-              )}
-            </div>
+                    <EditorTooltip text={exStrings.removeSolution} />
+                    <FaIcon icon={faTrashAlt} />
+                  </button>
+                </nav>
+                {solution.render()}
+              </div>
+            ) : (
+              <div
+                className={cn(
+                  'mt-12 hidden max-w-[50%] group-focus-within/exercise:block',
+                  isFocused ? 'block' : 'hidden'
+                )}
+              >
+                <AddButton onClick={() => solution.create()}>
+                  {exStrings.createSolution}
+                </AddButton>
+              </div>
+            )}
           </div>
         </div>
       </PreviewProvider>