feat: add copy icon for link preview (#1491)

* feat: add copy icon for link preview * chore: changeset * chore: adjust fill
Milkdown · Aug 28, 2024 · 8e2c866 · 8e2c866
1 parent 06bbe86
commit 8e2c866
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 2 deletions.
diff --git a/.changeset/shiny-spoons-learn.md b/.changeset/shiny-spoons-learn.md
@@ -0,0 +1,5 @@
+---
+"@milkdown/crepe": patch
+---
+
+Add copy link button
diff --git a/packages/crepe/src/feature/link-tooltip/index.ts b/packages/crepe/src/feature/link-tooltip/index.ts
@@ -1,6 +1,6 @@
 import { configureLinkTooltip, linkTooltipConfig, linkTooltipPlugin } from '@milkdown/kit/component/link-tooltip'
 import type { DefineFeature, Icon } from '../shared'
-import { confirmIcon, editIcon, linkIcon, removeIcon } from '../../icons'
+import { confirmIcon, copyIcon, editIcon, removeIcon } from '../../icons'
 
 interface LinkTooltipConfig {
   linkIcon: Icon
@@ -19,7 +19,7 @@ export const defineFeature: DefineFeature<LinkTooltipFeatureConfig> = (editor, c
     .config((ctx) => {
       ctx.update(linkTooltipConfig.key, prev => ({
         ...prev,
-        linkIcon: config?.linkIcon ?? (() => linkIcon),
+        linkIcon: config?.linkIcon ?? (() => copyIcon),
         editButton: config?.editButton ?? (() => editIcon),
         removeButton: config?.removeButton ?? (() => removeIcon),
         confirmButton: config?.confirmButton ?? (() => confirmIcon),

diff --git a/packages/crepe/src/icons/copy.ts b/packages/crepe/src/icons/copy.ts
@@ -0,0 +1,15 @@
+import { html } from 'atomico'
+
+export const copyIcon = html`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="24px"
+    viewBox="0 -960 960 960"
+    width="24px"
+    fill="none"
+  >
+    <path
+      d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"
+    />
+  </svg>
+`
diff --git a/packages/crepe/src/icons/index.ts b/packages/crepe/src/icons/index.ts
@@ -11,6 +11,7 @@ export * from './chevronDown'
 export * from './clear'
 export * from './code'
 export * from './confirm'
+export * from './copy'
 export * from './divider'
 export * from './dragHandle'
 export * from './edit'

diff --git a/packages/crepe/src/theme/common/link-tooltip.css b/packages/crepe/src/theme/common/link-tooltip.css
@@ -32,8 +32,12 @@
           color: var(--crepe-color-outline);
           fill: var(--crepe-color-outline);
         }
+        border-radius: 8px;
         padding: 3px;
         line-height: 24px;
+        &:hover {
+          background: var(--crepe-color-hover);
+        }
       }
 
       & > .link-display {