mirror of
https://github.com/docmost/docmost.git
synced 2026-07-23 20:02:46 +10:00
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
This commit is contained in:
Philip Okugbe
GitHub
@@ -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;
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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;
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user