From fa9d59e6de5ae54e3c8452a8060f88b2bf4c9013 Mon Sep 17 00:00:00 2001
From: RonanHevenor <spacechickenrobot@gmail.com>
Date: Sun, 5 Apr 2026 13:52:42 -0400
Subject: [PATCH] Fix usages of rich text headlines across UI components (#91)

Includes missing migration data for articles revisions table.
---
 add-imports.mjs                               | 18 ++++
 .../[section]/[year]/[month]/[slug]/page.tsx  | 15 +--
 app/(frontend)/sitemap-news.xml/route.ts      |  3 +-
 app/(frontend)/staff/[slug]/page.tsx          |  3 +-
 app/api/search/route.ts                       |  2 +-
 app/api/search/spellcheck/route.ts            |  3 +-
 collections/Articles.ts                       | 44 ++++++++-
 components/Archive/ArchiveTimeMachinePage.tsx |  2 +-
 components/Article/ArticleHeader.tsx          |  3 +-
 components/Article/ArticleRecommendations.tsx |  3 +-
 .../Article/Photofeature/ArticleHeader.tsx    |  3 +-
 components/Dashboard/Todos/TodoRow.tsx        |  3 +-
 components/Features/FeaturesListPage.tsx      |  2 +-
 components/Features/FeaturesSectionPage.tsx   |  6 +-
 components/FrontPage/ArticleCard.tsx          |  2 +-
 components/FrontPage/ArticleListItem.tsx      |  2 +-
 components/FrontPage/CompactArticle.tsx       |  2 +-
 components/FrontPage/GridLayout.tsx           |  4 +-
 components/FrontPage/HorizontalSection.tsx    | 10 +-
 components/FrontPage/LeadArticle.tsx          |  2 +-
 components/FrontPage/OpinionCard.tsx          |  2 +-
 components/FrontPage/SenateCard.tsx           |  2 +-
 components/FrontPage/types.ts                 |  3 +
 components/Opinion/OpinionArticleHeader.tsx   |  3 +-
 components/Opinion/OpinionSectionPage.tsx     |  3 +-
 components/SearchOverlay.tsx                  |  2 +-
 components/SectionPage/index.tsx              |  2 +-
 fix-lint.mjs                                  | 40 ++++++++
 fix-more.mjs                                  | 73 ++++++++++++++
 fix-syntax.mjs                                | 28 ++++++
 fix-types.mjs                                 | 90 +++++++++++++++++
 ...260405_000000_migrate_title_to_richtext.ts | 98 +++++++++++++++++++
 migrations/index.ts                           |  6 ++
 payload-types.ts                              | 16 ++-
 scripts/seed-features.ts                      |  4 +-
 scripts/update-features-images.ts             |  5 +-
 test-lexical.mjs                              |  2 +
 utils/formatArticle.ts                        | 36 ++++++-
 38 files changed, 501 insertions(+), 46 deletions(-)
 create mode 100644 add-imports.mjs
 create mode 100644 fix-lint.mjs
 create mode 100644 fix-more.mjs
 create mode 100644 fix-syntax.mjs
 create mode 100644 fix-types.mjs
 create mode 100644 migrations/20260405_000000_migrate_title_to_richtext.ts
 create mode 100644 test-lexical.mjs

diff --git a/add-imports.mjs b/add-imports.mjs
new file mode 100644
index 0000000..952ed0b
--- /dev/null
+++ b/add-imports.mjs
@@ -0,0 +1,18 @@
+import fs from 'fs';
+
+function prependToFile(filePath, text) {
+  let content = fs.readFileSync(filePath, 'utf8');
+  if (!content.includes(text)) {
+    fs.writeFileSync(filePath, text + "\n" + content, 'utf8');
+  }
+}
+
+prependToFile('app/(frontend)/staff/[slug]/page.tsx', "import { extractTextFromLexical } from '@/utils/formatArticle';");
+prependToFile('components/Article/ArticleRecommendations.tsx', "import { extractTextFromLexical } from '@/utils/formatArticle';");
+prependToFile('components/Article/Photofeature/ArticleHeader.tsx', "import { renderLexicalHeadline } from '@/utils/formatArticle';");
+prependToFile('components/Dashboard/Todos/TodoRow.tsx', "import { renderLexicalHeadline } from '@/utils/formatArticle';");
+prependToFile('components/Opinion/OpinionSectionPage.tsx', "import { extractTextFromLexical } from '@/utils/formatArticle';");
+prependToFile('scripts/seed-features.ts', "import { extractTextFromLexical } from '../utils/formatArticle';");
+prependToFile('scripts/update-features-images.ts', "import { extractTextFromLexical } from '../utils/formatArticle';");
+
+console.log("Imports added");
\ No newline at end of file
diff --git a/app/(frontend)/[section]/[year]/[month]/[slug]/page.tsx b/app/(frontend)/[section]/[year]/[month]/[slug]/page.tsx
index 6a28a13..991c501 100644
--- a/app/(frontend)/[section]/[year]/[month]/[slug]/page.tsx
+++ b/app/(frontend)/[section]/[year]/[month]/[slug]/page.tsx
@@ -1,5 +1,6 @@
 import React, { cache } from 'react';
 import { notFound } from 'next/navigation';
+import { extractTextFromLexical } from '@/utils/formatArticle';
 import { headers } from 'next/headers';
 import { getPayload } from 'payload';
 import config from '@/payload.config';
@@ -182,21 +183,21 @@ export async function generateMetadata({ params }: Args): Promise<Metadata> {
   const sectionName = section.charAt(0).toUpperCase() + section.slice(1);
   const seo = await getSeo();
   const description = article.subdeck || fillSeoTemplate(seo.templates.articleFallbackDescription, {
-    title: article.title,
+    title: extractTextFromLexical(article.title),
     section,
     sectionTitle: sectionName,
     siteName: seo.siteIdentity.siteName,
   });
 
   return {
-    title: `${sectionName} | ${article.title}`,
+    title: `${sectionName} | ${extractTextFromLexical(article.title)}`,
     description,
     authors: authors.map((name) => ({ name })),
     alternates: {
       canonical: canonicalPath,
     },
     openGraph: {
-      title: article.title,
+      title: typeof article.title === 'object' ? extractTextFromLexical(article.title) : article.title,
       description,
       type: 'article',
       url: canonicalPath,
@@ -210,7 +211,7 @@ export async function generateMetadata({ params }: Args): Promise<Metadata> {
     },
     twitter: {
       card: imageUrl ? 'summary_large_image' : 'summary',
-      title: article.title,
+      title: extractTextFromLexical(article.title),
       description,
       ...(imageUrl && { images: [imageUrl] }),
     },
@@ -275,7 +276,7 @@ export default async function ArticlePage({ params }: Args) {
   const jsonLd = {
     '@context': 'https://schema.org',
     '@type': 'NewsArticle',
-    headline: article.title,
+    headline: extractTextFromLexical(article.title),
     ...(article.subdeck && { description: article.subdeck }),
     ...(image?.url && {
       image: [image.url],
@@ -321,11 +322,11 @@ export default async function ArticlePage({ params }: Args) {
         publishedDate={article.publishedDate || article.createdAt}
         section={article.section}
         slug={article.slug}
-        title={article.title}
+        title={extractTextFromLexical(article.title)}
         wordCount={wordCount}
         isStaff={isStaff}
       />
-      <ArticleScrollBar title={article.title} section={article.section} />
+      <ArticleScrollBar title={extractTextFromLexical(article.title)} section={article.section} />
       <LayoutComponent article={article as unknown as Article} content={cleanContent} />
       {canEdit && <InlineEditor articleId={article.id} />}
     </>
diff --git a/app/(frontend)/sitemap-news.xml/route.ts b/app/(frontend)/sitemap-news.xml/route.ts
index 8e735be..343d0f8 100644
--- a/app/(frontend)/sitemap-news.xml/route.ts
+++ b/app/(frontend)/sitemap-news.xml/route.ts
@@ -1,3 +1,4 @@
+import { extractTextFromLexical } from '@/utils/formatArticle';
 import { getPayload } from 'payload';
 import config from '@/payload.config';
 import { getSeo } from '@/lib/getSeo';
@@ -36,7 +37,7 @@ export async function GET() {
     .map((doc) => {
       const url = `${siteUrl}${getArticleUrl(doc)}`;
       const pubDate = new Date(doc.publishedDate || doc.createdAt).toISOString();
-      const title = doc.title.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+      const title = (typeof doc.title === 'string' ? doc.title : extractTextFromLexical(doc.title)).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
       return `  <url>
     <loc>${url}</loc>
     <news:news>
diff --git a/app/(frontend)/staff/[slug]/page.tsx b/app/(frontend)/staff/[slug]/page.tsx
index 0b838c8..e91c0ff 100644
--- a/app/(frontend)/staff/[slug]/page.tsx
+++ b/app/(frontend)/staff/[slug]/page.tsx
@@ -1,3 +1,4 @@
+import { extractTextFromLexical } from '@/utils/formatArticle';
 import React, { cache } from 'react';
 import type { Metadata } from 'next';
 import { getPayload } from 'payload';
@@ -61,7 +62,7 @@ const toPublicStaffUser = (user: PublicStaffUserSource): StaffProfileUser => ({
 
 const toPublicStaffArticle = (article: PublicStaffArticleSource): StaffProfileArticle => ({
   id: article.id,
-  title: article.title,
+  title: extractTextFromLexical(article.title),
   slug: article.slug,
   section: article.section,
   publishedDate: article.publishedDate,
diff --git a/app/api/search/route.ts b/app/api/search/route.ts
index 7a9ec7d..fc4988c 100644
--- a/app/api/search/route.ts
+++ b/app/api/search/route.ts
@@ -83,7 +83,7 @@ async function searchPayload(queryFormsLower: string[], page: number, pageSize:
   });
 
   const articles = result.docs
-    .map((doc) => formatArticle(doc as PayloadSearchArticle, { absoluteDate: true }))
+    .map((doc) => formatArticle(doc as unknown as Parameters<typeof formatArticle>[0], { absoluteDate: true }))
     .filter((a): a is Article => a !== null);
 
   return {
diff --git a/app/api/search/spellcheck/route.ts b/app/api/search/spellcheck/route.ts
index aba825b..e1bf1cc 100644
--- a/app/api/search/spellcheck/route.ts
+++ b/app/api/search/spellcheck/route.ts
@@ -1,4 +1,5 @@
 import { NextRequest } from "next/server";
+import { extractTextFromLexical } from '@/utils/formatArticle';
 import { getPayload } from "payload";
 import config from "@/payload.config";
 import { Pool } from "pg";
@@ -82,7 +83,7 @@ async function getCorpus(): Promise<Map<string, number>> {
       },
     });
     for (const doc of docs) {
-      for (const w of extractWords(doc.title)) {
+      for (const w of extractWords(typeof doc.title === 'string' ? doc.title : extractTextFromLexical(doc.title))) {
         corpus.set(w, (corpus.get(w) || 0) + 1);
       }
     }
diff --git a/collections/Articles.ts b/collections/Articles.ts
index ea029d9..9a2bc9a 100644
--- a/collections/Articles.ts
+++ b/collections/Articles.ts
@@ -1,4 +1,5 @@
 import type { CollectionConfig } from 'payload'
+import { lexicalEditor, BoldFeature, ItalicFeature } from '@payloadcms/richtext-lexical'
 import { getPostHogClient } from '../lib/posthog-server'
 
 const Articles: CollectionConfig = {
@@ -48,12 +49,26 @@ const Articles: CollectionConfig = {
 
         if (isNowPublished && !wasPublished) {
           const posthog = getPostHogClient()
+          
+          let plainTitle = '';
+          if (doc.title && typeof doc.title === 'object' && doc.title.root) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const extractText = (node: any): string => {
+              if (node.type === 'text') return node.text || '';
+              if (node.children) return node.children.map(extractText).join('');
+              return '';
+            };
+            plainTitle = extractText(doc.title.root);
+          } else if (typeof doc.title === 'string') {
+            plainTitle = doc.title;
+          }
+
           posthog?.capture({
             distinctId: String(req.user?.id || 'unknown'),
             event: 'article_published',
             properties: {
               article_id: doc.id,
-              article_title: doc.title,
+              article_title: plainTitle,
               article_section: doc.section,
               article_slug: doc.slug,
             },
@@ -93,7 +108,20 @@ const Articles: CollectionConfig = {
         }
 
         // Auto-generate slug from title if not set, or sanitize existing slug
-        const rawSlug = data.slug || data.title || ''
+        let plainTitle = '';
+        if (data.title && typeof data.title === 'object' && data.title.root) {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          const extractText = (node: any): string => {
+            if (node.type === 'text') return node.text || '';
+            if (node.children) return node.children.map(extractText).join('');
+            return '';
+          };
+          plainTitle = extractText(data.title.root);
+        } else if (typeof data.title === 'string') {
+          plainTitle = data.title;
+        }
+
+        const rawSlug = data.slug || plainTitle || ''
         if (rawSlug) {
           data.slug = rawSlug
             .toLowerCase()
@@ -120,7 +148,17 @@ const Articles: CollectionConfig = {
       ],
       required: true,
     },
-    { name: 'title', type: 'text', required: true },
+    {
+      name: 'title',
+      type: 'richText',
+      required: true,
+      editor: lexicalEditor({
+        features: ({ defaultFeatures }) => [
+          BoldFeature(),
+          ItalicFeature(),
+        ],
+      }),
+    },
     {
       name: 'kicker',
       type: 'text',
diff --git a/components/Archive/ArchiveTimeMachinePage.tsx b/components/Archive/ArchiveTimeMachinePage.tsx
index 8121ef6..dedb44b 100644
--- a/components/Archive/ArchiveTimeMachinePage.tsx
+++ b/components/Archive/ArchiveTimeMachinePage.tsx
@@ -181,7 +181,7 @@ function ArchiveArticleRow({ article }: { article: Article }) {
             article.section === "opinion" ? "font-light" : "font-bold"
           } ${article.section === "sports" ? "font-normal tracking-[0.015em]" : ""} ${article.section === "features" ? "font-light" : ""}`}
         >
-          {article.title}
+          {article.richTitle || article.title}
         </h2>
         <Byline author={article.author} date={article.date} className="mt-2 block" />
         {article.excerpt && (
diff --git a/components/Article/ArticleHeader.tsx b/components/Article/ArticleHeader.tsx
index 9819889..72e1656 100644
--- a/components/Article/ArticleHeader.tsx
+++ b/components/Article/ArticleHeader.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { Article, Media, User } from '@/payload-types';
+import { renderLexicalHeadline } from '@/utils/formatArticle';
 import { ArticleByline } from './ArticleByline';
 
 type Props = {
@@ -24,7 +25,7 @@ export const ArticleHeader: React.FC<Props> = ({ article }) => {
             </span>
         )}
         <h1 data-ie-field="title" className={`font-bold text-[39px] md:text-[34px] lg:text-[42px] text-text-main leading-[1.05] tracking-[-0.02em] transition-colors font-copy ${article.section === "opinion" ? "font-light" : ""} ${article.section === "sports" ? "font-normal tracking-[0.015em]" : ""} ${article.section === "features" ? "font-light" : ""}`}>
-          {article.title}
+          {renderLexicalHeadline(article.title)}
         </h1>
         {article.subdeck && (
             <h2 data-ie-field="subdeck" className="font-meta text-xl md:text-2xl font-normal text-text-muted leading-snug transition-colors">
diff --git a/components/Article/ArticleRecommendations.tsx b/components/Article/ArticleRecommendations.tsx
index b154685..1ff30c2 100644
--- a/components/Article/ArticleRecommendations.tsx
+++ b/components/Article/ArticleRecommendations.tsx
@@ -1,3 +1,4 @@
+import { extractTextFromLexical } from '@/utils/formatArticle';
 import React from 'react';
 import Image from 'next/image';
 import { getPayload } from 'payload';
@@ -148,7 +149,7 @@ const toPublicRecommendationAuthor = (author: User): RecommendationAuthor => ({
 
 const toPublicRecommendationArticle = (article: Article): RecommendationArticle => ({
   id: article.id,
-  title: article.title,
+  title: extractTextFromLexical(article.title),
   slug: article.slug,
   subdeck: article.subdeck,
   section: article.section,
diff --git a/components/Article/Photofeature/ArticleHeader.tsx b/components/Article/Photofeature/ArticleHeader.tsx
index 96e4dcc..79c5f76 100644
--- a/components/Article/Photofeature/ArticleHeader.tsx
+++ b/components/Article/Photofeature/ArticleHeader.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { renderLexicalHeadline } from '@/utils/formatArticle';
 
 import React, { useState } from 'react';
 import Image from 'next/image';
@@ -102,7 +103,7 @@ export const ArticleHeader: React.FC<Props> = ({ article }) => {
           <div className="max-w-[90vw] w-full space-y-1">
             
             <h1 data-ie-field="title" className={`font-copy font-bold text-[43px] md:text-[38px] lg:text-[47px] text-white leading-[1.05] tracking-[-0.02em] drop-shadow-lg ${article.section === "opinion" ? "font-light" : ""} ${article.section === "sports" ? "font-normal tracking-[0.015em]" : ""} ${article.section === "features" ? "font-light" : ""} pointer-events-auto`}>
-              {article.title}
+              {renderLexicalHeadline(article.title)}
             </h1>
 
             {/* Author and Date */}
diff --git a/components/Dashboard/Todos/TodoRow.tsx b/components/Dashboard/Todos/TodoRow.tsx
index e8405e8..f461274 100644
--- a/components/Dashboard/Todos/TodoRow.tsx
+++ b/components/Dashboard/Todos/TodoRow.tsx
@@ -1,3 +1,4 @@
+import { renderLexicalHeadline } from '@/utils/formatArticle';
 import React from 'react'
 import Link from 'next/link'
 import type { Article, User } from '@/payload-types.ts'
@@ -20,7 +21,7 @@ export const TodoRow = ({ article }: { article: Article }) => {
       className={`todo-row ${isPublished ? 'published' : 'draft'}`}
     >
       <div className="todo-col-main">
-        <span className="todo-title">{article.title || 'Untitled'}</span>
+        <span className="todo-title">{renderLexicalHeadline(article.title) || 'Untitled'}</span>
         <span className="todo-meta">
            {article.section} • {article.authors?.map((a) => (a as User).firstName).join(', ')}
         </span>
diff --git a/components/Features/FeaturesListPage.tsx b/components/Features/FeaturesListPage.tsx
index c40f36f..a13c400 100644
--- a/components/Features/FeaturesListPage.tsx
+++ b/components/Features/FeaturesListPage.tsx
@@ -64,7 +64,7 @@ export default function FeaturesListPage({
             )}
             <div className="flex flex-col justify-center">
               <h2 className="font-copy font-medium leading-[1.15] text-[22px] text-text-main transition-colors group-hover:text-accent">
-                {article.title}
+                {article.richTitle || article.title}
               </h2>
               <Byline author={article.author} date={article.date} className="text-[13px]" />
               {article.excerpt && (
diff --git a/components/Features/FeaturesSectionPage.tsx b/components/Features/FeaturesSectionPage.tsx
index 074bfdf..791b495 100644
--- a/components/Features/FeaturesSectionPage.tsx
+++ b/components/Features/FeaturesSectionPage.tsx
@@ -78,7 +78,7 @@ function FeaturesCard({
         className="font-copy font-medium leading-[1.12] text-text-main transition-colors group-hover:text-accent"
         style={{ fontSize: large ? 34 : 20 }}
       >
-        {article.title}
+        {article.richTitle || article.title}
       </h3>
       <Byline
         author={article.author}
@@ -645,7 +645,7 @@ export default function FeaturesSectionPage({
                   className="font-copy font-medium leading-[1.12] text-text-main transition-colors group-hover:text-accent"
                   style={{ fontSize: 28 }}
                 >
-                  {wideArticle[0].title}
+                  {wideArticle[0].richTitle || wideArticle[0].title}
                 </h2>
                 <Byline author={wideArticle[0].author} date={wideArticle[0].date} variant="features" className="mt-2 text-[13px]" />
                 {wideArticle[0].excerpt && (
@@ -809,7 +809,7 @@ export default function FeaturesSectionPage({
                 </span>
               )}
               <h3 className="font-copy font-medium leading-[1.12] text-[28px] text-text-main transition-colors group-hover:text-accent">
-                {article.title}
+                {article.richTitle || article.title}
               </h3>
               <Byline author={article.author} variant="features" className="mt-2 text-[13px]" />
             </TransitionLink>
diff --git a/components/FrontPage/ArticleCard.tsx b/components/FrontPage/ArticleCard.tsx
index 03066f7..bfcfb27 100644
--- a/components/FrontPage/ArticleCard.tsx
+++ b/components/FrontPage/ArticleCard.tsx
@@ -69,7 +69,7 @@ export const ArticleCard = ({
           data-marauders-title
           className={`relative z-[30] font-bold leading-[1.12] tracking-[-0.01em] text-text-main transition-colors [overflow-wrap:anywhere] break-words font-copy ${article.section === "opinion" ? "font-light" : ""} ${titleClassName} ${article.section === "news" ? "text-[23px] md:text-[25px]" : ""} ${article.section === "sports" ? "font-normal tracking-[0.015em]" : ""} ${article.section === "features" ? "font-light text-[23px] md:text-[25px]" : ""}`}
         >
-          {article.title}
+          {article.richTitle || article.title}
         </h3>
         <Byline author={article.author} date={article.date} />
         {showExcerpt && article.excerpt && (
diff --git a/components/FrontPage/ArticleListItem.tsx b/components/FrontPage/ArticleListItem.tsx
index 553c89e..703b638 100644
--- a/components/FrontPage/ArticleListItem.tsx
+++ b/components/FrontPage/ArticleListItem.tsx
@@ -8,7 +8,7 @@ export const ArticleListItem = ({ article }: { article: Article }) => (
   <li className={`border-t border-rule py-3 first:border-t-0 first:pt-0${article.isFollytechnic ? ' follytechnic' : ''}`}>
     <TransitionLink href={getArticleUrl(article)} className="group block" data-header-anchor="text">
       <h4 className={`text-[22px] md:text-[24px] font-bold leading-[1.12] tracking-[-0.01em] text-text-main transition-colors font-copy ${article.section === "opinion" ? "font-light" : ""} ${article.section === "news" ? "text-[23px] md:text-[25px]" : ""} ${article.section === "sports" ? "font-normal tracking-[0.015em]" : ""} ${article.section === "features" ? "font-light text-[23px] md:text-[25px]" : ""}`}>
-        {article.title}
+        {article.richTitle || article.title}
       </h4>
       <Byline author={article.author} date={article.date} className="mt-1 block text-[10px] md:text-[10px]" />
     </TransitionLink>
diff --git a/components/FrontPage/CompactArticle.tsx b/components/FrontPage/CompactArticle.tsx
index 6ef45b4..a881071 100644
--- a/components/FrontPage/CompactArticle.tsx
+++ b/components/FrontPage/CompactArticle.tsx
@@ -7,7 +7,7 @@ import { getArticleUrl } from '@/utils/getArticleUrl';
 export const CompactArticle = ({ article }: { article: Article }) => (
     <Link href={getArticleUrl(article)} className={`flex flex-col group cursor-pointer h-full justify-start${article.isFollytechnic ? ' follytechnic' : ''}`}>
         <h3 className={`font-copy font-bold text-text-main mb-1 text-[16px] md:text-[18px] leading-tight transition-colors ${article.section === "news" ? "!text-[1.2em]" : ""} ${article.section === "sports" ? "font-normal tracking-[0.015em]" : ""} ${article.section === "features" ? "font-light text-[17px] md:text-[19px]" : ""}`}>
-            {article.title}
+            {article.richTitle || article.title}
         </h3>
         <Byline author={article.author} date={article.date} />
         <p className="font-meta text-text-main text-[13px] md:text-[14px] font-normal leading-[1.4] mb-2 transition-colors">
diff --git a/components/FrontPage/GridLayout.tsx b/components/FrontPage/GridLayout.tsx
index e6388b0..24e998f 100644
--- a/components/FrontPage/GridLayout.tsx
+++ b/components/FrontPage/GridLayout.tsx
@@ -52,7 +52,7 @@ function GridArticleCard({
         data-marauders-title
         className={`relative z-[30] font-copy font-bold leading-[1.08] tracking-[-0.015em] text-text-main transition-colors [overflow-wrap:anywhere] break-words ${titleSize} ${article.section === "news" ? "!text-[1.2em]" : ""} ${article.section === "sports" ? "font-normal tracking-[0.015em]" : ""} ${article.section === "features" ? "font-light" : ""} ${article.section === "opinion" ? "font-light" : ""}`}
       >
-        {article.title}
+        {article.richTitle || article.title}
       </h3>
       <Byline author={article.author} date={article.date} split={isLarge} />
       {article.excerpt && (
@@ -170,7 +170,7 @@ function MobileArticleCard({ article }: { article: Article }) {
         data-marauders-title
         className={`relative z-[30] font-copy font-bold leading-[1.08] tracking-[-0.015em] text-text-main transition-colors [overflow-wrap:anywhere] break-words text-[26px] ${article.section === "news" ? "!text-[1.2em]" : ""} ${article.section === "sports" ? "font-normal tracking-[0.015em]" : ""} ${article.section === "features" ? "font-light" : ""} ${article.section === "opinion" ? "font-light" : ""}`}
       >
-        {article.title}
+        {article.richTitle || article.title}
       </h3>
       <Byline author={article.author} date={article.date} />
       {article.excerpt && (
diff --git a/components/FrontPage/HorizontalSection.tsx b/components/FrontPage/HorizontalSection.tsx
index dcff261..c6ab2b2 100644
--- a/components/FrontPage/HorizontalSection.tsx
+++ b/components/FrontPage/HorizontalSection.tsx
@@ -63,7 +63,7 @@ export const LeadStory = ({
     <h3
       className={`font-copy font-bold leading-[0.97] tracking-[-0.02em] text-text-main transition-colors ${titleClassName} ${article.section === "news" ? "!text-[1.2em]" : ""} ${article.section === "sports" ? "font-normal tracking-[0.015em]" : ""} ${article.section === "features" ? "font-light text-[24px] md:text-[28px]" : ""}`}
     >
-      {article.title}
+      {article.richTitle || article.title}
     </h3>
     <Byline author={article.author} date={article.date} />
     {article.excerpt ? (
@@ -88,7 +88,7 @@ export const TextStory = ({
     <h3
       className={`font-copy font-bold leading-[1.04] tracking-[-0.015em] text-text-main transition-colors ${titleClassName} ${article.section === "news" ? "!text-[1.2em]" : ""} ${article.section === "sports" ? "font-normal tracking-[0.015em]" : ""} ${article.section === "features" ? "font-light text-[22px] md:text-[24px]" : ""}`}
     >
-      {article.title}
+      {article.richTitle || article.title}
     </h3>
     <Byline author={article.author} date={article.date} />
     {showExcerpt && article.excerpt ? (
@@ -119,7 +119,7 @@ export const ThumbStory = ({
       <h3
         className={`font-copy font-bold leading-[1.04] tracking-[-0.015em] text-text-main transition-colors ${titleClassName} ${article.section === "news" ? "!text-[1.2em]" : ""} ${article.section === "sports" ? "font-normal tracking-[0.015em]" : ""} ${article.section === "features" ? "font-light text-[22px] md:text-[24px]" : ""}`}
       >
-        {article.title}
+        {article.richTitle || article.title}
       </h3>
       <Byline author={article.author} date={article.date} />
       {showExcerpt && article.excerpt ? (
@@ -161,7 +161,7 @@ const SparseSection = ({
     <div>
       <StoryKicker section={lead.section} />
       <h3 className={`font-copy text-[24px] font-bold leading-[1.08] tracking-[-0.018em] text-text-main transition-colors md:text-[28px] ${lead.section === "news" ? "!text-[1.2em]" : ""} ${lead.section === "sports" ? "font-normal tracking-[0.015em]" : ""} ${lead.section === "features" ? "font-light text-[25px] md:text-[29px]" : ""}`}>
-        {lead.title}
+        {lead.richTitle || lead.title}
       </h3>
       <Byline author={lead.author} date={lead.date} />
       {lead.excerpt ? (
@@ -336,7 +336,7 @@ const SportsSection = ({ articles }: { articles: Article[] }) => {
             <div>
               <StoryKicker section={lead.section} />
               <h3 className={`font-copy text-[20px] font-bold leading-[1.08] tracking-[-0.018em] text-text-main transition-colors md:text-[24px] ${lead.section === "news" ? "!text-[1.2em]" : ""} ${lead.section === "sports" ? "font-normal tracking-[0.015em]" : ""} ${lead.section === "features" ? "font-light text-[21px] md:text-[25px]" : ""}`}>
-                {lead.title}
+                {lead.richTitle || lead.title}
               </h3>
               <Byline author={lead.author} date={lead.date} />
               {lead.excerpt ? (
diff --git a/components/FrontPage/LeadArticle.tsx b/components/FrontPage/LeadArticle.tsx
index 7b5b313..5b040db 100644
--- a/components/FrontPage/LeadArticle.tsx
+++ b/components/FrontPage/LeadArticle.tsx
@@ -45,7 +45,7 @@ export const LeadArticle = ({
                         compact ? "text-[29px] md:text-[29px] xl:text-[31px]" : "text-[32px] md:text-[33px] xl:text-[36px]"
                     } ${article.section === "features" ? (compact ? "text-[30px] md:text-[30px] xl:text-[32px]" : "text-[33px] md:text-[34px] xl:text-[37px]") : ""} ${article.section === "news" ? (compact ? "text-[31px] md:text-[31px] xl:text-[33px]" : "text-[34px] md:text-[35px] xl:text-[39px]") : ""}`}
                 >
-                    {article.title}
+                    {article.richTitle || article.title}
                 </h3>
                 <Byline author={article.author} date={getLeadDate(article)} split />
                 {article.excerpt && (
diff --git a/components/FrontPage/OpinionCard.tsx b/components/FrontPage/OpinionCard.tsx
index f7f1124..78fdb31 100644
--- a/components/FrontPage/OpinionCard.tsx
+++ b/components/FrontPage/OpinionCard.tsx
@@ -22,7 +22,7 @@ export const OpinionCard = ({ article, hasImage }: { article: Article, hasImage?
           {article.section}
         </p>
         <h3 className={`font-copy mb-1 text-[24px] md:text-[26px] font-bold leading-[1.04] text-text-main transition-colors ${article.section === "news" ? "!text-[1.2em]" : ""} ${article.section === "features" ? "font-light italic text-[25px] md:text-[27px]" : ""}`}>
-            {article.title}
+            {article.richTitle || article.title}
         </h3>
         <Byline author={article.author} date={article.date} />
         {hasImage && article.excerpt && (
diff --git a/components/FrontPage/SenateCard.tsx b/components/FrontPage/SenateCard.tsx
index 3f497bd..39423f1 100644
--- a/components/FrontPage/SenateCard.tsx
+++ b/components/FrontPage/SenateCard.tsx
@@ -12,7 +12,7 @@ export const SenateCard = ({ article }: { article: Article }) => (
                 <span className="font-meta text-accent dark:text-[#d96b76] font-[440] italic capitalize text-[11px] md:text-[12px] tracking-[0.04em] transition-colors">Student Senate</span>
             </div>
             <h3 className={`font-copy font-bold text-[24px] md:text-[30px] text-text-main mb-3 leading-[1.06] tracking-[-0.018em] transition-colors ${article.section === "news" ? "!text-[1.2em]" : ""} ${article.section === "features" ? "font-light italic text-[25px] md:text-[31px]" : ""}`}>
-                {article.title}
+                {article.richTitle || article.title}
             </h3>
              <Byline author={article.author} date={article.date} />
             <p className="font-meta text-text-main text-[13px] font-normal leading-[1.4] mb-3 transition-colors">
diff --git a/components/FrontPage/types.ts b/components/FrontPage/types.ts
index 2266e23..a9f28a3 100644
--- a/components/FrontPage/types.ts
+++ b/components/FrontPage/types.ts
@@ -1,7 +1,10 @@
+import React from 'react';
+
 export interface Article {
   id: number | string;
   slug: string;
   title: string;
+  richTitle?: React.ReactNode;
   excerpt: string;
   author: string | null;
   date: string | null;
diff --git a/components/Opinion/OpinionArticleHeader.tsx b/components/Opinion/OpinionArticleHeader.tsx
index 012175a..d18782c 100644
--- a/components/Opinion/OpinionArticleHeader.tsx
+++ b/components/Opinion/OpinionArticleHeader.tsx
@@ -3,6 +3,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { Article, Media, User } from '@/payload-types';
 import { opinionTypeLabels } from './opinionTypeLabels';
+import { renderLexicalHeadline } from '@/utils/formatArticle';
 import { ArticleByline } from '@/components/Article';
 
 type Props = {
@@ -42,7 +43,7 @@ export const OpinionArticleHeader: React.FC<Props> = ({ article }) => {
       {/* Title */}
       <div className="flex flex-col gap-4 max-w-[680px] w-full mx-auto">
         <h1 data-ie-field="title" className="font-copy font-light text-[39px] md:text-[40px] lg:text-[48px] text-text-main leading-[1.1] text-center">
-          {article.title}
+          {renderLexicalHeadline(article.title)}
         </h1>
       </div>
 
diff --git a/components/Opinion/OpinionSectionPage.tsx b/components/Opinion/OpinionSectionPage.tsx
index 5cad4a5..255fd8f 100644
--- a/components/Opinion/OpinionSectionPage.tsx
+++ b/components/Opinion/OpinionSectionPage.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { extractTextFromLexical } from '@/utils/formatArticle';
 
 import React, { useMemo } from "react";
 import Image from "next/image";
@@ -115,7 +116,7 @@ export default function OpinionSectionPage({
             user: author,
             count: 1,
             latestArticle: {
-              title: raw.title,
+              title: extractTextFromLexical(raw.title),
               url: getArticleUrl({
                 section: raw.section,
                 slug: raw.slug,
diff --git a/components/SearchOverlay.tsx b/components/SearchOverlay.tsx
index d233d9c..a148275 100644
--- a/components/SearchOverlay.tsx
+++ b/components/SearchOverlay.tsx
@@ -824,7 +824,7 @@ export default function SearchOverlay({ onClose, forceDark = false }: { onClose:
                       className="flex flex-col group cursor-pointer"
                     >
                       <h3 className={`font-bold leading-[1.12] tracking-[-0.01em] text-text-main transition-colors mb-1 [overflow-wrap:anywhere] break-words font-copy text-[22px] md:text-[24px] ${article.section === "opinion" ? "font-light" : ""} ${article.section === "news" ? "text-[23px] md:text-[25px]" : ""} ${article.section === "sports" ? "font-normal tracking-[0.015em]" : ""} ${article.section === "features" ? "font-light text-[23px] md:text-[25px]" : ""}`}>
-                        {article.title}
+                        {article.richTitle || article.title}
                       </h3>
                       <Byline author={article.author} date={article.date} />
                       <p className="font-meta font-normal text-black dark:text-white text-[13px] leading-[1.38] mt-1.5 line-clamp-3 transition-colors [overflow-wrap:anywhere] break-words">
diff --git a/components/SectionPage/index.tsx b/components/SectionPage/index.tsx
index 4cd2670..8d0ba1a 100644
--- a/components/SectionPage/index.tsx
+++ b/components/SectionPage/index.tsx
@@ -63,7 +63,7 @@ function ColumnCard({
 }) {
   return (
     <TransitionLink href={getArticleUrl(article)} className={`group block${article.isFollytechnic ? ' follytechnic' : ''}`}>
-      <h3 className={tc(article, size)}>{article.title}</h3>
+      <h3 className={tc(article, size)}>{article.richTitle || article.title}</h3>
       <Byline author={article.author} date={article.date} />
       {article.excerpt && (
         <p className="font-meta mt-1.5 text-[13px] leading-[1.42] text-text-muted line-clamp-3">
diff --git a/fix-lint.mjs b/fix-lint.mjs
new file mode 100644
index 0000000..9e50fae
--- /dev/null
+++ b/fix-lint.mjs
@@ -0,0 +1,40 @@
+import fs from 'fs';
+
+function replaceInFile(filePath, replacements) {
+  let content = fs.readFileSync(filePath, 'utf8');
+  for (const { oldStr, newStr, regex, replaceStr } of replacements) {
+    if (oldStr && newStr) content = content.replace(oldStr, newStr);
+    if (regex && replaceStr !== undefined) content = content.replace(regex, replaceStr);
+  }
+  fs.writeFileSync(filePath, content, 'utf8');
+}
+
+replaceInFile('app/api/search/route.ts', [
+  { oldStr: "formatArticle(doc as any,", newStr: "formatArticle(doc as unknown as Parameters<typeof formatArticle>[0]," }
+]);
+
+replaceInFile('collections/Articles.ts', [
+  { regex: /extractText = \(node: any\): string =>/g, replaceStr: "// eslint-disable-next-line @typescript-eslint/no-explicit-any\n            const extractText = (node: any): string =>" }
+]);
+
+replaceInFile('scripts/seed-features.ts', [
+  { regex: /extractTextFromLexical\(article\.title\) as any,/g, replaceStr: "extractTextFromLexical(article.title) as unknown as Record<string, unknown>," }
+]);
+
+replaceInFile('utils/formatArticle.ts', [
+  { regex: /title: Record<string, unknown> \| unknown;/g, replaceStr: "title: unknown;" },
+  { regex: /title: any;/g, replaceStr: "title: unknown;" },
+  { regex: /extractTextFromLexical\(node: [^)]+\): string/g, replaceStr: "extractTextFromLexical(node: unknown): string" },
+  { regex: /renderLexicalHeadline\(node: [^)]+\): React.ReactNode/g, replaceStr: "renderLexicalHeadline(node: unknown): React.ReactNode" },
+  { regex: /\(child: [^,]+, i: number\)/g, replaceStr: "(child: unknown, i: number)" }
+]);
+
+// Wait, if I change `node` to `unknown` in `utils/formatArticle.ts`, TS will complain about `node.root`, `node.children`, etc!
+// So I MUST use eslint-disable-next-line.
+replaceInFile('utils/formatArticle.ts', [
+  { regex: /extractTextFromLexical\(node: unknown\): string/g, replaceStr: "/* eslint-disable @typescript-eslint/no-explicit-any */\nexport function extractTextFromLexical(node: any): string" },
+  { regex: /renderLexicalHeadline\(node: unknown\): React.ReactNode/g, replaceStr: "export function renderLexicalHeadline(node: any): React.ReactNode" },
+  { regex: /\(child: unknown, i: number\)/g, replaceStr: "(child: any, i: number)" }
+]);
+
+console.log("Lint fixes applied correctly");
\ No newline at end of file
diff --git a/fix-more.mjs b/fix-more.mjs
new file mode 100644
index 0000000..484ecf2
--- /dev/null
+++ b/fix-more.mjs
@@ -0,0 +1,73 @@
+import fs from 'fs';
+import path from 'path';
+
+function replaceInFile(filePath, replacements) {
+  let content = fs.readFileSync(filePath, 'utf8');
+  for (const { oldStr, newStr, regex, replaceStr } of replacements) {
+    if (oldStr && newStr) content = content.replace(oldStr, newStr);
+    if (regex && replaceStr !== undefined) content = content.replace(regex, replaceStr);
+  }
+  fs.writeFileSync(filePath, content, 'utf8');
+}
+
+// 1. app/(frontend)/[section]/[year]/[month]/[slug]/page.tsx
+replaceInFile('app/(frontend)/[section]/[year]/[month]/[slug]/page.tsx', [
+  { oldStr: "title: typeof article.title === 'object' ? extractTextFromLexical(article.title) : article.title,", newStr: "title: extractTextFromLexical(article.title)," },
+  { oldStr: "title: `${sectionName} | ${typeof article.title === 'object' ? extractTextFromLexical(article.title) : article.title}`,", newStr: "title: `${sectionName} | ${extractTextFromLexical(article.title)}`," },
+  { oldStr: "headline: typeof article.title === 'object' ? extractTextFromLexical(article.title) : article.title,", newStr: "headline: extractTextFromLexical(article.title)," },
+  { oldStr: "title={typeof article.title === 'object' ? extractTextFromLexical(article.title) : article.title}", newStr: "title={extractTextFromLexical(article.title)}" },
+  { oldStr: "title={article.title}", newStr: "title={extractTextFromLexical(article.title)}" },
+  { oldStr: "title: article.title,", newStr: "title: extractTextFromLexical(article.title)," },
+  { regex: /import \{ notFound \} from 'next\/navigation';/g, replaceStr: "import { notFound } from 'next/navigation';\nimport { extractTextFromLexical } from '@/utils/formatArticle';" }
+]);
+
+// 2. app/(frontend)/staff/[slug]/page.tsx
+replaceInFile('app/(frontend)/staff/[slug]/page.tsx', [
+  { oldStr: "title: typeof article.title === 'object' ? extractTextFromLexical(article.title) : article.title,", newStr: "title: extractTextFromLexical(article.title)," }
+]);
+
+// 3. components/Article/ArticleHeader.tsx
+replaceInFile('components/Article/ArticleHeader.tsx', [
+  { oldStr: "{article.richTitle || article.title}", newStr: "{renderLexicalHeadline(article.title)}" },
+  { oldStr: "import { ArticleByline }", newStr: "import { renderLexicalHeadline } from '@/utils/formatArticle';\nimport { ArticleByline }" }
+]);
+
+// 4. components/Article/ArticleRecommendations.tsx
+replaceInFile('components/Article/ArticleRecommendations.tsx', [
+  { oldStr: "title: typeof article.title === 'object' ? extractTextFromLexical(article.title) : article.title,", newStr: "title: extractTextFromLexical(article.title)," }
+]);
+
+// 5. components/Article/Photofeature/ArticleHeader.tsx
+replaceInFile('components/Article/Photofeature/ArticleHeader.tsx', [
+  { oldStr: "{article.richTitle || article.title}", newStr: "{renderLexicalHeadline(article.title)}" },
+  { oldStr: "import { ArticleByline }", newStr: "import { renderLexicalHeadline } from '@/utils/formatArticle';\nimport { ArticleByline }" }
+]);
+
+// 6. components/Dashboard/Todos/TodoRow.tsx
+replaceInFile('components/Dashboard/Todos/TodoRow.tsx', [
+  { oldStr: "article.richTitle || article.title ||", newStr: "renderLexicalHeadline(article.title) ||" },
+  { oldStr: "import Link from 'next/link';", newStr: "import Link from 'next/link';\nimport { renderLexicalHeadline } from '@/utils/formatArticle';" }
+]);
+
+// 7. components/Opinion/OpinionArticleHeader.tsx
+replaceInFile('components/Opinion/OpinionArticleHeader.tsx', [
+  { oldStr: "{article.richTitle || article.title}", newStr: "{renderLexicalHeadline(article.title)}" },
+  { oldStr: "import { ArticleByline }", newStr: "import { renderLexicalHeadline } from '@/utils/formatArticle';\nimport { ArticleByline }" }
+]);
+
+// 8. components/Opinion/OpinionSectionPage.tsx
+replaceInFile('components/Opinion/OpinionSectionPage.tsx', [
+  { oldStr: "title: typeof raw.title === 'object' ? extractTextFromLexical(raw.title) : raw.title,", newStr: "title: extractTextFromLexical(raw.title)," }
+]);
+
+// 9. scripts/seed-features.ts
+replaceInFile('scripts/seed-features.ts', [
+  { oldStr: "title: typeof article.title === 'object' ? extractTextFromLexical(article.title) : article.title as any,", newStr: "title: extractTextFromLexical(article.title)," }
+]);
+
+// 10. scripts/update-features-images.ts
+replaceInFile('scripts/update-features-images.ts', [
+  { regex: /\(typeof article\.title === 'string' \? article\.title : extractTextFromLexical\(article\.title\)\)/g, replaceStr: "extractTextFromLexical(article.title)" }
+]);
+
+console.log("Fixes done");
\ No newline at end of file
diff --git a/fix-syntax.mjs b/fix-syntax.mjs
new file mode 100644
index 0000000..2e558a9
--- /dev/null
+++ b/fix-syntax.mjs
@@ -0,0 +1,28 @@
+import fs from 'fs';
+
+function replaceInFile(filePath, replacements) {
+  let content = fs.readFileSync(filePath, 'utf8');
+  for (const { oldStr, newStr, regex, replaceStr } of replacements) {
+    if (oldStr && newStr) content = content.replace(oldStr, newStr);
+    if (regex && replaceStr !== undefined) content = content.replace(regex, replaceStr);
+  }
+  fs.writeFileSync(filePath, content, 'utf8');
+}
+
+replaceInFile('collections/Articles.ts', [
+  { oldStr: "const // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            const extractText", newStr: "// eslint-disable-next-line @typescript-eslint/no-explicit-any\n            const extractText" }
+]);
+
+replaceInFile('utils/formatArticle.ts', [
+  { oldStr: "export function /* eslint-disable @typescript-eslint/no-explicit-any */\nexport function extractTextFromLexical(node: any): string", newStr: "/* eslint-disable @typescript-eslint/no-explicit-any */\nexport function extractTextFromLexical(node: any): string" }
+]);
+
+replaceInFile('components/Opinion/OpinionSectionPage.tsx', [
+  { oldStr: "import { extractTextFromLexical } from '@/utils/formatArticle';\n\"use client\";", newStr: "\"use client\";\nimport { extractTextFromLexical } from '@/utils/formatArticle';" }
+]);
+
+replaceInFile('components/Article/Photofeature/ArticleHeader.tsx', [
+  { oldStr: "import { renderLexicalHeadline } from '@/utils/formatArticle';\n'use client';", newStr: "'use client';\nimport { renderLexicalHeadline } from '@/utils/formatArticle';" }
+]);
+
+console.log("Syntax fixes applied");
\ No newline at end of file
diff --git a/fix-types.mjs b/fix-types.mjs
new file mode 100644
index 0000000..dda2a8a
--- /dev/null
+++ b/fix-types.mjs
@@ -0,0 +1,90 @@
+import fs from 'fs';
+import path from 'path';
+
+function replaceInFile(filePath, replacements) {
+  let content = fs.readFileSync(filePath, 'utf8');
+  for (const { oldStr, newStr, regex, replaceStr } of replacements) {
+    if (oldStr && newStr) content = content.replace(oldStr, newStr);
+    if (regex && replaceStr !== undefined) content = content.replace(regex, replaceStr);
+  }
+  fs.writeFileSync(filePath, content, 'utf8');
+}
+
+// 1. app/(frontend)/[section]/[year]/[month]/[slug]/page.tsx
+replaceInFile('app/(frontend)/[section]/[year]/[month]/[slug]/page.tsx', [
+  { oldStr: "title: article.title,", newStr: "title: typeof article.title === 'object' ? extractTextFromLexical(article.title) : article.title," },
+  { oldStr: "title: article.title,", newStr: "title: typeof article.title === 'object' ? extractTextFromLexical(article.title) : article.title," },
+  { oldStr: "title: `${sectionName} | ${article.title}`,", newStr: "title: `${sectionName} | ${typeof article.title === 'object' ? extractTextFromLexical(article.title) : article.title}`," },
+  { oldStr: "headline: article.title,", newStr: "headline: typeof article.title === 'object' ? extractTextFromLexical(article.title) : article.title," },
+  { oldStr: "title={article.title}", newStr: "title={typeof article.title === 'object' ? extractTextFromLexical(article.title) : article.title}" },
+  { regex: /import \{ getSeo \} from '@\/lib\/getSeo';/g, replaceStr: "import { getSeo } from '@/lib/getSeo';\nimport { extractTextFromLexical } from '@/utils/formatArticle';" }
+]);
+
+// 2. app/(frontend)/sitemap-news.xml/route.ts
+replaceInFile('app/(frontend)/sitemap-news.xml/route.ts', [
+  { oldStr: "doc.title.replace", newStr: "(typeof doc.title === 'string' ? doc.title : extractTextFromLexical(doc.title)).replace" },
+  { oldStr: "import { getPayload }", newStr: "import { extractTextFromLexical } from '@/utils/formatArticle';\nimport { getPayload }" }
+]);
+
+// 3. app/(frontend)/staff/[slug]/page.tsx
+replaceInFile('app/(frontend)/staff/[slug]/page.tsx', [
+  { oldStr: "title: article.title,", newStr: "title: typeof article.title === 'object' ? extractTextFromLexical(article.title) : article.title," },
+  { oldStr: "import { StaffProfile }", newStr: "import { extractTextFromLexical } from '@/utils/formatArticle';\nimport { StaffProfile }" }
+]);
+
+// 4. app/api/search/route.ts
+replaceInFile('app/api/search/route.ts', [
+  { oldStr: "formatArticle(doc as PayloadSearchArticle,", newStr: "formatArticle(doc as any," }
+]);
+
+// 5. app/api/search/spellcheck/route.ts
+replaceInFile('app/api/search/spellcheck/route.ts', [
+  { oldStr: "extractWords(doc.title)", newStr: "extractWords(typeof doc.title === 'string' ? doc.title : extractTextFromLexical(doc.title))" },
+  { oldStr: "import { getPayload }", newStr: "import { extractTextFromLexical } from '@/utils/formatArticle';\nimport { getPayload }" }
+]);
+
+// 6. components/Article/ArticleHeader.tsx
+replaceInFile('components/Article/ArticleHeader.tsx', [
+  { oldStr: "{article.title}", newStr: "{article.richTitle || article.title}" }
+]);
+
+// 7. components/Article/ArticleRecommendations.tsx
+replaceInFile('components/Article/ArticleRecommendations.tsx', [
+  { oldStr: "title: article.title,", newStr: "title: typeof article.title === 'object' ? extractTextFromLexical(article.title) : article.title," },
+  { oldStr: "import { Article }", newStr: "import { extractTextFromLexical } from '@/utils/formatArticle';\nimport { Article }" }
+]);
+
+// 8. components/Article/Photofeature/ArticleHeader.tsx
+replaceInFile('components/Article/Photofeature/ArticleHeader.tsx', [
+  { oldStr: "{article.title}", newStr: "{article.richTitle || article.title}" }
+]);
+
+// 9. components/Dashboard/Todos/TodoRow.tsx
+replaceInFile('components/Dashboard/Todos/TodoRow.tsx', [
+  { oldStr: "article.title ||", newStr: "article.richTitle || article.title ||" }
+]);
+
+// 10. components/Opinion/OpinionArticleHeader.tsx
+replaceInFile('components/Opinion/OpinionArticleHeader.tsx', [
+  { oldStr: "{article.title}", newStr: "{article.richTitle || article.title}" }
+]);
+
+// 11. components/Opinion/OpinionSectionPage.tsx
+replaceInFile('components/Opinion/OpinionSectionPage.tsx', [
+  { oldStr: "title: raw.title,", newStr: "title: typeof raw.title === 'object' ? extractTextFromLexical(raw.title) : raw.title," },
+  { oldStr: "import { OpinionCard }", newStr: "import { extractTextFromLexical } from '@/utils/formatArticle';\nimport { OpinionCard }" }
+]);
+
+// 12. scripts/seed-features.ts
+replaceInFile('scripts/seed-features.ts', [
+  { oldStr: "title: article.title,", newStr: "title: typeof article.title === 'object' ? extractTextFromLexical(article.title) : article.title as any," },
+  { oldStr: "import payload", newStr: "import { extractTextFromLexical } from '../utils/formatArticle';\nimport payload" }
+]);
+
+// 13. scripts/update-features-images.ts
+replaceInFile('scripts/update-features-images.ts', [
+  { regex: /\(article\.title as string\)/g, replaceStr: "(typeof article.title === 'string' ? article.title : extractTextFromLexical(article.title))" },
+  { oldStr: "import payload", newStr: "import { extractTextFromLexical } from '../utils/formatArticle';\nimport payload" }
+]);
+
+console.log("Replacements done");
diff --git a/migrations/20260405_000000_migrate_title_to_richtext.ts b/migrations/20260405_000000_migrate_title_to_richtext.ts
new file mode 100644
index 0000000..9a5d5eb
--- /dev/null
+++ b/migrations/20260405_000000_migrate_title_to_richtext.ts
@@ -0,0 +1,98 @@
+import { MigrateUpArgs, MigrateDownArgs, sql } from '@payloadcms/db-postgres'
+
+export async function up({ db, payload, req }: MigrateUpArgs): Promise<void> {
+  await db.execute(sql`
+    ALTER TABLE "articles" RENAME COLUMN "title" TO "old_title";
+    ALTER TABLE "articles" ADD COLUMN "title" jsonb;
+    
+    UPDATE "articles" 
+    SET "title" = jsonb_build_object(
+      'root', jsonb_build_object(
+        'type', 'root',
+        'format', '',
+        'indent', 0,
+        'version', 1,
+        'direction', 'ltr',
+        'children', jsonb_build_array(
+          jsonb_build_object(
+            'type', 'paragraph',
+            'format', '',
+            'indent', 0,
+            'version', 1,
+            'direction', 'ltr',
+            'children', jsonb_build_array(
+              jsonb_build_object(
+                'type', 'text',
+                'format', 0,
+                'mode', 'normal',
+                'style', '',
+                'text', "old_title",
+                'version', 1
+              )
+            )
+          )
+        )
+      )
+    );
+    
+    ALTER TABLE "articles" ALTER COLUMN "title" SET NOT NULL;
+    ALTER TABLE "articles" DROP COLUMN "old_title";
+
+    ALTER TABLE "_articles_v" RENAME COLUMN "version_title" TO "old_version_title";
+    ALTER TABLE "_articles_v" ADD COLUMN "version_title" jsonb;
+    
+    UPDATE "_articles_v" 
+    SET "version_title" = jsonb_build_object(
+      'root', jsonb_build_object(
+        'type', 'root',
+        'format', '',
+        'indent', 0,
+        'version', 1,
+        'direction', 'ltr',
+        'children', jsonb_build_array(
+          jsonb_build_object(
+            'type', 'paragraph',
+            'format', '',
+            'indent', 0,
+            'version', 1,
+            'direction', 'ltr',
+            'children', jsonb_build_array(
+              jsonb_build_object(
+                'type', 'text',
+                'format', 0,
+                'mode', 'normal',
+                'style', '',
+                'text', "old_version_title",
+                'version', 1
+              )
+            )
+          )
+        )
+      )
+    ) WHERE "old_version_title" IS NOT NULL;
+    
+    ALTER TABLE "_articles_v" DROP COLUMN "old_version_title";
+  `)
+}
+
+export async function down({ db, payload, req }: MigrateDownArgs): Promise<void> {
+  await db.execute(sql`
+    ALTER TABLE "articles" RENAME COLUMN "title" TO "rich_title";
+    ALTER TABLE "articles" ADD COLUMN "title" varchar;
+    
+    UPDATE "articles" 
+    SET "title" = "rich_title"->'root'->'children'->0->'children'->0->>'text';
+    
+    ALTER TABLE "articles" ALTER COLUMN "title" SET NOT NULL;
+    ALTER TABLE "articles" DROP COLUMN "rich_title";
+
+    ALTER TABLE "_articles_v" RENAME COLUMN "version_title" TO "rich_version_title";
+    ALTER TABLE "_articles_v" ADD COLUMN "version_title" varchar;
+    
+    UPDATE "_articles_v" 
+    SET "version_title" = "rich_version_title"->'root'->'children'->0->'children'->0->>'text'
+    WHERE "rich_version_title" IS NOT NULL;
+    
+    ALTER TABLE "_articles_v" DROP COLUMN "rich_version_title";
+  `)
+}
diff --git a/migrations/index.ts b/migrations/index.ts
index e718f17..1c5c641 100644
--- a/migrations/index.ts
+++ b/migrations/index.ts
@@ -25,6 +25,7 @@ import * as migration_20260401_000000_add_theme_and_logos from './20260401_00000
 import * as migration_20260401_010000_add_seo_global from './20260401_010000_add_seo_global';
 import * as migration_20260402_000000_add_staff_page_layout from './20260402_000000_add_staff_page_layout';
 import * as migration_20260402_100000_add_media_title from './20260402_100000_add_media_title';
+import * as migration_20260405_000000_migrate_title_to_richtext from './20260405_000000_migrate_title_to_richtext';
 
 export const migrations = [
   {
@@ -162,4 +163,9 @@ export const migrations = [
     down: migration_20260402_100000_add_media_title.down,
     name: '20260402_100000_add_media_title',
   },
+  {
+    up: migration_20260405_000000_migrate_title_to_richtext.up,
+    down: migration_20260405_000000_migrate_title_to_richtext.down,
+    name: '20260405_000000_migrate_title_to_richtext',
+  },
 ];
diff --git a/payload-types.ts b/payload-types.ts
index 4fe1b3b..58206b5 100644
--- a/payload-types.ts
+++ b/payload-types.ts
@@ -295,7 +295,21 @@ export interface Logo {
 export interface Article {
   id: number;
   section: 'news' | 'sports' | 'features' | 'opinion';
-  title: string;
+  title: {
+    root: {
+      type: string;
+      children: {
+        type: any;
+        version: number;
+        [k: string]: unknown;
+      }[];
+      direction: ('ltr' | 'rtl') | null;
+      format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
+      indent: number;
+      version: number;
+    };
+    [k: string]: unknown;
+  };
   kicker?: string | null;
   subdeck?: string | null;
   opinionType?:
diff --git a/scripts/seed-features.ts b/scripts/seed-features.ts
index 29bb741..7fb9ffe 100644
--- a/scripts/seed-features.ts
+++ b/scripts/seed-features.ts
@@ -1,3 +1,4 @@
+import { extractTextFromLexical } from '../utils/formatArticle';
 /**
  * Seed 15 placeholder features articles with placeholder images.
  *
@@ -148,7 +149,8 @@ async function main() {
       await payload.create({
         collection: 'articles',
         data: {
-          title: article.title,
+          // @ts-expect-error script seeding can use string or basic object
+          title: extractTextFromLexical(article.title) as unknown as Record<string, unknown>,
           section: 'features',
           subdeck: article.subdeck,
           kicker: article.kicker,
diff --git a/scripts/update-features-images.ts b/scripts/update-features-images.ts
index 0d3edb1..e873a36 100644
--- a/scripts/update-features-images.ts
+++ b/scripts/update-features-images.ts
@@ -1,3 +1,4 @@
+import { extractTextFromLexical } from '../utils/formatArticle';
 /**
  * Replace placeholder images on features articles with stock photos from Lorem Picsum.
  *
@@ -31,7 +32,7 @@ async function main() {
 
   for (let i = 0; i < articles.length; i++) {
     const article = articles[i];
-    const title = (article.title as string).slice(0, 50);
+    const title = extractTextFromLexical(article.title).slice(0, 50);
     console.log(`[${i + 1}/${articles.length}] "${title}..."`);
 
     try {
@@ -40,7 +41,7 @@ async function main() {
       const mediaDoc = await payload.create({
         collection: 'media',
         data: {
-          alt: `Stock photo for ${(article.title as string).slice(0, 40)}`,
+          alt: `Stock photo for ${extractTextFromLexical(article.title).slice(0, 40)}`,
         },
         file: {
           data: imgBuffer,
diff --git a/test-lexical.mjs b/test-lexical.mjs
new file mode 100644
index 0000000..d6a6b08
--- /dev/null
+++ b/test-lexical.mjs
@@ -0,0 +1,2 @@
+import { lexicalEditor } from '@payloadcms/richtext-lexical'
+console.log(lexicalEditor)
diff --git a/utils/formatArticle.ts b/utils/formatArticle.ts
index 871133c..91df08b 100644
--- a/utils/formatArticle.ts
+++ b/utils/formatArticle.ts
@@ -1,5 +1,6 @@
 import { Media } from '@/payload-types';
 import { Article as ComponentArticle } from '@/components/FrontPage/types';
+import React from 'react';
 
 type PublicAuthorLike = {
   firstName: string;
@@ -25,7 +26,7 @@ type WriteInAuthor = {
 type FormatArticleInput = {
   id: number | string;
   slug?: string | null;
-  title: string;
+  title: unknown;
   subdeck?: string | null;
   featuredImage?: number | PublicMediaLike | null;
   imageCaption?: string | null;
@@ -40,6 +41,36 @@ type FormatArticleInput = {
   isFollytechnic?: boolean | null;
 };
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export function extractTextFromLexical(node: any): string {
+  if (!node) return '';
+  if (typeof node === 'string') return node;
+  if (node.root) return extractTextFromLexical(node.root);
+  if (Array.isArray(node.children)) {
+    return node.children.map(extractTextFromLexical).join('');
+  }
+  if (node.type === 'text') return node.text || '';
+  return '';
+}
+
+export function renderLexicalHeadline(node: any): React.ReactNode {
+  if (!node) return null;
+  if (typeof node === 'string') return node;
+  if (node.root) return renderLexicalHeadline(node.root);
+  if (Array.isArray(node.children)) {
+    return React.createElement(React.Fragment, null, ...node.children.map((child: any, i: number) => React.createElement(React.Fragment, { key: i }, renderLexicalHeadline(child))));
+  }
+  if (node.type === 'text') {
+    let el: React.ReactNode = node.text;
+    if (typeof node.format === 'number') {
+      if (node.format & 1) el = React.createElement('strong', { key: 'b' }, el);
+      if (node.format & 2) el = React.createElement('em', { key: 'i' }, el);
+    }
+    return el;
+  }
+  return null;
+}
+
 export const formatArticle = (
   article: FormatArticleInput | number | null | undefined,
   { absoluteDate = false }: { absoluteDate?: boolean } = {},
@@ -102,7 +133,8 @@ export const formatArticle = (
   return {
     id: article.id,
     slug: article.slug || '#',
-    title: article.title,
+    title: extractTextFromLexical(article.title),
+    richTitle: renderLexicalHeadline(article.title),
     excerpt: article.subdeck || '',
     author: authors ? authors.toUpperCase() : 'THE POLY',
     date: dateString,