@pie-lib/math-toolbar 2.0.0-beta.1 → 2.0.0-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/CHANGELOG.md +208 -0
  2. package/lib/done-button.js +25 -22
  3. package/lib/done-button.js.map +1 -1
  4. package/lib/editor-and-pad.js +52 -89
  5. package/lib/editor-and-pad.js.map +1 -1
  6. package/lib/index.js +50 -70
  7. package/lib/index.js.map +1 -1
  8. package/lib/math-preview.js +9 -21
  9. package/lib/math-preview.js.map +1 -1
  10. package/package.json +3 -3
  11. package/src/done-button.jsx +16 -8
  12. package/src/editor-and-pad.jsx +110 -96
  13. package/src/index.jsx +21 -10
  14. package/src/math-preview.jsx +47 -49
package/src/math-preview.jsx CHANGED
@@ -8,60 +8,60 @@ import { mq } from '@pie-lib/math-input';
8
8
 
9
9
  const log = debug('@pie-lib:math-toolbar:math-preview');
10
10
 
11
- const useStyles = makeStyles(theme => ({
11
+ const useStyles = makeStyles((theme) => ({
12
12
  root: {
13
13
  display: 'inline-flex',
14
14
  alignItems: 'center',
15
15
  position: 'relative',
16
16
  '& *': {
17
17
  fontFamily: 'MJXZERO, MJXTEX !important',
18
- '-webkit-font-smoothing': 'antialiased !important'
18
+ '-webkit-font-smoothing': 'antialiased !important',
19
19
  },
20
20
  '& > .mq-math-mode > span > var': {
21
- fontFamily: 'MJXZERO, MJXTEX-I !important'
21
+ fontFamily: 'MJXZERO, MJXTEX-I !important',
22
22
  },
23
23
  '& > .mq-math-mode span var': {
24
- fontFamily: 'MJXZERO, MJXTEX-I !important'
24
+ fontFamily: 'MJXZERO, MJXTEX-I !important',
25
25
  },
26
26
  '& > .mq-math-mode .mq-nonSymbola': {
27
- fontFamily: 'MJXZERO, MJXTEX-I !important'
27
+ fontFamily: 'MJXZERO, MJXTEX-I !important',
28
28
  },
29
29
  '& > .mq-math-mode > span > var.mq-operator-name': {
30
- fontFamily: 'MJXZERO, MJXTEX !important'
30
+ fontFamily: 'MJXZERO, MJXTEX !important',
31
31
  },
32
32
  '& > .mq-math-mode': {
33
- border: 'solid 1px lightgrey'
33
+ border: 'solid 1px lightgrey',
34
34
  },
35
35
  '& > .mq-focused': {
36
36
  outline: 'none',
37
37
  boxShadow: 'none',
38
38
  border: 'solid 1px black',
39
- borderRadius: '0px'
39
+ borderRadius: '0px',
40
40
  },
41
41
  '& > .mq-math-mode .mq-root-block': {
42
- paddingTop: '7px !important'
42
+ paddingTop: '7px !important',
43
43
  },
44
44
  '& > .mq-math-mode .mq-overarc ': {
45
- paddingTop: '0.45em !important'
45
+ paddingTop: '0.45em !important',
46
46
  },
47
47
  '& > .mq-math-mode .mq-sqrt-prefix': {
48
- verticalAlign: 'bottom !important',
49
- top: '0 !important',
50
- left: '-0.1em !important'
48
+ verticalAlign: 'baseline !important',
49
+ top: '1px !important',
50
+ left: '-0.1em !important',
51
51
  },
52
52
  '& > .mq-math-mode .mq-denominator': {
53
53
  marginTop: '-5px !important',
54
- padding: '0.5em 0.1em 0.1em !important'
54
+ padding: '0.5em 0.1em 0.1em !important',
55
55
  },
56
56
  '& > .mq-math-mode .mq-numerator, .mq-math-mode .mq-over': {
57
57
  padding: '0 0.1em !important',
58
58
  paddingBottom: '0 !important',
59
- marginBottom: '4.5px'
59
+ marginBottom: '-2px',
60
60
  },
61
61
  '& > .mq-math-mode sup.mq-nthroot': {
62
62
  fontSize: '70.7% !important',
63
63
  verticalAlign: '0.5em !important',
64
- paddingRight: '0.15em'
64
+ paddingRight: '0.15em',
65
65
  },
66
66
  '& > .mq-longdiv-inner': {
67
67
  marginTop: '-1px',
@@ -70,107 +70,107 @@ const useStyles = makeStyles(theme => ({
70
70
  '& > .mq-empty': {
71
71
  padding: '0 !important',
72
72
  marginLeft: '0px !important',
73
- marginTop: '2px'
74
- }
73
+ marginTop: '2px',
74
+ },
75
75
  },
76
76
  '& > .mq-math-mode .mq-longdiv': {
77
- display: 'inline-flex !important'
77
+ display: 'inline-flex !important',
78
78
  },
79
79
  '& > .mq-math-mode .mq-longdiv .mq-longdiv-inner .mq-empty': {
80
80
  paddingTop: '6px !important',
81
- paddingLeft: '4px !important'
81
+ paddingLeft: '4px !important',
82
82
  },
83
83
  '& > .mq-math-mode .mq-longdiv .mq-longdiv-inner': {
84
- marginLeft: '0 !important'
84
+ marginLeft: '0 !important',
85
85
  },
86
86
  '& > .mq-math-mode .mq-supsub': {
87
- fontSize: '70.7% !important'
87
+ fontSize: '70.7% !important',
88
88
  },
89
89
  '& > .mq-math-mode .mq-overarrow': {
90
- fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important'
90
+ fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
91
91
  },
92
92
  '& > .mq-math-mode .mq-paren': {
93
93
  verticalAlign: 'top !important',
94
- padding: '1px 0.1em !important'
94
+ padding: '1px 0.1em !important',
95
95
  },
96
96
 
97
97
  '& > .mq-math-mode .mq-sqrt-stem': {
98
98
  borderTop: '0.07em solid',
99
99
  marginLeft: '-1.5px',
100
100
  marginTop: '-2px !important',
101
- paddingTop: '5px !important'
101
+ paddingTop: '5px !important',
102
102
  },
103
103
  '& > .mq-supsub ': {
104
- fontSize: '70.7%'
104
+ fontSize: '70.7%',
105
105
  },
106
106
 
107
107
  '& > .mq-math-mode .mq-supsub.mq-sup-only': {
108
108
  verticalAlign: '-0.1em !important',
109
109
 
110
110
  '& .mq-sup': {
111
- marginBottom: '0px !important'
112
- }
111
+ marginBottom: '0px !important',
112
+ },
113
113
  },
114
114
  '& .mq-overarrow-inner': {
115
115
  paddingTop: '0 !important',
116
- border: 'none !important'
116
+ border: 'none !important',
117
117
  },
118
118
  '& .mq-editable-field .mq-cursor': {
119
- marginTop: '-15px !important'
119
+ marginTop: '-15px !important',
120
120
  },
121
121
  '& .mq-overarrow.mq-arrow-both': {
122
122
  top: '7.5px',
123
123
  marginTop: '0px',
124
124
  minWidth: '1.23em',
125
125
  '& *': {
126
- lineHeight: '1 !important'
126
+ lineHeight: '1 !important',
127
127
  },
128
128
  '&:before': {
129
129
  top: '-0.4em',
130
- left: '-1px'
130
+ left: '-1px',
131
131
  },
132
132
  '&:after': {
133
133
  top: '0px !important',
134
134
  position: 'absolute',
135
- right: '-2px'
135
+ right: '-2px',
136
136
  },
137
137
  '&.mq-empty:after': {
138
- top: '-0.45em'
139
- }
138
+ top: '-0.45em',
139
+ },
140
140
  },
141
141
  '& .mq-overarrow.mq-arrow-right': {
142
142
  '&:before': {
143
143
  top: '-0.4em',
144
- right: '-1px'
145
- }
144
+ right: '-1px',
145
+ },
146
146
  },
147
147
  '& .mq-overarrow-inner-right': {
148
- display: 'none !important'
148
+ display: 'none !important',
149
149
  },
150
150
  '& .mq-overarrow-inner-left': {
151
- display: 'none !important'
151
+ display: 'none !important',
152
152
  },
153
153
  '& .mq-longdiv-inner': {
154
154
  borderTop: '1px solid !important',
155
- paddingTop: '1.5px !important'
155
+ paddingTop: '1.5px !important',
156
156
  },
157
157
  '& .mq-parallelogram': {
158
- lineHeight: 0.85
159
- }
158
+ lineHeight: 0.85,
159
+ },
160
160
  },
161
161
  selected: {
162
162
  border: `solid 1px ${get(theme, 'palette.primary.main')}`,
163
163
  '& > .mq-math-mode': {
164
- border: 'solid 0px lightgrey'
165
- }
164
+ border: 'solid 0px lightgrey',
165
+ },
166
166
  },
167
167
  insideOverlay: {
168
168
  position: 'absolute',
169
169
  bottom: 0,
170
170
  left: 0,
171
171
  right: 0,
172
- top: 0
173
- }
172
+ top: 0,
173
+ },
174
174
  }));
175
175
 
176
176
  export const RawMathPreview = React.forwardRef((props, ref) => {
@@ -186,9 +186,7 @@ export const RawMathPreview = React.forwardRef((props, ref) => {
186
186
  contentEditable={false}
187
187
  ref={ref}
188
188
  >
189
- {children}
190
- {' '}
191
- <span className={classes.insideOverlay} />
189
+ {children} <span className={classes.insideOverlay} />
192
190
  <mq.Static latex={latex} onFocus={onFocus} onBlur={onBlur} />
193
191
  </div>
194
192
  );