feat: linked doc supports aliases

toeverything · Nov 28, 2024 · 5479d1c · 5479d1c
1 parent 293269d
commit 5479d1c
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 27 deletions.
diff --git a/packages/affine/components/src/rich-text/inline/presets/affine-inline-specs.ts b/packages/affine/components/src/rich-text/inline/presets/affine-inline-specs.ts
@@ -1,6 +1,6 @@
 import type { InlineEditor, InlineRootElement } from '@blocksuite/inline';
 
-import { ReferenceInfoSchema } from '@blocksuite/affine-model';
+import { AliasInfoSchema, ReferenceInfoSchema } from '@blocksuite/affine-model';
 import { StdIdentifier } from '@blocksuite/block-std';
 import { html } from 'lit';
 import { z } from 'zod';
@@ -149,6 +149,7 @@ export const ReferenceInlineSpecExtension = InlineSpecExtension(
           ]),
         })
         .merge(ReferenceInfoSchema)
+        .merge(AliasInfoSchema)
         .optional()
         .nullable()
         .catch(undefined),

diff --git a/...s/affine/components/src/rich-text/inline/presets/nodes/link-node/link-popup/link-popup.ts b/...s/affine/components/src/rich-text/inline/presets/nodes/link-node/link-popup/link-popup.ts
@@ -174,7 +174,7 @@ export class LinkPopup extends WithDisposable(LitElement) {
         <editor-icon-button
           aria-label="Copy"
           data-testid="copy-link"
-          .tooltip=${'Click to copy link'}
+          .tooltip=${'Copy link'}
           @click=${this._copyUrl}
         >
           ${CopyIcon}

diff --git a/...es/affine/components/src/rich-text/inline/presets/nodes/reference-node/reference-popup.ts b/...es/affine/components/src/rich-text/inline/presets/nodes/reference-node/reference-popup.ts
@@ -16,7 +16,9 @@ import type { AffineInlineEditor } from '../../affine-inline-specs.js';
 
 import {
   CenterPeekIcon,
+  CopyIcon,
   DeleteIcon,
+  EditIcon,
   ExpandFullSmallIcon,
   MoreVerticalIcon,
   OpenIcon,
@@ -311,6 +313,25 @@ export class ReferencePopup extends WithDisposable(LitElement) {
     const buttons = [
       this._openMenuButton(),
 
+      html`
+        <editor-icon-button
+          aria-label="Copy"
+          data-testid="copy-link"
+          .tooltip=${'Copy link'}
+        >
+          ${CopyIcon}
+        </editor-icon-button>
+
+        <editor-icon-button
+          aria-label="Edit"
+          data-testid="edit"
+          .tooltip=${'Edit'}
+          ?disabled=${this.doc.readonly}
+        >
+          ${EditIcon}
+        </editor-icon-button>
+      `,
+
       this._viewToggleMenu(),
 
       html`

diff --git a/packages/affine/model/src/blocks/embed/linked-doc/linked-doc-model.ts b/packages/affine/model/src/blocks/embed/linked-doc/linked-doc-model.ts
@@ -1,6 +1,6 @@
 import { BlockModel } from '@blocksuite/store';
 
-import type { ReferenceInfo } from '../../../consts/doc.js';
+import type { AliasInfo, ReferenceInfo } from '../../../consts/doc.js';
 import type { EmbedCardStyle } from '../../../utils/index.js';
 
 import { defineEmbedModel } from '../../../utils/index.js';
@@ -16,7 +16,8 @@ export const EmbedLinkedDocStyles: EmbedCardStyle[] = [
 export type EmbedLinkedDocBlockProps = {
   style: EmbedCardStyle;
   caption: string | null;
-} & ReferenceInfo;
+} & ReferenceInfo &
+  AliasInfo;
 
 export class EmbedLinkedDocModel extends defineEmbedModel<EmbedLinkedDocBlockProps>(
   BlockModel

diff --git a/packages/affine/model/src/blocks/embed/synced-doc/synced-doc-model.ts b/packages/affine/model/src/blocks/embed/synced-doc/synced-doc-model.ts
@@ -1,6 +1,6 @@
 import { BlockModel } from '@blocksuite/store';
 
-import type { ReferenceInfo } from '../../../consts/doc.js';
+import type { AliasInfo, ReferenceInfo } from '../../../consts/doc.js';
 import type { EmbedCardStyle } from '../../../utils/index.js';
 
 import { defineEmbedModel } from '../../../utils/index.js';
@@ -11,7 +11,8 @@ export type EmbedSyncedDocBlockProps = {
   style: EmbedCardStyle;
   caption?: string | null;
   scale?: number;
-} & ReferenceInfo;
+} & ReferenceInfo &
+  AliasInfo;
 
 export class EmbedSyncedDocModel extends defineEmbedModel<EmbedSyncedDocBlockProps>(
   BlockModel

diff --git a/packages/affine/model/src/consts/doc.ts b/packages/affine/model/src/consts/doc.ts
@@ -22,3 +22,21 @@ export const ReferenceInfoSchema = z.object({
 });
 
 export type ReferenceInfo = z.infer<typeof ReferenceInfoSchema>;
+
+/**
+ * Custom title and description information.
+ *
+ * Supports the following blocks:
+ *
+ * 1. AffineReference: title
+ * 2. EmbedLinkedDocBlock: title & description
+ * 3. EmbedSyncedDocBlock: title
+ */
+export const AliasInfoSchema = z
+  .object({
+    aliasTitle: z.string(),
+    aliasDescription: z.string(),
+  })
+  .partial();
+
+export type AliasInfo = z.infer<typeof AliasInfoSchema>;
diff --git a/packages/blocks/src/root-block/widgets/embed-card-toolbar/embed-card-toolbar.ts b/packages/blocks/src/root-block/widgets/embed-card-toolbar/embed-card-toolbar.ts
@@ -612,6 +612,8 @@ export class EmbedCardToolbar extends WidgetComponent<
         : null;
 
     const buttons = [
+      this._openMenuButton(),
+
       this._canShowUrlOptions && model && 'url' in model
         ? html`
             <a
@@ -622,30 +624,29 @@ export class EmbedCardToolbar extends WidgetComponent<
             >
               <span>${getHostName(model.url)}</span>
             </a>
-
-            <editor-icon-button
-              aria-label="Copy"
-              data-testid="copy-link"
-              .tooltip=${'Click to copy link'}
-              ?disabled=${model.doc.readonly}
-              @click=${() => this._copyUrl()}
-            >
-              ${CopyIcon}
-            </editor-icon-button>
-
-            <editor-icon-button
-              aria-label="Edit"
-              data-testid="edit"
-              .tooltip=${'Edit'}
-              ?disabled=${this.doc.readonly}
-              @click=${() => toggleEmbedCardEditModal(this.host, model)}
-            >
-              ${EditIcon}
-            </editor-icon-button>
           `
         : nothing,
 
-      this._openMenuButton(),
+      html`
+        <editor-icon-button
+          aria-label="Copy"
+          data-testid="copy-link"
+          .tooltip=${'Copy link'}
+          @click=${() => this._copyUrl()}
+        >
+          ${CopyIcon}
+        </editor-icon-button>
+
+        <editor-icon-button
+          aria-label="Edit"
+          data-testid="edit"
+          .tooltip=${'Edit'}
+          ?disabled=${this.doc.readonly}
+          @click=${() => model && toggleEmbedCardEditModal(this.host, model)}
+        >
+          ${EditIcon}
+        </editor-icon-button>
+      `,
 
       this._viewToggleMenu(),