From e503f3a3a269e9006b676f32028ffb41cfe1bc6b Mon Sep 17 00:00:00 2001 From: Pham Hai Duong Date: Tue, 5 May 2020 20:55:29 +0700 Subject: [PATCH] feat: #1123 render text editor instead of text area submit app (#1151) feat: #1123 render text editor instead of text area submit app (#1151) --- .../__tests__/__snapshots__/index.tsx.snap | 2 +- .../elements/src/components/Editor/index.tsx | 15 ++++++++----- .../TextAreaEditor/__tests__/index.tsx | 4 ++-- .../src/components/TextAreaEditor/index.tsx | 22 +++++++++++-------- .../components/pages/developer-submit-app.tsx | 19 ++++++++++++++-- 5 files changed, 43 insertions(+), 19 deletions(-) diff --git a/packages/elements/src/components/Editor/__tests__/__snapshots__/index.tsx.snap b/packages/elements/src/components/Editor/__tests__/__snapshots__/index.tsx.snap index 5a7ce5be24..1106ea5cdf 100644 --- a/packages/elements/src/components/Editor/__tests__/__snapshots__/index.tsx.snap +++ b/packages/elements/src/components/Editor/__tests__/__snapshots__/index.tsx.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Editor should match a snapshot 1`] = `"
Editor
"`; +exports[`Editor should match a snapshot 1`] = `"
Editor
"`; diff --git a/packages/elements/src/components/Editor/index.tsx b/packages/elements/src/components/Editor/index.tsx index 8cc7c3975f..8e56784bf4 100644 --- a/packages/elements/src/components/Editor/index.tsx +++ b/packages/elements/src/components/Editor/index.tsx @@ -1,6 +1,6 @@ import * as React from 'react' // @ts-ignore: no available type definition -import pell from 'pell' +import { init } from 'pell' export interface EditorProps { onChange?: (html: string) => void @@ -11,7 +11,8 @@ export interface EditorProps { actionbarClass?: string buttonClass?: string contentClass?: string - actions?: Array + actions?: Array + dataTest?: string } const defaultActions = [ @@ -40,15 +41,17 @@ export const Editor = ({ actionbarClass = 'pell-actionbar', buttonClass = 'pell-button', contentClass = 'pell-content', + dataTest = '', }: EditorProps) => { const containerEl = React.useRef(null) React.useEffect(() => { - pell.init({ + init({ element: containerEl.current, onChange: (html: string) => onChange && onChange(html), styleWithCSS: false, - actions, + defaultParagraphSeparator: 'div', + actions: actions, classes: { actionbar: actionbarClass, button: buttonClass, @@ -72,5 +75,7 @@ export const Editor = ({ } }, [defaultContent]) - return
+ return ( +
+ ) } diff --git a/packages/elements/src/components/TextAreaEditor/__tests__/index.tsx b/packages/elements/src/components/TextAreaEditor/__tests__/index.tsx index 4ee6a886a6..444955f883 100644 --- a/packages/elements/src/components/TextAreaEditor/__tests__/index.tsx +++ b/packages/elements/src/components/TextAreaEditor/__tests__/index.tsx @@ -21,9 +21,9 @@ describe('TextAreaEditor', () => { name: '123', value: '1', } as FieldInputProps - const fn = handleTextAreaOnChange({ field: mockField, name: '' }) + const fn = handleTextAreaOnChange({ field: mockField }) fn('
') - expect(mockField.onChange).toBeCalledWith({ target: { value: '
', name: '' } }) + expect(mockField.onChange).toBeCalledWith({ target: { value: '
', name: '123' } }) }) describe('renderTextAreaEditor', () => { it('should match snapshot', () => { diff --git a/packages/elements/src/components/TextAreaEditor/index.tsx b/packages/elements/src/components/TextAreaEditor/index.tsx index ef36e5772c..fb624d1179 100644 --- a/packages/elements/src/components/TextAreaEditor/index.tsx +++ b/packages/elements/src/components/TextAreaEditor/index.tsx @@ -1,25 +1,28 @@ import * as React from 'react' import { Field, FieldInputProps, FieldProps } from 'formik' import { checkError } from '../../utils/form' -import { Editor } from '../Editor' +import { Editor, EditorProps } from '../Editor' -export interface TextAreaEditorProps { +export interface TextAreaEditorProps extends EditorProps { placeholder?: string id: string labelText: string name: string + dataTest?: string } export type HandleTextAreaOnChangeParams = { field: FieldInputProps - name: string } -export const handleTextAreaOnChange = ({ field, name }: HandleTextAreaOnChangeParams) => (html: string) => { - field.onChange({ target: { value: html, name } }) +export const handleTextAreaOnChange = ({ field }: HandleTextAreaOnChangeParams) => (html: string) => { + field.onChange({ target: { value: html, name: field.name } }) } -export const renderTextAreaEditor = ({ labelText, id, placeholder }) => ({ field, meta }: FieldProps) => { +export const renderTextAreaEditor = ({ labelText, id, placeholder, ...restProps }) => ({ + field, + meta, +}: FieldProps) => { const hasError = checkError(meta) return (
@@ -31,7 +34,8 @@ export const renderTextAreaEditor = ({ labelText, id, placeholder }) => ({ field hasError={hasError} placeholder={placeholder} defaultContent={field.value} - onChange={handleTextAreaOnChange({ field, name })} + onChange={handleTextAreaOnChange({ field })} + {...restProps} />
{hasError && ( @@ -43,6 +47,6 @@ export const renderTextAreaEditor = ({ labelText, id, placeholder }) => ({ field ) } -export const TextAreaEditor = ({ name, labelText, placeholder, id }: TextAreaEditorProps) => ( - {renderTextAreaEditor({ labelText, id, placeholder })} +export const TextAreaEditor = ({ name, labelText, placeholder, id, ...restProps }: TextAreaEditorProps) => ( + {renderTextAreaEditor({ labelText, id, placeholder, ...restProps })} ) diff --git a/packages/marketplace/src/components/pages/developer-submit-app.tsx b/packages/marketplace/src/components/pages/developer-submit-app.tsx index 6fd1ba0315..e0cde0833c 100644 --- a/packages/marketplace/src/components/pages/developer-submit-app.tsx +++ b/packages/marketplace/src/components/pages/developer-submit-app.tsx @@ -1,9 +1,11 @@ import * as React from 'react' +import { exec } from 'pell' import { withRouter, RouteComponentProps } from 'react-router' import { ReduxState, FormState } from '@/types/core' import { Input, ImageInput, + TextAreaEditor, TextArea, Button, Checkbox, @@ -268,7 +270,6 @@ export const handleSubmitApp = ({ signoutUris: signoutUris ? signoutUris.split(',') : [], } } - if (appModel.isPrivateApp === 'yes') { appToSubmit.limitToClientIds = limitToClientIds ? limitToClientIds.replace(/ /g, '').split(',') : [] } @@ -546,8 +547,22 @@ export const SubmitApp: React.FC = ({ /> -