Merge pull request #3562 from serlo/feat/editor-plugins-renderers-con…

…fig-object

feat(editor): plugins renderers config object

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

@@ -31,21 +31,23 @@ 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
+  multimediaConfig?: MultimediaConfig
+}
+
 export function createBasicPlugins({
   language = 'de',
   enableTextAreaExercise = false,
   exerciseVisibleInSuggestion,
   allowedChildPlugins,
   allowImageInTableCells,
   multimediaConfig,
-}: {
-  language?: SupportedLanguage
-  allowedChildPlugins?: string[]
-  exerciseVisibleInSuggestion: boolean
-  enableTextAreaExercise?: boolean
-  allowImageInTableCells: boolean
-  multimediaConfig?: MultimediaConfig
-}) {
+}: CreateBasicPluginsConfig) {
   const editorStrings = editorData[language].loggedInData.strings.editor
 
   return [

packages/editor/src/editor-integration/create-renderers.tsx

@@ -1,6 +1,7 @@
-import {
+import type {
   InitRenderersArgs,
   LinkRenderer,
+  PluginStaticRenderer,
 } from '@editor/plugin/helpers/editor-renderer'
 import { AnchorStaticRenderer } from '@editor/plugins/anchor/static'
 import { ArticleStaticRenderer } from '@editor/plugins/article/static'
@@ -30,9 +31,10 @@ import { TemplatePluginType } from '@editor/types/template-plugin-type'
 import { ComponentProps } from 'react'
 
 import { Lazy } from '@/components/content/lazy'
-import { Link } from '@/components/content/link'
 
-export function createRenderers(): InitRenderersArgs {
+export function createRenderers(
+  customPluginRenderers: PluginStaticRenderer[]
+): InitRenderersArgs {
   return {
     pluginRenderers: [
       // plugins
@@ -106,6 +108,7 @@ export function createRenderers(): InitRenderersArgs {
         type: TemplatePluginType.GenericContent,
         renderer: GenericContentTypeStaticRenderer,
       },
+      ...customPluginRenderers,
     ],
     mathRenderer: (element: MathElement) =>
       element.inline ? (
@@ -116,7 +119,16 @@ export function createRenderers(): InitRenderersArgs {
         </Lazy>
       ),
     linkRenderer: ({ href, children }: ComponentProps<LinkRenderer>) => {
-      return <Link href={href}>{children}</Link>
+      return (
+        <a
+          className="serlo-link cursor-pointer"
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {children}
+        </a>
+      )
     },
   }
 }

packages/editor/src/package/editor.tsx

@@ -1,19 +1,41 @@
 import { Editor, type EditorProps } from '@editor/core'
+import {
+  type CreateBasicPluginsConfig,
+  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 { SupportedLanguage } from '@editor/types/language-data'
 import React from 'react'
 
 import { editorData } from './editor-data'
-import { EditorPluginType } from '../types/editor-plugin-type'
 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 {
-  language?: SupportedLanguage
-  initialState?: EditorProps['initialState']
   children: EditorProps['children']
+  pluginsConfig: PluginsConfig
+  initialState?: EditorProps['initialState']
+  language?: SupportedLanguage
 }
+
 const emptyState = {
   plugin: EditorPluginType.Rows,
   state: [
@@ -25,18 +47,22 @@ const emptyState = {
 }
 
 /** For exporting the editor */
-export function SerloEditor({
-  language = 'de',
-  initialState,
-  ...props
-}: SerloEditorProps) {
+export function SerloEditor(props: SerloEditorProps) {
+  const { children, pluginsConfig, initialState, language = 'de' } = props
+  const { basicPluginsConfig, customPlugins = [] } = pluginsConfig
   const { instanceData, loggedInData } = editorData[language]
 
+  const basicPlugins = createBasicPlugins(basicPluginsConfig)
+  editorPlugins.init([...basicPlugins, ...customPlugins])
+
+  const basicRenderers = createRenderers(customPlugins)
+  editorRenderers.init(basicRenderers)
+
   return (
     <InstanceDataProvider value={instanceData}>
       <LoggedInDataProvider value={loggedInData}>
         <div className="serlo-editor-hacks">
-          <Editor initialState={initialState ?? emptyState} {...props} />
+          <Editor initialState={initialState ?? emptyState}>{children}</Editor>
         </div>
       </LoggedInDataProvider>
     </InstanceDataProvider>

packages/editor/src/package/index.ts

@@ -1,10 +1,7 @@
 export { SerloEditor, type SerloEditorProps } from './editor'
 export { SerloRenderer, type SerloRendererProps } from './serlo-renderer'
 
-export { type BaseEditor } from '@editor/core'
-
-export { editorPlugins } from '@editor/plugin/helpers/editor-plugins'
-export { editorRenderers } from '@editor/plugin/helpers/editor-renderer'
+export type { BaseEditor } from '@editor/core'
 
 export { EditorPluginType } from '@editor/types/editor-plugin-type'
 
@@ -22,5 +19,3 @@ export { FaIcon } from '@/components/fa-icon'
 export { EditorInput, PreviewOverlay } from '@editor/editor-ui'
 export { PluginToolbar } from '@editor/editor-ui/plugin-toolbar'
 export { PluginDefaultTools } from '@editor/editor-ui/plugin-toolbar/plugin-tool-menu/plugin-default-tools'
-export { createRenderers } from '@editor/editor-integration/create-renderers'
-export { createBasicPlugins } from '@editor/editor-integration/create-basic-plugins'

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

@@ -1,22 +1,31 @@
+import { createRenderers } from '@editor/editor-integration/create-renderers'
+import { editorRenderers } from '@editor/plugin/helpers/editor-renderer'
 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 { editorData } from './editor-data'
 import { InstanceDataProvider } from '@/contexts/instance-context'
 import { LoggedInDataProvider } from '@/contexts/logged-in-data-context'
 
 export interface SerloRendererProps {
+  pluginsConfig: PluginsConfig
   language?: SupportedLanguage
   document?: AnyEditorDocument | AnyEditorDocument[]
 }
 
 export function SerloRenderer({
+  pluginsConfig,
   language = 'de',
   ...props
 }: SerloRendererProps) {
+  const { customPlugins = [] } = pluginsConfig
   const { instanceData, loggedInData } = editorData[language]
 
+  const basicRenderers = createRenderers(customPlugins)
+  editorRenderers.init(basicRenderers)
+
   return (
     <InstanceDataProvider value={instanceData}>
       <LoggedInDataProvider value={loggedInData}>