@zzish/math-rich-input 0.1.42 → 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 +592 -560
  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 +86 -66
  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/EquationEditor.css CHANGED
@@ -1,254 +1,255 @@
1
1
  .EquationEditor {
2
- height: auto;
3
- text-align: center;
2
+ height: auto;
3
+ text-align: center;
4
4
  }
5
5
 
6
6
  .EquationEditor .editableAndCursorButtonsWrapper {
7
- display: flex;
8
- align-items: center;
9
- justify-content: center;
7
+ display: flex;
8
+ align-items: center;
9
+ justify-content: center;
10
10
  }
11
11
 
12
12
  .EquationEditor .editableWrapper {
13
- overflow: auto;
14
- width: 100%;
13
+ overflow: auto;
14
+ width: 100%;
15
15
  }
16
16
 
17
17
  .EquationEditor .cursorButton {
18
- font-size: 14px;
19
- font-weight: bold;
20
- color: #663676;
21
- background: white;
22
- text-align: center;
23
- border: 1px solid #663676;
24
- border-radius: 5px;
25
- min-width: 40px;
26
- width: auto;
27
- height: 40px;
28
- padding: 0px;
29
- margin-top: 10px;
30
- margin-left: 15px;
31
- margin-right: 15px;
32
- /* transition: all .2s ease-in-out; */
18
+ font-size: 14px;
19
+ font-weight: bold;
20
+ color: #663676;
21
+ background: white;
22
+ text-align: center;
23
+ border: 1px solid #663676;
24
+ border-radius: 5px;
25
+ min-width: 40px;
26
+ width: auto;
27
+ height: 40px;
28
+ padding: 0px;
29
+ margin-top: 10px;
30
+ margin-left: 15px;
31
+ margin-right: 15px;
32
+ /* transition: all .2s ease-in-out; */
33
33
  }
34
34
 
35
35
  .EquationEditor .centerBox {
36
- display: inline-block;
37
- text-align: center;
36
+ display: inline-block;
37
+ text-align: center;
38
38
  }
39
39
 
40
40
  .EquationEditor .editable {
41
- /* width:auto; */
42
- text-align: left;
43
- min-height: 26px;
44
- min-width: 150px;
45
- font-size: 20px;
46
- color: #404040;
47
- border: 1px solid #b0b0b0;
48
- border-radius: 5px;
49
- /* height:36px; */
50
- padding: 7px 10px 7px 10px;
51
- margin-top: 6px;
52
- margin-bottom: 5px;
41
+ /* width:auto; */
42
+ text-align: left;
43
+ min-height: 26px;
44
+ min-width: 150px;
45
+ font-size: 20px;
46
+ color: #404040;
47
+ border: 1px solid #b0b0b0;
48
+ border-radius: 5px;
49
+ /* height:36px; */
50
+ padding: 7px 10px 7px 10px;
51
+ margin-top: 6px;
52
+ margin-bottom: 5px;
53
53
  }
54
54
 
55
55
  .EquationEditor .editable-placeholder {
56
- position: absolute;
57
- z-index: -1;
58
- min-height: 26px;
59
- min-width: 150px;
60
- font-size: 15px;
61
- color: grey;
62
- /* Note the x translation needs to be updatad programatically if the modal width changes */
63
- transform: translate(-12px, -36px);
56
+ position: absolute;
57
+ z-index: -1;
58
+ min-height: 26px;
59
+ min-width: 150px;
60
+ font-size: 15px;
61
+ color: grey;
62
+ /* Note the x translation needs to be updatad programatically if the modal width changes */
63
+ transform: translate(-12px, -36px);
64
64
  }
65
65
 
66
66
  .EquationEditor .editable:focus-within {
67
- border-radius: 5px;
68
- border: 1px solid #663676 !important;
69
- box-shadow: 0px 0px 0px white;
70
- /* box-shadow: inset 1px 1px 5px #a0a0a0; */
67
+ border-radius: 5px;
68
+ border: 1px solid #663676 !important;
69
+ box-shadow: 0px 0px 0px white;
70
+ /* box-shadow: inset 1px 1px 5px #a0a0a0; */
71
71
  }
72
72
 
73
73
  .latexInputAreaWrapper {
74
- width: auto;
74
+ width: auto;
75
75
  }
76
76
 
77
77
  .EquationEditor .katexRenderedInput {
78
- text-align: left;
79
- min-height: 30px;
80
- width: 90%;
81
- font-size: 16px;
82
- color: #404040;
83
- border: 0px solid #b0b0b0;
84
- border-radius: 5px;
85
- /* height:36px; */
86
- padding: 7px 10px 4px 10px;
87
- margin: 5px 15px;
78
+ text-align: left;
79
+ min-height: 30px;
80
+ width: 90%;
81
+ font-size: 16px;
82
+ color: #404040;
83
+ border: 0px solid #b0b0b0;
84
+ border-radius: 5px;
85
+ /* height:36px; */
86
+ padding: 7px 10px 4px 10px;
87
+ margin: 5px 15px;
88
88
  }
89
89
 
90
90
  .EquationEditor .latexInput {
91
- text-align: left;
92
- height: 88px;
93
- width: 90%;
94
- font-size: 16px;
95
- /* color: #202020; */
96
- /* background-color: #e0e0e0; */
97
- /* color: #00ff00;
91
+ text-align: left;
92
+ height: 88px;
93
+ width: 90%;
94
+ font-size: 16px;
95
+ /* color: #202020; */
96
+ /* background-color: #e0e0e0; */
97
+ /* color: #00ff00;
98
98
  background-color: #202020; */
99
- color: #007000;
100
- background-color: #e0e0e0;
101
- border: 1px solid #b0b0b0;
102
- border-radius: 5px;
103
- padding: 7px 10px 5px 10px;
104
- margin-top: 10px;
99
+ color: #007000;
100
+ background-color: #fff;
101
+ border: 1px solid #b0b0b0;
102
+ border-radius: 5px;
103
+ padding: 7px 10px 5px 10px;
104
+ margin-top: 10px;
105
+ box-shadow: 0px 0px 0px white;
105
106
  }
106
107
 
107
108
  .EquationEditor .latexInput:focus {
108
- border: 1px solid #663676 !important;
109
- outline: 0;
110
- /* outline: 2px solid #663676!important; */ /* Has square corners */
111
- /* box-shadow: inset 1px 1px 5px #a0a0a0, 0px 0px 3px #663676; */
109
+ border: 1px solid #663676 !important;
110
+ outline: 0;
111
+ /* outline: 2px solid #663676!important; */ /* Has square corners */
112
+ /* box-shadow: inset 1px 1px 5px #a0a0a0, 0px 0px 3px #663676; */
112
113
  }
113
114
 
114
115
  .EquationEditor .insertButton {
115
- font-size: 14px;
116
- color: white;
117
- background: #663676;
118
- text-align: left;
119
- border: 0px;
120
- border-radius: 5px;
121
- height: 36px;
122
- padding: 0px 30px;
123
- margin-top: 5px;
124
- margin-bottom: 5px;
125
- margin-left: 5px;
126
- margin-right: 5px;
116
+ font-size: 14px;
117
+ color: white;
118
+ background: #663676;
119
+ text-align: left;
120
+ border: 0px;
121
+ border-radius: 5px;
122
+ height: 36px;
123
+ padding: 0px 30px;
124
+ margin-top: 5px;
125
+ margin-bottom: 5px;
126
+ margin-left: 5px;
127
+ margin-right: 5px;
127
128
  }
128
129
 
129
130
  .EquationEditor .cancelButton {
130
- font-size: 14px;
131
- background: white;
132
- color: #663676;
133
- text-align: left;
134
- border: 1px solid #663676;
135
- border-radius: 5px;
136
- height: 36px;
137
- padding: 0px 30px;
138
- margin-bottom: 10px;
139
- margin-left: 5px;
140
- margin-right: 5px;
131
+ font-size: 14px;
132
+ background: white;
133
+ color: #663676;
134
+ text-align: left;
135
+ border: 1px solid #663676;
136
+ border-radius: 5px;
137
+ height: 36px;
138
+ padding: 0px 30px;
139
+ margin-bottom: 10px;
140
+ margin-left: 5px;
141
+ margin-right: 5px;
141
142
  }
142
143
 
143
144
  .EquationEditor .insertButton:hover {
144
- color: white;
145
- background: #461656;
146
- cursor: pointer;
145
+ color: white;
146
+ background: #461656;
147
+ cursor: pointer;
147
148
  }
148
149
 
149
150
  .EquationEditor .recentSymbols-recentText-active {
150
- font-size: 14px;
151
- font-weight: bold;
152
- color: #404040;
153
- margin-right: 10px;
151
+ font-size: 14px;
152
+ font-weight: bold;
153
+ color: #404040;
154
+ margin-right: 10px;
154
155
  }
155
156
 
156
157
  .EquationEditor .recentSymbols-recentText-not-active {
157
- font-size: 14px;
158
- font-weight: bold;
159
- color: #808080;
160
- margin-top: 10px;
161
- margin-bottom: 10px;
158
+ font-size: 14px;
159
+ font-weight: bold;
160
+ color: #808080;
161
+ margin-top: 10px;
162
+ margin-bottom: 10px;
162
163
  }
163
164
 
164
165
  .EquationEditor .tabBar {
165
- background: white;
166
- text-align: left;
167
- border: 0px;
168
- padding: 10px 10px 5px 20px;
169
- margin: 5px;
166
+ background: white;
167
+ text-align: left;
168
+ border: 0px;
169
+ padding: 10px 10px 5px 20px;
170
+ margin: 5px;
170
171
  }
171
172
 
172
173
  @media (max-width: 500px) {
173
- .EquationEditor .tabBar {
174
- padding: 5px 0;
175
- }
174
+ .EquationEditor .tabBar {
175
+ padding: 5px 0;
176
+ }
176
177
  }
177
178
 
178
179
  .EquationEditor .tab {
179
- font-size: 14px;
180
- font-weight: bold;
181
- color: #404040;
182
- text-align: left;
183
- border: 0px;
184
- height: 30px;
185
- padding: 5px 10px;
186
- margin: 5px;
187
- border-bottom: 6px solid #d0d0d0;
180
+ font-size: 14px;
181
+ font-weight: bold;
182
+ color: #404040;
183
+ text-align: left;
184
+ border: 0px;
185
+ height: 30px;
186
+ padding: 5px 10px;
187
+ margin: 5px;
188
+ border-bottom: 6px solid #d0d0d0;
188
189
  }
189
190
 
190
191
  .EquationEditor .tab:hover {
191
- cursor: pointer;
192
+ cursor: pointer;
192
193
  }
193
194
  .EquationEditor .tab-selected {
194
- font-size: 14px;
195
- font-weight: bold;
196
- color: #404040;
197
- text-align: left;
198
- border: 0px;
199
- height: 30px;
200
- padding: 5px 10px;
201
- margin: 5px;
202
- border-bottom: 6px solid #663676;
195
+ font-size: 14px;
196
+ font-weight: bold;
197
+ color: #404040;
198
+ text-align: left;
199
+ border: 0px;
200
+ height: 30px;
201
+ padding: 5px 10px;
202
+ margin: 5px;
203
+ border-bottom: 6px solid #663676;
203
204
  }
204
205
 
205
206
  .EquationEditor .recentSymbolsButtonArea {
206
- display: flex;
207
- justify-content: flex-start;
208
- width: 486px;
209
- padding: 2px;
210
- margin: 5px;
211
- margin-left: 15px;
207
+ display: flex;
208
+ justify-content: flex-start;
209
+ width: 486px;
210
+ padding: 2px;
211
+ margin: 5px;
212
+ margin-left: 15px;
212
213
  }
213
214
 
214
215
  .EquationEditor .symbolButtonAreasOuterContainer {
215
- overflow-x: auto;
216
+ overflow-x: auto;
216
217
  }
217
218
 
218
219
  .EquationEditor .symbolButtonAreasInnerContainer {
219
- display: flex;
220
- width: 2330px;
220
+ display: flex;
221
+ width: 2330px;
221
222
  }
222
223
 
223
224
  .EquationEditor .symbolButtonArea {
224
- display: grid;
225
- grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
226
- grid-auto-rows: minmax(min-content, max-content);
227
- grid-gap: 1.5px;
228
- padding: 12px;
229
- margin: 0px;
225
+ display: grid;
226
+ grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
227
+ grid-auto-rows: minmax(min-content, max-content);
228
+ grid-gap: 1.5px;
229
+ padding: 12px;
230
+ margin: 0px;
230
231
  }
231
232
 
232
233
  .EquationEditor .symbolButtonArea-1 {
233
- width: 66px;
234
+ width: 66px;
234
235
  }
235
236
 
236
237
  .EquationEditor .symbolButtonArea-2 {
237
- width: 108px;
238
+ width: 108px;
238
239
  }
239
240
 
240
241
  .EquationEditor .symbolButtonArea-3 {
241
- width: 150px;
242
+ width: 150px;
242
243
  }
243
244
 
244
245
  .EquationEditor .symbolButtonArea-4 {
245
- width: 192px;
246
+ width: 192px;
246
247
  }
247
248
 
248
249
  .EquationEditor .symbolButtonArea-5 {
249
- width: 234px;
250
+ width: 234px;
250
251
  }
251
252
 
252
253
  .EquationEditor .symbolButtonArea-6 {
253
- width: 276px;
254
+ width: 276px;
254
255
  }