Merge pull request #372 from serlo/refactor/restructure-editor-packag…

…e-plugins-config

refactor(editor): restructure plugins config API

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@serlo/serlo-editor-for-edusharing",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "private": true,
   "bugs": {
     "url": "https://github.com/serlo/serlo-editor-for-edusharing/issues"
@@ -53,7 +53,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@next/env": "^13.5.6",
-    "@serlo/editor": "0.6.0-beta.16",
+    "@serlo/editor": "0.7.0",
     "clsx": "^1.2.1",
     "default-import": "^1.1.5",
     "express": "^4.18.2",

src/frontend/editor.tsx

@@ -22,14 +22,16 @@ export interface EditorProps {
   providerUrl: string
   ltik: string
   pluginsConfig: SerloEditorProps['pluginsConfig']
+  customPlugins: SerloEditorProps['customPlugins']
 }
 
 export function Editor(props: EditorProps) {
-  const { state, pluginsConfig } = props
+  const { state, pluginsConfig, customPlugins } = props
 
   return (
     <SerloEditorPackage
       pluginsConfig={pluginsConfig}
+      customPlugins={customPlugins}
       initialState={state.document}
     >
       {(editor) => {

src/frontend/plugins/create-plugins-config.tsx → src/frontend/plugins/create-custom-plugins.tsx

@@ -1,6 +1,3 @@
-import { EditorPluginType } from '@serlo/editor'
-import Link from 'next/link'
-
 import IconImage from '../assets/plugin-icons/icon-image.svg'
 import IconInjection from '../assets/plugin-icons/icon-injection.svg'
 
@@ -9,35 +6,7 @@ import { createSerloInjectionPlugin } from './serlo-injection'
 import { EdusharingAssetStaticRenderer } from './edusharing-asset/static'
 import { SerloInjectionStaticRenderer } from './serlo-injection/static'
 
-export function createPluginsConfig({ ltik }: { ltik: string }) {
-  return {
-    basicPluginsConfig,
-    customPlugins: createCustomPlugins({ ltik }),
-  }
-}
-
-const basicPluginsConfig = {
-  enableTextAreaExercise: true,
-  allowImageInTableCells: false,
-  exerciseVisibleInSuggestion: true,
-  allowedChildPlugins: [
-    EditorPluginType.Text,
-    EditorPluginType.Equations,
-    EditorPluginType.Highlight,
-    'edusharingAsset',
-  ],
-  multimediaConfig: {
-    explanation: {
-      plugin: EditorPluginType.Rows,
-      config: {
-        allowedPlugins: [EditorPluginType.Text],
-      },
-    },
-    allowedPlugins: ['edusharingAsset'],
-  },
-}
-
-function createCustomPlugins({ ltik }: { ltik: string }) {
+export function createCustomPlugins({ ltik }: { ltik: string }) {
   return [
     {
       type: 'serloInjection',

src/frontend/plugins/plugins-config.ts

@@ -0,0 +1,36 @@
+import { EditorPluginType, type SerloEditorProps } from '@serlo/editor'
+
+export const pluginsConfig: SerloEditorProps['pluginsConfig'] = {
+  box: {
+    allowedPlugins: [
+      EditorPluginType.Text,
+      EditorPluginType.Equations,
+      EditorPluginType.Highlight,
+      'edusharingAsset',
+    ],
+  },
+  multimedia: {
+    explanation: {
+      plugin: EditorPluginType.Rows,
+      config: {
+        allowedPlugins: [EditorPluginType.Text],
+      },
+    },
+    allowedPlugins: ['edusharingAsset'],
+  },
+  spoiler: {
+    allowedPlugins: [
+      EditorPluginType.Text,
+      EditorPluginType.Equations,
+      EditorPluginType.Highlight,
+      'edusharingAsset',
+    ],
+  },
+  table: {
+    allowImageInTableCells: false,
+  },
+  general: {
+    enableTextAreaExercise: true,
+    exerciseVisibleInSuggestion: true,
+  },
+}

src/frontend/serlo-editor.tsx

@@ -3,12 +3,14 @@ import dynamic from 'next/dynamic'
 import { default as ToastNotice } from 'react-notify-toast'
 
 import { SerloRenderer } from '@serlo/editor'
+import '@serlo/editor/style.css'
 
 import type { EditorProps } from './editor'
 import { Layout } from './layout'
 import { StorageFormat } from '../shared/storage-format'
 import { LtikContext } from './context/ltikContext'
-import { createPluginsConfig } from './plugins/create-plugins-config'
+import { createCustomPlugins } from './plugins/create-custom-plugins'
+import { pluginsConfig } from './plugins/plugins-config'
 
 const Editor = dynamic<EditorProps>(() =>
   import('../frontend/editor').then((mod) => mod.Editor),
@@ -27,7 +29,7 @@ export function SerloEditor({
   providerUrl,
   mayEdit,
 }: SerloEditorProps) {
-  const pluginsConfig = createPluginsConfig({ ltik })
+  const customPlugins = createCustomPlugins({ ltik })
 
   return (
     <>
@@ -41,12 +43,13 @@ export function SerloEditor({
             providerUrl={providerUrl}
             ltik={ltik}
             pluginsConfig={pluginsConfig}
+            customPlugins={customPlugins}
           />
         ) : (
           <Layout>
             <SerloRenderer
               document={state.document}
-              pluginsConfig={pluginsConfig}
+              customPlugins={customPlugins}
             />
           </Layout>
         )}

yarn.lock

@@ -2341,13 +2341,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@serlo/editor@npm:0.6.0-beta.16":
-  version: 0.6.0-beta.16
-  resolution: "@serlo/editor@npm:0.6.0-beta.16"
+"@serlo/editor@npm:0.7.0":
+  version: 0.7.0
+  resolution: "@serlo/editor@npm:0.7.0"
   dependencies:
+    "@serlo/katex-styles": ^1.0.1
     react: ^18.2.0
     react-dom: ^18.2.0
-  checksum: 7085de9bbfe220242e7a093da028b05bac7bb5700a7e489304658fa7b40e64038bf7f6bda1d95ba08af3ed91c5c766171eec229f4cf61b12fbd4f0fb1d97f13d
+  checksum: a693ebf9f14b91d7c7e0e9545d4d603e30d6c547ee0d6c1f657d5318c60d5cf989dceb5827b18c25450d9d72a60f31e988ac0d745f6d90281d184309b5594110
+  languageName: node
+  linkType: hard
+
+"@serlo/katex-styles@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "@serlo/katex-styles@npm:1.0.1"
+  checksum: b8e50847d42669b78a14ee972348457573d806f487b099bf7a552d98cd734abce502be029b2125df0d20dcffc9f51ab1c365965f2c23eafec9aaeddfbc7859d1
   languageName: node
   linkType: hard
 
@@ -2362,7 +2370,7 @@ __metadata:
     "@next/env": ^13.5.6
     "@next/eslint-plugin-next": ^14.0.4
     "@next/swc-linux-x64-gnu": ^14.0.3
-    "@serlo/editor": 0.6.0-beta.16
+    "@serlo/editor": 0.7.0
     "@svgr/webpack": ^8.1.0
     "@tailwindcss/typography": ^0.5.9
     "@types/express": ^4.17.17