From 9532a5e8a4c3cc3a18aa2a562df1236f661d61bf Mon Sep 17 00:00:00 2001 From: raymond Date: Sun, 18 Mar 2018 21:10:21 +0100 Subject: [PATCH 1/6] - Update dev depencies - Update to React.Component class - Fix SSR error where the id attribute would not match - Update example --- .babelrc | 13 + .eslintrc | 87 +- examples/Tiny.js | 75 +- index.html | 8 +- package.json | 42 +- scripts/build | 2 - src/TinyMCEInput.js | 315 ++- webpack.config.js | 28 +- yarn.lock | 6248 +++++++++++++++++++++++++++++++++++++++++++ 9 files changed, 6583 insertions(+), 235 deletions(-) create mode 100644 .babelrc delete mode 100755 scripts/build create mode 100644 yarn.lock diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..1e78999 --- /dev/null +++ b/.babelrc @@ -0,0 +1,13 @@ +{ + "presets": [ + "env", + "react", + "stage-0" + ], + "plugins": [ + "transform-class-properties", + "transform-decorators", + "transform-react-constant-elements", + "transform-react-inline-elements" + ] +} diff --git a/.eslintrc b/.eslintrc index 1dd7526..aecf1a6 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,38 +1,65 @@ { - "parser": "babel-eslint", "env": { "browser": true, "node": true, "mocha": true }, - "plugins": [ - "react" - ], - "ecmaFeatures": { - "jsx": true + "parserOptions": { + "ecmaVersion": 6, + "sourceType": "module", + "ecmaFeatures": { + "modules": true, + "forOf": true, + "jsx": true, + "es6": true, + "spread": true, + "experimentalObjectRestSpread": true, + "experimentalDecorators": true + } }, "rules": { - "strict": [0], - "quotes": [2, "single"], - "eol-last": [0], - "no-mixed-requires": [0], - "no-underscore-dangle": [0], - "no-alert": [0], - "key-spacing": [0], - "camelcase": [0], - "no-multi-spaces": [0], - "react/display-name": 1, - "react/jsx-boolean-value": 1, - "react/jsx-quotes": 1, - "react/jsx-no-undef": 1, - "react/jsx-uses-react": 1, - "react/jsx-uses-vars": 1, - "react/no-did-mount-set-state": 1, - "react/no-did-update-set-state": 1, - "react/no-unknown-property": 1, - "react/prop-types": 1, - "react/react-in-jsx-scope": 1, - "react/self-closing-comp": 1, - "react/wrap-multilines": 1 - } -} \ No newline at end of file + "padded-blocks": 0, + "react/no-multi-comp": 0, + "import/default": 0, + "import/no-duplicates": 0, + "import/named": 0, + "import/namespace": 0, + "import/no-unresolved": 0, + "import/no-named-as-default": 2, + "comma-dangle": 0, // not sure why airbnb turned this on. gross! + "indent": [2, 2, {"SwitchCase": 1}], + "no-console": 0, + "no-alert": 0, + "id-length": [2, {"min": 1, "properties": "never"}], + "object-curly-spacing": ["error", "never"], + "prefer-template": 0, + "max-len": ["error", 300, 2, {"ignoreUrls": true}], + "react/prefer-stateless-function": 0, + "consistent-return": 0, + "no-labels": 0, + "quote-props": 0, + "no-empty-label": 0, + "space-after-keywords": 0, + "space-return-throw-case": 0, + "no-return-assign": 0, + "react/jsx-indent-props": 0, + "react/jsx-space-before-closing": 0, + "arrow-body-style": 0, + "react/jsx-closing-bracket-location": 0, + "space-in-parens": 0, + "array-callback-return": 0, + "arrow-spacing": 0, + "no-param-reassign": 0, + "object-shorthand": 0, + "react/sort-comp": 0, + "array-bracket-spacing": 0, + "react/jsx-first-prop-new-line": 0, + "no-underscore-dangle": 0, + "global-require": 0, + "jsx-a11y/anchor-has-content": 0, + "react/forbid-prop-types": 0 + }, + "plugins": [ + "react" + ] +} diff --git a/examples/Tiny.js b/examples/Tiny.js index b2c3f05..3d6befb 100644 --- a/examples/Tiny.js +++ b/examples/Tiny.js @@ -1,17 +1,17 @@ -var React = require('react') - , ReactDOM = require('react-dom') - , createReactClass = require('create-react-class') - , TinyMCEInput = require('../src/TinyMCEInput'); +import React from 'react'; +import ReactDOM from 'react-dom'; +import {hot} from 'react-hot-loader' +import TinyMCEInput from '../src/TinyMCEInput'; const TINYMCE_CONFIG = { - 'language' : 'en', - 'theme' : 'modern', - 'toolbar' : 'bold italic underline strikethrough hr | bullist numlist | link unlink | undo redo | spellchecker code', - 'menubar' : false, - 'statusbar' : true, - 'resize' : true, - 'plugins' : 'link,spellchecker,paste', - 'theme_modern_toolbar_location' : 'top', + 'language': 'en', + 'theme': 'modern', + 'toolbar': 'bold italic underline strikethrough hr | bullist numlist | link unlink | undo redo | spellchecker code', + 'menubar': false, + 'statusbar': true, + 'resize': true, + 'plugins': 'link,spellchecker,paste', + 'theme_modern_toolbar_location': 'top', 'theme_modern_toolbar_align': 'left' }; @@ -19,31 +19,41 @@ const INLINE_TINYMCE_CONFIG = { inline: true, }; -var Tiny = createReactClass({ - displayName: 'TinyMCEExample', - getInitialState: function() { - return { +class Tiny extends React.Component { + constructor() { + super(); + this.state = { value: '', editMode: false }; - }, - onClick: function() { - this.setState({ editMode: !this.state.editMode }); - }, - onChange: function(newValue) { - this.setState({ value: newValue }); - }, - onTextAreaChange: function(e) { - this.setState({ value: e.target.value }); - }, - render: function() { + this.onClick = this.onClick.bind(this); + this.onChange = this.onChange.bind(this); + this.onTextAreaChange = this.onTextAreaChange.bind(this); + } + + onClick() { + this.setState({editMode: !this.state.editMode}); + } + + onChange(newValue) { + this.setState({value: newValue}); + } + + onTextAreaChange(e) { + this.setState({value: e.target.value}); + } + + render() { return (

Main

Inline

- +

Raw

{this.state.value}
@@ -52,11 +62,12 @@ var Tiny = createReactClass({