Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | 4x 4x 4x 4x 4x 4x | import React from "react";
import { MentionProps } from "react-mentions";
interface CustomMentionProps extends MentionProps {
display?: string;
hoverTransform?: (id: string) => string;
id?: string;
onClick?: (
e: React.MouseEvent<HTMLElement, MouseEvent>,
id: string,
index: number,
) => void;
}
const defaultStyle = {
fontWeight: "inherit",
} satisfies React.CSSProperties;
const CustomMention = ({
display,
style,
className,
hoverTransform,
id,
onClick,
}: CustomMentionProps) => {
Iif (!id) {
return null;
}
return (
<strong
className={className}
style={{ ...defaultStyle, ...style }}
title={hoverTransform ? hoverTransform(id) : id}
onClick={(e) => {
if (!onClick) {
return;
}
const parent = e.currentTarget.parentElement;
if (!parent) {
return;
}
let foundIndex = 0;
for (let i = 0; i < parent.children.length; i++) {
const childNode = parent.children[i];
if (childNode === e.currentTarget) {
break;
} else if (childNode.className === className) {
foundIndex++;
}
}
onClick(e, id, foundIndex);
}}
>
{display}
</strong>
);
};
export default CustomMention;
|