Rich content fields

FormFieldClass.markdownEditor('description', {
  label: 'Description',
  required: true,
  helpText: 'Use markdown to format your content',
})

npm install @mdxeditor/editor

import '@mdxeditor/editor/style.css'

FormFieldClass.markdownEditor('content', {
  label: 'Content',
  enableImageUpload: true,
  imageUploadMode: 'custom',
  imageUploadHandler: async (file) => {
    const formData = new FormData()
    formData.append('image', file)
    const { url } = await fetch('/api/upload', {
      method: 'POST',
      body: formData,
    }).then((r) => r.json())
    return url
  },
})

FormFieldClass.markdownEditor('content', {
  label: 'Content',
  outputFormat: 'both',
  onHtmlChange: (html) => setRenderedHtml(html),
})

// Form data contains:
// content      → "# Hello\n\nThis is **bold**"
// content_html → "<h1>Hello</h1><p>This is <strong>bold</strong></p>"

import {
  headingsPlugin,
  listsPlugin,
  tablePlugin,
  toolbarPlugin,
  BlockTypeSelect,
  BoldItalicUnderlineToggles,
  InsertTable,
  Separator,
} from '@mdxeditor/editor'

FormFieldClass.markdownEditor('content', {
  label: 'Content',
  plugins: [
    headingsPlugin(),
    listsPlugin(),
    tablePlugin(),
    toolbarPlugin({
      toolbarContents: () => (
        <>
          <BlockTypeSelect />
          <Separator />
          <BoldItalicUnderlineToggles />
          <Separator />
          <InsertTable />
        </>
      ),
    }),
  ],
})

// Option 1: render popups inside your modal container
FormFieldClass.markdownEditor('content', {
  overlayContainer: document.getElementById('my-modal'),
})

// Option 2: raise the popup z-index above your modal
FormFieldClass.markdownEditor('content', {
  popupZIndex: 10000,
})

FormFieldClass.content('instructions', {
  label: 'Important',
  content:
    'Please fill out all required fields before submitting. Your information will be reviewed within 24 hours.',
})

FormFieldClass.content('warning', {
  label: 'Warning',
  content:
    'You are about to create a public listing. This action cannot be undone.',
  showWhen: (values) => values.visibility === 'public',
})

FormFieldClass.custom('colorPicker', {
  label: 'Brand Color',
  component: ({ value, onChange, error }) => (
    <div>
      <input
        type="color"
        value={value || '#000000'}
        onChange={(e) => onChange(e.target.value)}
      />
      {error && <span className="text-red-500">{error}</span>}
    </div>
  ),
  validate: (value) => value !== '#000000' || 'Please choose a color',
})

FormFieldClass.custom('fileUpload', {
  label: 'Upload Document',
  required: true,
  component: ({ value, onChange, error, disabled }) => (
    <div className="rounded-lg border-2 border-dashed p-6 text-center">
      {value ? (
        <div>
          <p>{value.name}</p>
          <button onClick={() => onChange(null)}>Remove</button>
        </div>
      ) : (
        <input
          type="file"
          disabled={disabled}
          onChange={(e) => onChange(e.target.files?.[0])}
          accept=".pdf,.doc,.docx"
        />
      )}
      {error && <p className="mt-2 text-red-500">{error}</p>}
    </div>
  ),
  validate: (value) => value != null || 'Please upload a document',
})

FormFieldClass.button('addItem', {
  label: 'Add Line Item',
  onClick: () => {
    // Add a new item to the form
  },
})

const fields = [
  // ... other fields
  FormFieldClass.button('preview', {
    label: 'Preview',
    onClick: () => setShowPreview(true),
  }),
  FormFieldClass.button('reset', {
    label: 'Reset to Defaults',
    onClick: () => resetForm(),
  }),
]

const fields = [
  FormFieldClass.content('personalInfo', {
    content: 'Personal Information',
    wrapperClassName: 'col-span-2 font-bold text-lg border-b pb-2',
  }),
  FormFieldClass.text('firstName', {
    label: 'First Name',
    wrapperClassName: 'col-span-1',
  }),
  FormFieldClass.text('lastName', {
    label: 'Last Name',
    wrapperClassName: 'col-span-1',
  }),
  FormFieldClass.email('email', {
    label: 'Email',
    wrapperClassName: 'col-span-2',
  }),

  FormFieldClass.content('addressInfo', {
    content: 'Address Information',
    wrapperClassName: 'col-span-2 font-bold text-lg border-b pb-2 mt-4',
  }),
  FormFieldClass.text('street', {
    label: 'Street Address',
    wrapperClassName: 'col-span-2',
  }),
  FormFieldClass.text('city', {
    label: 'City',
    wrapperClassName: 'col-span-1',
  }),
  FormFieldClass.text('zip', {
    label: 'ZIP Code',
    wrapperClassName: 'col-span-1',
  }),
]

FormFieldClass.markdownEditor('article', {
  label: 'Article Body',
  required: true,
  maxLength: 10000,
  validate: (value) => {
    if (!value || value.length < 100) {
      return 'Article must be at least 100 characters'
    }
    return true
  },
})