bug fixes (#2250)

* 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

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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>