Inline Editing

Inline editing refers to the ability to edit content directly on your site's page, as opposed to editing within the CMS sidebar.

Enabling Inline Editing for Remark Content

Creating an inline editing experience for Remark content only requires a few extra steps. Note that users will still be able to edit via the sidebar when inline editing is configured.

1. Replace remarkForm with inlineRemarkForm

If you followed the editing markdown in Gatsby guide, you used the remarkForm function to attach the CMS to your page template. Once you've added some inline fields into your template, all you have to do is replace the call to remarkForm with a call to inlineRemarkForm

liveRemarkForm is deprecated in gatsby-tinacms-remark for versions >= 0.6.5. It is recommended to use inlineRemarkForm instead.

Before

import { remarkForm } from 'gatsby-tinacms-remark'

const Template = ({ data }) => (
  <section
    class="content"
    dangerouslySetInnerHTML={{ __html: data.markdownRemark.html }}
  ></section>
)

export default remarkForm(Template)

After

import { inlineRemarkForm } from 'gatsby-tinacms-remark'

const Template = ({ data }) => (
  <section
    class="content"
    dangerouslySetInnerHTML={{ __html: data.markdownRemark.html }}
  ></section>
)

export default inlineRemarkForm(Template)

2. Add Inline Fields

To facilitate inline editing, you will need to add fields into your layout using the TinaField component. The TinaFieldcomponent should wrap the HTML that outputs the contents of the field it edits. When editing mode is activated, the content will become editable.

In the following example, we wrap the section that renders the Markdown content in a TinaField that uses the Wysiwyg component. Note that the field being edited by TinaField does not have to be the same as the field being rendered in its child components.

Before

import { inlineRemarkForm } from 'gatsby-tinacms-remark'

const Template = ({ data }) => (
  <section
    class="content"
    dangerouslySetInnerHTML={{ __html: data.markdownRemark.html }}
  ></section>
)

export default inlineRemarkForm(Template)

After

import { inlineRemarkForm } from 'gatsby-tinacms-remark'
import { Wysiwyg } from '@tinacms/fields'
import { TinaField } from '@tinacms/form-builder'

const Template = ({ data }) => (
  <TinaField name="rawMarkdownBody" Component={Wysiwyg}>
    <section
      class="content"
      dangerouslySetInnerHTML={{ __html: data.markdownRemark.html }}
    ></section>
  </TinaField>
)

export default inlineRemarkForm(Template)

3. Trigger Edit Mode

When your template is processed through the inlineRemarkForm function, it will have the properties isEditing and setIsEditing that you can use to create a trigger for activating inline editing mode.

import { inlineRemarkForm } from 'gatsby-tinacms-remark'
import { Wysiwyg } from '@tinacms/fields'
import { TinaField } from '@tinacms/form-builder'

const Template = ({ data, isEditing, setIsEditing }) => (
  <>
  <TinaField name="rawMarkdownBody" Component={Wysiwyg}>
    <section
      class="content"
      dangerouslySetInnerHTML={{ __html: data.markdownRemark.html }}
    ></section>
  </TinaField>
  <button onClick={() => setIsEditing(p => !p)}>
    {isEditing ? 'Preview' : 'Edit'}
  </button>
  </>
)

export default inlineRemarkForm(Template)

For the time being, users will still need to open the CMS sidebar in order to save.