fix: editor improvements (#583)

* delete unused component

* return page prosemirror content

* prefetch pages

* use prosemirro json content on editor

* cache page query with id and slug as key

* Show notice on collaboration disconnection

* enable scroll while typing

* enable immediatelyRender

* avoid image break in PDF print

* Comment editor rendering props

apps/client/src/features/page/tree/components/space-tree.tsx

@@ -35,6 +35,7 @@ import {
 import { SpaceTreeNode } from "@/features/page/tree/types.ts";
 import {
   getPageBreadcrumbs,
+  getPageById,
   getSidebarPages,
 } from "@/features/page/services/page-service.ts";
 import { IPage, SidebarPagesParams } from "@/features/page/types/page.types.ts";
@@ -232,6 +233,24 @@ function Node({ node, style, dragHandle, tree }: NodeRendererProps<any>) {
   const [treeData, setTreeData] = useAtom(treeDataAtom);
   const emit = useQueryEmit();
   const { spaceSlug } = useParams();
+  const timerRef = useRef(null);
+
+  const prefetchPage = () => {
+    timerRef.current = setTimeout(() => {
+      queryClient.prefetchQuery({
+        queryKey: ["pages", node.data.slugId],
+        queryFn: () => getPageById({ pageId: node.data.slugId }),
+        staleTime: 5 * 60 * 1000,
+      });
+    }, 150);
+  };
+
+  const cancelPagePrefetch = () => {
+    if (timerRef.current) {
+      window.clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  };
 
   async function handleLoadChildren(node: NodeApi<SpaceTreeNode>) {
     if (!node.data.hasChildren) return;
@@ -330,6 +349,8 @@ function Node({ node, style, dragHandle, tree }: NodeRendererProps<any>) {
         className={clsx(classes.node, node.state)}
         ref={dragHandle}
         onClick={handleClick}
+        onMouseEnter={prefetchPage}
+        onMouseLeave={cancelPagePrefetch}
       >
         <PageArrow node={node} onExpandTree={() => handleLoadChildren(node)} />
 

apps/client/src/features/page/tree/components/tree-collapse.module.css

@@ -1,27 +0,0 @@
-.control {
-    font-weight: 500;
-    display: block;
-    width: 100%;
-    padding: var(--mantine-spacing-xs) var(--mantine-spacing-xs);
-    color: var(--mantine-color-text);
-    font-size: var(--mantine-font-size-sm);
-
-    @mixin hover {
-        background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
-        color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));
-    }
-}
-
-.item {
-    display: block;
-    text-decoration: none;
-    padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
-    padding-left: 4px;
-    margin-left: var(--mantine-spacing-sm);
-    font-size: var(--mantine-font-size-sm);
-    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
-}
-
-.chevron {
-    transition: transform 200ms ease;
-}

apps/client/src/features/page/tree/components/tree-collapse.tsx

@@ -1,59 +0,0 @@
-import React, { ReactNode, useState } from "react";
-import {
-  Group,
-  Box,
-  Collapse,
-  ThemeIcon,
-  UnstyledButton,
-  rem,
-} from "@mantine/core";
-import { IconChevronRight } from "@tabler/icons-react";
-import classes from "./tree-collapse.module.css";
-
-interface TreeCollapseProps {
-  icon?: React.FC<any>;
-  label: string;
-  initiallyOpened?: boolean;
-  children: ReactNode;
-}
-
-export function TreeCollapse({
-  icon: Icon,
-  label,
-  initiallyOpened,
-  children,
-}: TreeCollapseProps) {
-  const [opened, setOpened] = useState(initiallyOpened || false);
-
-  return (
-    <>
-      <UnstyledButton
-        onClick={() => setOpened((o) => !o)}
-        className={classes.control}
-      >
-        <Group justify="space-between" gap={0}>
-          <Box style={{ display: "flex", alignItems: "center" }}>
-            <ThemeIcon variant="light" size={20}>
-              <Icon style={{ width: rem(18), height: rem(18) }} />
-            </ThemeIcon>
-            <Box ml="md">{label}</Box>
-          </Box>
-
-          <IconChevronRight
-            className={classes.chevron}
-            stroke={1.5}
-            style={{
-              width: rem(16),
-              height: rem(16),
-              transform: opened ? "rotate(90deg)" : "none",
-            }}
-          />
-        </Group>
-      </UnstyledButton>
-
-      <Collapse in={opened}>
-        <div className={classes.item}>{children}</div>
-      </Collapse>
-    </>
-  );
-}