diff --git a/apps/client/src/components/common/recent-changes.tsx b/apps/client/src/components/common/recent-changes.tsx index 75935fa5..81fdc899 100644 --- a/apps/client/src/components/common/recent-changes.tsx +++ b/apps/client/src/components/common/recent-changes.tsx @@ -5,26 +5,27 @@ import { Badge, Table, ActionIcon, -} from '@mantine/core'; -import {Link} from 'react-router-dom'; -import PageListSkeleton from '@/components/ui/page-list-skeleton.tsx'; -import { buildPageUrl } from '@/features/page/page.utils.ts'; -import { formattedDate } from '@/lib/time.ts'; -import { useRecentChangesQuery } from '@/features/page/queries/page-query.ts'; -import { IconFileDescription } from '@tabler/icons-react'; -import { getSpaceUrl } from '@/lib/config.ts'; +} from "@mantine/core"; +import { Link } from "react-router-dom"; +import PageListSkeleton from "@/components/ui/page-list-skeleton.tsx"; +import { buildPageUrl } from "@/features/page/page.utils.ts"; +import { formattedDate } from "@/lib/time.ts"; +import { useRecentChangesQuery } from "@/features/page/queries/page-query.ts"; +import { IconFileDescription } from "@tabler/icons-react"; +import { getSpaceUrl } from "@/lib/config.ts"; import { useTranslation } from "react-i18next"; +import { getInitialsColor } from "@/lib/get-initials-color.ts"; interface Props { spaceId?: string; } -export default function RecentChanges({spaceId}: Props) { +export default function RecentChanges({ spaceId }: Props) { const { t } = useTranslation(); - const {data: pages, isLoading, isError} = useRecentChangesQuery(spaceId); + const { data: pages, isLoading, isError } = useRecentChangesQuery(spaceId); if (isLoading) { - return ; + return ; } if (isError) { @@ -44,8 +45,8 @@ export default function RecentChanges({spaceId}: Props) { > {page.icon || ( - - + + )} @@ -58,18 +59,23 @@ export default function RecentChanges({spaceId}: Props) { {!spaceId && ( {page?.space.name} )} - + {formattedDate(page.updatedAt)} diff --git a/apps/client/src/components/ui/auto-tooltip-text.tsx b/apps/client/src/components/ui/auto-tooltip-text.tsx new file mode 100644 index 00000000..419ec3d9 --- /dev/null +++ b/apps/client/src/components/ui/auto-tooltip-text.tsx @@ -0,0 +1,49 @@ +import { useRef, useState, ReactNode } from "react"; +import { Text, TextProps, Tooltip } from "@mantine/core"; + +type AutoTooltipTextProps = TextProps & { + children: ReactNode; + tooltipLabel?: string; + tooltipProps?: Omit< + React.ComponentProps, + "children" | "label" + >; +}; + +export function AutoTooltipText({ + children, + tooltipLabel, + tooltipProps, + ...textProps +}: AutoTooltipTextProps) { + const textRef = useRef(null); + const [isTruncated, setIsTruncated] = useState(false); + + const handleMouseEnter = () => { + const element = textRef.current; + if (element) { + setIsTruncated(element.scrollWidth > element.clientWidth); + } + }; + + const label = tooltipLabel ?? (typeof children === "string" ? children : ""); + + return ( + + + {children} + + + ); +} diff --git a/apps/client/src/features/group/components/group-list.tsx b/apps/client/src/features/group/components/group-list.tsx index f1f1ffe0..5ce17973 100644 --- a/apps/client/src/features/group/components/group-list.tsx +++ b/apps/client/src/features/group/components/group-list.tsx @@ -10,6 +10,7 @@ import Paginate from "@/components/common/paginate.tsx"; import { queryClient } from "@/main.tsx"; import { getSpaces } from "@/features/space/services/space-service.ts"; import { getGroupMembers } from "@/features/group/services/group-service.ts"; +import { AutoTooltipText } from "@/components/ui/auto-tooltip-text.tsx"; export default function GroupList() { const { t } = useTranslation(); @@ -51,9 +52,9 @@ export default function GroupList() {
- + {group.name} - + {group.description} diff --git a/apps/client/src/features/space/components/space-list.tsx b/apps/client/src/features/space/components/space-list.tsx index b7fc3ec7..79b661ea 100644 --- a/apps/client/src/features/space/components/space-list.tsx +++ b/apps/client/src/features/space/components/space-list.tsx @@ -8,6 +8,7 @@ import { useTranslation } from "react-i18next"; import Paginate from "@/components/common/paginate.tsx"; import { CustomAvatar } from "@/components/ui/custom-avatar.tsx"; import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts"; +import { AutoTooltipText } from "@/components/ui/auto-tooltip-text.tsx"; export default function SpaceList() { const { t } = useTranslation(); @@ -49,9 +50,9 @@ export default function SpaceList() { name={space.name} />
- + {space.name} - + {space.description} diff --git a/apps/client/src/features/space/components/space-members.tsx b/apps/client/src/features/space/components/space-members.tsx index 06300293..9186daaf 100644 --- a/apps/client/src/features/space/components/space-members.tsx +++ b/apps/client/src/features/space/components/space-members.tsx @@ -27,6 +27,7 @@ import { useTranslation } from "react-i18next"; import Paginate from "@/components/common/paginate.tsx"; import { SearchInput } from "@/components/common/search-input.tsx"; import { usePaginateAndSearch } from "@/hooks/use-paginate-and-search.tsx"; +import { AutoTooltipText } from "@/components/ui/auto-tooltip-text.tsx"; type MemberType = "user" | "group"; @@ -138,10 +139,10 @@ export default function SpaceMembersList({ {member.type === "group" && } -
- +
+ {member?.name} - + {member.type == "user" && member?.email} diff --git a/apps/client/src/features/space/components/spaces-page/all-spaces-list.tsx b/apps/client/src/features/space/components/spaces-page/all-spaces-list.tsx index 4106f203..acfae399 100644 --- a/apps/client/src/features/space/components/spaces-page/all-spaces-list.tsx +++ b/apps/client/src/features/space/components/spaces-page/all-spaces-list.tsx @@ -23,6 +23,7 @@ import SpaceSettingsModal from "@/features/space/components/settings-modal"; import classes from "./all-spaces-list.module.css"; import { CustomAvatar } from "@/components/ui/custom-avatar.tsx"; import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts"; +import { AutoTooltipText } from "@/components/ui/auto-tooltip-text.tsx"; interface AllSpacesListProps { spaces: any[]; @@ -96,10 +97,10 @@ export default function AllSpacesList({ variant="filled" size="md" /> -
- +
+ {space.name} - + {space.description && ( {space.description} diff --git a/apps/client/src/lib/get-initials-color.ts b/apps/client/src/lib/get-initials-color.ts new file mode 100644 index 00000000..cbf90680 --- /dev/null +++ b/apps/client/src/lib/get-initials-color.ts @@ -0,0 +1,34 @@ +import { MantineColor } from "@mantine/core"; + +function hashCode(input: string) { + let hash = 0; + for (let i = 0; i < input.length; i += 1) { + const char = input.charCodeAt(i); + hash = (hash << 5) - hash + char; + hash |= 0; + } + return hash; +} + +const defaultColors: MantineColor[] = [ + "blue", + "cyan", + "grape", + "green", + "indigo", + "lime", + "orange", + "pink", + "red", + "teal", + "violet", +]; + +export function getInitialsColor( + name: string, + colors: MantineColor[] = defaultColors, +) { + const hash = hashCode(name); + const index = Math.abs(hash) % colors.length; + return colors[index]; +} diff --git a/apps/server/src/common/helpers/html-escaper.ts b/apps/server/src/common/helpers/html-escaper.ts new file mode 100644 index 00000000..66e9f6dc --- /dev/null +++ b/apps/server/src/common/helpers/html-escaper.ts @@ -0,0 +1,71 @@ +// https://github.com/WebReflection/html-escaper +/** + * Copyright (C) 2017-present by Andrea Giammarchi - @WebReflection + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + * THE SOFTWARE. + */ + +const { replace } = ''; + +// escape +const es = /&(?:amp|#38|lt|#60|gt|#62|apos|#39|quot|#34);/g; +const ca = /[&<>'"]/g; + +const esca = { + '&': '&', + '<': '<', + '>': '>', + "'": ''', + '"': '"', +}; +const pe = (m) => esca[m]; + +/** + * Safely escape HTML entities such as `&`, `<`, `>`, `"`, and `'`. + * @param {string} es the input to safely escape + * @returns {string} the escaped input, and it **throws** an error if + * the input type is unexpected, except for boolean and numbers, + * converted as string. + */ +export const htmlEscape = (es) => replace.call(es, ca, pe); + +// unescape +const unes = { + '&': '&', + '&': '&', + '<': '<', + '<': '<', + '>': '>', + '>': '>', + ''': "'", + ''': "'", + '"': '"', + '"': '"', +}; +const cape = (m) => unes[m]; + +/** + * Safely unescape previously escaped entities such as `&`, `<`, `>`, `"`, + * and `'`. + * @param {string} un a previously escaped string + * @returns {string} the unescaped input, and it **throws** an error if + * the input type is unexpected, except for boolean and numbers, + * converted as string. + */ +export const htmlUnescape = (un) => replace.call(un, es, cape); diff --git a/apps/server/src/core/share/share-seo.controller.ts b/apps/server/src/core/share/share-seo.controller.ts index ecacecf0..51967ada 100644 --- a/apps/server/src/core/share/share-seo.controller.ts +++ b/apps/server/src/core/share/share-seo.controller.ts @@ -7,6 +7,7 @@ import { validate as isValidUUID } from 'uuid'; import { WorkspaceRepo } from '@docmost/db/repos/workspace/workspace.repo'; import { EnvironmentService } from '../../integrations/environment/environment.service'; import { Workspace } from '@docmost/db/types/entity.types'; +import { htmlEscape } from '../../common/helpers/html-escaper'; @Controller('share') export class ShareSeoController { @@ -68,7 +69,7 @@ export class ShareSeoController { return this.sendIndex(indexFilePath, res); } - const rawTitle = share.sharedPage.title ?? 'untitled'; + const rawTitle = htmlEscape(share?.sharedPage.title ?? 'untitled'); const metaTitle = rawTitle.length > 80 ? `${rawTitle.slice(0, 77)}…` : rawTitle;