react-tinacms-editor

This package provides a WYSIWYM Editor for HTML and Markdown. This editor can be used as a Field Plugin or as an Inline Field in websites built with TinaCMS.

Note: The react-tinacms-editor package is quite large. Whether you're using the Field Plugin or the Inline Field it is recommended that you use dynamic imports to reduce your JS bundle size.

Install

yarn add react-tinacms-editor

Field Plugins

This package provides two field plugins for TinaCMS: MarkdownFieldPlugin and HtmlFieldPlugin.

Registering the Plugins

This is the simplest approach to registering plugins:

import { MarkdownFieldPlugin, HtmlFieldPlugin } from 'react-tinacms-editor'

cms.plugins.add(MarkdownFieldPlugin)
cms.plugins.add(HtmlFieldplugin)

The react-tinacms-editor is a large package so it is recommended that load the plugins dynamicallyj:

import("react-tinacms-editor").then(
  ({ MarkdownFieldPlugin, HtmlFieldPlugin }) => {
    cms.plugins.add(MarkdownFieldPlugin)
    cms.plugins.add(HtmlFieldplugin)
  }
)

Field Plugin Options

interface Config {
  component: 'markdown' | 'html'
  name: string
  label?: string
  description?: string
}

Example: Using Field Plugins in Forms

Once registered you will be able to use the plugins in your Forms:

const formConfig = {
  fields: [
    {
      name: "description",
      label: "Description",
      component: "html",
    },
    {
      name: "body",
      label: "Blog Body",
      component: "markdown",
    }
  ]
}

These will both show up in your sidebar looking roughly like this:

InlineWysiwyg

The InlineWysiwyg is a React inline editing component for Markdown and HTML.

InlineWysiwyg Interface

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

interface ImageProps {
  parse(media: Media): string
  uploadDir?(form: Form): string
  upload?: (files: File[]) => Promise<string[]>
  previewSrc?: (url: string) => string | Promise<string>
}

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

Basic Usage

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>
  )
}

With imageProps

To upload and manage images in the Wysiwyg, you'll need to configure imageProps.

<InlineWysiwyg
  name="rawMarkdownBody"
  imageProps={{
    parse: (media) => `images/about/${media.filename}`
    uploadDir: () => 'public/images/about/',
  }}
>
  <div
    dangerouslySetInnerHTML={{
      __html: props.data.markdownRemark.html,
    }}
  />
</InlineWysiwyg>

Sticky Menu

When editing long content it is likely that the editor will scroll past the wysiwyg menu.

By adding the sticky property the menu will follow the user as they scroll through the page.

<InlineWysiwyg name="markdownBody" format="markdown" sticky>
  <ReactMarkdown source={data.markdownBody} />
</InlineWysiwyg>

Alternatively you can pass a string to set the exact offset of the menu.

<InlineWysiwyg name="markdownBody" format="markdown" sticky="2rem">
  <ReactMarkdown source={data.markdownBody} />
</InlineWysiwyg>

If you're using Tina's toolbar, you can pass 'var(--tina-toolbar-height)' to ensure the toolbar does not cover the WYSIWYG menu.

<InlineWysiwyg name="markdownBody" format="markdown" sticky="var(--tina-toolbar-height)">
  <ReactMarkdown source={data.markdownBody} />
</InlineWysiwyg>

Dynamic Imports

The react-tinacms-editor is a large package so it is recommended that you make sure it's only being loaded when necessary. The example below will make sure that the editor is only loaded if the CMS is actually enabled, saving the visistors to your website from the extra load time.

your-app/src/components/InlineWysiwyg.js

import React from 'react'
import { useCMS } from 'tinacms'

export function InlineWysiwyg(props) {
  const cms = useCMS()
  const [{ InlineWysiwyg }, setEditor] = React.useState({})

  React.useEffect(() => {
    if (!InlineWysiwyg && cms.enabled) {
      import('react-tinacms-editor').then(setEditor)
    }
    return () => (InlineWysiwyg ? setEditor(null) : null)
  }, [cms.enabled])

  if (InlineWysiwyg) {
    return (
      <InlineWysiwyg {...props}/>
    )
  }

  return props.children
}

Why do I have to load the editor dynamically myself?

Code splitting and dynamic imports are handled by the website's JavaScript bundlers (e.g. rollup, webpack, etc.). Since the package does not load itself into the application, it is unfortunately not possible to provide this behaviour in the package itself.

Contributing

For a deeper understanding of the Wysiwyg editor and inner-workings of the react-tinacms-editor package, checkout the contributor documentation