ManageContentButton.js

// @flow
import * as React from 'react'
import { getNestedObject } from 'bloomreach-experience-react-sdk'

function addBeginComment(htmlElm: any, position: string, configuration: Object, preview: boolean) {
  const beginNodeSpan = getNestedObject(configuration, ['_meta', 'beginNodeSpan', 0, 'data'])
  if (preview && htmlElm && beginNodeSpan && !htmlElm.classList.contains('cms-begin-comment-added')) {
    htmlElm.insertAdjacentHTML(position, configuration._meta.beginNodeSpan[0].data)
    // adding an HTML class to ensure comments are not added more than once
    // this is because the comments are added through the DOM and not by React
    // so this function is fired on every re-render of the parent component
    htmlElm.classList.add('cms-begin-comment-added')
  }
}

type Props = {
  preview: boolean,
  styles?: Object,
  content?: Object,
  menu?: Object,
}
class ManageContentButton extends React.Component<Props> {
  addButton(htmlElm: any, configuration: Object, preview: boolean) {
    addBeginComment(htmlElm, 'afterbegin', configuration, preview)
  }

  render() {
    const content = this.props.content || this.props.menu || {}
    const preview = this.props.preview

    const styles = {
      ...this.props.styles,
      position: 'relative'
    }

    return (
      <div style={styles}>
        <span ref={(editContentElm) => { this.addButton(editContentElm, content, preview) }}/>
      </div>
    )
  }
}

export default ManageContentButton