[diffs/edit] support paste in place

apps/demo/src/main.ts

@@ -961,7 +961,6 @@ if (renderFileButton != null) {
     virtualizer?.setup(globalThis.document);
     const wrap = getWrapped();
     const editor = new Editor<LineCommentMetadata>({
-      clipboard: navigator.clipboard,
       enabledSelectionAction: true,
       renderSelectionAction: (ctx) => {
         const div = document.createElement('div');

packages/diffs/src/editor/command.ts

@@ -17,6 +17,7 @@ export type EditorCommand =
   | 'copyLineDown'
   | 'simplifySelection'
   | 'insertBlankLine'
+  | 'deleteHardLineForward'
   | 'toggleComment'
   | 'toggleBlockComment'
   | 'moveCursorToDocStart'
@@ -38,6 +39,19 @@ export function resolveEditorCommandFromKeyboardEvent(
 
   const normalizedKey = key.length === 1 ? key.toLowerCase() : key;
 
+  // Safari and Firefox do not report macOS control+k as a beforeinput action,
+  // so resolve the native delete-to-line-end shortcut from keydown instead.
+  if (
+    isMac &&
+    event.ctrlKey &&
+    !event.metaKey &&
+    !shiftKey &&
+    !altKey &&
+    (normalizedKey === 'k' || event.code === 'KeyK')
+  ) {
+    return 'deleteHardLineForward';
+  }
+
   if (
     !event.metaKey &&
     !event.ctrlKey &&

packages/diffs/src/editor/editor.ts

@@ -82,6 +82,7 @@ import {
   getDocumentFullSelection,
   getSelectedLineBlocks,
   getSelectionAnchor,
+  getSelectionClipboardTexts,
   getSelectionText,
   isCollapsedSelection,
   isLineEditable,
@@ -110,7 +111,7 @@ import {
   Metrics,
   snapTextOffsetToUnicodeBoundary,
 } from './textMeasure';
-import { EditorTokenizer, renderLineTokens } from './tokenzier';
+import { EditorTokenizer, renderLineTokens } from './tokenizer';
 import {
   addEventListener,
   clampDomOffset,
@@ -171,7 +172,7 @@ export interface EditorOptions<LAnnotation> {
    * see https://www.electronjs.org/docs/latest/api/clipboard
    */
   clipboard?: {
-    readText: () => Promise<string> | string;
+    readText: (type?: string) => Promise<string> | string;
   };
   /** Render the selection action widget element. */
   renderSelectionAction?: (
@@ -202,6 +203,8 @@ export interface EditorOptions<LAnnotation> {
 // row per inserted line. A safety bound, not a correctness-critical value.
 const MAX_EDIT_WIDEN_WINDOW_MULTIPLE = 2;
 const SELECTION_ACTION_POPOVER_PLACEMENT_KEY = 'selection-action';
+const MULTI_SELECTION_CLIPBOARD_TYPE =
+  'application/vnd.pierre.diffs-selections+json';
 
 export class Editor<LAnnotation> implements DiffsEditor<LAnnotation> {
   #options: EditorOptions<LAnnotation>;
@@ -1442,12 +1445,15 @@ export class Editor<LAnnotation> implements DiffsEditor<LAnnotation> {
         // A read-only deleted-text selection lives outside the editor's
         // document, so #getSelectionText() would be empty. Copy the selected
         // deleted text instead.
-        e.clipboardData?.setData(
-          'text',
-          this.#isDeletedTextSelectionActive()
-            ? this.#deletedTextForClipboard()
-            : this.#getSelectionText()
-        );
+        if (this.#isDeletedTextSelectionActive()) {
+          e.clipboardData?.setData('text', this.#deletedTextForClipboard());
+        } else {
+          this.#writeSelectionClipboardData(
+            e.clipboardData,
+            this.#getSelectionText(),
+            this.#getSelectionClipboardTexts()
+          );
+        }
       }),
 
       addEventListener(contentEl, 'cut', (e) => {
@@ -1457,31 +1463,61 @@ export class Editor<LAnnotation> implements DiffsEditor<LAnnotation> {
         e.preventDefault();
         // Deleted text is read-only and can't be removed, so a cut there copies
         // the selected deleted text (like the copy handler) without editing.
-        e.clipboardData?.setData(
-          'text',
-          this.#isDeletedTextSelectionActive()
-            ? this.#deletedTextForClipboard()
-            : this.#cutSelectionText()
-        );
+        if (this.#isDeletedTextSelectionActive()) {
+          e.clipboardData?.setData('text', this.#deletedTextForClipboard());
+        } else {
+          const selectionTexts = this.#getSelectionClipboardTexts();
+          this.#writeSelectionClipboardData(
+            e.clipboardData,
+            this.#cutSelectionText(),
+            selectionTexts
+          );
+        }
       }),
 
       addEventListener(contentEl, 'paste', (e) => {
         if (!targetIsContentElement(e)) {
           return;
         }
         e.preventDefault();
-        const text = e.clipboardData?.getData('text');
+        const clipboardData = e.clipboardData;
         const textDocument = this.#textDocument;
-        if (text !== undefined && textDocument !== undefined) {
-          // Rewrite clipboard line breaks to the document's EOL so a Windows
-          // clipboard (\r\n or \r) doesn't leave mixed line endings behind.
-          // TODO(@ije): Add support of multiple selections copy&paste
-          this.#replaceSelectionText(
-            textDocument.normalizeEol(text),
-            undefined,
-            true
+        if (clipboardData === null || textDocument === undefined) {
+          return;
+        }
+
+        let text: string | string[] = clipboardData.getData('text');
+
+        const selectionCount = this.#selections?.length ?? 0;
+        if (selectionCount > 1) {
+          const multiSelectionText = clipboardData.getData(
+            MULTI_SELECTION_CLIPBOARD_TYPE
           );
+          if (multiSelectionText !== undefined) {
+            try {
+              const selectionTexts = JSON.parse(multiSelectionText);
+              if (
+                Array.isArray(selectionTexts) &&
+                selectionTexts.length === selectionCount
+              ) {
+                text = selectionTexts;
+              }
+            } catch {
+              // ignore the invalid custom clipboard data
+            }
+          }
         }
+
+        // Rewrite clipboard line breaks to the document's EOL so a Windows
+        // clipboard (\r\n or \r) doesn't leave mixed line endings behind.
+        this.#replaceSelectionText(
+          Array.isArray(text)
+            ? text.map((t) => textDocument.normalizeEol(t))
+            : textDocument.normalizeEol(text),
+          undefined,
+          true,
+          'document'
+        );
       }),
 
       addEventListener(contentEl, 'beforeinput', (e) => {
@@ -1729,13 +1765,33 @@ export class Editor<LAnnotation> implements DiffsEditor<LAnnotation> {
   #handleCustomPasteEvent = async () => {
     const clipboard = this.#options.clipboard;
     if (clipboard !== undefined) {
-      const text = await clipboard.readText();
+      let text: string | string[] = await clipboard.readText();
+      const selectionCount = this.#selections?.length ?? 0;
+      if (selectionCount > 1) {
+        const multiSelectionText = await clipboard.readText(
+          MULTI_SELECTION_CLIPBOARD_TYPE
+        );
+        try {
+          const selectionTexts = JSON.parse(multiSelectionText);
+          if (
+            Array.isArray(selectionTexts) &&
+            selectionTexts.length === selectionCount
+          ) {
+            text = selectionTexts;
+          }
+        } catch {
+          // Invalid selection metadata falls back to the plain-text value.
+        }
+      }
       const textDocument = this.#textDocument;
       if (textDocument !== undefined) {
         this.#replaceSelectionText(
-          textDocument.normalizeEol(text),
+          Array.isArray(text)
+            ? text.map((t) => textDocument.normalizeEol(t))
+            : textDocument.normalizeEol(text),
           undefined,
-          true
+          true,
+          'document'
         );
       }
     }
@@ -1769,7 +1825,6 @@ export class Editor<LAnnotation> implements DiffsEditor<LAnnotation> {
     return undefined;
   }
 
-  // TODO(@ije): add command registry
   #runCommand(command: EditorCommand) {
     const textDocument = this.#textDocument;
     if (textDocument === undefined) {
@@ -1847,6 +1902,10 @@ export class Editor<LAnnotation> implements DiffsEditor<LAnnotation> {
         this.#insertBlankLine();
         break;
 
+      case 'deleteHardLineForward':
+        this.#deleteHardLineForward();
+        break;
+
       case 'toggleComment':
       case 'toggleBlockComment': {
         const selections = this.#selections;
@@ -2452,7 +2511,7 @@ export class Editor<LAnnotation> implements DiffsEditor<LAnnotation> {
       return;
     }
 
-    // cancel existing background tokenzier task
+    // cancel existing background tokenizing task
     tokenizer.stopBackgroundTokenize();
 
     const t = performance.now();
@@ -2678,11 +2737,6 @@ export class Editor<LAnnotation> implements DiffsEditor<LAnnotation> {
       case 'deleteHardLineBackward':
         this.#deleteSoftLineBackward();
         break;
-      case 'deleteHardLineForward':
-        // TODO(@ije): Safari and Firefox does not support this input type
-        // use command instead
-        this.#deleteHardLineForward();
-        break;
       case 'deleteWordBackward':
         this.#deleteWordBackward();
         break;
@@ -3514,12 +3568,13 @@ export class Editor<LAnnotation> implements DiffsEditor<LAnnotation> {
       const top = this.#getLineY(line) + wrapLine * lineHeight;
       // Match the corner mask to the line color behind the selection; when
       // absent (context lines) the CSS falls back to the editor base bg.
-      const cornerBg = this.#lineBackgroundColor(line);
-      const css =
-        `width:${ch}px;transform:translateX(${left}px) translateY(${top}px);` +
-        (cornerBg !== undefined
-          ? `--diffs-selection-corner-bg:${cornerBg};`
-          : '');
+      const lineElement = this.#getLineElement(line);
+      let cornerBg = 'initial';
+      if (this.#isDiff && lineElement?.dataset.lineType === 'change-addition') {
+        cornerBg =
+          getComputedStyle(lineElement).getPropertyValue('--diffs-line-bg');
+      }
+      const css = `width:${ch}px;transform:translateX(${left}px) translateY(${top}px);--diffs-selection-corner-bg:${cornerBg}`;
       const dataset = {
         selectionCorner: '',
         [radius]: '',
@@ -3822,7 +3877,6 @@ export class Editor<LAnnotation> implements DiffsEditor<LAnnotation> {
     this.#renderSearchPanel(mode);
   }
 
-  // TODO(@ije): render search highlight
   #renderSearchPanel(mode: SearchPanelMode) {
     // cleanup the existing search panel
     this.#searchPanel?.cleanup();
@@ -3971,6 +4025,33 @@ export class Editor<LAnnotation> implements DiffsEditor<LAnnotation> {
     return getSelectionText(textDocument, selections);
   }
 
+  #getSelectionClipboardTexts(): string[] {
+    const textDocument = this.#textDocument;
+    const selections = this.#selections;
+    if (textDocument === undefined || selections === undefined) {
+      return [];
+    }
+    return getSelectionClipboardTexts(textDocument, selections);
+  }
+
+  /** Writes both the portable text and the selection pairing metadata. */
+  #writeSelectionClipboardData(
+    clipboardData: DataTransfer | null,
+    text: string,
+    selectionTexts: string[]
+  ): void {
+    if (clipboardData === null) {
+      return;
+    }
+    clipboardData.setData('text', text);
+    if (selectionTexts.length > 1) {
+      clipboardData.setData(
+        MULTI_SELECTION_CLIPBOARD_TYPE,
+        JSON.stringify(selectionTexts)
+      );
+    }
+  }
+
   #cutSelectionText(): string {
     const textDocument = this.#textDocument;
     const selections = this.#selections;
@@ -4040,7 +4121,8 @@ export class Editor<LAnnotation> implements DiffsEditor<LAnnotation> {
   #replaceSelectionText(
     text: string | string[],
     selections = this.#selections,
-    undoBoundary = false
+    undoBoundary = false,
+    textOrder: 'selection' | 'document' = 'selection'
   ) {
     if (selections === undefined) {
       return;
@@ -4057,15 +4139,16 @@ export class Editor<LAnnotation> implements DiffsEditor<LAnnotation> {
             selections,
             text,
             this.#lineAnnotations,
-            undoBoundary
+            undoBoundary,
+            textOrder
           )
         : applyTextChangeToSelections<LAnnotation>(
             textDocument,
             selections,
             {
               start: textDocument.offsetAt(primarySelection.start),
               end: textDocument.offsetAt(primarySelection.end),
-              text: Array.isArray(text) ? text.join('\n') : text,
+              text: Array.isArray(text) ? text.join(textDocument.eol) : text,
             },
             this.#lineAnnotations,
             undefined,
@@ -4367,30 +4450,6 @@ export class Editor<LAnnotation> implements DiffsEditor<LAnnotation> {
     return undefined;
   }
 
-  // TODO(@ije): remove this
-  // Painted background color of a line, read from the [data-line]::after layer
-  // (the line element itself is transparent in edit mode). Returns undefined when
-  // that layer is transparent (e.g. context lines).
-  #lineBackgroundColor(line: number): string | undefined {
-    const lineElement = this.#getLineElement(line);
-    if (lineElement === undefined) {
-      return undefined;
-    }
-    // testing environment like jsdom doesn't implement the getComputedStyle API
-    if (navigator.userAgent.includes('jsdom')) {
-      return undefined;
-    }
-    const backgroundColor = getComputedStyle(
-      lineElement,
-      '::after'
-    ).backgroundColor;
-    return backgroundColor === '' ||
-      backgroundColor === 'transparent' ||
-      backgroundColor === 'rgba(0, 0, 0, 0)'
-      ? undefined
-      : backgroundColor;
-  }
-
   // Returns the first and last document lines that have an editable row in the
   // current (virtualized) render window, or undefined when none are rendered.
   // Used by select-all to anchor a native selection: only rendered lines

packages/diffs/src/editor/matchBrackets.ts

@@ -1,6 +1,6 @@
 import type { Position, Range } from '../types';
 import type { TextDocument } from './textDocument';
-import type { EditorTokenizer } from './tokenzier';
+import type { EditorTokenizer } from './tokenizer';
 
 const OPEN_BRACKETS = new Map([
   ['(', ')'],