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

@@ -1,18 +1,17 @@
-import type {
-  AbstractSerializedState,
-  TaxonomySerializedState,
-} from '@/serlo-editor-integration/convert-editor-response-to-state'
+import type { SerializedAbstractTemplatePluginDocument } from '@/serlo-editor-integration/convert-editor-response-to-state'
 
-export type SetEntityMutationData = AbstractSerializedState & {
+export type SetEntityMutationData = SerializedAbstractTemplatePluginDocument & {
   changes?: string
 }
 
-export type TaxonomyCreateOrUpdateMutationData = Pick<
-  TaxonomySerializedState,
-  'term' | 'description'
-> & {
+export interface TaxonomyCreateOrUpdateMutationData {
   __typename?: 'TaxonomyTerm'
+  term: {
+    name: string
+  }
+  description: string
   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/pages/taxonomy/term/create/[parent_id]/[id].tsx

@@ -1,4 +1,8 @@
-import { createEmptyDocument, TemplatePluginType } from '@editor/package'
+import {
+  createEmptyDocument,
+  EditorPluginType,
+  TemplatePluginType,
+} from '@editor/package'
 import { GetServerSideProps } from 'next'
 
 import { FrontendClientBase } from '@/components/frontend-client-base/frontend-client-base'
@@ -30,7 +34,7 @@ export default renderedPageNoHooks<TaxonomyTermCreateProps>(({ parent }) => {
                   plugin: TemplatePluginType.Taxonomy,
                   state: {
                     term: { name: '' },
-                    description: '{"plugin":"rows"}',
+                    content: { plugin: EditorPluginType.Rows },
                   },
                 },
               }}

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(
@@ -78,21 +76,6 @@ export function convertEditorResponseToState(
       content
     )
 
-    if (uuid.__typename === UuidType.Video) {
-      return {
-        ...editorMetadata,
-        document: {
-          plugin: TemplatePluginType.Video,
-          state: {
-            ...entityFields,
-            content: url ? url : templateContent,
-            description: templateContent,
-            ...(url ? { url } : {}),
-          },
-        },
-      }
-    }
-
     return {
       ...editorMetadata,
       document: {
@@ -113,8 +96,9 @@ export function convertEditorResponseToState(
   ): StorageFormat {
     stack.push({ id: uuid.id, type: entityType })
 
-    const { editorMetadata, entityDescription } = unwrapEntityDescription(
-      uuid.description
+    const { editorMetadata, templateContent } = unwrapEditorContent(
+      UuidType.TaxonomyTerm,
+      uuid.description ?? undefined
     )
 
     return {
@@ -128,27 +112,13 @@ export function convertEditorResponseToState(
           term: {
             name: uuid.name,
           },
-          description: entityDescription,
+          content: templateContent ?? { plugin: EditorPluginType.Rows },
         },
       },
     }
   }
 }
 
-function unwrapEntityDescription(description: string | null | undefined) {
-  const convertedDescription = parseEditorData(description ?? undefined)
-
-  const editorMetadata = convertedDescription
-    ? R.omit(['document'], convertedDescription)
-    : R.omit(['document'], createEmptyDocument('serlo-org'))
-
-  const entityDescription = serializeStaticDocument(
-    convertedDescription?.document
-  )
-
-  return { editorMetadata, entityDescription }
-}
-
 export function unwrapEditorContent(
   entityType: MainUuidType['__typename'],
   content?: string
@@ -163,73 +133,48 @@ 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) {
-  const { editorMetadata, entityDescription } =
-    unwrapEntityDescription(description)
+export function convertUserByDescription(content?: string | null) {
+  const { editorMetadata, templateContent } = unwrapEditorContent(
+    UuidType.User,
+    content ?? undefined
+  )
 
   return {
     ...editorMetadata,
     document: {
       plugin: TemplatePluginType.User,
-      state: {
-        description: entityDescription,
-      },
+      state: { content: templateContent },
     },
   }
 }
 
-export interface AbstractSerializedState {
+export interface SerializedAbstractTemplatePluginDocument {
   __typename?: UuidType[number]
-  title?: string
   content: SerializedStaticState
-  reasoning?: SerializedStaticState
-  description: SerializedStaticState
+  title?: string
   url?: string
-  cohesive?: string
-}
-
-export interface TaxonomySerializedState {
-  __typename?: UuidType.TaxonomyTerm
-  term: {
-    name: string
-  }
-  description: SerializedStaticState
-  taxonomy: number
-  parent: number
-  position: number
-}
-
-export interface UserSerializedState {
-  __typename?: UuidType.User
-  description: SerializedStaticState
 }
 
 export type ConvertResponseError =
@@ -245,16 +190,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

@@ -1,33 +1,19 @@
-import { TemplatePluginType, type StorageFormat } from '@editor/package'
+import { type StorageFormat } from '@editor/package'
 
-import type { AbstractSerializedState } from './convert-editor-response-to-state'
+import type { SerializedAbstractTemplatePluginDocument } from './convert-editor-response-to-state'
 import type { SetEntityMutationData } from '@/mutations/use-set-entity-mutation/types'
 
 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,
-      }),
-    }
-  }
+    .state as SerializedAbstractTemplatePluginDocument
 
   return {
     ...editorDocumentState,
     content: JSON.stringify({
       ...editorState,
-      document: JSON.parse(editorDocumentState.content || '') as unknown,
+      document: editorDocumentState.content,
     }),
   }
 }

apps/web/src/serlo-editor-integration/use-handle-save.ts

@@ -1,11 +1,11 @@
 import { useEffect, useState } from 'react'
 
-import { type AbstractSerializedState } from './convert-editor-response-to-state'
+import { type SerializedAbstractTemplatePluginDocument } from './convert-editor-response-to-state'
 import type { SerloEditorProps } from './serlo-editor'
 
 export function useHandleSave(
   visible: boolean,
-  editorDocumentState: AbstractSerializedState,
+  editorDocumentState: SerializedAbstractTemplatePluginDocument,
   onSave: SerloEditorProps['onSave']
 ) {
   const [pending, setPending] = useState(false)

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),
 })