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/public/locales/en-US/translation.json

@@ -341,6 +341,7 @@
   "Insert horizontal rule divider": "Insert horizontal rule divider",
   "Upload any image from your device.": "Upload any image from your device.",
   "Upload any video from your device.": "Upload any video from your device.",
+  "Upload any audio from your device.": "Upload any audio from your device.",
   "Upload any file from your device.": "Upload any file from your device.",
   "Uploading {{name}}": "Uploading {{name}}",
   "Uploading file": "Uploading file",
@@ -351,6 +352,12 @@
   "Divider": "Divider.",
   "Quote": "Quote.",
   "Image": "Image.",
+  "Audio": "Audio.",
+  "Embed PDF": "Embed PDF",
+  "Upload and embed a PDF file.": "Upload and embed a PDF file.",
+  "Embed as PDF": "Embed as PDF",
+  "Failed to load PDF": "Failed to load PDF",
+  "Convert to attachment": "Convert to attachment",
   "File attachment": "File attachment.",
   "Toggle block": "Toggle block.",
   "Callout": "Callout.",
@@ -723,5 +730,7 @@
   "Publish": "Publish.",
   "Security": "Security.",
   "Enforce SSO": "Enforce SSO.",
-  "Once enforced, members will not be able to login with email and password.": "Once enforced, members will not be able to log in with email and password."
+  "Once enforced, members will not be able to login with email and password.": "Once enforced, members will not be able to log in with email and password.",
+  "Uploading {{name}}": "Uploading {{name}}",
+  "Uploading file": "Uploading file"
 }

apps/client/src/ee/page-permission/components/page-share-modal.tsx

@@ -71,7 +71,10 @@ export function PageShareModal({ readOnly }: PageShareModalProps) {
           ) : null
         }
         variant="default"
-        onClick={open}
+        onClick={() => {
+          setActiveTab(isPubliclyShared ? "publish" : hasPagePermissions ? "access" : "publish");
+          open();
+        }}
       >
         {t("Share")}
       </Button>

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>

apps/client/src/features/editor/components/audio/audio-menu.tsx

@@ -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;

apps/client/src/features/editor/components/audio/audio-view.module.css

@@ -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;
+}

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

@@ -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>
+  );
+}

apps/client/src/features/editor/components/audio/upload-audio-action.tsx

@@ -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;
+  },
+});

apps/client/src/features/editor/components/common/editor-paste-handler.tsx

@@ -1,6 +1,7 @@
 import { uploadImageAction } from "@/features/editor/components/image/upload-image-action.tsx";
 import { uploadVideoAction } from "@/features/editor/components/video/upload-video-action.tsx";
 import { uploadAttachmentAction } from "../attachment/upload-attachment-action";
+import { uploadPdfAction } from "../pdf/upload-pdf-action";
 import { createMentionAction } from "@/features/editor/components/link/internal-link-paste.ts";
 import { INTERNAL_LINK_REGEX } from "@/lib/constants.ts";
 import { Editor } from "@tiptap/core";
@@ -12,6 +13,8 @@ import {
 const ATTACHMENT_NODE_TYPES = [
   "image",
   "video",
+  "audio",
+  "pdf",
   "attachment",
   "excalidraw",
   "drawio",
@@ -63,6 +66,7 @@ export const handlePaste = (
       const pos = editor.state.selection.from;
       uploadImageAction(file, editor, pos, pageId);
       uploadVideoAction(file, editor, pos, pageId);
+      uploadPdfAction(file, editor, pos, pageId);
       uploadAttachmentAction(file, editor, pos, pageId);
     }
     return true;
@@ -229,6 +233,7 @@ export const handleFileDrop = (
 
       uploadImageAction(file, editor, coordinates?.pos ?? 0 - 1, pageId);
       uploadVideoAction(file, editor, coordinates?.pos ?? 0 - 1, pageId);
+      uploadPdfAction(file, editor, coordinates?.pos ?? 0 - 1, pageId);
       uploadAttachmentAction(file, editor, coordinates?.pos ?? 0 - 1, pageId);
     }
     return true;

apps/client/src/features/editor/components/common/node-resize-handles.ts

@@ -1,5 +1,5 @@
-import type { ResizableNodeViewDirection } from "@tiptap/core";
 import classes from "./node-resize.module.css";
+import { ResizableNodeViewDirection } from "@docmost/editor-ext";
 
 export function createResizeHandle(
   direction: ResizableNodeViewDirection,

apps/client/src/features/editor/components/common/resizable-wrapper.module.css

@@ -20,8 +20,8 @@
 
 .cornerHandle {
   position: absolute;
-  width: 36px;
-  height: 36px;
+  width: 24px;
+  height: 24px;
   z-index: 2;
   opacity: 0;
   transition: opacity 0.2s ease;
@@ -42,13 +42,13 @@
   }
 
   &::before {
-    width: 28px;
+    width: 20px;
     height: 3px;
   }
 
   &::after {
     width: 3px;
-    height: 28px;
+    height: 20px;
   }
 
   &:hover::before,

apps/client/src/features/editor/components/common/resizable-wrapper.tsx

@@ -74,6 +74,15 @@ export const ResizableWrapper: React.FC<ResizableWrapperProps> = ({
   const constraintsRef = useRef({ minWidth, maxWidth, minHeight, maxHeight });
   constraintsRef.current = { minWidth, maxWidth, minHeight, maxHeight };
 
+  useEffect(() => {
+    if (!dragRef.current && wrapperRef.current) {
+      widthRef.current = initialWidth;
+      heightRef.current = initialHeight;
+      wrapperRef.current.style.width = `${initialWidth}px`;
+      wrapperRef.current.style.height = `${initialHeight}px`;
+    }
+  }, [initialWidth, initialHeight]);
+
   const handleMouseMove = useRef((e: MouseEvent) => {
     const drag = dragRef.current;
     if (!drag || !wrapperRef.current) return;

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

@@ -86,8 +86,8 @@ export default function EmbedView(props: NodeViewProps) {
       {embedUrl ? (
         <div className={classes.embedContainer}>
           <ResizableWrapper
-            initialWidth={nodeWidth || 640}
-            initialHeight={nodeHeight || 480}
+            initialWidth={nodeWidth || 800}
+            initialHeight={nodeHeight || 600}
             minWidth={200}
             maxWidth={1200}
             minHeight={200}
@@ -102,8 +102,9 @@ export default function EmbedView(props: NodeViewProps) {
             <iframe
               className={classes.embedIframe}
               src={sanitizeUrl(embedUrl)}
-              allow="encrypted-media"
-              sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
+              allow="encrypted-media; clipboard-read; clipboard-write; picture-in-picture;"
+              loading="lazy"
+              sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-downloads"
               allowFullScreen
               frameBorder="0"
             />

apps/client/src/features/editor/components/image/image-view.module.css

@@ -5,6 +5,9 @@
   max-width: 100%;
   border-radius: 8px;
   overflow: hidden;
+}
+
+.skeleton {
   animation: pulse 1.2s ease-in-out infinite;
 
   @mixin light {

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

@@ -33,6 +33,7 @@ export default function ImageView(props: NodeViewProps) {
         className={clsx(
           selected && "ProseMirror-selectednode",
           classes.imageWrapper,
+          !src && classes.skeleton,
           alignClass,
         )}
         style={{

apps/client/src/features/editor/components/pdf/pdf-menu.tsx

@@ -0,0 +1,145 @@
+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 {
+  IconPaperclip,
+  IconTrash,
+} from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import classes from "../common/toolbar-menu.module.css";
+
+export function PdfMenu({ editor }: EditorMenuProps) {
+  const { t } = useTranslation();
+
+  const editorState = useEditorState({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) {
+        return null;
+      }
+
+      const pdfAttrs = ctx.editor.getAttributes("pdf");
+
+      return {
+        isPdf: ctx.editor.isActive("pdf"),
+        src: pdfAttrs?.src || null,
+        name: pdfAttrs?.name || null,
+        attachmentId: pdfAttrs?.attachmentId || null,
+      };
+    },
+  });
+
+  const shouldShow = useCallback(
+    ({ state }: ShouldShowProps) => {
+      if (!state || !editor.isActive("pdf")) {
+        return false;
+      }
+
+      const { selection } = state;
+      const dom = editor.view.nodeDOM(selection.from) as HTMLElement | null;
+      if (!dom) return false;
+
+      return !!dom.querySelector("[data-pdf-error]");
+    },
+    [editor],
+  );
+
+  const getReferencedVirtualElement = useCallback(() => {
+    if (!editor) return;
+    const { selection } = editor.state;
+    const predicate = (node: PMNode) => node.type.name === "pdf";
+    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 handleConvertToAttachment = useCallback(() => {
+    if (!editorState?.src) return;
+
+    const { selection } = editor.state;
+    const { from } = selection;
+    const node = editor.state.doc.nodeAt(from);
+    if (!node || node.type.name !== "pdf") return;
+
+    editor
+      .chain()
+      .insertContentAt(
+        { from, to: from + node.nodeSize },
+        {
+          type: "attachment",
+          attrs: {
+            url: node.attrs.src,
+            name: node.attrs.name,
+            attachmentId: node.attrs.attachmentId,
+            size: node.attrs.size,
+            mime: "application/pdf",
+          },
+        },
+      )
+      .run();
+  }, [editor, editorState]);
+
+  const handleDelete = useCallback(() => {
+    editor.commands.deleteSelection();
+  }, [editor]);
+
+  return (
+    <BaseBubbleMenu
+      editor={editor}
+      pluginKey={`pdf-menu`}
+      updateDelay={0}
+      getReferencedVirtualElement={getReferencedVirtualElement}
+      options={{
+        placement: "top",
+        offset: 8,
+        flip: false,
+      }}
+      shouldShow={shouldShow}
+    >
+      <div className={classes.toolbar}>
+        <Tooltip position="top" label={t("Convert to attachment")} withinPortal={false}>
+          <ActionIcon
+            onClick={handleConvertToAttachment}
+            size="lg"
+            aria-label={t("Convert to attachment")}
+            variant="subtle"
+          >
+            <IconPaperclip 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 PdfMenu;

apps/client/src/features/editor/components/pdf/pdf-view.module.css

@@ -0,0 +1,100 @@
+.pdfWrapper {
+  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%;
+    }
+  }
+}
+
+.pdfContainer {
+  display: flex;
+  justify-content: center;
+}
+
+.pdfResizeWrapper {
+  @mixin light {
+    background-color: var(--mantine-color-gray-0);
+  }
+
+  @mixin dark {
+    background-color: var(--mantine-color-dark-7);
+  }
+}
+
+.pdfIframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  border-radius: 8px;
+}
+
+.hoverMenu {
+  position: absolute;
+  top: 56px;
+  right: 8px;
+  z-index: 2;
+  display: flex;
+  gap: 4px;
+  padding: 4px;
+  border-radius: 6px;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.hoverMenu::before {
+  content: "";
+  position: absolute;
+  inset: -12px;
+}
+
+.hoverMenu:hover {
+  opacity: 1;
+}
+
+.pdfResizeWrapper:hover .hoverMenu {
+  opacity: 1;
+}
+
+.pdfError {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 32px;
+  border-radius: 8px;
+  cursor: pointer;
+
+  @mixin light {
+    background-color: var(--mantine-color-gray-0);
+  }
+
+  @mixin dark {
+    background-color: var(--mantine-color-dark-7);
+  }
+}

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

@@ -0,0 +1,168 @@
+import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
+import { ActionIcon, Group, Loader, Text, Tooltip } from "@mantine/core";
+import { useCallback, useMemo, useState } from "react";
+import { getFileUrl } from "@/lib/config.ts";
+import { ResizableWrapper } from "../common/resizable-wrapper";
+import clsx from "clsx";
+import classes from "./pdf-view.module.css";
+import { useTranslation } from "react-i18next";
+import { isInternalFileUrl } from "@docmost/editor-ext";
+import {
+  IconFileTypePdf,
+  IconPaperclip,
+  IconTrash,
+} from "@tabler/icons-react";
+
+export default function PdfView(props: NodeViewProps) {
+  const { t } = useTranslation();
+  const { editor, node, getPos, selected, updateAttributes } = props;
+  const { src, placeholder, width: nodeWidth, height: nodeHeight } = node.attrs;
+  const [hasError, setHasError] = useState(false);
+
+  const safeSrc = useMemo(() => {
+    if (!src || !isInternalFileUrl(src)) return null;
+    return getFileUrl(src);
+  }, [src]);
+
+  const handleSelect = useCallback(() => {
+    const pos = getPos();
+    if (pos !== undefined) {
+      editor.commands.setNodeSelection(pos);
+    }
+  }, [editor, getPos]);
+
+  const handleResize = useCallback(
+    (newWidth: number, newHeight: number) => {
+      updateAttributes({ width: newWidth, height: newHeight });
+    },
+    [updateAttributes],
+  );
+
+  const handleConvertToAttachment = useCallback(() => {
+    if (!src) return;
+    const pos = getPos();
+    if (pos === undefined) return;
+    const currentNode = editor.state.doc.nodeAt(pos);
+    if (!currentNode || currentNode.type.name !== "pdf") return;
+
+    editor
+      .chain()
+      .insertContentAt(
+        { from: pos, to: pos + currentNode.nodeSize },
+        {
+          type: "attachment",
+          attrs: {
+            url: currentNode.attrs.src,
+            name: currentNode.attrs.name,
+            attachmentId: currentNode.attrs.attachmentId,
+            size: currentNode.attrs.size,
+            mime: "application/pdf",
+          },
+        },
+      )
+      .run();
+  }, [editor, src, getPos]);
+
+  const handleDelete = useCallback(() => {
+    const pos = getPos();
+    if (pos === undefined) return;
+    editor.commands.setNodeSelection(pos);
+    editor.commands.deleteSelection();
+  }, [editor, getPos]);
+
+  if (!src || !safeSrc) {
+    return (
+      <NodeViewWrapper data-drag-handle>
+        <div className={`${classes.pdfWrapper} ${classes.skeleton}`} style={{ height: 600 }}>
+          <Group justify="center" wrap="nowrap" gap="xs" maw="100%" px="md">
+            <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>
+    );
+  }
+
+  if (hasError) {
+    return (
+      <NodeViewWrapper data-drag-handle>
+        <div data-pdf-error className={clsx(classes.pdfError, { "ProseMirror-selectednode": selected })} onClick={handleSelect}>
+          <IconFileTypePdf size={32} stroke={1.5} />
+          <Text size="sm" c="dimmed">
+            {t("Failed to load PDF")}
+          </Text>
+        </div>
+      </NodeViewWrapper>
+    );
+  }
+
+  return (
+    <NodeViewWrapper data-drag-handle className={classes.pdfNodeView}>
+      <div className={classes.pdfContainer}>
+        <ResizableWrapper
+          initialWidth={nodeWidth || 800}
+          initialHeight={nodeHeight || 600}
+          minWidth={200}
+          maxWidth={1200}
+          minHeight={200}
+          maxHeight={1200}
+          onResize={handleResize}
+          isEditable={editor.isEditable}
+          selected={selected}
+          className={clsx(classes.pdfResizeWrapper, {
+            "ProseMirror-selectednode": selected,
+          })}
+        >
+          <iframe
+            className={classes.pdfIframe}
+            src={safeSrc}
+            loading="lazy"
+            frameBorder="0"
+            onError={() => setHasError(true)}
+            onLoad={(e) => {
+              try {
+                const iframe = e.currentTarget;
+                const status = iframe.contentDocument?.querySelector("pre")?.textContent;
+                if (status && status.includes('"statusCode":404')) {
+                  setHasError(true);
+                }
+              } catch {
+                // cross-origin - can't inspect, assume OK
+              }
+            }}
+          />
+          {editor.isEditable && (
+            <div className={classes.hoverMenu}>
+              <Tooltip position="top" label={t("Convert to attachment")} withinPortal>
+                <ActionIcon
+                  size="sm"
+                  variant="filled"
+                  color="dark"
+                  onClick={handleConvertToAttachment}
+                  aria-label={t("Convert to attachment")}
+                >
+                  <IconPaperclip size={14} />
+                </ActionIcon>
+              </Tooltip>
+              <Tooltip position="top" label={t("Delete")} withinPortal>
+                <ActionIcon
+                  size="sm"
+                  variant="filled"
+                  color="dark"
+                  onClick={handleDelete}
+                  aria-label={t("Delete")}
+                >
+                  <IconTrash size={14} />
+                </ActionIcon>
+              </Tooltip>
+            </div>
+          )}
+        </ResizableWrapper>
+      </div>
+    </NodeViewWrapper>
+  );
+}

apps/client/src/features/editor/components/pdf/upload-pdf-action.tsx

@@ -0,0 +1,36 @@
+import { handlePdfUpload } 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 uploadPdfAction = handlePdfUpload({
+  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 !== "application/pdf") {
+      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;
+  },
+});

apps/client/src/features/editor/components/slash-menu/menu-items.ts

@@ -12,7 +12,9 @@ import {
   IconMath,
   IconMathFunction,
   IconMovie,
+  IconMusic,
   IconPaperclip,
+  IconFileTypePdf,
   IconPhoto,
   IconTable,
   IconTypography,
@@ -30,7 +32,9 @@ import {
 } from "@/features/editor/components/slash-menu/types";
 import { uploadImageAction } from "@/features/editor/components/image/upload-image-action.tsx";
 import { uploadVideoAction } from "@/features/editor/components/video/upload-video-action.tsx";
+import { uploadAudioAction } from "@/features/editor/components/audio/upload-audio-action.tsx";
 import { uploadAttachmentAction } from "@/features/editor/components/attachment/upload-attachment-action.tsx";
+import { uploadPdfAction } from "@/features/editor/components/pdf/upload-pdf-action.tsx";
 import IconExcalidraw from "@/components/icons/icon-excalidraw";
 import IconMermaid from "@/components/icons/icon-mermaid";
 import IconDrawio from "@/components/icons/icon-drawio";
@@ -161,7 +165,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
     {
       title: "Image",
       description: "Upload any image from your device.",
-      searchTerms: ["photo", "picture", "media"],
+      searchTerms: ["photo", "picture", "media", "file", "attachment"],
       icon: IconPhoto,
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).run();
@@ -194,7 +198,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
     {
       title: "Video",
       description: "Upload any video from your device.",
-      searchTerms: ["video", "mp4", "media"],
+      searchTerms: ["video", "mp4", "media", "file", "attachment"],
       icon: IconMovie,
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).run();
@@ -224,10 +228,74 @@ const CommandGroups: SlashMenuGroupedItemsType = {
         input.click();
       },
     },
+    {
+      title: "Audio",
+      description: "Upload any audio from your device.",
+      searchTerms: ["audio", "music", "sound", "mp3", "media", "file", "attachment"],
+      icon: IconMusic,
+      command: ({ editor, range }) => {
+        editor.chain().focus().deleteRange(range).run();
+
+        // @ts-ignore
+        const pageId = editor.storage?.pageId;
+        if (!pageId) return;
+
+        // upload audio
+        const input = document.createElement("input");
+        input.type = "file";
+        input.accept = "audio/*";
+        input.multiple = true;
+        input.style.display = "none";
+        document.body.appendChild(input);
+        input.onchange = async () => {
+          if (input.files?.length) {
+            for (const file of input.files) {
+              const pos = editor.view.state.selection.from;
+
+              uploadAudioAction(file, editor, pos, pageId);
+            }
+          }
+
+          input.remove();
+        };
+        input.click();
+      },
+    },
+    {
+      title: "Embed PDF",
+      description: "Upload and embed a PDF file.",
+      searchTerms: ["pdf", "document", "embed"],
+      icon: IconFileTypePdf,
+      command: ({ editor, range }) => {
+        editor.chain().focus().deleteRange(range).run();
+
+        // @ts-ignore
+        const pageId = editor.storage?.pageId;
+        if (!pageId) return;
+
+        const input = document.createElement("input");
+        input.type = "file";
+        input.accept = "application/pdf";
+        input.style.display = "none";
+        document.body.appendChild(input);
+        input.onchange = async () => {
+          if (input.files?.length) {
+            for (const file of input.files) {
+              const pos = editor.view.state.selection.from;
+
+              uploadPdfAction(file, editor, pos, pageId);
+            }
+          }
+
+          input.remove();
+        };
+        input.click();
+      },
+    },
     {
       title: "File attachment",
       description: "Upload any file from your device.",
-      searchTerms: ["file", "attachment", "upload", "pdf", "csv", "zip"],
+      searchTerms: ["file", "attachment", "upload", "csv", "zip"],
       icon: IconPaperclip,
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).run();
@@ -359,7 +427,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
         editor.chain().focus().deleteRange(range).setDrawio().run(),
     },
     {
-      title: "Excalidraw diagram",
+      title: "Excalidraw (Whiteboard)",
       description: "Draw and sketch excalidraw diagrams",
       searchTerms: ["diagrams", "draw", "sketch", "whiteboard"],
       icon: IconExcalidraw,
@@ -548,7 +616,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
     {
       title: "YouTube",
       description: "Embed YouTube video",
-      searchTerms: ["youtube", "yt"],
+      searchTerms: ["youtube", "yt", "media", "video"],
       icon: YoutubeIcon,
       command: ({ editor, range }: CommandProps) => {
         editor
@@ -647,7 +715,11 @@ export const getSuggestionItems = ({
     });
 
     if (filteredItems.length) {
-      filteredGroups[group] = filteredItems;
+      filteredGroups[group] = filteredItems.sort((a, b) => {
+        const aTitle = a.title.toLowerCase().includes(search) ? 0 : 1;
+        const bTitle = b.title.toLowerCase().includes(search) ? 0 : 1;
+        return aTitle - bTitle;
+      });
     }
   }
 

apps/client/src/features/editor/components/video/video-view.module.css

@@ -5,6 +5,9 @@
   max-width: 100%;
   border-radius: 8px;
   overflow: hidden;
+}
+
+.skeleton {
   animation: pulse 1.2s ease-in-out infinite;
 
   @mixin light {
@@ -26,6 +29,7 @@
     }
   }
 }
+
 .video {
   display: block;
   width: 100%;

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

@@ -33,6 +33,7 @@ export default function VideoView(props: NodeViewProps) {
         className={clsx(
           selected && "ProseMirror-selectednode",
           classes.videoWrapper,
+          !src && classes.skeleton,
           alignClass,
         )}
         style={{

apps/client/src/features/editor/extensions/extensions.ts

@@ -30,6 +30,7 @@ import {
   TiptapImage,
   Callout,
   TiptapVideo,
+  TiptapAudio,
   LinkExtension,
   Selection,
   Attachment,
@@ -37,6 +38,7 @@ import {
   Drawio,
   Excalidraw,
   Embed,
+  TiptapPdf,
   SearchAndReplace,
   Mention,
   TableDndExtension,
@@ -68,11 +70,13 @@ import ImageView from "@/features/editor/components/image/image-view.tsx";
 import CalloutView from "@/features/editor/components/callout/callout-view.tsx";
 import StatusView from "@/features/editor/components/status/status-view.tsx";
 import VideoView from "@/features/editor/components/video/video-view.tsx";
+import AudioView from "@/features/editor/components/audio/audio-view.tsx";
 import AttachmentView from "@/features/editor/components/attachment/attachment-view.tsx";
 import CodeBlockView from "@/features/editor/components/code-block/code-block-view.tsx";
 import DrawioView from "../components/drawio/drawio-view";
 import ExcalidrawView from "@/features/editor/components/excalidraw/excalidraw-view.tsx";
 import EmbedView from "@/features/editor/components/embed/embed-view.tsx";
+import PdfView from "@/features/editor/components/pdf/pdf-view.tsx";
 import SubpagesView from "@/features/editor/components/subpages/subpages-view.tsx";
 import { common, createLowlight } from "lowlight";
 import plaintext from "highlight.js/lib/languages/plaintext";
@@ -269,6 +273,9 @@ export const mainExtensions = [
       className: buildResizeClasses("node-video"),
     },
   }),
+  TiptapAudio.configure({
+    view: AudioView,
+  }),
   Callout.configure({
     view: CalloutView,
   }),
@@ -313,6 +320,9 @@ export const mainExtensions = [
   Embed.configure({
     view: EmbedView,
   }),
+  TiptapPdf.configure({
+    view: PdfView,
+  }),
   Subpages.configure({
     view: SubpagesView,
   }),

apps/client/src/features/editor/page-editor.tsx

@@ -45,6 +45,7 @@ import TableMenu from "@/features/editor/components/table/table-menu.tsx";
 import ImageMenu from "@/features/editor/components/image/image-menu.tsx";
 import CalloutMenu from "@/features/editor/components/callout/callout-menu.tsx";
 import VideoMenu from "@/features/editor/components/video/video-menu.tsx";
+import PdfMenu from "@/features/editor/components/pdf/pdf-menu.tsx";
 import SubpagesMenu from "@/features/editor/components/subpages/subpages-menu.tsx";
 import {
   handleFileDrop,
@@ -414,6 +415,7 @@ export default function PageEditor({
             <TableCellMenu editor={editor} appendTo={menuContainerRef} />
             <ImageMenu editor={editor} />
             <VideoMenu editor={editor} />
+            <PdfMenu editor={editor} />
             <CalloutMenu editor={editor} />
             <SubpagesMenu editor={editor} />
             <ExcalidrawMenu editor={editor} />

apps/client/src/features/editor/styles/core.css

@@ -133,10 +133,18 @@
     border-top: 1px solid #68cef8;
   }
 
+  &[contenteditable="false"] hr.ProseMirror-selectednode {
+    border-top: none;
+  }
+
   .ProseMirror-selectednode {
     outline: 2px solid #70cff8;
   }
 
+  &[contenteditable="false"] .ProseMirror-selectednode {
+    outline: none;
+  }
+
   & > .react-renderer {
     margin-top: var(--mantine-spacing-sm);
     margin-bottom: var(--mantine-spacing-sm);

apps/client/src/features/editor/styles/media.css

@@ -8,7 +8,7 @@
     }
   }
 
-  .node-image, .node-video, .node-excalidraw, .node-drawio {
+  .node-image, .node-video, .node-pdf, .node-excalidraw, .node-drawio {
     &.ProseMirror-selectednode {
       outline: none;
     }
@@ -37,5 +37,28 @@
     font-size: var(--mantine-font-size-md);
     line-height: var(--mantine-line-height-md);
   }
+
+  .media-pulse {
+    animation: media-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 media-pulse {
+      0% {
+        background-position: 0% 0%;
+      }
+      100% {
+        background-position: -135% 0%;
+      }
+    }
+  }
 }
 

apps/client/src/i18n.ts

@@ -14,6 +14,7 @@ i18n
   .init({
     fallbackLng: "en-US",
     debug: false,
+    showSupportNotice: false,
     load: 'currentOnly',
 
     interpolation: {