Fix mentions for messages with ASCII art characters
This commit is contained in:
parent
8e4de33d71
commit
015d789c90
2 changed files with 24 additions and 19 deletions
|
@ -4,7 +4,6 @@
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
|
|
||||||
import { action } from '@storybook/addon-actions';
|
import { action } from '@storybook/addon-actions';
|
||||||
import { select, text } from '@storybook/addon-knobs';
|
|
||||||
|
|
||||||
import type { Props } from './AtMentionify';
|
import type { Props } from './AtMentionify';
|
||||||
import { AtMentionify } from './AtMentionify';
|
import { AtMentionify } from './AtMentionify';
|
||||||
|
@ -15,13 +14,9 @@ export default {
|
||||||
|
|
||||||
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
|
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
|
||||||
bodyRanges: overrideProps.bodyRanges,
|
bodyRanges: overrideProps.bodyRanges,
|
||||||
direction: select(
|
direction: overrideProps.direction || 'incoming',
|
||||||
'direction',
|
|
||||||
{ incoming: 'incoming', outgoing: 'outgoing' },
|
|
||||||
overrideProps.direction || 'incoming'
|
|
||||||
),
|
|
||||||
showConversation: action('showConversation'),
|
showConversation: action('showConversation'),
|
||||||
text: text('text', overrideProps.text || ''),
|
text: overrideProps.text || '',
|
||||||
});
|
});
|
||||||
|
|
||||||
export function NoMentions(): JSX.Element {
|
export function NoMentions(): JSX.Element {
|
||||||
|
@ -32,10 +27,6 @@ export function NoMentions(): JSX.Element {
|
||||||
return <AtMentionify {...props} />;
|
return <AtMentionify {...props} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
NoMentions.story = {
|
|
||||||
name: 'No @mentions',
|
|
||||||
};
|
|
||||||
|
|
||||||
export function MultipleMentions(): JSX.Element {
|
export function MultipleMentions(): JSX.Element {
|
||||||
const bodyRanges = [
|
const bodyRanges = [
|
||||||
{
|
{
|
||||||
|
@ -69,10 +60,6 @@ export function MultipleMentions(): JSX.Element {
|
||||||
return <AtMentionify {...props} />;
|
return <AtMentionify {...props} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
MultipleMentions.story = {
|
|
||||||
name: 'Multiple @Mentions',
|
|
||||||
};
|
|
||||||
|
|
||||||
export function ComplexMentions(): JSX.Element {
|
export function ComplexMentions(): JSX.Element {
|
||||||
const bodyRanges = [
|
const bodyRanges = [
|
||||||
{
|
{
|
||||||
|
@ -109,6 +96,24 @@ export function ComplexMentions(): JSX.Element {
|
||||||
return <AtMentionify {...props} />;
|
return <AtMentionify {...props} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
ComplexMentions.story = {
|
export function WithOddCharacter(): JSX.Element {
|
||||||
name: 'Complex @mentions',
|
const bodyRanges = [
|
||||||
};
|
{
|
||||||
|
start: 4,
|
||||||
|
length: 1,
|
||||||
|
mentionUuid: 'ope',
|
||||||
|
replacementText: 'Zero Cool',
|
||||||
|
conversationID: 'x',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const props = createProps({
|
||||||
|
bodyRanges,
|
||||||
|
text: AtMentionify.preprocessMentions(
|
||||||
|
'Hey \uFFFC - Check out │https://www.signal.org│',
|
||||||
|
bodyRanges
|
||||||
|
),
|
||||||
|
});
|
||||||
|
|
||||||
|
return <AtMentionify {...props} />;
|
||||||
|
}
|
||||||
|
|
|
@ -332,7 +332,7 @@ export class Linkify extends React.Component<Props> {
|
||||||
const { text, renderNonLink = defaultRenderNonLink } = this.props;
|
const { text, renderNonLink = defaultRenderNonLink } = this.props;
|
||||||
|
|
||||||
if (!shouldLinkifyMessage(text)) {
|
if (!shouldLinkifyMessage(text)) {
|
||||||
return text;
|
return renderNonLink({ text, key: 1 });
|
||||||
}
|
}
|
||||||
|
|
||||||
const chunkData: Array<{
|
const chunkData: Array<{
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue