Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor(all): remove create-react-class dependency #31

Closed
wants to merge 1 commit into from
Closed

refactor(all): remove create-react-class dependency #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions .babelrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
{
presets: [
'env',
'react'
"presets": [
"env",
"react",
"stage-2",
],
plugins: [
'transform-object-rest-spread'
"plugins": [
"transform-object-rest-spread"
]
}
16 changes: 7 additions & 9 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,18 +36,16 @@ const EditorWithPlugins = plugins(Editor); // Rich text editor component with pl
const toHTML = plugins(convertFromHTML); // function to convert from HTML including plugin functionality
const fromHTML = plugins(convertToHTML); // function to convert to HTML including plugin functionality

const MyEditor = React.createClass({
getInitialState() {
return {
editorState: EditorState.createWithContent(fromHTML('<div></div>'))
};
},

onChange(editorState) {
class MyEditor extends React.Comonent {
state = {
editorState: EditorState.createWithContent(fromHTML('<div></div>'))
}

onChange = (editorState) => {
const html = toHTML(editorState.getCurrentContent());
console.log(html); // don't actually convert to HTML on every change!
this.setState({editorState});
},
}

render() {
return (
Expand Down
22 changes: 11 additions & 11 deletions example/ToolbarButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,5 @@
window.ToolbarButton = createReactClass({
getDefaultProps: function() {
return {
active: false,
label: '',
onClick: function() {}
};
},

render: function() {
class ToolbarButton extends React.Component {
render () {
var toolbarButtonStyle = {
display: 'inline-block',
minWidth: '24px',
Expand All @@ -29,4 +21,12 @@ window.ToolbarButton = createReactClass({
}, this.props.label)
);
}
});
};

ToolbarButton.defaultProps = {
active: false,
label: '',
onClick: function() {}
};

window.ToolbarButton = ToolbarButton;
23 changes: 10 additions & 13 deletions example/blockStyles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@
<body>
<div id="target"></div>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/create-react-class/create-react-class.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom-server.browser.development.js"></script>
<script src="../node_modules/immutable/dist/immutable.min.js"></script>
Expand Down Expand Up @@ -95,19 +94,17 @@
const toHTML = BlockPlugin(convertToHTML);
const fromHTML = BlockPlugin(convertFromHTML);

const BlockStylesExample = createReactClass({
getInitialState() {
return {
editorState: EditorState.createWithContent(
fromHTML('<h1>Block style plugin</h1><ul><li>list item 1</li><li>list item 2</li></ul>')
)
};
},
class BlockStylesExample extends React.Component {
state = {
editorState: EditorState.createWithContent(
fromHTML('<h1>Block style plugin</h1><ul><li>list item 1</li><li>list item 2</li></ul>')
)
}

onChange(editorState) {
onChange = (editorState) => {
console.log(toHTML(editorState.getCurrentContent()));
this.setState({editorState});
},
}

render() {
return (
Expand All @@ -125,7 +122,7 @@
</div>
);
}
});
};

const WrappedComponent = KeyCommandController(BlockStylesExample);

Expand All @@ -135,6 +132,6 @@
);
</script>
<script>
eval(Babel.transform(document.querySelector('script[type="text/babel"]').innerText, { presets: ['es2015', 'react']}).code)
eval(Babel.transform(document.querySelector('script[type="text/babel"]').innerText, { presets: ['es2015', 'react', 'stage-2']}).code)
</script>
</body>
23 changes: 10 additions & 13 deletions example/inlineStyles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@
<body>
<div id="target"></div>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/create-react-class/create-react-class.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom-server.browser.development.js"></script>
<script src="../node_modules/immutable/dist/immutable.min.js"></script>
Expand Down Expand Up @@ -93,19 +92,17 @@
const toHTML = InlinePlugin(convertToHTML);
const fromHTML = InlinePlugin(convertFromHTML);

const InlineStylesExample = createReactClass({
getInitialState() {
return {
editorState: EditorState.createWithContent(
fromHTML('<div><strong>Inline</strong> styles <em>example</em></div>')
)
};
},
class InlineStylesExample extends React.Component {
state = {
editorState: EditorState.createWithContent(
fromHTML('<div><strong>Inline</strong> styles <em>example</em></div>')
)
}

onChange(editorState) {
onChange = (editorState) => {
console.log(toHTML(editorState.getCurrentContent()));
this.setState({editorState});
},
}

render() {
return (
Expand All @@ -116,14 +113,14 @@
/>
);
}
});
};

ReactDOM.render(
<InlineStylesExample />,
document.getElementById('target')
);
</script>
<script>
eval(Babel.transform(document.querySelector('script[type="text/babel"]').innerText, { presets: ['es2015', 'react']}).code)
eval(Babel.transform(document.querySelector('script[type="text/babel"]').innerText, { presets: ['es2015', 'react', 'stage-2']}).code)
</script>
</body>
23 changes: 10 additions & 13 deletions example/link.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@
<body>
<div id="target"></div>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/create-react-class/create-react-class.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom-server.browser.development.js"></script>
<script src="../node_modules/immutable/dist/immutable.min.js"></script>
Expand Down Expand Up @@ -122,19 +121,17 @@
const toHTML = LinkPlugin(convertToHTML);
const fromHTML = LinkPlugin(convertFromHTML);

const LinkExample = createReactClass({
getInitialState() {
return {
editorState: EditorState.createWithContent(
fromHTML('<div>Link example <a href="http://draftjs.org">Draft</a></div>')
)
};
},
class LinkExample extends React.Component {
state = {
editorState: EditorState.createWithContent(
fromHTML('<div>Link example <a href="http://draftjs.org">Draft</a></div>')
)
}

onChange(editorState) {
onChange = (editorState) => {
console.log(toHTML(editorState.getCurrentContent()));
this.setState({editorState});
},
}

render() {
return (
Expand All @@ -144,14 +141,14 @@
/>
);
}
});
};

ReactDOM.render(
<LinkExample />,
document.getElementById('target')
);
</script>
<script>
eval(Babel.transform(document.querySelector('script[type="text/babel"]').innerText, { presets: ['es2015', 'react']}).code)
eval(Babel.transform(document.querySelector('script[type="text/babel"]').innerText, { presets: ['es2015', 'react', 'stage-2']}).code)
</script>
</body>
Loading