Add displayMode to fields.text in fields-document (#9586)

Author: emmatown

Diff for: packages/fields-document/src/DocumentEditor/component-blocks/api.tsx

@@ -23,6 +23,7 @@ import {
   Checkbox,
   Text,
   TextField,
+  TextArea,
 } from '#fields-ui'
 
 export * from './api-shared'
@@ -37,13 +38,25 @@ export const fields = {
   text({
     label,
     defaultValue = '',
+    displayMode,
   }: {
     label: string
     defaultValue?: string
+    displayMode?: 'input' | 'textarea'
   }): FormField<string, undefined> {
     return {
       kind: 'form' as const,
       Input({ value, onChange, autoFocus }: InputArgs<string>) {
+        if (displayMode === 'textarea') {
+          return (
+            <TextArea
+              autoFocus={autoFocus}
+              label={label}
+              onChange={x => onChange?.(x)}
+              value={value}
+            />
+          )
+        }
         return (
           <TextField
             autoFocus={autoFocus}

Diff for: packages/fields-document/src/DocumentEditor/component-blocks/fields-ui-empty.tsx

@@ -5,6 +5,7 @@ function throwAlways(): never {
 }
 
 export const TextField = throwAlways,
+  TextArea = throwAlways,
   Checkbox = throwAlways,
   Text = throwAlways,
   makeIntegerFieldInput = () => throwAlways,

Diff for: packages/fields-document/src/DocumentEditor/component-blocks/fields-ui.tsx

@@ -12,7 +12,7 @@ import { VStack } from '@keystar/ui/layout'
 import { TagGroup } from '@keystar/ui/tag'
 import { Text } from '@keystar/ui/typography'
 
-export { TextField } from '@keystar/ui/text-field'
+export { TextField, TextArea } from '@keystar/ui/text-field'
 export { Text } from '@keystar/ui/typography'
 export { Checkbox } from '@keystar/ui/checkbox'