0.0.30 • Published 5 days ago

@tinacms/vercel-previews v0.0.30

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
5 days ago

Getting started

Setting up your data for visual editing

There are two ways to indicate that a field is editable.

Data Attributes

If an element has a [data-vercel-edit-info] attribute on it, it will be considered editable. To make it easier to manage, Tina provides a helper function:

The vercelEditInfo helper

NOTE: this should be used in conjuction with the withSourceMaps function described below

// pages/[slug].tsx
import { useTina } from 'tinacms/dist/react'
import { vercelEditInfo } from '@tinacms/vercel-previews/dist/react'

export const Post = (props) => {
  const { data } = useTina(props)

  return (
    <div>
      <h1 data-vercel-edit-info={vercelEditInfo(data, 'title')}>
        {data.title}
      </h1>
    </div>
  )
}

For deeper objects, the API is the same, notice in this example we can also mark the div wrapping the "actions" in a selectable field

export const NewsletterBlock = (props) => {
  return (
    <div>
      <p data-vercel-edit-info={vercelEditInfo(props, 'message')}>
        {props.message}
      </p>
      <div data-vercel-edit-info={vercelEditInfo(props, 'actions')}>
        {props.actions.map((action) => {
          return (
            <button
              // notice here that the first value is the action object
              data-vercel-edit-info={vercelEditInfo(action, 'message')}
              {...action}
            />
          )
        })}
      </div>
    </div>
  )
}

Encoded Strings

If an element’s textContent contains an encoded string, it will be considered editable. This feature is not enabled by default, to enable:

NOTE: Most likely, you won't want all of your fields to be encoded, the encoding process only applies to string values, but it alters them in a way that makes them unusable for anything other than rendering. Take note of the encodeAtPath callback function, which controls whether a value at the given path recieves the encoding info.

Add the plugin to the TinaCMS config:

// tina/config.ts
export default defineConfig({
  cmsCallback: (cms) => {
    cms.plugins.add(createSourceMapEncoder(encodeAtPath))

    return cms
  },
})

// Export this so it can be re-used in the next section
export const encodeAtPath = (path, value) => {
  if (path === 'page.blocks.0.headline') {
    console.log(path)
    return true
  }
  return false
}

Use the withSourceMaps helper

// pages/[slug].tsx
import { encodeAtPath } from '../tina/config'

export const getStaticProps = async ({ params }) => {
  const tinaProps = await client.queries.contentQuery({
    relativePath: `${params.filename}.md`,
  })
  return {
    props: withSourceMaps(tinaProps, { encodeStrings: true, encodeAtPath }),
  }
}

Listen for clicks on a visual element

When a user clicks to edit a visual element, Tina will redirect to the same URL within an iframe, and will select the appropriate form and field for editing. After the first redirect, subsequent clicks will no longer redirect, but will activate the selected field.

To set this up, register the hook, provide the redirect URL you set up in your tina/config.ts file:

// pages/[slug].tsx
import { useEditOpen } from '@tinacms/vercel-previews/dist/react'

export default function Page(props) {
  const { data } = useTina(props)
  useEditOpen('/admin')

  return <MyPage {...data} />
}
0.0.30

11 days ago

0.0.29

19 days ago

0.0.28

1 month ago

0.0.27

2 months ago

0.0.26

2 months ago

0.0.25

2 months ago

0.0.23

6 months ago

0.0.24

5 months ago

0.0.20

6 months ago

0.0.21

6 months ago

0.0.22

6 months ago

0.0.15

9 months ago

0.0.16

9 months ago

0.0.17

7 months ago

0.0.18

7 months ago

0.0.19

6 months ago

0.0.10

10 months ago

0.0.11

10 months ago

0.0.12

10 months ago

0.0.13

10 months ago

0.0.14

9 months ago

0.0.9

11 months ago

0.0.8

11 months ago

0.0.5

11 months ago

0.0.7

11 months ago

0.0.6

11 months ago

0.0.4

11 months ago

0.0.3

11 months ago

0.0.2

11 months ago

0.0.1

12 months ago

0.0.0

12 months ago