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

bug fixes (#2250)

Browse Source 
* util

* fix page position collation

* support fixed toolbar in templates editor

* date localization

* fix clipped emoji in templates editor

* fix page updated time object

* fix flickers

* fix: remove redundant breadcrumb from destination modal
This commit is contained in:
Philip Okugbe
2026-05-28 16:20:37 +01:00
committed by GitHub
parent 830b5b4d45
commit 33895b0607
38 changed files with 360 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/public/locales/en-US/translation.json
+1
View File
@@ -424,6 +424,7 @@
"Names do not match": "Names do not match",
"Today, {{time}}": "Today, {{time}}",
"Yesterday, {{time}}": "Yesterday, {{time}}",
"now": "now",
"Space created successfully": "Space created successfully",
"Space updated successfully": "Space updated successfully",
"Space deleted successfully": "Space deleted successfully",
apps/client/src/components/ui/destination-picker/destination-picker-modal.tsx
+4 -2
View File
@@ -1,5 +1,5 @@
import { useState, useEffect } from "react";
import { Modal, Button, Group } from "@mantine/core";
import { Modal, Button, Group, Divider } from "@mantine/core";
import { useTranslation } from "react-i18next";
import { DestinationPicker } from "./destination-picker";
import {
@@ -52,7 +52,9 @@ export function DestinationPickerModal({
searchSpacesOnly={searchSpacesOnly}
/>
<Group justify="flex-end" mt="md">
<Divider my="md" />
<Group justify="flex-end">
<Button variant="default" onClick={onClose}>
{t("Close")}
</Button>
apps/client/src/components/ui/destination-picker/destination-picker.module.css
-8
View File
@@ -89,14 +89,6 @@
}
}
.selectedIndicator {
padding: 8px 12px;
font-size: var(--mantine-font-size-sm);
color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
border-top: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
margin-top: var(--mantine-spacing-xs);
}
.emptyState {
padding: 12px;
text-align: center;
apps/client/src/components/ui/destination-picker/destination-picker.tsx
-8
View File
@@ -221,14 +221,6 @@ export function DestinationPicker({
))
)}
</ScrollArea>
{selection && (
<div className={classes.selectedIndicator}>
{selection.type === "space"
? selection.space.name
: `${selection.space.name} / ${selection.page.title || t("Untitled")}`}
</div>
)}
</>
);
}
apps/client/src/ee/api-key/components/api-key-table.tsx
+3 -2
View File
@@ -1,11 +1,11 @@
import { ActionIcon, Group, Menu, Table, Text } from "@mantine/core";
import { IconDots, IconEdit, IconTrash } from "@tabler/icons-react";
import { format } from "date-fns";
import { useTranslation } from "react-i18next";
import { IApiKey } from "@/ee/api-key";
import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
import React from "react";
import NoTableResults from "@/components/common/no-table-results";
import { formatLocalized, useDateFnsLocale } from "@/lib/date-locale.ts";
interface ApiKeyTableProps {
apiKeys: IApiKey[];
@@ -23,10 +23,11 @@ export function ApiKeyTable({
onRevoke,
}: ApiKeyTableProps) {
const { t } = useTranslation();
const locale = useDateFnsLocale();
const formatDate = (date: Date | string | null) => {
if (!date) return t("Never");
return format(new Date(date), "MMM dd, yyyy");
return formatLocalized(date, "MMM dd, yyyy", "PP", locale);
};
const isExpired = (expiresAt: string | null) => {
apps/client/src/ee/api-key/components/create-api-key-modal.tsx
+2 -2
View File
@@ -31,7 +31,7 @@ export function CreateApiKeyModal({
onClose,
onSuccess,
}: CreateApiKeyModalProps) {
const { t } = useTranslation();
const { t, i18n } = useTranslation();
const [expirationOption, setExpirationOption] = useState<string>("30");
const createApiKeyMutation = useCreateApiKeyMutation();
@@ -59,7 +59,7 @@ export function CreateApiKeyModal({
const getExpirationLabel = (days: number) => {
const date = new Date();
date.setDate(date.getDate() + days);
const formatted = date.toLocaleDateString("en-US", {
const formatted = date.toLocaleDateString(i18n.language, {
month: "short",
day: "2-digit",
year: "numeric",
apps/client/src/ee/billing/components/billing-details.tsx
+8 -2
View File
@@ -4,12 +4,13 @@ import {
} from "@/ee/billing/queries/billing-query.ts";
import { Group, Text, SimpleGrid, Paper } from "@mantine/core";
import classes from "./billing.module.css";
import { format } from "date-fns";
import { formatInterval } from "@/ee/billing/utils.ts";
import { formatLocalized, useDateFnsLocale } from "@/lib/date-locale.ts";
export default function BillingDetails() {
const { data: billing } = useBillingQuery();
const { data: plans } = useBillingPlans();
const locale = useDateFnsLocale();
if (!billing || !plans) {
return null;
@@ -75,7 +76,12 @@ export default function BillingDetails() {
: "Renewal date"}
</Text>
<Text fw={700} fz="lg">
{format(billing.periodEndAt, "dd MMM, yyyy")}
{formatLocalized(
billing.periodEndAt,
"dd MMM, yyyy",
"PP",
locale,
)}
</Text>
</div>
</Group>
apps/client/src/ee/licence/components/license-details.tsx
+8 -3
View File
@@ -1,13 +1,14 @@
import { Badge, Table } from "@mantine/core";
import { format } from "date-fns";
import { useLicenseInfo } from "@/ee/licence/queries/license-query.ts";
import { isLicenseExpired } from "@/ee/licence/license.utils.ts";
import { useAtom } from "jotai";
import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
import { formatLocalized, useDateFnsLocale } from "@/lib/date-locale.ts";
export default function LicenseDetails() {
const { data: license, isError } = useLicenseInfo();
const [workspace] = useAtom(workspaceAtom);
const locale = useDateFnsLocale();
if (!license) {
return null;
@@ -50,12 +51,16 @@ export default function LicenseDetails() {
<Table.Tr>
<Table.Th>Issued at</Table.Th>
<Table.Td>{format(license.issuedAt, "dd MMMM, yyyy")}</Table.Td>
<Table.Td>
{formatLocalized(license.issuedAt, "dd MMMM, yyyy", "PPP", locale)}
</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Th>Expires at</Table.Th>
<Table.Td>{format(license.expiresAt, "dd MMMM, yyyy")}</Table.Td>
<Table.Td>
{formatLocalized(license.expiresAt, "dd MMMM, yyyy", "PPP", locale)}
</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Th>License ID</Table.Th>
apps/client/src/ee/page-verification/components/expiration-fields.tsx
+3 -2
View File
@@ -1,6 +1,7 @@
import { Group, NumberInput, Select, Text } from "@mantine/core";
import { DateInput } from "@mantine/dates";
import { useTranslation } from "react-i18next";
import i18n from "@/i18n.ts";
import {
ExpirationMode,
PeriodUnit,
@@ -30,7 +31,7 @@ export function addDays(days: number, from?: Date): Date {
function formatShortDate(date: Date): string {
const crossesYear = date.getFullYear() !== new Date().getFullYear();
return date.toLocaleDateString(undefined, {
return date.toLocaleDateString(i18n.language, {
month: "short",
day: "numeric",
...(crossesYear && { year: "numeric" }),
@@ -38,7 +39,7 @@ function formatShortDate(date: Date): string {
}
function formatLongDate(date: Date): string {
return date.toLocaleDateString(undefined, {
return date.toLocaleDateString(i18n.language, {
month: "long",
day: "numeric",
year: "numeric",
apps/client/src/ee/page-verification/components/manage-verification-form.tsx
+9 -5
View File
@@ -12,6 +12,7 @@ import {
} from "@mantine/core";
import { modals } from "@mantine/modals";
import { useTranslation } from "react-i18next";
import i18n from "@/i18n.ts";
import {
useMarkObsoleteMutation,
usePageVerificationInfoQuery,
@@ -197,11 +198,14 @@ function ExpiringManageContent({ pageId, info, onClose }: ManageContentProps) {
{info.expiresAt && (
<Text size="xs" c="dimmed">
{t(status === "expired" ? "Expired {{date}}" : "Expires {{date}}", {
date: new Date(info.expiresAt).toLocaleDateString(undefined, {
month: "long",
day: "numeric",
year: "numeric",
}),
date: new Date(info.expiresAt).toLocaleDateString(
i18n.language,
{
month: "long",
day: "numeric",
year: "numeric",
},
),
})}
</Text>
)}
apps/client/src/ee/page-verification/components/page-verification-modal.tsx
+2 -1
View File
@@ -13,6 +13,7 @@ import {
IconShieldCheck,
} from "@tabler/icons-react";
import { useTranslation } from "react-i18next";
import i18n from "@/i18n.ts";
import { useParams } from "react-router-dom";
import { extractPageSlugId } from "@/lib";
import { usePageQuery } from "@/features/page/queries/page-query";
@@ -127,7 +128,7 @@ export function PageVerificationBadge({
status === "verified" && verificationInfo?.expiresAt
? t("Verified until {{date}}", {
date: new Date(verificationInfo.expiresAt).toLocaleDateString(
undefined,
i18n.language,
{ month: "long", day: "numeric", year: "numeric" },
),
})
apps/client/src/ee/page-verification/components/verification-list-table.tsx
+10 -4
View File
@@ -16,9 +16,10 @@ import {
} from "@/ee/page-verification/types/page-verification.types";
import { CustomAvatar } from "@/components/ui/custom-avatar";
import { buildPageUrl } from "@/features/page/page.utils";
import { format } from "date-fns";
import NoTableResults from "@/components/common/no-table-results";
import rowClasses from "@/components/ui/clickable-table-row.module.css";
import { formatLocalized, useDateFnsLocale } from "@/lib/date-locale.ts";
import type { Locale } from "date-fns";
const MAX_VISIBLE_VERIFIERS = 5;
@@ -48,7 +49,11 @@ function statusBadge(status: VerificationStatus | null, t: (s: string) => string
}
}
function verifiedUntilText(item: IVerificationListItem, t: (s: string) => string): string {
function verifiedUntilText(
item: IVerificationListItem,
t: (s: string) => string,
locale: Locale,
): string {
if (item.type === "qms") {
if (item.status === "approved") return t("Indefinitely");
return "—";
@@ -60,7 +65,7 @@ function verifiedUntilText(item: IVerificationListItem, t: (s: string) => string
const now = new Date();
if (expires <= now) return t("Expired");
return format(expires, "MMM d, yyyy");
return formatLocalized(expires, "MMM d, yyyy", "PP", locale);
}
function TableSkeleton() {
@@ -98,6 +103,7 @@ export default function VerificationListTable({
isLoading,
}: VerificationListTableProps) {
const { t } = useTranslation();
const locale = useDateFnsLocale();
return (
<Table.ScrollContainer minWidth={600}>
@@ -200,7 +206,7 @@ export default function VerificationListTable({
<Table.Td>
<Text fz="sm" style={{ whiteSpace: "nowrap" }}>
{verifiedUntilText(item, t)}
{verifiedUntilText(item, t, locale)}
</Text>
</Table.Td>
apps/client/src/ee/scim/components/scim-token-table.tsx
+3 -2
View File
@@ -1,11 +1,11 @@
import { ActionIcon, Group, Menu, Table, Text } from "@mantine/core";
import { IconDots, IconEdit, IconTrash } from "@tabler/icons-react";
import { format } from "date-fns";
import { useTranslation } from "react-i18next";
import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
import React from "react";
import NoTableResults from "@/components/common/no-table-results";
import { IScimToken } from "@/ee/scim/types/scim-token.types";
import { formatLocalized, useDateFnsLocale } from "@/lib/date-locale.ts";
interface ScimTokenTableProps {
tokens: IScimToken[];
@@ -21,10 +21,11 @@ export function ScimTokenTable({
onRevoke,
}: ScimTokenTableProps) {
const { t } = useTranslation();
const locale = useDateFnsLocale();
const formatDate = (date: Date | string | null) => {
if (!date) return t("Never");
return format(new Date(date), "MMM dd, yyyy");
return formatLocalized(date, "MMM dd, yyyy", "PP", locale);
};
return (
apps/client/src/ee/template/pages/template-editor.module.css
+6
View File
@@ -32,6 +32,12 @@
margin-bottom: 0.25em;
}
/* The emoji glyph renders larger than its font-size box; let the transparent
ActionIcon overflow so it isn't clipped on the edges. */
.emojiButton button {
overflow: visible;
}
.titleInput {
font-size: 2.5rem;
font-weight: 700;
apps/client/src/ee/template/pages/template-editor.tsx
+20
View File
@@ -32,6 +32,12 @@ import {
} from "../queries/template-query";
import { useGetSpacesQuery } from "@/features/space/queries/space-query";
import useUserRole from "@/hooks/use-user-role";
import { useAtomValue } from "jotai";
import { userAtom } from "@/features/user/atoms/current-user-atom";
import { FixedToolbar } from "@/features/editor/components/fixed-toolbar/fixed-toolbar";
import { EditorLinkMenu } from "@/features/editor/components/link/link-menu";
import { EditorBubbleMenu } from "@/features/editor/components/bubble-menu/bubble-menu";
import { EditorAiMenu } from "@/ee/ai/components/editor/ai-menu/ai-menu";
import classes from "./template-editor.module.css";
@@ -39,6 +45,9 @@ export default function TemplateEditor() {
const { t } = useTranslation();
const { templateId } = useParams<{ templateId: string }>();
const { isAdmin: isWorkspaceAdmin } = useUserRole();
const user = useAtomValue(userAtom);
const editorToolbarEnabled =
user?.settings?.preferences?.editorToolbar ?? false;
const { data: existingTemplate } = useGetTemplateByIdQuery(templateId || "");
const { data: spaces } = useGetSpacesQuery({ limit: 100 });
@@ -238,6 +247,10 @@ export default function TemplateEditor() {
</title>
</Helmet>
{editorToolbarEnabled && editor && (
<FixedToolbar editor={editor} templateMode />
)}
<div className={classes.header}>
<Container size={900} h="100%" px={0}>
<Group justify="space-between" h="100%" wrap="nowrap">
@@ -379,6 +392,13 @@ export default function TemplateEditor() {
)}
</div>
<EditorContent editor={editor} />
{editor && (
<>
<EditorAiMenu editor={editor} />
<EditorBubbleMenu editor={editor} templateMode />
<EditorLinkMenu editor={editor} />
</>
)}
<div style={{ paddingBottom: "20vh" }} />
</Container>
</>
apps/client/src/ee/template/queries/template-query.ts
+2
View File
@@ -5,6 +5,7 @@ import {
useQueryClient,
UseQueryResult,
InfiniteData,
keepPreviousData,
} from "@tanstack/react-query";
import { useAtom, useStore } from "jotai";
import {
@@ -35,6 +36,7 @@ export function useGetTemplatesQuery(params?: { spaceId?: string }) {
initialPageParam: undefined as string | undefined,
getNextPageParam: (lastPage) =>
lastPage.meta.hasNextPage ? lastPage.meta.nextCursor : undefined,
placeholderData: keepPreviousData,
});
}
apps/client/src/features/editor/components/bubble-menu/bubble-menu.tsx
+18 -14
View File
@@ -38,9 +38,11 @@ export interface BubbleMenuItem {
type EditorBubbleMenuProps = Omit<BubbleMenuProps, "children" | "editor"> & {
editor: Editor | null;
templateMode?: boolean;
};
export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
const { templateMode = false } = props;
const { t } = useTranslation();
const [showAiMenu, setShowAiMenu] = useAtom(showAiMenuAtom);
const [showCommentPopup, setShowCommentPopup] = useAtom(showCommentPopupAtom);
@@ -232,8 +234,6 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
))}
</ActionIcon.Group>
<LinkSelector />
<ColorSelector
editor={props.editor}
isOpen={isColorSelectorOpen}
@@ -246,18 +246,22 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
</>
)}
<Tooltip label={t(commentItem.name)} withArrow withinPortal={false}>
<ActionIcon
variant="default"
size="lg"
radius="6px"
aria-label={t(commentItem.name)}
style={{ border: "none" }}
onClick={commentItem.command}
>
<IconMessage size={16} stroke={2} />
</ActionIcon>
</Tooltip>
<LinkSelector />
{!templateMode && (
<Tooltip label={t(commentItem.name)} withArrow withinPortal={false}>
<ActionIcon
variant="default"
size="lg"
radius="6px"
aria-label={t(commentItem.name)}
style={{ border: "none" }}
onClick={commentItem.command}
>
<IconMessage size={16} stroke={2} />
</ActionIcon>
</Tooltip>
)}
</div>
</BubbleMenu>
);
apps/client/src/features/editor/components/fixed-toolbar/fixed-toolbar.tsx
+14 -7
View File
@@ -1,12 +1,12 @@
import { FC } from "react";
import { useAtomValue } from "jotai";
import type { Editor } from "@tiptap/react";
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";
@@ -16,8 +16,17 @@ 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);
type FixedToolbarProps = {
editor?: Editor | null;
templateMode?: boolean;
};
export const FixedToolbar: FC<FixedToolbarProps> = ({
editor: editorProp,
templateMode = false,
}) => {
const editorFromAtom = useAtomValue(pageEditorAtom);
const editor = editorProp ?? editorFromAtom;
const state = useToolbarState(editor);
const workspace = useAtomValue(workspaceAtom);
const isGenerativeAiEnabled = workspace?.settings?.ai?.generative === true;
@@ -48,14 +57,12 @@ export const FixedToolbar: FC = () => {
<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} />
<MediaGroup editor={editor} templateMode={templateMode} />
<div className={classes.divider} />
<QuickInsertsGroup editor={editor} />
<MoreInsertsGroup editor={editor} />
<MoreInsertsGroup editor={editor} templateMode={templateMode} />
<div className={classes.divider} />
<HistoryGroup editor={editor} state={state} />
</div>
apps/client/src/features/editor/components/fixed-toolbar/groups/link-group.tsx
-6
View File
@@ -1,6 +0,0 @@
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/media-group.tsx
+36 -27
View File
@@ -17,6 +17,7 @@ import { uploadPdfAction } from "@/features/editor/components/pdf/upload-pdf-act
interface Props {
editor: Editor;
templateMode?: boolean;
}
type UploadFn = (
@@ -60,7 +61,7 @@ function pickFile(
input.click();
}
export const MediaGroup: FC<Props> = ({ editor }) => {
export const MediaGroup: FC<Props> = ({ editor, templateMode }) => {
const { t } = useTranslation();
return (
@@ -78,24 +79,30 @@ export const MediaGroup: FC<Props> = ({ editor }) => {
</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>
{!templateMode && (
<Menu.Item
leftSection={<IconPhoto size={16} />}
onClick={() => pickFile(editor, "image/*", true, uploadImageAction)}
>
{t("Image")}
</Menu.Item>
)}
{!templateMode && (
<Menu.Item
leftSection={<IconMovie size={16} />}
onClick={() => pickFile(editor, "video/*", true, uploadVideoAction)}
>
{t("Video")}
</Menu.Item>
)}
{!templateMode && (
<Menu.Item
leftSection={<IconMusic size={16} />}
onClick={() => pickFile(editor, "audio/*", true, uploadAudioAction)}
>
{t("Audio")}
</Menu.Item>
)}
<Menu.Item
leftSection={<IconFileTypePdf size={16} />}
onClick={() =>
@@ -104,14 +111,16 @@ export const MediaGroup: FC<Props> = ({ editor }) => {
>
PDF
</Menu.Item>
<Menu.Item
leftSection={<IconPaperclip size={16} />}
onClick={() =>
pickFile(editor, "", true, uploadAttachmentAction, true)
}
>
{t("File attachment")}
</Menu.Item>
{!templateMode && (
<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
+30 -23
View File
@@ -32,16 +32,17 @@ import { useTranslation } from "react-i18next";
interface Props {
editor: Editor;
templateMode?: boolean;
}
export const MoreInsertsGroup: FC<Props> = ({ editor }) => {
const { t } = useTranslation();
export const MoreInsertsGroup: FC<Props> = ({ editor, templateMode }) => {
const { t, i18n } = useTranslation();
const setEmbed = (provider: string) =>
editor.chain().focus().setEmbed({ provider }).run();
const insertDate = () => {
const currentDate = new Date().toLocaleDateString("en-US", {
const currentDate = new Date().toLocaleDateString(i18n.language, {
year: "numeric",
month: "long",
day: "numeric",
@@ -91,14 +92,16 @@ export const MoreInsertsGroup: FC<Props> = ({ editor }) => {
>
{t("Subpages")}
</Menu.Item>
<Menu.Item
leftSection={<IconRotate2 size={16} />}
onClick={() =>
editor.chain().focus().insertTransclusionSource().run()
}
>
{t("Synced block")}
</Menu.Item>
{!templateMode && (
<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>
@@ -115,18 +118,22 @@ export const MoreInsertsGroup: FC<Props> = ({ editor }) => {
>
{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>
{!templateMode && (
<Menu.Item
leftSection={<IconDrawio size={16} />}
onClick={() => editor.chain().focus().setDrawio().run()}
>
Draw.io
</Menu.Item>
)}
{!templateMode && (
<Menu.Item
leftSection={<IconExcalidraw size={16} />}
onClick={() => editor.chain().focus().setExcalidraw().run()}
>
Excalidraw
</Menu.Item>
)}
<Menu.Divider />
<Menu.Label>{t("Embeds")}</Menu.Label>
apps/client/src/features/editor/components/slash-menu/menu-items.ts
+2 -1
View File
@@ -43,6 +43,7 @@ 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 i18n from "@/i18n.ts";
import {
AirtableIcon,
FigmaIcon,
@@ -459,7 +460,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
searchTerms: ["date", "today"],
icon: IconCalendar,
command: ({ editor, range }: CommandProps) => {
const currentDate = new Date().toLocaleDateString("en-US", {
const currentDate = new Date().toLocaleDateString(i18n.language, {
year: "numeric",
month: "long",
day: "numeric",
apps/client/src/features/editor/extensions/extensions.ts
+2 -1
View File
@@ -3,7 +3,7 @@ import { StarterKit } from "@tiptap/starter-kit";
import { Code } from "@tiptap/extension-code";
import { TextAlign } from "@tiptap/extension-text-align";
import { TaskList, TaskItem } from "@tiptap/extension-list";
import { Placeholder, CharacterCount } from "@tiptap/extensions";
import { Placeholder, CharacterCount, UndoRedo } from "@tiptap/extensions";
import { Superscript } from "@tiptap/extension-superscript";
import SubScript from "@tiptap/extension-subscript";
import { Typography } from "@tiptap/extension-typography";
@@ -437,6 +437,7 @@ const TemplateSlashCommand = Command.configure({
export const templateExtensions = [
...mainExtensions.filter((ext: any) => ext !== SlashCommand),
TemplateSlashCommand,
UndoRedo,
] as any;
export const collabExtensions: CollabExtensions = (provider, user) => [
apps/client/src/features/editor/page-editor.tsx
+20 -1
View File
@@ -14,6 +14,7 @@ import {
WebSocketStatus,
HocuspocusProviderWebsocket,
onSyncedParameters,
onStatelessParameters,
} from "@hocuspocus/provider";
import {
Editor,
@@ -145,6 +146,24 @@ export default function PageEditor({
const onSyncedHandler = (event: onSyncedParameters) => {
setIsRemoteSynced(event.state);
};
const onStatelessHandler = ({ payload }: onStatelessParameters) => {
try {
const message = JSON.parse(payload);
if (message?.type !== "page.updated" || !message.updatedAt) return;
const pageData = queryClient.getQueryData<IPage>(["pages", slugId]);
if (pageData) {
queryClient.setQueryData(["pages", slugId], {
...pageData,
updatedAt: message.updatedAt,
...(message.lastUpdatedBy && {
lastUpdatedBy: message.lastUpdatedBy,
}),
});
}
} catch {
// ignore unrelated stateless messages
}
};
const onAuthenticationFailedHandler = () => {
const payload = jwtDecode(collabQuery?.token);
const now = Date.now().valueOf() / 1000;
@@ -169,6 +188,7 @@ export default function PageEditor({
onAuthenticationFailed: onAuthenticationFailedHandler,
onStatus: onStatusHandler,
onSynced: onSyncedHandler,
onStateless: onStatelessHandler,
});
local.on("synced", onLocalSyncedHandler);
@@ -318,7 +338,6 @@ export default function PageEditor({
queryClient.setQueryData(["pages", slugId], {
...pageData,
content: newContent,
updatedAt: new Date(),
});
}
}, 3000);
apps/client/src/features/label/utils/format-label-date.ts
+17 -5
View File
@@ -1,15 +1,27 @@
import { format, isThisYear, isToday, isYesterday } from "date-fns";
import { isThisYear, isToday, isYesterday } from "date-fns";
import i18n from "@/i18n.ts";
import { formatLocalized, getDateFnsLocale } from "@/lib/date-locale.ts";
export function formatLabelListDate(date: Date): string {
const locale = getDateFnsLocale();
if (isToday(date)) {
return i18n.t("Today, {{time}}", { time: format(date, "h:mma") });
return i18n.t("Today, {{time}}", {
time: formatLocalized(date, "h:mma", "p", locale),
});
}
if (isYesterday(date)) {
return i18n.t("Yesterday, {{time}}", { time: format(date, "h:mma") });
return i18n.t("Yesterday, {{time}}", {
time: formatLocalized(date, "h:mma", "p", locale),
});
}
if (isThisYear(date)) {
return format(date, "MMM dd");
if (locale.code?.startsWith("en")) {
return formatLocalized(date, "MMM dd", "MMM dd", locale);
}
return new Intl.DateTimeFormat(i18n.language, {
month: "short",
day: "numeric",
}).format(date);
}
return format(date, "MMM dd, yyyy");
return formatLocalized(date, "MMM dd, yyyy", "PP", locale);
}
apps/client/src/features/notification/notification.utils.ts
+4 -3
View File
@@ -1,3 +1,4 @@
import i18n from "@/i18n.ts";
import { INotification } from "./types/notification.types";
export function formatRelativeTime(dateStr: string): string {
@@ -8,15 +9,15 @@ export function formatRelativeTime(dateStr: string): string {
const diffHours = Math.floor(diffMs / 3_600_000);
const diffDays = Math.floor(diffMs / 86_400_000);
if (diffMin < 1) return "now";
if (diffMin < 1) return i18n.t("now");
if (diffMin < 60) return `${diffMin}m`;
if (diffHours < 24) return `${diffHours}h`;
if (diffDays < 7) return `${diffDays}d`;
return date.toLocaleDateString(undefined, {
return new Intl.DateTimeFormat(i18n.language, {
month: "short",
day: "numeric",
});
}).format(date);
}
type TimeGroup = "today" | "yesterday" | "this_week" | "older";
apps/client/src/features/page-details/components/page-details-aside.tsx
+4 -5
View File
@@ -16,7 +16,8 @@ import { usePageQuery } from "@/features/page/queries/page-query.ts";
import { pageEditorAtom } from "@/features/editor/atoms/editor-atoms.ts";
import { useBacklinksCountQuery } from "@/features/page-details/queries/backlinks-query.ts";
import { BacklinksModal } from "./backlinks-modal";
import { formattedDate, timeAgo } from "@/lib/time.ts";
import { formattedDate } from "@/lib/time.ts";
import { useTimeAgo } from "@/hooks/use-time-ago.tsx";
import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
import { LabelsSection } from "@/features/label/components/labels-section.tsx";
@@ -139,6 +140,7 @@ function StatsSection({
updatedAt: Date | string;
}) {
const { t } = useTranslation();
const lastUpdated = useTimeAgo(updatedAt);
return (
<Stack gap="xs">
<Text size="xs" fw={500} c="dimmed">
@@ -150,10 +152,7 @@ function StatsSection({
label={t("Created")}
value={formattedDate(new Date(createdAt))}
/>
<StatRow
label={t("Last updated")}
value={timeAgo(new Date(updatedAt))}
/>
<StatRow label={t("Last updated")} value={lastUpdated} />
</Stack>
);
}
apps/client/src/features/share/components/share-list.tsx
+8 -2
View File
@@ -7,8 +7,8 @@ import Paginate from "@/components/common/paginate.tsx";
import { useCursorPaginate } from "@/hooks/use-cursor-paginate";
import { useGetSharesQuery } from "@/features/share/queries/share-query.ts";
import { ISharedItem } from "@/features/share/types/share.types.ts";
import { format } from "date-fns";
import ShareActionMenu from "@/features/share/components/share-action-menu.tsx";
import { formatLocalized, useDateFnsLocale } from "@/lib/date-locale.ts";
import { buildSharedPageUrl } from "@/features/page/page.utils.ts";
import { getPageIcon } from "@/lib";
import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
@@ -20,6 +20,7 @@ export default function ShareList() {
const { t } = useTranslation();
const { cursor, goNext, goPrev } = useCursorPaginate();
const { data, isLoading } = useGetSharesQuery({ cursor });
const locale = useDateFnsLocale();
if (!isLoading && data?.items.length === 0) {
return <EmptyState icon={IconWorld} title={t("No shared pages")} />;
@@ -81,7 +82,12 @@ export default function ShareList() {
</Table.Td>
<Table.Td>
<Text fz="sm" style={{ whiteSpace: "nowrap" }}>
{format(new Date(share.createdAt), "MMM dd, yyyy")}
{formatLocalized(
share.createdAt,
"MMM dd, yyyy",
"PP",
locale,
)}
</Text>
</Table.Td>
<Table.Td>
apps/client/src/lib/date-locale.ts
+62
View File
@@ -0,0 +1,62 @@
import { format as dateFnsFormat, type Locale } from "date-fns";
import {
de,
enUS,
es,
fr,
it,
ja,
ko,
nl,
ptBR,
ru,
uk,
zhCN,
} from "date-fns/locale";
import { useTranslation } from "react-i18next";
import i18n from "@/i18n.ts";
const LOCALE_MAP: Record<string, Locale> = {
"de-DE": de,
"en-US": enUS,
"es-ES": es,
"fr-FR": fr,
"it-IT": it,
"ja-JP": ja,
"ko-KR": ko,
"nl-NL": nl,
"pt-BR": ptBR,
"ru-RU": ru,
"uk-UA": uk,
"zh-CN": zhCN,
};
export function getDateFnsLocale(language?: string): Locale {
const lang = language ?? i18n.language ?? "en-US";
return LOCALE_MAP[lang] ?? LOCALE_MAP[lang.split("-")[0]] ?? enUS;
}
export function useDateFnsLocale(): Locale {
const { i18n: instance } = useTranslation();
return getDateFnsLocale(instance.language);
}
function isEnglishLocale(locale: Locale): boolean {
return locale.code === "en-US" || locale.code?.startsWith("en") === true;
}
/**
* Picks `enUSPattern` for the English locale and `localizedPattern` for every
* other locale. Keeps existing en-US output byte-identical while letting other
* languages use date-fns localized format tokens (P, PP, p, PPp, …).
*/
export function formatLocalized(
date: Date | number | string,
enUSPattern: string,
localizedPattern: string,
locale?: Locale,
): string {
const effective = locale ?? getDateFnsLocale();
const pattern = isEnglishLocale(effective) ? enUSPattern : localizedPattern;
return dateFnsFormat(new Date(date), pattern, { locale: effective });
}
apps/client/src/lib/time.ts
+14 -6
View File
@@ -1,17 +1,25 @@
import { formatDistanceStrict } from "date-fns";
import { format, isToday, isYesterday } from "date-fns";
import { formatDistanceStrict, isToday, isYesterday } from "date-fns";
import i18n from "@/i18n.ts";
import { formatLocalized, getDateFnsLocale } from "@/lib/date-locale.ts";
export function timeAgo(date: Date) {
return formatDistanceStrict(new Date(date), new Date(), { addSuffix: true });
return formatDistanceStrict(new Date(date), new Date(), {
addSuffix: true,
locale: getDateFnsLocale(),
});
}
export function formattedDate(date: Date) {
const locale = getDateFnsLocale();
if (isToday(date)) {
return i18n.t("Today, {{time}}", { time: format(date, "h:mma") });
return i18n.t("Today, {{time}}", {
time: formatLocalized(date, "h:mma", "p", locale),
});
} else if (isYesterday(date)) {
return i18n.t("Yesterday, {{time}}", { time: format(date, "h:mma") });
return i18n.t("Yesterday, {{time}}", {
time: formatLocalized(date, "h:mma", "p", locale),
});
} else {
return format(date, "MMM dd, yyyy, h:mma");
return formatLocalized(date, "MMM dd, yyyy, h:mma", "PPp", locale);
}
}
apps/server/src/collaboration/extensions/persistence.extension.ts
+15
View File
@@ -165,6 +165,21 @@ export class PersistenceExtension implements Extension {
}
if (page) {
document.broadcastStateless(
JSON.stringify({
type: 'page.updated',
updatedAt: new Date().toISOString(),
lastUpdatedById: context?.user?.id,
lastUpdatedBy: context?.user
? {
id: context.user?.id,
name: context.user?.name,
avatarUrl: context.user?.avatarUrl,
}
: undefined,
}),
);
await this.syncTransclusion(pageId, page.workspaceId, tiptapJson);
}
apps/server/src/common/helpers/types/permission.ts
+5
View File
@@ -4,6 +4,11 @@ export enum UserRole {
MEMBER = 'member',
}
export enum InviteUserRole {
ADMIN = 'admin', // can have owner permissions but cannot delete workspace
MEMBER = 'member',
}
export enum SpaceRole {
ADMIN = 'admin', // can manage space settings, members, and delete space
WRITER = 'writer', // can read and write pages in space
apps/server/src/core/page/services/page.service.ts
+1
View File
@@ -310,6 +310,7 @@ export class PageService {
expression: 'position',
direction: 'asc',
orderModifier: (ob) => ob.collate('C').asc(),
cursorExpression: sql`position collate "C"`,
},
{ expression: 'id', direction: 'asc' },
],
apps/server/src/core/workspace/dto/invitation.dto.ts
+2 -2
View File
@@ -11,7 +11,7 @@ import {
MaxLength,
MinLength,
} from 'class-validator';
import { UserRole } from '../../../common/helpers/types/permission';
import { InviteUserRole } from '../../../common/helpers/types/permission';
import { NoUrls } from '../../../common/validators/no-urls.validator';
export class InviteUserDto {
@@ -32,7 +32,7 @@ export class InviteUserDto {
@IsUUID('all', { each: true })
groupIds: string[];
@IsEnum(UserRole)
@IsEnum(InviteUserRole)
role: string;
}
apps/server/src/core/workspace/services/workspace-invitation.service.ts
+6
View File
@@ -1,5 +1,6 @@
import {
BadRequestException,
ForbiddenException,
Inject,
Injectable,
Logger,
@@ -40,6 +41,7 @@ import {
AUDIT_SERVICE,
IAuditService,
} from '../../../integrations/audit/audit.service';
import { isAdminActingOnOwner } from '../workspace.util';
@Injectable()
export class WorkspaceInvitationService {
@@ -119,6 +121,10 @@ export class WorkspaceInvitationService {
): Promise<void> {
const { emails, role, groupIds } = inviteUserDto;
if (isAdminActingOnOwner(authUser.role, role)) {
throw new ForbiddenException();
}
let invites: WorkspaceInvitation[] = [];
try {
apps/server/src/core/workspace/services/workspace.service.ts
+6 -5
View File
@@ -30,6 +30,7 @@ import { DomainService } from '../../../integrations/environment/domain.service'
import { jsonArrayFrom } from 'kysely/helpers/postgres';
import { addDays } from 'date-fns';
import { DISALLOWED_HOSTNAMES, WorkspaceStatus } from '../workspace.constants';
import { isAdminActingOnOwner } from '../workspace.util';
import { v4 } from 'uuid';
import { InjectQueue } from '@nestjs/bullmq';
import { QueueJob, QueueName } from '../../../integrations/queue/constants';
@@ -590,8 +591,8 @@ export class WorkspaceService {
// prevent ADMIN from managing OWNER role
if (
(authUser.role === UserRole.ADMIN && newRole === UserRole.OWNER) ||
(authUser.role === UserRole.ADMIN && user.role === UserRole.OWNER)
isAdminActingOnOwner(authUser.role, newRole) ||
isAdminActingOnOwner(authUser.role, user.role)
) {
throw new ForbiddenException();
}
@@ -695,7 +696,7 @@ export class WorkspaceService {
throw new BadRequestException('You cannot deactivate yourself');
}
if (authUser.role === UserRole.ADMIN && user.role === UserRole.OWNER) {
if (isAdminActingOnOwner(authUser.role, user.role)) {
throw new BadRequestException(
'You cannot deactivate a user with owner role',
);
@@ -753,7 +754,7 @@ export class WorkspaceService {
throw new BadRequestException('User is not deactivated');
}
if (authUser.role === UserRole.ADMIN && user.role === UserRole.OWNER) {
if (isAdminActingOnOwner(authUser.role, user.role)) {
throw new BadRequestException(
'You cannot activate a user with owner role',
);
@@ -805,7 +806,7 @@ export class WorkspaceService {
throw new BadRequestException('You cannot delete yourself');
}
if (authUser.role === UserRole.ADMIN && user.role === UserRole.OWNER) {
if (isAdminActingOnOwner(authUser.role, user.role)) {
throw new BadRequestException('You cannot delete a user with owner role');
}
apps/server/src/core/workspace/workspace.util.ts
+8
View File
@@ -0,0 +1,8 @@
import { UserRole } from '../../common/helpers/types/permission';
export function isAdminActingOnOwner(
authUserRole: string,
targetRole: string,
): boolean {
return authUserRole === UserRole.ADMIN && targetRole === UserRole.OWNER;
}
apps/server/src/database/pagination/cursor-pagination.ts
+5 -2
View File
@@ -14,12 +14,14 @@ type SortField<DB, TB extends keyof DB, O> =
| (StringReference<DB, TB> & `${string}.${keyof O & string}`);
direction: OrderByDirection;
orderModifier?: OrderByModifiers;
cursorExpression?: ReferenceExpression<DB, TB>;
key?: keyof O & string;
}
| {
expression: ReferenceExpression<DB, TB>;
direction: OrderByDirection;
orderModifier?: OrderByModifiers;
cursorExpression?: ReferenceExpression<DB, TB>;
key: keyof O & string;
};
@@ -202,11 +204,12 @@ export async function executeWithCursorPagination<
const comparison = field.direction === defaultDirection ? '>' : '<';
const value = cursor[field.key as keyof typeof cursor];
const compareExpr = field.cursorExpression ?? field.expression;
const conditions = [eb(field.expression, comparison, value)];
const conditions = [eb(compareExpr, comparison, value)];
if (expression) {
conditions.push(and([eb(field.expression, '=', value), expression]));
conditions.push(and([eb(compareExpr, '=', value), expression]));
}
expression = or(conditions);