Skip to content
A reusable React.js component that compliments Draft.js with a line number gutter.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src Fixed gutter width Feb 28, 2016
.babelrc
.gitignore
README.md
devServer.js GH-Pages now ready Feb 26, 2016
index.html
package.json
webpack.config.dev.js
webpack.config.dist.js
webpack.config.gh-pages.js

README.md

Draft.js Gutter

A component that compliments Draft.js with a line number/letter gutter.

To Use

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 Contribute

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

License

MIT

You can’t perform that action at this time.