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