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>); }