React-text-style NPM

react-text-style

A simple but customizable react text style editor

Demo

When to use this component?

If you only want to get the text style, doesn't care about the text content, this component can meet your requirement. All the toolbars, text content is customizable. It means that you can change in any use case.

Features

Pure text style editor — Support most of the text toolbar
Highly customizable — all the styles and buttons are customizable
Pluggable toolbar button — Extra toolbar button to meet your specific usage

Get started

Install it with yarn or npm.

$ yarn add react-text-style

Required Webpack configuration

Currently, this component import css in the component. You need to use webpack css-loader to bundle the file. Or it will fail.

The example webpack setting:

{
  test: /\.css$/,
  loaders: [
    'style-loader',
    'css-loader?modules'
  ]
}

Usage

Minimal setup

import React, {Component} from 'react';
import TextStyle from 'react-text-style';

class Basic extends Component {
  handleChange(style) {
    // do something when style change
  }

  render() {
    return (
      <TextStyle onChange={this.handleChange}/>
    )
  }
}

Customized example

You can control display which button, the style when user click the button and add extra toolbar button (seems like plugin).

import React, {Component} from 'react';
import TextStyle from 'react-text-style';
import ButtonGroup from 'react-text-style/lib/ui/ButtonGroup';
import IconButton from 'react-text-style/lib/ui/IconButton';

class Plugin extends React.Component {
  render() {
    return (
      {/* Use react-text-style/lib component to make sure buttons are same style */}
      <ButtonGroup>
        <IconButton iconClassName="icon-extra" {/* define the icon class in your css file */}
                    onMouseDown={() => alert('this is a pluggable button')}/>
      </ButtonGroup>
    )
  }
}

class Customized extends Component {
  handleChange(style) {
    // do something when style changes
  }

  render() {
    return (
      <TextStyle onChange={this.handleChange}
                 defaultStyle={{backgroundColor: '#333', color: '#b6a4a4'}}
                 customizedPlugin={<Plugin/>}
                 customConfig={{
                    display: [
                      'INLINE_STYLE_BUTTONS',
                      'FONT_SIZE_DROPDOWN'
                    ],
                    FONT_SIZE_DROPDOWN: [
                      {
                        type: 'font-1',
                        label: 'font-1',    
                        style: {
                          fontSize: '1em'
                        }
                      },
                      {
                        type: 'font-3',
                        label: 'font-3',    
                        style: {
                          fontSize: '3em'
                        }
                      }
                    ]
                 }}/>
    )
  }
}

Props

Custom config

The default custom config is here.

By changing this config, you can decide which button you want to display. But remember, you CANNOT add other display button to this list. If you want to add another toolbar button which is not supported by this component, you should use customizedPlugin to add it.

The mechanism of dealing with your custom config and default config is through Object.assign(). It will do the shallow merge of custom config and default config.

Thus, for example, if you just want to display INLINE_STYLE_BUTTONS. Here is what you pass:

<TextStyle customConfig={{display: ['INLINE_STYLE_BUTTONS']}}/>

If you want to display all of the buttons, but you want to change the font size style. You want to use em as the unit.

<TextStyle customConfig={{
  FONT_SIZE_DROPDOWN: [
    {
      type: 'font-1',
      label: 'font-1',    
      style: {
        fontSize: '1em'
      }
    },
    {
      type: 'font-3',
      label: 'font-3',    
      style: {
        fontSize: '3em'
      }
    }
  ]
}}/>

So that's it. It's fully customizable.