Will Hunt
c02db4ebb8
* Port over linkifyJS to shared-components. * Drop rubbish * update lock * quickfix test * drop group id * Modernize tests * Remove stories that aren't in use. * Complete working version * Add copyright * tidy up * update lock * Update snaps * update snap * undo change * remove unused * More test updates * fix typo * fix margin on preview * move margin block * snapupdate * prettier * cleanup a test mistake * Fixup sonar issues * Don't expose linkifyjs to applications, just provide helper functions. * Add story for documentation. * remove $ * Use a const * typo * cleanup var name * remove console line * Changes checkpoint * Convert to context * Revert unrelated change. * more cleanup * Add a test to cover ignoring incoming data elements * Make tests happy * Update tests for LinkedText * Underlines! * fix lock * remove unused linkify packages * import move * Remove mod to remove underline * undo * fix snap * another snapshot fix * Tidy up based on review. * fix story * Pass in args
53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
/*
|
|
* Copyright 2026 Element Creations Ltd.
|
|
*
|
|
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
|
* Please see LICENSE files in the repository root for full details.
|
|
*/
|
|
|
|
import { Link, Text } from "@vector-im/compound-web";
|
|
import React, { type ComponentProps } from "react";
|
|
import classNames from "classnames";
|
|
import Linkify from "linkify-react";
|
|
|
|
import styles from "./LinkedText.module.css";
|
|
import { generateLinkedTextOptions } from "../linkify";
|
|
import { useLinkedTextContext } from "./LinkedTextContext";
|
|
|
|
export type LinkedTextProps = ComponentProps<typeof Text> & {
|
|
/**
|
|
* Handler for when a link within the component is clicked. This will run
|
|
* *before* any LinkedTextContext handlers are run.
|
|
* @param ev The event raised by the click.
|
|
*/
|
|
onLinkClick?: (ev: MouseEvent) => void;
|
|
};
|
|
/**
|
|
* A component that renders URLs as clickable links inside some plain text.
|
|
*
|
|
* Requires a `<LinkedTextContext.Provider>`
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* <LinkedTextContext.Provider value={...}>
|
|
* <LinkedText>
|
|
* I love working on https://matrix.org
|
|
* </LinkedText>
|
|
* </LinkedTextContext.Provider>
|
|
* ```
|
|
*/
|
|
export function LinkedText({ children, className, onLinkClick, ...textProps }: LinkedTextProps): React.ReactNode {
|
|
const options = useLinkedTextContext();
|
|
const linkifyOptions = generateLinkedTextOptions({ ...options, onLinkClick });
|
|
return (
|
|
<Linkify
|
|
className={classNames(styles.container, className)}
|
|
as={Text}
|
|
options={{ ...linkifyOptions, render: Link }}
|
|
{...textProps}
|
|
>
|
|
{children}
|
|
</Linkify>
|
|
);
|
|
}
|