New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@burst/frontend-editing

Package Overview
Dependencies
Maintainers
7
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@burst/frontend-editing

Package to allow front-end editing

  • 0.1.5
  • npm
  • Socket score

Version published
Weekly downloads
0
decreased by-100%
Maintainers
7
Weekly downloads
 
Created
Source

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

FAQs

Package last updated on 24 Oct 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc