{"pageProps":{"error":null,"preview":false,"file":{"fileRelativePath":"content/docs/ui/inline-editing.md","data":{"frontmatter":{"title":"Inline Editing","prev":"/docs/media","next":"/docs/ui/inline-editing/inline-text","consumes":[{"file":"/packages/react-tinacms-inline/src/inline-form.tsx","description":"InlineForm"},{"file":"/packages/react-tinacms-inline/src/inline-field.tsx","description":"InlineField"}]},"excerpt":" Inline Editing in Tina refers to editing values directly in the area they appear on the page, instead of in the Tina sidebar. These are the general steps to set up inline editing: Configure&hellip;","markdownBody":"\n_Inline Editing_ in Tina refers to editing values directly in the area they appear on the page, instead of in the Tina sidebar. These are the **general steps** to set up inline editing:\n\n1. [Configure ](/docs/ui/inline-editing#adding-inline-editing-with-inlineform)_[InlineForm](/docs/ui/inline-editing#adding-inline-editing-with-inlineform)_\n2. [Add Inline Fields](/docs/ui/inline-editing#using-preconfigured-inline-fields)\n\n> Play around with this [simple demo](https://logan-anderson.github.io/cra-hosted-demo/) to get a feel for Inline Editing. Get familiar with the Inline Editing API in this [step-by-step guide](/guides/general/inline-blocks/overview).\n\n## Adding Inline Editing with _InlineForm_\n\nThe `InlineForm` and `InlineField` components can be used to set up inline editing in your layout. `InlineForm` receives the form object created via one of the [form hooks](/docs/plugins/forms) in order to provide it to the inline editing context.\n\n> Note that it is important to **use a hook to register a form** instead of an HOC or Render Props component. Depending on the Tina packages you are using, the hook names may differ than those seen in the examples.\n\n`InlineForm` should wrap the page or component where you want to add inline editing, turning the _page into the form itself_. You can then nest multiple `InlineField` components, a render props-based component that allows you to conditionally display an editing interface (when in edit mode) or the page as it will appear in production.\n\nThe **rough idea** is like this:\n\n```jsx\n<InlineForm form={formObject}>\n  <InlineField name=\"name-of-the-field\">\n    {({ input, status }) => {\n      if (status === 'active') {\n        // we're in editing mode, show an editable interface\n      } else {\n        // we're not in editing mode, show the production layout\n      }\n    }}\n  </InlineField>\n</InlineForm>\n```\n\n### Example\n\nLet's take a modified version of the simplistic example from the [form documentation](/docs/plugins/forms):\n\n```jsx\nimport * as React from React\nimport ReactMarkdown from 'react-markdown'\nimport { useForm, usePlugin } from 'tinacms'\n\nexport function Page(props) {\n  const [modifiedValues, form] = useForm(props.data)\n\n  usePlugin(form)\n\n  return (\n    <main>\n      <h1>{modifiedValues.title}</h1>\n      <ReactMarkdown source={modifiedValues.markdownContent}>\n    </main>\n  )\n}\n```\n\nUsing `InlineForm` and `InlineField` from `react-tinacms-inline`, we would rewrite the Page component as follows:\n\n```tsx\nimport * as React from React\nimport ReactMarkdown from 'react-markdown'\nimport { useForm } from 'tinacms'\nimport { Wysiwyg } from 'react-tinacms-editor'\nimport { InlineForm, InlineField } from 'react-tinacms-inline'\n\nexport function Page(props) {\n  /*\n   ** The `modifiedValues` aren't\n   ** called directly, so we only\n   ** need the form object\n   */\n  const [, form] = useForm(props.data)\n\n  return (\n    <InlineForm form={form}>\n      <main>\n        <InlineField name=\"title\">\n          {({ input, status }) => {\n            if (status === 'active') {\n              return <input type=\"text\" {...input} />\n            }\n            return <h1>{input.value}</h1>\n          }}\n        </InlineField>\n        <InlineField name=\"markdownContent\">\n          {({ input, status }) => {\n            if (status === 'active') {\n              return <Wysiwyg input={input} />\n            }\n            return <ReactMarkdown source={input.value} />\n          }}\n        </InlineField>\n      </main>\n    </InlineForm>\n  )\n}\n```\n\n## Using Pre-configured Inline Fields\n\nWhen using `InlineField`, you can create a custom _Inline Field_. This is helpful when you need precise control over rendering or input functionality.\n\nHowever, Tina provides a set of pre-configured Inline Fields that should **work for many use cases**. These fields provide basic input elements and handle the rendering logic between edit and preview mode.\n\n- [Inline Text](/docs/ui/inline-editing/inline-text)\n- [Inline Textarea](/docs/ui/inline-editing/inline-textarea)\n- [Inline Wysiwyg](/docs/ui/inline-editing/inline-wysiwyg)\n- [Inline Image](/docs/ui/inline-editing/inline-image)\n- [Inline Group](/docs/ui/inline-editing/inline-group)\n- [Inline Blocks](/docs/ui/inline-editing/inline-blocks)\n\n**Refactoring the above example** with Inline Fields:\n\n```tsx\nimport * as React from React\nimport ReactMarkdown from 'react-markdown'\nimport { useForm } from 'tinacms'\nimport {\n  InlineForm,\n  InlineTextField,\n  InlineWysiwyg,\n} from 'react-tinacms-inline'\n\nexport function Page(props) {\n  const [modifiedValues, form] = useForm(props.data)\n\n  return (\n    <InlineForm form={form}>\n      <main>\n        <InlineTextField name=\"title\" />\n        <InlineWysiwyg name=\"markdownContent\">\n          <ReactMarkdown source={modifiedValues.markdownContent} />\n        </InlineWysiwyg>\n      </main>\n    </InlineForm>\n  )\n}\n```\n\n## Creating Custom Inline Fields\n\nThere may be cases where you want to create your own Inline Fields. Below is an example of the `Page` component used above, but refactored to define its own custom Inline Fields.\n\n```js\nimport * as React from React\nimport ReactMarkdown from 'react-markdown'\n// import `useCMS`\nimport { useForm, useCMS } from 'tinacms'\nimport { Wysiwyg } from 'react-tinacms-editor'\nimport { InlineForm, InlineField } from 'react-tinacms-inline'\n\nexport function Page(props) {\n  // Access the CMS object\n  const cms = useCMS()\n  const [, form] = useForm(props.data)\n\n  return (\n    <InlineForm form={form}>\n      <main>\n      {/**\n      * Use `InlineField` and the render props\n      * pattern to create custom field inputs\n      * that render when the cms is enabled\n      */}\n        <InlineField name=\"title\">\n          {({ input, status }) => {\n            if (cms.enabled) {\n              return <input type=\"text\" {...input} />\n            }\n            return <h1>{input.value}</h1>\n          }}\n        </InlineField>\n        <InlineField name=\"markdownContent\">\n          {({ input, status }) => {\n            if (cms.enabled) {\n              return <Wysiwyg input={input} />\n            }\n            return <ReactMarkdown source={input.value} />\n          }}\n        </InlineField>\n      </main>\n    </InlineForm>\n  )\n}\n```\n\n`InlineField` uses [render props](https://reactjs.org/docs/render-props.html) to pass the form state and other props to its children. Based on `cms.enabled`, you can conditionally render editing inputs or the original element / value.\n\n> If you have an idea for an Inline Field plugin, consider contributing! [Make an issue](https://github.com/tinacms/tinacms/issues) with your suggestion or reach out on [the forum](https://community.tinacms.org/) for support.\n\n## Extending Inline Field Styles\n\nThe Inline Fields are meant to have minimal styles. But there may be situations where you'll want to override the base styles. This is made possible via [Styled Components](https://styled-components.com/docs/basics#extending-styles).\n\n```jsx\n// An example `InlineTextField` with Extended Styles\nexport function Page(props) {\n  const [, form] = useForm(props.data)\n\n  return (\n    <InlineForm form={form}>\n      <main>\n        <StyledText name=\"title\" />\n      </main>\n    </InlineForm>\n  )\n}\n\n// Extended InlineTextField styled component\nconst StyledText = styled(InlineTextField)`\n  color: green;\n`\n```\n\nNotice how the new component, `StyledText` is just a _styled_ version of `InlineTextField`.\n"}},"tocItems":"- [Adding Inline Editing with _InlineForm_](#adding-inline-editing-with-inlineform)\n  * [Example](#example)\n- [Using Pre-configured Inline Fields](#using-pre-configured-inline-fields)\n- [Creating Custom Inline Fields](#creating-custom-inline-fields)\n- [Extending Inline Field Styles](#extending-inline-field-styles)","docsNav":[{"title":"Getting Started","id":"getting-started","items":[{"id":"/docs/getting-started/introduction","slug":"/docs/getting-started/introduction","title":"Introduction"}]},{"title":"CMS","id":"the-cms","items":[{"id":"/docs/cms","slug":"/docs/cms","title":"Overview"}]},{"title":"User Interface","id":"user-interface","items":[{"id":"/docs/ui","title":"Sidebar & Toolbar","slug":"/docs/ui"},{"title":"Inline Editing","id":"inline-editing","slug":"/docs/ui/inline-editing","items":[{"id":"/docs/ui/inline-editing/inline-text","title":"Inline Text","slug":"/docs/ui/inline-editing/inline-text"},{"id":"/docs/ui/inline-editing/inline-textarea","title":"Inline Textarea","slug":"/docs/ui/inline-editing/inline-textarea"},{"id":"/docs/ui/inline-editing/inline-wysiwyg","title":"Inline Wysiwyg","slug":"/docs/ui/inline-editing/inline-wysiwyg"},{"id":"/docs/ui/inline-editing/inline-image","title":"Inline Image","slug":"/docs/ui/inline-editing/inline-image"},{"id":"/docs/ui/inline-editing/inline-group","title":"Inline Group","slug":"/docs/ui/inline-editing/inline-group"},{"id":"/docs/ui/inline-editing/inline-blocks","title":"Inline Blocks","slug":"/docs/ui/inline-editing/inline-blocks"}]},{"id":"/docs/ui/alerts","title":"Alerts","slug":"/docs/ui/alerts"},{"id":"/docs/ui/styles","title":"Custom Styles","slug":"/docs/ui/styles"}]},{"id":"plugins","title":"Plugins","items":[{"title":"About Plugins","id":"forms","slug":"/docs/plugins"},{"title":"Forms","id":"forms","slug":"/docs/plugins/forms"},{"title":"Fields","id":"fields","slug":"/docs/plugins/fields","items":[{"id":"/docs/plugins/fields/text","slug":"/docs/plugins/fields/text","title":"Text"},{"id":"/docs/plugins/fields/textarea","slug":"/docs/plugins/fields/textarea","title":"Text Area"},{"id":"/docs/plugins/fields/number","slug":"/docs/plugins/fields/number","title":"Number"},{"id":"/docs/plugins/fields/image","slug":"/docs/plugins/fields/image","title":"Image"},{"id":"/docs/plugins/fields/color","slug":"/docs/plugins/fields/color","title":"Color"},{"id":"/docs/plugins/fields/toggle","slug":"/docs/plugins/fields/toggle","title":"Toggle"},{"id":"/docs/plugins/fields/select","slug":"/docs/plugins/fields/select","title":"Select"},{"id":"/docs/plugins/fields/tags","slug":"/docs/plugins/fields/tags","title":"Tags"},{"id":"/docs/plugins/fields/list","slug":"/docs/plugins/fields/list","title":"List"},{"id":"/docs/plugins/fields/group","slug":"/docs/plugins/fields/group","title":"Group"},{"id":"/docs/plugins/fields/group-list","slug":"/docs/plugins/fields/group-list","title":"Group List"},{"id":"/docs/plugins/fields/blocks","slug":"/docs/plugins/fields/blocks","title":"Blocks"},{"id":"/docs/plugins/fields/date","slug":"/docs/plugins/fields/date","title":"Date & Time"},{"id":"/docs/plugins/fields/markdown","slug":"/docs/plugins/fields/markdown","title":"Markdown"},{"id":"/docs/plugins/fields/html","slug":"/docs/plugins/fields/html","title":"HTML"},{"id":"/docs/plugins/fields/custom-fields","slug":"/docs/plugins/fields/custom-fields","title":"Custom Fields"}]},{"title":"Content Creators","id":"content-creator","slug":"/docs/plugins/content-creators"},{"title":"Screens","id":"screens","slug":"/docs/plugins/screens"},{"title":"Toolbar Widgets","id":"toolbar:widget","slug":"/docs/plugins/toolbar-widgets"}]},{"id":"events","title":"Events","items":[{"id":"/docs/events","slug":"/docs/events","title":"About Events"}]},{"title":"Media","id":"media","items":[{"id":"/docs/media","slug":"/docs/media","title":"About Media"}]},{"id":"apis","title":"External APIs","items":[{"id":"/docs/api","slug":"/docs/apis","title":"About APIs"}]},{"title":"Integrations","id":"nextjs","items":[{"id":"/docs/integrations/nextjs","slug":"/docs/integrations/nextjs","title":"Next.js"},{"id":"/docs/integrations/gatsby","slug":"/docs/integrations/gatsby","title":"Gatsby"}]},{"title":"Release Notes","id":"releases","items":[{"id":"/docs/releases","href":"/docs/releases","title":"All Releases"}]},{"title":"Packages","id":"packages","items":[{"id":"/packages/react-tinacms-date","slug":"/packages/react-tinacms-date","title":"react-tinacms-date"},{"id":"/packages/react-tinacms-editor","slug":"/packages/react-tinacms-editor","title":"react-tinacms-editor"},{"id":"/packages/react-tinacms-github","slug":"/packages/react-tinacms-github","title":"react-tinacms-github"},{"id":"/packages/react-tinacms-inline","slug":"/packages/react-tinacms-inline","title":"react-tinacms-inline"},{"id":"/packages/react-tinacms-strapi","slug":"/packages/react-tinacms-strapi","title":"react-tinacms-strapi"},{"id":"/packages/next-tinacms-github","slug":"/packages/next-tinacms-github","title":"next-tinacms-github"},{"id":"/packages/next-tinacms-json","slug":"/packages/next-tinacms-json","title":"next-tinacms-json"},{"id":"/packages/next-tinacms-markdown","slug":"/packages/next-tinacms-markdown","title":"next-tinacms-markdown"},{"id":"/packages/gatsby-plugin-tinacms","slug":"/packages/gatsby-plugin-tinacms","title":"gatsby-plugin-tinacms"},{"id":"/packages/gatsby-tinacms-git","slug":"/packages/gatsby-tinacms-git","title":"gatsby-tinacms-git"},{"id":"/packages/gatsby-tinacms-json","slug":"/packages/gatsby-tinacms-json","title":"gatsby-tinacms-json"},{"id":"/packages/gatsby-tinacms-remark","slug":"/packages/gatsby-tinacms-remark","title":"gatsby-tinacms-remark"}]}],"nextPage":{"slug":"/docs/ui/inline-editing/inline-text","title":"Inline Text"},"prevPage":{"slug":"/docs/media","title":"Media"}},"__N_SSG":true}