diff --git a/frontends/main/src/app-pages/Articles/ArticleDetailPage.tsx b/frontends/main/src/app-pages/Articles/ArticleDetailPage.tsx
index e8f73d53d8..950aeceba6 100644
--- a/frontends/main/src/app-pages/Articles/ArticleDetailPage.tsx
+++ b/frontends/main/src/app-pages/Articles/ArticleDetailPage.tsx
@@ -2,7 +2,13 @@
 
 import React from "react"
 import { useArticleDetail } from "api/hooks/articles"
-import { Container, LoadingSpinner, styled, Typography } from "ol-components"
+import {
+  Container,
+  LoadingSpinner,
+  styled,
+  Typography,
+  TiptapEditorContainer,
+} from "ol-components"
 import { ButtonLink } from "@mitodl/smoot-design"
 import { notFound } from "next/navigation"
 import { Permission } from "api/hooks/user"
@@ -24,14 +30,6 @@ const WrapperContainer = styled.div({
   paddingBottom: "10px",
 })
 
-const PreTag = styled.pre({
-  background: "#f6f6f6",
-  padding: "16px",
-  borderRadius: "8px",
-  fontSize: "14px",
-  overflowX: "auto",
-})
-
 export const ArticleDetailPage = ({ articleId }: { articleId: number }) => {
   const id = Number(articleId)
   const { data, isLoading } = useArticleDetail(id)
@@ -58,7 +56,11 @@ export const ArticleDetailPage = ({ articleId }: { articleId: number }) => {
             </ButtonLink>
           </ControlsContainer>
         </WrapperContainer>
-        <PreTag>{JSON.stringify(data.content, null, 2)}</PreTag>
+        <TiptapEditorContainer
+          data-testid="editor"
+          value={data.content}
+          readOnly
+        />
       </Page>
     </RestrictedRoute>
   )
diff --git a/frontends/main/src/app-pages/Articles/ArticleEditPage.test.tsx b/frontends/main/src/app-pages/Articles/ArticleEditPage.test.tsx
index 2f1bf9b013..e2d95495ab 100644
--- a/frontends/main/src/app-pages/Articles/ArticleEditPage.test.tsx
+++ b/frontends/main/src/app-pages/Articles/ArticleEditPage.test.tsx
@@ -24,7 +24,15 @@ describe("ArticleEditPage", () => {
     const article = factories.articles.article({
       id: 42,
       title: "Existing Title",
-      content: { id: 1, content: "Existing content" },
+      content: {
+        type: "doc",
+        content: [
+          {
+            type: "paragraph",
+            content: [{ type: "text", text: "Existing Title" }],
+          },
+        ],
+      },
     })
     setMockResponse.get(urls.articles.details(article.id), article)
 
@@ -45,7 +53,15 @@ describe("ArticleEditPage", () => {
     const article = factories.articles.article({
       id: 123,
       title: "Existing Title",
-      content: { id: 1, content: "Existing content" },
+      content: {
+        type: "doc",
+        content: [
+          {
+            type: "paragraph",
+            content: [{ type: "text", text: "Existing Title" }],
+          },
+        ],
+      },
     })
     setMockResponse.get(urls.articles.details(article.id), article)
 
@@ -77,7 +93,15 @@ describe("ArticleEditPage", () => {
     const article = factories.articles.article({
       id: 7,
       title: "Old Title",
-      content: { id: 1, content: "Bad content" },
+      content: {
+        type: "doc",
+        content: [
+          {
+            type: "paragraph",
+            content: [{ type: "text", text: "Existing Title" }],
+          },
+        ],
+      },
     })
     setMockResponse.get(urls.articles.details(article.id), article)
 
diff --git a/frontends/main/src/app-pages/Articles/ArticleEditPage.tsx b/frontends/main/src/app-pages/Articles/ArticleEditPage.tsx
index dc4c8a5a35..22cb88b48b 100644
--- a/frontends/main/src/app-pages/Articles/ArticleEditPage.tsx
+++ b/frontends/main/src/app-pages/Articles/ArticleEditPage.tsx
@@ -1,11 +1,19 @@
 "use client"
-import React, { useEffect, useState, ChangeEvent } from "react"
+import React, { useEffect, useState } from "react"
 import { Permission } from "api/hooks/user"
 import { useRouter } from "next-nprogress-bar"
 import { useArticleDetail, useArticlePartialUpdate } from "api/hooks/articles"
-import { Button, Input, Alert } from "@mitodl/smoot-design"
+import { Button, Alert } from "@mitodl/smoot-design"
 import RestrictedRoute from "@/components/RestrictedRoute/RestrictedRoute"
-import { Container, Typography, styled, LoadingSpinner } from "ol-components"
+import {
+  Container,
+  Typography,
+  styled,
+  LoadingSpinner,
+  TiptapEditorContainer,
+  JSONContent,
+} from "ol-components"
+
 import { notFound } from "next/navigation"
 import { articlesView } from "@/common/urls"
 
@@ -19,11 +27,6 @@ const ClientContainer = styled.div({
   margin: "10px 0",
 })
 
-const TitleInput = styled(Input)({
-  width: "100%",
-  margin: "10px 0",
-})
-
 const ArticleEditPage = ({ articleId }: { articleId: string }) => {
   const router = useRouter()
 
@@ -31,8 +34,10 @@ const ArticleEditPage = ({ articleId }: { articleId: string }) => {
   const { data: article, isLoading } = useArticleDetail(id)
 
   const [title, setTitle] = useState<string>("")
-  const [text, setText] = useState("")
-  const [json, setJson] = useState({})
+  const [json, setJson] = useState<JSONContent>({
+    type: "doc",
+    content: [{ type: "paragraph", content: [] }],
+  })
   const [alertText, setAlertText] = useState("")
 
   const { mutate: updateArticle, isPending } = useArticlePartialUpdate()
@@ -57,7 +62,6 @@ const ArticleEditPage = ({ articleId }: { articleId: string }) => {
   useEffect(() => {
     if (article && !title) {
       setTitle(article.title)
-      setText(article.content ? JSON.stringify(article.content, null, 2) : "")
       setJson(article.content)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -70,20 +74,13 @@ const ArticleEditPage = ({ articleId }: { articleId: string }) => {
     return notFound()
   }
 
-  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
-    const value = e.target.value
-    setText(value)
-
-    try {
-      const parsed = JSON.parse(value)
-      setJson(parsed)
-    } catch {
-      setJson({})
-    }
+  const handleChange = (json: object) => {
+    setJson(json)
   }
+
   return (
     <RestrictedRoute requires={Permission.ArticleEditor}>
-      <Container className="article-wrapper">
+      <Container>
         <Typography variant="h3" component="h1">
           Edit Article
         </Typography>
@@ -99,25 +96,17 @@ const ArticleEditPage = ({ articleId }: { articleId: string }) => {
             </Typography>
           </Alert>
         )}
-        <TitleInput
-          type="text"
-          value={title}
-          onChange={(e) => {
-            console.log("Title input changed:", e.target.value)
-            setTitle(e.target.value)
-            setAlertText("")
-          }}
-          placeholder="Enter article title"
-          className="input-field"
-        />
-
-        <ClientContainer className="editor-box">
-          <textarea
+
+        <ClientContainer>
+          <TiptapEditorContainer
             data-testid="editor"
-            value={text}
+            value={json}
             onChange={handleChange}
-            placeholder="Type or paste JSON here..."
-            style={{ width: "100%", height: 150 }}
+            title={title}
+            setTitle={(e) => {
+              setTitle(e.target.value)
+              setAlertText("")
+            }}
           />
         </ClientContainer>
 
diff --git a/frontends/main/src/app-pages/Articles/ArticleNewPage.tsx b/frontends/main/src/app-pages/Articles/ArticleNewPage.tsx
index 5bf743af7e..dabe0cae81 100644
--- a/frontends/main/src/app-pages/Articles/ArticleNewPage.tsx
+++ b/frontends/main/src/app-pages/Articles/ArticleNewPage.tsx
@@ -1,11 +1,17 @@
 "use client"
-import React, { useState, ChangeEvent } from "react"
+import React, { useState } from "react"
 import { Permission } from "api/hooks/user"
 import { useRouter } from "next-nprogress-bar"
 import { useArticleCreate } from "api/hooks/articles"
-import { Button, Input, Alert } from "@mitodl/smoot-design"
+import { Button, Alert } from "@mitodl/smoot-design"
 import RestrictedRoute from "@/components/RestrictedRoute/RestrictedRoute"
-import { Container, Typography, styled } from "ol-components"
+import {
+  TiptapEditorContainer,
+  Container,
+  Typography,
+  styled,
+  JSONContent,
+} from "ol-components"
 import { articlesView } from "@/common/urls"
 
 const SaveButton = styled.div({
@@ -18,17 +24,14 @@ const ClientContainer = styled.div({
   margin: "10px 0",
 })
 
-const TitleInput = styled(Input)({
-  width: "100%",
-  margin: "10px 0",
-})
-
 const ArticleNewPage: React.FC = () => {
   const router = useRouter()
 
   const [title, setTitle] = React.useState<string>("")
-  const [text, setText] = useState("")
-  const [json, setJson] = useState({})
+  const [json, setJson] = useState<JSONContent>({
+    type: "doc",
+    content: [{ type: "paragraph", content: [] }],
+  })
   const [alertText, setAlertText] = React.useState("")
 
   const { mutate: createArticle, isPending } = useArticleCreate()
@@ -57,20 +60,13 @@ const ArticleNewPage: React.FC = () => {
       },
     )
   }
-  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
-    const value = e.target.value
-    setText(value)
-
-    try {
-      const parsed = JSON.parse(value)
-      setJson(parsed)
-    } catch {
-      setJson({})
-    }
+  const handleChange = (json: object) => {
+    setJson(json)
   }
+
   return (
     <RestrictedRoute requires={Permission.ArticleEditor}>
-      <Container className="article-wrapper">
+      <Container>
         <h1>Write Article</h1>
         {alertText && (
           <Alert
@@ -84,27 +80,19 @@ const ArticleNewPage: React.FC = () => {
             </Typography>
           </Alert>
         )}
-        <TitleInput
-          type="text"
-          value={title}
-          onChange={(e) => {
-            setTitle(e.target.value)
-            setAlertText("")
-          }}
-          placeholder="Enter article title"
-          className="input-field"
-        />
 
-        <ClientContainer className="editor-box">
-          <textarea
+        <ClientContainer>
+          <TiptapEditorContainer
             data-testid="editor"
-            value={text}
+            value={json}
+            title={title}
+            setTitle={(e) => {
+              setTitle(e.target.value)
+              setAlertText("")
+            }}
             onChange={handleChange}
-            placeholder="Type or paste JSON here..."
-            style={{ width: "100%", height: 150 }}
           />
         </ClientContainer>
-
         <SaveButton>
           <Button
             variant="primary"
diff --git a/frontends/ol-components/src/components/TiptapEditor/EditorContainer.tsx b/frontends/ol-components/src/components/TiptapEditor/EditorContainer.tsx
new file mode 100644
index 0000000000..0b106b4350
--- /dev/null
+++ b/frontends/ol-components/src/components/TiptapEditor/EditorContainer.tsx
@@ -0,0 +1,154 @@
+"use client"
+
+// Based on ./components/tiptap-templates/simple/simple-editor.tsx
+
+import React, { useRef, useEffect, ChangeEventHandler } from "react"
+import { EditorContext, useEditor } from "@tiptap/react"
+
+// --- Tiptap Core Extensions ---
+import { StarterKit } from "@tiptap/starter-kit"
+import { TaskItem, TaskList } from "@tiptap/extension-list"
+
+import { Image } from "@tiptap/extension-image"
+import { TextAlign } from "@tiptap/extension-text-align"
+import { Typography } from "@tiptap/extension-typography"
+import { Highlight } from "@tiptap/extension-highlight"
+import { Subscript } from "@tiptap/extension-subscript"
+import { Superscript } from "@tiptap/extension-superscript"
+import { Input } from "@mitodl/smoot-design"
+
+import styled from "@emotion/styled"
+
+import { Selection } from "@tiptap/extensions"
+
+// --- UI Primitives ---
+import { Toolbar } from "./components/tiptap-ui-primitive/toolbar"
+
+import TiptapEditor, { MainToolbarContent } from "./TiptapEditor"
+
+// --- Tiptap Node ---
+import { ImageUploadNode } from "./components/tiptap-node/image-upload-node/image-upload-node-extension"
+import { HorizontalRule } from "./components/tiptap-node/horizontal-rule-node/horizontal-rule-node-extension"
+
+import "./components/tiptap-node/blockquote-node/blockquote-node.scss"
+import "./components/tiptap-node/code-block-node/code-block-node.scss"
+import "./components/tiptap-node/horizontal-rule-node/horizontal-rule-node.scss"
+import "./components/tiptap-node/list-node/list-node.scss"
+import "./components/tiptap-node/image-node/image-node.scss"
+import "./components/tiptap-node/heading-node/heading-node.scss"
+import "./components/tiptap-node/paragraph-node/paragraph-node.scss"
+
+// --- Lib ---
+import { handleImageUpload, MAX_FILE_SIZE } from "./lib/tiptap-utils"
+
+// --- Styles ---
+import "./styles/_keyframe-animations.scss"
+import "./styles/_variables.scss"
+import "./components/tiptap-templates/simple/simple-editor.scss"
+
+const TitleInput = styled(Input)({
+  width: "100%",
+  margin: "10px 0",
+})
+
+interface SimpleEditorProps {
+  value?: object
+  onChange?: (json: object) => void
+  readOnly?: boolean
+  title?: string
+  setTitle?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>
+  "data-testid"?: string
+}
+export default function SimpleEditor({
+  value,
+  onChange,
+  readOnly,
+  setTitle,
+  title,
+  "data-testid": testId,
+}: SimpleEditorProps) {
+  const toolbarRef = useRef<HTMLDivElement>(null)
+
+  const editor = useEditor({
+    immediatelyRender: false,
+    shouldRerenderOnTransaction: false,
+    content: value || {
+      type: "doc",
+      content: [{ type: "paragraph", content: [] }],
+    },
+    editable: !readOnly,
+    onUpdate: ({ editor }) => {
+      if (!readOnly) {
+        const json = editor.getJSON()
+        onChange?.(json)
+      }
+    },
+    editorProps: {
+      attributes: {
+        autocomplete: "off",
+        autocorrect: "off",
+        autocapitalize: "off",
+        "aria-label": "Main content area, start typing to enter text.",
+        class: "simple-editor",
+      },
+    },
+    extensions: [
+      StarterKit.configure({
+        horizontalRule: false,
+        link: {
+          openOnClick: false,
+          enableClickSelection: true,
+        },
+      }),
+      HorizontalRule,
+      TextAlign.configure({ types: ["heading", "paragraph"] }),
+      TaskList,
+      TaskItem.configure({ nested: true }),
+      Highlight.configure({ multicolor: true }),
+      Typography,
+      Superscript,
+      Subscript,
+      Selection,
+      Image,
+      ImageUploadNode.configure({
+        accept: "image/*",
+        maxSize: MAX_FILE_SIZE,
+        limit: 3,
+        upload: handleImageUpload,
+        onError: (error) => console.error("Upload failed:", error),
+      }),
+    ],
+  })
+
+  // 👇 Important: update content when fetched JSON changes
+  useEffect(() => {
+    if (editor && value) {
+      editor.commands.setContent(value)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor])
+
+  return (
+    <div className="simple-editor-wrapper" data-testid={testId}>
+      <EditorContext.Provider value={{ editor }}>
+        {!readOnly && (
+          <Toolbar ref={toolbarRef}>
+            <MainToolbarContent />
+          </Toolbar>
+        )}
+
+        {!readOnly && (
+          <TitleInput
+            type="text"
+            value={title}
+            onChange={setTitle}
+            placeholder="Enter article title"
+            className="input-field"
+          />
+        )}
+
+        <TiptapEditor editor={editor} readOnly={readOnly} />
+      </EditorContext.Provider>
+    </div>
+  )
+}
diff --git a/frontends/ol-components/src/components/TiptapEditor/TiptapEditor.tsx b/frontends/ol-components/src/components/TiptapEditor/TiptapEditor.tsx
index a45ee5d91d..9b0220ea83 100644
--- a/frontends/ol-components/src/components/TiptapEditor/TiptapEditor.tsx
+++ b/frontends/ol-components/src/components/TiptapEditor/TiptapEditor.tsx
@@ -2,30 +2,19 @@
 
 // Based on ./components/tiptap-templates/simple/simple-editor.tsx
 
-import React, { useRef } from "react"
-import { EditorContent, EditorContext, useEditor } from "@tiptap/react"
-
-// --- Tiptap Core Extensions ---
-import { StarterKit } from "@tiptap/starter-kit"
-import { TaskItem, TaskList } from "@tiptap/extension-list"
-import { TextAlign } from "@tiptap/extension-text-align"
-import { Typography } from "@tiptap/extension-typography"
-import { Highlight } from "@tiptap/extension-highlight"
-import { Subscript } from "@tiptap/extension-subscript"
-import { Superscript } from "@tiptap/extension-superscript"
-import { Selection } from "@tiptap/extensions"
+import React from "react"
+import { EditorContent } from "@tiptap/react"
+
+import { ImageUploadButton } from "./components/tiptap-ui/image-upload-button"
 
 // --- UI Primitives ---
 import { Spacer } from "./components/tiptap-ui-primitive/spacer"
 import {
-  Toolbar,
   ToolbarGroup,
   ToolbarSeparator,
 } from "./components/tiptap-ui-primitive/toolbar"
 
 // --- Tiptap Node ---
-import { ImageUploadNode } from "./components/tiptap-node/image-upload-node/image-upload-node-extension"
-import { HorizontalRule } from "./components/tiptap-node/horizontal-rule-node/horizontal-rule-node-extension"
 import "./components/tiptap-node/blockquote-node/blockquote-node.scss"
 import "./components/tiptap-node/code-block-node/code-block-node.scss"
 import "./components/tiptap-node/horizontal-rule-node/horizontal-rule-node.scss"
@@ -45,15 +34,12 @@ import { MarkButton } from "./components/tiptap-ui/mark-button"
 import { TextAlignButton } from "./components/tiptap-ui/text-align-button"
 import { UndoRedoButton } from "./components/tiptap-ui/undo-redo-button"
 
-// --- Lib ---
-import { handleImageUpload, MAX_FILE_SIZE } from "./lib/tiptap-utils"
-
 // --- Styles ---
 import "./styles/_keyframe-animations.scss"
 import "./styles/_variables.scss"
 import "./components/tiptap-templates/simple/simple-editor.scss"
 
-const MainToolbarContent = () => {
+export const MainToolbarContent = () => {
   return (
     <>
       <Spacer />
@@ -100,75 +86,27 @@ const MainToolbarContent = () => {
         <TextAlignButton align="justify" />
       </ToolbarGroup>
 
+      <ToolbarGroup>
+        <ImageUploadButton text="Add" />
+      </ToolbarGroup>
       <Spacer />
     </>
   )
 }
 
-export default function SimpleEditor() {
-  const toolbarRef = useRef<HTMLDivElement>(null)
-
-  const editor = useEditor({
-    immediatelyRender: false,
-    shouldRerenderOnTransaction: false,
-    editorProps: {
-      attributes: {
-        autocomplete: "off",
-        autocorrect: "off",
-        autocapitalize: "off",
-        "aria-label": "Main content area, start typing to enter text.",
-        class: "simple-editor",
-      },
-    },
-    extensions: [
-      StarterKit.configure({
-        horizontalRule: false,
-        link: {
-          openOnClick: false,
-          enableClickSelection: true,
-        },
-      }),
-      HorizontalRule,
-      TextAlign.configure({ types: ["heading", "paragraph"] }),
-      TaskList,
-      TaskItem.configure({ nested: true }),
-      Highlight.configure({ multicolor: true }),
-      Typography,
-      Superscript,
-      Subscript,
-      Selection,
-      ImageUploadNode.configure({
-        accept: "image/*",
-        maxSize: MAX_FILE_SIZE,
-        limit: 3,
-        upload: handleImageUpload,
-        onError: (error) => console.error("Upload failed:", error),
-      }),
-    ],
-    content: {
-      type: "doc",
-      content: [
-        {
-          type: "paragraph",
-          content: [],
-        },
-      ],
-    },
-  })
-
+interface SimpleEditorProps {
+  value?: object
+  onChange?: (json: object) => void
+  readOnly?: boolean
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  editor?: any
+}
+export default function SimpleEditor({ readOnly, editor }: SimpleEditorProps) {
   return (
-    <div className="simple-editor-wrapper">
-      <EditorContext.Provider value={{ editor }}>
-        <Toolbar ref={toolbarRef}>
-          <MainToolbarContent />
-        </Toolbar>
-
-        <EditorContent
-          editor={editor}
-          role="presentation"
-          className="simple-editor-content"
-        />
-      </EditorContext.Provider>
-    </div>
+    <EditorContent
+      editor={editor}
+      role="presentation"
+      className={`simple-editor-content ${!readOnly ? "simple-editor-content-background" : ""}`}
+    />
   )
 }
diff --git a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/image-upload-node/image-upload-node.tsx b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/image-upload-node/image-upload-node.tsx
index c5b5ead26d..75179eb7bb 100644
--- a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/image-upload-node/image-upload-node.tsx
+++ b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/image-upload-node/image-upload-node.tsx
@@ -6,7 +6,11 @@ import { NodeViewWrapper } from "@tiptap/react"
 import { Button } from "../../tiptap-ui-primitive/button"
 import { CloseIcon } from "../../tiptap-icons/close-icon"
 import "./image-upload-node.scss"
-import { focusNextNode, isValidPosition } from "../../../lib/tiptap-utils"
+import {
+  focusNextNode,
+  isValidPosition,
+  generateUUID,
+} from "../../../lib/tiptap-utils"
 
 export interface FileItem {
   /**
@@ -95,7 +99,7 @@ function useFileUpload(options: UploadOptions) {
     }
 
     const abortController = new AbortController()
-    const fileId = crypto.randomUUID()
+    const fileId = generateUUID()
 
     const newFileItem: FileItem = {
       id: fileId,
@@ -471,12 +475,16 @@ export const ImageUploadNode: React.FC<NodeViewProps> = (props) => {
           }
         })
 
-        props.editor
-          .chain()
-          .focus()
-          .deleteRange({ from: pos, to: pos + props.node.nodeSize })
-          .insertContentAt(pos, imageNodes)
-          .run()
+        const chain = props.editor.chain().focus()
+
+        // Remove the upload placeholder node
+        chain.deleteRange({ from: pos, to: pos + props.node.nodeSize })
+
+        // ✅ Insert each image node one by one
+        imageNodes.forEach((node, index) => {
+          chain.insertContentAt(pos + index, node)
+        })
+        chain.run()
 
         focusNextNode(props.editor)
       }
diff --git a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-templates/simple/simple-editor.scss b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-templates/simple/simple-editor.scss
index 8faf836440..a32eacc49f 100644
--- a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-templates/simple/simple-editor.scss
+++ b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-templates/simple/simple-editor.scss
@@ -29,7 +29,6 @@ body,
 #root,
 #app {
   height: 100%;
-  background-color: var(--tt-bg-color);
 }
 
 ::-webkit-scrollbar {
@@ -55,9 +54,9 @@ body,
 }
 
 .simple-editor-wrapper {
+  overflow: auto;
   width: 100vw;
   height: 100vh;
-  overflow: auto;
 }
 
 .simple-editor-content {
@@ -68,6 +67,11 @@ body,
   display: flex;
   flex-direction: column;
   flex: 1;
+  margin-top: 10px;
+}
+
+.simple-editor-content-background {
+  background-color: white;
 }
 
 .simple-editor-content .tiptap.ProseMirror.simple-editor {
diff --git a/frontends/ol-components/src/components/TiptapEditor/lib/tiptap-utils.ts b/frontends/ol-components/src/components/TiptapEditor/lib/tiptap-utils.ts
index 2c0f1bb813..4181ff0bae 100644
--- a/frontends/ol-components/src/components/TiptapEditor/lib/tiptap-utils.ts
+++ b/frontends/ol-components/src/components/TiptapEditor/lib/tiptap-utils.ts
@@ -379,7 +379,7 @@ export const handleImageUpload = async (
     onProgress?.({ progress })
   }
 
-  return "/images/tiptap-ui-placeholder-image.jpg"
+  return "/mit-dome-2.jpg"
 }
 
 type ProtocolOptions = {
@@ -553,3 +553,16 @@ export function selectCurrentBlockContent(editor: Editor) {
     }
   }
 }
+
+export function generateUUID(): string {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
+    return crypto.randomUUID()
+  }
+
+  // Fallback: UUIDv4 using random numbers
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r = (Math.random() * 16) | 0
+    const v = c === "x" ? r : (r & 0x3) | 0x8
+    return v.toString(16)
+  })
+}
diff --git a/frontends/ol-components/src/index.ts b/frontends/ol-components/src/index.ts
index a04bded224..8528e62f4c 100644
--- a/frontends/ol-components/src/index.ts
+++ b/frontends/ol-components/src/index.ts
@@ -172,6 +172,8 @@ export * from "./components/ThemeProvider/MITLearnGlobalStyles"
 export { AppRouterCacheProvider as NextJsAppRouterCacheProvider } from "@mui/material-nextjs/v15-appRouter"
 
 export { default as TiptapEditor } from "./components/TiptapEditor/TiptapEditor"
+export { default as TiptapEditorContainer } from "./components/TiptapEditor/EditorContainer"
+export type { JSONContent } from "@tiptap/core"
 
 // /**
 //  * @deprecated Please use component from @mitodl/smoot-design instead