The InlineWysiwyg field represents a chunk of Markdown or HTML content.

Install react-tinacms-editor

The InlineWysiwyg field is not a default field within react-tinacms-inline. In order to use it in your site you must install the react-tinacms-editor package:

yarn add react-tinacms-editor

Definition

Below is an example of how an InlineWysiwyg field could be defined in an Inline Form.

import ReactMarkdown from 'react-markdown'
import { useForm, usePlugin } from 'tinacms'
import { InlineForm } from 'react-tinacms-inline'
import { InlineWysiwyg } from 'react-tinacms-editor'

// Example 'Page' Component
export function Page(props) {
  const [data, form] = useForm(props.data)
  usePlugin(form)
  return (
    <InlineForm form={form}>
      <InlineWysiwyg name="markdownBody" format="markdown">
        <ReactMarkdown source={data.markdownBody} />
      </InlineWysiwyg>
    </InlineForm>
  )
}

Options

Interface

interface InlineWysiwygConfig {
  name: string
  children: any
  sticky?: boolean
  format?: 'markdown' | 'html'
  imageProps?: WysiwysImageProps
}

interface WysiwygImageProps {
  upload?: (files: File[]) => Promise<string[]>
  previewUrl?: (url: string) => string
}