├── src
├── index.js
└── editor.js
├── .babelrc
├── .eslintrc
├── .gitignore
├── package.json
├── LICENSE
└── README.md
/src/index.js:
--------------------------------------------------------------------------------
1 | import Editor from './editor';
2 |
3 | export default Editor;
4 |
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | "es2015",
4 | "stage-0",
5 | "react"
6 | ],
7 | "env": {
8 | "development": {
9 | "plugins": [
10 | "typecheck"
11 | ]
12 | }
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "airbnb",
3 | "prefer-const": 1,
4 | "rules": {
5 | "curly": 0,
6 | "indent": [
7 | 2,
8 | 4
9 | ],
10 | "id-length": 0,
11 | "jsx-quotes": [2, "prefer-single"],
12 | "new-cap": 0
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 |
5 | # Runtime data
6 | pids
7 | *.pid
8 | *.seed
9 |
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 |
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 |
16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17 | .grunt
18 |
19 | # node-waf configuration
20 | .lock-wscript
21 |
22 | # Compiled binary addons (http://nodejs.org/api/addons.html)
23 | build/Release
24 |
25 | # Dependency directory
26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
27 | node_modules
28 |
29 | .publish
30 | builds
31 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-medium-editor-es6",
3 | "version": "0.1.0",
4 | "description": "React wrapper for medium-editor",
5 | "main": "src/index.js",
6 | "scripts": {},
7 | "repository": {
8 | "type": "git",
9 | "url": "https://github.com/channikhabra/react-medium-editor-es6.git"
10 | },
11 | "keywords": [
12 | "react",
13 | "react-component",
14 | "medium",
15 | "editor"
16 | ],
17 | "author": "Charanjit Singh",
18 | "license": "MIT",
19 | "dependencies": {
20 | "medium-editor": "^5.14.4"
21 | },
22 | "devDependencies": {
23 | "babel-core": "^6.6.5",
24 | "babel-loader": "^6.2.4",
25 | "babel-preset-es2015": "^6.6.0",
26 | "babel-preset-react": "^6.5.0"
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 Wang Zuo
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/src/editor.js:
--------------------------------------------------------------------------------
1 | import React, {
2 | Component,
3 | PropTypes,
4 | } from 'react';
5 | import ReactDOM from 'react-dom';
6 |
7 | let _MediumEditor;
8 |
9 | if (typeof document !== 'undefined') {
10 | _MediumEditor = require('medium-editor');
11 | }
12 |
13 | export default class MediumEditor extends Component {
14 | static propTypes = {
15 | tag: PropTypes.string,
16 | text: PropTypes.string,
17 | options: PropTypes.any,
18 | onChange: PropTypes.func,
19 | flushEditorDOM: PropTypes.bool,
20 | };
21 |
22 | static defaultProps = {
23 | tag: 'div',
24 | text: '',
25 | onChange: () => {},
26 | };
27 |
28 | componentDidMount = () => {
29 | const dom = ReactDOM.findDOMNode(this);
30 |
31 | this.medium = new _MediumEditor(dom, this.props.options);
32 | this.medium.subscribe('editableInput', () => {
33 | this.props.onChange(dom.innerHTML);
34 | });
35 | this.medium.setContent(this.props.text);
36 | };
37 |
38 | componentDidUpdate = () => {
39 | this.medium.restoreSelection();
40 | };
41 |
42 | componentWillUnmount = () => {
43 | this.medium.destroy();
44 | };
45 |
46 | render() {
47 | const tag = this.props.tag;
48 | const childProps = {
49 | ...this.props,
50 | };
51 |
52 | if (this.medium) {
53 | this.medium.saveSelection();
54 |
55 | if (this.props.flushEditorDOM) {
56 | this.medium.setContent(this.props.text);
57 | }
58 | }
59 |
60 | return React.createElement(tag, childProps);
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-medium-editor-es6
2 | ES6 version of React wrapper for [medium-editor](https://github.com/daviferreira/medium-editor)
3 |
4 | This repository is a fork of the original [react-medium-editor](https://github.com/wangzuo/react-medium-editor) react-wrapper by @wangzuo
5 |
6 | ## Installation
7 | ``` sh
8 | npm install react-medium-editor-es6 --save
9 | ```
10 |
11 | However, since this package exports an ES6 class, you'll need to load this with an appropriate handler (e.g babel). Here's an example of how you can do that if you're using webpack. Doing this with browserify is similar:
12 |
13 | ```js
14 | module.exports = {
15 | module: {
16 | loaders: [
17 | {
18 | test: /\.js$/,
19 | include: ([
20 | /react-medium-editor-es6\/src/,
21 | path.resolve(__dirname, 'src'),
22 | ]),
23 | loader: 'babel',
24 | }
25 | ]
26 | }
27 | }
28 | ```
29 |
30 | And you're good to go. This package is very little amount of code, so if you find some feature missing, just clone this repostory and `npm link` this package. No pesky rebuilding required for development.
31 |
32 | ## Usage
33 | ``` javascript
34 | import React, {
35 | Component,
36 | } from 'react';
37 |
38 | // load theme styles with webpack
39 | import 'medium-editor/dist/css/medium-editor.css';
40 | import 'medium-editor/dist/css/themes/default.css';
41 |
42 | import MediumEditor from 'react-medium-editor-es6';
43 |
44 | class App extends Component {
45 | render() {
46 | return (
47 |
48 |
57 |
58 | );
59 | }
60 | }
61 | ```
62 |
63 | ### Props
64 |
65 | - **tag** (string): Name of the HTML element which will be created for this component. In the above example, a `` element will be creaed and handed over to Medium editor
66 | - **text** (string): The content of the editor. It can be HTML content
67 | - **options** (object): [Medium editor options](https://github.com/yabwe/medium-editor#mediumeditor-options)
68 | - **onChange** (function): Callback which will be called when user changes the editor content
69 | - **flushEditorDOM** (boolean): An interesting problem I faced when no using any internal state was that normal `Undo` operation won't work, since react would re-render the component, set new editor content, and for the browser, the `undo` is lost. So because I am lazy, I decided to not write to DOM at all. I mean it does write to DOM, but not to the knowledge of react. This means that `props.text` don't change the actual content of the Editor. To do so, you need to pass `flushEditorDOM=true`. There's probably a better way to do this, feel free to fork and create a PR may be; or you can wait for me to solve it which might or might not happen depending on whether I see it as a problem at some point or not.
70 |
71 | ## Why the fork?
72 |
73 | Well, mostly because:
74 |
75 | - I am a prick. I should have modified the code and created a pull request instead, but I didn't. Because I am prick.
76 | - I had some propblems integrating the original component in my redux app, had to change some stuff and I didn't like all the `build`ing that was required. ES6 modules will be here soon anyway and it's much easier to work with them directly rather than requiring to build in 2 places (first the component, then the app) imo, so I forked it to an ES6 version
77 | - This component has some differences than the original component. We strictly use `props`, no internal state, and pay for the consequences too.
78 |
79 | ## License
80 | MIT
81 |
--------------------------------------------------------------------------------