54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import { useMarkdownMetaData } from 'src/helpers/hooks/useMarkdownMetaData'
|
|
import Editor from 'rich-markdown-editor'
|
|
import { useRef } from 'react'
|
|
import KeyValue from 'src/components/KeyValue/KeyValue'
|
|
|
|
export default function EditorGuide({ content }) {
|
|
const [rawMetadata, metadata] = useMarkdownMetaData(content)
|
|
|
|
const processedContent = rawMetadata
|
|
? content.replace(rawMetadata[0], '')
|
|
: content
|
|
const ref = useRef(null)
|
|
|
|
return (
|
|
<div className="markdown-overrides py-6 px-8">
|
|
{metadata && (
|
|
<>
|
|
<h1 className="my-4">{metadata.title}</h1>
|
|
<section className="grid grid-cols-3 my-6 gap-y-4">
|
|
{Object.entries(metadata)
|
|
.filter(([key]) => key !== 'title')
|
|
.map(([key, value], i) => (
|
|
<KeyValue keyName={key.replace(/"/g, '')} key={key + '-' + i}>
|
|
<LinkOrParagraph>{value}</LinkOrParagraph>
|
|
</KeyValue>
|
|
))}
|
|
</section>
|
|
</>
|
|
)}
|
|
<Editor
|
|
ref={ref}
|
|
readOnly={true}
|
|
defaultValue={processedContent}
|
|
value={processedContent}
|
|
onChange={() => {}}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function LinkOrParagraph({ children }) {
|
|
const markdownUrlExpression =
|
|
/\[(.*)\]\((https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})\)/i
|
|
const matches = children.match(markdownUrlExpression)
|
|
|
|
return matches === null ? (
|
|
<p>{children}</p>
|
|
) : (
|
|
<a href={matches[2]} rel="noopener noreferrer" target="_blank">
|
|
{matches[1]}
|
|
</a>
|
|
)
|
|
}
|