react-text-style
Version:
React text style editor
260 lines (210 loc) • 6.72 kB
Markdown
# react-text-style
> A simple but customizable react text style editor
[](https://www.npmjs.com/package/react-text-style/)
### [Demo](https://ctxhou.github.io/react-text-style/)
## 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.<br/>
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
## Table of Contents
<!-- toc -->
- [Get started](#get-started)
* [Required Webpack configuration](#required-webpack-configuration)
- [Usage](#usage)
* [Minimal setup](#minimal-setup)
* [Customized example](#customized-example)
- [Props](#props)
* [Custom config](#custom-config)
- [References](#references)
- [Todo](#todo)
- [License](#license)
<!-- tocstop -->
## Get started
Install it with yarn or npm.
```js
$ 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:
```js
{
test: /\.css$/,
loaders: [
'style-loader',
'css-loader?modules'
]
}
```
## Usage
### Minimal setup
```js
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).
```js
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
<table>
<tbody>
<tr>
<th>props</th>
<th>type</th>
<th>default</th>
<th></th>
</tr>
<tr>
<td>onChange *</td>
<td><code>function</code></td>
<td>(style) => {}</td>
<td>
The only required props.<br/>
Trigger when style change.
</td>
</tr>
<tr>
<td>defaultStyle</td>
<td><code>object</code></td>
<td>{}</td>
<td>the initial style</td>
</tr>
<tr>
<td>text</td>
<td><code>string</code></td>
<td>ABCD</td>
<td>the display text of the editor</td>
</tr>
<tr>
<td>textComponent</td>
<td><code>Component</code></td>
<td>null</td>
<td>
The different from `text` props is `textComponent` will replaced whole editor. You can control the display editor on your own.
</td>
</tr>
<tr>
<td>customizedPlugin</td>
<td><code>Component</code></td>
<td>null</td>
<td>
The extra toolbar button.<br/>
<b>Note: `react-text-style` will not control the style change of plugin component.<br/>
It means that you need to write your own `onChange` function.
</b>
</td>
</tr>
<tr>
<td>customConfig</td>
<td><code>object</code></td>
<td>
<a href="https://github.com/ctxhou/react-text-style/blob/master/src/config.js#L23-L149">reference code</a>
</td>
<td>
Go <a href="#custom-config">Custom config</a> for more detail.
</td>
</tr>
</tbody>
</table>
### Custom config
The default custom config is [here](https://github.com/ctxhou/react-text-style/blob/master/src/config.js#L23-L149).
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:
```js
<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.
```js
<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.
## References
This lib is referenced a lot from [react-rte](https://github.com/sstur/react-rte).
For my personal use case, I don't need a full editor. The only thing I want to know is the style. That's why I created this component.
## Todo
- [ ] write more test
- [ ] extract the css from the component to remove webpack dependency
## License
MIT [@ctxhou](https://github.com/ctxhou)