Skip to content

Commit cdeefe4

Browse files
jpurijpuri
authored
Update emotion library used for styling (#186)
1 parent 56c33cb commit cdeefe4

File tree

21 files changed

+11002
-156
lines changed

21 files changed

+11002
-156
lines changed

‎packages/core/package.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,9 @@
2121
},
2222
"homepage": "https://github.com/jpuri/Nib/tree/master/packages/core#Readme.md",
2323
"dependencies": {
24-
"@emotion/core": "^10.0.14",
25-
"@emotion/styled": "^10.0.14",
24+
"@emotion/react": "^11.11.0",
25+
"@emotion/styled": "^11.11.0",
2626
"axios": "^1.4.0",
27-
"emotion-theming": "^10.0.14",
2827
"nib-embed": "2.1.6",
2928
"nib-schema": "2.4.7",
3029
"nib-ui": "2.4.13",

‎packages/core/src/components/Editor/styles.ts

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import styled from '@emotion/styled';
1+
import styled from "@emotion/styled";
22

3-
import BlockPlugin from '../../plugins/block';
4-
import { EditorStyle } from '../../types/editor-style';
3+
import BlockPlugin from "../../plugins/block";
4+
import { EditorStyle } from "../../types/editor-style";
55

66
const prosemirrorStyles = `
77
& .ProseMirror {
@@ -42,7 +42,7 @@ const prosemirrorStyles = `
4242
// todo: fix use of any below
4343
export const StyledWrapper = styled(
4444
styled.div(
45-
{ position: 'relative', textAlign: 'left' },
45+
{ position: "relative", textAlign: "left" },
4646
({ theme }: { theme: EditorStyle }) => {
4747
const { constants, wrapper } = theme;
4848
return {
@@ -65,11 +65,11 @@ export const StyledWrapper = styled(
6565
export const StyledEditor = styled(
6666
styled.div(
6767
{
68-
border: 'none',
69-
overflow: 'auto',
68+
border: "none",
69+
overflow: "auto",
7070
padding: 4,
71-
position: 'relative',
72-
textAlign: 'left',
71+
position: "relative",
72+
textAlign: "left",
7373
},
7474
// todo: Fix confusion use of variable theme below
7575
({ theme: { constants, editor } }: { theme: EditorStyle }) => ({

‎packages/core/src/components/PopupHandler/index.tsx

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import * as React from 'react';
2-
import { MutableRefObject, useEffect, useState } from 'react';
3-
import { withTheme } from 'emotion-theming';
1+
import * as React from "react";
2+
import { MutableRefObject, useEffect, useState } from "react";
3+
import { withTheme } from "@emotion/react";
44

5-
import getPropertyFromPlugins from '../../utils/editor/pluginProperty';
6-
import { Addon } from '../../types/addon';
7-
import { EditorPopup } from '../../types/components';
8-
import { EditorTheme } from '../../types/editor-theme';
9-
import { VisiblePopup, getVisiblePopups } from './util';
10-
import { useConfigContext } from '../../context/config/index';
11-
import { usePMStateContext } from '../../context/pm-state/index';
5+
import getPropertyFromPlugins from "../../utils/editor/pluginProperty";
6+
import { Addon } from "../../types/addon";
7+
import { EditorPopup } from "../../types/components";
8+
import { EditorTheme } from "../../types/editor-theme";
9+
import { VisiblePopup, getVisiblePopups } from "./util";
10+
import { useConfigContext } from "../../context/config/index";
11+
import { usePMStateContext } from "../../context/pm-state/index";
1212

13-
import inlineToolbar from '../Toolbar/Inline';
13+
import inlineToolbar from "../Toolbar/Inline";
1414

1515
interface PopupHandlerProps {
1616
addons?: Addon[];
@@ -34,14 +34,14 @@ const PopupHandler = ({
3434
const { plugins, toolbar } = config;
3535
let newPopups = getPropertyFromPlugins(
3636
plugins!.options!,
37-
'popups'
37+
"popups"
3838
) as EditorPopup[];
3939
addons.forEach((addon) => {
4040
if (addon.popups) {
4141
newPopups = [...newPopups, ...addon.popups];
4242
}
4343
});
44-
if (toolbar!.options!.indexOf('inline') >= 0) newPopups.push(inlineToolbar);
44+
if (toolbar!.options!.indexOf("inline") >= 0) newPopups.push(inlineToolbar);
4545
return newPopups;
4646
})();
4747

@@ -60,7 +60,7 @@ const PopupHandler = ({
6060
const { PopupComponent, marker } = visiblePopups[visiblePopups.length - 1];
6161

6262
const tablePopups = visiblePopups.filter(
63-
(popup) => popup.name === 'table_menu' || popup.name === 'cell_menu'
63+
(popup) => popup.name === "table_menu" || popup.name === "cell_menu"
6464
);
6565

6666
// todo: refactor table popups for a better implementation

‎packages/core/src/components/PortalHandler/index.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import * as React from 'react';
2-
import { withTheme } from 'emotion-theming';
1+
import * as React from "react";
2+
import { withTheme } from "@emotion/react";
33

4-
import { Addon } from '../../types/addon';
5-
import { EditorTheme } from '../../types/editor-theme';
6-
import { usePMStateContext } from '../../context/pm-state/index';
4+
import { Addon } from "../../types/addon";
5+
import { EditorTheme } from "../../types/editor-theme";
6+
import { usePMStateContext } from "../../context/pm-state/index";
77

88
interface PortalHandlerProps {
99
addons?: Addon[];

‎packages/core/src/components/Toolbar/Inline/index.tsx

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
1-
import * as React from 'react';
1+
import * as React from "react";
22
import {
33
FunctionComponent,
44
Fragment,
55
MouseEvent,
66
MutableRefObject,
77
useEffect,
88
useState,
9-
} from 'react';
10-
import styled from '@emotion/styled';
11-
import { Popup, Separator } from 'nib-ui';
12-
import { withTheme } from 'emotion-theming';
9+
} from "react";
10+
import styled from "@emotion/styled";
11+
import { Popup, Separator } from "nib-ui";
12+
import { withTheme } from "@emotion/react";
1313

14-
import getToolbarComponents from '../../../utils/editor/toolbar';
15-
import { useConfigContext } from '../../../context/config';
16-
import { usePMStateContext } from '../../../context/pm-state';
17-
import { EditorStyle } from '../../../types/editor-style';
18-
import { EditorPlugin } from '../../../types/application';
19-
import { EditorTheme } from '../../../types/editor-theme';
14+
import getToolbarComponents from "../../../utils/editor/toolbar";
15+
import { useConfigContext } from "../../../context/config";
16+
import { usePMStateContext } from "../../../context/pm-state";
17+
import { EditorStyle } from "../../../types/editor-style";
18+
import { EditorPlugin } from "../../../types/application";
19+
import { EditorTheme } from "../../../types/editor-theme";
2020

2121
interface InlineProps {
2222
editorWrapper: MutableRefObject<HTMLDivElement>;
@@ -43,7 +43,7 @@ const Inline: FunctionComponent<InlineProps> = ({
4343
const closePopup = () => {
4444
const { state, dispatch } = pmstate.pmview;
4545
// todo: here use a specific transaction for inline toolbar
46-
dispatch(state.tr.setMeta('hide-all-popups', true));
46+
dispatch(state.tr.setMeta("hide-all-popups", true));
4747
};
4848

4949
useEffect(() => {
@@ -80,11 +80,11 @@ const Inline: FunctionComponent<InlineProps> = ({
8080

8181
const Wrapper = styled.div(
8282
{
83-
alignItems: 'center',
84-
display: 'flex',
85-
position: 'relative',
86-
border: 'none',
87-
userSelect: 'none',
83+
alignItems: "center",
84+
display: "flex",
85+
position: "relative",
86+
border: "none",
87+
userSelect: "none",
8888
},
8989
({ theme: { constants, toolbar } }: { theme: EditorStyle }) => ({
9090
backgroundColor: constants.color.background.primary,
@@ -96,14 +96,14 @@ const Wrapper = styled.div(
9696
})
9797
);
9898

99-
const StyledPopup = styled(Popup)({ padding: '2px !important' });
99+
const StyledPopup = styled(Popup)({ padding: "2px !important" });
100100

101101
export default {
102-
name: 'toolbar',
102+
name: "toolbar",
103103
getMarker: (editorWrapper: MutableRefObject<HTMLDivElement | null>) =>
104104
editorWrapper.current &&
105105
editorWrapper.current.getElementsByClassName(
106-
'nib-selection-focus-marker'
106+
"nib-selection-focus-marker"
107107
)[0],
108108
component: withTheme(Inline),
109109
};

‎packages/core/src/components/Toolbar/Top/index.tsx

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
import * as React from 'react';
2-
import { Fragment, MouseEvent, MutableRefObject } from 'react';
3-
import styled from '@emotion/styled';
4-
import { withTheme } from 'emotion-theming';
1+
import * as React from "react";
2+
import { Fragment, MouseEvent, MutableRefObject } from "react";
3+
import styled from "@emotion/styled";
4+
import { withTheme } from "@emotion/react";
55

6-
import { Separator } from 'nib-ui';
6+
import { Separator } from "nib-ui";
77

8-
import getToolbarComponents from '../../../utils/editor/toolbar';
9-
import { Addon } from '../../../types/addon';
10-
import { EditorPlugin } from '../../../types/application';
11-
import { EditorStyle } from '../../../types/editor-style';
12-
import { useConfigContext } from '../../../context/config';
13-
import { usePMStateContext } from '../../../context/pm-state/index';
14-
import { EditorTheme } from '../../../types/editor-theme';
8+
import getToolbarComponents from "../../../utils/editor/toolbar";
9+
import { Addon } from "../../../types/addon";
10+
import { EditorPlugin } from "../../../types/application";
11+
import { EditorStyle } from "../../../types/editor-style";
12+
import { useConfigContext } from "../../../context/config";
13+
import { usePMStateContext } from "../../../context/pm-state/index";
14+
import { EditorTheme } from "../../../types/editor-theme";
1515

1616
interface TopProps {
1717
editorWrapper: MutableRefObject<HTMLDivElement | null>;
@@ -35,10 +35,10 @@ const TopToolbar = ({ editorWrapper, addons = [], theme }: TopProps) => {
3535
addons
3636
);
3737
const formattingOption = options.filter(
38-
(opt: EditorPlugin) => opt.name !== 'help'
38+
(opt: EditorPlugin) => opt.name !== "help"
3939
);
4040
const HelpOption = options.filter(
41-
(opt: EditorPlugin) => opt.name === 'help'
41+
(opt: EditorPlugin) => opt.name === "help"
4242
)[0];
4343

4444
return (
@@ -68,19 +68,19 @@ const TopToolbar = ({ editorWrapper, addons = [], theme }: TopProps) => {
6868

6969
const Wrapper = styled.div(
7070
{
71-
alignItems: 'flex-start',
72-
display: 'flex',
73-
flexWrap: 'nowrap',
74-
justifyContent: 'space-between',
71+
alignItems: "flex-start",
72+
display: "flex",
73+
flexWrap: "nowrap",
74+
justifyContent: "space-between",
7575

76-
position: 'relative',
76+
position: "relative",
7777
padding: 4,
7878

79-
borderLeft: 'none',
80-
borderRight: 'none',
81-
borderTop: 'none',
79+
borderLeft: "none",
80+
borderRight: "none",
81+
borderTop: "none",
8282

83-
userSelect: 'none',
83+
userSelect: "none",
8484
},
8585
({ theme: { constants, toolbar } }: { theme: EditorStyle }) => ({
8686
backgroundColor: constants.color.background.primary,
@@ -93,9 +93,9 @@ const Wrapper = styled.div(
9393
);
9494

9595
const ToolbarSection = styled.div({
96-
alignItems: 'center',
97-
display: 'flex',
98-
flexWrap: 'wrap',
96+
alignItems: "center",
97+
display: "flex",
98+
flexWrap: "wrap",
9999
});
100100

101101
export default withTheme(TopToolbar);

‎packages/core/src/components/ToolbarHandler/index.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import * as React from 'react';
2-
import { FunctionComponent, MutableRefObject } from 'react';
3-
import { withTheme } from 'emotion-theming';
1+
import * as React from "react";
2+
import { FunctionComponent, MutableRefObject } from "react";
3+
import { withTheme } from "@emotion/react";
44

5-
import { EditorTheme } from '../../types/editor-theme';
6-
import { Addon } from '../../types/addon';
7-
import { usePMStateContext } from '../../context/pm-state/index';
5+
import { EditorTheme } from "../../types/editor-theme";
6+
import { Addon } from "../../types/addon";
7+
import { usePMStateContext } from "../../context/pm-state/index";
88

99
interface PopupHandlerProps {
1010
plugins: Addon[];

‎packages/core/src/context/theme/index.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import * as React from 'react';
2-
import { FunctionComponent, ReactChild, useState, useEffect } from 'react';
3-
import { ThemeProvider } from 'emotion-theming';
1+
import * as React from "react";
2+
import { FunctionComponent, ReactChild, useState, useEffect } from "react";
3+
import { ThemeProvider } from "@emotion/react";
44

5-
import defaultTheme from '../../config/theme';
6-
import defaultStyleConfig from '../../config/styles';
7-
import overrideValue from '../../utils/override-value';
8-
import { EditorTheme } from '../../types/editor-theme';
9-
import { EditorStyleConfig } from '../../types/editor-style';
5+
import defaultTheme from "../../config/theme";
6+
import defaultStyleConfig from "../../config/styles";
7+
import overrideValue from "../../utils/override-value";
8+
import { EditorTheme } from "../../types/editor-theme";
9+
import { EditorStyleConfig } from "../../types/editor-style";
1010

1111
interface NibThemeProviderProps {
1212
children: ReactChild;

0 commit comments

Comments
 (0)