mirror of
https://github.com/docmost/docmost.git
synced 2026-05-07 06:23:06 +08:00
Philip Okugbe
e209aaa272
* Work on mentions * fix: properly parse page slug * fix editor suggestion bugs * mentions must start with whitespace * add icon to page mention render * feat: backlinks - WIP * UI - WIP * permissions check * use FTS for page suggestion * cleanup * WIP * page title fallback * feat: handle internal link paste * link styling * WIP * Switch back to LIKE operator for search suggestion * WIP * scope to workspaceId * still create link for pages not found * select necessary columns * cleanups
61 lines
1.4 KiB
TypeScript
61 lines
1.4 KiB
TypeScript
import {
|
|
Tooltip,
|
|
ActionIcon,
|
|
Card,
|
|
Divider,
|
|
Anchor,
|
|
Flex,
|
|
} from "@mantine/core";
|
|
import { IconLinkOff, IconPencil } from "@tabler/icons-react";
|
|
import { useTranslation } from "react-i18next";
|
|
import classes from "./link.module.css";
|
|
|
|
export type LinkPreviewPanelProps = {
|
|
url: string;
|
|
onEdit: () => void;
|
|
onClear: () => void;
|
|
};
|
|
|
|
export const LinkPreviewPanel = ({
|
|
onClear,
|
|
onEdit,
|
|
url,
|
|
}: LinkPreviewPanelProps) => {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<>
|
|
<Card withBorder radius="md" padding="xs" bg="var(--mantine-color-body)">
|
|
<Flex align="center">
|
|
<Tooltip label={url}>
|
|
<Anchor
|
|
href={url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={classes.link}
|
|
>
|
|
{url}
|
|
</Anchor>
|
|
</Tooltip>
|
|
|
|
<Flex align="center">
|
|
<Divider mx={4} orientation="vertical" />
|
|
|
|
<Tooltip label={t("Edit link")}>
|
|
<ActionIcon onClick={onEdit} variant="subtle" color="gray">
|
|
<IconPencil size={16} />
|
|
</ActionIcon>
|
|
</Tooltip>
|
|
|
|
<Tooltip label={t("Remove link")}>
|
|
<ActionIcon onClick={onClear} variant="subtle" color="red">
|
|
<IconLinkOff size={16} />
|
|
</ActionIcon>
|
|
</Tooltip>
|
|
</Flex>
|
|
</Flex>
|
|
</Card>
|
|
</>
|
|
);
|
|
};
|