@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.

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'

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. 
      >
        {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 ({ 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
}

import Editable from "@components/frontendEditing/Editable"; import {getCmsUrl} from "@misc/environments"; import {PreviewData} from "@misc/preview"; import {previewModeEnabled} from "@misc/helpers";