ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2024-12-14 17:41:33 +03:00
Code Issues Packages Projects Releases Wiki Activity

interface: rich text in indigo-react

Browse Source
This commit is contained in:
Matilde Park 2020-10-02 17:54:16 -04:00
parent 5847ccc32e
commit 6b98997ab2
1 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
pkg/interface/src/views/components/RichText.js
View File

@ -1,9 +1,11 @@
import React from "react";
import RemoteContent from "~/views/components/RemoteContent";
import React from 'react';
import RemoteContent from '~/views/components/RemoteContent';
import { hasProvider } from 'oembed-parser';
import ReactMarkdown from 'react-markdown';
import RemarkDisableTokenizers from 'remark-disable-tokenizers';
import { BaseAnchor, Text } from '@tlon/indigo-react';
const DISABLED_BLOCK_TOKENS = [
'indentedCode',
'atxHeading',
@ -17,24 +19,27 @@ const DISABLED_BLOCK_TOKENS = [
const DISABLED_INLINE_TOKENS = [];
const RichText = React.memo(({remoteContentPolicy, ...props}) => (
const RichText = React.memo(({ remoteContentPolicy, ...props }) => (
<ReactMarkdown
{...props}
renderers={{
link: (props) => {
if (hasProvider(props.href)) {
return <RemoteContent className="mw-100" url={props.href} remoteContentPolicy={remoteContentPolicy}/>;
return <RemoteContent className="mw-100" url={props.href} remoteContentPolicy={remoteContentPolicy} />;
}
return <a {...props} className="bb b--white-d b--black">{props.children}</a>
return <BaseAnchor target='_blank' rel='noreferrer noopener' borderBottom='1px solid' {...props}>{props.children}</BaseAnchor>;
},
paragraph: (props) => {
return <p {...props} className="mb2 lh-copy">{props.children}</p>
return <Text display='block' mb='2' {...props}>{props.children}</Text>;
}
}}
plugins={[[
RemarkDisableTokenizers,
{ block: DISABLED_BLOCK_TOKENS, inline: DISABLED_INLINE_TOKENS }
]]} />
]]}
/>
));
export default RichText;
RichText.displayName = 'RichText';
export default RichText;