sinvo/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2026-08-28 01:07:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

merge main

Browse Source
This commit is contained in:
Philipinho
2026-05-22 13:56:51 +01:00
parent 8a0217527f f010f6a83a
commit af9e777009
811 changed files with 68477 additions and 12951 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/auth/components/auth-layout.tsx
+26
View File
@@ -0,0 +1,26 @@
import React from "react";
import { Group, Text } from "@mantine/core";
import classes from "./auth.module.css";
type AuthLayoutProps = {
children: React.ReactNode;
};
export function AuthLayout({ children }: AuthLayoutProps) {
return (
<>
<Group justify="center" gap={8} className={classes.logo}>
<img
src="/icons/favicon-32x32.png"
alt="Docmost"
width={22}
height={22}
/>
<Text size="28px" fw={700} style={{ userSelect: "none" }}>
Docmost
</Text>
</Group>
<main>{children}</main>
</>
);
}
apps/client/src/features/auth/components/auth.module.css
+10 -2
View File
@@ -1,12 +1,20 @@
.logo {
margin-top: 80px;
@media (max-width: $mantine-breakpoint-sm) {
margin-top: 30px;
}
}
.container {
box-shadow: rgba(0, 0, 0, 0.07) 0px 2px 45px 4px;
border-radius: 4px;
background: light-dark(var(--mantine-color-body), rgba(0, 0, 0, 0.1));
margin-top: 150px;
margin-top: 40px;
margin-bottom: 20px;
@media (max-width: $mantine-breakpoint-sm) {
margin-top: 50px;
margin-top: 20px;
margin-bottom: 20px;
}
}
apps/client/src/features/auth/components/forgot-password-form.tsx
+12 -9
View File
@@ -1,19 +1,20 @@
import { useState } from "react";
import * as z from "zod";
import { useForm, zodResolver } from "@mantine/form";
import { z } from "zod/v4";
import { useForm } from "@mantine/form";
import { zod4Resolver } from "mantine-form-zod-resolver";
import useAuth from "@/features/auth/hooks/use-auth";
import { IForgotPassword } from "@/features/auth/types/auth.types";
import { Box, Button, Container, Text, TextInput, Title } from "@mantine/core";
import classes from "./auth.module.css";
import { useRedirectIfAuthenticated } from "@/features/auth/hooks/use-redirect-if-authenticated.ts";
import { useTranslation } from "react-i18next";
import { AuthLayout } from "./auth-layout.tsx";
const formSchema = z.object({
email: z
.string()
.min(1, { message: "Email is required" })
.email({ message: "Invalid email address" }),
.email()
.min(1, { message: "Email is required" }),
});
type FormValues = z.infer<typeof formSchema>;
export function ForgotPasswordForm() {
const { t } = useTranslation();
@@ -21,20 +22,21 @@ export function ForgotPasswordForm() {
const [isTokenSent, setIsTokenSent] = useState<boolean>(false);
useRedirectIfAuthenticated();
const form = useForm<IForgotPassword>({
validate: zodResolver(formSchema),
const form = useForm<FormValues>({
validate: zod4Resolver(formSchema),
initialValues: {
email: "",
},
});
async function onSubmit(data: IForgotPassword) {
async function onSubmit(data: FormValues) {
if (await forgotPassword(data)) {
setIsTokenSent(true);
}
}
return (
<AuthLayout>
<Container size={420} className={classes.container}>
<Box p="xl" className={classes.containerBox}>
<Title order={2} ta="center" fw={500} mb="md">
@@ -69,5 +71,6 @@ export function ForgotPasswordForm() {
</form>
</Box>
</Container>
</AuthLayout>
);
}
apps/client/src/features/auth/components/invite-sign-up-form.tsx
+12 -5
View File
@@ -1,5 +1,5 @@
import * as React from "react";
import * as z from "zod";
import { z } from "zod/v4";
import { useForm } from "@mantine/form";
import {
@@ -11,15 +11,15 @@ import {
Box,
Stack,
} from "@mantine/core";
import { zodResolver } from "mantine-form-zod-resolver";
import { zod4Resolver } from "mantine-form-zod-resolver";
import { useParams, useSearchParams } from "react-router-dom";
import { IRegister } from "@/features/auth/types/auth.types";
import useAuth from "@/features/auth/hooks/use-auth";
import classes from "@/features/auth/components/auth.module.css";
import { useGetInvitationQuery } from "@/features/workspace/queries/workspace-query.ts";
import { useRedirectIfAuthenticated } from "@/features/auth/hooks/use-redirect-if-authenticated.ts";
import { useTranslation } from "react-i18next";
import SsoLogin from "@/ee/components/sso-login.tsx";
import { AuthLayout } from "./auth-layout.tsx";
const formSchema = z.object({
name: z.string().trim().min(1),
@@ -40,14 +40,14 @@ export function InviteSignUpForm() {
useRedirectIfAuthenticated();
const form = useForm<FormValues>({
validate: zodResolver(formSchema),
validate: zod4Resolver(formSchema),
initialValues: {
name: "",
password: "",
},
});
async function onSubmit(data: IRegister) {
async function onSubmit(data: FormValues) {
const invitationToken = searchParams.get("token");
await invitationSignup({
@@ -67,6 +67,7 @@ export function InviteSignUpForm() {
}
return (
<AuthLayout>
<Container size={420} className={classes.container}>
<Box p="xl" className={classes.containerBox}>
<Title order={2} ta="center" fw={500} mb="md">
@@ -102,6 +103,11 @@ export function InviteSignUpForm() {
placeholder={t("Your password")}
variant="filled"
mt="md"
visibilityToggleButtonProps={{
"aria-label": t("Toggle password visibility"),
"aria-hidden": false,
tabIndex: 0,
}}
{...form.getInputProps("password")}
/>
<Button type="submit" fullWidth mt="xl" loading={isLoading}>
@@ -112,5 +118,6 @@ export function InviteSignUpForm() {
)}
</Box>
</Container>
</AuthLayout>
);
}
apps/client/src/features/auth/components/login-form.tsx
+71 -51
View File
@@ -1,7 +1,7 @@
import * as z from "zod";
import { useForm, zodResolver } from "@mantine/form";
import { z } from "zod/v4";
import { useForm } from "@mantine/form";
import { zod4Resolver } from "mantine-form-zod-resolver";
import useAuth from "@/features/auth/hooks/use-auth";
import { ILogin } from "@/features/auth/types/auth.types";
import {
Container,
Title,
@@ -21,14 +21,15 @@ import SsoLogin from "@/ee/components/sso-login.tsx";
import { useWorkspacePublicDataQuery } from "@/features/workspace/queries/workspace-query.ts";
import { Error404 } from "@/components/ui/error-404.tsx";
import React from "react";
import { AuthLayout } from "./auth-layout.tsx";
const formSchema = z.object({
email: z
.string()
.min(1, { message: "email is required" })
.email({ message: "Invalid email address" }),
.email()
.min(1, { message: "email is required" }),
password: z.string().min(1, { message: "Password is required" }),
});
type FormValues = z.infer<typeof formSchema>;
export function LoginForm() {
const { t } = useTranslation();
@@ -41,18 +42,25 @@ export function LoginForm() {
error,
} = useWorkspacePublicDataQuery();
const form = useForm<ILogin>({
validate: zodResolver(formSchema),
const form = useForm<FormValues>({
validate: zod4Resolver(formSchema),
initialValues: {
email: "",
password: "",
},
});
async function onSubmit(data: ILogin) {
async function onSubmit(data: FormValues) {
await signIn(data);
}
function handleValidationFailure(errors: Record<string, unknown>) {
const firstInvalidId = Object.keys(errors)[0];
if (firstInvalidId) {
document.getElementById(firstInvalidId)?.focus();
}
}
if (isDataLoading) {
return null;
}
@@ -62,52 +70,64 @@ export function LoginForm() {
}
return (
<Container size={420} className={classes.container}>
<Box p="xl" className={classes.containerBox}>
<Title order={2} ta="center" fw={500} mb="md">
{t("Login")}
</Title>
<AuthLayout>
<Container size={420} className={classes.container}>
<Box p="xl" className={classes.containerBox}>
<Title order={1} size="h2" ta="center" fw={500} mb="md">
{t("Login")}
</Title>
<SsoLogin />
<SsoLogin />
{!data?.enforceSso && (
<>
<form onSubmit={form.onSubmit(onSubmit)}>
<TextInput
id="email"
type="email"
label={t("Email")}
placeholder="email@example.com"
variant="filled"
{...form.getInputProps("email")}
/>
{!data?.enforceSso && (
<>
<form onSubmit={form.onSubmit(onSubmit, handleValidationFailure)}>
<TextInput
id="email"
type="email"
label={t("Email")}
placeholder="email@example.com"
variant="filled"
autoComplete="email"
errorProps={{ role: "alert" }}
{...form.getInputProps("email")}
/>
<PasswordInput
label={t("Password")}
placeholder={t("Your password")}
variant="filled"
mt="md"
{...form.getInputProps("password")}
/>
<PasswordInput
id="password"
label={t("Password")}
placeholder={t("Your password")}
variant="filled"
mt="md"
autoComplete="current-password"
errorProps={{ role: "alert" }}
visibilityToggleButtonProps={{
"aria-label": t("Toggle password visibility"),
"aria-hidden": false,
tabIndex: 0,
}}
{...form.getInputProps("password")}
/>
<Group justify="flex-end" mt="sm">
<Anchor
to={APP_ROUTE.AUTH.FORGOT_PASSWORD}
component={Link}
underline="never"
size="sm"
>
{t("Forgot your password?")}
</Anchor>
</Group>
<Group justify="flex-end" mt="sm">
<Anchor
to={APP_ROUTE.AUTH.FORGOT_PASSWORD}
component={Link}
underline="never"
size="sm"
>
{t("Forgot your password?")}
</Anchor>
</Group>
<Button type="submit" fullWidth mt="md" loading={isLoading}>
{t("Sign In")}
</Button>
</form>
</>
)}
</Box>
</Container>
<Button type="submit" fullWidth mt="md" loading={isLoading}>
{t("Sign In")}
</Button>
</form>
</>
)}
</Box>
</Container>
</AuthLayout>
);
}
apps/client/src/features/auth/components/password-reset-form.tsx
+15 -6
View File
@@ -1,17 +1,19 @@
import * as z from "zod";
import { useForm, zodResolver } from "@mantine/form";
import { z } from "zod/v4";
import { useForm } from "@mantine/form";
import { zod4Resolver } from "mantine-form-zod-resolver";
import useAuth from "@/features/auth/hooks/use-auth";
import { IPasswordReset } from "@/features/auth/types/auth.types";
import { Box, Button, Container, PasswordInput, Title } from "@mantine/core";
import classes from "./auth.module.css";
import { useRedirectIfAuthenticated } from "@/features/auth/hooks/use-redirect-if-authenticated.ts";
import { useTranslation } from "react-i18next";
import { AuthLayout } from "./auth-layout.tsx";
const formSchema = z.object({
newPassword: z
.string()
.min(8, { message: "Password must contain at least 8 characters" }),
});
type FormValues = z.infer<typeof formSchema>;
interface PasswordResetFormProps {
resetToken?: string;
@@ -22,14 +24,14 @@ export function PasswordResetForm({ resetToken }: PasswordResetFormProps) {
const { passwordReset, isLoading } = useAuth();
useRedirectIfAuthenticated();
const form = useForm<IPasswordReset>({
validate: zodResolver(formSchema),
const form = useForm<FormValues>({
validate: zod4Resolver(formSchema),
initialValues: {
newPassword: "",
},
});
async function onSubmit(data: IPasswordReset) {
async function onSubmit(data: FormValues) {
await passwordReset({
token: resetToken,
newPassword: data.newPassword,
@@ -37,6 +39,7 @@ export function PasswordResetForm({ resetToken }: PasswordResetFormProps) {
}
return (
<AuthLayout>
<Container size={420} className={classes.container}>
<Box p="xl" className={classes.containerBox}>
<Title order={2} ta="center" fw={500} mb="md">
@@ -49,6 +52,11 @@ export function PasswordResetForm({ resetToken }: PasswordResetFormProps) {
placeholder={t("Your new password")}
variant="filled"
mt="md"
visibilityToggleButtonProps={{
"aria-label": t("Toggle password visibility"),
"aria-hidden": false,
tabIndex: 0,
}}
{...form.getInputProps("newPassword")}
/>
@@ -58,5 +66,6 @@ export function PasswordResetForm({ resetToken }: PasswordResetFormProps) {
</form>
</Box>
</Container>
</AuthLayout>
);
}
apps/client/src/features/auth/components/setup-workspace-form.tsx
+19 -13
View File
@@ -1,6 +1,7 @@
import * as React from "react";
import * as z from "zod";
import { useForm, zodResolver } from "@mantine/form";
import { z } from "zod/v4";
import { useForm } from "@mantine/form";
import { zod4Resolver } from "mantine-form-zod-resolver";
import {
Container,
Title,
@@ -11,7 +12,6 @@ import {
Anchor,
Text,
} from "@mantine/core";
import { ISetupWorkspace } from "@/features/auth/types/auth.types";
import useAuth from "@/features/auth/hooks/use-auth";
import classes from "@/features/auth/components/auth.module.css";
import { useTranslation } from "react-i18next";
@@ -19,24 +19,25 @@ import SsoCloudSignup from "@/ee/components/sso-cloud-signup.tsx";
import { isCloud } from "@/lib/config.ts";
import { Link } from "react-router-dom";
import APP_ROUTE from "@/lib/app-route.ts";
import { AuthLayout } from "./auth-layout.tsx";
const formSchema = z.object({
workspaceName: z.string().trim().max(50).optional(),
name: z.string().min(1).max(50),
name: z.string().min(1, { message: "Name is required" }).max(50),
email: z
.string()
.min(1, { message: "email is required" })
.email({ message: "Invalid email address" }),
password: z.string().min(8),
.email({ message: "Invalid email address" })
.min(1, { message: "Email is required" }),
password: z.string().min(8, { message: "Password must be at least 8 characters" }),
});
type FormValues = z.infer<typeof formSchema>;
export function SetupWorkspaceForm() {
const { t } = useTranslation();
const { setupWorkspace, isLoading } = useAuth();
// useRedirectIfAuthenticated();
const form = useForm<ISetupWorkspace>({
validate: zodResolver(formSchema),
const form = useForm<FormValues>({
validate: zod4Resolver(formSchema),
initialValues: {
workspaceName: "",
name: "",
@@ -45,12 +46,12 @@ export function SetupWorkspaceForm() {
},
});
async function onSubmit(data: ISetupWorkspace) {
async function onSubmit(data: FormValues) {
await setupWorkspace(data);
}
return (
<div>
<AuthLayout>
<Container size={420} className={classes.container}>
<Box p="xl" className={classes.containerBox}>
<Title order={2} ta="center" fw={500} mb="md">
@@ -97,6 +98,11 @@ export function SetupWorkspaceForm() {
placeholder={t("Enter a strong password")}
variant="filled"
mt="md"
visibilityToggleButtonProps={{
"aria-label": t("Toggle password visibility"),
"aria-hidden": false,
tabIndex: 0,
}}
{...form.getInputProps("password")}
/>
<Button type="submit" fullWidth mt="xl" loading={isLoading}>
@@ -117,6 +123,6 @@ export function SetupWorkspaceForm() {
</Anchor>
</Text>
)}
</div>
</AuthLayout>
);
}
apps/client/src/features/auth/hooks/use-auth.ts
+24 -4
View File
@@ -27,7 +27,7 @@ import APP_ROUTE, { getPostLoginRedirect } from "@/lib/app-route.ts";
import { RESET } from "jotai/utils";
import { useTranslation } from "react-i18next";
import { isCloud } from "@/lib/config.ts";
import { exchangeTokenRedirectUrl } from "@/ee/utils.ts";
import { exchangeTokenRedirectUrl, getHostnameUrl } from "@/ee/utils.ts";
export default function useAuth() {
const { t } = useTranslation();
@@ -52,9 +52,18 @@ export default function useAuth() {
}
} catch (err) {
setIsLoading(false);
console.log(err);
const message = err.response?.data?.message;
if (isCloud() && message?.includes("verify your email")) {
const sig = err.response?.data?.emailSignature;
navigate(
`${APP_ROUTE.AUTH.VERIFY_EMAIL}?email=${encodeURIComponent(data.email)}${sig ? `&sig=${sig}` : ""}`,
);
return;
}
notifications.show({
message: err.response?.data.message,
message,
color: "red",
});
}
@@ -92,6 +101,17 @@ export default function useAuth() {
try {
if (isCloud()) {
const res = await createWorkspace(data);
if (res?.requiresEmailVerification) {
const hostname = res?.workspace?.hostname;
if (hostname) {
window.location.href =
getHostnameUrl(hostname) +
`/verify-email?email=${encodeURIComponent(data.email)}&sig=${res.emailSignature}`;
}
return;
}
const hostname = res?.workspace?.hostname;
const exchangeToken = res?.exchangeToken;
if (hostname && exchangeToken) {
@@ -146,7 +166,7 @@ export default function useAuth() {
const handleLogout = async () => {
setCurrentUser(RESET);
await logout();
window.location.replace(APP_ROUTE.AUTH.LOGIN);
window.location.replace(`${APP_ROUTE.AUTH.LOGIN}?logout=1`);
};
const handleForgotPassword = async (data: IForgotPassword) => {
apps/client/src/features/auth/services/auth-service.ts
+2 -1
View File
@@ -50,4 +50,5 @@ export async function verifyUserToken(data: IVerifyUserToken): Promise<any> {
export async function getCollabToken(): Promise<ICollabToken> {
const req = await api.post<ICollabToken>("/auth/collab-token");
return req.data;
}
}
apps/client/src/features/comment/atoms/comment-atom.ts
+12
View File
@@ -3,3 +3,15 @@ import { atom } from 'jotai';
export const showCommentPopupAtom = atom<boolean>(false);
export const activeCommentIdAtom = atom<string>('');
export const draftCommentIdAtom = atom<string>('');
// Read-only comment state
export const showReadOnlyCommentPopupAtom = atom<boolean>(false);
export type YjsSelection = {
anchor: any;
head: any;
};
export type ReadOnlyCommentData = {
yjsSelection: YjsSelection;
selectedText: string;
};
export const readOnlyCommentDataAtom = atom<ReadOnlyCommentData | null>(null);
apps/client/src/features/comment/components/comment-actions.tsx
+6 -1
View File
@@ -24,7 +24,12 @@ function CommentActions({
</Button>
)}
<Button size="compact-sm" loading={isLoading} onClick={onSave}>
<Button
size="compact-sm"
loading={isLoading}
onClick={onSave}
onMouseDown={(e) => e.preventDefault()}
>
{t("Save")}
</Button>
</Group>
apps/client/src/features/comment/components/comment-dialog.tsx
+50 -12
View File
@@ -6,6 +6,8 @@ import {
activeCommentIdAtom,
draftCommentIdAtom,
showCommentPopupAtom,
showReadOnlyCommentPopupAtom,
readOnlyCommentDataAtom,
} from "@/features/comment/atoms/comment-atom";
import CommentEditor from "@/features/comment/components/comment-editor";
import CommentActions from "@/features/comment/components/comment-actions";
@@ -15,17 +17,19 @@ import { asideStateAtom } from "@/components/layouts/global/hooks/atoms/sidebar-
import { useEditor } from "@tiptap/react";
import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
import { useTranslation } from "react-i18next";
import { useQueryEmit } from "@/features/websocket/use-query-emit";
interface CommentDialogProps {
editor: ReturnType<typeof useEditor>;
pageId: string;
readOnly?: boolean;
}
function CommentDialog({ editor, pageId }: CommentDialogProps) {
function CommentDialog({ editor, pageId, readOnly }: CommentDialogProps) {
const { t } = useTranslation();
const [comment, setComment] = useState("");
const [, setShowCommentPopup] = useAtom(showCommentPopupAtom);
const [, setShowReadOnlyCommentPopup] = useAtom(showReadOnlyCommentPopupAtom);
const [readOnlyCommentData, setReadOnlyCommentData] = useAtom(readOnlyCommentDataAtom);
const [, setActiveCommentId] = useAtom(activeCommentIdAtom);
const [draftCommentId, setDraftCommentId] = useAtom(draftCommentIdAtom);
const [currentUser] = useAtom(currentUserAtom);
@@ -35,13 +39,17 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
handleDialogClose();
});
const createCommentMutation = useCreateCommentMutation();
const { isPending } = createCommentMutation;
const emit = useQueryEmit();
const isPending = createCommentMutation.isPending;
const handleDialogClose = () => {
setShowCommentPopup(false);
editor.chain().focus().unsetCommentDecoration().run();
if (readOnly) {
setShowReadOnlyCommentPopup(false);
// @ts-ignore
setReadOnlyCommentData(null);
} else {
setShowCommentPopup(false);
editor.chain().focus().unsetCommentDecoration().run();
}
};
const getSelectedText = () => {
@@ -50,12 +58,18 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
};
const handleAddComment = async () => {
if (readOnly) {
await handleAddReadOnlyComment();
return;
}
try {
const selectedText = getSelectedText();
const commentData = {
pageId: pageId,
content: JSON.stringify(comment),
selection: selectedText,
type: "inline",
};
const createdComment =
@@ -67,7 +81,6 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
.run();
setActiveCommentId(createdComment.id);
//unselect text to close bubble menu
editor.commands.setTextSelection({ from: editor.view.state.selection.from, to: editor.view.state.selection.from });
setAsideState({ tab: "comments", isAsideOpen: true });
@@ -81,16 +94,39 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
);
}, 400);
emit({
operation: "invalidateComment",
pageId: pageId,
});
} finally {
setShowCommentPopup(false);
setDraftCommentId("");
}
};
const handleAddReadOnlyComment = async () => {
if (!readOnlyCommentData) return;
try {
const createdComment = await createCommentMutation.mutateAsync({
pageId,
content: JSON.stringify(comment),
selection: readOnlyCommentData.selectedText,
type: "inline",
yjsSelection: readOnlyCommentData.yjsSelection,
});
setActiveCommentId(createdComment.id);
setAsideState({ tab: "comments", isAsideOpen: true });
setTimeout(() => {
const selector = `div[data-comment-id="${createdComment.id}"]`;
const commentElement = document.querySelector(selector);
commentElement?.scrollIntoView({ behavior: "smooth", block: "center" });
}, 400);
} finally {
setShowReadOnlyCommentPopup(false);
// @ts-ignore
setReadOnlyCommentData(null);
}
};
const handleCommentEditorChange = (newContent: any) => {
setComment(newContent);
};
@@ -103,10 +139,12 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
size="lg"
radius="md"
w={300}
zIndex={180}
position={{ bottom: 500, right: 50 }}
withCloseButton
withBorder
data-comment-dialog
aria-label={t("Add comment")}
>
<Stack gap={2}>
<Group>
apps/client/src/features/comment/components/comment-editor.tsx
+8 -1
View File
@@ -10,6 +10,7 @@ import { useTranslation } from "react-i18next";
import EmojiCommand from "@/features/editor/extensions/emoji-command";
import mentionRenderItems from "@/features/editor/components/mention/mention-suggestion";
import MentionView from "@/features/editor/components/mention/mention-view";
import { platformModifierKey } from "@/lib";
interface CommentEditorProps {
defaultContent?: any;
@@ -18,6 +19,7 @@ interface CommentEditorProps {
editable: boolean;
placeholder?: string;
autofocus?: boolean;
surface?: "default" | "muted";
}
const CommentEditor = forwardRef(
@@ -29,6 +31,7 @@ const CommentEditor = forwardRef(
editable,
placeholder,
autofocus,
surface,
}: CommentEditorProps,
ref,
) => {
@@ -65,6 +68,9 @@ const CommentEditor = forwardRef(
}),
],
editorProps: {
attributes: {
"aria-label": placeholder || t("Comment"),
},
handleDOMEvents: {
keydown: (_view, event) => {
if (
@@ -83,7 +89,7 @@ const CommentEditor = forwardRef(
}
}
if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
if (platformModifierKey(event) && event.code === "Enter") {
event.preventDefault();
if (onSave) onSave();
@@ -130,6 +136,7 @@ const CommentEditor = forwardRef(
ref={focusRef}
className={classes.commentEditor}
data-editable={editable || undefined}
data-surface={surface}
>
<EditorContent
editor={commentEditor}
apps/client/src/features/comment/components/comment-list-item.tsx
+17 -23
View File
@@ -2,12 +2,13 @@ import { Group, Text, Box, Badge } from "@mantine/core";
import React, { useEffect, useRef, useState } from "react";
import classes from "./comment.module.css";
import { useAtom, useAtomValue } from "jotai";
import { timeAgo } from "@/lib/time";
import { useTimeAgo } from "@/hooks/use-time-ago";
import CommentEditor from "@/features/comment/components/comment-editor";
import { pageEditorAtom } from "@/features/editor/atoms/editor-atoms";
import CommentActions from "@/features/comment/components/comment-actions";
import CommentMenu from "@/features/comment/components/comment-menu";
import { useIsCloudEE } from "@/hooks/use-is-cloud-ee";
import { useHasFeature } from "@/ee/hooks/use-feature";
import { Feature } from "@/ee/features";
import ResolveComment from "@/ee/comment/components/resolve-comment";
import { useHover } from "@mantine/hooks";
import {
@@ -18,7 +19,6 @@ import { useResolveCommentMutation } from "@/ee/comment/queries/comment-query";
import { IComment } from "@/features/comment/types/comment.types";
import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
import { currentUserAtom } from "@/features/user/atoms/current-user-atom.ts";
import { useQueryEmit } from "@/features/websocket/use-query-emit";
import { useTranslation } from "react-i18next";
interface CommentListItemProps {
@@ -45,8 +45,8 @@ function CommentListItem({
const deleteCommentMutation = useDeleteCommentMutation(comment.pageId);
const resolveCommentMutation = useResolveCommentMutation();
const [currentUser] = useAtom(currentUserAtom);
const emit = useQueryEmit();
const isCloudEE = useIsCloudEE();
const canResolve = useHasFeature(Feature.COMMENT_RESOLUTION);
const createdAtAgo = useTimeAgo(comment.createdAt);
useEffect(() => {
setContent(comment.content);
@@ -65,11 +65,6 @@ function CommentListItem({
editContentRef.current = null;
}
setIsEditing(false);
emit({
operation: "invalidateComment",
pageId: pageId,
});
} catch (error) {
console.error("Failed to update comment:", error);
} finally {
@@ -81,18 +76,13 @@ function CommentListItem({
try {
await deleteCommentMutation.mutateAsync(comment.id);
editor?.commands.unsetComment(comment.id);
emit({
operation: "invalidateComment",
pageId: pageId,
});
} catch (error) {
console.error("Failed to delete comment:", error);
}
}
async function handleResolveComment() {
if (!isCloudEE) return;
if (!canResolve) return;
try {
const isResolved = comment.resolvedAt != null;
@@ -106,11 +96,6 @@ function CommentListItem({
if (editor) {
editor.commands.setCommentResolved(comment.id, !isResolved);
}
emit({
operation: "invalidateComment",
pageId: pageId,
});
} catch (error) {
console.error("Failed to toggle resolved state:", error);
}
@@ -153,7 +138,7 @@ function CommentListItem({
</Text>
<div style={{ visibility: hovered ? "visible" : "hidden" }}>
{!comment.parentCommentId && canComment && isCloudEE && (
{!comment.parentCommentId && canComment && canResolve && (
<ResolveComment
editor={editor}
commentId={comment.id}
@@ -177,7 +162,7 @@ function CommentListItem({
<Group gap="xs">
<Text size="xs" fw={500} c="dimmed">
{timeAgo(comment.createdAt)}
{createdAtAgo}
</Text>
</Group>
</div>
@@ -188,6 +173,15 @@ function CommentListItem({
<Box
className={classes.textSelection}
onClick={() => handleCommentClick(comment)}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
handleCommentClick(comment);
}
}}
role="button"
tabIndex={0}
aria-label={t("Jump to comment selection")}
>
<Text size="sm">{comment?.selection}</Text>
</Box>
apps/client/src/features/comment/components/comment-list-with-tabs.tsx
+173 -95
View File
@@ -1,6 +1,17 @@
import React, { useState, useRef, useCallback, memo, useMemo } from "react";
import { useParams } from "react-router-dom";
import { Divider, Paper, Tabs, Badge, Text, ScrollArea } from "@mantine/core";
import {
ActionIcon,
Center,
Divider,
Group,
Paper,
Stack,
Tabs,
Badge,
Text,
ScrollArea,
} from "@mantine/core";
import CommentListItem from "@/features/comment/components/comment-list-item";
import {
useCommentsQuery,
@@ -14,14 +25,11 @@ import { usePageQuery } from "@/features/page/queries/page-query.ts";
import { IPagination } from "@/lib/types.ts";
import { extractPageSlugId } from "@/lib";
import { useTranslation } from "react-i18next";
import { useQueryEmit } from "@/features/websocket/use-query-emit";
import { useIsCloudEE } from "@/hooks/use-is-cloud-ee";
import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query.ts";
import { useSpaceAbility } from "@/features/space/permissions/use-space-ability.ts";
import {
SpaceCaslAction,
SpaceCaslSubject,
} from "@/features/space/permissions/permissions.type.ts";
import { IconArrowUp, IconMessageOff } from "@tabler/icons-react";
import { useAtom } from "jotai";
import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
function CommentListWithTabs() {
const { t } = useTranslation();
@@ -31,21 +39,14 @@ function CommentListWithTabs() {
data: comments,
isLoading: isCommentsLoading,
isError,
} = useCommentsQuery({ pageId: page?.id, limit: 100 });
} = useCommentsQuery({ pageId: page?.id });
const createCommentMutation = useCreateCommentMutation();
const [isLoading, setIsLoading] = useState(false);
const emit = useQueryEmit();
const isCloudEE = useIsCloudEE();
const { data: space } = useGetSpaceBySlugQuery(page?.space?.slug);
const spaceRules = space?.membership?.permissions;
const spaceAbility = useSpaceAbility(spaceRules);
const canComment: boolean = spaceAbility.can(
SpaceCaslAction.Manage,
SpaceCaslSubject.Page
);
const canComment =
(page?.permissions?.canEdit ?? false) ||
(space?.settings?.comments?.allowViewerComments === true);
// Separate active and resolved comments
const { activeComments, resolvedComments } = useMemo(() => {
@@ -54,19 +55,47 @@ function CommentListWithTabs() {
}
const parentComments = comments.items.filter(
(comment: IComment) => comment.parentCommentId === null
(comment: IComment) => comment.parentCommentId === null,
);
const active = parentComments.filter(
(comment: IComment) => !comment.resolvedAt
(comment: IComment) => !comment.resolvedAt,
);
const resolved = parentComments.filter(
(comment: IComment) => comment.resolvedAt
(comment: IComment) => comment.resolvedAt,
);
return { activeComments: active, resolvedComments: resolved };
}, [comments]);
const [isPageCommentLoading, setIsPageCommentLoading] = useState(false);
const handleAddPageComment = useCallback(
async (_commentId: string, content: string) => {
try {
setIsPageCommentLoading(true);
const createdComment = await createCommentMutation.mutateAsync({
pageId: page?.id,
content: JSON.stringify(content),
});
setTimeout(() => {
const selector = `div[data-comment-id="${createdComment.id}"]`;
const commentElement = document.querySelector(selector);
commentElement?.scrollIntoView({
behavior: "smooth",
block: "center",
});
}, 400);
} catch (error) {
console.error("Failed to post comment:", error);
} finally {
setIsPageCommentLoading(false);
}
},
[createCommentMutation, page?.id],
);
const handleAddReply = useCallback(
async (commentId: string, content: string) => {
try {
@@ -78,18 +107,13 @@ function CommentListWithTabs() {
};
await createCommentMutation.mutateAsync(commentData);
emit({
operation: "invalidateComment",
pageId: page?.id,
});
} catch (error) {
console.error("Failed to post comment:", error);
} finally {
setIsLoading(false);
}
},
[createCommentMutation, page?.id]
[createCommentMutation, page?.id],
);
const renderComments = useCallback(
@@ -131,7 +155,7 @@ function CommentListWithTabs() {
)}
</Paper>
),
[comments, handleAddReply, isLoading, space?.membership?.role]
[comments, handleAddReply, isLoading, space?.membership?.role, canComment],
);
if (isCommentsLoading) {
@@ -144,63 +168,32 @@ function CommentListWithTabs() {
const totalComments = activeComments.length + resolvedComments.length;
// If not cloud/enterprise, show simple list without tabs
if (!isCloudEE) {
if (totalComments === 0) {
return <>{t("No comments yet.")}</>;
}
return (
<ScrollArea style={{ height: "85vh" }} scrollbarSize={5} type="scroll">
<div style={{ paddingBottom: "200px" }}>
{comments?.items
.filter((comment: IComment) => comment.parentCommentId === null)
.map((comment) => (
<Paper
shadow="sm"
radius="md"
p="sm"
mb="sm"
withBorder
key={comment.id}
data-comment-id={comment.id}
>
<div>
<CommentListItem
comment={comment}
pageId={page?.id}
canComment={canComment}
userSpaceRole={space?.membership?.role}
/>
<MemoizedChildComments
comments={comments}
parentId={comment.id}
pageId={page?.id}
canComment={canComment}
userSpaceRole={space?.membership?.role}
/>
</div>
{canComment && (
<>
<Divider my={4} />
<CommentEditorWithActions
commentId={comment.id}
onSave={handleAddReply}
isLoading={isLoading}
/>
</>
)}
</Paper>
))}
</div>
</ScrollArea>
);
}
const pageCommentInput = canComment ? (
<PageCommentInput
onSave={handleAddPageComment}
isLoading={isPageCommentLoading}
/>
) : null;
return (
<div style={{ height: "85vh", display: "flex", flexDirection: "column", marginTop: '-15px' }}>
<Tabs defaultValue="open" variant="default" style={{ flex: "0 0 auto" }}>
<div
style={{
flex: 1,
minHeight: 0,
display: "flex",
flexDirection: "column",
}}
>
<Tabs
defaultValue="open"
variant="default"
style={{
flex: "1 1 auto",
display: "flex",
flexDirection: "column",
overflow: "hidden",
}}
>
<Tabs.List justify="center">
<Tabs.Tab
value="open"
@@ -225,16 +218,25 @@ function CommentListWithTabs() {
</Tabs.List>
<ScrollArea
style={{ flex: "1 1 auto", height: "calc(85vh - 60px)" }}
style={{ flex: "1 1 auto" }}
scrollbarSize={5}
type="scroll"
>
<div style={{ paddingBottom: "200px" }}>
<div style={{ paddingBottom: "8px" }}>
<Tabs.Panel value="open" pt="xs">
{activeComments.length === 0 ? (
<Text size="sm" c="dimmed" ta="center" py="md">
{t("No open comments.")}
</Text>
<Center py="xl">
<Stack align="center" gap="xs">
<IconMessageOff
size={32}
stroke={1.5}
color="var(--mantine-color-dimmed)"
/>
<Text size="sm" c="dimmed">
{t("No open comments.")}
</Text>
</Stack>
</Center>
) : (
activeComments.map(renderComments)
)}
@@ -242,9 +244,18 @@ function CommentListWithTabs() {
<Tabs.Panel value="resolved" pt="xs">
{resolvedComments.length === 0 ? (
<Text size="sm" c="dimmed" ta="center" py="md">
{t("No resolved comments.")}
</Text>
<Center py="xl">
<Stack align="center" gap="xs">
<IconMessageOff
size={32}
stroke={1.5}
color="var(--mantine-color-dimmed)"
/>
<Text size="sm" c="dimmed">
{t("No resolved comments.")}
</Text>
</Stack>
</Center>
) : (
resolvedComments.map(renderComments)
)}
@@ -252,6 +263,7 @@ function CommentListWithTabs() {
</div>
</ScrollArea>
</Tabs>
{pageCommentInput}
</div>
);
}
@@ -273,9 +285,9 @@ const ChildComments = ({
const getChildComments = useCallback(
(parentId: string) =>
comments.items.filter(
(comment: IComment) => comment.parentCommentId === parentId
(comment: IComment) => comment.parentCommentId === parentId,
),
[comments.items]
[comments.items],
);
return (
@@ -303,7 +315,12 @@ const ChildComments = ({
const MemoizedChildComments = memo(ChildComments);
const CommentEditorWithActions = ({ commentId, onSave, isLoading }) => {
const CommentEditorWithActions = ({
commentId,
onSave,
isLoading,
placeholder = undefined,
}) => {
const [content, setContent] = useState("");
const { ref, focused } = useFocusWithin();
const commentEditorRef = useRef(null);
@@ -321,10 +338,71 @@ const CommentEditorWithActions = ({ commentId, onSave, isLoading }) => {
onUpdate={setContent}
onSave={handleSave}
editable={true}
placeholder={placeholder}
/>
{focused && <CommentActions onSave={handleSave} isLoading={isLoading} />}
</div>
);
};
const PageCommentInput = ({ onSave, isLoading }) => {
const { t } = useTranslation();
const [content, setContent] = useState("");
const { ref, focused } = useFocusWithin();
const commentEditorRef = useRef(null);
const [currentUser] = useAtom(currentUserAtom);
const handleSave = useCallback(() => {
onSave(null, content);
setContent("");
commentEditorRef.current?.clearContent();
}, [content, onSave]);
return (
<div
ref={ref}
style={{
flex: "0 0 auto",
borderTop: "1px solid var(--mantine-color-default-border)",
paddingTop: "var(--mantine-spacing-sm)",
paddingBottom: 25,
position: "relative",
}}
>
<Group wrap="nowrap" align="flex-start" gap="xs">
<CustomAvatar
size="sm"
avatarUrl={currentUser?.user?.avatarUrl}
name={currentUser?.user?.name}
style={{ flexShrink: 0, marginTop: 10 }}
/>
<div style={{ flex: 1, minWidth: 0 }}>
<CommentEditor
ref={commentEditorRef}
onUpdate={setContent}
onSave={handleSave}
editable={true}
placeholder={t("Add a comment...")}
surface="muted"
/>
</div>
</Group>
{focused && (
<ActionIcon
variant="filled"
radius="xl"
size="sm"
aria-label={t("Send comment")}
onClick={handleSave}
onMouseDown={(e) => e.preventDefault()}
loading={isLoading}
style={{ position: "absolute", right: 8, bottom: 30 }}
>
<IconArrowUp size={16} />
</ActionIcon>
)}
</div>
);
};
export default CommentListWithTabs;
apps/client/src/features/comment/components/comment-menu.tsx
+36 -22
View File
@@ -1,8 +1,16 @@
import { ActionIcon, Menu, Tooltip } from "@mantine/core";
import { IconDots, IconEdit, IconTrash, IconCircleCheck, IconCircleCheckFilled } from "@tabler/icons-react";
import {
IconDots,
IconEdit,
IconTrash,
IconCircleCheck,
IconCircleCheckFilled,
} from "@tabler/icons-react";
import { modals } from "@mantine/modals";
import { useTranslation } from "react-i18next";
import { useIsCloudEE } from "@/hooks/use-is-cloud-ee";
import { useHasFeature } from "@/ee/hooks/use-feature";
import { Feature } from "@/ee/features";
import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label";
type CommentMenuProps = {
onEditComment: () => void;
@@ -13,16 +21,17 @@ type CommentMenuProps = {
isParentComment?: boolean;
};
function CommentMenu({
onEditComment,
onDeleteComment,
function CommentMenu({
onEditComment,
onDeleteComment,
onResolveComment,
canEdit = true,
isResolved = false,
isParentComment = false
isParentComment = false,
}: CommentMenuProps) {
const { t } = useTranslation();
const isCloudEE = useIsCloudEE();
const canResolve = useHasFeature(Feature.COMMENT_RESOLUTION);
const upgradeLabel = useUpgradeLabel();
//@ts-ignore
const openDeleteModal = () =>
@@ -37,40 +46,45 @@ function CommentMenu({
return (
<Menu shadow="md" width={200}>
<Menu.Target>
<ActionIcon variant="default" style={{ border: "none" }}>
<ActionIcon
variant="default"
style={{ border: "none" }}
aria-label={t("Comment menu")}
>
<IconDots size={20} stroke={2} />
</ActionIcon>
</Menu.Target>
<Menu.Dropdown>
{canEdit && (
<Menu.Item onClick={onEditComment} leftSection={<IconEdit size={14} />}>
<Menu.Item
onClick={onEditComment}
leftSection={<IconEdit size={14} />}
>
{t("Edit comment")}
</Menu.Item>
)}
{isParentComment && (
isCloudEE ? (
<Menu.Item
onClick={onResolveComment}
{isParentComment &&
(canResolve ? (
<Menu.Item
onClick={onResolveComment}
leftSection={
isResolved ?
<IconCircleCheckFilled size={14} /> :
isResolved ? (
<IconCircleCheckFilled size={14} />
) : (
<IconCircleCheck size={14} />
)
}
>
{isResolved ? t("Re-open comment") : t("Resolve comment")}
</Menu.Item>
) : (
<Tooltip label={t("Available in enterprise edition")} position="left">
<Menu.Item
disabled
leftSection={<IconCircleCheck size={14} />}
>
<Tooltip label={upgradeLabel} position="left" withinPortal={false}>
<Menu.Item disabled leftSection={<IconCircleCheck size={14} />}>
{t("Resolve comment")}
</Menu.Item>
</Tooltip>
)
)}
))}
<Menu.Item
leftSection={<IconTrash size={14} />}
onClick={openDeleteModal}
apps/client/src/features/comment/components/comment.module.css
+5
View File
@@ -22,6 +22,11 @@
.commentEditor {
&[data-editable][data-surface="muted"] .ProseMirror:not(.focused) {
border-radius: var(--mantine-radius-sm);
box-shadow: 0 0 0 1px light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-4));
}
.focused {
border-radius: var(--mantine-radius-sm);
box-shadow: 0 0 0 2px var(--mantine-color-blue-3);
apps/client/src/features/comment/queries/comment-query.ts
+81 -29
View File
@@ -1,8 +1,8 @@
import {
useInfiniteQuery,
useMutation,
useQuery,
useQueryClient,
UseQueryResult,
InfiniteData,
} from "@tanstack/react-query";
import {
createComment,
@@ -17,17 +17,40 @@ import {
import { notifications } from "@mantine/notifications";
import { IPagination } from "@/lib/types.ts";
import { useTranslation } from "react-i18next";
import { useEffect, useMemo } from "react";
export const RQ_KEY = (pageId: string) => ["comments", pageId];
export function useCommentsQuery(
params: ICommentParams,
): UseQueryResult<IPagination<IComment>, Error> {
return useQuery({
export function useCommentsQuery(params: ICommentParams) {
const query = useInfiniteQuery({
queryKey: RQ_KEY(params.pageId),
queryFn: () => getPageComments(params),
queryFn: ({ pageParam }) =>
getPageComments({ pageId: params.pageId, cursor: pageParam, limit: 100 }),
initialPageParam: undefined as string | undefined,
getNextPageParam: (lastPage) =>
lastPage.meta.hasNextPage ? lastPage.meta.nextCursor : undefined,
enabled: !!params.pageId,
});
useEffect(() => {
if (query.hasNextPage && !query.isFetchingNextPage) {
query.fetchNextPage();
}
}, [query.hasNextPage, query.isFetchingNextPage, query.fetchNextPage]);
const data = useMemo<IPagination<IComment> | undefined>(() => {
if (!query.data) return undefined;
return {
items: query.data.pages.flatMap((p) => p.items),
meta: query.data.pages[query.data.pages.length - 1].meta,
};
}, [query.data]);
return {
data,
isLoading: query.isLoading || query.hasNextPage,
isError: query.isError,
};
}
export function useCreateCommentMutation() {
@@ -36,18 +59,31 @@ export function useCreateCommentMutation() {
return useMutation<IComment, Error, Partial<IComment>>({
mutationFn: (data) => createComment(data),
onSuccess: (data) => {
//const newComment = data;
// let comments = queryClient.getQueryData(RQ_KEY(data.pageId));
// if (comments) {
//comments = prevComments => [...prevComments, newComment];
//queryClient.setQueryData(RQ_KEY(data.pageId), comments);
//}
onSuccess: (newComment) => {
const cache = queryClient.getQueryData(
RQ_KEY(newComment.pageId),
) as InfiniteData<IPagination<IComment>> | undefined;
if (cache && cache.pages.length > 0) {
const alreadyExists = cache.pages.some((page) =>
page.items.some((c) => c.id === newComment.id),
);
if (alreadyExists) return;
const lastIdx = cache.pages.length - 1;
queryClient.setQueryData(RQ_KEY(newComment.pageId), {
...cache,
pages: cache.pages.map((page, i) =>
i === lastIdx
? { ...page, items: [...page.items, newComment] }
: page,
),
});
}
queryClient.refetchQueries({ queryKey: RQ_KEY(data.pageId) });
notifications.show({ message: t("Comment created successfully") });
},
onError: (error) => {
onError: () => {
notifications.show({
message: t("Error creating comment"),
color: "red",
@@ -57,14 +93,31 @@ export function useCreateCommentMutation() {
}
export function useUpdateCommentMutation() {
const queryClient = useQueryClient();
const { t } = useTranslation();
return useMutation<IComment, Error, Partial<IComment>>({
mutationFn: (data) => updateComment(data),
onSuccess: (data) => {
onSuccess: (updatedComment) => {
const cache = queryClient.getQueryData(
RQ_KEY(updatedComment.pageId),
) as InfiniteData<IPagination<IComment>> | undefined;
if (cache) {
queryClient.setQueryData(RQ_KEY(updatedComment.pageId), {
...cache,
pages: cache.pages.map((page) => ({
...page,
items: page.items.map((comment) =>
comment.id === updatedComment.id ? updatedComment : comment,
),
})),
});
}
notifications.show({ message: t("Comment updated successfully") });
},
onError: (error) => {
onError: () => {
notifications.show({
message: t("Failed to update comment"),
color: "red",
@@ -79,25 +132,24 @@ export function useDeleteCommentMutation(pageId?: string) {
return useMutation({
mutationFn: (commentId: string) => deleteComment(commentId),
onSuccess: (data, variables) => {
const comments = queryClient.getQueryData(
onSuccess: (_data, commentId) => {
const cache = queryClient.getQueryData(
RQ_KEY(pageId),
) as IPagination<IComment>;
) as InfiniteData<IPagination<IComment>> | undefined;
if (comments && comments.items) {
const commentId = variables;
const newComments = comments.items.filter(
(comment) => comment.id !== commentId,
);
if (cache) {
queryClient.setQueryData(RQ_KEY(pageId), {
...comments,
items: newComments,
...cache,
pages: cache.pages.map((page) => ({
...page,
items: page.items.filter((comment) => comment.id !== commentId),
})),
});
}
notifications.show({ message: t("Comment deleted successfully") });
},
onError: (error) => {
onError: () => {
notifications.show({
message: t("Failed to delete comment"),
color: "red",
apps/client/src/features/comment/types/comment.types.ts
+4
View File
@@ -17,6 +17,10 @@ export interface IComment {
deletedAt?: Date;
creator: IUser;
resolvedBy?: IUser;
yjsSelection?: {
anchor: any;
head: any;
};
}
export interface ICommentData {
apps/client/src/features/editor/atoms/editor-atoms.ts
+7
View File
@@ -1,5 +1,6 @@
import { atom } from "jotai";
import { Editor } from "@tiptap/core";
import { PageEditMode } from "@/features/user/types/user.types.ts";
export const pageEditorAtom = atom<Editor | null>(null);
@@ -10,3 +11,9 @@ export const readOnlyEditorAtom = atom<Editor | null>(null);
export const yjsConnectionStatusAtom = atom<string>("");
export const showAiMenuAtom = atom(false);
export const showLinkMenuAtom = atom(false);
// Current page's edit mode — initialized from the user's saved preference on
// first load, can be toggled locally without persisting to the server.
export const currentPageEditModeAtom = atom<PageEditMode>(PageEditMode.Edit);
apps/client/src/features/editor/components/attachment/attachment-view.tsx
+48 -13
View File
@@ -1,17 +1,43 @@
import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
import { Group, Text, Paper, ActionIcon, Loader } from "@mantine/core";
import { Group, Text, Paper, ActionIcon, Loader, Tooltip } from "@mantine/core";
import { getFileUrl } from "@/lib/config.ts";
import { IconDownload, IconPaperclip } from "@tabler/icons-react";
import { IconDownload, IconFileTypePdf, IconPaperclip } from "@tabler/icons-react";
import { useHover } from "@mantine/hooks";
import { formatBytes } from "@/lib";
import { useTranslation } from "react-i18next";
import { useCallback } from "react";
export default function AttachmentView(props: NodeViewProps) {
const { t } = useTranslation();
const { node, selected } = props;
const { url, name, size } = node.attrs;
const { editor, node, getPos, selected } = props;
const { url, name, size, mime, attachmentId, placeholder } = node.attrs;
const { hovered, ref } = useHover();
const isPdf = mime === "application/pdf" || name?.toLowerCase().endsWith(".pdf");
const handleEmbedAsPdf = useCallback(() => {
const pos = getPos();
if (pos === undefined || !url) return;
const nodeSize = node.nodeSize;
editor
.chain()
.insertContentAt(
{ from: pos, to: pos + nodeSize },
{
type: "pdf",
attrs: {
src: url,
name,
attachmentId,
size,
},
},
)
.run();
}, [editor, getPos, node, url, name, attachmentId]);
return (
<NodeViewWrapper>
<Paper withBorder p="4px" ref={ref} data-drag-handle>
@@ -23,14 +49,14 @@ export default function AttachmentView(props: NodeViewProps) {
h={25}
>
<Group wrap="nowrap" gap="sm" style={{ minWidth: 0, flex: 1 }}>
{url ? (
<IconPaperclip size={20} style={{ flexShrink: 0 }} />
) : (
{!url && placeholder ? (
<Loader size={20} style={{ flexShrink: 0 }} />
) : (
<IconPaperclip size={20} style={{ flexShrink: 0 }} />
)}
<Text component="span" size="md" truncate="end" style={{ minWidth: 0 }}>
{url ? name : t("Uploading {{name}}", { name })}
{!url && placeholder ? t("Uploading {{name}}", { name }) : name}
</Text>
<Text component="span" size="sm" c="dimmed" style={{ flexShrink: 0 }}>
@@ -39,11 +65,20 @@ export default function AttachmentView(props: NodeViewProps) {
</Group>
{url && (selected || hovered) && (
<a href={getFileUrl(url)} target="_blank">
<ActionIcon variant="default" aria-label="download file">
<IconDownload size={18} />
</ActionIcon>
</a>
<Group gap={4} wrap="nowrap" style={{ flexShrink: 0 }}>
{isPdf && editor.isEditable && (
<Tooltip label={t("Embed as PDF")} position="top" withinPortal={false}>
<ActionIcon variant="default" aria-label={t("Embed as PDF")} onClick={handleEmbedAsPdf}>
<IconFileTypePdf size={18} />
</ActionIcon>
</Tooltip>
)}
<a href={getFileUrl(url)} target="_blank">
<ActionIcon variant="default" aria-label="download file">
<IconDownload size={18} />
</ActionIcon>
</a>
</Group>
)}
</Group>
</Paper>
apps/client/src/features/editor/components/attachment/upload-attachment-action.tsx
+3 -1
View File
@@ -19,7 +19,9 @@ export const uploadAttachmentAction = handleAttachmentUpload({
},
validateFn: (file, allowMedia: boolean) => {
if (
(file.type.includes("image/") || file.type.includes("video/")) &&
(file.type.includes("image/") ||
file.type.includes("video/") ||
file.type === "application/pdf") &&
!allowMedia
) {
return false;
apps/client/src/features/editor/components/audio/audio-menu.tsx
+124
View File
@@ -0,0 +1,124 @@
import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
import { useCallback } from "react";
import { Node as PMNode } from "@tiptap/pm/model";
import { isEditorReady } from "@docmost/editor-ext";
import {
EditorMenuProps,
ShouldShowProps,
} from "@/features/editor/components/table/types/types.ts";
import { ActionIcon, Tooltip } from "@mantine/core";
import {
IconDownload,
IconTrash,
} from "@tabler/icons-react";
import { useTranslation } from "react-i18next";
import { getFileUrl } from "@/lib/config.ts";
import classes from "../common/toolbar-menu.module.css";
export function AudioMenu({ editor }: EditorMenuProps) {
const { t } = useTranslation();
const editorState = useEditorState({
editor,
selector: (ctx) => {
if (!ctx.editor) {
return null;
}
const audioAttrs = ctx.editor.getAttributes("audio");
return {
isAudio: ctx.editor.isActive("audio"),
src: audioAttrs?.src || null,
};
},
});
const shouldShow = useCallback(
({ state }: ShouldShowProps) => {
if (!state) {
return false;
}
return editor.isActive("audio") && editor.getAttributes("audio").src;
},
[editor],
);
const getReferencedVirtualElement = useCallback(() => {
if (!isEditorReady(editor)) return;
const { selection } = editor.state;
const predicate = (node: PMNode) => node.type.name === "audio";
const parent = findParentNode(predicate)(selection);
if (parent) {
const dom = editor.view.nodeDOM(parent?.pos) as HTMLElement;
const domRect = dom.getBoundingClientRect();
return {
getBoundingClientRect: () => domRect,
getClientRects: () => [domRect],
};
}
const domRect = posToDOMRect(editor.view, selection.from, selection.to);
return {
getBoundingClientRect: () => domRect,
getClientRects: () => [domRect],
};
}, [editor]);
const handleDownload = useCallback(() => {
if (!editorState?.src) return;
const url = getFileUrl(editorState.src);
const a = document.createElement("a");
a.href = url;
a.download = "";
a.click();
}, [editorState?.src]);
const handleDelete = useCallback(() => {
editor.commands.deleteSelection();
}, [editor]);
return (
<BaseBubbleMenu
editor={editor}
pluginKey={`audio-menu`}
updateDelay={0}
getReferencedVirtualElement={getReferencedVirtualElement}
options={{
placement: "top",
offset: 8,
flip: false,
}}
shouldShow={shouldShow}
>
<div className={classes.toolbar}>
<Tooltip position="top" label={t("Download")} withinPortal={false}>
<ActionIcon
onClick={handleDownload}
size="lg"
aria-label={t("Download")}
variant="subtle"
>
<IconDownload size={18} />
</ActionIcon>
</Tooltip>
<Tooltip position="top" label={t("Delete")} withinPortal={false}>
<ActionIcon
onClick={handleDelete}
size="lg"
aria-label={t("Delete")}
variant="subtle"
>
<IconTrash size={18} />
</ActionIcon>
</Tooltip>
</div>
</BaseBubbleMenu>
);
}
export default AudioMenu;
apps/client/src/features/editor/components/audio/audio-view.module.css
+37
View File
@@ -0,0 +1,37 @@
.audioWrapper {
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
border-radius: 8px;
overflow: hidden;
}
.skeleton {
animation: pulse 1.2s ease-in-out infinite;
@mixin light {
background: linear-gradient(-90deg, var(--mantine-color-gray-3) 0%, var(--mantine-color-gray-1) 50%, var(--mantine-color-gray-3) 100%);
background-size: 400% 400%;
}
@mixin dark {
background: linear-gradient(-90deg, var(--mantine-color-dark-6) 0%, var(--mantine-color-dark-5) 50%, var(--mantine-color-dark-6) 100%);
background-size: 400% 400%;
}
@keyframes pulse {
0% {
background-position: 0% 0%;
}
100% {
background-position: -135% 0%;
}
}
}
.audio {
display: block;
width: 100%;
border-radius: 8px;
}
apps/client/src/features/editor/components/audio/audio-view.tsx
+70
View File
@@ -0,0 +1,70 @@
import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
import { Group, Loader, Text } from "@mantine/core";
import { useMemo } from "react";
import { getFileUrl } from "@/lib/config.ts";
import { isInternalFileUrl } from "@docmost/editor-ext";
import classes from "./audio-view.module.css";
import { useTranslation } from "react-i18next";
export default function AudioView(props: NodeViewProps) {
const { t } = useTranslation();
const { editor, node } = props;
const { src, placeholder } = node.attrs;
const safeSrc = useMemo(() => {
if (!src || !isInternalFileUrl(src)) return null;
return getFileUrl(src);
}, [src]);
const previewSrc = useMemo(() => {
editor.storage.shared.audioPreviews =
editor.storage.shared.audioPreviews || {};
if (placeholder?.id) {
return editor.storage.shared.audioPreviews[placeholder.id];
}
return null;
}, [placeholder, editor]);
return (
<NodeViewWrapper data-drag-handle>
<div className={`${classes.audioWrapper} ${!safeSrc && placeholder ? classes.skeleton : ''}`}>
{safeSrc && (
<audio
className={classes.audio}
preload="metadata"
controls
src={safeSrc}
aria-label={placeholder?.name || t("Audio")}
/>
)}
{!safeSrc && previewSrc && (
<Group pos="relative" w="100%">
<audio
className={classes.audio}
preload="metadata"
controls
src={previewSrc}
aria-label={placeholder?.name || t("Audio")}
/>
<Loader size={20} pos="absolute" top={6} right={6} />
</Group>
)}
{!safeSrc && !previewSrc && placeholder && (
<Group justify="center" wrap="nowrap" gap="xs" maw="100%" px="md" h={54}>
<Loader size={20} style={{ flexShrink: 0 }} />
<Text component="span" size="sm" truncate="end">
{placeholder?.name
? t("Uploading {{name}}", { name: placeholder.name })
: t("Uploading file")}
</Text>
</Group>
)}
{!safeSrc && !previewSrc && !placeholder && (
<audio className={classes.audio} controls aria-label={t("Audio")} />
)}
</div>
</NodeViewWrapper>
);
}
apps/client/src/features/editor/components/audio/upload-audio-action.tsx
+36
View File
@@ -0,0 +1,36 @@
import { handleAudioUpload } from "@docmost/editor-ext";
import { uploadFile } from "@/features/page/services/page-service.ts";
import { notifications } from "@mantine/notifications";
import { getFileUploadSizeLimit } from "@/lib/config.ts";
import { formatBytes } from "@/lib";
import i18n from "@/i18n.ts";
export const uploadAudioAction = handleAudioUpload({
onUpload: async (file: File, pageId: string): Promise<any> => {
try {
return await uploadFile(file, pageId);
} catch (err) {
notifications.show({
color: "red",
message: err?.response.data.message,
});
throw err;
}
},
validateFn: (file) => {
if (!file.type.includes("audio/")) {
return false;
}
if (file.size > getFileUploadSizeLimit()) {
notifications.show({
color: "red",
message: i18n.t("File exceeds the {{limit}} attachment limit", {
limit: formatBytes(getFileUploadSizeLimit()),
}),
});
return false;
}
return true;
},
});
apps/client/src/features/editor/components/bubble-menu/bubble-menu.module.css
+12
View File
@@ -28,6 +28,18 @@
}
}
.colorSwatch:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--mantine-color-blue-6);
position: relative;
z-index: 1;
}
.removeColor:focus-visible {
outline: none;
box-shadow: inset 0 0 0 2px var(--mantine-color-blue-6);
}
.buttonRoot {
height: 34px;
padding-left: rem(8);
apps/client/src/features/editor/components/bubble-menu/bubble-menu.tsx
+65 -65
View File
@@ -26,8 +26,8 @@ import { v7 as uuid7 } from "uuid";
import { isCellSelection, isTextSelected } from "@docmost/editor-ext";
import { LinkSelector } from "@/features/editor/components/bubble-menu/link-selector.tsx";
import { useTranslation } from "react-i18next";
import { showAiMenuAtom } from "@/features/editor/atoms/editor-atoms";
import { workspaceAtom } from "@/features/user/atoms/current-user-atom";
import { showAiMenuAtom, showLinkMenuAtom } from "@/features/editor/atoms/editor-atoms";
import { userAtom, workspaceAtom } from "@/features/user/atoms/current-user-atom";
export interface BubbleMenuItem {
name: string;
@@ -46,9 +46,14 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
const [showCommentPopup, setShowCommentPopup] = useAtom(showCommentPopupAtom);
const workspace = useAtomValue(workspaceAtom);
const isGenerativeAiEnabled = workspace?.settings?.ai?.generative === true;
const user = useAtomValue(userAtom);
const editorToolbarEnabled =
user?.settings?.preferences?.editorToolbar ?? false;
const [, setDraftCommentId] = useAtom(draftCommentIdAtom);
const showCommentPopupRef = useRef(showCommentPopup);
const showAiMenuRef = useRef(showAiMenu);
const [showLinkMenu] = useAtom(showLinkMenuAtom);
const showLinkMenuRef = useRef(showLinkMenu);
useEffect(() => {
showCommentPopupRef.current = showCommentPopup;
@@ -58,6 +63,10 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
showAiMenuRef.current = showAiMenu;
}, [showAiMenu]);
useEffect(() => {
showLinkMenuRef.current = showLinkMenu;
}, [showLinkMenu]);
const editorState = useEditorState({
editor: props.editor,
selector: (ctx) => {
@@ -135,6 +144,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
isNodeSelection(selection) ||
isCellSelection(selection) ||
showAiMenuRef.current ||
showLinkMenuRef.current ||
showCommentPopupRef?.current
) {
return false;
@@ -142,12 +152,11 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
return isTextSelected(editor);
},
options: {
placement: "top",
placement: editorToolbarEnabled ? "bottom" : "top",
offset: 8,
onHide: () => {
setIsNodeSelectorOpen(false);
setIsTextAlignmentOpen(false);
setIsLinkSelectorOpen(false);
setIsColorSelectorOpen(false);
},
},
@@ -155,16 +164,15 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
const [isNodeSelectorOpen, setIsNodeSelectorOpen] = useState(false);
const [isTextAlignmentSelectorOpen, setIsTextAlignmentOpen] = useState(false);
const [isLinkSelectorOpen, setIsLinkSelectorOpen] = useState(false);
const [isColorSelectorOpen, setIsColorSelectorOpen] = useState(false);
// Hide the bubble menu immediately when AI menu is shown
if (showAiMenu) return;
if (showAiMenu || showLinkMenu) return;
return (
<BubbleMenu
{...bubbleMenuProps}
style={{ zIndex: 200, position: "relative" }}
style={{ zIndex: 199, position: "relative" }}
>
<div className={classes.bubbleMenu}>
{isGenerativeAiEnabled && (
@@ -183,68 +191,60 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
<div className={classes.divider} />
</>
)}
<NodeSelector
editor={props.editor}
isOpen={isNodeSelectorOpen}
setIsOpen={() => {
setIsNodeSelectorOpen(!isNodeSelectorOpen);
setIsTextAlignmentOpen(false);
setIsLinkSelectorOpen(false);
setIsColorSelectorOpen(false);
}}
/>
{!editorToolbarEnabled && (
<>
<NodeSelector
editor={props.editor}
isOpen={isNodeSelectorOpen}
setIsOpen={() => {
setIsNodeSelectorOpen(!isNodeSelectorOpen);
setIsTextAlignmentOpen(false);
setIsColorSelectorOpen(false);
}}
/>
<TextAlignmentSelector
editor={props.editor}
isOpen={isTextAlignmentSelectorOpen}
setIsOpen={() => {
setIsTextAlignmentOpen(!isTextAlignmentSelectorOpen);
setIsNodeSelectorOpen(false);
setIsLinkSelectorOpen(false);
setIsColorSelectorOpen(false);
}}
/>
<TextAlignmentSelector
editor={props.editor}
isOpen={isTextAlignmentSelectorOpen}
setIsOpen={() => {
setIsTextAlignmentOpen(!isTextAlignmentSelectorOpen);
setIsNodeSelectorOpen(false);
setIsColorSelectorOpen(false);
}}
/>
<ActionIcon.Group>
{items.map((item, index) => (
<Tooltip key={index} label={t(item.name)} withArrow>
<ActionIcon
key={index}
variant="default"
size="lg"
radius="0"
aria-label={t(item.name)}
className={clsx({ [classes.active]: item.isActive() })}
style={{ border: "none" }}
onClick={item.command}
>
<item.icon style={{ width: rem(16) }} stroke={2} />
</ActionIcon>
</Tooltip>
))}
</ActionIcon.Group>
<ActionIcon.Group>
{items.map((item, index) => (
<Tooltip key={index} label={t(item.name)} withArrow>
<ActionIcon
key={index}
variant="default"
size="lg"
radius="0"
aria-label={t(item.name)}
className={clsx({ [classes.active]: item.isActive() })}
style={{ border: "none" }}
onClick={item.command}
>
<item.icon style={{ width: rem(16) }} stroke={2} />
</ActionIcon>
</Tooltip>
))}
</ActionIcon.Group>
<LinkSelector
editor={props.editor}
isOpen={isLinkSelectorOpen}
setIsOpen={(value) => {
setIsLinkSelectorOpen(value);
setIsNodeSelectorOpen(false);
setIsTextAlignmentOpen(false);
setIsColorSelectorOpen(false);
}}
/>
<LinkSelector />
<ColorSelector
editor={props.editor}
isOpen={isColorSelectorOpen}
setIsOpen={() => {
setIsColorSelectorOpen(!isColorSelectorOpen);
setIsNodeSelectorOpen(false);
setIsTextAlignmentOpen(false);
setIsLinkSelectorOpen(false);
}}
/>
<ColorSelector
editor={props.editor}
isOpen={isColorSelectorOpen}
setIsOpen={() => {
setIsColorSelectorOpen(!isColorSelectorOpen);
setIsNodeSelectorOpen(false);
setIsTextAlignmentOpen(false);
}}
/>
</>
)}
<Tooltip label={t(commentItem.name)} withArrow withinPortal={false}>
<ActionIcon
apps/client/src/features/editor/components/bubble-menu/color-selector.tsx
+146 -33
View File
@@ -4,7 +4,6 @@ import {
Button,
Popover,
rem,
ScrollArea,
Text,
Tooltip,
SimpleGrid,
@@ -114,6 +113,63 @@ const HIGHLIGHT_COLORS: BubbleColorMenuItem[] = [
},
];
const COLOR_GRID_COLS = 5;
function focusSwatch(grid: "text" | "highlight", index: number) {
const el = document.querySelector<HTMLElement>(
`[data-color-grid="${grid}"][data-color-index="${index}"]`,
);
el?.focus();
}
function handleColorKeyNav(
e: React.KeyboardEvent<HTMLDivElement>,
index: number,
grid: "text" | "highlight",
) {
const cols = COLOR_GRID_COLS;
const total =
grid === "text" ? TEXT_COLORS.length : HIGHLIGHT_COLORS.length;
const col = index % cols;
if (e.key === "ArrowRight") {
e.preventDefault();
if (index < total - 1) focusSwatch(grid, index + 1);
return;
}
if (e.key === "ArrowLeft") {
e.preventDefault();
if (index > 0) focusSwatch(grid, index - 1);
return;
}
if (e.key === "ArrowDown") {
e.preventDefault();
const next = index + cols;
if (next < total) {
focusSwatch(grid, next);
} else if (grid === "text") {
focusSwatch("highlight", Math.min(col, HIGHLIGHT_COLORS.length - 1));
} else if (grid === "highlight") {
document
.querySelector<HTMLElement>('[data-color-grid="remove"]')
?.focus();
}
return;
}
if (e.key === "ArrowUp") {
e.preventDefault();
const prev = index - cols;
if (prev >= 0) {
focusSwatch(grid, prev);
} else if (grid === "highlight") {
const lastRowStart =
Math.floor((TEXT_COLORS.length - 1) / cols) * cols;
focusSwatch("text", Math.min(lastRowStart + col, TEXT_COLORS.length - 1));
}
return;
}
}
export const ColorSelector: FC<ColorSelectorProps> = ({
editor,
isOpen,
@@ -157,13 +213,20 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
);
return (
<Popover width={220} opened={isOpen} withArrow>
<Popover
width={220}
opened={isOpen}
onChange={setIsOpen}
trapFocus
withArrow
>
<Popover.Target>
<Tooltip label={t("Text color")} withArrow>
<Button
variant="default"
radius="0"
rightSection={<IconChevronDown size={16} />}
onMouseDown={(e) => e.preventDefault()}
onClick={() => setIsOpen(!isOpen)}
data-text-color={activeColorItem?.color || ""}
data-highlight-color={activeHighlightItem?.color || ""}
@@ -172,34 +235,54 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
fontWeight: 500,
fontSize: rem(16),
}}
aria-label={t("Text color")}
aria-haspopup="dialog"
aria-expanded={isOpen}
>
A
</Button>
</Tooltip>
</Popover.Target>
<Popover.Dropdown>
<ScrollArea.Autosize type="scroll" mah="400">
<Stack gap="md">
<Popover.Dropdown onMouseDown={(e) => e.preventDefault()}>
<Stack gap="md" p="2px">
<Box>
<Text size="sm" fw={600} mb="xs">
{t("Text color")}
</Text>
<SimpleGrid cols={5} spacing="xs">
{TEXT_COLORS.map(({ name, color }, index) => (
{TEXT_COLORS.map(({ name, color }, index) => {
const applyTextColor = () => {
if (name === "Default") {
editor.commands.unsetColor();
} else {
editor
.chain()
.focus()
.setColor(color || "")
.run();
}
setIsOpen(false);
};
return (
<Tooltip key={index} label={t(name)} withArrow>
<Box
onClick={() => {
if (name === "Default") {
editor.commands.unsetColor();
} else {
editor
.chain()
.focus()
.setColor(color || "")
.run();
role="button"
tabIndex={0}
data-autofocus={index === 0 ? true : undefined}
data-color-grid="text"
data-color-index={index}
className={classes.colorSwatch}
aria-label={t(name)}
aria-pressed={!!editorState[`text_${color}`]}
onClick={applyTextColor}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
applyTextColor();
return;
}
setIsOpen(false);
handleColorKeyNav(e, index, "text");
}}
style={{
width: rem(28),
@@ -221,7 +304,8 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
A
</Box>
</Tooltip>
))}
);
})}
</SimpleGrid>
</Box>
@@ -230,23 +314,40 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
{t("Highlight color")}
</Text>
<SimpleGrid cols={5} spacing="xs">
{HIGHLIGHT_COLORS.map(({ name, color }, index) => (
{HIGHLIGHT_COLORS.map(({ name, color }, index) => {
const applyHighlight = () => {
if (name === "Default") {
editor.commands.unsetHighlight();
} else {
editor
.chain()
.focus()
.toggleMark("highlight", {
color: color || "",
colorName: name.toLowerCase() || "",
})
.run();
}
setIsOpen(false);
};
return (
<Tooltip key={index} label={t(name)} withArrow>
<Box
onClick={() => {
if (name === "Default") {
editor.commands.unsetHighlight();
} else {
editor
.chain()
.focus()
.toggleMark("highlight", {
color: color || "",
colorName: name.toLowerCase() || "",
})
.run();
role="button"
tabIndex={0}
data-color-grid="highlight"
data-color-index={index}
className={classes.colorSwatch}
aria-label={t(name)}
aria-pressed={!!editorState[`highlight_${color}`]}
onClick={applyHighlight}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
applyHighlight();
return;
}
setIsOpen(false);
handleColorKeyNav(e, index, "highlight");
}}
style={{
width: rem(28),
@@ -274,23 +375,35 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
)}
</Box>
</Tooltip>
))}
);
})}
</SimpleGrid>
</Box>
<Button
variant="default"
fullWidth
data-color-grid="remove"
className={classes.removeColor}
onClick={() => {
editor.commands.unsetColor();
editor.commands.unsetHighlight();
setIsOpen(false);
}}
onKeyDown={(e) => {
if (e.key === "ArrowUp") {
e.preventDefault();
const lastRowStart =
Math.floor(
(HIGHLIGHT_COLORS.length - 1) / COLOR_GRID_COLS,
) * COLOR_GRID_COLS;
focusSwatch("highlight", lastRowStart);
}
}}
>
{t("Remove color")}
</Button>
</Stack>
</ScrollArea.Autosize>
</Popover.Dropdown>
</Popover>
);
apps/client/src/features/editor/components/bubble-menu/link-selector.tsx
+17 -49
View File
@@ -1,57 +1,25 @@
import { Dispatch, FC, SetStateAction, useCallback } from "react";
import { FC } from "react";
import { IconLink } from "@tabler/icons-react";
import { ActionIcon, Popover, Tooltip } from "@mantine/core";
import { useEditor } from "@tiptap/react";
import { LinkEditorPanel } from "@/features/editor/components/link/link-editor-panel.tsx";
import { ActionIcon, Tooltip } from "@mantine/core";
import { useSetAtom } from "jotai";
import { useTranslation } from "react-i18next";
import { showLinkMenuAtom } from "@/features/editor/atoms/editor-atoms";
interface LinkSelectorProps {
editor: ReturnType<typeof useEditor>;
isOpen: boolean;
setIsOpen: Dispatch<SetStateAction<boolean>>;
}
export const LinkSelector: FC<LinkSelectorProps> = ({
editor,
isOpen,
setIsOpen,
}) => {
export const LinkSelector: FC = () => {
const { t } = useTranslation();
const onLink = useCallback(
(url: string) => {
setIsOpen(false);
editor.chain().focus().setLink({ href: url }).run();
},
[editor, setIsOpen],
);
const setShowLinkMenu = useSetAtom(showLinkMenuAtom);
return (
<Popover
width={300}
opened={isOpen}
trapFocus
offset={{ mainAxis: 35, crossAxis: 0 }}
withArrow
>
<Popover.Target>
<Tooltip label={t("Add link")} withArrow withinPortal={false}>
<ActionIcon
variant="default"
size="lg"
radius="0"
style={{
border: "none",
}}
onClick={() => setIsOpen(!isOpen)}
>
<IconLink size={16} />
</ActionIcon>
</Tooltip>
</Popover.Target>
<Popover.Dropdown>
<LinkEditorPanel onSetLink={onLink} />
</Popover.Dropdown>
</Popover>
<Tooltip label={t("Add link")} withArrow>
<ActionIcon
variant="default"
size="lg"
radius="0"
style={{ border: "none" }}
onClick={() => setShowLinkMenu(true)}
>
<IconLink size={16} />
</ActionIcon>
</Tooltip>
);
};
apps/client/src/features/editor/components/bubble-menu/node-selector.tsx
+18 -2
View File
@@ -12,6 +12,7 @@ import {
IconInfoCircle,
IconList,
IconListNumbers,
IconQuote,
IconTypography,
} from "@tabler/icons-react";
import { Popover, Button, ScrollArea, Tooltip } from "@mantine/core";
@@ -59,6 +60,7 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
isCodeBlock: ctx.editor.isActive("codeBlock"),
isCallout: ctx.editor.isActive("callout"),
isDetails: ctx.editor.isActive("details"),
isTransclusionSource: ctx.editor.isActive("transclusionSource"),
};
},
});
@@ -122,6 +124,12 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
.run(),
isActive: () => editorState?.isBlockquote,
},
{
name: "Synced block",
icon: IconQuote,
command: () => editor.chain().focus().toggleTransclusionSource().run(),
isActive: () => editorState?.isTransclusionSource,
},
{
name: "Code",
icon: IconCode,
@@ -147,9 +155,14 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
};
return (
<Popover opened={isOpen} withArrow>
<Popover opened={isOpen} onChange={setIsOpen} withArrow>
<Popover.Target>
<Tooltip label={t("Turn into")} withArrow withinPortal={false} disabled={isOpen}>
<Tooltip
label={t("Turn into")}
withArrow
withinPortal={false}
disabled={isOpen}
>
<Button
className={classes.buttonRoot}
variant="default"
@@ -157,6 +170,9 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
radius="0"
rightSection={<IconChevronDown size={16} />}
onClick={() => setIsOpen(!isOpen)}
aria-label={t("Turn into")}
aria-haspopup="menu"
aria-expanded={isOpen}
>
{t(activeItem?.name)}
</Button>
apps/client/src/features/editor/components/bubble-menu/readonly-bubble-menu.tsx
+159
View File
@@ -0,0 +1,159 @@
import type { Editor } from "@tiptap/react";
import { TextSelection } from "@tiptap/pm/state";
import { FC, useCallback, useEffect, useRef, useState } from "react";
import { IconMessage } from "@tabler/icons-react";
import classes from "./bubble-menu.module.css";
import { ActionIcon, Tooltip } from "@mantine/core";
import { useAtom } from "jotai";
import {
showReadOnlyCommentPopupAtom,
readOnlyCommentDataAtom,
} from "@/features/comment/atoms/comment-atom";
import { useTranslation } from "react-i18next";
import { getRelativeSelection, ySyncPluginKey } from "@tiptap/y-tiptap";
type ReadonlyBubbleMenuProps = {
editor: Editor;
};
export const ReadonlyBubbleMenu: FC<ReadonlyBubbleMenuProps> = ({ editor }) => {
const { t } = useTranslation();
const [showReadOnlyCommentPopup, setShowReadOnlyCommentPopup] = useAtom(
showReadOnlyCommentPopupAtom,
);
const [, setReadOnlyCommentData] = useAtom(readOnlyCommentDataAtom);
const menuRef = useRef<HTMLDivElement>(null);
const [visible, setVisible] = useState(false);
const [position, setPosition] = useState({ top: 0, left: 0 });
const isInteractingRef = useRef(false);
const updateMenuPosition = useCallback(() => {
if (isInteractingRef.current) return;
const pmSelection = editor.state.selection;
if (!(pmSelection instanceof TextSelection) || pmSelection.empty) {
setVisible(false);
return;
}
const selection = window.getSelection();
if (
!selection ||
selection.isCollapsed ||
selection.rangeCount === 0 ||
showReadOnlyCommentPopup
) {
setVisible(false);
return;
}
const editorDom = editor.view.dom;
if (
!editorDom.contains(selection.anchorNode) ||
!editorDom.contains(selection.focusNode)
) {
setVisible(false);
return;
}
const range = selection.getRangeAt(0);
const rect = range.getBoundingClientRect();
if (rect.width === 0) {
setVisible(false);
return;
}
const editorRect = editorDom
.closest(".editor-container")
?.getBoundingClientRect();
if (!editorRect) {
setVisible(false);
return;
}
setPosition({
top: rect.top - editorRect.top - 44,
left: rect.left - editorRect.left + rect.width / 2,
});
setVisible(true);
}, [editor, showReadOnlyCommentPopup]);
useEffect(() => {
const handleSelectionChange = () => {
updateMenuPosition();
};
document.addEventListener("selectionchange", handleSelectionChange);
return () => {
document.removeEventListener("selectionchange", handleSelectionChange);
};
}, [updateMenuPosition]);
useEffect(() => {
if (showReadOnlyCommentPopup) {
setVisible(false);
}
}, [showReadOnlyCommentPopup]);
const handleCommentClick = () => {
if (!editor) return;
const view = editor.view;
const ystate = ySyncPluginKey.getState(view.state);
if (ystate?.binding) {
const selection = getRelativeSelection(ystate.binding, view.state);
const { from, to } = editor.state.selection;
const selectedText = editor.state.doc.textBetween(from, to);
// @ts-ignore
setReadOnlyCommentData({
yjsSelection: {
anchor: selection.anchor,
head: selection.head,
},
selectedText,
});
setShowReadOnlyCommentPopup(true);
setVisible(false);
}
};
if (!visible) return null;
return (
<div
ref={menuRef}
style={{
position: "absolute",
top: position.top,
left: position.left,
transform: "translateX(-50%)",
zIndex: 199,
}}
>
<div className={classes.bubbleMenu}>
<Tooltip label={t("Comment")} withArrow withinPortal={false}>
<ActionIcon
variant="default"
size="lg"
radius="6px"
aria-label={t("Comment")}
style={{ border: "none" }}
onMouseDown={(e) => {
e.preventDefault();
e.stopPropagation();
isInteractingRef.current = true;
handleCommentClick();
isInteractingRef.current = false;
}}
>
<IconMessage size={16} stroke={2} />
</ActionIcon>
</Tooltip>
</div>
</div>
);
};
apps/client/src/features/editor/components/bubble-menu/text-alignment-selector.tsx
+33 -31
View File
@@ -7,7 +7,7 @@ import {
IconCheck,
IconChevronDown,
} from "@tabler/icons-react";
import { Popover, Button, ScrollArea, Tooltip, rem } from "@mantine/core";
import { Menu, Button, Tooltip, rem } from "@mantine/core";
import type { Editor } from "@tiptap/react";
import { useEditorState } from "@tiptap/react";
import { useTranslation } from "react-i18next";
@@ -82,47 +82,49 @@ export const TextAlignmentSelector: FC<TextAlignmentProps> = ({
const activeItem = items.filter((item) => item.isActive()).pop() ?? items[0];
return (
<Popover opened={isOpen} withArrow>
<Popover.Target>
<Tooltip label={t("Text align")} withArrow withinPortal={false} disabled={isOpen}>
<Menu
shadow="md"
position="bottom-start"
withArrow={false}
opened={isOpen}
onChange={setIsOpen}
>
<Menu.Target>
<Tooltip label={t("Text align")} withArrow disabled={isOpen}>
<Button
variant="default"
style={{ border: "none", height: "34px" }}
px="5"
radius="0"
rightSection={<IconChevronDown size={16} />}
onMouseDown={(e) => e.preventDefault()}
onClick={() => setIsOpen(!isOpen)}
aria-label={t("Text align")}
aria-haspopup="menu"
aria-expanded={isOpen}
>
<activeItem.icon style={{ width: rem(16) }} stroke={2} />
</Button>
</Tooltip>
</Popover.Target>
</Menu.Target>
<Popover.Dropdown>
<ScrollArea.Autosize type="scroll" mah={400}>
<Button.Group orientation="vertical">
{items.map((item, index) => (
<Button
key={index}
variant="default"
leftSection={<item.icon size={16} />}
rightSection={
activeItem.name === item.name && <IconCheck size={16} />
}
justify="left"
fullWidth
onClick={() => {
item.command();
setIsOpen(false);
}}
style={{ border: "none" }}
>
{t(item.name)}
</Button>
))}
</Button.Group>
</ScrollArea.Autosize>
</Popover.Dropdown>
</Popover>
<Menu.Dropdown>
{items.map((item, index) => (
<Menu.Item
key={index}
leftSection={<item.icon size={16} />}
rightSection={
activeItem.name === item.name ? <IconCheck size={16} /> : null
}
onClick={() => {
item.command();
setIsOpen(false);
}}
>
{t(item.name)}
</Menu.Item>
))}
</Menu.Dropdown>
</Menu>
);
};
apps/client/src/features/editor/components/callout/callout-menu.tsx
+48 -19
View File
@@ -1,22 +1,25 @@
import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
import React, { useCallback } from "react";
import { Node as PMNode } from "prosemirror-model";
import { Node as PMNode } from "@tiptap/pm/model";
import {
EditorMenuProps,
ShouldShowProps,
} from "@/features/editor/components/table/types/types.ts";
import { ActionIcon, Tooltip } from "@mantine/core";
import clsx from "clsx";
import {
IconAlertTriangleFilled,
IconCircleCheckFilled,
IconCircleXFilled,
IconInfoCircleFilled,
IconMoodSmile,
IconNotes,
} from "@tabler/icons-react";
import { CalloutType } from "@docmost/editor-ext";
import { CalloutType, isEditorReady, isTextSelected } from "@docmost/editor-ext";
import { useTranslation } from "react-i18next";
import EmojiPicker from "@/components/ui/emoji-picker.tsx";
import classes from "../common/toolbar-menu.module.css";
export function CalloutMenu({ editor }: EditorMenuProps) {
const { t } = useTranslation();
@@ -26,6 +29,7 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
if (!state) {
return false;
}
if (isTextSelected(editor)) return false;
return editor.isActive("callout");
},
@@ -42,6 +46,7 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
return {
isCallout: ctx.editor.isActive("callout"),
isInfo: ctx.editor.isActive("callout", { type: "info" }),
isNote: ctx.editor.isActive("callout", { type: "note" }),
isSuccess: ctx.editor.isActive("callout", { type: "success" }),
isWarning: ctx.editor.isActive("callout", { type: "warning" }),
isDanger: ctx.editor.isActive("callout", { type: "danger" }),
@@ -50,7 +55,7 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
});
const getReferencedVirtualElement = useCallback(() => {
if (!editor) return;
if (!isEditorReady(editor)) return;
const { selection } = editor.state;
const predicate = (node: PMNode) => node.type.name === "callout";
const parent = findParentNode(predicate)(selection);
@@ -126,48 +131,73 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
}}
shouldShow={shouldShow}
>
<ActionIcon.Group className="actionIconGroup">
<Tooltip position="top" label={t("Info")}>
<div className={classes.toolbar}>
<Tooltip position="top" label={t("Info")} withinPortal={false}>
<ActionIcon
onClick={() => setCalloutType("info")}
size="lg"
aria-label={t("Info")}
variant={editorState?.isInfo ? "light" : "default"}
variant="subtle"
className={clsx({ [classes.active]: editorState?.isInfo })}
>
<IconInfoCircleFilled size={18} />
<IconInfoCircleFilled
size={18}
color="var(--mantine-color-blue-5)"
/>
</ActionIcon>
</Tooltip>
<Tooltip position="top" label={t("Success")}>
<Tooltip position="top" label={t("Note")} withinPortal={false}>
<ActionIcon
onClick={() => setCalloutType("note")}
size="lg"
aria-label={t("Note")}
variant="subtle"
className={clsx({ [classes.active]: editorState?.isNote })}
>
<IconNotes size={18} color="var(--mantine-color-grape-5)" />
</ActionIcon>
</Tooltip>
<Tooltip position="top" label={t("Success")} withinPortal={false}>
<ActionIcon
onClick={() => setCalloutType("success")}
size="lg"
aria-label={t("Success")}
variant={editorState?.isSuccess ? "light" : "default"}
variant="subtle"
className={clsx({ [classes.active]: editorState?.isSuccess })}
>
<IconCircleCheckFilled size={18} />
<IconCircleCheckFilled
size={18}
color="var(--mantine-color-green-5)"
/>
</ActionIcon>
</Tooltip>
<Tooltip position="top" label={t("Warning")}>
<Tooltip position="top" label={t("Warning")} withinPortal={false}>
<ActionIcon
onClick={() => setCalloutType("warning")}
size="lg"
aria-label={t("Warning")}
variant={editorState?.isWarning ? "light" : "default"}
variant="subtle"
className={clsx({ [classes.active]: editorState?.isWarning })}
>
<IconAlertTriangleFilled size={18} />
<IconAlertTriangleFilled
size={18}
color="var(--mantine-color-orange-5)"
/>
</ActionIcon>
</Tooltip>
<Tooltip position="top" label={t("Danger")}>
<Tooltip position="top" label={t("Danger")} withinPortal={false}>
<ActionIcon
onClick={() => setCalloutType("danger")}
size="lg"
aria-label={t("Danger")}
variant={editorState?.isDanger ? "light" : "default"}
variant="subtle"
className={clsx({ [classes.active]: editorState?.isDanger })}
>
<IconCircleXFilled size={18} />
<IconCircleXFilled size={18} color="var(--mantine-color-red-5)" />
</ActionIcon>
</Tooltip>
@@ -178,11 +208,10 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
icon={currentIcon || <IconMoodSmile size={18} />}
actionIconProps={{
size: "lg",
variant: "default",
c: undefined,
variant: "subtle",
}}
/>
</ActionIcon.Group>
</div>
</BaseBubbleMenu>
);
}
apps/client/src/features/editor/components/callout/callout-view.tsx
+7 -1
View File
@@ -4,6 +4,7 @@ import {
IconCircleCheckFilled,
IconCircleXFilled,
IconInfoCircleFilled,
IconNotes,
} from "@tabler/icons-react";
import { Alert } from "@mantine/core";
import classes from "./callout.module.css";
@@ -22,6 +23,7 @@ export default function CalloutView(props: NodeViewProps) {
icon={getCalloutIcon(type, icon)}
p="xs"
classNames={{
root: classes.root,
message: classes.message,
icon: classes.icon,
}}
@@ -34,12 +36,14 @@ export default function CalloutView(props: NodeViewProps) {
function getCalloutIcon(type: CalloutType, customIcon?: string) {
if (customIcon && customIcon.trim() !== "") {
return <span style={{ fontSize: '18px' }}>{customIcon}</span>;
return <span style={{ fontSize: "18px" }}>{customIcon}</span>;
}
switch (type) {
case "info":
return <IconInfoCircleFilled />;
case "note":
return <IconNotes />;
case "success":
return <IconCircleCheckFilled />;
case "warning":
@@ -55,6 +59,8 @@ function getCalloutColor(type: CalloutType) {
switch (type) {
case "info":
return "blue";
case "note":
return "grape";
case "success":
return "green";
case "warning":
apps/client/src/features/editor/components/callout/callout.module.css
+7 -13
View File
@@ -1,9 +1,13 @@
.root {
overflow: visible;
}
.icon {
font-size: 24px;
line-height: 1;
width: 20px;
height: 20px;
margin-inline-end: var(--mantine-spacing-md);
margin-inline-end: var(--mantine-spacing-xs);
margin-top: 4px;
cursor: pointer;
}
@@ -11,18 +15,8 @@
.message {
font-size: var(--mantine-font-size-md);
color: var(--mantine-color-default-color);
white-space: nowrap;
overflow: visible;
text-overflow: unset;
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);
}
*/
apps/client/src/features/editor/components/columns/columns-menu.tsx
+361
View File
@@ -0,0 +1,361 @@
import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
import React, { useCallback, useRef, useState } from "react";
import { DOMSerializer, Node as PMNode } from "@tiptap/pm/model";
import {
EditorMenuProps,
ShouldShowProps,
} from "@/features/editor/components/table/types/types.ts";
import { ActionIcon, Tooltip, Popover, Button } from "@mantine/core";
import clsx from "clsx";
import {
IconChevronDown,
IconCheck,
IconColumns2,
IconColumns3,
IconLayoutSidebar,
IconLayoutSidebarRight,
IconLayoutAlignCenter,
IconCopy,
IconTrash,
} from "@tabler/icons-react";
import { isEditorReady, isTextSelected } from "@docmost/editor-ext";
import type { WidthMode, ColumnsLayout } from "@docmost/editor-ext";
import { useTranslation } from "react-i18next";
import classes from "../common/toolbar-menu.module.css";
type LayoutPreset = {
layout: ColumnsLayout;
label: string;
icon: React.ElementType;
};
const twoColumnPresets: LayoutPreset[] = [
{ layout: "two_equal", label: "Equal columns", icon: IconColumns2 },
{
layout: "two_left_sidebar",
label: "Left sidebar",
icon: IconLayoutSidebar,
},
{
layout: "two_right_sidebar",
label: "Right sidebar",
icon: IconLayoutSidebarRight,
},
];
const threeColumnPresets: LayoutPreset[] = [
{ layout: "three_equal", label: "Equal columns", icon: IconColumns3 },
{
layout: "three_with_sidebars",
label: "Wide center",
icon: IconLayoutAlignCenter,
},
{
layout: "three_left_wide",
label: "Left wide",
icon: IconLayoutSidebarRight,
},
{ layout: "three_right_wide", label: "Right wide", icon: IconLayoutSidebar },
];
function getPresetsForCount(count: number): LayoutPreset[] {
if (count === 2) return twoColumnPresets;
if (count === 3) return threeColumnPresets;
return [];
}
export function ColumnsMenu({ editor }: EditorMenuProps) {
const { t } = useTranslation();
const [isCountOpen, setIsCountOpen] = useState(false);
const [copied, setCopied] = useState(false);
const copyTimerRef = useRef<ReturnType<typeof setTimeout>>();
const nodesWithMenus = [
"callout",
"image",
"video",
"drawio",
"excalidraw",
"table",
];
const shouldShow = useCallback(
({ state }: ShouldShowProps) => {
if (!state || !isEditorReady(editor)) return false;
if (!editor.isActive("columns")) return false;
if (isTextSelected(editor)) return false;
if (nodesWithMenus.some((name) => editor.isActive(name))) return false;
const parent = findParentNode(
(node: PMNode) => node.type.name === "columns",
)(state.selection);
if (!parent) return false;
const dom = editor.view.nodeDOM(parent.pos) as HTMLElement;
if (!dom) return false;
const rect = dom.getBoundingClientRect();
return rect.bottom > 0 && rect.top < window.innerHeight;
},
[editor],
);
const editorState = useEditorState({
editor,
selector: (ctx) => {
if (!ctx.editor) return null;
const { selection } = ctx.editor.state;
const parent = findParentNode(
(node: PMNode) => node.type.name === "columns",
)(selection);
return {
columnCount: parent?.node.childCount || 2,
layout: (parent?.node.attrs.layout as ColumnsLayout) || "two_equal",
isNormal: ctx.editor.isActive("columns", { widthMode: "normal" }),
isWide: ctx.editor.isActive("columns", { widthMode: "wide" }),
};
},
});
const getReferencedVirtualElement = useCallback(() => {
if (!isEditorReady(editor)) return;
const { selection } = editor.state;
const predicate = (node: PMNode) => node.type.name === "columns";
const parent = findParentNode(predicate)(selection);
if (parent) {
const dom = editor.view.nodeDOM(parent?.pos) as HTMLElement;
const domRect = dom.getBoundingClientRect();
// Columns entirely out of viewport — return real rect so menu goes off-screen
if (domRect.bottom <= 0 || domRect.top >= window.innerHeight) {
return {
getBoundingClientRect: () => domRect,
getClientRects: () => [domRect],
};
}
// Clamp bottom so menu stays within viewport when columns extend below it
// 55px = 15px offset + ~40px menu height
const maxBottom = window.innerHeight - 55;
if (domRect.bottom > maxBottom) {
const clamped = new DOMRect(
domRect.x,
domRect.y,
domRect.width,
maxBottom - domRect.y,
);
return {
getBoundingClientRect: () => clamped,
getClientRects: () => [clamped],
};
}
return {
getBoundingClientRect: () => domRect,
getClientRects: () => [domRect],
};
}
const domRect = posToDOMRect(editor.view, selection.from, selection.to);
return {
getBoundingClientRect: () => domRect,
getClientRects: () => [domRect],
};
}, [editor]);
const setColumnCount = useCallback(
(count: number) => {
editor
.chain()
.focus(undefined, { scrollIntoView: false })
.setColumnCount(count)
.run();
setIsCountOpen(false);
},
[editor],
);
const setLayout = useCallback(
(layout: ColumnsLayout) => {
editor
.chain()
.focus(undefined, { scrollIntoView: false })
.setColumnsLayout(layout)
.run();
},
[editor],
);
const handleCopy = useCallback(() => {
const { state } = editor;
const parent = findParentNode(
(node: PMNode) => node.type.name === "columns",
)(state.selection);
if (!parent) return;
const serializer = DOMSerializer.fromSchema(state.schema);
const dom = serializer.serializeNode(parent.node);
const wrapper = document.createElement("div");
wrapper.appendChild(dom);
const onSuccess = () => {
clearTimeout(copyTimerRef.current);
setCopied(true);
copyTimerRef.current = setTimeout(() => setCopied(false), 1500);
};
if (navigator.clipboard?.write) {
navigator.clipboard
.write([
new ClipboardItem({
"text/html": new Blob([wrapper.innerHTML], { type: "text/html" }),
"text/plain": new Blob([parent.node.textContent], {
type: "text/plain",
}),
}),
])
.then(onSuccess)
.catch(execCommandFallback);
} else {
execCommandFallback();
}
function execCommandFallback() {
wrapper.style.position = "fixed";
wrapper.style.left = "-9999px";
document.body.appendChild(wrapper);
const range = document.createRange();
range.selectNodeContents(wrapper);
const sel = window.getSelection();
sel?.removeAllRanges();
sel?.addRange(range);
document.execCommand("copy");
sel?.removeAllRanges();
document.body.removeChild(wrapper);
editor.view.focus();
onSuccess();
}
}, [editor]);
const handleDelete = useCallback(() => {
const parent = findParentNode(
(node: PMNode) => node.type.name === "columns",
)(editor.state.selection);
if (!parent) return;
editor.chain().focus().setNodeSelection(parent.pos).deleteSelection().run();
}, [editor]);
const columnCount = editorState?.columnCount || 2;
const currentLayout = editorState?.layout || "two_equal";
const presets = getPresetsForCount(columnCount);
return (
<BaseBubbleMenu
editor={editor}
pluginKey="columns-menu"
updateDelay={0}
getReferencedVirtualElement={getReferencedVirtualElement}
options={{
placement: "bottom",
offset: {
mainAxis: 5,
},
flip: false,
}}
shouldShow={shouldShow}
>
<div className={classes.toolbar}>
<Popover opened={isCountOpen} onChange={setIsCountOpen} withArrow>
<Popover.Target>
<Button
variant="subtle"
color="dark"
size="compact-sm"
rightSection={<IconChevronDown size={12} />}
onClick={() => setIsCountOpen(!isCountOpen)}
aria-label={t("Column count")}
>
{t("{{count}} Columns", { count: columnCount })}
</Button>
</Popover.Target>
<Popover.Dropdown p={4}>
<Button.Group orientation="vertical">
{[2, 3, 4, 5].map((n) => (
<Button
key={n}
variant={n === columnCount ? "light" : "subtle"}
color={n === columnCount ? "blue" : "dark"}
justify="space-between"
fullWidth
rightSection={
n === columnCount ? <IconCheck size={14} /> : null
}
onClick={() => setColumnCount(n)}
size="xs"
>
{t("{{count}} Columns", { count: n })}
</Button>
))}
</Button.Group>
</Popover.Dropdown>
</Popover>
{presets.length > 0 && <div className={classes.divider} />}
{presets.map((preset) => (
<Tooltip key={preset.layout} position="top" label={t(preset.label)}>
<ActionIcon
onClick={() => setLayout(preset.layout)}
size="lg"
aria-label={t(preset.label)}
variant="subtle"
className={clsx({
[classes.active]: currentLayout === preset.layout,
})}
>
<preset.icon size={18} />
</ActionIcon>
</Tooltip>
))}
<div className={classes.divider} />
<Tooltip
position="top"
label={copied ? t("Copied") : t("Copy")}
withinPortal={false}
>
<ActionIcon
onClick={handleCopy}
size="lg"
aria-label={t("Copy")}
variant="subtle"
>
{copied ? (
<IconCheck size={18} color="var(--mantine-color-green-6)" />
) : (
<IconCopy size={18} />
)}
</ActionIcon>
</Tooltip>
<Tooltip position="top" label={t("Delete")} withinPortal={false}>
<ActionIcon
onClick={handleDelete}
size="lg"
aria-label={t("Delete")}
variant="subtle"
>
<IconTrash size={18} />
</ActionIcon>
</Tooltip>
</div>
</BaseBubbleMenu>
);
}
export default ColumnsMenu;
apps/client/src/features/editor/components/common/editor-paste-handler.tsx
+165 -8
View File
@@ -1,10 +1,27 @@
import { uploadImageAction } from "@/features/editor/components/image/upload-image-action.tsx";
import { uploadVideoAction } from "@/features/editor/components/video/upload-video-action.tsx";
import { uploadAttachmentAction } from "../attachment/upload-attachment-action";
import { uploadPdfAction } from "../pdf/upload-pdf-action";
import { createMentionAction } from "@/features/editor/components/link/internal-link-paste.ts";
import { INTERNAL_LINK_REGEX } from "@/lib/constants.ts";
import { Editor } from "@tiptap/core";
import { matchIntegrationLink } from "@docmost/editor-ext";
import {
getAttachmentInfo,
uploadFile,
} from "@/features/page/services/page-service.ts";
const ATTACHMENT_NODE_TYPES = [
"image",
"video",
"audio",
"pdf",
"attachment",
"excalidraw",
"drawio",
];
const ATTACHMENT_URL_RE = /\/api\/files\/([0-9a-f-]+)\//;
export const handlePaste = (
editor: Editor,
@@ -35,7 +52,6 @@ export const handlePaste = (
const url = clipboardData.trim();
const { from: pos, empty } = editor.state.selection;
const match = INTERNAL_LINK_REGEX.exec(url);
const currentPageMatch = INTERNAL_LINK_REGEX.exec(window.location.href);
// pasted link must be from the same workspace/domain and must not be on a selection
if (!empty || match[2] !== window.location.host) {
@@ -43,12 +59,6 @@ export const handlePaste = (
return false;
}
// for now, we only support internal links from the same space
// compare space name
if (currentPageMatch[4].toLowerCase() !== match[4].toLowerCase()) {
return false;
}
const anchorId = match[6] ? match[6].split("#")[0] : undefined;
const urlWithoutAnchor = anchorId
? url.substring(0, url.indexOf("#"))
@@ -63,19 +73,165 @@ export const handlePaste = (
return true;
}
if (event.clipboardData?.files.length) {
const htmlData = event.clipboardData?.getData("text/html");
const hasHtmlTable = htmlData && /<table[\s>]/i.test(htmlData);
if (event.clipboardData?.files.length && !hasHtmlTable) {
event.preventDefault();
for (const file of event.clipboardData.files) {
const pos = editor.state.selection.from;
uploadImageAction(file, editor, pos, pageId);
uploadVideoAction(file, editor, pos, pageId);
uploadPdfAction(file, editor, pos, pageId);
uploadAttachmentAction(file, editor, pos, pageId);
}
return true;
}
if (htmlData && ATTACHMENT_URL_RE.test(htmlData)) {
const pasteFrom = editor.state.selection.from;
setTimeout(() => {
reuploadPastedAttachments(editor, pageId, pasteFrom);
}, 0);
}
return false;
};
async function reuploadPastedAttachments(
editor: Editor,
pageId: string,
pasteFrom: number,
) {
const pasteEnd = editor.state.selection.from;
if (pasteEnd <= pasteFrom) return;
type PastedNode = {
pos: number;
attachmentId: string;
nodeTypeName: string;
src?: string;
url?: string;
fileName?: string;
};
const pastedNodes: PastedNode[] = [];
const seenAttachmentIds = new Set<string>();
editor.state.doc.nodesBetween(pasteFrom, pasteEnd, (node, pos) => {
if (!ATTACHMENT_NODE_TYPES.includes(node.type.name)) return;
const attachmentId = node.attrs.attachmentId;
if (!attachmentId) return;
const src = node.attrs.src || node.attrs.url || "";
const match = ATTACHMENT_URL_RE.exec(src);
if (!match) return;
const fileName =
node.attrs.name || src.split("/").pop() || "file";
pastedNodes.push({
pos,
attachmentId,
nodeTypeName: node.type.name,
src: node.attrs.src,
url: node.attrs.url,
fileName,
});
seenAttachmentIds.add(attachmentId);
});
if (pastedNodes.length === 0) return;
const attachmentPageMap = new Map<string, string | null>();
await Promise.all(
[...seenAttachmentIds].map(async (id) => {
try {
const info = await getAttachmentInfo(id);
attachmentPageMap.set(id, info.pageId);
} catch {
attachmentPageMap.set(id, null);
}
}),
);
const nodesToReupload = pastedNodes.filter((n) => {
const ownerPageId = attachmentPageMap.get(n.attachmentId);
return ownerPageId !== null && ownerPageId !== pageId;
});
if (nodesToReupload.length === 0) return;
const uniqueNodes = new Map<string, (typeof nodesToReupload)[0]>();
for (const node of nodesToReupload) {
if (!uniqueNodes.has(node.attachmentId)) {
uniqueNodes.set(node.attachmentId, node);
}
}
const reuploadResults = new Map<
string,
{ id: string; fileName: string; fileSize: number; mimeType: string }
>();
await Promise.all(
[...uniqueNodes.values()].map(async (node) => {
const fileUrl = node.src || node.url;
if (!fileUrl) return;
try {
const response = await fetch(fileUrl, { credentials: "include" });
if (!response.ok) return;
const blob = await response.blob();
const file = new File([blob], node.fileName, { type: blob.type });
const newAttachment = await uploadFile(file, pageId);
reuploadResults.set(node.attachmentId, {
id: newAttachment.id,
fileName: newAttachment.fileName,
fileSize: newAttachment.fileSize,
mimeType: newAttachment.mimeType,
});
} catch {
// keep original reference on failure
}
}),
);
if (reuploadResults.size === 0) return;
editor.chain().command(({ tr }) => {
const sorted = [...nodesToReupload].sort((a, b) => b.pos - a.pos);
for (const pastedNode of sorted) {
const result = reuploadResults.get(pastedNode.attachmentId);
if (!result) continue;
const node = tr.doc.nodeAt(pastedNode.pos);
if (!node || node.attrs.attachmentId !== pastedNode.attachmentId)
continue;
const newAttrs = { ...node.attrs };
newAttrs.attachmentId = result.id;
if (newAttrs.src) {
newAttrs.src = `/api/files/${result.id}/${result.fileName}`;
}
if (newAttrs.url) {
newAttrs.url = `/api/files/${result.id}/${result.fileName}`;
}
if (pastedNode.nodeTypeName === "attachment") {
newAttrs.name = result.fileName;
newAttrs.mime = result.mimeType;
newAttrs.size = result.fileSize;
}
tr.setNodeMarkup(pastedNode.pos, undefined, newAttrs);
}
return true;
}).run();
}
export const handleFileDrop = (
editor: Editor,
event: DragEvent,
@@ -93,6 +249,7 @@ export const handleFileDrop = (
uploadImageAction(file, editor, coordinates?.pos ?? 0 - 1, pageId);
uploadVideoAction(file, editor, coordinates?.pos ?? 0 - 1, pageId);
uploadPdfAction(file, editor, coordinates?.pos ?? 0 - 1, pageId);
uploadAttachmentAction(file, editor, coordinates?.pos ?? 0 - 1, pageId);
}
return true;
apps/client/src/features/editor/components/common/node-resize-handles.ts
+35
View File
@@ -0,0 +1,35 @@
import classes from "./node-resize.module.css";
import { ResizableNodeViewDirection } from "@docmost/editor-ext";
export function createResizeHandle(
direction: ResizableNodeViewDirection,
): HTMLElement {
const handle = document.createElement("div");
handle.dataset.resizeHandle = direction;
handle.style.position = "absolute";
handle.className = classes.handle;
if (direction === "left") {
handle.style.left = "-8px";
handle.style.top = "0";
handle.style.bottom = "0";
} else if (direction === "right") {
handle.style.right = "-8px";
handle.style.top = "0";
handle.style.bottom = "0";
}
const bar = document.createElement("div");
bar.className = classes.handleBar;
handle.appendChild(bar);
return handle;
}
export function buildResizeClasses(nodeClass: string) {
return {
container: `${classes.container} ${nodeClass}`,
wrapper: classes.wrapper,
resizing: classes.resizing,
};
}
apps/client/src/features/editor/components/common/node-resize.module.css
+75
View File
@@ -0,0 +1,75 @@
.container {
display: flex;
}
.wrapper {
position: relative;
border-radius: 8px;
overflow: visible;
max-width: 100%;
}
.wrapper img,
.wrapper video {
height: auto !important;
}
.resizing {
user-select: none;
}
.handle {
position: absolute;
top: 0;
bottom: 0;
width: 16px;
display: flex;
align-items: center;
justify-content: center;
cursor: ew-resize;
opacity: 0;
transition: opacity 0.2s ease;
z-index: 2;
}
.handle[data-resize-handle="left"] {
left: -8px;
}
.handle[data-resize-handle="right"] {
right: -8px;
}
.wrapper:hover .handle {
opacity: 1;
}
.container:global(.ProseMirror-selectednode) .handle {
opacity: 1;
}
.resizing .handle {
opacity: 1;
}
.handleBar {
width: 4px;
height: 48px;
border-radius: 4px;
transition: background-color 0.15s ease;
background-color: light-dark(var(--mantine-color-blue-4), var(--mantine-color-blue-5));
}
.handle:hover .handleBar {
background-color: light-dark(var(--mantine-color-blue-6), var(--mantine-color-blue-4));
}
.resizing .handleBar {
background-color: light-dark(var(--mantine-color-blue-6), var(--mantine-color-blue-4));
}
@media print {
.handle {
display: none !important;
}
}
apps/client/src/features/editor/components/common/resizable-wrapper.module.css
+148 -52
View File
@@ -1,13 +1,11 @@
.wrapper {
position: relative;
width: 100%;
overflow: hidden;
overflow: visible;
border-radius: 8px;
}
.resizing {
user-select: none;
cursor: ns-resize;
}
.overlay {
@@ -20,12 +18,118 @@
background: transparent;
}
.cornerHandle {
position: absolute;
width: 24px;
height: 24px;
z-index: 2;
opacity: 0;
transition: opacity 0.2s ease;
touch-action: none;
-webkit-user-select: none;
user-select: none;
&::before,
&::after {
content: "";
position: absolute;
border-radius: 1px;
background-color: light-dark(
var(--mantine-color-blue-4),
var(--mantine-color-blue-5)
);
transition: background-color 0.15s ease;
}
&::before {
width: 20px;
height: 3px;
}
&::after {
width: 3px;
height: 20px;
}
&:hover::before,
&:hover::after {
background-color: light-dark(
var(--mantine-color-blue-6),
var(--mantine-color-blue-4)
);
}
}
.cornerHandleTL {
top: -2px;
left: -2px;
cursor: nwse-resize;
&::before {
top: 0;
left: 0;
}
&::after {
top: 0;
left: 0;
}
}
.cornerHandleTR {
top: -2px;
right: -2px;
cursor: nesw-resize;
&::before {
top: 0;
right: 0;
}
&::after {
top: 0;
right: 0;
}
}
.cornerHandleBL {
bottom: -2px;
left: -2px;
cursor: nesw-resize;
&::before {
bottom: 0;
left: 0;
}
&::after {
bottom: 0;
left: 0;
}
}
.cornerHandleBR {
bottom: -2px;
right: -2px;
cursor: nwse-resize;
&::before {
bottom: 0;
right: 0;
}
&::after {
bottom: 0;
right: 0;
}
}
.resizeHandleBottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 24px;
bottom: -4px;
left: 20px;
right: 20px;
height: 12px;
cursor: ns-resize;
opacity: 0;
transition: opacity 0.2s ease;
@@ -36,61 +140,53 @@
touch-action: none;
-webkit-user-select: none;
user-select: none;
@mixin light {
background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.05));
}
@mixin dark {
background: linear-gradient(
to bottom,
transparent,
rgba(255, 255, 255, 0.05)
);
}
&:hover {
@mixin light {
background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1));
}
@mixin dark {
background: linear-gradient(
to bottom,
transparent,
rgba(255, 255, 255, 0.1)
);
}
}
}
.wrapper:hover .resizeHandleBottom,
.resizing .resizeHandleBottom {
opacity: 1;
}
.resizeBar {
width: 50px;
height: 4px;
height: 3px;
border-radius: 2px;
transition: background-color 0.2s ease;
transition: background-color 0.15s ease;
background-color: light-dark(
var(--mantine-color-blue-4),
var(--mantine-color-blue-5)
);
}
@mixin light {
background-color: var(--mantine-color-gray-5);
}
.resizeHandleBottom:hover .resizeBar {
background-color: light-dark(
var(--mantine-color-blue-6),
var(--mantine-color-blue-4)
);
}
@mixin dark {
background-color: var(--mantine-color-gray-6);
}
.wrapper:hover .cornerHandle,
.wrapper:hover .resizeHandleBottom,
.wrapper:global(.ProseMirror-selectednode) .cornerHandle,
.wrapper:global(.ProseMirror-selectednode) .resizeHandleBottom,
.resizing .cornerHandle,
.resizing .resizeHandleBottom {
opacity: 1;
}
.resizing .cornerHandle::before,
.resizing .cornerHandle::after {
background-color: light-dark(
var(--mantine-color-blue-6),
var(--mantine-color-blue-4)
);
}
.resizeHandleBottom:hover .resizeBar,
.resizing .resizeBar {
@mixin light {
background-color: var(--mantine-color-gray-7);
}
background-color: light-dark(
var(--mantine-color-blue-6),
var(--mantine-color-blue-4)
);
}
@mixin dark {
background-color: var(--mantine-color-gray-4);
@media print {
.cornerHandle,
.resizeHandleBottom {
display: none !important;
}
}
apps/client/src/features/editor/components/common/resizable-wrapper.tsx
+123 -62
View File
@@ -2,111 +2,172 @@ import React, { ReactNode, useCallback, useEffect, useRef, useState } from "reac
import clsx from "clsx";
import classes from "./resizable-wrapper.module.css";
type Handle = "tl" | "tr" | "bl" | "br" | "bottom";
const HANDLE_SIGN: Record<Handle, { x: number; y: number }> = {
br: { x: 1, y: 1 },
bl: { x: -1, y: 1 },
tr: { x: 1, y: -1 },
tl: { x: -1, y: -1 },
bottom: { x: 0, y: 1 },
};
const HANDLE_CURSOR: Record<Handle, string> = {
br: "nwse-resize",
tl: "nwse-resize",
bl: "nesw-resize",
tr: "nesw-resize",
bottom: "ns-resize",
};
const CORNER_CLASSES: Record<string, string> = {
tl: classes.cornerHandleTL,
tr: classes.cornerHandleTR,
bl: classes.cornerHandleBL,
br: classes.cornerHandleBR,
};
interface ResizableWrapperProps {
children: ReactNode;
initialWidth?: number;
initialHeight?: number;
minWidth?: number;
maxWidth?: number;
minHeight?: number;
maxHeight?: number;
onResize?: (height: number) => void;
onResize?: (width: number, height: number) => void;
isEditable?: boolean;
className?: string;
showHandles?: "always" | "hover";
direction?: "vertical" | "horizontal" | "both";
selected?: boolean;
}
type DragState = {
handle: Handle;
startX: number;
startY: number;
startWidth: number;
startHeight: number;
};
export const ResizableWrapper: React.FC<ResizableWrapperProps> = ({
children,
initialWidth = 640,
initialHeight = 480,
minWidth = 200,
maxWidth = 1200,
minHeight = 200,
maxHeight = 1200,
onResize,
isEditable = true,
className,
showHandles = "hover",
direction = "vertical",
selected = false,
}) => {
const [resizeParams, setResizeParams] = useState<{
initialSize: number;
initialClientY: number;
initialClientX: number;
} | null>(null);
const [currentHeight, setCurrentHeight] = useState(initialHeight);
const [isResizing, setIsResizing] = useState(false);
const [isHovered, setIsHovered] = useState(false);
const wrapperRef = useRef<HTMLDivElement>(null);
const dragRef = useRef<DragState | null>(null);
const widthRef = useRef(initialWidth);
const heightRef = useRef(initialHeight);
const onResizeRef = useRef(onResize);
onResizeRef.current = onResize;
const constraintsRef = useRef({ minWidth, maxWidth, minHeight, maxHeight });
constraintsRef.current = { minWidth, maxWidth, minHeight, maxHeight };
useEffect(() => {
if (!resizeParams) return;
if (!dragRef.current && wrapperRef.current) {
widthRef.current = initialWidth;
heightRef.current = initialHeight;
wrapperRef.current.style.width = `${initialWidth}px`;
wrapperRef.current.style.height = `${initialHeight}px`;
}
}, [initialWidth, initialHeight]);
const handleMouseMove = (e: MouseEvent) => {
if (!wrapperRef.current) return;
const handleMouseMove = useRef((e: MouseEvent) => {
const drag = dragRef.current;
if (!drag || !wrapperRef.current) return;
if (direction === "vertical" || direction === "both") {
const deltaY = e.clientY - resizeParams.initialClientY;
const newHeight = Math.min(
Math.max(resizeParams.initialSize + deltaY, minHeight),
maxHeight
);
setCurrentHeight(newHeight);
wrapperRef.current.style.height = `${newHeight}px`;
}
const sign = HANDLE_SIGN[drag.handle];
const { minWidth, maxWidth, minHeight, maxHeight } = constraintsRef.current;
const deltaY = e.clientY - drag.startY;
const newHeight = Math.min(Math.max(drag.startHeight + deltaY * sign.y, minHeight), maxHeight);
heightRef.current = newHeight;
wrapperRef.current.style.height = `${newHeight}px`;
if (sign.x !== 0) {
const deltaX = e.clientX - drag.startX;
const newWidth = Math.min(Math.max(drag.startWidth + deltaX * sign.x, minWidth), maxWidth);
widthRef.current = newWidth;
wrapperRef.current.style.width = `${newWidth}px`;
}
}).current;
const handleMouseUp = useRef(() => {
dragRef.current = null;
setIsResizing(false);
document.body.style.cursor = "";
document.body.style.userSelect = "";
document.removeEventListener("mousemove", handleMouseMove);
document.removeEventListener("mouseup", handleMouseUp);
onResizeRef.current?.(widthRef.current, heightRef.current);
}).current;
const handleResizeStart = useCallback((e: React.MouseEvent, handle: Handle) => {
e.preventDefault();
e.stopPropagation();
dragRef.current = {
handle,
startX: e.clientX,
startY: e.clientY,
startWidth: widthRef.current,
startHeight: heightRef.current,
};
const handleMouseUp = () => {
setResizeParams(null);
if (onResize && currentHeight !== initialHeight) {
onResize(currentHeight);
}
document.body.style.cursor = "";
document.body.style.userSelect = "";
};
setIsResizing(true);
document.body.style.cursor = HANDLE_CURSOR[handle];
document.body.style.userSelect = "none";
document.addEventListener("mousemove", handleMouseMove);
document.addEventListener("mouseup", handleMouseUp);
}, [handleMouseMove, handleMouseUp]);
useEffect(() => {
return () => {
document.removeEventListener("mousemove", handleMouseMove);
document.removeEventListener("mouseup", handleMouseUp);
};
}, [resizeParams, currentHeight, initialHeight, onResize, minHeight, maxHeight, direction]);
}, [handleMouseMove, handleMouseUp]);
const handleResizeStart = useCallback((e: React.MouseEvent) => {
e.preventDefault();
e.stopPropagation();
setResizeParams({
initialSize: currentHeight,
initialClientY: e.clientY,
initialClientX: e.clientX,
});
document.body.style.cursor = "ns-resize";
document.body.style.userSelect = "none";
}, [currentHeight]);
const shouldShowHandles =
isEditable &&
(showHandles === "always" || (showHandles === "hover" && (isHovered || resizeParams)));
const shouldShowHandles = isEditable && (isHovered || isResizing || selected);
return (
<div
ref={wrapperRef}
className={clsx(classes.wrapper, className, {
[classes.resizing]: !!resizeParams,
[classes.resizing]: isResizing,
})}
style={{ height: currentHeight }}
style={{ width: widthRef.current, height: heightRef.current }}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
{children}
{!!resizeParams && <div className={classes.overlay} />}
{shouldShowHandles && direction === "vertical" && (
<div
className={classes.resizeHandleBottom}
onMouseDown={handleResizeStart}
>
<div className={classes.resizeBar} />
</div>
{isResizing && <div className={classes.overlay} />}
{shouldShowHandles && (
<>
{(["tl", "tr", "bl", "br"] as const).map((corner) => (
<div
key={corner}
className={clsx(classes.cornerHandle, CORNER_CLASSES[corner])}
onMouseDown={(e) => handleResizeStart(e, corner)}
/>
))}
<div
className={classes.resizeHandleBottom}
onMouseDown={(e) => handleResizeStart(e, "bottom")}
>
<div className={classes.resizeBar} />
</div>
</>
)}
</div>
);
};
};
apps/client/src/features/editor/components/common/toolbar-menu.module.css
+29
View File
@@ -0,0 +1,29 @@
.toolbar {
display: flex;
align-items: center;
gap: 2px;
padding: 3px;
border-radius: 8px;
border: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
box-shadow: 0 2px 12px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.35));
}
.toolbar :global(.mantine-ActionIcon-root) {
--ai-color: light-dark(var(--mantine-color-dark-7), var(--mantine-color-gray-4)) !important;
--ai-hover: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5)) !important;
}
.toolbar .active {
--ai-color: light-dark(var(--mantine-color-blue-7), var(--mantine-color-blue-3)) !important;
--ai-hover: light-dark(var(--mantine-color-blue-0), var(--mantine-color-dark-5)) !important;
background-color: light-dark(var(--mantine-color-blue-0), var(--mantine-color-dark-5));
}
.divider {
width: 1px;
height: 16px;
align-self: center;
margin: 0 2px;
background-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-3));
}
apps/client/src/features/editor/components/common/use-alt-text-control.tsx
+139
View File
@@ -0,0 +1,139 @@
import React, { useCallback, useEffect, useState } from "react";
import { Editor } from "@tiptap/react";
import {
ActionIcon,
Button,
Group,
Paper,
Text,
Textarea,
Tooltip,
} from "@mantine/core";
import { IconAlt } from "@tabler/icons-react";
import { useTranslation } from "react-i18next";
const ALT_MAX_LENGTH = 300;
function sanitizeAlt(value: string): string {
return value
.replace(/[\\\[\]!]/g, "")
.replace(/\s+/g, " ")
.trim();
}
type UseAltTextControlArgs = {
editor: Editor;
nodeName: string;
currentAlt: string;
};
export function useAltTextControl({
editor,
nodeName,
currentAlt,
}: UseAltTextControlArgs) {
const { t } = useTranslation();
const [showInput, setShowInput] = useState(false);
const [draft, setDraft] = useState("");
const open = useCallback(() => {
setDraft(currentAlt || "");
setShowInput(true);
}, [currentAlt]);
useEffect(() => {
const handler = () => {
if (!editor.isActive(nodeName)) {
setShowInput(false);
}
};
editor.on("selectionUpdate", handler);
return () => {
editor.off("selectionUpdate", handler);
};
}, [editor, nodeName]);
const cancel = useCallback(() => {
setShowInput(false);
}, []);
const save = useCallback(() => {
editor
.chain()
.focus(undefined, { scrollIntoView: false })
.updateAttributes(nodeName, { alt: sanitizeAlt(draft) || undefined })
.run();
setShowInput(false);
}, [editor, nodeName, draft]);
const onKeyDown = useCallback(
(e: React.KeyboardEvent) => {
if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
e.preventDefault();
save();
} else if (e.key === "Escape") {
e.preventDefault();
cancel();
}
},
[save, cancel],
);
const button = (
<Tooltip position="top" label={t("Alt text")} withinPortal={false}>
<ActionIcon
onClick={open}
size="lg"
aria-label={t("Alt text")}
variant="subtle"
>
<IconAlt size={18} />
</ActionIcon>
</Tooltip>
);
const panel = showInput ? (
<Paper
withBorder
shadow="md"
radius={6}
p="sm"
w={320}
style={{ position: "relative", zIndex: 100 }}
>
<Text size="sm" fw={600} mb={2}>
{t("Alt text")}
</Text>
<Text size="xs" c="dimmed" mb="xs">
{t("Describe this for accessibility.")}
</Text>
<Textarea
size="xs"
placeholder={t("Add a description")}
value={draft}
onChange={(e) => setDraft(e.currentTarget.value)}
onKeyDown={onKeyDown}
autoFocus
autosize
minRows={2}
maxRows={5}
maxLength={ALT_MAX_LENGTH}
/>
<Group justify="space-between" align="center" mt="xs" wrap="nowrap">
<Text size="xs" c="dimmed">
{draft.length}/{ALT_MAX_LENGTH}
</Text>
<Group gap="xs">
<Button size="compact-xs" variant="default" onClick={cancel}>
{t("Cancel")}
</Button>
<Button size="compact-xs" onClick={save}>
{t("Save")}
</Button>
</Group>
</Group>
</Paper>
) : null;
return { button, panel, isEditing: showInput };
}
apps/client/src/features/editor/components/drawio/drawio-menu.tsx
+360 -42
View File
@@ -1,24 +1,56 @@
import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
import { useCallback } from "react";
import { Node as PMNode } from "prosemirror-model";
import { useCallback, useEffect, useRef, useState } from "react";
import { Node as PMNode } from "@tiptap/pm/model";
import { isEditorReady } from "@docmost/editor-ext";
import {
EditorMenuProps,
ShouldShowProps,
} from "@/features/editor/components/table/types/types.ts";
import { NodeWidthResize } from "@/features/editor/components/common/node-width-resize.tsx";
import {
ActionIcon,
LoadingOverlay,
Modal,
Text,
Tooltip,
useComputedColorScheme,
} from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import clsx from "clsx";
import {
IconLayoutAlignCenter,
IconLayoutAlignLeft,
IconLayoutAlignRight,
IconDownload,
IconEdit,
IconTrash,
} from "@tabler/icons-react";
import { useTranslation } from "react-i18next";
import { getDrawioUrl, getFileUrl } from "@/lib/config.ts";
import { uploadFile } from "@/features/page/services/page-service.ts";
import {
DrawIoEmbed,
DrawIoEmbedRef,
EventExit,
EventExport,
EventSave,
} from "react-drawio";
import { decodeBase64ToSvgString, svgStringToFile } from "@/lib/utils";
import { IAttachment } from "@/features/attachments/types/attachment.types";
import { modals } from "@mantine/modals";
import { useAltTextControl } from "@/features/editor/components/common/use-alt-text-control.tsx";
import classes from "../common/toolbar-menu.module.css";
export function DrawioMenu({ editor }: EditorMenuProps) {
const shouldShow = useCallback(
({ state }: ShouldShowProps) => {
if (!state) {
return false;
}
return editor.isActive("drawio") && editor.getAttributes("drawio")?.src;
},
[editor],
);
const { t } = useTranslation();
const [opened, { open, close }] = useDisclosure(false);
const [initialXML, setInitialXML] = useState<string>("");
const drawioRef = useRef<DrawIoEmbedRef>(null);
const computedColorScheme = useComputedColorScheme();
const isDirtyRef = useRef(false);
const isSavingRef = useRef(false);
const [isSaving, setIsSaving] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const editorState = useEditorState({
editor,
@@ -30,13 +62,29 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
const drawioAttr = ctx.editor.getAttributes("drawio");
return {
isDrawio: ctx.editor.isActive("drawio"),
width: drawioAttr?.width ? parseInt(drawioAttr.width) : null,
isAlignLeft: ctx.editor.isActive("drawio", { align: "left" }),
isAlignCenter: ctx.editor.isActive("drawio", { align: "center" }),
isAlignRight: ctx.editor.isActive("drawio", { align: "right" }),
src: drawioAttr?.src || null,
attachmentId: drawioAttr?.attachmentId || null,
alt: drawioAttr?.alt || "",
};
},
});
const shouldShow = useCallback(
({ state }: ShouldShowProps) => {
if (!state) {
return false;
}
return editor.isActive("drawio") && editor.getAttributes("drawio")?.src;
},
[editor],
);
const getReferencedVirtualElement = useCallback(() => {
if (!editor) return;
if (!isEditorReady(editor)) return;
const { selection } = editor.state;
const predicate = (node: PMNode) => node.type.name === "drawio";
const parent = findParentNode(predicate)(selection);
@@ -57,38 +105,308 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
};
}, [editor]);
const onWidthChange = useCallback(
(value: number) => {
editor.commands.updateAttributes("drawio", { width: `${value}%` });
},
[editor],
);
const alignLeft = useCallback(() => {
editor
.chain()
.focus(undefined, { scrollIntoView: false })
.setDrawioAlign("left")
.run();
}, [editor]);
const alignCenter = useCallback(() => {
editor
.chain()
.focus(undefined, { scrollIntoView: false })
.setDrawioAlign("center")
.run();
}, [editor]);
const alignRight = useCallback(() => {
editor
.chain()
.focus(undefined, { scrollIntoView: false })
.setDrawioAlign("right")
.run();
}, [editor]);
const handleDownload = useCallback(() => {
if (!editorState?.src) return;
const url = getFileUrl(editorState.src);
const a = document.createElement("a");
a.href = url;
a.download = "";
a.click();
}, [editorState?.src]);
const handleDelete = useCallback(() => {
editor.commands.deleteSelection();
}, [editor]);
const {
button: altTextButton,
panel: altTextPanel,
isEditing: isEditingAlt,
} = useAltTextControl({
editor,
nodeName: "drawio",
currentAlt: editorState?.alt || "",
});
const saveData = useCallback(async (svgXml: string) => {
if (isSavingRef.current) return;
isSavingRef.current = true;
setIsSaving(true);
try {
const svgString = decodeBase64ToSvgString(svgXml);
const fileName = "diagram.drawio.svg";
const drawioSVGFile = await svgStringToFile(svgString, fileName);
// @ts-ignore
const pageId = editor.storage?.pageId;
const attachmentId = editorState?.attachmentId;
let attachment: IAttachment = null;
if (attachmentId) {
attachment = await uploadFile(drawioSVGFile, pageId, attachmentId);
} else {
attachment = await uploadFile(drawioSVGFile, pageId);
}
editor.commands.updateAttributes("drawio", {
src: `/api/files/${attachment.id}/${attachment.fileName}?t=${new Date(attachment.updatedAt).getTime()}`,
title: attachment.fileName,
size: attachment.fileSize,
attachmentId: attachment.id,
});
isDirtyRef.current = false;
} finally {
isSavingRef.current = false;
setIsSaving(false);
}
}, [editor, editorState?.attachmentId]);
const handleClose = useCallback(() => {
if (!isDirtyRef.current) {
close();
return;
}
modals.openConfirmModal({
title: t("Unsaved changes"),
children: (
<Text size="sm">
{t("You have unsaved changes that will be lost.")}
</Text>
),
centered: true,
labels: { confirm: t("Discard"), cancel: t("Cancel") },
confirmProps: { color: "red" },
onConfirm: () => {
isDirtyRef.current = false;
close();
},
});
}, [close, t]);
const handleOpen = useCallback(async () => {
if (!editorState?.src) return;
setIsLoading(true);
try {
const url = getFileUrl(editorState.src);
const request = await fetch(url, {
credentials: "include",
cache: "no-store",
});
const blob = await request.blob();
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = () => {
const base64data = (reader.result || "") as string;
setInitialXML(base64data);
};
} catch (err) {
console.error(err);
} finally {
setIsLoading(false);
isDirtyRef.current = false;
open();
}
}, [editorState?.src, open]);
useEffect(() => {
if (!opened) return;
const interval = setInterval(() => {
if (isDirtyRef.current && !isSavingRef.current && drawioRef.current) {
drawioRef.current.exportDiagram({ format: "xmlsvg" });
}
}, 60_000);
return () => clearInterval(interval);
}, [opened]);
useEffect(() => {
if (!opened) return;
const onKeyDown = (e: KeyboardEvent) => {
if (e.key === "Escape") {
e.preventDefault();
handleClose();
}
};
document.addEventListener("keydown", onKeyDown);
return () => document.removeEventListener("keydown", onKeyDown);
}, [opened, handleClose]);
return (
<BaseBubbleMenu
editor={editor}
pluginKey={`drawio-menu`}
updateDelay={0}
getReferencedVirtualElement={getReferencedVirtualElement}
options={{
placement: "top",
offset: 8,
flip: false,
}}
shouldShow={shouldShow}
>
<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
<>
<BaseBubbleMenu
editor={editor}
pluginKey={`drawio-menu`}
updateDelay={0}
getReferencedVirtualElement={getReferencedVirtualElement}
options={{
placement: "top",
offset: 8,
flip: false,
}}
shouldShow={shouldShow}
>
{editorState?.width && (
<NodeWidthResize onChange={onWidthChange} value={editorState.width} />
{isEditingAlt ? (
altTextPanel
) : (
<div className={classes.toolbar}>
<Tooltip position="top" label={t("Align left")} withinPortal={false}>
<ActionIcon
onClick={alignLeft}
size="lg"
aria-label={t("Align left")}
variant="subtle"
className={clsx({ [classes.active]: editorState?.isAlignLeft })}
>
<IconLayoutAlignLeft size={18} />
</ActionIcon>
</Tooltip>
<Tooltip
position="top"
label={t("Align center")}
withinPortal={false}
>
<ActionIcon
onClick={alignCenter}
size="lg"
aria-label={t("Align center")}
variant="subtle"
className={clsx({ [classes.active]: editorState?.isAlignCenter })}
>
<IconLayoutAlignCenter size={18} />
</ActionIcon>
</Tooltip>
<Tooltip position="top" label={t("Align right")}>
<ActionIcon
onClick={alignRight}
size="lg"
aria-label={t("Align right")}
variant="subtle"
className={clsx({ [classes.active]: editorState?.isAlignRight })}
>
<IconLayoutAlignRight size={18} />
</ActionIcon>
</Tooltip>
<div className={classes.divider} />
{altTextButton}
<div className={classes.divider} />
<Tooltip position="top" label={t("Edit")} withinPortal={false}>
<ActionIcon
onClick={handleOpen}
size="lg"
aria-label={t("Edit")}
variant="subtle"
loading={isLoading}
>
<IconEdit size={18} />
</ActionIcon>
</Tooltip>
<Tooltip position="top" label={t("Download")} withinPortal={false}>
<ActionIcon
onClick={handleDownload}
size="lg"
aria-label={t("Download")}
variant="subtle"
>
<IconDownload size={18} />
</ActionIcon>
</Tooltip>
<Tooltip position="top" label={t("Delete")} withinPortal={false}>
<ActionIcon
onClick={handleDelete}
size="lg"
aria-label={t("Delete")}
variant="subtle"
>
<IconTrash size={18} />
</ActionIcon>
</Tooltip>
</div>
)}
</div>
</BaseBubbleMenu>
</BaseBubbleMenu>
<Modal.Root opened={opened} onClose={handleClose} fullScreen closeOnEscape={false}>
<Modal.Overlay />
<Modal.Content style={{ overflow: "hidden" }}>
<Modal.Body pos="relative">
<LoadingOverlay visible={isSaving} />
<div style={{ height: "100vh" }}>
<DrawIoEmbed
ref={drawioRef}
xml={initialXML}
baseUrl={getDrawioUrl()}
autosave
urlParameters={{
ui: computedColorScheme === "light" ? "kennedy" : "dark",
spin: true,
libraries: true,
saveAndExit: true,
noSaveBtn: true,
}}
onSave={(data: EventSave) => {
if (data.parentEvent !== "save") {
return;
}
saveData(data.xml).then(() => close()).catch(() => {});
}}
onClose={(data: EventExit) => {
if (data.parentEvent) {
return;
}
handleClose();
}}
onAutoSave={() => {
isDirtyRef.current = true;
}}
onExport={(data: EventExport) => {
saveData(data.data).catch(() => {});
}}
/>
</div>
</Modal.Body>
</Modal.Content>
</Modal.Root>
</>
);
}
apps/client/src/features/editor/components/drawio/drawio-view.tsx
+132 -102
View File
@@ -2,19 +2,20 @@ import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
import {
ActionIcon,
Card,
Image,
LoadingOverlay,
Modal,
Text,
useComputedColorScheme,
} from "@mantine/core";
import { useRef, useState } from "react";
import { useCallback, useEffect, useRef, useState } from "react";
import { uploadFile } from "@/features/page/services/page-service.ts";
import { useDisclosure } from "@mantine/hooks";
import { getDrawioUrl, getFileUrl } from "@/lib/config.ts";
import { getDrawioUrl } from "@/lib/config.ts";
import {
DrawIoEmbed,
DrawIoEmbedRef,
EventExit,
EventExport,
EventSave,
} from "react-drawio";
import { IAttachment } from "@/features/attachments/types/attachment.types";
@@ -22,82 +23,137 @@ import { decodeBase64ToSvgString, svgStringToFile } from "@/lib/utils";
import clsx from "clsx";
import { IconEdit } from "@tabler/icons-react";
import { useTranslation } from "react-i18next";
import { modals } from "@mantine/modals";
export default function DrawioView(props: NodeViewProps) {
const { t } = useTranslation();
const { node, updateAttributes, editor, selected } = props;
const { src, title, width, attachmentId } = node.attrs;
const { attachmentId } = node.attrs;
const drawioRef = useRef<DrawIoEmbedRef>(null);
const [initialXML, setInitialXML] = useState<string>("");
const [opened, { open, close }] = useDisclosure(false);
const computedColorScheme = useComputedColorScheme();
const isDirtyRef = useRef(false);
const isSavingRef = useRef(false);
const [isSaving, setIsSaving] = useState(false);
const handleOpen = async () => {
if (!editor.isEditable) {
return;
}
isDirtyRef.current = false;
open();
};
const saveData = async (svgXml: string, updateSrc = true) => {
if (isSavingRef.current) return;
isSavingRef.current = true;
setIsSaving(true);
try {
if (src) {
const url = getFileUrl(src);
const request = await fetch(url, {
credentials: "include",
cache: "no-store",
});
const blob = await request.blob();
const svgString = decodeBase64ToSvgString(svgXml);
const fileName = "diagram.drawio.svg";
const drawioSVGFile = await svgStringToFile(svgString, fileName);
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = () => {
const base64data = (reader.result || "") as string;
setInitialXML(base64data);
};
//@ts-ignore
const pageId = editor.storage?.pageId;
let attachment: IAttachment = null;
if (attachmentId) {
attachment = await uploadFile(drawioSVGFile, pageId, attachmentId);
} else {
attachment = await uploadFile(drawioSVGFile, pageId);
}
} catch (err) {
console.error(err);
if (updateSrc) {
updateAttributes({
src: `/api/files/${attachment.id}/${attachment.fileName}?t=${new Date(attachment.updatedAt).getTime()}`,
title: attachment.fileName,
size: attachment.fileSize,
attachmentId: attachment.id,
});
} else {
updateAttributes({
attachmentId: attachment.id,
});
}
isDirtyRef.current = false;
} finally {
open();
isSavingRef.current = false;
setIsSaving(false);
}
};
const handleSave = async (data: EventSave) => {
const svgString = decodeBase64ToSvgString(data.xml);
const fileName = "diagram.drawio.svg";
const drawioSVGFile = await svgStringToFile(svgString, fileName);
//@ts-ignore
const pageId = editor.storage?.pageId;
let attachment: IAttachment = null;
if (attachmentId) {
attachment = await uploadFile(drawioSVGFile, pageId, attachmentId);
} else {
attachment = await uploadFile(drawioSVGFile, pageId);
const handleClose = useCallback(() => {
if (!isDirtyRef.current) {
close();
return;
}
updateAttributes({
src: `/api/files/${attachment.id}/${attachment.fileName}?t=${new Date(attachment.updatedAt).getTime()}`,
title: attachment.fileName,
size: attachment.fileSize,
attachmentId: attachment.id,
modals.openConfirmModal({
title: t("Unsaved changes"),
children: (
<Text size="sm">
{t("You have unsaved changes that will be lost.")}
</Text>
),
centered: true,
labels: { confirm: t("Discard"), cancel: t("Cancel") },
confirmProps: { color: "red" },
onConfirm: () => {
isDirtyRef.current = false;
close();
},
});
}, [close, t]);
close();
};
useEffect(() => {
if (!opened) return;
const interval = setInterval(() => {
if (isDirtyRef.current && !isSavingRef.current && drawioRef.current) {
drawioRef.current.exportDiagram({ format: "xmlsvg" });
}
}, 30_000);
return () => clearInterval(interval);
}, [opened]);
useEffect(() => {
if (!opened) return;
const onKeyDown = (e: KeyboardEvent) => {
if (e.key === "Escape") {
e.preventDefault();
handleClose();
}
};
document.addEventListener("keydown", onKeyDown);
return () => document.removeEventListener("keydown", onKeyDown);
}, [opened, handleClose]);
return (
<NodeViewWrapper data-drag-handle>
<Modal.Root opened={opened} onClose={close} fullScreen>
<Modal.Root
opened={opened}
onClose={handleClose}
fullScreen
closeOnEscape={false}
aria-label={t("Diagram editor")}
>
<Modal.Overlay />
<Modal.Content style={{ overflow: "hidden" }}>
<Modal.Body>
<Modal.Body pos="relative">
<LoadingOverlay visible={isSaving} />
<div style={{ height: "100vh" }}>
<DrawIoEmbed
ref={drawioRef}
xml={initialXML}
baseUrl={getDrawioUrl()}
autosave
urlParameters={{
ui: computedColorScheme === "light" ? "kennedy" : "dark",
spin: true,
@@ -106,18 +162,22 @@ export default function DrawioView(props: NodeViewProps) {
noSaveBtn: true,
}}
onSave={(data: EventSave) => {
// If the save is triggered by another event, then do nothing
if (data.parentEvent !== "save") {
return;
}
handleSave(data);
saveData(data.xml, true).then(() => close()).catch(() => {});
}}
onClose={(data: EventExit) => {
// If the exit is triggered by another event, then do nothing
if (data.parentEvent) {
return;
}
close();
handleClose();
}}
onAutoSave={() => {
isDirtyRef.current = true;
}}
onExport={(data: EventExport) => {
saveData(data.data, false).catch(() => {});
}}
/>
</div>
@@ -125,62 +185,32 @@ export default function DrawioView(props: NodeViewProps) {
</Modal.Content>
</Modal.Root>
{src ? (
<div style={{ position: "relative" }}>
<Image
onClick={(e) => e.detail === 2 && handleOpen()}
radius="md"
fit="contain"
w={width}
src={getFileUrl(src)}
alt={title}
className={clsx(
selected ? "ProseMirror-selectednode" : "",
"alignCenter",
)}
/>
<Card
radius="md"
onClick={(e) => e.detail === 2 && handleOpen()}
p="xs"
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
withBorder
className={clsx(selected ? "ProseMirror-selectednode" : "")}
>
<div style={{ display: "flex", alignItems: "center" }}>
<ActionIcon
variant="transparent"
color="gray"
aria-label={t("Edit diagram")}
>
<IconEdit size={18} />
</ActionIcon>
{selected && editor.isEditable && (
<ActionIcon
onClick={handleOpen}
variant="default"
color="gray"
mx="xs"
className="print-hide"
style={{
position: "absolute",
top: 8,
right: 8,
}}
>
<IconEdit size={18} />
</ActionIcon>
)}
<Text component="span" size="lg" c="dimmed">
{t("Double-click to edit Draw.io diagram")}
</Text>
</div>
) : (
<Card
radius="md"
onClick={(e) => e.detail === 2 && handleOpen()}
p="xs"
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
withBorder
className={clsx(selected ? "ProseMirror-selectednode" : "")}
>
<div style={{ display: "flex", alignItems: "center" }}>
<ActionIcon variant="transparent" color="gray">
<IconEdit size={18} />
</ActionIcon>
<Text component="span" size="lg" c="dimmed">
{t("Double-click to edit Draw.io diagram")}
</Text>
</div>
</Card>
)}
</Card>
</NodeViewWrapper>
);
}
apps/client/src/features/editor/components/embed/embed-view.module.css
+10 -1
View File
@@ -1,3 +1,12 @@
:global(.ProseMirror .node-embed.ProseMirror-selectednode) {
outline: none;
}
.embedContainer {
display: flex;
justify-content: center;
}
.embedWrapper {
@mixin light {
background-color: var(--mantine-color-gray-0);
@@ -13,4 +22,4 @@
height: 100%;
border: none;
border-radius: 8px;
}
}
apps/client/src/features/editor/components/embed/embed-view.tsx
+39 -31
View File
@@ -12,9 +12,9 @@ import {
TextInput,
} from "@mantine/core";
import { IconEdit } from "@tabler/icons-react";
import { z } from "zod";
import { z } from "zod/v4";
import { useForm } from "@mantine/form";
import { zodResolver } from "mantine-form-zod-resolver";
import { zod4Resolver } from "mantine-form-zod-resolver";
import { notifications } from "@mantine/notifications";
import { useTranslation } from "react-i18next";
import i18n from "i18next";
@@ -27,16 +27,13 @@ import { ResizableWrapper } from "../common/resizable-wrapper";
import classes from "./embed-view.module.css";
const schema = z.object({
url: z
.string()
.trim()
.url({ message: i18n.t("Please enter a valid url") }),
url: z.url({ message: i18n.t("Please enter a valid url") }).trim(),
});
export default function EmbedView(props: NodeViewProps) {
const { t } = useTranslation();
const { node, selected, updateAttributes, editor } = props;
const { src, provider, height: nodeHeight } = node.attrs;
const { src, provider, width: nodeWidth, height: nodeHeight } = node.attrs;
const embedUrl = useMemo(() => {
if (src) {
@@ -49,12 +46,12 @@ export default function EmbedView(props: NodeViewProps) {
initialValues: {
url: "",
},
validate: zodResolver(schema),
validate: zod4Resolver(schema),
});
const handleResize = useCallback(
(newHeight: number) => {
updateAttributes({ height: newHeight });
(newWidth: number, newHeight: number) => {
updateAttributes({ width: newWidth, height: newHeight });
},
[updateAttributes],
);
@@ -85,27 +82,34 @@ export default function EmbedView(props: NodeViewProps) {
}
return (
<NodeViewWrapper data-drag-handle>
<NodeViewWrapper data-drag-handle className={classes.embedNodeView}>
{embedUrl ? (
<ResizableWrapper
initialHeight={nodeHeight || 480}
minHeight={200}
maxHeight={1200}
onResize={handleResize}
isEditable={editor.isEditable}
className={clsx(classes.embedWrapper, {
"ProseMirror-selectednode": selected,
})}
>
<iframe
className={classes.embedIframe}
src={sanitizeUrl(embedUrl)}
allow="encrypted-media"
sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
allowFullScreen
frameBorder="0"
/>
</ResizableWrapper>
<div className={classes.embedContainer}>
<ResizableWrapper
initialWidth={nodeWidth || 800}
initialHeight={nodeHeight || 600}
minWidth={200}
maxWidth={1200}
minHeight={200}
maxHeight={1200}
onResize={handleResize}
isEditable={editor.isEditable}
selected={selected}
className={clsx(classes.embedWrapper, {
"ProseMirror-selectednode": selected,
})}
>
<iframe
className={classes.embedIframe}
src={sanitizeUrl(embedUrl)}
allow="encrypted-media; clipboard-read; clipboard-write; picture-in-picture;"
loading="lazy"
sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-downloads"
allowFullScreen
frameBorder="0"
/>
</ResizableWrapper>
</div>
) : (
<Popover
width={300}
@@ -127,7 +131,11 @@ export default function EmbedView(props: NodeViewProps) {
className={clsx(selected ? "ProseMirror-selectednode" : "")}
>
<div style={{ display: "flex", alignItems: "center" }}>
<ActionIcon variant="transparent" color="gray">
<ActionIcon
variant="transparent"
color="gray"
aria-label={t("Edit embed")}
>
<IconEdit size={18} />
</ActionIcon>
apps/client/src/features/editor/components/emoji-menu/emoji-items.ts
+18 -22
View File
@@ -1,30 +1,26 @@
import { CommandProps, EmojiMenuItemType } from "./types";
import { SearchIndex } from "emoji-mart";
import { getFrequentlyUsedEmoji, sortFrequentlyUsedEmoji } from "./utils";
import { buildEmojiIndex, getFrequentlyUsedEmoji, sortFrequentlyUsedEmoji } from "./utils";
const searchEmoji = async (value: string): Promise<EmojiMenuItemType[]> => {
if (value === "") {
const frequentlyUsedEmoji = getFrequentlyUsedEmoji();
return sortFrequentlyUsedEmoji(frequentlyUsedEmoji);
const MAX_RESULTS = 5;
const searchEmoji = async (query: string): Promise<EmojiMenuItemType[]> => {
if (query === "") {
return sortFrequentlyUsedEmoji(getFrequentlyUsedEmoji());
}
const emojis = await SearchIndex.search(value);
const results = emojis.map((emoji: any) => {
return {
id: emoji.id,
emoji: emoji.skins[0].native,
command: ({ editor, range }: CommandProps) => {
editor
.chain()
.focus()
.deleteRange(range)
.insertContent(emoji.skins[0].native + " ")
.run();
},
};
});
const q = query.toLowerCase();
const index = await buildEmojiIndex();
return results;
return index
.filter((e) => e.name.includes(q) || e.id.includes(q))
.slice(0, MAX_RESULTS)
.map((entry) => ({
id: entry.id,
emoji: entry.native,
command: ({ editor, range }: CommandProps) => {
editor.chain().focus().deleteRange(range).insertContent(entry.native + " ").run();
},
}));
};
export const getEmojiItems = async ({
apps/client/src/features/editor/components/emoji-menu/emoji-list.tsx
+262 -116
View File
@@ -1,140 +1,286 @@
import {
ActionIcon,
Loader,
Paper,
ScrollArea,
SimpleGrid,
Text,
} from "@mantine/core";
import { EmojiMenuItemType } from "./types";
import { Loader, Paper, ScrollArea, Text, UnstyledButton } from "@mantine/core";
import clsx from "clsx";
import classes from "./emoji-menu.module.css";
import { useCallback, useEffect, useRef, useState } from "react";
import { GRID_COLUMNS, incrementEmojiUsage } from "./utils";
import { useTranslation } from "react-i18next";
import { EmojiMenuItemType } from "./types";
import {
EmojiCategory,
EmojiIndexEntry,
getEmojiCategories,
incrementEmojiUsage,
} from "./utils";
import classes from "./emoji-menu.module.css";
const EmojiList = ({
const COLS = 8;
const CAT_ICONS: Record<string, string> = {
people: "😀",
nature: "🌿",
foods: "🍕",
activity: "🎮",
places: "🗺️",
objects: "🔧",
symbols: "💯",
flags: "🚩",
};
function EmojiList({
items,
isLoading,
command,
editor,
range,
query = "",
}: {
items: EmojiMenuItemType[];
isLoading: boolean;
command: any;
command: (item: EmojiMenuItemType) => void;
editor: any;
range: any;
}) => {
const [selectedIndex, setSelectedIndex] = useState(0);
const viewportRef = useRef<HTMLDivElement>(null);
query?: string;
}) {
const { t } = useTranslation();
const [idx, setIdx] = useState(0);
const [cats, setCats] = useState<EmojiCategory[]>([]);
const [activeCat, setActiveCat] = useState("");
const [focusZone, setFocusZone] = useState<"grid" | "tabs">("grid");
const [announce, setAnnounce] = useState("");
const listViewport = useRef<HTMLDivElement>(null);
const gridViewport = useRef<HTMLDivElement>(null);
const catBar = useRef<HTMLDivElement>(null);
const userInteractedRef = useRef(false);
const selectItem = useCallback(
(index: number) => {
const item = items[index];
if (item) {
command(item);
incrementEmojiUsage(item.id);
}
const searching = query.length > 0;
const browseLoading = !searching && cats.length === 0;
const gridItems = cats.find((c) => c.id === activeCat)?.emojis ?? [];
useEffect(() => {
getEmojiCategories().then((data) => {
setCats(data);
setActiveCat((prev) => prev || data[0]?.id || "");
});
}, []);
useEffect(() => { setIdx(0); }, [query, activeCat]);
useEffect(() => { if (searching) setFocusZone("grid"); }, [searching]);
useEffect(() => {
if (focusZone !== "tabs") return;
catBar.current?.querySelector<HTMLElement>(`[data-cat="${activeCat}"]`)?.scrollIntoView({ block: "nearest", inline: "nearest" });
}, [activeCat, focusZone]);
useEffect(() => {
if (focusZone === "tabs") return;
const vp = searching ? listViewport.current : gridViewport.current;
vp?.querySelector<HTMLElement>(`[data-i="${idx}"]`)?.scrollIntoView({ block: "nearest" });
}, [idx, searching, focusZone]);
// Announce picker open and selection changes via a live region. Focus
// stays in the editor, so without this the screen reader has no way to
// know the picker exists or that arrow keys are changing the selection.
// The setTimeout defers the open message past the initial render so the
// live region is in the DOM before its content changes (screen readers
// ignore content that's present at mount time).
useEffect(() => {
const timer = setTimeout(() => {
setAnnounce(
t("Emoji picker open. Use arrow keys to navigate, Enter to select."),
);
}, 100);
return () => clearTimeout(timer);
}, [t]);
useEffect(() => {
// Skip data-driven updates (idx reset, async cat load); only announce
// selection changes that come from real user navigation.
if (!userInteractedRef.current) return;
if (focusZone === "tabs") {
if (activeCat) setAnnounce(t("{{name}} category", { name: activeCat }));
return;
}
if (searching) {
const item = items[idx];
if (item)
setAnnounce(
t("{{name}}, {{n}} of {{total}}", {
name: item.id,
n: idx + 1,
total: items.length,
}),
);
return;
}
const entry = gridItems[idx];
if (entry)
setAnnounce(
t("{{name}}, {{n}} of {{total}}", {
name: entry.id,
n: idx + 1,
total: gridItems.length,
}),
);
}, [idx, activeCat, focusZone, searching, items, gridItems, t]);
const pickSearchItem = useCallback(
(i: number) => {
const item = items[i];
if (!item) return;
command(item);
incrementEmojiUsage(item.id);
},
[command, items]
[command, items],
);
const pickGridItem = useCallback(
(entry: EmojiIndexEntry) => {
editor.chain().focus().deleteRange(range).insertContent(entry.native + " ").run();
incrementEmojiUsage(entry.id);
},
[editor, range],
);
useEffect(() => {
const navigationKeys = [
"ArrowRight",
"ArrowLeft",
"ArrowUp",
"ArrowDown",
"Enter",
];
const onKeyDown = (e: KeyboardEvent) => {
if (navigationKeys.includes(e.key)) {
e.preventDefault();
if (e.key === "ArrowRight") {
setSelectedIndex(
selectedIndex + 1 < items.length ? selectedIndex + 1 : selectedIndex
);
return true;
}
if (e.key === "ArrowLeft") {
setSelectedIndex(
selectedIndex - 1 >= 0 ? selectedIndex - 1 : selectedIndex
);
return true;
}
if (e.key === "ArrowUp") {
setSelectedIndex(
selectedIndex - GRID_COLUMNS >= 0
? selectedIndex - GRID_COLUMNS
: selectedIndex
);
return true;
}
if (e.key === "ArrowDown") {
setSelectedIndex(
selectedIndex + GRID_COLUMNS < items.length
? selectedIndex + GRID_COLUMNS
: selectedIndex
);
return true;
}
if (e.key === "Enter") {
selectItem(selectedIndex);
return true;
}
return false;
function onKey(e: KeyboardEvent) {
if (
["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Enter"].includes(
e.key,
)
) {
userInteractedRef.current = true;
}
};
document.addEventListener("keydown", onKeyDown);
return () => {
document.removeEventListener("keydown", onKeyDown);
};
}, [items, selectedIndex, setSelectedIndex]);
if (searching) {
if (e.key === "ArrowDown") { e.preventDefault(); setIdx((i) => Math.min(i + 1, items.length - 1)); }
else if (e.key === "ArrowUp") { e.preventDefault(); setIdx((i) => Math.max(i - 1, 0)); }
else if (e.key === "Enter") { e.preventDefault(); pickSearchItem(idx); }
} else if (focusZone === "tabs") {
const catIdx = cats.findIndex((c) => c.id === activeCat);
if (e.key === "ArrowRight") { e.preventDefault(); const next = cats[Math.min(catIdx + 1, cats.length - 1)]; if (next) setActiveCat(next.id); }
else if (e.key === "ArrowLeft") { e.preventDefault(); const prev = cats[Math.max(catIdx - 1, 0)]; if (prev) setActiveCat(prev.id); }
else if (e.key === "ArrowDown" || e.key === "Enter") { e.preventDefault(); setFocusZone("grid"); }
else if (e.key === "ArrowUp") { e.preventDefault(); }
} else {
const total = gridItems.length;
if (e.key === "ArrowRight") { e.preventDefault(); setIdx((i) => Math.min(i + 1, total - 1)); }
else if (e.key === "ArrowLeft") { e.preventDefault(); setIdx((i) => Math.max(i - 1, 0)); }
else if (e.key === "ArrowDown") { e.preventDefault(); setIdx((i) => Math.min(i + COLS, total - 1)); }
else if (e.key === "ArrowUp") {
e.preventDefault();
if (idx < COLS) setFocusZone("tabs");
else setIdx((i) => Math.max(i - COLS, 0));
}
else if (e.key === "Enter") { e.preventDefault(); if (gridItems[idx]) pickGridItem(gridItems[idx]); }
}
}
document.addEventListener("keydown", onKey);
return () => document.removeEventListener("keydown", onKey);
}, [searching, items, idx, gridItems, pickSearchItem, pickGridItem, focusZone, cats, activeCat]);
useEffect(() => {
setSelectedIndex(0);
}, [items]);
useEffect(() => {
viewportRef.current
?.querySelector(`[data-item-index="${selectedIndex}"]`)
?.scrollIntoView({ block: "nearest" });
}, [selectedIndex]);
return items.length > 0 || isLoading ? (
<Paper id="emoji-command" p="0" shadow="md" withBorder>
{isLoading && <Loader m="xs" color="blue" type="dots" />}
{items.length > 0 && (
<ScrollArea.Autosize
viewportRef={viewportRef}
mah={250}
scrollbarSize={8}
pr="5"
>
<SimpleGrid cols={GRID_COLUMNS} p="xs" spacing="xs">
{items.map((item, index: number) => (
<ActionIcon
data-item-index={index}
variant="transparent"
key={item.id}
className={clsx(classes.menuBtn, {
[classes.selectedItem]: index === selectedIndex,
})}
onClick={() => selectItem(index)}
>
<Text size="xl">{item.emoji}</Text>
</ActionIcon>
))}
</SimpleGrid>
</ScrollArea.Autosize>
return (
<Paper
id="emoji-command"
p={0}
shadow="md"
withBorder
style={{ width: 280 }}
role="listbox"
aria-label={t("Emoji picker")}
>
<div
role="status"
aria-live="polite"
aria-atomic="true"
style={{
position: "absolute",
width: 1,
height: 1,
padding: 0,
margin: -1,
overflow: "hidden",
clip: "rect(0,0,0,0)",
whiteSpace: "nowrap",
border: 0,
}}
>
{announce}
</div>
{searching ? (
<>
{isLoading && <Loader m="xs" size="xs" color="blue" type="dots" />}
<ScrollArea.Autosize mah={260} scrollbarSize={6} viewportRef={listViewport}>
<div style={{ padding: 4 }}>
{items.length === 0 && !isLoading ? (
<Text size="sm" c="dimmed" p="xs">{t("No results")}</Text>
) : items.map((item, i) => (
<UnstyledButton
key={item.id}
data-i={i}
w="100%"
className={clsx(classes.row, { [classes.active]: i === idx })}
onClick={() => pickSearchItem(i)}
onMouseEnter={() => setIdx(i)}
role="option"
aria-selected={i === idx}
>
<span style={{ fontSize: 20, lineHeight: 1, minWidth: 26 }}>{item.emoji}</span>
<Text size="sm" c="dimmed" ff="monospace" span>:{item.id}:</Text>
</UnstyledButton>
))}
</div>
</ScrollArea.Autosize>
</>
) : browseLoading ? (
<Loader m="xs" size="xs" color="blue" type="dots" />
) : (
<>
<div className={classes.catBar} role="tablist" ref={catBar}>
{cats.map((c) => {
const isActive = c.id === activeCat;
const isFocused = isActive && focusZone === "tabs";
return (
<button
key={c.id}
data-cat={c.id}
title={c.id}
role="tab"
aria-selected={isActive}
aria-label={t("{{name}} category", { name: c.id })}
className={clsx(classes.catTab, {
[classes.catTabActive]: isActive,
[classes.catTabFocused]: isFocused,
})}
onClick={() => { setActiveCat(c.id); setFocusZone("grid"); }}
onMouseEnter={() => setFocusZone("grid")}
>
{CAT_ICONS[c.id] ?? "🔣"}
</button>
);
})}
</div>
<ScrollArea.Autosize mah={220} scrollbarSize={6} viewportRef={gridViewport}>
<div className={classes.grid} style={{ gridTemplateColumns: `repeat(${COLS}, 1fr)` }}>
{gridItems.map((entry, i) => (
<button
key={entry.id}
data-i={i}
title={`:${entry.id}:`}
role="option"
aria-selected={i === idx}
aria-label={entry.id}
className={clsx(classes.emojiBtn, { [classes.active]: i === idx })}
onClick={() => pickGridItem(entry)}
onMouseEnter={() => setIdx(i)}
>
{entry.native}
</button>
))}
</div>
</ScrollArea.Autosize>
</>
)}
</Paper>
) : null;
};
);
}
export default EmojiList;
apps/client/src/features/editor/components/emoji-menu/emoji-menu.module.css
+87 -3
View File
@@ -1,9 +1,13 @@
.menuBtn {
.row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-radius: var(--mantine-radius-sm);
&:hover {
@mixin light {
background: var(--mantine-color-gray-2);
background: var(--mantine-color-gray-1);
}
@mixin dark {
@@ -12,7 +16,7 @@
}
}
.selectedItem {
.active {
@mixin light {
background: var(--mantine-color-gray-2);
}
@@ -21,3 +25,83 @@
background: var(--mantine-color-gray-light);
}
}
.catBar {
display: flex;
gap: 2px;
padding: 4px 6px;
overflow-x: auto;
scrollbar-width: none;
@mixin light {
border-bottom: 1px solid var(--mantine-color-gray-2);
}
@mixin dark {
border-bottom: 1px solid var(--mantine-color-dark-4);
}
}
.catTab {
background: transparent;
border: none;
cursor: pointer;
font-size: 16px;
line-height: 1;
padding: 4px 5px;
border-radius: var(--mantine-radius-sm);
flex-shrink: 0;
&:hover {
@mixin light {
background: var(--mantine-color-gray-1);
}
@mixin dark {
background: var(--mantine-color-gray-light);
}
}
}
.catTabActive {
@mixin light {
background: var(--mantine-color-gray-2);
}
@mixin dark {
background: var(--mantine-color-gray-light);
}
}
.catTabFocused {
outline: 1px solid var(--mantine-color-blue-filled);
outline-offset: -1px;
}
.grid {
display: grid;
gap: 1px;
padding: 6px;
}
.emojiBtn {
background: transparent;
border: none;
cursor: pointer;
font-size: 20px;
line-height: 1;
padding: 3px;
border-radius: var(--mantine-radius-sm);
aspect-ratio: 1 / 1;
&:hover {
@mixin light {
background: var(--mantine-color-gray-1);
}
@mixin dark {
background: var(--mantine-color-gray-light);
}
}
}
apps/client/src/features/editor/components/emoji-menu/render-emoji-items.ts
-5
View File
@@ -1,6 +1,5 @@
import { ReactRenderer, useEditor } from "@tiptap/react";
import EmojiList from "./emoji-list";
import { init } from "emoji-mart";
import {
autoUpdate,
computePosition,
@@ -37,10 +36,6 @@ const renderEmojiItems = () => {
editor: ReturnType<typeof useEditor>;
clientRect: () => DOMRect;
}) => {
init({
data: async () => (await import("@emoji-mart/data")).default,
});
component = new ReactRenderer(EmojiList, {
props: { isLoading: true, items: [] },
editor: props.editor,
apps/client/src/features/editor/components/emoji-menu/utils.ts
+63 -32
View File
@@ -1,8 +1,4 @@
import { CommandProps } from "./types";
import { getEmojiDataFromNative } from "emoji-mart";
import { EmojiMartFrequentlyType, EmojiMenuItemType } from "./types";
export const GRID_COLUMNS = 10;
import { CommandProps, EmojiMartFrequentlyType, EmojiMenuItemType } from "./types";
export const LOCAL_STORAGE_FREQUENT_KEY = "emoji-mart.frequently";
@@ -19,41 +15,76 @@ export const DEFAULT_FREQUENTLY_USED_EMOJI_MART = `{
"rocket": 1
}`;
export type EmojiIndexEntry = { id: string; name: string; native: string };
let _emojiIndex: EmojiIndexEntry[] | null = null;
export const buildEmojiIndex = async (): Promise<EmojiIndexEntry[]> => {
if (_emojiIndex) return _emojiIndex;
const { default: data } = await import('@slidoapp/emoji-mart-data');
_emojiIndex = (Object.values((data as any).emojis) as any[])
.filter((e) => e.id && e.name && e.skins?.[0]?.native)
.map((e) => ({
id: e.id as string,
name: (e.name as string).toLowerCase(),
native: e.skins[0].native as string,
}));
return _emojiIndex;
};
export const incrementEmojiUsage = (emojiId: string) => {
const frequentlyUsedEmoji =
JSON.parse(localStorage.getItem(LOCAL_STORAGE_FREQUENT_KEY) || DEFAULT_FREQUENTLY_USED_EMOJI_MART);
frequentlyUsedEmoji[emojiId]
? (frequentlyUsedEmoji[emojiId] += 1)
: (frequentlyUsedEmoji[emojiId] = 1);
localStorage.setItem(
LOCAL_STORAGE_FREQUENT_KEY,
JSON.stringify(frequentlyUsedEmoji)
const stored = JSON.parse(
localStorage.getItem(LOCAL_STORAGE_FREQUENT_KEY) || DEFAULT_FREQUENTLY_USED_EMOJI_MART,
);
stored[emojiId] = (stored[emojiId] ?? 0) + 1;
localStorage.setItem(LOCAL_STORAGE_FREQUENT_KEY, JSON.stringify(stored));
};
export const sortFrequentlyUsedEmoji = async (
frequentlyUsedEmoji: EmojiMartFrequentlyType
frequentlyUsedEmoji: EmojiMartFrequentlyType,
): Promise<EmojiMenuItemType[]> => {
const data = await Promise.all(
Object.entries(frequentlyUsedEmoji).map(
async ([id, count]): Promise<EmojiMenuItemType> => ({
const index = await buildEmojiIndex();
const results: EmojiMenuItemType[] = Object.entries(frequentlyUsedEmoji)
.map(([id, count]): EmojiMenuItemType | null => {
const entry = index.find((e) => e.id === id);
if (!entry) return null;
return {
id,
count,
emoji: (await getEmojiDataFromNative(id))?.native,
command: async ({ editor, range }: CommandProps) => {
editor
.chain()
.focus()
.deleteRange(range)
.insertContent((await getEmojiDataFromNative(id))?.native + " ")
.run();
emoji: entry.native,
command: ({ editor, range }: CommandProps) => {
editor.chain().focus().deleteRange(range).insertContent(entry.native + " ").run();
},
})
)
);
return data.sort((a, b) => b.count - a.count);
};
})
.filter((e): e is EmojiMenuItemType => e !== null);
return results.sort((a, b) => (b.count ?? 0) - (a.count ?? 0)).slice(0, 5);
};
export const getFrequentlyUsedEmoji = () => {
return JSON.parse(localStorage.getItem(LOCAL_STORAGE_FREQUENT_KEY) || DEFAULT_FREQUENTLY_USED_EMOJI_MART);
}
export const getFrequentlyUsedEmoji = (): EmojiMartFrequentlyType => {
return JSON.parse(
localStorage.getItem(LOCAL_STORAGE_FREQUENT_KEY) || DEFAULT_FREQUENTLY_USED_EMOJI_MART,
);
};
export type EmojiCategory = { id: string; emojis: EmojiIndexEntry[] };
let _cats: EmojiCategory[] | null = null;
export const getEmojiCategories = async (): Promise<EmojiCategory[]> => {
if (_cats) return _cats;
const [{ default: data }, index] = await Promise.all([
import("@slidoapp/emoji-mart-data"),
buildEmojiIndex(),
]);
const byId = new Map(index.map((e) => [e.id, e]));
_cats = ((data as any).categories as { id: string; emojis: string[] }[])
.map((cat) => ({
id: cat.id,
emojis: cat.emojis
.map((id) => byId.get(id))
.filter((e): e is EmojiIndexEntry => !!e),
}))
.filter((c) => c.emojis.length > 0);
return _cats;
};
apps/client/src/features/editor/components/excalidraw/excalidraw-menu-lazy.tsx
+14
View File
@@ -0,0 +1,14 @@
import { lazy, Suspense } from "react";
import { EditorMenuProps } from "@/features/editor/components/table/types/types.ts";
const ExcalidrawMenu = lazy(
() => import("@/features/editor/components/excalidraw/excalidraw-menu.tsx"),
);
export default function ExcalidrawMenuLazy(props: EditorMenuProps) {
return (
<Suspense fallback={null}>
<ExcalidrawMenu {...props} />
</Suspense>
);
}
apps/client/src/features/editor/components/excalidraw/excalidraw-menu.tsx
+406 -46
View File
@@ -1,14 +1,88 @@
import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
import { useCallback } from "react";
import { Node as PMNode } from "prosemirror-model";
import { lazy, Suspense, useCallback, useEffect, useRef, useState } from "react";
import { Node as PMNode } from "@tiptap/pm/model";
import { isEditorReady } from "@docmost/editor-ext";
import {
EditorMenuProps,
ShouldShowProps,
} from "@/features/editor/components/table/types/types.ts";
import { NodeWidthResize } from "@/features/editor/components/common/node-width-resize.tsx";
import {
ActionIcon,
Button,
Group,
Text,
Tooltip,
useComputedColorScheme,
} from "@mantine/core";
import { modals } from "@mantine/modals";
import { useDisclosure } from "@mantine/hooks";
import clsx from "clsx";
import {
IconLayoutAlignCenter,
IconLayoutAlignLeft,
IconLayoutAlignRight,
IconDownload,
IconEdit,
IconTrash,
} from "@tabler/icons-react";
import { useTranslation } from "react-i18next";
import { getFileUrl } from "@/lib/config.ts";
import { uploadFile } from "@/features/page/services/page-service.ts";
import { svgStringToFile } from "@/lib";
import "@excalidraw/excalidraw/index.css";
import type { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/types";
import { IAttachment } from "@/features/attachments/types/attachment.types";
import ReactClearModal from "react-clear-modal";
import { useHandleLibrary } from "@excalidraw/excalidraw";
import { localStorageLibraryAdapter } from "@/features/editor/components/excalidraw/excalidraw-utils.ts";
import { useAltTextControl } from "@/features/editor/components/common/use-alt-text-control.tsx";
import classes from "../common/toolbar-menu.module.css";
const ExcalidrawComponent = lazy(() =>
import("@excalidraw/excalidraw").then((module) => ({
default: module.Excalidraw,
})),
);
export function ExcalidrawMenu({ editor }: EditorMenuProps) {
const { t } = useTranslation();
const [opened, { open, close }] = useDisclosure(false);
const [excalidrawAPI, setExcalidrawAPI] =
useState<ExcalidrawImperativeAPI>(null);
useHandleLibrary({
excalidrawAPI,
adapter: localStorageLibraryAdapter,
});
const [excalidrawData, setExcalidrawData] = useState<any>(null);
const computedColorScheme = useComputedColorScheme();
const isDirtyRef = useRef(false);
const isSavingRef = useRef(false);
const [isSaving, setIsSaving] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const isInitialLoadRef = useRef(true);
const lastFingerprintRef = useRef("");
const editorState = useEditorState({
editor,
selector: (ctx) => {
if (!ctx.editor) {
return null;
}
const excalidrawAttr = ctx.editor.getAttributes("excalidraw");
return {
isExcalidraw: ctx.editor.isActive("excalidraw"),
isAlignLeft: ctx.editor.isActive("excalidraw", { align: "left" }),
isAlignCenter: ctx.editor.isActive("excalidraw", { align: "center" }),
isAlignRight: ctx.editor.isActive("excalidraw", { align: "right" }),
src: excalidrawAttr?.src || null,
attachmentId: excalidrawAttr?.attachmentId || null,
alt: excalidrawAttr?.alt || "",
};
},
});
const shouldShow = useCallback(
({ state }: ShouldShowProps) => {
if (!state) {
@@ -22,23 +96,8 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
[editor],
);
const editorState = useEditorState({
editor,
selector: (ctx) => {
if (!ctx.editor) {
return null;
}
const excalidrawAttr = ctx.editor.getAttributes("excalidraw");
return {
isExcalidraw: ctx.editor.isActive("excalidraw"),
width: excalidrawAttr?.width ? parseInt(excalidrawAttr.width) : null,
};
},
});
const getReferencedVirtualElement = useCallback(() => {
if (!editor) return;
if (!isEditorReady(editor)) return;
const { selection } = editor.state;
const predicate = (node: PMNode) => node.type.name === "excalidraw";
const parent = findParentNode(predicate)(selection);
@@ -59,38 +118,339 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
};
}, [editor]);
const onWidthChange = useCallback(
(value: number) => {
editor.commands.updateAttributes("excalidraw", { width: `${value}%` });
},
[editor],
);
const alignLeft = useCallback(() => {
editor
.chain()
.focus(undefined, { scrollIntoView: false })
.setExcalidrawAlign("left")
.run();
}, [editor]);
const alignCenter = useCallback(() => {
editor
.chain()
.focus(undefined, { scrollIntoView: false })
.setExcalidrawAlign("center")
.run();
}, [editor]);
const alignRight = useCallback(() => {
editor
.chain()
.focus(undefined, { scrollIntoView: false })
.setExcalidrawAlign("right")
.run();
}, [editor]);
const handleDownload = useCallback(() => {
if (!editorState?.src) return;
const url = getFileUrl(editorState.src);
const a = document.createElement("a");
a.href = url;
a.download = "";
a.click();
}, [editorState?.src]);
const handleDelete = useCallback(() => {
editor.commands.deleteSelection();
}, [editor]);
const {
button: altTextButton,
panel: altTextPanel,
isEditing: isEditingAlt,
} = useAltTextControl({
editor,
nodeName: "excalidraw",
currentAlt: editorState?.alt || "",
});
const handleOpen = useCallback(async () => {
if (!editorState?.src) return;
setIsLoading(true);
try {
const url = getFileUrl(editorState.src);
const request = await fetch(url, {
credentials: "include",
cache: "no-store",
});
const { loadFromBlob } = await import("@excalidraw/excalidraw");
const data = await loadFromBlob(await request.blob(), null, null);
setExcalidrawData(data);
} catch (err) {
console.error(err);
} finally {
setIsLoading(false);
isDirtyRef.current = false;
isInitialLoadRef.current = true;
open();
}
}, [editorState?.src, open]);
const saveData = useCallback(async () => {
if (!excalidrawAPI || isSavingRef.current) {
return;
}
isSavingRef.current = true;
setIsSaving(true);
try {
const { exportToSvg } = await import("@excalidraw/excalidraw");
const svg = await exportToSvg({
elements: excalidrawAPI?.getSceneElements(),
appState: {
exportEmbedScene: true,
exportWithDarkMode: false,
},
files: excalidrawAPI?.getFiles(),
});
const serializer = new XMLSerializer();
let svgString = serializer.serializeToString(svg);
svgString = svgString.replace(
/https:\/\/unpkg\.com\/@excalidraw\/excalidraw@undefined/g,
"https://unpkg.com/@excalidraw/excalidraw@latest",
);
const fileName = "diagram.excalidraw.svg";
const excalidrawSvgFile = await svgStringToFile(svgString, fileName);
// @ts-ignore
const pageId = editor.storage?.pageId;
const attachmentId = editorState?.attachmentId;
let attachment: IAttachment = null;
if (attachmentId) {
attachment = await uploadFile(excalidrawSvgFile, pageId, attachmentId);
} else {
attachment = await uploadFile(excalidrawSvgFile, pageId);
}
editor.commands.updateAttributes("excalidraw", {
src: `/api/files/${attachment.id}/${attachment.fileName}?t=${new Date(attachment.updatedAt).getTime()}`,
title: attachment.fileName,
size: attachment.fileSize,
attachmentId: attachment.id,
});
isDirtyRef.current = false;
} finally {
isSavingRef.current = false;
setIsSaving(false);
}
}, [editor, excalidrawAPI, editorState?.attachmentId]);
const handleSaveAndExit = useCallback(async () => {
try {
await saveData();
close();
} catch {
// save failed, modal stays open
}
}, [saveData, close]);
const handleClose = useCallback(() => {
if (!isDirtyRef.current) {
close();
return;
}
modals.openConfirmModal({
title: t("Unsaved changes"),
children: (
<Text size="sm">
{t("You have unsaved changes that will be lost.")}
</Text>
),
centered: true,
labels: { confirm: t("Discard"), cancel: t("Cancel") },
confirmProps: { color: "red" },
onConfirm: () => {
isDirtyRef.current = false;
close();
},
});
}, [close, t]);
useEffect(() => {
if (!opened) return;
const interval = setInterval(() => {
if (isDirtyRef.current && !isSavingRef.current) {
saveData().catch(() => {});
}
}, 60_000);
return () => clearInterval(interval);
}, [opened, saveData]);
return (
<BaseBubbleMenu
editor={editor}
pluginKey={`excalidraw-menu`}
updateDelay={0}
getReferencedVirtualElement={getReferencedVirtualElement}
options={{
placement: "top",
offset: 8,
flip: false,
}}
shouldShow={shouldShow}
>
<div
<>
<BaseBubbleMenu
editor={editor}
pluginKey={`excalidraw-menu`}
updateDelay={0}
getReferencedVirtualElement={getReferencedVirtualElement}
options={{
placement: "top",
offset: 8,
flip: false,
}}
shouldShow={shouldShow}
>
{isEditingAlt ? (
altTextPanel
) : (
<div className={classes.toolbar}>
<Tooltip position="top" label={t("Align left")} withinPortal={false}>
<ActionIcon
onClick={alignLeft}
size="lg"
aria-label={t("Align left")}
variant="subtle"
className={clsx({
[classes.active]: editorState?.isAlignLeft,
})}
>
<IconLayoutAlignLeft size={18} />
</ActionIcon>
</Tooltip>
<Tooltip
position="top"
label={t("Align center")}
withinPortal={false}
>
<ActionIcon
onClick={alignCenter}
size="lg"
aria-label={t("Align center")}
variant="subtle"
className={clsx({
[classes.active]: editorState?.isAlignCenter,
})}
>
<IconLayoutAlignCenter size={18} />
</ActionIcon>
</Tooltip>
<Tooltip position="top" label={t("Align right")} withinPortal={false}>
<ActionIcon
onClick={alignRight}
size="lg"
aria-label={t("Align right")}
variant="subtle"
className={clsx({
[classes.active]: editorState?.isAlignRight,
})}
>
<IconLayoutAlignRight size={18} />
</ActionIcon>
</Tooltip>
<div className={classes.divider} />
{altTextButton}
<div className={classes.divider} />
<Tooltip position="top" label={t("Edit")} withinPortal={false}>
<ActionIcon
onClick={handleOpen}
size="lg"
aria-label={t("Edit")}
variant="subtle"
loading={isLoading}
>
<IconEdit size={18} />
</ActionIcon>
</Tooltip>
<Tooltip position="top" label={t("Download")} withinPortal={false}>
<ActionIcon
onClick={handleDownload}
size="lg"
aria-label={t("Download")}
variant="subtle"
>
<IconDownload size={18} />
</ActionIcon>
</Tooltip>
<Tooltip position="top" label={t("Delete")} withinPortal={false}>
<ActionIcon
onClick={handleDelete}
size="lg"
aria-label={t("Delete")}
variant="subtle"
>
<IconTrash size={18} />
</ActionIcon>
</Tooltip>
</div>
)}
</BaseBubbleMenu>
<ReactClearModal
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
backgroundColor: "rgba(0, 0, 0, 0.5)",
padding: 0,
zIndex: 200,
}}
isOpen={opened}
onRequestClose={handleClose}
disableCloseOnBgClick={true}
contentProps={{
style: {
padding: 0,
width: "90vw",
},
}}
>
{editorState?.width && (
<NodeWidthResize onChange={onWidthChange} value={editorState.width} />
)}
</div>
</BaseBubbleMenu>
<Group
justify="flex-end"
wrap="nowrap"
bg="var(--mantine-color-body)"
p="xs"
>
<Button onClick={handleSaveAndExit} size={"compact-sm"} loading={isSaving}>
{t("Save & Exit")}
</Button>
<Button onClick={handleClose} color="red" size={"compact-sm"}>
{t("Exit")}
</Button>
</Group>
<div style={{ height: "90vh" }}>
<Suspense fallback={null}>
<ExcalidrawComponent
excalidrawAPI={(api) => setExcalidrawAPI(api)}
onChange={(elements, _appState, files) => {
const fingerprint = `${elements.length}:${elements.reduce((s, e) => s + (e.version || 0), 0)}:${Object.keys(files).length}`;
if (isInitialLoadRef.current) {
lastFingerprintRef.current = fingerprint;
isInitialLoadRef.current = false;
return;
}
if (fingerprint !== lastFingerprintRef.current) {
lastFingerprintRef.current = fingerprint;
isDirtyRef.current = true;
}
}}
initialData={{
...excalidrawData,
scrollToContent: true,
}}
theme={computedColorScheme}
/>
</Suspense>
</div>
</ReactClearModal>
</>
);
}
apps/client/src/features/editor/components/excalidraw/excalidraw-view-lazy.tsx
+14
View File
@@ -0,0 +1,14 @@
import { lazy, Suspense } from "react";
import { NodeViewProps } from "@tiptap/react";
const ExcalidrawView = lazy(
() => import("@/features/editor/components/excalidraw/excalidraw-view.tsx"),
);
export default function ExcalidrawViewLazy(props: NodeViewProps) {
return (
<Suspense fallback={null}>
<ExcalidrawView {...props} />
</Suspense>
);
}
apps/client/src/features/editor/components/excalidraw/excalidraw-view.tsx
+151 -117
View File
@@ -4,28 +4,32 @@ import {
Button,
Card,
Group,
Image,
Text,
useComputedColorScheme,
} from "@mantine/core";
import { useState } from "react";
import {
lazy,
Suspense,
useCallback,
useEffect,
useRef,
useState,
} from "react";
import { uploadFile } from "@/features/page/services/page-service.ts";
import { svgStringToFile } from "@/lib";
import { useDisclosure } from "@mantine/hooks";
import { getFileUrl } from "@/lib/config.ts";
import "@excalidraw/excalidraw/index.css";
import type { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/types";
import { IAttachment } from "@/features/attachments/types/attachment.types";
import ReactClearModal from "react-clear-modal";
import clsx from "clsx";
import { IconEdit } from "@tabler/icons-react";
import { lazy } from "react";
import { Suspense } from "react";
import { useTranslation } from "react-i18next";
import { useHandleLibrary } from "@excalidraw/excalidraw";
import { localStorageLibraryAdapter } from "@/features/editor/components/excalidraw/excalidraw-utils.ts";
import { modals } from "@mantine/modals";
const Excalidraw = lazy(() =>
const ExcalidrawComponent = lazy(() =>
import("@excalidraw/excalidraw").then((module) => ({
default: module.Excalidraw,
})),
@@ -34,7 +38,7 @@ const Excalidraw = lazy(() =>
export default function ExcalidrawView(props: NodeViewProps) {
const { t } = useTranslation();
const { node, updateAttributes, editor, selected } = props;
const { src, title, width, attachmentId } = node.attrs;
const { attachmentId } = node.attrs;
const [excalidrawAPI, setExcalidrawAPI] =
useState<ExcalidrawImperativeAPI>(null);
@@ -46,77 +50,125 @@ export default function ExcalidrawView(props: NodeViewProps) {
const [opened, { open, close }] = useDisclosure(false);
const computedColorScheme = useComputedColorScheme();
const isDirtyRef = useRef(false);
const isSavingRef = useRef(false);
const [isSaving, setIsSaving] = useState(false);
const isInitialLoadRef = useRef(true);
const lastFingerprintRef = useRef("");
const handleOpen = async () => {
if (!editor.isEditable) {
return;
}
try {
if (src) {
const url = getFileUrl(src);
const request = await fetch(url, {
credentials: "include",
cache: "no-store",
});
const { loadFromBlob } = await import("@excalidraw/excalidraw");
const data = await loadFromBlob(await request.blob(), null, null);
setExcalidrawData(data);
}
} catch (err) {
console.error(err);
} finally {
open();
}
isDirtyRef.current = false;
isInitialLoadRef.current = true;
open();
};
const handleSave = async () => {
if (!excalidrawAPI) {
const saveData = useCallback(async (updateSrc = true) => {
if (!excalidrawAPI || isSavingRef.current) {
return;
}
const { exportToSvg } = await import("@excalidraw/excalidraw");
isSavingRef.current = true;
setIsSaving(true);
const svg = await exportToSvg({
elements: excalidrawAPI?.getSceneElements(),
appState: {
exportEmbedScene: true,
exportWithDarkMode: false,
},
files: excalidrawAPI?.getFiles(),
});
try {
const { exportToSvg } = await import("@excalidraw/excalidraw");
const serializer = new XMLSerializer();
let svgString = serializer.serializeToString(svg);
const svg = await exportToSvg({
elements: excalidrawAPI?.getSceneElements(),
appState: {
exportEmbedScene: true,
exportWithDarkMode: false,
},
files: excalidrawAPI?.getFiles(),
});
svgString = svgString.replace(
/https:\/\/unpkg\.com\/@excalidraw\/excalidraw@undefined/g,
"https://unpkg.com/@excalidraw/excalidraw@latest",
);
const serializer = new XMLSerializer();
let svgString = serializer.serializeToString(svg);
const fileName = "diagram.excalidraw.svg";
const excalidrawSvgFile = await svgStringToFile(svgString, fileName);
svgString = svgString.replace(
/https:\/\/unpkg\.com\/@excalidraw\/excalidraw@undefined/g,
"https://unpkg.com/@excalidraw/excalidraw@latest",
);
// @ts-ignore
const pageId = editor.storage?.pageId;
const fileName = "diagram.excalidraw.svg";
const excalidrawSvgFile = await svgStringToFile(svgString, fileName);
let attachment: IAttachment = null;
if (attachmentId) {
attachment = await uploadFile(excalidrawSvgFile, pageId, attachmentId);
} else {
attachment = await uploadFile(excalidrawSvgFile, pageId);
// @ts-ignore
const pageId = editor.storage?.pageId;
let attachment: IAttachment = null;
if (attachmentId) {
attachment = await uploadFile(excalidrawSvgFile, pageId, attachmentId);
} else {
attachment = await uploadFile(excalidrawSvgFile, pageId);
}
if (updateSrc) {
updateAttributes({
src: `/api/files/${attachment.id}/${attachment.fileName}?t=${new Date(attachment.updatedAt).getTime()}`,
title: attachment.fileName,
size: attachment.fileSize,
attachmentId: attachment.id,
});
} else {
updateAttributes({
attachmentId: attachment.id,
});
}
isDirtyRef.current = false;
} finally {
isSavingRef.current = false;
setIsSaving(false);
}
}, [excalidrawAPI, editor, attachmentId, updateAttributes]);
const handleSaveAndExit = useCallback(async () => {
try {
await saveData();
close();
} catch {
/* empty */
}
}, [saveData, close]);
const handleClose = useCallback(() => {
if (!isDirtyRef.current) {
close();
return;
}
updateAttributes({
src: `/api/files/${attachment.id}/${attachment.fileName}?t=${new Date(attachment.updatedAt).getTime()}`,
title: attachment.fileName,
size: attachment.fileSize,
attachmentId: attachment.id,
modals.openConfirmModal({
title: t("Unsaved changes"),
children: (
<Text size="sm">
{t("You have unsaved changes that will be lost.")}
</Text>
),
centered: true,
labels: { confirm: t("Discard"), cancel: t("Cancel") },
confirmProps: { color: "red" },
onConfirm: () => {
isDirtyRef.current = false;
close();
},
});
}, [close, t]);
close();
};
useEffect(() => {
if (!opened) return;
const interval = setInterval(() => {
if (isDirtyRef.current && !isSavingRef.current) {
saveData(false).catch(() => {});
}
}, 30_000);
return () => clearInterval(interval);
}, [opened, saveData]);
return (
<NodeViewWrapper data-drag-handle>
@@ -127,7 +179,7 @@ export default function ExcalidrawView(props: NodeViewProps) {
zIndex: 200,
}}
isOpen={opened}
onRequestClose={close}
onRequestClose={handleClose}
disableCloseOnBgClick={true}
contentProps={{
style: {
@@ -142,17 +194,29 @@ export default function ExcalidrawView(props: NodeViewProps) {
bg="var(--mantine-color-body)"
p="xs"
>
<Button onClick={handleSave} size={"compact-sm"}>
<Button onClick={handleSaveAndExit} size={"compact-sm"} loading={isSaving}>
{t("Save & Exit")}
</Button>
<Button onClick={close} color="red" size={"compact-sm"}>
<Button onClick={handleClose} color="red" size={"compact-sm"}>
{t("Exit")}
</Button>
</Group>
<div style={{ height: "90vh" }}>
<Suspense fallback={null}>
<Excalidraw
<ExcalidrawComponent
excalidrawAPI={(api) => setExcalidrawAPI(api)}
onChange={(elements, _appState, files) => {
const fingerprint = `${elements.length}:${elements.reduce((s, e) => s + (e.version || 0), 0)}:${Object.keys(files).length}`;
if (isInitialLoadRef.current) {
lastFingerprintRef.current = fingerprint;
isInitialLoadRef.current = false;
return;
}
if (fingerprint !== lastFingerprintRef.current) {
lastFingerprintRef.current = fingerprint;
isDirtyRef.current = true;
}
}}
initialData={{
...excalidrawData,
scrollToContent: true,
@@ -163,62 +227,32 @@ export default function ExcalidrawView(props: NodeViewProps) {
</div>
</ReactClearModal>
{src ? (
<div style={{ position: "relative" }}>
<Image
onClick={(e) => e.detail === 2 && handleOpen()}
radius="md"
fit="contain"
w={width}
src={getFileUrl(src)}
alt={title}
className={clsx(
selected ? "ProseMirror-selectednode" : "",
"alignCenter",
)}
/>
<Card
radius="md"
onClick={(e) => e.detail === 2 && handleOpen()}
p="xs"
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
withBorder
className={clsx(selected ? "ProseMirror-selectednode" : "")}
>
<div style={{ display: "flex", alignItems: "center" }}>
<ActionIcon
variant="transparent"
color="gray"
aria-label={t("Edit drawing")}
>
<IconEdit size={18} />
</ActionIcon>
{selected && editor.isEditable && (
<ActionIcon
onClick={handleOpen}
variant="default"
color="gray"
mx="xs"
className="print-hide"
style={{
position: "absolute",
top: 8,
right: 8,
}}
>
<IconEdit size={18} />
</ActionIcon>
)}
<Text component="span" size="lg" c="dimmed">
{t("Double-click to edit Excalidraw diagram")}
</Text>
</div>
) : (
<Card
radius="md"
onClick={(e) => e.detail === 2 && handleOpen()}
p="xs"
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
withBorder
className={clsx(selected ? "ProseMirror-selectednode" : "")}
>
<div style={{ display: "flex", alignItems: "center" }}>
<ActionIcon variant="transparent" color="gray">
<IconEdit size={18} />
</ActionIcon>
<Text component="span" size="lg" c="dimmed">
{t("Double-click to edit Excalidraw diagram")}
</Text>
</div>
</Card>
)}
</Card>
</NodeViewWrapper>
);
}
apps/client/src/features/editor/components/fixed-toolbar/fixed-toolbar.module.css
+72
View File
@@ -0,0 +1,72 @@
.fixedToolbar {
position: fixed;
top: calc(var(--app-shell-header-offset, 0rem) + 45px);
inset-inline-start: var(--app-shell-navbar-offset, 0rem);
inset-inline-end: var(--app-shell-aside-offset, 0rem);
z-index: 99;
display: flex;
align-items: center;
background: var(--mantine-color-body);
border-bottom: 1px solid
light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
overflow-x: auto;
}
.fixedToolbar::-webkit-scrollbar {
height: 2px;
}
.fixedToolbar::-webkit-scrollbar-track {
background: transparent;
}
.fixedToolbar::-webkit-scrollbar-thumb {
background: light-dark(
var(--mantine-color-gray-4),
var(--mantine-color-dark-3)
);
border-radius: 1px;
}
.inner {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 4px;
padding: 4px 8px;
margin-inline: auto;
}
.inner > * {
flex-shrink: 0;
}
.spacer {
height: 45px;
}
.divider {
flex-shrink: 0;
width: 1px;
height: 20px;
margin: 0 4px;
background: light-dark(
var(--mantine-color-gray-3),
var(--mantine-color-dark-4)
);
}
.active,
.active:hover {
color: var(--mantine-color-blue-6);
background-color: light-dark(
var(--mantine-color-gray-1),
var(--mantine-color-dark-5)
);
}
@media print {
.fixedToolbar {
display: none;
}
}
apps/client/src/features/editor/components/fixed-toolbar/fixed-toolbar.tsx
+66
View File
@@ -0,0 +1,66 @@
import { FC } from "react";
import { useAtomValue } from "jotai";
import { pageEditorAtom } from "@/features/editor/atoms/editor-atoms";
import { useToolbarState } from "./use-toolbar-state";
import { BlockTypeGroup } from "./groups/block-type-group";
import { InlineMarksGroup } from "./groups/inline-marks-group";
import { ColorGroup } from "./groups/color-group";
import { ListsGroup } from "./groups/lists-group";
import { LinkGroup } from "./groups/link-group";
import { AlignmentGroup } from "./groups/alignment-group";
import { MediaGroup } from "./groups/media-group";
import { QuickInsertsGroup } from "./groups/quick-inserts-group";
import { MoreInsertsGroup } from "./groups/more-inserts-group";
import { HistoryGroup } from "./groups/history-group";
import { AskAiGroup } from "./groups/ask-ai-group";
import { workspaceAtom } from "@/features/user/atoms/current-user-atom";
import classes from "./fixed-toolbar.module.css";
export const FixedToolbar: FC = () => {
const editor = useAtomValue(pageEditorAtom);
const state = useToolbarState(editor);
const workspace = useAtomValue(workspaceAtom);
const isGenerativeAiEnabled = workspace?.settings?.ai?.generative === true;
if (!editor || !state) return null;
return (
<>
<div
className={classes.fixedToolbar}
data-fixed-toolbar="true"
role="toolbar"
aria-label="Editor toolbar"
onMouseDown={(e) => e.preventDefault()}
>
<div className={classes.inner}>
{/* {isGenerativeAiEnabled && (
<>
<AskAiGroup />
<div className={classes.divider} />
</>
)} */}
<BlockTypeGroup editor={editor} />
<div className={classes.divider} />
<InlineMarksGroup editor={editor} state={state} />
<div className={classes.divider} />
<ColorGroup editor={editor} />
<div className={classes.divider} />
<ListsGroup editor={editor} state={state} />
<div className={classes.divider} />
<LinkGroup />
<div className={classes.divider} />
<AlignmentGroup editor={editor} />
<div className={classes.divider} />
<MediaGroup editor={editor} />
<div className={classes.divider} />
<QuickInsertsGroup editor={editor} />
<MoreInsertsGroup editor={editor} />
<div className={classes.divider} />
<HistoryGroup editor={editor} state={state} />
</div>
</div>
<div className={classes.spacer} aria-hidden />
</>
);
};
apps/client/src/features/editor/components/fixed-toolbar/groups/alignment-group.tsx
+28
View File
@@ -0,0 +1,28 @@
import { FC, useEffect, useState } from "react";
import type { Editor } from "@tiptap/react";
import { TextAlignmentSelector } from "@/features/editor/components/bubble-menu/text-alignment-selector";
interface Props {
editor: Editor;
}
export const AlignmentGroup: FC<Props> = ({ editor }) => {
const [isOpen, setIsOpen] = useState(false);
useEffect(() => {
if (!isOpen) return;
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === "Escape") setIsOpen(false);
};
document.addEventListener("keydown", handleKeyDown);
return () => document.removeEventListener("keydown", handleKeyDown);
}, [isOpen]);
return (
<TextAlignmentSelector
editor={editor}
isOpen={isOpen}
setIsOpen={setIsOpen}
/>
);
};
apps/client/src/features/editor/components/fixed-toolbar/groups/ask-ai-group.tsx
+23
View File
@@ -0,0 +1,23 @@
import { FC } from "react";
import { Button } from "@mantine/core";
import { IconSparkles } from "@tabler/icons-react";
import { useSetAtom } from "jotai";
import { useTranslation } from "react-i18next";
import { showAiMenuAtom } from "@/features/editor/atoms/editor-atoms";
export const AskAiGroup: FC = () => {
const { t } = useTranslation();
const setShowAiMenu = useSetAtom(showAiMenuAtom);
return (
<Button
variant="subtle"
color="dark"
size="xs"
leftSection={<IconSparkles size={14} />}
onClick={() => setShowAiMenu(true)}
>
{t("Ask AI")}
</Button>
);
};
apps/client/src/features/editor/components/fixed-toolbar/groups/block-type-group.tsx
+115
View File
@@ -0,0 +1,115 @@
import { FC } from "react";
import type { Editor } from "@tiptap/react";
import { useEditorState } from "@tiptap/react";
import { Button, Menu } from "@mantine/core";
import {
IconBlockquote,
IconBraces,
IconChevronDown,
IconH1,
IconH2,
IconH3,
IconMenu4,
IconPageBreak,
IconTypography,
} from "@tabler/icons-react";
import { useTranslation } from "react-i18next";
interface Props {
editor: Editor;
}
export const BlockTypeGroup: FC<Props> = ({ editor }) => {
const { t } = useTranslation();
const state = useEditorState({
editor,
selector: (ctx) => ({
isHeading1: ctx.editor.isActive("heading", { level: 1 }),
isHeading2: ctx.editor.isActive("heading", { level: 2 }),
isHeading3: ctx.editor.isActive("heading", { level: 3 }),
isBlockquote: ctx.editor.isActive("blockquote"),
isCodeBlock: ctx.editor.isActive("codeBlock"),
}),
});
let label = t("Normal text");
if (state.isHeading1) label = t("Heading 1");
else if (state.isHeading2) label = t("Heading 2");
else if (state.isHeading3) label = t("Heading 3");
else if (state.isBlockquote) label = t("Quote");
else if (state.isCodeBlock) label = t("Code block");
return (
<Menu shadow="md" position="bottom-start" withArrow={false}>
<Menu.Target>
<Button
variant="subtle"
color="dark"
size="xs"
rightSection={<IconChevronDown size={14} />}
>
{label}
</Button>
</Menu.Target>
<Menu.Dropdown>
<Menu.Item
leftSection={<IconTypography size={16} />}
onClick={() =>
editor.chain().focus().toggleNode("paragraph", "paragraph").run()
}
>
{t("Text")}
</Menu.Item>
<Menu.Item
leftSection={<IconH1 size={16} />}
onClick={() =>
editor.chain().focus().toggleHeading({ level: 1 }).run()
}
>
{t("Heading 1")}
</Menu.Item>
<Menu.Item
leftSection={<IconH2 size={16} />}
onClick={() =>
editor.chain().focus().toggleHeading({ level: 2 }).run()
}
>
{t("Heading 2")}
</Menu.Item>
<Menu.Item
leftSection={<IconH3 size={16} />}
onClick={() =>
editor.chain().focus().toggleHeading({ level: 3 }).run()
}
>
{t("Heading 3")}
</Menu.Item>
<Menu.Item
leftSection={<IconBlockquote size={16} />}
onClick={() => editor.chain().focus().toggleBlockquote().run()}
>
{t("Quote")}
</Menu.Item>
<Menu.Item
leftSection={<IconBraces size={16} />}
onClick={() => editor.chain().focus().toggleCodeBlock().run()}
>
{t("Code block")}
</Menu.Item>
<Menu.Item
leftSection={<IconMenu4 size={16} />}
onClick={() => editor.chain().focus().setHorizontalRule().run()}
>
{t("Divider")}
</Menu.Item>
<Menu.Item
leftSection={<IconPageBreak size={16} />}
onClick={() => editor.chain().focus().setPageBreak().run()}
>
{t("Page break")}
</Menu.Item>
</Menu.Dropdown>
</Menu>
);
};
apps/client/src/features/editor/components/fixed-toolbar/groups/color-group.tsx
+24
View File
@@ -0,0 +1,24 @@
import { FC, useEffect, useState } from "react";
import type { Editor } from "@tiptap/react";
import { ColorSelector } from "@/features/editor/components/bubble-menu/color-selector";
interface Props {
editor: Editor;
}
export const ColorGroup: FC<Props> = ({ editor }) => {
const [isOpen, setIsOpen] = useState(false);
useEffect(() => {
if (!isOpen) return;
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === "Escape") setIsOpen(false);
};
document.addEventListener("keydown", handleKeyDown);
return () => document.removeEventListener("keydown", handleKeyDown);
}, [isOpen]);
return (
<ColorSelector editor={editor} isOpen={isOpen} setIsOpen={setIsOpen} />
);
};
apps/client/src/features/editor/components/fixed-toolbar/groups/history-group.tsx
+44
View File
@@ -0,0 +1,44 @@
import { FC } from "react";
import type { Editor } from "@tiptap/react";
import { ActionIcon, Tooltip } from "@mantine/core";
import { IconArrowBackUp, IconArrowForwardUp } from "@tabler/icons-react";
import { useTranslation } from "react-i18next";
import type { ToolbarState } from "../use-toolbar-state";
interface Props {
editor: Editor;
state: ToolbarState;
}
export const HistoryGroup: FC<Props> = ({ editor, state }) => {
const { t } = useTranslation();
return (
<ActionIcon.Group>
<Tooltip label={t("Undo")} withArrow>
<ActionIcon
variant="subtle"
color="dark"
size="md"
aria-label={t("Undo")}
disabled={!state.canUndo}
onClick={() => editor.chain().focus().undo().run()}
>
<IconArrowBackUp size={16} />
</ActionIcon>
</Tooltip>
<Tooltip label={t("Redo")} withArrow>
<ActionIcon
variant="subtle"
color="dark"
size="md"
aria-label={t("Redo")}
disabled={!state.canRedo}
onClick={() => editor.chain().focus().redo().run()}
>
<IconArrowForwardUp size={16} />
</ActionIcon>
</Tooltip>
</ActionIcon.Group>
);
};
apps/client/src/features/editor/components/fixed-toolbar/groups/inline-marks-group.tsx
+131
View File
@@ -0,0 +1,131 @@
import { FC } from "react";
import type { Editor } from "@tiptap/react";
import { ActionIcon, Menu, Tooltip } from "@mantine/core";
import {
IconBold,
IconChevronDown,
IconClearFormatting,
IconCode,
IconIndentDecrease,
IconIndentIncrease,
IconItalic,
IconStrikethrough,
IconSubscript,
IconSuperscript,
IconUnderline,
} from "@tabler/icons-react";
import { useTranslation } from "react-i18next";
import clsx from "clsx";
import type { ToolbarState } from "../use-toolbar-state";
import classes from "../fixed-toolbar.module.css";
interface Props {
editor: Editor;
state: ToolbarState;
}
export const InlineMarksGroup: FC<Props> = ({ editor, state }) => {
const { t } = useTranslation();
return (
<ActionIcon.Group>
<Tooltip label={t("Bold")} withArrow>
<ActionIcon
variant="subtle"
color="dark"
size="md"
aria-label={t("Bold")}
aria-pressed={state.isBold}
className={clsx({ [classes.active]: state.isBold })}
onClick={() => editor.chain().focus().toggleBold().run()}
>
<IconBold size={16} />
</ActionIcon>
</Tooltip>
<Tooltip label={t("Underline")} withArrow>
<ActionIcon
variant="subtle"
color="dark"
size="md"
aria-label={t("Underline")}
aria-pressed={state.isUnderline}
className={clsx({ [classes.active]: state.isUnderline })}
onClick={() => editor.chain().focus().toggleUnderline().run()}
>
<IconUnderline size={16} />
</ActionIcon>
</Tooltip>
<Tooltip label={t("Italic")} withArrow>
<ActionIcon
variant="subtle"
color="dark"
size="md"
aria-label={t("Italic")}
aria-pressed={state.isItalic}
className={clsx({ [classes.active]: state.isItalic })}
onClick={() => editor.chain().focus().toggleItalic().run()}
>
<IconItalic size={16} />
</ActionIcon>
</Tooltip>
<Menu shadow="md" position="bottom-start" withArrow={false}>
<Menu.Target>
<ActionIcon
variant="subtle"
color="dark"
size="md"
aria-label={t("More inline formatting")}
>
<IconChevronDown size={14} />
</ActionIcon>
</Menu.Target>
<Menu.Dropdown>
<Menu.Item
leftSection={<IconStrikethrough size={16} />}
onClick={() => editor.chain().focus().toggleStrike().run()}
>
{t("Strikethrough")}
</Menu.Item>
<Menu.Item
leftSection={<IconCode size={16} />}
onClick={() => editor.chain().focus().toggleCode().run()}
>
{t("Inline code")}
</Menu.Item>
<Menu.Item
leftSection={<IconSubscript size={16} />}
onClick={() => editor.chain().focus().toggleSubscript().run()}
>
{t("Subscript")}
</Menu.Item>
<Menu.Item
leftSection={<IconSuperscript size={16} />}
onClick={() => editor.chain().focus().toggleSuperscript().run()}
>
{t("Superscript")}
</Menu.Item>
<Menu.Divider />
<Menu.Item
leftSection={<IconIndentIncrease size={16} />}
onClick={() => editor.chain().focus().indent().run()}
>
{t("Increase indent")}
</Menu.Item>
<Menu.Item
leftSection={<IconIndentDecrease size={16} />}
onClick={() => editor.chain().focus().outdent().run()}
>
{t("Decrease indent")}
</Menu.Item>
<Menu.Divider />
<Menu.Item
leftSection={<IconClearFormatting size={16} />}
onClick={() => editor.chain().focus().unsetAllMarks().run()}
>
{t("Clear formatting")}
</Menu.Item>
</Menu.Dropdown>
</Menu>
</ActionIcon.Group>
);
};
apps/client/src/features/editor/components/fixed-toolbar/groups/link-group.tsx
+6
View File
@@ -0,0 +1,6 @@
import { FC } from "react";
import { LinkSelector } from "@/features/editor/components/bubble-menu/link-selector";
export const LinkGroup: FC = () => {
return <LinkSelector />;
};
apps/client/src/features/editor/components/fixed-toolbar/groups/lists-group.tsx
+61
View File
@@ -0,0 +1,61 @@
import { FC } from "react";
import type { Editor } from "@tiptap/react";
import { ActionIcon, Tooltip } from "@mantine/core";
import { IconCheckbox, IconList, IconListNumbers } from "@tabler/icons-react";
import { useTranslation } from "react-i18next";
import clsx from "clsx";
import type { ToolbarState } from "../use-toolbar-state";
import classes from "../fixed-toolbar.module.css";
interface Props {
editor: Editor;
state: ToolbarState;
}
export const ListsGroup: FC<Props> = ({ editor, state }) => {
const { t } = useTranslation();
return (
<ActionIcon.Group>
<Tooltip label={t("Bullet List")} withArrow>
<ActionIcon
variant="subtle"
color="dark"
size="md"
aria-label={t("Bullet List")}
aria-pressed={state.isBulletList}
className={clsx({ [classes.active]: state.isBulletList })}
onClick={() => editor.chain().focus().toggleBulletList().run()}
>
<IconList size={16} />
</ActionIcon>
</Tooltip>
<Tooltip label={t("Numbered List")} withArrow>
<ActionIcon
variant="subtle"
color="dark"
size="md"
aria-label={t("Numbered List")}
aria-pressed={state.isOrderedList}
className={clsx({ [classes.active]: state.isOrderedList })}
onClick={() => editor.chain().focus().toggleOrderedList().run()}
>
<IconListNumbers size={16} />
</ActionIcon>
</Tooltip>
<Tooltip label={t("To-do List")} withArrow>
<ActionIcon
variant="subtle"
color="dark"
size="md"
aria-label={t("To-do List")}
aria-pressed={state.isTaskList}
className={clsx({ [classes.active]: state.isTaskList })}
onClick={() => editor.chain().focus().toggleTaskList().run()}
>
<IconCheckbox size={16} />
</ActionIcon>
</Tooltip>
</ActionIcon.Group>
);
};
apps/client/src/features/editor/components/fixed-toolbar/groups/media-group.tsx
+118
View File
@@ -0,0 +1,118 @@
import { FC } from "react";
import type { Editor } from "@tiptap/react";
import { ActionIcon, Menu, Tooltip } from "@mantine/core";
import {
IconFileTypePdf,
IconMovie,
IconMusic,
IconPaperclip,
IconPhoto,
} from "@tabler/icons-react";
import { useTranslation } from "react-i18next";
import { uploadImageAction } from "@/features/editor/components/image/upload-image-action";
import { uploadVideoAction } from "@/features/editor/components/video/upload-video-action";
import { uploadAudioAction } from "@/features/editor/components/audio/upload-audio-action";
import { uploadAttachmentAction } from "@/features/editor/components/attachment/upload-attachment-action";
import { uploadPdfAction } from "@/features/editor/components/pdf/upload-pdf-action";
interface Props {
editor: Editor;
}
type UploadFn = (
file: File,
editor: Editor,
pos: number,
pageId: string,
...rest: any[]
) => void;
function pickFile(
editor: Editor,
accept: string,
multiple: boolean,
upload: UploadFn,
extra?: boolean,
) {
// @ts-ignore — editor.storage.pageId is set by PageEditor.onCreate
const pageId = editor.storage?.pageId as string | undefined;
if (!pageId) return;
const input = document.createElement("input");
input.type = "file";
input.accept = accept;
input.multiple = multiple;
input.style.display = "none";
document.body.appendChild(input);
input.onchange = () => {
if (input.files?.length) {
for (const file of input.files) {
const pos = editor.view.state.selection.from;
if (extra !== undefined) {
upload(file, editor, pos, pageId, extra);
} else {
upload(file, editor, pos, pageId);
}
}
}
input.remove();
};
input.click();
}
export const MediaGroup: FC<Props> = ({ editor }) => {
const { t } = useTranslation();
return (
<Menu shadow="md" position="bottom-start" withArrow={false}>
<Menu.Target>
<Tooltip label={t("Insert media")} withArrow>
<ActionIcon
variant="subtle"
color="dark"
size="md"
aria-label={t("Insert media")}
>
<IconPhoto size={16} />
</ActionIcon>
</Tooltip>
</Menu.Target>
<Menu.Dropdown>
<Menu.Item
leftSection={<IconPhoto size={16} />}
onClick={() => pickFile(editor, "image/*", true, uploadImageAction)}
>
{t("Image")}
</Menu.Item>
<Menu.Item
leftSection={<IconMovie size={16} />}
onClick={() => pickFile(editor, "video/*", true, uploadVideoAction)}
>
{t("Video")}
</Menu.Item>
<Menu.Item
leftSection={<IconMusic size={16} />}
onClick={() => pickFile(editor, "audio/*", true, uploadAudioAction)}
>
{t("Audio")}
</Menu.Item>
<Menu.Item
leftSection={<IconFileTypePdf size={16} />}
onClick={() =>
pickFile(editor, "application/pdf", false, uploadPdfAction)
}
>
PDF
</Menu.Item>
<Menu.Item
leftSection={<IconPaperclip size={16} />}
onClick={() =>
pickFile(editor, "", true, uploadAttachmentAction, true)
}
>
{t("File attachment")}
</Menu.Item>
</Menu.Dropdown>
</Menu>
);
};
apps/client/src/features/editor/components/fixed-toolbar/groups/more-inserts-group.tsx
+217
View File
@@ -0,0 +1,217 @@
import { FC } from "react";
import type { Editor } from "@tiptap/react";
import { ActionIcon, Menu, Tooltip } from "@mantine/core";
import {
IconAppWindow,
IconCalendar,
IconCaretRightFilled,
IconChevronDown,
IconInfoCircle,
IconMath,
IconMathFunction,
IconRotate2,
IconSitemap,
IconTag,
} from "@tabler/icons-react";
import IconExcalidraw from "@/components/icons/icon-excalidraw";
import IconMermaid from "@/components/icons/icon-mermaid";
import IconDrawio from "@/components/icons/icon-drawio";
import {
AirtableIcon,
FigmaIcon,
FramerIcon,
GoogleDriveIcon,
GoogleSheetsIcon,
LoomIcon,
MiroIcon,
TypeformIcon,
VimeoIcon,
YoutubeIcon,
} from "@/components/icons";
import { useTranslation } from "react-i18next";
interface Props {
editor: Editor;
}
export const MoreInsertsGroup: FC<Props> = ({ editor }) => {
const { t } = useTranslation();
const setEmbed = (provider: string) =>
editor.chain().focus().setEmbed({ provider }).run();
const insertDate = () => {
const currentDate = new Date().toLocaleDateString("en-US", {
year: "numeric",
month: "long",
day: "numeric",
});
editor.chain().focus().insertContent(currentDate).run();
};
return (
<Menu shadow="md" position="bottom-start" withArrow={false} width={240}>
<Menu.Target>
<Tooltip label={t("More inserts")} withArrow>
<ActionIcon
variant="subtle"
color="dark"
size="md"
aria-label={t("More inserts")}
>
<IconChevronDown size={16} />
</ActionIcon>
</Tooltip>
</Menu.Target>
<Menu.Dropdown mah={400} style={{ overflowY: "auto" }}>
<Menu.Label>{t("Advanced")}</Menu.Label>
<Menu.Item
leftSection={<IconInfoCircle size={16} />}
onClick={() => editor.chain().focus().toggleCallout().run()}
>
{t("Callout")}
</Menu.Item>
<Menu.Item
leftSection={<IconCaretRightFilled size={16} />}
onClick={() => editor.chain().focus().setDetails().run()}
>
{t("Toggle block")}
</Menu.Item>
<Menu.Item
leftSection={<IconTag size={16} />}
onClick={() =>
editor.chain().focus().setStatus({ text: "", color: "gray" }).run()
}
>
{t("Status")}
</Menu.Item>
<Menu.Item
leftSection={<IconSitemap size={16} />}
onClick={() => editor.chain().focus().insertSubpages().run()}
>
{t("Subpages")}
</Menu.Item>
<Menu.Item
leftSection={<IconRotate2 size={16} />}
onClick={() =>
editor.chain().focus().insertTransclusionSource().run()
}
>
{t("Synced block")}
</Menu.Item>
<Menu.Divider />
<Menu.Label>{t("Diagrams")}</Menu.Label>
<Menu.Item
leftSection={<IconMermaid size={16} />}
onClick={() =>
editor
.chain()
.focus()
.setCodeBlock({ language: "mermaid" })
.insertContent("flowchart LR\n A --> B")
.run()
}
>
{t("Mermaid diagram")}
</Menu.Item>
<Menu.Item
leftSection={<IconDrawio size={16} />}
onClick={() => editor.chain().focus().setDrawio().run()}
>
Draw.io
</Menu.Item>
<Menu.Item
leftSection={<IconExcalidraw size={16} />}
onClick={() => editor.chain().focus().setExcalidraw().run()}
>
Excalidraw
</Menu.Item>
<Menu.Divider />
<Menu.Label>{t("Embeds")}</Menu.Label>
<Menu.Item
leftSection={<IconAppWindow size={16} />}
onClick={() => setEmbed("iframe")}
>
Iframe
</Menu.Item>
<Menu.Item
leftSection={<YoutubeIcon size={16} />}
onClick={() => setEmbed("youtube")}
>
YouTube
</Menu.Item>
<Menu.Item
leftSection={<VimeoIcon size={16} />}
onClick={() => setEmbed("vimeo")}
>
Vimeo
</Menu.Item>
<Menu.Item leftSection={<LoomIcon size={16} />} onClick={() => setEmbed("loom")}>
Loom
</Menu.Item>
<Menu.Item
leftSection={<FigmaIcon size={16} />}
onClick={() => setEmbed("figma")}
>
Figma
</Menu.Item>
<Menu.Item
leftSection={<AirtableIcon size={16} />}
onClick={() => setEmbed("airtable")}
>
Airtable
</Menu.Item>
<Menu.Item
leftSection={<TypeformIcon size={16} />}
onClick={() => setEmbed("typeform")}
>
Typeform
</Menu.Item>
<Menu.Item leftSection={<MiroIcon size={16} />} onClick={() => setEmbed("miro")}>
Miro
</Menu.Item>
<Menu.Item
leftSection={<FramerIcon size={16} />}
onClick={() => setEmbed("framer")}
>
Framer
</Menu.Item>
<Menu.Item
leftSection={<GoogleDriveIcon size={16} />}
onClick={() => setEmbed("gdrive")}
>
Google Drive
</Menu.Item>
<Menu.Item
leftSection={<GoogleSheetsIcon size={16} />}
onClick={() => setEmbed("gsheets")}
>
Google Sheets
</Menu.Item>
<Menu.Divider />
<Menu.Label>{t("Utility")}</Menu.Label>
<Menu.Item
leftSection={<IconCalendar size={16} />}
onClick={insertDate}
>
{t("Date")}
</Menu.Item>
<Menu.Item
leftSection={<IconMathFunction size={16} />}
onClick={() => editor.chain().focus().setMathInline().run()}
>
{t("Math inline")}
</Menu.Item>
<Menu.Item
leftSection={<IconMath size={16} />}
onClick={() => editor.chain().focus().setMathBlock().run()}
>
{t("Math block")}
</Menu.Item>
</Menu.Dropdown>
</Menu>
);
};
apps/client/src/features/editor/components/fixed-toolbar/groups/quick-inserts-group.tsx
+117
View File
@@ -0,0 +1,117 @@
import { FC } from "react";
import type { Editor } from "@tiptap/react";
import { ActionIcon, Menu, Tooltip } from "@mantine/core";
import {
IconAt,
IconColumns2,
IconColumns3,
IconMoodSmile,
IconTable,
} from "@tabler/icons-react";
import { IconColumns4 } from "@/components/icons/icon-columns-4";
import { IconColumns5 } from "@/components/icons/icon-columns-5";
import { useTranslation } from "react-i18next";
interface Props {
editor: Editor;
}
export const QuickInsertsGroup: FC<Props> = ({ editor }) => {
const { t } = useTranslation();
return (
<ActionIcon.Group>
<Tooltip label={t("Mention")} withArrow>
<ActionIcon
variant="subtle"
color="dark"
size="md"
aria-label={t("Mention")}
onClick={() => editor.chain().focus().insertContent("@").run()}
>
<IconAt size={16} />
</ActionIcon>
</Tooltip>
<Tooltip label={t("Emoji")} withArrow>
<ActionIcon
variant="subtle"
color="dark"
size="md"
aria-label={t("Emoji")}
onClick={() => editor.chain().focus().insertContent(":").run()}
>
<IconMoodSmile size={16} />
</ActionIcon>
</Tooltip>
<Menu shadow="md" position="bottom-start" withArrow={false}>
<Menu.Target>
<Tooltip label={t("Columns")} withArrow>
<ActionIcon
variant="subtle"
color="dark"
size="md"
aria-label={t("Columns")}
>
<IconColumns2 size={16} />
</ActionIcon>
</Tooltip>
</Menu.Target>
<Menu.Dropdown>
<Menu.Item
leftSection={<IconColumns2 size={16} />}
onClick={() =>
editor.chain().focus().insertColumns({ layout: "two_equal" }).run()
}
>
{t("{{count}} Columns", { count: 2 })}
</Menu.Item>
<Menu.Item
leftSection={<IconColumns3 size={16} />}
onClick={() =>
editor
.chain()
.focus()
.insertColumns({ layout: "three_equal" })
.run()
}
>
{t("{{count}} Columns", { count: 3 })}
</Menu.Item>
<Menu.Item
leftSection={<IconColumns4 size={16} />}
onClick={() =>
editor.chain().focus().insertColumns({ layout: "four_equal" }).run()
}
>
{t("{{count}} Columns", { count: 4 })}
</Menu.Item>
<Menu.Item
leftSection={<IconColumns5 size={16} />}
onClick={() =>
editor.chain().focus().insertColumns({ layout: "five_equal" }).run()
}
>
{t("{{count}} Columns", { count: 5 })}
</Menu.Item>
</Menu.Dropdown>
</Menu>
<Tooltip label={t("Table")} withArrow>
<ActionIcon
variant="subtle"
color="dark"
size="md"
aria-label={t("Table")}
onClick={() =>
editor
.chain()
.focus()
.insertTable({ rows: 3, cols: 3, withHeaderRow: true })
.run()
}
>
<IconTable size={16} />
</ActionIcon>
</Tooltip>
</ActionIcon.Group>
);
};
apps/client/src/features/editor/components/fixed-toolbar/use-toolbar-state.ts
+50
View File
@@ -0,0 +1,50 @@
import type { Editor } from "@tiptap/react";
import { useEditorState } from "@tiptap/react";
export interface ToolbarState {
isBold: boolean;
isItalic: boolean;
isUnderline: boolean;
isStrike: boolean;
isCode: boolean;
isSubscript: boolean;
isSuperscript: boolean;
isBulletList: boolean;
isOrderedList: boolean;
isTaskList: boolean;
canUndo: boolean;
canRedo: boolean;
}
// Undo/redo come from either StarterKit's history or the Yjs collaboration
// history extension. During the brief moment a page is rendered with the
// static editor (mainExtensions only, undoRedo disabled), neither is loaded
// and editor.can().undo/redo is undefined.
function safeCan(editor: Editor, command: "undo" | "redo"): boolean {
const can = editor.can() as Record<string, unknown>;
const fn = can[command];
return typeof fn === "function" ? (fn as () => boolean)() : false;
}
export function useToolbarState(editor: Editor | null): ToolbarState | null {
return useEditorState({
editor,
selector: (ctx) => {
if (!ctx.editor) return null;
return {
isBold: ctx.editor.isActive("bold"),
isItalic: ctx.editor.isActive("italic"),
isUnderline: ctx.editor.isActive("underline"),
isStrike: ctx.editor.isActive("strike"),
isCode: ctx.editor.isActive("code"),
isSubscript: ctx.editor.isActive("subscript"),
isSuperscript: ctx.editor.isActive("superscript"),
isBulletList: ctx.editor.isActive("bulletList"),
isOrderedList: ctx.editor.isActive("orderedList"),
isTaskList: ctx.editor.isActive("taskList"),
canUndo: safeCan(ctx.editor, "undo"),
canRedo: safeCan(ctx.editor, "redo"),
};
},
});
}
apps/client/src/features/editor/components/image/image-menu.tsx
+115 -22
View File
@@ -1,22 +1,31 @@
import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
import React, { useCallback } from "react";
import { Node as PMNode } from "prosemirror-model";
import React, { useCallback, useRef } from "react";
import { Node as PMNode } from "@tiptap/pm/model";
import { isEditorReady } from "@docmost/editor-ext";
import {
EditorMenuProps,
ShouldShowProps,
} from "@/features/editor/components/table/types/types.ts";
import { ActionIcon, Tooltip } from "@mantine/core";
import clsx from "clsx";
import {
IconLayoutAlignCenter,
IconLayoutAlignLeft,
IconLayoutAlignRight,
IconDownload,
IconRefresh,
IconTrash,
} from "@tabler/icons-react";
import { NodeWidthResize } from "@/features/editor/components/common/node-width-resize.tsx";
import { useTranslation } from "react-i18next";
import { getFileUrl } from "@/lib/config.ts";
import { uploadImageAction } from "@/features/editor/components/image/upload-image-action.tsx";
import { useAltTextControl } from "@/features/editor/components/common/use-alt-text-control.tsx";
import classes from "../common/toolbar-menu.module.css";
export function ImageMenu({ editor }: EditorMenuProps) {
const { t } = useTranslation();
const fileInputRef = useRef<HTMLInputElement>(null);
const editorState = useEditorState({
editor,
@@ -32,7 +41,8 @@ export function ImageMenu({ editor }: EditorMenuProps) {
isAlignLeft: ctx.editor.isActive("image", { align: "left" }),
isAlignCenter: ctx.editor.isActive("image", { align: "center" }),
isAlignRight: ctx.editor.isActive("image", { align: "right" }),
width: imageAttrs?.width ? parseInt(imageAttrs.width) : null,
src: imageAttrs?.src || null,
alt: imageAttrs?.alt || "",
};
},
});
@@ -49,7 +59,7 @@ export function ImageMenu({ editor }: EditorMenuProps) {
);
const getReferencedVirtualElement = useCallback(() => {
if (!editor) return;
if (!isEditorReady(editor)) return;
const { selection } = editor.state;
const predicate = (node: PMNode) => node.type.name === "image";
const parent = findParentNode(predicate)(selection);
@@ -94,17 +104,50 @@ export function ImageMenu({ editor }: EditorMenuProps) {
.run();
}, [editor]);
const onWidthChange = useCallback(
(value: number) => {
editor
.chain()
.focus(undefined, { scrollIntoView: false })
.setImageWidth(value)
.run();
const handleDownload = useCallback(() => {
if (!editorState?.src) return;
const url = getFileUrl(editorState.src);
const a = document.createElement("a");
a.href = url;
a.download = "";
a.click();
}, [editorState?.src]);
const handleReplace = useCallback(() => {
fileInputRef.current?.click();
}, []);
const handleFileChange = useCallback(
(e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (!file) return;
// @ts-ignore
const pageId = editor.storage?.pageId;
if (pageId) {
const pos = editor.state.selection.from;
uploadImageAction(file, editor, pos, pageId);
}
// Reset so the same file can be selected again
e.target.value = "";
},
[editor],
);
const handleDelete = useCallback(() => {
editor.commands.deleteSelection();
}, [editor]);
const {
button: altTextButton,
panel: altTextPanel,
isEditing: isEditingAlt,
} = useAltTextControl({
editor,
nodeName: "image",
currentAlt: editorState?.alt || "",
});
return (
<BaseBubbleMenu
editor={editor}
@@ -118,44 +161,94 @@ export function ImageMenu({ editor }: EditorMenuProps) {
}}
shouldShow={shouldShow}
>
<ActionIcon.Group className="actionIconGroup">
<Tooltip position="top" label={t("Align left")}>
{isEditingAlt ? (
altTextPanel
) : (
<div className={classes.toolbar}>
<Tooltip position="top" label={t("Align left")} withinPortal={false}>
<ActionIcon
onClick={alignImageLeft}
size="lg"
aria-label={t("Align left")}
variant={editorState?.isAlignLeft ? "light" : "default"}
variant="subtle"
className={clsx({ [classes.active]: editorState?.isAlignLeft })}
>
<IconLayoutAlignLeft size={18} />
</ActionIcon>
</Tooltip>
<Tooltip position="top" label={t("Align center")}>
<Tooltip position="top" label={t("Align center")} withinPortal={false}>
<ActionIcon
onClick={alignImageCenter}
size="lg"
aria-label={t("Align center")}
variant={editorState?.isAlignCenter ? "light" : "default"}
variant="subtle"
className={clsx({ [classes.active]: editorState?.isAlignCenter })}
>
<IconLayoutAlignCenter size={18} />
</ActionIcon>
</Tooltip>
<Tooltip position="top" label={t("Align right")}>
<Tooltip position="top" label={t("Align right")} withinPortal={false}>
<ActionIcon
onClick={alignImageRight}
size="lg"
aria-label={t("Align right")}
variant={editorState?.isAlignRight ? "light" : "default"}
variant="subtle"
className={clsx({ [classes.active]: editorState?.isAlignRight })}
>
<IconLayoutAlignRight size={18} />
</ActionIcon>
</Tooltip>
</ActionIcon.Group>
{editorState?.width && (
<NodeWidthResize onChange={onWidthChange} value={editorState.width} />
<div className={classes.divider} />
{altTextButton}
<div className={classes.divider} />
<Tooltip position="top" label={t("Download")} withinPortal={false}>
<ActionIcon
onClick={handleDownload}
size="lg"
aria-label={t("Download")}
variant="subtle"
>
<IconDownload size={18} />
</ActionIcon>
</Tooltip>
<Tooltip position="top" label={t("Replace image")} withinPortal={false}>
<ActionIcon
onClick={handleReplace}
size="lg"
aria-label={t("Replace image")}
variant="subtle"
>
<IconRefresh size={18} />
</ActionIcon>
</Tooltip>
<Tooltip position="top" label={t("Delete")} withinPortal={false}>
<ActionIcon
onClick={handleDelete}
size="lg"
aria-label={t("Delete")}
variant="subtle"
>
<IconTrash size={18} />
</ActionIcon>
</Tooltip>
</div>
)}
<input
ref={fileInputRef}
type="file"
accept="image/*"
style={{ display: "none" }}
onChange={handleFileChange}
/>
</BaseBubbleMenu>
);
}
apps/client/src/features/editor/components/image/image-resize-handles.ts
+7
View File
@@ -0,0 +1,7 @@
import {
createResizeHandle,
buildResizeClasses,
} from "../common/node-resize-handles";
export const createImageHandle = createResizeHandle;
export const imageResizeClasses = buildResizeClasses("node-image");
apps/client/src/features/editor/components/image/image-resize.module.css
+64
View File
@@ -0,0 +1,64 @@
.container {
display: flex;
}
.wrapper {
position: relative;
border-radius: 8px;
overflow: visible;
max-width: 100%;
}
.wrapper img {
height: auto !important;
}
.resizing {
user-select: none;
}
.handle {
position: absolute;
top: 0;
bottom: 0;
width: 16px;
display: flex;
align-items: center;
justify-content: center;
cursor: ew-resize;
opacity: 0;
transition: opacity 0.2s ease;
z-index: 2;
}
.handle[data-resize-handle="left"] {
left: -8px;
}
.handle[data-resize-handle="right"] {
right: -8px;
}
.wrapper:hover .handle {
opacity: 1;
}
.resizing .handle {
opacity: 1;
}
.handleBar {
width: 4px;
height: 48px;
border-radius: 4px;
transition: background-color 0.15s ease;
background-color: light-dark(var(--mantine-color-blue-4), var(--mantine-color-blue-5));
}
.handle:hover .handleBar {
background-color: light-dark(var(--mantine-color-blue-6), var(--mantine-color-blue-4));
}
.resizing .handleBar {
background-color: light-dark(var(--mantine-color-blue-6), var(--mantine-color-blue-4));
}
apps/client/src/features/editor/components/image/image-view.module.css
+4
View File
@@ -2,8 +2,12 @@
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
border-radius: 8px;
overflow: hidden;
}
.skeleton {
animation: pulse 1.2s ease-in-out infinite;
@mixin light {
apps/client/src/features/editor/components/image/image-view.tsx
+4 -3
View File
@@ -9,7 +9,7 @@ import { useTranslation } from "react-i18next";
export default function ImageView(props: NodeViewProps) {
const { t } = useTranslation();
const { editor, node, selected } = props;
const { src, width, align, title, aspectRatio, placeholder } = node.attrs;
const { src, width, align, alt, aspectRatio, placeholder } = node.attrs;
const alignClass = useMemo(() => {
if (align === "left") return "alignLeft";
if (align === "right") return "alignRight";
@@ -33,6 +33,7 @@ export default function ImageView(props: NodeViewProps) {
className={clsx(
selected && "ProseMirror-selectednode",
classes.imageWrapper,
!src && placeholder && classes.skeleton,
alignClass,
)}
style={{
@@ -41,7 +42,7 @@ export default function ImageView(props: NodeViewProps) {
}}
>
{src && (
<Image radius="md" fit="contain" src={getFileUrl(src)} alt={title} />
<Image radius="md" fit="contain" src={getFileUrl(src)} alt={alt} />
)}
{!src && previewSrc && (
<Group pos="relative" h="100%" w="100%">
@@ -54,7 +55,7 @@ export default function ImageView(props: NodeViewProps) {
<Loader size={20} pos="absolute" bottom={6} right={6} />
</Group>
)}
{!src && !previewSrc && (
{!src && !previewSrc && placeholder && (
<Group justify="center" wrap="nowrap" gap="xs" maw="100%" px="md">
<Loader size={20} style={{ flexShrink: 0 }} />
<Text component="span" size="sm" truncate="end">
apps/client/src/features/editor/components/link/link-editor-panel.tsx
+199 -18
View File
@@ -1,36 +1,217 @@
import React from "react";
import { Button, Group, TextInput } from "@mantine/core";
import { IconLink } from "@tabler/icons-react";
import React, { useCallback, useEffect, useRef, useState } from "react";
import {
Group,
ScrollArea,
Text,
TextInput,
UnstyledButton,
} from "@mantine/core";
import { IconFileDescription, IconLink, IconWorld } from "@tabler/icons-react";
import { useLinkEditorState } from "@/features/editor/components/link/use-link-editor-state.tsx";
import { LinkEditorPanelProps } from "@/features/editor/components/link/types.ts";
import { useTranslation } from "react-i18next";
import { useSearchSuggestionsQuery } from "@/features/search/queries/search-query.ts";
import { useSpaceQuery } from "@/features/space/queries/space-query.ts";
import { useParams } from "react-router-dom";
import { buildPageUrl } from "@/features/page/page.utils.ts";
import { IPage } from "@/features/page/types/page.types.ts";
import { AutoTooltipText } from "@/components/ui/auto-tooltip-text.tsx";
import clsx from "clsx";
import classes from "./link.module.css";
export const LinkEditorPanel = ({
onSetLink,
initialUrl,
onUnsetLink,
}: LinkEditorPanelProps) => {
const { t } = useTranslation();
const state = useLinkEditorState({
onSetLink,
initialUrl,
const { spaceSlug } = useParams();
const { data: space } = useSpaceQuery(spaceSlug);
const state = useLinkEditorState({ onSetLink, initialUrl });
const [selectedIndex, setSelectedIndex] = useState(0);
const viewportRef = useRef<HTMLDivElement>(null);
const { data: suggestion } = useSearchSuggestionsQuery({
query: state.isSearchQuery ? state.url : "",
includeUsers: false,
includePages: true,
spaceId: space?.id,
limit: state.isSearchQuery ? 10 : 3,
preload: true,
});
const pages: Partial<IPage>[] = suggestion?.pages ?? [];
useEffect(() => {
setSelectedIndex(0);
}, [pages.length]);
const selectPage = useCallback(
(page: Partial<IPage>) => {
const url = buildPageUrl(
page.space?.slug || spaceSlug,
page.slugId,
page.title,
);
onSetLink(url, true);
},
[onSetLink, spaceSlug],
);
const handleKeyDown = useCallback(
(e: React.KeyboardEvent) => {
const hasUrlItem = state.url.length > 0 && (state.isValidUrl || state.isSearchQuery);
const total = (hasUrlItem ? 1 : 0) + (state.isValidUrl ? 0 : pages.length);
if (total === 0) return;
if (e.key === "ArrowDown") {
e.preventDefault();
setSelectedIndex((prev) => Math.min(prev + 1, total - 1));
} else if (e.key === "ArrowUp") {
e.preventDefault();
setSelectedIndex((prev) => Math.max(prev - 1, 0));
} else if (e.key === "Enter") {
e.preventDefault();
if (hasUrlItem && selectedIndex === 0) {
onSetLink(state.url, false);
} else {
const pageIndex = hasUrlItem ? selectedIndex - 1 : selectedIndex;
if (pageIndex >= 0 && pageIndex < pages.length) {
selectPage(pages[pageIndex]);
}
}
}
},
[pages, selectedIndex, selectPage, state.isValidUrl, state.isSearchQuery, state.url, onSetLink],
);
useEffect(() => {
viewportRef.current
?.querySelector(`[data-item-index="${selectedIndex}"]`)
?.scrollIntoView({ block: "nearest" });
}, [selectedIndex]);
const showPages = pages.length > 0 && !state.isValidUrl;
const showUrlItem = state.url.length > 0 && (state.isValidUrl || state.isSearchQuery);
const showDropdown = showPages || showUrlItem;
return (
<div>
<form onSubmit={state.handleSubmit}>
<Group gap="xs" style={{ flex: 1 }} wrap="nowrap">
<TextInput
leftSection={<IconLink size={16} />}
variant="filled"
placeholder={t("Paste link")}
value={state.url}
onChange={state.onChange}
/>
<Button p={"xs"} type="submit" disabled={!state.isValidUrl}>
{t("Save")}
</Button>
</Group>
<TextInput
leftSection={<IconLink size={16} stroke={1.5} color="var(--mantine-color-dimmed)" />}
classNames={{ input: classes.linkInput }}
placeholder={t("Paste link or search pages")}
aria-label={t("Paste link or search pages")}
role="combobox"
aria-expanded={showDropdown}
aria-controls="link-editor-results"
aria-autocomplete="list"
aria-activedescendant={
showDropdown ? `link-editor-option-${selectedIndex}` : undefined
}
value={state.url}
onChange={state.onChange}
onKeyDown={handleKeyDown}
data-autofocus
autoFocus
/>
</form>
{showDropdown && (
<>
{!state.isSearchQuery && !state.isValidUrl && (
<Text c="dimmed" size="xs" fw={600} px="sm" pt={10} pb={4}>
{t("Recents")}
</Text>
)}
<ScrollArea.Autosize
viewportRef={viewportRef}
mah={300}
scrollbars="y"
scrollbarSize={6}
mt={state.url.length > 0 ? 8 : 0}
styles={{ content: { minWidth: 0 } }}
id="link-editor-results"
role="listbox"
aria-label={t("Link suggestions")}
>
{showUrlItem && (
<UnstyledButton
data-item-index={0}
id="link-editor-option-0"
role="option"
aria-selected={selectedIndex === 0}
onClick={() => onSetLink(state.url, false)}
className={clsx(classes.searchItem, {
[classes.selectedSearchItem]: selectedIndex === 0,
})}
>
<Group gap={10} wrap="nowrap" align="flex-start">
<span className={classes.pageIcon}>
<IconWorld size={18} stroke={1.5} />
</span>
<div style={{ flex: 1, minWidth: 0 }}>
<Text size="sm" fw={500} truncate lh={1.3}>
{state.url}
</Text>
<Text size="xs" c="dimmed" lh={1.4}>
{t("Link to web page")}
</Text>
</div>
</Group>
</UnstyledButton>
)}
{!state.isValidUrl && pages.map((page, index) => {
const itemIndex = showUrlItem ? index + 1 : index;
return (
<UnstyledButton
data-item-index={itemIndex}
id={`link-editor-option-${itemIndex}`}
role="option"
aria-selected={itemIndex === selectedIndex}
key={page.id || index}
onClick={() => selectPage(page)}
className={clsx(classes.searchItem, {
[classes.selectedSearchItem]: itemIndex === selectedIndex,
})}
>
<Group gap={10} wrap="nowrap" align="flex-start">
<span className={classes.pageIcon}>
{page.icon || <IconFileDescription size={18} stroke={1.5} />}
</span>
<div style={{ flex: 1, minWidth: 0 }}>
<AutoTooltipText size="sm" fw={500} truncate lh={1.3}>
{page.title || t("Untitled")}
</AutoTooltipText>
{page.space?.name && (
<AutoTooltipText size="xs" c="dimmed" truncate lh={1.4}>
{page.space.name}
</AutoTooltipText>
)}
</div>
</Group>
</UnstyledButton>
);
})}
</ScrollArea.Autosize>
</>
)}
{onUnsetLink && (
<UnstyledButton
onClick={onUnsetLink}
className={classes.removeLink}
>
<Text size="sm" c="red">
{t("Remove link")}
</Text>
</UnstyledButton>
)}
</div>
);
};
apps/client/src/features/editor/components/link/link-menu.tsx
+92 -76
View File
@@ -1,98 +1,114 @@
import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
import React, { useCallback, useState } from "react";
import { EditorMenuProps } from "@/features/editor/components/table/types/types.ts";
import { LinkEditorPanel } from "@/features/editor/components/link/link-editor-panel.tsx";
import { LinkPreviewPanel } from "@/features/editor/components/link/link-preview.tsx";
import { Card } from "@mantine/core";
import { useEditorState } from "@tiptap/react";
import { FC, useCallback, useEffect, useRef } from "react";
import { BubbleMenu } from "@tiptap/react/menus";
import type { Editor } from "@tiptap/react";
import { useAtom } from "jotai";
import { isTextSelected } from "@docmost/editor-ext";
import { showLinkMenuAtom } from "@/features/editor/atoms/editor-atoms";
import { LinkEditorPanel } from "@/features/editor/components/link/link-editor-panel";
import { normalizeUrl } from "@/lib/utils";
import { TextSelection } from "@tiptap/pm/state";
import { Paper } from "@mantine/core";
export function LinkMenu({ editor, appendTo }: EditorMenuProps) {
const [showEdit, setShowEdit] = useState(false);
type EditorLinkMenuProps = {
editor: Editor;
};
const shouldShow = useCallback(() => {
return editor.isActive("link");
}, [editor]);
export const EditorLinkMenu: FC<EditorLinkMenuProps> = ({ editor }) => {
const [showLinkMenu, setShowLinkMenu] = useAtom(showLinkMenuAtom);
const showLinkMenuRef = useRef(showLinkMenu);
const editorState = useEditorState({
editor,
selector: (ctx) => {
if (!ctx.editor) {
return null;
}
const link = ctx.editor.getAttributes("link");
return {
href: link.href,
};
},
});
const containerRef = useRef<HTMLDivElement>(null);
const handleEdit = useCallback(() => {
setShowEdit(true);
useEffect(() => {
showLinkMenuRef.current = showLinkMenu;
if (showLinkMenu) {
editor.commands.focus();
}
}, [showLinkMenu, editor]);
const focusInput = useCallback(() => {
requestAnimationFrame(() => {
containerRef.current
?.querySelector<HTMLInputElement>("input")
?.focus({ preventScroll: true });
});
}, []);
const onSetLink = useCallback(
(url: string) => {
(url: string, internal?: boolean) => {
editor
.chain()
.focus()
.extendMarkRange("link")
.setLink({ href: url })
.setLink({
href: internal ? url : normalizeUrl(url),
internal: !!internal,
} as any)
.command(({ tr }) => {
tr.setSelection(TextSelection.create(tr.doc, tr.selection.to));
return true;
})
.run();
setShowEdit(false);
setShowLinkMenu(false);
},
[editor],
[editor, setShowLinkMenu],
);
const onUnsetLink = useCallback(() => {
editor.chain().focus().extendMarkRange("link").unsetLink().run();
setShowEdit(false);
return null;
}, [editor]);
useEffect(() => {
if (!showLinkMenu) return;
const onShowEdit = useCallback(() => {
setShowEdit(true);
}, []);
const dismiss = () => {
setShowLinkMenu(false);
editor.commands.focus();
editor.commands.setTextSelection(editor.state.selection.to);
};
const onHideEdit = useCallback(() => {
setShowEdit(false);
}, []);
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === "Escape") {
dismiss();
}
};
const handleMouseDown = (e: MouseEvent) => {
if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
dismiss();
}
};
document.addEventListener("keydown", handleKeyDown);
document.addEventListener("mousedown", handleMouseDown);
return () => {
document.removeEventListener("keydown", handleKeyDown);
document.removeEventListener("mousedown", handleMouseDown);
};
}, [showLinkMenu, setShowLinkMenu]);
if (!showLinkMenu) return null;
return (
<BaseBubbleMenu
<BubbleMenu
editor={editor}
pluginKey={`link-menu`}
updateDelay={0}
options={{
onHide: () => {
setShowEdit(false);
},
placement: "bottom",
offset: 5,
// zIndex: 101,
shouldShow={({ editor, state }) => {
const { empty } = state.selection;
return (
showLinkMenuRef.current &&
editor.isEditable &&
!empty &&
isTextSelected(editor)
);
}}
shouldShow={shouldShow}
options={{
placement: "bottom",
offset: 8,
onShow: focusInput,
onHide: () => {
setShowLinkMenu(false);
},
}}
style={{ zIndex: 198, position: "relative" }}
>
{showEdit ? (
<Card
withBorder
radius="md"
padding="xs"
bg="var(--mantine-color-body)"
>
<LinkEditorPanel
initialUrl={editorState?.href}
onSetLink={onSetLink}
/>
</Card>
) : (
<LinkPreviewPanel
url={editorState?.href}
onClear={onUnsetLink}
onEdit={handleEdit}
/>
)}
</BaseBubbleMenu>
<Paper ref={containerRef} w={320} p="sm" shadow="md" radius={6} withBorder>
<LinkEditorPanel onSetLink={onSetLink} />
</Paper>
</BubbleMenu>
);
}
export default LinkMenu;
};
apps/client/src/features/editor/components/link/link-preview.tsx
-60
View File
@@ -1,60 +0,0 @@
import {
Tooltip,
ActionIcon,
Card,
Divider,
Anchor,
Flex,
} from "@mantine/core";
import { IconLinkOff, IconPencil } from "@tabler/icons-react";
import { useTranslation } from "react-i18next";
import classes from "./link.module.css";
export type LinkPreviewPanelProps = {
url: string;
onEdit: () => void;
onClear: () => void;
};
export const LinkPreviewPanel = ({
onClear,
onEdit,
url,
}: LinkPreviewPanelProps) => {
const { t } = useTranslation();
return (
<>
<Card withBorder radius="md" padding="xs" bg="var(--mantine-color-body)">
<Flex align="center">
<Tooltip label={url} withArrow withinPortal={false}>
<Anchor
href={url}
target="_blank"
rel="noopener noreferrer"
className={classes.link}
>
{url}
</Anchor>
</Tooltip>
<Flex align="center">
<Divider mx={4} orientation="vertical" />
<Tooltip label={t("Edit link")}>
<ActionIcon onClick={onEdit} variant="subtle" color="gray">
<IconPencil size={16} />
</ActionIcon>
</Tooltip>
<Tooltip label={t("Remove link")}>
<ActionIcon onClick={onClear} variant="subtle" color="red">
<IconLinkOff size={16} />
</ActionIcon>
</Tooltip>
</Flex>
</Flex>
</Card>
</>
);
};
apps/client/src/features/editor/components/link/link-view.tsx
+578
View File
@@ -0,0 +1,578 @@
import { MarkViewContent, MarkViewProps } from "@tiptap/react";
import { useNavigate, useLocation, useParams } from "react-router-dom";
import {
IconFileDescription,
IconCopy,
IconExternalLink,
IconLinkOff,
IconPencil,
IconWorld,
} from "@tabler/icons-react";
import { useState, useCallback, useRef, useEffect } from "react";
import { notifications } from "@mantine/notifications";
import {
Divider,
Group,
Popover,
Text,
TextInput,
ActionIcon,
Tooltip,
UnstyledButton,
} from "@mantine/core";
import classes from "./link.module.css";
import { useTranslation } from "react-i18next";
import { INTERNAL_LINK_REGEX } from "@/lib/constants";
import { LinkEditorPanel } from "@/features/editor/components/link/link-editor-panel.tsx";
import { usePageQuery } from "@/features/page/queries/page-query.ts";
import { useSharePageQuery } from "@/features/share/queries/share-query.ts";
import { buildSharedPageUrl } from "@/features/page/page.utils.ts";
import { extractPageSlugId } from "@/lib";
import { sanitizeUrl, copyToClipboard } from "@docmost/editor-ext";
import { normalizeUrl } from "@/lib/utils";
const parseInternalLink = (
href: string,
internalAttr?: boolean,
): { isInternal: boolean; slugId: string | null; label: string } => {
if (!href) return { isInternal: !!internalAttr, slugId: null, label: "" };
const match = INTERNAL_LINK_REGEX.exec(href);
if (!match) {
if (internalAttr) return { isInternal: true, slugId: null, label: href };
return { isInternal: false, slugId: null, label: href };
}
const isExternal = match[2] && match[2] !== window.location.host;
const slug = match[5];
const slugId = extractPageSlugId(slug);
const namePart = slug.split("-").slice(0, -1).join("-");
return {
isInternal: !isExternal,
slugId,
label: namePart || slug,
};
};
export default function LinkView(props: MarkViewProps) {
const { mark, editor } = props;
const href = mark.attrs.href as string;
const navigate = useNavigate();
const location = useLocation();
const { shareId, pageSlug } = useParams();
const { t } = useTranslation();
const isShareRoute = location.pathname.startsWith("/share");
const [popoverState, setPopoverState] = useState<
"closed" | "preview" | "edit"
>("closed");
const [linkTitle, setLinkTitle] = useState("");
const [linkUrl, setLinkUrl] = useState("");
const [showSearch, setShowSearch] = useState(false);
const lastOpenState = useRef<"preview" | "edit">("preview");
const wrapperRef = useRef<HTMLSpanElement>(null);
const dropdownRef = useRef<HTMLDivElement>(null);
const isEditable = editor.isEditable;
const {
isInternal,
slugId,
label: linkLabel,
} = parseInternalLink(href, mark.attrs.internal);
const isPopoverVisible = popoverState !== "closed";
const activeView = isPopoverVisible ? popoverState : lastOpenState.current;
const { data: linkedPage } = usePageQuery({
pageId: isPopoverVisible && slugId && !isShareRoute ? slugId : null,
});
const { data: sharedPageData } = useSharePageQuery({
pageId: isPopoverVisible && slugId && isShareRoute ? slugId : null,
});
const pageTitle = isShareRoute
? sharedPageData?.page?.title
: linkedPage?.title;
const pendingTitleRef = useRef<string | null>(null);
const titleInputRef = useRef<HTMLInputElement>(null);
const getLinkPos = useCallback((): number | null => {
if (!wrapperRef.current) return null;
try {
return editor.view.posAtDOM(wrapperRef.current, 0);
} catch {
return null;
}
}, [editor]);
const handleUpdateLinkTitle = useCallback(
(newTitle: string) => {
if (!newTitle) return;
const pos = getLinkPos();
if (pos === null) return;
const { state } = editor;
const resolved = state.doc.resolve(pos);
const node = resolved.nodeAfter;
if (!node?.isText) return;
const linkMark = node.marks.find(
(m) => m.type.name === "link" && m.attrs.href === href,
);
if (!linkMark || node.text === newTitle) return;
const from = pos;
const to = pos + node.nodeSize;
const { tr } = state;
tr.insertText(newTitle, from, to);
tr.addMark(from, from + newTitle.length, linkMark);
editor.view.dispatch(tr);
},
[editor, href, getLinkPos],
);
const handleEditLink = useCallback(
(url: string, internal?: boolean) => {
const normalizedUrl = internal ? url : normalizeUrl(url);
const pos = getLinkPos();
if (pos === null) {
setPopoverState("closed");
return;
}
const { state } = editor;
const resolved = state.doc.resolve(pos);
const node = resolved.nodeAfter;
if (!node?.isText) {
setPopoverState("closed");
return;
}
const linkMark = node.marks.find(
(m) => m.type.name === "link" && m.attrs.href === href,
);
if (linkMark) {
const from = pos;
const to = pos + node.nodeSize;
const { tr } = state;
tr.removeMark(from, to, linkMark.type);
tr.addMark(
from,
to,
linkMark.type.create({ href: normalizedUrl, internal: !!internal }),
);
editor.view.dispatch(tr);
}
setPopoverState("closed");
},
[editor, href, getLinkPos],
);
useEffect(() => {
if (popoverState === "edit") {
const text = wrapperRef.current?.querySelector("a")?.textContent || "";
setLinkTitle(text);
setLinkUrl(href);
pendingTitleRef.current = null;
requestAnimationFrame(() => titleInputRef.current?.focus());
}
if (popoverState === "closed") {
if (pendingTitleRef.current !== null) {
handleUpdateLinkTitle(pendingTitleRef.current);
pendingTitleRef.current = null;
}
setShowSearch(false);
}
}, [popoverState, href, isInternal, handleUpdateLinkTitle]);
useEffect(() => {
if (popoverState !== "closed") {
lastOpenState.current = popoverState;
}
}, [popoverState]);
useEffect(() => {
if (!isPopoverVisible) return;
const handleClickOutside = (e: MouseEvent) => {
const target = e.target as Node;
if (
wrapperRef.current?.contains(target) ||
dropdownRef.current?.contains(target)
) {
return;
}
setPopoverState("closed");
};
const handleEscape = (e: KeyboardEvent) => {
if (e.key === "Escape") {
setPopoverState("closed");
}
};
document.addEventListener("mousedown", handleClickOutside, true);
document.addEventListener("keydown", handleEscape, true);
return () => {
document.removeEventListener("mousedown", handleClickOutside, true);
document.removeEventListener("keydown", handleEscape, true);
};
}, [isPopoverVisible]);
const handleNavigate = useCallback(() => {
if (!href) return;
if (isInternal) {
let targetPath = href;
let anchor = "";
try {
const url = new URL(href);
targetPath = url.pathname;
anchor = url.hash.slice(1);
} catch {
if (href.includes("#")) {
[targetPath, anchor] = href.split("#");
}
}
if (anchor) {
const currentPageSlugId = extractPageSlugId(pageSlug);
if (!slugId || currentPageSlugId === slugId) {
const element =
document.querySelector(`[id="${anchor}"]`) ||
document.querySelector(`[data-id="${anchor}"]`);
if (element) {
element.scrollIntoView({ behavior: "smooth", block: "start" });
navigate(`${location.pathname}#${anchor}`, { replace: true });
return;
}
}
}
if (isShareRoute && slugId) {
const sharedUrl = buildSharedPageUrl({
shareId,
pageSlugId: slugId,
pageTitle: pageTitle,
anchorId: anchor || undefined,
});
navigate(sharedUrl);
} else {
navigate(anchor ? `${targetPath}#${anchor}` : targetPath);
}
} else {
window.open(
sanitizeUrl(normalizeUrl(href)),
"_blank",
"noopener,noreferrer",
);
}
}, [
href,
navigate,
location.pathname,
isInternal,
isShareRoute,
slugId,
shareId,
pageTitle,
pageSlug,
]);
const handleClick = useCallback(
(e: React.MouseEvent) => {
e.preventDefault();
e.stopPropagation();
if (isEditable) {
setPopoverState("preview");
} else {
handleNavigate();
}
},
[handleNavigate, isEditable],
);
const handleCopy = useCallback(
(e: React.MouseEvent) => {
e.preventDefault();
e.stopPropagation();
const fullUrl = sanitizeUrl(
isInternal ? `${window.location.origin}${href}` : href,
);
copyToClipboard(fullUrl);
notifications.show({
message: t("Link copied"),
});
setPopoverState("closed");
},
[href, isInternal, t],
);
const handleRemoveLink = useCallback(() => {
editor.chain().focus().extendMarkRange("link").unsetLink().run();
setPopoverState("closed");
}, [editor]);
const displayHref = sanitizeUrl(
isInternal
? isShareRoute && slugId
? buildSharedPageUrl({ shareId, pageSlugId: slugId, pageTitle })
: href
: normalizeUrl(href),
);
const linkTitleInput = (
<>
<Text size="xs" fw={600} c="dimmed" mt="sm" mb={4}>
{t("Link title")}
</Text>
<TextInput
ref={titleInputRef}
classNames={{ input: classes.linkInput }}
value={linkTitle}
onChange={(e) => {
const val = e.currentTarget.value;
setLinkTitle(val);
pendingTitleRef.current = val;
const anchor = wrapperRef.current?.querySelector("a");
if (anchor && val) {
const walker = document.createTreeWalker(
anchor,
NodeFilter.SHOW_TEXT,
);
const textNode = walker.nextNode();
if (textNode) {
const view = editor.view as any;
view.domObserver.stop();
textNode.nodeValue = val;
view.domObserver.start();
}
}
}}
onBlur={() => {
if (pendingTitleRef.current !== null) {
handleUpdateLinkTitle(pendingTitleRef.current);
pendingTitleRef.current = null;
}
}}
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
handleUpdateLinkTitle(linkTitle);
pendingTitleRef.current = null;
setPopoverState("closed");
}
}}
size="sm"
/>
</>
);
return (
<Popover
opened={isPopoverVisible}
width={activeView === "edit" ? 320 : undefined}
position="bottom"
withArrow
shadow="md"
trapFocus={false}
closeOnClickOutside={false}
>
<Popover.Target>
<span
ref={wrapperRef}
className={classes.linkWrapper}
onClick={handleClick}
>
<a
href={displayHref}
spellCheck={false}
onClick={(e) => e.preventDefault()}
target={isInternal ? undefined : "_blank"}
rel={isInternal ? undefined : "noopener noreferrer"}
>
<MarkViewContent />
</a>
</span>
</Popover.Target>
<Popover.Dropdown
ref={dropdownRef}
p={activeView === "edit" ? "sm" : 6}
onMouseDown={(e) => e.stopPropagation()}
>
{activeView === "edit" ? (
<>
<Text size="xs" fw={600} c="dimmed" mb={4}>
{t("Page or URL")}
</Text>
{isInternal ? (
!showSearch ? (
<>
<UnstyledButton
className={classes.linkChip}
onClick={() => setShowSearch(true)}
>
<IconFileDescription
size={16}
stroke={1.5}
color="var(--mantine-color-dimmed)"
style={{ flexShrink: 0 }}
/>
<Text size="sm" fw={500} truncate>
{pageTitle || linkTitle}
</Text>
</UnstyledButton>
{linkTitleInput}
<Divider my="xs" />
<UnstyledButton
onClick={handleRemoveLink}
className={classes.removeLink}
>
<Group gap={8}>
<IconLinkOff size={16} stroke={1.5} />
<Text size="sm">{t("Remove link")}</Text>
</Group>
</UnstyledButton>
</>
) : (
<LinkEditorPanel
onSetLink={handleEditLink}
onUnsetLink={handleRemoveLink}
/>
)
) : (
<>
<TextInput
leftSection={
<IconWorld
size={16}
stroke={1.5}
color="var(--mantine-color-dimmed)"
/>
}
classNames={{ input: classes.linkInput }}
value={linkUrl}
onChange={(e) => setLinkUrl(e.currentTarget.value)}
onBlur={() => {
if (linkUrl && linkUrl !== href) {
handleEditLink(linkUrl, false);
}
}}
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
if (linkUrl && linkUrl !== href) {
handleEditLink(linkUrl, false);
}
}
}}
size="sm"
/>
{linkTitleInput}
<Divider my="xs" />
<UnstyledButton
onClick={handleRemoveLink}
className={classes.removeLink}
>
<Group gap={8}>
<IconLinkOff size={16} stroke={1.5} />
<Text size="sm">{t("Remove link")}</Text>
</Group>
</UnstyledButton>
</>
)}
</>
) : (
<Group gap={4} wrap="nowrap">
<Group
component="a"
//@ts-ignore
href={displayHref}
target={isInternal ? undefined : "_blank"}
rel={isInternal ? undefined : "noopener noreferrer"}
gap={6}
wrap="nowrap"
style={{
cursor: "pointer",
maxWidth: 250,
textDecoration: "none",
color: "inherit",
userSelect: "none",
}}
onClick={(e: React.MouseEvent) => {
e.preventDefault();
handleNavigate();
}}
>
{isInternal ? (
<IconFileDescription size={18} color="gray" />
) : (
<IconExternalLink size={18} color="gray" />
)}
<Text size="sm" truncate fw={500}>
{isInternal ? pageTitle || linkLabel : href}
</Text>
</Group>
<Divider orientation="vertical" />
<Tooltip label={t("Edit link")} withArrow withinPortal={false}>
<ActionIcon
variant="subtle"
color="gray"
onMouseDown={(e) => {
e.preventDefault();
e.stopPropagation();
setShowSearch(false);
setPopoverState("edit");
}}
>
<IconPencil size={18} />
</ActionIcon>
</Tooltip>
<Tooltip label={t("Copy link")} withArrow withinPortal={false}>
<ActionIcon
variant="subtle"
color="gray"
onMouseDown={(e) => {
e.preventDefault();
e.stopPropagation();
handleCopy(e);
}}
>
<IconCopy size={18} />
</ActionIcon>
</Tooltip>
<Tooltip label={t("Remove link")} withArrow withinPortal={false}>
<ActionIcon
variant="subtle"
color="gray"
onMouseDown={(e) => {
e.preventDefault();
e.stopPropagation();
handleRemoveLink();
}}
>
<IconLinkOff size={18} />
</ActionIcon>
</Tooltip>
</Group>
)}
</Popover.Dropdown>
</Popover>
);
}
apps/client/src/features/editor/components/link/link.module.css
+102 -6
View File
@@ -1,6 +1,102 @@
.link {
color: light-dark(var(--mantine-color-dark-4), var(--mantine-color-dark-1));
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.linkWrapper {
position: relative;
display: inline;
}
.linkInput {
border: 1.5px solid
light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
background: transparent;
&:focus {
border-color: light-dark(
var(--mantine-color-blue-4),
var(--mantine-color-blue-6)
);
box-shadow: 0 0 0 1px
light-dark(var(--mantine-color-blue-4), var(--mantine-color-blue-6));
}
}
.pageIcon {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
flex-shrink: 0;
color: var(--mantine-color-dimmed);
font-size: 16px;
margin-top: 2px;
}
.searchItem {
width: 100%;
padding: 7px 4px;
color: var(--mantine-color-text);
border-radius: var(--mantine-radius-sm);
&:hover {
@mixin light {
background: var(--mantine-color-gray-1);
}
@mixin dark {
background: var(--mantine-color-gray-light);
}
}
}
.selectedSearchItem {
@mixin light {
background: var(--mantine-color-gray-1);
}
@mixin dark {
background: var(--mantine-color-gray-light);
}
}
.linkChip {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 6px 10px;
border-radius: var(--mantine-radius-sm);
cursor: pointer;
@mixin light {
background: var(--mantine-color-gray-1);
}
@mixin dark {
background: var(--mantine-color-dark-5);
}
&:hover {
@mixin light {
background: var(--mantine-color-gray-2);
}
@mixin dark {
background: var(--mantine-color-dark-4);
}
}
}
.removeLink {
width: 100%;
padding: 4px;
border-radius: var(--mantine-radius-sm);
&:hover {
@mixin light {
background: var(--mantine-color-gray-1);
}
@mixin dark {
background: var(--mantine-color-dark-5);
}
}
}
apps/client/src/features/editor/components/link/types.ts
+2 -1
View File
@@ -1,4 +1,5 @@
export type LinkEditorPanelProps = {
initialUrl?: string;
onSetLink: (url: string, openInNewTab?: boolean) => void;
onSetLink: (url: string, internal?: boolean) => void;
onUnsetLink?: () => void;
};
apps/client/src/features/editor/components/link/use-link-editor-state.tsx
+7 -1
View File
@@ -13,11 +13,16 @@ export const useLinkEditorState = ({
const isValidUrl = useMemo(() => /^(\S+):(\/\/)?\S+$/.test(url), [url]);
const isSearchQuery = useMemo(
() => url.length > 0 && !isValidUrl,
[url, isValidUrl],
);
const handleSubmit = useCallback(
(e: React.FormEvent) => {
e.preventDefault();
if (isValidUrl) {
onSetLink(url);
onSetLink(url, false);
}
},
[url, isValidUrl, onSetLink],
@@ -29,5 +34,6 @@ export const useLinkEditorState = ({
onChange,
handleSubmit,
isValidUrl,
isSearchQuery,
};
};
apps/client/src/features/editor/components/math/math-block.tsx
+12 -4
View File
@@ -56,8 +56,11 @@ export default function MathBlockView(props: NodeViewProps) {
}, [debouncedPreview]);
useEffect(() => {
setIsEditing(!!props.selected);
if (props.selected) setPreview(node.attrs.text);
const pos = getPos();
const { from, to } = editor.state.selection;
const nodeSelected = props.selected && from === pos && to === pos + node.nodeSize;
setIsEditing(nodeSelected);
if (nodeSelected) setPreview(node.attrs.text);
}, [props.selected]);
return (
@@ -146,8 +149,13 @@ export default function MathBlockView(props: NodeViewProps) {
></Textarea>
<Flex justify="flex-end" align="flex-end">
<ActionIcon variant="light" color="red">
<IconTrashX size={18} onClick={() => props.deleteNode()} />
<ActionIcon
variant="light"
color="red"
aria-label={t("Delete equation")}
onClick={() => props.deleteNode()}
>
<IconTrashX size={18} />
</ActionIcon>
</Flex>
</Stack>
apps/client/src/features/editor/components/math/math-inline.tsx
+5 -2
View File
@@ -46,8 +46,11 @@ export default function MathInlineView(props: NodeViewProps) {
}, [preview, isEditing]);
useEffect(() => {
setIsEditing(!!props.selected);
if (props.selected) setPreview(node.attrs.text);
const pos = getPos();
const { from, to } = editor.state.selection;
const nodeSelected = props.selected && from === pos && to === pos + node.nodeSize;
setIsEditing(nodeSelected);
if (nodeSelected) setPreview(node.attrs.text);
}, [props.selected]);
return (
apps/client/src/features/editor/components/mention/mention-list.tsx
+137 -45
View File
@@ -16,6 +16,7 @@ import {
ScrollArea,
Text,
UnstyledButton,
VisuallyHidden,
} from "@mantine/core";
import clsx from "clsx";
import classes from "./mention.module.css";
@@ -31,17 +32,23 @@ import {
MentionSuggestionItem,
} from "@/features/editor/components/mention/mention.type.ts";
import { IPage } from "@/features/page/types/page.types";
import { useCreatePageMutation, usePageQuery } from "@/features/page/queries/page-query";
import {
useCreatePageMutation,
usePageQuery,
} from "@/features/page/queries/page-query";
import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom";
import { SimpleTree } from "react-arborist";
import { treeModel } from "@/features/page/tree/model/tree-model";
import { SpaceTreeNode } from "@/features/page/tree/types";
import { useTranslation } from "react-i18next";
import { useQueryEmit } from "@/features/websocket/use-query-emit";
import { extractPageSlugId } from "@/lib";
import { AutoTooltipText } from "@/components/ui/auto-tooltip-text.tsx";
const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
const [selectedIndex, setSelectedIndex] = useState(1);
const viewportRef = useRef<HTMLDivElement>(null);
const [countAnnouncement, setCountAnnouncement] = useState("");
const [selectionAnnouncement, setSelectionAnnouncement] = useState("");
const { pageSlug, spaceSlug } = useParams();
const { data: page } = usePageQuery({ pageId: extractPageSlugId(pageSlug) });
const { data: space } = useSpaceQuery(spaceSlug);
@@ -49,7 +56,6 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
const [renderItems, setRenderItems] = useState<MentionSuggestionItem[]>([]);
const { t } = useTranslation();
const [data, setData] = useAtom(treeDataAtom);
const tree = useMemo(() => new SimpleTree<SpaceTreeNode>(data), [data]);
const createPageMutation = useCreatePageMutation();
const emit = useQueryEmit();
const isInCommentContext = props.isInCommentContext ?? false;
@@ -58,12 +64,12 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
query: props.query,
includeUsers: true,
includePages: true,
spaceId: space.id,
limit: 10,
spaceId: space?.id,
limit: props.query ? 10 : 5,
preload: true,
});
const createPageItem = (label: string) : MentionSuggestionItem => {
const createPageItem = (label: string): MentionSuggestionItem => {
return {
id: null,
label: label,
@@ -71,15 +77,15 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
entityId: null,
slugId: null,
icon: null,
}
}
};
};
useEffect(() => {
if (suggestion && !isLoading) {
let items: MentionSuggestionItem[] = [];
if (suggestion?.users?.length > 0) {
items.push({ entityType: "header", label: t("Users") });
items.push({ entityType: "header", label: t("People") });
items = items.concat(
suggestion.users.map((user) => ({
@@ -97,11 +103,13 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
items = items.concat(
suggestion.pages.map((page) => ({
id: uuid7(),
label: page.title || "Untitled",
label: page.title || t("Untitled"),
entityType: "page",
entityId: page.id,
slugId: page.slugId,
icon: page.icon,
spaceName: page.space?.name,
spaceSlug: page.space?.slug,
})),
);
}
@@ -129,17 +137,17 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
creatorId: currentUser?.user.id,
});
}
if (item.entityType === "page" && item.id!==null) {
if (item.entityType === "page" && item.id !== null) {
props.command({
id: item.id,
label: item.label || "Untitled",
label: item.label || t("Untitled"),
entityType: "page",
entityId: item.entityId,
slugId: item.slugId,
creatorId: currentUser?.user.id,
});
}
if (item.entityType === "page" && item.id===null) {
if (item.entityType === "page" && item.id === null) {
createPage(item.label);
}
}
@@ -178,6 +186,45 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
setSelectedIndex(1);
}, [suggestion]);
const selectableCount = useMemo(
() => renderItems.filter((item) => item.entityType !== "header").length,
[renderItems],
);
useEffect(() => {
if (renderItems.length === 0) {
setCountAnnouncement(t("No results"));
return;
}
setCountAnnouncement(
t("{{count}} result available", { count: selectableCount }),
);
}, [renderItems.length, selectableCount, t]);
useEffect(() => {
const item = renderItems[selectedIndex];
if (!item || item.entityType === "header") {
setSelectionAnnouncement("");
return;
}
if (item.entityType === "user") {
setSelectionAnnouncement(`${t("People")}: ${item.label}`);
return;
}
if (item.entityType === "page") {
if (item.id === null) {
setSelectionAnnouncement(`${t("Create page")}: ${item.label}`);
return;
}
const pageLabel = item.label || t("Untitled");
setSelectionAnnouncement(
item.spaceName
? `${t("Pages")}: ${pageLabel}, ${item.spaceName}`
: `${t("Pages")}: ${pageLabel}`,
);
}
}, [selectedIndex, renderItems, t]);
useImperativeHandle(ref, () => ({
onKeyDown: ({ event }) => {
if (event.key === "ArrowUp") {
@@ -207,31 +254,31 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
const payload: { spaceId: string; parentPageId?: string; title: string } = {
spaceId: space.id,
parentPageId: page.id || null,
title: title
title: title,
};
let createdPage: IPage;
try {
createdPage = await createPageMutation.mutateAsync(payload);
const parentId = page.id || null;
const data = {
const newNode: SpaceTreeNode = {
id: createdPage.id,
slugId: createdPage.slugId,
name: createdPage.title,
position: createdPage.position,
spaceId: createdPage.spaceId,
parentPageId: createdPage.parentPageId,
hasChildren: false,
children: [],
} as any;
};
const lastIndex = tree.data.length;
const lastIndex = data.length;
tree.create({ parentId, index: lastIndex, data });
setData(tree.data);
setData(treeModel.insert(data, parentId, newNode, lastIndex));
props.command({
id: uuid7(),
label: createdPage.title || "Untitled",
label: createdPage.title || "Untitled",
entityType: "page",
entityId: createdPage.id,
slugId: createdPage.slugId,
@@ -239,21 +286,20 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
});
setTimeout(() => {
emit({
operation: "addTreeNode",
spaceId: space.id,
payload: {
parentId,
index: lastIndex,
data,
},
});
}, 50);
emit({
operation: "addTreeNode",
spaceId: space.id,
payload: {
parentId,
index: lastIndex,
data: newNode,
},
});
}, 50);
} catch (err) {
throw new Error("Failed to create page");
}
}
};
useEffect(() => {
viewportRef.current
@@ -266,30 +312,55 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
if (renderItems.length === 0) {
return (
<Paper id="mention" shadow="md" py="xs" withBorder radius="md">
<VisuallyHidden role="status" aria-live="polite" aria-atomic="true">
{countAnnouncement}
</VisuallyHidden>
<Text c="dimmed" size="sm" px="sm">
{ t("No results") }
{t("No results")}
</Text>
</Paper>
);
}
const hasUsers = renderItems.some((item) => item.entityType === "user");
const hasPages = renderItems.some((item) => item.entityType === "page" && item.id !== null);
const createPageItemData = renderItems.find((item) => item.entityType === "page" && item.id === null);
const hasPages = renderItems.some(
(item) => item.entityType === "page" && item.id !== null,
);
const createPageItemData = renderItems.find(
(item) => item.entityType === "page" && item.id === null,
);
return (
<Paper id="mention" shadow="md" withBorder radius="md" py={6}>
<Paper
id="mention"
shadow="md"
withBorder
radius="md"
py={6}
role="listbox"
aria-label={t("Mention suggestions")}
aria-activedescendant={`mention-option-${selectedIndex}`}
>
<VisuallyHidden role="status" aria-live="polite" aria-atomic="true">
{countAnnouncement}
</VisuallyHidden>
<VisuallyHidden role="status" aria-live="polite" aria-atomic="true">
{selectionAnnouncement}
</VisuallyHidden>
<ScrollArea.Autosize
viewportRef={viewportRef}
mah={350}
w={popupWidth}
scrollbars={"y"}
scrollbarSize={6}
overscrollBehavior={"contain"}
styles={{ content: { minWidth: 0 } }}
>
{renderItems?.map((item, index) => {
if (item.entityType === "header") {
const isFirst = index === 0;
return (
<div key={`${item.label}-${index}`}>
<div key={`${item.label}-${index}`} role="presentation">
{!isFirst && <Divider my={6} />}
<Text
c="dimmed"
@@ -299,6 +370,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
pt={isFirst ? 2 : 4}
pb={4}
tt="uppercase"
style={{ userSelect: "none" }}
>
{item.label}
</Text>
@@ -309,6 +381,9 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
<UnstyledButton
data-item-index={index}
key={index}
id={`mention-option-${index}`}
role="option"
aria-selected={index === selectedIndex}
onClick={() => selectItem(index)}
className={clsx(classes.menuBtn, {
[classes.selectedItem]: index === selectedIndex,
@@ -323,9 +398,9 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
/>
<div style={{ flex: 1 }}>
<Text size="sm" fw={500}>
<AutoTooltipText size="sm" fw={500}>
{item.label}
</Text>
</AutoTooltipText>
</div>
</Group>
</UnstyledButton>
@@ -335,6 +410,9 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
<UnstyledButton
data-item-index={index}
key={index}
id={`mention-option-${index}`}
role="option"
aria-selected={index === selectedIndex}
onClick={() => selectItem(index)}
className={clsx(classes.menuBtn, {
[classes.selectedItem]: index === selectedIndex,
@@ -345,7 +423,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
<ActionIcon
variant="subtle"
component="div"
aria-label={item.label}
aria-hidden="true"
color="gray"
size="sm"
>
@@ -355,9 +433,14 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
</ActionIcon>
<div style={{ flex: 1, minWidth: 0 }}>
<Text size="sm" fw={500} truncate>
<AutoTooltipText size="sm" fw={500} truncate>
{item.label}
</Text>
</AutoTooltipText>
{item.spaceName && (
<Text size="xs" c="dimmed" truncate>
{item.spaceName}
</Text>
)}
</div>
</Group>
</UnstyledButton>
@@ -372,9 +455,17 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
{(hasUsers || hasPages) && <Divider my={6} />}
<UnstyledButton
data-item-index={renderItems.indexOf(createPageItemData)}
onClick={() => selectItem(renderItems.indexOf(createPageItemData))}
id={`mention-option-${renderItems.indexOf(createPageItemData)}`}
role="option"
aria-selected={
renderItems.indexOf(createPageItemData) === selectedIndex
}
onClick={() =>
selectItem(renderItems.indexOf(createPageItemData))
}
className={clsx(classes.menuBtn, {
[classes.selectedItem]: renderItems.indexOf(createPageItemData) === selectedIndex,
[classes.selectedItem]:
renderItems.indexOf(createPageItemData) === selectedIndex,
})}
px="sm"
>
@@ -384,11 +475,12 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
component="div"
color="gray"
size="sm"
aria-hidden="true"
>
<IconPlus size={16} stroke={1.5} />
</ActionIcon>
<div style={{ flex: 1, minWidth: 0 }}>
<div style={{ flex: 1, minWidth: 0, overflow: "hidden" }}>
<Text size="sm" fw={500} truncate>
{t("Create page")}: {createPageItemData.label}
</Text>
apps/client/src/features/editor/components/mention/mention-suggestion.ts
+3 -3
View File
@@ -53,8 +53,8 @@ const mentionRenderItems = () => {
const editorDom = props.editor?.view?.dom;
const asideEl = editorDom?.closest(".mantine-AppShell-aside");
const dialogEl = editorDom?.closest("[data-comment-dialog]");
const isInCommentContext = !!(asideEl || dialogEl);
// const isInCommentContext = !!asideEl;
const chatInput = editorDom?.closest("[data-chat-input]");
const isInCommentContext = !!(asideEl || dialogEl || chatInput);
component = new ReactRenderer(MentionList, {
props: { ...props, isInCommentContext },
@@ -106,7 +106,7 @@ const mentionRenderItems = () => {
left: `${x}px`,
top: `${y}px`,
position: "absolute",
zIndex: "9999",
zIndex: "190",
});
});
},
apps/client/src/features/editor/components/mention/mention-view.tsx
+63 -8
View File
@@ -3,6 +3,7 @@ import { ActionIcon, Anchor, Text } from "@mantine/core";
import { IconFileDescription } from "@tabler/icons-react";
import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
import { usePageQuery } from "@/features/page/queries/page-query.ts";
import { useSharePageQuery } from "@/features/share/queries/share-query.ts";
import {
buildPageUrl,
buildSharedPageUrl,
@@ -13,17 +14,23 @@ import classes from "./mention.module.css";
export default function MentionView(props: NodeViewProps) {
const { node } = props;
const { label, entityType, entityId, slugId, anchorId } = node.attrs;
const isPageMention = entityType === "page";
const { spaceSlug, pageSlug } = useParams();
const { shareId } = useParams();
const navigate = useNavigate();
const location = useLocation();
const isShareRoute = location.pathname.startsWith("/share");
const {
data: page,
isLoading,
isError,
} = usePageQuery({ pageId: entityType === "page" ? slugId : null });
} = usePageQuery({ pageId: isPageMention && !isShareRoute ? slugId : null });
const location = useLocation();
const isShareRoute = location.pathname.startsWith("/share");
const { data: sharedPage } = useSharePageQuery({
pageId: isPageMention && isShareRoute ? slugId : undefined,
});
const currentPageSlugId = extractPageSlugId(pageSlug);
const isSamePage = currentPageSlugId === slugId;
@@ -39,10 +46,12 @@ export default function MentionView(props: NodeViewProps) {
}
};
const sharePageTitle = sharedPage?.page?.title || label;
const shareSlugUrl = buildSharedPageUrl({
shareId,
pageSlugId: slugId,
pageTitle: label,
pageTitle: sharePageTitle,
anchorId,
});
@@ -54,13 +63,59 @@ export default function MentionView(props: NodeViewProps) {
</Text>
)}
{entityType === "page" && (
{isPageMention && isShareRoute && (
<Anchor
component={Link}
fw={500}
to={
isShareRoute ? shareSlugUrl : buildPageUrl(spaceSlug, slugId, label, anchorId)
}
to={shareSlugUrl}
onClick={handleClick}
underline="never"
className={classes.pageMentionLink}
>
<ActionIcon
variant="transparent"
color="gray"
component="span"
size={18}
style={{ verticalAlign: "text-bottom" }}
>
<IconFileDescription size={18} />
</ActionIcon>
<span className={classes.pageMentionText}>
{sharePageTitle}
</span>
</Anchor>
)}
{isPageMention && !isShareRoute && isError && (
<Anchor
component={Link}
fw={500}
to={buildPageUrl(spaceSlug, slugId, label, anchorId)}
onClick={handleClick}
underline="never"
className={classes.pageMentionLink}
>
<ActionIcon
variant="transparent"
color="gray"
component="span"
size={18}
style={{ verticalAlign: "text-bottom" }}
>
<IconFileDescription size={18} />
</ActionIcon>
<span className={classes.pageMentionText}>
{label}
</span>
</Anchor>
)}
{isPageMention && !isShareRoute && !isError && (
<Anchor
component={Link}
fw={500}
to={buildPageUrl(page?.space?.slug || spaceSlug, slugId, page?.title || label, anchorId)}
onClick={handleClick}
underline="never"
className={classes.pageMentionLink}
apps/client/src/features/editor/components/mention/mention.type.ts
+2
View File
@@ -26,4 +26,6 @@ export type MentionSuggestionItem =
entityId: string;
slugId: string;
icon: string;
spaceName?: string;
spaceSlug?: string;
};
apps/client/src/features/editor/components/pdf/pdf-menu.tsx
+145
View File
@@ -0,0 +1,145 @@
import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
import { useCallback } from "react";
import { Node as PMNode } from "@tiptap/pm/model";
import { isEditorReady } from "@docmost/editor-ext";
import {
EditorMenuProps,
ShouldShowProps,
} from "@/features/editor/components/table/types/types.ts";
import { ActionIcon, Tooltip } from "@mantine/core";
import {
IconPaperclip,
IconTrash,
} from "@tabler/icons-react";
import { useTranslation } from "react-i18next";
import classes from "../common/toolbar-menu.module.css";
export function PdfMenu({ editor }: EditorMenuProps) {
const { t } = useTranslation();
const editorState = useEditorState({
editor,
selector: (ctx) => {
if (!ctx.editor) {
return null;
}
const pdfAttrs = ctx.editor.getAttributes("pdf");
return {
isPdf: ctx.editor.isActive("pdf"),
src: pdfAttrs?.src || null,
name: pdfAttrs?.name || null,
attachmentId: pdfAttrs?.attachmentId || null,
};
},
});
const shouldShow = useCallback(
({ state }: ShouldShowProps) => {
if (!state || !isEditorReady(editor)) return false;
if (!editor.isActive("pdf")) return false;
const { selection } = state;
const dom = editor.view.nodeDOM(selection.from) as HTMLElement | null;
if (!dom) return false;
return !!dom.querySelector("[data-pdf-error]");
},
[editor],
);
const getReferencedVirtualElement = useCallback(() => {
if (!isEditorReady(editor)) return;
const { selection } = editor.state;
const predicate = (node: PMNode) => node.type.name === "pdf";
const parent = findParentNode(predicate)(selection);
if (parent) {
const dom = editor.view.nodeDOM(parent?.pos) as HTMLElement;
const domRect = dom.getBoundingClientRect();
return {
getBoundingClientRect: () => domRect,
getClientRects: () => [domRect],
};
}
const domRect = posToDOMRect(editor.view, selection.from, selection.to);
return {
getBoundingClientRect: () => domRect,
getClientRects: () => [domRect],
};
}, [editor]);
const handleConvertToAttachment = useCallback(() => {
if (!editorState?.src) return;
const { selection } = editor.state;
const { from } = selection;
const node = editor.state.doc.nodeAt(from);
if (!node || node.type.name !== "pdf") return;
editor
.chain()
.insertContentAt(
{ from, to: from + node.nodeSize },
{
type: "attachment",
attrs: {
url: node.attrs.src,
name: node.attrs.name,
attachmentId: node.attrs.attachmentId,
size: node.attrs.size,
mime: "application/pdf",
},
},
)
.run();
}, [editor, editorState]);
const handleDelete = useCallback(() => {
editor.commands.deleteSelection();
}, [editor]);
return (
<BaseBubbleMenu
editor={editor}
pluginKey={`pdf-menu`}
updateDelay={0}
getReferencedVirtualElement={getReferencedVirtualElement}
options={{
placement: "top",
offset: 8,
flip: false,
}}
shouldShow={shouldShow}
>
<div className={classes.toolbar}>
<Tooltip position="top" label={t("Convert to attachment")} withinPortal={false}>
<ActionIcon
onClick={handleConvertToAttachment}
size="lg"
aria-label={t("Convert to attachment")}
variant="subtle"
>
<IconPaperclip size={18} />
</ActionIcon>
</Tooltip>
<Tooltip position="top" label={t("Delete")} withinPortal={false}>
<ActionIcon
onClick={handleDelete}
size="lg"
aria-label={t("Delete")}
variant="subtle"
>
<IconTrash size={18} />
</ActionIcon>
</Tooltip>
</div>
</BaseBubbleMenu>
);
}
export default PdfMenu;
apps/client/src/features/editor/components/pdf/pdf-view.module.css
+100
View File
@@ -0,0 +1,100 @@
.pdfWrapper {
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
border-radius: 8px;
overflow: hidden;
}
.skeleton {
animation: pulse 1.2s ease-in-out infinite;
@mixin light {
background: linear-gradient(-90deg, var(--mantine-color-gray-3) 0%, var(--mantine-color-gray-1) 50%, var(--mantine-color-gray-3) 100%);
background-size: 400% 400%;
}
@mixin dark {
background: linear-gradient(-90deg, var(--mantine-color-dark-6) 0%, var(--mantine-color-dark-5) 50%, var(--mantine-color-dark-6) 100%);
background-size: 400% 400%;
}
@keyframes pulse {
0% {
background-position: 0% 0%;
}
100% {
background-position: -135% 0%;
}
}
}
.pdfContainer {
display: flex;
justify-content: center;
}
.pdfResizeWrapper {
@mixin light {
background-color: var(--mantine-color-gray-0);
}
@mixin dark {
background-color: var(--mantine-color-dark-7);
}
}
.pdfIframe {
width: 100%;
height: 100%;
border: none;
border-radius: 8px;
}
.hoverMenu {
position: absolute;
top: 56px;
right: 8px;
z-index: 2;
display: flex;
gap: 4px;
padding: 4px;
border-radius: 6px;
opacity: 0;
transition: opacity 0.15s ease;
background-color: rgba(0, 0, 0, 0.5);
}
.hoverMenu::before {
content: "";
position: absolute;
inset: -12px;
}
.hoverMenu:hover {
opacity: 1;
}
.pdfResizeWrapper:hover .hoverMenu {
opacity: 1;
}
.pdfError {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 32px;
border-radius: 8px;
cursor: pointer;
@mixin light {
background-color: var(--mantine-color-gray-0);
}
@mixin dark {
background-color: var(--mantine-color-dark-7);
}
}
apps/client/src/features/editor/components/pdf/pdf-view.tsx
+183
View File
@@ -0,0 +1,183 @@
import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
import { ActionIcon, Group, Loader, Text, Tooltip } from "@mantine/core";
import { useCallback, useMemo, useState } from "react";
import { getFileUrl } from "@/lib/config.ts";
import { ResizableWrapper } from "../common/resizable-wrapper";
import clsx from "clsx";
import classes from "./pdf-view.module.css";
import { useTranslation } from "react-i18next";
import { isInternalFileUrl } from "@docmost/editor-ext";
import {
IconFileTypePdf,
IconPaperclip,
IconTrash,
} from "@tabler/icons-react";
export default function PdfView(props: NodeViewProps) {
const { t } = useTranslation();
const { editor, node, getPos, selected, updateAttributes } = props;
const { src, placeholder, width: nodeWidth, height: nodeHeight } = node.attrs;
const [hasError, setHasError] = useState(false);
const safeSrc = useMemo(() => {
if (!src || !isInternalFileUrl(src)) return null;
return getFileUrl(src);
}, [src]);
const handleSelect = useCallback(() => {
const pos = getPos();
if (pos !== undefined) {
editor.commands.setNodeSelection(pos);
}
}, [editor, getPos]);
const handleResize = useCallback(
(newWidth: number, newHeight: number) => {
updateAttributes({ width: newWidth, height: newHeight });
},
[updateAttributes],
);
const handleConvertToAttachment = useCallback(() => {
if (!src) return;
const pos = getPos();
if (pos === undefined) return;
const currentNode = editor.state.doc.nodeAt(pos);
if (!currentNode || currentNode.type.name !== "pdf") return;
editor
.chain()
.insertContentAt(
{ from: pos, to: pos + currentNode.nodeSize },
{
type: "attachment",
attrs: {
url: currentNode.attrs.src,
name: currentNode.attrs.name,
attachmentId: currentNode.attrs.attachmentId,
size: currentNode.attrs.size,
mime: "application/pdf",
},
},
)
.run();
}, [editor, src, getPos]);
const handleDelete = useCallback(() => {
const pos = getPos();
if (pos === undefined) return;
editor.commands.setNodeSelection(pos);
editor.commands.deleteSelection();
}, [editor, getPos]);
if (!src || !safeSrc) {
return (
<NodeViewWrapper data-drag-handle>
<div className={`${classes.pdfWrapper} ${placeholder ? classes.skeleton : ''}`} style={{ height: placeholder ? 600 : undefined }}>
{placeholder && (
<Group justify="center" wrap="nowrap" gap="xs" maw="100%" px="md">
<Loader size={20} style={{ flexShrink: 0 }} />
<Text component="span" size="sm" truncate="end">
{placeholder?.name
? t("Uploading {{name}}", { name: placeholder.name })
: t("Uploading file")}
</Text>
</Group>
)}
</div>
</NodeViewWrapper>
);
}
if (hasError) {
return (
<NodeViewWrapper data-drag-handle>
<div
data-pdf-error
className={clsx(classes.pdfError, { "ProseMirror-selectednode": selected })}
onClick={handleSelect}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
handleSelect();
}
}}
role="button"
tabIndex={0}
aria-label={t("Failed to load PDF")}
>
<IconFileTypePdf size={32} stroke={1.5} />
<Text size="sm" c="dimmed">
{t("Failed to load PDF")}
</Text>
</div>
</NodeViewWrapper>
);
}
return (
<NodeViewWrapper data-drag-handle className={classes.pdfNodeView}>
<div className={classes.pdfContainer}>
<ResizableWrapper
initialWidth={nodeWidth || 800}
initialHeight={nodeHeight || 600}
minWidth={200}
maxWidth={1200}
minHeight={200}
maxHeight={1200}
onResize={handleResize}
isEditable={editor.isEditable}
selected={selected}
className={clsx(classes.pdfResizeWrapper, {
"ProseMirror-selectednode": selected,
})}
>
<iframe
className={classes.pdfIframe}
src={safeSrc}
loading="lazy"
frameBorder="0"
onError={() => setHasError(true)}
onLoad={(e) => {
try {
const iframe = e.currentTarget;
const status = iframe.contentDocument?.querySelector("pre")?.textContent;
if (status && status.includes('"statusCode":404')) {
setHasError(true);
}
} catch {
// cross-origin - can't inspect, assume OK
}
}}
/>
{editor.isEditable && (
<div className={classes.hoverMenu}>
<Tooltip position="top" label={t("Convert to attachment")} withinPortal>
<ActionIcon
size="sm"
variant="filled"
color="dark"
onClick={handleConvertToAttachment}
aria-label={t("Convert to attachment")}
>
<IconPaperclip size={14} />
</ActionIcon>
</Tooltip>
<Tooltip position="top" label={t("Delete")} withinPortal>
<ActionIcon
size="sm"
variant="filled"
color="dark"
onClick={handleDelete}
aria-label={t("Delete")}
>
<IconTrash size={14} />
</ActionIcon>
</Tooltip>
</div>
)}
</ResizableWrapper>
</div>
</NodeViewWrapper>
);
}
apps/client/src/features/editor/components/pdf/upload-pdf-action.tsx
+36
View File
@@ -0,0 +1,36 @@
import { handlePdfUpload } from "@docmost/editor-ext";
import { uploadFile } from "@/features/page/services/page-service.ts";
import { notifications } from "@mantine/notifications";
import { getFileUploadSizeLimit } from "@/lib/config.ts";
import { formatBytes } from "@/lib";
import i18n from "@/i18n.ts";
export const uploadPdfAction = handlePdfUpload({
onUpload: async (file: File, pageId: string): Promise<any> => {
try {
return await uploadFile(file, pageId);
} catch (err) {
notifications.show({
color: "red",
message: err?.response.data.message,
});
throw err;
}
},
validateFn: (file) => {
if (file.type !== "application/pdf") {
return false;
}
if (file.size > getFileUploadSizeLimit()) {
notifications.show({
color: "red",
message: i18n.t("File exceeds the {{limit}} attachment limit", {
limit: formatBytes(getFileUploadSizeLimit()),
}),
});
return false;
}
return true;
},
});
apps/client/src/features/editor/components/search-and-replace/search-and-replace-dialog.tsx
+25 -3
View File
@@ -187,12 +187,14 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo
position={{ top: 90, right: 50 }}
withBorder
transitionProps={{ transition: "slide-down" }}
aria-label={t("Find and replace")}
>
<Stack gap="xs">
<Flex align="center" gap="xs">
<Input
ref={inputRef}
placeholder={t("Find")}
aria-label={t("Find")}
leftSection={<IconSearch size={16} />}
rightSection={
<Text size="xs" ta="right">
@@ -217,7 +219,12 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo
<ActionIcon.Group>
<Tooltip label={t("Previous match (Shift+Enter)")}>
<ActionIcon variant="subtle" color="gray" onClick={previous}>
<ActionIcon
variant="subtle"
color="gray"
onClick={previous}
aria-label={t("Previous match (Shift+Enter)")}
>
<IconArrowNarrowUp
style={{ width: "70%", height: "70%" }}
stroke={1.5}
@@ -225,7 +232,12 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo
</ActionIcon>
</Tooltip>
<Tooltip label={t("Next match (Enter)")}>
<ActionIcon variant="subtle" color="gray" onClick={next}>
<ActionIcon
variant="subtle"
color="gray"
onClick={next}
aria-label={t("Next match (Enter)")}
>
<IconArrowNarrowDown
style={{ width: "70%", height: "70%" }}
stroke={1.5}
@@ -237,6 +249,8 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo
variant="subtle"
color={caseSensitive.color}
onClick={() => caseSensitiveToggle()}
aria-label={t("Match case (Alt+C)")}
aria-pressed={caseSensitive.isCaseSensitive}
>
<IconLetterCase
style={{ width: "70%", height: "70%" }}
@@ -250,6 +264,8 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo
variant="subtle"
color={replaceButton.color}
onClick={() => replaceButtonToggle()}
aria-label={t("Replace")}
aria-pressed={replaceButton.isReplaceShow}
>
<IconReplace
style={{ width: "70%", height: "70%" }}
@@ -259,7 +275,12 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo
</Tooltip>
)}
<Tooltip label={t("Close (Escape)")}>
<ActionIcon variant="subtle" color="gray" onClick={closeDialog}>
<ActionIcon
variant="subtle"
color="gray"
onClick={closeDialog}
aria-label={t("Close (Escape)")}
>
<IconX style={{ width: "70%", height: "70%" }} stroke={1.5} />
</ActionIcon>
</Tooltip>
@@ -269,6 +290,7 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo
<Flex align="center" gap="xs">
<Input
placeholder={t("Replace")}
aria-label={t("Replace")}
leftSection={<IconReplace size={16} />}
rightSection={<div></div>}
rightSectionPointerEvents="all"
apps/client/src/features/editor/components/slash-menu/command-list.tsx
+64 -15
View File
@@ -10,6 +10,7 @@ import {
ScrollArea,
Text,
UnstyledButton,
VisuallyHidden,
} from "@mantine/core";
import classes from "./slash-menu.module.css";
import clsx from "clsx";
@@ -29,6 +30,8 @@ const CommandList = ({
const { t } = useTranslation();
const [selectedIndex, setSelectedIndex] = useState(0);
const viewportRef = useRef<HTMLDivElement>(null);
const [countAnnouncement, setCountAnnouncement] = useState("");
const [selectionAnnouncement, setSelectionAnnouncement] = useState("");
const flatItems = useMemo(() => {
return Object.values(items).flat();
@@ -79,6 +82,25 @@ const CommandList = ({
setSelectedIndex(0);
}, [flatItems]);
useEffect(() => {
if (flatItems.length === 0) {
setCountAnnouncement("");
return;
}
setCountAnnouncement(
t("{{count}} command available", { count: flatItems.length }),
);
}, [flatItems.length, t]);
useEffect(() => {
const item = flatItems[selectedIndex];
if (!item) {
setSelectionAnnouncement("");
return;
}
setSelectionAnnouncement(`${t(item.title)}, ${t(item.description)}`);
}, [selectedIndex, flatItems, t]);
useEffect(() => {
viewportRef.current
?.querySelector(`[data-item-index="${selectedIndex}"]`)
@@ -86,27 +108,52 @@ const CommandList = ({
}, [selectedIndex]);
return flatItems.length > 0 ? (
<Paper id="slash-command" shadow="md" p="xs" withBorder>
<ScrollArea viewportRef={viewportRef} h={350} w={270} scrollbarSize={8}>
{Object.entries(items).map(([category, categoryItems]) => (
<div key={category}>
<Paper
id="slash-command"
shadow="md"
p="xs"
withBorder
role="listbox"
aria-label={t("Slash commands")}
aria-activedescendant={`slash-command-option-${selectedIndex}`}
>
<VisuallyHidden role="status" aria-live="polite" aria-atomic="true">
{countAnnouncement}
</VisuallyHidden>
<VisuallyHidden role="status" aria-live="polite" aria-atomic="true">
{selectionAnnouncement}
</VisuallyHidden>
<ScrollArea
viewportRef={viewportRef}
h={350}
w={270}
scrollbarSize={8}
overscrollBehavior="contain"
>
{(() => {
let flatIndex = -1;
return Object.entries(items).map(([category, categoryItems]) => (
<div key={category} role="group" aria-label={category}>
<Text c="dimmed" mb={4} fw={500} tt="capitalize">
{category}
</Text>
{categoryItems.map((item: SlashMenuItemType, index: number) => (
{categoryItems.map((item: SlashMenuItemType) => {
flatIndex += 1;
const itemIndex = flatIndex;
return (
<UnstyledButton
data-item-index={index}
key={index}
onClick={() => selectItem(index)}
data-item-index={itemIndex}
key={itemIndex}
id={`slash-command-option-${itemIndex}`}
role="option"
aria-selected={itemIndex === selectedIndex}
onClick={() => selectItem(itemIndex)}
className={clsx(classes.menuBtn, {
[classes.selectedItem]: index === selectedIndex,
[classes.selectedItem]: itemIndex === selectedIndex,
})}
>
<Group>
<ActionIcon
variant="default"
component="div"
>
<ActionIcon variant="default" component="div" aria-hidden="true">
<item.icon size={18} />
</ActionIcon>
@@ -121,9 +168,11 @@ const CommandList = ({
</div>
</Group>
</UnstyledButton>
))}
);
})}
</div>
))}
));
})()}
</ScrollArea>
</Paper>
) : null;
apps/client/src/features/editor/components/slash-menu/menu-items.ts
+212 -9
View File
@@ -12,14 +12,22 @@ import {
IconMath,
IconMathFunction,
IconMovie,
IconMusic,
IconPaperclip,
IconFileTypePdf,
IconPhoto,
IconTable,
IconTypography,
IconMenu4,
IconPageBreak,
IconCalendar,
IconAppWindow,
IconSitemap,
IconColumns3,
IconColumns2,
IconTag,
IconMoodSmile,
IconRotate2,
} from "@tabler/icons-react";
import {
CommandProps,
@@ -27,10 +35,14 @@ import {
} from "@/features/editor/components/slash-menu/types";
import { uploadImageAction } from "@/features/editor/components/image/upload-image-action.tsx";
import { uploadVideoAction } from "@/features/editor/components/video/upload-video-action.tsx";
import { uploadAudioAction } from "@/features/editor/components/audio/upload-audio-action.tsx";
import { uploadAttachmentAction } from "@/features/editor/components/attachment/upload-attachment-action.tsx";
import { uploadPdfAction } from "@/features/editor/components/pdf/upload-pdf-action.tsx";
import IconExcalidraw from "@/components/icons/icon-excalidraw";
import IconMermaid from "@/components/icons/icon-mermaid";
import IconDrawio from "@/components/icons/icon-drawio";
import { IconColumns4 } from "@/components/icons/icon-columns-4";
import { IconColumns5 } from "@/components/icons/icon-columns-5";
import {
AirtableIcon,
FigmaIcon,
@@ -123,7 +135,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
{
title: "Numbered list",
description: "Create a list with numbering.",
searchTerms: ["numbered", "ordered", "list"],
searchTerms: ["numbered", "ordered", "list", "ol"],
icon: IconListNumbers,
command: ({ editor, range }: CommandProps) => {
editor.chain().focus().deleteRange(range).toggleOrderedList().run();
@@ -153,10 +165,18 @@ const CommandGroups: SlashMenuGroupedItemsType = {
command: ({ editor, range }: CommandProps) =>
editor.chain().focus().deleteRange(range).setHorizontalRule().run(),
},
{
title: "Page break",
description: "Insert a page break for printing.",
searchTerms: ["page", "break", "pagebreak", "print"],
icon: IconPageBreak,
command: ({ editor, range }: CommandProps) =>
editor.chain().focus().deleteRange(range).setPageBreak().run(),
},
{
title: "Image",
description: "Upload any image from your device.",
searchTerms: ["photo", "picture", "media"],
searchTerms: ["photo", "picture", "media", "file", "attachment"],
icon: IconPhoto,
command: ({ editor, range }) => {
editor.chain().focus().deleteRange(range).run();
@@ -189,7 +209,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
{
title: "Video",
description: "Upload any video from your device.",
searchTerms: ["video", "mp4", "media"],
searchTerms: ["video", "mp4", "media", "file", "attachment"],
icon: IconMovie,
command: ({ editor, range }) => {
editor.chain().focus().deleteRange(range).run();
@@ -219,10 +239,82 @@ const CommandGroups: SlashMenuGroupedItemsType = {
input.click();
},
},
{
title: "Audio",
description: "Upload any audio from your device.",
searchTerms: [
"audio",
"music",
"sound",
"mp3",
"media",
"file",
"attachment",
],
icon: IconMusic,
command: ({ editor, range }) => {
editor.chain().focus().deleteRange(range).run();
// @ts-ignore
const pageId = editor.storage?.pageId;
if (!pageId) return;
// upload audio
const input = document.createElement("input");
input.type = "file";
input.accept = "audio/*";
input.multiple = true;
input.style.display = "none";
document.body.appendChild(input);
input.onchange = async () => {
if (input.files?.length) {
for (const file of input.files) {
const pos = editor.view.state.selection.from;
uploadAudioAction(file, editor, pos, pageId);
}
}
input.remove();
};
input.click();
},
},
{
title: "Embed PDF",
description: "Upload and embed a PDF file.",
searchTerms: ["pdf", "document", "embed"],
icon: IconFileTypePdf,
command: ({ editor, range }) => {
editor.chain().focus().deleteRange(range).run();
// @ts-ignore
const pageId = editor.storage?.pageId;
if (!pageId) return;
const input = document.createElement("input");
input.type = "file";
input.accept = "application/pdf";
input.style.display = "none";
document.body.appendChild(input);
input.onchange = async () => {
if (input.files?.length) {
for (const file of input.files) {
const pos = editor.view.state.selection.from;
uploadPdfAction(file, editor, pos, pageId);
}
}
input.remove();
};
input.click();
},
},
{
title: "File attachment",
description: "Upload any file from your device.",
searchTerms: ["file", "attachment", "upload", "pdf", "csv", "zip"],
searchTerms: ["file", "attachment", "upload", "csv", "zip"],
icon: IconPaperclip,
command: ({ editor, range }) => {
editor.chain().focus().deleteRange(range).run();
@@ -346,7 +438,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
.run(),
},
{
title: "Draw.io (diagrams.net) ",
title: "Draw.io (diagrams.net)",
description: "Insert and design Drawio diagrams",
searchTerms: ["drawio", "diagrams", "charts", "uml", "whiteboard"],
icon: IconDrawio,
@@ -354,7 +446,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
editor.chain().focus().deleteRange(range).setDrawio().run(),
},
{
title: "Excalidraw diagram",
title: "Excalidraw (Whiteboard)",
description: "Draw and sketch excalidraw diagrams",
searchTerms: ["diagrams", "draw", "sketch", "whiteboard"],
icon: IconExcalidraw,
@@ -381,15 +473,119 @@ const CommandGroups: SlashMenuGroupedItemsType = {
.run();
},
},
{
title: "Status",
description: "Insert inline status badge.",
searchTerms: ["status", "badge", "label", "lozenge"],
icon: IconTag,
command: ({ editor, range }: CommandProps) => {
editor
.chain()
.focus()
.deleteRange(range)
.setStatus({ text: "", color: "gray" })
.run();
},
},
{
title: "Emoji",
description: "Insert emoji.",
searchTerms: ["emoji", "icon", "smiley", "emoticon", "symbol", "reaction"],
icon: IconMoodSmile,
command: ({ editor, range }: CommandProps) => {
editor.chain().focus().deleteRange(range).insertContent(":").run();
},
},
{
title: "Subpages (Child pages)",
description: "List all subpages of the current page",
searchTerms: ["subpages", "child", "children", "nested", "hierarchy"],
searchTerms: [
"subpages",
"child",
"children",
"nested",
"hierarchy",
"toc",
],
icon: IconSitemap,
command: ({ editor, range }: CommandProps) => {
editor.chain().focus().deleteRange(range).insertSubpages().run();
},
},
{
title: "Synced block",
description: "Create a block that stays in sync across pages.",
searchTerms: [
"sync",
"synced",
"synced block",
"excerpt",
"transclusion",
"reusable",
"snippet",
],
icon: IconRotate2,
command: ({ editor, range }: CommandProps) => {
editor
.chain()
.focus()
.deleteRange(range)
.insertTransclusionSource()
.run();
},
},
{
title: "2 Columns",
description: "Split content into two columns.",
searchTerms: ["columns", "layout", "split", "side"],
icon: IconColumns2,
command: ({ editor, range }: CommandProps) =>
editor
.chain()
.focus()
.deleteRange(range)
.insertColumns({ layout: "two_equal" })
.run(),
},
{
title: "3 Columns",
description: "Split content into three columns.",
searchTerms: ["columns", "layout", "split", "triple"],
icon: IconColumns3,
command: ({ editor, range }: CommandProps) =>
editor
.chain()
.focus()
.deleteRange(range)
.insertColumns({ layout: "three_equal" })
.run(),
},
{
title: "4 Columns",
description: "Split content into four columns.",
searchTerms: ["columns", "layout", "split"],
icon: IconColumns4,
command: ({ editor, range }: CommandProps) =>
editor
.chain()
.focus()
.deleteRange(range)
.insertColumns({ layout: "four_equal" })
.run(),
},
{
title: "5 Columns",
description: "Split content into five columns.",
searchTerms: ["columns", "layout", "split"],
icon: IconColumns5,
command: ({ editor, range }: CommandProps) =>
editor
.chain()
.focus()
.deleteRange(range)
.insertColumns({ layout: "five_equal" })
.run(),
},
{
title: "Iframe embed",
description: "Embed any Iframe",
@@ -477,7 +673,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
{
title: "YouTube",
description: "Embed YouTube video",
searchTerms: ["youtube", "yt"],
searchTerms: ["youtube", "yt", "media", "video"],
icon: YoutubeIcon,
command: ({ editor, range }: CommandProps) => {
editor
@@ -549,8 +745,10 @@ const CommandGroups: SlashMenuGroupedItemsType = {
export const getSuggestionItems = ({
query,
excludeItems,
}: {
query: string;
excludeItems?: Set<string>;
}): SlashMenuGroupedItemsType => {
const search = query.toLowerCase();
const filteredGroups: SlashMenuGroupedItemsType = {};
@@ -567,6 +765,7 @@ export const getSuggestionItems = ({
for (const [group, items] of Object.entries(CommandGroups)) {
const filteredItems = items.filter((item) => {
if (excludeItems?.has(item.title)) return false;
return (
fuzzyMatch(search, item.title) ||
item.description.toLowerCase().includes(search) ||
@@ -576,7 +775,11 @@ export const getSuggestionItems = ({
});
if (filteredItems.length) {
filteredGroups[group] = filteredItems;
filteredGroups[group] = filteredItems.sort((a, b) => {
const aTitle = a.title.toLowerCase().includes(search) ? 0 : 1;
const bTitle = b.title.toLowerCase().includes(search) ? 0 : 1;
return aTitle - bTitle;
});
}
}
apps/client/src/features/editor/components/slash-menu/render-items.ts
+1 -1
View File
@@ -49,7 +49,7 @@ const renderItems = () => {
getReferenceClientRect = props.clientRect;
popup = document.createElement("div");
popup.style.zIndex = "9999";
popup.style.zIndex = "199";
popup.style.position = "absolute";
popup.style.top = "0";
popup.style.left = "0";
apps/client/src/features/editor/components/status/status-view.tsx
+158
View File
@@ -0,0 +1,158 @@
import { useState, useRef, useEffect } from "react";
import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
import { Popover, TextInput, Group, Box } from "@mantine/core";
import { useDebouncedCallback } from "@mantine/hooks";
import { IconCheck } from "@tabler/icons-react";
import clsx from "clsx";
import classes from "./status.module.css";
import type { StatusColor } from "@docmost/editor-ext";
const STATUS_COLORS: { name: StatusColor; bg: string }[] = [
{ name: "gray", bg: "var(--mantine-color-gray-4)" },
{ name: "blue", bg: "var(--mantine-color-blue-4)" },
{ name: "green", bg: "var(--mantine-color-green-4)" },
{ name: "yellow", bg: "var(--mantine-color-yellow-4)" },
{ name: "red", bg: "var(--mantine-color-red-4)" },
{ name: "purple", bg: "var(--mantine-color-violet-4)" },
];
const colorClassMap: Record<StatusColor, string> = {
gray: classes.colorGray,
blue: classes.colorBlue,
green: classes.colorGreen,
yellow: classes.colorYellow,
red: classes.colorRed,
purple: classes.colorPurple,
};
export default function StatusView(props: NodeViewProps) {
const { node, updateAttributes, deleteNode, editor, getPos } = props;
const { text, color } = node.attrs as {
text: string;
color: StatusColor;
};
const [opened, setOpened] = useState(false);
const [inputValue, setInputValue] = useState(text);
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
const storage = editor.storage?.status;
if (storage?.autoOpen) {
storage.autoOpen = false;
setOpened(true);
}
}, []);
useEffect(() => {
if (opened) {
setInputValue(text);
setTimeout(() => inputRef.current?.focus(), 0);
}
}, [opened]);
const debouncedUpdateAttributes = useDebouncedCallback(
(val: string) => updateAttributes({ text: val }),
100,
);
const handleTextChange = (val: string) => {
setInputValue(val);
debouncedUpdateAttributes(val);
};
const handleColorChange = (newColor: StatusColor) => {
updateAttributes({ color: newColor });
};
const isEditable = editor.isEditable;
return (
<NodeViewWrapper style={{ display: "inline" }} data-drag-handle>
<Popover
opened={opened}
onChange={(open) => {
if (!open && !text) {
deleteNode();
return;
}
setOpened(open);
}}
width={220}
position="bottom"
withArrow
shadow="md"
trapFocus
>
<Popover.Target>
<span
className={clsx(
"status-badge",
classes.status,
colorClassMap[color],
)}
onClick={() => isEditable && setOpened(true)}
onKeyDown={(e) => {
if (isEditable && (e.key === "Enter" || e.key === " ")) {
e.preventDefault();
setOpened(true);
}
}}
role="button"
tabIndex={0}
aria-label={text || "SET STATUS"}
aria-haspopup="dialog"
aria-expanded={opened}
>
{text || "SET STATUS"}
</span>
</Popover.Target>
<Popover.Dropdown>
<TextInput
ref={inputRef}
value={inputValue}
onChange={(e) =>
handleTextChange(e.currentTarget.value.toUpperCase())
}
onKeyDown={(e) => {
if (e.key === "Enter") {
setOpened(false);
editor.commands.focus(getPos() + node.nodeSize);
}
}}
placeholder="Status text"
size="sm"
mb="xs"
/>
<Group gap={6} justify="center">
{STATUS_COLORS.map(({ name, bg }) => (
<Box
key={name}
className={clsx(
classes.swatch,
color === name && classes.swatchActive,
)}
style={{ backgroundColor: bg }}
onClick={() => handleColorChange(name)}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
handleColorChange(name);
}
}}
role="button"
tabIndex={0}
aria-label={name}
aria-pressed={color === name}
>
{color === name && <IconCheck size={14} />}
</Box>
))}
</Group>
</Popover.Dropdown>
</Popover>
</NodeViewWrapper>
);
}
apps/client/src/features/editor/components/status/status.module.css
+65
View File
@@ -0,0 +1,65 @@
.status {
display: inline-block;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
border-radius: 3px;
padding: 1px 6px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
line-height: 1.6;
cursor: pointer;
white-space: nowrap;
vertical-align: middle;
user-select: none;
}
.colorGray {
background-color: light-dark(rgb(223 223 215), rgba(168, 162, 158, 0.4));
color: light-dark(#3d3d3d, var(--mantine-color-gray-3));
}
.colorBlue {
background-color: light-dark(rgb(191 227 253), rgba(37, 99, 235, 0.4));
color: light-dark(#1a4d99, var(--mantine-color-blue-3));
}
.colorGreen {
background-color: light-dark(rgb(187 240 173), rgba(0, 138, 0, 0.4));
color: light-dark(#135c13, var(--mantine-color-green-3));
}
.colorYellow {
background-color: light-dark(rgb(249 238 148), rgba(234, 179, 8, 0.4));
color: light-dark(#6b5300, var(--mantine-color-yellow-3));
}
.colorRed {
background-color: light-dark(rgb(255 200 195), rgba(224, 0, 0, 0.4));
color: light-dark(#a10000, var(--mantine-color-red-3));
}
.colorPurple {
background-color: light-dark(rgb(225 207 245), rgba(147, 51, 234, 0.4));
color: light-dark(#5b21a6, var(--mantine-color-violet-3));
}
.swatch {
width: 24px;
height: 24px;
border-radius: 4px;
cursor: pointer;
border: 2px solid transparent;
display: flex;
align-items: center;
justify-content: center;
}
.swatch:hover {
opacity: 0.8;
}
.swatchActive {
border-color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-gray-4));
}
apps/client/src/features/editor/components/subpages/subpages-menu.tsx
+2
View File
@@ -6,6 +6,7 @@ import { ActionIcon, Tooltip } from "@mantine/core";
import { IconTrash } from "@tabler/icons-react";
import { useTranslation } from "react-i18next";
import { Editor } from "@tiptap/core";
import { isEditorReady } from "@docmost/editor-ext";
interface SubpagesMenuProps {
editor: Editor;
@@ -33,6 +34,7 @@ export const SubpagesMenu = React.memo(
);
const getReferenceClientRect = useCallback(() => {
if (!isEditorReady(editor)) return new DOMRect();
const { selection } = editor.state;
const predicate = (node: PMNode) => node.type.name === "subpages";
const parent = findParentNode(predicate)(selection);

Some files were not shown because too many files have changed in this diff Show More