GPDoc VS Code Extension

VS Code and Cursor extension for viewing and editing GPDoc files (.gsdoc.json).

Features

Custom Editor: Open .gsdoc.json files with a rich document editor
Multiple View Modes: Editor, Preview, and Split view
Drive Integration: Browse local files, Gists, and GitHub repositories
Cloud Sync: Login to sync with GPDoc cloud services
Multiple File Types: Support for Documents, Notebooks, Slides, Scripts, and Spreadsheets

Development

Prerequisites

Node.js >= 20.0.0
VS Code or Cursor IDE

Setup

cd vscode-extension
npm install
npm run compile

Running the Extension

Open this folder in VS Code/Cursor
Press F5 to launch a new Extension Development Host window
Open a .gsdoc.json file to test the custom editor

Building

npm run compile
npm run package

Configuration

Auth0 Setup (Required for Cloud Sync)

📖 Full Setup Guide: See AUTH0_SETUP.md for detailed instructions.

Quick Start - Build-Time Configuration (Recommended):

Create Environment Files:

For local dev: Create .env.local in project root:

AUTH0_NATIVE_DOMAIN=your-dev-tenant.auth0.com
AUTH0_NATIVE_CLIENTID=your_dev_client_id

For production: Create .env.production in project root:

AUTH0_NATIVE_DOMAIN=auth.gpdoc.io
AUTH0_NATIVE_CLIENTID=your_prod_client_id

Build the Extension:
- Local dev: npm run compile (uses .env.local)
- Production: npm run package (uses .env.production)
Test Login:
- Command Palette (Cmd+Shift+P) → GPDoc: Login
- Follow the device code flow

Alternative: Manual VS Code Settings:

If you prefer to configure manually (or override defaults):

Open Settings (Cmd+, / Ctrl+,)
Search for "GPDoc"
Enter your Auth0 credentials

Offline Mode (No Auth0):

{
  "gpdoc.enableCloudSync": false
}

Settings Reference

Setting	Type	Default	Description
`gpdoc.auth0Domain`	string	`""`	Auth0 tenant domain (e.g., `your-tenant.auth0.com`)
`gpdoc.auth0ClientId`	string	`""`	Auth0 application client ID
`gpdoc.auth0Audience`	string	`""`	Auth0 API audience (optional, for custom domains)
`gpdoc.enableCloudSync`	boolean	`true`	Enable cloud synchronization features

Architecture

The extension uses:

Custom Editor API: For .gsdoc.json file editing
Webview API: For rendering the document UI
Tree View API: For the Drive file explorer
Shared Components: Reuses React components from the main app (via build process)

Project Structure

vscode-extension/
├── src/
│   ├── extension.ts          # Main extension entry point
│   ├── editors/               # Custom editor providers
│   ├── drive/                 # Drive file explorer
│   ├── auth/                  # Authentication service
│   └── webview/               # Webview content generation
├── media/                     # Webview assets (JS, CSS)
└── package.json               # Extension manifest

GPDoc

Repetere