@@ -83,6 +110,38 @@ export function CloudLoginForm() {
{t("Continue")}
+
+
+
+ {findEmailSent ? (
+
+ {t("We've sent you an email with your associated workspaces.")}
+
+ ) : (
+
+ )}
diff --git a/apps/client/src/ee/pages/verify-email.tsx b/apps/client/src/ee/pages/verify-email.tsx
new file mode 100644
index 00000000..623c3202
--- /dev/null
+++ b/apps/client/src/ee/pages/verify-email.tsx
@@ -0,0 +1,107 @@
+import { useEffect, useState } from "react";
+import { useSearchParams, useNavigate } from "react-router-dom";
+import { Container, Title, Text, Button, Box } from "@mantine/core";
+import classes from "../../features/auth/components/auth.module.css";
+import {
+ verifyEmail,
+ resendVerificationEmail,
+} from "@/ee/cloud/service/cloud-service.ts";
+import { notifications } from "@mantine/notifications";
+import APP_ROUTE from "@/lib/app-route.ts";
+import { useTranslation } from "react-i18next";
+
+export default function VerifyEmail() {
+ const { t } = useTranslation();
+ const [searchParams] = useSearchParams();
+ const navigate = useNavigate();
+ const token = searchParams.get("token");
+ const rawEmail = searchParams.get("email");
+ const email = rawEmail && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(rawEmail) ? rawEmail : null;
+ const sig = searchParams.get("sig");
+ const [isResending, setIsResending] = useState(false);
+ const [resent, setResent] = useState(false);
+
+ useEffect(() => {
+ if (token) {
+ handleVerify(token);
+ }
+ }, [token]);
+
+ async function handleVerify(verifyToken: string) {
+ try {
+ await verifyEmail({ token: verifyToken });
+ navigate(APP_ROUTE.HOME);
+ } catch (err) {
+ notifications.show({
+ message: t("Verification failed. The link may have expired."),
+ color: "red",
+ });
+ navigate(APP_ROUTE.AUTH.LOGIN);
+ }
+ }
+
+ async function handleResend() {
+ if (!email || !sig) return;
+ setIsResending(true);
+
+ try {
+ await resendVerificationEmail({ email, sig });
+ setResent(true);
+ } catch {
+ notifications.show({
+ message: t("Failed to resend verification email. Please try again."),
+ color: "red",
+ });
+ }
+
+ setIsResending(false);
+ }
+
+ if (token) {
+ return (
+
+
+
+ {t("Verifying your email")}
+
+
+ {t("Please wait...")}
+
+
+
+ );
+ }
+
+ return (
+
+
+
+ {t("Check your email")}
+
+
+ {email
+ ? t("We sent a verification link to {{email}}.", { email })
+ : t("We sent a verification link to your email.")}
+
+
+ {t("Click the link to verify your email and access your workspace.")}
+
+ {email && sig && !resent && (
+
+ )}
+ {resent && (
+
+ {t("Verification email sent. Please check your inbox.")}
+
+ )}
+
+
+ );
+}
diff --git a/apps/client/src/features/auth/components/setup-workspace-form.tsx b/apps/client/src/features/auth/components/setup-workspace-form.tsx
index 261412a9..6eaf3d12 100644
--- a/apps/client/src/features/auth/components/setup-workspace-form.tsx
+++ b/apps/client/src/features/auth/components/setup-workspace-form.tsx
@@ -22,11 +22,11 @@ import APP_ROUTE from "@/lib/app-route.ts";
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
- .email()
- .min(1, { message: "email is required" }),
- 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
;
diff --git a/apps/client/src/features/auth/hooks/use-auth.ts b/apps/client/src/features/auth/hooks/use-auth.ts
index 6e1b4e34..411e04b4 100644
--- a/apps/client/src/features/auth/hooks/use-auth.ts
+++ b/apps/client/src/features/auth/hooks/use-auth.ts
@@ -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) {
diff --git a/apps/client/src/features/auth/services/auth-service.ts b/apps/client/src/features/auth/services/auth-service.ts
index 20e437f3..20552d56 100644
--- a/apps/client/src/features/auth/services/auth-service.ts
+++ b/apps/client/src/features/auth/services/auth-service.ts
@@ -50,4 +50,5 @@ export async function verifyUserToken(data: IVerifyUserToken): Promise {
export async function getCollabToken(): Promise {
const req = await api.post("/auth/collab-token");
return req.data;
-}
\ No newline at end of file
+}
+
diff --git a/apps/client/src/features/workspace/services/workspace-service.ts b/apps/client/src/features/workspace/services/workspace-service.ts
index 20da1146..0ffd6f23 100644
--- a/apps/client/src/features/workspace/services/workspace-service.ts
+++ b/apps/client/src/features/workspace/services/workspace-service.ts
@@ -113,7 +113,7 @@ export async function getInvitationById(data: {
export async function createWorkspace(
data: ISetupWorkspace,
-): Promise<{ workspace: IWorkspace } & { exchangeToken: string }> {
+): Promise<{ workspace: IWorkspace; exchangeToken?: string; requiresEmailVerification?: boolean; emailSignature?: string }> {
const req = await api.post("/workspace/create", data);
return req.data;
}
diff --git a/apps/client/src/lib/app-route.ts b/apps/client/src/lib/app-route.ts
index c4a13093..630dd048 100644
--- a/apps/client/src/lib/app-route.ts
+++ b/apps/client/src/lib/app-route.ts
@@ -12,6 +12,7 @@ const APP_ROUTE = {
SELECT_WORKSPACE: "/select",
MFA_CHALLENGE: "/login/mfa",
MFA_SETUP_REQUIRED: "/login/mfa/setup",
+ VERIFY_EMAIL: "/verify-email",
},
SETTINGS: {
ACCOUNT: {
diff --git a/apps/server/package.json b/apps/server/package.json
index 5cffe556..083f8a07 100644
--- a/apps/server/package.json
+++ b/apps/server/package.json
@@ -107,6 +107,7 @@
"sanitize-filename-ts": "1.0.2",
"socket.io": "^4.8.3",
"stripe": "^17.5.0",
+ "tlds": "^1.261.0",
"tmp-promise": "^3.0.3",
"tseep": "^1.3.1",
"typesense": "^2.1.0",
diff --git a/apps/server/src/common/validator/is-iso6391.ts b/apps/server/src/common/validators/is-iso6391.ts
similarity index 100%
rename from apps/server/src/common/validator/is-iso6391.ts
rename to apps/server/src/common/validators/is-iso6391.ts
diff --git a/apps/server/src/common/validators/no-urls.validator.spec.ts b/apps/server/src/common/validators/no-urls.validator.spec.ts
new file mode 100644
index 00000000..07ad5721
--- /dev/null
+++ b/apps/server/src/common/validators/no-urls.validator.spec.ts
@@ -0,0 +1,142 @@
+import { containsDomain } from './no-urls.validator';
+
+// containsDomain returns true if value contains a domain-like pattern
+// The full NoUrls validator also checks for https:// URLs separately
+
+describe('containsDomain', () => {
+ describe('bare domains with real TLDs — should block', () => {
+ it.each([
+ 'example.com',
+ 'example.net',
+ 'example.org',
+ 'example.io',
+ 'example.co',
+ 'example.dev',
+ 'example.app',
+ 'example.me',
+ 'example.info',
+ 'example.tech',
+ 'example.aero',
+ 'example.cloud',
+ 'example.museum',
+ 'example.abc',
+ 'example.uk',
+ 'example.de',
+ 'example.fr',
+ 'example.ru',
+ ])('blocks "%s"', (value) => {
+ expect(containsDomain(value)).toBe(true);
+ });
+ });
+
+ describe('domains with paths — should block', () => {
+ it.each([
+ 'example.com/reset',
+ 'example.com/reset-password',
+ 'click example.com/page',
+ 'go to example.net/login',
+ ])('blocks "%s"', (value) => {
+ expect(containsDomain(value)).toBe(true);
+ });
+ });
+
+ describe('multi-part domains — should block', () => {
+ it.each([
+ 'Foo.com.net',
+ 'Foo.com.',
+ 'Foo.mine.net',
+ 'Foo.mine.ne',
+ 'sub.example.com',
+ 'login.example.co.uk',
+ ])('blocks "%s"', (value) => {
+ expect(containsDomain(value)).toBe(true);
+ });
+ });
+
+ describe('domain in sentence — should block', () => {
+ it.each([
+ 'Reset your password at example.com',
+ 'URGENT click example.com/reset',
+ 'Visit example.org for details',
+ 'go to mysite.io now',
+ ])('blocks "%s"', (value) => {
+ expect(containsDomain(value)).toBe(true);
+ });
+ });
+
+ describe('case insensitive — should block', () => {
+ it.each(['EXAMPLE.COM', 'Example.Com', 'example.COM'])('blocks "%s"', (value) => {
+ expect(containsDomain(value)).toBe(true);
+ });
+ });
+
+ describe('fake TLDs — should allow', () => {
+ it.each([
+ 'Foo.mine',
+ 'Foo.blarg',
+ 'Foo.qqq',
+ 'Foo.zz',
+ 'Foo.abcd',
+ 'Foo.abcde',
+ 'Foo.abcdef',
+ 'Foo.abcdefg',
+ ])('allows "%s"', (value) => {
+ expect(containsDomain(value)).toBe(false);
+ });
+ });
+
+ describe('too short suffix — should allow', () => {
+ it.each(['Foo.a', 'Foo.c', 'A.B'])('allows "%s"', (value) => {
+ expect(containsDomain(value)).toBe(false);
+ });
+ });
+
+ describe('multi-part with fake TLD — should allow', () => {
+ it.each(['Foo.mine.', 'Foo.mine.n'])('allows "%s"', (value) => {
+ expect(containsDomain(value)).toBe(false);
+ });
+ });
+
+ describe('emails — should allow', () => {
+ it.each([
+ 'user@example.com',
+ 'admin@company.org',
+ 'test@sub.domain.co.uk',
+ ])('allows "%s"', (value) => {
+ expect(containsDomain(value)).toBe(false);
+ });
+ });
+
+ describe('normal names — should allow', () => {
+ it.each([
+ 'John Smith',
+ 'Dr. Smith',
+ 'A. B. Charlie',
+ 'John',
+ 'Mary Jane',
+ "O'Brien",
+ 'Jean-Pierre',
+ 'José García',
+ ])('allows "%s"', (value) => {
+ expect(containsDomain(value)).toBe(false);
+ });
+ });
+
+ describe('IP addresses — should allow', () => {
+ it.each(['192.168.1.1', '10.0.0.1', '127.0.0.1'])(
+ 'allows "%s"',
+ (value) => {
+ expect(containsDomain(value)).toBe(false);
+ },
+ );
+ });
+
+ describe('edge cases — should allow', () => {
+ it.each(['', ' ', '.', '..', 'hello', '.com', 'a.b'])(
+ 'allows "%s"',
+ (value) => {
+ expect(containsDomain(value)).toBe(false);
+ },
+ );
+ });
+});
diff --git a/apps/server/src/common/validators/no-urls.validator.ts b/apps/server/src/common/validators/no-urls.validator.ts
new file mode 100644
index 00000000..c26faecc
--- /dev/null
+++ b/apps/server/src/common/validators/no-urls.validator.ts
@@ -0,0 +1,42 @@
+import { registerDecorator, ValidationOptions } from 'class-validator';
+import * as tlds from 'tlds';
+
+const URL_PATTERN = /https?:\/\//i;
+const tldSet = new Set(tlds.map((t) => t.toLowerCase()));
+
+export function containsDomain(value: string): boolean {
+ const tokens = value.split(/\s+/);
+ for (const token of tokens) {
+ if (token.includes('@')) continue;
+ const segments = token.split('.');
+ for (let i = 1; i < segments.length; i++) {
+ const suffix = segments[i].replace(/[^\w].*/g, '');
+ if (segments[i - 1] && suffix && tldSet.has(suffix.toLowerCase())) {
+ return true;
+ }
+ }
+ }
+ return false;
+}
+
+export function NoUrls(validationOptions?: ValidationOptions) {
+ return function (object: object, propertyName: string) {
+ registerDecorator({
+ name: 'noUrls',
+ target: object.constructor,
+ propertyName,
+ options: {
+ message: 'Must not contain URLs or domain names',
+ ...validationOptions,
+ },
+ validator: {
+ validate(value: unknown) {
+ if (typeof value !== 'string') return true;
+ if (URL_PATTERN.test(value)) return false;
+ if (containsDomain(value)) return false;
+ return true;
+ },
+ },
+ });
+ };
+}
diff --git a/apps/server/src/core/auth/auth.constants.ts b/apps/server/src/core/auth/auth.constants.ts
index 555149c4..fda2346e 100644
--- a/apps/server/src/core/auth/auth.constants.ts
+++ b/apps/server/src/core/auth/auth.constants.ts
@@ -1,3 +1,4 @@
export enum UserTokenType {
FORGOT_PASSWORD = 'forgot-password',
+ EMAIL_VERIFICATION = 'email-verification',
}
diff --git a/apps/server/src/core/auth/auth.util.ts b/apps/server/src/core/auth/auth.util.ts
index cdd46e9b..e2de9bf2 100644
--- a/apps/server/src/core/auth/auth.util.ts
+++ b/apps/server/src/core/auth/auth.util.ts
@@ -1,5 +1,37 @@
import { BadRequestException } from '@nestjs/common';
import { Workspace } from '@docmost/db/types/entity.types';
+import { createHmac } from 'node:crypto';
+
+export function computeEmailSignature(
+ email: string,
+ workspaceId: string,
+ appSecret: string,
+): string {
+ return createHmac('sha256', appSecret)
+ .update(`${email.toLowerCase()}:${workspaceId}`)
+ .digest('hex');
+}
+
+export function throwIfEmailNotVerified(opts: {
+ isCloud: boolean;
+ emailVerifiedAt: Date | null;
+ email: string;
+ workspaceId: string;
+ appSecret: string;
+}): void {
+ if (!opts.isCloud || opts.emailVerifiedAt) return;
+
+ const emailSignature = computeEmailSignature(
+ opts.email,
+ opts.workspaceId,
+ opts.appSecret,
+ );
+ throw new BadRequestException({
+ message:
+ 'Please verify your email address. Check your inbox for the verification link.',
+ emailSignature,
+ });
+}
export function validateSsoEnforcement(workspace: Workspace) {
if (workspace.enforceSso) {
diff --git a/apps/server/src/core/auth/dto/create-admin-user.dto.ts b/apps/server/src/core/auth/dto/create-admin-user.dto.ts
index bdea75fe..9580f98f 100644
--- a/apps/server/src/core/auth/dto/create-admin-user.dto.ts
+++ b/apps/server/src/core/auth/dto/create-admin-user.dto.ts
@@ -7,11 +7,13 @@ import {
} from 'class-validator';
import { CreateUserDto } from './create-user.dto';
import { Transform, TransformFnParams } from 'class-transformer';
+import { NoUrls } from '../../../common/validators/no-urls.validator';
export class CreateAdminUserDto extends CreateUserDto {
@IsNotEmpty()
@MinLength(1)
@MaxLength(50)
+ @NoUrls()
@Transform(({ value }: TransformFnParams) => value?.trim())
name: string;
diff --git a/apps/server/src/core/auth/dto/create-user.dto.ts b/apps/server/src/core/auth/dto/create-user.dto.ts
index 3362c722..bd432904 100644
--- a/apps/server/src/core/auth/dto/create-user.dto.ts
+++ b/apps/server/src/core/auth/dto/create-user.dto.ts
@@ -7,12 +7,14 @@ import {
MinLength,
} from 'class-validator';
import { Transform, TransformFnParams } from 'class-transformer';
+import { NoUrls } from '../../../common/validators/no-urls.validator';
export class CreateUserDto {
@IsOptional()
@MinLength(1)
@MaxLength(50)
@IsString()
+ @NoUrls()
@Transform(({ value }: TransformFnParams) => value?.trim())
name: string;
diff --git a/apps/server/src/core/auth/services/auth.service.ts b/apps/server/src/core/auth/services/auth.service.ts
index bc907b8e..1bb2c5ee 100644
--- a/apps/server/src/core/auth/services/auth.service.ts
+++ b/apps/server/src/core/auth/services/auth.service.ts
@@ -17,6 +17,7 @@ import {
isUserDisabled,
nanoIdGen,
} from '../../../common/helpers';
+import { throwIfEmailNotVerified } from '../auth.util';
import { ChangePasswordDto } from '../dto/change-password.dto';
import { MailService } from '../../../integrations/mail/mail.service';
import ChangePasswordEmail from '@docmost/transactional/emails/change-password-email';
@@ -36,6 +37,7 @@ import {
AUDIT_SERVICE,
IAuditService,
} from '../../../integrations/audit/audit.service';
+import { EnvironmentService } from '../../../integrations/environment/environment.service';
@Injectable()
export class AuthService {
@@ -46,6 +48,7 @@ export class AuthService {
private userTokenRepo: UserTokenRepo,
private mailService: MailService,
private domainService: DomainService,
+ private environmentService: EnvironmentService,
@InjectKysely() private readonly db: KyselyDB,
@Inject(AUDIT_SERVICE) private readonly auditService: IAuditService,
) {}
@@ -69,6 +72,14 @@ export class AuthService {
throw new UnauthorizedException(errorMessage);
}
+ throwIfEmailNotVerified({
+ isCloud: this.environmentService.isCloud(),
+ emailVerifiedAt: user.emailVerifiedAt,
+ email: user.email,
+ workspaceId,
+ appSecret: this.environmentService.getAppSecret(),
+ });
+
user.lastLoginAt = new Date();
await this.userRepo.updateLastLogin(user.id, workspaceId);
@@ -247,6 +258,14 @@ export class AuthService {
template: emailTemplate,
});
+ if (this.environmentService.isCloud() && !user.emailVerifiedAt) {
+ await this.userRepo.updateUser(
+ { emailVerifiedAt: new Date() },
+ user.id,
+ workspace.id,
+ );
+ }
+
// Check if user has MFA enabled or workspace enforces MFA
const userHasMfa = user?.['mfa']?.isEnabled || false;
const workspaceEnforcesMfa = workspace.enforceMfa || false;
diff --git a/apps/server/src/core/workspace/dto/invitation.dto.ts b/apps/server/src/core/workspace/dto/invitation.dto.ts
index 8e5cccac..187688c4 100644
--- a/apps/server/src/core/workspace/dto/invitation.dto.ts
+++ b/apps/server/src/core/workspace/dto/invitation.dto.ts
@@ -12,6 +12,7 @@ import {
MinLength,
} from 'class-validator';
import { UserRole } from '../../../common/helpers/types/permission';
+import { NoUrls } from '../../../common/validators/no-urls.validator';
export class InviteUserDto {
@IsArray()
@@ -44,6 +45,7 @@ export class AcceptInviteDto extends InvitationIdDto {
@MinLength(2)
@MaxLength(60)
@IsString()
+ @NoUrls()
name: string;
@MinLength(8)
diff --git a/apps/server/src/core/workspace/services/workspace.service.ts b/apps/server/src/core/workspace/services/workspace.service.ts
index 2ef80590..495057a0 100644
--- a/apps/server/src/core/workspace/services/workspace.service.ts
+++ b/apps/server/src/core/workspace/services/workspace.service.ts
@@ -244,7 +244,7 @@ export class WorkspaceService {
await this.billingQueue.add(
QueueJob.WELCOME_EMAIL,
{ userId: user.id },
- { delay: 60 * 1000 }, // 1m
+ { delay: 30 * 60 * 1000 }, // 30m
);
} catch (err) {
this.logger.error(err);
diff --git a/apps/server/src/ee b/apps/server/src/ee
index 62a8a7e5..52ac3a79 160000
--- a/apps/server/src/ee
+++ b/apps/server/src/ee
@@ -1 +1 @@
-Subproject commit 62a8a7e548a17b8e3baf4dfdc90f2f432a691ee0
+Subproject commit 52ac3a79de56472a1f77b12ea4cd4c07fd5f5d69
diff --git a/apps/server/src/integrations/environment/environment.validation.ts b/apps/server/src/integrations/environment/environment.validation.ts
index 041d0f4c..5c307da2 100644
--- a/apps/server/src/integrations/environment/environment.validation.ts
+++ b/apps/server/src/integrations/environment/environment.validation.ts
@@ -10,7 +10,7 @@ import {
validateSync,
} from 'class-validator';
import { plainToInstance } from 'class-transformer';
-import { IsISO6391 } from '../../common/validator/is-iso6391';
+import { IsISO6391 } from '../../common/validators/is-iso6391';
export class EnvironmentVariables {
@IsNotEmpty()
diff --git a/apps/server/src/main.ts b/apps/server/src/main.ts
index fca457e5..0f2a82a1 100644
--- a/apps/server/src/main.ts
+++ b/apps/server/src/main.ts
@@ -67,6 +67,7 @@ async function bootstrap() {
'/api/sso/google',
'/api/workspace/create',
'/api/workspace/joined',
+ '/api/workspace/find-by-email',
];
if (
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2049ad4e..30535f29 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -681,6 +681,9 @@ importers:
stripe:
specifier: ^17.5.0
version: 17.5.0
+ tlds:
+ specifier: ^1.261.0
+ version: 1.261.0
tmp-promise:
specifier: ^3.0.3
version: 3.0.3
@@ -9837,6 +9840,10 @@ packages:
tiptap-extension-global-drag-handle@0.1.18:
resolution: {integrity: sha512-jwFuy1K8DP3a4bFy76Hpc63w1Sil0B7uZ3mvhQomVvUFCU787Lg2FowNhn7NFzeyok761qY2VG+PZ/FDthWUdg==}
+ tlds@1.261.0:
+ resolution: {integrity: sha512-QXqwfEl9ddlGBaRFXIvNKK6OhipSiLXuRuLJX5DErz0o0Q0rYxulWLdFryTkV5PkdZct5iMInwYEGe/eR++1AA==}
+ hasBin: true
+
tldts-core@6.1.72:
resolution: {integrity: sha512-FW3H9aCaGTJ8l8RVCR3EX8GxsxDbQXuwetwwgXA2chYdsX+NY1ytCBl61narjjehWmCw92tc1AxlcY3668CU8g==}
@@ -21145,6 +21152,8 @@ snapshots:
tiptap-extension-global-drag-handle@0.1.18: {}
+ tlds@1.261.0: {}
+
tldts-core@6.1.72: {}
tldts@6.1.72:
From 89b94e5d195005ae42ee7c8e5981ee9dc2e8cb6d Mon Sep 17 00:00:00 2001
From: Philip Okugbe <16838612+Philipinho@users.noreply.github.com>
Date: Sun, 15 Mar 2026 17:08:59 +0000
Subject: [PATCH 06/57] feat: refactor link menu (#2025)
* link markview - WIP
* WIP
* feat: refactor links
* cleanup
---
.../public/locales/en-US/translation.json | 5 +
.../src/components/ui/auto-tooltip-text.tsx | 1 +
.../components/bubble-menu/link-selector.tsx | 10 +-
.../components/link/link-editor-panel.tsx | 199 +++++-
.../editor/components/link/link-menu.tsx | 103 ----
.../editor/components/link/link-preview.tsx | 60 --
.../editor/components/link/link-view.tsx | 583 ++++++++++++++++++
.../editor/components/link/link.module.css | 108 +++-
.../features/editor/components/link/types.ts | 3 +-
.../components/link/use-link-editor-state.tsx | 8 +-
.../features/editor/extensions/extensions.ts | 7 +-
.../editor/hooks/use-editor-scroll.ts | 2 +-
.../src/features/editor/page-editor.tsx | 2 -
.../src/features/editor/styles/core.css | 12 +-
.../features/search/queries/search-query.ts | 3 +-
apps/server/src/ee | 2 +-
.../src/integrations/export/export.service.ts | 1 +
apps/server/src/integrations/export/utils.ts | 5 +
.../services/file-import-task.service.ts | 7 +
.../import/utils/import-formatter.ts | 29 +-
packages/editor-ext/src/lib/link.ts | 13 +
21 files changed, 944 insertions(+), 219 deletions(-)
delete mode 100644 apps/client/src/features/editor/components/link/link-menu.tsx
delete mode 100644 apps/client/src/features/editor/components/link/link-preview.tsx
create mode 100644 apps/client/src/features/editor/components/link/link-view.tsx
diff --git a/apps/client/public/locales/en-US/translation.json b/apps/client/public/locales/en-US/translation.json
index da0f0b81..2d9675b2 100644
--- a/apps/client/public/locales/en-US/translation.json
+++ b/apps/client/public/locales/en-US/translation.json
@@ -289,6 +289,11 @@
"Save & Exit": "Save & Exit",
"Double-click to edit Excalidraw diagram": "Double-click to edit Excalidraw diagram",
"Paste link": "Paste link",
+ "Paste link or search pages": "Paste link or search pages",
+ "Link to web page": "Link to web page",
+ "Recents": "Recents",
+ "Page or URL": "Page or URL",
+ "Link title": "Link title",
"Edit link": "Edit link",
"Remove link": "Remove link",
"Add link": "Add link",
diff --git a/apps/client/src/components/ui/auto-tooltip-text.tsx b/apps/client/src/components/ui/auto-tooltip-text.tsx
index 419ec3d9..962a701a 100644
--- a/apps/client/src/components/ui/auto-tooltip-text.tsx
+++ b/apps/client/src/components/ui/auto-tooltip-text.tsx
@@ -34,6 +34,7 @@ export function AutoTooltipText({
disabled={!isTruncated || !label}
multiline
withArrow
+ withinPortal={false}
{...tooltipProps}
>
= ({
}) => {
const { t } = useTranslation();
const onLink = useCallback(
- (url: string) => {
+ (url: string, internal?: boolean) => {
setIsOpen(false);
editor
.chain()
.focus()
- .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;
@@ -36,11 +37,12 @@ export const LinkSelector: FC = ({
return (
@@ -58,7 +60,7 @@ export const LinkSelector: FC = ({
-
+
diff --git a/apps/client/src/features/editor/components/link/link-editor-panel.tsx b/apps/client/src/features/editor/components/link/link-editor-panel.tsx
index 733455cf..d2cce213 100644
--- a/apps/client/src/features/editor/components/link/link-editor-panel.tsx
+++ b/apps/client/src/features/editor/components/link/link-editor-panel.tsx
@@ -1,36 +1,199 @@
-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(null);
+
+ const { data: suggestion } = useSearchSuggestionsQuery({
+ query: state.isSearchQuery ? state.url : "",
+ includeUsers: false,
+ includePages: true,
+ spaceId: space?.id,
+ limit: state.isSearchQuery ? 10 : 5,
+ preload: true,
});
+ const pages: Partial[] = suggestion?.pages ?? [];
+
+ useEffect(() => {
+ setSelectedIndex(0);
+ }, [pages.length]);
+
+ const selectPage = useCallback(
+ (page: Partial) => {
+ 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 (
+
+ {showDropdown && (
+ <>
+ {!state.isSearchQuery && !state.isValidUrl && (
+
+ {t("Recents")}
+
+ )}
+
+
0 ? 8 : 0}
+ styles={{ content: { minWidth: 0 } }}
+ >
+ {showUrlItem && (
+ onSetLink(state.url, false)}
+ className={clsx(classes.searchItem, {
+ [classes.selectedSearchItem]: selectedIndex === 0,
+ })}
+ >
+
+
+
+
+
+
+
+ {state.url}
+
+
+ {t("Link to web page")}
+
+
+
+
+ )}
+
+ {!state.isValidUrl && pages.map((page, index) => {
+ const itemIndex = showUrlItem ? index + 1 : index;
+ return (
+ selectPage(page)}
+ className={clsx(classes.searchItem, {
+ [classes.selectedSearchItem]: itemIndex === selectedIndex,
+ })}
+ >
+
+
+ {page.icon || }
+
+
+
+
+ {page.title || t("Untitled")}
+
+ {page.space?.name && (
+
+ {page.space.name}
+
+ )}
+
+
+ )}
+
+ {onUnsetLink && (
+
+
+ {t("Remove link")}
+
+
+ )}
);
};
diff --git a/apps/client/src/features/editor/components/link/link-menu.tsx b/apps/client/src/features/editor/components/link/link-menu.tsx
deleted file mode 100644
index 81e77f57..00000000
--- a/apps/client/src/features/editor/components/link/link-menu.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
-import React, { useCallback, useState } from "react";
-import { TextSelection } from "@tiptap/pm/state";
-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";
-
-export function LinkMenu({ editor, appendTo }: EditorMenuProps) {
- const [showEdit, setShowEdit] = useState(false);
-
- const shouldShow = useCallback(() => {
- return editor.isActive("link");
- }, [editor]);
-
- const editorState = useEditorState({
- editor,
- selector: (ctx) => {
- if (!ctx.editor) {
- return null;
- }
- const link = ctx.editor.getAttributes("link");
- return {
- href: link.href,
- };
- },
- });
-
- const handleEdit = useCallback(() => {
- setShowEdit(true);
- }, []);
-
- const onSetLink = useCallback(
- (url: string) => {
- editor
- .chain()
- .focus()
- .extendMarkRange("link")
- .setLink({ href: url })
- .command(({ tr }) => {
- tr.setSelection(TextSelection.create(tr.doc, tr.selection.to));
- return true;
- })
- .run();
- setShowEdit(false);
- },
- [editor],
- );
-
- const onUnsetLink = useCallback(() => {
- editor.chain().focus().extendMarkRange("link").unsetLink().run();
- setShowEdit(false);
- return null;
- }, [editor]);
-
- const onShowEdit = useCallback(() => {
- setShowEdit(true);
- }, []);
-
- const onHideEdit = useCallback(() => {
- setShowEdit(false);
- }, []);
-
- return (
- {
- setShowEdit(false);
- },
- placement: "bottom",
- offset: 5,
- // zIndex: 101,
- }}
- shouldShow={shouldShow}
- >
- {showEdit ? (
-
-
-
- ) : (
-
- )}
-
- );
-}
-
-export default LinkMenu;
diff --git a/apps/client/src/features/editor/components/link/link-preview.tsx b/apps/client/src/features/editor/components/link/link-preview.tsx
deleted file mode 100644
index 8b0de952..00000000
--- a/apps/client/src/features/editor/components/link/link-preview.tsx
+++ /dev/null
@@ -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 (
- <>
-
-
-
-
- {url}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
diff --git a/apps/client/src/features/editor/components/link/link-view.tsx b/apps/client/src/features/editor/components/link/link-view.tsx
new file mode 100644
index 00000000..90b89e82
--- /dev/null
+++ b/apps/client/src/features/editor/components/link/link-view.tsx
@@ -0,0 +1,583 @@
+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";
+
+export const normalizeUrl = (url: string): string => {
+ if (!url) return url;
+ if (url.startsWith("/") || /^(\S+):(\/\/)?\S+$/.test(url)) return url;
+ return `https://${url}`;
+};
+
+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(null);
+ const dropdownRef = useRef(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(null);
+ const titleInputRef = useRef(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 = (
+ <>
+
+ {t("Link title")}
+
+ {
+ 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 (
+
+
+
+ e.preventDefault()}
+ target={isInternal ? undefined : "_blank"}
+ rel={isInternal ? undefined : "noopener noreferrer"}
+ >
+
+
+
+
+
+ e.stopPropagation()}
+ >
+ {activeView === "edit" ? (
+ <>
+
+ {t("Page or URL")}
+
+
+ {isInternal ? (
+ !showSearch ? (
+ <>
+ setShowSearch(true)}
+ >
+
+
+ {pageTitle || linkTitle}
+
+
+
+ {linkTitleInput}
+
+
+
+
+
+
+ {t("Remove link")}
+
+
+
+ ) : (
+
+ )
+ ) : (
+ <>
+
+ }
+ 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}
+
+
+
+
+
+
+ {t("Remove link")}
+
+
+
+ )}
+
+ ) : (
+
+ {
+ e.preventDefault();
+ handleNavigate();
+ }}
+ >
+ {isInternal ? (
+
+ ) : (
+
+ )}
+
+ {isInternal ? pageTitle || linkLabel : href}
+
+
+
+
+
+
+ {
+ e.preventDefault();
+ e.stopPropagation();
+ setShowSearch(false);
+ setPopoverState("edit");
+ }}
+ >
+
+
+
+
+
+ {
+ e.preventDefault();
+ e.stopPropagation();
+ handleCopy(e);
+ }}
+ >
+
+
+
+
+
+ {
+ e.preventDefault();
+ e.stopPropagation();
+ handleRemoveLink();
+ }}
+ >
+
+
+
+
+ )}
+
+
+ );
+}
diff --git a/apps/client/src/features/editor/components/link/link.module.css b/apps/client/src/features/editor/components/link/link.module.css
index 2168997f..dab288c2 100644
--- a/apps/client/src/features/editor/components/link/link.module.css
+++ b/apps/client/src/features/editor/components/link/link.module.css
@@ -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;
-}
\ No newline at end of file
+.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);
+ }
+ }
+}
diff --git a/apps/client/src/features/editor/components/link/types.ts b/apps/client/src/features/editor/components/link/types.ts
index 853dcae6..0bfedd08 100644
--- a/apps/client/src/features/editor/components/link/types.ts
+++ b/apps/client/src/features/editor/components/link/types.ts
@@ -1,4 +1,5 @@
export type LinkEditorPanelProps = {
initialUrl?: string;
- onSetLink: (url: string, openInNewTab?: boolean) => void;
+ onSetLink: (url: string, internal?: boolean) => void;
+ onUnsetLink?: () => void;
};
diff --git a/apps/client/src/features/editor/components/link/use-link-editor-state.tsx b/apps/client/src/features/editor/components/link/use-link-editor-state.tsx
index 778f8da7..0419ee64 100644
--- a/apps/client/src/features/editor/components/link/use-link-editor-state.tsx
+++ b/apps/client/src/features/editor/components/link/use-link-editor-state.tsx
@@ -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,
};
};
diff --git a/apps/client/src/features/editor/extensions/extensions.ts b/apps/client/src/features/editor/extensions/extensions.ts
index 22c595e0..0532156b 100644
--- a/apps/client/src/features/editor/extensions/extensions.ts
+++ b/apps/client/src/features/editor/extensions/extensions.ts
@@ -86,8 +86,9 @@ import fortran from "highlight.js/lib/languages/fortran";
import haskell from "highlight.js/lib/languages/haskell";
import scala from "highlight.js/lib/languages/scala";
import mentionRenderItems from "@/features/editor/components/mention/mention-suggestion.ts";
-import { ReactNodeViewRenderer } from "@tiptap/react";
+import { ReactNodeViewRenderer, ReactMarkViewRenderer } from "@tiptap/react";
import MentionView from "@/features/editor/components/mention/mention-view.tsx";
+import LinkView from "@/features/editor/components/link/link-view.tsx";
import i18n from "@/i18n.ts";
import { MarkdownClipboard } from "@/features/editor/extensions/markdown-clipboard.ts";
import EmojiCommand from "./emoji-command";
@@ -176,6 +177,10 @@ export const mainExtensions = [
}),
LinkExtension.configure({
openOnClick: false,
+ }).extend({
+ addMarkView() {
+ return ReactMarkViewRenderer(LinkView);
+ },
}),
Superscript,
SubScript,
diff --git a/apps/client/src/features/editor/hooks/use-editor-scroll.ts b/apps/client/src/features/editor/hooks/use-editor-scroll.ts
index 31c357a0..cfd5a692 100644
--- a/apps/client/src/features/editor/hooks/use-editor-scroll.ts
+++ b/apps/client/src/features/editor/hooks/use-editor-scroll.ts
@@ -42,7 +42,7 @@ export const useEditorScroll = ({
return;
}
- const dom = editor.view.dom.querySelector(`[id="${targetId}"]`);
+ const dom = editor.view.dom.querySelector(`[id="${targetId}"], [data-id="${targetId}"]`);
if (dom) {
dom.scrollIntoView({ behavior: 'smooth', block: 'start' });
resolve(true);
diff --git a/apps/client/src/features/editor/page-editor.tsx b/apps/client/src/features/editor/page-editor.tsx
index d0d1de03..250d47a3 100644
--- a/apps/client/src/features/editor/page-editor.tsx
+++ b/apps/client/src/features/editor/page-editor.tsx
@@ -50,7 +50,6 @@ import {
handleFileDrop,
handlePaste,
} from "@/features/editor/components/common/editor-paste-handler.tsx";
-import LinkMenu from "@/features/editor/components/link/link-menu.tsx";
import ExcalidrawMenu from "./components/excalidraw/excalidraw-menu";
import DrawioMenu from "./components/drawio/drawio-menu";
import { useCollabToken } from "@/features/auth/queries/auth-query.tsx";
@@ -418,7 +417,6 @@ export default function PageEditor({
-
)}
{showCommentPopup &&