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