editor: allow leading and trailing fields to wrap

contember · Feb 14, 2022 · 487d99e · 487d99e
1 parent 0a0d0e5
commit 487d99e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/packages/admin/src/components/bindingFacade/fields/TextField.tsx b/packages/admin/src/components/bindingFacade/fields/TextField.tsx
@@ -2,18 +2,25 @@ import { TextInput, TextInputProps } from '@contember/ui'
 import { SimpleRelativeSingleField, SimpleRelativeSingleFieldProps } from '../auxiliary'
 import { stringFieldParser, useTextInput } from './useTextInput'
 
-export type TextFieldProps = SimpleRelativeSingleFieldProps &
-	Omit<TextInputProps, 'value' | 'onChange' | 'validationState'>
+export type TextFieldProps =
+	& SimpleRelativeSingleFieldProps
+	& Omit<TextInputProps, 'value' | 'onChange' | 'validationState'>
+	& {
+		wrapLines?: boolean
+	}
+
+const removeNewLines = (text: string) => text.replace(/[\r\n]/g, '')
 
 export const TextField = SimpleRelativeSingleField<TextFieldProps, string>(
-	(fieldMetadata, { defaultValue, name, label, onBlur, ...props }) => {
+	(fieldMetadata, { defaultValue, name, label, onBlur, wrapLines = false, allowNewlines = false, ...props }) => {
 		const inputProps = useTextInput({
 			fieldMetadata,
 			onBlur,
-			parse: stringFieldParser,
+			parse: wrapLines && !allowNewlines ? removeNewLines : stringFieldParser,
 		})
 		return (
 			<TextInput
+				allowNewlines={allowNewlines || wrapLines}
 				{...inputProps}
 				{...(props as any)} // This is VERY wrong.
 			/>

diff --git a/packages/admin/src/components/bindingFacade/richText/blockEditor/BlockEditor.tsx b/packages/admin/src/components/bindingFacade/richText/blockEditor/BlockEditor.tsx
@@ -299,7 +299,6 @@ export const BlockEditor = Object.assign<
 	ContentOutlet,
 })
 
-
 const useFieldBackedElementFields = (elements: FieldBackedElement[]) => {
 	return <>
 		{elements.map(el => {
@@ -309,7 +308,7 @@ const useFieldBackedElementFields = (elements: FieldBackedElement[]) => {
 			if (el.format === 'plainText') {
 				return (
 					<TextField field={el.field} label={undefined} placeholder={el.placeholder} distinction={'seamless'}
-										 size={el.size} />
+										 size={el.size} wrapLines />
 				)
 			}
 			return <RichTextField field={el.field} label={undefined} placeholder={el.placeholder} distinction={'seamless'} />