Guides for inline editing with markdown using Next.js?

Hello, I’ve been having a play with Tina and been really enjoying the ability to add a better way of managing my content for my personal site. I’ve now started to try and add inline editing but I can’t figure out how to edit content from markdown files.

I followed the guide here which talks about JSON files.

Is there an equivalent for markdown files?

1 Like

Welcome @stripygoose!

Those docs are a bit out of date actually. We’ve got some better ones here.

That said, they’re a little sparse at the moment. I believe there’s some improvements in the works right now.

Hi @ncphi thank you!

I was able to get the data to show and an edit button which lets you edit the content but unfortunately I couldn’t figure out how to save the data (no save button present).

I’ve been following some of the tutorials for using Tina with Next.js and I started from the Brevifolia starter kit

I wonder if perhaps it’s using some old packages and maybe this is why the save button’s not appearing. Or maybe there is a step I’m missing.

Also when I installed react-tinacms-inline I also had to install react-textarea-autosize and react-tinacms-editor I suspect maybe they are dependencies of that package.

Anyway I appreciate that you have been making a lot of updates/progress recently and that documentation might not be quite up to date. I’ll give exploring and reading through the docs.

Thanks for your help and I hope you are well.

I realised now that the react version has different configurations to the next markdown version.

I found an example on the demo-next example that has a save button component so I’m using that now. If however I wanted to use the onSubmit function which is included in the formConfig it would be useful to know how to save the new data. Do you have any examples of this? I looked on the Final Form website but I couldn’t find any examples. I’m not clear on how I tell Final Form to write the new data to the markdown file.

Hi @stripygoose! Thanks for pointing this out. I see how this is confusing since we were depending on the sidebar save button for so long and sometimes with inline forms we may not have a sidebar form registered — so no save button :sweat_smile:.

I’m in the process of updating the Inline Editing documentation right now. But an example of how you would create a save button is similar to how you could create the edit toggle. A simple version of it might look like this:

import { useInlineForm } from 'react-tinacms-inline'
import { Button as TinaButton } from '@tinacms/styles'

export function SaveButton() {
  const { form } = useInlineForm()

  return (
    <TinaButton primary onClick={form.submit}>
      Save
    </TinaButton>
  )
}

And depending on how you are setting up your form initially — with useLocalJsonForm or useJsonForm, the source file should be updating as you are editing, and then when you hit the save button this will attempt to commit the changes from that source file.

Just so you know, were in the process of creating a more global Toolbar, as you may have seen when you edit the tinacms.org site via open authoring. So in the near future, these key actions may be handled via the Toolbar.

I’ll be sure to post the updated docs once they are published!

Hi @kendall. Thanks for taking the time to reply.

I can get the form to save when it’s setup using useLocalMarkdownForm() but I’m not having any luck with useForm like the example in the documentation. Should there be anything inside onSubmit() for the formConfig?

const formConfig = {
		id: data.fileRelativePath,
		label: 'Edit Post',
		fields: [
			{
				name: 'markdownBody',
				label: 'content',
				component: 'markdown',
			}
		],
		initialValues: {
			markdownBody: data.markdownBody
		},
		onSubmit: (formData) => {

		}
	} 

Thanks again.

Gotcha, yeah I would recommend using the helpers, useLocalMarkdownForm or useLocalJsonForm instead of using useForm. When you use these helpers you don’t need to manually set the onSubmit function.

If you’re curious how the helpers are setting this function, feel free to checkout the source code.

The latest documentation for creating forms with Next.js can be found here. And feel free to reference this starter. Soon we will release an inline editing starter that will use the new API’s.

Also, if you’re curious the updated Inline Blocks documentation is out — note these are specific to blocks and the regular inline field docs are still in the works.