feat: upgrade to Emotion 10 (#2166)
This commit is contained in:
@ -21,9 +21,9 @@
|
||||
"build": "cross-env NODE_ENV=production webpack"
|
||||
},
|
||||
"dependencies": {
|
||||
"is-hotkey": "^0.1.1",
|
||||
"mdast-util-definitions": "^1.2.2",
|
||||
"mdast-util-to-string": "^1.0.4",
|
||||
"is-hotkey": "^0.1.4",
|
||||
"mdast-util-definitions": "^1.2.3",
|
||||
"mdast-util-to-string": "^1.0.5",
|
||||
"rehype-parse": "^3.1.0",
|
||||
"rehype-remark": "^2.0.0",
|
||||
"rehype-stringify": "^3.0.0",
|
||||
@ -42,18 +42,18 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"cross-env": "^5.2.0",
|
||||
"webpack": "^4.16.1",
|
||||
"webpack-cli": "^3.1.0"
|
||||
"webpack": "^4.29.6",
|
||||
"webpack-cli": "^3.2.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"emotion": "^9.2.6",
|
||||
"@emotion/core": "^10.0.9",
|
||||
"@emotion/styled": "^10.0.9",
|
||||
"immutable": "^3.7.6",
|
||||
"lodash": "^4.17.10",
|
||||
"netlify-cms-ui-default": "^2.0.0",
|
||||
"prop-types": "^15.5.10",
|
||||
"react": "^16.4.1",
|
||||
"react-dom": "^16.0.0",
|
||||
"react-emotion": "^9.2.5",
|
||||
"react-immutable-proptypes": "^2.1.0"
|
||||
}
|
||||
}
|
||||
|
@ -1,7 +1,8 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import styled, { css, cx } from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
import { ClassNames } from '@emotion/core';
|
||||
import { Editor as Slate } from 'slate-react';
|
||||
import Plain from 'slate-plain-serializer';
|
||||
import { debounce } from 'lodash';
|
||||
@ -9,8 +10,8 @@ import { lengths, fonts } from 'netlify-cms-ui-default';
|
||||
import { editorStyleVars, EditorControlBar } from '../styles';
|
||||
import Toolbar from './Toolbar';
|
||||
|
||||
const styles = {
|
||||
slateRaw: css`
|
||||
const styleStrings = {
|
||||
slateRaw: `
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
@ -83,12 +84,21 @@ export default class RawEditor extends React.Component {
|
||||
rawMode
|
||||
/>
|
||||
</EditorControlBar>
|
||||
<Slate
|
||||
className={cx(className, styles.slateRaw)}
|
||||
value={this.state.value}
|
||||
onChange={this.handleChange}
|
||||
onPaste={this.handlePaste}
|
||||
/>
|
||||
<ClassNames>
|
||||
{({ css, cx }) => (
|
||||
<Slate
|
||||
className={cx(
|
||||
className,
|
||||
css`
|
||||
${styleStrings.slateRaw}
|
||||
`,
|
||||
)}
|
||||
value={this.state.value}
|
||||
onChange={this.handleChange}
|
||||
onPaste={this.handlePaste}
|
||||
/>
|
||||
)}
|
||||
</ClassNames>
|
||||
</RawEditorContainer>
|
||||
);
|
||||
}
|
||||
|
@ -2,7 +2,8 @@
|
||||
|
||||
import React from 'react';
|
||||
import { Map } from 'immutable';
|
||||
import styled, { css } from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
import { css } from '@emotion/core';
|
||||
import { partial, capitalize } from 'lodash';
|
||||
import { ListItemTopBar, components, colors, lengths } from 'netlify-cms-ui-default';
|
||||
import { getEditorControl, getEditorComponents } from './index';
|
||||
|
@ -1,7 +1,8 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import styled, { css } from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
import { css } from '@emotion/core';
|
||||
import { List } from 'immutable';
|
||||
import {
|
||||
Toggle,
|
||||
@ -24,6 +25,7 @@ const ToolbarContainer = styled.div`
|
||||
padding: 11px 14px;
|
||||
min-height: 58px;
|
||||
transition: background-color ${transitions.main}, color ${transitions.main};
|
||||
color: ${colors.text};
|
||||
`;
|
||||
|
||||
const ToolbarDropdownWrapper = styled.div`
|
||||
|
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
import { Icon, buttons } from 'netlify-cms-ui-default';
|
||||
|
||||
const StyledToolbarButton = styled.button`
|
||||
|
@ -1,7 +1,8 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import styled, { cx } from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
import { ClassNames } from '@emotion/core';
|
||||
import { get, isEmpty, debounce, uniq } from 'lodash';
|
||||
import { List } from 'immutable';
|
||||
import { Value, Document, Block, Text } from 'slate';
|
||||
@ -259,19 +260,28 @@ export default class Editor extends React.Component {
|
||||
buttons={field.get('buttons')}
|
||||
/>
|
||||
</EditorControlBar>
|
||||
<Slate
|
||||
className={cx(className, visualEditorStyles)}
|
||||
value={this.state.value}
|
||||
renderNode={renderNode}
|
||||
renderMark={renderMark}
|
||||
validateNode={validateNode}
|
||||
plugins={plugins}
|
||||
onChange={this.handleChange}
|
||||
onKeyDown={onKeyDown}
|
||||
onPaste={this.handlePaste}
|
||||
ref={this.processRef}
|
||||
spellCheck
|
||||
/>
|
||||
<ClassNames>
|
||||
{({ css, cx }) => (
|
||||
<Slate
|
||||
className={cx(
|
||||
className,
|
||||
css`
|
||||
${visualEditorStyles}
|
||||
`,
|
||||
)}
|
||||
value={this.state.value}
|
||||
renderNode={renderNode}
|
||||
renderMark={renderMark}
|
||||
validateNode={validateNode}
|
||||
plugins={plugins}
|
||||
onChange={this.handleChange}
|
||||
onKeyDown={onKeyDown}
|
||||
onPaste={this.handlePaste}
|
||||
ref={this.processRef}
|
||||
spellCheck
|
||||
/>
|
||||
)}
|
||||
</ClassNames>
|
||||
</VisualEditorContainer>
|
||||
);
|
||||
}
|
||||
|
@ -1,8 +1,7 @@
|
||||
import { css } from 'react-emotion';
|
||||
import { colors, lengths, fonts } from 'netlify-cms-ui-default';
|
||||
import { editorStyleVars } from '../styles';
|
||||
|
||||
export default css`
|
||||
export default `
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
|
@ -1,4 +1,4 @@
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
export const editorStyleVars = {
|
||||
stickyDistanceBottom: '100px',
|
||||
|
Reference in New Issue
Block a user