Merge branch 'staging' of https://github.com/serlo/frontend into staging

packages/editor/src/editor-integration/create-basic-plugins.tsx

@@ -31,23 +31,25 @@ import { EditorPluginType } from '@editor/types/editor-plugin-type'
 import { SupportedLanguage } from '@editor/types/language-data'
 import { TemplatePluginType } from '@editor/types/template-plugin-type'
 
-export interface CreateBasicPluginsConfig {
-  language?: SupportedLanguage
-  allowedChildPlugins?: string[]
-  exerciseVisibleInSuggestion?: boolean
-  enableTextAreaExercise?: boolean
-  allowImageInTableCells?: boolean
+export interface CreateBasicPluginsProps {
+  allowedChildPlugins: string[]
+  allowImageInTableCells: boolean
+  enableTextAreaExercise: boolean
+  exerciseVisibleInSuggestion: boolean
+  language: SupportedLanguage
   multimediaConfig?: MultimediaConfig
 }
 
-export function createBasicPlugins({
-  language = 'de',
-  enableTextAreaExercise = false,
-  exerciseVisibleInSuggestion = true,
-  allowImageInTableCells = true,
-  allowedChildPlugins,
-  multimediaConfig,
-}: CreateBasicPluginsConfig = {}) {
+export function createBasicPlugins(props: CreateBasicPluginsProps) {
+  const {
+    allowedChildPlugins,
+    allowImageInTableCells,
+    enableTextAreaExercise,
+    exerciseVisibleInSuggestion,
+    language,
+    multimediaConfig,
+  } = props
+
   const editorStrings = editorData[language].loggedInData.strings.editor
 
   return [

packages/editor/src/package/config.ts

@@ -0,0 +1,51 @@
+import type { PluginWithData } from '@editor/plugin/helpers/editor-plugins'
+import type { PluginStaticRenderer } from '@editor/plugin/helpers/editor-renderer'
+import type { MultimediaConfig } from '@editor/plugins/multimedia'
+import { EditorPluginType } from '@editor/types/editor-plugin-type'
+import { SupportedLanguage } from '@editor/types/language-data'
+
+interface BasicPluginsConfig {
+  allowedChildPlugins?: string[]
+  allowImageInTableCells?: boolean
+  enableTextAreaExercise?: boolean
+  exerciseVisibleInSuggestion?: boolean
+  multimediaConfig?: MultimediaConfig
+}
+
+// Custom plugins and renderers are an Edusharing specific feature,
+// and will not be supported in the future
+export interface PluginsConfig {
+  basicPluginsConfig?: BasicPluginsConfig
+  customPlugins?: Array<PluginWithData & PluginStaticRenderer>
+}
+
+export const defaultBasicPluginConfig: Omit<
+  Required<BasicPluginsConfig>,
+  'multimediaConfig'
+> = {
+  allowedChildPlugins: [],
+  allowImageInTableCells: true,
+  enableTextAreaExercise: false,
+  exerciseVisibleInSuggestion: true,
+}
+
+export const defaultPluginsConfig: Required<PluginsConfig> = {
+  basicPluginsConfig: defaultBasicPluginConfig,
+  customPlugins: [],
+}
+
+export const emptyDocumentState = {
+  plugin: EditorPluginType.Rows,
+  state: [
+    {
+      plugin: EditorPluginType.Text,
+      state: [],
+    },
+  ],
+}
+
+export const defaultSerloEditorProps = {
+  pluginsConfig: defaultPluginsConfig,
+  initialState: emptyDocumentState,
+  language: 'de' as SupportedLanguage,
+}

packages/editor/src/package/editor.tsx

@@ -1,58 +1,61 @@
 import { Editor, type EditorProps } from '@editor/core'
-import {
-  type CreateBasicPluginsConfig,
-  createBasicPlugins,
-} from '@editor/editor-integration/create-basic-plugins'
+import { createBasicPlugins } from '@editor/editor-integration/create-basic-plugins'
 import { createRenderers } from '@editor/editor-integration/create-renderers'
-import {
-  editorPlugins,
-  type PluginWithData,
-} from '@editor/plugin/helpers/editor-plugins'
-import {
-  editorRenderers,
-  type PluginStaticRenderer,
-} from '@editor/plugin/helpers/editor-renderer'
-import { EditorPluginType } from '@editor/types/editor-plugin-type'
+import { editorPlugins } from '@editor/plugin/helpers/editor-plugins'
+import { editorRenderers } from '@editor/plugin/helpers/editor-renderer'
 import { SupportedLanguage } from '@editor/types/language-data'
 import React from 'react'
 
-import { editorData } from './editor-data'
+import {
+  defaultPluginsConfig,
+  defaultBasicPluginConfig,
+  type PluginsConfig,
+  defaultSerloEditorProps,
+} from './config.js'
+import { editorData } from './editor-data.js'
 import { InstanceDataProvider } from '@/contexts/instance-context'
 import { LoggedInDataProvider } from '@/contexts/logged-in-data-context'
 
 import '@/assets-webkit/styles/serlo-tailwind.css'
 
-// Custom plugins and renderers are an Edusharing specific feature,
-// and will not be supported in the future
-export interface PluginsConfig {
-  basicPluginsConfig?: CreateBasicPluginsConfig
-  customPlugins?: Array<PluginWithData & PluginStaticRenderer>
-}
-
 export interface SerloEditorProps {
   children: EditorProps['children']
   pluginsConfig?: PluginsConfig
   initialState?: EditorProps['initialState']
   language?: SupportedLanguage
 }
 
-const emptyState = {
-  plugin: EditorPluginType.Rows,
-  state: [
-    {
-      plugin: EditorPluginType.Text,
-      state: [],
-    },
-  ],
-}
-
 /** For exporting the editor */
 export function SerloEditor(props: SerloEditorProps) {
-  const { children, pluginsConfig, initialState, language = 'de' } = props
-  const { basicPluginsConfig, customPlugins = [] } = pluginsConfig || {}
+  const { children, pluginsConfig, initialState, language } = {
+    ...defaultSerloEditorProps,
+    ...props,
+  }
+  const { basicPluginsConfig, customPlugins } = {
+    ...defaultPluginsConfig,
+    ...pluginsConfig,
+  }
+  const {
+    allowedChildPlugins,
+    allowImageInTableCells,
+    enableTextAreaExercise,
+    exerciseVisibleInSuggestion,
+    multimediaConfig,
+  } = {
+    ...defaultBasicPluginConfig,
+    ...basicPluginsConfig,
+  }
+
   const { instanceData, loggedInData } = editorData[language]
 
-  const basicPlugins = createBasicPlugins(basicPluginsConfig)
+  const basicPlugins = createBasicPlugins({
+    allowedChildPlugins,
+    allowImageInTableCells,
+    enableTextAreaExercise,
+    exerciseVisibleInSuggestion,
+    language,
+    multimediaConfig,
+  })
   editorPlugins.init([...basicPlugins, ...customPlugins])
 
   const basicRenderers = createRenderers(customPlugins)
@@ -62,7 +65,7 @@ export function SerloEditor(props: SerloEditorProps) {
     <InstanceDataProvider value={instanceData}>
       <LoggedInDataProvider value={loggedInData}>
         <div className="serlo-editor-hacks">
-          <Editor initialState={initialState ?? emptyState}>{children}</Editor>
+          <Editor initialState={initialState}>{children}</Editor>
         </div>
       </LoggedInDataProvider>
     </InstanceDataProvider>

packages/editor/src/package/serlo-renderer.tsx

@@ -4,7 +4,11 @@ import { StaticRenderer } from '@editor/static-renderer/static-renderer'
 import type { AnyEditorDocument } from '@editor/types/editor-plugins'
 import type { SupportedLanguage } from '@editor/types/language-data'
 
-import type { PluginsConfig } from './editor'
+import {
+  type PluginsConfig,
+  defaultPluginsConfig,
+  defaultSerloEditorProps,
+} from './config'
 import { editorData } from './editor-data'
 import { InstanceDataProvider } from '@/contexts/instance-context'
 import { LoggedInDataProvider } from '@/contexts/logged-in-data-context'
@@ -15,12 +19,10 @@ export interface SerloRendererProps {
   document?: AnyEditorDocument | AnyEditorDocument[]
 }
 
-export function SerloRenderer({
-  pluginsConfig,
-  language = 'de',
-  ...props
-}: SerloRendererProps) {
-  const { customPlugins = [] } = pluginsConfig || {}
+export function SerloRenderer(props: SerloRendererProps) {
+  const { pluginsConfig, language } = { ...defaultSerloEditorProps, ...props }
+  const { customPlugins } = { ...defaultPluginsConfig, ...pluginsConfig }
+
   const { instanceData, loggedInData } = editorData[language]
 
   const basicRenderers = createRenderers(customPlugins)