Merge pull request #4380 from serlo/refactor/use-editor-package-in-fr…

…ontend

refactor: use editor package in frontend

.github/workflows/web_checks.yaml

@@ -34,16 +34,6 @@ jobs:
       - run: yarn
       - run: yarn lint:tsc
 
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20
-      - run: yarn
-      - run: yarn test
-
   editor-test:
     runs-on: ubuntu-latest
     steps:
@@ -52,4 +42,4 @@ jobs:
         with:
           node-version: 20
       - run: yarn
-      - run: yarn editor:test
+      - run: yarn test

README.md

@@ -108,7 +108,7 @@ Creates a build of the frontend, shows summary of build artefacts and creates in
 yarn test
 ```
 
-Runs jest tests.
+Runs editor unit tests (vitest).
 
 ```
 yarn codegen

apps/web/eslint.config.mjs

@@ -27,5 +27,19 @@ export default [
         project: true,
       },
     },
+    rules: {
+      // Show an error for all direct imports from the Editor,
+      // in order to prevent coupling of the codebases.
+      'no-restricted-imports': [
+        'error',
+        {
+          patterns: [
+            '@editor/*',
+            // Make an exception for Editor package exports.
+            '!@editor/package',
+          ],
+        },
+      ],
+    },
   },
 ]

apps/web/package.json

@@ -24,8 +24,7 @@
     "lint:prettier": "yarn _prettier --check",
     "lint:tsc": "tsc --noEmit",
     "show-unused-exports": "ts-unused-exports tsconfig.json --excludePathsFromReport=src/pages/ --excludePathsFromReport=src/fetcher/graphql-types/operations.ts --allowUnusedTypes",
-    "start": "next start",
-    "test": "jest"
+    "start": "next start"
   },
   "resolutions": {
     "@serlo/katex-styles": "1.0.1"
@@ -100,7 +99,6 @@
     "@tailwindcss/typography": "^0.5.15",
     "@types/canvas-confetti": "^1.6.4",
     "@types/iframe-resizer": "^3.5.13",
-    "@types/jest": "^29.5.14",
     "@types/js-cookie": "^3.0.6",
     "@types/json-diff": "^1.0.3",
     "@types/katex": "^0.16.7",
@@ -123,7 +121,6 @@
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
     "graphql-tag": "2.12.6",
-    "jest": "^29.7.0",
     "micromark": "^4.0.1",
     "npm-run-all": "^4.1.5",
     "postcss-flexbugs-fixes": "^5.0.2",

apps/web/src/components/author/revision/revision-preview-boxes.tsx

@@ -1,4 +1,4 @@
-import { EditorPluginType } from '@editor/types/editor-plugin-type'
+import { EditorPluginType } from '@editor/package'
 import { type ReactNode } from 'react'
 
 import { DisplayModes } from './display-modes'

apps/web/src/components/author/revision/revision.tsx

@@ -1,4 +1,3 @@
-import { editorRenderers } from '@editor/plugin/helpers/editor-renderer'
 import { useState, useEffect } from 'react'
 
 import { DisplayModes } from './display-modes'
@@ -12,7 +11,6 @@ import { UserTools } from '@/components/user-tools/user-tools'
 import { useInstanceData } from '@/contexts/instance-context'
 import { type RevisionData } from '@/data-types'
 import { removeHash } from '@/helper/remove-hash'
-import { createRenderers } from '@/serlo-editor-integration/create-renderers'
 
 export interface RevisionProps {
   data: RevisionData
@@ -26,7 +24,6 @@ export function Revision({ data }: RevisionProps) {
   const [displayMode, setDisplayMode] = useState<DisplayModes>(
     DisplayModes.This
   )
-  editorRenderers.init(createRenderers())
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => {

apps/web/src/components/author/uuid-url-input.tsx

@@ -1,10 +1,10 @@
-import { useEditStrings } from '@editor/i18n/edit-strings-provider'
 import { gql } from 'graphql-request'
 import { useState } from 'react'
 
 import { FaIcon } from '../fa-icon'
 import { useGraphqlSwr } from '@/api/use-graphql-swr'
 import { useInstanceData } from '@/contexts/instance-context'
+import { useLoggedInData } from '@/contexts/logged-in-data-context'
 import { UuidType, UuidWithRevType } from '@/data-types'
 import {
   TaxonomyTermType,
@@ -38,13 +38,16 @@ export function UuidUrlInput({
   const { data, error } = useSimpleUuidFetch(maybeUuid)
 
   const { strings } = useInstanceData()
-  const modalStrings = useEditStrings().templatePlugins.article.addModal
+  const loggedInData = useLoggedInData()
+
+  if (!loggedInData) return null
+  const uuidToolStrings = loggedInData.strings.uuidUrlInput
 
   return (
     <div className="my-4 border-t-2 pt-5">
       <input
         className="serlo-input-font-reset w-72 rounded-xl bg-editor-primary-200 p-2 font-bold placeholder-almost-black outline-none placeholder:font-normal focus:bg-editor-primary"
-        placeholder={modalStrings.placeholder}
+        placeholder={uuidToolStrings.placeholder}
         onChange={(event) => {
           if (event.target.value.length === 0) {
             setMaybeUuid(null)
@@ -69,16 +72,16 @@ export function UuidUrlInput({
 
   function renderFeedback() {
     if (maybeUuid === null) return null
-    if (maybeUuid === false) return modalStrings.invalidInput
+    if (maybeUuid === false) return uuidToolStrings.invalidInput
     if (error) {
       // eslint-disable-next-line no-console
       console.error(error)
-      return modalStrings.fetchError
+      return uuidToolStrings.fetchError
     }
-    if (!data) return modalStrings.loading
+    if (!data) return uuidToolStrings.loading
 
     const { uuid } = data
-    if (!uuid) return modalStrings.notFound
+    if (!uuid) return uuidToolStrings.notFound
 
     const { __typename: typename, id } = uuid
 
@@ -90,18 +93,21 @@ export function UuidUrlInput({
       Object.hasOwn(uuid, 'type') && uuid.type ? uuid.type : undefined
 
     if (!supportedEntityTypes.includes(typename as UuidWithRevType))
-      return modalStrings.unsupportedType.replace('%type%', typename)
+      return uuidToolStrings.unsupportedType.replace('%type%', typename)
 
     if (taxonomyType && !supportedTaxonomyTypes.includes(taxonomyType))
-      return modalStrings.unsupportedType.replace('%type%', taxonomyType ?? '')
+      return uuidToolStrings.unsupportedType.replace(
+        '%type%',
+        taxonomyType ?? ''
+      )
 
     if (unsupportedIds && unsupportedIds.includes(id))
-      return modalStrings.unsupportedId
+      return uuidToolStrings.unsupportedId
 
-    if (!id) return modalStrings.notFound
+    if (!id) return uuidToolStrings.notFound
 
     if (!typename.includes(UuidType.Exercise) && !title)
-      return modalStrings.notFound
+      return uuidToolStrings.notFound
 
     return (
       <>

apps/web/src/components/comments/comment.tsx

@@ -1,4 +1,4 @@
-import type { StaticMathProps } from '@editor/plugins/text/static-components/static-math'
+import type { StaticMathProps } from '@editor/package'
 import dynamic from 'next/dynamic'
 import { useEffect, useRef, useState } from 'react'
 
@@ -23,9 +23,7 @@ interface CommentProps {
 }
 
 const StaticMath = dynamic<StaticMathProps>(() =>
-  import('@editor/plugins/text/static-components/static-math').then(
-    (mod) => mod.StaticMath
-  )
+  import('@editor/package').then((mod) => mod.StaticMath)
 )
 
 export function Comment({

apps/web/src/components/content/license/exercise-license-notice.tsx

@@ -1,9 +1,9 @@
-import { EditorTooltip } from '@editor/editor-ui/editor-tooltip'
 import { faCreativeCommons } from '@fortawesome/free-brands-svg-icons'
 import { faSlash } from '@fortawesome/free-solid-svg-icons'
 
 import { Link } from '../link'
 import { FaIcon } from '@/components/fa-icon'
+import { SimpleTooltip } from '@/components/simple-tooltip'
 import { useInstanceData } from '@/contexts/instance-context'
 import { getLicense } from '@/data/licenses/licenses-helpers'
 import { cn } from '@/helper/cn'
@@ -63,16 +63,16 @@ export function ExerciseLicenseNotice({
   return (
     <>
       <Link
-        className={cn(`
-          serlo-button-learner-transparent serlo-tooltip-trigger w-[33px] text-[18px] text-base font-normal hover:no-underline
-        `)}
+        className={cn(
+          `serlo-button-learner-transparent serlo-tooltip-trigger w-[33px] text-[18px] text-base font-normal hover:no-underline`
+        )}
         href={licenseHref}
         noExternalIcon
       >
         <>
-          <EditorTooltip
+          <SimpleTooltip
             text={tooltipTitle}
-            hotkeys={tooltipExplanation}
+            subtext={tooltipExplanation}
             className="right-0 top-10"
           />
           <span className="relative -ml-[1px] inline-block h-5 w-5 align-sub text-xl">

apps/web/src/components/entity/entity.tsx

@@ -1,10 +1,12 @@
-import { editorRenderers } from '@editor/plugin/helpers/editor-renderer'
-import { isEmptyArticle } from '@editor/plugins/article/utils/static-is-empty'
-import { CourseHeader } from '@editor/plugins/course/renderer/course-header'
-import { EditorPluginType } from '@editor/types/editor-plugin-type'
-import { isArticleDocument } from '@editor/types/plugin-type-guards'
+import {
+  EditorPluginType,
+  isArticleDocument,
+  isCourseDocument,
+  isEmptyArticle,
+} from '@editor/package'
 import {
   faExclamationCircle,
+  faGraduationCap,
   faTools,
   faTrash,
 } from '@fortawesome/free-solid-svg-icons'
@@ -24,7 +26,6 @@ import { getIconByTypename } from '@/helper/icon-by-entity-type'
 import { isProduction } from '@/helper/is-production'
 import { replacePlaceholders } from '@/helper/replace-placeholders'
 import { getHistoryUrl } from '@/helper/urls/get-history-url'
-import { createRenderers } from '@/serlo-editor-integration/create-renderers'
 import { EditorRenderer } from '@/serlo-editor-integration/editor-renderer'
 
 export interface EntityProps {
@@ -38,14 +39,12 @@ const LenabiCourseFeedback = dynamic(() =>
 )
 
 export function Entity({ data }: EntityProps) {
-  editorRenderers.init(createRenderers())
-
   const isLenabiUserJourneyCoursePage = !isProduction && data.id === 307521
 
   const { strings } = useInstanceData()
   return wrapWithSchema(
     <>
-      {renderNotices()}
+      {renderNotices(data.content)}
       {renderStyledH1()}
       {renderUserTools({ aboveContent: true })}
       <div className="min-h-[25vh]" key={data.id}>
@@ -61,7 +60,14 @@ export function Entity({ data }: EntityProps) {
   function renderStyledH1() {
     if (!data.title) return null
     if (data.typename === UuidType.Course)
-      return <CourseHeader title={<>{data.title}</>} />
+      return (
+        <>
+          <p className="serlo-p mb-0 mt-10 text-[1rem] font-bold">
+            <FaIcon icon={faGraduationCap} /> {strings.entities.course}
+          </p>
+          <div className="mx-side my-0 text-2xl font-bold">{data.title}</div>
+        </>
+      )
 
     return (
       <h1 className="serlo-h1 mt-12" itemProp="name">
@@ -139,7 +145,7 @@ export function Entity({ data }: EntityProps) {
     )
   }
 
-  function renderNotices() {
+  function renderNotices(document: EntityData['content']) {
     if (data.trashed)
       return (
         <InfoPanel icon={faTrash} doNotIndex>
@@ -175,5 +181,18 @@ export function Entity({ data }: EntityProps) {
         </InfoPanel>
       )
     }
+
+    const isCourse =
+      document &&
+      !Array.isArray(document) &&
+      document.plugin === EditorPluginType.Course &&
+      isCourseDocument(document)
+    if (isCourse && !document.state.pages.length) {
+      return (
+        <InfoPanel icon={faExclamationCircle} type="warning" doNotIndex>
+          {strings.content.courseNoPagesWarning}
+        </InfoPanel>
+      )
+    }
   }
 }

apps/web/src/components/equations-app/overview.tsx

@@ -1,4 +1,4 @@
-import type { StaticMathProps } from '@editor/plugins/text/static-components/static-math'
+import type { StaticMathProps } from '@editor/package'
 import { faCheck, faPlay } from '@fortawesome/free-solid-svg-icons'
 import dynamic from 'next/dynamic'
 
@@ -12,9 +12,7 @@ interface OverviewProps {
 }
 
 const StaticMath = dynamic<StaticMathProps>(() =>
-  import('@editor/plugins/text/static-components/static-math').then(
-    (mod) => mod.StaticMath
-  )
+  import('@editor/package').then((mod) => mod.StaticMath)
 )
 
 export function Overview({ selectLevel, solved }: OverviewProps) {