refactor: adjust Frontend to new Editor storage format

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

@@ -25,6 +25,7 @@ type TaxonomyTermChildrenLevel2 = Extract<
 
 export function buildTaxonomyData(uuid: TaxonomyTerm): TaxonomyData {
   const children = uuid.children.nodes.filter(isActive)
+
   return {
     description: uuid.description
       ? (parseDocumentString(uuid.description) as EditorRowsDocument)
@@ -46,12 +47,10 @@ export function buildTaxonomyData(uuid: TaxonomyTerm): TaxonomyData {
   }
 }
 
-function isActive(child: TaxonomyTermChildrenLevel1) {
-  return child.trashed === false // && child.__typename !== 'UnsupportedUuid' <---- this has no effect
-}
-
-function isActive_for_subchildren(child: TaxonomyTermChildrenLevel2) {
-  return child.trashed === false // && child.__typename !== 'UnsupportedUuid' <---- this has no effect
+function isActive(
+  child: TaxonomyTermChildrenLevel1 | TaxonomyTermChildrenLevel2
+) {
+  return child.trashed === false
 }
 
 function collectExercises(children: TaxonomyTermChildrenLevel1[]) {
@@ -141,7 +140,7 @@ function collectNestedTaxonomyTerms(
       child.__typename === UuidType.TaxonomyTerm &&
       child.type !== TaxonomyTermType.ExerciseFolder
     ) {
-      const subChildren = child.children.nodes.filter(isActive_for_subchildren)
+      const subChildren = child.children.nodes.filter(isActive)
       result.push({
         id: child.id,
         title: child.name,

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,6 +169,11 @@ export async function requestPage(
     }
   }
 
+  const { editorMetadata } = unwrapEditorContent(
+    uuid.__typename,
+    uuid.currentRevision?.content
+  )
+
   const content = (await prettifyLinksInState(
     uuid.currentRevision?.content
       ? parseDocumentString(uuid.currentRevision?.content)
@@ -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/helper/parse-document-string.tsx

@@ -1,16 +1,32 @@
-import { EditorPluginType, type AnyEditorDocument } from '@editor/package'
+import {
+  EditorPluginType,
+  StorageFormat,
+  type AnyEditorDocument,
+} from '@editor/package'
 
 const fallback = { plugin: EditorPluginType.Rows }
 /**
  * Parses a serialized static editor document (e.g. from the database)
  * into an static document (`AnyEditorDocument`)
+ * it also unwraps editor storage format
  */
 export function parseDocumentString(input?: string): AnyEditorDocument {
   if (!input || !input.startsWith('{')) return fallback
 
   try {
-    const result = JSON.parse(input) as AnyEditorDocument
-    return typeof result.plugin === 'string' ? result : fallback
+    const result = JSON.parse(input) as StorageFormat | AnyEditorDocument
+
+    // unwrapped editor document
+    if (Object.hasOwn(result, 'plugin')) {
+      return typeof result.plugin === 'string' ? result : fallback
+    }
+    // editor storage format with document
+    if (Object.hasOwn(result, 'document')) {
+      return typeof result.document.plugin === 'string'
+        ? result.document
+        : fallback
+    }
+    return fallback
   } catch (e) {
     // eslint-disable-next-line no-console
     console.error('error parsing', e)

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, TemplatePluginType } 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: TemplatePluginType.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,7 +1,8 @@
-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 { convertEditorStateToSetEntityMutationData } from '../convert-editor-state-to-set-entity-mutation-data'
 import type { SerloEditorProps } from '../serlo-editor'
 import { useHandleSave } from '../use-handle-save'
 import { InfoPanel } from '@/components/info-panel'
@@ -17,25 +18,22 @@ 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 licenseId = serializedRootState.licenseId
-  const changes = serializedRootState.changes
+  const editorDocument = editorState.current.document
+  const { licenseId, changes } =
+    editorDocument.state as SupportedTypesSerializedState
 
   const { handleSave, pending, hasError } = useHandleSave(
     open,
-    serializedRootState,
+    convertEditorStateToSetEntityMutationData(editorState.current),
     onSave
   )
   const [hasAgreedLicense, setHasAgreedLicense] = useState(false)
@@ -46,18 +44,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