base

plane-src/apps/space/components/editor/embeds/mentions/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";

plane-src/apps/space/components/editor/embeds/mentions/root.tsx

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TCallbackMentionComponentProps } from "@plane/editor";
+// local components
+import { EditorUserMention } from "./user";
+
+export function EditorMentionsRoot(props: TCallbackMentionComponentProps) {
+  const { entity_identifier, entity_name } = props;
+
+  switch (entity_name) {
+    case "user_mention":
+      return <EditorUserMention id={entity_identifier} />;
+    default:
+      return null;
+  }
+}

plane-src/apps/space/components/editor/embeds/mentions/user.tsx

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// helpers
+import { cn } from "@plane/utils";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useUser } from "@/hooks/store/use-user";
+
+type Props = {
+  id: string;
+};
+
+export const EditorUserMention = observer(function EditorUserMention(props: Props) {
+  const { id } = props;
+  // store hooks
+  const { data: currentUser } = useUser();
+  const { getMemberById } = useMember();
+  // derived values
+  const userDetails = getMemberById(id);
+
+  if (!userDetails) {
+    return (
+      <div className="not-prose inline rounded-sm bg-layer-1 px-1 py-0.5 text-tertiary no-underline">
+        @deactivated user
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn("not-prose inline rounded-sm bg-accent-primary/20 px-1 py-0.5 text-accent-primary no-underline", {
+        "bg-yellow-500/20 text-yellow-500": id === currentUser?.id,
+      })}
+    >
+      @{userDetails?.member__display_name}
+    </div>
+  );
+});