feat(editor): audio and PDF nodes (#2064)

* use local resizable

* feat: aduio

* support audio imports

* feat: use confluence real file names

* cleanup

* error handling

* hide notice

* add audio

* fix pulse

* Fix import and export

* unify pulse

* hide in readonly mode

* keywords

* keyword

* translations

* better sort

* feat: PDF embed

* cleanup

* remove audio menu

* open active

* hide focus on readonly mode

* increase iframe default dimension

apps/client/src/features/editor/components/attachment/attachment-view.tsx

@@ -1,17 +1,43 @@
 import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
-import { Group, Text, Paper, ActionIcon, Loader } from "@mantine/core";
+import { Group, Text, Paper, ActionIcon, Loader, Tooltip } from "@mantine/core";
 import { getFileUrl } from "@/lib/config.ts";
-import { IconDownload, IconPaperclip } from "@tabler/icons-react";
+import { IconDownload, IconFileTypePdf, IconPaperclip } from "@tabler/icons-react";
 import { useHover } from "@mantine/hooks";
 import { formatBytes } from "@/lib";
 import { useTranslation } from "react-i18next";
+import { useCallback } from "react";
 
 export default function AttachmentView(props: NodeViewProps) {
   const { t } = useTranslation();
-  const { node, selected } = props;
-  const { url, name, size } = node.attrs;
+  const { editor, node, getPos, selected } = props;
+  const { url, name, size, mime, attachmentId } = node.attrs;
   const { hovered, ref } = useHover();
 
+  const isPdf = mime === "application/pdf" || name?.toLowerCase().endsWith(".pdf");
+
+  const handleEmbedAsPdf = useCallback(() => {
+    const pos = getPos();
+    if (pos === undefined || !url) return;
+
+    const nodeSize = node.nodeSize;
+
+    editor
+      .chain()
+      .insertContentAt(
+        { from: pos, to: pos + nodeSize },
+        {
+          type: "pdf",
+          attrs: {
+            src: url,
+            name,
+            attachmentId,
+            size,
+          },
+        },
+      )
+      .run();
+  }, [editor, getPos, node, url, name, attachmentId]);
+
   return (
     <NodeViewWrapper>
       <Paper withBorder p="4px" ref={ref} data-drag-handle>
@@ -39,11 +65,20 @@ export default function AttachmentView(props: NodeViewProps) {
           </Group>
 
           {url && (selected || hovered) && (
-            <a href={getFileUrl(url)} target="_blank">
-              <ActionIcon variant="default" aria-label="download file">
-                <IconDownload size={18} />
-              </ActionIcon>
-            </a>
+            <Group gap={4} wrap="nowrap" style={{ flexShrink: 0 }}>
+              {isPdf && editor.isEditable && (
+                <Tooltip label={t("Embed as PDF")} position="top" withinPortal={false}>
+                  <ActionIcon variant="default" aria-label={t("Embed as PDF")} onClick={handleEmbedAsPdf}>
+                    <IconFileTypePdf size={18} />
+                  </ActionIcon>
+                </Tooltip>
+              )}
+              <a href={getFileUrl(url)} target="_blank">
+                <ActionIcon variant="default" aria-label="download file">
+                  <IconDownload size={18} />
+                </ActionIcon>
+              </a>
+            </Group>
           )}
         </Group>
       </Paper>