Inline Wysiwyg Field


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

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

KeyDescription
nameThe path to some value in the data being edited.
childrenChild components to render.
sticky?A boolean determining whether the Wysiwyg Toolbar 'sticks' to the top of the page on scroll.
format?This value denotes whether Markdown or HTML will be rendered.
imageProps?Configures how images in the Wysiwyg are uploaded and rendered.

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
}