TrixEditor.js

TrixEditor.js

import React, { Component, Fragment } from 'react'
import PropTypes from 'prop-types'

const randomString = () =>
  Math.random().toString(36).substring(2, 15)

export default class TrixEditor extends Component {
  static propTypes = {
    customRef:       PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
    name:            PropTypes.string,
    trixHtml:        PropTypes.string,
    placeholder:     PropTypes.string.isRequired,
    directUploadUrl: PropTypes.string.isRequired,
    blobUrlTemplate: PropTypes.string.isRequired,
  }

  constructor(props) {
    super(props)
    this.domId = randomString()
  }

  render() {
    return <Fragment>
      {/* taken from the result of running `f.rich_text_area :text, placeholder: "Write about it here"` */}
      <input
        ref={this.props.customRef}
        type="hidden"
        name={this.props.name}
        id={this.domId}
        value={this.getValue()}
      />
      <trix-editor
        placeholder={this.props.placeholder}
        input={this.domId}
        className="trix-content form-control"
        data-direct-upload-url={this.props.directUploadUrl}
        data-blob-url-template={this.props.blobUrlTemplate}
      ></trix-editor>
    </Fragment>
  }

  getValue() {
    const ref = this.props.customRef
    if(ref && ref.current)
      return ref.current.value
    else
      return this.props.trixHtml
  }
}