refactor(editor): try replacing editorContent with normal child

apps/web/src/components/user/profile-description-editor.tsx

@@ -16,7 +16,7 @@ export function ProfileDescriptionEditor({
 
   const handleSave = async (data: unknown) => {
     const success = await setDescription({
-      description: (data as { description: string }).description,
+      description: (data as { content: string }).content,
     })
     if (!success) {
       // eslint-disable-next-line no-console
@@ -25,14 +25,11 @@ export function ProfileDescriptionEditor({
     }
     return revalidatePath(`/user/profile/${username}`)
   }
-
   const initialState = convertUserByDescription(rawDescription)
 
   return (
-    <>
-      <div className="[&>div.relative]:mt-12">
-        <SerloEditor onSave={handleSave} initialState={initialState} />
-      </div>
-    </>
+    <div className="[&>div.relative]:mt-12">
+      <SerloEditor onSave={handleSave} initialState={initialState} />
+    </div>
   )
 }

apps/web/src/mutations/use-set-entity-mutation/types.ts

@@ -13,6 +13,7 @@ export type TaxonomyCreateOrUpdateMutationData = Pick<
 > & {
   __typename?: 'TaxonomyTerm'
   parent?: number
+  content: string
 }
 
 export interface SetEntityMutationRunnerData {

apps/web/src/mutations/use-set-entity-mutation/use-set-entity-mutation.ts

@@ -59,7 +59,6 @@ export function useSetEntityMutation() {
           return false
         }
         const additionalInput = getAdditionalInputData(mutationStrings, data)
-
         input = {
           entityId,
           ...genericInput,
@@ -148,7 +147,13 @@ function getAdditionalInputData(
   mutationStrings: LoggedInData['strings']['mutations'],
   data: SetEntityMutationData
 ) {
-  const { title, url, content, description } = data
+  if (
+    data.__typename === UuidType.Exercise ||
+    data.__typename === UuidType.ExerciseGroup
+  ) {
+    return {}
+  }
+  const { title, url, content } = data
   switch (data.__typename) {
     case UuidType.Course:
     case UuidType.Article:
@@ -157,16 +162,14 @@ function getAdditionalInputData(
       return {
         title: getRequiredString(mutationStrings, 'title', title),
       }
-
     case UuidType.Exercise:
     case UuidType.ExerciseGroup:
       return {}
     case UuidType.Video:
       return {
         title: getRequiredString(mutationStrings, 'title', title),
-        // url is stored in content for some reason
-        url: getRequiredString(mutationStrings, 'url', content),
-        content: getRequiredString(mutationStrings, 'content', description),
+        url: getRequiredString(mutationStrings, 'url', url),
+        content: getRequiredString(mutationStrings, 'content', content),
       }
     case UuidType.Applet:
       return {

apps/web/src/mutations/use-taxonomy-create-or-update-mutation.ts

@@ -55,8 +55,8 @@ export function useTaxonomyCreateOrUpdateMutation() {
         name: getRequiredString(mutationStrings, 'name', data.term.name),
         description: getRequiredString(
           mutationStrings,
-          'description',
-          data.description
+          'content',
+          data.content
         ),
       }
 

apps/web/src/serlo-editor-integration/convert-editor-response-to-state.ts

@@ -62,9 +62,7 @@ export function convertEditorResponseToState(
       message: `error while converting: ${JSON.stringify(stack)}`,
     })
 
-    return {
-      error: 'failure',
-    }
+    return { error: 'failure' }
   }
 
   function convertAbstractEntity(
@@ -85,7 +83,6 @@ export function convertEditorResponseToState(
           plugin: TemplatePluginType.Video,
           state: {
             ...entityFields,
-            content: url ? url : templateContent,
             description: templateContent,
             ...(url ? { url } : {}),
           },
@@ -128,7 +125,7 @@ export function convertEditorResponseToState(
           term: {
             name: uuid.name,
           },
-          description: entityDescription,
+          description: entityDescription ?? { plugin: EditorPluginType.Rows },
         },
       },
     }
@@ -142,9 +139,7 @@ function unwrapEntityDescription(description: string | null | undefined) {
     ? R.omit(['document'], convertedDescription)
     : R.omit(['document'], createEmptyDocument('serlo-org'))
 
-  const entityDescription = serializeStaticDocument(
-    convertedDescription?.document
-  )
+  const entityDescription = convertedDescription?.document
 
   return { editorMetadata, entityDescription }
 }
@@ -163,32 +158,26 @@ export function unwrapEditorContent(
     | AnyEditorDocument
     | undefined
 
-  let templateContent
   if (
     entityType !== 'Article' ||
     editorContent?.plugin === EditorPluginType.Article
   ) {
-    templateContent = serializeStaticDocument(editorContent)
-  } else {
-    // currently still needed. See https://serlo.slack.com/archives/CEB781NCU/p1695977868948869
-    templateContent = serializeStaticDocument({
-      plugin: EditorPluginType.Article,
-      state: {
-        introduction: { plugin: EditorPluginType.ArticleIntroduction },
-        content: editorContent,
-        exercises: [],
-        exerciseFolder: { id: '', title: '' },
-        relatedContent: {
-          articles: [],
-          courses: [],
-          videos: [],
-        },
-        sources: [],
-      },
-    })
+    return { editorMetadata, templateContent: editorContent }
   }
 
-  return { editorMetadata, templateContent }
+  // currently still needed. See https://serlo.slack.com/archives/CEB781NCU/p1695977868948869
+  const articlePluginDocument = {
+    plugin: EditorPluginType.Article,
+    state: {
+      introduction: { plugin: EditorPluginType.ArticleIntroduction },
+      content: editorContent,
+      exercises: [],
+      exerciseFolder: { id: '', title: '' },
+      relatedContent: { articles: [], courses: [], videos: [] },
+      sources: [],
+    },
+  }
+  return { editorMetadata, templateContent: articlePluginDocument }
 }
 
 export function convertUserByDescription(description?: string | null) {
@@ -199,9 +188,7 @@ export function convertUserByDescription(description?: string | null) {
     ...editorMetadata,
     document: {
       plugin: TemplatePluginType.User,
-      state: {
-        description: entityDescription,
-      },
+      state: { description: entityDescription },
     },
   }
 }
@@ -245,16 +232,6 @@ export function isError(
   return !!(result as ConvertResponseError).error
 }
 
-function serializeStaticDocument(content?: AnyEditorDocument): string {
-  if (typeof content === 'string') return content
-  return JSON.stringify(
-    content ?? {
-      plugin: EditorPluginType.Rows,
-      state: [{ plugin: EditorPluginType.Text, state: undefined }],
-    }
-  )
-}
-
 function parseEditorData(
   content: SerializedStaticState
 ): StorageFormat | undefined {

apps/web/src/serlo-editor-integration/convert-editor-state-to-set-entity-mutation-data.ts

@@ -3,31 +3,25 @@ import { TemplatePluginType, type StorageFormat } from '@editor/package'
 import type { AbstractSerializedState } from './convert-editor-response-to-state'
 import type { SetEntityMutationData } from '@/mutations/use-set-entity-mutation/types'
 
+const typesWithDescription = [
+  TemplatePluginType.Taxonomy,
+  TemplatePluginType.Video,
+  TemplatePluginType.User,
+]
+
 export function convertEditorStateToSetEntityMutationData(
   editorState: StorageFormat
 ): SetEntityMutationData {
   const editorDocumentState = editorState.document
     .state as AbstractSerializedState
 
-  if (
-    editorState.document.plugin === TemplatePluginType.Taxonomy ||
-    editorState.document.plugin === TemplatePluginType.Video ||
-    editorState.document.plugin === TemplatePluginType.User
-  ) {
-    return {
-      ...editorDocumentState,
-      description: JSON.stringify({
-        ...editorState,
-        document: JSON.parse(editorDocumentState.description || '') as unknown,
-      }),
-    }
-  }
+  const document = typesWithDescription.includes(
+    editorState.document.plugin as TemplatePluginType
+  )
+    ? editorDocumentState.description
+    : editorDocumentState.content
+
+  const content = JSON.stringify({ ...editorState, document })
 
-  return {
-    ...editorDocumentState,
-    content: JSON.stringify({
-      ...editorState,
-      document: JSON.parse(editorDocumentState.content || '') as unknown,
-    }),
-  }
+  return { ...editorDocumentState, content }
 }

packages/editor/src/plugins/serlo-template-plugins/applet.tsx

@@ -1,17 +1,18 @@
 import {
+  child,
   type EditorPlugin,
   type EditorPluginProps,
   object,
   string,
 } from '@editor/plugin'
 import { EditorPluginType } from '@editor/types/editor-plugin-type'
 
-import { editorContent, serializedChild } from './common/common'
+import { serializedChild } from './common/common'
 import { EntityTitleInput } from './common/entity-title-input'
 
 export const appletTypeState = object({
   title: string(),
-  content: editorContent(),
+  content: child({ plugin: EditorPluginType.Rows }),
   url: serializedChild(EditorPluginType.Geogebra),
 })
 

packages/editor/src/plugins/serlo-template-plugins/article.tsx

@@ -1,17 +1,17 @@
 import {
+  child,
   type EditorPlugin,
   type EditorPluginProps,
   object,
   string,
 } from '@editor/plugin'
 import { EditorPluginType } from '@editor/types/editor-plugin-type'
 
-import { editorContent } from './common/common'
 import { EntityTitleInput } from './common/entity-title-input'
 
 export const articleTypeState = object({
   title: string(),
-  content: editorContent(EditorPluginType.Article),
+  content: child({ plugin: EditorPluginType.Article }),
 })
 
 export type ArticleTypePluginState = typeof articleTypeState

packages/editor/src/plugins/serlo-template-plugins/common/common.tsx

@@ -4,30 +4,6 @@ import {
   StateTypeReturnType,
   child,
 } from '@editor/plugin'
-import { EditorPluginType } from '@editor/types/editor-plugin-type'
-
-export function editorContent(
-  plugin: string = EditorPluginType.Rows
-): StateType<
-  string,
-  StateTypeValueType<ReturnType<typeof child>>,
-  StateTypeReturnType<ReturnType<typeof child>>
-> {
-  const originalChild = child<string>({ plugin })
-  return {
-    ...originalChild,
-    toStaticState(...args: Parameters<typeof originalChild.toStaticState>) {
-      return JSON.stringify(originalChild.toStaticState(...args))
-    },
-    toStoreState(
-      serialized: string,
-      helpers: Parameters<typeof originalChild.toStoreState>[1]
-    ) {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-      return originalChild.toStoreState(JSON.parse(serialized), helpers)
-    },
-  }
-}
 
 /** jup it's basically a string – and only used by type-applet */
 export function serializedChild(

packages/editor/src/plugins/serlo-template-plugins/course.tsx

@@ -1,4 +1,5 @@
 import {
+  child,
   type EditorPlugin,
   type EditorPluginProps,
   object,
@@ -7,12 +8,11 @@ import {
 import { CourseHeader } from '@editor/plugins/course/renderer/course-header'
 import { EditorPluginType } from '@editor/types/editor-plugin-type'
 
-import { editorContent } from './common/common'
 import { EntityTitleInput } from './common/entity-title-input'
 
 export const courseTypeState = object({
   title: string(),
-  content: editorContent(EditorPluginType.Course),
+  content: child({ plugin: EditorPluginType.Course }),
 })
 
 export type CourseTypePluginState = typeof courseTypeState

packages/editor/src/plugins/serlo-template-plugins/event.tsx

@@ -1,16 +1,17 @@
 import {
+  child,
   type EditorPlugin,
   type EditorPluginProps,
   object,
   string,
 } from '@editor/plugin'
+import { EditorPluginType } from '@editor/types/editor-plugin-type'
 
-import { editorContent } from './common/common'
 import { EntityTitleInput } from './common/entity-title-input'
 
 export const eventTypeState = object({
   title: string(),
-  content: editorContent(),
+  content: child({ plugin: EditorPluginType.Rows }),
 })
 
 export type EventTypePluginState = typeof eventTypeState

packages/editor/src/plugins/serlo-template-plugins/exercise-group/text-exercise-group.tsx

@@ -1,4 +1,5 @@
 import {
+  child,
   type EditorPlugin,
   type EditorPluginProps,
   object,
@@ -7,12 +8,10 @@ import {
 import { selectStaticDocument, useStore } from '@editor/store'
 import { EditorPluginType } from '@editor/types/editor-plugin-type'
 
-import { editorContent } from '../common/common'
-
 // text-exercises also include interactive exercises, we keep the naming to avoid db-migration
 
 export const textExerciseGroupTypeState = object({
-  content: editorContent(EditorPluginType.ExerciseGroup),
+  content: child({ plugin: EditorPluginType.ExerciseGroup }),
 })
 
 export type TextExerciseGroupTypePluginState = typeof textExerciseGroupTypeState