Inline Wysiwyg


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

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.
focusRingEither an object to style the focus ring or a boolean to show/hide the focus ring. Defaults to true which displays the focus ring with default styles. For style options, offset (in pixels) sets the distance from the ring to the edge of the component, and borderRadius (in pixels) controls the rounded corners of the focus ring.

Interface

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

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

interface FocusRingProps {
  offset?: number | { x: number; y: number }
  borderRadius?: number
}