@burst/frontend-editing

@burst/frontend-editing

This package is used for editing content in the frontend.

!! This package assumes the preview mode module is already installed and working.
!! TODO: write documentation for this.

Installation

First you need to install the package, you do this by running the following command:

npm install @burst/frontend-editing

Usage

You can use this module in the paragraphmapper

import { PreviewData } from '@misc/preview'
import Editable from '@burst/frontend-editing'
import { getCmsUrl } from '@misc/environments'
import { previewModeEnabled } from '@misc/helpers'


interface props {
  paragraph: ParagraphsFragment
  preview: PreviewData | null
}

export default function ParagraphMapper (props: Props): JSX.Element | null {
  const component = (): JSX.Element | null => {
    //all paragraph switches
  }

  if (props.preview == null) return component()

  return previewModeEnabled(props.preview)
    ? (
      <Editable
        id = {props.paragraph.id.toString()}
        type = 'paragraph'
        cmsUrl = {getCmsUrl()}
        token = {props.preview?.token ?? null}
        color = '#000' //defaults to gray, overwrite it with this value. 
        absolute = false
      >
        {component()}
      </Editable>
  )
}

To send these props to the paragraphmapper you need to import the preview data in the [...slug].tsx

import { PreviewData } from '@misc/preview'

interface props{
  preview: PreviewData | null
}

export const getStaticProps: GetStaticProps<Props, { slug: string }, PreviewData> = async (ctx) => {

  return {
    props: {
      preview: ctx.preview ?? null
    }
  }
}

function BasicPage ({ preview }: Props): JSX.Element | null {
    return (
        <ProjectDetail>
          <ParagraphMapper preview={preview} />
        </ProjectDetail>
    )
}

the function getCmsUrl is placed in environment.ts.

export function getCmsUrl (): string {
  return (
    process.env.CMS_URL ??
    process.env.NEXT_PUBLIC_CMS_URL ??
    'https://www.domain.com'
  )
}

the function previewModeEnabled is placed in helper.ts.

export function previewModeEnabled (preview?: PreviewData): boolean {
  if (typeof window !== 'undefined') {
    return (
      window.location === window.parent.location && hasValue(preview)
    )
  }
  return false
}

the function previewdata is placed in preview.ts.

export interface PreviewData {
  token: string
}