Render article editor content on the server #9760 (#2847)

* Download digital credential dialog

* Missing icon

* Force long words to wrap

* Body as scroll container

* Prefetch from article API

* Render article detail with static render and provide banner and byline viewers

* Image viewer and placeholder

* Lockfile

* Extract learning resource IDs and prefetch

* Viewers for learning cards and divider

* Export viewer

* Fix/filter iframe props

* Style lint ignores

* Consolidate resource ID extraction and prefetch behavior

* Remove float, not in use

* Remove comments

Author: jonkafton

frontends/main/package.json

@@ -38,6 +38,7 @@
     "@tiptap/pm": "^3.13.0",
     "@tiptap/react": "^3.13.0",
     "@tiptap/starter-kit": "^3.13.0",
+    "@tiptap/static-renderer": "^3.13.0",
     "api": "workspace:*",
     "async_hooks": "^1.0.0",
     "classnames": "^2.5.1",

frontends/main/src/app-pages/Articles/ArticleDetailPage.tsx

@@ -7,6 +7,8 @@ import { ArticleEditor } from "@/page-components/TiptapEditor/ArticleEditor"
 import { notFound } from "next/navigation"
 import { useFeatureFlagEnabled } from "posthog-js/react"
 import { FeatureFlags } from "@/common/feature_flags"
+import { useFeatureFlagsLoaded } from "@/common/useFeatureFlagsLoaded"
+import { LearningResourceProvider } from "@/page-components/TiptapEditor/extensions/node/LearningResource/LearningResourceDataProvider"
 
 const PageContainer = styled.div({
   display: "flex",
@@ -21,22 +23,40 @@ const Spinner = styled(LoadingSpinner)({
   transform: "translate(-50%, -50%)",
 })
 
-export const ArticleDetailPage = ({ articleId }: { articleId: string }) => {
+export const ArticleDetailPage = ({
+  articleId,
+  learningResourceIds = [],
+}: {
+  articleId: string
+  learningResourceIds?: number[]
+}) => {
   const { data: article, isLoading } = useArticleDetailRetrieve(articleId)
 
   const showArticleDetail = useFeatureFlagEnabled(
     FeatureFlags.ArticleEditorView,
   )
+  const flagsLoaded = useFeatureFlagsLoaded()
 
-  if (isLoading) {
-    return <Spinner color="inherit" loading size={32} />
+  /* Ensure queries are accessed during loading/flag check.
+   * This prevents React Query warnings about prefetched queries not being accessed.
+   * We can remove the early LearningResourceProvider when we remove the feature flag.
+   */
+  if (isLoading || (!flagsLoaded && showArticleDetail === undefined)) {
+    return (
+      <LearningResourceProvider resourceIds={learningResourceIds}>
+        <Spinner color="inherit" loading size={32} />
+      </LearningResourceProvider>
+    )
   }
-  if (!article || !showArticleDetail) {
+  if (!showArticleDetail || !article) {
     return notFound()
   }
+
   return (
     <PageContainer>
-      <ArticleEditor article={article} readOnly />
+      <LearningResourceProvider resourceIds={learningResourceIds}>
+        <ArticleEditor article={article} readOnly />
+      </LearningResourceProvider>
     </PageContainer>
   )
 }

frontends/main/src/app-pages/CertificatePage/CertificatePage.tsx

@@ -800,6 +800,13 @@ const CertificatePage: React.FC<{
             Download Digital Credential
           </Button>
         ) : null}
+        <Button
+          variant="bordered"
+          startIcon={<RiDownloadLine />}
+          onClick={() => setDigitalCredentialDialogOpen(true)}
+        >
+          Download Digital Credential
+        </Button>
         <Button
           variant="bordered"
           startIcon={<RiShareLine />}

frontends/main/src/app/articles/[slugOrId]/page.tsx

@@ -1,7 +1,12 @@
 import React from "react"
 import { Metadata } from "next"
+import { HydrationBoundary, dehydrate } from "@tanstack/react-query"
+import { articleQueries } from "api/hooks/articles"
 import { standardizeMetadata } from "@/common/metadata"
 import { ArticleDetailPage } from "@/app-pages/Articles/ArticleDetailPage"
+import { getQueryClient } from "@/app/getQueryClient"
+import { learningResourceQueries } from "api/hooks/learningResources"
+import { extractLearningResourceIds } from "@/page-components/TiptapEditor/extensions/utils"
 
 export const metadata: Metadata = standardizeMetadata({
   title: "Article Detail",
@@ -10,6 +15,33 @@ export const metadata: Metadata = standardizeMetadata({
 const Page: React.FC<PageProps<"/articles/[slugOrId]">> = async (props) => {
   const { slugOrId } = await props.params
 
-  return <ArticleDetailPage articleId={slugOrId} />
+  const queryClient = getQueryClient()
+
+  await queryClient.prefetchQuery(
+    articleQueries.articlesDetailRetrieve(slugOrId),
+  )
+
+  const queryKey = articleQueries.articlesDetailRetrieve(slugOrId).queryKey
+  const cacheData = queryClient.getQueryData(queryKey)
+
+  const learningResourceIds = cacheData?.content
+    ? extractLearningResourceIds(cacheData.content)
+    : []
+
+  if (learningResourceIds.length > 0) {
+    const bulkQuery = learningResourceQueries.list({
+      resource_id: learningResourceIds,
+    })
+    await queryClient.prefetchQuery(bulkQuery)
+  }
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <ArticleDetailPage
+        articleId={slugOrId}
+        learningResourceIds={learningResourceIds}
+      />
+    </HydrationBoundary>
+  )
 }
 export default Page

frontends/main/src/page-components/TiptapEditor/ArticleEditor.tsx

@@ -26,7 +26,7 @@ import { Superscript } from "@tiptap/extension-superscript"
 import { Toolbar } from "./vendor/components/tiptap-ui-primitive/toolbar"
 import { Spacer } from "./vendor/components/tiptap-ui-primitive/spacer"
 
-import TiptapEditor, { MainToolbarContent } from "./TiptapEditor"
+import { TiptapEditor, MainToolbarContent, TipTapViewer } from "./TiptapEditor"
 import { ArticleProvider } from "./ArticleContext"
 
 import { DividerNode } from "./extensions/node/Divider/DividerNode"
@@ -40,14 +40,6 @@ import { HorizontalRule } from "./vendor/components/tiptap-node/horizontal-rule-
 import { ImageNode } from "./extensions/node/Image/ImageNode"
 import { ImageWithCaptionNode } from "./extensions/node/Image/ImageWithCaptionNode"
 
-import "./vendor/components/tiptap-node/blockquote-node/blockquote-node.scss"
-import "./vendor/components/tiptap-node/code-block-node/code-block-node.scss"
-import "./vendor/components/tiptap-node/horizontal-rule-node/horizontal-rule-node.scss"
-import "./vendor/components/tiptap-node/list-node/list-node.scss"
-import "./vendor/components/tiptap-node/image-node/image-node.scss"
-import "./vendor/components/tiptap-node/heading-node/heading-node.scss"
-import "./vendor/components/tiptap-node/paragraph-node/paragraph-node.scss"
-
 import type { ExtendedNodeConfig } from "./extensions/node/types"
 import { handleImageUpload, MAX_FILE_SIZE } from "./vendor/lib/tiptap-utils"
 
@@ -225,6 +217,95 @@ const ArticleEditor = ({ onSave, readOnly, article }: ArticleEditorProps) => {
     )
   }
 
+  const extensions = [
+    ArticleDocument,
+    StarterKit.configure({
+      document: false, // Disable default document to use our ArticleDocument
+      horizontalRule: false,
+      heading: false,
+      link: {
+        openOnClick: false,
+        enableClickSelection: true,
+      },
+      trailingNode: {
+        node: "paragraph",
+      },
+    }),
+    Heading.configure({
+      levels: [1, 2, 3, 4, 5, 6],
+    }),
+    Placeholder.configure({
+      showOnlyCurrent: false,
+      includeChildren: true,
+      placeholder: ({ node, editor }): string => {
+        let parentNode: typeof node | null = null
+
+        editor.state.doc.descendants((n: ProseMirrorNode) => {
+          n.forEach((childNode: ProseMirrorNode) => {
+            if (childNode === node) {
+              parentNode = n
+            }
+          })
+          if (parentNode) {
+            return false
+          }
+          return undefined
+        })
+
+        if (parentNode) {
+          const parentExtension = editor.extensionManager.extensions.find(
+            (ext) => ext.name === parentNode!.type.name,
+          )
+
+          if (
+            parentExtension &&
+            "config" in parentExtension &&
+            parentExtension.config &&
+            typeof (parentExtension.config as ExtendedNodeConfig)
+              .getPlaceholders === "function"
+          ) {
+            const placeholder = (
+              parentExtension.config as ExtendedNodeConfig
+            ).getPlaceholders(node)
+            if (placeholder) {
+              return placeholder
+            }
+          }
+        }
+
+        if (node.type.name === "heading") {
+          return "Add a heading"
+        }
+        return "Add some text"
+      },
+    }),
+    HorizontalRule,
+    LearningResourceURLHandler,
+    LearningResourceNode,
+    TextAlign.configure({ types: ["heading", "paragraph"] }),
+    TaskList,
+    TaskItem.configure({ nested: true }),
+    Highlight.configure({ multicolor: true }),
+    TiptapTypography,
+    Superscript,
+    Subscript,
+    Selection,
+    Image,
+    MediaEmbedNode,
+    DividerNode,
+    ArticleByLineInfoBarNode,
+    ImageWithCaptionNode,
+    MediaEmbedURLHandler,
+    ImageNode.configure({
+      accept: "image/*",
+      maxSize: MAX_FILE_SIZE,
+      limit: 3,
+      upload: uploadHandler,
+      onError: (error) => setUploadError(error.message),
+    }),
+    BannerNode,
+  ]
+
   const editor = useEditor({
     immediatelyRender: false,
     shouldRerenderOnTransaction: false,
@@ -256,94 +337,7 @@ const ArticleEditor = ({ onSave, readOnly, article }: ArticleEditorProps) => {
         class: "simple-editor",
       },
     },
-    extensions: [
-      ArticleDocument,
-      StarterKit.configure({
-        document: false, // Disable default document to use our ArticleDocument
-        horizontalRule: false,
-        heading: false,
-        link: {
-          openOnClick: false,
-          enableClickSelection: true,
-        },
-        trailingNode: {
-          node: "paragraph",
-        },
-      }),
-      Heading.configure({
-        levels: [1, 2, 3, 4, 5, 6],
-      }),
-      Placeholder.configure({
-        showOnlyCurrent: false,
-        includeChildren: true,
-        placeholder: ({ node, editor }): string => {
-          let parentNode: typeof node | null = null
-
-          editor.state.doc.descendants((n: ProseMirrorNode) => {
-            n.forEach((childNode: ProseMirrorNode) => {
-              if (childNode === node) {
-                parentNode = n
-              }
-            })
-            if (parentNode) {
-              return false
-            }
-            return undefined
-          })
-
-          if (parentNode) {
-            const parentExtension = editor.extensionManager.extensions.find(
-              (ext) => ext.name === parentNode!.type.name,
-            )
-
-            if (
-              parentExtension &&
-              "config" in parentExtension &&
-              parentExtension.config &&
-              typeof (parentExtension.config as ExtendedNodeConfig)
-                .getPlaceholders === "function"
-            ) {
-              const placeholder = (
-                parentExtension.config as ExtendedNodeConfig
-              ).getPlaceholders(node)
-              if (placeholder) {
-                return placeholder
-              }
-            }
-          }
-
-          if (node.type.name === "heading") {
-            return "Add a heading"
-          }
-          return "Add some text"
-        },
-      }),
-      HorizontalRule,
-      LearningResourceURLHandler,
-      LearningResourceNode,
-      TextAlign.configure({ types: ["heading", "paragraph"] }),
-      TaskList,
-      TaskItem.configure({ nested: true }),
-      Highlight.configure({ multicolor: true }),
-      TiptapTypography,
-      Superscript,
-      Subscript,
-      Selection,
-      Image,
-      MediaEmbedNode,
-      DividerNode,
-      ArticleByLineInfoBarNode,
-      ImageWithCaptionNode,
-      MediaEmbedURLHandler,
-      ImageNode.configure({
-        accept: "image/*",
-        maxSize: MAX_FILE_SIZE,
-        limit: 3,
-        upload: uploadHandler,
-        onError: (error) => setUploadError(error.message),
-      }),
-      BannerNode,
-    ],
+    extensions,
   })
 
   useEffect(() => {
@@ -466,7 +460,11 @@ const ArticleEditor = ({ onSave, readOnly, article }: ArticleEditorProps) => {
               </StyledAlert>
             ) : null}
             <LearningResourceDrawer />
-            <TiptapEditor editor={editor} readOnly={readOnly} fullWidth />
+            {readOnly ? (
+              <TipTapViewer content={content} extensions={extensions} />
+            ) : (
+              <TiptapEditor editor={editor} />
+            )}
           </EditorContext.Provider>
         </LearningResourceProvider>
       </ArticleProvider>