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
2026-05-20 16:44:05 +08:00 · 2026-03-28 17:33:29 +00:00
parent 2d835da0e3
commit 7981ef462e
49 changed files with 2870 additions and 209 deletions
@@ -0,0 +1,123 @@
+import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
+import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
+import { useCallback } from "react";
+import { Node as PMNode } from "@tiptap/pm/model";
+import {
+  EditorMenuProps,
+  ShouldShowProps,
+} from "@/features/editor/components/table/types/types.ts";
+import { ActionIcon, Tooltip } from "@mantine/core";
+import {
+  IconDownload,
+  IconTrash,
+} from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { getFileUrl } from "@/lib/config.ts";
+import classes from "../common/toolbar-menu.module.css";
+
+export function AudioMenu({ editor }: EditorMenuProps) {
+  const { t } = useTranslation();
+
+  const editorState = useEditorState({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) {
+        return null;
+      }
+
+      const audioAttrs = ctx.editor.getAttributes("audio");
+
+      return {
+        isAudio: ctx.editor.isActive("audio"),
+        src: audioAttrs?.src || null,
+      };
+    },
+  });
+
+  const shouldShow = useCallback(
+    ({ state }: ShouldShowProps) => {
+      if (!state) {
+        return false;
+      }
+
+      return editor.isActive("audio") && editor.getAttributes("audio").src;
+    },
+    [editor],
+  );
+
+  const getReferencedVirtualElement = useCallback(() => {
+    if (!editor) return;
+    const { selection } = editor.state;
+    const predicate = (node: PMNode) => node.type.name === "audio";
+    const parent = findParentNode(predicate)(selection);
+
+    if (parent) {
+      const dom = editor.view.nodeDOM(parent?.pos) as HTMLElement;
+      const domRect = dom.getBoundingClientRect();
+      return {
+        getBoundingClientRect: () => domRect,
+        getClientRects: () => [domRect],
+      };
+    }
+
+    const domRect = posToDOMRect(editor.view, selection.from, selection.to);
+    return {
+      getBoundingClientRect: () => domRect,
+      getClientRects: () => [domRect],
+    };
+  }, [editor]);
+
+  const handleDownload = useCallback(() => {
+    if (!editorState?.src) return;
+    const url = getFileUrl(editorState.src);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "";
+    a.click();
+  }, [editorState?.src]);
+
+  const handleDelete = useCallback(() => {
+    editor.commands.deleteSelection();
+  }, [editor]);
+
+  return (
+    <BaseBubbleMenu
+      editor={editor}
+      pluginKey={`audio-menu`}
+      updateDelay={0}
+      getReferencedVirtualElement={getReferencedVirtualElement}
+      options={{
+        placement: "top",
+        offset: 8,
+        flip: false,
+      }}
+      shouldShow={shouldShow}
+    >
+      <div className={classes.toolbar}>
+        <Tooltip position="top" label={t("Download")} withinPortal={false}>
+          <ActionIcon
+            onClick={handleDownload}
+            size="lg"
+            aria-label={t("Download")}
+            variant="subtle"
+          >
+            <IconDownload size={18} />
+          </ActionIcon>
+        </Tooltip>
+
+        <Tooltip position="top" label={t("Delete")} withinPortal={false}>
+          <ActionIcon
+            onClick={handleDelete}
+            size="lg"
+            aria-label={t("Delete")}
+            variant="subtle"
+          >
+            <IconTrash size={18} />
+          </ActionIcon>
+        </Tooltip>
+      </div>
+    </BaseBubbleMenu>
+  );
+}
+
+export default AudioMenu;
@@ -0,0 +1,37 @@
+.audioWrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  max-width: 100%;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.skeleton {
+  animation: pulse 1.2s ease-in-out infinite;
+
+  @mixin light {
+    background: linear-gradient(-90deg, var(--mantine-color-gray-3) 0%, var(--mantine-color-gray-1) 50%, var(--mantine-color-gray-3) 100%);
+    background-size: 400% 400%;
+  }
+
+  @mixin dark {
+    background: linear-gradient(-90deg, var(--mantine-color-dark-6) 0%, var(--mantine-color-dark-5) 50%, var(--mantine-color-dark-6) 100%);
+    background-size: 400% 400%;
+  }
+
+  @keyframes pulse {
+    0% {
+      background-position: 0% 0%;
+    }
+    100% {
+      background-position: -135% 0%;
+    }
+  }
+}
+
+.audio {
+  display: block;
+  width: 100%;
+  border-radius: 8px;
+}
@@ -0,0 +1,65 @@
+import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
+import { Group, Loader, Text } from "@mantine/core";
+import { useMemo } from "react";
+import { getFileUrl } from "@/lib/config.ts";
+import { isInternalFileUrl } from "@docmost/editor-ext";
+import classes from "./audio-view.module.css";
+import { useTranslation } from "react-i18next";
+
+export default function AudioView(props: NodeViewProps) {
+  const { t } = useTranslation();
+  const { editor, node } = props;
+  const { src, placeholder } = node.attrs;
+
+  const safeSrc = useMemo(() => {
+    if (!src || !isInternalFileUrl(src)) return null;
+    return getFileUrl(src);
+  }, [src]);
+
+  const previewSrc = useMemo(() => {
+    editor.storage.shared.audioPreviews =
+      editor.storage.shared.audioPreviews || {};
+
+    if (placeholder?.id) {
+      return editor.storage.shared.audioPreviews[placeholder.id];
+    }
+
+    return null;
+  }, [placeholder, editor]);
+
+  return (
+    <NodeViewWrapper data-drag-handle>
+      <div className={`${classes.audioWrapper} ${!safeSrc ? classes.skeleton : ''}`}>
+        {safeSrc && (
+          <audio
+            className={classes.audio}
+            preload="metadata"
+            controls
+            src={safeSrc}
+          />
+        )}
+        {!safeSrc && previewSrc && (
+          <Group pos="relative" w="100%">
+            <audio
+              className={classes.audio}
+              preload="metadata"
+              controls
+              src={previewSrc}
+            />
+            <Loader size={20} pos="absolute" top={6} right={6} />
+          </Group>
+        )}
+        {!safeSrc && !previewSrc && (
+          <Group justify="center" wrap="nowrap" gap="xs" maw="100%" px="md" h={54}>
+            <Loader size={20} style={{ flexShrink: 0 }} />
+            <Text component="span" size="sm" truncate="end">
+              {placeholder?.name
+                ? t("Uploading {{name}}", { name: placeholder.name })
+                : t("Uploading file")}
+            </Text>
+          </Group>
+        )}
+      </div>
+    </NodeViewWrapper>
+  );
+}
@@ -0,0 +1,36 @@
+import { handleAudioUpload } from "@docmost/editor-ext";
+import { uploadFile } from "@/features/page/services/page-service.ts";
+import { notifications } from "@mantine/notifications";
+import { getFileUploadSizeLimit } from "@/lib/config.ts";
+import { formatBytes } from "@/lib";
+import i18n from "@/i18n.ts";
+
+export const uploadAudioAction = handleAudioUpload({
+  onUpload: async (file: File, pageId: string): Promise<any> => {
+    try {
+      return await uploadFile(file, pageId);
+    } catch (err) {
+      notifications.show({
+        color: "red",
+        message: err?.response.data.message,
+      });
+      throw err;
+    }
+  },
+  validateFn: (file) => {
+    if (!file.type.includes("audio/")) {
+      return false;
+    }
+
+    if (file.size > getFileUploadSizeLimit()) {
+      notifications.show({
+        color: "red",
+        message: i18n.t("File exceeds the {{limit}} attachment limit", {
+          limit: formatBytes(getFileUploadSizeLimit()),
+        }),
+      });
+      return false;
+    }
+    return true;
+  },
+});