https://github.com/seejamescode/draft-js-gutter

A reusable React.js component that compliments Draft.js with a line number gutter.
https://github.com/seejamescode/draft-js-gutter

Last synced: 3 months ago
JSON representation

A reusable React.js component that compliments Draft.js with a line number gutter.

• Host: GitHub
• URL: https://github.com/seejamescode/draft-js-gutter
• Owner: seejamescode
• Created: 2016-02-26T06:14:04.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-02-28T04:32:34.000Z (over 8 years ago)
• Last Synced: 2024-07-14T04:01:40.551Z (4 months ago)
• Language: JavaScript
• Homepage: http://seejamescode.github.io/draft-js-gutter/
• Size: 270 KB
• Stars: 14
• Watchers: 3
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-draft-js - Draft.js Gutter - Compliments line number gutter. (Plugins and Decorators Built for Draft.js)

README

        
# 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(

  

, 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](https://www.w3.org/wiki/HTML/Elements/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