refactor: adjust Frontend to new Editor storage format

apps/web/src/fetcher/create-exercises.ts

@@ -4,7 +4,9 @@ import type {
 } from '@editor/package'
 
 import { MainUuidType } from './query-types'
+import { UuidType } from '@/data-types'
 import { parseDocumentString } from '@/helper/parse-document-string'
+import { unwrapEditorContent } from '@/serlo-editor-integration/convert-editor-response-to-state'
 
 type BareExercise = Omit<
   Extract<MainUuidType, { __typename: 'Exercise' }>,
@@ -16,10 +18,13 @@ export function createExercise(
 ): EditorExerciseDocument | undefined {
   if (!uuid.currentRevision?.content) return undefined
 
+  const { templateContent } = unwrapEditorContent(
+    UuidType.Exercise,
+    uuid.currentRevision.content
+  )
+
   const exercise = {
-    ...(parseDocumentString(
-      uuid.currentRevision.content
-    ) as EditorExerciseDocument),
+    ...(parseDocumentString(templateContent) as EditorExerciseDocument),
     serloContext: {
       uuid: uuid.id,
       revisionId: uuid.currentRevision.id,
@@ -41,10 +46,13 @@ export function createExerciseGroup(
 ): EditorExerciseGroupDocument | undefined {
   if (!uuid.currentRevision?.content) return undefined
 
+  const { templateContent } = unwrapEditorContent(
+    UuidType.ExerciseGroup,
+    uuid.currentRevision.content
+  )
+
   return {
-    ...(parseDocumentString(
-      uuid.currentRevision.content
-    ) as EditorExerciseGroupDocument),
+    ...(parseDocumentString(templateContent) as EditorExerciseGroupDocument),
     serloContext: {
       uuid: uuid.id,
       trashed: uuid.trashed,

apps/web/src/fetcher/create-taxonomy.ts

@@ -10,6 +10,7 @@ import {
 } from '@/data-types'
 import { parseDocumentString } from '@/helper/parse-document-string'
 import { hasSpecialUrlChars } from '@/helper/urls/check-special-url-chars'
+import { unwrapEditorContent } from '@/serlo-editor-integration/convert-editor-response-to-state'
 
 type TaxonomyTerm = Extract<
   MainUuidQuery['uuid'],
@@ -24,10 +25,20 @@ type TaxonomyTermChildrenLevel2 = Extract<
 >['children']['nodes'][0]
 
 export function buildTaxonomyData(uuid: TaxonomyTerm): TaxonomyData {
-  const children = uuid.children.nodes.filter(isActive)
+  const { templateContent: description } = unwrapEditorContent(
+    UuidType.TaxonomyTerm,
+    uuid.description ?? ''
+  )
+  const children = uuid.children.nodes.filter(isActive).map((child) => {
+    const { templateContent: childDescription } = unwrapEditorContent(
+      UuidType.TaxonomyTerm,
+      (child as TaxonomyTerm).description ?? ''
+    )
+    return { ...child, description: childDescription }
+  })
   return {
-    description: uuid.description
-      ? (parseDocumentString(uuid.description) as EditorRowsDocument)
+    description: description
+      ? (parseDocumentString(description) as EditorRowsDocument)
       : undefined,
     title: uuid.name,
     id: uuid.id,

apps/web/src/fetcher/request-page.ts

@@ -31,6 +31,7 @@ import {
   getCoursePageIdFromPath,
 } from '@/helper/get-course-id-from-path'
 import { parseDocumentString } from '@/helper/parse-document-string'
+import { unwrapEditorContent } from '@/serlo-editor-integration/convert-editor-response-to-state'
 
 // ALWAYS start requestPath with slash
 export async function requestPage(
@@ -168,9 +169,14 @@ export async function requestPage(
     }
   }
 
+  const { editorMetadata, templateContent } = unwrapEditorContent(
+    uuid.__typename,
+    uuid.currentRevision?.content
+  )
+
   const content = (await prettifyLinksInState(
     uuid.currentRevision?.content
-      ? parseDocumentString(uuid.currentRevision?.content)
+      ? parseDocumentString(templateContent)
       : undefined
   )) as EditorRowsDocument | EditorCourseDocument
 
@@ -205,7 +211,10 @@ export async function requestPage(
     trashed: uuid.trashed,
     title: uuid.title,
     licenseId,
-    content,
+    content: {
+      ...editorMetadata,
+      document: content,
+    },
     isUnrevised: !uuid.currentRevision,
     unrevisedRevisions: uuid.revisions?.totalCount,
   }
@@ -316,6 +325,7 @@ export async function requestPage(
       newsletterPopup: true,
       entityData: {
         ...sharedEntityData,
+        content,
         typename: UuidType.Page,
       },
       metaData: {

apps/web/src/pages/api/frontend/injection-content.ts

@@ -6,9 +6,11 @@ import { gql } from 'graphql-request'
 import type { NextApiRequest, NextApiResponse } from 'next'
 
 import { endpoint } from '@/api/endpoint'
+import { UuidType } from '@/data-types'
 import { InjectionOnlyContentQuery } from '@/fetcher/graphql-types/operations'
 import { isProduction } from '@/helper/is-production'
 import { parseDocumentString } from '@/helper/parse-document-string'
+import { unwrapEditorContent } from '@/serlo-editor-integration/convert-editor-response-to-state'
 
 /**
  * Allows frontend (and later other) instances to get content of injected entity
@@ -71,8 +73,12 @@ export default async function handler(
         }
 
         if (uuid.__typename === 'ExerciseGroup') {
-          const content = parseDocumentString(
+          const { templateContent } = unwrapEditorContent(
+            UuidType.ExerciseGroup,
             uuid.currentRevision.content
+          )
+          const content = parseDocumentString(
+            templateContent
           ) as EditorExerciseGroupDocument
 
           // use id in hash to load one exercise out of the group

apps/web/src/pages/entity/create/[type]/[taxonomyId].tsx

@@ -1,4 +1,4 @@
-import { TemplatePluginType } from '@editor/package'
+import { createEmptyDocument, TemplatePluginType } from '@editor/package'
 import request, { gql } from 'graphql-request'
 import { GetStaticPaths, GetStaticProps } from 'next'
 
@@ -45,7 +45,10 @@ function Content({
   props: EntityCreateProps
 }) {
   const initialState = {
-    plugin: AllowedPlugins[entityType],
+    ...createEmptyDocument('serlo-org'),
+    document: {
+      plugin: AllowedPlugins[entityType],
+    },
   }
 
   const { id: taxonomyParentId } = taxonomyTerm

apps/web/src/pages/page/create.tsx

@@ -1,4 +1,4 @@
-import { TemplatePluginType } from '@editor/package'
+import { createEmptyDocument, TemplatePluginType } from '@editor/package'
 
 import { FrontendClientBase } from '@/components/frontend-client-base/frontend-client-base'
 import { Guard } from '@/components/guard'
@@ -14,7 +14,10 @@ import { renderedPageNoHooks } from '@/helper/rendered-page'
 export default renderedPageNoHooks(() => {
   const addRevisionProps = {
     initialState: {
-      plugin: TemplatePluginType.Page,
+      ...createEmptyDocument('serlo-org'),
+      document: {
+        plugin: TemplatePluginType.Page,
+      },
     },
     type: UuidType.Page,
     errorType: 'none',

apps/web/src/pages/taxonomy/term/create/[parent_id]/[id].tsx

@@ -1,3 +1,4 @@
+import { createEmptyDocument } from '@editor/package'
 import { GetServerSideProps } from 'next'
 
 import { FrontendClientBase } from '@/components/frontend-client-base/frontend-client-base'
@@ -24,10 +25,13 @@ export default renderedPageNoHooks<TaxonomyTermCreateProps>(({ parent }) => {
               type={UuidType.TaxonomyTerm}
               id={parent}
               initialState={{
-                plugin: 'type-taxonomy',
-                state: {
-                  term: { name: '' },
-                  description: '{"plugin":"rows"}',
+                ...createEmptyDocument('serlo-org'),
+                document: {
+                  plugin: 'type-taxonomy',
+                  state: {
+                    term: { name: '' },
+                    description: '{"plugin":"rows"}',
+                  },
                 },
               }}
               errorType="none"

apps/web/src/serlo-editor-integration/components/external-revision-loader.tsx

@@ -142,7 +142,7 @@ export function ExternalRevisionLoader<T>({
               : uuid.id
 
           handleReplace({
-            ...(converted.state as T),
+            ...((converted.document || {}).state as T),
             revision: 0,
             id: 0,
             meta_title: '',

apps/web/src/serlo-editor-integration/components/save-button.tsx

@@ -1,6 +1,6 @@
-import type { AnyEditorDocument } from '@editor/package'
+import type { StorageFormat } from '@editor/package'
 import { faSave } from '@fortawesome/free-solid-svg-icons'
-import { useState } from 'react'
+import { type MutableRefObject, useState } from 'react'
 import { createPortal } from 'react-dom'
 
 import { SaveModal } from './save-modal'
@@ -13,12 +13,12 @@ import { useLeaveConfirm } from '@/helper/use-leave-confirm'
 export function SaveButton({
   onSave,
   isChanged,
-  selectRootDocument,
+  editorState,
   isInTestArea,
 }: {
   onSave: SerloEditorProps['onSave']
   isChanged: boolean
-  selectRootDocument: () => AnyEditorDocument
+  editorState: MutableRefObject<StorageFormat>
   isInTestArea?: boolean
 }) {
   const [saveModalOpen, setSaveModalOpen] = useState(false)
@@ -45,7 +45,7 @@ export function SaveButton({
         open={saveModalOpen}
         setOpen={setSaveModalOpen}
         onSave={onSave}
-        selectRootDocument={selectRootDocument}
+        editorState={editorState}
         isInTestArea={isInTestArea}
       />
     </div>,

apps/web/src/serlo-editor-integration/components/save-modal.tsx

@@ -1,6 +1,6 @@
-import { TemplatePluginType, type AnyEditorDocument } from '@editor/package'
+import { type StorageFormat, TemplatePluginType } from '@editor/package'
 import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons'
-import { useEffect, useState } from 'react'
+import { type MutableRefObject, useEffect, useState } from 'react'
 
 import type { SerloEditorProps } from '../serlo-editor'
 import { useHandleSave } from '../use-handle-save'
@@ -17,25 +17,25 @@ export function SaveModal({
   open,
   setOpen,
   onSave,
-  selectRootDocument,
+  editorState,
   isInTestArea,
 }: {
   open: boolean
   setOpen: (arg0: boolean) => void
   onSave: SerloEditorProps['onSave']
-  selectRootDocument: () => AnyEditorDocument
+  editorState: MutableRefObject<StorageFormat>
   isInTestArea?: boolean
 }) {
-  const serializedRoot = selectRootDocument()
-  const serializedRootState =
-    serializedRoot?.state as SupportedTypesSerializedState
+  const editorDocument = editorState.current.document
+  const editorDocumentState =
+    editorDocument?.state as SupportedTypesSerializedState
 
-  const licenseId = serializedRootState.licenseId
-  const changes = serializedRootState.changes
+  const licenseId = editorDocumentState.licenseId
+  const changes = editorDocumentState.changes
 
   const { handleSave, pending, hasError } = useHandleSave(
     open,
-    serializedRootState,
+    editorDocumentState,
     onSave
   )
   const [hasAgreedLicense, setHasAgreedLicense] = useState(false)
@@ -46,18 +46,18 @@ export function SaveModal({
 
   const licenseAccepted = !licenseId || hasAgreedLicense
   const changesFilled = !changes || changesText
-  const isNoEntity = serializedRoot
+  const isNoEntity = editorDocument
     ? [
         TemplatePluginType.User,
         TemplatePluginType.Page,
         TemplatePluginType.Taxonomy,
-      ].includes(serializedRoot.plugin as TemplatePluginType)
+      ].includes(editorDocument.plugin as TemplatePluginType)
     : false
   const maySave = isNoEntity || (licenseAccepted && changesFilled)
   const needsNoReview = isInTestArea || isNoEntity
   const isOnlyText = isNoEntity || (needsNoReview && !licenseId && !changes)
 
-  const showChanges = serializedRoot ? !isNoEntity : true
+  const showChanges = editorDocument ? !isNoEntity : true
 
   useEffect(() => {
     if (!fireSave) return