# Google Drive
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

# OneDrive
ONEDRIVE_CLIENT_ID=
ONEDRIVE_CLIENT_SECRET=

# GitHub
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=

# Dropbox
DROPBOX_APP_KEY=
DROPBOX_APP_SECRET=

# Bitbucket
BITBUCKET_CLIENT_ID=
BITBUCKET_CLIENT_SECRET=

# App URL (CRITICAL - used for all OAuth redirects)
NEXT_PUBLIC_APP_URL=https://your-production-domain.com

# Node Environment
NODE_ENV=production

https://your-production-domain.com/api/google-drive/callback
https://your-production-domain.com/api/onedrive/callback
https://your-production-domain.com/api/github/callback
https://your-production-domain.com/api/dropbox/callback
https://your-production-domain.com/api/bitbucket/callback

dillinger-next/
├── app/
│   ├── layout.tsx              # Root layout with providers
│   ├── page.tsx                # Main editor page
│   ├── globals.css             # Tailwind + custom CSS
│   └── api/
│       ├── export/
│       │   ├── html/route.ts
│       │   ├── pdf/route.ts
│       │   └── markdown/route.ts
│       ├── convert/
│       │   └── html-to-md/route.ts
│       ├── github/
│       │   ├── oauth/route.ts
│       │   ├── callback/route.ts
│       │   ├── orgs/route.ts
│       │   ├── repos/route.ts
│       │   ├── branches/route.ts
│       │   ├── files/route.ts
│       │   └── save/route.ts
│       └── dropbox/
│           ├── oauth/route.ts
│           ├── callback/route.ts
│           ├── files/route.ts
│           └── save/route.ts
├── components/
│   ├── editor/
│   │   ├── MonacoEditor.tsx
│   │   └── EditorToolbar.tsx
│   ├── preview/
│   │   └── MarkdownPreview.tsx
│   ├── sidebar/
│   │   ├── Sidebar.tsx
│   │   └── DocumentList.tsx
│   ├── navbar/
│   │   └── Navbar.tsx
│   ├── modals/
│   │   ├── GitHubModal.tsx
│   │   ├── DropboxModal.tsx
│   │   ├── DeleteModal.tsx
│   │   └── SettingsModal.tsx
│   └── ui/
│       ├── Toast.tsx
│       ├── Button.tsx
│       ├── Modal.tsx
│       └── Switch.tsx
├── hooks/
│   ├── useDocuments.ts
│   ├── useUserSettings.ts
│   ├── useGitHub.ts
│   ├── useDropbox.ts
│   └── useMarkdown.ts
├── stores/
│   └── store.ts
├── lib/
│   ├── markdown.ts
│   └── storage.ts
└── tailwind.config.ts

interface Document {
  id: string;
  title: string;
  body: string;
  createdAt: Date;
  github?: {
    sha: string;
    path: string;
    repo: string;
    owner: string;
    branch: string;
  };
}

interface UserSettings {
  enableAutoSave: boolean;
  enableWordsCount: boolean;
  enableScrollSync: boolean;
  tabSize: number;
  keybindings: 'default' | 'vim' | 'emacs';
  enableNightMode: boolean;
}

interface AppState {
  documents: Document[];
  currentDocument: Document | null;
  settings: UserSettings;
  sidebarOpen: boolean;
  settingsOpen: boolean;
  previewVisible: boolean;
  zenMode: boolean;

  // Actions
  createDocument: () => void;
  selectDocument: (id: string) => void;
  deleteDocument: (id: string) => void;
  updateDocumentBody: (body: string) => void;
  updateDocumentTitle: (title: string) => void;
  updateSettings: (settings: Partial<UserSettings>) => void;
  hydrate: () => void;
  persist: () => void;
}

const config: Config = {
  content: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        plum: '#35D7BB',
        'bg-primary': '#ffffff',
        'bg-sidebar': '#2B2F36',
        'bg-navbar': '#373D49',
        'bg-highlight': '#1D212A',
        'bg-button-save': '#4A5261',
        'text-primary': '#373D49',
        'text-invert': '#ffffff',
        'text-muted': '#A0AABF',
        'border-light': '#E8E8E8',
        'border-settings': '#4F535B',
        'icon-default': '#D3DAEA',
        'dropdown-link': '#D0D6E2',
        'switchery': '#4B5363',
      },
      fontFamily: {
        sans: ['"Source Sans Pro"', 'sans-serif'],
        serif: ['Georgia', 'Cambria', 'serif'],
        mono: ['"Ubuntu Mono"', 'Monaco', 'monospace'],
      },
      spacing: {
        sidebar: '270px',
        gutter: '32px',
      },
      zIndex: {
        sidebar: '1',
        page: '2',
        editor: '3',
        preview: '4',
        overlay: '5',
        navbar: '6',
        settings: '7',
      },
    },
  },
};

export default function EditorPage() {
  return (
    <div className="h-screen flex overflow-hidden">
      <Sidebar />
      <main className="flex-1 flex flex-col">
        <Navbar />
        <DocumentTitle />
        <div className="flex-1 flex">
          <ResizablePanel>
            <MonacoEditor />
          </ResizablePanel>
          <ResizablePanel>
            <MarkdownPreview />
          </ResizablePanel>
        </div>
      </main>
      <ModalProvider />
    </div>
  );
}

<Editor
  height="100%"
  language="markdown"
  theme={settings.enableNightMode ? 'vs-dark' : 'vs'}
  value={currentDocument?.body ?? ''}
  onChange={handleChange}
  options={{
    fontSize: 14,
    fontFamily: '"Ubuntu Mono", Monaco, monospace',
    lineHeight: 24,
    wordWrap: 'on',
    minimap: { enabled: false },
    lineNumbers: 'off',
    tabSize: settings.tabSize,
    scrollBeyondLastLine: false,
    automaticLayout: true,
  }}
/>

import MarkdownIt from 'markdown-it';
// + 8 plugins: abbr, checkbox, deflist, footnote, ins, mark, sub, sup, toc
// + highlight.js for code syntax
// + KaTeX for math

export const md = new MarkdownIt({
  html: true,
  linkify: true,
  typographer: true,
  highlight: (str, lang) => hljs.highlight(str, { language: lang }).value,
})
  .use(markdownItAbbr)
  .use(markdownItCheckbox)
  // ... all plugins

const { notify } = useToast();
notify('Document saved successfully');
notify('Uploading...', 5000);  // Custom duration
notify('Processing...', 0);    // Persistent

function useGitHub() {
  return {
    isAuthenticated,
    orgs, repos, branches, files,
    current: { owner, repo, branch, path, sha },
    authenticate,
    fetchOrgs,
    fetchRepos,
    fetchBranches,
    fetchFiles,
    saveFile,
  };
}

{
  "next": "^14.0.0",
  "@monaco-editor/react": "^4.6.0",
  "markdown-it": "^14.0.0",
  "markdown-it-*": "various plugins",
  "highlight.js": "^11.0.0",
  "katex": "^0.16.0",
  "zustand": "^4.4.0",
  "lucide-react": "^0.300.0",
  "md-to-pdf": "^5.0.0",
  "breakdance": "^4.0.0"
}

{
  "typescript": "^5.0.0",
  "tailwindcss": "^3.4.0",
  "@types/node": "^20.0.0",
  "@types/react": "^18.0.0"
}

# GitHub OAuth
GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_github_client_secret

# Dropbox OAuth
DROPBOX_APP_KEY=your_dropbox_app_key
DROPBOX_APP_SECRET=your_dropbox_app_secret

# App URL (for OAuth callbacks)
NEXT_PUBLIC_BASE_URL=http://localhost:3000

cp .env.local.example .env.local

.env*.local

git add .env.local.example && git commit -m "docs: add environment variables example for OAuth"

import { NextResponse } from "next/server";

export async function GET() {
  const clientId = process.env.GITHUB_CLIENT_ID;
  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;

  if (!clientId || !baseUrl) {
    return NextResponse.json(
      { error: "GitHub OAuth not configured" },
      { status: 500 }
    );
  }

  const redirectUri = `${baseUrl}/api/github/callback`;
  const scope = "repo,user";

  const authUrl = new URL("https://github.com/login/oauth/authorize");
  authUrl.searchParams.set("client_id", clientId);
  authUrl.searchParams.set("redirect_uri", redirectUri);
  authUrl.searchParams.set("scope", scope);

  return NextResponse.redirect(authUrl.toString());
}

/* Detailed source-code truncated for AI context efficiency. */

git add app/api/github/oauth/route.ts app/api/github/callback/route.ts && git commit -m "feat: add GitHub OAuth routes"

import { NextResponse } from "next/server";
import { cookies } from "next/headers";

export async function GET() {
  const cookieStore = await cookies();
  const token = cookieStore.get("github_token")?.value;

  if (!token) {
    return NextResponse.json({ connected: false });
  }

  try {
    // Verify token is still valid by fetching user
    const response = await fetch("https://api.github.com/user", {
      headers: {
        Authorization: `Bearer ${token}`,
        Accept: "application/vnd.github.v3+json",
      },
    });

    if (!response.ok) {
      return NextResponse.json({ connected: false });
    }

    const user = await response.json();

    return NextResponse.json({
      connected: true,
      user: {
        login: user.login,
        name: user.name,
        avatar_url: user.avatar_url,
      },
    });
  } catch (error) {
    return NextResponse.json({ connected: false });
  }
}

import { NextResponse } from "next/server";
import { cookies } from "next/headers";

export async function POST() {
  const cookieStore = await cookies();
  cookieStore.delete("github_token");

  return NextResponse.json({ success: true });
}

git add app/api/github/status/route.ts app/api/github/unlink/route.ts && git commit -m "feat: add GitHub status and unlink routes"

import { NextResponse } from "next/server";
import { cookies } from "next/headers";

export async function GET() {
  const cookieStore = await cookies();
  const token = cookieStore.get("github_token")?.value;

  if (!token) {
    return NextResponse.json({ error: "Not authenticated" }, { status: 401 });
  }

  try {
    // Fetch user first
    const userResponse = await fetch("https://api.github.com/user", {
      headers: {
        Authorization: `Bearer ${token}`,
        Accept: "application/vnd.github.v3+json",
      },
    });

    const user = await userResponse.json();

    // Fetch organizations
    const orgsResponse = await fetch("https://api.github.com/user/orgs", {
      headers: {
        Authorization: `Bearer ${token}`,
        Accept: "application/vnd.github.v3+json",
      },
    });

    const orgs = await orgsResponse.json();

    // Prepend user as first "org" option
    const allOrgs = [{ login: user.login, type: "user" }, ...orgs];

    return NextResponse.json(allOrgs);
  } catch (error) {
    console.error("GitHub orgs error:", error);
    return NextResponse.json({ error: "Failed to fetch organizations" }, { status: 500 });
  }
}

/* Detailed source-code truncated for AI context efficiency. */

import { NextRequest, NextResponse } from "next/server";
import { cookies } from "next/headers";

export async function GET(request: NextRequest) {
  const cookieStore = await cookies();
  const token = cookieStore.get("github_token")?.value;

  if (!token) {
    return NextResponse.json({ error: "Not authenticated" }, { status: 401 });
  }

  const searchParams = request.nextUrl.searchParams;
  const owner = searchParams.get("owner");
  const repo = searchParams.get("repo");

  if (!owner || !repo) {
    return NextResponse.json({ error: "Owner and repo are required" }, { status: 400 });
  }

  try {
    const response = await fetch(
      `https://api.github.com/repos/${owner}/${repo}/branches`,
      {
        headers: {
          Authorization: `Bearer ${token}`,
          Accept: "application/vnd.github.v3+json",
        },
      }
    );

    if (!response.ok) {
      throw new Error(`GitHub API error: ${response.status}`);
    }

    const branches = await response.json();

    return NextResponse.json(
      branches.map((branch: any) => ({
        name: branch.name,
        sha: branch.commit.sha,
      }))
    );
  } catch (error) {
    console.error("GitHub branches error:", error);
    return NextResponse.json({ error: "Failed to fetch branches" }, { status: 500 });
  }
}

/* Detailed source-code truncated for AI context efficiency. */

git add app/api/github/orgs/route.ts app/api/github/repos/route.ts app/api/github/branches/route.ts app/api/github/files/route.ts && git commit -m "feat: add GitHub data routes (orgs, repos, branches, files)"

/* Detailed source-code truncated for AI context efficiency. */

git add app/api/github/save/route.ts && git commit -m "feat: add GitHub save route"

/* Detailed source-code truncated for AI context efficiency. */

git add hooks/useGitHub.ts && git commit -m "feat: add useGitHub hook for GitHub integration"

/* Detailed source-code truncated for AI context efficiency. */

git add components/modals/GitHubModal.tsx && git commit -m "feat: add GitHubModal component"

npm install dropbox

git add package.json package-lock.json && git commit -m "feat: add Dropbox SDK dependency"

import { NextResponse } from "next/server";
import { Dropbox } from "dropbox";

export async function GET() {
  const clientId = process.env.DROPBOX_APP_KEY;
  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;

  if (!clientId || !baseUrl) {
    return NextResponse.json(
      { error: "Dropbox OAuth not configured" },
      { status: 500 }
    );
  }

  const redirectUri = `${baseUrl}/api/dropbox/callback`;

  const dbx = new Dropbox({ clientId });
  const authUrl = await dbx.auth.getAuthenticationUrl(
    redirectUri,
    undefined,
    "code",
    "offline",
    undefined,
    undefined,
    false
  );

  return NextResponse.redirect(authUrl.toString());
}

/* Detailed source-code truncated for AI context efficiency. */

import { NextResponse } from "next/server";
import { cookies } from "next/headers";
import { Dropbox } from "dropbox";

export async function GET() {
  const cookieStore = await cookies();
  const tokenCookie = cookieStore.get("dropbox_token")?.value;

  if (!tokenCookie) {
    return NextResponse.json({ connected: false });
  }

  try {
    const { access_token } = JSON.parse(tokenCookie);

    const dbx = new Dropbox({ accessToken: access_token });
    const account = await dbx.usersGetCurrentAccount();

    return NextResponse.json({
      connected: true,
      user: {
        name: account.result.name.display_name,
        email: account.result.email,
      },
    });
  } catch (error) {
    return NextResponse.json({ connected: false });
  }
}

import { NextResponse } from "next/server";
import { cookies } from "next/headers";

export async function POST() {
  const cookieStore = await cookies();
  cookieStore.delete("dropbox_token");

  return NextResponse.json({ success: true });
}

git add app/api/dropbox/ && git commit -m "feat: add Dropbox OAuth routes"

/* Detailed source-code truncated for AI context efficiency. */

import { NextRequest, NextResponse } from "next/server";
import { cookies } from "next/headers";
import { Dropbox } from "dropbox";

export async function POST(request: NextRequest) {
  const cookieStore = await cookies();
  const tokenCookie = cookieStore.get("dropbox_token")?.value;

  if (!tokenCookie) {
    return NextResponse.json({ error: "Not authenticated" }, { status: 401 });
  }

  try {
    const { path, content } = await request.json();

    if (!path || content === undefined) {
      return NextResponse.json(
        { error: "Path and content are required" },
        { status: 400 }
      );
    }

    const { access_token } = JSON.parse(tokenCookie);
    const dbx = new Dropbox({ accessToken: access_token });

    // Ensure path starts with /
    const filePath = path.startsWith("/") ? path : `/${path}`;

    const response = await dbx.filesUpload({
      path: filePath,
      contents: content,
      mode: { ".tag": "overwrite" },
    });

    return NextResponse.json({
      success: true,
      path: response.result.path_lower,
      name: response.result.name,
    });
  } catch (error) {
    console.error("Dropbox save error:", error);
    return NextResponse.json({ error: "Failed to save file" }, { status: 500 });
  }
}

git add app/api/dropbox/files/route.ts app/api/dropbox/save/route.ts && git commit -m "feat: add Dropbox files and save routes"

/* Detailed source-code truncated for AI context efficiency. */

git add hooks/useDropbox.ts && git commit -m "feat: add useDropbox hook for Dropbox integration"

/* Detailed source-code truncated for AI context efficiency. */

git add components/modals/DropboxModal.tsx && git commit -m "feat: add DropboxModal component"

/* Detailed source-code truncated for AI context efficiency. */

git add components/sidebar/Sidebar.tsx && git commit -m "feat: integrate GitHub and Dropbox into Sidebar"

npm run dev

npm run build

git add -A && git commit -m "feat: complete Phase 2 - GitHub and Dropbox integrations"

GITHUB_CLIENT_ID=xxx
GITHUB_CLIENT_SECRET=xxx
DROPBOX_APP_KEY=xxx
DROPBOX_APP_SECRET=xxx
NEXT_PUBLIC_BASE_URL=http://localhost:3000

cd /Users/joemccann/dev/vercel/dillinger/.worktrees/nextjs-migration
npx create-next-app@latest next-app --typescript --tailwind --eslint --app --src-dir=false --import-alias="@/*" --use-npm

ls next-app/

cd next-app && git add -A && git commit -m "feat: initialize Next.js 14 project with TypeScript and Tailwind"

cd /Users/joemccann/dev/vercel/dillinger/.worktrees/nextjs-migration/next-app
npm install @monaco-editor/react zustand lucide-react

npm install markdown-it markdown-it-abbr markdown-it-checkbox markdown-it-deflist markdown-it-footnote markdown-it-ins markdown-it-mark markdown-it-sub markdown-it-sup markdown-it-toc-done-right highlight.js katex

npm install -D @types/markdown-it

npm ls @monaco-editor/react zustand markdown-it

git add package.json package-lock.json && git commit -m "feat: add core dependencies (Monaco, Zustand, markdown-it)"

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        plum: "#35D7BB",
        "bg-primary": "#ffffff",
        "bg-sidebar": "#2B2F36",
        "bg-navbar": "#373D49",
        "bg-highlight": "#1D212A",
        "bg-button-save": "#4A5261",
        "text-primary": "#373D49",
        "text-invert": "#ffffff",
        "text-muted": "#A0AABF",
        "border-light": "#E8E8E8",
        "border-settings": "#4F535B",
        "icon-default": "#D3DAEA",
        "dropdown-link": "#D0D6E2",
        switchery: "#4B5363",
      },
      fontFamily: {
        sans: ['"Source Sans Pro"', '"Helvetica Neue"', "Helvetica", "Arial", "sans-serif"],
        serif: ["Georgia", "Cambria", "serif"],
        mono: ['"Ubuntu Mono"', "Monaco", "monospace"],
      },
      spacing: {
        sidebar: "270px",
        gutter: "32px",
      },
      zIndex: {
        sidebar: "1",
        page: "2",
        editor: "3",
        preview: "4",
        overlay: "5",
        navbar: "6",
        settings: "7",
      },
    },
  },
  plugins: [],
};

export default config;

import type { Metadata } from "next";
import { Source_Sans_3 } from "next/font/google";
import "./globals.css";

const sourceSans = Source_Sans_3({
  subsets: ["latin"],
  variable: "--font-source-sans",
});

export const metadata: Metadata = {
  title: "Dillinger - Online Markdown Editor",
  description: "The last Markdown editor you'll ever need",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`${sourceSans.variable} font-sans`}>{children}</body>
    </html>
  );
}

npm run build

git add tailwind.config.ts app/layout.tsx && git commit -m "feat: configure Tailwind with Dillinger design tokens"

export interface Document {
  id: string;
  title: string;
  body: string;
  createdAt: string;
  github?: {
    sha: string;
    path: string;
    repo: string;
    owner: string;
    branch: string;
  };
}

export interface UserSettings {
  enableAutoSave: boolean;
  enableWordsCount: boolean;
  enableCharactersCount: boolean;
  enableScrollSync: boolean;
  tabSize: number;
  keybindings: "default" | "vim" | "emacs";
  enableNightMode: boolean;
  enableGitHubComment: boolean;
}

export const DEFAULT_SETTINGS: UserSettings = {
  enableAutoSave: true,
  enableWordsCount: true,
  enableCharactersCount: true,
  enableScrollSync: false,
  tabSize: 4,
  keybindings: "default",
  enableNightMode: false,
  enableGitHubComment: true,
};

export const DEFAULT_DOCUMENT_BODY = `# Welcome to Dillinger

Dillinger is a cloud-enabled, mobile-ready, offline-storage compatible,
AngularJS-powered HTML5 Markdown editor.

- Type some Markdown on the left
- See HTML in the right
- Magic

## Features

- Import a HTML file and watch it magically convert to Markdown
- Drag and drop images (requires your Dropbox account be linked)
- Import and save files from GitHub, Dropbox, Google Drive and One Drive
- Drag and drop markdown and HTML files into Dillinger
- Export documents as Markdown, HTML and PDF
`;

git add lib/types.ts && git commit -m "feat: add TypeScript types for documents and settings"

/* Detailed source-code truncated for AI context efficiency. */

git add stores/store.ts && git commit -m "feat: add Zustand store with document and settings management"

"use client";

import { useEffect } from "react";
import { useStore } from "@/stores/store";

export function StoreProvider({ children }: { children: React.ReactNode }) {
  const hydrate = useStore((state) => state.hydrate);

  useEffect(() => {
    hydrate();
  }, [hydrate]);

  return <>{children}</>;
}

import type { Metadata } from "next";
import { Source_Sans_3 } from "next/font/google";
import { StoreProvider } from "@/components/providers/StoreProvider";
import "./globals.css";

const sourceSans = Source_Sans_3({
  subsets: ["latin"],
  variable: "--font-source-sans",
});

export const metadata: Metadata = {
  title: "Dillinger - Online Markdown Editor",
  description: "The last Markdown editor you'll ever need",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`${sourceSans.variable} font-sans`}>
        <StoreProvider>{children}</StoreProvider>
      </body>
    </html>
  );
}

npm run build

git add components/providers/StoreProvider.tsx app/layout.tsx && git commit -m "feat: add StoreProvider for state hydration"

import MarkdownIt from "markdown-it";
import markdownItAbbr from "markdown-it-abbr";
import markdownItCheckbox from "markdown-it-checkbox";
import markdownItDeflist from "markdown-it-deflist";
import markdownItFootnote from "markdown-it-footnote";
import markdownItIns from "markdown-it-ins";
import markdownItMark from "markdown-it-mark";
import markdownItSub from "markdown-it-sub";
import markdownItSup from "markdown-it-sup";
import hljs from "highlight.js";

export const md = new MarkdownIt({
  html: true,
  linkify: true,
  typographer: true,
  highlight: (str: string, lang: string): string => {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(str, { language: lang, ignoreIllegals: true }).value;
      } catch {
        // Fall through to default
      }
    }
    return ""; // Use external default escaping
  },
})
  .use(markdownItAbbr)
  .use(markdownItCheckbox)
  .use(markdownItDeflist)
  .use(markdownItFootnote)
  .use(markdownItIns)
  .use(markdownItMark)
  .use(markdownItSub)
  .use(markdownItSup);

export function renderMarkdown(content: string): string {
  return md.render(content);
}

git add lib/markdown.ts && git commit -m "feat: add markdown-it configuration with all plugins"

"use client";

import { useMemo } from "react";
import { useStore } from "@/stores/store";
import { renderMarkdown } from "@/lib/markdown";

export function MarkdownPreview() {
  const currentDocument = useStore((state) => state.currentDocument);

  const html = useMemo(() => {
    if (!currentDocument?.body) return "";
    return renderMarkdown(currentDocument.body);
  }, [currentDocument?.body]);

  return (
    <div
      id="preview"
      className="preview-html h-full overflow-auto p-6 bg-bg-primary"
      dangerouslySetInnerHTML={{ __html: html }}
    />
  );
}

/* Detailed source-code truncated for AI context efficiency. */

npm run build

git add components/preview/MarkdownPreview.tsx app/globals.css && git commit -m "feat: add MarkdownPreview component with styling"

/* Detailed source-code truncated for AI context efficiency. */

git add components/editor/MonacoEditor.tsx && git commit -m "feat: add Monaco Editor component with auto-save"

/* Detailed source-code truncated for AI context efficiency. */

/* Detailed source-code truncated for AI context efficiency. */

import type { Metadata } from "next";
import { Source_Sans_3 } from "next/font/google";
import { StoreProvider } from "@/components/providers/StoreProvider";
import { ToastProvider } from "@/components/ui/Toast";
import "./globals.css";

const sourceSans = Source_Sans_3({
  subsets: ["latin"],
  variable: "--font-source-sans",
});

export const metadata: Metadata = {
  title: "Dillinger - Online Markdown Editor",
  description: "The last Markdown editor you'll ever need",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`${sourceSans.variable} font-sans`}>
        <StoreProvider>
          <ToastProvider>{children}</ToastProvider>
        </StoreProvider>
      </body>
    </html>
  );
}

git add components/ui/Toast.tsx tailwind.config.ts app/layout.tsx && git commit -m "feat: add Toast notification system"

"use client";

import { useStore } from "@/stores/store";
import { FileText } from "lucide-react";

export function DocumentList() {
  const documents = useStore((state) => state.documents);
  const currentDocument = useStore((state) => state.currentDocument);
  const selectDocument = useStore((state) => state.selectDocument);

  return (
    <ul className="space-y-1">
      {documents.map((doc) => (
        <li key={doc.id}>
          <button
            onClick={() => selectDocument(doc.id)}
            className={`w-full text-left px-3 py-2 rounded flex items-center gap-2 text-sm transition-colors ${
              currentDocument?.id === doc.id
                ? "bg-bg-highlight text-text-invert"
                : "text-dropdown-link hover:bg-bg-highlight/50"
            }`}
          >
            <FileText size={16} />
            <span className="truncate">{doc.title}</span>
          </button>
        </li>
      ))}
    </ul>
  );
}

/* Detailed source-code truncated for AI context efficiency. */

git add components/sidebar/ && git commit -m "feat: add Sidebar with document list and actions"

/* Detailed source-code truncated for AI context efficiency. */

git add components/navbar/Navbar.tsx && git commit -m "feat: add Navbar with export dropdown and toggles"

/* Detailed source-code truncated for AI context efficiency. */

git add components/editor/DocumentTitle.tsx && git commit -m "feat: add editable DocumentTitle component"

/* Detailed source-code truncated for AI context efficiency. */

git add components/modals/SettingsModal.tsx && git commit -m "feat: add SettingsModal component"

/* Detailed source-code truncated for AI context efficiency. */

npm run dev

git add app/page.tsx && git commit -m "feat: assemble main editor page with all components"

import { NextRequest, NextResponse } from "next/server";

export async function POST(request: NextRequest) {
  try {
    const { markdown, title } = await request.json();

    if (!markdown) {
      return NextResponse.json(
        { error: "Markdown content is required" },
        { status: 400 }
      );
    }

    const filename = `${title || "document"}.md`;

    return new NextResponse(markdown, {
      headers: {
        "Content-Type": "text/markdown",
        "Content-Disposition": `attachment; filename="${filename}"`,
      },
    });
  } catch (error) {
    return NextResponse.json(
      { error: "Failed to export markdown" },
      { status: 500 }
    );
  }
}

git add app/api/export/markdown/route.ts && git commit -m "feat: add markdown export API route"

/* Detailed source-code truncated for AI context efficiency. */

git add app/api/export/html/route.ts && git commit -m "feat: add HTML export API route with styling"

npm install md-to-pdf

import { NextRequest, NextResponse } from "next/server";
import { mdToPdf } from "md-to-pdf";

export async function POST(request: NextRequest) {
  try {
    const { markdown, title } = await request.json();

    if (!markdown) {
      return NextResponse.json(
        { error: "Markdown content is required" },
        { status: 400 }
      );
    }

    const pdf = await mdToPdf(
      { content: markdown },
      {
        pdf_options: {
          format: "A4",
          margin: { top: "20mm", bottom: "20mm", left: "20mm", right: "20mm" },
        },
      }
    );

    if (!pdf || !pdf.content) {
      throw new Error("PDF generation failed");
    }

    const filename = `${title || "document"}.pdf`;

    return new NextResponse(pdf.content, {
      headers: {
        "Content-Type": "application/pdf",
        "Content-Disposition": `attachment; filename="${filename}"`,
      },
    });
  } catch (error) {
    console.error("PDF export error:", error);
    return NextResponse.json(
      { error: "Failed to export PDF" },
      { status: 500 }
    );
  }
}

git add app/api/export/pdf/route.ts package.json package-lock.json && git commit -m "feat: add PDF export API route using md-to-pdf"

npm run dev

npm run build

git add -A && git commit -m "feat: complete Dillinger Next.js migration - Phase 1"

/api/google-drive/
├── oauth/route.ts      # Initiates OAuth, redirects to Google
├── callback/route.ts   # Exchanges code for tokens, sets cookie
├── status/route.ts     # Returns connection status
├── files/route.ts      # GET: list folders/files, POST: get file content
├── save/route.ts       # POST: create or update file
└── unlink/route.ts     # POST: clear tokens, disconnect

interface UseGoogleDrive {
  isConnected: boolean;
  files: DriveFile[];
  currentPath: string;
  pathHistory: string[];
  connect: () => void;
  disconnect: () => void;
  fetchFiles: (folderId?: string) => Promise<void>;
  fetchFileContent: (fileId: string) => Promise<FileContent | null>;
  saveFile: (name: string, content: string, folderId?: string) => Promise<boolean>;
  navigateToFolder: (folderId: string) => void;
  navigateBack: () => void;
}

// EditorContainer.tsx
if (zenMode) {
  return (
    <div className="h-dvh bg-bg-primary flex items-center justify-center">
      <div className="w-full max-w-3xl h-full py-12 px-4 relative">
        <button
          onClick={() => setZenMode(false)}
          className="absolute top-4 right-4 text-text-muted hover:text-text-invert"
          aria-label="Exit zen mode"
        >
          <X size={20} />
        </button>
        <MonacoEditor className="h-full" />
      </div>
    </div>
  );
}

interface UseMedium {
  isConnected: boolean;
  connect: () => void;
  disconnect: () => void;
  publish: (title: string, content: string, tags?: string[]) => Promise<boolean>;
}

const handleDrop = (e: DragEvent) => {
  const file = e.dataTransfer.files[0];
  if (file && /\.(md|markdown|txt)$/i.test(file.name)) {
    const reader = new FileReader();
    reader.onload = () => {
      createDocument();
      updateDocumentTitle(file.name.replace(/\.(md|markdown|txt)$/i, ''));
      updateDocumentBody(reader.result as string);
    };
    reader.readAsText(file);
  }
};

interface AppState {
  // Existing...

  // Phase 3 additions
  zenMode: boolean;
  setZenMode: (enabled: boolean) => void;
}

interface Settings {
  // Existing...

  // Phase 3 additions
  scrollSync: boolean;  // default: true
}

# Google Drive
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

# OneDrive
ONEDRIVE_CLIENT_ID=
ONEDRIVE_CLIENT_SECRET=

# Medium
MEDIUM_CLIENT_ID=
MEDIUM_CLIENT_SECRET=

# Bitbucket
BITBUCKET_CLIENT_ID=
BITBUCKET_CLIENT_SECRET=

# Google Drive OAuth
GOOGLE_CLIENT_ID=your_client_id_here
GOOGLE_CLIENT_SECRET=your_client_secret_here

git add -A
git commit -m "chore: add Google Drive env variables placeholder"

import { NextResponse } from "next/server";

export async function GET() {
  const clientId = process.env.GOOGLE_CLIENT_ID;

  if (!clientId) {
    return NextResponse.json(
      { error: "Google Drive not configured" },
      { status: 500 }
    );
  }

  const redirectUri = `${process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000"}/api/google-drive/callback`;

  const params = new URLSearchParams({
    client_id: clientId,
    redirect_uri: redirectUri,
    response_type: "code",
    scope: "https://www.googleapis.com/auth/drive.file",
    access_type: "offline",
    prompt: "consent",
  });

  const authUrl = `https://accounts.google.com/o/oauth2/v2/auth?${params.toString()}`;

  return NextResponse.redirect(authUrl);
}

git add app/api/google-drive/oauth/route.ts
git commit -m "feat: add Google Drive OAuth initiation route"

/* Detailed source-code truncated for AI context efficiency. */

git add app/api/google-drive/callback/route.ts
git commit -m "feat: add Google Drive OAuth callback route"

import { NextResponse } from "next/server";
import { cookies } from "next/headers";

export async function GET() {
  try {
    const cookieStore = await cookies();
    const tokenCookie = cookieStore.get("google_drive_token");

    if (!tokenCookie) {
      return NextResponse.json({ connected: false });
    }

    const tokens = JSON.parse(tokenCookie.value);

    // Verify token is still valid by calling userinfo
    const response = await fetch("https://www.googleapis.com/oauth2/v2/userinfo", {
      headers: {
        Authorization: `Bearer ${tokens.access_token}`,
      },
    });

    if (!response.ok) {
      // Token expired or invalid
      return NextResponse.json({ connected: false });
    }

    const userInfo = await response.json();

    return NextResponse.json({
      connected: true,
      email: userInfo.email,
    });
  } catch (error) {
    console.error("Google Drive status error:", error);
    return NextResponse.json({ connected: false });
  }
}

git add app/api/google-drive/status/route.ts
git commit -m "feat: add Google Drive status route"

import { NextResponse } from "next/server";
import { cookies } from "next/headers";

export async function POST() {
  try {
    const cookieStore = await cookies();
    cookieStore.delete("google_drive_token");

    return NextResponse.json({ success: true });
  } catch (error) {
    console.error("Google Drive unlink error:", error);
    return NextResponse.json(
      { error: "Failed to unlink Google Drive" },
      { status: 500 }
    );
  }
}

git add app/api/google-drive/unlink/route.ts
git commit -m "feat: add Google Drive unlink route"

/* Detailed source-code truncated for AI context efficiency. */

git add app/api/google-drive/files/route.ts
git commit -m "feat: add Google Drive files route"

/* Detailed source-code truncated for AI context efficiency. */

git add app/api/google-drive/save/route.ts
git commit -m "feat: add Google Drive save route"

/* Detailed source-code truncated for AI context efficiency. */

git add hooks/useGoogleDrive.ts
git commit -m "feat: add useGoogleDrive hook"

/* Detailed source-code truncated for AI context efficiency. */

git add components/modals/GoogleDriveModal.tsx
git commit -m "feat: add GoogleDriveModal component"

import { useGoogleDrive } from "@/hooks/useGoogleDrive";
import { GoogleDriveModal } from "@/components/modals/GoogleDriveModal";
import { HardDrive } from "lucide-react";

const googleDrive = useGoogleDrive();

const [googleDriveModal, setGoogleDriveModal] = useState<{ open: boolean; mode: "import" | "save" }>({
  open: false,
  mode: "import",
});

<ServiceButton
  icon={<HardDrive size={16} />}
  label="Google Drive"
  connected={googleDrive.isConnected}
  onConnect={googleDrive.connect}
  onDisconnect={googleDrive.disconnect}
/>

<button
  onClick={() => setGoogleDriveModal({ open: true, mode: "import" })}
  className="w-full flex items-center gap-2 py-2 px-2 text-dropdown-link hover:text-text-invert text-sm rounded hover:bg-bg-highlight
             focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-plum"
>
  <HardDrive size={16} />
  <span>Google Drive</span>
</button>

<button
  onClick={() => setGoogleDriveModal({ open: true, mode: "save" })}
  className="w-full flex items-center gap-2 py-2 px-2 text-dropdown-link hover:text-text-invert text-sm rounded hover:bg-bg-highlight
             focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-plum"
>
  <HardDrive size={16} />
  <span>Google Drive</span>
</button>

<GoogleDriveModal
  isOpen={googleDriveModal.open}
  onClose={() => setGoogleDriveModal({ ...googleDriveModal, open: false })}
  mode={googleDriveModal.mode}
/>

git add components/sidebar/Sidebar.tsx
git commit -m "feat: integrate Google Drive into sidebar"

zenMode: boolean;
setZenMode: (enabled: boolean) => void;

scrollSync: boolean;

zenMode: false,

scrollSync: true,

setZenMode: (enabled) => set({ zenMode: enabled }),

git add stores/store.ts
git commit -m "feat: add zenMode and scrollSync to store"

import { X, Maximize2 } from "lucide-react";

const zenMode = useStore((state) => state.zenMode);
const setZenMode = useStore((state) => state.setZenMode);

useEffect(() => {
  const handleKeyDown = (e: KeyboardEvent) => {
    // Cmd/Ctrl + Shift + Z for zen mode
    if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key === "z") {
      e.preventDefault();
      setZenMode(!zenMode);
    }
    // Escape to exit zen mode
    if (e.key === "Escape" && zenMode) {
      setZenMode(false);
    }
  };

  document.addEventListener("keydown", handleKeyDown);
  return () => document.removeEventListener("keydown", handleKeyDown);
}, [zenMode, setZenMode]);

if (zenMode) {
  return (
    <div className="h-dvh bg-bg-primary flex items-center justify-center">
      <div className="w-full max-w-3xl h-full py-12 px-4 relative">
        <button
          onClick={() => setZenMode(false)}
          className="absolute top-4 right-4 text-text-muted hover:text-text-invert transition-colors rounded
                     focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-plum"
          aria-label="Exit zen mode"
        >
          <X size={24} />
        </button>
        <div className="h-full border border-border-light rounded-lg overflow-hidden">
          <MonacoEditor />
        </div>
      </div>
    </div>
  );
}

git add components/editor/EditorContainer.tsx
git commit -m "feat: implement zen mode in editor"

import { Maximize2 } from "lucide-react";

const setZenMode = useStore((state) => state.setZenMode);

<button
  onClick={() => setZenMode(true)}
  aria-label="Enter zen mode"
  className="text-icon-default hover:text-plum transition-colors rounded
             focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-plum"
>
  <Maximize2 size={20} />
</button>

git add components/navbar/Navbar.tsx
git commit -m "feat: add zen mode button to navbar"

editorScrollPercent: number;
setEditorScrollPercent: (percent: number) => void;

editorScrollPercent: 0,

setEditorScrollPercent: (percent) => set({ editorScrollPercent: percent }),

import { useStore } from "@/stores/store";

const settings = useStore((state) => state.settings);
const setEditorScrollPercent = useStore((state) => state.setEditorScrollPercent);

editor.onDidScrollChange((e) => {
  if (settings.scrollSync) {
    const scrollTop = e.scrollTop;
    const scrollHeight = editor.getScrollHeight() - editor.getLayoutInfo().height;
    const percent = scrollHeight > 0 ? scrollTop / scrollHeight : 0;
    setEditorScrollPercent(percent);
  }
});

const containerRef = useRef<HTMLDivElement>(null);
const settings = useStore((state) => state.settings);
const editorScrollPercent = useStore((state) => state.editorScrollPercent);

useEffect(() => {
  if (!settings.scrollSync || !containerRef.current) return;

  const container = containerRef.current;
  const scrollHeight = container.scrollHeight - container.clientHeight;
  container.scrollTop = scrollHeight * editorScrollPercent;
}, [editorScrollPercent, settings.scrollSync]);

<div ref={containerRef} className="...existing classes...">

git add stores/store.ts components/editor/MonacoEditor.tsx components/preview/MarkdownPreview.tsx
git commit -m "feat: implement scroll sync between editor and preview"

{/* Scroll Sync */}
<SettingToggle
  id="scroll-sync"
  label="Scroll Sync"
  checked={settings.scrollSync}
  onChange={(v) => updateSettings({ scrollSync: v })}
/>

git add components/modals/SettingsModal.tsx
git commit -m "feat: add scroll sync toggle to settings"

git commit -m "feat: add OneDrive OAuth routes"
git commit -m "feat: add OneDrive files and save routes"
git commit -m "feat: add useOneDrive hook"
git commit -m "feat: add OneDriveModal component"
git commit -m "feat: integrate OneDrive into sidebar"

const [isDragging, setIsDragging] = useState(false);

const createDocument = useStore((state) => state.createDocument);
const updateDocumentBody = useStore((state) => state.updateDocumentBody);
const updateDocumentTitle = useStore((state) => state.updateDocumentTitle);

const handleDragEnter = (e: React.DragEvent) => {
  e.preventDefault();
  setIsDragging(true);
};

const handleDragLeave = (e: React.DragEvent) => {
  e.preventDefault();
  if (e.currentTarget === e.target) {
    setIsDragging(false);
  }
};

const handleDragOver = (e: React.DragEvent) => {
  e.preventDefault();
};

const handleDrop = (e: React.DragEvent) => {
  e.preventDefault();
  setIsDragging(false);

  const file = e.dataTransfer.files[0];
  if (file && /\.(md|markdown|txt)$/i.test(file.name)) {
    const reader = new FileReader();
    reader.onload = () => {
      createDocument();
      updateDocumentTitle(file.name.replace(/\.(md|markdown|txt)$/i, ""));
      updateDocumentBody(reader.result as string);
      notify("File imported");
    };
    reader.readAsText(file);
  }
};

<div
  onDragEnter={handleDragEnter}
  onDragLeave={handleDragLeave}
  onDragOver={handleDragOver}
  onDrop={handleDrop}
  className="h-dvh flex overflow-hidden relative"
>
  {isDragging && (
    <div className="absolute inset-0 z-overlay bg-plum/20 flex items-center justify-center pointer-events-none">
      <div className="bg-bg-navbar text-text-invert px-6 py-4 rounded-lg shadow-lg">
        Drop file to import
      </div>
    </div>
  )}
  {/* ...existing content... */}
</div>

git add components/editor/EditorContainer.tsx
git commit -m "feat: implement drag and drop file import"

// app/api/google-drive/upload-image/route.ts
import { NextRequest, NextResponse } from "next/server";
import { cookies } from "next/headers";

export async function POST(request: NextRequest) {
  const cookieStore = await cookies();
  const tokenCookie = cookieStore.get("google_drive_token");

  if (!tokenCookie) {
    return NextResponse.json({ error: "Not authenticated" }, { status: 401 });
  }

  const tokens = JSON.parse(tokenCookie.value);
  const formData = await request.formData();
  const file = formData.get("file") as File;

  if (!file) {
    return NextResponse.json({ error: "No file provided" }, { status: 400 });
  }

  // Upload to Google Drive and get shareable link
  // ... implementation

  return NextResponse.json({ url: shareableUrl });
}

git add app/api/google-drive/upload-image/route.ts app/api/dropbox/upload-image/route.ts
git add components/modals/ImageUploadModal.tsx components/editor/MonacoEditor.tsx
git commit -m "feat: implement image upload to cloud services"

npx tsc --noEmit && npm run lint

npm run dev

git add -A
git commit -m "feat: complete Phase 3 implementation"