From 7e187732454df785931d0efd24a1a238f29716d3 Mon Sep 17 00:00:00 2001 From: Marc Teichtahl Date: Fri, 26 Feb 2021 15:01:04 +1100 Subject: [PATCH 1/6] chore: initial commit --- .../components/MarkdownEditor/index.tsx | 69 +++++++++++++++++++ src/components/FormRenderer/index.stories.tsx | 19 ++++- src/components/FormRenderer/index.tsx | 2 + src/components/FormRenderer/types.ts | 1 + 4 files changed, 90 insertions(+), 1 deletion(-) create mode 100644 src/components/FormRenderer/components/MarkdownEditor/index.tsx diff --git a/src/components/FormRenderer/components/MarkdownEditor/index.tsx b/src/components/FormRenderer/components/MarkdownEditor/index.tsx new file mode 100644 index 00000000..8740616e --- /dev/null +++ b/src/components/FormRenderer/components/MarkdownEditor/index.tsx @@ -0,0 +1,69 @@ +/** ******************************************************************************************************************* + Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. + + Licensed under the Apache License, Version 2.0 (the "License"). + You may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. * + ******************************************************************************************************************** */ +import React, { FunctionComponent } from 'react'; +import useFieldApi from '@data-driven-forms/react-form-renderer/dist/cjs/use-field-api'; +import useFormApi from '@data-driven-forms/react-form-renderer/dist/cjs/use-form-api'; +import { v4 as uuidv4 } from 'uuid'; +import FormField from '../../../FormField'; +import Input from '../../../Input'; + +const MarkdownEditorMapping: FunctionComponent = (props: any) => { + const { + label, + description, + helperText, + isRequired, + isDisabled, + isReadOnly, + placeholder, + input, + validateOnMount, + stretch, + showError, + secondaryControl, + meta: { error, submitFailed }, + ...rest + } = useFieldApi(props); + + const { getState } = useFormApi(); + const controlId = input.name || uuidv4(); + const errorText = ((validateOnMount || submitFailed || showError) && error) || ''; + + return ( + + + + ) +}; + +export default MarkdownEditorMapping; diff --git a/src/components/FormRenderer/index.stories.tsx b/src/components/FormRenderer/index.stories.tsx index bf3d1fee..2d79db2d 100644 --- a/src/components/FormRenderer/index.stories.tsx +++ b/src/components/FormRenderer/index.stories.tsx @@ -186,7 +186,7 @@ const baseSchema = { }, ], renderReload: true, - onReloadClick: () => {}, + onReloadClick: () => { }, createNewLink: 'Create new option', createNewLinkHref: '/options/create', }, @@ -1114,3 +1114,20 @@ export const FileUploader = () => { return ; }; + + +export const SimpleMarkdownEditor = ({ name, input, onChange }) => { + const schema = { + fields: [ + { + component: componentTypes.MARKDOWN_EDITOR, + name: 'text', + label: 'This is a markdown editor' + } + ], + header: 'Markdown Editor', + description: 'Create markdown' + }; + + return ; +}; diff --git a/src/components/FormRenderer/index.tsx b/src/components/FormRenderer/index.tsx index b0513756..869f35f7 100644 --- a/src/components/FormRenderer/index.tsx +++ b/src/components/FormRenderer/index.tsx @@ -32,6 +32,7 @@ import TextField from './components/TextField'; import TimePicker from './components/TimePicker'; import TreeView from './components/TreeView'; import Wizard from './components/Wizard'; +import MarkdownEditor from './components/MarkdownEditor' import { componentTypes } from './types'; const componentMapper = { @@ -51,6 +52,7 @@ const componentMapper = { [componentTypes.TABLE]: Table, [componentTypes.REVIEW]: Review, [componentTypes.CUSTOM]: Custom, + [componentTypes.MARKDOWN_EDITOR]: MarkdownEditor }; export interface FormRendererProps { diff --git a/src/components/FormRenderer/types.ts b/src/components/FormRenderer/types.ts index ad3110e9..fce59a62 100644 --- a/src/components/FormRenderer/types.ts +++ b/src/components/FormRenderer/types.ts @@ -27,5 +27,6 @@ export const componentTypes = { EXPANDABLE_SECTION: 'EXPANDABLE_SECTION', TABLE: 'TABLE', REVIEW: 'REVIEW', + MARKDOWN_EDITOR: 'MARKDOWN_EDITOR', CUSTOM: 'CUSTOM', }; From 490634bac47df4c0c8c4d51a259c44f9ca518db9 Mon Sep 17 00:00:00 2001 From: Marc Teichtahl Date: Mon, 1 Mar 2021 10:39:49 +1100 Subject: [PATCH 2/6] chore: markdown editor --- .../components/MarkdownEditor/index.tsx | 54 +++++++++++++------ src/components/FormRenderer/index.stories.tsx | 16 ++++-- src/components/FormRenderer/index.tsx | 4 +- 3 files changed, 51 insertions(+), 23 deletions(-) diff --git a/src/components/FormRenderer/components/MarkdownEditor/index.tsx b/src/components/FormRenderer/components/MarkdownEditor/index.tsx index 8740616e..201be392 100644 --- a/src/components/FormRenderer/components/MarkdownEditor/index.tsx +++ b/src/components/FormRenderer/components/MarkdownEditor/index.tsx @@ -13,12 +13,17 @@ See the License for the specific language governing permissions and limitations under the License. * ******************************************************************************************************************** */ -import React, { FunctionComponent } from 'react'; -import useFieldApi from '@data-driven-forms/react-form-renderer/dist/cjs/use-field-api'; -import useFormApi from '@data-driven-forms/react-form-renderer/dist/cjs/use-form-api'; +import React, { FunctionComponent, useState, setState } from 'react'; +import { useFormApi, useFieldApi } from '@data-driven-forms/react-form-renderer'; import { v4 as uuidv4 } from 'uuid'; import FormField from '../../../FormField'; import Input from '../../../Input'; +import MarkdownViewer from '../../../MarkdownViewer'; +import Inline from '../../../../layouts/Inline' +import Textarea, { TextareaProps } from '../../../Textarea'; +import Container from '../../../../layouts/Container'; +import Grid from '../../../../layouts/Grid'; + const MarkdownEditorMapping: FunctionComponent = (props: any) => { const { @@ -29,19 +34,26 @@ const MarkdownEditorMapping: FunctionComponent = (props: any) => { isDisabled, isReadOnly, placeholder, - input, validateOnMount, + input, + rows, stretch, showError, secondaryControl, + value, meta: { error, submitFailed }, - ...rest } = useFieldApi(props); const { getState } = useFormApi(); + const [content, setContent] = useState(value || placeholder) const controlId = input.name || uuidv4(); const errorText = ((validateOnMount || submitFailed || showError) && error) || ''; + const updateState = (e: any) => { + e.persist(); + setContent(e.target.value); + } + return ( { stretch={stretch} secondaryControl={secondaryControl} > - + + +