Skip to content

Instantly share code, notes, and snippets.

@lixiaoyan lixiaoyan/README.md
Last active Apr 20, 2019

Embed
What would you like to do?
Draft.js with line number.
.line {
position: relative;
}
.line::before {
content: attr(data-line-number);
position: absolute;
left: 0;
top: 0;
opacity: 0.5;
}
.line-text {
margin-left: 2em;
}
import React from "react";
import ReactDOM from "react-dom";
import { Editor, EditorBlock, EditorState } from "draft-js";
class Line extends React.Component {
render() {
const { block, contentState } = this.props;
const lineNumber =
contentState
.getBlockMap()
.toList()
.findIndex(item => item.key === block.key) + 1;
return (
<div className="line" data-line-number={lineNumber}>
<div className="line-text">
<EditorBlock {...this.props} />
</div>
</div>
);
}
}
const blockRendererFn = () => ({
component: Line,
});
class App extends React.Component {
state = {
editorState: EditorState.createEmpty(),
};
handleChange = editorState => {
this.setState({ editorState });
};
render() {
return (
<Editor
editorState={this.state.editorState}
onChange={this.handleChange}
blockRendererFn={blockRendererFn}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector("#app"));
@schabluk

This comment has been minimized.

Copy link

commented Oct 17, 2017

This is very neat! Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.