@pie-lib/math-toolbar 2.0.0-beta.2 → 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.
- package/CHANGELOG.md +208 -0
- package/lib/done-button.js +25 -22
- package/lib/done-button.js.map +1 -1
- package/lib/editor-and-pad.js +52 -89
- package/lib/editor-and-pad.js.map +1 -1
- package/lib/index.js +50 -70
- package/lib/index.js.map +1 -1
- package/lib/math-preview.js +9 -21
- package/lib/math-preview.js.map +1 -1
- package/package.json +3 -3
- package/src/done-button.jsx +16 -8
- package/src/editor-and-pad.jsx +110 -96
- package/src/index.jsx +21 -10
- package/src/math-preview.jsx +47 -49
package/src/editor-and-pad.jsx
CHANGED
|
@@ -14,7 +14,7 @@ import isEqual from 'lodash/isEqual';
|
|
|
14
14
|
|
|
15
15
|
const decimalRegex = /\.|,/g;
|
|
16
16
|
|
|
17
|
-
const toNodeData = data => {
|
|
17
|
+
const toNodeData = (data) => {
|
|
18
18
|
if (!data) {
|
|
19
19
|
return;
|
|
20
20
|
}
|
|
@@ -41,17 +41,19 @@ export class EditorAndPad extends React.Component {
|
|
|
41
41
|
showKeypad: PropTypes.bool,
|
|
42
42
|
controlledKeypad: PropTypes.bool,
|
|
43
43
|
controlledKeypadMode: PropTypes.bool,
|
|
44
|
+
error: PropTypes.string,
|
|
44
45
|
noDecimal: PropTypes.bool,
|
|
45
46
|
hideInput: PropTypes.bool,
|
|
46
47
|
noLatexHandling: PropTypes.bool,
|
|
47
48
|
layoutForKeyPad: PropTypes.object,
|
|
49
|
+
maxResponseAreas: PropTypes.number,
|
|
48
50
|
additionalKeys: PropTypes.array,
|
|
49
51
|
latex: PropTypes.string,
|
|
50
52
|
onAnswerBlockAdd: PropTypes.func,
|
|
51
53
|
onFocus: PropTypes.func,
|
|
52
54
|
onBlur: PropTypes.func,
|
|
53
55
|
onChange: PropTypes.func.isRequired,
|
|
54
|
-
classes: PropTypes.object
|
|
56
|
+
classes: PropTypes.object,
|
|
55
57
|
};
|
|
56
58
|
|
|
57
59
|
constructor(props) {
|
|
@@ -66,7 +68,7 @@ export class EditorAndPad extends React.Component {
|
|
|
66
68
|
}
|
|
67
69
|
}
|
|
68
70
|
|
|
69
|
-
onClick = data => {
|
|
71
|
+
onClick = (data) => {
|
|
70
72
|
const { noDecimal, noLatexHandling, onChange } = this.props;
|
|
71
73
|
const c = toNodeData(data);
|
|
72
74
|
log('mathChange: ', c);
|
|
@@ -99,7 +101,7 @@ export class EditorAndPad extends React.Component {
|
|
|
99
101
|
}
|
|
100
102
|
};
|
|
101
103
|
|
|
102
|
-
updateDisable = isEdit => {
|
|
104
|
+
updateDisable = (isEdit) => {
|
|
103
105
|
const { maxResponseAreas } = this.props;
|
|
104
106
|
|
|
105
107
|
if (maxResponseAreas) {
|
|
@@ -112,13 +114,13 @@ export class EditorAndPad extends React.Component {
|
|
|
112
114
|
onAnswerBlockClick = () => {
|
|
113
115
|
this.props.onAnswerBlockAdd();
|
|
114
116
|
this.onClick({
|
|
115
|
-
type: 'answer'
|
|
117
|
+
type: 'answer',
|
|
116
118
|
});
|
|
117
119
|
|
|
118
120
|
this.updateDisable(true);
|
|
119
121
|
};
|
|
120
122
|
|
|
121
|
-
onEditorChange = latex => {
|
|
123
|
+
onEditorChange = (latex) => {
|
|
122
124
|
const { onChange, noDecimal } = this.props;
|
|
123
125
|
|
|
124
126
|
updateSpans();
|
|
@@ -132,6 +134,21 @@ export class EditorAndPad extends React.Component {
|
|
|
132
134
|
return;
|
|
133
135
|
}
|
|
134
136
|
|
|
137
|
+
// eslint-disable-next-line no-useless-escape
|
|
138
|
+
const regexMatch = latex.match(/[0-9]\\ \\frac\{[^\{]*\}\{ \}/);
|
|
139
|
+
|
|
140
|
+
if (this.input && regexMatch && regexMatch?.length) {
|
|
141
|
+
try {
|
|
142
|
+
this.input.mathField.__controller.cursor.insLeftOf(this.input.mathField.__controller.cursor.parent[-1].parent);
|
|
143
|
+
this.input.mathField.el().dispatchEvent(new KeyboardEvent('keydown', { keyCode: 8 }));
|
|
144
|
+
} catch (e) {
|
|
145
|
+
// eslint-disable-next-line no-console
|
|
146
|
+
console.error(e.toString());
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
return;
|
|
150
|
+
}
|
|
151
|
+
|
|
135
152
|
onChange(latex);
|
|
136
153
|
};
|
|
137
154
|
|
|
@@ -164,7 +181,7 @@ export class EditorAndPad extends React.Component {
|
|
|
164
181
|
return inputIsDifferent;
|
|
165
182
|
}
|
|
166
183
|
|
|
167
|
-
onEditorTypeChange = evt => {
|
|
184
|
+
onEditorTypeChange = (evt) => {
|
|
168
185
|
this.setState({ equationEditor: evt.target.value });
|
|
169
186
|
};
|
|
170
187
|
|
|
@@ -196,7 +213,7 @@ export class EditorAndPad extends React.Component {
|
|
|
196
213
|
onFocus,
|
|
197
214
|
onBlur,
|
|
198
215
|
classes,
|
|
199
|
-
error
|
|
216
|
+
error,
|
|
200
217
|
} = this.props;
|
|
201
218
|
const shouldShowKeypad = !controlledKeypad || (controlledKeypad && showKeypad);
|
|
202
219
|
const { addDisabled } = this.state;
|
|
@@ -208,11 +225,7 @@ export class EditorAndPad extends React.Component {
|
|
|
208
225
|
<div className={cx(classes.inputAndTypeContainer, { [classes.hide]: hideInput })}>
|
|
209
226
|
{controlledKeypadMode && (
|
|
210
227
|
<InputContainer label="Equation Editor" className={classes.selectContainer}>
|
|
211
|
-
<Select
|
|
212
|
-
className={classes.select}
|
|
213
|
-
onChange={this.onEditorTypeChange}
|
|
214
|
-
value={this.state.equationEditor}
|
|
215
|
-
>
|
|
228
|
+
<Select className={classes.select} onChange={this.onEditorTypeChange} value={this.state.equationEditor}>
|
|
216
229
|
<MenuItem value="non-negative-integers">Numeric - Non-Negative Integers</MenuItem>
|
|
217
230
|
<MenuItem value="integers">Numeric - Integers</MenuItem>
|
|
218
231
|
<MenuItem value="decimals">Numeric - Decimals</MenuItem>
|
|
@@ -234,16 +247,12 @@ export class EditorAndPad extends React.Component {
|
|
|
234
247
|
onFocus && onFocus();
|
|
235
248
|
this.updateDisable(false);
|
|
236
249
|
}}
|
|
237
|
-
onBlur={event => {
|
|
250
|
+
onBlur={(event) => {
|
|
238
251
|
this.updateDisable(false);
|
|
239
252
|
onBlur && onBlur(event);
|
|
240
253
|
}}
|
|
241
|
-
className={cx(
|
|
242
|
-
|
|
243
|
-
classNames.editor,
|
|
244
|
-
!controlledKeypadMode ? classes.longMathEditor : ''
|
|
245
|
-
)}
|
|
246
|
-
innerRef={r => (this.input = r)}
|
|
254
|
+
className={cx(classes.mathEditor, classNames.editor, !controlledKeypadMode ? classes.longMathEditor : '')}
|
|
255
|
+
innerRef={(r) => (this.input = r)}
|
|
247
256
|
latex={latex}
|
|
248
257
|
onChange={this.onEditorChange}
|
|
249
258
|
/>
|
|
@@ -263,7 +272,7 @@ export class EditorAndPad extends React.Component {
|
|
|
263
272
|
<hr className={classes.hr} />
|
|
264
273
|
{shouldShowKeypad && (
|
|
265
274
|
<HorizontalKeypad
|
|
266
|
-
className={classes.keyboard}
|
|
275
|
+
className={cx(classes[keypadMode], classes.keyboard)}
|
|
267
276
|
layoutForKeyPad={layoutForKeyPad}
|
|
268
277
|
additionalKeys={additionalKeys}
|
|
269
278
|
mode={controlledKeypadMode ? this.state.equationEditor : keypadMode}
|
|
@@ -276,88 +285,88 @@ export class EditorAndPad extends React.Component {
|
|
|
276
285
|
}
|
|
277
286
|
}
|
|
278
287
|
|
|
279
|
-
const styles = theme => ({
|
|
288
|
+
const styles = (theme) => ({
|
|
280
289
|
inputAndTypeContainer: {
|
|
281
290
|
display: 'flex',
|
|
282
291
|
alignItems: 'center',
|
|
283
292
|
'& .mq-editable-field .mq-cursor': {
|
|
284
|
-
top: '-4px'
|
|
293
|
+
top: '-4px',
|
|
285
294
|
},
|
|
286
295
|
'& .mq-math-mode .mq-selection, .mq-editable-field .mq-selection': {
|
|
287
|
-
paddingTop: '18px'
|
|
296
|
+
paddingTop: '18px',
|
|
288
297
|
},
|
|
289
298
|
'& .mq-math-mode .mq-overarrow': {
|
|
290
|
-
fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important'
|
|
299
|
+
fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
|
|
291
300
|
},
|
|
292
301
|
'& .mq-math-mode .mq-overline .mq-overline-inner': {
|
|
293
|
-
paddingTop: '0.4em !important'
|
|
302
|
+
paddingTop: '0.4em !important',
|
|
294
303
|
},
|
|
295
304
|
'& .mq-overarrow.mq-arrow-both': {
|
|
296
305
|
minWidth: '1.23em',
|
|
297
306
|
'& *': {
|
|
298
|
-
lineHeight: '1 !important'
|
|
307
|
+
lineHeight: '1 !important',
|
|
299
308
|
},
|
|
300
309
|
'&:before': {
|
|
301
310
|
top: '-0.45em',
|
|
302
|
-
left: '-1px'
|
|
311
|
+
left: '-1px',
|
|
303
312
|
},
|
|
304
313
|
'&:after': {
|
|
305
314
|
position: 'absolute',
|
|
306
315
|
top: '0px !important',
|
|
307
|
-
right: '-2px'
|
|
316
|
+
right: '-2px',
|
|
308
317
|
},
|
|
309
318
|
'&.mq-empty:after': {
|
|
310
|
-
top: '-0.45em'
|
|
311
|
-
}
|
|
319
|
+
top: '-0.45em',
|
|
320
|
+
},
|
|
312
321
|
},
|
|
313
322
|
'& .mq-overarrow.mq-arrow-right': {
|
|
314
323
|
'&:before': {
|
|
315
324
|
top: '-0.4em',
|
|
316
|
-
right: '-1px'
|
|
317
|
-
}
|
|
325
|
+
right: '-1px',
|
|
326
|
+
},
|
|
318
327
|
},
|
|
319
328
|
'& *': {
|
|
320
329
|
fontFamily: 'MJXZERO, MJXTEX !important',
|
|
321
330
|
|
|
322
331
|
'& .mq-math-mode > span > var': {
|
|
323
|
-
fontFamily: 'MJXZERO, MJXTEX-I !important'
|
|
332
|
+
fontFamily: 'MJXZERO, MJXTEX-I !important',
|
|
324
333
|
},
|
|
325
334
|
'& .mq-math-mode span var': {
|
|
326
|
-
fontFamily: 'MJXZERO, MJXTEX-I !important'
|
|
335
|
+
fontFamily: 'MJXZERO, MJXTEX-I !important',
|
|
327
336
|
},
|
|
328
337
|
'& .mq-math-mode .mq-nonSymbola': {
|
|
329
|
-
fontFamily: 'MJXZERO, MJXTEX-I !important'
|
|
338
|
+
fontFamily: 'MJXZERO, MJXTEX-I !important',
|
|
330
339
|
},
|
|
331
340
|
'& .mq-math-mode > span > var.mq-operator-name': {
|
|
332
|
-
fontFamily: 'MJXZERO, MJXTEX !important'
|
|
341
|
+
fontFamily: 'MJXZERO, MJXTEX !important',
|
|
333
342
|
},
|
|
334
343
|
|
|
335
344
|
'& .mq-math-mode .mq-sqrt-prefix': {
|
|
336
|
-
verticalAlign: '
|
|
337
|
-
top: '
|
|
338
|
-
left: '-0.1em !important'
|
|
345
|
+
verticalAlign: 'baseline !important',
|
|
346
|
+
top: '1px !important',
|
|
347
|
+
left: '-0.1em !important',
|
|
339
348
|
},
|
|
340
349
|
|
|
341
350
|
'& .mq-math-mode .mq-overarc ': {
|
|
342
|
-
paddingTop: '0.45em !important'
|
|
351
|
+
paddingTop: '0.45em !important',
|
|
343
352
|
},
|
|
344
353
|
|
|
345
354
|
'& .mq-math-mode sup.mq-nthroot': {
|
|
346
355
|
fontSize: '70% !important',
|
|
347
356
|
verticalAlign: '0.5em !important',
|
|
348
|
-
paddingRight: '0.15em'
|
|
357
|
+
paddingRight: '0.15em',
|
|
349
358
|
},
|
|
350
359
|
|
|
351
360
|
'& .mq-math-mode .mq-empty': {
|
|
352
|
-
padding: '9px 1px !important'
|
|
361
|
+
padding: '9px 1px !important',
|
|
353
362
|
},
|
|
354
363
|
|
|
355
364
|
'& .mq-math-mode .mq-root-block': {
|
|
356
|
-
paddingTop: '10px'
|
|
365
|
+
paddingTop: '10px',
|
|
357
366
|
},
|
|
358
367
|
|
|
359
368
|
'& .mq-scaled .mq-sqrt-prefix': {
|
|
360
|
-
top: '0 !important'
|
|
369
|
+
top: '0 !important',
|
|
361
370
|
},
|
|
362
371
|
|
|
363
372
|
'& .mq-longdiv-inner': {
|
|
@@ -367,64 +376,64 @@ const styles = theme => ({
|
|
|
367
376
|
'& > .mq-empty': {
|
|
368
377
|
padding: '0 !important',
|
|
369
378
|
marginLeft: '0px !important',
|
|
370
|
-
marginTop: '2px'
|
|
371
|
-
}
|
|
379
|
+
marginTop: '2px',
|
|
380
|
+
},
|
|
372
381
|
},
|
|
373
382
|
|
|
374
383
|
'& .mq-math-mode .mq-longdiv': {
|
|
375
|
-
display: 'inline-flex !important'
|
|
384
|
+
display: 'inline-flex !important',
|
|
376
385
|
},
|
|
377
386
|
|
|
378
387
|
'& .mq-math-mode .mq-longdiv .mq-longdiv-inner': {
|
|
379
388
|
marginLeft: '4px !important',
|
|
380
389
|
paddingTop: '6px !important',
|
|
381
|
-
paddingLeft: '6px !important'
|
|
390
|
+
paddingLeft: '6px !important',
|
|
382
391
|
},
|
|
383
392
|
|
|
384
393
|
'& .mq-math-mode .mq-supsub': {
|
|
385
|
-
fontSize: '70.7% !important'
|
|
394
|
+
fontSize: '70.7% !important',
|
|
386
395
|
},
|
|
387
396
|
|
|
388
397
|
'& .mq-math-mode .mq-paren': {
|
|
389
398
|
verticalAlign: 'top !important',
|
|
390
|
-
padding: '1px 0.1em !important'
|
|
399
|
+
padding: '1px 0.1em !important',
|
|
391
400
|
},
|
|
392
401
|
|
|
393
402
|
'& .mq-math-mode .mq-sqrt-stem': {
|
|
394
403
|
borderTop: '0.07em solid',
|
|
395
404
|
marginLeft: '-1.5px',
|
|
396
405
|
marginTop: '-2px !important',
|
|
397
|
-
paddingTop: '5px !important'
|
|
406
|
+
paddingTop: '5px !important',
|
|
398
407
|
},
|
|
399
408
|
|
|
400
409
|
'& .mq-supsub ': {
|
|
401
|
-
fontSize: '70.7%'
|
|
410
|
+
fontSize: '70.7%',
|
|
402
411
|
},
|
|
403
412
|
|
|
404
413
|
'& .mq-math-mode .mq-supsub.mq-sup-only': {
|
|
405
414
|
verticalAlign: '-0.1em !important',
|
|
406
415
|
|
|
407
416
|
'& .mq-sup': {
|
|
408
|
-
marginBottom: '0px !important'
|
|
409
|
-
}
|
|
417
|
+
marginBottom: '0px !important',
|
|
418
|
+
},
|
|
410
419
|
},
|
|
411
420
|
|
|
412
421
|
'& .mq-math-mode .mq-denominator': {
|
|
413
422
|
marginTop: '-5px !important',
|
|
414
|
-
padding: '0.5em 0.1em 0.1em !important'
|
|
423
|
+
padding: '0.5em 0.1em 0.1em !important',
|
|
415
424
|
},
|
|
416
425
|
|
|
417
426
|
'& .mq-math-mode .mq-numerator, .mq-math-mode .mq-over': {
|
|
418
427
|
padding: '0 0.1em !important',
|
|
419
428
|
paddingBottom: '0 !important',
|
|
420
|
-
marginBottom: '
|
|
429
|
+
marginBottom: '-2px',
|
|
421
430
|
},
|
|
422
431
|
|
|
423
|
-
'-webkit-font-smoothing': 'antialiased !important'
|
|
424
|
-
}
|
|
432
|
+
'-webkit-font-smoothing': 'antialiased !important',
|
|
433
|
+
},
|
|
425
434
|
},
|
|
426
435
|
hide: {
|
|
427
|
-
display: 'none'
|
|
436
|
+
display: 'none',
|
|
428
437
|
},
|
|
429
438
|
selectContainer: {
|
|
430
439
|
flex: 'initial',
|
|
@@ -436,33 +445,33 @@ const styles = theme => ({
|
|
|
436
445
|
marginRight: '5px',
|
|
437
446
|
|
|
438
447
|
'& label': {
|
|
439
|
-
fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important'
|
|
448
|
+
fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
|
|
440
449
|
},
|
|
441
450
|
|
|
442
451
|
'& div': {
|
|
443
|
-
fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important'
|
|
444
|
-
}
|
|
452
|
+
fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
|
|
453
|
+
},
|
|
445
454
|
},
|
|
446
455
|
mathEditor: {
|
|
447
456
|
maxWidth: '400px',
|
|
448
457
|
color: color.text(),
|
|
449
458
|
backgroundColor: color.background(),
|
|
450
|
-
padding: '2px'
|
|
459
|
+
padding: '2px',
|
|
451
460
|
},
|
|
452
461
|
longMathEditor: {
|
|
453
|
-
maxWidth: '500px'
|
|
462
|
+
maxWidth: '500px',
|
|
454
463
|
},
|
|
455
464
|
addAnswerBlockButton: {
|
|
456
465
|
position: 'absolute',
|
|
457
466
|
right: '12px',
|
|
458
|
-
border: '1px solid lightgrey'
|
|
467
|
+
border: '1px solid lightgrey',
|
|
459
468
|
},
|
|
460
469
|
hr: {
|
|
461
470
|
padding: 0,
|
|
462
471
|
margin: 0,
|
|
463
472
|
height: '1px',
|
|
464
473
|
border: 'none',
|
|
465
|
-
borderBottom: `solid 1px ${theme.palette.primary.main}
|
|
474
|
+
borderBottom: `solid 1px ${theme.palette.primary.main}`,
|
|
466
475
|
},
|
|
467
476
|
mathToolbar: {
|
|
468
477
|
zIndex: 9,
|
|
@@ -470,36 +479,36 @@ const styles = theme => ({
|
|
|
470
479
|
textAlign: 'center',
|
|
471
480
|
width: 'auto',
|
|
472
481
|
'& > .mq-math-mode': {
|
|
473
|
-
border: 'solid 1px lightgrey'
|
|
482
|
+
border: 'solid 1px lightgrey',
|
|
474
483
|
},
|
|
475
484
|
'& > .mq-focused': {
|
|
476
485
|
outline: 'none',
|
|
477
486
|
boxShadow: 'none',
|
|
478
487
|
border: `dotted 1px ${theme.palette.primary.main}`,
|
|
479
|
-
borderRadius: '0px'
|
|
488
|
+
borderRadius: '0px',
|
|
480
489
|
},
|
|
481
490
|
'& .mq-overarrow-inner': {
|
|
482
491
|
border: 'none !important',
|
|
483
|
-
paddingTop: '0 !important'
|
|
492
|
+
paddingTop: '0 !important',
|
|
484
493
|
},
|
|
485
494
|
'& .mq-overarrow-inner-right': {
|
|
486
|
-
display: 'none !important'
|
|
495
|
+
display: 'none !important',
|
|
487
496
|
},
|
|
488
497
|
'& .mq-overarrow-inner-left': {
|
|
489
|
-
display: 'none !important'
|
|
498
|
+
display: 'none !important',
|
|
490
499
|
},
|
|
491
500
|
'& .mq-longdiv-inner': {
|
|
492
501
|
borderTop: '1px solid !important',
|
|
493
|
-
paddingTop: '1.5px !important'
|
|
502
|
+
paddingTop: '1.5px !important',
|
|
494
503
|
},
|
|
495
504
|
'& .mq-overarrow.mq-arrow-both': {
|
|
496
505
|
top: '7.8px',
|
|
497
506
|
marginTop: '0px',
|
|
498
|
-
minWidth: '1.23em'
|
|
507
|
+
minWidth: '1.23em',
|
|
499
508
|
},
|
|
500
509
|
'& .mq-parallelogram': {
|
|
501
|
-
lineHeight: 0.85
|
|
502
|
-
}
|
|
510
|
+
lineHeight: 0.85,
|
|
511
|
+
},
|
|
503
512
|
},
|
|
504
513
|
inputContainer: {
|
|
505
514
|
minWidth: '500px',
|
|
@@ -511,35 +520,35 @@ const styles = theme => ({
|
|
|
511
520
|
marginBottom: theme.spacing.unit,
|
|
512
521
|
|
|
513
522
|
'& .mq-sqrt-prefix .mq-scaled': {
|
|
514
|
-
verticalAlign: 'middle !important'
|
|
515
|
-
}
|
|
523
|
+
verticalAlign: 'middle !important',
|
|
524
|
+
},
|
|
516
525
|
},
|
|
517
526
|
error: {
|
|
518
|
-
border: '2px solid red'
|
|
527
|
+
border: '2px solid red',
|
|
519
528
|
},
|
|
520
529
|
keyboard: {
|
|
521
530
|
'& *': {
|
|
522
531
|
fontFamily: 'MJXZERO, MJXTEX !important',
|
|
523
532
|
|
|
524
533
|
'& .mq-math-mode > span > var': {
|
|
525
|
-
fontFamily: 'MJXZERO, MJXTEX-I !important'
|
|
534
|
+
fontFamily: 'MJXZERO, MJXTEX-I !important',
|
|
526
535
|
},
|
|
527
536
|
'& .mq-math-mode span var': {
|
|
528
|
-
fontFamily: 'MJXZERO, MJXTEX-I !important'
|
|
537
|
+
fontFamily: 'MJXZERO, MJXTEX-I !important',
|
|
529
538
|
},
|
|
530
539
|
'& .mq-math-mode .mq-nonSymbola': {
|
|
531
|
-
fontFamily: 'MJXZERO, MJXTEX-I !important'
|
|
540
|
+
fontFamily: 'MJXZERO, MJXTEX-I !important',
|
|
532
541
|
},
|
|
533
542
|
'& .mq-math-mode > span > var.mq-operator-name': {
|
|
534
|
-
fontFamily: 'MJXZERO, MJXTEX !important'
|
|
543
|
+
fontFamily: 'MJXZERO, MJXTEX !important',
|
|
535
544
|
},
|
|
536
545
|
|
|
537
546
|
'& .mq-math-mode .mq-sqrt-prefix': {
|
|
538
|
-
top: '0 !important'
|
|
547
|
+
top: '0 !important',
|
|
539
548
|
},
|
|
540
549
|
|
|
541
550
|
'& .mq-math-mode .mq-empty': {
|
|
542
|
-
padding: '9px 1px !important'
|
|
551
|
+
padding: '9px 1px !important',
|
|
543
552
|
},
|
|
544
553
|
|
|
545
554
|
'& .mq-longdiv-inner': {
|
|
@@ -549,36 +558,41 @@ const styles = theme => ({
|
|
|
549
558
|
'& > .mq-empty': {
|
|
550
559
|
padding: '0 !important',
|
|
551
560
|
marginLeft: '0px !important',
|
|
552
|
-
marginTop: '2px'
|
|
553
|
-
}
|
|
561
|
+
marginTop: '2px',
|
|
562
|
+
},
|
|
554
563
|
},
|
|
555
564
|
|
|
556
565
|
'& .mq-math-mode .mq-longdiv': {
|
|
557
|
-
display: 'inline-flex !important'
|
|
566
|
+
display: 'inline-flex !important',
|
|
558
567
|
},
|
|
559
568
|
|
|
560
569
|
'& .mq-math-mode .mq-supsub': {
|
|
561
|
-
fontSize: '70.7% !important'
|
|
570
|
+
fontSize: '70.7% !important',
|
|
562
571
|
},
|
|
563
572
|
|
|
564
573
|
'& .mq-math-mode .mq-sqrt-stem': {
|
|
565
574
|
marginTop: '-5px',
|
|
566
|
-
paddingTop: '4px'
|
|
575
|
+
paddingTop: '4px',
|
|
567
576
|
},
|
|
568
577
|
|
|
569
578
|
'& .mq-math-mode .mq-paren': {
|
|
570
|
-
verticalAlign: 'middle !important'
|
|
579
|
+
verticalAlign: 'middle !important',
|
|
571
580
|
},
|
|
572
581
|
|
|
573
582
|
'& .mq-math-mode .mq-overarrow .mq-overarrow-inner .mq-empty': {
|
|
574
|
-
padding: '0 !important'
|
|
583
|
+
padding: '0 !important',
|
|
575
584
|
},
|
|
576
585
|
|
|
577
586
|
'& .mq-math-mode .mq-overline .mq-overline-inner .mq-empty ': {
|
|
578
|
-
padding: '0 !important'
|
|
579
|
-
}
|
|
580
|
-
}
|
|
581
|
-
}
|
|
587
|
+
padding: '0 !important',
|
|
588
|
+
},
|
|
589
|
+
},
|
|
590
|
+
},
|
|
591
|
+
language: {
|
|
592
|
+
'& *': {
|
|
593
|
+
fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
|
|
594
|
+
},
|
|
595
|
+
},
|
|
582
596
|
});
|
|
583
597
|
|
|
584
598
|
export default withStyles(styles)(EditorAndPad);
|
package/src/index.jsx
CHANGED
|
@@ -16,6 +16,8 @@ export class MathToolbar extends React.Component {
|
|
|
16
16
|
controlledKeypadMode: PropTypes.bool,
|
|
17
17
|
keypadMode: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
18
18
|
classNames: PropTypes.object,
|
|
19
|
+
error: PropTypes.string,
|
|
20
|
+
maxResponseAreas: PropTypes.number,
|
|
19
21
|
showKeypad: PropTypes.bool,
|
|
20
22
|
noDecimal: PropTypes.bool,
|
|
21
23
|
additionalKeys: PropTypes.array,
|
|
@@ -25,7 +27,7 @@ export class MathToolbar extends React.Component {
|
|
|
25
27
|
onDone: PropTypes.func.isRequired,
|
|
26
28
|
onFocus: PropTypes.func,
|
|
27
29
|
onBlur: PropTypes.func,
|
|
28
|
-
hideDoneButton: PropTypes.bool
|
|
30
|
+
hideDoneButton: PropTypes.bool,
|
|
29
31
|
};
|
|
30
32
|
|
|
31
33
|
static defaultProps = {
|
|
@@ -41,13 +43,13 @@ export class MathToolbar extends React.Component {
|
|
|
41
43
|
onChange: () => {},
|
|
42
44
|
onAnswerBlockAdd: () => {},
|
|
43
45
|
onFocus: () => {},
|
|
44
|
-
hideDoneButton: false
|
|
46
|
+
hideDoneButton: false,
|
|
45
47
|
};
|
|
46
48
|
|
|
47
49
|
constructor(props) {
|
|
48
50
|
super(props);
|
|
49
51
|
this.state = {
|
|
50
|
-
latex: props.latex
|
|
52
|
+
latex: props.latex,
|
|
51
53
|
};
|
|
52
54
|
}
|
|
53
55
|
|
|
@@ -59,7 +61,7 @@ export class MathToolbar extends React.Component {
|
|
|
59
61
|
this.setState({ latex: nextProps.latex });
|
|
60
62
|
}
|
|
61
63
|
|
|
62
|
-
onChange = latex => {
|
|
64
|
+
onChange = (latex) => {
|
|
63
65
|
this.setState({ latex });
|
|
64
66
|
this.props.onChange(latex);
|
|
65
67
|
};
|
|
@@ -81,7 +83,7 @@ export class MathToolbar extends React.Component {
|
|
|
81
83
|
onBlur,
|
|
82
84
|
hideDoneButton,
|
|
83
85
|
error,
|
|
84
|
-
maxResponseAreas
|
|
86
|
+
maxResponseAreas,
|
|
85
87
|
} = this.props;
|
|
86
88
|
|
|
87
89
|
return (
|
|
@@ -130,7 +132,15 @@ export class RawPureToolbar extends React.Component {
|
|
|
130
132
|
controlledKeypad: PropTypes.bool,
|
|
131
133
|
controlledKeypadMode: PropTypes.bool,
|
|
132
134
|
showKeypad: PropTypes.bool,
|
|
133
|
-
hideDoneButton: PropTypes.bool
|
|
135
|
+
hideDoneButton: PropTypes.bool,
|
|
136
|
+
hideDoneButtonBackground: PropTypes.bool,
|
|
137
|
+
error: PropTypes.any,
|
|
138
|
+
maxResponseAreas: PropTypes.number,
|
|
139
|
+
};
|
|
140
|
+
|
|
141
|
+
static defaultProps = {
|
|
142
|
+
classNames: {},
|
|
143
|
+
hideDoneButtonBackground: false,
|
|
134
144
|
};
|
|
135
145
|
|
|
136
146
|
render() {
|
|
@@ -154,9 +164,10 @@ export class RawPureToolbar extends React.Component {
|
|
|
154
164
|
onFocus,
|
|
155
165
|
onBlur,
|
|
156
166
|
hideDoneButton,
|
|
167
|
+
hideDoneButtonBackground,
|
|
157
168
|
classes,
|
|
158
169
|
error,
|
|
159
|
-
maxResponseAreas
|
|
170
|
+
maxResponseAreas,
|
|
160
171
|
} = this.props;
|
|
161
172
|
|
|
162
173
|
return (
|
|
@@ -184,7 +195,7 @@ export class RawPureToolbar extends React.Component {
|
|
|
184
195
|
maxResponseAreas={maxResponseAreas}
|
|
185
196
|
/>
|
|
186
197
|
{(!controlledKeypad || (controlledKeypad && showKeypad)) && !hideDoneButton && (
|
|
187
|
-
<DoneButton onClick={onDone} />
|
|
198
|
+
<DoneButton hideBackground={hideDoneButtonBackground} onClick={onDone} />
|
|
188
199
|
)}
|
|
189
200
|
</div>
|
|
190
201
|
);
|
|
@@ -195,8 +206,8 @@ const styles = () => ({
|
|
|
195
206
|
display: 'flex',
|
|
196
207
|
width: '100%',
|
|
197
208
|
zIndex: 8,
|
|
198
|
-
alignItems: 'center'
|
|
199
|
-
}
|
|
209
|
+
alignItems: 'center',
|
|
210
|
+
},
|
|
200
211
|
});
|
|
201
212
|
|
|
202
213
|
export const PureToolbar = withStyles(styles)(RawPureToolbar);
|