feat(dashboard): unify visual editor UI with live docs for section names and subtitles

packages/fern-dashboard/src/app/[orgName]/(visual-editor)/editor/[docsUrl]/[branch]/[...slug]/PageContents.tsx

@@ -1,35 +1,100 @@
 "use client";
 
+import * as FernNavigation from "@fern-api/fdr-sdk/navigation";
+import { FernLink } from "@fern-docs/components/FernLink";
+import type { SerializableFoundNode } from "@fern-docs/components/navigation";
+import { constructEditorSlug } from "@fern-docs/components/navigation";
 import type { MdxToHtmlResponse } from "@fern-docs/mdx";
+import { ChevronRight } from "lucide-react";
+import { Fragment, type ReactElement } from "react";
+
+import { useOrgName } from "@/app/[orgName]/context/OrgNameContext";
+import { useBranch } from "@/providers/BranchContext";
+import { useGitHubRepo } from "@/providers/GitHubRepoContext";
+import type { EncodedDocsUrl } from "@/utils/types";
 
 import PageEditor from "./PageEditor";
 import PageSubtitle from "./PageSubtitle";
 import PageTitle from "./PageTitle";
 
+/**
+ * Editor-aware breadcrumbs component that generates proper editor URLs
+ * instead of absolute paths that would navigate outside the editor context.
+ */
+function EditorAwareBreadcrumbs({
+    breadcrumb
+}: {
+    breadcrumb: readonly FernNavigation.BreadcrumbItem[];
+}): ReactElement<any> | null {
+    const orgName = useOrgName();
+    const { branch } = useBranch();
+    const { docsUrl } = useGitHubRepo();
+
+    const filteredBreadcrumbs = breadcrumb.filter((item) => item.title.trim().length > 0);
+
+    if (filteredBreadcrumbs.length === 0) {
+        return null;
+    }
+
+    return (
+        <span className="fern-breadcrumb">
+            {filteredBreadcrumbs.map((breadcrumb, idx) => (
+                <Fragment key={idx}>
+                    {idx > 0 && <ChevronRight className="fern-breadcrumb-arrow" />}
+                    {breadcrumb.pointsTo != null ? (
+                        <FernLink
+                            className="fern-breadcrumb-item"
+                            href={constructEditorSlug({
+                                orgName: orgName as any,
+                                docsUrl: docsUrl as EncodedDocsUrl,
+                                branchName: branch,
+                                slug: breadcrumb.pointsTo
+                            })}
+                            scroll={true}
+                        >
+                            {breadcrumb.title}
+                        </FernLink>
+                    ) : (
+                        <span className="fern-breadcrumb-item">{breadcrumb.title}</span>
+                    )}
+                </Fragment>
+            ))}
+        </span>
+    );
+}
+
 export declare namespace PageContents {
     export interface Props {
         filename: string;
         initialHtml: MdxToHtmlResponse["html"];
         initialFrontmatter: MdxToHtmlResponse["frontmatter"];
+        foundNode?: SerializableFoundNode;
     }
 }
 
-export default function PageContents({ filename, initialHtml, initialFrontmatter }: PageContents.Props) {
+export default function PageContents({ filename, initialHtml, initialFrontmatter, foundNode }: PageContents.Props) {
     const { title, subtitle, layout } = initialFrontmatter ?? {};
 
     const hidePageHeader = layout === "custom";
 
+    const breadcrumb = foundNode ? FernNavigation.utils.createBreadcrumb(foundNode.parents) : [];
+
     return (
         <div className="max-w-content-width-wide mx-auto w-full pb-64">
             {!hidePageHeader && (
-                <>
+                <div className="mx-5">
+                    {breadcrumb.length > 0 && (
+                        <div className="mb-2">
+                            <EditorAwareBreadcrumbs breadcrumb={breadcrumb} />
+                        </div>
+                    )}
                     <PageTitle className="w-full" filename={filename} initialText={title ? String(title) : undefined} />
                     <PageSubtitle
                         className="w-full"
                         filename={filename}
                         initialText={subtitle ? String(subtitle) : undefined}
                     />
-                </>
+                </div>
             )}
             <PageEditor className="-m-2 w-full p-3" filename={filename} initialHtml={initialHtml} />
         </div>

packages/fern-dashboard/src/app/[orgName]/(visual-editor)/editor/[docsUrl]/[branch]/[...slug]/PageNode.tsx

@@ -99,6 +99,7 @@ export default function PageNode(props: PageNode.Props) {
                     filename={initialPageData.filename}
                     initialHtml={initialPageData.html}
                     initialFrontmatter={initialPageData.frontmatter}
+                    foundNode={found}
                 />
             </CSSProvider>
         </>

packages/fern-dashboard/src/app/[orgName]/(visual-editor)/editor/[docsUrl]/[branch]/[...slug]/PageSubtitle.tsx

@@ -39,9 +39,9 @@ export default function PageSubtitle({ className, filename, initialText }: PageS
     }
 
     return (
-        <div className={cn("flex", className)}>
+        <div className={cn("flex mt-2", className)}>
             <AutoResizingInput
-                className="mx-5 text-base"
+                className="break-words leading-7 text-(color:--grayscale-a11)"
                 name="subtitle"
                 onChange={onChange}
                 disabled={isEditingDisabled}

packages/fern-dashboard/src/app/[orgName]/(visual-editor)/editor/[docsUrl]/[branch]/[...slug]/PageTitle.tsx

@@ -39,7 +39,7 @@ export default function PageTitle({ className, filename, initialText }: PageTitl
         <div className={["flex", className].join(" ")}>
             <h1 className="fern-page-heading mb-3 h-fit w-full font-extrabold">
                 <AutoResizingInput
-                    className="mx-5 font-extrabold"
+                    className="font-extrabold"
                     name="title"
                     onChange={onChange}
                     placeholder="Add a title"

packages/fern-docs/bundle/src/components/PageHeader.tsx

@@ -1,15 +1,14 @@
 import "server-only";
 
 import type { FernNavigation } from "@fern-api/fdr-sdk";
+import { FernBreadcrumbs } from "@fern-docs/components/FernBreadcrumbs";
 import type { FernDropdown } from "@fern-docs/components/FernDropdown";
 import { FernLink } from "@fern-docs/components/FernLink";
 import { ChevronLeft } from "lucide-react";
 import React from "react";
-
 import { MdxServerComponent } from "@/mdx/components/server-component";
 import type { MdxSerializer } from "@/server/mdx-serializer";
 
-import { FernBreadcrumbs } from "./FernBreadcrumbs";
 import { PageActionsDropdown } from "./PageActionsDropdown";
 import { PageFilters } from "./PageFilters";
 import { RSSFeedButton } from "./RSSFeedButton";

packages/fern-docs/components/src/FernBreadcrumbs.scss

@@ -0,0 +1,13 @@
+@layer components {
+  .fern-breadcrumb {
+    @apply inline-flex h-fit max-w-full flex-wrap items-baseline font-medium;
+
+    .fern-breadcrumb-item {
+      @apply text-(color:--accent-a11) min-w-0 shrink text-sm;
+    }
+
+    .fern-breadcrumb-arrow {
+      @apply text-(color:--grayscale-a9) mx-0.5 size-4 self-center;
+    }
+  }
+}

packages/fern-docs/bundle/src/components/FernBreadcrumbs.tsx → packages/fern-docs/components/src/FernBreadcrumbs.tsx

@@ -2,9 +2,9 @@
 
 import { slugToHref } from "@fern-api/docs-utils";
 import type { FernNavigation } from "@fern-api/fdr-sdk";
-import { FernLink } from "@fern-docs/components/FernLink";
 import { ChevronRight } from "lucide-react";
 import { Fragment, type ReactElement } from "react";
+import { FernLink } from "./FernLink";
 
 export interface FernBreadcrumbsProps {
     breadcrumb: readonly FernNavigation.BreadcrumbItem[];

packages/fern-docs/components/src/index.css

@@ -9,6 +9,7 @@
 @import "./FernScrollArea.scss";
 @import "./FernSegmentedControl.scss";
 @import "./FernHighlight.scss";
+@import "./FernBreadcrumbs.scss";
 @import "./badges/index.scss";
 @import "./kbd.css";
 @import "./accordion.scss";