diff --git a/packages/strapi-admin/admin/src/app.js b/packages/strapi-admin/admin/src/app.js index 2fe87139cf..57ba3e6023 100644 --- a/packages/strapi-admin/admin/src/app.js +++ b/packages/strapi-admin/admin/src/app.js @@ -7,6 +7,21 @@ import '@babel/polyfill'; import 'sanitize.css/sanitize.css'; + +// Third party css library needed +// Currently unable to bundle them. +import 'codemirror/lib/codemirror.css'; +import 'codemirror/theme/liquibyte.css'; +import 'codemirror/theme/xq-dark.css'; +import 'codemirror/theme/3024-day.css'; +import 'codemirror/theme/3024-night.css'; +import 'codemirror/theme/blackboard.css'; +import 'codemirror/theme/monokai.css'; +import 'codemirror/theme/cobalt.css'; + +import 'react-select/dist/react-select.css'; +import 'react-datetime/css/react-datetime.css'; + import './styles/main.scss'; import React from 'react'; diff --git a/packages/strapi-admin/admin/src/plugins.js b/packages/strapi-admin/admin/src/plugins.js index 50173c7d92..450ed7eaec 100644 --- a/packages/strapi-admin/admin/src/plugins.js +++ b/packages/strapi-admin/admin/src/plugins.js @@ -17,26 +17,28 @@ window.strapi = Object.assign(window.strapi || {}, { }); module.exports = { + 'content-manager': require('../../../strapi-plugin-content-manager/admin/dist/strapi-plugin-content-manager.esm.js') + .default, // 'content-manager': require('../../../strapi-plugin-content-manager/admin/src') // .default, 'content-type-builder': require('../../../strapi-plugin-content-type-builder/admin/dist/strapi-plugin-content-type-builder.esm.js') .default, - // 'content-type-builder': require('../../../strapi-plugin-content-type-builder/admin/src') - // .default, - // require('../../../strapi-plugin') - // .default, - email: require('../../../strapi-plugin-email/admin/dist/strapi-plugin-email.esm.js') - .default, - 'users-permissions': require('../../../strapi-plugin-users-permissions/admin/dist/strapi-users-permissions.esm.js') - .default, - // // 'settings-manager': - // // // 'settings-manager': require('../../../strapi-plugin-settings-manager/admin/src') - // // // .default, - // // require('../../../strapi-plugin-settings-manager/admin/dist/strapi-plugin-settings-manager.esm') + // // 'content-type-builder': require('../../../strapi-plugin-content-type-builder/admin/src') // // .default, - // // upload: require('../../../strapi-plugin-upload/admin/src').default, + // // require('../../../strapi-plugin') + // // .default, + // email: require('../../../strapi-plugin-email/admin/dist/strapi-plugin-email.esm.js') + // .default, + // 'users-permissions': require('../../../strapi-plugin-users-permissions/admin/dist/strapi-users-permissions.esm.js') + // .default, + // // // 'settings-manager': + // // // // 'settings-manager': require('../../../strapi-plugin-settings-manager/admin/src') + // // // // .default, + // // // require('../../../strapi-plugin-settings-manager/admin/dist/strapi-plugin-settings-manager.esm') + // // // .default, + // // // upload: require('../../../strapi-plugin-upload/admin/src').default, upload: require('../../../strapi-plugin-upload/admin/dist/strapi-plugin-upload.esm.js') .default, - // 'users-permissions': require('../../../strapi-plugin-users-permissions/admin/src') - // .default, + 'users-permissions': require('../../../strapi-plugin-users-permissions/admin/src') + .default, }; diff --git a/packages/strapi-admin/package.json b/packages/strapi-admin/package.json index 1cce436ddc..616eb79742 100644 --- a/packages/strapi-admin/package.json +++ b/packages/strapi-admin/package.json @@ -28,6 +28,7 @@ "@babel/polyfill": "^7.4.3", "@babel/runtime": "^7.4.3", "classnames": "^2.2.6", + "codemirror": "^5.45.0", "crypto": "^1.0.1", "history": "^4.9.0", "hoist-non-react-statics": "^3.3.0", @@ -38,6 +39,7 @@ "prop-types": "^15.7.2", "react": "^16.5.2", "react-copy-to-clipboard": "^5.0.1", + "react-datetime": "^2.16.3", "react-dnd": "^7.4.5", "react-dnd-html5-backend": "^7.4.4", "react-dom": "^16.5.2", @@ -48,6 +50,7 @@ "react-redux": "^5.1.1", "react-router": "^5.0.0", "react-router-dom": "^5.0.0", + "react-select": "^1.3.0", "react-transition-group": "^2.9.0", "reactstrap": "^5.0.0", "redux": "^4.0.1", diff --git a/packages/strapi-plugin-content-manager/.babelrc b/packages/strapi-plugin-content-manager/.babelrc new file mode 100644 index 0000000000..69a1670ad5 --- /dev/null +++ b/packages/strapi-plugin-content-manager/.babelrc @@ -0,0 +1,19 @@ +{ + "presets": [ + [ + "@babel/preset-env", + { + "modules": false, + "loose": true, + "targets": { + "browsers": ["since 2017"] + } + } + ], + "@babel/preset-react" + ], + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-syntax-dynamic-import" + ] +} diff --git a/packages/strapi-plugin-content-manager/admin/src/components/InputJSON/index.js b/packages/strapi-plugin-content-manager/admin/src/components/InputJSON/index.js index de232eba62..4938aa1ef9 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/InputJSON/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/InputJSON/index.js @@ -1,26 +1,17 @@ /** - * + * * InputJSON - * + * */ - import React from 'react'; import PropTypes from 'prop-types'; import cm from 'codemirror'; -import 'codemirror/lib/codemirror.css'; import 'codemirror/mode/javascript/javascript'; import 'codemirror/addon/lint/lint'; import 'codemirror/addon/lint/javascript-lint'; import 'codemirror/addon/edit/closebrackets'; import 'codemirror/addon/selection/mark-selection'; -import 'codemirror/theme/liquibyte.css'; -import 'codemirror/theme/xq-dark.css'; -import 'codemirror/theme/3024-day.css'; -import 'codemirror/theme/3024-night.css'; -import 'codemirror/theme/blackboard.css'; -import 'codemirror/theme/monokai.css'; -import 'codemirror/theme/cobalt.css'; import { isEmpty, isObject, trimStart } from 'lodash'; import jsonlint from './jsonlint'; @@ -30,7 +21,15 @@ const WAIT = 600; const stringify = JSON.stringify; const parse = JSON.parse; const DEFAULT_THEME = 'monokai'; -const THEMES = ['blackboard', 'cobalt', 'monokai', '3024-day', '3024-night', 'liquibyte', 'xq-dark']; +const THEMES = [ + 'blackboard', + 'cobalt', + 'monokai', + '3024-day', + '3024-night', + 'liquibyte', + 'xq-dark', +]; class InputJSON extends React.Component { constructor(props) { @@ -60,7 +59,11 @@ class InputJSON extends React.Component { } componentDidUpdate(prevProps) { - if (isEmpty(prevProps.value) && !isEmpty(this.props.value) && !this.state.hasInitValue) { + if ( + isEmpty(prevProps.value) && + !isEmpty(this.props.value) && + !this.state.hasInitValue + ) { this.setInitValue(); } } @@ -74,30 +77,24 @@ class InputJSON extends React.Component { this.setState({ hasInitValue: true }); return this.codeMirror.setValue(stringify(value, null, 2)); - } catch(err) { - + } catch (err) { return this.setState({ error: true }); } } - } + }; setSize = () => this.codeMirror.setSize('100%', 'auto'); - setTheme = (theme) => this.codeMirror.setOption('theme', theme); + setTheme = theme => this.codeMirror.setOption('theme', theme); - getContentAtLine = (line) => this.codeMirror.getLine(line); + getContentAtLine = line => this.codeMirror.getLine(line); - getEditorOption = (opt) => this.codeMirror.getOption(opt); + getEditorOption = opt => this.codeMirror.getOption(opt); getValue = () => this.codeMirror.getValue(); markSelection = ({ message }) => { - let line = parseInt( - message - .split(':')[0] - .split('line ')[1], - 10, - ) - 1; + let line = parseInt(message.split(':')[0].split('line ')[1], 10) - 1; let content = this.getContentAtLine(line); @@ -107,16 +104,21 @@ class InputJSON extends React.Component { } const chEnd = content.length; const chStart = chEnd - trimStart(content, ' ').length; - const markedText = this.codeMirror.markText({ line, ch: chStart }, { line, ch: chEnd }, { className: styles.colored }); + const markedText = this.codeMirror.markText( + { line, ch: chStart }, + { line, ch: chEnd }, + { className: styles.colored }, + ); this.setState({ markedText }); - } + }; timer = null; handleBlur = ({ target }) => { const { name, onBlur } = this.props; - - if (target === undefined) { // codemirror catches multiple events + + if (target === undefined) { + // codemirror catches multiple events onBlur({ target: { name, @@ -124,9 +126,8 @@ class InputJSON extends React.Component { value: this.getValue(), }, }); - } - } + }; handleChange = () => { const { hasInitValue } = this.state; @@ -135,7 +136,7 @@ class InputJSON extends React.Component { try { value = parse(value); - } catch(err) { + } catch (err) { // Silent } @@ -157,18 +158,21 @@ class InputJSON extends React.Component { this.state.markedText.clear(); this.setState({ markedText: null, error: null }); } - - clearTimeout(this.timer); - this.timer = setTimeout(() => this.testJSON(this.codeMirror.getValue()), WAIT); - } - testJSON = (value) => { + clearTimeout(this.timer); + this.timer = setTimeout( + () => this.testJSON(this.codeMirror.getValue()), + WAIT, + ); + }; + + testJSON = value => { try { jsonlint.parse(value); - } catch(err) { + } catch (err) { this.markSelection(err); } - } + }; render() { if (this.state.error) { @@ -177,9 +181,22 @@ class InputJSON extends React.Component { return (
-