feat: internal page links and mentions (#604)

* 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

apps/client/src/features/editor/components/mention/mention-view.tsx

@@ -0,0 +1,56 @@
+import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
+import { ActionIcon, Anchor, Text } from "@mantine/core";
+import { IconFileDescription } from "@tabler/icons-react";
+import { Link, useParams } from "react-router-dom";
+import { usePageQuery } from "@/features/page/queries/page-query.ts";
+import { buildPageUrl } from "@/features/page/page.utils.ts";
+import classes from "./mention.module.css";
+
+export default function MentionView(props: NodeViewProps) {
+  const { node } = props;
+  const { label, entityType, entityId, slugId } = node.attrs;
+  const { spaceSlug } = useParams();
+  const {
+    data: page,
+    isLoading,
+    isError,
+  } = usePageQuery({ pageId: entityType === "page" ? slugId : null });
+
+  return (
+    <NodeViewWrapper style={{ display: "inline" }}>
+      {entityType === "user" && (
+        <Text className={classes.userMention} component="span">
+          @{label}
+        </Text>
+      )}
+
+      {entityType === "page" && (
+        <Anchor
+          component={Link}
+          fw={500}
+          to={buildPageUrl(spaceSlug, slugId, label)}
+          underline="never"
+          className={classes.pageMentionLink}
+        >
+          {page?.icon ? (
+            <span style={{ marginRight: "4px" }}>{page.icon}</span>
+          ) : (
+            <ActionIcon
+              variant="transparent"
+              color="gray"
+              component="span"
+              size={18}
+              style={{ verticalAlign: "text-bottom" }}
+            >
+              <IconFileDescription size={18} />
+            </ActionIcon>
+          )}
+
+          <span className={classes.pageMentionText}>
+            {page?.title || label}
+          </span>
+        </Anchor>
+      )}
+    </NodeViewWrapper>
+  );
+}