@zzish/math-rich-input 0.1.49 → 0.1.51

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