js/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost synced 2025-03-28 21:13:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

editor improvements

Browse Source 
* add callout, youtube embed, image, video, table, detail, math
* fix attachments module
* other fixes
This commit is contained in:
Philipinho 2024-06-20 14:57:00 +01:00
parent c7925739cb
commit 1f4bd129a8
74 changed files with 5205 additions and 381 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/client/package.json
View File

@ -19,8 +19,9 @@
"@mantine/modals": "^7.10.1",
"@mantine/notifications": "^7.10.1",
"@mantine/spotlight": "^7.10.1",
"@tabler/icons-react": "^3.5.0",
"@tabler/icons-react": "^3.6.0",
"@tanstack/react-query": "^5.40.0",
"@tiptap/extension-code-block-lowlight": "^2.4.0",
"axios": "^1.7.2",
"clsx": "^2.1.1",
"date-fns": "^3.6.0",
@ -29,11 +30,14 @@
"jotai-optics": "^0.4.0",
"js-cookie": "^3.0.5",
"jwt-decode": "^4.0.0",
"katex": "^0.16.10",
"lowlight": "^3.1.0",
"react": "^18.3.1",
"react-arborist": "^3.4.0",
"react-dom": "^18.3.1",
"react-error-boundary": "^4.0.13",
"react-helmet-async": "^2.0.5",
"react-moveable": "^0.56.0",
"react-router-dom": "^6.23.1",
"socket.io-client": "^4.7.5",
"tippy.js": "^6.3.7",
@ -43,6 +47,7 @@
"devDependencies": {
"@tanstack/eslint-plugin-query": "^5.35.6",
"@types/js-cookie": "^3.0.6",
"@types/katex": "^0.16.7",
"@types/node": "20.14.0",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",

12
apps/client/src/App.tsx
View File

@ -24,6 +24,7 @@ import { InviteSignUpForm } from "@/features/auth/components/invite-sign-up-form
import SpaceHome from "@/pages/space/space-home.tsx";
import PageRedirect from "@/pages/page/page-redirect.tsx";
import Layout from "@/components/layouts/global/layout.tsx";
import { ErrorBoundary } from "react-error-boundary";
export default function App() {
const [, setSocket] = useAtom(socketAtom);
@ -70,7 +71,16 @@ export default function App() {
<Route path={"/home"} element={<Home />} />
<Route path={"/s/:spaceSlug"} element={<SpaceHome />} />
<Route path={"/s/:spaceSlug/p/:pageSlug"} element={<Page />} />
<Route
path={"/s/:spaceSlug/p/:pageSlug"}
element={
<ErrorBoundary
fallback={<>Failed to load page. An error occurred.</>}
>
<Page />
</ErrorBoundary>
}
/>
<Route path={"/settings"}>
<Route path={"account/profile"} element={<AccountSettings />} />

58
apps/client/src/components/common/recent-changes.tsx
View File

@ -1,12 +1,4 @@
import {
Text,
Group,
Stack,
UnstyledButton,
Divider,
Badge,
} from "@mantine/core";
import classes from "../../features/home/components/home.module.css";
import { Text, Group, UnstyledButton, Badge, Table } from "@mantine/core";
import { Link } from "react-router-dom";
import PageListSkeleton from "@/components/ui/page-list-skeleton.tsx";
import { buildPageUrl } from "@/features/page/page.utils.ts";
@ -30,17 +22,15 @@ export default function RecentChanges({ spaceId }: Props) {
}
return pages && pages.items.length > 0 ? (
<div>
{pages.items.map((page) => (
<div key={page.id}>
<UnstyledButton
component={Link}
to={buildPageUrl(page?.space.slug, page.slugId, page.title)}
className={classes.page}
p="xs"
>
<Group wrap="nowrap">
<Stack gap="xs" style={{ flex: 1 }}>
<Table highlightOnHover verticalSpacing="sm">
<Table.Tbody>
{pages.items.map((page) => (
<Table.Tr key={page.id}>
<Table.Td>
<UnstyledButton
component={Link}
to={buildPageUrl(page?.space.slug, page.slugId, page.title)}
>
<Group wrap="nowrap">
{page.icon || <IconFileDescription size={18} />}
@ -48,28 +38,30 @@ export default function RecentChanges({ spaceId }: Props) {
{page.title || "Untitled"}
</Text>
</Group>
</Stack>
{!spaceId && (
</UnstyledButton>
</Table.Td>
{!spaceId && (
<Table.Td>
<Badge
color="blue"
variant="light"
component={Link}
to={getSpaceUrl(page.space.slug)}
to={getSpaceUrl(page?.space.slug)}
style={{ cursor: "pointer" }}
>
{page.space.name}
{page?.space.name}
</Badge>
)}
</Table.Td>
)}
<Table.Td>
<Text c="dimmed" size="xs" fw={500}>
{formattedDate(page.updatedAt)}
</Text>
</Group>
</UnstyledButton>
<Divider />
</div>
))}
</div>
</Table.Td>
</Table.Tr>
))}
</Table.Tbody>
</Table>
) : (
<Text size="md" ta="center">
No records to show

2
apps/client/src/features/editor/components/bubble-menu/bubble-menu.tsx
View File

@ -24,6 +24,7 @@ import {
} from "@/features/comment/atoms/comment-atom";
import { useAtom } from "jotai";
import { v4 as uuidv4 } from "uuid";
import { isCellSelection } from "@docmost/editor-ext";
export interface BubbleMenuItem {
name: string;
@ -103,6 +104,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
editor.isActive("image") ||
empty ||
isNodeSelection(selection) ||
isCellSelection(selection) ||
showCommentPopupRef?.current
) {
return false;

136
apps/client/src/features/editor/components/callout/callout-menu.tsx Normal file
View File

@ -0,0 +1,136 @@
import {
BubbleMenu as BaseBubbleMenu,
findParentNode,
posToDOMRect,
} from "@tiptap/react";
import React, { useCallback } from "react";
import { Node as PMNode } from "prosemirror-model";
import {
EditorMenuProps,
ShouldShowProps,
} from "@/features/editor/components/table/types/types.ts";
import { ActionIcon, Tooltip } from "@mantine/core";
import {
IconAlertTriangleFilled,
IconCircleCheckFilled,
IconCircleXFilled,
IconInfoCircleFilled,
} from "@tabler/icons-react";
import { CalloutType } from "@docmost/editor-ext";
export function CalloutMenu({ editor }: EditorMenuProps) {
const shouldShow = useCallback(
({ state }: ShouldShowProps) => {
if (!state) {
return false;
}
return editor.isActive("callout");
},
[editor],
);
const getReferenceClientRect = useCallback(() => {
const { selection } = editor.state;
const predicate = (node: PMNode) => node.type.name === "callout";
const parent = findParentNode(predicate)(selection);
if (parent) {
const dom = editor.view.nodeDOM(parent?.pos) as HTMLElement;
return dom.getBoundingClientRect();
}
return posToDOMRect(editor.view, selection.from, selection.to);
}, [editor]);
const setCalloutType = useCallback(
(calloutType: CalloutType) => {
editor
.chain()
.focus(undefined, { scrollIntoView: false })
.updateCalloutType(calloutType)
.run();
},
[editor],
);
return (
<BaseBubbleMenu
editor={editor}
pluginKey={`callout-menu}`}
updateDelay={0}
tippyOptions={{
getReferenceClientRect,
offset: [0, 2],
placement: "bottom",
zIndex: 99,
popperOptions: {
modifiers: [{ name: "flip", enabled: false }],
},
}}
shouldShow={shouldShow}
>
<ActionIcon.Group className="actionIconGroup">
<Tooltip position="top" label="Info">
<ActionIcon
onClick={() => setCalloutType("info")}
size="lg"
aria-label="Info"
variant={
editor.isActive("callout", { type: "info" }) ? "light" : "default"
}
>
<IconInfoCircleFilled size={18} />
</ActionIcon>
</Tooltip>
<Tooltip position="top" label="Success">
<ActionIcon
onClick={() => setCalloutType("success")}
size="lg"
aria-label="Success"
variant={
editor.isActive("callout", { type: "success" })
? "light"
: "default"
}
>
<IconCircleCheckFilled size={18} />
</ActionIcon>
</Tooltip>
<Tooltip position="top" label="Warning">
<ActionIcon
onClick={() => setCalloutType("warning")}
size="lg"
aria-label="Warning"
variant={
editor.isActive("callout", { type: "warning" })
? "light"
: "default"
}
>
<IconAlertTriangleFilled size={18} />
</ActionIcon>
</Tooltip>
<Tooltip position="top" label="Danger">
<ActionIcon
onClick={() => setCalloutType("danger")}
size="lg"
aria-label="Danger"
variant={
editor.isActive("callout", { type: "danger" })
? "light"
: "default"
}
>
<IconCircleXFilled size={18} />
</ActionIcon>
</Tooltip>
</ActionIcon.Group>
</BaseBubbleMenu>
);
}
export default CalloutMenu;

70
apps/client/src/features/editor/components/callout/callout-view.tsx Normal file
View File

@ -0,0 +1,70 @@
import {
Editor,
NodeViewContent,
NodeViewProps,
NodeViewWrapper,
} from "@tiptap/react";
import {
IconAlertTriangleFilled,
IconCircleCheckFilled,
IconCircleXFilled,
IconInfoCircleFilled,
} from "@tabler/icons-react";
import { Alert } from "@mantine/core";
import classes from "./callout.module.css";
import { CalloutType } from "@docmost/editor-ext";
export default function CalloutView(props: NodeViewProps) {
const { node } = props;
const { type } = node.attrs;
return (
<NodeViewWrapper>
<Alert
variant="light"
title=""
color={getCalloutColor(type)}
icon={getCalloutIcon(type)}
p="xs"
classNames={{
message: classes.message,
icon: classes.icon,
}}
>
<NodeViewContent />
</Alert>
</NodeViewWrapper>
);
}
function getCalloutIcon(type: CalloutType) {
switch (type) {
case "info":
return <IconInfoCircleFilled />;
case "success":
return <IconCircleCheckFilled />;
case "warning":
return <IconAlertTriangleFilled />;
case "danger":
return <IconCircleXFilled />;
default:
return <IconInfoCircleFilled />;
}
}
function getCalloutColor(type: CalloutType) {
switch (type) {
case "info":
return "blue";
case "success":
return "green";
case "warning":
return "orange";
case "danger":
return "red";
case "default":
return "gray";
default:
return "blue";
}
}

28
apps/client/src/features/editor/components/callout/callout.module.css Normal file
View File

@ -0,0 +1,28 @@
.icon {
font-size: 24px;
line-height: 1;
width: 20px;
height: 20px;
margin-inline-end: var(--mantine-spacing-md);
margin-top: 4px;
cursor: pointer;
}
.message {
font-size: var(--mantine-font-size-md);
color: var(--mantine-color-default-color);
white-space: nowrap;
word-break: break-word;
overflow-wrap: break-word;
}
/*
@mixin where-light {
color: var(--mantine-color-default-color);
}
@mixin where-dark {
color: var(--mantine-color-default-color);
}
*/

29
apps/client/src/features/editor/components/common/node-width-resize.tsx Normal file
View File

@ -0,0 +1,29 @@
import React, { memo, useCallback, useState } from "react";
import { Slider } from "@mantine/core";
export type ImageWidthProps = {
onChange: (value: number) => void;
value: number;
};
export const NodeWidthResize = memo(({ onChange, value }: ImageWidthProps) => {
const [currentValue, setCurrentValue] = useState(value);
const handleChange = useCallback(
(newValue: number) => {
onChange(newValue);
},
[onChange],
);
return (
<Slider
p={"sm"}
min={10}
value={currentValue}
onChange={setCurrentValue}
onChangeEnd={handleChange}
label={(value) => `${value}%`}
/>
);
});

151
apps/client/src/features/editor/components/image/image-menu.tsx Normal file
View File

@ -0,0 +1,151 @@
import {
BubbleMenu as BaseBubbleMenu,
findParentNode,
posToDOMRect,
} from "@tiptap/react";
import React, { useCallback } from "react";
import { sticky } from "tippy.js";
import { Node as PMNode } from "prosemirror-model";
import {
EditorMenuProps,
ShouldShowProps,
} from "@/features/editor/components/table/types/types.ts";
import { ActionIcon, Tooltip } from "@mantine/core";
import {
IconLayoutAlignCenter,
IconLayoutAlignLeft,
IconLayoutAlignRight,
} from "@tabler/icons-react";
import { NodeWidthResize } from "@/features/editor/components/common/node-width-resize.tsx";
export function ImageMenu({ editor }: EditorMenuProps) {
const shouldShow = useCallback(
({ state }: ShouldShowProps) => {
if (!state) {
return false;
}
return editor.isActive("image");
},
[editor],
);
const getReferenceClientRect = useCallback(() => {
const { selection } = editor.state;
const predicate = (node: PMNode) => node.type.name === "image";
const parent = findParentNode(predicate)(selection);
if (parent) {
const dom = editor.view.nodeDOM(parent?.pos) as HTMLElement;
return dom.getBoundingClientRect();
}
return posToDOMRect(editor.view, selection.from, selection.to);
}, [editor]);
const alignImageLeft = useCallback(() => {
editor
.chain()
.focus(undefined, { scrollIntoView: false })
.setImageAlign("left")
.run();
}, [editor]);
const alignImageCenter = useCallback(() => {
editor
.chain()
.focus(undefined, { scrollIntoView: false })
.setImageAlign("center")
.run();
}, [editor]);
const alignImageRight = useCallback(() => {
editor
.chain()
.focus(undefined, { scrollIntoView: false })
.setImageAlign("right")
.run();
}, [editor]);
const onWidthChange = useCallback(
(value: number) => {
editor
.chain()
.focus(undefined, { scrollIntoView: false })
.setImageWidth(value)
.run();
},
[editor],
);
return (
<BaseBubbleMenu
editor={editor}
pluginKey={`image-menu}`}
updateDelay={0}
tippyOptions={{
getReferenceClientRect,
offset: [0, 8],
zIndex: 99,
popperOptions: {
modifiers: [{ name: "flip", enabled: false }],
},
plugins: [sticky],
sticky: "popper",
}}
shouldShow={shouldShow}
>
<ActionIcon.Group className="actionIconGroup">
<Tooltip position="top" label="Align image left">
<ActionIcon
onClick={alignImageLeft}
size="lg"
aria-label="Align image left"
variant={
editor.isActive("image", { align: "left" }) ? "light" : "default"
}
>
<IconLayoutAlignLeft size={18} />
</ActionIcon>
</Tooltip>
<Tooltip position="top" label="Align image center">
<ActionIcon
onClick={alignImageCenter}
size="lg"
aria-label="Align image center"
variant={
editor.isActive("image", { align: "center" })
? "light"
: "default"
}
>
<IconLayoutAlignCenter size={18} />
</ActionIcon>
</Tooltip>
<Tooltip position="top" label="Align image right">
<ActionIcon
onClick={alignImageRight}
size="lg"
aria-label="Align image right"
variant={
editor.isActive("image", { align: "right" }) ? "light" : "default"
}
>
<IconLayoutAlignRight size={18} />
</ActionIcon>
</Tooltip>
</ActionIcon.Group>
{editor.getAttributes("image")?.width && (
<NodeWidthResize
onChange={onWidthChange}
value={parseInt(editor.getAttributes("image").width)}
/>
)}
</BaseBubbleMenu>
);
}
export default ImageMenu;

33
apps/client/src/features/editor/components/image/image-view.tsx Normal file
View File

@ -0,0 +1,33 @@
import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
import { useMemo } from "react";
import { Image } from "@mantine/core";
import { getBackendUrl } from "@/lib/config.ts";
export default function ImageView(props: NodeViewProps) {
const { node, selected } = props;
const { src, width, align } = node.attrs;
const flexJustifyContent = useMemo(() => {
if (align === "center") return "center";
if (align === "right") return "flex-end";
return "flex-start";
}, [align]);
return (
<NodeViewWrapper
style={{
position: "relative",
display: "flex",
justifyContent: flexJustifyContent,
}}
>
<Image
radius="md"
src={getBackendUrl() + src}
fit="contain"
w={width}
className={selected && "ProseMirror-selectednode"}
/>
</NodeViewWrapper>
);
}

24
apps/client/src/features/editor/components/image/upload-image-action.tsx Normal file
View File

@ -0,0 +1,24 @@
import { handleImageUpload } from "@docmost/editor-ext";
import { uploadFile } from "@/features/page/services/page-service.ts";
export const uploadImageAction = handleImageUpload({
onUpload: async (file: File, pageId: string): Promise<any> => {
try {
console.log("dont upload");
return await uploadFile(file, pageId);
} catch (err) {
console.error("failed to upload image", err);
throw err;
}
},
validateFn: (file) => {
if (!file.type.includes("image/")) {
return false;
}
if (file.size / 1024 / 1024 > 20) {
//error("File size too big (max 20MB).");
return false;
}
return true;
},
});

155
apps/client/src/features/editor/components/math/math-block.tsx Normal file
View File

@ -0,0 +1,155 @@
import "katex/dist/katex.min.css";
import katex from "katex";
//import "katex/dist/contrib/mhchem.min.js";
import { useEffect, useRef, useState } from "react";
import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
import { ActionIcon, Flex, Popover, Stack, Textarea } from "@mantine/core";
import classes from "./math.module.css";
import { v4 } from "uuid";
import { IconTrashX } from "@tabler/icons-react";
import { useDebouncedValue } from "@mantine/hooks";
export default function MathBlockView(props: NodeViewProps) {
const { node, updateAttributes, editor, getPos } = props;
const mathResultContainer = useRef<HTMLDivElement>(null);
const mathPreviewContainer = useRef<HTMLDivElement>(null);
const [error, setError] = useState<string | null>(null);
const [preview, setPreview] = useState<string | null>(null);
const textAreaRef = useRef<HTMLTextAreaElement | null>(null);
const [isEditing, setIsEditing] = useState<boolean>(false);
const [debouncedPreview] = useDebouncedValue(preview, 500);
const renderMath = (
katexString: string,
container: HTMLDivElement | null,
) => {
try {
katex.render(katexString, container!, {
displayMode: true,
strict: false,
});
setError(null);
} catch (e) {
console.error(e.message);
setError(e.message);
}
};
useEffect(() => {
renderMath(node.attrs.katex, mathResultContainer.current);
}, [node.attrs.katex]);
useEffect(() => {
if (isEditing) {
renderMath(preview || "", mathPreviewContainer.current);
}
}, [preview, isEditing]);
useEffect(() => {
if (debouncedPreview !== null) {
queueMicrotask(() => {
updateAttributes({ katex: debouncedPreview });
});
}
}, [debouncedPreview]);
useEffect(() => {
setIsEditing(!!props.selected);
if (props.selected) setPreview(node.attrs.katex);
}, [props.selected]);
return (
<Popover
opened={isEditing && editor.isEditable}
trapFocus
position="top"
shadow="md"
width={500}
withArrow={true}
zIndex={101}
id={v4()}
>
<Popover.Target>
<NodeViewWrapper
data-katex="true"
className={[
classes.mathBlock,
props.selected ? classes.selected : "",
error ? classes.error : "",
(isEditing && !preview?.trim().length) ||
(!isEditing && !node.attrs.katex.trim().length)
? classes.empty
: "",
].join(" ")}
>
<div
style={{
display: isEditing && preview?.length ? undefined : "none",
}}
ref={mathPreviewContainer}
></div>
<div
style={{ display: isEditing ? "none" : undefined }}
ref={mathResultContainer}
></div>
{((isEditing && !preview?.trim().length) ||
(!isEditing && !node.attrs.katex.trim().length)) && (
<div>Empty equation</div>
)}
{error && <div>Invalid equation</div>}
</NodeViewWrapper>
</Popover.Target>
<Popover.Dropdown>
<Stack>
<Textarea
minRows={4}
maxRows={8}
autosize
ref={textAreaRef}
draggable="false"
value={preview ?? ""}
placeholder={"E = mc^2"}
classNames={{ input: classes.textInput }}
onBlur={(e) => {
e.preventDefault();
}}
onKeyDown={(e) => {
if (e.key === "Escape" || (e.key === "Enter" && !e.shiftKey)) {
return editor.commands.focus(getPos() + node.nodeSize);
}
if (!textAreaRef.current) return;
const { selectionStart, selectionEnd } = textAreaRef.current;
if (
(e.key === "ArrowLeft" || e.key === "ArrowUp") &&
selectionStart === selectionEnd &&
selectionStart === 0
) {
editor.commands.focus(getPos() - 1);
}
if (
(e.key === "ArrowRight" || e.key === "ArrowDown") &&
selectionStart === selectionEnd &&
selectionStart === textAreaRef.current?.value.length
) {
editor.commands.focus(getPos() + node.nodeSize);
}
}}
onChange={(e) => {
setPreview(e.target.value);
}}
></Textarea>
<Flex justify="flex-end" align="flex-end">
<ActionIcon variant="light" color="red">
<IconTrashX size={18} onClick={() => props.deleteNode()} />
</ActionIcon>
</Flex>
</Stack>
</Popover.Dropdown>
</Popover>
);
}

135
apps/client/src/features/editor/components/math/math-inline.tsx Normal file
View File

@ -0,0 +1,135 @@
import "katex/dist/katex.min.css";
import katex from "katex";
//import "katex/dist/contrib/mhchem.min.js";
import { useEffect, useRef, useState } from "react";
import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
import { Popover, Textarea } from "@mantine/core";
import classes from "./math.module.css";
import { v4 } from "uuid";
export default function MathInlineView(props: NodeViewProps) {
const { node, updateAttributes, editor, getPos } = props;
const mathResultContainer = useRef<HTMLDivElement>(null);
const mathPreviewContainer = useRef<HTMLDivElement>(null);
const [error, setError] = useState<string | null>(null);
const [preview, setPreview] = useState<string | null>(null);
const textAreaRef = useRef<HTMLTextAreaElement | null>(null);
const [isEditing, setIsEditing] = useState<boolean>(false);
const renderMath = (
katexString: string,
container: HTMLDivElement | null,
) => {
try {
katex.render(katexString, container);
setError(null);
} catch (e) {
console.error(e);
setError(e.message);
}
};
useEffect(() => {
renderMath(node.attrs.katex, mathResultContainer.current);
}, [node.attrs.katex]);
useEffect(() => {
if (isEditing) {
renderMath(preview || "", mathPreviewContainer.current);
} else if (preview !== null) {
queueMicrotask(() => {
updateAttributes({ katex: preview });
});
}
}, [preview, isEditing]);
useEffect(() => {
setIsEditing(!!props.selected);
if (props.selected) setPreview(node.attrs.katex);
}, [props.selected]);
return (
<>
<Popover
opened={isEditing && editor.isEditable}
trapFocus
position="top"
shadow="md"
width={400}
middlewares={{ flip: true, shift: true, inline: true }}
withArrow={true}
zIndex={101}
id={v4()}
>
<Popover.Target>
<NodeViewWrapper
data-katex="true"
className={[
classes.mathInline,
props.selected ? classes.selected : "",
error ? classes.error : "",
(isEditing && !preview?.trim().length) ||
(!isEditing && !node.attrs.katex.trim().length)
? classes.empty
: "",
].join(" ")}
>
<div
style={{ display: isEditing ? undefined : "none" }}
ref={mathPreviewContainer}
></div>
<div
style={{ display: isEditing ? "none" : undefined }}
ref={mathResultContainer}
></div>
{((isEditing && !preview?.trim().length) ||
(!isEditing && !node.attrs.katex.trim().length)) && (
<div>Empty equation</div>
)}
{error && <div>Invalid equation</div>}
</NodeViewWrapper>
</Popover.Target>
<Popover.Dropdown p={"xs"}>
<Textarea
minRows={1}
maxRows={5}
autosize
ref={textAreaRef}
draggable={false}
classNames={{ input: classes.textInput }}
value={preview?.trim() ?? ""}
placeholder={"E = mc^2"}
onKeyDown={(e) => {
if (e.key === "Escape" || (e.key === "Enter" && !e.shiftKey)) {
return editor.commands.focus(getPos() + node.nodeSize);
}
if (!textAreaRef.current) return;
const { selectionStart, selectionEnd } = textAreaRef.current;
if (
e.key === "ArrowLeft" &&
selectionStart === selectionEnd &&
selectionStart === 0
) {
editor.commands.focus(getPos());
}
if (
e.key === "ArrowRight" &&
selectionStart === selectionEnd &&
selectionStart === textAreaRef.current.value.length
) {
editor.commands.focus(getPos() + node.nodeSize);
}
}}
onChange={(e) => {
setPreview(e.target.value);
}}
/>
</Popover.Dropdown>
</Popover>
</>
);
}

61
apps/client/src/features/editor/components/math/math.module.css Normal file
View File

@ -0,0 +1,61 @@
.mathInline {
display: inline-block;
white-space: pre-wrap;
word-break: break-word;
caret-color: rgb(55, 53, 47);
border-radius: 4px;
transition: background-color 0.2s;
padding: 0 0.25rem;
margin: 0 0.1rem;
&.empty {
color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-gray-4));
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-gray-8));
}
&.error {
color: light-dark(var(--mantine-color-red-8), var(--mantine-color-red-7));
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-gray-8));
}
&:not(.error, .empty) * {
font-family: KaTeX_Main, Times New Roman, serif;
}
}
.mathBlock {
display: block;
text-align: center;
padding: 0.05rem;
white-space: pre-wrap;
word-break: break-word;
caret-color: rgb(55, 53, 47);
border-radius: 4px;
transition: background-color 0.2s;
margin: 0 0.1rem;
overflow-x: scroll;
.textInput {
width: 400px;
}
& > div {
margin: 1rem 0;
}
&.empty {
color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-gray-4));
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-gray-8));
}
&.error {
color: light-dark(var(--mantine-color-red-8), var(--mantine-color-red-7));
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-gray-8));
}
&:not(.error, .empty) * {
font-family: KaTeX_Main, Times New Roman, serif;
}
}

19
apps/client/src/features/editor/components/slash-menu/command-list.tsx
View File

@ -3,7 +3,14 @@ import {
SlashMenuGroupedItemsType,
SlashMenuItemType,
} from "@/features/editor/components/slash-menu/types";
import { Group, Paper, ScrollArea, Text, UnstyledButton } from "@mantine/core";
import {
ActionIcon,
Group,
Paper,
ScrollArea,
Text,
UnstyledButton,
} from "@mantine/core";
import classes from "./slash-menu.module.css";
import clsx from "clsx";
@ -78,7 +85,7 @@ const CommandList = ({
return flatItems.length > 0 ? (
<Paper id="slash-command" shadow="md" p="xs" withBorder>
<ScrollArea viewportRef={viewportRef} h={350} w={250} scrollbarSize={5}>
<ScrollArea viewportRef={viewportRef} h={350} w={270} scrollbarSize={8}>
{Object.entries(items).map(([category, categoryItems]) => (
<div key={category}>
<Text c="dimmed" mb={4} fw={500} tt="capitalize">
@ -94,7 +101,13 @@ const CommandList = ({
})}
>
<Group>
<item.icon size={16} />
<ActionIcon
variant="default"
component="div"
aria-label={item.title}
>
<item.icon size={18} />
</ActionIcon>
<div style={{ flex: 1 }}>
<Text size="sm" fw={500}>

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

@ -1,155 +1,277 @@
import {
IconBlockquote,
IconCheckbox, IconCode,
IconCaretRightFilled,
IconCheckbox,
IconCode,
IconH1,
IconH2,
IconH3,
IconInfoCircle,
IconList,
IconListNumbers, IconPhoto,
IconListNumbers,
IconMath,
IconMathFunction,
IconMovie,
IconPhoto,
IconTable,
IconTypography,
} from '@tabler/icons-react';
import { CommandProps, SlashMenuGroupedItemsType } from '@/features/editor/components/slash-menu/types';
} from "@tabler/icons-react";
import {
CommandProps,
SlashMenuGroupedItemsType,
} 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";
const CommandGroups: SlashMenuGroupedItemsType = {
basic: [
{
title: 'Text',
description: 'Just start typing with plain text.',
searchTerms: ['p', 'paragraph'],
title: "Text",
description: "Just start typing with plain text.",
searchTerms: ["p", "paragraph"],
icon: IconTypography,
command: ({ editor, range }: CommandProps) => {
editor
.chain()
.focus()
.deleteRange(range)
.toggleNode('paragraph', 'paragraph')
.toggleNode("paragraph", "paragraph")
.run();
},
},
{
title: 'To-do List',
description: 'Track tasks with a to-do list.',
searchTerms: ['todo', 'task', 'list', 'check', 'checkbox'],
title: "To-do list",
description: "Track tasks with a to-do list.",
searchTerms: ["todo", "task", "list", "check", "checkbox"],
icon: IconCheckbox,
command: ({ editor, range }: CommandProps) => {
editor.chain().focus().deleteRange(range).toggleTaskList().run();
},
},
{
title: 'Heading 1',
description: 'Big section heading.',
searchTerms: ['title', 'big', 'large'],
title: "Heading 1",
description: "Big section heading.",
searchTerms: ["title", "big", "large"],
icon: IconH1,
command: ({ editor, range }: CommandProps) => {
editor
.chain()
.focus()
.deleteRange(range)
.setNode('heading', { level: 1 })
.setNode("heading", { level: 1 })
.run();
},
},
{
title: 'Heading 2',
description: 'Medium section heading.',
searchTerms: ['subtitle', 'medium'],
title: "Heading 2",
description: "Medium section heading.",
searchTerms: ["subtitle", "medium"],
icon: IconH2,
command: ({ editor, range }: CommandProps) => {
editor
.chain()
.focus()
.deleteRange(range)
.setNode('heading', { level: 2 })
.setNode("heading", { level: 2 })
.run();
},
},
{
title: 'Heading 3',
description: 'Small section heading.',
searchTerms: ['subtitle', 'small'],
title: "Heading 3",
description: "Small section heading.",
searchTerms: ["subtitle", "small"],
icon: IconH3,
command: ({ editor, range }: CommandProps) => {
editor
.chain()
.focus()
.deleteRange(range)
.setNode('heading', { level: 3 })
.setNode("heading", { level: 3 })
.run();
},
},
{
title: 'Bullet List',
description: 'Create a simple bullet list.',
searchTerms: ['unordered', 'point'],
title: "Bullet list",
description: "Create a simple bullet list.",
searchTerms: ["unordered", "point", "list"],
icon: IconList,
command: ({ editor, range }: CommandProps) => {
editor.chain().focus().deleteRange(range).toggleBulletList().run();
},
},
{
title: 'Numbered List',
description: 'Create a list with numbering.',
searchTerms: ['ordered'],
title: "Numbered list",
description: "Create a list with numbering.",
searchTerms: ["numbered", "ordered", "list"],
icon: IconListNumbers,
command: ({ editor, range }: CommandProps) => {
editor.chain().focus().deleteRange(range).toggleOrderedList().run();
},
},
{
title: 'Quote',
description: 'Capture a quote.',
searchTerms: ['blockquote', 'quotes'],
title: "Quote",
description: "Create block quote.",
searchTerms: ["blockquote", "quotes"],
icon: IconBlockquote,
command: ({ editor, range }: CommandProps) =>
editor
.chain()
.focus()
.deleteRange(range)
.toggleNode('paragraph', 'paragraph')
.toggleBlockquote()
.run(),
editor.chain().focus().deleteRange(range).toggleBlockquote().run(),
},
{
title: 'Code',
description: 'Capture a code snippet.',
searchTerms: ['codeblock'],
title: "Code",
description: "Capture a code snippet.",
searchTerms: ["codeblock"],
icon: IconCode,
command: ({ editor, range }: CommandProps) =>
editor.chain().focus().deleteRange(range).toggleCodeBlock().run(),
},
{
title: 'Image',
description: 'Upload an image from your computer.',
searchTerms: ['photo', 'picture', 'media'],
title: "Image",
description: "Upload an image from your computer.",
searchTerms: ["photo", "picture", "media"],
icon: IconPhoto,
command: ({ editor, range }: CommandProps) => {
command: ({ editor, range }) => {
editor.chain().focus().deleteRange(range).run();
const pageId = editor.storage?.pageId;
if (!pageId) return;
// upload image
const input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*';
const input = document.createElement("input");
input.type = "file";
input.accept = "image/*";
input.onchange = async () => {
if (input.files?.length) {
const file = input.files[0];
const pos = editor.view.state.selection.from;
//startImageUpload(file, editor.view, pos);
uploadImageAction(file, editor.view, pos, pageId);
}
};
input.click();
},
},
{
title: "Video",
description: "Upload an video from your computer.",
searchTerms: ["video", "mp4", "media"],
icon: IconMovie,
command: ({ editor, range }) => {
editor.chain().focus().deleteRange(range).run();
const pageId = editor.storage?.pageId;
if (!pageId) return;
// upload video
const input = document.createElement("input");
input.type = "file";
input.accept = "video/*";
input.onchange = async () => {
if (input.files?.length) {
const file = input.files[0];
const pos = editor.view.state.selection.from;
uploadVideoAction(file, editor.view, pos, pageId);
}
};
input.click();
},
},
{
title: "Table",
description: "Insert a table.",
searchTerms: ["table", "rows", "columns"],
icon: IconTable,
command: ({ editor, range }: CommandProps) =>
editor
.chain()
.focus()
.deleteRange(range)
.insertTable({ rows: 3, cols: 3, withHeaderRow: false })
.run(),
},
{
title: "Toggle block",
description: "Insert collapsible block.",
searchTerms: ["collapsible", "block", "toggle", "details", "expand"],
icon: IconCaretRightFilled,
command: ({ editor, range }: CommandProps) =>
editor.chain().focus().deleteRange(range).toggleDetails().run(),
},
{
title: "Callout",
description: "Insert callout notice.",
searchTerms: [
"callout",
"notice",
"panel",
"info",
"warning",
"success",
"error",
"danger",
],
icon: IconInfoCircle,
command: ({ editor, range }: CommandProps) =>
editor.chain().focus().deleteRange(range).toggleCallout().run(),
},
{
title: "Math inline",
description: "Insert inline math equation.",
searchTerms: [
"math",
"inline",
"mathinline",
"inlinemath",
"inline math",
"equation",
"katex",
"latex",
"tex",
],
icon: IconMathFunction,
command: ({ editor, range }: CommandProps) =>
editor
.chain()
.focus()
.deleteRange(range)
.setMathInline()
.setNodeSelection(range.from)
.run(),
},
{
title: "Math block",
description: "Insert math equation",
searchTerms: [
"math",
"block",
"mathblock",
"block math",
"equation",
"katex",
"latex",
"tex",
],
icon: IconMath,
command: ({ editor, range }: CommandProps) =>
editor.chain().focus().deleteRange(range).setMathBlock().run(),
},
],
};
export const getSuggestionItems = ({ query }: { query: string }): SlashMenuGroupedItemsType => {
export const getSuggestionItems = ({
query,
}: {
query: string;
}): SlashMenuGroupedItemsType => {
const search = query.toLowerCase();
const filteredGroups: SlashMenuGroupedItemsType = {};
for (const [group, items] of Object.entries(CommandGroups)) {
const filteredItems = items.filter((item) => {
return item.title.toLowerCase().includes(search)
|| item.description.toLowerCase().includes(search)
|| (item.searchTerms && item.searchTerms.some((term: string) => term.includes(search)));
return (
item.title.toLowerCase().includes(search) ||
item.description.toLowerCase().includes(search) ||
(item.searchTerms &&
item.searchTerms.some((term: string) => term.includes(search)))
);
});
if (filteredItems.length) {

110
apps/client/src/features/editor/components/table/table-cell-menu.tsx Normal file
View File

@ -0,0 +1,110 @@
import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react";
import React, { useCallback } from "react";
import {
EditorMenuProps,
ShouldShowProps,
} from "@/features/editor/components/table/types/types.ts";
import { isCellSelection } from "@docmost/editor-ext";
import { ActionIcon, Tooltip } from "@mantine/core";
import {
IconBoxMargin,
IconColumnRemove,
IconRowRemove,
IconSquareToggle,
} from "@tabler/icons-react";
export const TableCellMenu = React.memo(
({ editor, appendTo }: EditorMenuProps): JSX.Element => {
const shouldShow = useCallback(
({ view, state, from }: ShouldShowProps) => {
if (!state) {
return false;
}
return isCellSelection(state.selection);
},
[editor],
);
const mergeCells = useCallback(() => {
editor.chain().focus().mergeCells().run();
}, [editor]);
const splitCell = useCallback(() => {
editor.chain().focus().splitCell().run();
}, [editor]);
const deleteColumn = useCallback(() => {
editor.chain().focus().deleteColumn().run();
}, [editor]);
const deleteRow = useCallback(() => {
editor.chain().focus().deleteRow().run();
}, [editor]);
return (
<BaseBubbleMenu
editor={editor}
pluginKey="table-cell-menu"
updateDelay={0}
tippyOptions={{
appendTo: () => {
return appendTo?.current;
},
offset: [0, 15],
zIndex: 99,
}}
shouldShow={shouldShow}
>
<ActionIcon.Group>
<Tooltip position="top" label="Merge cells">
<ActionIcon
onClick={mergeCells}
variant="default"
size="lg"
aria-label="Merge cells"
>
<IconBoxMargin size={18} />
</ActionIcon>
</Tooltip>
<Tooltip position="top" label="Split cell">
<ActionIcon
onClick={splitCell}
variant="default"
size="lg"
aria-label="Split cell"
>
<IconSquareToggle size={18} />
</ActionIcon>
</Tooltip>
<Tooltip position="top" label="Delete column">
<ActionIcon
onClick={deleteColumn}
variant="default"
size="lg"
aria-label="Delete column"
>
<IconColumnRemove size={18} />
</ActionIcon>
</Tooltip>
<Tooltip position="top" label="Delete row">
<ActionIcon
onClick={deleteRow}
variant="default"
size="lg"
aria-label="Delete row"
>
<IconRowRemove size={18} />
</ActionIcon>
</Tooltip>
</ActionIcon.Group>
</BaseBubbleMenu>
);
},
);
export default TableCellMenu;

197
apps/client/src/features/editor/components/table/table-menu.tsx Normal file
View File

@ -0,0 +1,197 @@
import {
BubbleMenu as BaseBubbleMenu,
posToDOMRect,
findParentNode,
} from "@tiptap/react";
import { Node as PMNode } from "@tiptap/pm/model";
import React, { useCallback } from "react";
import {
EditorMenuProps,
ShouldShowProps,
} from "@/features/editor/components/table/types/types.ts";
import { ActionIcon, Tooltip } from "@mantine/core";
import {
IconColumnInsertLeft,
IconColumnInsertRight,
IconColumnRemove,
IconRowInsertBottom,
IconRowInsertTop,
IconRowRemove,
IconTrashX,
} from "@tabler/icons-react";
import { isCellSelection } from "@docmost/editor-ext";
export const TableMenu = React.memo(
({ editor }: EditorMenuProps): JSX.Element => {
const shouldShow = useCallback(
({ state }: ShouldShowProps) => {
if (!state) {
return false;
}
return editor.isActive("table") && !isCellSelection(state.selection);
},
[editor],
);
const getReferenceClientRect = useCallback(() => {
const { selection } = editor.state;
const predicate = (node: PMNode) => node.type.name === "table";
const parent = findParentNode(predicate)(selection);
if (parent) {
const dom = editor.view.nodeDOM(parent?.pos) as HTMLElement;
return dom.getBoundingClientRect();
}
return posToDOMRect(editor.view, selection.from, selection.to);
}, [editor]);
const addColumnLeft = useCallback(() => {
editor.chain().focus().addColumnBefore().run();
}, [editor]);
const addColumnRight = useCallback(() => {
editor.chain().focus().addColumnAfter().run();
}, [editor]);
const deleteColumn = useCallback(() => {
editor.chain().focus().deleteColumn().run();
}, [editor]);
const addRowAbove = useCallback(() => {
editor.chain().focus().addRowBefore().run();
}, [editor]);
const addRowBelow = useCallback(() => {
editor.chain().focus().addRowAfter().run();
}, [editor]);
const deleteRow = useCallback(() => {
editor.chain().focus().deleteRow().run();
}, [editor]);
const deleteTable = useCallback(() => {
editor.chain().focus().deleteTable().run();
}, [editor]);
return (
<BaseBubbleMenu
editor={editor}
pluginKey="table-menu"
updateDelay={0}
tippyOptions={{
getReferenceClientRect: getReferenceClientRect,
offset: [0, 15],
zIndex: 99,
popperOptions: {
modifiers: [
{
name: "preventOverflow",
enabled: true,
options: {
altAxis: true,
boundary: "clippingParents",
padding: 8,
},
},
{
name: "flip",
enabled: true,
options: {
boundary: editor.options.element,
fallbackPlacements: ["top", "bottom"],
padding: { top: 35, left: 8, right: 8, bottom: -Infinity },
},
},
],
},
}}
shouldShow={shouldShow}
>
<ActionIcon.Group>
<Tooltip position="top" label="Add left column">
<ActionIcon
onClick={addColumnLeft}
variant="default"
size="lg"
aria-label="Add left column"
>
<IconColumnInsertLeft size={18} />
</ActionIcon>
</Tooltip>
<Tooltip position="top" label="Add right column">
<ActionIcon
onClick={addColumnRight}
variant="default"
size="lg"
aria-label="Add right column"
>
<IconColumnInsertRight size={18} />
</ActionIcon>
</Tooltip>
<Tooltip position="top" label="Delete column">
<ActionIcon
onClick={deleteColumn}
variant="default"
size="lg"
aria-label="Delete column"
>
<IconColumnRemove size={18} />
</ActionIcon>
</Tooltip>
<Tooltip position="top" label="Add row above">
<ActionIcon
onClick={addRowAbove}
variant="default"
size="lg"
aria-label="Add row above"
>
<IconRowInsertTop size={18} />
</ActionIcon>
</Tooltip>
<Tooltip position="top" label="Add row below">
<ActionIcon
onClick={addRowBelow}
variant="default"
size="lg"
aria-label="Add row below"
>
<IconRowInsertBottom size={18} />
</ActionIcon>
</Tooltip>
<Tooltip position="top" label="Delete row">
<ActionIcon
onClick={deleteRow}
variant="default"
size="lg"
aria-label="Delete row"
>
<IconRowRemove size={18} />
</ActionIcon>
</Tooltip>
<Tooltip position="top" label="Delete table">
<ActionIcon
onClick={deleteTable}
variant="default"
size="lg"
color="red"
aria-label="Delete table"
>
<IconTrashX size={18} />
</ActionIcon>
</Tooltip>
</ActionIcon.Group>
</BaseBubbleMenu>
);
},
);
export default TableMenu;

20
apps/client/src/features/editor/components/table/types/types.ts Normal file
View File

@ -0,0 +1,20 @@
import React from "react";
import { Editor as CoreEditor } from "@tiptap/core";
import { Editor } from "@tiptap/react";
import { EditorState } from "@tiptap/pm/state";
import { EditorView } from "@tiptap/pm/view";
export interface EditorMenuProps {
editor: Editor;
appendTo?: React.RefObject<any>;
shouldHide?: boolean;
}
export interface ShouldShowProps {
editor?: CoreEditor;
view: EditorView;
state?: EditorState;
oldState?: EditorState;
from?: number;
to?: number;
}

23
apps/client/src/features/editor/components/video/upload-video-action.tsx Normal file
View File

@ -0,0 +1,23 @@
import { handleVideoUpload } from "@docmost/editor-ext";
import { uploadFile } from "@/features/page/services/page-service.ts";
export const uploadVideoAction = handleVideoUpload({
onUpload: async (file: File, pageId: string): Promise<any> => {
try {
return await uploadFile(file, pageId);
} catch (err) {
console.error("failed to upload image", err);
throw err;
}
},
validateFn: (file) => {
if (!file.type.includes("video/")) {
return false;
}
if (file.size / 1024 / 1024 > 20) {
return false;
}
return true;
},
});

151
apps/client/src/features/editor/components/video/video-menu.tsx Normal file
View File

@ -0,0 +1,151 @@
import {
BubbleMenu as BaseBubbleMenu,
findParentNode,
posToDOMRect,
} from "@tiptap/react";
import React, { useCallback } from "react";
import { sticky } from "tippy.js";
import { Node as PMNode } from "prosemirror-model";
import {
EditorMenuProps,
ShouldShowProps,
} from "@/features/editor/components/table/types/types.ts";
import { ActionIcon, Tooltip } from "@mantine/core";
import {
IconLayoutAlignCenter,
IconLayoutAlignLeft,
IconLayoutAlignRight,
} from "@tabler/icons-react";
import { NodeWidthResize } from "@/features/editor/components/common/node-width-resize.tsx";
export function VideoMenu({ editor }: EditorMenuProps) {
const shouldShow = useCallback(
({ state }: ShouldShowProps) => {
if (!state) {
return false;
}
return editor.isActive("video");
},
[editor],
);
const getReferenceClientRect = useCallback(() => {
const { selection } = editor.state;
const predicate = (node: PMNode) => node.type.name === "video";
const parent = findParentNode(predicate)(selection);
if (parent) {
const dom = editor.view.nodeDOM(parent?.pos) as HTMLElement;
return dom.getBoundingClientRect();
}
return posToDOMRect(editor.view, selection.from, selection.to);
}, [editor]);
const alignVideoLeft = useCallback(() => {
editor
.chain()
.focus(undefined, { scrollIntoView: false })
.setVideoAlign("left")
.run();
}, [editor]);
const alignVideoCenter = useCallback(() => {
editor
.chain()
.focus(undefined, { scrollIntoView: false })
.setVideoAlign("center")
.run();
}, [editor]);
const alignVideoRight = useCallback(() => {
editor
.chain()
.focus(undefined, { scrollIntoView: false })
.setVideoAlign("right")
.run();
}, [editor]);
const onWidthChange = useCallback(
(value: number) => {
editor
.chain()
.focus(undefined, { scrollIntoView: false })
.setVideoWidth(value)
.run();
},
[editor],
);
return (
<BaseBubbleMenu
editor={editor}
pluginKey={`video-menu}`}
updateDelay={0}
tippyOptions={{
getReferenceClientRect,
offset: [0, 8],
zIndex: 99,
popperOptions: {
modifiers: [{ name: "flip", enabled: false }],
},
plugins: [sticky],
sticky: "popper",
}}
shouldShow={shouldShow}
>
<ActionIcon.Group className="actionIconGroup">
<Tooltip position="top" label="Align video left">
<ActionIcon
onClick={alignVideoLeft}
size="lg"
aria-label="Align video left"
variant={
editor.isActive("video", { align: "left" }) ? "light" : "default"
}
>
<IconLayoutAlignLeft size={18} />
</ActionIcon>
</Tooltip>
<Tooltip position="top" label="Align video center">
<ActionIcon
onClick={alignVideoCenter}
size="lg"
aria-label="Align video center"
variant={
editor.isActive("video", { align: "center" })
? "light"
: "default"
}
>
<IconLayoutAlignCenter size={18} />
</ActionIcon>
</Tooltip>
<Tooltip position="top" label="Align video right">
<ActionIcon
onClick={alignVideoRight}
size="lg"
aria-label="Align video right"
variant={
editor.isActive("video", { align: "right" }) ? "light" : "default"
}
>
<IconLayoutAlignRight size={18} />
</ActionIcon>
</Tooltip>
</ActionIcon.Group>
{editor.getAttributes("video")?.width && (
<NodeWidthResize
onChange={onWidthChange}
value={parseInt(editor.getAttributes("video").width)}
/>
)}
</BaseBubbleMenu>
);
}
export default VideoMenu;

32
apps/client/src/features/editor/components/video/video-view.tsx Normal file
View File

@ -0,0 +1,32 @@
import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
import { useMemo } from "react";
import { getBackendUrl } from "@/lib/config.ts";
export default function VideoView(props: NodeViewProps) {
const { node, selected } = props;
const { src, width, align } = node.attrs;
const flexJustifyContent = useMemo(() => {
if (align === "center") return "center";
if (align === "right") return "flex-end";
return "flex-start";
}, [align]);
return (
<NodeViewWrapper
style={{
position: "relative",
display: "flex",
justifyContent: flexJustifyContent,
}}
>
<video
preload="metadata"
width={width}
controls
src={getBackendUrl() + src}
className={selected && "ProseMirror-selectednode"}
/>
</NodeViewWrapper>
);
}

371
apps/client/src/features/editor/extensions/drag-handle.ts Normal file
View File

@ -0,0 +1,371 @@
// MIT - source: https://github.com/NiclasDev63/tiptap-extension-global-drag-handle
import { Extension } from "@tiptap/core";
import {
NodeSelection,
Plugin,
PluginKey,
TextSelection,
} from "@tiptap/pm/state";
import { Fragment, Slice, Node } from "@tiptap/pm/model";
// @ts-ignore
import { __serializeForClipboard, EditorView } from "@tiptap/pm/view";
export interface GlobalDragHandleOptions {
/**
* The width of the drag handle
*/
dragHandleWidth: number;
/**
* The treshold for scrolling
*/
scrollTreshold: number;
/*
* The css selector to query for the drag handle. (eg: '.custom-handle').
* If handle element is found, that element will be used as drag handle. If not, a default handle will be created
*/
dragHandleSelector?: string;
}
function absoluteRect(node: Element) {
const data = node.getBoundingClientRect();
const modal = node.closest('[role="dialog"]');
if (modal && window.getComputedStyle(modal).transform !== "none") {
const modalRect = modal.getBoundingClientRect();
return {
top: data.top - modalRect.top,
left: data.left - modalRect.left,
width: data.width,
};
}
return {
top: data.top,
left: data.left,
width: data.width,
};
}
function nodeDOMAtCoords(coords: { x: number; y: number }) {
return document
.elementsFromPoint(coords.x, coords.y)
.find(
(elem: Element) =>
elem.parentElement?.matches?.(".ProseMirror") ||
elem.matches(
[
"li",
"p:not(:first-child)",
"pre",
"blockquote",
"h1, h2, h3, h4, h5, h6",
".tableWrapper",
].join(", "),
),
);
}
function nodePosAtDOM(
node: Element,
view: EditorView,
options: GlobalDragHandleOptions,
) {
const boundingRect = node.getBoundingClientRect();
return view.posAtCoords({
left: boundingRect.left + 50 + options.dragHandleWidth,
top: boundingRect.top + 1,
})?.inside;
}
function calcNodePos(pos: number, view: EditorView) {
const $pos = view.state.doc.resolve(pos);
if ($pos.depth > 1) return $pos.before($pos.depth);
return pos;
}
export function DragHandlePlugin(
options: GlobalDragHandleOptions & { pluginKey: string },
) {
let listType = "";
function handleDragStart(event: DragEvent, view: EditorView) {
view.focus();
if (!event.dataTransfer) return;
const node = nodeDOMAtCoords({
x: event.clientX + 50 + options.dragHandleWidth,
y: event.clientY,
});
if (!(node instanceof Element)) return;
let draggedNodePos = nodePosAtDOM(node, view, options);
if (draggedNodePos == null || draggedNodePos < 0) return;
draggedNodePos = calcNodePos(draggedNodePos, view);
const { from, to } = view.state.selection;
const diff = from - to;
const fromSelectionPos = calcNodePos(from, view);
let differentNodeSelected = false;
const nodePos = view.state.doc.resolve(fromSelectionPos);
// Check if nodePos points to the top level node
if (nodePos.node().type.name === "doc") differentNodeSelected = true;
else {
const nodeSelection = NodeSelection.create(
view.state.doc,
nodePos.before(),
);
// Check if the node where the drag event started is part of the current selection
differentNodeSelected = !(
draggedNodePos + 1 >= nodeSelection.$from.pos &&
draggedNodePos <= nodeSelection.$to.pos
);
}
if (
!differentNodeSelected &&
diff !== 0 &&
!(view.state.selection instanceof NodeSelection)
) {
const endSelection = NodeSelection.create(view.state.doc, to - 1);
const multiNodeSelection = TextSelection.create(
view.state.doc,
draggedNodePos,
endSelection.$to.pos,
);
view.dispatch(view.state.tr.setSelection(multiNodeSelection));
} else {
const nodeSelection = NodeSelection.create(
view.state.doc,
draggedNodePos,
);
view.dispatch(view.state.tr.setSelection(nodeSelection));
}
// If the selected node is a list item, we need to save the type of the wrapping list e.g. OL or UL
if (
view.state.selection instanceof NodeSelection &&
view.state.selection.node.type.name === "listItem"
) {
listType = node.parentElement!.tagName;
}
const slice = view.state.selection.content();
const { dom, text } = __serializeForClipboard(view, slice);
event.dataTransfer.clearData();
event.dataTransfer.setData("text/html", dom.innerHTML);
event.dataTransfer.setData("text/plain", text);
event.dataTransfer.effectAllowed = "copyMove";
event.dataTransfer.setDragImage(node, 0, 0);
view.dragging = { slice, move: event.ctrlKey };
}
let dragHandleElement: HTMLElement | null = null;
function hideDragHandle() {
if (dragHandleElement) {
dragHandleElement.classList.add("hide");
}
}
function showDragHandle() {
if (dragHandleElement) {
dragHandleElement.classList.remove("hide");
}
}
return new Plugin({
key: new PluginKey(options.pluginKey),
view: (view) => {
const handleBySelector = options.dragHandleSelector
? document.querySelector<HTMLElement>(options.dragHandleSelector)
: null;
dragHandleElement = handleBySelector ?? document.createElement("div");
dragHandleElement.draggable = true;
dragHandleElement.dataset.dragHandle = "";
dragHandleElement.classList.add("drag-handle");
function onDragHandleDragStart(e: DragEvent) {
handleDragStart(e, view);
}
dragHandleElement.addEventListener("dragstart", onDragHandleDragStart);
function onDragHandleDrag(e: DragEvent) {
hideDragHandle();
let scrollY = window.scrollY;
if (e.clientY < options.scrollTreshold) {
window.scrollTo({ top: scrollY - 30, behavior: "smooth" });
} else if (window.innerHeight - e.clientY < options.scrollTreshold) {
window.scrollTo({ top: scrollY + 30, behavior: "smooth" });
}
}
dragHandleElement.addEventListener("drag", onDragHandleDrag);
hideDragHandle();
if (!handleBySelector) {
view?.dom?.parentElement?.appendChild(dragHandleElement);
}
return {
destroy: () => {
if (!handleBySelector) {
dragHandleElement?.remove?.();
}
dragHandleElement?.removeEventListener("drag", onDragHandleDrag);
dragHandleElement?.removeEventListener(
"dragstart",
onDragHandleDragStart,
);
dragHandleElement = null;
},
};
},
props: {
handleDOMEvents: {
mousemove: (view, event) => {
if (!view.editable) {
return;
}
const node = nodeDOMAtCoords({
x: event.clientX + 50 + options.dragHandleWidth,
y: event.clientY,
});
const notDragging = node?.closest(".not-draggable");
//const isNodeInTable = node?.closest("td") || node?.closest("th");
if (
!(node instanceof Element) ||
node.matches("ul, ol") ||
notDragging ||
node.matches(".tableWrapper")
) {
hideDragHandle();
return;
}
const compStyle = window.getComputedStyle(node);
const parsedLineHeight = parseInt(compStyle.lineHeight, 10);
const lineHeight = isNaN(parsedLineHeight)
? parseInt(compStyle.fontSize) * 1.2
: parsedLineHeight;
const paddingTop = parseInt(compStyle.paddingTop, 10);
const rect = absoluteRect(node);
rect.top += (lineHeight - 24) / 2;
rect.top += paddingTop;
// Li markers
if (node.matches("ul:not([data-type=taskList]) li, ol li")) {
rect.left -= options.dragHandleWidth;
}
rect.width = options.dragHandleWidth;
if (!dragHandleElement) return;
dragHandleElement.style.left = `${rect.left - rect.width}px`;
dragHandleElement.style.top = `${rect.top}px`;
showDragHandle();
},
keydown: () => {
hideDragHandle();
},
mousewheel: () => {
hideDragHandle();
},
// dragging class is used for CSS
dragstart: (view) => {
view.dom.classList.add("dragging");
},
drop: (view, event) => {
view.dom.classList.remove("dragging");
hideDragHandle();
let droppedNode: Node | null = null;
const dropPos = view.posAtCoords({
left: event.clientX,
top: event.clientY,
});
if (!dropPos) return;
if (view.state.selection instanceof NodeSelection) {
droppedNode = view.state.selection.node;
}
if (!droppedNode) return;
const resolvedPos = view.state.doc.resolve(dropPos.pos);
const isDroppedInsideList =
resolvedPos.parent.type.name === "listItem";
// If the selected node is a list item and is not dropped inside a list, we need to wrap it inside <ol> tag otherwise ol list items will be transformed into ul list item when dropped
if (
view.state.selection instanceof NodeSelection &&
view.state.selection.node.type.name === "listItem" &&
!isDroppedInsideList &&
listType == "OL"
) {
const text = droppedNode.textContent;
if (!text) return;
const paragraph = view.state.schema.nodes.paragraph?.createAndFill(
{},
view.state.schema.text(text),
);
const listItem = view.state.schema.nodes.listItem?.createAndFill(
{},
paragraph,
);
const newList = view.state.schema.nodes.orderedList?.createAndFill(
null,
listItem,
);
const slice = new Slice(Fragment.from(newList), 0, 0);
view.dragging = { slice, move: event.ctrlKey };
}
},
dragend: (view) => {
view.dom.classList.remove("dragging");
},
},
},
});
}
const GlobalDragHandle = Extension.create({
name: "globalDragHandle",
addOptions() {
return {
dragHandleWidth: 20,
scrollTreshold: 100,
};
},
addProseMirrorPlugins() {
return [
DragHandlePlugin({
pluginKey: "globalDragHandle",
dragHandleWidth: this.options.dragHandleWidth,
scrollTreshold: this.options.scrollTreshold,
dragHandleSelector: this.options.dragHandleSelector,
}),
];
},
});
export default GlobalDragHandle;

59
apps/client/src/features/editor/extensions/extensions.ts
View File

@ -11,17 +11,41 @@ import { Highlight } from "@tiptap/extension-highlight";
import { Typography } from "@tiptap/extension-typography";
import { TextStyle } from "@tiptap/extension-text-style";
import { Color } from "@tiptap/extension-color";
import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
import SlashCommand from "@/features/editor/extensions/slash-command";
import { Collaboration } from "@tiptap/extension-collaboration";
import { CollaborationCursor } from "@tiptap/extension-collaboration-cursor";
import { HocuspocusProvider } from "@hocuspocus/provider";
import { Comment, TrailingNode } from "@docmost/editor-ext";
import GlobalDragHandle from "tiptap-extension-global-drag-handle";
import {
Comment,
Details,
DetailsContent,
DetailsSummary,
MathBlock,
MathInline,
Table,
TableHeader,
TableCell,
TableRow,
TrailingNode,
TiptapImage,
Callout,
TiptapVideo,
} from "@docmost/editor-ext";
import {
randomElement,
userColors,
} from "@/features/editor/extensions/utils.ts";
import { IUser } from "@/features/user/types/user.types.ts";
import MathInlineView from "@/features/editor/components/math/math-inline.tsx";
import MathBlockView from "@/features/editor/components/math/math-block.tsx";
import GlobalDragHandle from "@/features/editor/extensions/drag-handle.ts";
import { Youtube } from "@tiptap/extension-youtube";
import ImageView from "@/features/editor/components/image/image-view.tsx";
import CalloutView from "@/features/editor/components/callout/callout-view.tsx";
import { common, createLowlight } from "lowlight";
import VideoView from "@/features/editor/components/video/video-view.tsx";
const lowlight = createLowlight(common);
export const mainExtensions = [
StarterKit.configure({
@ -30,6 +54,7 @@ export const mainExtensions = [
width: 3,
color: "#70CFF8",
},
codeBlock: false,
}),
Placeholder.configure({
placeholder: 'Enter "/" for commands',
@ -57,6 +82,36 @@ export const mainExtensions = [
class: "comment-mark",
},
}),
Table,
TableRow,
TableCell,
TableHeader,
MathInline.configure({
view: MathInlineView,
}),
MathBlock.configure({
view: MathBlockView,
}),
Details,
DetailsSummary,
DetailsContent,
Youtube.configure({
controls: true,
nocookie: true,
}),
TiptapImage.configure({
view: ImageView,
allowBase64: false,
}),
TiptapVideo.configure({
view: VideoView,
}),
Callout.configure({
view: CalloutView,
}),
CodeBlockLowlight.configure({
lowlight,
}),
] as any;
type CollabExtensions = (provider: HocuspocusProvider, user: IUser) => any[];

33
apps/client/src/features/editor/page-editor.tsx
View File

@ -1,5 +1,11 @@
import "@/features/editor/styles/index.css";
import React, { useEffect, useLayoutEffect, useMemo, useState } from "react";
import React, {
useEffect,
useLayoutEffect,
useMemo,
useRef,
useState,
} from "react";
import { IndexeddbPersistence } from "y-indexeddb";
import * as Y from "yjs";
import { HocuspocusProvider } from "@hocuspocus/provider";
@ -21,6 +27,14 @@ import {
import CommentDialog from "@/features/comment/components/comment-dialog";
import EditorSkeleton from "@/features/editor/components/editor-skeleton";
import { EditorBubbleMenu } from "@/features/editor/components/bubble-menu/bubble-menu";
import TableCellMenu from "@/features/editor/components/table/table-cell-menu.tsx";
import TableMenu from "@/features/editor/components/table/table-menu.tsx";
import { handleMediaDrop, handleMediaPaste } from "@docmost/editor-ext";
import ImageMenu from "@/features/editor/components/image/image-menu.tsx";
import CalloutMenu from "@/features/editor/components/callout/callout-menu.tsx";
import { uploadImageAction } from "@/features/editor/components/image/upload-image-action.tsx";
import { uploadVideoAction } from "@/features/editor/components/video/upload-video-action.tsx";
import VideoMenu from "@/features/editor/components/video/video-menu.tsx";
interface PageEditorProps {
pageId: string;
@ -39,6 +53,7 @@ export default function PageEditor({ pageId, editable }: PageEditorProps) {
const [isLocalSynced, setLocalSynced] = useState(false);
const [isRemoteSynced, setRemoteSynced] = useState(false);
const documentName = `page.${pageId}`;
const menuContainerRef = useRef(null);
const localProvider = useMemo(() => {
const provider = new IndexeddbPersistence(documentName, ydoc);
@ -97,11 +112,20 @@ export default function PageEditor({ pageId, editable }: PageEditorProps) {
}
},
},
handlePaste: (view, event) => {
handleMediaPaste(view, event, uploadImageAction, pageId);
handleMediaPaste(view, event, uploadVideoAction, pageId);
},
handleDrop: (view, event, _slice, moved) => {
handleMediaDrop(view, event, moved, uploadImageAction, pageId);
handleMediaDrop(view, event, moved, uploadVideoAction, pageId);
},
},
onCreate({ editor }) {
if (editor) {
// @ts-ignore
setEditor(editor);
editor.storage.pageId = pageId;
}
},
},
@ -139,12 +163,17 @@ export default function PageEditor({ pageId, editable }: PageEditorProps) {
return isSynced ? (
<div>
{isSynced && (
<div>
<div ref={menuContainerRef}>
<EditorContent editor={editor} />
{editor && editor.isEditable && (
<div>
<EditorBubbleMenu editor={editor} />
<TableMenu editor={editor} />
<TableCellMenu editor={editor} appendTo={menuContainerRef} />
<ImageMenu editor={editor} />
<VideoMenu editor={editor} />
<CalloutMenu editor={editor} />
</div>
)}

89
apps/client/src/features/editor/styles/code.css Normal file
View File

@ -0,0 +1,89 @@
.ProseMirror {
pre {
padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
font-family: "JetBrainsMono", var(--mantine-font-family-monospace);
border-radius: var(--mantine-radius-default);
@mixin light {
background-color: var(--mantine-color-gray-0);
color: var(--mantine-color-gray-9);
}
@mixin dark {
background-color: var(--mantine-color-dark-8);
color: var(--mantine-color-dark-1);
}
code {
color: inherit;
padding: 0;
background: none;
font-size: inherit;
}
/* Code styling */
.hljs-comment,
.hljs-quote {
color: light-dark(
var(--mantine-color-gray-5),
var(--mantine-color-dark-2)
);
}
.hljs-variable,
.hljs-template-variable,
.hljs-attribute,
.hljs-tag,
.hljs-name,
.hljs-regexp,
.hljs-link,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
color: light-dark(var(--mantine-color-red-7), var(--mantine-color-red-5));
}
.hljs-number,
.hljs-meta,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params {
color: light-dark(
var(--mantine-color-blue-7),
var(--mantine-color-cyan-5)
);
}
.hljs-string,
.hljs-symbol,
.hljs-bullet {
color: light-dark(var(--mantine-color-red-7), var(--mantine-color-red-5));
}
.hljs-title,
.hljs-section {
color: light-dark(
var(--mantine-color-pink-7),
var(--mantine-color-yellow-5)
);
}
.hljs-keyword,
.hljs-selector-tag {
color: light-dark(
var(--mantine-color-violet-7),
var(--mantine-color-violet-3)
);
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: 700;
}
}
}

211
apps/client/src/features/editor/styles/core.css
View File

@ -1,110 +1,133 @@
.ProseMirror {
background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
color: light-dark(var(--mantine-color-default-color), var(--mantine-color-dark-0));
font-size: var(--mantine-font-size-md);
line-height: var(--mantine-line-height-md);
font-weight: 400;
width: 100%;
background-color: light-dark(
var(--mantine-color-white),
var(--mantine-color-dark-7)
);
color: light-dark(
var(--mantine-color-default-color),
var(--mantine-color-dark-0)
);
font-size: var(--mantine-font-size-md);
line-height: var(--mantine-line-height-xl);
font-weight: 400;
width: 100%;
> * + * {
margin-top: 0.75em;
{
margin-top: 0.75em;
}
&:focus {
outline: none;
}
ul,
ol {
padding: 0 1rem;
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
}
code {
background-color: light-dark(
var(--mantine-color-gray-0),
var(--mantine-color-dark-8)
);
color: #616161;
}
a {
color: light-dark(#207af1, #587da9);
font-weight: bold;
text-decoration: none;
cursor: pointer;
}
blockquote {
padding-left: 25px;
padding-right: 25px;
border-left: 2px solid var(--mantine-color-gray-6);
background-color: light-dark(
var(--mantine-color-gray-0),
var(--mantine-color-dark-8)
);
margin: 0;
}
hr {
border: none;
border-top: 2px solid #ced4da;
margin: 2rem 0;
&:hover {
cursor: pointer;
}
}
&:focus {
outline: none;
hr.ProseMirror-selectednode {
border-top: 1px solid #68cef8;
}
.ProseMirror-selectednode {
outline: 2px solid #70cff8;
}
.node-mathInline {
.katex-display {
margin: 0;
}
}
ul,
ol {
padding: 0 1rem;
margin-top: .25rem;
margin-bottom: .25rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
}
code {
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-8));
color: #616161;
}
pre {
padding: var(--mantine-spacing-xs);
margin: var(--mantine-spacing-md) 0;
font-family: var(--mantine-font-family-monospace);
border-radius: var(--mantine-radius-sm);
@mixin light {
background-color: var(--mantine-color-gray-0);
color: var(--mantine-color-black);
.react-renderer {
&.node-callout {
padding-top: var(--mantine-spacing-xs);
padding-bottom: var(--mantine-spacing-xs);
div[style*="white-space: inherit;"] {
> :first-child {
margin: 0;
}
@mixin dark {
background-color: var(--mantine-color-dark-8);
color: var(--mantine-color-white);
}
code {
color: inherit;
padding: 0;
background: none;
font-size: inherit;
}
}
img {
max-width: 100%;
height: auto;
}
a {
color: light-dark(#207af1, #587da9);
font-weight: bold;
text-decoration: none;
cursor: pointer;
}
blockquote {
padding-left: 25px;
border-left: 2px solid var(--mantine-color-gray-6);
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-8));
margin: 0;
}
hr {
border: none;
border-top: 2px solid #ced4da;
margin: 2rem 0;
&:hover {
cursor: pointer;
}
}
hr.ProseMirror-selectednode {
border-top: 1px solid #68CEF8;
}
.ProseMirror-selectednode {
outline: 2px solid #70CFF8;
}
}
}
}
.resize-cursor {
cursor: ew-resize;
cursor: col-resize;
cursor: ew-resize;
cursor: col-resize;
}
.comment-mark {
background: rgba(255, 215, 0, .14);
border-bottom: 2px solid rgb(166, 158, 12);
background: rgba(255, 215, 0, 0.14);
border-bottom: 2px solid rgb(166, 158, 12);
}
.ProseMirror-icon {
display: inline-block;
width: 1em;
height: 1em;
mask-image: var(--svg);
mask-repeat: no-repeat;
mask-size: 100% 100%;
background-color: currentColor;
& -open {
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 3v2H5v14h14v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm7.586 2H13V3h8v8h-2V6.414l-7 7L10.586 12z'/%3E%3C/svg%3E");
}
&-right-line {
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12.172 12L9.343 9.173l1.415-1.414L15 12l-4.242 4.242l-1.415-1.414z'/%3E%3C/svg%3E");
}
}
.actionIconGroup {
background: var(--mantine-color-body);
}

77
apps/client/src/features/editor/styles/details.css Normal file
View File

@ -0,0 +1,77 @@
.ProseMirror {
[data-type="details"] {
display: flex;
padding: 0.5em;
border-radius: 4px;
border: 1px solid transparent;
transition: border 0.3s;
width: 100%;
&:hover {
border: 1px solid
light-dark(var(--mantine-color-gray-3), var(--mantine-color-gray-7));
[data-type="detailsSummary"] {}
}
[data-type="detailsButton"] {
display: flex;
cursor: pointer;
border: none;
padding: 0;
background: transparent;
.ProseMirror-icon {
width: 2em;
height: 2em;
transform: rotateZ(0deg);
transition: transform 0.3s;
}
> div {
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
&:hover,
&.active {
color: light-dark(
var(--mantine-color-gray-8),
var(--mantine-color-gray-0)
);
background: light-dark(
var(--mantine-color-gray-1),
var(--mantine-color-gray-8)
);
}
}
}
[data-type="detailsContainer"] {
flex: 1;
margin-left: 0.2em;
overflow-x: hidden;
word-break: break-word;
overflow-wrap: break-word;
[data-type="detailsContent"] {
display: none;
}
}
&[open] {
[data-type="detailsButton"] {
.ProseMirror-icon {
transform: rotateZ(90deg);
}
}
[data-type="detailsContainer"] {
[data-type="detailsContent"] {
display: block;
}
}
}
}
}

4
apps/client/src/features/editor/styles/drag-handle.css
View File

@ -1,9 +1,9 @@
.ProseMirror:not(.dragging) .ProseMirror-selectednode {
/*.ProseMirror:not(.dragging) .ProseMirror-selectednode {
outline: none !important;
background-color: rgba(150, 170, 220, 0.2);
transition: background-color 0.2s;
box-shadow: none;
}
}*/
.drag-handle {
position: fixed;

17
apps/client/src/features/editor/styles/index.css
View File

@ -1,5 +1,12 @@
@import './core';
@import './collaboration';
@import './task-list';
@import './placeholder';
@import './drag-handle';
@import "./core.css";
@import "./collaboration.css";
@import "./task-list.css";
@import "./placeholder.css";
@import "./drag-handle.css";
@import "./details.css";
@import "./table.css";
@import "./youtube.css";
@import "./media.css";
@import "./code.css";

13
apps/client/src/features/editor/styles/media.css Normal file
View File

@ -0,0 +1,13 @@
.ProseMirror {
img {
max-width: 100%;
height: auto;
}
.node-image, .node-video {
&.ProseMirror-selectednode {
outline: none;
}
}
}

73
apps/client/src/features/editor/styles/table.css Normal file
View File

@ -0,0 +1,73 @@
.tableWrapper {
margin-top: 3rem;
margin-bottom: 3rem;
overflow-x: auto;
& table {
overflow-x: hidden;
}
}
.ProseMirror {
table {
border-collapse: collapse;
margin: 0;
table-layout: fixed;
width: 100%;
td,
th {
border: 1px solid #ced4da;
box-sizing: border-box;
min-width: 1em;
padding: 3px 5px;
position: relative;
vertical-align: top;
&:first-of-type:not(a) {
margin-top: 0;
}
p {
margin: 0;
& + p {
margin-top: 0.75rem;
}
}
}
th {
background-color: light-dark(
var(--mantine-color-gray-1),
var(--mantine-color-dark-5)
);
font-weight: bold;
text-align: left;
}
.column-resize-handle {
background-color: #adf;
bottom: -2px;
position: absolute;
right: -2px;
pointer-events: none;
top: 0;
width: 4px;
}
.selectedCell:after {
background: rgba(200, 200, 255, 0.4);
content: "";
left: 0;
right: 0;
top: 0;
bottom: 0;
pointer-events: none;
position: absolute;
z-index: 2;
}
}
}

21
apps/client/src/features/editor/styles/youtube.css Normal file
View File

@ -0,0 +1,21 @@
.ProseMirror {
div[data-youtube-video] {
cursor: move;
iframe {
display: block;
outline: 0px solid transparent;
border-radius: var(--mantine-radius-md);
width: 100%;
}
&.ProseMirror-selectednode iframe {
outline: 1px solid var(--mantine-color-blue-6);
transition: outline 0.15s;
}
&.ProseMirror-selectednode {
background-color: transparent;
}
}
}

18
apps/client/src/features/page/services/page-service.ts
View File

@ -5,7 +5,7 @@ import {
IPageInput,
SidebarPagesParams,
} from "@/features/page/types/page.types";
import { IPagination } from "@/lib/types.ts";
import { IAttachment, IPagination } from "@/lib/types.ts";
export async function createPage(data: Partial<IPage>): Promise<IPage> {
const req = await api.post<IPage>("/pages/create", data);
@ -52,3 +52,19 @@ export async function getRecentChanges(
const req = await api.post("/pages/recent", { spaceId });
return req.data;
}
export async function uploadFile(file: File, pageId: string) {
const formData = new FormData();
formData.append("pageId", pageId);
formData.append("file", file);
// should be file endpoint
const req = await api.post<IAttachment>("/files/upload", formData, {
headers: {
"Content-Type": "multipart/form-data",
},
});
// console.log("req", req);
return req;
}

17
apps/client/src/lib/types.ts
View File

@ -32,3 +32,20 @@ export type IPagination<T> = {
items: T[];
meta: IPaginationMeta;
};
export interface IAttachment {
id: string;
fileName: string;
filePath: string;
fileSize: number;
fileExt: string;
mimeType: string;
type: string;
creatorId: string;
pageId: string | null;
spaceId: string | null;
workspaceId: string;
createdAt: string;
updatedAt: string;
deletedAt: string | null;
}

5
apps/client/src/pages/page/page-redirect.tsx
View File

@ -3,6 +3,7 @@ import { useEffect } from "react";
import { usePageQuery } from "@/features/page/queries/page-query";
import { buildPageUrl } from "@/features/page/page.utils.ts";
import { extractPageSlugId } from "@/lib";
import { Error404 } from "@/components/ui/error-404.tsx";
export default function PageRedirect() {
const { pageSlug } = useParams();
@ -20,6 +21,10 @@ export default function PageRedirect() {
}
}, [page]);
if (isError) {
return <Error404 />;
}
if (pageIsLoading) {
return <></>;
}

2
apps/client/src/pages/page/page.tsx
View File

@ -42,7 +42,7 @@ export default function Page() {
page && (
<div>
<Helmet>
<title>{`${page?.icon || ""} ${page.title || "untitled"}`}</title>
<title>{`${page?.icon || ""} ${page?.title || "untitled"}`}</title>
</Helmet>
<PageHeader

31
apps/server/src/collaboration/collaboration.util.ts
View File

@ -10,7 +10,23 @@ import { Highlight } from '@tiptap/extension-highlight';
import { Typography } from '@tiptap/extension-typography';
import { TextStyle } from '@tiptap/extension-text-style';
import { Color } from '@tiptap/extension-color';
import { TrailingNode, Comment } from '@docmost/editor-ext';
import { Youtube } from '@tiptap/extension-youtube';
import {
Callout,
Comment,
Details,
DetailsContent,
DetailsSummary,
MathBlock,
MathInline,
Table,
TableCell,
TableHeader,
TableRow,
TiptapImage,
TiptapVideo,
TrailingNode,
} from '@docmost/editor-ext';
import { generateHTML, generateJSON } from '@tiptap/html';
import { generateText, JSONContent } from '@tiptap/core';
@ -29,6 +45,19 @@ export const tiptapExtensions = [
TrailingNode,
TextStyle,
Color,
MathInline,
MathBlock,
Details,
DetailsContent,
DetailsSummary,
Table,
TableHeader,
TableRow,
TableCell,
Youtube,
TiptapImage,
TiptapVideo,
Callout,
] as any;
export function jsonToHtml(tiptapJson: JSONContent) {

8
apps/server/src/collaboration/extensions/persistence.extension.ts
View File

@ -77,7 +77,13 @@ export class PersistenceExtension implements Extension {
const tiptapJson = TiptapTransformer.fromYdoc(document, 'default');
const ydocState = Buffer.from(Y.encodeStateAsUpdate(document));
const textContent = jsonToText(tiptapJson);
let textContent = null;
try {
textContent = jsonToText(tiptapJson);
} catch (err) {
this.logger.warn('jsonToText' + err?.['message']);
}
try {
let page = null;

10
apps/server/src/common/decorators/auth-user.decorator.ts
View File

@ -1,8 +1,16 @@
import { createParamDecorator, ExecutionContext } from '@nestjs/common';
import {
BadRequestException,
createParamDecorator,
ExecutionContext,
} from '@nestjs/common';
export const AuthUser = createParamDecorator(
(data: unknown, ctx: ExecutionContext) => {
const request = ctx.switchToHttp().getRequest();
if (!request?.user?.user) {
throw new BadRequestException('Invalid User');
}
return request.user.user;
},
);

14
apps/server/src/common/decorators/auth-workspace.decorator.ts
View File

@ -1,8 +1,18 @@
import { createParamDecorator, ExecutionContext } from '@nestjs/common';
import {
BadRequestException,
createParamDecorator,
ExecutionContext,
} from '@nestjs/common';
export const AuthWorkspace = createParamDecorator(
(data: unknown, ctx: ExecutionContext) => {
const request = ctx.switchToHttp().getRequest();
return request.user.workspace;
const workspace = request.raw?.workspace ?? request?.user?.workspace;
if (!workspace) {
throw new BadRequestException('Invalid workspace');
}
return workspace;
},
);

3
apps/server/src/common/middlewares/domain.middleware.ts
View File

@ -22,7 +22,9 @@ export class DomainMiddleware implements NestMiddleware {
return next();
}
// TODO: unify
(req as any).workspaceId = workspace.id;
(req as any).workspace = workspace;
} else if (this.environmentService.isCloud()) {
const header = req.headers.host;
const subdomain = header.split('.')[0];
@ -34,6 +36,7 @@ export class DomainMiddleware implements NestMiddleware {
}
(req as any).workspaceId = workspace.id;
(req as any).workspace = workspace;
}
next();

11
apps/server/src/core/attachment/attachment.constants.ts
View File

@ -5,8 +5,15 @@ export enum AttachmentType {
File = 'file',
}
export const validImageExtensions = ['.jpg', '.png', '.jpeg'];
export const validImageExtensions = ['.jpg', '.png', '.jpeg', 'gif'];
export const MAX_AVATAR_SIZE = '5MB';
export const validFileExtensions = ['.jpg', '.png', '.jpeg', '.pdf'];
export const InlineFileExtensions = [
'.jpg',
'.png',
'.jpeg',
'.pdf',
'.mp4',
'.mov',
];
export const MAX_FILE_SIZE = '20MB';

96
apps/server/src/core/attachment/attachment.controller.ts
View File

@ -43,8 +43,12 @@ import {
WorkspaceCaslSubject,
} from '../casl/interfaces/workspace-ability.type';
import WorkspaceAbilityFactory from '../casl/abilities/workspace-ability.factory';
import { PageRepo } from '@docmost/db/repos/page/page.repo';
import { AttachmentRepo } from '@docmost/db/repos/attachment/attachment.repo';
import { Public } from '../../common/decorators/public.decorator';
import { validate as isValidUUID } from 'uuid';
@Controller('attachments')
@Controller()
export class AttachmentController {
private readonly logger = new Logger(AttachmentController.name);
@ -53,11 +57,13 @@ export class AttachmentController {
private readonly storageService: StorageService,
private readonly workspaceAbility: WorkspaceAbilityFactory,
private readonly spaceAbility: SpaceAbilityFactory,
private readonly pageRepo: PageRepo,
private readonly attachmentRepo: AttachmentRepo,
) {}
@UseGuards(JwtAuthGuard)
@HttpCode(HttpStatus.OK)
@Post('upload-file')
@Post('files/upload')
@UseInterceptors(AttachmentInterceptor)
async uploadFile(
@Req() req: any,
@ -70,9 +76,10 @@ export class AttachmentController {
let file = null;
try {
file = await req.file({
limits: { fileSize: maxFileSize, fields: 1, files: 1 },
limits: { fileSize: maxFileSize, fields: 2, files: 1 },
});
} catch (err: any) {
this.logger.error(err.message);
if (err?.statusCode === 413) {
throw new BadRequestException(
`File too large. Exceeds the ${MAX_FILE_SIZE} limit`,
@ -81,42 +88,85 @@ export class AttachmentController {
}
if (!file) {
throw new BadRequestException('Invalid file upload');
throw new BadRequestException('Failed to upload file');
}
const pageId = file.fields?.pageId.value;
const pageId = file.fields?.pageId?.value;
if (!pageId) {
throw new BadRequestException('PageId is required');
}
const page = await this.pageRepo.findById(pageId);
if (!page) {
throw new NotFoundException('Page not found');
}
const spaceAbility = await this.spaceAbility.createForUser(
user,
page.spaceId,
);
if (spaceAbility.cannot(SpaceCaslAction.Manage, SpaceCaslSubject.Page)) {
throw new ForbiddenException();
}
const spaceId = page.spaceId;
try {
const fileResponse = await this.attachmentService.uploadFile(
file,
pageId,
user.id,
workspace.id,
);
const fileResponse = await this.attachmentService.uploadFile({
filePromise: file,
pageId: pageId,
spaceId: spaceId,
userId: user.id,
workspaceId: workspace.id,
});
return res.send(fileResponse);
} catch (err: any) {
this.logger.error(err);
throw new BadRequestException('Error processing file upload.');
}
}
@Get('/:fileId/:fileName')
@Public()
@UseGuards(JwtAuthGuard)
@Get('/files/:fileId/:fileName')
async getFile(
@Req() req: any,
@Res() res: FastifyReply,
//@AuthUser() user: User,
@AuthWorkspace() workspace: Workspace,
@Param('fileId') fileId: string,
@Param('fileName') fileName?: string,
) {
// TODO
if (!isValidUUID(fileId)) {
throw new NotFoundException('Invalid file id');
}
const attachment = await this.attachmentRepo.findById(fileId);
if (attachment.workspaceId !== workspace.id) {
throw new NotFoundException();
}
if (!attachment || !attachment.pageId) {
throw new NotFoundException('File record not found');
}
try {
const fileStream = await this.storageService.read(attachment.filePath);
res.headers({
'Content-Type': getMimeType(attachment.filePath),
});
return res.send(fileStream);
} catch (err) {
this.logger.error(err);
throw new NotFoundException('File not found');
}
}
@UseGuards(JwtAuthGuard)
@HttpCode(HttpStatus.OK)
@Post('upload-image')
@Post('attachments/upload-image')
@UseInterceptors(AttachmentInterceptor)
async uploadAvatarOrLogo(
@Req() req: any,
@ -198,19 +248,13 @@ export class AttachmentController {
}
}
@Get('/img/:attachmentType/:fileName')
@Get('attachments/img/:attachmentType/:fileName')
async getLogoOrAvatar(
@Req() req: any,
@Res() res: FastifyReply,
@AuthWorkspace() workspace: Workspace,
@Param('attachmentType') attachmentType: AttachmentType,
@Param('fileName') fileName?: string,
) {
const workspaceId = req.raw?.workspaceId;
if (!workspaceId) {
throw new BadRequestException('Invalid workspace');
}
if (
!validAttachmentTypes.includes(attachmentType) ||
attachmentType === AttachmentType.File
@ -218,12 +262,12 @@ export class AttachmentController {
throw new BadRequestException('Invalid image attachment type');
}
const buildFilePath = `${getAttachmentFolderPath(attachmentType, workspaceId)}/${fileName}`;
const filePath = `${getAttachmentFolderPath(attachmentType, workspace.id)}/${fileName}`;
try {
const fileStream = await this.storageService.read(buildFilePath);
const fileStream = await this.storageService.read(filePath);
res.headers({
'Content-Type': getMimeType(buildFilePath),
'Content-Type': getMimeType(filePath),
});
return res.send(fileStream);
} catch (err) {

2
apps/server/src/core/attachment/attachment.utils.ts
View File

@ -26,7 +26,7 @@ export async function prepareFile(
const buffer = await file.toBuffer();
const sanitizedFilename = sanitize(file.filename).replace(/ /g, '_');
const fileName = `${rand}_${sanitizedFilename}`;
const fileName = sanitizedFilename.slice(0, 255);
const fileSize = buffer.length;
const fileExtension = path.extname(file.filename).toLowerCase();

30
apps/server/src/core/attachment/services/attachment.service.ts
View File

@ -9,11 +9,7 @@ import {
} from '../attachment.utils';
import { v4 as uuid4 } from 'uuid';
import { AttachmentRepo } from '@docmost/db/repos/attachment/attachment.repo';
import {
AttachmentType,
validFileExtensions,
validImageExtensions,
} from '../attachment.constants';
import { AttachmentType, validImageExtensions } from '../attachment.constants';
import { KyselyDB, KyselyTransaction } from '@docmost/db/types/kysely.types';
import { Attachment } from '@docmost/db/types/entity.types';
import { InjectKysely } from 'nestjs-kysely';
@ -34,31 +30,36 @@ export class AttachmentService {
@InjectKysely() private readonly db: KyselyDB,
) {}
async uploadFile(
filePromise: Promise<MultipartFile>,
pageId: string,
userId: string,
workspaceId: string,
) {
async uploadFile(opts: {
filePromise: Promise<MultipartFile>;
pageId: string;
userId: string;
spaceId: string;
workspaceId: string;
}) {
const { filePromise, pageId, spaceId, userId, workspaceId } = opts;
const preparedFile: PreparedFile = await prepareFile(filePromise);
validateFileType(preparedFile.fileExtension, validFileExtensions);
const filePath = `${getAttachmentFolderPath(AttachmentType.File, workspaceId)}/${preparedFile.fileName}`;
const attachmentId = uuid4();
const filePath = `${getAttachmentFolderPath(AttachmentType.File, workspaceId)}/${attachmentId}/${preparedFile.fileName}`;
await this.uploadToDrive(filePath, preparedFile.buffer);
let attachment: Attachment = null;
try {
attachment = await this.saveAttachment({
attachmentId,
preparedFile,
filePath,
type: AttachmentType.File,
userId,
spaceId,
workspaceId,
pageId,
});
} catch (err) {
// delete uploaded file on error
console.error(err);
}
return attachment;
@ -175,6 +176,7 @@ export class AttachmentService {
}
async saveAttachment(opts: {
attachmentId?: string;
preparedFile: PreparedFile;
filePath: string;
type: AttachmentType;
@ -185,6 +187,7 @@ export class AttachmentService {
trx?: KyselyTransaction;
}): Promise<Attachment> {
const {
attachmentId,
preparedFile,
filePath,
type,
@ -196,6 +199,7 @@ export class AttachmentService {
} = opts;
return this.attachmentRepo.insertAttachment(
{
id: attachmentId,
type: type,
filePath: filePath,
fileName: preparedFile.fileName,

9
package.json
View File

@ -7,7 +7,7 @@
"start": "pnpm --filter ./apps/server run start:prod",
"server:build": "nx run server:build",
"client:build": "nx run client:build",
"editor-ext:editor-ext": "nx run editor-ext:build",
"editor-ext:build": "nx run @docmost/editor-ext:build",
"client:dev": "nx run client:dev",
"server:dev": "nx run server:start:dev",
"server:start": "nx run server:start:prod",
@ -29,6 +29,7 @@
"@tiptap/extension-heading": "^2.4.0",
"@tiptap/extension-highlight": "^2.4.0",
"@tiptap/extension-history": "^2.4.0",
"@tiptap/extension-image": "^2.4.0",
"@tiptap/extension-link": "^2.4.0",
"@tiptap/extension-list-item": "^2.4.0",
"@tiptap/extension-list-keymap": "^2.4.0",
@ -36,6 +37,10 @@
"@tiptap/extension-placeholder": "^2.4.0",
"@tiptap/extension-subscript": "^2.4.0",
"@tiptap/extension-superscript": "^2.4.0",
"@tiptap/extension-table": "^2.4.0",
"@tiptap/extension-table-cell": "^2.4.0",
"@tiptap/extension-table-header": "^2.4.0",
"@tiptap/extension-table-row": "^2.4.0",
"@tiptap/extension-task-item": "^2.4.0",
"@tiptap/extension-task-list": "^2.4.0",
"@tiptap/extension-text": "^2.4.0",
@ -43,6 +48,7 @@
"@tiptap/extension-text-style": "^2.4.0",
"@tiptap/extension-typography": "^2.4.0",
"@tiptap/extension-underline": "^2.4.0",
"@tiptap/extension-youtube": "^2.4.0",
"@tiptap/html": "^2.4.0",
"@tiptap/pm": "^2.4.0",
"@tiptap/react": "^2.4.0",
@ -51,7 +57,6 @@
"cross-env": "^7.0.3",
"fractional-indexing-jittered": "^0.9.1",
"ioredis": "^5.4.1",
"tiptap-extension-global-drag-handle": "^0.1.8",
"y-indexeddb": "^9.0.12",
"yjs": "^13.6.15"
},

4
packages/editor-ext/package.json
View File

@ -6,8 +6,8 @@
"build": "tsc --build",
"dev": "tsc --watch"
},
"dependencies": {},
"main": "dist/index.js",
"module": "./src/index.ts",
"types": "dist/index.d.ts"
"types": "dist/index.d.ts",
"dependencies": {}
}

12
packages/editor-ext/src/index.ts
View File

@ -1,2 +1,10 @@
export * from './lib/trailing-node';
export * from './lib/comment/comment'
export * from "./lib/trailing-node";
export * from "./lib/comment/comment";
export * from "./lib/utils";
export * from "./lib/math";
export * from "./lib/details";
export * from "./lib/table";
export * from "./lib/image";
export * from "./lib/video";
export * from "./lib/callout";
export * from "./lib/media-utils";

201
packages/editor-ext/src/lib/callout/callout.ts Normal file
View File

@ -0,0 +1,201 @@
import {
findParentNode,
mergeAttributes,
Node,
wrappingInputRule,
} from "@tiptap/core";
import { TextSelection } from "@tiptap/pm/state";
import { ReactNodeViewRenderer } from "@tiptap/react";
import { CalloutType, getValidCalloutType } from "./utils";
export interface CalloutOptions {
HTMLAttributes: Record<string, any>;
view: any;
}
export interface CalloutAttributes {
/**
* The type of callout.
*/
type: CalloutType;
}
declare module "@tiptap/core" {
interface Commands<ReturnType> {
callout: {
setCallout: (attributes?: CalloutAttributes) => ReturnType;
unsetCallout: () => ReturnType;
toggleCallout: (attributes?: CalloutAttributes) => ReturnType;
updateCalloutType: (type: CalloutType) => ReturnType;
};
}
}
/**
* Matches a callout to a `:::` as input.
*/
export const inputRegex = /^:::([a-z]+)?[\s\n]$/;
export const Callout = Node.create<CalloutOptions>({
name: "callout",
addOptions() {
return {
HTMLAttributes: {},
view: null,
};
},
content: "block+",
group: "block",
defining: true,
addAttributes() {
return {
type: {
default: "info",
parseHTML: (element) => element.getAttribute("data-callout-type"),
renderHTML: (attributes) => ({
"data-callout-type": attributes.type,
}),
},
};
},
parseHTML() {
return [
{
tag: `div[data-type="${this.name}"]`,
},
];
},
renderHTML({ HTMLAttributes }) {
return [
"div",
mergeAttributes(
{ "data-type": this.name },
this.options.HTMLAttributes,
HTMLAttributes,
),
0,
];
},
addCommands() {
return {
setCallout:
(attributes) =>
({ commands }) => {
return commands.setNode(this.name, attributes);
},
unsetCallout:
() =>
({ commands }) => {
return commands.lift(this.name);
},
toggleCallout:
(attributes) =>
({ commands }) => {
return commands.toggleWrap(this.name, attributes);
},
updateCalloutType:
(type: string) =>
({ commands }) =>
commands.updateAttributes("callout", {
type: getValidCalloutType(type),
}),
};
},
addNodeView() {
return ReactNodeViewRenderer(this.options.view);
},
addKeyboardShortcuts() {
return {
//"Mod-Shift-c": () => this.editor.commands.toggleCallout(),
/**
* Handle the backspace key when deleting content.
* Aims to stop merging callouts when deleting content in between.
*/
Backspace: ({ editor }) => {
const { state, view } = editor;
const { selection } = state;
// If the selection is not empty, return false
// and let other extension handle the deletion.
if (!selection.empty) {
return false;
}
const { $from } = selection;
// If not at the start of current node, no joining will happen
if ($from.parentOffset !== 0) {
return false;
}
const previousPosition = $from.before($from.depth) - 1;
// If nothing above to join with
if (previousPosition < 1) {
return false;
}
const previousPos = state.doc.resolve(previousPosition);
// If resolving previous position fails, bail out
if (!previousPos?.parent) {
return false;
}
const previousNode = previousPos.parent;
const parentNode = findParentNode(() => true)(selection);
if (!parentNode) {
return false;
}
const { node, pos, depth } = parentNode;
// If current node is nested
if (depth !== 1) {
return false;
}
// If previous node is a callout, cut current node's content into it
if (node.type !== this.type && previousNode.type === this.type) {
const { content, nodeSize } = node;
const { tr } = state;
tr.delete(pos, pos + nodeSize);
tr.setSelection(
TextSelection.near(tr.doc.resolve(previousPosition - 1)),
);
tr.insert(previousPosition - 1, content);
view.dispatch(tr);
return true;
}
return false;
},
};
},
addInputRules() {
return [
wrappingInputRule({
find: inputRegex,
type: this.type,
getAttributes: (match) => ({
type: getValidCalloutType(match[1]),
}),
}),
];
},
});

2
packages/editor-ext/src/lib/callout/index.ts Normal file
View File

@ -0,0 +1,2 @@
export { Callout } from "./callout";
export * from "./utils";

8
packages/editor-ext/src/lib/callout/utils.ts Normal file
View File

@ -0,0 +1,8 @@
export type CalloutType = "default" | "info" | "success" | "warning" | "danger";
const validCalloutTypes = ["default", "info", "success", "warning", "danger"];
export function getValidCalloutType(value: string): string {
if (value) {
return validCalloutTypes.includes(value) ? value : "info";
}
}

111
packages/editor-ext/src/lib/details/details-content.ts Normal file
View File

@ -0,0 +1,111 @@
import {
Node,
defaultBlockAt,
findParentNode,
mergeAttributes,
} from "@tiptap/core";
import { Selection } from "@tiptap/pm/state";
export interface DetailsContentOptions {
HTMLAttributes: Record<string, any>;
}
export const DetailsContent = Node.create<DetailsContentOptions>({
name: "detailsContent",
group: "block",
content: "block*",
defining: true,
selectable: false,
addOptions() {
return {
HTMLAttributes: {},
};
},
parseHTML() {
return [
{
tag: `div[data-type="${this.name}"]`,
},
];
},
renderHTML({ HTMLAttributes }) {
return [
"div",
mergeAttributes(
{ "data-type": this.name },
this.options.HTMLAttributes,
HTMLAttributes,
),
0,
];
},
addKeyboardShortcuts() {
return {
Enter: ({ editor }) => {
const view = editor.view;
const state = editor.state;
const selection = state.selection;
const findNode = findParentNode((node) => node.type.name === this.name)(
selection,
);
if (!selection.empty || !findNode || !findNode.node.childCount) {
return false;
}
const childCount = findNode.node.childCount;
if (!(childCount === selection.$from.index(findNode.depth) + 1)) {
return false;
}
const fillNode =
findNode.node.type.contentMatch.defaultType?.createAndFill();
if (!fillNode) {
return false;
}
const lastNode = findNode.node.child(childCount - 1);
if (!lastNode.eq(fillNode)) {
return false;
}
const rootNode = selection.$from.node(-3);
if (!rootNode) {
return false;
}
const indexAfter = selection.$from.indexAfter(-3);
const nodeType = defaultBlockAt(rootNode.contentMatchAt(indexAfter));
if (
!nodeType ||
!rootNode.canReplaceWith(indexAfter, indexAfter, nodeType)
) {
return false;
}
const defaultNode = nodeType.createAndFill();
if (!defaultNode) {
return false;
}
const tr = state.tr;
const after = selection.$from.after(-2);
tr.replaceWith(after, after, defaultNode);
tr.setSelection(Selection.near(tr.doc.resolve(after), 1));
const from = state.doc
.resolve(findNode.pos + 1)
.posAtIndex(childCount - 1, findNode.depth);
const to = from + lastNode.nodeSize;
tr.delete(from, to);
tr.scrollIntoView();
view.dispatch(tr);
return true;
},
};
},
});

96
packages/editor-ext/src/lib/details/details-summary.ts Normal file
View File

@ -0,0 +1,96 @@
import { Node, defaultBlockAt, mergeAttributes } from "@tiptap/core";
import { Selection } from "@tiptap/pm/state";
export interface DetailsSummaryOptions {
HTMLAttributes: Record<string, any>;
}
export const DetailsSummary = Node.create<DetailsSummaryOptions>({
name: "detailsSummary",
group: "block",
content: "inline*",
defining: true,
isolating: true,
selectable: false,
addOptions() {
return {
HTMLAttributes: {},
};
},
parseHTML() {
return [
{
tag: "summary",
},
];
},
renderHTML({ HTMLAttributes }) {
return [
"summary",
mergeAttributes(
{ "data-type": this.name },
this.options.HTMLAttributes,
HTMLAttributes,
),
0,
];
},
addKeyboardShortcuts() {
return {
Backspace: ({ editor }) => {
const state = editor.state;
const selection = state.selection;
if (selection.$anchor.parent.type.name !== this.name) {
return false;
}
if (selection.$anchor.parentOffset !== 0) {
return false;
}
return editor.chain().unsetDetails().focus().run();
},
Enter: ({ editor }) => {
const view = editor.view;
const state = editor.state;
const head = state.selection.$head;
if (head.parent.type.name !== this.name) {
return false;
}
const hasOffset =
// @ts-ignore
view.domAtPos(head.after() + 1).node.offsetParent !== null;
const findNode = hasOffset
? state.doc.nodeAt(head.after())
: head.node(-2);
if (!findNode) {
return false;
}
const indexAfter = hasOffset ? 0 : head.indexAfter(-1);
const nodeType = defaultBlockAt(findNode.contentMatchAt(indexAfter));
if (
!nodeType ||
!findNode.canReplaceWith(indexAfter, indexAfter, nodeType)
) {
return false;
}
const defaultNode = nodeType.createAndFill();
if (!defaultNode) {
return false;
}
const tr = state.tr;
const after = hasOffset ? head.after() + 1 : head.after(-1);
tr.replaceWith(after, after, defaultNode);
tr.setSelection(Selection.near(tr.doc.resolve(after), 1));
tr.scrollIntoView();
view.dispatch(tr);
return true;
},
};
},
});

236
packages/editor-ext/src/lib/details/details.ts Normal file
View File

@ -0,0 +1,236 @@
import {
Node,
findChildren,
findParentNode,
mergeAttributes,
wrappingInputRule,
} from "@tiptap/core";
import { icon, setAttributes } from "../utils";
declare module "@tiptap/core" {
interface Commands<ReturnType> {
details: {
setDetails: () => ReturnType;
unsetDetails: () => ReturnType;
toggleDetails: () => ReturnType;
};
}
}
export interface DetailsOptions {
HTMLAttributes: Record<string, any>;
}
export const Details = Node.create<DetailsOptions>({
name: "details",
group: "block",
content: "detailsSummary detailsContent",
defining: true,
isolating: true,
allowGapCursor: false,
addOptions() {
return {
HTMLAttributes: {},
};
},
addAttributes() {
return {
open: {
default: false,
parseHTML: (e) => e.getAttribute("open"),
renderHTML: (a) => (a.open ? { open: "" } : {}),
},
};
},
parseHTML() {
return [
{
tag: "details",
},
];
},
renderHTML({ HTMLAttributes }) {
return [
"details",
mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
0,
];
},
addNodeView() {
return ({ node, editor, getPos }) => {
const dom = document.createElement("div");
const btn = document.createElement("button");
const ico = document.createElement("div");
const div = document.createElement("div");
for (const [key, value] of Object.entries(
mergeAttributes(this.options.HTMLAttributes),
)) {
if (value !== undefined && value !== null) {
dom.setAttribute(key, value);
}
}
dom.setAttribute("data-type", this.name);
btn.setAttribute("data-type", `${this.name}Button`);
div.setAttribute("data-type", `${this.name}Container`);
if (node.attrs.open) {
dom.setAttribute("open", "true");
} else {
dom.removeAttribute("open");
}
ico.innerHTML = icon("right-line");
btn.addEventListener("click", () => {
const open = !dom.hasAttribute("open");
if (!editor.isEditable) {
// In readonly mode, toggle the 'open' attribute without updating the document state.
if (open) {
dom.setAttribute("open", "true");
} else {
dom.removeAttribute("open");
}
return;
}
setAttributes(editor, getPos, { ...node.attrs, open });
});
btn.append(ico);
dom.append(btn);
dom.append(div);
return {
dom,
contentDOM: div,
update: (updatedNode) => {
if (updatedNode.type !== this.type) {
return false;
}
if (updatedNode.attrs.open) {
dom.setAttribute("open", "true");
} else {
dom.removeAttribute("open");
}
return true;
},
};
};
},
addCommands() {
return {
setDetails: () => {
return ({ state, chain }) => {
const range = state.selection.$from.blockRange(state.selection.$to);
if (!range) {
return false;
}
const slice = state.doc.slice(range.start, range.end);
if (
!state.schema.nodes.detailsContent.contentMatch.matchFragment(
slice.content,
)
) {
return false;
}
return chain()
.insertContentAt(
{
from: range.start,
to: range.end,
},
{
type: this.name,
attrs: {
open: true,
},
content: [
{
type: "detailsSummary",
},
{
type: "detailsContent",
content: slice.toJSON()?.content ?? [],
},
],
},
)
.setTextSelection(range.start + 2)
.run();
};
},
unsetDetails: () => {
return ({ state, chain }) => {
const parent = findParentNode((node) => node.type === this.type)(
state.selection,
);
if (!parent) {
return false;
}
const summary = findChildren(
parent.node,
(node) => node.type.name === "detailsSummary",
);
const content = findChildren(
parent.node,
(node) => node.type.name === "detailsContent",
);
if (!summary.length || !content.length) {
return false;
}
const range = {
from: parent.pos,
to: parent.pos + parent.node.nodeSize,
};
const defaultType = state.doc.resolve(range.from).parent.type
.contentMatch.defaultType;
return chain()
.insertContentAt(range, [
defaultType?.create(null, summary[0].node.content).toJSON(),
...(content[0].node.content.toJSON() ?? []),
])
.setTextSelection(range.from + 1)
.run();
};
},
toggleDetails: () => {
return ({ state, chain }) => {
const node = findParentNode((node) => node.type === this.type)(
state.selection,
);
if (node) {
return chain().unsetDetails().run();
} else {
return chain().setDetails().run();
}
};
},
};
},
addInputRules() {
return [
wrappingInputRule({
find: /^:::details\s$/,
type: this.type,
}),
];
},
addKeyboardShortcuts() {
return {
"Mod-Alt-d": () => this.editor.commands.toggleDetails(),
};
},
});

3
packages/editor-ext/src/lib/details/index.ts Normal file
View File

@ -0,0 +1,3 @@
export { Details } from "./details";
export { DetailsSummary } from "./details-summary";
export { DetailsContent } from "./details-content";

125
packages/editor-ext/src/lib/image/image-upload.ts Normal file
View File

@ -0,0 +1,125 @@
import { type EditorState, Plugin, PluginKey } from "@tiptap/pm/state";
import { Decoration, DecorationSet } from "@tiptap/pm/view";
import { IAttachment } from "client/src/lib/types";
import { MediaUploadOptions, UploadFn } from "../media-utils";
const uploadKey = new PluginKey("image-upload");
export const ImageUploadPlugin = ({
placeHolderClass,
}: {
placeHolderClass: string;
}) =>
new Plugin({
key: uploadKey,
state: {
init() {
return DecorationSet.empty;
},
apply(tr, set) {
set = set.map(tr.mapping, tr.doc);
// See if the transaction adds or removes any placeholders
//@-ts-expect-error - not yet sure what the type I need here
const action = tr.getMeta(this);
if (action?.add) {
const { id, pos, src } = action.add;
const placeholder = document.createElement("div");
placeholder.setAttribute("class", "img-placeholder");
const image = document.createElement("img");
image.setAttribute("class", placeHolderClass);
image.src = src;
placeholder.appendChild(image);
const deco = Decoration.widget(pos + 1, placeholder, {
id,
});
set = set.add(tr.doc, [deco]);
} else if (action?.remove) {
set = set.remove(
set.find(
undefined,
undefined,
(spec) => spec.id == action.remove.id,
),
);
}
return set;
},
},
props: {
decorations(state) {
return this.getState(state);
},
},
});
function findPlaceholder(state: EditorState, id: {}) {
const decos = uploadKey.getState(state) as DecorationSet;
const found = decos.find(undefined, undefined, (spec) => spec.id == id);
return found.length ? found[0]?.from : null;
}
export const handleImageUpload =
({ validateFn, onUpload }: MediaUploadOptions): UploadFn =>
async (file, view, pos, pageId) => {
// check if the file is an image
const validated = validateFn?.(file);
// @ts-ignore
if (!validated) return;
// A fresh object to act as the ID for this upload
const id = {};
// Replace the selection with a placeholder
const tr = view.state.tr;
if (!tr.selection.empty) tr.deleteSelection();
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
tr.setMeta(uploadKey, {
add: {
id,
pos,
src: reader.result,
},
});
view.dispatch(tr);
};
await onUpload(file, pageId).then(
(attachment: IAttachment) => {
const { schema } = view.state;
const pos = findPlaceholder(view.state, id);
// If the content around the placeholder has been deleted, drop
// the image
if (pos == null) return;
// Otherwise, insert it at the placeholder's position, and remove
// the placeholder
if (!attachment) return;
const node = schema.nodes.image?.create({
src: `/files/${attachment.id}/${attachment.fileName}`,
attachmentId: attachment.id,
title: attachment.fileName,
size: attachment.fileSize,
});
if (!node) return;
const transaction = view.state.tr
.replaceWith(pos, pos, node)
.setMeta(uploadKey, { remove: { id } });
view.dispatch(transaction);
},
() => {
// Deletes the image placeholder on error
const transaction = view.state.tr
.delete(pos, pos)
.setMeta(uploadKey, { remove: { id } });
view.dispatch(transaction);
},
);
};

148
packages/editor-ext/src/lib/image/image.ts Normal file
View File

@ -0,0 +1,148 @@
import Image from "@tiptap/extension-image";
import { ImageOptions as DefaultImageOptions } from "@tiptap/extension-image";
import { ReactNodeViewRenderer } from "@tiptap/react";
import { ImageUploadPlugin } from "./image-upload";
import { mergeAttributes, Range } from "@tiptap/core";
export interface ImageOptions extends DefaultImageOptions {
view: any;
}
export interface ImageAttributes {
src?: string;
alt?: string;
title?: string;
align?: string;
attachmentId?: string;
size?: number;
width?: number;
}
declare module "@tiptap/core" {
interface Commands<ReturnType> {
imageBlock: {
setImage: (attributes: ImageAttributes) => ReturnType;
setImageAt: (
attributes: ImageAttributes & { pos: number | Range },
) => ReturnType;
setImageAlign: (align: "left" | "center" | "right") => ReturnType;
setImageWidth: (width: number) => ReturnType;
};
}
}
export const TiptapImage = Image.extend<ImageOptions>({
name: "image",
inline: false,
group: "block",
isolating: true,
atom: true,
defining: true,
addOptions() {
return {
...this.parent?.(),
view: null,
};
},
addAttributes() {
return {
src: {
default: "",
parseHTML: (element) => element.getAttribute("src"),
renderHTML: (attributes) => ({
src: attributes.src,
}),
},
width: {
default: "100%",
parseHTML: (element) => element.getAttribute("data-width"),
renderHTML: (attributes: ImageAttributes) => ({
"data-width": attributes.width,
}),
},
align: {
default: "center",
parseHTML: (element) => element.getAttribute("data-align"),
renderHTML: (attributes: ImageAttributes) => ({
"data-align": attributes.align,
}),
},
alt: {
default: undefined,
parseHTML: (element) => element.getAttribute("alt"),
renderHTML: (attributes: ImageAttributes) => ({
alt: attributes.alt,
}),
},
attachmentId: {
default: undefined,
parseHTML: (element) => element.getAttribute("data-attachment-id"),
renderHTML: (attributes: ImageAttributes) => ({
"data-attachment-id": attributes.align,
}),
},
size: {
default: null,
parseHTML: (element) => element.getAttribute("data-size"),
renderHTML: (attributes: ImageAttributes) => ({
"data-size": attributes.size,
}),
},
};
},
renderHTML({ HTMLAttributes }) {
return [
"img",
mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
];
},
addCommands() {
return {
setImage:
(attrs: ImageAttributes) =>
({ commands }) => {
return commands.insertContent({
type: "image",
attrs: attrs,
});
},
setImageAt:
(attrs) =>
({ commands }) => {
return commands.insertContentAt(attrs.pos, {
type: "image",
attrs: attrs,
});
},
setImageAlign:
(align) =>
({ commands }) =>
commands.updateAttributes("image", { align }),
setImageWidth:
(width) =>
({ commands }) =>
commands.updateAttributes("image", {
width: `${Math.max(0, Math.min(100, width))}%`,
}),
};
},
addNodeView() {
return ReactNodeViewRenderer(this.options.view);
},
addProseMirrorPlugins() {
return [
ImageUploadPlugin({
placeHolderClass: "image-upload",
}),
];
},
});

2
packages/editor-ext/src/lib/image/index.ts Normal file
View File

@ -0,0 +1,2 @@
export { TiptapImage } from "./image";
export * from "./image-upload";

2
packages/editor-ext/src/lib/math/index.ts Normal file
View File

@ -0,0 +1,2 @@
export { MathInline } from "./math-inline";
export { MathBlock } from "./math-block";

95
packages/editor-ext/src/lib/math/math-block.ts Normal file
View File

@ -0,0 +1,95 @@
import { Node, nodeInputRule } from "@tiptap/core";
import { ReactNodeViewRenderer } from "@tiptap/react";
declare module "@tiptap/core" {
interface Commands<ReturnType> {
mathBlock: {
setMathBlock: () => ReturnType;
};
}
}
export interface MathBlockOptions {
HTMLAttributes: Record<string, any>;
view: any;
}
export interface MathBlockAttributes {
katex: string;
}
export const inputRegex = /(?:^|\s)((?:\$\$\$)((?:[^$]+))(?:\$\$\$))$/;
export const MathBlock = Node.create({
name: "mathBlock",
group: "block",
atom: true,
addOptions() {
return {
HTMLAttributes: {},
view: null,
};
},
addAttributes() {
return {
katex: {
default: "",
parseHTML: (element) => element.innerHTML.split("$")[1],
},
};
},
parseHTML() {
return [
{
tag: "div",
getAttrs: (node: HTMLElement) => {
return node.hasAttribute("data-katex") ? {} : false;
},
},
];
},
renderHTML({ HTMLAttributes }) {
return [
"div",
{},
["div", { "data-katex": true }, `$${HTMLAttributes.katex}$`],
];
},
addNodeView() {
return ReactNodeViewRenderer(this.options.view);
},
renderText({ node }) {
return node.attrs.katex;
},
addCommands() {
return {
setMathBlock:
(attributes?: Record<string, any>) =>
({ commands }) => {
return commands.insertContent({
type: this.name,
attrs: attributes,
});
},
};
},
addInputRules() {
return [
nodeInputRule({
find: inputRegex,
type: this.type,
getAttributes: (match) => ({
katex: match[1].replaceAll("$", ""),
}),
}),
];
},
});

92
packages/editor-ext/src/lib/math/math-inline.ts Normal file
View File

@ -0,0 +1,92 @@
import { Node, nodeInputRule, wrappingInputRule } from "@tiptap/core";
import { ReactNodeViewRenderer } from "@tiptap/react";
declare module "@tiptap/core" {
interface Commands<ReturnType> {
mathInline: {
setMathInline: () => ReturnType;
};
}
}
export interface MathInlineOption {
HTMLAttributes: Record<string, any>;
view: any;
}
export const inputRegex = /(?:^|\s)((?:\$\$)((?:[^$]+))(?:\$\$))$/;
export const MathInline = Node.create<MathInlineOption>({
name: "mathInline",
group: "inline",
inline: true,
atom: true,
addOptions() {
return {
HTMLAttributes: {},
view: null,
};
},
addAttributes() {
return {
katex: {
default: "",
parseHTML: (element) => element.innerHTML.split("$")[1],
},
};
},
parseHTML() {
return [
{
tag: "span",
getAttrs: (node: HTMLElement) => {
return node.hasAttribute("data-katex") ? {} : false;
},
},
];
},
renderHTML({ HTMLAttributes }) {
return [
"div",
{},
["span", { "data-katex": true }, `$${HTMLAttributes.katex}$`],
];
},
renderText({ node }) {
return node.attrs.katex;
},
addNodeView() {
return ReactNodeViewRenderer(this.options.view);
},
addCommands() {
return {
setMathInline:
(attributes?: Record<string, any>) =>
({ commands }) => {
return commands.insertContent({
type: this.name,
attrs: attributes,
});
},
};
},
addInputRules() {
return [
nodeInputRule({
find: inputRegex,
type: this.type,
getAttributes: (match) => ({
katex: match[1].replaceAll("$", ""),
}),
}),
];
},
});

51
packages/editor-ext/src/lib/media-utils.ts Normal file
View File

@ -0,0 +1,51 @@
import type { EditorView } from "@tiptap/pm/view";
export type UploadFn = (
file: File,
view: EditorView,
pos: number,
pageId: string,
) => void;
export const handleMediaPaste = (
view: EditorView,
event: ClipboardEvent,
uploadFn: UploadFn,
pageId: string,
) => {
if (event.clipboardData?.files.length) {
event.preventDefault();
const [file] = Array.from(event.clipboardData.files);
const pos = view.state.selection.from;
if (file) uploadFn(file, view, pos, pageId);
return true;
}
return false;
};
export const handleMediaDrop = (
view: EditorView,
event: DragEvent,
moved: boolean,
uploadFn: UploadFn,
pageId: string,
) => {
if (!moved && event.dataTransfer?.files.length) {
event.preventDefault();
const [file] = Array.from(event.dataTransfer.files);
const coordinates = view.posAtCoords({
left: event.clientX,
top: event.clientY,
});
// here we deduct 1 from the pos or else the image will create an extra node
if (file) uploadFn(file, view, coordinates?.pos ?? 0 - 1, pageId);
return true;
}
return false;
};
export interface MediaUploadOptions {
validateFn?: (file: File) => void;
onUpload: (file: File, pageId: string) => Promise<any>;
}

6
packages/editor-ext/src/lib/table/cell.ts Normal file
View File

@ -0,0 +1,6 @@
import { TableCell as TiptapTableCell } from "@tiptap/extension-table-cell";
export const TableCell = TiptapTableCell.extend({
name: "tableCell",
content: "paragraph+",
});

3
packages/editor-ext/src/lib/table/header.ts Normal file
View File

@ -0,0 +1,3 @@
import TiptapTableHeader from "@tiptap/extension-table-header";
export const TableHeader = TiptapTableHeader.configure();

4
packages/editor-ext/src/lib/table/index.ts Normal file
View File

@ -0,0 +1,4 @@
export * from "./table-extension";
export * from "./header";
export * from "./row";
export * from "./cell";

6
packages/editor-ext/src/lib/table/row.ts Normal file
View File

@ -0,0 +1,6 @@
import TiptapTableRow from "@tiptap/extension-table-row";
export const TableRow = TiptapTableRow.extend({
allowGapCursor: false,
content: "(tableCell | tableHeader)*",
});

7
packages/editor-ext/src/lib/table/table-extension.ts Normal file
View File

@ -0,0 +1,7 @@
import TiptapTable from "@tiptap/extension-table";
export const Table = TiptapTable.configure({
resizable: true,
lastColumnResizable: false,
allowTableNodeSelection: true,
});

373
packages/editor-ext/src/lib/utils.ts Normal file
View File

@ -0,0 +1,373 @@
// @ts-nocheck
import { Editor, findParentNode } from "@tiptap/core";
import { Selection, Transaction } from "@tiptap/pm/state";
import { CellSelection, TableMap } from "@tiptap/pm/tables";
import { Node, ResolvedPos } from "@tiptap/pm/model";
import { Table } from "./table/table-extension";
export const isRectSelected = (rect: any) => (selection: CellSelection) => {
const map = TableMap.get(selection.$anchorCell.node(-1));
const start = selection.$anchorCell.start(-1);
const cells = map.cellsInRect(rect);
const selectedCells = map.cellsInRect(
map.rectBetween(
selection.$anchorCell.pos - start,
selection.$headCell.pos - start,
),
);
for (let i = 0, count = cells.length; i < count; i += 1) {
if (selectedCells.indexOf(cells[i]) === -1) {
return false;
}
}
return true;
};
export const findTable = (selection: Selection) =>
findParentNode(
(node) => node.type.spec.tableRole && node.type.spec.tableRole === "table",
)(selection);
export const isCellSelection = (selection: any) =>
selection instanceof CellSelection;
export const isColumnSelected = (columnIndex: number) => (selection: any) => {
if (isCellSelection(selection)) {
const map = TableMap.get(selection.$anchorCell.node(-1));
return isRectSelected({
left: columnIndex,
right: columnIndex + 1,
top: 0,
bottom: map.height,
})(selection);
}
return false;
};
export const isRowSelected = (rowIndex: number) => (selection: any) => {
if (isCellSelection(selection)) {
const map = TableMap.get(selection.$anchorCell.node(-1));
return isRectSelected({
left: 0,
right: map.width,
top: rowIndex,
bottom: rowIndex + 1,
})(selection);
}
return false;
};
export const isTableSelected = (selection: any) => {
if (isCellSelection(selection)) {
const map = TableMap.get(selection.$anchorCell.node(-1));
return isRectSelected({
left: 0,
right: map.width,
top: 0,
bottom: map.height,
})(selection);
}
return false;
};
export const getCellsInColumn =
(columnIndex: number | number[]) => (selection: Selection) => {
const table = findTable(selection);
if (table) {
const map = TableMap.get(table.node);
const indexes = Array.isArray(columnIndex)
? columnIndex
: Array.from([columnIndex]);
return indexes.reduce(
(acc, index) => {
if (index >= 0 && index <= map.width - 1) {
const cells = map.cellsInRect({
left: index,
right: index + 1,
top: 0,
bottom: map.height,
});
return acc.concat(
cells.map((nodePos) => {
const node = table.node.nodeAt(nodePos);
const pos = nodePos + table.start;
return { pos, start: pos + 1, node };
}),
);
}
return acc;
},
[] as { pos: number; start: number; node: Node | null | undefined }[],
);
}
return null;
};
export const getCellsInRow =
(rowIndex: number | number[]) => (selection: Selection) => {
const table = findTable(selection);
if (table) {
const map = TableMap.get(table.node);
const indexes = Array.isArray(rowIndex)
? rowIndex
: Array.from([rowIndex]);
return indexes.reduce(
(acc, index) => {
if (index >= 0 && index <= map.height - 1) {
const cells = map.cellsInRect({
left: 0,
right: map.width,
top: index,
bottom: index + 1,
});
return acc.concat(
cells.map((nodePos) => {
const node = table.node.nodeAt(nodePos);
const pos = nodePos + table.start;
return { pos, start: pos + 1, node };
}),
);
}
return acc;
},
[] as { pos: number; start: number; node: Node | null | undefined }[],
);
}
return null;
};
export const getCellsInTable = (selection: Selection) => {
const table = findTable(selection);
if (table) {
const map = TableMap.get(table.node);
const cells = map.cellsInRect({
left: 0,
right: map.width,
top: 0,
bottom: map.height,
});
return cells.map((nodePos) => {
const node = table.node.nodeAt(nodePos);
const pos = nodePos + table.start;
return { pos, start: pos + 1, node };
});
}
return null;
};
export const findParentNodeClosestToPos = (
$pos: ResolvedPos,
predicate: (node: Node) => boolean,
) => {
for (let i = $pos.depth; i > 0; i -= 1) {
const node = $pos.node(i);
if (predicate(node)) {
return {
pos: i > 0 ? $pos.before(i) : 0,
start: $pos.start(i),
depth: i,
node,
};
}
}
return null;
};
export const findCellClosestToPos = ($pos: ResolvedPos) => {
const predicate = (node: Node) =>
node.type.spec.tableRole && /cell/i.test(node.type.spec.tableRole);
return findParentNodeClosestToPos($pos, predicate);
};
const select =
(type: "row" | "column") => (index: number) => (tr: Transaction) => {
const table = findTable(tr.selection);
const isRowSelection = type === "row";
if (table) {
const map = TableMap.get(table.node);
// Check if the index is valid
if (index >= 0 && index < (isRowSelection ? map.height : map.width)) {
const left = isRowSelection ? 0 : index;
const top = isRowSelection ? index : 0;
const right = isRowSelection ? map.width : index + 1;
const bottom = isRowSelection ? index + 1 : map.height;
const cellsInFirstRow = map.cellsInRect({
left,
top,
right: isRowSelection ? right : left + 1,
bottom: isRowSelection ? top + 1 : bottom,
});
const cellsInLastRow =
bottom - top === 1
? cellsInFirstRow
: map.cellsInRect({
left: isRowSelection ? left : right - 1,
top: isRowSelection ? bottom - 1 : top,
right,
bottom,
});
const head = table.start + cellsInFirstRow[0];
const anchor = table.start + cellsInLastRow[cellsInLastRow.length - 1];
const $head = tr.doc.resolve(head);
const $anchor = tr.doc.resolve(anchor);
// @ts-ignore
return tr.setSelection(new CellSelection($anchor, $head));
}
}
return tr;
};
export const selectColumn = select("column");
export const selectRow = select("row");
export const selectTable = (tr: Transaction) => {
const table = findTable(tr.selection);
if (table) {
const { map } = TableMap.get(table.node);
if (map && map.length) {
const head = table.start + map[0];
const anchor = table.start + map[map.length - 1];
const $head = tr.doc.resolve(head);
const $anchor = tr.doc.resolve(anchor);
// @ts-ignore
return tr.setSelection(new CellSelection($anchor, $head));
}
}
return tr;
};
export const isColumnGripSelected = ({
editor,
view,
state,
from,
}: {
editor: Editor;
view: EditorView;
state: EditorState;
from: number;
}) => {
const domAtPos = view.domAtPos(from).node as HTMLElement;
const nodeDOM = view.nodeDOM(from) as HTMLElement;
const node = nodeDOM || domAtPos;
if (
!editor.isActive(Table.name) ||
!node ||
isTableSelected(state.selection)
) {
return false;
}
let container = node;
while (container && !["TD", "TH"].includes(container.tagName)) {
container = container.parentElement!;
}
const gripColumn =
container &&
container.querySelector &&
container.querySelector("a.grip-column.selected");
return !!gripColumn;
};
export const isRowGripSelected = ({
editor,
view,
state,
from,
}: {
editor: Editor;
view: EditorView;
state: EditorState;
from: number;
}) => {
const domAtPos = view.domAtPos(from).node as HTMLElement;
const nodeDOM = view.nodeDOM(from) as HTMLElement;
const node = nodeDOM || domAtPos;
if (
!editor.isActive(Table.name) ||
!node ||
isTableSelected(state.selection)
) {
return false;
}
let container = node;
while (container && !["TD", "TH"].includes(container.tagName)) {
container = container.parentElement!;
}
const gripRow =
container &&
container.querySelector &&
container.querySelector("a.grip-row.selected");
return !!gripRow;
};
export function parseAttributes(value: string) {
const regex = /([^=\s]+)="?([^"]+)"?/g;
const attrs: Record<string, string> = {};
let match: RegExpExecArray | null;
// eslint-disable-next-line no-cond-assign
while ((match = regex.exec(value))) {
attrs[match[1]] = match[2];
}
return attrs;
}
export function setAttributes(
editor: Editor,
getPos: (() => number) | boolean,
attrs: Record<string, any>,
) {
if (editor.isEditable && typeof getPos === "function") {
editor.view.dispatch(
editor.view.state.tr.setNodeMarkup(getPos(), undefined, attrs),
);
}
}
export function icon(name: string) {
return `<span class="ProseMirror-icon ProseMirror-icon-${name}"></span>`;
}

2
packages/editor-ext/src/lib/video/index.ts Normal file
View File

@ -0,0 +1,2 @@
export { TiptapVideo } from "./video";
export * from "./video-upload";

125
packages/editor-ext/src/lib/video/video-upload.ts Normal file
View File

@ -0,0 +1,125 @@
import { type EditorState, Plugin, PluginKey } from "@tiptap/pm/state";
import { Decoration, DecorationSet } from "@tiptap/pm/view";
import { IAttachment } from "client/src/lib/types";
import { MediaUploadOptions, UploadFn } from "../media-utils";
const uploadKey = new PluginKey("video-upload");
export const VideoUploadPlugin = ({
placeHolderClass,
}: {
placeHolderClass: string;
}) =>
new Plugin({
key: uploadKey,
state: {
init() {
return DecorationSet.empty;
},
apply(tr, set) {
set = set.map(tr.mapping, tr.doc);
// See if the transaction adds or removes any placeholders
//@-ts-expect-error - not yet sure what the type I need here
const action = tr.getMeta(this);
if (action?.add) {
const { id, pos, src } = action.add;
const placeholder = document.createElement("div");
placeholder.setAttribute("class", "video-placeholder");
const video = document.createElement("video");
video.setAttribute("class", placeHolderClass);
video.src = src;
placeholder.appendChild(video);
const deco = Decoration.widget(pos + 1, placeholder, {
id,
});
set = set.add(tr.doc, [deco]);
} else if (action?.remove) {
set = set.remove(
set.find(
undefined,
undefined,
(spec) => spec.id == action.remove.id,
),
);
}
return set;
},
},
props: {
decorations(state) {
return this.getState(state);
},
},
});
function findPlaceholder(state: EditorState, id: {}) {
const decos = uploadKey.getState(state) as DecorationSet;
const found = decos.find(undefined, undefined, (spec) => spec.id == id);
return found.length ? found[0]?.from : null;
}
export const handleVideoUpload =
({ validateFn, onUpload }: MediaUploadOptions): UploadFn =>
async (file, view, pos, pageId) => {
// check if the file is an image
const validated = validateFn?.(file);
// @ts-ignore
if (!validated) return;
// A fresh object to act as the ID for this upload
const id = {};
// Replace the selection with a placeholder
const tr = view.state.tr;
if (!tr.selection.empty) tr.deleteSelection();
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
tr.setMeta(uploadKey, {
add: {
id,
pos,
src: reader.result,
},
});
view.dispatch(tr);
};
await onUpload(file, pageId).then(
(attachment: IAttachment) => {
const { schema } = view.state;
const pos = findPlaceholder(view.state, id);
// If the content around the placeholder has been deleted, drop
// the image
if (pos == null) return;
// Otherwise, insert it at the placeholder's position, and remove
// the placeholder
if (!attachment) return;
const node = schema.nodes.video?.create({
src: `/files/${attachment.id}/${attachment.fileName}`,
attachmentId: attachment.id,
title: attachment.fileName,
size: attachment.fileSize,
});
if (!node) return;
const transaction = view.state.tr
.replaceWith(pos, pos, node)
.setMeta(uploadKey, { remove: { id } });
view.dispatch(transaction);
},
() => {
// Deletes the image placeholder on error
const transaction = view.state.tr
.delete(pos, pos)
.setMeta(uploadKey, { remove: { id } });
view.dispatch(transaction);
},
);
};

146
packages/editor-ext/src/lib/video/video.ts Normal file
View File

@ -0,0 +1,146 @@
import { ReactNodeViewRenderer } from "@tiptap/react";
import { VideoUploadPlugin } from "./video-upload";
import { mergeAttributes, Range, Node, nodeInputRule } from "@tiptap/core";
export interface VideoOptions {
view: any;
HTMLAttributes: Record<string, any>;
}
export interface VideoAttributes {
src?: string;
title?: string;
align?: string;
attachmentId?: string;
size?: number;
width?: number;
}
declare module "@tiptap/core" {
interface Commands<ReturnType> {
videoBlock: {
setVideo: (attributes: VideoAttributes) => ReturnType;
setVideoAt: (
attributes: VideoAttributes & { pos: number | Range },
) => ReturnType;
setVideoAlign: (align: "left" | "center" | "right") => ReturnType;
setVideoWidth: (width: number) => ReturnType;
};
}
}
const VIDEO_INPUT_REGEX = /!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\)/;
export const TiptapVideo = Node.create<VideoOptions>({
name: "video",
group: "block",
isolating: true,
atom: true,
defining: true,
draggable: true,
addOptions() {
return {
view: null,
HTMLAttributes: {},
};
},
addAttributes() {
return {
src: {
default: "",
parseHTML: (element) => element.getAttribute("src"),
renderHTML: (attributes) => ({
src: attributes.src,
}),
},
attachmentId: {
default: undefined,
parseHTML: (element) => element.getAttribute("data-attachment-id"),
renderHTML: (attributes: VideoAttributes) => ({
"data-attachment-id": attributes.align,
}),
},
width: {
default: "100%",
parseHTML: (element) => element.getAttribute("data-width"),
renderHTML: (attributes: VideoAttributes) => ({
"data-width": attributes.width,
}),
},
size: {
default: null,
parseHTML: (element) => element.getAttribute("data-size"),
renderHTML: (attributes: VideoAttributes) => ({
"data-size": attributes.size,
}),
},
align: {
default: "center",
parseHTML: (element) => element.getAttribute("data-align"),
renderHTML: (attributes: VideoAttributes) => ({
"data-align": attributes.align,
}),
},
};
},
renderHTML({ HTMLAttributes }) {
return [
"video",
{ controls: "true", ...HTMLAttributes },
["source", HTMLAttributes],
];
},
addCommands() {
return {
setVideo:
(attrs: VideoAttributes) =>
({ commands }) => {
return commands.insertContent({
type: "video",
attrs: attrs,
});
},
setVideoAlign:
(align) =>
({ commands }) =>
commands.updateAttributes("video", { align }),
setVideoWidth:
(width) =>
({ commands }) =>
commands.updateAttributes("video", {
width: `${Math.max(0, Math.min(100, width))}%`,
}),
};
},
addNodeView() {
return ReactNodeViewRenderer(this.options.view);
},
addInputRules() {
return [
nodeInputRule({
find: VIDEO_INPUT_REGEX,
type: this.type,
getAttributes: (match) => {
const [, , src] = match;
return { src };
},
}),
];
},
addProseMirrorPlugins() {
return [
VideoUploadPlugin({
placeHolderClass: "video-upload",
}),
];
},
});

2
packages/editor-ext/tsconfig.json
View File

@ -7,7 +7,7 @@
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"target": "ES2021",
"target": "ES2022",
"sourceMap": true,
"outDir": "./dist",
"baseUrl": "./",

817
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff