react-entity-textarea v0.0.4

React Entity Textarea

Provides the ability to display arbitrary entities within a textarea.

Usage

import React, { useRef, useState, useCallback } from 'react'
import EntityTextarea from 'react-entity-textarea'

// Import Styles
import 'react-entity-textarea/styles.css'

const renderEntity = (entity, opts) => (
  <strong>
    {entity.title || 'Untitled Entity'}
    {' '}
    {/* Call `opts.onDelete` to remove the current entity */}
    <span onClick={opts.onDelete}>
      ×
    </span>
  </strong>
)

export default function() {
  const textarea = useRef()
  const [value, setValue] = useState([['']]) // could also be null or empty string

  const addEntity = useCallback(e => {
    // Import to prevent deselecting the input:
    e.preventDefault()

    textarea.current.addEntity({ title: 'Hello, world' })
  })

  return(
    <div>
      <button onMouseDown={this.handleAddEntity}>
        Add Entity
      </button>
      <EntityTextarea
        ref={textarea}
        value={value}
        onChange={value => setValue(value)}
        renderEntity={renderEntity}
      />
    </div>
  )
}

Format

Values are 2-level arrays of text + entities. The top level is the blocks.