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