feat: #1123 render text editor instead of text area submit app

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`] = `"<div class=\\"pell undefined pell-container\\"><div class=\\"pell-actionbar\\"><button class=\\"pell-button\\" title=\\"Bold\\" type=\\"button\\"><b>B</b></button><button class=\\"pell-button\\" title=\\"Italic\\" type=\\"button\\"><i>I</i></button><button class=\\"pell-button\\" title=\\"Underline\\" type=\\"button\\"><u>U</u></button><button class=\\"pell-button\\" title=\\"Strike-through\\" type=\\"button\\"><strike>S</strike></button><button class=\\"pell-button\\" title=\\"Heading 1\\" type=\\"button\\"><b>H<sub>1</sub></b></button><button class=\\"pell-button\\" title=\\"Heading 2\\" type=\\"button\\"><b>H<sub>2</sub></b></button><button class=\\"pell-button\\" title=\\"Paragraph\\" type=\\"button\\">¶</button><button class=\\"pell-button\\" title=\\"Quote\\" type=\\"button\\">“ ”</button><button class=\\"pell-button\\" title=\\"Ordered List\\" type=\\"button\\">#</button><button class=\\"pell-button\\" title=\\"Unordered List\\" type=\\"button\\">•</button><button class=\\"pell-button\\" title=\\"Code\\" type=\\"button\\">&lt;/&gt;</button><button class=\\"pell-button\\" title=\\"Horizontal Line\\" type=\\"button\\">―</button><button class=\\"pell-button\\" title=\\"Link\\" type=\\"button\\">🔗</button></div><div class=\\"pell-content\\"><b>Editor</b></div></div>"`;
+exports[`Editor should match a snapshot 1`] = `"<div data-test=\\"\\" class=\\"pell undefined pell-container\\"><div class=\\"pell-actionbar\\"><button class=\\"pell-button\\" title=\\"Bold\\" type=\\"button\\"><b>B</b></button><button class=\\"pell-button\\" title=\\"Italic\\" type=\\"button\\"><i>I</i></button><button class=\\"pell-button\\" title=\\"Underline\\" type=\\"button\\"><u>U</u></button><button class=\\"pell-button\\" title=\\"Strike-through\\" type=\\"button\\"><strike>S</strike></button><button class=\\"pell-button\\" title=\\"Heading 1\\" type=\\"button\\"><b>H<sub>1</sub></b></button><button class=\\"pell-button\\" title=\\"Heading 2\\" type=\\"button\\"><b>H<sub>2</sub></b></button><button class=\\"pell-button\\" title=\\"Paragraph\\" type=\\"button\\">¶</button><button class=\\"pell-button\\" title=\\"Quote\\" type=\\"button\\">“ ”</button><button class=\\"pell-button\\" title=\\"Ordered List\\" type=\\"button\\">#</button><button class=\\"pell-button\\" title=\\"Unordered List\\" type=\\"button\\">•</button><button class=\\"pell-button\\" title=\\"Code\\" type=\\"button\\">&lt;/&gt;</button><button class=\\"pell-button\\" title=\\"Horizontal Line\\" type=\\"button\\">―</button><button class=\\"pell-button\\" title=\\"Link\\" type=\\"button\\">🔗</button></div><div class=\\"pell-content\\"><b>Editor</b></div></div>"`;

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<string>
+  actions?: Array<string | object>
+  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<HTMLDivElement>(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 <div ref={containerEl} className={`pell ${hasError && 'pell--is-danger'} ${containerClass}`} />
+  return (
+    <div ref={containerEl} data-test={dataTest} className={`pell ${hasError && 'pell--is-danger'} ${containerClass}`} />
+  )
 }

packages/elements/src/components/TextAreaEditor/__tests__/index.tsx

@@ -21,9 +21,9 @@ describe('TextAreaEditor', () => {
       name: '123',
       value: '1',
     } as FieldInputProps<string>
-    const fn = handleTextAreaOnChange({ field: mockField, name: '' })
+    const fn = handleTextAreaOnChange({ field: mockField })
     fn('<div></div>')
-    expect(mockField.onChange).toBeCalledWith({ target: { value: '<div></div>', name: '' } })
+    expect(mockField.onChange).toBeCalledWith({ target: { value: '<div></div>', name: '123' } })
   })
   describe('renderTextAreaEditor', () => {
     it('should match snapshot', () => {

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<string>
-  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<string>) => {
+export const renderTextAreaEditor = ({ labelText, id, placeholder, ...restProps }) => ({
+  field,
+  meta,
+}: FieldProps<string>) => {
   const hasError = checkError(meta)
   return (
     <div className="field pb-2">
@@ -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}
         />
       </div>
       {hasError && (
@@ -43,6 +47,6 @@ export const renderTextAreaEditor = ({ labelText, id, placeholder }) => ({ field
   )
 }
 
-export const TextAreaEditor = ({ name, labelText, placeholder, id }: TextAreaEditorProps) => (
-  <Field name={name}>{renderTextAreaEditor({ labelText, id, placeholder })}</Field>
+export const TextAreaEditor = ({ name, labelText, placeholder, id, ...restProps }: TextAreaEditorProps) => (
+  <Field name={name}>{renderTextAreaEditor({ labelText, id, placeholder, ...restProps })}</Field>
 )