@zzish/math-rich-input 0.1.41 → 0.1.43

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 (13) hide show
  1. package/dist/index.js +937 -1536
  2. package/dist/math-rich-input.css +594 -564
  3. package/package.json +3 -3
  4. package/src/AccentBar.css +113 -111
  5. package/src/EquationEditor.css +160 -159
  6. package/src/EquationEditor.jsx +528 -560
  7. package/src/EquationEditorModal.css +109 -101
  8. package/src/EquationEditorModal.jsx +65 -68
  9. package/src/MathRichInput.css +87 -69
  10. package/src/MathRichInput.jsx +1981 -2070
  11. package/src/Toolbar.css +83 -82
  12. package/src/Toolbar.jsx +220 -234
  13. package/src/index.js +4 -8
package/src/EquationEditorModal.css CHANGED
@@ -1,155 +1,163 @@
1
1
  .EquationEditorModal-background {
2
- position: fixed;
3
- top: 0;
4
- left: 0;
5
- width: 100%;
6
- height: 100%;
7
- background: black;
8
- z-index: 99;
9
- animation: 0.3s shade;
10
- animation-fill-mode: forwards;
2
+ position: fixed;
3
+ top: 0;
4
+ left: 0;
5
+ width: 100%;
6
+ height: 100%;
7
+ background: black;
8
+ z-index: 99;
9
+ animation: 0.3s shade;
10
+ animation-fill-mode: forwards;
11
11
  }
12
12
 
13
13
  @keyframes shade {
14
- 00% {
15
- opacity: 0;
16
- }
17
- 100% {
18
- opacity: 0.6;
19
- }
14
+ 00% {
15
+ opacity: 0;
16
+ }
17
+ 100% {
18
+ opacity: 0.6;
19
+ }
20
20
  }
21
21
 
22
22
  .EquationEditorModal {
23
- background: white;
24
- border: 1px solid #808080;
25
- border-radius: 10px;
26
- box-shadow: 0px 2px 5px 1px #a0a0a0;
27
- position: fixed;
28
- max-width: 500px;
29
- width: 98%;
30
- top: 50%;
31
- left: 50%;
32
- /* transform: translate(-50%,-50%); */
33
- z-index: 100;
34
- animation: 0.3s rise;
35
- animation-fill-mode: forwards;
23
+ background: white;
24
+ border: 1px solid #808080;
25
+ border-radius: 10px;
26
+ box-shadow: 0px 2px 5px 1px #a0a0a0;
27
+ position: fixed;
28
+ max-width: 500px;
29
+ width: 98%;
30
+ top: 50%;
31
+ left: 50%;
32
+ /* transform: translate(-50%,-50%); */
33
+ z-index: 100;
34
+ animation: 0.3s rise;
35
+ animation-fill-mode: forwards;
36
36
  }
37
37
 
38
38
  @keyframes rise {
39
- 00% {
40
- transform: translate(-50%, 100%);
41
- opacity: 0;
42
- }
43
- 100% {
44
- transform: translate(-50%, -50%);
45
- opacity: 1;
46
- }
39
+ 00% {
40
+ transform: translate(-50%, 100%);
41
+ opacity: 0;
42
+ }
43
+ 100% {
44
+ transform: translate(-50%, -50%);
45
+ opacity: 1;
46
+ }
47
47
  }
48
48
 
49
49
  .EquationEditorModal-mobile {
50
- background: white;
51
- border: 1px solid #808080;
52
- border-radius: 10px;
53
- box-shadow: 0px 2px 5px 1px #a0a0a0;
54
- position: fixed;
55
- max-width: 500px;
56
- width: 99%;
57
- top: 0%;
58
- left: 50%;
59
- transform: translate(-50%, 1px);
60
- z-index: 100;
50
+ background: white;
51
+ border: 1px solid #808080;
52
+ border-radius: 10px;
53
+ box-shadow: 0px 2px 5px 1px #a0a0a0;
54
+ position: fixed;
55
+ max-width: 500px;
56
+ width: 99%;
57
+ top: 0%;
58
+ left: 50%;
59
+ transform: translate(-50%, 1px);
60
+ z-index: 100;
61
61
  }
62
62
 
63
63
  .EquationEditorModal .title {
64
- display: flex;
65
- justify-content: space-between;
66
- font-size: 14px;
67
- color: #404040;
68
- text-align: left;
69
- background: #e0e0e0;
70
- border: 0px;
71
- border-radius: 5px 5px 0px 0px;
72
- padding: 15px;
73
- margin: 0px;
64
+ display: flex;
65
+ justify-content: space-between;
66
+ font-size: 14px;
67
+ color: #404040;
68
+ text-align: left;
69
+ background: #e0e0e0;
70
+ border: 0px;
71
+ border-radius: 5px 5px 0px 0px;
72
+ padding: 15px;
73
+ margin: 0px;
74
74
  }
75
75
 
76
76
  .EquationEditorModal-mobile .title {
77
- display: flex;
78
- justify-content: space-between;
79
- font-size: 14px;
80
- color: #404040;
81
- text-align: left;
82
- background: #e0e0e0;
83
- border: 0px;
84
- border-radius: 5px 5px 0px 0px;
85
- height: 30px;
86
- padding: 15px;
87
- margin: 0px;
77
+ display: flex;
78
+ justify-content: space-between;
79
+ font-size: 14px;
80
+ color: #404040;
81
+ text-align: left;
82
+ background: #e0e0e0;
83
+ border: 0px;
84
+ border-radius: 5px 5px 0px 0px;
85
+ height: 30px;
86
+ padding: 15px;
87
+ margin: 0px;
88
+ }
89
+
90
+ .expertModeSwitch {
91
+ display: flex;
92
+ flex-direction: row;
93
+ align-items: center;
88
94
  }
89
95
 
90
96
  .EquationEditorModal .expertModeSwitch .switch {
91
- margin-left: 10px;
97
+ margin-left: 10px;
92
98
  }
93
99
 
94
100
  /* The switch - the box around the slider */
95
101
  .EquationEditorModal .switch {
96
- position: relative;
97
- display: inline-block;
98
- width: 35px;
99
- height: 22px;
102
+ position: relative;
103
+ display: inline-block;
104
+ width: 35px;
105
+ height: 22px;
106
+ margin-bottom: 0;
107
+ padding: 0;
100
108
  }
101
109
 
102
110
  /* Hide default HTML checkbox */
103
111
  .EquationEditorModal .switch input {
104
- opacity: 0;
105
- width: 0;
106
- height: 0;
112
+ opacity: 0;
113
+ width: 0;
114
+ height: 0;
107
115
  }
108
116
 
109
117
  /* The slider */
110
118
  .EquationEditorModal .slider {
111
- position: absolute;
112
- cursor: pointer;
113
- top: 0;
114
- left: 0;
115
- right: 0;
116
- bottom: 0;
117
- background-color: #ccc;
118
- -webkit-transition: 0.4s;
119
- transition: 0.4s;
119
+ position: absolute;
120
+ cursor: pointer;
121
+ top: 0;
122
+ left: 0;
123
+ right: 0;
124
+ bottom: 0;
125
+ background-color: #ccc;
126
+ -webkit-transition: 0.4s;
127
+ transition: 0.4s;
120
128
  }
121
129
 
122
130
  .EquationEditorModal .slider:before {
123
- position: absolute;
124
- content: "";
125
- height: 14px;
126
- width: 14px;
127
- left: 4px;
128
- bottom: 4px;
129
- background-color: white;
130
- -webkit-transition: 0.4s;
131
- transition: 0.4s;
131
+ position: absolute;
132
+ content: "";
133
+ height: 14px;
134
+ width: 14px;
135
+ left: 4px;
136
+ bottom: 4px;
137
+ background-color: white;
138
+ -webkit-transition: 0.4s;
139
+ transition: 0.4s;
132
140
  }
133
141
 
134
142
  .EquationEditorModal input:checked + .slider {
135
- background-color: #663676;
143
+ background-color: #663676;
136
144
  }
137
145
 
138
146
  .EquationEditorModal input:focus + .slider {
139
- box-shadow: 0 0 1px #2196f3;
147
+ box-shadow: 0 0 1px #2196f3;
140
148
  }
141
149
 
142
150
  .EquationEditorModal input:checked + .slider:before {
143
- -webkit-transform: translateX(13px);
144
- -ms-transform: translateX(13px);
145
- transform: translateX(13px);
151
+ -webkit-transform: translateX(13px);
152
+ -ms-transform: translateX(13px);
153
+ transform: translateX(13px);
146
154
  }
147
155
 
148
156
  /* Rounded sliders */
149
157
  .EquationEditorModal .slider.round {
150
- border-radius: 18px;
158
+ border-radius: 18px;
151
159
  }
152
160
 
153
161
  .EquationEditorModal .slider.round:before {
154
- border-radius: 50%;
162
+ border-radius: 50%;
155
163
  }
package/src/EquationEditorModal.jsx CHANGED
@@ -1,81 +1,78 @@
1
- import React from 'react'
2
- import EquationEditor from './EquationEditor'
1
+ import React from "react";
2
+ import EquationEditor from "./EquationEditor.jsx";
3
3
 
4
- import './EquationEditorModal.css';
4
+ import "./EquationEditorModal.css";
5
5
 
6
- let GLOBAL_lastSelectedExpertMode = false
6
+ let GLOBAL_lastSelectedExpertMode = false;
7
7
 
8
8
  export default class EquationEditorModal extends React.Component {
9
- constructor(props) {
10
- super(props);
9
+ constructor(props) {
10
+ super(props);
11
11
 
12
- this.state = {
13
- useExpertMode: GLOBAL_lastSelectedExpertMode
14
- }
12
+ this.state = {
13
+ useExpertMode: GLOBAL_lastSelectedExpertMode,
14
+ };
15
15
 
16
- this.handleCloseCallback = props.handleClose
17
- this.handleInsertCallback = props.handleInsert
18
- }
16
+ this.handleCloseCallback = props.handleClose;
17
+ this.handleInsertCallback = props.handleInsert;
18
+ }
19
19
 
20
- handleInsert = (latex) => {
21
- this.handleInsertCallback(latex)
22
- }
20
+ handleInsert = (latex) => {
21
+ this.handleInsertCallback(latex);
22
+ };
23
23
 
24
- handleClose = () => {
25
- this.handleCloseCallback()
26
- }
24
+ handleClose = () => {
25
+ this.handleCloseCallback();
26
+ };
27
27
 
28
- componentDidMount() {
29
- }
28
+ componentDidMount() {}
30
29
 
31
- isMobile() {
32
- return ((window.innerHeight > window.innerWidth) && (window.innerHeight < 820)) ||
33
- (window.innerHeight < 500)
34
- }
30
+ isMobile() {
31
+ return (
32
+ (window.innerHeight > window.innerWidth && window.innerHeight < 820) ||
33
+ window.innerHeight < 500
34
+ );
35
+ }
35
36
 
36
- handleExpertModeSwitchChange(e) {
37
- GLOBAL_lastSelectedExpertMode = this.expertModeSwitch.checked
38
- this.setState({useExpertMode:this.expertModeSwitch.checked})
39
- }
37
+ handleExpertModeSwitchChange(e) {
38
+ GLOBAL_lastSelectedExpertMode = this.expertModeSwitch.checked;
39
+ this.setState({ useExpertMode: this.expertModeSwitch.checked });
40
+ }
40
41
 
41
- render() {
42
- let useClass="EquationEditorModal"
43
- if (this.isMobile())
44
- useClass="EquationEditorModal-mobile"
42
+ render() {
43
+ let useClass = "EquationEditorModal";
44
+ if (this.isMobile()) useClass = "EquationEditorModal-mobile";
45
45
 
46
- return (
47
- <>
48
- <div
49
- className="EquationEditorModal-background"
50
- onClick={this.handleClose} >
51
- </div>
52
- <div
53
- className={useClass}
54
- ref={(r) => this.modalDiv = r} >
55
- { !this.isMobile() &&
56
- <div className="title">
57
- Equation Editor
58
- <div className="expertModeSwitch">
59
- Expert mode
60
- <label className="switch">
61
- <input type="checkbox"
62
- ref={(r) => this.expertModeSwitch = r}
63
- onChange={(e) => this.handleExpertModeSwitchChange(e)}
64
- checked = {this.state.useExpertMode}
65
- />
66
- <span className="slider round"></span>
67
- </label>
68
- </div>
69
- </div>
70
- }
71
- <EquationEditor
72
- ref={(r) => this.equationEditor = r}
73
- latex={this.props.latex}
74
- useExpertMode={this.state.useExpertMode}
75
- handleInsert={this.handleInsert}
76
- handleCancel={this.handleClose}/>
77
- </div>
78
- </>
79
- );
80
- }
81
- };
46
+ return (
47
+ <>
48
+ <div className="EquationEditorModal-background" onClick={this.handleClose}></div>
49
+ <div className={useClass} ref={(r) => (this.modalDiv = r)}>
50
+ {!this.isMobile() && (
51
+ <div className="title">
52
+ Equation Editor
53
+ <div className="expertModeSwitch">
54
+ Expert mode
55
+ <label className="switch">
56
+ <input
57
+ type="checkbox"
58
+ ref={(r) => (this.expertModeSwitch = r)}
59
+ onChange={(e) => this.handleExpertModeSwitchChange(e)}
60
+ checked={this.state.useExpertMode}
61
+ />
62
+ <span className="slider round"></span>
63
+ </label>
64
+ </div>
65
+ </div>
66
+ )}
67
+ <EquationEditor
68
+ ref={(r) => (this.equationEditor = r)}
69
+ latex={this.props.latex}
70
+ useExpertMode={this.state.useExpertMode}
71
+ handleInsert={this.handleInsert}
72
+ handleCancel={this.handleClose}
73
+ />
74
+ </div>
75
+ </>
76
+ );
77
+ }
78
+ }
package/src/MathRichInput.css CHANGED
@@ -1,108 +1,126 @@
1
1
  *,
2
2
  :after,
3
3
  :before {
4
- -webkit-box-sizing: border-box;
5
- -moz-box-sizing: border-box;
6
- box-sizing: border-box;
4
+ -webkit-box-sizing: border-box;
5
+ -moz-box-sizing: border-box;
6
+ box-sizing: border-box;
7
7
  }
8
8
 
9
9
  .MathRichInput-Container {
10
- width: 100%;
11
- border-radius: 5px;
10
+ width: 100%;
11
+ border-radius: 5px;
12
12
  }
13
13
 
14
-
15
-
16
14
  .MathRichInput-scrollview {
17
- position: relative;
18
- display: flex;
19
- border-radius: 5px;
15
+ position: relative;
16
+ display: flex;
17
+ border-radius: 5px;
20
18
  }
21
19
 
22
20
  .MathRichInput p {
23
- padding: 0px;
24
- margin: 0px;
21
+ padding: 0px;
22
+ margin: 0px;
25
23
  }
26
24
 
27
25
  .MathRichInput {
28
- font-size: 18px;
29
- padding: 10px;
30
- width: 100%;
31
- border-radius: 5px;
32
- background-color: #fff;
33
- overflow-x: scroll;
34
- overflow: overlay;
26
+ font-size: 18px;
27
+ padding: 10px;
28
+ width: 100%;
29
+ border-radius: 5px;
30
+ background-color: #fff;
31
+ overflow-x: scroll;
32
+ overflow: overlay;
35
33
  }
36
34
 
37
35
  .MathRichInput:empty::before {
38
- content: attr(data-placeholder);
39
- color: #acb6c0;
40
- font-size: 15px;
36
+ content: attr(data-placeholder);
37
+ color: #acb6c0;
38
+ font-size: 15px;
41
39
  }
42
40
  .MathRichInput:empty:focus::before {
43
- content: "";
41
+ content: "";
44
42
  }
45
43
 
46
44
  .MathRichInput:focus {
47
- outline: 0;
45
+ outline: 0;
48
46
  }
49
47
 
50
48
  .MathRichInput .katex {
51
- border: 0px;
49
+ border: 0px;
52
50
  }
53
51
 
54
52
  .MathRichInput .base {
55
- /* Combine the katex and base class name to ensure the whole equation is surrounded */
56
- background-color: #f0f0f0;
57
- border: 0px;
58
- border: 1px dotted #d0d0d0;
59
- border-radius: 5px;
60
- padding: 2px;
61
- margin: 0px 2px;
53
+ /* Combine the katex and base class name to ensure the whole equation is surrounded */
54
+ background-color: #f0f0f0;
55
+ border: 0px;
56
+ border: 1px dotted #d0d0d0;
57
+ border-radius: 5px;
58
+ padding: 2px;
59
+ margin: 0px 2px;
62
60
  }
63
61
 
64
62
  .katex .mathnormal {
65
- font-family: KaTeX_Math;
66
- font-style: italic;
63
+ font-family: KaTeX_Math;
64
+ font-style: italic;
67
65
  }
68
66
 
69
67
  .MathRichInput .katex-error {
70
- background-color: #f0f0f0;
71
- border: 0px;
72
- border: 1px dotted #ff8080;
73
- border-radius: 5px;
74
- padding: 2px;
75
- margin: 0px 2px;
68
+ background-color: #f0f0f0;
69
+ border: 0px;
70
+ border: 1px dotted #ff8080;
71
+ border-radius: 5px;
72
+ padding: 2px;
73
+ margin: 0px 2px;
76
74
  }
77
75
 
78
76
  .MathRichInput-Container {
79
- :focus-within {
80
- background-color: white;
81
- outline: 0px;
82
- /* border: 1px solid #663676; */
83
- }
84
-
85
- &.dark {
86
- :focus-within {
87
- background: none;
88
- outline: 0px;
89
- border: none;
90
- }
91
- .MathRichInput {
92
- background: none;
93
- color: white;
94
- border: none;
95
-
96
- .katex {
97
- .base {
98
- background: none;
99
- }
100
- }
101
-
102
- &:focus {
103
- border: none;
104
- background: none;
105
- }
106
- }
107
- }
77
+ :focus-within {
78
+ background-color: white;
79
+ outline: 0px;
80
+ /* border: 1px solid #663676; */
81
+ }
82
+
83
+ &.dark {
84
+ :focus-within {
85
+ background: none;
86
+ outline: 0px;
87
+ border: none;
88
+ }
89
+ .MathRichInput {
90
+ color: white;
91
+
92
+ background: none;
93
+ border: none;
94
+
95
+ .katex,
96
+ .base {
97
+ background: none;
98
+ }
99
+
100
+ &:focus {
101
+ border: none;
102
+ background: none;
103
+ }
104
+ }
105
+ }
106
+
107
+ &.question-edit-input {
108
+ .MathRichInput {
109
+ border-radius: 12px;
110
+ font-size: 32px;
111
+ font-weight: 900;
112
+
113
+ &:focus {
114
+ border: none;
115
+ background: rgba(255, 255, 255, 0.1);
116
+ }
117
+ }
118
+ }
119
+
120
+ &.answer-edit-input {
121
+ .MathRichInput {
122
+ font-weight: 600;
123
+ font-size: 16px;
124
+ }
125
+ }
108
126
  }