32 lines
1.1 KiB
JavaScript
32 lines
1.1 KiB
JavaScript
import React from 'react'
|
|
import { Highlight } from '@freesewing/react/components/Highlight'
|
|
import hljs from 'highlight.js/lib/common'
|
|
import yaml from 'js-yaml'
|
|
|
|
/**
|
|
* A component to code-highlight YAML data
|
|
*
|
|
* @component
|
|
* @param {object} props - All component props
|
|
* @param {JSX.Element} props.children - Use this if you are not using props.json or props.js to pass the YAML data
|
|
* @param {object} [props.js = undefined] - Use this to pass the YAML data as Javascript Object
|
|
* @param {string} [props.json = undefined] - Use this to pass the YAML data as JSON
|
|
* @param {bool} [props.noCopy = false] - Set this to true to not add the copy to clipboard button
|
|
* @param {string} [props.title = "YAML"] - Title for the highlight
|
|
* @returns {JSX.Element}
|
|
*/
|
|
export const Yaml = (props) => {
|
|
let code
|
|
if (props.json) code = yaml.dump(JSON.parse(props.json))
|
|
else if (props.js) code = yaml.dump(props.js)
|
|
else code = props.children
|
|
|
|
return (
|
|
<Highlight
|
|
language="yaml"
|
|
{...props}
|
|
raw={hljs.highlight(code, { language: 'yaml' }).value}
|
|
copy={code}
|
|
/>
|
|
)
|
|
}
|