@burst/frontend-editing

This package is used for editing content in the frontend. This package requires a drupal back-end installed with this package

!! This package assumes the preview mode module is already installed and working. You may need to tweak the existing preview mode to integrate this module.

Installation

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

npm install @burst/frontend-editing

Usage

You will have to implement the module in organisms/paragraphmapper the following way

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 if not provided, overwrite it with this value. 
        absolute = false //defaults to true if not provided, set to false if you want to use relative positioning
        icon = { SVGIcon() } //defaults to pencil if not provided, overwrite it with this icon. 
        iconSize = '24' //defaults to 24 if not provided.
      >
        {component()}
      </Editable>
  )
}

To send these props to the organisms/paragraphmapper you need to import the preview data in the pages/[...slug].tsx. Repeat this process for every page that needs to be editable.

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  //this is an example that could be different with the existing preview module. 
    }
  }
}

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

the function getCmsUrl is placed in misc/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 misc/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 misc/preview.ts, if something like this is already in use in your project, use the datatype/structure from this.

export interface PreviewData {
  token: string
}

optional

if you want to use your own icon for the edit button you can do this by importing the icon and passing it to the editable component. A good place for this file is in the Atoms folder. Your icon file should look like this:

import React from "react";

export default function EditSVG() {
  return React.createElement('svg', {
    width: '24',
    height: '24',
    viewBox: '0 0 20 20',
    fill: "currentColor",
    xmlns: "http://www.w3.org/2000/svg",
    style: { margin: 'auto', height: 'auto' },
    children: <>
                  <path> </path>
                  <path> </path> 
              </>
  })
}