feat(blocks): supports pasting a URL from clipboard to automatically create a link from selection (#9001)

Closes: [BS-2001](https://linear.app/affine-design/issue/BS-2001/希望添加选中文字后粘贴链接的能力)

<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/8ypiIKZXudF5a0tIgIzf/49b4497b-2df3-42db-bfa0-a82d0e26093e.mov">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/8ypiIKZXudF5a0tIgIzf/49b4497b-2df3-42db-bfa0-a82d0e26093e.mov">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/8ypiIKZXudF5a0tIgIzf/49b4497b-2df3-42db-bfa0-a82d0e26093e.mov">Screen Recording 2024-12-17 at 16.59.57.mov</video>

Author: fundon

packages/blocks/src/root-block/clipboard/index.ts

@@ -132,7 +132,7 @@ export class PageClipboard {
     this._std.command
       .chain()
       .try(cmd => [
-        cmd.getTextSelection().deleteText(),
+        cmd.getTextSelection(),
         cmd
           .getSelectedModels()
           .clearAndSelectFirstModel()

packages/blocks/src/root-block/clipboard/middlewares/paste.ts

@@ -1,5 +1,7 @@
 import type { ParagraphBlockModel } from '@blocksuite/affine-model';
+import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
 
+import { REFERENCE_NODE } from '@blocksuite/affine-components/rich-text';
 import {
   ParseDocUrlProvider,
   type ParseDocUrlService,
@@ -154,10 +156,19 @@ class PasteTr {
   private _mergeSingle = () => {
     this._updateFlavour();
     const { firstDelta } = this._getDeltas();
-    this.pointState.text.applyDelta([
-      { retain: this.pointState.point.index },
-      ...firstDelta,
-    ]);
+    const { index, length } = this.pointState.point;
+
+    // Pastes a link
+    if (length && firstDelta.length === 1 && firstDelta[0].attributes?.link) {
+      this.pointState.text.format(index, length, firstDelta[0].attributes);
+    } else {
+      const ops: DeltaOperation[] = [{ retain: index }];
+      if (length) ops.push({ delete: length });
+      ops.push(...firstDelta);
+
+      this.pointState.text.applyDelta(ops);
+    }
+
     this.snapshot.content.splice(0, 1);
     this._updateSnapshot();
   };
@@ -424,7 +435,14 @@ class PasteTr {
         return { ...op };
       }
 
-      const reference = { pageId, type: 'LinkedPage' };
+      const reference: AffineTextAttributes['reference'] = {
+        pageId,
+        type: 'LinkedPage',
+      };
+      // Title alias
+      if (op.insert && op.insert !== REFERENCE_NODE && op.insert !== link) {
+        reference.title = op.insert;
+      }
 
       const extractedParams = extractSearchParams(link);
       const isLinkedBlock = extractedParams
@@ -446,7 +464,7 @@ class PasteTr {
       return {
         ...op,
         attributes: { reference },
-        insert: ' ',
+        insert: REFERENCE_NODE,
       };
     });
     return [newDelta, transformed];

tests/clipboard/clipboard.spec.ts

@@ -276,6 +276,48 @@ test(scoped`pasting internal url with params`, async ({ page }) => {
   await expect(page.locator('affine-reference')).toContainText('test page');
 });
 
+test(
+  scoped`pasting an external URL from clipboard to automatically creating a link from selection`,
+  async ({ page }) => {
+    await enterPlaygroundRoom(page);
+    await initEmptyParagraphState(page);
+    await focusTitle(page);
+    await type(page, 'test page');
+
+    await focusRichText(page);
+    await type(page, 'title alias');
+    await setSelection(page, 1, 6, 1, 11);
+
+    await pasteContent(page, {
+      'text/plain': 'https://affine.pro/',
+    });
+    await expect(page.locator('affine-link')).toContainText('alias');
+  }
+);
+
+test(
+  scoped`pasting an internal URL from clipboard to automatically creating a link from selection`,
+  async ({ page }) => {
+    await enterPlaygroundRoom(page);
+    await initEmptyParagraphState(page);
+    await focusTitle(page);
+    await type(page, 'test page');
+
+    await focusRichText(page);
+    await type(page, 'title alias');
+    await setSelection(page, 1, 6, 1, 11);
+
+    const docId = await getCurrentEditorDocId(page);
+    await mockParseDocUrlService(page, {
+      'http://workspace/doc-id': docId,
+    });
+    await pasteContent(page, {
+      'text/plain': 'http://workspace/doc-id',
+    });
+    await expect(page.locator('affine-reference')).toContainText('alias');
+  }
+);
+
 test(scoped`paste parent block`, async ({ page }) => {
   test.info().annotations.push({
     type: 'issue',