From f617f94f0f13bc1772ad5abda848bfc58ddde607 Mon Sep 17 00:00:00 2001 From: Michael Schramm Date: Thu, 11 Jun 2020 08:22:57 +0200 Subject: [PATCH] add markdown support for paragraph and field description --- CHANGELOG.md | 1 + components/form/admin/end.page.tab.tsx | 6 +- components/form/admin/field.card.tsx | 1 + components/form/admin/start.page.tab.tsx | 6 +- components/form/field.tsx | 6 +- components/form/page.tsx | 6 +- components/styled/markdown.tsx | 63 ++++++ locales/en/form.json | 3 + locales/en/type.json | 1 + package.json | 1 + pages/admin/index.tsx | 6 +- yarn.lock | 266 ++++++++++++++++++++++- 12 files changed, 345 insertions(+), 21 deletions(-) create mode 100644 components/styled/markdown.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 7d4fac2..763eb29 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/). ### Added - mobile improvements for lists and home page +- markdown support for page paragraphs and field description ### Changed ### Fixed diff --git a/components/form/admin/end.page.tab.tsx b/components/form/admin/end.page.tab.tsx index 820a51f..70393ca 100644 --- a/components/form/admin/end.page.tab.tsx +++ b/components/form/admin/end.page.tab.tsx @@ -22,7 +22,11 @@ export const EndPageTab: React.FC = (props) => { - + diff --git a/components/form/admin/field.card.tsx b/components/form/admin/field.card.tsx index be5c2c3..b961773 100644 --- a/components/form/admin/field.card.tsx +++ b/components/form/admin/field.card.tsx @@ -87,6 +87,7 @@ export const FieldCard: React.FC = (props) => { label={t('type:description')} name={[field.name as string, 'description']} labelCol={{ span: 6 }} + extra={t('type:descriptionInfo')} > diff --git a/components/form/admin/start.page.tab.tsx b/components/form/admin/start.page.tab.tsx index e79ca09..a0cdc26 100644 --- a/components/form/admin/start.page.tab.tsx +++ b/components/form/admin/start.page.tab.tsx @@ -22,7 +22,11 @@ export const StartPageTab: React.FC = (props) => { - + diff --git a/components/form/field.tsx b/components/form/field.tsx index 7bf4ebe..19f6f30 100644 --- a/components/form/field.tsx +++ b/components/form/field.tsx @@ -4,7 +4,7 @@ import React from 'react' import { FormDesignFragment, FormFieldFragment } from '../../graphql/fragment/form.fragment' import { StyledButton } from '../styled/button' import { StyledH1 } from '../styled/h1' -import { StyledP } from '../styled/p' +import { StyledMarkdown } from '../styled/markdown' import { fieldTypes } from './types' import { TextType } from './types/text.type' import { FieldTypeProps } from './types/type.props' @@ -58,9 +58,7 @@ export const Field: React.FC = ({ field, save, design, next, prev, ...pro {field.title} {field.description && ( - - {field.description} - + )} diff --git a/components/form/page.tsx b/components/form/page.tsx index b577179..0f045b6 100644 --- a/components/form/page.tsx +++ b/components/form/page.tsx @@ -3,7 +3,7 @@ import React from 'react' import { FormDesignFragment, FormPageFragment } from '../../graphql/fragment/form.fragment' import { StyledButton } from '../styled/button' import { StyledH1 } from '../styled/h1' -import { StyledP } from '../styled/p' +import { StyledMarkdown } from '../styled/markdown' interface Props { type: 'start' | 'end' @@ -39,9 +39,7 @@ export const FormPage: React.FC = ({ page, design, next, prev, ...props } {page.title} - - {page.paragraph} - +
+ props.type === 'question' ? props.design.colors.questionColor : props.design.colors.answerColor + +// eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-assignment +const Markdown = styled(ReactMarkdown)` + color: ${getColor}; + + h1, + h2, + h3, + h4, + h5, + h6, + p, + span, + div { + color: ${getColor}; + } + + blockquote { + color: ${(props: Props) => lighten(getColor(props), 50)}; + padding-left: 20px; + border-left: 10px rgba(0, 0, 0, 0.05) solid; + } + + table { + border-collapse: collapse; + border-spacing: 0; + + tr { + border-top: 1px solid ${getColor}; + + th, + td { + padding: 6px 13px; + border: 1px solid ${getColor}; + } + } + + tr:nth-child(2n) { + background: rgba(0, 0, 0, 0.05); + } + } +` + +export const StyledMarkdown: React.FC = ({ children, ...props }) => { + return ( + + {children} + + ) +} diff --git a/locales/en/form.json b/locales/en/form.json index 1b78bdc..e74cdb8 100644 --- a/locales/en/form.json +++ b/locales/en/form.json @@ -34,12 +34,14 @@ "color": "Color", "continueButtonText": "Continue Button Text", "paragraph": "Paragraph", + "paragraphInfo": "Use markdown for advanced formatting", "show": "Show", "text": "Text", "title": "Title", "url": "Url" }, "endPageTab": "End Page", + "fieldsTab": "Form Fields", "loading": "Loading Form", "mange": "Edit Form \"{{title}}\"", "new": "New Form", @@ -84,6 +86,7 @@ "color": "Color", "continueButtonText": "Continue Button Text", "paragraph": "Paragraph", + "paragraphInfo": "Use markdown for advanced formatting", "show": "Show", "text": "Text", "title": "Title", diff --git a/locales/en/type.json b/locales/en/type.json index 47d1cf8..cc58f98 100644 --- a/locales/en/type.json +++ b/locales/en/type.json @@ -8,6 +8,7 @@ }, "deleteNow": "Delete Field", "description": "Description", + "descriptionInfo": "Use markdown for advanced formatting", "dropdown": { "addOption": "Add Option", "default": "Default Value", diff --git a/package.json b/package.json index 37f26dd..90bc20d 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "react-i18next": "^11.5.0", "react-icons": "^3.10.0", "react-id-swiper": "^3.0.0", + "react-markdown": "^4.3.1", "react-redux": "^7.2.0", "redux": "^4.0.5", "redux-devtools-extension": "^2.13.8", diff --git a/pages/admin/index.tsx b/pages/admin/index.tsx index cf93961..3eca408 100644 --- a/pages/admin/index.tsx +++ b/pages/admin/index.tsx @@ -20,15 +20,15 @@ const Index: NextPage = () => { return ( - + - + - +