fix: syntax highlighting in markdown editor & feedback widget (#349)

* chore: update Codemirror dependencies and clean up unused code * chore: align and fix stupid tiptap packages
badass-courses · Dec 17, 2024 · 081214d · 081214d
1 parent 75ed31d
commit 081214d
Show file tree

Hide file tree

Showing 20 changed files with 1,905 additions and 1,565 deletions.
diff --git a/apps/ai-hero/package.json b/apps/ai-hero/package.json
@@ -41,11 +41,11 @@
 		"@aws-sdk/s3-request-presigner": "^3.441.0",
 		"@casl/ability": "^6.5.0",
 		"@code-hike/mdx": "^0.9.0",
-		"@codemirror/lang-markdown": "^6.2.3",
-		"@codemirror/language-data": "^6.4.1",
-		"@codemirror/search": "^6.5.6",
-		"@codemirror/state": "^6.4.1",
-		"@codemirror/view": "^6.26.0",
+		"@codemirror/lang-markdown": "^6.3.1",
+		"@codemirror/language-data": "^6.5.1",
+		"@codemirror/search": "^6.5.8",
+		"@codemirror/state": "^6.5.0",
+		"@codemirror/view": "^6.35.3",
 		"@coursebuilder/adapter-drizzle": "1.0.0",
 		"@coursebuilder/commerce-next": "^0.0.9",
 		"@coursebuilder/core": "1.0.0",
@@ -58,7 +58,7 @@
 		"@heroicons/react": "^2.0.18",
 		"@hookform/resolvers": "^3.3.2",
 		"@internationalized/date": "3.5.6",
-		"@lezer/highlight": "^1.2.0",
+		"@lezer/highlight": "^1.2.1",
 		"@mdx-js/loader": "^3.1.0",
 		"@mdx-js/mdx": "^3.1.0",
 		"@mdx-js/react": "^3.1.0",
@@ -99,11 +99,11 @@
 		"@tanstack/react-query": "5.54.1",
 		"@tanstack/react-query-devtools": "5.54.1",
 		"@tanstack/react-table": "^8.17.3",
-		"@tiptap/extension-highlight": "2.9.1",
-		"@tiptap/extension-link": "2.9.1",
-		"@tiptap/extension-typography": "2.9.1",
-		"@tiptap/react": "2.9.1",
-		"@tiptap/starter-kit": "2.9.1",
+		"@tiptap/extension-highlight": "2.10.3",
+		"@tiptap/extension-link": "2.10.3",
+		"@tiptap/extension-typography": "2.10.3",
+		"@tiptap/react": "2.10.3",
+		"@tiptap/starter-kit": "2.10.3",
 		"@trpc/client": "next",
 		"@trpc/next": "next",
 		"@trpc/react-query": "next",

diff --git a/apps/ai-hero/src/components/navigation/index.tsx b/apps/ai-hero/src/components/navigation/index.tsx
@@ -92,7 +92,7 @@ const Navigation = () => {
 								{links.map((link) => {
 									return (
 										<NavLinkItem
-											className="font-heading text-[18px] font-semibold"
+											className=""
 											key={link.href || link.label}
 											{...link}
 										/>

diff --git a/apps/ai-hero/src/components/navigation/nav-link-item.tsx b/apps/ai-hero/src/components/navigation/nav-link-item.tsx
@@ -13,70 +13,92 @@ const NavLinkItemSchema = z.object({
 })
 
 export type NavLinkItem = z.infer<typeof NavLinkItemSchema>
-
 export const NavLinkItem: React.FC<NavLinkItem> = ({
-	href = '#',
+	href,
 	label,
 	onClick,
 	className,
 }) => {
-	const LinkOrButton = href ? Link : 'button'
 	const pathname = usePathname()
 	const isActive = href && pathname === href.replace(/\/$/, '')
-	return (
-		<li className="flex items-stretch">
-			<LinkOrButton
-				href={href}
+
+	const handleClick = () => {
+		track('nav-link-clicked', { label, href })
+		onClick && onClick()
+	}
+
+	const content = (
+		<>
+			{label}
+
+			<div
 				className={cn(
-					'text-foreground-muted relative flex h-full items-center px-4 text-sm font-light transition',
+					'absolute -bottom-px left-0 flex h-px w-full items-center justify-between bg-[#624F43] transition duration-300 ease-in-out group-hover:opacity-100',
 					{
-						'brightness-125': isActive,
+						'opacity-0': !isActive,
 					},
-					className,
 				)}
-				onClick={() => {
-					track('nav-link-clicked', { label, href })
-					onClick && onClick()
-				}}
 			>
-				{label}
+				<svg
+					width="5"
+					height="5"
+					viewBox="0 0 5 5"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+					className="mr-px"
+				>
+					<path
+						d="M0 0L0.828428 0.828428C1.57857 1.57857 2.59599 2 3.65685 2H5V3H3.65685C2.59599 3 1.57857 3.42143 0.828427 4.17157L0 5V0Z"
+						fill="#624F43"
+					/>
+				</svg>
+				<svg
+					width="5"
+					height="5"
+					viewBox="0 0 5 5"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+					className="relative ml-px rotate-180"
+				>
+					<path
+						d="M0 0L0.828428 0.828428C1.57857 1.57857 2.59599 2 3.65685 2H5V3H3.65685C2.59599 3 1.57857 3.42143 0.828427 4.17157L0 5V0Z"
+						fill="#624F43"
+					/>
+				</svg>
+			</div>
+		</>
+	)
 
-				<div
+	return (
+		<li className="flex items-stretch">
+			{href ? (
+				<Link
+					href={href}
+					onClick={handleClick}
+					className={cn(
+						'text-foreground-muted relative flex h-full items-center px-4 text-sm transition',
+						{
+							'brightness-125': isActive,
+						},
+						className,
+					)}
+				>
+					{content}
+				</Link>
+			) : (
+				<button
+					onClick={handleClick}
 					className={cn(
-						'absolute -bottom-px left-0 flex h-px w-full items-center justify-between bg-[#3E322A] transition duration-300 ease-in-out group-hover:opacity-100',
+						'text-foreground-muted relative flex h-full items-center px-4 text-sm transition',
 						{
-							'opacity-0': !isActive,
+							'brightness-125': isActive,
 						},
+						className,
 					)}
 				>
-					<svg
-						width="5"
-						height="5"
-						viewBox="0 0 5 5"
-						fill="none"
-						xmlns="http://www.w3.org/2000/svg"
-						className="mr-px"
-					>
-						<path
-							d="M0 0L0.828428 0.828428C1.57857 1.57857 2.59599 2 3.65685 2H5V3H3.65685C2.59599 3 1.57857 3.42143 0.828427 4.17157L0 5V0Z"
-							fill="#3E322A"
-						/>
-					</svg>
-					<svg
-						width="5"
-						height="5"
-						viewBox="0 0 5 5"
-						fill="none"
-						xmlns="http://www.w3.org/2000/svg"
-						className="relative ml-px rotate-180"
-					>
-						<path
-							d="M0 0L0.828428 0.828428C1.57857 1.57857 2.59599 2 3.65685 2H5V3H3.65685C2.59599 3 1.57857 3.42143 0.828427 4.17157L0 5V0Z"
-							fill="#3E322A"
-						/>
-					</svg>
-				</div>
-			</LinkOrButton>
+					{content}
+				</button>
+			)}
 		</li>
 	)
 }
diff --git a/apps/ai-hero/src/components/navigation/user.tsx b/apps/ai-hero/src/components/navigation/user.tsx
@@ -88,7 +88,7 @@ export const User: React.FC<{
 									/>
 								)}
 								<div className="flex flex-col pl-0.5">
-									<span className="text-foreground-muted inline-flex items-center gap-0.5 text-sm font-light leading-tight">
+									<span className="text-foreground-muted inline-flex items-center gap-0.5 text-sm leading-tight">
 										<span className="truncate sm:max-w-[8rem] lg:max-w-[11rem] xl:max-w-none">
 											{sessionData?.user?.name?.split(' ')[0] || 'Account'}
 										</span>{' '}

diff --git a/apps/ai-hero/src/feedback-widget/feedback-context.tsx b/apps/ai-hero/src/feedback-widget/feedback-context.tsx
@@ -1,9 +1,8 @@
 'use client'
 
 import React from 'react'
-import dynamic from 'next/dynamic'
 
-// import FeedbackDialog from './feedback-dialog'
+import FeedbackDialog from './feedback-dialog'
 
 type FeedbackContextType = {
 	isFeedbackDialogOpen: boolean
@@ -31,8 +30,6 @@ export const FeedbackProvider: React.FC<React.PropsWithChildren<any>> = ({
 	const [isFeedbackDialogOpen, setIsFeedbackDialogOpen] =
 		React.useState<boolean>(false)
 	const [location, setLocation] = React.useState<string>('navigation')
-	const FeedbackDialog =
-		isFeedbackDialogOpen && dynamic(() => import('./feedback-dialog'))
 
 	return (
 		<FeedbackContext.Provider

diff --git a/apps/ai-hero/src/feedback-widget/form.tsx b/apps/ai-hero/src/feedback-widget/form.tsx
@@ -50,12 +50,8 @@ export const FeedbackForm: React.FC<
 				const isCodeQuestion = values.context.category === 'code'
 
 				return (
-					<Form
-						className="flex flex-col space-y-5"
-						placeholder=""
-						onPointerEnterCapture={undefined}
-						onPointerLeaveCapture={undefined}
-					>
+					// @ts-ignore
+					<Form className="flex flex-col space-y-5">
 						<div
 							className={cn({ 'pointer-events-none blur-sm': isCodeQuestion })}
 						>

diff --git a/apps/astro-party/package.json b/apps/astro-party/package.json
@@ -39,11 +39,11 @@
 		"@aws-sdk/credential-providers": "^3.525.0",
 		"@aws-sdk/s3-request-presigner": "^3.441.0",
 		"@casl/ability": "^6.5.0",
-		"@codemirror/lang-markdown": "^6.2.3",
-		"@codemirror/language-data": "^6.4.1",
-		"@codemirror/search": "^6.5.6",
-		"@codemirror/state": "^6.4.1",
-		"@codemirror/view": "^6.26.0",
+		"@codemirror/lang-markdown": "^6.3.1",
+		"@codemirror/language-data": "^6.5.1",
+		"@codemirror/search": "^6.5.8",
+		"@codemirror/state": "^6.5.0",
+		"@codemirror/view": "^6.35.3",
 		"@coursebuilder/adapter-drizzle": "1.0.0",
 		"@coursebuilder/commerce-next": "^0.0.9",
 		"@coursebuilder/core": "1.0.0",
@@ -54,7 +54,7 @@
 		"@heroicons/react": "^2.0.18",
 		"@hookform/resolvers": "^3.3.2",
 		"@internationalized/date": "3.5.6",
-		"@lezer/highlight": "^1.2.0",
+		"@lezer/highlight": "^1.2.1",
 		"@mdx-js/loader": "^3.1.0",
 		"@mdx-js/mdx": "^3.1.0",
 		"@mdx-js/react": "^3.1.0",

diff --git a/apps/course-builder-web/package.json b/apps/course-builder-web/package.json
@@ -37,11 +37,11 @@
 		"@aws-sdk/credential-providers": "^3.525.0",
 		"@aws-sdk/s3-request-presigner": "^3.441.0",
 		"@casl/ability": "^6.5.0",
-		"@codemirror/lang-markdown": "^6.2.3",
-		"@codemirror/language-data": "^6.4.1",
-		"@codemirror/search": "^6.5.6",
-		"@codemirror/state": "^6.4.1",
-		"@codemirror/view": "^6.26.0",
+		"@codemirror/lang-markdown": "^6.3.1",
+		"@codemirror/language-data": "^6.5.1",
+		"@codemirror/search": "^6.5.8",
+		"@codemirror/state": "^6.5.0",
+		"@codemirror/view": "^6.35.3",
 		"@coursebuilder/adapter-drizzle": "1.0.0",
 		"@coursebuilder/commerce-next": "^0.0.9",
 		"@coursebuilder/core": "1.0.0",
@@ -52,7 +52,7 @@
 		"@heroicons/react": "^2.0.18",
 		"@hookform/resolvers": "^3.3.2",
 		"@internationalized/date": "3.5.6",
-		"@lezer/highlight": "^1.2.0",
+		"@lezer/highlight": "^1.2.1",
 		"@mdx-js/loader": "^3.1.0",
 		"@mdx-js/mdx": "^3.1.0",
 		"@mdx-js/react": "^3.1.0",

diff --git a/apps/epic-web/package.json b/apps/epic-web/package.json
@@ -40,11 +40,11 @@
 		"@boiseitguru/cookie-cutter": "^0.2.3",
 		"@casl/ability": "^6.5.0",
 		"@code-hike/mdx": "^0.9.0",
-		"@codemirror/lang-markdown": "^6.2.3",
-		"@codemirror/language-data": "^6.4.1",
-		"@codemirror/search": "^6.5.6",
-		"@codemirror/state": "^6.4.1",
-		"@codemirror/view": "^6.26.0",
+		"@codemirror/lang-markdown": "^6.3.1",
+		"@codemirror/language-data": "^6.5.1",
+		"@codemirror/search": "^6.5.8",
+		"@codemirror/state": "^6.5.0",
+		"@codemirror/view": "^6.35.3",
 		"@coursebuilder/adapter-drizzle": "1.0.0",
 		"@coursebuilder/commerce-next": "^0.0.9",
 		"@coursebuilder/core": "1.0.0",
@@ -55,7 +55,7 @@
 		"@heroicons/react": "^2.0.18",
 		"@hookform/resolvers": "^3.3.2",
 		"@internationalized/date": "3.5.6",
-		"@lezer/highlight": "^1.2.0",
+		"@lezer/highlight": "^1.2.1",
 		"@mdx-js/loader": "^3.1.0",
 		"@mdx-js/mdx": "^3.1.0",
 		"@mdx-js/react": "^3.1.0",

diff --git a/apps/go-local-first/package.json b/apps/go-local-first/package.json
@@ -41,11 +41,11 @@
 		"@aws-sdk/s3-request-presigner": "^3.441.0",
 		"@casl/ability": "^6.5.0",
 		"@code-hike/mdx": "^0.9.0",
-		"@codemirror/lang-markdown": "^6.2.3",
-		"@codemirror/language-data": "^6.4.1",
-		"@codemirror/search": "^6.5.6",
-		"@codemirror/state": "^6.4.1",
-		"@codemirror/view": "^6.26.0",
+		"@codemirror/lang-markdown": "^6.3.1",
+		"@codemirror/language-data": "^6.5.1",
+		"@codemirror/search": "^6.5.8",
+		"@codemirror/state": "^6.5.0",
+		"@codemirror/view": "^6.35.3",
 		"@coursebuilder/adapter-drizzle": "1.0.0",
 		"@coursebuilder/commerce-next": "^0.0.9",
 		"@coursebuilder/core": "1.0.0",
@@ -58,7 +58,7 @@
 		"@heroicons/react": "^2.0.18",
 		"@hookform/resolvers": "^3.3.2",
 		"@internationalized/date": "3.5.6",
-		"@lezer/highlight": "^1.2.0",
+		"@lezer/highlight": "^1.2.1",
 		"@mdx-js/loader": "^3.1.0",
 		"@mdx-js/mdx": "^3.1.0",
 		"@mdx-js/react": "^3.1.0",
@@ -99,11 +99,11 @@
 		"@tanstack/react-query": "5.54.1",
 		"@tanstack/react-query-devtools": "5.54.1",
 		"@tanstack/react-table": "^8.17.3",
-		"@tiptap/extension-highlight": "2.9.1",
-		"@tiptap/extension-link": "2.9.1",
-		"@tiptap/extension-typography": "2.9.1",
-		"@tiptap/react": "2.9.1",
-		"@tiptap/starter-kit": "2.9.1",
+		"@tiptap/extension-highlight": "2.10.3",
+		"@tiptap/extension-link": "2.10.3",
+		"@tiptap/extension-typography": "2.10.3",
+		"@tiptap/react": "2.10.3",
+		"@tiptap/starter-kit": "2.10.3",
 		"@trpc/client": "next",
 		"@trpc/next": "next",
 		"@trpc/react-query": "next",

diff --git a/apps/go-local-first/src/feedback-widget/feedback-context.tsx b/apps/go-local-first/src/feedback-widget/feedback-context.tsx
@@ -1,9 +1,8 @@
 'use client'
 
 import React from 'react'
-import dynamic from 'next/dynamic'
 
-// import FeedbackDialog from './feedback-dialog'
+import FeedbackDialog from './feedback-dialog'
 
 type FeedbackContextType = {
 	isFeedbackDialogOpen: boolean
@@ -31,8 +30,6 @@ export const FeedbackProvider: React.FC<React.PropsWithChildren<any>> = ({
 	const [isFeedbackDialogOpen, setIsFeedbackDialogOpen] =
 		React.useState<boolean>(false)
 	const [location, setLocation] = React.useState<string>('navigation')
-	const FeedbackDialog =
-		isFeedbackDialogOpen && dynamic(() => import('./feedback-dialog'))
 
 	return (
 		<FeedbackContext.Provider

diff --git a/apps/go-local-first/src/feedback-widget/form.tsx b/apps/go-local-first/src/feedback-widget/form.tsx
@@ -50,12 +50,8 @@ export const FeedbackForm: React.FC<
 				const isCodeQuestion = values.context.category === 'code'
 
 				return (
-					<Form
-						className="flex flex-col space-y-5"
-						placeholder=""
-						onPointerEnterCapture={undefined}
-						onPointerLeaveCapture={undefined}
-					>
+					// @ts-ignore
+					<Form className="flex flex-col space-y-5">
 						<div
 							className={cn({ 'pointer-events-none blur-sm': isCodeQuestion })}
 						>