filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-12-25 10:05:02 +03:00
Code Issues Packages Projects Releases Wiki Activity

refactor Typography to include Markdown processing

Browse Source
This commit is contained in:
Chris Waring 2020-11-19 15:27:58 +00:00
parent 2576ef12b4
commit 01a6dd2f1a
No known key found for this signature in database
GPG Key ID: 4D2E767CC8B1C083
1 changed files with 25 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
components/system/components/Typography.js
View File

@ -50,31 +50,18 @@ const onDeepLink = async (object) => {
return window.open(slug); return window.open(slug);
}; };
const ProcessedLink = ({href, children, dark}) => {
}
const Link = ({href, children, dark}) => { const Link = ({href, children, dark}) => {
return <a css={dark ? STYLES_LINK_DARK: STYLES_LINK} href={href} target="_blank" rel="nofollow"> return <a css={dark ? STYLES_LINK_DARK: STYLES_LINK} href={href} target="_blank" rel="nofollow">
{children} {children}
</a> </a>
} }
export const ProcessedText = ({ text, dark }) => { const LinkMention = () => {
let replacedText;
const remarkReactComponents = {
a: (props) => dark ? <Link dark {...props} /> : <Link {...props} />,
h1: function (props) {
return React.createElement('h2', props)
}
};
console.log('gekki', remarkReactComponents)
return <Markdown body={text} options={{remarkReactComponents}} />
replacedText = StringReplace(text, /(https?:\/\/\S+)/g, (match, i) => (
<a css={dark ? STYLES_LINK_DARK : STYLES_LINK} key={match + i} href={match} target="_blank">
{match}
</a>
));
replacedText = StringReplace( replacedText = StringReplace(
replacedText, replacedText,
/@(\w*[0-9a-zA-Z-_]+\w*[0-9a-zA-Z-_])/g, /@(\w*[0-9a-zA-Z-_]+\w*[0-9a-zA-Z-_])/g,
@ -89,7 +76,9 @@ export const ProcessedText = ({ text, dark }) => {
</a> </a>
) )
); );
}
const LinkHash = () => {
//NOTE(martina): previous regex: /#(\w*[0-9a-zA-Z-_]+\w*[0-9a-zA-Z-_])\/(\w*[0-9a-zA-Z-_]+\w*[0-9a-zA-Z-_])/g, //NOTE(martina): previous regex: /#(\w*[0-9a-zA-Z-_]+\w*[0-9a-zA-Z-_])\/(\w*[0-9a-zA-Z-_]+\w*[0-9a-zA-Z-_])/g,
replacedText = StringReplace( replacedText = StringReplace(
replacedText, replacedText,
@ -107,6 +96,21 @@ export const ProcessedText = ({ text, dark }) => {
); );
} }
); );
}
export const ProcessedText = ({ text, dark }) => {
let replacedText;
const remarkReactComponents = {
a: (props) => dark ? <Link dark {...props} /> : <Link {...props} />,
};
return <Markdown md={text} options={{remarkReactComponents}} />
// replacedText = StringReplace(text, /(https?:\/\/\S+)/g, (match, i) => (
// <a css={dark ? STYLES_LINK_DARK : STYLES_LINK} key={match + i} href={match} target="_blank">
// {match}
// </a>
// ));
return <React.Fragment>{replacedText}</React.Fragment>; return <React.Fragment>{replacedText}</React.Fragment>;
}; };