Frontastic component name

Markdown

Page type

Can be used on all pages

Example image

Code samples

{
    "tasticType": "frontastic/content/markdown",
    "name": "Markdown",
    "category": "Content",
    "icon": "wrap_text",
    "schema": [
        {
            "name": "Content",
            "fields": [
                {
                    "label": "Content",
                    "field": "text",
                    "type": "markdown",
                    "default": "* Enter\n* some\n* Markdown",
                    "translatable": true
                },
                {
                    "label": "Alignment",
                    "field": "align",
                    "type": "enum",
                    "default": "left",
                    "values": [
                        { "value": "left", "name": "Left" },
                        { "value": "center", "name": "Center" },
                        { "value": "right", "name": "Right" },
                        { "value": "justify", "name": "Justify" }
                    ]
                },
                {
                    "label": "Padding",
                    "field": "padding",
                    "type": "enum",
                    "default": "none",
                    "values": [
                        { "value": "none", "name": "No Padding" },
                        { "value": "small", "name": "Small" },
                        { "value": "middle", "name": "Middle" },
                        { "value": "large", "name": "Large" }
                    ]
                }
            ]
        }
    ]
}
import React from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'

import tastify from '@frontastic/catwalk/src/js/helper/tastify'
import Markdown from '@frontastic/catwalk/src/js/component/markdown'

const MarkdownTastic = ({ data }) => {
    return (
        <Markdown
            text={data.text}
            className={classnames(
                'markdown-text',
                'markdown-position--align-' + data.align,
                'markdown-position--padding-' + data.padding
            )}
        />
    )
}

MarkdownTastic.propTypes = {
    data: PropTypes.object.isRequired,
}

MarkdownTastic.defaultProps = {}

export default tastify({ translate: true })(MarkdownTastic)

Did this page help you?