refactor(editor): replace PluginMenuItemType

packages/editor/src/package/plugin-menu.ts

@@ -84,12 +84,14 @@ export function getPluginMenuItems(
   })
 }
 
-interface PluginMenuItem {
+export interface PluginMenuItem {
   type: PluginMenuType
   title: string
   description: string
-  icon: string
   initialState: EditorProps['initialState']
+  // until we use the editor package in the frontend (only having vite for building)
+  // icons should be strings but are loaded as () => JSX.Element in the frontend (webpack)
+  icon: string | (() => JSX.Element)
 }
 
 const mysteryStrings = {
@@ -127,7 +129,7 @@ function getTitleAndDescription(
   return { title, description }
 }
 
-export function getInitialState(
+function getInitialState(
   type: PluginMenuType
 ): [EditorProps['initialState'], EditorPluginType] {
   switch (type) {
@@ -223,6 +225,6 @@ const iconLookup: Record<PluginMenuType, string> = {
   [pluginMenuType.PagePartners]: IconFallback,
 }
 
-export function getIconString(type: PluginMenuType) {
+function getIconString(type: PluginMenuType) {
   return iconLookup[type]
 }

packages/editor/src/plugins/exercise/components/interactive-exercises-selection.tsx

@@ -1,9 +1,6 @@
 import IconFallback from '@editor/editor-ui/assets/plugin-icons/icon-fallback.svg'
 import { EditorTooltip } from '@editor/editor-ui/editor-tooltip'
-import { getInitialState, PluginMenuType } from '@editor/package/plugin-menu'
-import type { PluginMenuItemType } from '@editor/plugins/rows/contexts/plugin-menu/types'
-import { EditorPluginType } from '@editor/types/editor-plugin-type'
-import type { EditorExerciseDocument } from '@editor/types/editor-plugins'
+import type { PluginMenuItem } from '@editor/package/plugin-menu'
 
 import { type ExerciseProps } from '..'
 import { type InteractivePluginType } from '../interactive-plugin-types'
@@ -13,7 +10,7 @@ export function InteractiveExercisesSelection({
   interactivePluginOptions,
   interactive,
 }: {
-  interactivePluginOptions: PluginMenuItemType[]
+  interactivePluginOptions: PluginMenuItem[]
   interactive: ExerciseProps['state']['interactive']
 }) {
   const templateStrings = useEditorStrings().templatePlugins
@@ -25,16 +22,13 @@ export function InteractiveExercisesSelection({
     return isFirstInLine ? 'left-0' : isLastInLine ? 'right-0' : '-left-24'
   }
 
-  function handleOnClick(
-    pluginType: EditorPluginType,
-    pluginMenuType: PluginMenuType
-  ) {
+  function handleOnClick(initialState: PluginMenuItem['initialState']) {
     if (interactive.defined) return
-    const plugin = pluginType as InteractivePluginType
-    const [exerciseState] = getInitialState(pluginMenuType)
-    const pluginState = exerciseState.state as EditorExerciseDocument['state']
-    if (!pluginState.interactive) return
-    interactive.create({ plugin, state: pluginState.interactive.state })
+
+    interactive.create({
+      plugin: initialState.plugin as InteractivePluginType,
+      state: initialState.state,
+    })
   }
 
   return (
@@ -44,11 +38,11 @@ export function InteractiveExercisesSelection({
       </p>
       <div className="grid grid-cols-4 items-start gap-2 pb-10">
         {interactivePluginOptions.map(
-          ({ type, pluginType, title, icon, description }, index) => (
+          ({ type, title, icon, description, initialState }, index) => (
             <button
-              key={title}
-              data-qa={`add-exercise-${pluginType}`}
-              onClick={() => handleOnClick(pluginType, type)}
+              key={type}
+              data-qa={`add-exercise-${initialState.plugin}`}
+              onClick={() => handleOnClick(initialState)}
               className="serlo-tooltip-trigger w-32 rounded-md p-1 hover:shadow-xl focus:shadow-xl"
             >
               <EditorTooltip

packages/editor/src/plugins/exercise/editor.tsx

@@ -1,8 +1,10 @@
 import { AddButton } from '@editor/editor-ui'
 import { EditorTooltip } from '@editor/editor-ui/editor-tooltip'
-import { getPluginMenuItems } from '@editor/package/plugin-menu'
+import {
+  type PluginMenuItem,
+  getPluginMenuItems,
+} from '@editor/package/plugin-menu'
 import { editorPlugins } from '@editor/plugin/helpers/editor-plugins'
-import { EditorExerciseDocument } from '@editor/types/editor-plugins'
 import { isExerciseDocument } from '@editor/types/plugin-type-guards'
 import { faTrashAlt } from '@fortawesome/free-solid-svg-icons'
 import { FaIcon } from '@serlo/frontend/src/components/fa-icon'
@@ -30,24 +32,24 @@ export function ExerciseEditor(props: ExerciseProps) {
   const exTemplateStrings = editorStrings.templatePlugins.exercise
   const exPluginStrings = editorStrings.plugins.exercise
 
-  const exerciseMenuItems = useMemo(() => {
-    const exerciseItems = getPluginMenuItems(editorStrings).filter(
-      (menuItem) => {
+  // Initial state of interacgtive plugin menu items are wrapped with an exercise plugin
+  // but for this component we need the interactive plugin directly
+  // so we just unwrap them here:
+  const unwrappedMenuItems = useMemo<PluginMenuItem[]>(() => {
+    return getPluginMenuItems(editorStrings)
+      .map((menuItem) => {
         if (!isExerciseDocument(menuItem.initialState)) return false
-        const interactivePlugin =
-          menuItem.initialState.state.interactive?.plugin
-        return interactivePlugin && editorPlugins.isSupported(interactivePlugin)
-      }
-    )
-
-    return exerciseItems.map((menuItem) => ({
-      type: menuItem.type,
-      pluginType: (menuItem.initialState as EditorExerciseDocument).state
-        .interactive!.plugin,
-      title: menuItem.title,
-      description: menuItem.description,
-      icon: menuItem.icon,
-    }))
+        const interactive = menuItem.initialState.state.interactive
+        if (!interactive || !editorPlugins.isSupported(interactive.plugin)) {
+          return false
+        }
+        const pluginMenuItem = {
+          ...menuItem,
+          initialState: interactive,
+        }
+        return pluginMenuItem
+      })
+      .filter(Boolean) as unknown as PluginMenuItem[]
   }, [editorStrings])
 
   return (
@@ -67,7 +69,7 @@ export function ExerciseEditor(props: ExerciseProps) {
       {focused ? (
         <ExerciseToolbar
           {...props}
-          interactivePluginOptions={exerciseMenuItems}
+          interactivePluginOptions={unwrappedMenuItems}
         />
       ) : (
         <button
@@ -99,7 +101,7 @@ export function ExerciseEditor(props: ExerciseProps) {
           </>
         ) : (
           <InteractiveExercisesSelection
-            interactivePluginOptions={exerciseMenuItems}
+            interactivePluginOptions={unwrappedMenuItems}
             interactive={interactive}
           />
         )}

packages/editor/src/plugins/exercise/toolbar/toolbar.tsx

@@ -2,16 +2,14 @@ import { PluginToolbar, ToolbarSelect } from '@editor/editor-ui/plugin-toolbar'
 import { DropdownButton } from '@editor/editor-ui/plugin-toolbar/plugin-tool-menu/dropdown-button'
 import { PluginDefaultTools } from '@editor/editor-ui/plugin-toolbar/plugin-tool-menu/plugin-default-tools'
 import {
-  getInitialState,
+  type PluginMenuItem,
   pluginMenuType,
   PluginMenuType,
 } from '@editor/package/plugin-menu'
-import { PluginMenuItemType } from '@editor/plugins/rows/contexts/plugin-menu/types'
 import { type DocumentState, selectDocument, store } from '@editor/store'
 import { EditorPluginType } from '@editor/types/editor-plugin-type'
 import type {
   EditorBlanksExerciseDocument,
-  EditorExerciseDocument,
   EditorScMcExerciseDocument,
 } from '@editor/types/editor-plugins'
 import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons'
@@ -25,7 +23,7 @@ export const ExerciseToolbar = ({
   state,
   interactivePluginOptions,
 }: ExerciseProps & {
-  interactivePluginOptions: PluginMenuItemType[]
+  interactivePluginOptions: PluginMenuItem[]
 }) => {
   const { interactive } = state
   const exTemplateStrings = useEditorStrings().templatePlugins.exercise
@@ -43,12 +41,10 @@ export const ExerciseToolbar = ({
       value={currentlySelected ?? ''}
       changeValue={(value, index) => {
         if (interactive.defined) {
-          const pluginType = interactivePluginOptions[index]
-            .pluginType as InteractivePluginType
-          const exerciseState = getInitialState(value as PluginMenuType)[0]
-            .state as EditorExerciseDocument['state']
-          const pluginState = exerciseState.interactive?.state
-          interactive.replace(pluginType, pluginState)
+          const pluginInitialState =
+            interactivePluginOptions[index].initialState
+          const pluginType = pluginInitialState.plugin as InteractivePluginType
+          interactive.replace(pluginType, pluginInitialState.state)
         }
       }}
       options={interactivePluginOptions.map(({ type, title }) => ({

packages/editor/src/plugins/rows/components/plugin-menu-items.tsx

@@ -1,7 +1,7 @@
 import IconFallback from '@editor/editor-ui/assets/plugin-icons/icon-fallback.svg'
 import { EditorTooltip } from '@editor/editor-ui/editor-tooltip'
+import type { PluginMenuItem } from '@editor/package/plugin-menu'
 
-import type { PluginMenuItemType } from '../contexts/plugin-menu/types'
 import { useEditorStrings } from '@/contexts/logged-in-data-context'
 import { cn } from '@/helper/cn'
 
@@ -17,12 +17,12 @@ export function PluginMenuItems({
   itemRefs,
   onInsertPlugin,
 }: {
-  basicOptions: PluginMenuItemType[]
-  interactiveOptions: PluginMenuItemType[]
+  basicOptions: PluginMenuItem[]
+  interactiveOptions: PluginMenuItem[]
   focusedItemIndex: number | null
   setFocusedItemIndex: (index: number | null) => void
   itemRefs: React.MutableRefObject<(HTMLButtonElement | null)[]>
-  onInsertPlugin: (pluginType: PluginMenuItemType) => void
+  onInsertPlugin: (pluginType: PluginMenuItem) => void
 }) {
   const editorStrings = useEditorStrings()
 
@@ -52,9 +52,9 @@ export function PluginMenuItems({
     </>
   )
 
-  function renderListItems(options: PluginMenuItemType[], offset: number) {
+  function renderListItems(options: PluginMenuItem[], offset: number) {
     return options.map((pluginMenuItem, index) => {
-      const { type, pluginType, title, icon, description } = pluginMenuItem
+      const { type, initialState, title, icon, description } = pluginMenuItem
       const currentIndex = index + offset
       const selected = currentIndex === focusedItemIndex
       const tooltipPosition = getTooltipPosition(index)
@@ -69,7 +69,7 @@ export function PluginMenuItems({
       return (
         <li key={type}>
           <button
-            data-qa={`plugin-suggestion-${pluginType}`}
+            data-qa={`plugin-suggestion-${initialState.plugin}`}
             ref={(el) => (itemRefs.current[currentIndex] = el)}
             onClick={() => onInsertPlugin(pluginMenuItem)}
             onFocus={() => setFocusedItemIndex(currentIndex)}

packages/editor/src/plugins/rows/components/plugin-menu-modal.tsx

@@ -1,6 +1,9 @@
 import IconEmptyPluginsModal from '@editor/editor-ui/assets/plugin-icons/icon-question-mark.svg'
 import { EditorInput } from '@editor/editor-ui/editor-input'
-import { getPluginMenuItems } from '@editor/package/plugin-menu'
+import {
+  type PluginMenuItem,
+  getPluginMenuItems,
+} from '@editor/package/plugin-menu'
 import {
   PluginMenuActionTypes,
   PluginMenuContext,
@@ -12,14 +15,13 @@ import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'
 import { Key } from 'ts-key-enum'
 
 import { PluginMenuItems } from './plugin-menu-items'
-import { PluginMenuItemType } from '../contexts/plugin-menu/types'
 import { usePluginMenuKeyboardHandler } from '../hooks/use-plugin-menu-keyboard-handler'
 import { checkIsAllowedNesting } from '../utils/check-is-allowed-nesting'
 import { filterOptions } from '../utils/plugin-menu'
 import { ModalWithCloseButton } from '@/components/modal-with-close-button'
 
 interface PluginMenuModalProps {
-  onInsertPlugin: (pluginType: PluginMenuItemType) => void
+  onInsertPlugin: (pluginMenuItem: PluginMenuItem) => void
 }
 
 export function PluginMenuModal({ onInsertPlugin }: PluginMenuModalProps) {
@@ -60,15 +62,9 @@ export function PluginMenuModal({ onInsertPlugin }: PluginMenuModalProps) {
   ])
 
   const allowedMenuItems = useMemo(() => {
-    return menuItems
-      .map((menuItem) => ({
-        type: menuItem.type,
-        pluginType: menuItem.initialState.plugin as EditorPluginType,
-        title: menuItem.title,
-        description: menuItem.description,
-        icon: menuItem.icon,
-      }))
-      .filter(({ pluginType }) => allowedPlugins.includes(pluginType))
+    return menuItems.filter(({ initialState }) =>
+      allowedPlugins.includes(initialState.plugin)
+    )
   }, [allowedPlugins, menuItems])
 
   const { basicOptions, interactiveOptions, firstOption, isEmpty } =
@@ -79,11 +75,11 @@ export function PluginMenuModal({ onInsertPlugin }: PluginMenuModalProps) {
       )
 
       const basicOptions = filteredBySearchString.filter(
-        (option) => option.pluginType !== EditorPluginType.Exercise
+        ({ initialState }) => initialState.plugin !== EditorPluginType.Exercise
       )
 
       const interactiveOptions = filteredBySearchString.filter(
-        (option) => option.pluginType === EditorPluginType.Exercise
+        ({ initialState }) => initialState.plugin === EditorPluginType.Exercise
       )
 
       const firstOption = basicOptions.at(0) ?? interactiveOptions.at(0)

packages/editor/src/plugins/rows/components/rows-inner-editor.tsx

@@ -1,4 +1,4 @@
-import { getInitialState } from '@editor/package/plugin-menu'
+import type { PluginMenuItem } from '@editor/package/plugin-menu'
 import {
   selectEmptyTextPluginChildrenIndexes,
   selectParentPluginType,
@@ -15,7 +15,6 @@ import {
   PluginMenuActionTypes,
   PluginMenuContext,
 } from '../contexts/plugin-menu'
-import { PluginMenuItemType } from '../contexts/plugin-menu/types'
 
 export function RowsInnerEditor({ state, config, id }: RowsProps) {
   // since this is only used to check if the current plugin is the child of the
@@ -36,14 +35,11 @@ export function RowsInnerEditor({ state, config, id }: RowsProps) {
     })
   }
 
-  function handleInsertPlugin(pluginMenuItem: PluginMenuItemType) {
-    const [pluginToInsert] = getInitialState(pluginMenuItem.type)
-    if (!pluginToInsert) return
-
+  function handleInsertPlugin(pluginMenuItem: PluginMenuItem) {
     if (pluginMenuState.insertCallback) {
-      pluginMenuState.insertCallback(pluginToInsert)
+      pluginMenuState.insertCallback(pluginMenuItem.initialState)
     } else {
-      state.insert(pluginMenuState.insertIndex, pluginToInsert)
+      state.insert(pluginMenuState.insertIndex, pluginMenuItem.initialState)
       removeEmptyTextPluginChildren()
     }
 

packages/editor/src/plugins/rows/contexts/plugin-menu/types.ts

@@ -1,5 +1,3 @@
-import { PluginMenuType } from '@editor/package/plugin-menu'
-import type { EditorPluginType } from '@editor/types/editor-plugin-type'
 import type { AnyEditorDocument } from '@editor/types/editor-plugins'
 
 type ActionMap<M extends { [index: string]: any }> = {
@@ -40,13 +38,3 @@ export interface PluginMenuState {
   insertIndex: number | undefined
   insertCallback: ((plugin: AnyEditorDocument) => void) | undefined
 }
-
-export interface PluginMenuItemType {
-  type: PluginMenuType
-  pluginType: EditorPluginType
-  title: string
-  description: string
-  // until we use the editor package in the frontend (only having vite for building)
-  // icons should be strings but are loaded as () => JSX.Element in the frontend (webpack)
-  icon: string | (() => JSX.Element)
-}

packages/editor/src/plugins/rows/utils/plugin-menu.ts

@@ -1,6 +1,6 @@
-import type { PluginMenuItemType } from '../contexts/plugin-menu/types'
+import type { PluginMenuItem } from '@editor/package/plugin-menu'
 
-export function filterOptions(option: PluginMenuItemType[], text: string) {
+export function filterOptions(option: PluginMenuItem[], text: string) {
   if (!text.length) return option
 
   const search = text.toLowerCase()
@@ -9,6 +9,7 @@ export function filterOptions(option: PluginMenuItemType[], text: string) {
   return option.filter(
     (entry) =>
       entry.title.toLowerCase().includes(search) ||
-      entry.pluginType.toLowerCase().includes(search)
+      entry.type.toLowerCase().includes(search) ||
+      entry.initialState.plugin.toLowerCase().includes(search)
   )
 }