add url attachment name props

packages/app/src/components/ReactMarkdownComponents/Attachment.tsx

@@ -7,8 +7,10 @@ import { useSWRxAttachments } from '~/stores/attachment';
 import { useCurrentPageId } from '~/stores/page';
 
 export const Attachment: React.FC<{
-  attachmentId: string
-}> = React.memo(({ attachmentId }) => {
+  attachmentId: string,
+  url: string,
+  attachmentName: string
+}> = React.memo(({ attachmentId, url, attachmentName }) => {
   const { data: pageId } = useCurrentPageId();
   // TODO: We need to be able to get it from all pages if there are a lot of attachments.
   const { data: dataAttachments, remove } = useSWRxAttachments(pageId, 1);

packages/app/src/services/renderer/remark-plugins/attachment.ts

@@ -2,7 +2,7 @@ import { Schema as SanitizeOption } from 'hast-util-sanitize';
 import { Plugin } from 'unified';
 import { visit } from 'unist-util-visit';
 
-const SUPPORTED_ATTRIBUTES = ['attachmentId'];
+const SUPPORTED_ATTRIBUTES = ['attachmentId', 'url', 'attachmentName'];
 
 const isAttachmentLink = (url: string) => {
   // https://regex101.com/r/9qZhiK/1
@@ -21,6 +21,8 @@ export const remarkPlugin: Plugin = () => {
           data.hName = 'attachment';
           data.hProperties = {
             attachmentId: pathName[2],
+            url: node.url,
+            attachmentName: node.children[0].value,
           };
 
           // omit position to fix the key regardless of its position