[diffs/edit] Add edit prediction support

apps/docs/.env.example

@@ -17,4 +17,14 @@ GITHUB_WEBHOOK_SECRET=""
 GITHUB_APP_PRIVATE_KEY=""
 
 # Key from code.storage for syncing
-CODE_STORAGE_SYNC_PRIVATE_KEY=""
+CODE_STORAGE_SYNC_PRIVATE_KEY=""
+
+# Mistral API Key for the edit prediction demo
+MISTRAL_API_KEY=""
+
+# GitHub OAuth App for the edit prediction demo
+# Set its authorization callback URL to <docs origin>/edit/auth?callback
+GITHUB_OAUTH_CLIENT_ID=""
+
+# GitHub OAuth Client Secret
+GITHUB_OAUTH_CLIENT_SECRET=""

apps/docs/app/(diffs)/_docs/DocsPage.tsx

@@ -31,15 +31,21 @@ import {
   CUSTOM_HUNK_SEPARATORS_SWITCHER,
 } from '../docs/CustomHunkSeparators/constants';
 import {
+  EDIT_AUTOFOCUS_REACT_EXAMPLE,
+  EDIT_AUTOFOCUS_VANILLA_EXAMPLE,
   EDIT_DEMO_FILE_EXAMPLE,
+  EDIT_FOCUS_POSITION_EXAMPLE,
   EDIT_LAZY_FILE_EXAMPLE,
   EDIT_MARKER_EXAMPLE,
   EDIT_MARKER_TYPE,
   EDIT_ON_CHANGE_EXAMPLE,
+  EDIT_PERSIST_STATE_EXAMPLE,
+  EDIT_PREDICTION_EXAMPLE,
   EDIT_REACT_CODE_VIEW_EXAMPLE,
   EDIT_REACT_EXAMPLE,
   EDIT_REACT_FILE_DIFF_EXAMPLE,
   EDIT_REACT_MULTI_FILE_DIFF_EXAMPLE,
+  EDIT_REACT_PROVIDER_EXAMPLE,
   EDIT_SELECTION_ACTION_CONTEXT_TYPE,
   EDIT_SELECTION_ACTION_EXAMPLE,
   EDIT_UNDO_REDO_EXAMPLE,
@@ -424,12 +430,17 @@ async function CodeViewSection() {
 
 async function EditSection() {
   const [
+    editAutofocusReactExample,
+    editAutofocusVanillaExample,
     editDemoFile,
+    editFocusPositionExample,
     keymapFile,
     editVanillaFileExample,
     editVanillaFileDiffExample,
     editVanillaCodeViewExample,
     editLazyFileExample,
+    editPersistStateExample,
+    editPredictionExample,
     editorOptionsType,
     editOnChangeExample,
     editorPublicApi,
@@ -441,16 +452,22 @@ async function EditSection() {
     editReactExample,
     editReactFileDiffExample,
     editReactMultiFileDiffExample,
+    editReactProviderExample,
     editUndoRedoExample,
     editWorkerPoolReactExample,
     editWorkerPoolVanillaExample,
   ] = await Promise.all([
+    preloadFile(EDIT_AUTOFOCUS_REACT_EXAMPLE),
+    preloadFile(EDIT_AUTOFOCUS_VANILLA_EXAMPLE),
     preloadFile(EDIT_DEMO_FILE_EXAMPLE),
+    preloadFile(EDIT_FOCUS_POSITION_EXAMPLE),
     preloadFile(DEFAULT_KEYMAP_FILE_EXAMPLE),
     preloadFile(EDIT_VANILLA_FILE_EXAMPLE),
     preloadFile(EDIT_VANILLA_FILE_DIFF_EXAMPLE),
     preloadFile(EDIT_VANILLA_CODE_VIEW_EXAMPLE),
     preloadFile(EDIT_LAZY_FILE_EXAMPLE),
+    preloadFile(EDIT_PERSIST_STATE_EXAMPLE),
+    preloadFile(EDIT_PREDICTION_EXAMPLE),
     preloadFile(EDITOR_OPTIONS_TYPE),
     preloadFile(EDIT_ON_CHANGE_EXAMPLE),
     preloadFile(EDITOR_PUBLIC_API),
@@ -462,19 +479,25 @@ async function EditSection() {
     preloadFile(EDIT_REACT_EXAMPLE),
     preloadFile(EDIT_REACT_FILE_DIFF_EXAMPLE),
     preloadFile(EDIT_REACT_MULTI_FILE_DIFF_EXAMPLE),
+    preloadFile(EDIT_REACT_PROVIDER_EXAMPLE),
     preloadFile(EDIT_UNDO_REDO_EXAMPLE),
     preloadFile(EDIT_WORKER_POOL_REACT_EXAMPLE),
     preloadFile(EDIT_WORKER_POOL_VANILLA_EXAMPLE),
   ]);
   const content = await renderMDX({
     filePath: '(diffs)/docs/Edit/content.mdx',
     scope: {
+      editAutofocusReactExample,
+      editAutofocusVanillaExample,
       editDemoFile,
+      editFocusPositionExample,
       keymapFile,
       editVanillaFileExample,
       editVanillaFileDiffExample,
       editVanillaCodeViewExample,
       editLazyFileExample,
+      editPersistStateExample,
+      editPredictionExample,
       editorOptionsType,
       editOnChangeExample,
       editorPublicApi,
@@ -486,6 +509,7 @@ async function EditSection() {
       editReactExample,
       editReactFileDiffExample,
       editReactMultiFileDiffExample,
+      editReactProviderExample,
       editUndoRedoExample,
       editWorkerPoolReactExample,
       editWorkerPoolVanillaExample,

apps/docs/app/(diffs)/_edit/EditPage.tsx

@@ -6,6 +6,7 @@ import type {
 import { WorkerPoolContext } from '../_components/WorkerPoolContext';
 import { LiveEditing } from '../_examples/LiveEditing/LiveEditing';
 import { EditHero } from './EditHero';
+import { EditPredictionDemo } from './EditPredictionDemo';
 import { EditReference } from './EditReference';
 import { FindDemo } from './FindDemo';
 import { HistoryDemo } from './HistoryDemo';
@@ -21,6 +22,8 @@ import { PierreCompanySection } from '@/components/PierreCompanySection';
 interface EditPageProps {
   liveEditingFile: PreloadedFileResult<undefined>;
   liveEditingDiff: PreloadFileDiffResult<undefined>;
+  editPredictionFile: PreloadedFileResult<undefined>;
+  editPredictionDiff: PreloadFileDiffResult<undefined>;
   markerFile: PreloadedFileResult<undefined>;
   findFile: PreloadedFileResult<undefined>;
   historyFile: PreloadedFileResult<undefined>;
@@ -31,6 +34,8 @@ interface EditPageProps {
 export function EditPage({
   liveEditingFile,
   liveEditingDiff,
+  editPredictionFile,
+  editPredictionDiff,
   markerFile,
   findFile,
   historyFile,
@@ -50,6 +55,28 @@ export function EditPage({
             prerenderedDiff={liveEditingDiff}
           />
 
+          <div className="space-y-5">
+            <FeatureHeader
+              id="tab-tab-tab"
+              title="Tab Tab Tab"
+              description={
+                <>
+                  Pause after typing or moving the cursor to preview an edit
+                  prediction, then press <kbd>Tab</kbd> to accept the
+                  suggestion—or hold <kbd>Alt</kbd> while pressing{' '}
+                  <kbd>Tab</kbd> in subtle mode. This demo connects the
+                  service-agnostic <code>predict()</code> API to Codestral built
+                  by Mistral AI. Switch between <code>File</code> and{' '}
+                  <code>FileDiff</code>.
+                </>
+              }
+            />
+            <EditPredictionDemo
+              prerenderedFile={editPredictionFile}
+              prerenderedDiff={editPredictionDiff}
+            />
+          </div>
+
           <div className="space-y-5">
             <FeatureHeader
               id="selection-action"