From 52b391c2f448fe84905027ad49a5c9ed1a8cfe26 Mon Sep 17 00:00:00 2001
From: bdbch <6538827+bdbch@users.noreply.github.com>
Date: Tue, 15 Apr 2025 15:02:50 +0200
Subject: [PATCH 1/4] Feature/version switch (#149)

* added version switch

* added changeset
---
 .changeset/fair-bats-drop.md      |  5 ++++
 src/components/NavLink.tsx        | 26 +++++++++++++-----
 src/components/VersionSwitch.tsx  | 45 +++++++++++++++++++++++++++++++
 src/components/layouts/Layout.tsx | 16 ++++++-----
 src/types.ts                      |  9 +++++++
 src/utils/constants.ts            | 21 +++++++++++++++
 6 files changed, 109 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/fair-bats-drop.md
 create mode 100644 src/components/VersionSwitch.tsx

diff --git a/.changeset/fair-bats-drop.md b/.changeset/fair-bats-drop.md
new file mode 100644
index 00000000..50d3baba
--- /dev/null
+++ b/.changeset/fair-bats-drop.md
@@ -0,0 +1,5 @@
+---
+'tiptap-docs': minor
+---
+
+Added a new version switch and versioning constants to the constant config
diff --git a/src/components/NavLink.tsx b/src/components/NavLink.tsx
index a15a882d..569e8bb9 100644
--- a/src/components/NavLink.tsx
+++ b/src/components/NavLink.tsx
@@ -24,6 +24,25 @@ export const NavLink = forwardRef<HTMLAnchorElement, NavLinkProps>(
     const isActive = pathname === href
     const isActiveParent = href !== '/' && pathname.startsWith(`${href}`)
 
+    const innerLinkContent = (
+      <>
+        {children}
+        {isExternal && !hideIcon ? (
+          <ExternalLinkIcon className="size-3.5 text-grayAlpha-400" />
+        ) : null}
+      </>
+    )
+
+    const linkContent = isExternal ? (
+      <a ref={ref} target={target} href={href}>
+        {innerLinkContent}
+      </a>
+    ) : (
+      <Link ref={ref} target={target} href={href}>
+        {innerLinkContent}
+      </Link>
+    )
+
     return (
       <NavLinkButton
         isActive={isDirectActive ? isActive : isActive || isActiveParent}
@@ -31,12 +50,7 @@ export const NavLink = forwardRef<HTMLAnchorElement, NavLinkProps>(
         variant={variant}
         className={className}
       >
-        <Link ref={ref} target={target} href={href}>
-          {children}
-          {isExternal && !hideIcon ? (
-            <ExternalLinkIcon className="size-3.5 text-grayAlpha-400" />
-          ) : null}
-        </Link>
+        {linkContent}
       </NavLinkButton>
     )
   },
diff --git a/src/components/VersionSwitch.tsx b/src/components/VersionSwitch.tsx
new file mode 100644
index 00000000..325cb148
--- /dev/null
+++ b/src/components/VersionSwitch.tsx
@@ -0,0 +1,45 @@
+'use client'
+
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { ChevronDownIcon } from 'lucide-react'
+import { NavLinkButton } from './ui/NavLinkButton'
+import { NavLink } from './NavLink'
+import { Tag } from './ui/Tag'
+import { VERSIONS, CURRENT_VERSION } from '@/utils/constants'
+import type { VersionData } from '@/types'
+
+const VersionItem = ({ version }: { version: VersionData }) => {
+  return (
+    <DropdownMenu.Item asChild>
+      <NavLink href={version.url} target={version.version !== CURRENT_VERSION ? '_blank' : ''}>
+        {version.version}
+        {version.isLegacy ? <Tag className="ml-1">Legacy</Tag> : null}
+        {version.isBeta ? <Tag className="ml-1">Beta</Tag> : null}
+        {version.isAlpha ? <Tag className="ml-1">Alpha</Tag> : null}
+        {version.isRc ? <Tag className="ml-1">RC</Tag> : null}
+      </NavLink>
+    </DropdownMenu.Item>
+  )
+}
+
+export const VersionSwitch = () => {
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <NavLinkButton className="p-1 text-base">
+          {CURRENT_VERSION}
+          <ChevronDownIcon className="w-3 h-3" />
+        </NavLinkButton>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content className="z-50 flex flex-col gap-6 px-2 py-6 text-black bg-white border rounded-lg shadow-md lg:py-3 border-grayAlpha-100">
+          <div>
+            {VERSIONS.map((version) => (
+              <VersionItem key={version.version} version={version} />
+            ))}
+          </div>
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  )
+}
diff --git a/src/components/layouts/Layout.tsx b/src/components/layouts/Layout.tsx
index 64da8a97..e0a531fb 100644
--- a/src/components/layouts/Layout.tsx
+++ b/src/components/layouts/Layout.tsx
@@ -11,6 +11,7 @@ import { MobileNavigationButton } from '../MobileNavigationButton'
 import { DocsSidebar } from '../SidebarRenderer'
 import { MobileNavigationDropdown } from '../MobileNavigationDropdown'
 import { SidebarTableOfContent } from '../SidebarTableOfContent'
+import { VersionSwitch } from '../VersionSwitch'
 import Link from '@/components/Link'
 import { cn } from '@/utils'
 import { getAllMetadata } from '@/server/getAllMetadata'
@@ -38,7 +39,8 @@ export const LayoutHeader = forwardRef<HTMLDivElement, { config?: SidebarConfig
                 <span className="font-semibold">Tiptap</span> Docs
               </span>
             </Link>
-            <span className="hidden lg:block select-none text-black/15">/</span>
+            <VersionSwitch />
+            <span className="hidden select-none lg:block text-black/15">/</span>
             <nav className="hidden lg:flex items-center gap-[0.5px]">
               <ProductDropdown />
               <NavLink href="/guides">Guides</NavLink>
@@ -49,11 +51,11 @@ export const LayoutHeader = forwardRef<HTMLDivElement, { config?: SidebarConfig
               </NavLink>
             </nav>
           </div>
-          <div className="ml-auto flex items-center gap-2">
+          <div className="flex items-center gap-2 ml-auto">
             <div className="hidden xl:block">
               <SearchButton />
             </div>
-            <div className="hidden lg:flex items-center gap-1 xl:hidden">
+            <div className="items-center hidden gap-1 lg:flex xl:hidden">
               <ToCButton />
               <SearchButton />
             </div>
@@ -73,11 +75,11 @@ export const LayoutHeader = forwardRef<HTMLDivElement, { config?: SidebarConfig
           </div>
         </div>
         <div className="block lg:hidden py-1.5 bg-white px-[1.125rem] shadow-slim rounded-bl-pilled rounded-br-pilled border-t border-neutral-200">
-          <div className="h-8 py-1 flex items-center">
-            <div className="mr-auto flex items-center gap-2">
+          <div className="flex items-center h-8 py-1">
+            <div className="flex items-center gap-2 mr-auto">
               <MobileNavigationButton config={config} />
             </div>
-            <div className="ml-auto flex items-center gap-2">
+            <div className="flex items-center gap-2 ml-auto">
               <ToCButton />
               <SearchButton />
             </div>
@@ -175,7 +177,7 @@ export const LayoutContent = forwardRef<HTMLDivElement, LayoutContentProps>(
         <div className="pt-6 pb-16 sm:pb-24 sm:pt-8 lg:pb-32 lg:pt-10">{children}</div>
 
         <footer className="border-t border-grayAlpha-300 pt-8 pb-[3.125rem]">
-          <div className="flex flex-col lg:flex-row items-start justify-between gap-4">
+          <div className="flex flex-col items-start justify-between gap-4 lg:flex-row">
             <div className="flex flex-col items-start flex-none">
               <PageEditFooter />
             </div>
diff --git a/src/types.ts b/src/types.ts
index bb2f81c6..be52246d 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -148,3 +148,12 @@ export interface UIComponentMetaWithUrl extends UIComponentMeta {
   path: string
   url: string
 }
+
+export type VersionData = {
+  version: string
+  url: string
+  isBeta?: boolean
+  isAlpha?: boolean
+  isRc?: boolean
+  isLegacy?: boolean
+}
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 30cd01e8..a29105ff 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -1,3 +1,5 @@
+import type { VersionData } from '@/types'
+
 export const DEMO_URL = process.env.NEXT_PUBLIC_DEMO_URL ?? 'https://embed.tiptap.dev/preview'
 
 export const PRO_DEMO_URL =
@@ -9,3 +11,22 @@ export const FULL_DOMAIN = `${DOMAIN}${BASE_PATH}`
 
 export const GTM_ID = process.env.NEXT_PUBLIC_GTM_ID || null
 export const ENVIRONMENT = process.env.NEXT_PUBLIC_ENVIRONMENT || 'development'
+
+export const CURRENT_VERSION = '3.x'
+
+export const VERSIONS: Array<VersionData> = [
+  {
+    version: '1.x',
+    isLegacy: true,
+    url: 'https://v1.tiptap.dev/',
+  },
+  {
+    version: '2.x',
+    url: 'https://tiptap.dev/docs',
+  },
+  {
+    version: '3.x',
+    isBeta: true,
+    url: 'https://next.tiptap.dev',
+  },
+]

From 53d22366c74f24ec3abc5b358c509cb39237810b Mon Sep 17 00:00:00 2001
From: Dominik Biedebach <dominik@bdbch.com>
Date: Tue, 15 Apr 2025 15:19:49 +0200
Subject: [PATCH 2/4] added version picker for stable

---
 src/utils/constants.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index a29105ff..92d5f3c9 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -12,7 +12,7 @@ export const FULL_DOMAIN = `${DOMAIN}${BASE_PATH}`
 export const GTM_ID = process.env.NEXT_PUBLIC_GTM_ID || null
 export const ENVIRONMENT = process.env.NEXT_PUBLIC_ENVIRONMENT || 'development'
 
-export const CURRENT_VERSION = '3.x'
+export const CURRENT_VERSION = '2.x'
 
 export const VERSIONS: Array<VersionData> = [
   {

From 2f41d9992dc697324d04227cd14cc6a0458df6f2 Mon Sep 17 00:00:00 2001
From: bdbch <6538827+bdbch@users.noreply.github.com>
Date: Tue, 15 Apr 2025 15:31:16 +0200
Subject: [PATCH 3/4] refactored version picker (#150)

---
 src/components/NavLink.tsx       | 26 ++++++--------------------
 src/components/VersionSwitch.tsx | 15 +++++++++++----
 src/types.ts                     |  2 +-
 3 files changed, 18 insertions(+), 25 deletions(-)

diff --git a/src/components/NavLink.tsx b/src/components/NavLink.tsx
index 569e8bb9..a15a882d 100644
--- a/src/components/NavLink.tsx
+++ b/src/components/NavLink.tsx
@@ -24,25 +24,6 @@ export const NavLink = forwardRef<HTMLAnchorElement, NavLinkProps>(
     const isActive = pathname === href
     const isActiveParent = href !== '/' && pathname.startsWith(`${href}`)
 
-    const innerLinkContent = (
-      <>
-        {children}
-        {isExternal && !hideIcon ? (
-          <ExternalLinkIcon className="size-3.5 text-grayAlpha-400" />
-        ) : null}
-      </>
-    )
-
-    const linkContent = isExternal ? (
-      <a ref={ref} target={target} href={href}>
-        {innerLinkContent}
-      </a>
-    ) : (
-      <Link ref={ref} target={target} href={href}>
-        {innerLinkContent}
-      </Link>
-    )
-
     return (
       <NavLinkButton
         isActive={isDirectActive ? isActive : isActive || isActiveParent}
@@ -50,7 +31,12 @@ export const NavLink = forwardRef<HTMLAnchorElement, NavLinkProps>(
         variant={variant}
         className={className}
       >
-        {linkContent}
+        <Link ref={ref} target={target} href={href}>
+          {children}
+          {isExternal && !hideIcon ? (
+            <ExternalLinkIcon className="size-3.5 text-grayAlpha-400" />
+          ) : null}
+        </Link>
       </NavLinkButton>
     )
   },
diff --git a/src/components/VersionSwitch.tsx b/src/components/VersionSwitch.tsx
index 325cb148..f360f68c 100644
--- a/src/components/VersionSwitch.tsx
+++ b/src/components/VersionSwitch.tsx
@@ -8,15 +8,22 @@ import { Tag } from './ui/Tag'
 import { VERSIONS, CURRENT_VERSION } from '@/utils/constants'
 import type { VersionData } from '@/types'
 
+const getItemLabel = ({ version }: { version: VersionData }) => {
+  if (version.isLegacy) return 'Legacy'
+  if (version.isBeta) return 'Beta'
+  if (version.isAlpha) return 'Alpha'
+  if (version.isRc) return 'RC'
+  return false
+}
+
 const VersionItem = ({ version }: { version: VersionData }) => {
+  const label = getItemLabel({ version })
+
   return (
     <DropdownMenu.Item asChild>
       <NavLink href={version.url} target={version.version !== CURRENT_VERSION ? '_blank' : ''}>
         {version.version}
-        {version.isLegacy ? <Tag className="ml-1">Legacy</Tag> : null}
-        {version.isBeta ? <Tag className="ml-1">Beta</Tag> : null}
-        {version.isAlpha ? <Tag className="ml-1">Alpha</Tag> : null}
-        {version.isRc ? <Tag className="ml-1">RC</Tag> : null}
+        {label ? <Tag className="ml-1">{label}</Tag> : null}
       </NavLink>
     </DropdownMenu.Item>
   )
diff --git a/src/types.ts b/src/types.ts
index be52246d..0aaf32ff 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -149,7 +149,7 @@ export interface UIComponentMetaWithUrl extends UIComponentMeta {
   url: string
 }
 
-export type VersionData = {
+export interface VersionData {
   version: string
   url: string
   isBeta?: boolean

From e31ba3949b4f5660667d4c0e58b8b3b595cee9e8 Mon Sep 17 00:00:00 2001
From: Dominik Biedebach <dominik.biedebach@ueber.io>
Date: Mon, 5 May 2025 15:59:54 +0200
Subject: [PATCH 4/4] update version switch

---
 src/components/VersionSwitch.tsx |  3 ++-
 src/utils/constants.ts           | 12 ++++++------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/VersionSwitch.tsx b/src/components/VersionSwitch.tsx
index f360f68c..b20e6934 100644
--- a/src/components/VersionSwitch.tsx
+++ b/src/components/VersionSwitch.tsx
@@ -18,10 +18,11 @@ const getItemLabel = ({ version }: { version: VersionData }) => {
 
 const VersionItem = ({ version }: { version: VersionData }) => {
   const label = getItemLabel({ version })
+  const isCurrentVersion = version.version === CURRENT_VERSION
 
   return (
     <DropdownMenu.Item asChild>
-      <NavLink href={version.url} target={version.version !== CURRENT_VERSION ? '_blank' : ''}>
+      <NavLink href={version.url} target={!isCurrentVersion ? '_blank' : ''} hideIcon>
         {version.version}
         {label ? <Tag className="ml-1">{label}</Tag> : null}
       </NavLink>
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 92d5f3c9..1d2599bb 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -16,17 +16,17 @@ export const CURRENT_VERSION = '2.x'
 
 export const VERSIONS: Array<VersionData> = [
   {
-    version: '1.x',
-    isLegacy: true,
-    url: 'https://v1.tiptap.dev/',
+    version: '3.x',
+    isBeta: true,
+    url: 'https://next.tiptap.dev',
   },
   {
     version: '2.x',
     url: 'https://tiptap.dev/docs',
   },
   {
-    version: '3.x',
-    isBeta: true,
-    url: 'https://next.tiptap.dev',
+    version: '1.x',
+    isLegacy: true,
+    url: 'https://v1.tiptap.dev/',
   },
 ]