A component that compliments Draft.js with a line number/letter gutter.
Install:
npm install draft-js draft-js-gutter --save
Example:
import React from 'react';
import ReactDOM from 'react-dom';
import { EditorGutter } from './Draft-js-gutter';
ReactDOM.render(
<EditorGutter
style={{border: '1px solid black'}}
styleList={{background: '#eee'}} />
, document.getElementById('root'));
Props:
- editor {object} - Spreads all props to the editor
- editorState - Accepts whatever you want the editor component's default state to be. Creates empty editorState if no property specified.
- list {object} - List object accepts all html attributes for ol elements as properties
- style {object}
- styleEditor {object}
- styleList {object}
- styleListItem {object}
To Develop:
git clone https://github.com/yepnamesjames/draft-js-gutter.git
cd draft-js-gutter
npm install
npm start
Navigate to localhost:3000.
To Build:
npm run build
Things that could make this better:
- Accept the editor as a child component
- Manipulate the editor's onChange to accept a prop and append necessary function
- Check line height for each line and apply it to the appropiate gutter text
- Default themes for styling
MIT