filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-12-24 01:23:08 +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

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

@ -50,32 +50,19 @@ const onDeepLink = async (object) => {
return window.open(slug);
};
const ProcessedLink = ({href, children, dark}) => {
}
const Link = ({href, children, dark}) => {
return <a css={dark ? STYLES_LINK_DARK: STYLES_LINK} href={href} target="_blank" rel="nofollow">
{children}
</a>
}
export const ProcessedText = ({ text, dark }) => {
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(
const LinkMention = () => {
replacedText = StringReplace(
replacedText,
/@(\w*[0-9a-zA-Z-_]+\w*[0-9a-zA-Z-_])/g,
(match, i) => (
@ -89,8 +76,10 @@ export const ProcessedText = ({ text, dark }) => {
</a>
)
);
}
//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,
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,
replacedText = StringReplace(
replacedText,
/#(\w*[0-9a-zA-Z-_]+\/\w*[0-9a-zA-Z-_]+)/g,
@ -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>;
};