Markdown Tastic

Tastic name:

Markdown

Page type:

All pages

Example image:

Markdown Tastic

Schema.json:

{
    "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" }
                    ]
                }
            ]
        }
    ]
}

Tastic.jsx:

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)

Still need help? Contact us Contact us