Editor

apps/demo/src/main.ts

@@ -2,6 +2,7 @@ import {
   DEFAULT_THEMES,
   DIFFS_TAG_NAME,
   type DiffsThemeNames,
+  Editor,
   File,
   type FileContents,
   FileDiff,
@@ -47,7 +48,7 @@ import {
 const DEMO_THEME: DiffsThemeNames | ThemesType = DEFAULT_THEMES;
 const WORKER_POOL = true;
 const VIRTUALIZE = true;
-const CRAZY_FILE = false;
+const CRAZY_FILE = true;
 const LARGE_CONFLICT_FILE = false;
 
 const FileStreamCodeConfigs: FileStreamCodeConfigsItem[] = [
@@ -206,7 +207,8 @@ function renderDiff(parsedPatches: ParsedPatch[], manager?: WorkerPoolManager) {
         overflow: wrap ? 'wrap' : 'scroll',
         renderAnnotation: renderDiffAnnotation,
         renderHeaderMetadata() {
-          return createCollapsedToggle(
+          return createToggle(
+            'Collapse',
             instance?.options.collapsed ?? false,
             (checked) => {
               instance?.setOptions({
@@ -673,6 +675,7 @@ if (renderFileButton != null) {
 
     virtualizer?.setup(globalThis.document);
     const wrap = getWrapped();
+    const editor = new Editor();
     const fileContainer = document.createElement(DIFFS_TAG_NAME);
     wrapper.appendChild(fileContainer);
     let instance:
@@ -684,7 +687,8 @@ if (renderFileButton != null) {
       themeType: getThemeType(),
       renderAnnotation,
       renderCustomMetadata() {
-        return createCollapsedToggle(
+        const collapsedToggle = createToggle(
+          'Collapse',
           instance?.options.collapsed ?? false,
           (checked) => {
             instance?.setOptions({
@@ -696,6 +700,31 @@ if (renderFileButton != null) {
             }
           }
         );
+        const editableToggle = createToggle('Editable', false, (checked) => {
+          if (checked) {
+            editor.edit(instance);
+            editor.setSelections([
+              {
+                start: {
+                  line: 0,
+                  character: 0,
+                },
+                end: {
+                  line: 0,
+                  character: 0,
+                },
+                direction: 0,
+              },
+            ]);
+          } else {
+            editor.cleanUp();
+          }
+        });
+        const div = document.createElement('div');
+        div.style.display = 'flex';
+        div.style.gap = '8px';
+        div.append(collapsedToggle, editableToggle);
+        return div;
       },
 
       // Line selection stuff
@@ -883,7 +912,8 @@ cleanButton?.addEventListener('click', () => {
   cleanupInstances(container);
 });
 
-function createCollapsedToggle(
+function createToggle(
+  labelText: string,
   checked: boolean,
   onChange: (checked: boolean) => void
 ): HTMLElement {
@@ -896,7 +926,7 @@ function createCollapsedToggle(
   });
   label.dataset.collapser = '';
   label.appendChild(input);
-  label.append(' Collapse');
+  label.append(labelText);
   return label;
 }
 

packages/diffs/src/components/File.ts

@@ -24,7 +24,9 @@ import { SVGSpriteSheet } from '../sprite';
 import type {
   AppliedThemeStyleCache,
   BaseCodeOptions,
+  DiffsEditor,
   FileContents,
+  HighlightedToken,
   LineAnnotation,
   PrePropertiesConfig,
   RenderFileMetadata,
@@ -41,14 +43,13 @@ import { createUnsafeCSSStyleNode } from '../utils/createUnsafeCSSStyleNode';
 import { wrapThemeCSS, wrapUnsafeCSS } from '../utils/cssWrappers';
 import { getLineAnnotationName } from '../utils/getLineAnnotationName';
 import { getOrCreateCodeNode } from '../utils/getOrCreateCodeNode';
+import { hasVisibleLineAnnotation } from '../utils/hasVisibleLineAnnotation';
 import { upsertHostThemeStyle } from '../utils/hostTheme';
 import { prerenderHTMLIfNecessary } from '../utils/prerenderHTMLIfNecessary';
 import { setPreNodeProperties } from '../utils/setWrapperNodeProps';
 import type { WorkerPoolManager } from '../worker';
 import { DiffsContainerLoaded } from './web-components';
 
-const EMPTY_STRINGS: string[] = [];
-
 export interface FileRenderProps<LAnnotation> {
   file: FileContents;
   fileContainer?: HTMLElement;
@@ -154,6 +155,8 @@ export class File<LAnnotation = undefined> {
   protected file: FileContents | undefined;
   protected renderRange: RenderRange | undefined;
 
+  protected editor: DiffsEditor<LAnnotation> | undefined;
+
   constructor(
     public options: FileOptions<LAnnotation> = { theme: DEFAULT_THEMES },
     private workerManager?: WorkerPoolManager | undefined,
@@ -172,6 +175,23 @@ export class File<LAnnotation = undefined> {
     this.workerManager?.subscribeToThemeChanges(this);
   }
 
+  public setEditor(editor: DiffsEditor<LAnnotation>): void {
+    this.editor?.cleanUp();
+    if (this.fileContainer != null && this.file != null) {
+      editor.syncFile(
+        this.fileContainer,
+        this.file,
+        this.lineAnnotations,
+        this.renderRange
+      );
+    }
+    this.editor = editor;
+  }
+
+  public removeEditor(): void {
+    this.editor = undefined;
+  }
+
   private handleHighlightRender = (): void => {
     this.rerender();
   };
@@ -264,6 +284,10 @@ export class File<LAnnotation = undefined> {
     this.unsafeCSSStyle = undefined;
     this.appliedUnsafeCSS = undefined;
     this.placeHolder = undefined;
+
+    // Clean up the editor
+    this.editor?.cleanUp();
+    this.editor = undefined;
   }
 
   public hydrate(props: FileHydrateProps<LAnnotation>): void {
@@ -362,12 +386,75 @@ export class File<LAnnotation = undefined> {
     this.resizeManager.setup(this.pre, overflow === 'wrap');
   }
 
-  public getOrCreateLineCache(
+  public getOrCreateLineOffSets(
     file: FileContents | undefined = this.file
-  ): string[] {
-    return file != null
-      ? this.fileRenderer.getOrCreateLineCache(file)
-      : EMPTY_STRINGS;
+  ): number[] {
+    return file != null ? this.fileRenderer.getOrCreateLineOffsets(file) : [];
+  }
+
+  public getLineCount(file: FileContents | undefined = this.file): number {
+    return file != null ? this.fileRenderer.getLineCount(file) : 0;
+  }
+
+  public emitDirtyLines(lines: Map<number, Array<HighlightedToken>>): void {
+    this.fileRenderer.emitDirtyLines(lines);
+  }
+
+  public emitLineCountChange(lineCount: number): void {
+    const result = this.fileRenderer.emitLineCountChange(
+      lineCount,
+      this.renderRange
+    );
+    if (result != null && this.code != null) {
+      const { gutterAST, rowCount } = result;
+      const columns = this.getColumns(this.code);
+      if (columns != null) {
+        columns.gutter.innerHTML =
+          this.fileRenderer.renderPartialHTML(gutterAST);
+        columns.content.style.gridRow = `span ${rowCount}`;
+        columns.gutter.style.gridRow = `span ${rowCount}`;
+      }
+    }
+  }
+
+  public emitLineAnnotationsChange(
+    newLineAnnotations: LineAnnotation<LAnnotation>[]
+  ): void {
+    const previousLineAnnotations = this.lineAnnotations;
+    const renderRange = this.renderRange;
+    const result = this.fileRenderer.emitLineAnnotationsChange(
+      newLineAnnotations,
+      this.renderRange
+    );
+    for (const { element } of this.annotationCache.values()) {
+      element.remove();
+    }
+    this.annotationCache.clear();
+    this.lineAnnotations = newLineAnnotations;
+    const hasVisibleAnnotationChange =
+      hasVisibleLineAnnotation(previousLineAnnotations, renderRange) ||
+      hasVisibleLineAnnotation(newLineAnnotations, renderRange);
+    if (result != null && this.code != null && hasVisibleAnnotationChange) {
+      const { gutterAST, contentAST, rowCount } = result;
+      const columns = this.getColumns(this.code);
+      if (columns != null) {
+        columns.content.innerHTML =
+          this.fileRenderer.renderPartialHTML(contentAST);
+        columns.gutter.innerHTML =
+          this.fileRenderer.renderPartialHTML(gutterAST);
+        columns.content.style.gridRow = `span ${rowCount}`;
+        columns.gutter.style.gridRow = `span ${rowCount}`;
+        this.renderAnnotations();
+        if (this.fileContainer != null && this.file != null) {
+          this.editor?.syncFile(
+            this.fileContainer,
+            this.file,
+            this.lineAnnotations,
+            this.renderRange
+          );
+        }
+      }
+    }
   }
 
   public render({
@@ -501,6 +588,12 @@ export class File<LAnnotation = undefined> {
       this.resizeManager.setup(pre, overflow === 'wrap');
       this.renderAnnotations();
       this.renderGutterUtility();
+      this.editor?.syncFile(
+        fileContainer,
+        file,
+        this.lineAnnotations,
+        nextRenderRange
+      );
     } catch (error: unknown) {
       if (disableErrorHandling) {
         throw error;