editor: add copy link tool

packages/editor/src/toolbar/floating-menus/hover-popup/link.tsx

@@ -34,7 +34,7 @@ function LinkHoverPopup(props: HoverPopupProps) {
   return (
     <ToolbarGroup
       force
-      tools={["openLink", "editLink", "removeLink"]}
+      tools={["openLink", "editLink", "removeLink", "copyLink"]}
       editor={editor}
       selectedNode={selectedNode}
       sx={{

packages/editor/src/toolbar/icons.ts

@@ -18,23 +18,54 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import {
+  mdiApplicationCogOutline,
+  mdiArrowDown,
+  mdiArrowExpandDown,
+  mdiArrowExpandLeft,
+  mdiArrowExpandRight,
+  mdiArrowExpandUp,
+  mdiArrowLeft,
+  mdiArrowUp,
   mdiAttachment,
   mdiBorderHorizontal,
+  mdiCameraOutline,
   mdiCheck,
+  mdiCheckboxMarkedOutline,
   mdiChevronDown,
+  mdiChevronLeft,
+  mdiChevronRight,
+  mdiChevronUp,
+  mdiCircle,
+  mdiClipboardOutline,
+  mdiClose,
   mdiCodeBraces,
   mdiCodeTags,
+  mdiContentSaveOutline,
+  mdiDeleteOutline,
   mdiDotsVertical,
+  mdiDownloadOutline,
+  mdiDrag,
+  mdiEyeOutline,
+  mdiFileTreeOutline,
   mdiFormatAlignCenter,
   mdiFormatAlignJustify,
   mdiFormatAlignLeft,
   mdiFormatAlignRight,
   mdiFormatBold,
   mdiFormatClear,
+  mdiFormatColorFill,
   mdiFormatColorHighlight,
   mdiFormatColorText,
+  mdiFormatFont,
+  mdiFormatFontSizeIncrease,
+  mdiFormatHeaderPound,
+  mdiFormatIndentDecrease,
+  mdiFormatIndentIncrease,
   mdiFormatItalic,
+  mdiFormatLetterCase,
+  mdiFormatLetterMatches,
   mdiFormatListBulleted,
+  mdiFormatListCheckbox,
   mdiFormatListNumbered,
   mdiFormatQuoteClose,
   mdiFormatStrikethrough,
@@ -43,78 +74,47 @@ import {
   mdiFormatTextdirectionLToR,
   mdiFormatTextdirectionRToL,
   mdiFormatUnderline,
+  mdiFullscreen,
+  mdiFunctionVariant,
+  mdiImageEditOutline,
+  mdiImageOutline,
   mdiInvertColorsOff,
+  mdiLink,
+  mdiLinkOff,
   mdiLinkPlus,
   mdiLoading,
+  mdiMathIntegral,
+  mdiMinus,
+  mdiMovieCogOutline,
+  mdiMoviePlusOutline,
+  mdiNewspaper,
+  mdiNotificationClearAll,
+  mdiOpenInNew,
+  mdiPageNextOutline,
+  mdiPaletteOutline,
+  mdiPlus,
+  mdiProgressAlert,
+  mdiProgressDownload,
+  mdiRegex,
+  mdiResizeBottomRight,
+  mdiSortBoolAscendingVariant,
+  mdiSortDescending,
   mdiTable,
   mdiTableBorder,
-  mdiTableRowPlusAfter,
+  mdiTableCog,
-  mdiTableRowPlusBefore,
-  mdiTableRowRemove,
   mdiTableColumnPlusAfter,
   mdiTableColumnPlusBefore,
   mdiTableColumnRemove,
-  mdiUploadOutline,
-  mdiPlus,
-  mdiFormatColorFill,
-  mdiClose,
-  mdiSortDescending,
-  mdiArrowExpandRight,
-  mdiArrowExpandLeft,
-  mdiArrowExpandDown,
-  mdiArrowExpandUp,
-  mdiTableMergeCells,
-  mdiTableSplitCell,
-  mdiDeleteOutline,
-  mdiDownloadOutline,
-  mdiFormatListCheckbox,
-  mdiDrag,
-  mdiCheckboxMarkedOutline,
-  mdiChevronUp,
-  mdiArrowUp,
-  mdiArrowDown,
-  mdiRegex,
-  mdiFormatLetterCase,
-  mdiFormatLetterMatches,
-  mdiMoviePlusOutline,
-  mdiLink,
-  mdiChevronRight,
   mdiTableColumnWidth,
-  mdiTableRowHeight,
+  mdiTableMergeCells,
-  mdiMinus,
-  mdiPaletteOutline,
-  mdiCircle,
-  mdiChevronLeft,
-  mdiTableCog,
   mdiTableOff,
-  mdiImageEditOutline,
+  mdiTableRowHeight,
-  mdiArrowLeft,
+  mdiTableRowPlusAfter,
-  mdiMovieCogOutline,
+  mdiTableRowPlusBefore,
-  mdiLinkOff,
+  mdiTableRowRemove,
-  mdiOpenInNew,
+  mdiTableSplitCell,
-  mdiCameraOutline,
+  mdiUploadOutline,
-  mdiMathIntegral,
+  mdiWeb
-  mdiFunctionVariant,
-  mdiFileTreeOutline,
-  mdiFormatFont,
-  mdiFormatFontSizeIncrease,
-  mdiFormatHeaderPound,
-  mdiFormatIndentIncrease,
-  mdiFormatIndentDecrease,
-  mdiResizeBottomRight,
-  mdiImageOutline,
-  mdiProgressDownload,
-  mdiProgressAlert,
-  mdiContentSaveOutline,
-  mdiClipboardOutline,
-  mdiNotificationClearAll,
-  mdiNewspaper,
-  mdiFullscreen,
-  mdiWeb,
-  mdiPageNextOutline,
-  mdiSortBoolAscendingVariant,
-  mdiApplicationCogOutline,
-  mdiEyeOutline
 } from "@mdi/js";
 
 export const Icons = {
@@ -144,6 +144,7 @@ export const Icons = {
   link: mdiLinkPlus,
   linkRemove: mdiLinkOff,
   openLink: mdiOpenInNew,
+  copyLink: mdiClipboardOutline,
   openSource: mdiWeb,
   webClip: mdiNewspaper,
   simplifyWebClip: mdiPageNextOutline,

packages/editor/src/toolbar/tool-definitions.ts

@@ -60,6 +60,11 @@ const tools: Record<ToolId, ToolDefinition> = {
     title: "Open link",
     conditional: true
   },
+  copyLink: {
+    icon: "copyLink",
+    title: "Copy link",
+    conditional: true
+  },
   linkSettings: {
     icon: "linkSettings",
     title: "Link settings",

packages/editor/src/toolbar/tools/index.ts

@@ -81,7 +81,14 @@ import {
   EmbedProperties,
   EmbedSettings
 } from "./embed";
-import { AddLink, EditLink, RemoveLink, LinkSettings, OpenLink } from "./link";
+import {
+  AddLink,
+  EditLink,
+  RemoveLink,
+  LinkSettings,
+  OpenLink,
+  CopyLink
+} from "./link";
 import {
   WebClipFullScreen,
   WebClipSettings,
@@ -103,6 +110,7 @@ const tools = {
   addLink: AddLink,
   editLink: EditLink,
   removeLink: RemoveLink,
+  copyLink: CopyLink,
   linkSettings: LinkSettings,
   openLink: OpenLink,
   insertBlock: InsertBlock,

packages/editor/src/toolbar/tools/link.tsx

@@ -41,7 +41,7 @@ export function LinkSettings(props: ToolProps) {
       autoOpen
       autoCloseOnUnmount
       popupId="linkSettings"
-      tools={["openLink", "editLink", "removeLink"]}
+      tools={["openLink", "editLink", "removeLink", "copyLink"]}
     />
   );
 }
@@ -247,6 +247,27 @@ export function OpenLink(props: ToolProps) {
   );
 }
 
+export function CopyLink(props: ToolProps) {
+  const { editor, selectedNode: _selectedNode } = props;
+  const selectedNode = useRefValue(
+    _selectedNode || selectionToOffset(editor.state)
+  );
+  const { node } = selectedNode.current || {};
+  const link = node ? findMark(node, "link") : null;
+  if (!link) return null;
+  const href = link?.attrs.href;
+
+  return (
+    <ToolButton
+      {...props}
+      toggled={false}
+      onClick={() => {
+        editor.commands.copyToClipboard(href);
+      }}
+    />
+  );
+}
+
 export type LinkDefinition = {
   href?: string;
   text?: string;