mirror of
https://github.com/docmost/docmost.git
synced 2026-05-14 20:54:07 +08:00
Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Philipinho
|
b246f3311d | ||
|
Philipinho
|
159920bc84 | ||
|
Philipinho
|
09f2b84988 | ||
|
Philipinho
|
c5ebc29d6b | ||
|
Philipinho
|
b6418a4e74 | ||
|
Philipinho
|
6c966651b0 | ||
|
Philipinho
|
94ecc98617 |
+58
-69
@@ -7,89 +7,78 @@
|
||||
"build": "tsc && vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview",
|
||||
"format": "prettier --write \"src/**/*.tsx\" \"src/**/*.ts\"",
|
||||
"test": "vitest run",
|
||||
"test:watch": "vitest"
|
||||
"format": "prettier --write \"src/**/*.tsx\" \"src/**/*.ts\""
|
||||
},
|
||||
"dependencies": {
|
||||
"@atlaskit/pragmatic-drag-and-drop": "1.8.1",
|
||||
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "2.1.5",
|
||||
"@atlaskit/pragmatic-drag-and-drop-flourish": "2.0.15",
|
||||
"@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
|
||||
"@atlaskit/pragmatic-drag-and-drop-live-region": "1.3.4",
|
||||
"@casl/react": "5.0.1",
|
||||
"@casl/react": "^5.0.1",
|
||||
"@docmost/editor-ext": "workspace:*",
|
||||
"@emoji-mart/data": "^1.2.1",
|
||||
"@emoji-mart/react": "^1.1.1",
|
||||
"@excalidraw/excalidraw": "0.18.0-3a5ef40",
|
||||
"@mantine/core": "8.3.18",
|
||||
"@mantine/dates": "8.3.18",
|
||||
"@mantine/form": "8.3.18",
|
||||
"@mantine/hooks": "8.3.18",
|
||||
"@mantine/modals": "8.3.18",
|
||||
"@mantine/notifications": "8.3.18",
|
||||
"@mantine/spotlight": "8.3.18",
|
||||
"@slidoapp/emoji-mart": "5.8.7",
|
||||
"@slidoapp/emoji-mart-data": "1.2.4",
|
||||
"@slidoapp/emoji-mart-react": "1.1.5",
|
||||
"@tabler/icons-react": "3.40.0",
|
||||
"@mantine/core": "^8.3.18",
|
||||
"@mantine/dates": "^8.3.18",
|
||||
"@mantine/form": "^8.3.18",
|
||||
"@mantine/hooks": "^8.3.18",
|
||||
"@mantine/modals": "^8.3.18",
|
||||
"@mantine/notifications": "^8.3.18",
|
||||
"@mantine/spotlight": "^8.3.18",
|
||||
"@tabler/icons-react": "^3.40.0",
|
||||
"@tanstack/react-query": "5.90.17",
|
||||
"@tanstack/react-virtual": "3.13.24",
|
||||
"alfaaz": "1.1.0",
|
||||
"axios": "1.16.0",
|
||||
"blueimp-load-image": "5.16.0",
|
||||
"clsx": "2.1.1",
|
||||
"file-saver": "2.0.5",
|
||||
"highlightjs-sap-abap": "0.3.0",
|
||||
"alfaaz": "^1.1.0",
|
||||
"axios": "1.15.0",
|
||||
"blueimp-load-image": "^5.16.0",
|
||||
"clsx": "^2.1.1",
|
||||
"emoji-mart": "^5.6.0",
|
||||
"file-saver": "^2.0.5",
|
||||
"highlightjs-sap-abap": "^0.3.0",
|
||||
"i18next": "25.10.1",
|
||||
"i18next-http-backend": "3.0.6",
|
||||
"jotai": "2.18.1",
|
||||
"jotai-optics": "0.4.0",
|
||||
"js-cookie": "3.0.5",
|
||||
"jwt-decode": "4.0.0",
|
||||
"jotai": "^2.18.1",
|
||||
"jotai-optics": "^0.4.0",
|
||||
"js-cookie": "^3.0.5",
|
||||
"jwt-decode": "^4.0.0",
|
||||
"katex": "0.16.40",
|
||||
"lowlight": "3.3.0",
|
||||
"mantine-form-zod-resolver": "1.3.0",
|
||||
"mermaid": "11.15.0",
|
||||
"mitt": "3.0.1",
|
||||
"lowlight": "^3.3.0",
|
||||
"mantine-form-zod-resolver": "^1.3.0",
|
||||
"mermaid": "^11.13.0",
|
||||
"mitt": "^3.0.1",
|
||||
"posthog-js": "1.372.2",
|
||||
"react": "18.3.1",
|
||||
"react": "^18.3.1",
|
||||
"react-arborist": "3.4.0",
|
||||
"react-clear-modal": "^2.0.18",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-drawio": "1.0.7",
|
||||
"react-error-boundary": "6.1.1",
|
||||
"react-helmet-async": "3.0.0",
|
||||
"react-drawio": "^1.0.7",
|
||||
"react-error-boundary": "^6.1.1",
|
||||
"react-helmet-async": "^3.0.0",
|
||||
"react-i18next": "16.5.8",
|
||||
"react-router-dom": "7.13.1",
|
||||
"semver": "7.7.4",
|
||||
"socket.io-client": "4.8.3",
|
||||
"zod": "4.3.6"
|
||||
"react-router-dom": "^7.13.1",
|
||||
"semver": "^7.7.4",
|
||||
"socket.io-client": "^4.8.3",
|
||||
"zod": "^4.3.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "9.28.0",
|
||||
"@tanstack/eslint-plugin-query": "5.94.4",
|
||||
"@testing-library/jest-dom": "6.6.0",
|
||||
"@testing-library/react": "16.1.0",
|
||||
"@types/blueimp-load-image": "5.16.6",
|
||||
"@types/file-saver": "2.0.7",
|
||||
"@types/js-cookie": "3.0.6",
|
||||
"@types/katex": "0.16.8",
|
||||
"@eslint/js": "^9.28.0",
|
||||
"@tanstack/eslint-plugin-query": "^5.94.4",
|
||||
"@types/blueimp-load-image": "^5.16.6",
|
||||
"@types/file-saver": "^2.0.7",
|
||||
"@types/js-cookie": "^3.0.6",
|
||||
"@types/katex": "^0.16.8",
|
||||
"@types/node": "22.19.1",
|
||||
"@types/react": "18.3.12",
|
||||
"@types/react-dom": "18.3.1",
|
||||
"@vitejs/plugin-react": "6.0.1",
|
||||
"eslint": "9.28.0",
|
||||
"eslint-plugin-react": "7.37.5",
|
||||
"eslint-plugin-react-hooks": "7.0.1",
|
||||
"eslint-plugin-react-refresh": "0.5.2",
|
||||
"globals": "15.13.0",
|
||||
"jsdom": "25.0.0",
|
||||
"optics-ts": "2.4.1",
|
||||
"postcss": "8.5.14",
|
||||
"postcss-preset-mantine": "1.18.0",
|
||||
"postcss-simple-vars": "7.0.1",
|
||||
"prettier": "3.8.1",
|
||||
"typescript": "5.9.3",
|
||||
"typescript-eslint": "8.57.1",
|
||||
"vite": "8.0.5",
|
||||
"vitest": "4.1.6"
|
||||
"@types/react": "^18.3.12",
|
||||
"@types/react-dom": "^18.3.1",
|
||||
"@vitejs/plugin-react": "^6.0.1",
|
||||
"eslint": "^9.28.0",
|
||||
"eslint-plugin-react": "^7.37.5",
|
||||
"eslint-plugin-react-hooks": "^7.0.1",
|
||||
"eslint-plugin-react-refresh": "^0.5.2",
|
||||
"globals": "^15.13.0",
|
||||
"optics-ts": "^2.4.1",
|
||||
"postcss": "^8.5.12",
|
||||
"postcss-preset-mantine": "^1.18.0",
|
||||
"postcss-simple-vars": "^7.0.1",
|
||||
"prettier": "^3.8.1",
|
||||
"typescript": "^5.9.3",
|
||||
"typescript-eslint": "^8.57.1",
|
||||
"vite": "8.0.5"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -286,19 +286,6 @@
|
||||
"Add row above": "Add row above",
|
||||
"Add row below": "Add row below",
|
||||
"Delete table": "Delete table",
|
||||
"Add column left": "Add column left",
|
||||
"Add column right": "Add column right",
|
||||
"Clear cell": "Clear cell",
|
||||
"Clear cells": "Clear cells",
|
||||
"Toggle header cell": "Toggle header cell",
|
||||
"Toggle header column": "Toggle header column",
|
||||
"Toggle header row": "Toggle header row",
|
||||
"Move column left": "Move column left",
|
||||
"Move column right": "Move column right",
|
||||
"Move row down": "Move row down",
|
||||
"Move row up": "Move row up",
|
||||
"Sort A → Z": "Sort A → Z",
|
||||
"Sort Z → A": "Sort Z → A",
|
||||
"Info": "Info",
|
||||
"Note": "Note",
|
||||
"Success": "Success",
|
||||
@@ -945,6 +932,7 @@
|
||||
"Settings navigation": "Settings navigation",
|
||||
"AI navigation": "AI navigation",
|
||||
"Breadcrumb": "Breadcrumb",
|
||||
"Skip to main content": "Skip to main content"
|
||||
"Synced block": "Synced block",
|
||||
"Create a block that stays in sync across pages.": "Create a block that stays in sync across pages.",
|
||||
"Editing original": "Editing original",
|
||||
@@ -958,60 +946,5 @@
|
||||
"No pages": "No pages",
|
||||
"The original synced block no longer exists": "The original synced block no longer exists",
|
||||
"You don't have access to this synced block": "You don't have access to this synced block",
|
||||
"Failed to load this synced block": "Failed to load this synced block",
|
||||
"Fixed editor toolbar": "Fixed editor toolbar",
|
||||
"Show a formatting toolbar above the editor with quick access to common actions.": "Show a formatting toolbar above the editor with quick access to common actions.",
|
||||
"Toggle fixed editor toolbar": "Toggle fixed editor toolbar",
|
||||
"Normal text": "Normal text",
|
||||
"More inline formatting": "More inline formatting",
|
||||
"Subscript": "Subscript",
|
||||
"Superscript": "Superscript",
|
||||
"Inline code": "Inline code",
|
||||
"Insert media": "Insert media",
|
||||
"Mention": "Mention",
|
||||
"Emoji": "Emoji",
|
||||
"Columns": "Columns",
|
||||
"More inserts": "More inserts",
|
||||
"Embeds": "Embeds",
|
||||
"Diagrams": "Diagrams",
|
||||
"Advanced": "Advanced",
|
||||
"Utility": "Utility",
|
||||
"Decrease indent": "Decrease indent",
|
||||
"Increase indent": "Increase indent",
|
||||
"Clear formatting": "Clear formatting",
|
||||
"Code block": "Code block",
|
||||
"Experimental": "Experimental",
|
||||
"Strikethrough": "Strikethrough",
|
||||
"Undo": "Undo",
|
||||
"Redo": "Redo",
|
||||
"Backlinks": "Backlinks",
|
||||
"Last updated by": "Last updated by",
|
||||
"Last updated": "Last updated",
|
||||
"Stats": "Stats",
|
||||
"Word count": "Word count",
|
||||
"Characters": "Characters",
|
||||
"Incoming links": "Incoming links",
|
||||
"Outgoing links": "Outgoing links",
|
||||
"Incoming links ({{count}})": "Incoming links ({{count}})",
|
||||
"Outgoing links ({{count}})": "Outgoing links ({{count}})",
|
||||
"No pages link here yet.": "No pages link here yet.",
|
||||
"This page doesn't link to other pages yet.": "This page doesn't link to other pages yet.",
|
||||
"Verified until {{date}}": "Verified until {{date}}",
|
||||
"Labels": "Labels",
|
||||
"Add label": "Add label",
|
||||
"No labels yet": "No labels yet",
|
||||
"Already added": "Already added",
|
||||
"Invalid label name": "Invalid label name",
|
||||
"No matches": "No matches",
|
||||
"Search or create…": "Search or create…",
|
||||
"Remove label {{name}}": "Remove label {{name}}",
|
||||
"Failed to add label": "Failed to add label",
|
||||
"Failed to remove label": "Failed to remove label",
|
||||
"No pages with this label": "No pages with this label",
|
||||
"Pages tagged with this label will appear here.": "Pages tagged with this label will appear here.",
|
||||
"No pages match your search.": "No pages match your search.",
|
||||
"Updated {{date}}": "Updated {{date}}",
|
||||
"Cell actions": "Cell actions",
|
||||
"Column actions": "Column actions",
|
||||
"Row actions": "Row actions"
|
||||
"Failed to load this synced block": "Failed to load this synced block"
|
||||
}
|
||||
|
||||
@@ -45,7 +45,6 @@ import TemplateEditor from "@/ee/template/pages/template-editor";
|
||||
import FavoritesPage from "@/pages/favorites/favorites-page";
|
||||
import AiChat from "@/ee/ai-chat/pages/ai-chat.tsx";
|
||||
import VerifyEmail from "@/ee/pages/verify-email.tsx";
|
||||
import LabelPage from "@/pages/label/label-page";
|
||||
|
||||
export default function App() {
|
||||
const { t } = useTranslation();
|
||||
@@ -93,7 +92,6 @@ export default function App() {
|
||||
<Route path={"/ai/chat/:chatId"} element={<AiChat />} />
|
||||
<Route path={"/spaces"} element={<SpacesPage />} />
|
||||
<Route path={"/favorites"} element={<FavoritesPage />} />
|
||||
<Route path={"/labels/:labelName"} element={<LabelPage />} />
|
||||
<Route path={"/templates"} element={<TemplateList />} />
|
||||
<Route
|
||||
path={"/templates/:templateId"}
|
||||
|
||||
@@ -27,3 +27,23 @@
|
||||
background: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-5))
|
||||
}
|
||||
}
|
||||
|
||||
.skipLink {
|
||||
position: fixed;
|
||||
left: 8px;
|
||||
top: 8px;
|
||||
padding: 8px 12px;
|
||||
background: var(--mantine-color-blue-6);
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
text-decoration: none;
|
||||
z-index: 1000;
|
||||
transform: translateY(-150%);
|
||||
|
||||
&:focus {
|
||||
transform: translateY(0);
|
||||
outline: 2px solid var(--mantine-color-blue-3);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -8,7 +8,6 @@ import { TableOfContents } from "@/features/editor/components/table-of-contents/
|
||||
import { useAtomValue } from "jotai";
|
||||
import { pageEditorAtom } from "@/features/editor/atoms/editor-atoms.ts";
|
||||
import AsideChatPanel from "@/ee/ai-chat/components/aside-chat-panel";
|
||||
import { PageDetailsAside } from "@/features/page-details/components/page-details-aside.tsx";
|
||||
|
||||
export default function Aside() {
|
||||
const [{ tab }] = useAtom(asideStateAtom);
|
||||
@@ -31,10 +30,6 @@ export default function Aside() {
|
||||
component = <AsideChatPanel />;
|
||||
title = "AI Chat";
|
||||
break;
|
||||
case "details":
|
||||
component = <PageDetailsAside />;
|
||||
title = "Details";
|
||||
break;
|
||||
default:
|
||||
component = null;
|
||||
title = null;
|
||||
|
||||
@@ -81,7 +81,11 @@ export default function GlobalAppShell({
|
||||
const showGlobalSidebar = !isSpaceRoute && !isSettingsRoute && !isAiRoute;
|
||||
|
||||
return (
|
||||
<AppShell
|
||||
<>
|
||||
<a href="#main-content" className={classes.skipLink}>
|
||||
{t("Skip to main content")}
|
||||
</a>
|
||||
<AppShell
|
||||
header={{ height: 45 }}
|
||||
navbar={{
|
||||
width: isSpaceRoute ? sidebarWidth : 300,
|
||||
@@ -147,14 +151,13 @@ export default function GlobalAppShell({
|
||||
? t("Table of contents")
|
||||
: asideTab === "chat"
|
||||
? t("AI Chat")
|
||||
: asideTab === "details"
|
||||
? t("Details")
|
||||
: undefined
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<Aside />
|
||||
</AppShell.Aside>
|
||||
)}
|
||||
</AppShell>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -10,7 +10,6 @@ export const desktopSidebarAtom = atomWithWebStorage<boolean>(
|
||||
|
||||
export const desktopAsideAtom = atom<boolean>(false);
|
||||
|
||||
// Valid `tab` values: "" | "comments" | "toc" | "chat" | "details"
|
||||
type AsideStateType = {
|
||||
tab: string;
|
||||
isAsideOpen: boolean;
|
||||
|
||||
@@ -29,7 +29,7 @@ export default function AppVersion() {
|
||||
>
|
||||
<Indicator
|
||||
label={t("New update")}
|
||||
color="gray"
|
||||
color="dark"
|
||||
inline
|
||||
size={16}
|
||||
position="middle-end"
|
||||
|
||||
@@ -42,11 +42,6 @@ function pickInitialsColor(name: string) {
|
||||
return SAFE_INITIALS_COLORS[hashName(name) % SAFE_INITIALS_COLORS.length];
|
||||
}
|
||||
|
||||
function sanitizeInitialsSource(name: string) {
|
||||
const sanitized = name.replace(/[^\p{L}\p{N}\s]/gu, " ").trim();
|
||||
return sanitized || name;
|
||||
}
|
||||
|
||||
export const CustomAvatar = React.forwardRef<
|
||||
HTMLInputElement,
|
||||
CustomAvatarProps
|
||||
@@ -54,13 +49,12 @@ export const CustomAvatar = React.forwardRef<
|
||||
const avatarLink = getAvatarUrl(avatarUrl, type);
|
||||
const resolvedColor =
|
||||
!color || color === "initials" ? pickInitialsColor(name ?? "") : color;
|
||||
const initialsSource = sanitizeInitialsSource(name ?? "");
|
||||
|
||||
return (
|
||||
<Avatar
|
||||
ref={ref}
|
||||
src={avatarLink}
|
||||
name={initialsSource}
|
||||
name={name}
|
||||
alt={name}
|
||||
color={resolvedColor}
|
||||
{...props}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { ReactNode, useEffect, useState } from "react";
|
||||
import React, { ReactNode, useState } from "react";
|
||||
import {
|
||||
ActionIcon,
|
||||
Popover,
|
||||
@@ -7,24 +7,9 @@ import {
|
||||
} from "@mantine/core";
|
||||
import { useClickOutside, useDisclosure, useWindowEvent } from "@mantine/hooks";
|
||||
import { Suspense } from "react";
|
||||
const Picker = React.lazy(() => import("@emoji-mart/react"));
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
// Load the picker module AND the emoji data in parallel inside the lazy
|
||||
// resolution, then bind the data into the component. React.lazy only finishes
|
||||
// suspending once both are in memory, so the Suspense boundary hides the
|
||||
// Remove button until the Picker can render with real content.
|
||||
const Picker = React.lazy(async () => {
|
||||
const [pickerModule, dataModule] = await Promise.all([
|
||||
import("@slidoapp/emoji-mart-react"),
|
||||
import("@slidoapp/emoji-mart-data"),
|
||||
]);
|
||||
const PickerComp = pickerModule.default;
|
||||
const data = dataModule.default;
|
||||
return {
|
||||
default: (props: any) => <PickerComp {...props} data={data} />,
|
||||
};
|
||||
});
|
||||
|
||||
export interface EmojiPickerInterface {
|
||||
onEmojiSelect: (emoji: any) => void;
|
||||
icon: ReactNode;
|
||||
@@ -34,7 +19,6 @@ export interface EmojiPickerInterface {
|
||||
size?: string;
|
||||
variant?: string;
|
||||
c?: string;
|
||||
tabIndex?: number;
|
||||
};
|
||||
}
|
||||
|
||||
@@ -66,38 +50,6 @@ function EmojiPicker({
|
||||
}
|
||||
});
|
||||
|
||||
// emoji-mart's built-in autoFocus calls .focus() without preventScroll, which
|
||||
// makes the browser scroll every scrollable ancestor of the search input to
|
||||
// bring it on screen — including the page editor's scroll container, so the
|
||||
// page jumps to the top whenever the picker is opened from a scrolled-down
|
||||
// position. The search input lives inside the <em-emoji-picker> custom
|
||||
// element's shadow root, so we poll for it after the dropdown mounts and
|
||||
// focus it ourselves with preventScroll.
|
||||
useEffect(() => {
|
||||
if (!opened || !dropdown) return;
|
||||
let cancelled = false;
|
||||
let rafId = 0;
|
||||
const tryFocus = (attempts: number) => {
|
||||
if (cancelled) return;
|
||||
const pickerEl = dropdown.querySelector("em-emoji-picker");
|
||||
const input = pickerEl?.shadowRoot?.querySelector<HTMLInputElement>(
|
||||
'input[type="search"]',
|
||||
);
|
||||
if (input) {
|
||||
input.focus({ preventScroll: true });
|
||||
return;
|
||||
}
|
||||
if (attempts < 60) {
|
||||
rafId = requestAnimationFrame(() => tryFocus(attempts + 1));
|
||||
}
|
||||
};
|
||||
rafId = requestAnimationFrame(() => tryFocus(0));
|
||||
return () => {
|
||||
cancelled = true;
|
||||
cancelAnimationFrame(rafId);
|
||||
};
|
||||
}, [opened, dropdown]);
|
||||
|
||||
const handleEmojiSelect = (emoji) => {
|
||||
onEmojiSelect(emoji);
|
||||
handlers.close();
|
||||
@@ -122,7 +74,6 @@ function EmojiPicker({
|
||||
c={actionIconProps?.c || "gray"}
|
||||
variant={actionIconProps?.variant || "transparent"}
|
||||
size={actionIconProps?.size}
|
||||
tabIndex={actionIconProps?.tabIndex}
|
||||
onClick={handlers.toggle}
|
||||
aria-label={t("Pick emoji")}
|
||||
aria-haspopup="dialog"
|
||||
@@ -134,6 +85,7 @@ function EmojiPicker({
|
||||
<Suspense fallback={null}>
|
||||
<Popover.Dropdown bg="000" style={{ border: "none" }} ref={setDropdown}>
|
||||
<Picker
|
||||
data={async () => (await import("@emoji-mart/data")).default}
|
||||
onEmojiSelect={handleEmojiSelect}
|
||||
perLine={8}
|
||||
skinTonePosition="search"
|
||||
|
||||
@@ -118,20 +118,10 @@ export function PageVerificationBadge({
|
||||
|
||||
if (status === "none" && readOnly) return null;
|
||||
|
||||
const tooltipLabel =
|
||||
status === "verified" && verificationInfo?.expiresAt
|
||||
? t("Verified until {{date}}", {
|
||||
date: new Date(verificationInfo.expiresAt).toLocaleDateString(
|
||||
undefined,
|
||||
{ month: "long", day: "numeric", year: "numeric" },
|
||||
),
|
||||
})
|
||||
: getStatusLabel(status, t);
|
||||
|
||||
return (
|
||||
<>
|
||||
{status !== "none" ? (
|
||||
<Tooltip label={tooltipLabel} withArrow openDelay={250}>
|
||||
<Tooltip label={getStatusLabel(status, t)} withArrow openDelay={250}>
|
||||
<Group
|
||||
gap={4}
|
||||
onClick={open}
|
||||
|
||||
@@ -28,18 +28,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.colorSwatch:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px var(--mantine-color-blue-6);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.removeColor:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: inset 0 0 0 2px var(--mantine-color-blue-6);
|
||||
}
|
||||
|
||||
.buttonRoot {
|
||||
height: 34px;
|
||||
padding-left: rem(8);
|
||||
|
||||
@@ -27,7 +27,7 @@ import { isCellSelection, isTextSelected } from "@docmost/editor-ext";
|
||||
import { LinkSelector } from "@/features/editor/components/bubble-menu/link-selector.tsx";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { showAiMenuAtom, showLinkMenuAtom } from "@/features/editor/atoms/editor-atoms";
|
||||
import { userAtom, workspaceAtom } from "@/features/user/atoms/current-user-atom";
|
||||
import { workspaceAtom } from "@/features/user/atoms/current-user-atom";
|
||||
|
||||
export interface BubbleMenuItem {
|
||||
name: string;
|
||||
@@ -46,9 +46,6 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
|
||||
const [showCommentPopup, setShowCommentPopup] = useAtom(showCommentPopupAtom);
|
||||
const workspace = useAtomValue(workspaceAtom);
|
||||
const isGenerativeAiEnabled = workspace?.settings?.ai?.generative === true;
|
||||
const user = useAtomValue(userAtom);
|
||||
const editorToolbarEnabled =
|
||||
user?.settings?.preferences?.editorToolbar ?? false;
|
||||
const [, setDraftCommentId] = useAtom(draftCommentIdAtom);
|
||||
const showCommentPopupRef = useRef(showCommentPopup);
|
||||
const showAiMenuRef = useRef(showAiMenu);
|
||||
@@ -152,7 +149,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
|
||||
return isTextSelected(editor);
|
||||
},
|
||||
options: {
|
||||
placement: editorToolbarEnabled ? "bottom" : "top",
|
||||
placement: "top",
|
||||
offset: 8,
|
||||
onHide: () => {
|
||||
setIsNodeSelectorOpen(false);
|
||||
@@ -191,60 +188,56 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
|
||||
<div className={classes.divider} />
|
||||
</>
|
||||
)}
|
||||
{!editorToolbarEnabled && (
|
||||
<>
|
||||
<NodeSelector
|
||||
editor={props.editor}
|
||||
isOpen={isNodeSelectorOpen}
|
||||
setIsOpen={() => {
|
||||
setIsNodeSelectorOpen(!isNodeSelectorOpen);
|
||||
setIsTextAlignmentOpen(false);
|
||||
setIsColorSelectorOpen(false);
|
||||
}}
|
||||
/>
|
||||
<NodeSelector
|
||||
editor={props.editor}
|
||||
isOpen={isNodeSelectorOpen}
|
||||
setIsOpen={() => {
|
||||
setIsNodeSelectorOpen(!isNodeSelectorOpen);
|
||||
setIsTextAlignmentOpen(false);
|
||||
setIsColorSelectorOpen(false);
|
||||
}}
|
||||
/>
|
||||
|
||||
<TextAlignmentSelector
|
||||
editor={props.editor}
|
||||
isOpen={isTextAlignmentSelectorOpen}
|
||||
setIsOpen={() => {
|
||||
setIsTextAlignmentOpen(!isTextAlignmentSelectorOpen);
|
||||
setIsNodeSelectorOpen(false);
|
||||
setIsColorSelectorOpen(false);
|
||||
}}
|
||||
/>
|
||||
<TextAlignmentSelector
|
||||
editor={props.editor}
|
||||
isOpen={isTextAlignmentSelectorOpen}
|
||||
setIsOpen={() => {
|
||||
setIsTextAlignmentOpen(!isTextAlignmentSelectorOpen);
|
||||
setIsNodeSelectorOpen(false);
|
||||
setIsColorSelectorOpen(false);
|
||||
}}
|
||||
/>
|
||||
|
||||
<ActionIcon.Group>
|
||||
{items.map((item, index) => (
|
||||
<Tooltip key={index} label={t(item.name)} withArrow>
|
||||
<ActionIcon
|
||||
key={index}
|
||||
variant="default"
|
||||
size="lg"
|
||||
radius="0"
|
||||
aria-label={t(item.name)}
|
||||
className={clsx({ [classes.active]: item.isActive() })}
|
||||
style={{ border: "none" }}
|
||||
onClick={item.command}
|
||||
>
|
||||
<item.icon style={{ width: rem(16) }} stroke={2} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
))}
|
||||
</ActionIcon.Group>
|
||||
<ActionIcon.Group>
|
||||
{items.map((item, index) => (
|
||||
<Tooltip key={index} label={t(item.name)} withArrow>
|
||||
<ActionIcon
|
||||
key={index}
|
||||
variant="default"
|
||||
size="lg"
|
||||
radius="0"
|
||||
aria-label={t(item.name)}
|
||||
className={clsx({ [classes.active]: item.isActive() })}
|
||||
style={{ border: "none" }}
|
||||
onClick={item.command}
|
||||
>
|
||||
<item.icon style={{ width: rem(16) }} stroke={2} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
))}
|
||||
</ActionIcon.Group>
|
||||
|
||||
<LinkSelector />
|
||||
<LinkSelector />
|
||||
|
||||
<ColorSelector
|
||||
editor={props.editor}
|
||||
isOpen={isColorSelectorOpen}
|
||||
setIsOpen={() => {
|
||||
setIsColorSelectorOpen(!isColorSelectorOpen);
|
||||
setIsNodeSelectorOpen(false);
|
||||
setIsTextAlignmentOpen(false);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<ColorSelector
|
||||
editor={props.editor}
|
||||
isOpen={isColorSelectorOpen}
|
||||
setIsOpen={() => {
|
||||
setIsColorSelectorOpen(!isColorSelectorOpen);
|
||||
setIsNodeSelectorOpen(false);
|
||||
setIsTextAlignmentOpen(false);
|
||||
}}
|
||||
/>
|
||||
|
||||
<Tooltip label={t(commentItem.name)} withArrow withinPortal={false}>
|
||||
<ActionIcon
|
||||
|
||||
@@ -4,6 +4,7 @@ import {
|
||||
Button,
|
||||
Popover,
|
||||
rem,
|
||||
ScrollArea,
|
||||
Text,
|
||||
Tooltip,
|
||||
SimpleGrid,
|
||||
@@ -113,63 +114,6 @@ const HIGHLIGHT_COLORS: BubbleColorMenuItem[] = [
|
||||
},
|
||||
];
|
||||
|
||||
const COLOR_GRID_COLS = 5;
|
||||
|
||||
function focusSwatch(grid: "text" | "highlight", index: number) {
|
||||
const el = document.querySelector<HTMLElement>(
|
||||
`[data-color-grid="${grid}"][data-color-index="${index}"]`,
|
||||
);
|
||||
el?.focus();
|
||||
}
|
||||
|
||||
function handleColorKeyNav(
|
||||
e: React.KeyboardEvent<HTMLDivElement>,
|
||||
index: number,
|
||||
grid: "text" | "highlight",
|
||||
) {
|
||||
const cols = COLOR_GRID_COLS;
|
||||
const total =
|
||||
grid === "text" ? TEXT_COLORS.length : HIGHLIGHT_COLORS.length;
|
||||
const col = index % cols;
|
||||
|
||||
if (e.key === "ArrowRight") {
|
||||
e.preventDefault();
|
||||
if (index < total - 1) focusSwatch(grid, index + 1);
|
||||
return;
|
||||
}
|
||||
if (e.key === "ArrowLeft") {
|
||||
e.preventDefault();
|
||||
if (index > 0) focusSwatch(grid, index - 1);
|
||||
return;
|
||||
}
|
||||
if (e.key === "ArrowDown") {
|
||||
e.preventDefault();
|
||||
const next = index + cols;
|
||||
if (next < total) {
|
||||
focusSwatch(grid, next);
|
||||
} else if (grid === "text") {
|
||||
focusSwatch("highlight", Math.min(col, HIGHLIGHT_COLORS.length - 1));
|
||||
} else if (grid === "highlight") {
|
||||
document
|
||||
.querySelector<HTMLElement>('[data-color-grid="remove"]')
|
||||
?.focus();
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (e.key === "ArrowUp") {
|
||||
e.preventDefault();
|
||||
const prev = index - cols;
|
||||
if (prev >= 0) {
|
||||
focusSwatch(grid, prev);
|
||||
} else if (grid === "highlight") {
|
||||
const lastRowStart =
|
||||
Math.floor((TEXT_COLORS.length - 1) / cols) * cols;
|
||||
focusSwatch("text", Math.min(lastRowStart + col, TEXT_COLORS.length - 1));
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
export const ColorSelector: FC<ColorSelectorProps> = ({
|
||||
editor,
|
||||
isOpen,
|
||||
@@ -213,20 +157,13 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
|
||||
);
|
||||
|
||||
return (
|
||||
<Popover
|
||||
width={220}
|
||||
opened={isOpen}
|
||||
onChange={setIsOpen}
|
||||
trapFocus
|
||||
withArrow
|
||||
>
|
||||
<Popover width={220} opened={isOpen} withArrow>
|
||||
<Popover.Target>
|
||||
<Tooltip label={t("Text color")} withArrow>
|
||||
<Button
|
||||
variant="default"
|
||||
radius="0"
|
||||
rightSection={<IconChevronDown size={16} />}
|
||||
onMouseDown={(e) => e.preventDefault()}
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
data-text-color={activeColorItem?.color || ""}
|
||||
data-highlight-color={activeHighlightItem?.color || ""}
|
||||
@@ -244,8 +181,9 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
|
||||
</Tooltip>
|
||||
</Popover.Target>
|
||||
|
||||
<Popover.Dropdown onMouseDown={(e) => e.preventDefault()}>
|
||||
<Stack gap="md" p="2px">
|
||||
<Popover.Dropdown>
|
||||
<ScrollArea.Autosize type="scroll" mah="400">
|
||||
<Stack gap="md">
|
||||
<Box>
|
||||
<Text size="sm" fw={600} mb="xs">
|
||||
{t("Text color")}
|
||||
@@ -269,10 +207,6 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
|
||||
<Box
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
data-autofocus={index === 0 ? true : undefined}
|
||||
data-color-grid="text"
|
||||
data-color-index={index}
|
||||
className={classes.colorSwatch}
|
||||
aria-label={t(name)}
|
||||
aria-pressed={!!editorState[`text_${color}`]}
|
||||
onClick={applyTextColor}
|
||||
@@ -280,9 +214,7 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
applyTextColor();
|
||||
return;
|
||||
}
|
||||
handleColorKeyNav(e, index, "text");
|
||||
}}
|
||||
style={{
|
||||
width: rem(28),
|
||||
@@ -335,9 +267,6 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
|
||||
<Box
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
data-color-grid="highlight"
|
||||
data-color-index={index}
|
||||
className={classes.colorSwatch}
|
||||
aria-label={t(name)}
|
||||
aria-pressed={!!editorState[`highlight_${color}`]}
|
||||
onClick={applyHighlight}
|
||||
@@ -345,9 +274,7 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
applyHighlight();
|
||||
return;
|
||||
}
|
||||
handleColorKeyNav(e, index, "highlight");
|
||||
}}
|
||||
style={{
|
||||
width: rem(28),
|
||||
@@ -383,27 +310,16 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
|
||||
<Button
|
||||
variant="default"
|
||||
fullWidth
|
||||
data-color-grid="remove"
|
||||
className={classes.removeColor}
|
||||
onClick={() => {
|
||||
editor.commands.unsetColor();
|
||||
editor.commands.unsetHighlight();
|
||||
setIsOpen(false);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "ArrowUp") {
|
||||
e.preventDefault();
|
||||
const lastRowStart =
|
||||
Math.floor(
|
||||
(HIGHLIGHT_COLORS.length - 1) / COLOR_GRID_COLS,
|
||||
) * COLOR_GRID_COLS;
|
||||
focusSwatch("highlight", lastRowStart);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{t("Remove color")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</ScrollArea.Autosize>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
);
|
||||
|
||||
@@ -155,7 +155,7 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<Popover opened={isOpen} onChange={setIsOpen} withArrow>
|
||||
<Popover opened={isOpen} withArrow>
|
||||
<Popover.Target>
|
||||
<Tooltip
|
||||
label={t("Turn into")}
|
||||
|
||||
+31
-30
@@ -7,7 +7,7 @@ import {
|
||||
IconCheck,
|
||||
IconChevronDown,
|
||||
} from "@tabler/icons-react";
|
||||
import { Menu, Button, Tooltip, rem } from "@mantine/core";
|
||||
import { Popover, Button, ScrollArea, Tooltip, rem } from "@mantine/core";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import { useEditorState } from "@tiptap/react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
@@ -82,22 +82,15 @@ export const TextAlignmentSelector: FC<TextAlignmentProps> = ({
|
||||
const activeItem = items.filter((item) => item.isActive()).pop() ?? items[0];
|
||||
|
||||
return (
|
||||
<Menu
|
||||
shadow="md"
|
||||
position="bottom-start"
|
||||
withArrow={false}
|
||||
opened={isOpen}
|
||||
onChange={setIsOpen}
|
||||
>
|
||||
<Menu.Target>
|
||||
<Tooltip label={t("Text align")} withArrow disabled={isOpen}>
|
||||
<Popover opened={isOpen} withArrow>
|
||||
<Popover.Target>
|
||||
<Tooltip label={t("Text align")} withArrow withinPortal={false} disabled={isOpen}>
|
||||
<Button
|
||||
variant="default"
|
||||
style={{ border: "none", height: "34px" }}
|
||||
px="5"
|
||||
radius="0"
|
||||
rightSection={<IconChevronDown size={16} />}
|
||||
onMouseDown={(e) => e.preventDefault()}
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
aria-label={t("Text align")}
|
||||
aria-haspopup="menu"
|
||||
@@ -106,25 +99,33 @@ export const TextAlignmentSelector: FC<TextAlignmentProps> = ({
|
||||
<activeItem.icon style={{ width: rem(16) }} stroke={2} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Menu.Target>
|
||||
</Popover.Target>
|
||||
|
||||
<Menu.Dropdown>
|
||||
{items.map((item, index) => (
|
||||
<Menu.Item
|
||||
key={index}
|
||||
leftSection={<item.icon size={16} />}
|
||||
rightSection={
|
||||
activeItem.name === item.name ? <IconCheck size={16} /> : null
|
||||
}
|
||||
onClick={() => {
|
||||
item.command();
|
||||
setIsOpen(false);
|
||||
}}
|
||||
>
|
||||
{t(item.name)}
|
||||
</Menu.Item>
|
||||
))}
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
<Popover.Dropdown>
|
||||
<ScrollArea.Autosize type="scroll" mah={400}>
|
||||
<Button.Group orientation="vertical">
|
||||
{items.map((item, index) => (
|
||||
<Button
|
||||
key={index}
|
||||
variant="default"
|
||||
leftSection={<item.icon size={16} />}
|
||||
rightSection={
|
||||
activeItem.name === item.name && <IconCheck size={16} />
|
||||
}
|
||||
justify="left"
|
||||
fullWidth
|
||||
onClick={() => {
|
||||
item.command();
|
||||
setIsOpen(false);
|
||||
}}
|
||||
style={{ border: "none" }}
|
||||
>
|
||||
{t(item.name)}
|
||||
</Button>
|
||||
))}
|
||||
</Button.Group>
|
||||
</ScrollArea.Autosize>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,26 +1,30 @@
|
||||
import { CommandProps, EmojiMenuItemType } from "./types";
|
||||
import { buildEmojiIndex, getFrequentlyUsedEmoji, sortFrequentlyUsedEmoji } from "./utils";
|
||||
import { SearchIndex } from "emoji-mart";
|
||||
import { getFrequentlyUsedEmoji, sortFrequentlyUsedEmoji } from "./utils";
|
||||
|
||||
const MAX_RESULTS = 5;
|
||||
|
||||
const searchEmoji = async (query: string): Promise<EmojiMenuItemType[]> => {
|
||||
if (query === "") {
|
||||
return sortFrequentlyUsedEmoji(getFrequentlyUsedEmoji());
|
||||
const searchEmoji = async (value: string): Promise<EmojiMenuItemType[]> => {
|
||||
if (value === "") {
|
||||
const frequentlyUsedEmoji = getFrequentlyUsedEmoji();
|
||||
return sortFrequentlyUsedEmoji(frequentlyUsedEmoji);
|
||||
}
|
||||
|
||||
const q = query.toLowerCase();
|
||||
const index = await buildEmojiIndex();
|
||||
|
||||
return index
|
||||
.filter((e) => e.name.includes(q) || e.id.includes(q))
|
||||
.slice(0, MAX_RESULTS)
|
||||
.map((entry) => ({
|
||||
id: entry.id,
|
||||
emoji: entry.native,
|
||||
const emojis = await SearchIndex.search(value);
|
||||
const results = emojis.map((emoji: any) => {
|
||||
return {
|
||||
id: emoji.id,
|
||||
emoji: emoji.skins[0].native,
|
||||
command: ({ editor, range }: CommandProps) => {
|
||||
editor.chain().focus().deleteRange(range).insertContent(entry.native + " ").run();
|
||||
editor
|
||||
.chain()
|
||||
.focus()
|
||||
.deleteRange(range)
|
||||
.insertContent(emoji.skins[0].native + " ")
|
||||
.run();
|
||||
},
|
||||
}));
|
||||
};
|
||||
});
|
||||
|
||||
return results;
|
||||
};
|
||||
|
||||
export const getEmojiItems = async ({
|
||||
|
||||
@@ -1,208 +1,154 @@
|
||||
import { Loader, Paper, ScrollArea, Text, UnstyledButton } from "@mantine/core";
|
||||
import clsx from "clsx";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { EmojiMenuItemType } from "./types";
|
||||
import {
|
||||
EmojiCategory,
|
||||
EmojiIndexEntry,
|
||||
getEmojiCategories,
|
||||
incrementEmojiUsage,
|
||||
} from "./utils";
|
||||
ActionIcon,
|
||||
Loader,
|
||||
Paper,
|
||||
ScrollArea,
|
||||
SimpleGrid,
|
||||
Text,
|
||||
} from "@mantine/core";
|
||||
import { EmojiMenuItemType } from "./types";
|
||||
import clsx from "clsx";
|
||||
import classes from "./emoji-menu.module.css";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { GRID_COLUMNS, incrementEmojiUsage } from "./utils";
|
||||
|
||||
const COLS = 8;
|
||||
|
||||
const CAT_ICONS: Record<string, string> = {
|
||||
people: "😀",
|
||||
nature: "🌿",
|
||||
foods: "🍕",
|
||||
activity: "🎮",
|
||||
places: "🗺️",
|
||||
objects: "🔧",
|
||||
symbols: "💯",
|
||||
flags: "🚩",
|
||||
};
|
||||
|
||||
function EmojiList({
|
||||
const EmojiList = ({
|
||||
items,
|
||||
isLoading,
|
||||
command,
|
||||
editor,
|
||||
range,
|
||||
query = "",
|
||||
}: {
|
||||
items: EmojiMenuItemType[];
|
||||
isLoading: boolean;
|
||||
command: (item: EmojiMenuItemType) => void;
|
||||
command: any;
|
||||
editor: any;
|
||||
range: any;
|
||||
query?: string;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const [idx, setIdx] = useState(0);
|
||||
const [cats, setCats] = useState<EmojiCategory[]>([]);
|
||||
const [activeCat, setActiveCat] = useState("");
|
||||
const [focusZone, setFocusZone] = useState<"grid" | "tabs">("grid");
|
||||
const listViewport = useRef<HTMLDivElement>(null);
|
||||
const gridViewport = useRef<HTMLDivElement>(null);
|
||||
const catBar = useRef<HTMLDivElement>(null);
|
||||
}) => {
|
||||
const [selectedIndex, setSelectedIndex] = useState(0);
|
||||
const viewportRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const searching = query.length > 0;
|
||||
const browseLoading = !searching && cats.length === 0;
|
||||
const gridItems = cats.find((c) => c.id === activeCat)?.emojis ?? [];
|
||||
|
||||
useEffect(() => {
|
||||
getEmojiCategories().then((data) => {
|
||||
setCats(data);
|
||||
setActiveCat((prev) => prev || data[0]?.id || "");
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => { setIdx(0); }, [query, activeCat]);
|
||||
|
||||
useEffect(() => { if (searching) setFocusZone("grid"); }, [searching]);
|
||||
|
||||
useEffect(() => {
|
||||
if (focusZone !== "tabs") return;
|
||||
catBar.current?.querySelector<HTMLElement>(`[data-cat="${activeCat}"]`)?.scrollIntoView({ block: "nearest", inline: "nearest" });
|
||||
}, [activeCat, focusZone]);
|
||||
|
||||
useEffect(() => {
|
||||
if (focusZone === "tabs") return;
|
||||
const vp = searching ? listViewport.current : gridViewport.current;
|
||||
vp?.querySelector<HTMLElement>(`[data-i="${idx}"]`)?.scrollIntoView({ block: "nearest" });
|
||||
}, [idx, searching, focusZone]);
|
||||
|
||||
const pickSearchItem = useCallback(
|
||||
(i: number) => {
|
||||
const item = items[i];
|
||||
if (!item) return;
|
||||
command(item);
|
||||
incrementEmojiUsage(item.id);
|
||||
},
|
||||
[command, items],
|
||||
);
|
||||
|
||||
const pickGridItem = useCallback(
|
||||
(entry: EmojiIndexEntry) => {
|
||||
editor.chain().focus().deleteRange(range).insertContent(entry.native + " ").run();
|
||||
incrementEmojiUsage(entry.id);
|
||||
},
|
||||
[editor, range],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
function onKey(e: KeyboardEvent) {
|
||||
if (searching) {
|
||||
if (e.key === "ArrowDown") { e.preventDefault(); setIdx((i) => Math.min(i + 1, items.length - 1)); }
|
||||
else if (e.key === "ArrowUp") { e.preventDefault(); setIdx((i) => Math.max(i - 1, 0)); }
|
||||
else if (e.key === "Enter") { e.preventDefault(); pickSearchItem(idx); }
|
||||
} else if (focusZone === "tabs") {
|
||||
const catIdx = cats.findIndex((c) => c.id === activeCat);
|
||||
if (e.key === "ArrowRight") { e.preventDefault(); const next = cats[Math.min(catIdx + 1, cats.length - 1)]; if (next) setActiveCat(next.id); }
|
||||
else if (e.key === "ArrowLeft") { e.preventDefault(); const prev = cats[Math.max(catIdx - 1, 0)]; if (prev) setActiveCat(prev.id); }
|
||||
else if (e.key === "ArrowDown" || e.key === "Enter") { e.preventDefault(); setFocusZone("grid"); }
|
||||
else if (e.key === "ArrowUp") { e.preventDefault(); }
|
||||
} else {
|
||||
const total = gridItems.length;
|
||||
if (e.key === "ArrowRight") { e.preventDefault(); setIdx((i) => Math.min(i + 1, total - 1)); }
|
||||
else if (e.key === "ArrowLeft") { e.preventDefault(); setIdx((i) => Math.max(i - 1, 0)); }
|
||||
else if (e.key === "ArrowDown") { e.preventDefault(); setIdx((i) => Math.min(i + COLS, total - 1)); }
|
||||
else if (e.key === "ArrowUp") {
|
||||
e.preventDefault();
|
||||
if (idx < COLS) setFocusZone("tabs");
|
||||
else setIdx((i) => Math.max(i - COLS, 0));
|
||||
}
|
||||
else if (e.key === "Enter") { e.preventDefault(); if (gridItems[idx]) pickGridItem(gridItems[idx]); }
|
||||
const selectItem = useCallback(
|
||||
(index: number) => {
|
||||
const item = items[index];
|
||||
if (item) {
|
||||
command(item);
|
||||
incrementEmojiUsage(item.id);
|
||||
}
|
||||
}
|
||||
document.addEventListener("keydown", onKey);
|
||||
return () => document.removeEventListener("keydown", onKey);
|
||||
}, [searching, items, idx, gridItems, pickSearchItem, pickGridItem, focusZone, cats, activeCat]);
|
||||
},
|
||||
[command, items]
|
||||
);
|
||||
|
||||
return (
|
||||
useEffect(() => {
|
||||
const navigationKeys = [
|
||||
"ArrowRight",
|
||||
"ArrowLeft",
|
||||
"ArrowUp",
|
||||
"ArrowDown",
|
||||
"Enter",
|
||||
];
|
||||
const onKeyDown = (e: KeyboardEvent) => {
|
||||
if (navigationKeys.includes(e.key)) {
|
||||
e.preventDefault();
|
||||
|
||||
if (e.key === "ArrowRight") {
|
||||
setSelectedIndex(
|
||||
selectedIndex + 1 < items.length ? selectedIndex + 1 : selectedIndex
|
||||
);
|
||||
return true;
|
||||
}
|
||||
|
||||
if (e.key === "ArrowLeft") {
|
||||
setSelectedIndex(
|
||||
selectedIndex - 1 >= 0 ? selectedIndex - 1 : selectedIndex
|
||||
);
|
||||
return true;
|
||||
}
|
||||
|
||||
if (e.key === "ArrowUp") {
|
||||
setSelectedIndex(
|
||||
selectedIndex - GRID_COLUMNS >= 0
|
||||
? selectedIndex - GRID_COLUMNS
|
||||
: selectedIndex
|
||||
);
|
||||
return true;
|
||||
}
|
||||
|
||||
if (e.key === "ArrowDown") {
|
||||
setSelectedIndex(
|
||||
selectedIndex + GRID_COLUMNS < items.length
|
||||
? selectedIndex + GRID_COLUMNS
|
||||
: selectedIndex
|
||||
);
|
||||
return true;
|
||||
}
|
||||
|
||||
if (e.key === "Enter") {
|
||||
selectItem(selectedIndex);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
};
|
||||
document.addEventListener("keydown", onKeyDown);
|
||||
return () => {
|
||||
document.removeEventListener("keydown", onKeyDown);
|
||||
};
|
||||
}, [items, selectedIndex, setSelectedIndex]);
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedIndex(0);
|
||||
}, [items]);
|
||||
|
||||
useEffect(() => {
|
||||
viewportRef.current
|
||||
?.querySelector(`[data-item-index="${selectedIndex}"]`)
|
||||
?.scrollIntoView({ block: "nearest" });
|
||||
}, [selectedIndex]);
|
||||
|
||||
return items.length > 0 || isLoading ? (
|
||||
<Paper
|
||||
id="emoji-command"
|
||||
p={0}
|
||||
p="0"
|
||||
shadow="md"
|
||||
withBorder
|
||||
style={{ width: 280 }}
|
||||
role="listbox"
|
||||
aria-label={t("Emoji picker")}
|
||||
aria-label="Emoji results"
|
||||
aria-activedescendant={
|
||||
items.length > 0 ? `emoji-command-option-${selectedIndex}` : undefined
|
||||
}
|
||||
>
|
||||
{searching ? (
|
||||
<>
|
||||
{isLoading && <Loader m="xs" size="xs" color="blue" type="dots" />}
|
||||
<ScrollArea.Autosize mah={260} scrollbarSize={6} viewportRef={listViewport}>
|
||||
<div style={{ padding: 4 }}>
|
||||
{items.length === 0 && !isLoading ? (
|
||||
<Text size="sm" c="dimmed" p="xs">{t("No results")}</Text>
|
||||
) : items.map((item, i) => (
|
||||
<UnstyledButton
|
||||
key={item.id}
|
||||
data-i={i}
|
||||
w="100%"
|
||||
className={clsx(classes.row, { [classes.active]: i === idx })}
|
||||
onClick={() => pickSearchItem(i)}
|
||||
onMouseEnter={() => setIdx(i)}
|
||||
role="option"
|
||||
aria-selected={i === idx}
|
||||
>
|
||||
<span style={{ fontSize: 20, lineHeight: 1, minWidth: 26 }}>{item.emoji}</span>
|
||||
<Text size="sm" c="dimmed" ff="monospace" span>:{item.id}:</Text>
|
||||
</UnstyledButton>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea.Autosize>
|
||||
</>
|
||||
) : browseLoading ? (
|
||||
<Loader m="xs" size="xs" color="blue" type="dots" />
|
||||
) : (
|
||||
<>
|
||||
<div className={classes.catBar} role="tablist" ref={catBar}>
|
||||
{cats.map((c) => {
|
||||
const isActive = c.id === activeCat;
|
||||
const isFocused = isActive && focusZone === "tabs";
|
||||
return (
|
||||
<button
|
||||
key={c.id}
|
||||
data-cat={c.id}
|
||||
title={c.id}
|
||||
role="tab"
|
||||
aria-selected={isActive}
|
||||
className={clsx(classes.catTab, {
|
||||
[classes.catTabActive]: isActive,
|
||||
[classes.catTabFocused]: isFocused,
|
||||
})}
|
||||
onClick={() => { setActiveCat(c.id); setFocusZone("grid"); }}
|
||||
onMouseEnter={() => setFocusZone("grid")}
|
||||
>
|
||||
{CAT_ICONS[c.id] ?? "🔣"}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<ScrollArea.Autosize mah={220} scrollbarSize={6} viewportRef={gridViewport}>
|
||||
<div className={classes.grid} style={{ gridTemplateColumns: `repeat(${COLS}, 1fr)` }}>
|
||||
{gridItems.map((entry, i) => (
|
||||
<button
|
||||
key={entry.id}
|
||||
data-i={i}
|
||||
title={`:${entry.id}:`}
|
||||
className={clsx(classes.emojiBtn, { [classes.active]: i === idx })}
|
||||
onClick={() => pickGridItem(entry)}
|
||||
onMouseEnter={() => setIdx(i)}
|
||||
>
|
||||
{entry.native}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea.Autosize>
|
||||
</>
|
||||
{isLoading && <Loader m="xs" color="blue" type="dots" />}
|
||||
{items.length > 0 && (
|
||||
<ScrollArea.Autosize
|
||||
viewportRef={viewportRef}
|
||||
mah={250}
|
||||
scrollbarSize={8}
|
||||
pr="5"
|
||||
>
|
||||
<SimpleGrid cols={GRID_COLUMNS} p="xs" spacing="xs">
|
||||
{items.map((item, index: number) => (
|
||||
<ActionIcon
|
||||
data-item-index={index}
|
||||
id={`emoji-command-option-${index}`}
|
||||
role="option"
|
||||
aria-selected={index === selectedIndex}
|
||||
aria-label={item.id}
|
||||
variant="transparent"
|
||||
key={item.id}
|
||||
className={clsx(classes.menuBtn, {
|
||||
[classes.selectedItem]: index === selectedIndex,
|
||||
})}
|
||||
onClick={() => selectItem(index)}
|
||||
>
|
||||
<Text size="xl">{item.emoji}</Text>
|
||||
</ActionIcon>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</ScrollArea.Autosize>
|
||||
)}
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
) : null;
|
||||
};
|
||||
|
||||
export default EmojiList;
|
||||
|
||||
@@ -1,13 +1,9 @@
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 10px;
|
||||
.menuBtn {
|
||||
border-radius: var(--mantine-radius-sm);
|
||||
|
||||
&:hover {
|
||||
@mixin light {
|
||||
background: var(--mantine-color-gray-1);
|
||||
background: var(--mantine-color-gray-2);
|
||||
}
|
||||
|
||||
@mixin dark {
|
||||
@@ -16,7 +12,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
.selectedItem {
|
||||
@mixin light {
|
||||
background: var(--mantine-color-gray-2);
|
||||
}
|
||||
@@ -25,83 +21,3 @@
|
||||
background: var(--mantine-color-gray-light);
|
||||
}
|
||||
}
|
||||
|
||||
.catBar {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
padding: 4px 6px;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
|
||||
@mixin light {
|
||||
border-bottom: 1px solid var(--mantine-color-gray-2);
|
||||
}
|
||||
|
||||
@mixin dark {
|
||||
border-bottom: 1px solid var(--mantine-color-dark-4);
|
||||
}
|
||||
}
|
||||
|
||||
.catTab {
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
padding: 4px 5px;
|
||||
border-radius: var(--mantine-radius-sm);
|
||||
flex-shrink: 0;
|
||||
|
||||
&:hover {
|
||||
@mixin light {
|
||||
background: var(--mantine-color-gray-1);
|
||||
}
|
||||
|
||||
@mixin dark {
|
||||
background: var(--mantine-color-gray-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.catTabActive {
|
||||
@mixin light {
|
||||
background: var(--mantine-color-gray-2);
|
||||
}
|
||||
|
||||
@mixin dark {
|
||||
background: var(--mantine-color-gray-light);
|
||||
}
|
||||
}
|
||||
|
||||
.catTabFocused {
|
||||
outline: 1px solid var(--mantine-color-blue-filled);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: 1px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.emojiBtn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
padding: 3px;
|
||||
border-radius: var(--mantine-radius-sm);
|
||||
aspect-ratio: 1 / 1;
|
||||
|
||||
&:hover {
|
||||
@mixin light {
|
||||
background: var(--mantine-color-gray-1);
|
||||
}
|
||||
|
||||
@mixin dark {
|
||||
background: var(--mantine-color-gray-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { ReactRenderer, useEditor } from "@tiptap/react";
|
||||
import EmojiList from "./emoji-list";
|
||||
import { init } from "emoji-mart";
|
||||
import {
|
||||
autoUpdate,
|
||||
computePosition,
|
||||
@@ -36,6 +37,10 @@ const renderEmojiItems = () => {
|
||||
editor: ReturnType<typeof useEditor>;
|
||||
clientRect: () => DOMRect;
|
||||
}) => {
|
||||
init({
|
||||
data: async () => (await import("@emoji-mart/data")).default,
|
||||
});
|
||||
|
||||
component = new ReactRenderer(EmojiList, {
|
||||
props: { isLoading: true, items: [] },
|
||||
editor: props.editor,
|
||||
|
||||
@@ -1,4 +1,8 @@
|
||||
import { CommandProps, EmojiMartFrequentlyType, EmojiMenuItemType } from "./types";
|
||||
import { CommandProps } from "./types";
|
||||
import { getEmojiDataFromNative } from "emoji-mart";
|
||||
import { EmojiMartFrequentlyType, EmojiMenuItemType } from "./types";
|
||||
|
||||
export const GRID_COLUMNS = 10;
|
||||
|
||||
export const LOCAL_STORAGE_FREQUENT_KEY = "emoji-mart.frequently";
|
||||
|
||||
@@ -15,76 +19,41 @@ export const DEFAULT_FREQUENTLY_USED_EMOJI_MART = `{
|
||||
"rocket": 1
|
||||
}`;
|
||||
|
||||
export type EmojiIndexEntry = { id: string; name: string; native: string };
|
||||
|
||||
let _emojiIndex: EmojiIndexEntry[] | null = null;
|
||||
|
||||
export const buildEmojiIndex = async (): Promise<EmojiIndexEntry[]> => {
|
||||
if (_emojiIndex) return _emojiIndex;
|
||||
const { default: data } = await import('@slidoapp/emoji-mart-data');
|
||||
_emojiIndex = (Object.values((data as any).emojis) as any[])
|
||||
.filter((e) => e.id && e.name && e.skins?.[0]?.native)
|
||||
.map((e) => ({
|
||||
id: e.id as string,
|
||||
name: (e.name as string).toLowerCase(),
|
||||
native: e.skins[0].native as string,
|
||||
}));
|
||||
return _emojiIndex;
|
||||
};
|
||||
|
||||
export const incrementEmojiUsage = (emojiId: string) => {
|
||||
const stored = JSON.parse(
|
||||
localStorage.getItem(LOCAL_STORAGE_FREQUENT_KEY) || DEFAULT_FREQUENTLY_USED_EMOJI_MART,
|
||||
const frequentlyUsedEmoji =
|
||||
JSON.parse(localStorage.getItem(LOCAL_STORAGE_FREQUENT_KEY) || DEFAULT_FREQUENTLY_USED_EMOJI_MART);
|
||||
frequentlyUsedEmoji[emojiId]
|
||||
? (frequentlyUsedEmoji[emojiId] += 1)
|
||||
: (frequentlyUsedEmoji[emojiId] = 1);
|
||||
localStorage.setItem(
|
||||
LOCAL_STORAGE_FREQUENT_KEY,
|
||||
JSON.stringify(frequentlyUsedEmoji)
|
||||
);
|
||||
stored[emojiId] = (stored[emojiId] ?? 0) + 1;
|
||||
localStorage.setItem(LOCAL_STORAGE_FREQUENT_KEY, JSON.stringify(stored));
|
||||
};
|
||||
|
||||
export const sortFrequentlyUsedEmoji = async (
|
||||
frequentlyUsedEmoji: EmojiMartFrequentlyType,
|
||||
frequentlyUsedEmoji: EmojiMartFrequentlyType
|
||||
): Promise<EmojiMenuItemType[]> => {
|
||||
const index = await buildEmojiIndex();
|
||||
const results: EmojiMenuItemType[] = Object.entries(frequentlyUsedEmoji)
|
||||
.map(([id, count]): EmojiMenuItemType | null => {
|
||||
const entry = index.find((e) => e.id === id);
|
||||
if (!entry) return null;
|
||||
return {
|
||||
const data = await Promise.all(
|
||||
Object.entries(frequentlyUsedEmoji).map(
|
||||
async ([id, count]): Promise<EmojiMenuItemType> => ({
|
||||
id,
|
||||
count,
|
||||
emoji: entry.native,
|
||||
command: ({ editor, range }: CommandProps) => {
|
||||
editor.chain().focus().deleteRange(range).insertContent(entry.native + " ").run();
|
||||
emoji: (await getEmojiDataFromNative(id))?.native,
|
||||
command: async ({ editor, range }: CommandProps) => {
|
||||
editor
|
||||
.chain()
|
||||
.focus()
|
||||
.deleteRange(range)
|
||||
.insertContent((await getEmojiDataFromNative(id))?.native + " ")
|
||||
.run();
|
||||
},
|
||||
};
|
||||
})
|
||||
.filter((e): e is EmojiMenuItemType => e !== null);
|
||||
return results.sort((a, b) => (b.count ?? 0) - (a.count ?? 0)).slice(0, 5);
|
||||
};
|
||||
|
||||
export const getFrequentlyUsedEmoji = (): EmojiMartFrequentlyType => {
|
||||
return JSON.parse(
|
||||
localStorage.getItem(LOCAL_STORAGE_FREQUENT_KEY) || DEFAULT_FREQUENTLY_USED_EMOJI_MART,
|
||||
})
|
||||
)
|
||||
);
|
||||
return data.sort((a, b) => b.count - a.count);
|
||||
};
|
||||
|
||||
export type EmojiCategory = { id: string; emojis: EmojiIndexEntry[] };
|
||||
|
||||
let _cats: EmojiCategory[] | null = null;
|
||||
|
||||
export const getEmojiCategories = async (): Promise<EmojiCategory[]> => {
|
||||
if (_cats) return _cats;
|
||||
const [{ default: data }, index] = await Promise.all([
|
||||
import("@slidoapp/emoji-mart-data"),
|
||||
buildEmojiIndex(),
|
||||
]);
|
||||
const byId = new Map(index.map((e) => [e.id, e]));
|
||||
_cats = ((data as any).categories as { id: string; emojis: string[] }[])
|
||||
.map((cat) => ({
|
||||
id: cat.id,
|
||||
emojis: cat.emojis
|
||||
.map((id) => byId.get(id))
|
||||
.filter((e): e is EmojiIndexEntry => !!e),
|
||||
}))
|
||||
.filter((c) => c.emojis.length > 0);
|
||||
return _cats;
|
||||
};
|
||||
export const getFrequentlyUsedEmoji = () => {
|
||||
return JSON.parse(localStorage.getItem(LOCAL_STORAGE_FREQUENT_KEY) || DEFAULT_FREQUENTLY_USED_EMOJI_MART);
|
||||
}
|
||||
|
||||
@@ -1,72 +0,0 @@
|
||||
.fixedToolbar {
|
||||
position: fixed;
|
||||
top: calc(var(--app-shell-header-offset, 0rem) + 45px);
|
||||
inset-inline-start: var(--app-shell-navbar-offset, 0rem);
|
||||
inset-inline-end: var(--app-shell-aside-offset, 0rem);
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--mantine-color-body);
|
||||
border-bottom: 1px solid
|
||||
light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.fixedToolbar::-webkit-scrollbar {
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.fixedToolbar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.fixedToolbar::-webkit-scrollbar-thumb {
|
||||
background: light-dark(
|
||||
var(--mantine-color-gray-4),
|
||||
var(--mantine-color-dark-3)
|
||||
);
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
gap: 4px;
|
||||
padding: 4px 8px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.inner > * {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
flex-shrink: 0;
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
margin: 0 4px;
|
||||
background: light-dark(
|
||||
var(--mantine-color-gray-3),
|
||||
var(--mantine-color-dark-4)
|
||||
);
|
||||
}
|
||||
|
||||
.active,
|
||||
.active:hover {
|
||||
color: var(--mantine-color-blue-6);
|
||||
background-color: light-dark(
|
||||
var(--mantine-color-gray-1),
|
||||
var(--mantine-color-dark-5)
|
||||
);
|
||||
}
|
||||
|
||||
@media print {
|
||||
.fixedToolbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -1,66 +0,0 @@
|
||||
import { FC } from "react";
|
||||
import { useAtomValue } from "jotai";
|
||||
import { pageEditorAtom } from "@/features/editor/atoms/editor-atoms";
|
||||
import { useToolbarState } from "./use-toolbar-state";
|
||||
import { BlockTypeGroup } from "./groups/block-type-group";
|
||||
import { InlineMarksGroup } from "./groups/inline-marks-group";
|
||||
import { ColorGroup } from "./groups/color-group";
|
||||
import { ListsGroup } from "./groups/lists-group";
|
||||
import { LinkGroup } from "./groups/link-group";
|
||||
import { AlignmentGroup } from "./groups/alignment-group";
|
||||
import { MediaGroup } from "./groups/media-group";
|
||||
import { QuickInsertsGroup } from "./groups/quick-inserts-group";
|
||||
import { MoreInsertsGroup } from "./groups/more-inserts-group";
|
||||
import { HistoryGroup } from "./groups/history-group";
|
||||
import { AskAiGroup } from "./groups/ask-ai-group";
|
||||
import { workspaceAtom } from "@/features/user/atoms/current-user-atom";
|
||||
import classes from "./fixed-toolbar.module.css";
|
||||
|
||||
export const FixedToolbar: FC = () => {
|
||||
const editor = useAtomValue(pageEditorAtom);
|
||||
const state = useToolbarState(editor);
|
||||
const workspace = useAtomValue(workspaceAtom);
|
||||
const isGenerativeAiEnabled = workspace?.settings?.ai?.generative === true;
|
||||
|
||||
if (!editor || !state) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={classes.fixedToolbar}
|
||||
data-fixed-toolbar="true"
|
||||
role="toolbar"
|
||||
aria-label="Editor toolbar"
|
||||
onMouseDown={(e) => e.preventDefault()}
|
||||
>
|
||||
<div className={classes.inner}>
|
||||
{/* {isGenerativeAiEnabled && (
|
||||
<>
|
||||
<AskAiGroup />
|
||||
<div className={classes.divider} />
|
||||
</>
|
||||
)} */}
|
||||
<BlockTypeGroup editor={editor} />
|
||||
<div className={classes.divider} />
|
||||
<InlineMarksGroup editor={editor} state={state} />
|
||||
<div className={classes.divider} />
|
||||
<ColorGroup editor={editor} />
|
||||
<div className={classes.divider} />
|
||||
<ListsGroup editor={editor} state={state} />
|
||||
<div className={classes.divider} />
|
||||
<LinkGroup />
|
||||
<div className={classes.divider} />
|
||||
<AlignmentGroup editor={editor} />
|
||||
<div className={classes.divider} />
|
||||
<MediaGroup editor={editor} />
|
||||
<div className={classes.divider} />
|
||||
<QuickInsertsGroup editor={editor} />
|
||||
<MoreInsertsGroup editor={editor} />
|
||||
<div className={classes.divider} />
|
||||
<HistoryGroup editor={editor} state={state} />
|
||||
</div>
|
||||
</div>
|
||||
<div className={classes.spacer} aria-hidden />
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -1,28 +0,0 @@
|
||||
import { FC, useEffect, useState } from "react";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import { TextAlignmentSelector } from "@/features/editor/components/bubble-menu/text-alignment-selector";
|
||||
|
||||
interface Props {
|
||||
editor: Editor;
|
||||
}
|
||||
|
||||
export const AlignmentGroup: FC<Props> = ({ editor }) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") setIsOpen(false);
|
||||
};
|
||||
document.addEventListener("keydown", handleKeyDown);
|
||||
return () => document.removeEventListener("keydown", handleKeyDown);
|
||||
}, [isOpen]);
|
||||
|
||||
return (
|
||||
<TextAlignmentSelector
|
||||
editor={editor}
|
||||
isOpen={isOpen}
|
||||
setIsOpen={setIsOpen}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -1,23 +0,0 @@
|
||||
import { FC } from "react";
|
||||
import { Button } from "@mantine/core";
|
||||
import { IconSparkles } from "@tabler/icons-react";
|
||||
import { useSetAtom } from "jotai";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { showAiMenuAtom } from "@/features/editor/atoms/editor-atoms";
|
||||
|
||||
export const AskAiGroup: FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const setShowAiMenu = useSetAtom(showAiMenuAtom);
|
||||
|
||||
return (
|
||||
<Button
|
||||
variant="subtle"
|
||||
color="dark"
|
||||
size="xs"
|
||||
leftSection={<IconSparkles size={14} />}
|
||||
onClick={() => setShowAiMenu(true)}
|
||||
>
|
||||
{t("Ask AI")}
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
@@ -1,108 +0,0 @@
|
||||
import { FC } from "react";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import { useEditorState } from "@tiptap/react";
|
||||
import { Button, Menu } from "@mantine/core";
|
||||
import {
|
||||
IconBlockquote,
|
||||
IconBraces,
|
||||
IconChevronDown,
|
||||
IconH1,
|
||||
IconH2,
|
||||
IconH3,
|
||||
IconMenu4,
|
||||
IconTypography,
|
||||
} from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
interface Props {
|
||||
editor: Editor;
|
||||
}
|
||||
|
||||
export const BlockTypeGroup: FC<Props> = ({ editor }) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const state = useEditorState({
|
||||
editor,
|
||||
selector: (ctx) => ({
|
||||
isHeading1: ctx.editor.isActive("heading", { level: 1 }),
|
||||
isHeading2: ctx.editor.isActive("heading", { level: 2 }),
|
||||
isHeading3: ctx.editor.isActive("heading", { level: 3 }),
|
||||
isBlockquote: ctx.editor.isActive("blockquote"),
|
||||
isCodeBlock: ctx.editor.isActive("codeBlock"),
|
||||
}),
|
||||
});
|
||||
|
||||
let label = t("Normal text");
|
||||
if (state.isHeading1) label = t("Heading 1");
|
||||
else if (state.isHeading2) label = t("Heading 2");
|
||||
else if (state.isHeading3) label = t("Heading 3");
|
||||
else if (state.isBlockquote) label = t("Quote");
|
||||
else if (state.isCodeBlock) label = t("Code block");
|
||||
|
||||
return (
|
||||
<Menu shadow="md" position="bottom-start" withArrow={false}>
|
||||
<Menu.Target>
|
||||
<Button
|
||||
variant="subtle"
|
||||
color="dark"
|
||||
size="xs"
|
||||
rightSection={<IconChevronDown size={14} />}
|
||||
>
|
||||
{label}
|
||||
</Button>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
<Menu.Item
|
||||
leftSection={<IconTypography size={16} />}
|
||||
onClick={() =>
|
||||
editor.chain().focus().toggleNode("paragraph", "paragraph").run()
|
||||
}
|
||||
>
|
||||
{t("Text")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconH1 size={16} />}
|
||||
onClick={() =>
|
||||
editor.chain().focus().toggleHeading({ level: 1 }).run()
|
||||
}
|
||||
>
|
||||
{t("Heading 1")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconH2 size={16} />}
|
||||
onClick={() =>
|
||||
editor.chain().focus().toggleHeading({ level: 2 }).run()
|
||||
}
|
||||
>
|
||||
{t("Heading 2")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconH3 size={16} />}
|
||||
onClick={() =>
|
||||
editor.chain().focus().toggleHeading({ level: 3 }).run()
|
||||
}
|
||||
>
|
||||
{t("Heading 3")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconBlockquote size={16} />}
|
||||
onClick={() => editor.chain().focus().toggleBlockquote().run()}
|
||||
>
|
||||
{t("Quote")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconBraces size={16} />}
|
||||
onClick={() => editor.chain().focus().toggleCodeBlock().run()}
|
||||
>
|
||||
{t("Code block")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconMenu4 size={16} />}
|
||||
onClick={() => editor.chain().focus().setHorizontalRule().run()}
|
||||
>
|
||||
{t("Divider")}
|
||||
</Menu.Item>
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
);
|
||||
};
|
||||
@@ -1,24 +0,0 @@
|
||||
import { FC, useEffect, useState } from "react";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import { ColorSelector } from "@/features/editor/components/bubble-menu/color-selector";
|
||||
|
||||
interface Props {
|
||||
editor: Editor;
|
||||
}
|
||||
|
||||
export const ColorGroup: FC<Props> = ({ editor }) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") setIsOpen(false);
|
||||
};
|
||||
document.addEventListener("keydown", handleKeyDown);
|
||||
return () => document.removeEventListener("keydown", handleKeyDown);
|
||||
}, [isOpen]);
|
||||
|
||||
return (
|
||||
<ColorSelector editor={editor} isOpen={isOpen} setIsOpen={setIsOpen} />
|
||||
);
|
||||
};
|
||||
@@ -1,44 +0,0 @@
|
||||
import { FC } from "react";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import { ActionIcon, Tooltip } from "@mantine/core";
|
||||
import { IconArrowBackUp, IconArrowForwardUp } from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import type { ToolbarState } from "../use-toolbar-state";
|
||||
|
||||
interface Props {
|
||||
editor: Editor;
|
||||
state: ToolbarState;
|
||||
}
|
||||
|
||||
export const HistoryGroup: FC<Props> = ({ editor, state }) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<ActionIcon.Group>
|
||||
<Tooltip label={t("Undo")} withArrow>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="dark"
|
||||
size="md"
|
||||
aria-label={t("Undo")}
|
||||
disabled={!state.canUndo}
|
||||
onClick={() => editor.chain().focus().undo().run()}
|
||||
>
|
||||
<IconArrowBackUp size={16} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
<Tooltip label={t("Redo")} withArrow>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="dark"
|
||||
size="md"
|
||||
aria-label={t("Redo")}
|
||||
disabled={!state.canRedo}
|
||||
onClick={() => editor.chain().focus().redo().run()}
|
||||
>
|
||||
<IconArrowForwardUp size={16} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</ActionIcon.Group>
|
||||
);
|
||||
};
|
||||
-131
@@ -1,131 +0,0 @@
|
||||
import { FC } from "react";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import { ActionIcon, Menu, Tooltip } from "@mantine/core";
|
||||
import {
|
||||
IconBold,
|
||||
IconChevronDown,
|
||||
IconClearFormatting,
|
||||
IconCode,
|
||||
IconIndentDecrease,
|
||||
IconIndentIncrease,
|
||||
IconItalic,
|
||||
IconStrikethrough,
|
||||
IconSubscript,
|
||||
IconSuperscript,
|
||||
IconUnderline,
|
||||
} from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import clsx from "clsx";
|
||||
import type { ToolbarState } from "../use-toolbar-state";
|
||||
import classes from "../fixed-toolbar.module.css";
|
||||
|
||||
interface Props {
|
||||
editor: Editor;
|
||||
state: ToolbarState;
|
||||
}
|
||||
|
||||
export const InlineMarksGroup: FC<Props> = ({ editor, state }) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<ActionIcon.Group>
|
||||
<Tooltip label={t("Bold")} withArrow>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="dark"
|
||||
size="md"
|
||||
aria-label={t("Bold")}
|
||||
aria-pressed={state.isBold}
|
||||
className={clsx({ [classes.active]: state.isBold })}
|
||||
onClick={() => editor.chain().focus().toggleBold().run()}
|
||||
>
|
||||
<IconBold size={16} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
<Tooltip label={t("Underline")} withArrow>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="dark"
|
||||
size="md"
|
||||
aria-label={t("Underline")}
|
||||
aria-pressed={state.isUnderline}
|
||||
className={clsx({ [classes.active]: state.isUnderline })}
|
||||
onClick={() => editor.chain().focus().toggleUnderline().run()}
|
||||
>
|
||||
<IconUnderline size={16} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
<Tooltip label={t("Italic")} withArrow>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="dark"
|
||||
size="md"
|
||||
aria-label={t("Italic")}
|
||||
aria-pressed={state.isItalic}
|
||||
className={clsx({ [classes.active]: state.isItalic })}
|
||||
onClick={() => editor.chain().focus().toggleItalic().run()}
|
||||
>
|
||||
<IconItalic size={16} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
<Menu shadow="md" position="bottom-start" withArrow={false}>
|
||||
<Menu.Target>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="dark"
|
||||
size="md"
|
||||
aria-label={t("More inline formatting")}
|
||||
>
|
||||
<IconChevronDown size={14} />
|
||||
</ActionIcon>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
<Menu.Item
|
||||
leftSection={<IconStrikethrough size={16} />}
|
||||
onClick={() => editor.chain().focus().toggleStrike().run()}
|
||||
>
|
||||
{t("Strikethrough")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconCode size={16} />}
|
||||
onClick={() => editor.chain().focus().toggleCode().run()}
|
||||
>
|
||||
{t("Inline code")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconSubscript size={16} />}
|
||||
onClick={() => editor.chain().focus().toggleSubscript().run()}
|
||||
>
|
||||
{t("Subscript")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconSuperscript size={16} />}
|
||||
onClick={() => editor.chain().focus().toggleSuperscript().run()}
|
||||
>
|
||||
{t("Superscript")}
|
||||
</Menu.Item>
|
||||
<Menu.Divider />
|
||||
<Menu.Item
|
||||
leftSection={<IconIndentIncrease size={16} />}
|
||||
onClick={() => editor.chain().focus().indent().run()}
|
||||
>
|
||||
{t("Increase indent")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconIndentDecrease size={16} />}
|
||||
onClick={() => editor.chain().focus().outdent().run()}
|
||||
>
|
||||
{t("Decrease indent")}
|
||||
</Menu.Item>
|
||||
<Menu.Divider />
|
||||
<Menu.Item
|
||||
leftSection={<IconClearFormatting size={16} />}
|
||||
onClick={() => editor.chain().focus().unsetAllMarks().run()}
|
||||
>
|
||||
{t("Clear formatting")}
|
||||
</Menu.Item>
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
</ActionIcon.Group>
|
||||
);
|
||||
};
|
||||
@@ -1,6 +0,0 @@
|
||||
import { FC } from "react";
|
||||
import { LinkSelector } from "@/features/editor/components/bubble-menu/link-selector";
|
||||
|
||||
export const LinkGroup: FC = () => {
|
||||
return <LinkSelector />;
|
||||
};
|
||||
@@ -1,61 +0,0 @@
|
||||
import { FC } from "react";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import { ActionIcon, Tooltip } from "@mantine/core";
|
||||
import { IconCheckbox, IconList, IconListNumbers } from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import clsx from "clsx";
|
||||
import type { ToolbarState } from "../use-toolbar-state";
|
||||
import classes from "../fixed-toolbar.module.css";
|
||||
|
||||
interface Props {
|
||||
editor: Editor;
|
||||
state: ToolbarState;
|
||||
}
|
||||
|
||||
export const ListsGroup: FC<Props> = ({ editor, state }) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<ActionIcon.Group>
|
||||
<Tooltip label={t("Bullet List")} withArrow>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="dark"
|
||||
size="md"
|
||||
aria-label={t("Bullet List")}
|
||||
aria-pressed={state.isBulletList}
|
||||
className={clsx({ [classes.active]: state.isBulletList })}
|
||||
onClick={() => editor.chain().focus().toggleBulletList().run()}
|
||||
>
|
||||
<IconList size={16} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
<Tooltip label={t("Numbered List")} withArrow>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="dark"
|
||||
size="md"
|
||||
aria-label={t("Numbered List")}
|
||||
aria-pressed={state.isOrderedList}
|
||||
className={clsx({ [classes.active]: state.isOrderedList })}
|
||||
onClick={() => editor.chain().focus().toggleOrderedList().run()}
|
||||
>
|
||||
<IconListNumbers size={16} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
<Tooltip label={t("To-do List")} withArrow>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="dark"
|
||||
size="md"
|
||||
aria-label={t("To-do List")}
|
||||
aria-pressed={state.isTaskList}
|
||||
className={clsx({ [classes.active]: state.isTaskList })}
|
||||
onClick={() => editor.chain().focus().toggleTaskList().run()}
|
||||
>
|
||||
<IconCheckbox size={16} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</ActionIcon.Group>
|
||||
);
|
||||
};
|
||||
@@ -1,118 +0,0 @@
|
||||
import { FC } from "react";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import { ActionIcon, Menu, Tooltip } from "@mantine/core";
|
||||
import {
|
||||
IconFileTypePdf,
|
||||
IconMovie,
|
||||
IconMusic,
|
||||
IconPaperclip,
|
||||
IconPhoto,
|
||||
} from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { uploadImageAction } from "@/features/editor/components/image/upload-image-action";
|
||||
import { uploadVideoAction } from "@/features/editor/components/video/upload-video-action";
|
||||
import { uploadAudioAction } from "@/features/editor/components/audio/upload-audio-action";
|
||||
import { uploadAttachmentAction } from "@/features/editor/components/attachment/upload-attachment-action";
|
||||
import { uploadPdfAction } from "@/features/editor/components/pdf/upload-pdf-action";
|
||||
|
||||
interface Props {
|
||||
editor: Editor;
|
||||
}
|
||||
|
||||
type UploadFn = (
|
||||
file: File,
|
||||
editor: Editor,
|
||||
pos: number,
|
||||
pageId: string,
|
||||
...rest: any[]
|
||||
) => void;
|
||||
|
||||
function pickFile(
|
||||
editor: Editor,
|
||||
accept: string,
|
||||
multiple: boolean,
|
||||
upload: UploadFn,
|
||||
extra?: boolean,
|
||||
) {
|
||||
// @ts-ignore — editor.storage.pageId is set by PageEditor.onCreate
|
||||
const pageId = editor.storage?.pageId as string | undefined;
|
||||
if (!pageId) return;
|
||||
|
||||
const input = document.createElement("input");
|
||||
input.type = "file";
|
||||
input.accept = accept;
|
||||
input.multiple = multiple;
|
||||
input.style.display = "none";
|
||||
document.body.appendChild(input);
|
||||
input.onchange = () => {
|
||||
if (input.files?.length) {
|
||||
for (const file of input.files) {
|
||||
const pos = editor.view.state.selection.from;
|
||||
if (extra !== undefined) {
|
||||
upload(file, editor, pos, pageId, extra);
|
||||
} else {
|
||||
upload(file, editor, pos, pageId);
|
||||
}
|
||||
}
|
||||
}
|
||||
input.remove();
|
||||
};
|
||||
input.click();
|
||||
}
|
||||
|
||||
export const MediaGroup: FC<Props> = ({ editor }) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Menu shadow="md" position="bottom-start" withArrow={false}>
|
||||
<Menu.Target>
|
||||
<Tooltip label={t("Insert media")} withArrow>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="dark"
|
||||
size="md"
|
||||
aria-label={t("Insert media")}
|
||||
>
|
||||
<IconPhoto size={16} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
<Menu.Item
|
||||
leftSection={<IconPhoto size={16} />}
|
||||
onClick={() => pickFile(editor, "image/*", true, uploadImageAction)}
|
||||
>
|
||||
{t("Image")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconMovie size={16} />}
|
||||
onClick={() => pickFile(editor, "video/*", true, uploadVideoAction)}
|
||||
>
|
||||
{t("Video")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconMusic size={16} />}
|
||||
onClick={() => pickFile(editor, "audio/*", true, uploadAudioAction)}
|
||||
>
|
||||
{t("Audio")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconFileTypePdf size={16} />}
|
||||
onClick={() =>
|
||||
pickFile(editor, "application/pdf", false, uploadPdfAction)
|
||||
}
|
||||
>
|
||||
PDF
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconPaperclip size={16} />}
|
||||
onClick={() =>
|
||||
pickFile(editor, "", true, uploadAttachmentAction, true)
|
||||
}
|
||||
>
|
||||
{t("File attachment")}
|
||||
</Menu.Item>
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
);
|
||||
};
|
||||
-217
@@ -1,217 +0,0 @@
|
||||
import { FC } from "react";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import { ActionIcon, Menu, Tooltip } from "@mantine/core";
|
||||
import {
|
||||
IconAppWindow,
|
||||
IconCalendar,
|
||||
IconCaretRightFilled,
|
||||
IconChevronDown,
|
||||
IconInfoCircle,
|
||||
IconMath,
|
||||
IconMathFunction,
|
||||
IconRotate2,
|
||||
IconSitemap,
|
||||
IconTag,
|
||||
} from "@tabler/icons-react";
|
||||
import IconExcalidraw from "@/components/icons/icon-excalidraw";
|
||||
import IconMermaid from "@/components/icons/icon-mermaid";
|
||||
import IconDrawio from "@/components/icons/icon-drawio";
|
||||
import {
|
||||
AirtableIcon,
|
||||
FigmaIcon,
|
||||
FramerIcon,
|
||||
GoogleDriveIcon,
|
||||
GoogleSheetsIcon,
|
||||
LoomIcon,
|
||||
MiroIcon,
|
||||
TypeformIcon,
|
||||
VimeoIcon,
|
||||
YoutubeIcon,
|
||||
} from "@/components/icons";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
interface Props {
|
||||
editor: Editor;
|
||||
}
|
||||
|
||||
export const MoreInsertsGroup: FC<Props> = ({ editor }) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const setEmbed = (provider: string) =>
|
||||
editor.chain().focus().setEmbed({ provider }).run();
|
||||
|
||||
const insertDate = () => {
|
||||
const currentDate = new Date().toLocaleDateString("en-US", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
});
|
||||
editor.chain().focus().insertContent(currentDate).run();
|
||||
};
|
||||
|
||||
return (
|
||||
<Menu shadow="md" position="bottom-start" withArrow={false} width={240}>
|
||||
<Menu.Target>
|
||||
<Tooltip label={t("More inserts")} withArrow>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="dark"
|
||||
size="md"
|
||||
aria-label={t("More inserts")}
|
||||
>
|
||||
<IconChevronDown size={16} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown mah={400} style={{ overflowY: "auto" }}>
|
||||
<Menu.Label>{t("Advanced")}</Menu.Label>
|
||||
<Menu.Item
|
||||
leftSection={<IconInfoCircle size={16} />}
|
||||
onClick={() => editor.chain().focus().toggleCallout().run()}
|
||||
>
|
||||
{t("Callout")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconCaretRightFilled size={16} />}
|
||||
onClick={() => editor.chain().focus().setDetails().run()}
|
||||
>
|
||||
{t("Toggle block")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconTag size={16} />}
|
||||
onClick={() =>
|
||||
editor.chain().focus().setStatus({ text: "", color: "gray" }).run()
|
||||
}
|
||||
>
|
||||
{t("Status")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconSitemap size={16} />}
|
||||
onClick={() => editor.chain().focus().insertSubpages().run()}
|
||||
>
|
||||
{t("Subpages")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconRotate2 size={16} />}
|
||||
onClick={() =>
|
||||
editor.chain().focus().insertTransclusionSource().run()
|
||||
}
|
||||
>
|
||||
{t("Synced block")}
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Divider />
|
||||
<Menu.Label>{t("Diagrams")}</Menu.Label>
|
||||
<Menu.Item
|
||||
leftSection={<IconMermaid size={16} />}
|
||||
onClick={() =>
|
||||
editor
|
||||
.chain()
|
||||
.focus()
|
||||
.setCodeBlock({ language: "mermaid" })
|
||||
.insertContent("flowchart LR\n A --> B")
|
||||
.run()
|
||||
}
|
||||
>
|
||||
{t("Mermaid diagram")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconDrawio size={16} />}
|
||||
onClick={() => editor.chain().focus().setDrawio().run()}
|
||||
>
|
||||
Draw.io
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconExcalidraw size={16} />}
|
||||
onClick={() => editor.chain().focus().setExcalidraw().run()}
|
||||
>
|
||||
Excalidraw
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Divider />
|
||||
<Menu.Label>{t("Embeds")}</Menu.Label>
|
||||
<Menu.Item
|
||||
leftSection={<IconAppWindow size={16} />}
|
||||
onClick={() => setEmbed("iframe")}
|
||||
>
|
||||
Iframe
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<YoutubeIcon size={16} />}
|
||||
onClick={() => setEmbed("youtube")}
|
||||
>
|
||||
YouTube
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<VimeoIcon size={16} />}
|
||||
onClick={() => setEmbed("vimeo")}
|
||||
>
|
||||
Vimeo
|
||||
</Menu.Item>
|
||||
<Menu.Item leftSection={<LoomIcon size={16} />} onClick={() => setEmbed("loom")}>
|
||||
Loom
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<FigmaIcon size={16} />}
|
||||
onClick={() => setEmbed("figma")}
|
||||
>
|
||||
Figma
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<AirtableIcon size={16} />}
|
||||
onClick={() => setEmbed("airtable")}
|
||||
>
|
||||
Airtable
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<TypeformIcon size={16} />}
|
||||
onClick={() => setEmbed("typeform")}
|
||||
>
|
||||
Typeform
|
||||
</Menu.Item>
|
||||
<Menu.Item leftSection={<MiroIcon size={16} />} onClick={() => setEmbed("miro")}>
|
||||
Miro
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<FramerIcon size={16} />}
|
||||
onClick={() => setEmbed("framer")}
|
||||
>
|
||||
Framer
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<GoogleDriveIcon size={16} />}
|
||||
onClick={() => setEmbed("gdrive")}
|
||||
>
|
||||
Google Drive
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<GoogleSheetsIcon size={16} />}
|
||||
onClick={() => setEmbed("gsheets")}
|
||||
>
|
||||
Google Sheets
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Divider />
|
||||
<Menu.Label>{t("Utility")}</Menu.Label>
|
||||
<Menu.Item
|
||||
leftSection={<IconCalendar size={16} />}
|
||||
onClick={insertDate}
|
||||
>
|
||||
{t("Date")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconMathFunction size={16} />}
|
||||
onClick={() => editor.chain().focus().setMathInline().run()}
|
||||
>
|
||||
{t("Math inline")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconMath size={16} />}
|
||||
onClick={() => editor.chain().focus().setMathBlock().run()}
|
||||
>
|
||||
{t("Math block")}
|
||||
</Menu.Item>
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
);
|
||||
};
|
||||
-117
@@ -1,117 +0,0 @@
|
||||
import { FC } from "react";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import { ActionIcon, Menu, Tooltip } from "@mantine/core";
|
||||
import {
|
||||
IconAt,
|
||||
IconColumns2,
|
||||
IconColumns3,
|
||||
IconMoodSmile,
|
||||
IconTable,
|
||||
} from "@tabler/icons-react";
|
||||
import { IconColumns4 } from "@/components/icons/icon-columns-4";
|
||||
import { IconColumns5 } from "@/components/icons/icon-columns-5";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
interface Props {
|
||||
editor: Editor;
|
||||
}
|
||||
|
||||
export const QuickInsertsGroup: FC<Props> = ({ editor }) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<ActionIcon.Group>
|
||||
<Tooltip label={t("Mention")} withArrow>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="dark"
|
||||
size="md"
|
||||
aria-label={t("Mention")}
|
||||
onClick={() => editor.chain().focus().insertContent("@").run()}
|
||||
>
|
||||
<IconAt size={16} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
<Tooltip label={t("Emoji")} withArrow>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="dark"
|
||||
size="md"
|
||||
aria-label={t("Emoji")}
|
||||
onClick={() => editor.chain().focus().insertContent(":").run()}
|
||||
>
|
||||
<IconMoodSmile size={16} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
<Menu shadow="md" position="bottom-start" withArrow={false}>
|
||||
<Menu.Target>
|
||||
<Tooltip label={t("Columns")} withArrow>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="dark"
|
||||
size="md"
|
||||
aria-label={t("Columns")}
|
||||
>
|
||||
<IconColumns2 size={16} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
<Menu.Item
|
||||
leftSection={<IconColumns2 size={16} />}
|
||||
onClick={() =>
|
||||
editor.chain().focus().insertColumns({ layout: "two_equal" }).run()
|
||||
}
|
||||
>
|
||||
{t("{{count}} Columns", { count: 2 })}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconColumns3 size={16} />}
|
||||
onClick={() =>
|
||||
editor
|
||||
.chain()
|
||||
.focus()
|
||||
.insertColumns({ layout: "three_equal" })
|
||||
.run()
|
||||
}
|
||||
>
|
||||
{t("{{count}} Columns", { count: 3 })}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconColumns4 size={16} />}
|
||||
onClick={() =>
|
||||
editor.chain().focus().insertColumns({ layout: "four_equal" }).run()
|
||||
}
|
||||
>
|
||||
{t("{{count}} Columns", { count: 4 })}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconColumns5 size={16} />}
|
||||
onClick={() =>
|
||||
editor.chain().focus().insertColumns({ layout: "five_equal" }).run()
|
||||
}
|
||||
>
|
||||
{t("{{count}} Columns", { count: 5 })}
|
||||
</Menu.Item>
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
<Tooltip label={t("Table")} withArrow>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="dark"
|
||||
size="md"
|
||||
aria-label={t("Table")}
|
||||
onClick={() =>
|
||||
editor
|
||||
.chain()
|
||||
.focus()
|
||||
.insertTable({ rows: 3, cols: 3, withHeaderRow: true })
|
||||
.run()
|
||||
}
|
||||
>
|
||||
<IconTable size={16} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</ActionIcon.Group>
|
||||
);
|
||||
};
|
||||
@@ -1,50 +0,0 @@
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import { useEditorState } from "@tiptap/react";
|
||||
|
||||
export interface ToolbarState {
|
||||
isBold: boolean;
|
||||
isItalic: boolean;
|
||||
isUnderline: boolean;
|
||||
isStrike: boolean;
|
||||
isCode: boolean;
|
||||
isSubscript: boolean;
|
||||
isSuperscript: boolean;
|
||||
isBulletList: boolean;
|
||||
isOrderedList: boolean;
|
||||
isTaskList: boolean;
|
||||
canUndo: boolean;
|
||||
canRedo: boolean;
|
||||
}
|
||||
|
||||
// Undo/redo come from either StarterKit's history or the Yjs collaboration
|
||||
// history extension. During the brief moment a page is rendered with the
|
||||
// static editor (mainExtensions only, undoRedo disabled), neither is loaded
|
||||
// and editor.can().undo/redo is undefined.
|
||||
function safeCan(editor: Editor, command: "undo" | "redo"): boolean {
|
||||
const can = editor.can() as Record<string, unknown>;
|
||||
const fn = can[command];
|
||||
return typeof fn === "function" ? (fn as () => boolean)() : false;
|
||||
}
|
||||
|
||||
export function useToolbarState(editor: Editor | null): ToolbarState | null {
|
||||
return useEditorState({
|
||||
editor,
|
||||
selector: (ctx) => {
|
||||
if (!ctx.editor) return null;
|
||||
return {
|
||||
isBold: ctx.editor.isActive("bold"),
|
||||
isItalic: ctx.editor.isActive("italic"),
|
||||
isUnderline: ctx.editor.isActive("underline"),
|
||||
isStrike: ctx.editor.isActive("strike"),
|
||||
isCode: ctx.editor.isActive("code"),
|
||||
isSubscript: ctx.editor.isActive("subscript"),
|
||||
isSuperscript: ctx.editor.isActive("superscript"),
|
||||
isBulletList: ctx.editor.isActive("bulletList"),
|
||||
isOrderedList: ctx.editor.isActive("orderedList"),
|
||||
isTaskList: ctx.editor.isActive("taskList"),
|
||||
canUndo: safeCan(ctx.editor, "undo"),
|
||||
canRedo: safeCan(ctx.editor, "redo"),
|
||||
};
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -3,6 +3,7 @@ import React, {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
@@ -35,7 +36,7 @@ import {
|
||||
usePageQuery,
|
||||
} from "@/features/page/queries/page-query";
|
||||
import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom";
|
||||
import { treeModel } from "@/features/page/tree/model/tree-model";
|
||||
import { SimpleTree } from "react-arborist";
|
||||
import { SpaceTreeNode } from "@/features/page/tree/types";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useQueryEmit } from "@/features/websocket/use-query-emit";
|
||||
@@ -52,6 +53,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
|
||||
const [renderItems, setRenderItems] = useState<MentionSuggestionItem[]>([]);
|
||||
const { t } = useTranslation();
|
||||
const [data, setData] = useAtom(treeDataAtom);
|
||||
const tree = useMemo(() => new SimpleTree<SpaceTreeNode>(data), [data]);
|
||||
const createPageMutation = useCreatePageMutation();
|
||||
const emit = useQueryEmit();
|
||||
const isInCommentContext = props.isInCommentContext ?? false;
|
||||
@@ -218,20 +220,20 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
|
||||
try {
|
||||
createdPage = await createPageMutation.mutateAsync(payload);
|
||||
const parentId = page.id || null;
|
||||
const newNode: SpaceTreeNode = {
|
||||
const data = {
|
||||
id: createdPage.id,
|
||||
slugId: createdPage.slugId,
|
||||
name: createdPage.title,
|
||||
position: createdPage.position,
|
||||
spaceId: createdPage.spaceId,
|
||||
parentPageId: createdPage.parentPageId,
|
||||
hasChildren: false,
|
||||
children: [],
|
||||
};
|
||||
} as any;
|
||||
|
||||
const lastIndex = data.length;
|
||||
const lastIndex = tree.data.length;
|
||||
|
||||
setData(treeModel.insert(data, parentId, newNode, lastIndex));
|
||||
tree.create({ parentId, index: lastIndex, data });
|
||||
setData(tree.data);
|
||||
|
||||
props.command({
|
||||
id: uuid7(),
|
||||
@@ -249,7 +251,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
|
||||
payload: {
|
||||
parentId,
|
||||
index: lastIndex,
|
||||
data: newNode,
|
||||
data,
|
||||
},
|
||||
});
|
||||
}, 50);
|
||||
|
||||
@@ -25,7 +25,6 @@ import {
|
||||
IconColumns3,
|
||||
IconColumns2,
|
||||
IconTag,
|
||||
IconMoodSmile,
|
||||
IconRotate2,
|
||||
} from "@tabler/icons-react";
|
||||
import {
|
||||
@@ -134,7 +133,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
|
||||
{
|
||||
title: "Numbered list",
|
||||
description: "Create a list with numbering.",
|
||||
searchTerms: ["numbered", "ordered", "list", "ol"],
|
||||
searchTerms: ["numbered", "ordered", "list"],
|
||||
icon: IconListNumbers,
|
||||
command: ({ editor, range }: CommandProps) => {
|
||||
editor.chain().focus().deleteRange(range).toggleOrderedList().run();
|
||||
@@ -478,26 +477,10 @@ const CommandGroups: SlashMenuGroupedItemsType = {
|
||||
.run();
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Emoji",
|
||||
description: "Insert emoji.",
|
||||
searchTerms: ["emoji", "icon", "smiley", "emoticon", "symbol", "reaction"],
|
||||
icon: IconMoodSmile,
|
||||
command: ({ editor, range }: CommandProps) => {
|
||||
editor.chain().focus().deleteRange(range).insertContent(":").run();
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Subpages (Child pages)",
|
||||
description: "List all subpages of the current page",
|
||||
searchTerms: [
|
||||
"subpages",
|
||||
"child",
|
||||
"children",
|
||||
"nested",
|
||||
"hierarchy",
|
||||
"toc",
|
||||
],
|
||||
searchTerms: ["subpages", "child", "children", "nested", "hierarchy"],
|
||||
icon: IconSitemap,
|
||||
command: ({ editor, range }: CommandProps) => {
|
||||
editor.chain().focus().deleteRange(range).insertSubpages().run();
|
||||
|
||||
@@ -25,7 +25,7 @@ const recalculateLinks = (nodePos: NodePos[]) => {
|
||||
(acc, item) => {
|
||||
const label = item.node.textContent;
|
||||
const level = Number(item.node.attrs.level);
|
||||
if (label.length && level <= 4) {
|
||||
if (label.length && level <= 3) {
|
||||
acc.push({
|
||||
label,
|
||||
level,
|
||||
|
||||
@@ -1,126 +0,0 @@
|
||||
import React, { useCallback, useEffect } from "react";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import { useEditorState } from "@tiptap/react";
|
||||
import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
|
||||
import { TextSelection } from "@tiptap/pm/state";
|
||||
import { columnResizingPluginKey } from "@tiptap/pm/tables";
|
||||
import { useFloating, offset, autoUpdate, hide } from "@floating-ui/react";
|
||||
import { Menu, UnstyledButton } from "@mantine/core";
|
||||
import { IconChevronDown } from "@tabler/icons-react";
|
||||
import clsx from "clsx";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { isCellSelection } from "@docmost/editor-ext";
|
||||
import { CellChevronMenu } from "./menus/cell-chevron-menu";
|
||||
import classes from "./handle.module.css";
|
||||
|
||||
interface CellChevronProps {
|
||||
editor: Editor;
|
||||
cellPos: number;
|
||||
tableNode: ProseMirrorNode;
|
||||
tablePos: number;
|
||||
}
|
||||
|
||||
export const CellChevron = React.memo(function CellChevron({
|
||||
editor,
|
||||
cellPos,
|
||||
tableNode,
|
||||
tablePos,
|
||||
}: CellChevronProps) {
|
||||
const { t } = useTranslation();
|
||||
const cellDom = editor.view.nodeDOM(cellPos) as HTMLElement | null;
|
||||
|
||||
const { refs, floatingStyles, middlewareData } = useFloating({
|
||||
placement: "top-end",
|
||||
// crossAxis pulls the chevron INWARD from the cell's right edge. We need
|
||||
// enough inset that we don't overlap PM-tables' column-resize hot zone
|
||||
// (~5px wide around the column boundary). Without this, hovering near the
|
||||
// column edge picks up the chevron's `cursor: pointer` instead of
|
||||
// `col-resize`, and a drag near the edge clicks the chevron.
|
||||
middleware: [offset({ mainAxis: -22, crossAxis: -10 }), hide()],
|
||||
whileElementsMounted: autoUpdate,
|
||||
strategy: "absolute",
|
||||
});
|
||||
const isReferenceHidden = !!middlewareData.hide?.referenceHidden;
|
||||
|
||||
useEffect(() => {
|
||||
refs.setReference(cellDom);
|
||||
}, [cellDom, refs]);
|
||||
|
||||
// Hide the chevron while the user is resizing a column. PM-tables sets
|
||||
// `activeHandle > -1` whenever the mouse is near a column boundary OR
|
||||
// actively dragging it. Either way we don't want the chevron in the way.
|
||||
const isResizingColumn = useEditorState({
|
||||
editor,
|
||||
selector: (ctx) => {
|
||||
if (!ctx.editor) return false;
|
||||
const state = columnResizingPluginKey.getState(ctx.editor.state) as
|
||||
| { activeHandle: number }
|
||||
| undefined;
|
||||
return !!state && state.activeHandle > -1;
|
||||
},
|
||||
});
|
||||
|
||||
const onOpen = useCallback(() => {
|
||||
const current = editor.state.selection;
|
||||
|
||||
// Preserve an existing multi-cell CellSelection that already covers
|
||||
// this cell so merge etc. operate on the user's whole range.
|
||||
let preserveExisting = false;
|
||||
if (isCellSelection(current)) {
|
||||
current.forEachCell((_node, pos) => {
|
||||
if (pos === cellPos) preserveExisting = true;
|
||||
});
|
||||
}
|
||||
|
||||
if (!preserveExisting) {
|
||||
// Drop a collapsed cursor inside the cell rather than a single-cell
|
||||
// CellSelection — PM-tables paints the latter as a text-range
|
||||
// highlight on the cell content.
|
||||
try {
|
||||
const $inside = editor.state.doc.resolve(cellPos + 1);
|
||||
const sel = TextSelection.near($inside, 1);
|
||||
editor.view.dispatch(editor.state.tr.setSelection(sel));
|
||||
} catch {}
|
||||
}
|
||||
editor.commands.freezeHandles();
|
||||
}, [editor, cellPos]);
|
||||
|
||||
const onClose = useCallback(() => {
|
||||
editor.commands.unfreezeHandles();
|
||||
}, [editor]);
|
||||
|
||||
if (!cellDom) return null;
|
||||
if (isResizingColumn) return null;
|
||||
|
||||
return (
|
||||
<Menu
|
||||
position="bottom-end"
|
||||
onOpen={onOpen}
|
||||
onClose={onClose}
|
||||
withinPortal
|
||||
shadow="md"
|
||||
>
|
||||
<Menu.Target>
|
||||
<UnstyledButton
|
||||
ref={refs.setFloating}
|
||||
style={{
|
||||
...floatingStyles,
|
||||
...(isReferenceHidden ? { visibility: "hidden" as const } : {}),
|
||||
}}
|
||||
className={clsx(classes.cellChevron)}
|
||||
aria-label={t("Cell actions")}
|
||||
>
|
||||
<IconChevronDown size={14} />
|
||||
</UnstyledButton>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
<CellChevronMenu
|
||||
editor={editor}
|
||||
cellPos={cellPos}
|
||||
tableNode={tableNode}
|
||||
tablePos={tablePos}
|
||||
/>
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
);
|
||||
});
|
||||
@@ -1,127 +0,0 @@
|
||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
|
||||
import { useFloating, offset, autoUpdate, hide } from "@floating-ui/react";
|
||||
import { Menu } from "@mantine/core";
|
||||
import clsx from "clsx";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useTableHandleDrag } from "./hooks/use-table-handle-drag";
|
||||
import { useColumnRowMenuLifecycle } from "./hooks/use-column-row-menu-lifecycle";
|
||||
import { ColumnHandleMenu } from "./menus/column-handle-menu";
|
||||
import classes from "./handle.module.css";
|
||||
|
||||
interface ColumnHandleProps {
|
||||
editor: Editor;
|
||||
index: number;
|
||||
anchorPos: number;
|
||||
tableNode: ProseMirrorNode;
|
||||
tablePos: number;
|
||||
}
|
||||
|
||||
export const ColumnHandle = React.memo(function ColumnHandle({
|
||||
editor,
|
||||
index,
|
||||
anchorPos,
|
||||
tableNode,
|
||||
tablePos,
|
||||
}: ColumnHandleProps) {
|
||||
const { t } = useTranslation();
|
||||
// Hold the cell DOM in a ref-backed state so we never unmount the handle
|
||||
// mid-drag. A remote edit can transiently flip `nodeDOM(anchorPos)` to null
|
||||
// (the plugin re-emits `hoveringCell` with the mapped pos a tick later);
|
||||
// unmounting the source element here would make pragmatic-dnd silently
|
||||
// abort the active drag.
|
||||
const lookupCellDom = editor.view.nodeDOM(anchorPos) as HTMLElement | null;
|
||||
const [cellDom, setCellDom] = useState<HTMLElement | null>(lookupCellDom);
|
||||
const lastCellDomRef = useRef<HTMLElement | null>(lookupCellDom);
|
||||
useEffect(() => {
|
||||
if (lookupCellDom && lookupCellDom !== lastCellDomRef.current) {
|
||||
lastCellDomRef.current = lookupCellDom;
|
||||
setCellDom(lookupCellDom);
|
||||
}
|
||||
}, [lookupCellDom]);
|
||||
|
||||
const [handleEl, setHandleEl] = useState<HTMLDivElement | null>(null);
|
||||
|
||||
const { refs, floatingStyles, middlewareData } = useFloating({
|
||||
placement: "top",
|
||||
middleware: [offset(-4), hide()],
|
||||
whileElementsMounted: autoUpdate,
|
||||
});
|
||||
const isReferenceHidden = !!middlewareData.hide?.referenceHidden;
|
||||
|
||||
useEffect(() => {
|
||||
refs.setReference(cellDom);
|
||||
}, [cellDom, refs]);
|
||||
|
||||
// `cellDom` is inside the table, so `closest('.tableWrapper')` finds the
|
||||
// wrapper for this drag's auto-scroll. The handle itself lives in a
|
||||
// floating layer outside the editor DOM, so we can't walk up from it.
|
||||
const wrapper = cellDom?.closest<HTMLElement>(".tableWrapper") ?? null;
|
||||
|
||||
const [menuOpened, setMenuOpened] = useState(false);
|
||||
const closeMenu = useCallback(() => setMenuOpened(false), []);
|
||||
useTableHandleDrag(editor, "col", handleEl, wrapper, closeMenu);
|
||||
|
||||
const { onOpen, onClose } = useColumnRowMenuLifecycle({
|
||||
editor,
|
||||
orientation: "col",
|
||||
index,
|
||||
tableNode,
|
||||
tablePos,
|
||||
});
|
||||
|
||||
if (!cellDom) return null;
|
||||
|
||||
return (
|
||||
<Menu
|
||||
opened={menuOpened}
|
||||
onChange={setMenuOpened}
|
||||
position="bottom-start"
|
||||
onOpen={onOpen}
|
||||
onClose={onClose}
|
||||
withinPortal
|
||||
shadow="md"
|
||||
>
|
||||
<Menu.Target>
|
||||
<div
|
||||
ref={(node) => {
|
||||
refs.setFloating(node);
|
||||
setHandleEl(node);
|
||||
}}
|
||||
style={{
|
||||
...floatingStyles,
|
||||
...(isReferenceHidden ? { visibility: "hidden" as const } : {}),
|
||||
}}
|
||||
className={clsx(classes.handle, classes.columnHandle)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={t("Column actions")}
|
||||
>
|
||||
<span style={{ pointerEvents: "none", display: "inline-flex" }}>
|
||||
<GripIcon />
|
||||
</span>
|
||||
</div>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
<ColumnHandleMenu
|
||||
editor={editor}
|
||||
index={index}
|
||||
tableNode={tableNode}
|
||||
tablePos={tablePos}
|
||||
/>
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
);
|
||||
});
|
||||
|
||||
function GripIcon() {
|
||||
return (
|
||||
<svg viewBox="0 0 10 10" width="14" height="14" aria-hidden>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M3,2 A1,1 0 1 1 3,0 A1,1 0 0 1 3,2 Z M3,6 A1,1 0 1 1 3,4 A1,1 0 0 1 3,6 Z M3,10 A1,1 0 1 1 3,8 A1,1 0 0 1 3,10 Z M7,2 A1,1 0 1 1 7,0 A1,1 0 0 1 7,2 Z M7,6 A1,1 0 1 1 7,4 A1,1 0 0 1 7,6 Z M7,10 A1,1 0 1 1 7,8 A1,1 0 0 1 7,10 Z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -1,108 +0,0 @@
|
||||
.handle {
|
||||
position: absolute;
|
||||
z-index: 50;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
color: rgba(55, 53, 47, 0.45);
|
||||
background: var(--mantine-color-body);
|
||||
border: 1px solid rgba(55, 53, 47, 0.12);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
|
||||
cursor: grab;
|
||||
padding: 0;
|
||||
transition: background-color 120ms ease, color 120ms ease;
|
||||
|
||||
@mixin dark {
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
background: var(--mantine-color-dark-7);
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
.handle:hover {
|
||||
background: light-dark(
|
||||
var(--mantine-color-gray-1),
|
||||
var(--mantine-color-dark-5)
|
||||
);
|
||||
color: light-dark(
|
||||
var(--mantine-color-gray-7),
|
||||
var(--mantine-color-dark-0)
|
||||
);
|
||||
}
|
||||
|
||||
.handle:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.columnHandle {
|
||||
width: 28px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.columnHandle svg {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.rowHandle {
|
||||
width: 16px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.handle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cellChevron {
|
||||
position: absolute;
|
||||
z-index: 50;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: light-dark(
|
||||
var(--mantine-color-gray-7),
|
||||
var(--mantine-color-dark-1)
|
||||
);
|
||||
background: light-dark(
|
||||
var(--mantine-color-gray-1),
|
||||
var(--mantine-color-dark-5)
|
||||
);
|
||||
border: 1px solid rgba(55, 53, 47, 0.12);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
transition: background-color 120ms ease, color 120ms ease;
|
||||
|
||||
@mixin dark {
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
.cellChevron:hover {
|
||||
background: light-dark(
|
||||
var(--mantine-color-gray-2),
|
||||
var(--mantine-color-dark-4)
|
||||
);
|
||||
color: light-dark(
|
||||
var(--mantine-color-gray-8),
|
||||
var(--mantine-color-dark-0)
|
||||
);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.cellChevron {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
.handle,
|
||||
.cellChevron {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
-40
@@ -1,40 +0,0 @@
|
||||
import { useCallback } from "react";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
|
||||
import { buildRowOrColumnSelection, Orientation } from "../lib/select-row-column";
|
||||
|
||||
interface Args {
|
||||
editor: Editor;
|
||||
orientation: Orientation;
|
||||
index: number;
|
||||
tableNode: ProseMirrorNode;
|
||||
tablePos: number;
|
||||
}
|
||||
|
||||
export function useColumnRowMenuLifecycle({
|
||||
editor,
|
||||
orientation,
|
||||
index,
|
||||
tableNode,
|
||||
tablePos,
|
||||
}: Args) {
|
||||
const onOpen = useCallback(() => {
|
||||
const selection = buildRowOrColumnSelection(
|
||||
editor.state,
|
||||
tableNode,
|
||||
tablePos,
|
||||
orientation,
|
||||
index,
|
||||
);
|
||||
const tr = editor.state.tr;
|
||||
if (selection) tr.setSelection(selection);
|
||||
editor.view.dispatch(tr);
|
||||
editor.commands.freezeHandles();
|
||||
}, [editor, orientation, index, tableNode, tablePos]);
|
||||
|
||||
const onClose = useCallback(() => {
|
||||
editor.commands.unfreezeHandles();
|
||||
}, [editor]);
|
||||
|
||||
return { onOpen, onClose };
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
import { useCallback } from "react";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
|
||||
import { TableMap } from "@tiptap/pm/tables";
|
||||
|
||||
type Scope =
|
||||
| { kind: "col"; index: number }
|
||||
| { kind: "row"; index: number }
|
||||
| { kind: "cell"; cellPos: number };
|
||||
|
||||
export function useTableClear(
|
||||
editor: Editor,
|
||||
tableNode: ProseMirrorNode,
|
||||
tablePos: number,
|
||||
scope: Scope,
|
||||
) {
|
||||
return useCallback(() => {
|
||||
const tr = editor.state.tr;
|
||||
const tableStart = tablePos + 1;
|
||||
const map = TableMap.get(tableNode);
|
||||
const paragraph = editor.schema.nodes.paragraph;
|
||||
if (!paragraph) return;
|
||||
|
||||
const cellOffsets: number[] = [];
|
||||
|
||||
if (scope.kind === "col") {
|
||||
for (let row = 0; row < map.height; row++) {
|
||||
cellOffsets.push(map.map[row * map.width + scope.index]);
|
||||
}
|
||||
} else if (scope.kind === "row") {
|
||||
for (let col = 0; col < map.width; col++) {
|
||||
cellOffsets.push(map.map[scope.index * map.width + col]);
|
||||
}
|
||||
}
|
||||
|
||||
const targets =
|
||||
scope.kind === "cell"
|
||||
? [scope.cellPos]
|
||||
: Array.from(new Set(cellOffsets)).map((o) => tableStart + o);
|
||||
|
||||
// Process in reverse position order so earlier replacements don't shift later ones.
|
||||
targets.sort((a, b) => b - a);
|
||||
|
||||
for (const cellPos of targets) {
|
||||
const node = tr.doc.nodeAt(cellPos);
|
||||
if (!node) continue;
|
||||
const start = cellPos + 1;
|
||||
const end = cellPos + node.nodeSize - 1;
|
||||
tr.replaceWith(start, end, paragraph.create());
|
||||
}
|
||||
|
||||
if (tr.docChanged) editor.view.dispatch(tr);
|
||||
}, [editor, tableNode, tablePos, scope]);
|
||||
}
|
||||
-79
@@ -1,79 +0,0 @@
|
||||
import { useEffect } from "react";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
|
||||
import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
|
||||
import { disableNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview";
|
||||
import {
|
||||
autoScrollForElements,
|
||||
autoScrollWindowForElements,
|
||||
} from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
|
||||
import { getTableHandlePluginSpec } from "@docmost/editor-ext";
|
||||
|
||||
// Uses pragmatic-drag-and-drop instead of native HTML5 DnD because the native
|
||||
// dragstart→dragover→drop lifecycle was being silently cancelled
|
||||
export function useTableHandleDrag(
|
||||
editor: Editor,
|
||||
orientation: "col" | "row",
|
||||
element: HTMLElement | null,
|
||||
wrapper: HTMLElement | null,
|
||||
onDragStart?: () => void,
|
||||
) {
|
||||
useEffect(() => {
|
||||
if (!element) return;
|
||||
|
||||
return combine(
|
||||
draggable({
|
||||
element,
|
||||
getInitialData: () => ({ type: `table-${orientation}` }),
|
||||
onGenerateDragPreview: ({ nativeSetDragImage }) => {
|
||||
// We render our own floating preview via PreviewController, so hide
|
||||
// the native drag image entirely.
|
||||
disableNativeDragPreview({ nativeSetDragImage });
|
||||
},
|
||||
onDragStart: ({ location }) => {
|
||||
// The menu (if open from a prior click on the handle) won't dismiss
|
||||
// on its own — pragmatic-dnd swallows the events Mantine listens for.
|
||||
onDragStart?.();
|
||||
const spec = getTableHandlePluginSpec(editor);
|
||||
if (!spec) return;
|
||||
const { clientX, clientY } = location.initial.input;
|
||||
spec.startDragFromHandle(orientation, clientX, clientY);
|
||||
},
|
||||
onDrag: ({ location }) => {
|
||||
const spec = getTableHandlePluginSpec(editor);
|
||||
if (!spec) return;
|
||||
const { clientX, clientY } = location.current.input;
|
||||
spec.updateDragPosition(clientX, clientY);
|
||||
},
|
||||
onDrop: ({ location }) => {
|
||||
const spec = getTableHandlePluginSpec(editor);
|
||||
if (!spec) return;
|
||||
const { clientX, clientY } = location.current.input;
|
||||
// Make sure the final position is recorded before committing the drop.
|
||||
spec.updateDragPosition(clientX, clientY);
|
||||
spec.commitDrop();
|
||||
spec.endDrag();
|
||||
},
|
||||
}),
|
||||
// Wrapper owns horizontal auto-scroll (it has `overflow-x: auto`);
|
||||
// window owns vertical. Locking each axis prevents the window's
|
||||
// horizontal auto-scroll from running when the cursor approaches
|
||||
// the viewport edge — without the cap, the preview's `left` follows
|
||||
// the cursor past the viewport, the page widens to contain it, the
|
||||
// plugin scrolls the now-wider page further, and the loop never
|
||||
// ends.
|
||||
// Only the column handle registers wrapper auto-scroll (rows can't
|
||||
// scroll horizontally) — registering twice on the same wrapper
|
||||
// triggers a dev-mode warning from pragmatic-dnd-auto-scroll.
|
||||
orientation === "col" &&
|
||||
wrapper &&
|
||||
!wrapper.classList.contains("tableWrapperNoOverflow")
|
||||
? autoScrollForElements({
|
||||
element: wrapper,
|
||||
getAllowedAxis: () => "horizontal",
|
||||
})
|
||||
: () => {},
|
||||
autoScrollWindowForElements({ getAllowedAxis: () => "vertical" }),
|
||||
);
|
||||
}, [editor, orientation, element, wrapper, onDragStart]);
|
||||
}
|
||||
-23
@@ -1,23 +0,0 @@
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import { useEditorState } from "@tiptap/react";
|
||||
import { TableDndKey, TableHandleState } from "@docmost/editor-ext";
|
||||
|
||||
const FALLBACK: TableHandleState = {
|
||||
hoveringCell: null,
|
||||
tableNode: null,
|
||||
tablePos: null,
|
||||
dragging: null,
|
||||
frozen: false,
|
||||
};
|
||||
|
||||
export function useTableHandleState(editor: Editor | null): TableHandleState {
|
||||
const state = useEditorState({
|
||||
editor,
|
||||
selector: (ctx) => {
|
||||
if (!ctx.editor) return null;
|
||||
return TableDndKey.getState(ctx.editor.state) ?? null;
|
||||
},
|
||||
});
|
||||
|
||||
return state ?? FALLBACK;
|
||||
}
|
||||
-50
@@ -1,50 +0,0 @@
|
||||
import { useCallback, useMemo } from "react";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
|
||||
import { TableMap } from "@tiptap/pm/tables";
|
||||
import { moveColumn, moveRow } from "@docmost/editor-ext";
|
||||
|
||||
export type MoveDirection = "left" | "right" | "up" | "down";
|
||||
|
||||
export function useTableMoveRowColumn(
|
||||
editor: Editor,
|
||||
orientation: "col" | "row",
|
||||
index: number,
|
||||
direction: MoveDirection,
|
||||
tableNode: ProseMirrorNode,
|
||||
tablePos: number,
|
||||
) {
|
||||
const target =
|
||||
direction === "left" || direction === "up" ? index - 1 : index + 1;
|
||||
|
||||
const maxIndex = useMemo(() => {
|
||||
const map = TableMap.get(tableNode);
|
||||
return orientation === "col" ? map.width - 1 : map.height - 1;
|
||||
}, [tableNode, orientation]);
|
||||
|
||||
const canMove = target >= 0 && target <= maxIndex;
|
||||
|
||||
const handleMove = useCallback(() => {
|
||||
if (!canMove) return;
|
||||
const tr = editor.state.tr;
|
||||
const moved =
|
||||
orientation === "col"
|
||||
? moveColumn({
|
||||
tr,
|
||||
originIndex: index,
|
||||
targetIndex: target,
|
||||
select: true,
|
||||
pos: tablePos + 1,
|
||||
})
|
||||
: moveRow({
|
||||
tr,
|
||||
originIndex: index,
|
||||
targetIndex: target,
|
||||
select: true,
|
||||
pos: tablePos + 1,
|
||||
});
|
||||
if (moved) editor.view.dispatch(tr);
|
||||
}, [editor, orientation, index, target, tablePos, canMove]);
|
||||
|
||||
return { canMove, handleMove };
|
||||
}
|
||||
@@ -1,100 +0,0 @@
|
||||
import { useCallback, useMemo } from "react";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
|
||||
import {
|
||||
convertArrayOfRowsToTableNode,
|
||||
convertTableNodeToArrayOfRows,
|
||||
transpose,
|
||||
} from "@docmost/editor-ext";
|
||||
import {
|
||||
getCellSortText,
|
||||
isCellEmpty,
|
||||
isHeaderCell,
|
||||
type SortDirection,
|
||||
type SortableItem,
|
||||
sortItems,
|
||||
weaveItems,
|
||||
} from "../lib/sort-cells";
|
||||
|
||||
interface Args {
|
||||
editor: Editor;
|
||||
orientation: "col" | "row";
|
||||
index: number;
|
||||
tableNode: ProseMirrorNode;
|
||||
tablePos: number;
|
||||
direction: SortDirection;
|
||||
}
|
||||
|
||||
function tableHasMergedCells(tableNode: ProseMirrorNode): boolean {
|
||||
for (let r = 0; r < tableNode.childCount; r++) {
|
||||
const row = tableNode.child(r);
|
||||
for (let c = 0; c < row.childCount; c++) {
|
||||
const { colspan = 1, rowspan = 1 } = row.child(c).attrs;
|
||||
if (colspan > 1 || rowspan > 1) return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function isAllHeader(cells: (ProseMirrorNode | null)[]): boolean {
|
||||
return cells.every((c) => c !== null && isHeaderCell(c));
|
||||
}
|
||||
|
||||
export function useTableSort({
|
||||
editor,
|
||||
orientation,
|
||||
index,
|
||||
tableNode,
|
||||
tablePos,
|
||||
direction,
|
||||
}: Args) {
|
||||
const canSort = useMemo(() => {
|
||||
if (tableHasMergedCells(tableNode)) return false;
|
||||
|
||||
const rows = convertTableNodeToArrayOfRows(tableNode);
|
||||
const axes = orientation === "col" ? rows : transpose(rows);
|
||||
if (axes.length < 2) return false;
|
||||
|
||||
return axes.some((cells) => {
|
||||
if (isAllHeader(cells)) return false;
|
||||
const sortCell = cells[index];
|
||||
return !!sortCell && !isCellEmpty(sortCell);
|
||||
});
|
||||
}, [tableNode, orientation, index]);
|
||||
|
||||
const handleSort = useCallback(() => {
|
||||
if (!canSort) return;
|
||||
|
||||
const rows = convertTableNodeToArrayOfRows(tableNode);
|
||||
const axes = orientation === "col" ? rows : transpose(rows);
|
||||
|
||||
const items: SortableItem<(ProseMirrorNode | null)[]>[] = axes.map(
|
||||
(cells, originalOrder) => {
|
||||
const sortCell = cells[index];
|
||||
return {
|
||||
payload: cells,
|
||||
text: sortCell ? getCellSortText(sortCell) : "",
|
||||
isHeader: isAllHeader(cells),
|
||||
isEmpty: !sortCell || isCellEmpty(sortCell),
|
||||
originalOrder,
|
||||
};
|
||||
},
|
||||
);
|
||||
|
||||
const dataItems = items.filter((it) => !it.isHeader);
|
||||
const sortedData = sortItems(dataItems, direction);
|
||||
const woven = weaveItems(items, sortedData);
|
||||
|
||||
const newAxes = woven.map((it) => it.payload);
|
||||
const newRows = orientation === "col" ? newAxes : transpose(newAxes);
|
||||
|
||||
const newTable = convertArrayOfRowsToTableNode(tableNode, newRows);
|
||||
|
||||
const tr = editor.state.tr;
|
||||
tr.replaceWith(tablePos, tablePos + tableNode.nodeSize, newTable);
|
||||
|
||||
if (tr.docChanged) editor.view.dispatch(tr);
|
||||
}, [editor, tableNode, tablePos, orientation, index, direction, canSort]);
|
||||
|
||||
return { canSort, handleSort };
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
|
||||
import type { EditorState } from "@tiptap/pm/state";
|
||||
import { CellSelection, TableMap } from "@tiptap/pm/tables";
|
||||
|
||||
export type Orientation = "col" | "row";
|
||||
|
||||
export function buildRowOrColumnSelection(
|
||||
state: EditorState,
|
||||
tableNode: ProseMirrorNode,
|
||||
tablePos: number,
|
||||
orientation: Orientation,
|
||||
index: number,
|
||||
): CellSelection | null {
|
||||
const map = TableMap.get(tableNode);
|
||||
const tableStart = tablePos + 1;
|
||||
|
||||
if (orientation === "col") {
|
||||
if (index < 0 || index >= map.width) return null;
|
||||
const firstCellPos = tableStart + map.map[index];
|
||||
const lastCellPos =
|
||||
tableStart + map.map[(map.height - 1) * map.width + index];
|
||||
const $first = state.doc.resolve(firstCellPos);
|
||||
const $last = state.doc.resolve(lastCellPos);
|
||||
return CellSelection.colSelection($first, $last);
|
||||
}
|
||||
|
||||
if (index < 0 || index >= map.height) return null;
|
||||
const firstCellPos = tableStart + map.map[index * map.width];
|
||||
const lastCellPos =
|
||||
tableStart + map.map[index * map.width + (map.width - 1)];
|
||||
const $first = state.doc.resolve(firstCellPos);
|
||||
const $last = state.doc.resolve(lastCellPos);
|
||||
return CellSelection.rowSelection($first, $last);
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
|
||||
|
||||
export type SortDirection = "asc" | "desc";
|
||||
|
||||
export interface SortableItem<T> {
|
||||
payload: T;
|
||||
text: string;
|
||||
isHeader: boolean;
|
||||
isEmpty: boolean;
|
||||
originalOrder: number;
|
||||
}
|
||||
|
||||
const HEADER_TYPE_NAMES = new Set(["tableHeader", "table_header"]);
|
||||
|
||||
export function isHeaderCell(node: ProseMirrorNode): boolean {
|
||||
if (HEADER_TYPE_NAMES.has(node.type.name)) return true;
|
||||
return node.attrs?.header === true;
|
||||
}
|
||||
|
||||
export function getCellSortText(node: ProseMirrorNode): string {
|
||||
let text = "";
|
||||
node.descendants((child) => {
|
||||
if (child.isText) text += child.text ?? "";
|
||||
return true;
|
||||
});
|
||||
return text.trim().toLowerCase();
|
||||
}
|
||||
|
||||
export function isCellEmpty(node: ProseMirrorNode): boolean {
|
||||
return getCellSortText(node) === "";
|
||||
}
|
||||
|
||||
export const collator = new Intl.Collator(undefined, {
|
||||
sensitivity: "base",
|
||||
numeric: true,
|
||||
});
|
||||
|
||||
export function sortItems<T>(
|
||||
data: SortableItem<T>[],
|
||||
direction: SortDirection,
|
||||
): SortableItem<T>[] {
|
||||
return [...data].sort((a, b) => {
|
||||
if (a.isEmpty && !b.isEmpty) return 1;
|
||||
if (!a.isEmpty && b.isEmpty) return -1;
|
||||
if (a.isEmpty && b.isEmpty) return a.originalOrder - b.originalOrder;
|
||||
const cmp = collator.compare(a.text, b.text);
|
||||
return direction === "asc" ? cmp : -cmp;
|
||||
});
|
||||
}
|
||||
|
||||
export function weaveItems<T>(
|
||||
all: SortableItem<T>[],
|
||||
sortedData: SortableItem<T>[],
|
||||
): SortableItem<T>[] {
|
||||
const dataQueue = [...sortedData];
|
||||
return all.map((item) => (item.isHeader ? item : dataQueue.shift()!));
|
||||
}
|
||||
@@ -1,49 +0,0 @@
|
||||
import React from "react";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import { Menu } from "@mantine/core";
|
||||
import {
|
||||
IconAlignCenter,
|
||||
IconAlignLeft,
|
||||
IconAlignRight,
|
||||
} from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
interface AlignmentSubmenuProps {
|
||||
editor: Editor;
|
||||
}
|
||||
|
||||
export const AlignmentSubmenu = React.memo(function AlignmentSubmenu({
|
||||
editor,
|
||||
}: AlignmentSubmenuProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Menu.Sub position="right-start">
|
||||
<Menu.Sub.Target>
|
||||
<Menu.Sub.Item leftSection={<IconAlignLeft size={16} />}>
|
||||
{t("Text alignment")}
|
||||
</Menu.Sub.Item>
|
||||
</Menu.Sub.Target>
|
||||
<Menu.Sub.Dropdown>
|
||||
<Menu.Item
|
||||
leftSection={<IconAlignLeft size={16} />}
|
||||
onClick={() => editor.chain().focus().setTextAlign("left").run()}
|
||||
>
|
||||
{t("Align left")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconAlignCenter size={16} />}
|
||||
onClick={() => editor.chain().focus().setTextAlign("center").run()}
|
||||
>
|
||||
{t("Align center")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconAlignRight size={16} />}
|
||||
onClick={() => editor.chain().focus().setTextAlign("right").run()}
|
||||
>
|
||||
{t("Align right")}
|
||||
</Menu.Item>
|
||||
</Menu.Sub.Dropdown>
|
||||
</Menu.Sub>
|
||||
);
|
||||
});
|
||||
@@ -1,154 +0,0 @@
|
||||
import React from "react";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
|
||||
import { ColorSwatch, Menu } from "@mantine/core";
|
||||
import {
|
||||
IconBoxMargin,
|
||||
IconColumnInsertRight,
|
||||
IconColumnRemove,
|
||||
IconEraser,
|
||||
IconPalette,
|
||||
IconRowInsertBottom,
|
||||
IconRowRemove,
|
||||
IconSquareToggle,
|
||||
IconTableRow,
|
||||
} from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useTableClear } from "../hooks/use-table-clear";
|
||||
import { TABLE_COLORS } from "../../table-background-color";
|
||||
import { AlignmentSubmenu } from "./alignment-submenu";
|
||||
|
||||
interface CellChevronMenuProps {
|
||||
editor: Editor;
|
||||
cellPos: number;
|
||||
tableNode: ProseMirrorNode;
|
||||
tablePos: number;
|
||||
}
|
||||
|
||||
export const CellChevronMenu = React.memo(function CellChevronMenu({
|
||||
editor,
|
||||
cellPos,
|
||||
tableNode,
|
||||
tablePos,
|
||||
}: CellChevronMenuProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const clearCell = useTableClear(editor, tableNode, tablePos, {
|
||||
kind: "cell",
|
||||
cellPos,
|
||||
});
|
||||
|
||||
const setBackground = (color: string, name: string) => {
|
||||
editor
|
||||
.chain()
|
||||
.focus()
|
||||
.updateAttributes("tableCell", {
|
||||
backgroundColor: color || null,
|
||||
backgroundColorName: color ? name : null,
|
||||
})
|
||||
.updateAttributes("tableHeader", {
|
||||
backgroundColor: color || null,
|
||||
backgroundColorName: color ? name : null,
|
||||
})
|
||||
.run();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Menu.Sub position="right-start">
|
||||
<Menu.Sub.Target>
|
||||
<Menu.Sub.Item leftSection={<IconPalette size={16} />}>
|
||||
{t("Background color")}
|
||||
</Menu.Sub.Item>
|
||||
</Menu.Sub.Target>
|
||||
<Menu.Sub.Dropdown>
|
||||
<div
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(4, 1fr)",
|
||||
gap: 8,
|
||||
padding: 8,
|
||||
}}
|
||||
>
|
||||
{TABLE_COLORS.map((c) => (
|
||||
<button
|
||||
key={c.name}
|
||||
type="button"
|
||||
onClick={() => setBackground(c.color, c.name)}
|
||||
aria-label={t(c.name)}
|
||||
style={{
|
||||
border: "none",
|
||||
background: "transparent",
|
||||
padding: 0,
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
<ColorSwatch
|
||||
color={c.color || "#ffffff"}
|
||||
size={22}
|
||||
style={{
|
||||
border: c.color === "" ? "1px solid #e5e7eb" : undefined,
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</Menu.Sub.Dropdown>
|
||||
</Menu.Sub>
|
||||
|
||||
<AlignmentSubmenu editor={editor} />
|
||||
|
||||
<Menu.Item
|
||||
leftSection={<IconBoxMargin size={16} />}
|
||||
onClick={() => editor.chain().focus().mergeCells().run()}
|
||||
disabled={!editor.can().mergeCells()}
|
||||
>
|
||||
{t("Merge cells")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconSquareToggle size={16} />}
|
||||
onClick={() => editor.chain().focus().splitCell().run()}
|
||||
disabled={!editor.can().splitCell()}
|
||||
>
|
||||
{t("Split cell")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconTableRow size={16} />}
|
||||
onClick={() => editor.chain().focus().toggleHeaderCell().run()}
|
||||
>
|
||||
{t("Toggle header cell")}
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Divider />
|
||||
|
||||
<Menu.Item
|
||||
leftSection={<IconColumnInsertRight size={16} />}
|
||||
onClick={() => editor.chain().focus().addColumnAfter().run()}
|
||||
>
|
||||
{t("Add column right")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconRowInsertBottom size={16} />}
|
||||
onClick={() => editor.chain().focus().addRowAfter().run()}
|
||||
>
|
||||
{t("Add row below")}
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item leftSection={<IconEraser size={16} />} onClick={clearCell}>
|
||||
{t("Clear cell")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconColumnRemove size={16} />}
|
||||
onClick={() => editor.chain().focus().deleteColumn().run()}
|
||||
>
|
||||
{t("Delete column")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconRowRemove size={16} />}
|
||||
onClick={() => editor.chain().focus().deleteRow().run()}
|
||||
>
|
||||
{t("Delete row")}
|
||||
</Menu.Item>
|
||||
</>
|
||||
);
|
||||
});
|
||||
@@ -1,177 +0,0 @@
|
||||
import React from "react";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
|
||||
import { ColorSwatch, Menu } from "@mantine/core";
|
||||
import { TABLE_COLORS } from "../../table-background-color";
|
||||
import {
|
||||
IconArrowLeft,
|
||||
IconArrowRight,
|
||||
IconColumnInsertLeft,
|
||||
IconColumnInsertRight,
|
||||
IconColumnRemove,
|
||||
IconEraser,
|
||||
IconPalette,
|
||||
IconSortAscendingLetters,
|
||||
IconSortDescendingLetters,
|
||||
} from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useTableMoveRowColumn } from "../hooks/use-table-move-row-column";
|
||||
import { useTableClear } from "../hooks/use-table-clear";
|
||||
import { useTableSort } from "../hooks/use-table-sort";
|
||||
import { AlignmentSubmenu } from "./alignment-submenu";
|
||||
|
||||
interface ColumnHandleMenuProps {
|
||||
editor: Editor;
|
||||
index: number;
|
||||
tableNode: ProseMirrorNode;
|
||||
tablePos: number;
|
||||
}
|
||||
|
||||
export const ColumnHandleMenu = React.memo(function ColumnHandleMenu({
|
||||
editor,
|
||||
index,
|
||||
tableNode,
|
||||
tablePos,
|
||||
}: ColumnHandleMenuProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const moveLeft = useTableMoveRowColumn(editor, "col", index, "left", tableNode, tablePos);
|
||||
const moveRight = useTableMoveRowColumn(editor, "col", index, "right", tableNode, tablePos);
|
||||
const clearCol = useTableClear(editor, tableNode, tablePos, {
|
||||
kind: "col",
|
||||
index,
|
||||
});
|
||||
|
||||
const setBackground = (color: string, name: string) => {
|
||||
editor
|
||||
.chain()
|
||||
.focus()
|
||||
.updateAttributes("tableCell", {
|
||||
backgroundColor: color || null,
|
||||
backgroundColorName: color ? name : null,
|
||||
})
|
||||
.updateAttributes("tableHeader", {
|
||||
backgroundColor: color || null,
|
||||
backgroundColorName: color ? name : null,
|
||||
})
|
||||
.run();
|
||||
};
|
||||
|
||||
const sortAsc = useTableSort({
|
||||
editor,
|
||||
orientation: "col",
|
||||
index,
|
||||
tableNode,
|
||||
tablePos,
|
||||
direction: "asc",
|
||||
});
|
||||
const sortDesc = useTableSort({
|
||||
editor,
|
||||
orientation: "col",
|
||||
index,
|
||||
tableNode,
|
||||
tablePos,
|
||||
direction: "desc",
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Menu.Item
|
||||
leftSection={<IconSortAscendingLetters size={16} />}
|
||||
onClick={sortAsc.handleSort}
|
||||
disabled={!sortAsc.canSort}
|
||||
>
|
||||
{t("Sort A → Z")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconSortDescendingLetters size={16} />}
|
||||
onClick={sortDesc.handleSort}
|
||||
disabled={!sortDesc.canSort}
|
||||
>
|
||||
{t("Sort Z → A")}
|
||||
</Menu.Item>
|
||||
<Menu.Divider />
|
||||
|
||||
<Menu.Sub position="right-start">
|
||||
<Menu.Sub.Target>
|
||||
<Menu.Sub.Item leftSection={<IconPalette size={16} />}>
|
||||
{t("Background color")}
|
||||
</Menu.Sub.Item>
|
||||
</Menu.Sub.Target>
|
||||
<Menu.Sub.Dropdown>
|
||||
<div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8, padding: 8 }}>
|
||||
{TABLE_COLORS.map((c) => (
|
||||
<button
|
||||
key={c.name}
|
||||
type="button"
|
||||
onClick={() => setBackground(c.color, c.name)}
|
||||
aria-label={t(c.name)}
|
||||
style={{
|
||||
border: "none",
|
||||
background: "transparent",
|
||||
padding: 0,
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
<ColorSwatch
|
||||
color={c.color || "#ffffff"}
|
||||
size={22}
|
||||
style={{ border: c.color === "" ? "1px solid #e5e7eb" : undefined }}
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</Menu.Sub.Dropdown>
|
||||
</Menu.Sub>
|
||||
|
||||
<AlignmentSubmenu editor={editor} />
|
||||
|
||||
<Menu.Divider />
|
||||
|
||||
<Menu.Item
|
||||
leftSection={<IconColumnInsertLeft size={16} />}
|
||||
onClick={() => editor.chain().focus().addColumnBefore().run()}
|
||||
>
|
||||
{t("Add column left")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconColumnInsertRight size={16} />}
|
||||
onClick={() => editor.chain().focus().addColumnAfter().run()}
|
||||
>
|
||||
{t("Add column right")}
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Divider />
|
||||
|
||||
<Menu.Item
|
||||
leftSection={<IconEraser size={16} />}
|
||||
onClick={clearCol}
|
||||
>
|
||||
{t("Clear cells")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconColumnRemove size={16} />}
|
||||
onClick={() => editor.chain().focus().deleteColumn().run()}
|
||||
>
|
||||
{t("Delete column")}
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Divider />
|
||||
|
||||
<Menu.Item
|
||||
leftSection={<IconArrowLeft size={16} />}
|
||||
onClick={moveLeft.handleMove}
|
||||
disabled={!moveLeft.canMove}
|
||||
>
|
||||
{t("Move column left")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconArrowRight size={16} />}
|
||||
onClick={moveRight.handleMove}
|
||||
disabled={!moveRight.canMove}
|
||||
>
|
||||
{t("Move column right")}
|
||||
</Menu.Item>
|
||||
</>
|
||||
);
|
||||
});
|
||||
@@ -1,138 +0,0 @@
|
||||
import React from "react";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
|
||||
import { ColorSwatch, Menu } from "@mantine/core";
|
||||
import { TABLE_COLORS } from "../../table-background-color";
|
||||
import {
|
||||
IconArrowDown,
|
||||
IconArrowUp,
|
||||
IconEraser,
|
||||
IconPalette,
|
||||
IconRowInsertBottom,
|
||||
IconRowInsertTop,
|
||||
IconRowRemove,
|
||||
} from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useTableMoveRowColumn } from "../hooks/use-table-move-row-column";
|
||||
import { useTableClear } from "../hooks/use-table-clear";
|
||||
import { AlignmentSubmenu } from "./alignment-submenu";
|
||||
|
||||
interface RowHandleMenuProps {
|
||||
editor: Editor;
|
||||
index: number;
|
||||
tableNode: ProseMirrorNode;
|
||||
tablePos: number;
|
||||
}
|
||||
|
||||
export const RowHandleMenu = React.memo(function RowHandleMenu({
|
||||
editor,
|
||||
index,
|
||||
tableNode,
|
||||
tablePos,
|
||||
}: RowHandleMenuProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const setBackground = (color: string, name: string) => {
|
||||
editor
|
||||
.chain()
|
||||
.focus()
|
||||
.updateAttributes("tableCell", {
|
||||
backgroundColor: color || null,
|
||||
backgroundColorName: color ? name : null,
|
||||
})
|
||||
.updateAttributes("tableHeader", {
|
||||
backgroundColor: color || null,
|
||||
backgroundColorName: color ? name : null,
|
||||
})
|
||||
.run();
|
||||
};
|
||||
|
||||
const moveUp = useTableMoveRowColumn(editor, "row", index, "up", tableNode, tablePos);
|
||||
const moveDown = useTableMoveRowColumn(editor, "row", index, "down", tableNode, tablePos);
|
||||
const clearRow = useTableClear(editor, tableNode, tablePos, {
|
||||
kind: "row",
|
||||
index,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Menu.Sub position="right-start">
|
||||
<Menu.Sub.Target>
|
||||
<Menu.Sub.Item leftSection={<IconPalette size={16} />}>
|
||||
{t("Background color")}
|
||||
</Menu.Sub.Item>
|
||||
</Menu.Sub.Target>
|
||||
<Menu.Sub.Dropdown>
|
||||
<div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8, padding: 8 }}>
|
||||
{TABLE_COLORS.map((c) => (
|
||||
<button
|
||||
key={c.name}
|
||||
type="button"
|
||||
onClick={() => setBackground(c.color, c.name)}
|
||||
aria-label={t(c.name)}
|
||||
style={{
|
||||
border: "none",
|
||||
background: "transparent",
|
||||
padding: 0,
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
<ColorSwatch
|
||||
color={c.color || "#ffffff"}
|
||||
size={22}
|
||||
style={{ border: c.color === "" ? "1px solid #e5e7eb" : undefined }}
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</Menu.Sub.Dropdown>
|
||||
</Menu.Sub>
|
||||
|
||||
<AlignmentSubmenu editor={editor} />
|
||||
|
||||
<Menu.Divider />
|
||||
|
||||
<Menu.Item
|
||||
leftSection={<IconRowInsertTop size={16} />}
|
||||
onClick={() => editor.chain().focus().addRowBefore().run()}
|
||||
>
|
||||
{t("Add row above")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconRowInsertBottom size={16} />}
|
||||
onClick={() => editor.chain().focus().addRowAfter().run()}
|
||||
>
|
||||
{t("Add row below")}
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Divider />
|
||||
|
||||
<Menu.Item leftSection={<IconEraser size={16} />} onClick={clearRow}>
|
||||
{t("Clear cells")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconRowRemove size={16} />}
|
||||
onClick={() => editor.chain().focus().deleteRow().run()}
|
||||
>
|
||||
{t("Delete row")}
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Divider />
|
||||
|
||||
<Menu.Item
|
||||
leftSection={<IconArrowUp size={16} />}
|
||||
onClick={moveUp.handleMove}
|
||||
disabled={!moveUp.canMove}
|
||||
>
|
||||
{t("Move row up")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconArrowDown size={16} />}
|
||||
onClick={moveDown.handleMove}
|
||||
disabled={!moveDown.canMove}
|
||||
>
|
||||
{t("Move row down")}
|
||||
</Menu.Item>
|
||||
</>
|
||||
);
|
||||
});
|
||||
@@ -1,122 +0,0 @@
|
||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
|
||||
import { useFloating, offset, autoUpdate, hide } from "@floating-ui/react";
|
||||
import { Menu } from "@mantine/core";
|
||||
import clsx from "clsx";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useTableHandleDrag } from "./hooks/use-table-handle-drag";
|
||||
import { useColumnRowMenuLifecycle } from "./hooks/use-column-row-menu-lifecycle";
|
||||
import { RowHandleMenu } from "./menus/row-handle-menu";
|
||||
import classes from "./handle.module.css";
|
||||
|
||||
interface RowHandleProps {
|
||||
editor: Editor;
|
||||
index: number;
|
||||
anchorPos: number;
|
||||
tableNode: ProseMirrorNode;
|
||||
tablePos: number;
|
||||
}
|
||||
|
||||
export const RowHandle = React.memo(function RowHandle({
|
||||
editor,
|
||||
index,
|
||||
anchorPos,
|
||||
tableNode,
|
||||
tablePos,
|
||||
}: RowHandleProps) {
|
||||
const { t } = useTranslation();
|
||||
// See ColumnHandle for the rationale: keep the last valid cell DOM cached
|
||||
// so the handle div stays mounted across stale-anchor renders, otherwise
|
||||
// pragmatic-dnd silently aborts an in-flight drag.
|
||||
const lookupCellDom = editor.view.nodeDOM(anchorPos) as HTMLElement | null;
|
||||
const [cellDom, setCellDom] = useState<HTMLElement | null>(lookupCellDom);
|
||||
const lastCellDomRef = useRef<HTMLElement | null>(lookupCellDom);
|
||||
useEffect(() => {
|
||||
if (lookupCellDom && lookupCellDom !== lastCellDomRef.current) {
|
||||
lastCellDomRef.current = lookupCellDom;
|
||||
setCellDom(lookupCellDom);
|
||||
}
|
||||
}, [lookupCellDom]);
|
||||
|
||||
const [handleEl, setHandleEl] = useState<HTMLDivElement | null>(null);
|
||||
|
||||
const { refs, floatingStyles, middlewareData } = useFloating({
|
||||
placement: "left",
|
||||
middleware: [offset(-4), hide()],
|
||||
whileElementsMounted: autoUpdate,
|
||||
});
|
||||
const isReferenceHidden = !!middlewareData.hide?.referenceHidden;
|
||||
|
||||
useEffect(() => {
|
||||
refs.setReference(cellDom);
|
||||
}, [cellDom, refs]);
|
||||
|
||||
const wrapper = cellDom?.closest<HTMLElement>(".tableWrapper") ?? null;
|
||||
|
||||
const [menuOpened, setMenuOpened] = useState(false);
|
||||
const closeMenu = useCallback(() => setMenuOpened(false), []);
|
||||
useTableHandleDrag(editor, "row", handleEl, wrapper, closeMenu);
|
||||
|
||||
const { onOpen, onClose } = useColumnRowMenuLifecycle({
|
||||
editor,
|
||||
orientation: "row",
|
||||
index,
|
||||
tableNode,
|
||||
tablePos,
|
||||
});
|
||||
|
||||
if (!cellDom) return null;
|
||||
|
||||
return (
|
||||
<Menu
|
||||
opened={menuOpened}
|
||||
onChange={setMenuOpened}
|
||||
position="right-start"
|
||||
onOpen={onOpen}
|
||||
onClose={onClose}
|
||||
withinPortal
|
||||
shadow="md"
|
||||
>
|
||||
<Menu.Target>
|
||||
<div
|
||||
ref={(node) => {
|
||||
refs.setFloating(node);
|
||||
setHandleEl(node);
|
||||
}}
|
||||
style={{
|
||||
...floatingStyles,
|
||||
...(isReferenceHidden ? { visibility: "hidden" as const } : {}),
|
||||
}}
|
||||
className={clsx(classes.handle, classes.rowHandle)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={t("Row actions")}
|
||||
>
|
||||
<span style={{ pointerEvents: "none", display: "inline-flex" }}>
|
||||
<GripIcon />
|
||||
</span>
|
||||
</div>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
<RowHandleMenu
|
||||
editor={editor}
|
||||
index={index}
|
||||
tableNode={tableNode}
|
||||
tablePos={tablePos}
|
||||
/>
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
);
|
||||
});
|
||||
|
||||
function GripIcon() {
|
||||
return (
|
||||
<svg viewBox="0 0 10 10" width="14" height="14" aria-hidden>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M3,2 A1,1 0 1 1 3,0 A1,1 0 0 1 3,2 Z M3,6 A1,1 0 1 1 3,4 A1,1 0 0 1 3,6 Z M3,10 A1,1 0 1 1 3,8 A1,1 0 0 1 3,10 Z M7,2 A1,1 0 1 1 7,0 A1,1 0 0 1 7,2 Z M7,6 A1,1 0 1 1 7,4 A1,1 0 0 1 7,6 Z M7,10 A1,1 0 1 1 7,8 A1,1 0 0 1 7,10 Z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
import React from "react";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import { useTableHandleState } from "./hooks/use-table-handle-state";
|
||||
import { ColumnHandle } from "./column-handle";
|
||||
import { RowHandle } from "./row-handle";
|
||||
import { CellChevron } from "./cell-chevron";
|
||||
|
||||
interface TableHandlesLayerProps {
|
||||
editor: Editor | null;
|
||||
}
|
||||
|
||||
export const TableHandlesLayer = React.memo(function TableHandlesLayer({
|
||||
editor,
|
||||
}: TableHandlesLayerProps) {
|
||||
const state = useTableHandleState(editor);
|
||||
|
||||
if (!editor || !editor.isEditable) return null;
|
||||
if (!state.hoveringCell || !state.tableNode || state.tablePos == null) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<ColumnHandle
|
||||
editor={editor}
|
||||
index={state.hoveringCell.colIndex}
|
||||
anchorPos={state.hoveringCell.colFirstCellPos}
|
||||
tableNode={state.tableNode!}
|
||||
tablePos={state.tablePos!}
|
||||
/>
|
||||
<RowHandle
|
||||
editor={editor}
|
||||
index={state.hoveringCell.rowIndex}
|
||||
anchorPos={state.hoveringCell.rowFirstCellPos}
|
||||
tableNode={state.tableNode!}
|
||||
tablePos={state.tablePos!}
|
||||
/>
|
||||
<CellChevron
|
||||
editor={editor}
|
||||
cellPos={state.hoveringCell.cellPos}
|
||||
tableNode={state.tableNode!}
|
||||
tablePos={state.tablePos!}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
});
|
||||
@@ -22,7 +22,7 @@ interface TableBackgroundColorProps {
|
||||
editor: Editor | null;
|
||||
}
|
||||
|
||||
export const TABLE_COLORS: TableColorItem[] = [
|
||||
const TABLE_COLORS: TableColorItem[] = [
|
||||
{ name: "Default", color: "" },
|
||||
{ name: "Blue", color: "#b4d5ff" },
|
||||
{ name: "Green", color: "#acf5d2" },
|
||||
|
||||
@@ -104,12 +104,12 @@ export const TableMenu = React.memo(
|
||||
element.style.zIndex = "99";
|
||||
}}
|
||||
options={{
|
||||
placement: "bottom",
|
||||
placement: "top",
|
||||
offset: {
|
||||
mainAxis: 15,
|
||||
},
|
||||
flip: {
|
||||
fallbackPlacements: ["bottom", "top"],
|
||||
fallbackPlacements: ["top", "bottom"],
|
||||
padding: { top: 35 + 15, left: 8, right: 8, bottom: -Infinity },
|
||||
boundary: editor.options.element as HTMLElement,
|
||||
},
|
||||
|
||||
@@ -86,11 +86,11 @@ export const TableTextAlignment: FC<TableTextAlignmentProps> = ({ editor }) => {
|
||||
transitionProps={{ transition: "pop" }}
|
||||
>
|
||||
<Popover.Target>
|
||||
<Tooltip label={t("Text align")} withArrow>
|
||||
<Tooltip label={t("Text alignment")} withArrow>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
size="lg"
|
||||
aria-label={t("Text align")}
|
||||
aria-label={t("Text alignment")}
|
||||
onClick={() => setOpened(!opened)}
|
||||
>
|
||||
<activeItem.icon size={18} />
|
||||
|
||||
@@ -60,23 +60,6 @@ function nodeDOMAtCoords(
|
||||
options: GlobalDragHandleOptions,
|
||||
view: EditorView,
|
||||
) {
|
||||
// Custom nodes (transclusion, …) render via tiptap's React node-view
|
||||
// renderer, which emits `class="react-renderer node-${name}"` on the
|
||||
// live wrapper — the `data-type` attribute is for static HTML
|
||||
// serialization only. Match both so we cover live and parsed DOM.
|
||||
// Inside a custom node, also match plain `p` so the first paragraph
|
||||
// (which doesn't match `:not(:first-child)`) still gets its own
|
||||
// handle; only hovers on the custom node's padding/border fall
|
||||
// through to the wrapper.
|
||||
const customSelectors = options.customNodes.flatMap((node) => [
|
||||
`[data-type=${node}]`,
|
||||
`.node-${node}`,
|
||||
]);
|
||||
const customParagraphSelectors = options.customNodes.flatMap((node) => [
|
||||
`[data-type=${node}] p`,
|
||||
`.node-${node} p`,
|
||||
]);
|
||||
|
||||
const selectors = [
|
||||
"li",
|
||||
"p:not(:first-child)",
|
||||
@@ -88,13 +71,7 @@ function nodeDOMAtCoords(
|
||||
"h4",
|
||||
"h5",
|
||||
"h6",
|
||||
// Tables nested in another block (toggle, transclusion, …) have a
|
||||
// wrapper that isn't a direct child of .ProseMirror, so the
|
||||
// parent-check below skips it. Match the wrapper explicitly so the
|
||||
// handle shows up even with empty cells.
|
||||
".tableWrapper",
|
||||
...customParagraphSelectors,
|
||||
...customSelectors,
|
||||
...options.customNodes.map((node) => `[data-type=${node}]`),
|
||||
].join(", ");
|
||||
return document
|
||||
.elementsFromPoint(coords.x, coords.y)
|
||||
@@ -122,22 +99,6 @@ function nodePosAtDOM(
|
||||
})?.inside;
|
||||
}
|
||||
|
||||
function isCustomNodeDOM(
|
||||
elem: Element | null | undefined,
|
||||
options: GlobalDragHandleOptions,
|
||||
): boolean {
|
||||
if (!elem) return false;
|
||||
for (const name of options.customNodes) {
|
||||
if (
|
||||
elem.getAttribute("data-type") === name ||
|
||||
elem.classList.contains(`node-${name}`)
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function calcNodePos(pos: number, view: EditorView) {
|
||||
const $pos = view.state.doc.resolve(pos);
|
||||
if ($pos.depth > 1) return $pos.before($pos.depth);
|
||||
@@ -176,6 +137,7 @@ export function DragHandlePlugin(
|
||||
|
||||
const nodePos = view.state.doc.resolve(fromSelectionPos);
|
||||
|
||||
// Check if nodePos points to the top level node
|
||||
if (nodePos.node().type.name === "doc") differentNodeSelected = true;
|
||||
else {
|
||||
const nodeSelection = NodeSelection.create(
|
||||
@@ -204,46 +166,14 @@ export function DragHandlePlugin(
|
||||
} else {
|
||||
selection = NodeSelection.create(view.state.doc, draggedNodePos);
|
||||
|
||||
const $sel = view.state.doc.resolve(selection.from);
|
||||
|
||||
if (isCustomNodeDOM(node, options)) {
|
||||
// The drag landed on a custom-node container (transclusion etc.).
|
||||
// Walk up to the matching node so the drag moves the whole
|
||||
// container, not whatever inner element the click landed on.
|
||||
const customTypes = new Set(options.customNodes);
|
||||
for (let d = $sel.depth; d > 0; d--) {
|
||||
if (customTypes.has($sel.node(d).type.name)) {
|
||||
selection = NodeSelection.create(
|
||||
view.state.doc,
|
||||
$sel.before(d),
|
||||
);
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// If the selected node lives inside a table (at any nesting
|
||||
// depth), promote to the whole table — the global drag handle is
|
||||
// meant to move the table as a single block, not a row/cell. The
|
||||
// earlier tableRow-only check only worked when the table sat at
|
||||
// the doc root; once wrapped in another node (toggle, layout,
|
||||
// etc.) the selection lands on a cell/paragraph and that check
|
||||
// never fired.
|
||||
let tableDepth = -1;
|
||||
for (let d = $sel.depth; d > 0; d--) {
|
||||
if ($sel.node(d).type.name === "table") {
|
||||
tableDepth = d;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (tableDepth > 0) {
|
||||
selection = NodeSelection.create(
|
||||
view.state.doc,
|
||||
$sel.before(tableDepth),
|
||||
);
|
||||
} else if ((selection as NodeSelection).node.type.isInline) {
|
||||
// Inline node (e.g. mention): walk up to the parent block.
|
||||
selection = NodeSelection.create(view.state.doc, $sel.before());
|
||||
}
|
||||
// if inline node is selected, e.g mention -> go to the parent node to select the whole node
|
||||
// if table row is selected, go to the parent node to select the whole node
|
||||
if (
|
||||
(selection as NodeSelection).node.type.isInline ||
|
||||
(selection as NodeSelection).node.type.name === "tableRow"
|
||||
) {
|
||||
let $pos = view.state.doc.resolve(selection.from);
|
||||
selection = NodeSelection.create(view.state.doc, $pos.before());
|
||||
}
|
||||
}
|
||||
view.dispatch(view.state.tr.setSelection(selection));
|
||||
@@ -383,27 +313,6 @@ export function DragHandlePlugin(
|
||||
return;
|
||||
}
|
||||
|
||||
const isCustomNode = isCustomNodeDOM(node, options);
|
||||
|
||||
// Custom nodes pin the handle to the inner NodeViewWrapper's top-left:
|
||||
// the natural anchor sits in transient/empty space outside the visible block.
|
||||
if (isCustomNode) {
|
||||
// tiptap React node-views emit an outer `.react-renderer` whose first
|
||||
// child is the visible NodeViewWrapper; walk to that outer first since
|
||||
// `node` may be either the outer or an inner element with data-type.
|
||||
const rendererOuter =
|
||||
(node.closest(".react-renderer") as HTMLElement | null) ?? node;
|
||||
const inner =
|
||||
(rendererOuter.firstElementChild as HTMLElement | null) ??
|
||||
rendererOuter;
|
||||
const innerRect = absoluteRect(inner);
|
||||
if (!dragHandleElement) return;
|
||||
dragHandleElement.style.left = `${innerRect.left + 4}px`;
|
||||
dragHandleElement.style.top = `${innerRect.top + 4}px`;
|
||||
showDragHandle();
|
||||
return;
|
||||
}
|
||||
|
||||
const compStyle = window.getComputedStyle(node);
|
||||
const parsedLineHeight = parseInt(compStyle.lineHeight, 10);
|
||||
const lineHeight = isNaN(parsedLineHeight)
|
||||
@@ -419,13 +328,6 @@ export function DragHandlePlugin(
|
||||
if (node.matches("ul:not([data-type=taskList]) li, ol li")) {
|
||||
rect.left -= options.dragHandleWidth;
|
||||
}
|
||||
// Tables: clear the table's own row-drag handle so the two
|
||||
// grips don't stack on each other. `nodeDOMAtCoords` returns
|
||||
// the wrapper for top-level hovers (wrapper is direct child of
|
||||
// .ProseMirror) and a descendant for deeper hovers — cover both.
|
||||
if (node.closest(".tableWrapper")) {
|
||||
rect.left -= options.dragHandleWidth;
|
||||
}
|
||||
rect.width = options.dragHandleWidth;
|
||||
|
||||
if (!dragHandleElement) return;
|
||||
|
||||
@@ -10,9 +10,7 @@ import { Typography } from "@tiptap/extension-typography";
|
||||
import { TextStyle } from "@tiptap/extension-text-style";
|
||||
import { Color } from "@tiptap/extension-color";
|
||||
import { Youtube } from "@tiptap/extension-youtube";
|
||||
import SlashCommand, {
|
||||
SlashCommandExtension as Command,
|
||||
} from "@/features/editor/extensions/slash-command";
|
||||
import SlashCommand, { SlashCommandExtension as Command } from "@/features/editor/extensions/slash-command";
|
||||
import renderItems from "@/features/editor/components/slash-menu/render-items";
|
||||
import getSuggestionItems from "@/features/editor/components/slash-menu/menu-items";
|
||||
import { Collaboration, isChangeOrigin } from "@tiptap/extension-collaboration";
|
||||
@@ -45,13 +43,9 @@ import {
|
||||
SearchAndReplace,
|
||||
Mention,
|
||||
TableDndExtension,
|
||||
TableHandleCommandsExtension,
|
||||
TableHeaderPin,
|
||||
TableReadonlySort,
|
||||
Subpages,
|
||||
Heading,
|
||||
Highlight,
|
||||
Indent,
|
||||
UniqueID,
|
||||
SharedStorage,
|
||||
Columns,
|
||||
@@ -59,7 +53,6 @@ import {
|
||||
Status,
|
||||
TransclusionSource,
|
||||
TransclusionReference,
|
||||
TableView,
|
||||
} from "@docmost/editor-ext";
|
||||
import {
|
||||
randomElement,
|
||||
@@ -208,7 +201,6 @@ export const mainExtensions = [
|
||||
showOnlyWhenEditable: true,
|
||||
}),
|
||||
TextAlign.configure({ types: ["heading", "paragraph"] }),
|
||||
Indent,
|
||||
TaskList,
|
||||
TaskItem.configure({
|
||||
nested: true,
|
||||
@@ -263,16 +255,11 @@ export const mainExtensions = [
|
||||
resizable: true,
|
||||
lastColumnResizable: true,
|
||||
allowTableNodeSelection: true,
|
||||
cellMinWidth: 49,
|
||||
View: TableView,
|
||||
}),
|
||||
TableRow,
|
||||
TableCell,
|
||||
TableHeader,
|
||||
TableDndExtension,
|
||||
TableHandleCommandsExtension,
|
||||
TableHeaderPin,
|
||||
TableReadonlySort,
|
||||
MathInline.configure({
|
||||
view: MathInlineView,
|
||||
}),
|
||||
@@ -324,8 +311,6 @@ export const mainExtensions = [
|
||||
view: CodeBlockView,
|
||||
//@ts-ignore
|
||||
lowlight,
|
||||
enableTabIndentation: true,
|
||||
tabSize: 2,
|
||||
HTMLAttributes: {
|
||||
spellcheck: false,
|
||||
},
|
||||
@@ -420,10 +405,7 @@ const TEMPLATE_EXCLUDED_SLASH_ITEMS = new Set([
|
||||
const TemplateSlashCommand = Command.configure({
|
||||
suggestion: {
|
||||
items: ({ query }: { query: string }) =>
|
||||
getSuggestionItems({
|
||||
query,
|
||||
excludeItems: TEMPLATE_EXCLUDED_SLASH_ITEMS,
|
||||
}),
|
||||
getSuggestionItems({ query, excludeItems: TEMPLATE_EXCLUDED_SLASH_ITEMS }),
|
||||
render: renderItems,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -3,27 +3,20 @@ import React from "react";
|
||||
import { TitleEditor } from "@/features/editor/title-editor";
|
||||
import PageEditor from "@/features/editor/page-editor";
|
||||
import {
|
||||
ActionIcon,
|
||||
Container,
|
||||
Divider,
|
||||
Group,
|
||||
Popover,
|
||||
Stack,
|
||||
Text,
|
||||
Tooltip,
|
||||
UnstyledButton,
|
||||
} from "@mantine/core";
|
||||
import { IconInfoCircle } from "@tabler/icons-react";
|
||||
import { useAtom } from "jotai";
|
||||
import { userAtom } from "@/features/user/atoms/current-user-atom.ts";
|
||||
import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
|
||||
import { PageVerificationBadge } from "@/ee/page-verification";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { IContributor } from "@/features/page/types/page.types.ts";
|
||||
import { FixedToolbar } from "@/features/editor/components/fixed-toolbar/fixed-toolbar";
|
||||
import { PageEditMode } from "@/features/user/types/user.types.ts";
|
||||
import useToggleAside from "@/hooks/use-toggle-aside.tsx";
|
||||
import clsx from "clsx";
|
||||
|
||||
const MemoizedTitleEditor = React.memo(TitleEditor);
|
||||
const MemoizedPageEditor = React.memo(PageEditor);
|
||||
@@ -59,11 +52,6 @@ export function FullEditor({
|
||||
}: FullEditorProps) {
|
||||
const [user] = useAtom(userAtom);
|
||||
const fullPageWidth = user.settings?.preferences?.fullPageWidth;
|
||||
const editorToolbarEnabled =
|
||||
user.settings?.preferences?.editorToolbar ?? false;
|
||||
const userPageEditMode =
|
||||
user.settings?.preferences?.pageEditMode ?? PageEditMode.Edit;
|
||||
const isEditMode = userPageEditMode === PageEditMode.Edit;
|
||||
|
||||
return (
|
||||
<Container
|
||||
@@ -71,7 +59,6 @@ export function FullEditor({
|
||||
size={!fullPageWidth && 900}
|
||||
className={classes.editor}
|
||||
>
|
||||
{editorToolbarEnabled && editable && isEditMode && <FixedToolbar />}
|
||||
<MemoizedTitleEditor
|
||||
pageId={pageId}
|
||||
slugId={slugId}
|
||||
@@ -106,7 +93,6 @@ function PageByline({
|
||||
readOnly,
|
||||
}: PageBylineProps) {
|
||||
const { t } = useTranslation();
|
||||
const toggleAside = useToggleAside();
|
||||
|
||||
const otherContributors = (contributors ?? []).filter(
|
||||
(c) => c.id !== creator?.id,
|
||||
@@ -116,8 +102,8 @@ function PageByline({
|
||||
<Group
|
||||
gap="sm"
|
||||
mb="md"
|
||||
className={clsx("print-hide", classes.byline)}
|
||||
style={{ marginTop: "-0.5em" }}
|
||||
className="print-hide"
|
||||
style={{ marginTop: "-0.5em", paddingLeft: "3rem" }}
|
||||
>
|
||||
{creator && (
|
||||
<Popover position="bottom-start" shadow="md" width={280} withArrow>
|
||||
@@ -179,17 +165,6 @@ function PageByline({
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
)}
|
||||
<Tooltip label={t("Details")} withArrow openDelay={250}>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
aria-label={t("Details")}
|
||||
onClick={() => toggleAside("details")}
|
||||
>
|
||||
<IconInfoCircle size={20} stroke={1.5} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
|
||||
<PageVerificationBadge readOnly={readOnly} />
|
||||
</Group>
|
||||
);
|
||||
|
||||
@@ -44,7 +44,6 @@ import { EditorBubbleMenu } from "@/features/editor/components/bubble-menu/bubbl
|
||||
import { ReadonlyBubbleMenu } from "@/features/editor/components/bubble-menu/readonly-bubble-menu";
|
||||
import TableCellMenu from "@/features/editor/components/table/table-cell-menu.tsx";
|
||||
import TableMenu from "@/features/editor/components/table/table-menu.tsx";
|
||||
import { TableHandlesLayer } from "@/features/editor/components/table/handle/table-handles-layer";
|
||||
import ImageMenu from "@/features/editor/components/image/image-menu.tsx";
|
||||
import CalloutMenu from "@/features/editor/components/callout/callout-menu.tsx";
|
||||
import VideoMenu from "@/features/editor/components/video/video-menu.tsx";
|
||||
@@ -425,7 +424,7 @@ export default function PageEditor({
|
||||
<EditorLinkMenu editor={editor} />
|
||||
<EditorBubbleMenu editor={editor} />
|
||||
<TableMenu editor={editor} />
|
||||
<TableHandlesLayer editor={editor} />
|
||||
<TableCellMenu editor={editor} appendTo={menuContainerRef} />
|
||||
<ImageMenu editor={editor} />
|
||||
<VideoMenu editor={editor} />
|
||||
<PdfMenu editor={editor} />
|
||||
|
||||
@@ -203,8 +203,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.resize-cursor,
|
||||
&.resize-cursor * {
|
||||
.resize-cursor {
|
||||
cursor: ew-resize;
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
@@ -9,15 +9,3 @@
|
||||
}
|
||||
}
|
||||
|
||||
.byline {
|
||||
padding-left: 3rem;
|
||||
|
||||
@media (max-width: $mantine-breakpoint-sm) {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
@media print {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
.ProseMirror {
|
||||
--indent-step: 2rem;
|
||||
}
|
||||
|
||||
.ProseMirror [data-indent="1"] { padding-inline-start: calc(var(--indent-step) * 1); }
|
||||
.ProseMirror [data-indent="2"] { padding-inline-start: calc(var(--indent-step) * 2); }
|
||||
.ProseMirror [data-indent="3"] { padding-inline-start: calc(var(--indent-step) * 3); }
|
||||
.ProseMirror [data-indent="4"] { padding-inline-start: calc(var(--indent-step) * 4); }
|
||||
.ProseMirror [data-indent="5"] { padding-inline-start: calc(var(--indent-step) * 5); }
|
||||
.ProseMirror [data-indent="6"] { padding-inline-start: calc(var(--indent-step) * 6); }
|
||||
.ProseMirror [data-indent="7"] { padding-inline-start: calc(var(--indent-step) * 7); }
|
||||
.ProseMirror [data-indent="8"] { padding-inline-start: calc(var(--indent-step) * 8); }
|
||||
.ProseMirror [data-indent="9"] { padding-inline-start: calc(var(--indent-step) * 9); }
|
||||
.ProseMirror [data-indent="10"] { padding-inline-start: calc(var(--indent-step) * 10); }
|
||||
@@ -13,6 +13,5 @@
|
||||
@import "./mention.css";
|
||||
@import "./ordered-list.css";
|
||||
@import "./highlight.css";
|
||||
@import "./indent.css";
|
||||
@import "./columns.css";
|
||||
@import "./status.css";
|
||||
|
||||
@@ -15,8 +15,7 @@
|
||||
}
|
||||
|
||||
.table-dnd-drop-indicator {
|
||||
background-color: var(--mantine-color-blue-5);
|
||||
z-index: 3;
|
||||
background-color: #adf;
|
||||
}
|
||||
|
||||
.ProseMirror {
|
||||
@@ -58,14 +57,13 @@
|
||||
}
|
||||
|
||||
.column-resize-handle {
|
||||
background-color: var(--mantine-color-blue-5);
|
||||
background-color: #adf;
|
||||
bottom: -1px;
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
right: -2px;
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
width: 2px;
|
||||
z-index: 3;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.selectedCell:after {
|
||||
@@ -131,139 +129,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Header-row pinning. Two CSS paths, picked by `header-pin/controller.ts`:
|
||||
- native sticky (preferred): wrapper drops its overflow constraint so
|
||||
`position: sticky` on the row can resolve against the document scroll.
|
||||
- transform fallback: wrapper keeps `overflow-x: auto` for horizontal
|
||||
scrolling; the row is positioned imperatively per scroll frame.
|
||||
|
||||
`--editor-pin-offset` is published to :root by `pinOffsetWatcher` in
|
||||
`header-pin/offset.ts`, measured against the lowest fixed surface above
|
||||
the editor (app shell header, page header, fixed toolbar). */
|
||||
|
||||
.tableWrapper.tableWrapperNoOverflow,
|
||||
.tableWrapper.tableWrapperNoOverflow table {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.tableWrapper.tableHeaderPinned table tr:first-child {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tableWrapper.tableWrapperNoOverflow.tableHeaderPinned table tr:first-child {
|
||||
position: sticky;
|
||||
top: var(--editor-pin-offset, 90px);
|
||||
}
|
||||
|
||||
.tableWrapper.tableHeaderPinned:not(.tableWrapperNoOverflow) table tr:first-child {
|
||||
position: relative;
|
||||
transform: translateY(var(--table-pin-offset, 0px));
|
||||
}
|
||||
|
||||
@media print {
|
||||
.tableWrapper.tableHeaderPinned table tr:first-child {
|
||||
position: static;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tableReadonlySortChevron {
|
||||
/* Anchor to the cell's right edge, vertically centered with the cell
|
||||
content. The cell content (a <p>) is block-level so an inline chevron
|
||||
would wrap to a new line; absolute positioning takes it out of flow. */
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 6px;
|
||||
transform: translateY(-50%);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 4px;
|
||||
background: light-dark(
|
||||
rgba(55, 53, 47, 0.08),
|
||||
rgba(255, 255, 255, 0.08)
|
||||
);
|
||||
color: light-dark(
|
||||
rgba(55, 53, 47, 0.55),
|
||||
rgba(255, 255, 255, 0.55)
|
||||
);
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
/* Hidden by default; revealed on header-cell hover or when this column is
|
||||
the active sort (see selectors below). */
|
||||
opacity: 0;
|
||||
transition: opacity 120ms ease, background-color 120ms ease, color 120ms ease;
|
||||
}
|
||||
|
||||
.ProseMirror table th:hover .tableReadonlySortChevron,
|
||||
.tableReadonlySortChevron[data-sort] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ProseMirror table th:has(.tableReadonlySortChevron) {
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
.tableReadonlySortChevron:hover {
|
||||
background: light-dark(
|
||||
rgba(55, 53, 47, 0.16),
|
||||
rgba(255, 255, 255, 0.16)
|
||||
);
|
||||
}
|
||||
|
||||
/* Immediate tooltip on the chevron — same style language as the rest of the
|
||||
app (small, dark, rounded), unlike the native `title` tooltip which only
|
||||
appears after a long delay. */
|
||||
.tableReadonlySortChevron::after {
|
||||
content: attr(data-tooltip);
|
||||
position: absolute;
|
||||
/* Below the chevron — placing it above the cell hits the table's
|
||||
overflow clipping (the wrapper has `overflow-x: auto` which forces
|
||||
`overflow-y: auto` per spec). */
|
||||
top: calc(100% + 6px);
|
||||
right: 0;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
background: var(--mantine-color-dark-7);
|
||||
color: var(--mantine-color-white);
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 120ms ease;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.tableReadonlySortChevron:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tableReadonlySortChevron svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tableReadonlySortChevron[data-sort="asc"],
|
||||
.tableReadonlySortChevron[data-sort="desc"] {
|
||||
background: light-dark(
|
||||
var(--mantine-color-blue-1),
|
||||
var(--mantine-color-blue-9)
|
||||
);
|
||||
color: light-dark(
|
||||
var(--mantine-color-blue-7),
|
||||
var(--mantine-color-blue-2)
|
||||
);
|
||||
}
|
||||
|
||||
.tableReadonlySortChevron[data-sort="asc"] svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.editor-container:has(.table-dnd-drop-indicator[data-dragging="true"]) {
|
||||
.prosemirror-dropcursor-block {
|
||||
display: none;
|
||||
|
||||
@@ -1,51 +0,0 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { useComputedColorScheme } from "@mantine/core";
|
||||
import { IconX } from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { ILabel } from "@/features/label/types/label.types.ts";
|
||||
import { getLabelColor } from "@/features/label/utils/label-colors.ts";
|
||||
import classes from "@/features/label/label.module.css";
|
||||
|
||||
type LabelChipProps = {
|
||||
label: Pick<ILabel, "id" | "name">;
|
||||
onRemove?: () => void;
|
||||
asLink?: boolean;
|
||||
};
|
||||
|
||||
export function LabelChip({ label, onRemove, asLink }: LabelChipProps) {
|
||||
const { t } = useTranslation();
|
||||
const scheme = useComputedColorScheme("light");
|
||||
const c = getLabelColor(label.name, scheme);
|
||||
|
||||
const nameNode = asLink ? (
|
||||
<Link
|
||||
to={`/labels/${encodeURIComponent(label.name)}`}
|
||||
className={classes.chipLink}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<span className={classes.chipName}>{label.name}</span>
|
||||
</Link>
|
||||
) : (
|
||||
<span className={classes.chipName}>{label.name}</span>
|
||||
);
|
||||
|
||||
return (
|
||||
<span className={classes.chip} style={{ background: c.bg, color: c.fg }}>
|
||||
{nameNode}
|
||||
{onRemove && (
|
||||
<button
|
||||
type="button"
|
||||
className={classes.chipX}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onRemove();
|
||||
}}
|
||||
aria-label={t("Remove label {{name}}", { name: label.name })}
|
||||
>
|
||||
<IconX size={12} stroke={2} />
|
||||
</button>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
import { Skeleton } from "@mantine/core";
|
||||
import classes from "@/features/label/label.module.css";
|
||||
|
||||
type LabelPageRowSkeletonProps = {
|
||||
titleWidth?: number;
|
||||
metaWidth?: number;
|
||||
};
|
||||
|
||||
export function LabelPageRowSkeleton({
|
||||
titleWidth = 220,
|
||||
metaWidth = 180,
|
||||
}: LabelPageRowSkeletonProps) {
|
||||
return (
|
||||
<div className={classes.row} aria-hidden="true">
|
||||
<div className={classes.rowMain}>
|
||||
<div className={classes.rowIcon}>
|
||||
<Skeleton height={18} width={18} radius="sm" />
|
||||
</div>
|
||||
<div className={classes.rowBody}>
|
||||
<Skeleton height={15} width={titleWidth} radius="xs" />
|
||||
<div className={classes.rowMeta}>
|
||||
<Skeleton height={18} width={18} radius="sm" />
|
||||
<Skeleton height={12} width={metaWidth} radius="xs" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,91 +0,0 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { ThemeIcon, Tooltip } from "@mantine/core";
|
||||
import { IconFileDescription } from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { ILabelPageItem } from "@/features/label/types/label.types.ts";
|
||||
import { LabelChip } from "@/features/label/components/label-chip.tsx";
|
||||
import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
|
||||
import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";
|
||||
import { buildPageUrl } from "@/features/page/page.utils";
|
||||
import { formatLabelListDate } from "@/features/label/utils/format-label-date.ts";
|
||||
import classes from "@/features/label/label.module.css";
|
||||
|
||||
type LabelPageRowProps = {
|
||||
page: ILabelPageItem;
|
||||
currentLabelName: string;
|
||||
};
|
||||
|
||||
const MAX_VISIBLE_CHIPS = 3;
|
||||
|
||||
export function LabelPageRow({ page, currentLabelName }: LabelPageRowProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const otherLabels = page.labels.filter((l) => l.name !== currentLabelName);
|
||||
const visibleLabels = otherLabels.slice(0, MAX_VISIBLE_CHIPS);
|
||||
const hiddenLabels = otherLabels.slice(MAX_VISIBLE_CHIPS);
|
||||
|
||||
return (
|
||||
<Link
|
||||
to={buildPageUrl(page.space?.slug, page.slugId, page.title ?? undefined)}
|
||||
className={classes.row}
|
||||
>
|
||||
<div className={classes.rowMain}>
|
||||
<div className={classes.rowIcon}>
|
||||
{page.icon ? (
|
||||
<span style={{ fontSize: 16, lineHeight: 1 }}>{page.icon}</span>
|
||||
) : (
|
||||
<ThemeIcon variant="transparent" color="gray" size={18}>
|
||||
<IconFileDescription size={18} />
|
||||
</ThemeIcon>
|
||||
)}
|
||||
</div>
|
||||
<div className={classes.rowBody}>
|
||||
<div className={classes.rowTitle}>
|
||||
{page.title || t("Untitled")}
|
||||
</div>
|
||||
<div className={classes.rowMeta}>
|
||||
{page.space && (
|
||||
<>
|
||||
<CustomAvatar
|
||||
name={page.space.name}
|
||||
avatarUrl={page.space.logo ?? undefined}
|
||||
type={AvatarIconType.SPACE_ICON}
|
||||
color="initials"
|
||||
variant="filled"
|
||||
size={18}
|
||||
/>
|
||||
<span>{page.space.name}</span>
|
||||
<span className={classes.metaDot} aria-hidden="true">
|
||||
•
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
<span className={classes.rowDate}>
|
||||
{t("Updated {{date}}", {
|
||||
date: formatLabelListDate(new Date(page.updatedAt)),
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
{/* {otherLabels.length > 0 && (
|
||||
<div className={classes.rowChips}>
|
||||
{visibleLabels.map((label) => (
|
||||
<LabelChip key={label.id} label={label} asLink />
|
||||
))}
|
||||
{hiddenLabels.length > 0 && (
|
||||
<Tooltip
|
||||
label={hiddenLabels.map((l) => l.name).join(", ")}
|
||||
withArrow
|
||||
openDelay={200}
|
||||
>
|
||||
<span className={classes.chipMore}>
|
||||
+{hiddenLabels.length}
|
||||
</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
)} */}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
@@ -1,160 +0,0 @@
|
||||
import { useMemo, useRef, useState, KeyboardEvent } from "react";
|
||||
import clsx from "clsx";
|
||||
import { IconPlus } from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useComputedColorScheme } from "@mantine/core";
|
||||
import { ILabel } from "@/features/label/types/label.types.ts";
|
||||
import { useWorkspaceLabelsQuery } from "@/features/label/queries/label-query.ts";
|
||||
import { getLabelColor } from "@/features/label/utils/label-colors.ts";
|
||||
import { normalizeLabelName } from "@/features/label/utils/normalize-label.ts";
|
||||
import classes from "@/features/label/label.module.css";
|
||||
|
||||
type LabelPickerProps = {
|
||||
applied: ILabel[];
|
||||
enabled: boolean;
|
||||
onAdd: (name: string) => void;
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
const NAME_PATTERN = /^[a-z0-9_-][a-z0-9_~-]*$/;
|
||||
const MAX_LABEL_NAME_LENGTH = 100;
|
||||
|
||||
function isValidLabelName(name: string): boolean {
|
||||
return (
|
||||
name.length > 0 &&
|
||||
name.length <= MAX_LABEL_NAME_LENGTH &&
|
||||
NAME_PATTERN.test(name)
|
||||
);
|
||||
}
|
||||
|
||||
export function LabelPicker({
|
||||
applied,
|
||||
enabled,
|
||||
onAdd,
|
||||
onClose,
|
||||
}: LabelPickerProps) {
|
||||
const { t } = useTranslation();
|
||||
const scheme = useComputedColorScheme("light");
|
||||
const [query, setQuery] = useState("");
|
||||
const [hover, setHover] = useState(0);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const normalized = normalizeLabelName(query);
|
||||
const { data } = useWorkspaceLabelsQuery(normalized, enabled);
|
||||
|
||||
const appliedNames = useMemo(
|
||||
() => new Set(applied.map((l) => l.name.toLowerCase())),
|
||||
[applied],
|
||||
);
|
||||
|
||||
const suggestions = useMemo(() => {
|
||||
const items = data?.items ?? [];
|
||||
return items.filter((l) => !appliedNames.has(l.name.toLowerCase()));
|
||||
}, [data, appliedNames]);
|
||||
|
||||
const exact = suggestions.find((l) => l.name === normalized);
|
||||
const canCreate =
|
||||
!exact && !appliedNames.has(normalized) && isValidLabelName(normalized);
|
||||
|
||||
const total = suggestions.length + (canCreate ? 1 : 0);
|
||||
|
||||
const select = (idx: number) => {
|
||||
if (idx < suggestions.length) {
|
||||
onAdd(suggestions[idx].name);
|
||||
} else if (canCreate) {
|
||||
onAdd(normalized);
|
||||
}
|
||||
setQuery("");
|
||||
setHover(0);
|
||||
inputRef.current?.focus();
|
||||
};
|
||||
|
||||
const onKey = (e: KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === "ArrowDown") {
|
||||
e.preventDefault();
|
||||
setHover((h) => Math.min(Math.max(total - 1, 0), h + 1));
|
||||
} else if (e.key === "ArrowUp") {
|
||||
e.preventDefault();
|
||||
setHover((h) => Math.max(0, h - 1));
|
||||
} else if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
if (total === 0) return;
|
||||
select(hover);
|
||||
} else if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classes.popover}>
|
||||
<div className={classes.popoverSearch}>
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
autoFocus
|
||||
maxLength={MAX_LABEL_NAME_LENGTH}
|
||||
placeholder={t("Search or create…")}
|
||||
value={query}
|
||||
onChange={(e) => {
|
||||
setQuery(e.target.value);
|
||||
setHover(0);
|
||||
}}
|
||||
onKeyDown={onKey}
|
||||
/>
|
||||
</div>
|
||||
<div className={classes.popoverList}>
|
||||
{total === 0 && (
|
||||
<div className={classes.popoverEmpty}>
|
||||
{normalized.length === 0
|
||||
? t("No labels yet")
|
||||
: appliedNames.has(normalized)
|
||||
? t("Already added")
|
||||
: !isValidLabelName(normalized)
|
||||
? t("Invalid label name")
|
||||
: t("No matches")}
|
||||
</div>
|
||||
)}
|
||||
{suggestions.map((s, i) => {
|
||||
const c = getLabelColor(s.name, scheme);
|
||||
return (
|
||||
<button
|
||||
key={s.id}
|
||||
type="button"
|
||||
className={clsx(
|
||||
classes.popoverItem,
|
||||
hover === i && classes.popoverItemHover,
|
||||
)}
|
||||
onMouseEnter={() => setHover(i)}
|
||||
onClick={() => select(i)}
|
||||
>
|
||||
<span
|
||||
className={classes.popoverItemDot}
|
||||
style={{ background: c.dot }}
|
||||
/>
|
||||
<span className={classes.popoverItemName}>{s.name}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
{canCreate && (
|
||||
<button
|
||||
type="button"
|
||||
className={clsx(
|
||||
classes.popoverItem,
|
||||
hover === suggestions.length && classes.popoverItemHover,
|
||||
)}
|
||||
onMouseEnter={() => setHover(suggestions.length)}
|
||||
onClick={() => select(suggestions.length)}
|
||||
>
|
||||
<span className={classes.popoverCreatePlus}>
|
||||
<IconPlus size={12} stroke={2} />
|
||||
</span>
|
||||
<span className={classes.popoverItemName}>
|
||||
{t("Create")} <b>"{normalized}"</b>
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,93 +0,0 @@
|
||||
import { useState } from "react";
|
||||
import clsx from "clsx";
|
||||
import { Divider, Popover, Stack, Text } from "@mantine/core";
|
||||
import { IconPlus } from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { LabelChip } from "@/features/label/components/label-chip.tsx";
|
||||
import { LabelPicker } from "@/features/label/components/label-picker.tsx";
|
||||
import {
|
||||
useAddLabelsMutation,
|
||||
usePageLabelsQuery,
|
||||
useRemoveLabelMutation,
|
||||
} from "@/features/label/queries/label-query.ts";
|
||||
import classes from "@/features/label/label.module.css";
|
||||
|
||||
type LabelsSectionProps = {
|
||||
pageId: string;
|
||||
canEdit: boolean;
|
||||
};
|
||||
|
||||
export function LabelsSection({ pageId, canEdit }: LabelsSectionProps) {
|
||||
const { t } = useTranslation();
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const { data } = usePageLabelsQuery(pageId);
|
||||
const addMutation = useAddLabelsMutation(pageId);
|
||||
const removeMutation = useRemoveLabelMutation(pageId);
|
||||
|
||||
const labels = data?.items ?? [];
|
||||
|
||||
if (!canEdit && labels.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const handleAdd = (name: string) => {
|
||||
addMutation.mutate({ pageId, names: [name] });
|
||||
};
|
||||
|
||||
const handleRemove = (labelId: string) => {
|
||||
removeMutation.mutate({ pageId, labelId });
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Divider />
|
||||
<Stack gap="xs">
|
||||
<Text size="xs" fw={500} c="dimmed">
|
||||
{t("Labels")}
|
||||
</Text>
|
||||
<div className={classes.labelsWrap}>
|
||||
{labels.map((label) => (
|
||||
<LabelChip
|
||||
key={label.id}
|
||||
label={label}
|
||||
asLink
|
||||
onRemove={canEdit ? () => handleRemove(label.id) : undefined}
|
||||
/>
|
||||
))}
|
||||
{canEdit && (
|
||||
<Popover
|
||||
opened={open}
|
||||
onChange={setOpen}
|
||||
position="bottom-end"
|
||||
shadow="lg"
|
||||
withinPortal
|
||||
offset={6}
|
||||
>
|
||||
<Popover.Target>
|
||||
<button
|
||||
type="button"
|
||||
className={clsx(classes.addBtn, open && classes.addBtnOpen)}
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
>
|
||||
<IconPlus size={12} stroke={2} />
|
||||
<span>
|
||||
{labels.length === 0 ? t("Add label") : t("Add")}
|
||||
</span>
|
||||
</button>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown p={0} className={classes.popover}>
|
||||
<LabelPicker
|
||||
applied={labels}
|
||||
enabled={open}
|
||||
onAdd={(name) => handleAdd(name)}
|
||||
onClose={() => setOpen(false)}
|
||||
/>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
)}
|
||||
</div>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,325 +0,0 @@
|
||||
.labelsWrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 24px;
|
||||
padding: 0 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12.5px;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.chipName {
|
||||
letter-spacing: 0.005em;
|
||||
}
|
||||
|
||||
.chipX {
|
||||
appearance: none;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: currentColor;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 4px;
|
||||
margin-right: -4px;
|
||||
margin-left: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.chipX:hover {
|
||||
opacity: 1;
|
||||
background: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.12));
|
||||
}
|
||||
|
||||
.addBtn {
|
||||
appearance: none;
|
||||
border: 1px dashed
|
||||
light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-3));
|
||||
background: transparent;
|
||||
color: var(--mantine-color-dimmed);
|
||||
height: 24px;
|
||||
padding: 0 8px;
|
||||
border-radius: 4px;
|
||||
font: inherit;
|
||||
font-size: 12.5px;
|
||||
font-weight: 500;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background 100ms ease,
|
||||
border-color 100ms ease,
|
||||
color 100ms ease;
|
||||
}
|
||||
|
||||
.addBtn:hover {
|
||||
background: light-dark(rgba(0, 0, 0, 0.03), rgba(255, 255, 255, 0.04));
|
||||
color: var(--mantine-color-text);
|
||||
border-color: light-dark(
|
||||
var(--mantine-color-gray-5),
|
||||
var(--mantine-color-dark-2)
|
||||
);
|
||||
}
|
||||
|
||||
.addBtnOpen {
|
||||
background: var(--mantine-color-body);
|
||||
border-style: solid;
|
||||
border-color: light-dark(
|
||||
var(--mantine-color-gray-5),
|
||||
var(--mantine-color-dark-2)
|
||||
);
|
||||
color: var(--mantine-color-text);
|
||||
}
|
||||
|
||||
.popover {
|
||||
width: 240px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.popoverSearch {
|
||||
padding: 8px 8px 4px;
|
||||
border-bottom: 1px solid
|
||||
light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
|
||||
}
|
||||
|
||||
.popoverSearch input {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
padding: 4px 4px;
|
||||
color: var(--mantine-color-text);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.popoverSearch input::placeholder {
|
||||
color: var(--mantine-color-placeholder);
|
||||
}
|
||||
|
||||
.popoverList {
|
||||
max-height: 240px;
|
||||
overflow-y: auto;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.popoverEmpty {
|
||||
padding: 12px 8px;
|
||||
color: var(--mantine-color-dimmed);
|
||||
font-size: 12.5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.popoverItem {
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 8px;
|
||||
border-radius: 4px;
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
color: var(--mantine-color-text);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.popoverItemHover {
|
||||
background: light-dark(
|
||||
var(--mantine-color-gray-1),
|
||||
var(--mantine-color-dark-5)
|
||||
);
|
||||
}
|
||||
|
||||
.popoverItemDot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.popoverItemName {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.popoverCreatePlus {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--mantine-color-dimmed);
|
||||
}
|
||||
|
||||
.headerChip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
height: 36px;
|
||||
padding: 0 14px;
|
||||
border-radius: 8px;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.005em;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
transition: filter 100ms ease;
|
||||
}
|
||||
|
||||
.headerChip:hover {
|
||||
filter: brightness(0.97);
|
||||
}
|
||||
|
||||
.headerDot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 14px 12px;
|
||||
margin: 0 -12px;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
transition: background-color 80ms ease;
|
||||
}
|
||||
|
||||
.row + .row {
|
||||
border-top: 1px solid
|
||||
light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
|
||||
}
|
||||
|
||||
.row:hover {
|
||||
background-color: light-dark(
|
||||
var(--mantine-color-gray-0),
|
||||
var(--mantine-color-dark-6)
|
||||
);
|
||||
}
|
||||
|
||||
.row:hover + .row,
|
||||
.row:has(+ .row:hover) {
|
||||
border-top-color: transparent;
|
||||
}
|
||||
|
||||
.rowMain {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.rowIcon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
color: var(--mantine-color-dimmed);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.rowBody {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.rowTitle {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: var(--mantine-color-text);
|
||||
line-height: 1.3;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.rowChips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.chipMore {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 24px;
|
||||
padding: 0 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12.5px;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
color: var(--mantine-color-dimmed);
|
||||
background: light-dark(
|
||||
var(--mantine-color-gray-1),
|
||||
var(--mantine-color-dark-5)
|
||||
);
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.rowMeta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
color: var(--mantine-color-dimmed);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.rowDate {
|
||||
color: var(--mantine-color-dimmed);
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.metaDot {
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
color: var(--mantine-color-dimmed);
|
||||
}
|
||||
|
||||
.chipLink {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.chipLink:hover {
|
||||
filter: brightness(0.97);
|
||||
}
|
||||
@@ -1,157 +0,0 @@
|
||||
import {
|
||||
keepPreviousData,
|
||||
useInfiniteQuery,
|
||||
useMutation,
|
||||
useQuery,
|
||||
useQueryClient,
|
||||
} from "@tanstack/react-query";
|
||||
import {
|
||||
addLabelsToPage,
|
||||
findPagesByLabel,
|
||||
getLabelInfo,
|
||||
getPageLabels,
|
||||
getWorkspaceLabels,
|
||||
removeLabelFromPage,
|
||||
} from "@/features/label/services/label-service.ts";
|
||||
import {
|
||||
IAddLabels,
|
||||
ILabel,
|
||||
IRemoveLabel,
|
||||
} from "@/features/label/types/label.types.ts";
|
||||
import { IPagination } from "@/lib/types.ts";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const PAGE_LABELS_KEY = (pageId: string) => ["page-labels", pageId];
|
||||
const WORKSPACE_LABELS_KEY = (query?: string) => ["workspace-labels", query ?? ""];
|
||||
|
||||
export function usePageLabelsQuery(pageId: string | undefined) {
|
||||
return useQuery({
|
||||
queryKey: PAGE_LABELS_KEY(pageId ?? ""),
|
||||
queryFn: () => getPageLabels({ pageId: pageId as string, limit: 100 }),
|
||||
enabled: !!pageId,
|
||||
});
|
||||
}
|
||||
|
||||
export function useWorkspaceLabelsQuery(query: string, enabled: boolean) {
|
||||
return useQuery({
|
||||
queryKey: WORKSPACE_LABELS_KEY(query),
|
||||
queryFn: () => getWorkspaceLabels({ type: "page", query, limit: 50 }),
|
||||
enabled,
|
||||
staleTime: 30 * 1000,
|
||||
});
|
||||
}
|
||||
|
||||
export function useAddLabelsMutation(pageId: string | undefined) {
|
||||
const queryClient = useQueryClient();
|
||||
const { t } = useTranslation();
|
||||
|
||||
return useMutation<ILabel[], Error, IAddLabels>({
|
||||
mutationFn: (data) => addLabelsToPage(data),
|
||||
onSuccess: (added) => {
|
||||
queryClient.setQueryData<IPagination<ILabel>>(
|
||||
PAGE_LABELS_KEY(pageId ?? ""),
|
||||
(cache) => {
|
||||
if (!cache) return cache;
|
||||
const existing = new Set(cache.items.map((l) => l.id));
|
||||
const additions = added.filter((l) => !existing.has(l.id));
|
||||
if (additions.length === 0) return cache;
|
||||
return { ...cache, items: [...cache.items, ...additions] };
|
||||
},
|
||||
);
|
||||
|
||||
queryClient.setQueriesData<IPagination<ILabel>>(
|
||||
{ queryKey: ["workspace-labels"] },
|
||||
(cache) => {
|
||||
if (!cache) return cache;
|
||||
const existing = new Set(cache.items.map((l) => l.id));
|
||||
const additions = added.filter((l) => !existing.has(l.id));
|
||||
if (additions.length === 0) return cache;
|
||||
return {
|
||||
...cache,
|
||||
items: [...cache.items, ...additions].sort((a, b) =>
|
||||
a.name.localeCompare(b.name),
|
||||
),
|
||||
};
|
||||
},
|
||||
);
|
||||
|
||||
queryClient.invalidateQueries({ queryKey: ["label-pages"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["label-info"] });
|
||||
},
|
||||
onError: (error: any) => {
|
||||
notifications.show({
|
||||
message: error?.response?.data?.message ?? t("Failed to add label"),
|
||||
color: "red",
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useRemoveLabelMutation(pageId: string | undefined) {
|
||||
const queryClient = useQueryClient();
|
||||
const { t } = useTranslation();
|
||||
|
||||
return useMutation<void, Error, IRemoveLabel>({
|
||||
mutationFn: (data) => removeLabelFromPage(data),
|
||||
onSuccess: (_data, variables) => {
|
||||
const cache = queryClient.getQueryData<IPagination<ILabel>>(
|
||||
PAGE_LABELS_KEY(pageId ?? ""),
|
||||
);
|
||||
if (cache) {
|
||||
queryClient.setQueryData<IPagination<ILabel>>(
|
||||
PAGE_LABELS_KEY(pageId ?? ""),
|
||||
{
|
||||
...cache,
|
||||
items: cache.items.filter((l) => l.id !== variables.labelId),
|
||||
},
|
||||
);
|
||||
}
|
||||
queryClient.invalidateQueries({ queryKey: ["workspace-labels"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["label-pages"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["label-info"] });
|
||||
},
|
||||
onError: () => {
|
||||
notifications.show({
|
||||
message: t("Failed to remove label"),
|
||||
color: "red",
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useLabelInfoQuery(name: string, spaceId?: string) {
|
||||
return useQuery({
|
||||
queryKey: ["label-info", name, spaceId ?? ""],
|
||||
queryFn: () => getLabelInfo({ name, type: "page", spaceId }),
|
||||
enabled: !!name,
|
||||
placeholderData: keepPreviousData,
|
||||
});
|
||||
}
|
||||
|
||||
const LABEL_PAGES_LIMIT = 25;
|
||||
|
||||
export function useLabelPagesQuery(
|
||||
name: string,
|
||||
query: string,
|
||||
spaceId?: string,
|
||||
) {
|
||||
return useInfiniteQuery({
|
||||
queryKey: ["label-pages", name, query, spaceId ?? ""],
|
||||
queryFn: ({ pageParam }) =>
|
||||
findPagesByLabel({
|
||||
name,
|
||||
query,
|
||||
spaceId,
|
||||
cursor: pageParam,
|
||||
limit: LABEL_PAGES_LIMIT,
|
||||
}),
|
||||
enabled: !!name,
|
||||
initialPageParam: undefined as string | undefined,
|
||||
getNextPageParam: (lastPage) =>
|
||||
lastPage.meta.hasNextPage
|
||||
? (lastPage.meta.nextCursor ?? undefined)
|
||||
: undefined,
|
||||
placeholderData: keepPreviousData,
|
||||
});
|
||||
}
|
||||
@@ -1,55 +0,0 @@
|
||||
import api from "@/lib/api-client";
|
||||
import { IPagination } from "@/lib/types.ts";
|
||||
import {
|
||||
IAddLabels,
|
||||
IFindPagesByLabelParams,
|
||||
ILabel,
|
||||
ILabelInfo,
|
||||
ILabelInfoParams,
|
||||
ILabelPageItem,
|
||||
IListLabelsParams,
|
||||
IPageLabelsParams,
|
||||
IRemoveLabel,
|
||||
} from "@/features/label/types/label.types.ts";
|
||||
|
||||
export async function getPageLabels(
|
||||
params: IPageLabelsParams,
|
||||
): Promise<IPagination<ILabel>> {
|
||||
const req = await api.post<IPagination<ILabel>>("/pages/labels", params);
|
||||
return req.data;
|
||||
}
|
||||
|
||||
export async function getWorkspaceLabels(
|
||||
params: IListLabelsParams,
|
||||
): Promise<IPagination<ILabel>> {
|
||||
const req = await api.post<IPagination<ILabel>>("/labels", params);
|
||||
return req.data;
|
||||
}
|
||||
|
||||
export async function addLabelsToPage(
|
||||
data: IAddLabels,
|
||||
): Promise<ILabel[]> {
|
||||
const req = await api.post<ILabel[]>("/pages/labels/add", data);
|
||||
return req.data;
|
||||
}
|
||||
|
||||
export async function removeLabelFromPage(data: IRemoveLabel): Promise<void> {
|
||||
await api.post("/pages/labels/remove", data);
|
||||
}
|
||||
|
||||
export async function getLabelInfo(
|
||||
params: ILabelInfoParams,
|
||||
): Promise<ILabelInfo> {
|
||||
const req = await api.post<ILabelInfo>("/labels/info", params);
|
||||
return req.data;
|
||||
}
|
||||
|
||||
export async function findPagesByLabel(
|
||||
params: IFindPagesByLabelParams,
|
||||
): Promise<IPagination<ILabelPageItem>> {
|
||||
const req = await api.post<IPagination<ILabelPageItem>>(
|
||||
"/labels/pages",
|
||||
params,
|
||||
);
|
||||
return req.data;
|
||||
}
|
||||
@@ -1,70 +0,0 @@
|
||||
import { QueryParams } from "@/lib/types.ts";
|
||||
|
||||
export type LabelType = "page" | "space";
|
||||
|
||||
export interface ILabel {
|
||||
id: string;
|
||||
name: string;
|
||||
type: LabelType;
|
||||
workspaceId: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface IAddLabels {
|
||||
pageId: string;
|
||||
names: string[];
|
||||
}
|
||||
|
||||
export interface IRemoveLabel {
|
||||
pageId: string;
|
||||
labelId: string;
|
||||
}
|
||||
|
||||
export interface IPageLabelsParams {
|
||||
pageId: string;
|
||||
cursor?: string;
|
||||
limit?: number;
|
||||
}
|
||||
|
||||
export interface IListLabelsParams {
|
||||
type: LabelType;
|
||||
query?: string;
|
||||
cursor?: string;
|
||||
limit?: number;
|
||||
}
|
||||
|
||||
export interface ILabelInfo {
|
||||
name: string;
|
||||
usageCount: number;
|
||||
}
|
||||
|
||||
export interface ILabelPageItem {
|
||||
id: string;
|
||||
slugId: string;
|
||||
title: string | null;
|
||||
icon: string | null;
|
||||
spaceId: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
space: {
|
||||
id: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
logo: string | null;
|
||||
} | null;
|
||||
creator: { id: string; name: string; avatarUrl: string | null } | null;
|
||||
labels: { id: string; name: string }[];
|
||||
}
|
||||
|
||||
export interface IFindPagesByLabelParams extends QueryParams {
|
||||
labelId?: string;
|
||||
name?: string;
|
||||
spaceId?: string;
|
||||
}
|
||||
|
||||
export interface ILabelInfoParams {
|
||||
name: string;
|
||||
type: LabelType;
|
||||
spaceId?: string;
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
import { format, isThisYear, isToday, isYesterday } from "date-fns";
|
||||
import i18n from "@/i18n.ts";
|
||||
|
||||
export function formatLabelListDate(date: Date): string {
|
||||
if (isToday(date)) {
|
||||
return i18n.t("Today, {{time}}", { time: format(date, "h:mma") });
|
||||
}
|
||||
if (isYesterday(date)) {
|
||||
return i18n.t("Yesterday, {{time}}", { time: format(date, "h:mma") });
|
||||
}
|
||||
if (isThisYear(date)) {
|
||||
return format(date, "MMM dd");
|
||||
}
|
||||
return format(date, "MMM dd, yyyy");
|
||||
}
|
||||
@@ -1,55 +0,0 @@
|
||||
type LabelColor = {
|
||||
bg: string;
|
||||
fg: string;
|
||||
dot: string;
|
||||
};
|
||||
|
||||
const LABEL_PALETTE: Record<string, LabelColor> = {
|
||||
slate: { bg: "#eef1f5", fg: "#3b475a", dot: "#6b7a90" },
|
||||
blue: { bg: "#e6f0ff", fg: "#1e4fbf", dot: "#3b82f6" },
|
||||
green: { bg: "#e3f5ea", fg: "#1f7a47", dot: "#22a05a" },
|
||||
amber: { bg: "#fbf0d9", fg: "#8a5a00", dot: "#d99c1f" },
|
||||
red: { bg: "#fde6e6", fg: "#a02b2b", dot: "#dc4a4a" },
|
||||
purple: { bg: "#efe9fb", fg: "#5a3aa8", dot: "#8b6bd9" },
|
||||
pink: { bg: "#fce6ee", fg: "#a8336d", dot: "#dc6699" },
|
||||
teal: { bg: "#daf1ee", fg: "#1f6f6a", dot: "#2fa39a" },
|
||||
};
|
||||
|
||||
const PALETTE_KEYS = Object.keys(LABEL_PALETTE);
|
||||
|
||||
const DARK_PALETTE: Record<string, LabelColor> = {
|
||||
slate: { bg: "#2a3140", fg: "#c8d3e3", dot: "#7e8da8" },
|
||||
blue: { bg: "#152a52", fg: "#a9c4ff", dot: "#5b9aff" },
|
||||
green: { bg: "#143b27", fg: "#9ce3b8", dot: "#3ec97c" },
|
||||
amber: { bg: "#3d2c0e", fg: "#f5cf85", dot: "#e6b34a" },
|
||||
red: { bg: "#401a1a", fg: "#f1a8a8", dot: "#e26565" },
|
||||
purple: { bg: "#2a1f4d", fg: "#c8b4f4", dot: "#a48ce6" },
|
||||
pink: { bg: "#3c1a2a", fg: "#f3a9c9", dot: "#e07ab0" },
|
||||
teal: { bg: "#103633", fg: "#92d5cf", dot: "#48b8af" },
|
||||
};
|
||||
|
||||
function hashName(name: string): number {
|
||||
// Per-char accumulation with 31. Note: 31 ≡ -1 (mod 8), so the low bits of
|
||||
// this hash are highly correlated across short strings — `% 8` would cluster.
|
||||
let h = 0;
|
||||
for (let i = 0; i < name.length; i++) {
|
||||
h = (Math.imul(h, 31) + name.charCodeAt(i)) | 0;
|
||||
}
|
||||
// Murmur3 fmix32 finalizer — avalanches high bits into low bits so the
|
||||
// subsequent `% palette.length` (small power of two) is well-distributed.
|
||||
h ^= h >>> 16;
|
||||
h = Math.imul(h, 0x85ebca6b);
|
||||
h ^= h >>> 13;
|
||||
h = Math.imul(h, 0xc2b2ae35);
|
||||
h ^= h >>> 16;
|
||||
return h >>> 0;
|
||||
}
|
||||
|
||||
export function getLabelColor(
|
||||
name: string,
|
||||
scheme: "light" | "dark" = "light",
|
||||
): LabelColor {
|
||||
const key = PALETTE_KEYS[hashName(name) % PALETTE_KEYS.length];
|
||||
const palette = scheme === "dark" ? DARK_PALETTE : LABEL_PALETTE;
|
||||
return palette[key];
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
export function normalizeLabelName(name: string): string {
|
||||
return name.trim().replace(/\s+/g, "-").toLowerCase();
|
||||
}
|
||||
@@ -1,113 +0,0 @@
|
||||
import {
|
||||
Button,
|
||||
Center,
|
||||
Group,
|
||||
Loader,
|
||||
Stack,
|
||||
Text,
|
||||
UnstyledButton,
|
||||
} from "@mantine/core";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useBacklinksQuery } from "@/features/page-details/queries/backlinks-query.ts";
|
||||
import {
|
||||
BacklinkDirection,
|
||||
IBacklinkPageItem,
|
||||
} from "@/features/page-details/types/backlink.types.ts";
|
||||
import { buildPageUrl } from "@/features/page/page.utils.ts";
|
||||
import { getPageIcon } from "@/lib";
|
||||
|
||||
interface BacklinksListProps {
|
||||
pageId: string;
|
||||
direction: BacklinkDirection;
|
||||
enabled: boolean;
|
||||
onItemClick: () => void;
|
||||
}
|
||||
|
||||
export function BacklinksList({
|
||||
pageId,
|
||||
direction,
|
||||
enabled,
|
||||
onItemClick,
|
||||
}: BacklinksListProps) {
|
||||
const { t } = useTranslation();
|
||||
const { data, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage } =
|
||||
useBacklinksQuery(pageId, direction, enabled);
|
||||
|
||||
if (!enabled) return null;
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Center py="sm">
|
||||
<Loader size="sm" />
|
||||
</Center>
|
||||
);
|
||||
}
|
||||
|
||||
const items: IBacklinkPageItem[] =
|
||||
data?.pages.flatMap((page) => page.items) ?? [];
|
||||
|
||||
if (items.length === 0) {
|
||||
return (
|
||||
<Text c="dimmed" size="sm" py="md">
|
||||
{direction === "incoming"
|
||||
? t("No pages link here yet.")
|
||||
: t("This page doesn't link to other pages yet.")}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
|
||||
const handleClick = (e: React.MouseEvent) => {
|
||||
if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) {
|
||||
return;
|
||||
}
|
||||
onItemClick();
|
||||
};
|
||||
|
||||
return (
|
||||
<Stack gap={4}>
|
||||
{items.map((item) => (
|
||||
<UnstyledButton
|
||||
key={item.id}
|
||||
component={Link}
|
||||
to={
|
||||
item.space?.slug
|
||||
? buildPageUrl(
|
||||
item.space.slug,
|
||||
item.slugId,
|
||||
item.title ?? undefined,
|
||||
)
|
||||
: "#"
|
||||
}
|
||||
onClick={handleClick}
|
||||
style={{ padding: "8px 4px", borderRadius: 4, userSelect: "none" }}
|
||||
>
|
||||
<Group gap="xs" wrap="nowrap">
|
||||
{getPageIcon(item.icon ?? "")}
|
||||
<Stack gap={0} style={{ flex: 1, minWidth: 0 }}>
|
||||
<Text size="sm" fw={500} lineClamp={1}>
|
||||
{item.title || t("Untitled")}
|
||||
</Text>
|
||||
{item.space?.name && (
|
||||
<Text size="xs" c="dimmed" lineClamp={1}>
|
||||
{item.space.name}
|
||||
</Text>
|
||||
)}
|
||||
</Stack>
|
||||
</Group>
|
||||
</UnstyledButton>
|
||||
))}
|
||||
{hasNextPage && (
|
||||
<Button
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
loading={isFetchingNextPage}
|
||||
onClick={() => fetchNextPage()}
|
||||
mt="xs"
|
||||
>
|
||||
{t("Load more")}
|
||||
</Button>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@@ -1,62 +0,0 @@
|
||||
import { Modal, Stack, Text } from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useBacklinksCountQuery } from "@/features/page-details/queries/backlinks-query.ts";
|
||||
import { BacklinksList } from "./backlinks-list";
|
||||
|
||||
interface BacklinksModalProps {
|
||||
pageId: string;
|
||||
opened: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function BacklinksModal({
|
||||
pageId,
|
||||
opened,
|
||||
onClose,
|
||||
}: BacklinksModalProps) {
|
||||
const { t } = useTranslation();
|
||||
const { data: counts } = useBacklinksCountQuery(pageId);
|
||||
|
||||
return (
|
||||
<Modal.Root opened={opened} onClose={onClose} size={640} yOffset="10vh">
|
||||
<Modal.Overlay />
|
||||
<Modal.Content>
|
||||
<Modal.Header>
|
||||
<Modal.Title fw={500}>{t("Backlinks")}</Modal.Title>
|
||||
<Modal.CloseButton />
|
||||
</Modal.Header>
|
||||
<Modal.Body>
|
||||
<Stack gap="lg">
|
||||
<Stack gap="xs">
|
||||
<Text size="sm" fw={500} c="dimmed">
|
||||
{t("Incoming links ({{count}})", {
|
||||
count: counts?.incoming ?? 0,
|
||||
})}
|
||||
</Text>
|
||||
<BacklinksList
|
||||
pageId={pageId}
|
||||
direction="incoming"
|
||||
enabled={opened}
|
||||
onItemClick={onClose}
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
<Stack gap="xs">
|
||||
<Text size="sm" fw={500} c="dimmed">
|
||||
{t("Outgoing links ({{count}})", {
|
||||
count: counts?.outgoing ?? 0,
|
||||
})}
|
||||
</Text>
|
||||
<BacklinksList
|
||||
pageId={pageId}
|
||||
direction="outgoing"
|
||||
enabled={opened}
|
||||
onItemClick={onClose}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Modal.Body>
|
||||
</Modal.Content>
|
||||
</Modal.Root>
|
||||
);
|
||||
}
|
||||
@@ -1,239 +0,0 @@
|
||||
import {
|
||||
Divider,
|
||||
Group,
|
||||
Skeleton,
|
||||
Stack,
|
||||
Text,
|
||||
UnstyledButton,
|
||||
} from "@mantine/core";
|
||||
import { IconChevronRight } from "@tabler/icons-react";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import { useAtomValue } from "jotai";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { extractPageSlugId } from "@/lib";
|
||||
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 { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
|
||||
import { LabelsSection } from "@/features/label/components/labels-section.tsx";
|
||||
|
||||
export function PageDetailsAside() {
|
||||
const { pageSlug } = useParams();
|
||||
const { data: page } = usePageQuery({
|
||||
pageId: extractPageSlugId(pageSlug),
|
||||
});
|
||||
const pageEditor = useAtomValue(pageEditorAtom);
|
||||
const { data: counts, isLoading: countsLoading } = useBacklinksCountQuery(page?.id);
|
||||
const [modalOpened, { open: openModal, close: closeModal }] =
|
||||
useDisclosure(false);
|
||||
|
||||
if (!page) return null;
|
||||
|
||||
const wordCount: number =
|
||||
pageEditor?.storage?.characterCount?.words?.() ?? 0;
|
||||
const characterCount: number =
|
||||
pageEditor?.storage?.characterCount?.characters?.() ?? 0;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack gap="md">
|
||||
<PeopleSection
|
||||
creator={page.creator}
|
||||
lastUpdatedBy={page.lastUpdatedBy}
|
||||
/>
|
||||
|
||||
<Divider />
|
||||
|
||||
<StatsSection
|
||||
wordCount={wordCount}
|
||||
characterCount={characterCount}
|
||||
createdAt={page.createdAt}
|
||||
updatedAt={page.updatedAt}
|
||||
/>
|
||||
|
||||
<Divider />
|
||||
|
||||
<BacklinksSection
|
||||
incomingCount={counts?.incoming ?? 0}
|
||||
outgoingCount={counts?.outgoing ?? 0}
|
||||
isLoading={countsLoading}
|
||||
onClick={openModal}
|
||||
/>
|
||||
|
||||
<LabelsSection
|
||||
pageId={page.id}
|
||||
canEdit={page.permissions?.canEdit ?? false}
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
<BacklinksModal
|
||||
pageId={page.id}
|
||||
opened={modalOpened}
|
||||
onClose={closeModal}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function PeopleSection({
|
||||
creator,
|
||||
lastUpdatedBy,
|
||||
}: {
|
||||
creator: { id: string; name: string; avatarUrl: string } | null;
|
||||
lastUpdatedBy: { id: string; name: string; avatarUrl: string } | null;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Stack gap="xs">
|
||||
<PersonRow label={t("Created by")} person={creator} />
|
||||
<PersonRow label={t("Last updated by")} person={lastUpdatedBy} />
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
function PersonRow({
|
||||
label,
|
||||
person,
|
||||
}: {
|
||||
label: string;
|
||||
person: { id: string; name: string; avatarUrl: string } | null;
|
||||
}) {
|
||||
return (
|
||||
<Group justify="space-between" wrap="nowrap">
|
||||
<Text size="sm" c="dimmed">
|
||||
{label}
|
||||
</Text>
|
||||
{person ? (
|
||||
<Group gap={6} wrap="nowrap">
|
||||
<CustomAvatar
|
||||
avatarUrl={person.avatarUrl}
|
||||
name={person.name}
|
||||
size={20}
|
||||
radius="xl"
|
||||
/>
|
||||
<Text size="sm" lineClamp={1}>
|
||||
{person.name}
|
||||
</Text>
|
||||
</Group>
|
||||
) : (
|
||||
<Text size="sm" c="dimmed">
|
||||
—
|
||||
</Text>
|
||||
)}
|
||||
</Group>
|
||||
);
|
||||
}
|
||||
|
||||
function StatsSection({
|
||||
wordCount,
|
||||
characterCount,
|
||||
createdAt,
|
||||
updatedAt,
|
||||
}: {
|
||||
wordCount: number;
|
||||
characterCount: number;
|
||||
createdAt: Date | string;
|
||||
updatedAt: Date | string;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Stack gap="xs">
|
||||
<Text size="xs" fw={500} c="dimmed">
|
||||
{t("Stats")}
|
||||
</Text>
|
||||
<StatRow label={t("Word count")} value={String(wordCount)} />
|
||||
<StatRow label={t("Characters")} value={String(characterCount)} />
|
||||
<StatRow
|
||||
label={t("Created")}
|
||||
value={formattedDate(new Date(createdAt))}
|
||||
/>
|
||||
<StatRow
|
||||
label={t("Last updated")}
|
||||
value={timeAgo(new Date(updatedAt))}
|
||||
/>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
function StatRow({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<Group justify="space-between" wrap="nowrap">
|
||||
<Text size="sm" c="dimmed">
|
||||
{label}
|
||||
</Text>
|
||||
<Text size="sm">{value}</Text>
|
||||
</Group>
|
||||
);
|
||||
}
|
||||
|
||||
function BacklinksSection({
|
||||
incomingCount,
|
||||
outgoingCount,
|
||||
isLoading,
|
||||
onClick,
|
||||
}: {
|
||||
incomingCount: number;
|
||||
outgoingCount: number;
|
||||
isLoading: boolean;
|
||||
onClick: () => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Stack gap="xs">
|
||||
<Text size="xs" fw={500} c="dimmed">
|
||||
{t("Backlinks")}
|
||||
</Text>
|
||||
<BacklinksRow
|
||||
label={t("Incoming links")}
|
||||
count={incomingCount}
|
||||
isLoading={isLoading}
|
||||
onClick={onClick}
|
||||
/>
|
||||
<BacklinksRow
|
||||
label={t("Outgoing links")}
|
||||
count={outgoingCount}
|
||||
isLoading={isLoading}
|
||||
onClick={onClick}
|
||||
/>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
function BacklinksRow({
|
||||
label,
|
||||
count,
|
||||
isLoading,
|
||||
onClick,
|
||||
}: {
|
||||
label: string;
|
||||
count: number;
|
||||
isLoading: boolean;
|
||||
onClick: () => void;
|
||||
}) {
|
||||
return (
|
||||
<UnstyledButton
|
||||
onClick={onClick}
|
||||
style={{
|
||||
padding: "4px 4px",
|
||||
borderRadius: 4,
|
||||
}}
|
||||
>
|
||||
<Group justify="space-between" wrap="nowrap">
|
||||
<Text size="sm" c="dimmed">
|
||||
{label}
|
||||
</Text>
|
||||
<Group gap={6} wrap="nowrap">
|
||||
{isLoading ? (
|
||||
<Skeleton height={18} width={20} />
|
||||
) : (
|
||||
<Text size="sm">{count}</Text>
|
||||
)}
|
||||
<IconChevronRight size={16} stroke={2} color="var(--mantine-color-dimmed)" />
|
||||
</Group>
|
||||
</Group>
|
||||
</UnstyledButton>
|
||||
);
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
|
||||
import {
|
||||
getBacklinks,
|
||||
getBacklinksCount,
|
||||
} from "@/features/page-details/services/backlinks-service.ts";
|
||||
import {
|
||||
BacklinkDirection,
|
||||
IBacklinkCount,
|
||||
} from "@/features/page-details/types/backlink.types.ts";
|
||||
|
||||
const BACKLINKS_STALE_TIME = 30 * 1000;
|
||||
const BACKLINKS_PAGE_LIMIT = 100;
|
||||
|
||||
export function useBacklinksCountQuery(pageId: string | undefined) {
|
||||
return useQuery<IBacklinkCount>({
|
||||
queryKey: ["backlinks-count", pageId],
|
||||
queryFn: () => getBacklinksCount(pageId as string),
|
||||
enabled: !!pageId,
|
||||
staleTime: BACKLINKS_STALE_TIME,
|
||||
});
|
||||
}
|
||||
|
||||
export function useBacklinksQuery(
|
||||
pageId: string | undefined,
|
||||
direction: BacklinkDirection,
|
||||
enabled: boolean,
|
||||
) {
|
||||
return useInfiniteQuery({
|
||||
queryKey: ["backlinks", pageId, direction],
|
||||
queryFn: ({ pageParam }) =>
|
||||
getBacklinks({
|
||||
pageId: pageId as string,
|
||||
direction,
|
||||
cursor: pageParam,
|
||||
limit: BACKLINKS_PAGE_LIMIT,
|
||||
}),
|
||||
enabled: enabled && !!pageId,
|
||||
initialPageParam: undefined as string | undefined,
|
||||
getNextPageParam: (lastPage) =>
|
||||
lastPage.meta.hasNextPage
|
||||
? (lastPage.meta.nextCursor ?? undefined)
|
||||
: undefined,
|
||||
staleTime: BACKLINKS_STALE_TIME,
|
||||
});
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
import api from "@/lib/api-client";
|
||||
import { IPagination } from "@/lib/types.ts";
|
||||
import {
|
||||
IBacklinkCount,
|
||||
IBacklinkPageItem,
|
||||
IBacklinksListParams,
|
||||
} from "@/features/page-details/types/backlink.types.ts";
|
||||
|
||||
export async function getBacklinksCount(
|
||||
pageId: string,
|
||||
): Promise<IBacklinkCount> {
|
||||
const req = await api.post<IBacklinkCount>("/pages/backlinks-count", {
|
||||
pageId,
|
||||
});
|
||||
return req.data;
|
||||
}
|
||||
|
||||
export async function getBacklinks(
|
||||
params: IBacklinksListParams,
|
||||
): Promise<IPagination<IBacklinkPageItem>> {
|
||||
const req = await api.post<IPagination<IBacklinkPageItem>>(
|
||||
"/pages/backlinks",
|
||||
params,
|
||||
);
|
||||
return req.data;
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
export type BacklinkDirection = "incoming" | "outgoing";
|
||||
|
||||
export interface IBacklinkCount {
|
||||
incoming: number;
|
||||
outgoing: number;
|
||||
}
|
||||
|
||||
export interface IBacklinkPageItem {
|
||||
id: string;
|
||||
slugId: string;
|
||||
title: string | null;
|
||||
icon: string | null;
|
||||
spaceId: string;
|
||||
space: { id: string; slug: string; name: string } | null;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface IBacklinksListParams {
|
||||
pageId: string;
|
||||
direction: BacklinkDirection;
|
||||
cursor?: string;
|
||||
limit?: number;
|
||||
}
|
||||
@@ -29,7 +29,7 @@ import { buildPageUrl } from "@/features/page/page.utils.ts";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { getAppUrl } from "@/lib/config.ts";
|
||||
import { extractPageSlugId } from "@/lib";
|
||||
import { useTreeMutation } from "@/features/page/tree/hooks/use-tree-mutation.ts";
|
||||
import { treeApiAtom } from "@/features/page/tree/atoms/tree-api-atom.ts";
|
||||
import { useDeletePageModal } from "@/features/page/hooks/use-delete-page-modal.tsx";
|
||||
import { PageWidthToggle } from "@/features/user/components/page-width-pref.tsx";
|
||||
import { Trans, useTranslation } from "react-i18next";
|
||||
@@ -134,7 +134,7 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
|
||||
pageId: extractPageSlugId(pageSlug),
|
||||
});
|
||||
const { openDeleteModal } = useDeletePageModal();
|
||||
const { handleDelete } = useTreeMutation(page?.spaceId ?? "");
|
||||
const [tree] = useAtom(treeApiAtom);
|
||||
const [exportOpened, { open: openExportModal, close: closeExportModal }] =
|
||||
useDisclosure(false);
|
||||
const [
|
||||
@@ -183,7 +183,7 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
|
||||
};
|
||||
|
||||
const handleDeletePage = () => {
|
||||
openDeleteModal({ onConfirm: () => handleDelete(page.id) });
|
||||
openDeleteModal({ onConfirm: () => tree?.delete(page.id) });
|
||||
};
|
||||
|
||||
const handleToggleFavorite = () => {
|
||||
|
||||
@@ -8,7 +8,7 @@ interface Props {
|
||||
}
|
||||
export default function PageHeader({ readOnly }: Props) {
|
||||
return (
|
||||
<div className={classes.header} data-page-header="true">
|
||||
<div className={classes.header}>
|
||||
<Group justify="space-between" h="100%" px="md" wrap="nowrap" className={classes.group}>
|
||||
<Breadcrumb />
|
||||
|
||||
|
||||
@@ -37,7 +37,7 @@ import { validate as isValidUuid } from "uuid";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useAtom } from "jotai";
|
||||
import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom";
|
||||
import { treeModel } from "@/features/page/tree/model/tree-model";
|
||||
import { SimpleTree } from "react-arborist";
|
||||
import { SpaceTreeNode } from "@/features/page/tree/types";
|
||||
import { useQueryEmit } from "@/features/websocket/use-query-emit";
|
||||
|
||||
@@ -170,8 +170,11 @@ export function useRestorePageMutation() {
|
||||
onSuccess: async (restoredPage) => {
|
||||
notifications.show({ message: "Page restored successfully" });
|
||||
|
||||
// Add the restored page back to the tree
|
||||
const treeApi = new SimpleTree<SpaceTreeNode>(treeData);
|
||||
|
||||
// Check if the page already exists in the tree (it shouldn't)
|
||||
if (!treeModel.find(treeData, restoredPage.id)) {
|
||||
if (!treeApi.find(restoredPage.id)) {
|
||||
// Create the tree node data with hasChildren from backend
|
||||
const nodeData: SpaceTreeNode = {
|
||||
id: restoredPage.id,
|
||||
@@ -190,17 +193,24 @@ export function useRestorePageMutation() {
|
||||
let index = 0;
|
||||
|
||||
if (parentId) {
|
||||
const parentNode = treeModel.find(treeData, parentId);
|
||||
const parentNode = treeApi.find(parentId);
|
||||
if (parentNode) {
|
||||
index = parentNode.children?.length || 0;
|
||||
}
|
||||
} else {
|
||||
// Root level page
|
||||
index = treeData.length;
|
||||
index = treeApi.data.length;
|
||||
}
|
||||
|
||||
// Add the node to the tree
|
||||
setTreeData(treeModel.insert(treeData, parentId, nodeData, index));
|
||||
treeApi.create({
|
||||
parentId,
|
||||
index,
|
||||
data: nodeData,
|
||||
});
|
||||
|
||||
// Update the tree data
|
||||
setTreeData(treeApi.data);
|
||||
|
||||
// Emit websocket event to sync with other users
|
||||
setTimeout(() => {
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
import { atom } from "jotai";
|
||||
|
||||
export type OpenMap = Record<string, boolean>;
|
||||
|
||||
export const openTreeNodesAtom = atom<OpenMap>({});
|
||||
@@ -0,0 +1,5 @@
|
||||
import { atom } from "jotai";
|
||||
import { TreeApi } from "react-arborist";
|
||||
import { SpaceTreeNode } from "../types";
|
||||
|
||||
export const treeApiAtom = atom<TreeApi<SpaceTreeNode> | null>(null);
|
||||
@@ -1,26 +0,0 @@
|
||||
.preview {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
background-color: light-dark(
|
||||
var(--mantine-color-white),
|
||||
var(--mantine-color-dark-6)
|
||||
);
|
||||
color: light-dark(
|
||||
var(--mantine-color-gray-9),
|
||||
var(--mantine-color-dark-0)
|
||||
);
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
|
||||
border: 1px solid light-dark(
|
||||
var(--mantine-color-gray-3),
|
||||
var(--mantine-color-dark-4)
|
||||
);
|
||||
max-width: 260px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
import styles from './doc-tree-drag-preview.module.css';
|
||||
|
||||
type Props = {
|
||||
label: string;
|
||||
};
|
||||
|
||||
export function DocTreeDragPreview({ label }: Props) {
|
||||
return <div className={styles.preview}>{label || 'Untitled'}</div>;
|
||||
}
|
||||
@@ -1,39 +0,0 @@
|
||||
import type { Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
|
||||
import styles from '../styles/tree.module.css';
|
||||
|
||||
type Props = {
|
||||
instruction: Instruction;
|
||||
indentPx: number;
|
||||
};
|
||||
|
||||
export function DocTreeDropIndicator({ instruction, indentPx }: Props) {
|
||||
const blocked = instruction.type === 'instruction-blocked';
|
||||
const inst = blocked ? instruction.desired : instruction;
|
||||
|
||||
const style = {
|
||||
['--drop-line-indent' as never]: `${indentPx}px`,
|
||||
} as React.CSSProperties;
|
||||
|
||||
if (inst.type === 'reorder-above') {
|
||||
return (
|
||||
<div
|
||||
className={styles.dropLine}
|
||||
data-edge="top"
|
||||
data-blocked={blocked || undefined}
|
||||
style={style}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (inst.type === 'reorder-below') {
|
||||
return (
|
||||
<div
|
||||
className={styles.dropLine}
|
||||
data-edge="bottom"
|
||||
data-blocked={blocked || undefined}
|
||||
style={style}
|
||||
/>
|
||||
);
|
||||
}
|
||||
// 'combine' (make-child) is rendered via [data-receiving-drop] on the row itself.
|
||||
return null;
|
||||
}
|
||||
@@ -1,398 +0,0 @@
|
||||
import {
|
||||
memo,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
type ReactNode,
|
||||
} from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
|
||||
import {
|
||||
draggable,
|
||||
dropTargetForElements,
|
||||
} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
|
||||
import { pointerOutsideOfPreview } from '@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview';
|
||||
import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
|
||||
import {
|
||||
attachInstruction,
|
||||
extractInstruction,
|
||||
type Instruction,
|
||||
type ItemMode,
|
||||
} from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
|
||||
import { triggerPostMoveFlash } from '@atlaskit/pragmatic-drag-and-drop-flourish/trigger-post-move-flash';
|
||||
import * as liveRegion from '@atlaskit/pragmatic-drag-and-drop-live-region';
|
||||
|
||||
import type { TreeNode, DropOp } from '../model/tree-model.types';
|
||||
import { treeModel } from '../model/tree-model';
|
||||
import { DocTreeDropIndicator } from './doc-tree-drop-indicator';
|
||||
import { DocTreeDragPreview } from './doc-tree-drag-preview';
|
||||
import type { RenderRowProps } from './doc-tree';
|
||||
import styles from '../styles/tree.module.css';
|
||||
|
||||
type Props<T extends object> = {
|
||||
node: TreeNode<T>;
|
||||
level: number;
|
||||
isLastSibling: boolean;
|
||||
openIds: ReadonlySet<string>;
|
||||
selectedId?: string;
|
||||
// Roving tabindex: the single row that currently carries tabIndex={0}.
|
||||
activeId?: string;
|
||||
renderRow: (props: RenderRowProps<T>) => ReactNode;
|
||||
indentPerLevel: number;
|
||||
onMove: (sourceId: string, op: DropOp) => void | Promise<void>;
|
||||
onToggle: (id: string, isOpen: boolean) => void;
|
||||
readOnly: boolean;
|
||||
disableDrag?: (node: TreeNode<T>) => boolean;
|
||||
disableDrop?: (node: TreeNode<T>) => boolean;
|
||||
getDragLabel: (node: TreeNode<T>) => string;
|
||||
contextId: symbol;
|
||||
registerRowElement: (id: string, el: HTMLElement | null) => void;
|
||||
// Stable accessor — calling it returns the latest tree. Avoids passing the
|
||||
// tree itself as a prop (which would break memo and re-run every row's DnD
|
||||
// useEffect on every mutation).
|
||||
getRootData: () => TreeNode<T>[];
|
||||
};
|
||||
|
||||
const DRAG_TYPE = 'doc-tree-item';
|
||||
const AUTO_EXPAND_MS = 500;
|
||||
|
||||
function DocTreeRowInner<T extends object>(props: Props<T>) {
|
||||
const {
|
||||
node,
|
||||
level,
|
||||
isLastSibling,
|
||||
openIds,
|
||||
selectedId,
|
||||
activeId,
|
||||
renderRow,
|
||||
indentPerLevel,
|
||||
onMove,
|
||||
onToggle,
|
||||
readOnly,
|
||||
disableDrag,
|
||||
disableDrop,
|
||||
getDragLabel,
|
||||
contextId,
|
||||
registerRowElement,
|
||||
getRootData,
|
||||
} = props;
|
||||
|
||||
const isOpen = openIds.has(node.id);
|
||||
// "Has children" includes both already-loaded children AND the consumer's
|
||||
// own server-side flag (`hasChildren` is a docmost convention on
|
||||
// SpaceTreeNode / SharedPageTreeNode). The flag lets the chevron and the
|
||||
// auto-expand timer recognize unloaded subtrees so the consumer's lazy-load
|
||||
// (via onToggle) can populate them on demand.
|
||||
const hasLoadedChildren = !!node.children && node.children.length > 0;
|
||||
const declaredHasChildren =
|
||||
(node as { hasChildren?: boolean }).hasChildren === true;
|
||||
const hasChildren = hasLoadedChildren || declaredHasChildren;
|
||||
const isSelected = selectedId === node.id;
|
||||
|
||||
const rowRef = useRef<HTMLElement>(null);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [instruction, setInstruction] = useState<Instruction | null>(null);
|
||||
const autoExpandTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
const cancelAutoExpand = useCallback(() => {
|
||||
if (autoExpandTimerRef.current) {
|
||||
clearTimeout(autoExpandTimerRef.current);
|
||||
autoExpandTimerRef.current = null;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const toggleOpen = useCallback(() => {
|
||||
onToggle(node.id, !isOpen);
|
||||
}, [onToggle, node.id, isOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
registerRowElement(node.id, rowRef.current);
|
||||
return () => registerRowElement(node.id, null);
|
||||
}, [registerRowElement, node.id]);
|
||||
|
||||
// Restore lazy-loaded children when the row mounts open but its children
|
||||
// aren't loaded (e.g. cross-space page move drops a node into a new tree
|
||||
// that still has its id in openIds). Calling onToggle(id, true) is
|
||||
// idempotent for open state and triggers the consumer's lazy-load.
|
||||
useEffect(() => {
|
||||
if (isOpen && declaredHasChildren && !hasLoadedChildren) {
|
||||
onToggle(node.id, true);
|
||||
}
|
||||
}, [isOpen, declaredHasChildren, hasLoadedChildren, node.id, onToggle]);
|
||||
|
||||
useEffect(() => {
|
||||
const el = rowRef.current;
|
||||
if (!el || readOnly) return;
|
||||
const dragDisabled = disableDrag?.(node) ?? false;
|
||||
const dropDisabled = disableDrop?.(node) ?? false;
|
||||
|
||||
const cleanups: Array<() => void> = [];
|
||||
|
||||
if (!dragDisabled) {
|
||||
cleanups.push(
|
||||
draggable({
|
||||
element: el,
|
||||
getInitialData: () => ({
|
||||
id: node.id,
|
||||
type: DRAG_TYPE,
|
||||
uniqueContextId: contextId,
|
||||
isOpenOnDragStart: isOpen,
|
||||
}),
|
||||
onGenerateDragPreview: ({ nativeSetDragImage }) => {
|
||||
setCustomNativeDragPreview({
|
||||
nativeSetDragImage,
|
||||
getOffset: pointerOutsideOfPreview({ x: '16px', y: '8px' }),
|
||||
render: ({ container }) => {
|
||||
const root = createRoot(container);
|
||||
root.render(<DocTreeDragPreview label={getDragLabel(node)} />);
|
||||
return () => root.unmount();
|
||||
},
|
||||
});
|
||||
},
|
||||
onDragStart: () => setIsDragging(true),
|
||||
onDrop: () => setIsDragging(false),
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
if (!dropDisabled) {
|
||||
const mode: ItemMode =
|
||||
isOpen && hasChildren
|
||||
? 'expanded'
|
||||
: isLastSibling
|
||||
? 'last-in-group'
|
||||
: 'standard';
|
||||
// Always block 'reparent' (out of scope per spec).
|
||||
// Block 'reorder-below' when the row is open with children — ambiguous gesture,
|
||||
// force users to drop into the folder via 'make-child' instead.
|
||||
const block: Instruction['type'][] = ['reparent'];
|
||||
if (isOpen && hasChildren) block.push('reorder-below');
|
||||
|
||||
cleanups.push(
|
||||
dropTargetForElements({
|
||||
element: el,
|
||||
canDrop: ({ source }) =>
|
||||
source.data.type === DRAG_TYPE &&
|
||||
source.data.uniqueContextId === contextId &&
|
||||
source.data.id !== node.id &&
|
||||
!treeModel.isDescendant(
|
||||
getRootData(),
|
||||
source.data.id as string,
|
||||
node.id,
|
||||
),
|
||||
getData: ({ input, element }) =>
|
||||
attachInstruction(
|
||||
{ id: node.id, type: DRAG_TYPE },
|
||||
{
|
||||
input,
|
||||
element,
|
||||
currentLevel: level,
|
||||
indentPerLevel,
|
||||
mode,
|
||||
block,
|
||||
},
|
||||
),
|
||||
onDrag: ({ self }) => {
|
||||
const inst = extractInstruction(self.data);
|
||||
setInstruction(inst);
|
||||
// Auto-expand on hover over any collapsed row that has children,
|
||||
// regardless of the specific instruction type. Reorder-before and
|
||||
// reorder-after also benefit: once expanded, the user can see the
|
||||
// children and refine their drop target.
|
||||
if (
|
||||
inst &&
|
||||
hasChildren &&
|
||||
!isOpen &&
|
||||
!autoExpandTimerRef.current
|
||||
) {
|
||||
autoExpandTimerRef.current = setTimeout(() => {
|
||||
onToggle(node.id, true);
|
||||
autoExpandTimerRef.current = null;
|
||||
}, AUTO_EXPAND_MS);
|
||||
}
|
||||
},
|
||||
onDragLeave: () => {
|
||||
setInstruction(null);
|
||||
cancelAutoExpand();
|
||||
},
|
||||
onDrop: ({ source, self }) => {
|
||||
setInstruction(null);
|
||||
cancelAutoExpand();
|
||||
const inst = extractInstruction(self.data);
|
||||
if (!inst || inst.type === 'instruction-blocked') return;
|
||||
const sourceId = source.data.id as string;
|
||||
const op: DropOp =
|
||||
inst.type === 'reorder-above'
|
||||
? { kind: 'reorder-before', targetId: node.id }
|
||||
: inst.type === 'reorder-below'
|
||||
? { kind: 'reorder-after', targetId: node.id }
|
||||
: inst.type === 'make-child'
|
||||
? { kind: 'make-child', targetId: node.id }
|
||||
: null!;
|
||||
if (!op) return;
|
||||
onMove(sourceId, op);
|
||||
triggerPostMoveFlash(el);
|
||||
const liveTree = getRootData();
|
||||
const parentName =
|
||||
op.kind === 'make-child'
|
||||
? getDragLabel(node)
|
||||
: (() => {
|
||||
const sib = treeModel.siblingsOf(liveTree, op.targetId);
|
||||
const parent = sib?.parentId
|
||||
? treeModel.find(liveTree, sib.parentId)
|
||||
: null;
|
||||
return parent ? getDragLabel(parent) : 'root';
|
||||
})();
|
||||
const sourceNode = treeModel.find(liveTree, sourceId);
|
||||
const sourceLabel = sourceNode
|
||||
? getDragLabel(sourceNode)
|
||||
: 'item';
|
||||
liveRegion.announce(`Moved ${sourceLabel} under ${parentName}.`);
|
||||
// After a make-child drop, expand this row so the user sees the
|
||||
// just-dropped child — especially important when the row had no
|
||||
// children before (chevron just appeared) so the drop would
|
||||
// otherwise be invisible.
|
||||
if (op.kind === 'make-child') onToggle(node.id, true);
|
||||
if (source.data.isOpenOnDragStart) onToggle(sourceId, true);
|
||||
},
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
return combine(...cleanups);
|
||||
}, [
|
||||
node,
|
||||
level,
|
||||
isOpen,
|
||||
hasChildren,
|
||||
isLastSibling,
|
||||
readOnly,
|
||||
disableDrag,
|
||||
disableDrop,
|
||||
contextId,
|
||||
indentPerLevel,
|
||||
getDragLabel,
|
||||
onMove,
|
||||
onToggle,
|
||||
getRootData,
|
||||
cancelAutoExpand,
|
||||
]);
|
||||
|
||||
useEffect(() => () => cancelAutoExpand(), [cancelAutoExpand]);
|
||||
|
||||
const effectiveInst =
|
||||
instruction?.type === 'instruction-blocked'
|
||||
? instruction.desired
|
||||
: instruction;
|
||||
const blocked = instruction?.type === 'instruction-blocked';
|
||||
const receivingDrop: 'before' | 'after' | 'make-child' | null = (() => {
|
||||
if (!effectiveInst) return null;
|
||||
if (effectiveInst.type === 'reorder-above') return 'before';
|
||||
if (effectiveInst.type === 'reorder-below') return 'after';
|
||||
if (effectiveInst.type === 'make-child') return 'make-child';
|
||||
return null;
|
||||
})();
|
||||
|
||||
// Treeitem semantics ride on the row's focusable element (the consumer's
|
||||
// <a>). The outer <li> is presentational layout. aria-label uses the row's
|
||||
// label so the SR's accessible name is just the page title, not the
|
||||
// concatenation of inner action-button aria-labels.
|
||||
const treeItemProps = {
|
||||
role: 'treeitem' as const,
|
||||
'aria-level': level + 1,
|
||||
'aria-expanded': hasChildren ? isOpen : undefined,
|
||||
'aria-selected': isSelected ? (true as const) : undefined,
|
||||
'aria-current': isSelected ? ('page' as const) : undefined,
|
||||
'aria-label': getDragLabel(node),
|
||||
'data-row-id': node.id,
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={styles.rowWrapper}
|
||||
style={{ paddingLeft: level * indentPerLevel }}
|
||||
>
|
||||
<div
|
||||
className={styles.node}
|
||||
data-dragging={isDragging || undefined}
|
||||
data-selected={isSelected || undefined}
|
||||
data-receiving-drop={
|
||||
receivingDrop === 'make-child'
|
||||
? blocked
|
||||
? 'make-child-blocked'
|
||||
: 'make-child'
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
{renderRow({
|
||||
node,
|
||||
level,
|
||||
isOpen,
|
||||
hasChildren,
|
||||
isSelected,
|
||||
isDragging,
|
||||
isReceivingDrop: receivingDrop,
|
||||
rowRef,
|
||||
tabIndex: activeId === node.id ? 0 : -1,
|
||||
treeItemProps,
|
||||
toggleOpen,
|
||||
})}
|
||||
</div>
|
||||
{instruction && (
|
||||
<DocTreeDropIndicator
|
||||
instruction={instruction}
|
||||
indentPx={level * indentPerLevel}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Custom memo comparator. The default shallow compare re-renders every row
|
||||
// when `openIds` (a Set) or `selectedId` (a string) on the parent changes,
|
||||
// because all rows receive the same reference via {...props} spread. With 1K
|
||||
// rows that's a perceptible stall on every expand and every navigate.
|
||||
//
|
||||
// Resolve openIds / selectedId per-row: only re-render if THIS row's own
|
||||
// open-state or selected-state actually flipped. Everything else uses
|
||||
// reference equality (callbacks are useCallback-stable from the parent).
|
||||
function arePropsEqual<T extends object>(
|
||||
prev: Props<T>,
|
||||
next: Props<T>,
|
||||
): boolean {
|
||||
if (prev.node !== next.node) return false;
|
||||
if (prev.level !== next.level) return false;
|
||||
if (prev.isLastSibling !== next.isLastSibling) return false;
|
||||
if (prev.readOnly !== next.readOnly) return false;
|
||||
if (prev.contextId !== next.contextId) return false;
|
||||
if (prev.indentPerLevel !== next.indentPerLevel) return false;
|
||||
if (prev.renderRow !== next.renderRow) return false;
|
||||
if (prev.onMove !== next.onMove) return false;
|
||||
if (prev.onToggle !== next.onToggle) return false;
|
||||
if (prev.disableDrag !== next.disableDrag) return false;
|
||||
if (prev.disableDrop !== next.disableDrop) return false;
|
||||
if (prev.getDragLabel !== next.getDragLabel) return false;
|
||||
if (prev.registerRowElement !== next.registerRowElement) return false;
|
||||
if (prev.getRootData !== next.getRootData) return false;
|
||||
|
||||
const id = next.node.id;
|
||||
// openIds: only this row's own membership matters.
|
||||
if (prev.openIds.has(id) !== next.openIds.has(id)) return false;
|
||||
// selectedId: re-render only the rows whose isSelected actually flipped.
|
||||
const wasSelected = prev.selectedId === id;
|
||||
const isSelected = next.selectedId === id;
|
||||
if (wasSelected !== isSelected) return false;
|
||||
// activeId: same trick — only the outgoing and incoming active rows
|
||||
// re-render when the user moves focus through the tree.
|
||||
const wasActive = prev.activeId === id;
|
||||
const isActive = next.activeId === id;
|
||||
if (wasActive !== isActive) return false;
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
export const DocTreeRow = memo(
|
||||
DocTreeRowInner,
|
||||
arePropsEqual,
|
||||
) as typeof DocTreeRowInner;
|
||||
@@ -1,541 +0,0 @@
|
||||
import {
|
||||
forwardRef,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
type ReactNode,
|
||||
type Ref,
|
||||
} from 'react';
|
||||
import { useVirtualizer } from '@tanstack/react-virtual';
|
||||
import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
|
||||
import type { TreeNode, DropOp } from '../model/tree-model.types';
|
||||
import { treeModel } from '../model/tree-model';
|
||||
import { DocTreeRow } from './doc-tree-row';
|
||||
import styles from '../styles/tree.module.css';
|
||||
|
||||
export type RenderRowProps<T extends object> = {
|
||||
node: TreeNode<T>;
|
||||
level: number;
|
||||
isOpen: boolean;
|
||||
hasChildren: boolean;
|
||||
isSelected: boolean;
|
||||
isDragging: boolean;
|
||||
isReceivingDrop: 'before' | 'after' | 'make-child' | null;
|
||||
|
||||
rowRef: Ref<HTMLElement>;
|
||||
// Roving tabindex: exactly one row in the tree carries tabIndex={0} (the
|
||||
// active row); every other row gets tabIndex={-1}. Consumers must spread
|
||||
// this onto the same element they wire rowRef to.
|
||||
tabIndex: 0 | -1;
|
||||
// Treeitem semantics for the row's focusable element. Consumers MUST spread
|
||||
// these onto the same element rowRef points at, so the focused element IS
|
||||
// the treeitem. This makes screen readers announce "treeitem" (not "link")
|
||||
// and replaces the descendant-text accname with the row's label, so action
|
||||
// button labels inside the row don't get concatenated.
|
||||
treeItemProps: {
|
||||
role: 'treeitem';
|
||||
'aria-level': number;
|
||||
'aria-expanded'?: boolean;
|
||||
'aria-selected'?: true;
|
||||
'aria-current'?: 'page';
|
||||
'aria-label': string;
|
||||
'data-row-id': string;
|
||||
};
|
||||
toggleOpen: () => void;
|
||||
};
|
||||
|
||||
export type DocTreeProps<T extends object> = {
|
||||
data: TreeNode<T>[];
|
||||
openIds: ReadonlySet<string>;
|
||||
selectedId?: string;
|
||||
|
||||
renderRow: (props: RenderRowProps<T>) => ReactNode;
|
||||
indentPerLevel?: number;
|
||||
rowHeight?: number;
|
||||
emptyState?: ReactNode;
|
||||
|
||||
onMove: (sourceId: string, op: DropOp) => void | Promise<void>;
|
||||
onToggle: (id: string, isOpen: boolean) => void;
|
||||
onSelect?: (id: string) => void;
|
||||
|
||||
readOnly?: boolean;
|
||||
disableDrag?: (node: TreeNode<T>) => boolean;
|
||||
disableDrop?: (node: TreeNode<T>) => boolean;
|
||||
|
||||
getDragLabel: (node: TreeNode<T>) => string;
|
||||
uniqueContextId?: symbol;
|
||||
|
||||
// Accessible name for the tree itself (e.g. "Pages"). Rendered as
|
||||
// aria-label on the <ul role="tree"> so screen readers announce what
|
||||
// collection of items the user has entered.
|
||||
'aria-label'?: string;
|
||||
};
|
||||
|
||||
export type DocTreeApi = {
|
||||
select: (
|
||||
id: string,
|
||||
opts?: { scrollIntoView?: boolean; focus?: boolean },
|
||||
) => void;
|
||||
scrollTo: (id: string) => void;
|
||||
focus: (id: string) => void;
|
||||
};
|
||||
|
||||
type FlatRow<T extends object> = {
|
||||
node: TreeNode<T>;
|
||||
level: number;
|
||||
isLastSibling: boolean;
|
||||
};
|
||||
|
||||
// DFS-walk the tree, emitting only the visible nodes (root nodes always, plus
|
||||
// the descendants of nodes whose id is in `openIds`). Each emitted row carries
|
||||
// the precomputed `level` and `isLastSibling` it needs.
|
||||
function flattenVisible<T extends object>(
|
||||
data: TreeNode<T>[],
|
||||
openIds: ReadonlySet<string>,
|
||||
): FlatRow<T>[] {
|
||||
const out: FlatRow<T>[] = [];
|
||||
const walk = (nodes: TreeNode<T>[], level: number) => {
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
const node = nodes[i];
|
||||
out.push({ node, level, isLastSibling: i === nodes.length - 1 });
|
||||
if (openIds.has(node.id) && node.children?.length) {
|
||||
walk(node.children, level + 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
walk(data, 0);
|
||||
return out;
|
||||
}
|
||||
|
||||
type RowElementMap = Map<string, HTMLElement>;
|
||||
|
||||
function DocTreeInner<T extends object>(
|
||||
props: DocTreeProps<T>,
|
||||
ref: Ref<DocTreeApi>,
|
||||
) {
|
||||
const {
|
||||
data,
|
||||
openIds,
|
||||
selectedId,
|
||||
renderRow,
|
||||
indentPerLevel = 16,
|
||||
rowHeight = 32,
|
||||
onMove,
|
||||
onToggle,
|
||||
onSelect,
|
||||
readOnly = false,
|
||||
disableDrag,
|
||||
disableDrop,
|
||||
getDragLabel,
|
||||
uniqueContextId,
|
||||
emptyState,
|
||||
'aria-label': ariaLabel,
|
||||
} = props;
|
||||
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const rowElementsRef = useRef<RowElementMap>(new Map());
|
||||
// Set by the keyboard handler when the navigation target hasn't been
|
||||
// virtualized yet. Consumed by registerRowElement when the row mounts.
|
||||
const pendingFocusIdRef = useRef<string | null>(null);
|
||||
// Typeahead state: accumulated buffer, plus the timer that clears it after
|
||||
// ~500ms of no typing. Refs only — no re-render needed per keystroke.
|
||||
const typeaheadBufferRef = useRef('');
|
||||
const typeaheadTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
// Roving tabindex: the row most-recently focused by the user. Falls back
|
||||
// to selectedId, then to the first visible row, when the tracked id is
|
||||
// gone from the flat list (e.g. its branch was collapsed).
|
||||
const [activeId, setActiveId] = useState<string | undefined>(undefined);
|
||||
const contextId = useMemo(
|
||||
() => uniqueContextId ?? Symbol('doc-tree'),
|
||||
[uniqueContextId],
|
||||
);
|
||||
|
||||
const registerRowElement = useCallback(
|
||||
(id: string, el: HTMLElement | null) => {
|
||||
if (el) {
|
||||
rowElementsRef.current.set(id, el);
|
||||
if (pendingFocusIdRef.current === id) {
|
||||
pendingFocusIdRef.current = null;
|
||||
// rAF lets the virtualizer settle layout/transform before focus,
|
||||
// so the freshly-scrolled-in row is actually painted in view.
|
||||
requestAnimationFrame(() => el.focus());
|
||||
}
|
||||
} else {
|
||||
rowElementsRef.current.delete(id);
|
||||
}
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
// Stable live tree accessor — keeps the row useEffect deps stable across
|
||||
// tree mutations.
|
||||
const rootDataRef = useRef(data);
|
||||
rootDataRef.current = data;
|
||||
const getRootData = useCallback(() => rootDataRef.current, []);
|
||||
|
||||
// Flat visible list drives virtualization. Re-flattens on data or openIds
|
||||
// change — cheap O(N) walk of the loaded tree.
|
||||
const flat = useMemo(
|
||||
() => flattenVisible(data, openIds),
|
||||
[data, openIds],
|
||||
);
|
||||
|
||||
// Membership lookup for the flat list. Used to validate activeId/selectedId
|
||||
// before promoting them to the effective active row.
|
||||
const flatIds = useMemo(() => new Set(flat.map((r) => r.node.id)), [flat]);
|
||||
|
||||
// Effective active row for tabindex purposes. Prefers user-focused row,
|
||||
// then the currently selected page, then the first visible row. The user's
|
||||
// arrow / Home / End / typeahead navigation updates activeId via the focus
|
||||
// event delegated on the <ul>; explicit clicks also flow through focus.
|
||||
const effectiveActiveId = useMemo(() => {
|
||||
if (activeId && flatIds.has(activeId)) return activeId;
|
||||
if (selectedId && flatIds.has(selectedId)) return selectedId;
|
||||
return flat[0]?.node.id;
|
||||
}, [activeId, selectedId, flatIds, flat]);
|
||||
|
||||
const virtualizer = useVirtualizer({
|
||||
count: flat.length,
|
||||
getScrollElement: () => scrollRef.current,
|
||||
estimateSize: () => rowHeight,
|
||||
overscan: 10,
|
||||
});
|
||||
|
||||
useImperativeHandle(
|
||||
ref,
|
||||
(): DocTreeApi => ({
|
||||
select: (id, opts) => {
|
||||
onSelect?.(id);
|
||||
const idx = flat.findIndex((r) => r.node.id === id);
|
||||
if (idx >= 0 && opts?.scrollIntoView) {
|
||||
virtualizer.scrollToIndex(idx, { align: 'auto' });
|
||||
}
|
||||
if (opts?.focus) rowElementsRef.current.get(id)?.focus();
|
||||
},
|
||||
scrollTo: (id) => {
|
||||
const idx = flat.findIndex((r) => r.node.id === id);
|
||||
if (idx >= 0) virtualizer.scrollToIndex(idx, { align: 'auto' });
|
||||
},
|
||||
focus: (id) => {
|
||||
rowElementsRef.current.get(id)?.focus();
|
||||
},
|
||||
}),
|
||||
[onSelect, flat, virtualizer],
|
||||
);
|
||||
|
||||
// Auto-scroll the container during drag so users can target rows currently
|
||||
// scrolled off-screen. Scoped to drags originating in this DocTree instance
|
||||
// via uniqueContextId.
|
||||
useEffect(() => {
|
||||
const el = scrollRef.current;
|
||||
if (!el) return;
|
||||
return autoScrollForElements({
|
||||
element: el,
|
||||
canScroll: ({ source }) =>
|
||||
source.data.uniqueContextId === contextId,
|
||||
});
|
||||
}, [contextId]);
|
||||
|
||||
// Scroll the selected row into view when it enters the flat list. If the
|
||||
// row is already fully visible, leave the user's scroll position alone —
|
||||
// only scroll when it's off-screen, and when we do, center it for context.
|
||||
// Deep pages may not be in flat at the moment selectedId changes (ancestors
|
||||
// still lazy-loading); the effect re-fires once flat contains the row.
|
||||
// Guarded by a ref so subsequent flat changes don't fight manual scroll.
|
||||
const lastScrolledIdRef = useRef<string | undefined>(undefined);
|
||||
useEffect(() => {
|
||||
if (!selectedId) {
|
||||
lastScrolledIdRef.current = undefined;
|
||||
return;
|
||||
}
|
||||
if (lastScrolledIdRef.current === selectedId) return;
|
||||
const idx = flat.findIndex((r) => r.node.id === selectedId);
|
||||
if (idx < 0) return;
|
||||
|
||||
const containerHeight = scrollRef.current?.clientHeight ?? 0;
|
||||
const scrollOffset = virtualizer.scrollOffset ?? 0;
|
||||
const item = virtualizer
|
||||
.getVirtualItems()
|
||||
.find((v) => v.index === idx);
|
||||
const isFullyVisible =
|
||||
!!item &&
|
||||
item.start >= scrollOffset &&
|
||||
item.start + item.size <= scrollOffset + containerHeight;
|
||||
|
||||
if (!isFullyVisible) {
|
||||
virtualizer.scrollToIndex(idx, { align: 'center' });
|
||||
}
|
||||
lastScrolledIdRef.current = selectedId;
|
||||
}, [selectedId, flat, virtualizer]);
|
||||
|
||||
// Keyboard navigation handler — single delegated listener on the <ul role="tree">.
|
||||
// The focused row is identified by walking up the DOM to the nearest element
|
||||
// carrying data-row-id, so this works whether the user has focused the row
|
||||
// itself or one of its inner buttons (chevron, +). No per-row re-renders;
|
||||
// focus is moved via .focus() on the registered element, with a pending-id
|
||||
// hand-off when the target row is currently virtualized out of view.
|
||||
const handleKeyDown = useCallback(
|
||||
(e: React.KeyboardEvent<HTMLUListElement>) => {
|
||||
// Ctrl/Alt/Meta are reserved for browser/OS shortcuts; bail out.
|
||||
// Shift is allowed through so typeahead can match capital letters.
|
||||
if (e.altKey || e.ctrlKey || e.metaKey) return;
|
||||
const isNavKey =
|
||||
!e.shiftKey &&
|
||||
(e.key === 'ArrowDown' ||
|
||||
e.key === 'ArrowUp' ||
|
||||
e.key === 'ArrowLeft' ||
|
||||
e.key === 'ArrowRight' ||
|
||||
e.key === 'Home' ||
|
||||
e.key === 'End');
|
||||
// Star expands all sibling subtrees of the focused row (WAI-ARIA tree
|
||||
// pattern). Allowed with Shift since on most keyboards Shift+8 is how
|
||||
// "*" is produced. Handled separately from typeahead.
|
||||
const isStarKey = e.key === '*';
|
||||
// Space activates the focused row — same effect as clicking it. Native
|
||||
// <a> doesn't get this for free (only <button> does), so we wire it up
|
||||
// explicitly to satisfy the WAI-ARIA tree pattern.
|
||||
const isActivateKey = e.key === ' ';
|
||||
// Single printable character → typeahead. e.key.length === 1 excludes
|
||||
// multi-char names like "ArrowDown", "Enter", "Tab", etc.
|
||||
const isTypeahead =
|
||||
e.key.length === 1 && !isNavKey && !isStarKey && !isActivateKey;
|
||||
if (!isNavKey && !isTypeahead && !isStarKey && !isActivateKey) return;
|
||||
|
||||
const target = e.target as HTMLElement;
|
||||
if (target.matches('input, textarea, [contenteditable="true"]')) return;
|
||||
const rowEl = target.closest('[data-row-id]');
|
||||
if (!rowEl) return;
|
||||
const id = rowEl.getAttribute('data-row-id');
|
||||
if (!id) return;
|
||||
|
||||
const idx = flat.findIndex((r) => r.node.id === id);
|
||||
if (idx < 0) return;
|
||||
|
||||
const focusByIndex = (targetIdx: number) => {
|
||||
if (targetIdx < 0 || targetIdx >= flat.length) return;
|
||||
const targetId = flat[targetIdx].node.id;
|
||||
const existing = rowElementsRef.current.get(targetId);
|
||||
if (existing) {
|
||||
existing.focus();
|
||||
} else {
|
||||
pendingFocusIdRef.current = targetId;
|
||||
virtualizer.scrollToIndex(targetIdx, { align: 'auto' });
|
||||
}
|
||||
};
|
||||
|
||||
// Space activates the focused row by synthesizing a click on the
|
||||
// registered row element (its <a> Link). Skip if focus is on an inner
|
||||
// button (chevron, +, menu) — those handle Space via native button
|
||||
// semantics, and intercepting here would block their default behavior.
|
||||
if (isActivateKey) {
|
||||
const registered = rowElementsRef.current.get(id);
|
||||
if (target === registered) {
|
||||
e.preventDefault();
|
||||
registered.click();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Typeahead: accumulate printable chars, jump to next row whose label
|
||||
// starts with the buffer. Same-letter presses cycle through matches; a
|
||||
// multi-char buffer searches from the current row so the user can
|
||||
// refine the prefix. Buffer resets after ~500ms of no typing.
|
||||
if (isTypeahead) {
|
||||
e.preventDefault();
|
||||
const wasEmpty = typeaheadBufferRef.current.length === 0;
|
||||
typeaheadBufferRef.current = (
|
||||
typeaheadBufferRef.current + e.key
|
||||
).toLowerCase();
|
||||
const buffer = typeaheadBufferRef.current;
|
||||
if (typeaheadTimerRef.current) {
|
||||
clearTimeout(typeaheadTimerRef.current);
|
||||
}
|
||||
typeaheadTimerRef.current = setTimeout(() => {
|
||||
typeaheadBufferRef.current = '';
|
||||
typeaheadTimerRef.current = null;
|
||||
}, 500);
|
||||
// Single-char buffer cycles to the next match (start at idx + 1);
|
||||
// multi-char buffer can keep matching the current row.
|
||||
const startIdx = wasEmpty ? (idx + 1) % flat.length : idx;
|
||||
for (let i = 0; i < flat.length; i++) {
|
||||
const probeIdx = (startIdx + i) % flat.length;
|
||||
const label = getDragLabel(flat[probeIdx].node).toLowerCase();
|
||||
if (label.startsWith(buffer)) {
|
||||
focusByIndex(probeIdx);
|
||||
break;
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const row = flat[idx];
|
||||
const hasChildren =
|
||||
(row.node.children && row.node.children.length > 0) ||
|
||||
(row.node as { hasChildren?: boolean }).hasChildren === true;
|
||||
const isOpen = openIds.has(row.node.id);
|
||||
|
||||
// Asterisk: expand every sibling subtree at the focused row's level.
|
||||
// Walks the authoritative tree (not flat, which only carries visible
|
||||
// rows) so we also expand siblings whose own subtree is currently
|
||||
// collapsed. Focus and selection stay put per the WAI-ARIA pattern.
|
||||
if (isStarKey) {
|
||||
e.preventDefault();
|
||||
const info = treeModel.siblingsOf(rootDataRef.current, row.node.id);
|
||||
if (info) {
|
||||
for (const sib of info.siblings) {
|
||||
const sibHasChildren =
|
||||
(sib.children && sib.children.length > 0) ||
|
||||
(sib as { hasChildren?: boolean }).hasChildren === true;
|
||||
if (sibHasChildren && !openIds.has(sib.id)) {
|
||||
onToggle(sib.id, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
switch (e.key) {
|
||||
case 'ArrowDown':
|
||||
e.preventDefault();
|
||||
focusByIndex(idx + 1);
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
e.preventDefault();
|
||||
focusByIndex(idx - 1);
|
||||
break;
|
||||
case 'ArrowRight':
|
||||
e.preventDefault();
|
||||
if (hasChildren && !isOpen) {
|
||||
onToggle(row.node.id, true);
|
||||
} else if (
|
||||
isOpen &&
|
||||
row.node.children &&
|
||||
row.node.children.length > 0
|
||||
) {
|
||||
focusByIndex(idx + 1);
|
||||
}
|
||||
break;
|
||||
case 'ArrowLeft': {
|
||||
e.preventDefault();
|
||||
if (isOpen && hasChildren) {
|
||||
onToggle(row.node.id, false);
|
||||
} else {
|
||||
// Move to parent — first preceding row with smaller level.
|
||||
// Bounded by sibling-count to parent in the flat list; tree depth
|
||||
// and sibling counts are small in practice.
|
||||
const currentLevel = row.level;
|
||||
for (let i = idx - 1; i >= 0; i--) {
|
||||
if (flat[i].level < currentLevel) {
|
||||
focusByIndex(i);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'Home':
|
||||
e.preventDefault();
|
||||
focusByIndex(0);
|
||||
break;
|
||||
case 'End':
|
||||
e.preventDefault();
|
||||
focusByIndex(flat.length - 1);
|
||||
break;
|
||||
}
|
||||
},
|
||||
[flat, openIds, onToggle, virtualizer, getDragLabel],
|
||||
);
|
||||
|
||||
// Clear the typeahead timer if the component unmounts mid-buffer.
|
||||
useEffect(
|
||||
() => () => {
|
||||
if (typeaheadTimerRef.current) clearTimeout(typeaheadTimerRef.current);
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
// Event-delegated focus tracking — when any descendant (a row's Link, or an
|
||||
// inner action button) gains focus, mark the enclosing row as active. Keeps
|
||||
// tabIndex aligned with the user's current position whether they got there
|
||||
// by click, arrow nav, or focusByIndex's programmatic .focus() call.
|
||||
const handleFocusIn = useCallback(
|
||||
(e: React.FocusEvent<HTMLUListElement>) => {
|
||||
const rowEl = (e.target as HTMLElement).closest('[data-row-id]');
|
||||
const id = rowEl?.getAttribute('data-row-id');
|
||||
if (id) setActiveId(id);
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
if (data.length === 0 && emptyState) {
|
||||
return <div className={styles.treeContainer}>{emptyState}</div>;
|
||||
}
|
||||
|
||||
const virtualItems = virtualizer.getVirtualItems();
|
||||
const totalSize = virtualizer.getTotalSize();
|
||||
|
||||
return (
|
||||
<div ref={scrollRef} className={styles.treeContainer}>
|
||||
<ul
|
||||
role="tree"
|
||||
aria-label={ariaLabel}
|
||||
onKeyDown={handleKeyDown}
|
||||
onFocus={handleFocusIn}
|
||||
style={{
|
||||
position: 'relative',
|
||||
height: totalSize,
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
listStyle: 'none',
|
||||
}}
|
||||
>
|
||||
{virtualItems.map((virtualItem) => {
|
||||
const row = flat[virtualItem.index];
|
||||
return (
|
||||
<li
|
||||
key={row.node.id}
|
||||
// role="none" — the treeitem role lives on the focusable child
|
||||
// (the row's <a>), so screen readers announce "treeitem" on
|
||||
// navigation. The <li> is just layout glue.
|
||||
role="none"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
transform: `translateY(${virtualItem.start}px)`,
|
||||
}}
|
||||
>
|
||||
<DocTreeRow
|
||||
node={row.node}
|
||||
level={row.level}
|
||||
isLastSibling={row.isLastSibling}
|
||||
openIds={openIds}
|
||||
selectedId={selectedId}
|
||||
activeId={effectiveActiveId}
|
||||
renderRow={renderRow}
|
||||
indentPerLevel={indentPerLevel}
|
||||
onMove={onMove}
|
||||
onToggle={onToggle}
|
||||
readOnly={readOnly}
|
||||
disableDrag={disableDrag}
|
||||
disableDrop={disableDrop}
|
||||
getDragLabel={getDragLabel}
|
||||
contextId={contextId}
|
||||
registerRowElement={registerRowElement}
|
||||
getRootData={getRootData}
|
||||
/>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export const DocTree = forwardRef(DocTreeInner) as <T extends object>(
|
||||
props: DocTreeProps<T> & { ref?: Ref<DocTreeApi> },
|
||||
) => ReturnType<typeof DocTreeInner>;
|
||||
@@ -1,259 +0,0 @@
|
||||
import { useAtom } from "jotai";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { ActionIcon, Menu, rem } from "@mantine/core";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import {
|
||||
IconArrowRight,
|
||||
IconCopy,
|
||||
IconDotsVertical,
|
||||
IconFileExport,
|
||||
IconLink,
|
||||
IconStar,
|
||||
IconStarFilled,
|
||||
IconTrash,
|
||||
} from "@tabler/icons-react";
|
||||
|
||||
import ExportModal from "@/components/common/export-modal";
|
||||
import MovePageModal from "@/features/page/components/move-page-modal.tsx";
|
||||
import CopyPageModal from "@/features/page/components/copy-page-modal.tsx";
|
||||
import { useDeletePageModal } from "@/features/page/hooks/use-delete-page-modal.tsx";
|
||||
import { buildPageUrl } from "@/features/page/page.utils.ts";
|
||||
import { duplicatePage } from "@/features/page/services/page-service.ts";
|
||||
import { useClipboard } from "@/hooks/use-clipboard";
|
||||
import { getAppUrl } from "@/lib/config.ts";
|
||||
import { useQueryEmit } from "@/features/websocket/use-query-emit.ts";
|
||||
import {
|
||||
useFavoriteIds,
|
||||
useAddFavoriteMutation,
|
||||
useRemoveFavoriteMutation,
|
||||
} from "@/features/favorite/queries/favorite-query";
|
||||
|
||||
import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom.ts";
|
||||
import { treeModel } from "@/features/page/tree/model/tree-model";
|
||||
import { useTreeMutation } from "@/features/page/tree/hooks/use-tree-mutation.ts";
|
||||
import type { SpaceTreeNode } from "@/features/page/tree/types.ts";
|
||||
|
||||
export interface NodeMenuProps {
|
||||
node: SpaceTreeNode;
|
||||
canEdit: boolean;
|
||||
}
|
||||
|
||||
export function NodeMenu({ node, canEdit }: NodeMenuProps) {
|
||||
const { t } = useTranslation();
|
||||
const clipboard = useClipboard({ timeout: 500 });
|
||||
const { spaceSlug } = useParams();
|
||||
const { openDeleteModal } = useDeletePageModal();
|
||||
const { handleDelete } = useTreeMutation(node.spaceId);
|
||||
const [data, setData] = useAtom(treeDataAtom);
|
||||
const emit = useQueryEmit();
|
||||
const [exportOpened, { open: openExportModal, close: closeExportModal }] =
|
||||
useDisclosure(false);
|
||||
const [
|
||||
movePageModalOpened,
|
||||
{ open: openMovePageModal, close: closeMoveSpaceModal },
|
||||
] = useDisclosure(false);
|
||||
const [
|
||||
copyPageModalOpened,
|
||||
{ open: openCopyPageModal, close: closeCopySpaceModal },
|
||||
] = useDisclosure(false);
|
||||
const favoriteIds = useFavoriteIds("page", node.spaceId);
|
||||
const addFavorite = useAddFavoriteMutation();
|
||||
const removeFavorite = useRemoveFavoriteMutation();
|
||||
const isFavorited = favoriteIds.has(node.id);
|
||||
|
||||
const handleCopyLink = () => {
|
||||
const pageUrl =
|
||||
getAppUrl() + buildPageUrl(spaceSlug, node.slugId, node.name);
|
||||
clipboard.copy(pageUrl);
|
||||
notifications.show({ message: t("Link copied") });
|
||||
};
|
||||
|
||||
const handleDuplicatePage = async () => {
|
||||
try {
|
||||
const duplicatedPage = await duplicatePage({ pageId: node.id });
|
||||
|
||||
// figure out parent + insertion index
|
||||
const siblings = treeModel.siblingsOf(data, node.id);
|
||||
const parentId = siblings?.parentId ?? null;
|
||||
const currentIndex = siblings?.index ?? 0;
|
||||
const newIndex = currentIndex + 1;
|
||||
|
||||
const treeNodeData: SpaceTreeNode = {
|
||||
id: duplicatedPage.id,
|
||||
slugId: duplicatedPage.slugId,
|
||||
name: duplicatedPage.title,
|
||||
position: duplicatedPage.position,
|
||||
spaceId: duplicatedPage.spaceId,
|
||||
parentPageId: duplicatedPage.parentPageId,
|
||||
icon: duplicatedPage.icon,
|
||||
hasChildren: duplicatedPage.hasChildren,
|
||||
canEdit: true,
|
||||
children: [],
|
||||
};
|
||||
|
||||
setData((prev) =>
|
||||
treeModel.insert(prev, parentId, treeNodeData, newIndex),
|
||||
);
|
||||
|
||||
setTimeout(() => {
|
||||
emit({
|
||||
operation: "addTreeNode",
|
||||
spaceId: node.spaceId,
|
||||
payload: {
|
||||
parentId,
|
||||
index: newIndex,
|
||||
data: treeNodeData,
|
||||
},
|
||||
});
|
||||
}, 50);
|
||||
|
||||
notifications.show({ message: t("Page duplicated successfully") });
|
||||
} catch (err: any) {
|
||||
notifications.show({
|
||||
message: err?.response?.data?.message || "An error occurred",
|
||||
color: "red",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Menu shadow="md" width={200}>
|
||||
<Menu.Target>
|
||||
<ActionIcon
|
||||
variant="transparent"
|
||||
c="gray"
|
||||
aria-label={t("Page menu")}
|
||||
tabIndex={-1}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<IconDotsVertical
|
||||
style={{ width: rem(20), height: rem(20) }}
|
||||
stroke={2}
|
||||
/>
|
||||
</ActionIcon>
|
||||
</Menu.Target>
|
||||
|
||||
<Menu.Dropdown>
|
||||
<Menu.Item
|
||||
leftSection={<IconLink size={16} />}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
handleCopyLink();
|
||||
}}
|
||||
>
|
||||
{t("Copy link")}
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item
|
||||
leftSection={
|
||||
isFavorited ? <IconStarFilled size={16} /> : <IconStar size={16} />
|
||||
}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (isFavorited) {
|
||||
removeFavorite.mutate({ type: "page", pageId: node.id });
|
||||
} else {
|
||||
addFavorite.mutate({ type: "page", pageId: node.id });
|
||||
}
|
||||
}}
|
||||
>
|
||||
{isFavorited ? t("Remove from favorites") : t("Add to favorites")}
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item
|
||||
leftSection={<IconFileExport size={16} />}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
openExportModal();
|
||||
}}
|
||||
>
|
||||
{t("Export page")}
|
||||
</Menu.Item>
|
||||
|
||||
{canEdit && (
|
||||
<>
|
||||
<Menu.Item
|
||||
leftSection={<IconCopy size={16} />}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
handleDuplicatePage();
|
||||
}}
|
||||
>
|
||||
{t("Duplicate")}
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item
|
||||
leftSection={<IconArrowRight size={16} />}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
openMovePageModal();
|
||||
}}
|
||||
>
|
||||
{t("Move")}
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item
|
||||
leftSection={<IconCopy size={16} />}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
openCopyPageModal();
|
||||
}}
|
||||
>
|
||||
{t("Copy to space")}
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Divider />
|
||||
<Menu.Item
|
||||
c="red"
|
||||
leftSection={<IconTrash size={16} />}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
openDeleteModal({
|
||||
onConfirm: () => handleDelete(node.id),
|
||||
});
|
||||
}}
|
||||
>
|
||||
{t("Move to trash")}
|
||||
</Menu.Item>
|
||||
</>
|
||||
)}
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
|
||||
<MovePageModal
|
||||
pageId={node.id}
|
||||
slugId={node.slugId}
|
||||
currentSpaceSlug={spaceSlug}
|
||||
onClose={closeMoveSpaceModal}
|
||||
open={movePageModalOpened}
|
||||
/>
|
||||
|
||||
<CopyPageModal
|
||||
pageId={node.id}
|
||||
currentSpaceSlug={spaceSlug}
|
||||
onClose={closeCopySpaceModal}
|
||||
open={copyPageModalOpened}
|
||||
/>
|
||||
|
||||
<ExportModal
|
||||
type="page"
|
||||
id={node.id}
|
||||
open={exportOpened}
|
||||
onClose={closeExportModal}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,288 +0,0 @@
|
||||
import { useRef } from "react";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { useAtom } from "jotai";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { ActionIcon, rem } from "@mantine/core";
|
||||
import {
|
||||
IconChevronDown,
|
||||
IconChevronRight,
|
||||
IconFileDescription,
|
||||
IconPlus,
|
||||
IconPointFilled,
|
||||
} from "@tabler/icons-react";
|
||||
|
||||
import EmojiPicker from "@/components/ui/emoji-picker.tsx";
|
||||
import { queryClient } from "@/main.tsx";
|
||||
import { buildPageUrl } from "@/features/page/page.utils.ts";
|
||||
import { getPageById } from "@/features/page/services/page-service.ts";
|
||||
import {
|
||||
useUpdatePageMutation,
|
||||
fetchAllAncestorChildren,
|
||||
} from "@/features/page/queries/page-query.ts";
|
||||
import { useQueryEmit } from "@/features/websocket/use-query-emit.ts";
|
||||
import { mobileSidebarAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
|
||||
import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
|
||||
|
||||
import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom.ts";
|
||||
import { treeModel } from "@/features/page/tree/model/tree-model";
|
||||
import { useTreeMutation } from "@/features/page/tree/hooks/use-tree-mutation.ts";
|
||||
import type { SpaceTreeNode } from "@/features/page/tree/types.ts";
|
||||
import type { RenderRowProps } from "./doc-tree";
|
||||
import { NodeMenu } from "./space-tree-node-menu";
|
||||
import classes from "@/features/page/tree/styles/tree.module.css";
|
||||
import { updateTreeNodeIcon } from "@/features/page/tree/utils/utils.ts";
|
||||
|
||||
type SpaceTreeRowProps = RenderRowProps<SpaceTreeNode> & {
|
||||
readOnly: boolean;
|
||||
};
|
||||
|
||||
export function SpaceTreeRow({
|
||||
node,
|
||||
isOpen,
|
||||
hasChildren,
|
||||
toggleOpen,
|
||||
rowRef,
|
||||
tabIndex,
|
||||
treeItemProps,
|
||||
readOnly,
|
||||
}: SpaceTreeRowProps) {
|
||||
const { t } = useTranslation();
|
||||
const { spaceSlug } = useParams();
|
||||
const updatePageMutation = useUpdatePageMutation();
|
||||
const [, setTreeData] = useAtom(treeDataAtom);
|
||||
const emit = useQueryEmit();
|
||||
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const [mobileSidebarOpened] = useAtom(mobileSidebarAtom);
|
||||
const toggleMobileSidebar = useToggleSidebar(mobileSidebarAtom);
|
||||
|
||||
const canEdit = !readOnly && node.canEdit !== false;
|
||||
const pageUrl = buildPageUrl(spaceSlug, node.slugId, node.name);
|
||||
|
||||
const prefetchPage = () => {
|
||||
timerRef.current = setTimeout(async () => {
|
||||
const page = await queryClient.fetchQuery({
|
||||
queryKey: ["pages", node.id],
|
||||
queryFn: () => getPageById({ pageId: node.id }),
|
||||
staleTime: 5 * 60 * 1000,
|
||||
});
|
||||
if (page?.slugId) {
|
||||
queryClient.setQueryData(["pages", page.slugId], page);
|
||||
}
|
||||
}, 150);
|
||||
};
|
||||
|
||||
const cancelPagePrefetch = () => {
|
||||
if (timerRef.current) {
|
||||
window.clearTimeout(timerRef.current);
|
||||
timerRef.current = null;
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateNodeIcon = (nodeId: string, newIcon: string | null) => {
|
||||
setTreeData((prev) =>
|
||||
updateTreeNodeIcon(prev, nodeId, newIcon),
|
||||
);
|
||||
};
|
||||
|
||||
const handleEmojiIconClick = (e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
};
|
||||
|
||||
const handleEmojiSelect = (emoji: { native: string }) => {
|
||||
handleUpdateNodeIcon(node.id, emoji.native);
|
||||
updatePageMutation
|
||||
.mutateAsync({ pageId: node.id, icon: emoji.native })
|
||||
.then((data) => {
|
||||
setTimeout(() => {
|
||||
emit({
|
||||
operation: "updateOne",
|
||||
spaceId: node.spaceId,
|
||||
entity: ["pages"],
|
||||
id: node.id,
|
||||
payload: { icon: emoji.native, parentPageId: data.parentPageId },
|
||||
});
|
||||
}, 50);
|
||||
});
|
||||
};
|
||||
|
||||
const handleRemoveEmoji = () => {
|
||||
handleUpdateNodeIcon(node.id, null);
|
||||
updatePageMutation.mutateAsync({ pageId: node.id, icon: null });
|
||||
|
||||
setTimeout(() => {
|
||||
emit({
|
||||
operation: "updateOne",
|
||||
spaceId: node.spaceId,
|
||||
entity: ["pages"],
|
||||
id: node.id,
|
||||
payload: { icon: null },
|
||||
});
|
||||
}, 50);
|
||||
};
|
||||
|
||||
const handleLoadChildren = async () => {
|
||||
if (!node.hasChildren) return;
|
||||
try {
|
||||
const childrenTree = await fetchAllAncestorChildren({
|
||||
pageId: node.id,
|
||||
spaceId: node.spaceId,
|
||||
});
|
||||
setTreeData((prev) =>
|
||||
treeModel.appendChildren(prev, node.id, childrenTree),
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch children:", error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Link
|
||||
ref={rowRef as React.Ref<HTMLAnchorElement>}
|
||||
to={pageUrl}
|
||||
className={classes.node}
|
||||
tabIndex={tabIndex}
|
||||
{...treeItemProps}
|
||||
onClick={() => {
|
||||
if (mobileSidebarOpened) {
|
||||
toggleMobileSidebar();
|
||||
}
|
||||
}}
|
||||
onMouseEnter={prefetchPage}
|
||||
onMouseLeave={cancelPagePrefetch}
|
||||
>
|
||||
<PageArrow
|
||||
isOpen={isOpen}
|
||||
hasChildren={hasChildren}
|
||||
onToggle={toggleOpen}
|
||||
/>
|
||||
|
||||
<div onClick={handleEmojiIconClick} style={{ marginRight: "4px" }}>
|
||||
<EmojiPicker
|
||||
onEmojiSelect={handleEmojiSelect}
|
||||
icon={
|
||||
node.icon ? node.icon : <IconFileDescription size="18" />
|
||||
}
|
||||
readOnly={!canEdit}
|
||||
removeEmojiAction={handleRemoveEmoji}
|
||||
actionIconProps={{ tabIndex: -1 }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<span className={classes.text}>{node.name || t("untitled")}</span>
|
||||
|
||||
<div className={classes.actions}>
|
||||
<NodeMenu node={node} canEdit={canEdit} />
|
||||
|
||||
{canEdit && (
|
||||
<CreateNode
|
||||
node={node}
|
||||
isOpen={isOpen}
|
||||
hasChildren={hasChildren}
|
||||
onToggle={toggleOpen}
|
||||
onExpandTree={handleLoadChildren}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
interface PageArrowProps {
|
||||
isOpen: boolean;
|
||||
hasChildren: boolean;
|
||||
onToggle: () => void;
|
||||
}
|
||||
|
||||
function PageArrow({ isOpen, hasChildren, onToggle }: PageArrowProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
if (!hasChildren) {
|
||||
return (
|
||||
<span
|
||||
aria-hidden
|
||||
style={{
|
||||
width: 20,
|
||||
height: 20,
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
color: "var(--mantine-color-gray-6)",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<IconPointFilled size={8} />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ActionIcon
|
||||
size={20}
|
||||
variant="subtle"
|
||||
c="gray"
|
||||
aria-label={isOpen ? t("Collapse") : t("Expand")}
|
||||
aria-expanded={isOpen}
|
||||
tabIndex={-1}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onToggle();
|
||||
}}
|
||||
>
|
||||
{isOpen ? (
|
||||
<IconChevronDown stroke={2} size={18} />
|
||||
) : (
|
||||
<IconChevronRight stroke={2} size={18} />
|
||||
)}
|
||||
</ActionIcon>
|
||||
);
|
||||
}
|
||||
|
||||
interface CreateNodeProps {
|
||||
node: SpaceTreeNode;
|
||||
isOpen: boolean;
|
||||
hasChildren: boolean;
|
||||
onToggle: () => void;
|
||||
onExpandTree: () => Promise<void> | void;
|
||||
}
|
||||
|
||||
function CreateNode({
|
||||
node,
|
||||
isOpen,
|
||||
hasChildren,
|
||||
onToggle,
|
||||
onExpandTree,
|
||||
}: CreateNodeProps) {
|
||||
const { t } = useTranslation();
|
||||
const { handleCreate } = useTreeMutation(node.spaceId);
|
||||
|
||||
async function handleClickCreate() {
|
||||
if (node.hasChildren && !hasChildren) {
|
||||
// Expand and lazy-load before creating a child. handleCreate reads the
|
||||
// latest tree imperatively (via useStore) so we no longer need a
|
||||
// setTimeout to wait for React to rerun the closure with fresh data.
|
||||
if (!isOpen) onToggle();
|
||||
await onExpandTree();
|
||||
} else if (!isOpen) {
|
||||
onToggle();
|
||||
}
|
||||
handleCreate(node.id);
|
||||
}
|
||||
|
||||
return (
|
||||
<ActionIcon
|
||||
variant="transparent"
|
||||
c="gray"
|
||||
aria-label={t("Create page")}
|
||||
tabIndex={-1}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
handleClickCreate();
|
||||
}}
|
||||
>
|
||||
<IconPlus style={{ width: rem(20), height: rem(20) }} stroke={2} />
|
||||
</ActionIcon>
|
||||
);
|
||||
}
|
||||
@@ -1,47 +1,110 @@
|
||||
import { useAtom } from "jotai";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Text } from "@mantine/core";
|
||||
import {
|
||||
NodeApi,
|
||||
NodeRendererProps,
|
||||
Tree,
|
||||
TreeApi,
|
||||
SimpleTree,
|
||||
} from "react-arborist";
|
||||
import { atom, useAtom } from "jotai";
|
||||
import { treeApiAtom } from "@/features/page/tree/atoms/tree-api-atom.ts";
|
||||
import {
|
||||
fetchAllAncestorChildren,
|
||||
useGetRootSidebarPagesQuery,
|
||||
usePageQuery,
|
||||
useUpdatePageMutation,
|
||||
} from "@/features/page/queries/page-query.ts";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import classes from "@/features/page/tree/styles/tree.module.css";
|
||||
import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom.ts";
|
||||
import { openTreeNodesAtom } from "@/features/page/tree/atoms/open-tree-nodes-atom.ts";
|
||||
import { ActionIcon, Box, Menu, rem, Text } from "@mantine/core";
|
||||
import {
|
||||
IconArrowRight,
|
||||
IconChevronDown,
|
||||
IconChevronRight,
|
||||
IconCopy,
|
||||
IconDotsVertical,
|
||||
IconFileDescription,
|
||||
IconFileExport,
|
||||
IconLink,
|
||||
IconPlus,
|
||||
IconPointFilled,
|
||||
IconStar,
|
||||
IconStarFilled,
|
||||
IconTrash,
|
||||
} from "@tabler/icons-react";
|
||||
import {
|
||||
appendNodeChildrenAtom,
|
||||
treeDataAtom,
|
||||
} from "@/features/page/tree/atoms/tree-data-atom.ts";
|
||||
import clsx from "clsx";
|
||||
import EmojiPicker from "@/components/ui/emoji-picker.tsx";
|
||||
import { useTreeMutation } from "@/features/page/tree/hooks/use-tree-mutation.ts";
|
||||
import {
|
||||
appendNodeChildren,
|
||||
buildTree,
|
||||
buildTreeWithChildren,
|
||||
mergeRootTrees,
|
||||
updateTreeNodeIcon,
|
||||
} from "@/features/page/tree/utils/utils.ts";
|
||||
import { SpaceTreeNode } from "@/features/page/tree/types.ts";
|
||||
import { treeModel } from "@/features/page/tree/model/tree-model";
|
||||
import { getPageBreadcrumbs } from "@/features/page/services/page-service.ts";
|
||||
import { IPage } from "@/features/page/types/page.types.ts";
|
||||
import {
|
||||
getPageBreadcrumbs,
|
||||
getPageById,
|
||||
getSidebarPages,
|
||||
} from "@/features/page/services/page-service.ts";
|
||||
import { IPage, SidebarPagesParams } from "@/features/page/types/page.types.ts";
|
||||
import { queryClient } from "@/main.tsx";
|
||||
import { OpenMap } from "react-arborist/dist/main/state/open-slice";
|
||||
import { useDisclosure, useElementSize, useMergedRef } from "@mantine/hooks";
|
||||
import { useClipboard } from "@/hooks/use-clipboard";
|
||||
import { dfs } from "react-arborist/dist/module/utils";
|
||||
import { useQueryEmit } from "@/features/websocket/use-query-emit.ts";
|
||||
import { buildPageUrl } from "@/features/page/page.utils.ts";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { getAppUrl } from "@/lib/config.ts";
|
||||
import { extractPageSlugId } from "@/lib";
|
||||
import { DocTree } from "./doc-tree";
|
||||
import { SpaceTreeRow } from "./space-tree-row";
|
||||
import { useDeletePageModal } from "@/features/page/hooks/use-delete-page-modal.tsx";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import ExportModal from "@/components/common/export-modal";
|
||||
import MovePageModal from "../../components/move-page-modal.tsx";
|
||||
import { mobileSidebarAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
|
||||
import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
|
||||
import CopyPageModal from "../../components/copy-page-modal.tsx";
|
||||
import { duplicatePage } from "../../services/page-service.ts";
|
||||
import { useFavoriteIds, useAddFavoriteMutation, useRemoveFavoriteMutation } from "@/features/favorite/queries/favorite-query";
|
||||
|
||||
interface SpaceTreeProps {
|
||||
spaceId: string;
|
||||
readOnly: boolean;
|
||||
}
|
||||
|
||||
const openTreeNodesAtom = atom<OpenMap>({});
|
||||
|
||||
export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
|
||||
const { t } = useTranslation();
|
||||
const { pageSlug } = useParams();
|
||||
const [data, setData] = useAtom(treeDataAtom);
|
||||
const { handleMove } = useTreeMutation(spaceId);
|
||||
const { data, setData, controllers } =
|
||||
useTreeMutation<TreeApi<SpaceTreeNode>>(spaceId);
|
||||
const {
|
||||
data: pagesData,
|
||||
hasNextPage,
|
||||
fetchNextPage,
|
||||
isFetching,
|
||||
} = useGetRootSidebarPagesQuery({ spaceId });
|
||||
const [openTreeNodes, setOpenTreeNodes] = useAtom(openTreeNodesAtom);
|
||||
} = useGetRootSidebarPagesQuery({
|
||||
spaceId,
|
||||
});
|
||||
const [, setTreeApi] = useAtom<TreeApi<SpaceTreeNode>>(treeApiAtom);
|
||||
const treeApiRef = useRef<TreeApi<SpaceTreeNode>>();
|
||||
const [openTreeNodes, setOpenTreeNodes] = useAtom<OpenMap>(openTreeNodesAtom);
|
||||
const rootElement = useRef<HTMLDivElement>();
|
||||
const [isRootReady, setIsRootReady] = useState(false);
|
||||
const { ref: sizeRef, width, height } = useElementSize();
|
||||
const mergedRef = useMergedRef((element) => {
|
||||
rootElement.current = element;
|
||||
if (element && !isRootReady) {
|
||||
setIsRootReady(true);
|
||||
}
|
||||
}, sizeRef);
|
||||
const [isDataLoaded, setIsDataLoaded] = useState(false);
|
||||
const spaceIdRef = useRef(spaceId);
|
||||
spaceIdRef.current = spaceId;
|
||||
@@ -60,24 +123,23 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
|
||||
}, [hasNextPage, fetchNextPage, isFetching, spaceId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!pagesData?.pages || hasNextPage) return;
|
||||
if (pagesData?.pages && !hasNextPage) {
|
||||
const allItems = pagesData.pages.flatMap((page) => page.items);
|
||||
const treeData = buildTree(allItems);
|
||||
|
||||
const allItems = pagesData.pages.flatMap((page) => page.items);
|
||||
const treeData = buildTree(allItems);
|
||||
setData((prev) => {
|
||||
// fresh space; full reset
|
||||
if (prev.length === 0 || prev[0]?.spaceId !== spaceId) {
|
||||
setIsDataLoaded(true);
|
||||
setOpenTreeNodes({});
|
||||
return treeData;
|
||||
}
|
||||
|
||||
setData((prev) => {
|
||||
// Keep nodes belonging to other spaces — filteredData filters by spaceId
|
||||
// for rendering, so accumulating is safe. Preserves lazy-loaded children
|
||||
// and open-state when the user returns to a previously-visited space.
|
||||
const otherSpaces = prev.filter((n) => n?.spaceId !== spaceId);
|
||||
const currentSpace = prev.filter((n) => n?.spaceId === spaceId);
|
||||
const refreshed =
|
||||
currentSpace.length > 0
|
||||
? mergeRootTrees(currentSpace, treeData)
|
||||
: treeData;
|
||||
return [...otherSpaces, ...refreshed];
|
||||
});
|
||||
setIsDataLoaded(true);
|
||||
// same space; append only missing roots
|
||||
setIsDataLoaded(true);
|
||||
return mergeRootTrees(prev, treeData);
|
||||
});
|
||||
}
|
||||
}, [pagesData, hasNextPage, spaceId]);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -86,7 +148,7 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
|
||||
const fetchData = async () => {
|
||||
if (isDataLoaded && currentPage) {
|
||||
// check if pageId node is present in the tree
|
||||
const node = treeModel.find(data, currentPage.id);
|
||||
const node = dfs(treeApiRef.current?.root, currentPage.id);
|
||||
if (node) {
|
||||
// if node is found, no need to traverse its ancestors
|
||||
return;
|
||||
@@ -98,12 +160,14 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
|
||||
|
||||
if (spaceIdRef.current !== effectSpaceId) return;
|
||||
|
||||
if (ancestors && ancestors.length > 1) {
|
||||
if (ancestors && ancestors?.length > 1) {
|
||||
let flatTreeItems = [...buildTree(ancestors)];
|
||||
|
||||
const fetchAndUpdateChildren = async (ancestor: IPage) => {
|
||||
// we don't want to fetch the children of the opened page
|
||||
if (ancestor.id === currentPage.id) return;
|
||||
if (ancestor.id === currentPage.id) {
|
||||
return;
|
||||
}
|
||||
const children = await fetchAllAncestorChildren({
|
||||
pageId: ancestor.id,
|
||||
spaceId: ancestor.spaceId,
|
||||
@@ -121,6 +185,7 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
|
||||
fetchAndUpdateChildren(ancestor),
|
||||
);
|
||||
|
||||
// Wait for all fetch operations to complete
|
||||
Promise.all(fetchPromises).then(() => {
|
||||
if (spaceIdRef.current !== effectSpaceId) return;
|
||||
|
||||
@@ -130,24 +195,15 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
|
||||
const rootChild = ancestorsTree[0];
|
||||
|
||||
// attach built ancestors to tree using functional updater
|
||||
// to avoid stale closure overwriting the current tree data
|
||||
setData((currentData) =>
|
||||
treeModel.appendChildren(
|
||||
currentData,
|
||||
rootChild.id,
|
||||
rootChild.children ?? [],
|
||||
),
|
||||
appendNodeChildren(currentData, rootChild.id, rootChild.children),
|
||||
);
|
||||
|
||||
// open all ancestors of the current page. DocTree picks up the
|
||||
// selectedId change and scrolls the row into view on its own once
|
||||
// flat contains it.
|
||||
setOpenTreeNodes((prev) => {
|
||||
const next = { ...prev };
|
||||
for (const a of ancestors) {
|
||||
if (a.id !== currentPage.id) next[a.id] = true;
|
||||
}
|
||||
return next;
|
||||
});
|
||||
setTimeout(() => {
|
||||
// focus on node and open all parents
|
||||
treeApiRef.current?.select(currentPage.id);
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -156,76 +212,556 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
|
||||
fetchData();
|
||||
}, [isDataLoaded, currentPage?.id]);
|
||||
|
||||
const openIds = useMemo(
|
||||
() => new Set(Object.keys(openTreeNodes).filter((k) => openTreeNodes[k])),
|
||||
[openTreeNodes],
|
||||
);
|
||||
useEffect(() => {
|
||||
if (currentPage?.id) {
|
||||
setTimeout(() => {
|
||||
// focus on node and open all parents
|
||||
treeApiRef.current?.select(currentPage.id, { align: "auto" });
|
||||
}, 200);
|
||||
} else {
|
||||
treeApiRef.current?.deselectAll();
|
||||
}
|
||||
}, [currentPage?.id]);
|
||||
|
||||
const handleToggle = useCallback(
|
||||
async (id: string, isOpen: boolean) => {
|
||||
setOpenTreeNodes((prev) => ({ ...prev, [id]: isOpen }));
|
||||
if (isOpen) {
|
||||
const node = treeModel.find(data, id) as SpaceTreeNode | null;
|
||||
if (
|
||||
node?.hasChildren &&
|
||||
(!node.children || node.children.length === 0)
|
||||
) {
|
||||
const fetched = await fetchAllAncestorChildren({
|
||||
pageId: id,
|
||||
spaceId: node.spaceId,
|
||||
});
|
||||
setData((prev) => treeModel.appendChildren(prev, id, fetched));
|
||||
}
|
||||
}
|
||||
},
|
||||
[data, setOpenTreeNodes, setData],
|
||||
);
|
||||
// Clean up tree API on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
// @ts-ignore
|
||||
setTreeApi(null);
|
||||
};
|
||||
}, [setTreeApi]);
|
||||
|
||||
const filteredData = useMemo(
|
||||
() => data.filter((node) => node?.spaceId === spaceId),
|
||||
[data, spaceId],
|
||||
);
|
||||
|
||||
// Stable callbacks for DocTree. Without these, every parent render recreates
|
||||
// the props and tears down every row's draggable/dropTarget subscription,
|
||||
// defeating memo(DocTreeRow).
|
||||
const renderRow = useCallback(
|
||||
(rowProps: Parameters<typeof SpaceTreeRow>[0]) => (
|
||||
<SpaceTreeRow {...rowProps} readOnly={readOnly} />
|
||||
),
|
||||
[readOnly],
|
||||
);
|
||||
const disableDragDrop = useCallback(
|
||||
(n: SpaceTreeNode) => n.canEdit === false,
|
||||
[],
|
||||
);
|
||||
const getDragLabel = useCallback(
|
||||
(n: SpaceTreeNode) => n.name || t("untitled"),
|
||||
[t],
|
||||
);
|
||||
const filteredData = data.filter((node) => node?.spaceId === spaceId);
|
||||
|
||||
return (
|
||||
<div className={classes.treeContainer}>
|
||||
<div ref={mergedRef} className={classes.treeContainer}>
|
||||
{isDataLoaded && filteredData.length === 0 && (
|
||||
<Text size="xs" c="dimmed" py="xs" px="sm">
|
||||
{t("No pages yet")}
|
||||
</Text>
|
||||
)}
|
||||
{isDataLoaded && filteredData.length > 0 && (
|
||||
<DocTree<SpaceTreeNode>
|
||||
{isRootReady && rootElement.current && (
|
||||
<Tree
|
||||
data={filteredData}
|
||||
openIds={openIds}
|
||||
selectedId={currentPage?.id}
|
||||
renderRow={renderRow}
|
||||
onMove={handleMove}
|
||||
onToggle={handleToggle}
|
||||
readOnly={readOnly}
|
||||
disableDrag={disableDragDrop}
|
||||
disableDrop={disableDragDrop}
|
||||
getDragLabel={getDragLabel}
|
||||
aria-label={t("Pages")}
|
||||
/>
|
||||
disableDrag={
|
||||
readOnly
|
||||
? true
|
||||
: (data) => {
|
||||
return data.canEdit === false;
|
||||
}
|
||||
}
|
||||
disableDrop={
|
||||
readOnly
|
||||
? true
|
||||
: ({ parentNode }) => parentNode?.data?.canEdit === false
|
||||
}
|
||||
disableEdit={readOnly ? true : (data) => data.canEdit === false}
|
||||
{...controllers}
|
||||
width={width}
|
||||
height={rootElement.current.clientHeight}
|
||||
ref={(ref) => {
|
||||
treeApiRef.current = ref;
|
||||
if (ref) {
|
||||
//@ts-ignore
|
||||
setTreeApi(ref);
|
||||
}
|
||||
}}
|
||||
openByDefault={false}
|
||||
disableMultiSelection={true}
|
||||
className={classes.tree}
|
||||
rowClassName={classes.row}
|
||||
rowHeight={30}
|
||||
overscanCount={10}
|
||||
dndRootElement={rootElement.current}
|
||||
onToggle={() => {
|
||||
setOpenTreeNodes(treeApiRef.current?.openState);
|
||||
}}
|
||||
initialOpenState={openTreeNodes}
|
||||
>
|
||||
{Node}
|
||||
</Tree>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Node({ node, style, dragHandle, tree }: NodeRendererProps<any>) {
|
||||
const { t } = useTranslation();
|
||||
const updatePageMutation = useUpdatePageMutation();
|
||||
const [treeData, setTreeData] = useAtom(treeDataAtom);
|
||||
const [, appendChildren] = useAtom(appendNodeChildrenAtom);
|
||||
const emit = useQueryEmit();
|
||||
const { spaceSlug } = useParams();
|
||||
const timerRef = useRef(null);
|
||||
const [mobileSidebarOpened] = useAtom(mobileSidebarAtom);
|
||||
const toggleMobileSidebar = useToggleSidebar(mobileSidebarAtom);
|
||||
|
||||
const prefetchPage = () => {
|
||||
timerRef.current = setTimeout(async () => {
|
||||
const page = await queryClient.fetchQuery({
|
||||
queryKey: ["pages", node.data.id],
|
||||
queryFn: () => getPageById({ pageId: node.data.id }),
|
||||
staleTime: 5 * 60 * 1000,
|
||||
});
|
||||
if (page?.slugId) {
|
||||
queryClient.setQueryData(["pages", page.slugId], page);
|
||||
}
|
||||
}, 150);
|
||||
};
|
||||
|
||||
const cancelPagePrefetch = () => {
|
||||
if (timerRef.current) {
|
||||
window.clearTimeout(timerRef.current);
|
||||
timerRef.current = null;
|
||||
}
|
||||
};
|
||||
|
||||
async function handleLoadChildren(node: NodeApi<SpaceTreeNode>) {
|
||||
if (!node.data.hasChildren) return;
|
||||
// in conflict with use-query-subscription.ts => case "addTreeNode","moveTreeNode" etc with websocket
|
||||
// if (node.data.children && node.data.children.length > 0) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
try {
|
||||
const params: SidebarPagesParams = {
|
||||
pageId: node.data.id,
|
||||
spaceId: node.data.spaceId,
|
||||
};
|
||||
|
||||
const childrenTree = await fetchAllAncestorChildren(params);
|
||||
|
||||
appendChildren({
|
||||
parentId: node.data.id,
|
||||
children: childrenTree,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch children:", error);
|
||||
}
|
||||
}
|
||||
|
||||
const handleUpdateNodeIcon = (nodeId: string, newIcon: string) => {
|
||||
const updatedTree = updateTreeNodeIcon(treeData, nodeId, newIcon);
|
||||
setTreeData(updatedTree);
|
||||
};
|
||||
|
||||
const handleEmojiIconClick = (e: any) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
};
|
||||
|
||||
const handleEmojiSelect = (emoji: { native: string }) => {
|
||||
handleUpdateNodeIcon(node.id, emoji.native);
|
||||
updatePageMutation
|
||||
.mutateAsync({ pageId: node.id, icon: emoji.native })
|
||||
.then((data) => {
|
||||
setTimeout(() => {
|
||||
emit({
|
||||
operation: "updateOne",
|
||||
spaceId: node.data.spaceId,
|
||||
entity: ["pages"],
|
||||
id: node.id,
|
||||
payload: { icon: emoji.native, parentPageId: data.parentPageId },
|
||||
});
|
||||
}, 50);
|
||||
});
|
||||
};
|
||||
|
||||
const handleRemoveEmoji = () => {
|
||||
handleUpdateNodeIcon(node.id, null);
|
||||
updatePageMutation.mutateAsync({ pageId: node.id, icon: null });
|
||||
|
||||
setTimeout(() => {
|
||||
emit({
|
||||
operation: "updateOne",
|
||||
spaceId: node.data.spaceId,
|
||||
entity: ["pages"],
|
||||
id: node.id,
|
||||
payload: { icon: null },
|
||||
});
|
||||
}, 50);
|
||||
};
|
||||
|
||||
if (
|
||||
node.willReceiveDrop &&
|
||||
node.isClosed &&
|
||||
(node.children.length > 0 || node.data.hasChildren)
|
||||
) {
|
||||
handleLoadChildren(node);
|
||||
setTimeout(() => {
|
||||
if (node.state.willReceiveDrop) {
|
||||
node.open();
|
||||
}
|
||||
}, 650);
|
||||
}
|
||||
|
||||
const pageUrl = buildPageUrl(spaceSlug, node.data.slugId, node.data.name);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
style={style}
|
||||
className={clsx(classes.node, node.state)}
|
||||
component={Link}
|
||||
to={pageUrl}
|
||||
// @ts-ignore
|
||||
ref={dragHandle}
|
||||
onClick={() => {
|
||||
if (mobileSidebarOpened) {
|
||||
toggleMobileSidebar();
|
||||
}
|
||||
}}
|
||||
onMouseEnter={prefetchPage}
|
||||
onMouseLeave={cancelPagePrefetch}
|
||||
>
|
||||
<PageArrow node={node} onExpandTree={() => handleLoadChildren(node)} />
|
||||
|
||||
<div onClick={handleEmojiIconClick} style={{ marginRight: "4px" }}>
|
||||
<EmojiPicker
|
||||
onEmojiSelect={handleEmojiSelect}
|
||||
icon={
|
||||
node.data.icon ? (
|
||||
node.data.icon
|
||||
) : (
|
||||
<IconFileDescription size="18" />
|
||||
)
|
||||
}
|
||||
readOnly={
|
||||
tree.props.disableEdit === true || node.data.canEdit === false
|
||||
}
|
||||
removeEmojiAction={handleRemoveEmoji}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<span className={classes.text}>{node.data.name || t("untitled")}</span>
|
||||
|
||||
<div className={classes.actions}>
|
||||
<NodeMenu node={node} treeApi={tree} spaceId={node.data.spaceId} />
|
||||
|
||||
{tree.props.disableEdit !== true && node.data.canEdit !== false && (
|
||||
<CreateNode
|
||||
node={node}
|
||||
treeApi={tree}
|
||||
onExpandTree={() => handleLoadChildren(node)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
interface CreateNodeProps {
|
||||
node: NodeApi<SpaceTreeNode>;
|
||||
treeApi: TreeApi<SpaceTreeNode>;
|
||||
onExpandTree?: () => void;
|
||||
}
|
||||
|
||||
function CreateNode({ node, treeApi, onExpandTree }: CreateNodeProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
function handleCreate() {
|
||||
if (node.data.hasChildren && node.children.length === 0) {
|
||||
node.toggle();
|
||||
onExpandTree();
|
||||
|
||||
setTimeout(() => {
|
||||
treeApi?.create({ type: "internal", parentId: node.id, index: 0 });
|
||||
}, 500);
|
||||
} else {
|
||||
treeApi?.create({ type: "internal", parentId: node.id });
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<ActionIcon
|
||||
variant="transparent"
|
||||
c="gray"
|
||||
aria-label={t("Create page")}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
handleCreate();
|
||||
}}
|
||||
>
|
||||
<IconPlus style={{ width: rem(20), height: rem(20) }} stroke={2} />
|
||||
</ActionIcon>
|
||||
);
|
||||
}
|
||||
|
||||
interface NodeMenuProps {
|
||||
node: NodeApi<SpaceTreeNode>;
|
||||
treeApi: TreeApi<SpaceTreeNode>;
|
||||
spaceId: string;
|
||||
}
|
||||
|
||||
function NodeMenu({ node, treeApi, spaceId }: NodeMenuProps) {
|
||||
const { t } = useTranslation();
|
||||
const clipboard = useClipboard({ timeout: 500 });
|
||||
const { spaceSlug } = useParams();
|
||||
const { openDeleteModal } = useDeletePageModal();
|
||||
const [data, setData] = useAtom(treeDataAtom);
|
||||
const emit = useQueryEmit();
|
||||
const [exportOpened, { open: openExportModal, close: closeExportModal }] =
|
||||
useDisclosure(false);
|
||||
const [
|
||||
movePageModalOpened,
|
||||
{ open: openMovePageModal, close: closeMoveSpaceModal },
|
||||
] = useDisclosure(false);
|
||||
const [
|
||||
copyPageModalOpened,
|
||||
{ open: openCopyPageModal, close: closeCopySpaceModal },
|
||||
] = useDisclosure(false);
|
||||
const favoriteIds = useFavoriteIds("page", spaceId);
|
||||
const addFavorite = useAddFavoriteMutation();
|
||||
const removeFavorite = useRemoveFavoriteMutation();
|
||||
const isFavorited = favoriteIds.has(node.data.id);
|
||||
|
||||
const handleCopyLink = () => {
|
||||
const pageUrl =
|
||||
getAppUrl() + buildPageUrl(spaceSlug, node.data.slugId, node.data.name);
|
||||
clipboard.copy(pageUrl);
|
||||
notifications.show({ message: t("Link copied") });
|
||||
};
|
||||
|
||||
const handleDuplicatePage = async () => {
|
||||
try {
|
||||
const duplicatedPage = await duplicatePage({
|
||||
pageId: node.id,
|
||||
});
|
||||
|
||||
// Find the index of the current node
|
||||
const parentId =
|
||||
node.parent?.id === "__REACT_ARBORIST_INTERNAL_ROOT__"
|
||||
? null
|
||||
: node.parent?.id;
|
||||
const siblings = parentId ? node.parent.children : treeApi?.props.data;
|
||||
const currentIndex =
|
||||
siblings?.findIndex((sibling) => sibling.id === node.id) || 0;
|
||||
const newIndex = currentIndex + 1;
|
||||
|
||||
// Add the duplicated page to the tree
|
||||
const treeNodeData: SpaceTreeNode = {
|
||||
id: duplicatedPage.id,
|
||||
slugId: duplicatedPage.slugId,
|
||||
name: duplicatedPage.title,
|
||||
position: duplicatedPage.position,
|
||||
spaceId: duplicatedPage.spaceId,
|
||||
parentPageId: duplicatedPage.parentPageId,
|
||||
icon: duplicatedPage.icon,
|
||||
hasChildren: duplicatedPage.hasChildren,
|
||||
canEdit: true,
|
||||
children: [],
|
||||
};
|
||||
|
||||
// Update local tree
|
||||
const simpleTree = new SimpleTree(data);
|
||||
simpleTree.create({
|
||||
parentId,
|
||||
index: newIndex,
|
||||
data: treeNodeData,
|
||||
});
|
||||
setData(simpleTree.data);
|
||||
|
||||
// Emit socket event
|
||||
setTimeout(() => {
|
||||
emit({
|
||||
operation: "addTreeNode",
|
||||
spaceId: spaceId,
|
||||
payload: {
|
||||
parentId,
|
||||
index: newIndex,
|
||||
data: treeNodeData,
|
||||
},
|
||||
});
|
||||
}, 50);
|
||||
|
||||
notifications.show({
|
||||
message: t("Page duplicated successfully"),
|
||||
});
|
||||
} catch (err) {
|
||||
notifications.show({
|
||||
message: err.response?.data.message || "An error occurred",
|
||||
color: "red",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Menu shadow="md" width={200}>
|
||||
<Menu.Target>
|
||||
<ActionIcon
|
||||
variant="transparent"
|
||||
c="gray"
|
||||
aria-label={t("Page menu")}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<IconDotsVertical
|
||||
style={{ width: rem(20), height: rem(20) }}
|
||||
stroke={2}
|
||||
/>
|
||||
</ActionIcon>
|
||||
</Menu.Target>
|
||||
|
||||
<Menu.Dropdown>
|
||||
<Menu.Item
|
||||
leftSection={<IconLink size={16} />}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
handleCopyLink();
|
||||
}}
|
||||
>
|
||||
{t("Copy link")}
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item
|
||||
leftSection={isFavorited ? <IconStarFilled size={16} /> : <IconStar size={16} />}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (isFavorited) {
|
||||
removeFavorite.mutate({ type: "page", pageId: node.data.id });
|
||||
} else {
|
||||
addFavorite.mutate({ type: "page", pageId: node.data.id });
|
||||
}
|
||||
}}
|
||||
>
|
||||
{isFavorited ? t("Remove from favorites") : t("Add to favorites")}
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item
|
||||
leftSection={<IconFileExport size={16} />}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
openExportModal();
|
||||
}}
|
||||
>
|
||||
{t("Export page")}
|
||||
</Menu.Item>
|
||||
|
||||
{treeApi.props.disableEdit !== true &&
|
||||
node.data.canEdit !== false && (
|
||||
<>
|
||||
<Menu.Item
|
||||
leftSection={<IconCopy size={16} />}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
handleDuplicatePage();
|
||||
}}
|
||||
>
|
||||
{t("Duplicate")}
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item
|
||||
leftSection={<IconArrowRight size={16} />}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
openMovePageModal();
|
||||
}}
|
||||
>
|
||||
{t("Move")}
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item
|
||||
leftSection={<IconCopy size={16} />}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
openCopyPageModal();
|
||||
}}
|
||||
>
|
||||
{t("Copy to space")}
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Divider />
|
||||
<Menu.Item
|
||||
c="red"
|
||||
leftSection={<IconTrash size={16} />}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
openDeleteModal({ onConfirm: () => treeApi?.delete(node) });
|
||||
}}
|
||||
>
|
||||
{t("Move to trash")}
|
||||
</Menu.Item>
|
||||
</>
|
||||
)}
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
|
||||
<MovePageModal
|
||||
pageId={node.id}
|
||||
slugId={node.data.slugId}
|
||||
currentSpaceSlug={spaceSlug}
|
||||
onClose={closeMoveSpaceModal}
|
||||
open={movePageModalOpened}
|
||||
/>
|
||||
|
||||
<CopyPageModal
|
||||
pageId={node.id}
|
||||
currentSpaceSlug={spaceSlug}
|
||||
onClose={closeCopySpaceModal}
|
||||
open={copyPageModalOpened}
|
||||
/>
|
||||
|
||||
<ExportModal
|
||||
type="page"
|
||||
id={node.id}
|
||||
open={exportOpened}
|
||||
onClose={closeExportModal}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
interface PageArrowProps {
|
||||
node: NodeApi<SpaceTreeNode>;
|
||||
onExpandTree?: () => void;
|
||||
}
|
||||
|
||||
function PageArrow({ node, onExpandTree }: PageArrowProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
useEffect(() => {
|
||||
if (node.isOpen) {
|
||||
onExpandTree();
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ActionIcon
|
||||
size={20}
|
||||
variant="subtle"
|
||||
c="gray"
|
||||
aria-label={node.isOpen ? t("Collapse") : t("Expand")}
|
||||
aria-expanded={node.isInternal ? node.isOpen : undefined}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
node.toggle();
|
||||
onExpandTree();
|
||||
}}
|
||||
>
|
||||
{node.isInternal ? (
|
||||
node.children && (node.children.length > 0 || node.data.hasChildren) ? (
|
||||
node.isOpen ? (
|
||||
<IconChevronDown stroke={2} size={18} />
|
||||
) : (
|
||||
<IconChevronRight stroke={2} size={18} />
|
||||
)
|
||||
) : (
|
||||
<IconPointFilled size={8} />
|
||||
)
|
||||
) : null}
|
||||
</ActionIcon>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,100 +0,0 @@
|
||||
import { describe, it, expect, vi } from 'vitest';
|
||||
import type { SpaceTreeNode } from '@/features/page/tree/types';
|
||||
import { dropOpToMovePayload } from './drop-op-to-move-payload';
|
||||
|
||||
vi.mock('fractional-indexing-jittered', () => ({
|
||||
generateJitteredKeyBetween: (a: string | null, b: string | null) =>
|
||||
`${a ?? 'START'}|${b ?? 'END'}`,
|
||||
}));
|
||||
|
||||
const n = (id: string, position: string, children?: SpaceTreeNode[]): SpaceTreeNode =>
|
||||
({ id, position, children, name: id } as unknown as SpaceTreeNode);
|
||||
|
||||
const tree: SpaceTreeNode[] = [
|
||||
n('a', 'A', [n('a1', 'AA'), n('a2', 'AB')]),
|
||||
n('b', 'B'),
|
||||
];
|
||||
|
||||
describe('dropOpToMovePayload', () => {
|
||||
it('reorder-before computes parentId + position between prev and target', () => {
|
||||
const p = dropOpToMovePayload(tree, 'a2', {
|
||||
kind: 'reorder-before',
|
||||
targetId: 'a1',
|
||||
});
|
||||
expect(p).toEqual({ pageId: 'a2', parentPageId: 'a', position: 'START|AA' });
|
||||
});
|
||||
|
||||
it('reorder-after computes position between target and next', () => {
|
||||
const p = dropOpToMovePayload(tree, 'a1', {
|
||||
kind: 'reorder-after',
|
||||
targetId: 'a2',
|
||||
});
|
||||
expect(p).toEqual({ pageId: 'a1', parentPageId: 'a', position: 'AB|END' });
|
||||
});
|
||||
|
||||
it('make-child appends with position after last child', () => {
|
||||
const p = dropOpToMovePayload(tree, 'b', {
|
||||
kind: 'make-child',
|
||||
targetId: 'a',
|
||||
});
|
||||
expect(p).toEqual({ pageId: 'b', parentPageId: 'a', position: 'AB|END' });
|
||||
});
|
||||
|
||||
it('reorder-before at root: parentPageId is null', () => {
|
||||
const p = dropOpToMovePayload(tree, 'b', {
|
||||
kind: 'reorder-before',
|
||||
targetId: 'a',
|
||||
});
|
||||
expect(p).toEqual({ pageId: 'b', parentPageId: null, position: 'START|A' });
|
||||
});
|
||||
|
||||
// Regression: when source is already adjacent to target, the BEFORE-tree
|
||||
// treats source itself as the target's neighbor and falls back to null,
|
||||
// producing an unbounded fractional key that overshoots other siblings.
|
||||
// The fix uses the AFTER-tree, where source occupies its destination slot
|
||||
// surrounded by its REAL neighbors.
|
||||
it('reorder-after when source is immediately after target uses post-move neighbors', () => {
|
||||
const adjacent: SpaceTreeNode[] = [
|
||||
n('a', 'A'),
|
||||
n('b', 'AB'),
|
||||
n('c', 'B'),
|
||||
n('d', 'BC'),
|
||||
];
|
||||
const p = dropOpToMovePayload(adjacent, 'b', {
|
||||
kind: 'reorder-after',
|
||||
targetId: 'a',
|
||||
});
|
||||
// After-tree is [a, b, c, d] (no-op shape). Source 'b' at index 1.
|
||||
// prev = 'A', next = 'B'. Old buggy code returned prev='A', next=null.
|
||||
expect(p).toEqual({ pageId: 'b', parentPageId: null, position: 'A|B' });
|
||||
});
|
||||
|
||||
it('reorder-before when source is immediately before target uses post-move neighbors', () => {
|
||||
const adjacent: SpaceTreeNode[] = [
|
||||
n('a', 'A'),
|
||||
n('b', 'AB'),
|
||||
n('c', 'B'),
|
||||
n('d', 'BC'),
|
||||
];
|
||||
const p = dropOpToMovePayload(adjacent, 'b', {
|
||||
kind: 'reorder-before',
|
||||
targetId: 'c',
|
||||
});
|
||||
// After-tree is [a, b, c, d]. Source 'b' at index 1.
|
||||
// prev = 'A', next = 'B'. Old buggy code returned prev=null, next='B'.
|
||||
expect(p).toEqual({ pageId: 'b', parentPageId: null, position: 'A|B' });
|
||||
});
|
||||
|
||||
it('make-child when source is already last child of target uses post-move neighbors', () => {
|
||||
const t: SpaceTreeNode[] = [
|
||||
n('p', 'P', [n('x', 'X'), n('y', 'Y')]),
|
||||
];
|
||||
const p = dropOpToMovePayload(t, 'y', {
|
||||
kind: 'make-child',
|
||||
targetId: 'p',
|
||||
});
|
||||
// After-tree: 'y' becomes last child of 'p' → [x, y]. y at index 1.
|
||||
// prev = 'X', next = null. Old buggy: prev=Y (source's own position), next=null.
|
||||
expect(p).toEqual({ pageId: 'y', parentPageId: 'p', position: 'X|END' });
|
||||
});
|
||||
});
|
||||
@@ -1,36 +0,0 @@
|
||||
import { generateJitteredKeyBetween } from 'fractional-indexing-jittered';
|
||||
import type { SpaceTreeNode } from '@/features/page/tree/types';
|
||||
import type { IMovePage } from '@/features/page/types/page.types';
|
||||
import type { DropOp } from '@/features/page/tree/model/tree-model.types';
|
||||
import { treeModel } from '@/features/page/tree/model/tree-model';
|
||||
|
||||
export function dropOpToMovePayload(
|
||||
tree: SpaceTreeNode[],
|
||||
sourceId: string,
|
||||
op: DropOp,
|
||||
): IMovePage {
|
||||
// Compute the post-move tree so we read source's REAL neighbors at its new
|
||||
// position. Reading from the before-tree would mean treating source itself
|
||||
// as a neighbor of the target — wrong when source is adjacent to target.
|
||||
const { tree: after } = treeModel.move(tree, sourceId, op);
|
||||
const info = treeModel.siblingsOf(after, sourceId);
|
||||
if (!info) {
|
||||
return {
|
||||
pageId: sourceId,
|
||||
parentPageId: null,
|
||||
position: generateJitteredKeyBetween(null, null),
|
||||
};
|
||||
}
|
||||
|
||||
const prev = info.siblings[info.index - 1] as SpaceTreeNode | undefined;
|
||||
const next = info.siblings[info.index + 1] as SpaceTreeNode | undefined;
|
||||
|
||||
return {
|
||||
pageId: sourceId,
|
||||
parentPageId: info.parentId,
|
||||
position: generateJitteredKeyBetween(
|
||||
prev?.position ?? null,
|
||||
next?.position ?? null,
|
||||
),
|
||||
};
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user