interface: rich text in indigo-react
-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',
@@ -25,16 +27,19 @@ const RichText = React.memo(({remoteContentPolicy, ...props}) => (
if (hasProvider(props.href)) {
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 }
- ]]} />
+ ]]}
+ />
));
+RichText.displayName = 'RichText';
+
export default RichText;
