@zzish/math-rich-input 0.1.35 → 0.1.38
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 +25 -18
- package/dist/math-rich-input.css +175 -175
- package/package.json +1 -1
- package/src/mathRichInputHelper.js +8 -2
- package/src/mimeTypeHelper.js +72 -81
package/dist/index.js
CHANGED
|
@@ -20534,27 +20534,27 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
|
|
|
20534
20534
|
|
|
20535
20535
|
var INLINE_LATEX_REG_EXP = /\$\$[\s\S]+?\$\$|\\\[[\s\S]+?\\\]|\\\([\s\S]+?\\\)|\$[^$\\]*(?:\\.[^$\\]*)*\$/g;
|
|
20536
20536
|
var BLOCL_LATEX_REG_EXP = /\$\$[\s\S]+?\$\$|\\\[[\s\S]+?\\\]/g;
|
|
20537
|
-
var MIME_TYPE_PLAIN_TEXT$2 =
|
|
20538
|
-
var MIME_TYPE_HTML$2 =
|
|
20539
|
-
var MIME_TYPE_TEX$2 =
|
|
20540
|
-
var MIME_TYPE_ZZISH_HTML_MATH$2 =
|
|
20537
|
+
var MIME_TYPE_PLAIN_TEXT$2 = 'text/plain';
|
|
20538
|
+
var MIME_TYPE_HTML$2 = 'text/html';
|
|
20539
|
+
var MIME_TYPE_TEX$2 = 'application/x-tex';
|
|
20540
|
+
var MIME_TYPE_ZZISH_HTML_MATH$2 = 'application/x-zzish-html-math';
|
|
20541
20541
|
var LATEX_COMMAND_REG_EXP = /\\[a-zA-Z]/g;
|
|
20542
|
-
var HTML_CODES_REG_EXP = /&(#36|quot|apos|lt|gt|amp);/;
|
|
20542
|
+
var HTML_CODES_REG_EXP = /&(#36|quot|apos|lt|gt|amp|#44|#58|#124);/;
|
|
20543
20543
|
var HTML_TAGS_REG_EXP = /<(br|basefont|hr|input|source|frame|param|area|meta|!--|col|link|option|base|img|wbr|!DOCTYPE).*?>|<(a|abbr|acronym|address|applet|article|aside|audio|b|bdi|bdo|big|blockquote|body|button|canvas|caption|center|cite|code|colgroup|command|datalist|dd|del|details|dfn|dialog|dir|div|dl|dt|em|embed|fieldset|figcaption|figure|font|footer|form|frameset|head|header|hgroup|h1|h2|h3|h4|h5|h6|html|i|iframe|ins|kbd|keygen|label|legend|li|map|mark|menu|meter|nav|noframes|noscript|object|ol|optgroup|output|p|pre|progress|q|rp|rt|ruby|s|samp|script|section|select|small|span|strike|strong|style|sub|summary|sup|table|tbody|td|textarea|tfoot|th|thead|time|title|tr|track|tt|u|ul|var|video).*?<\/\2>/i;
|
|
20544
20544
|
var HTML_MATH_TAGS_REC_EXP = /<math>/i;
|
|
20545
20545
|
var WORDS_REG_EXP = /^[a-zA-Z]*[,."';:?!]*$/i;
|
|
20546
20546
|
|
|
20547
20547
|
function stripDollars$1(stringToStrip) {
|
|
20548
|
-
return stringToStrip[0] ===
|
|
20548
|
+
return stringToStrip[0] === '$' && stringToStrip[1] !== '$' ? stringToStrip.slice(1, -1) : stringToStrip.slice(2, -2);
|
|
20549
20549
|
}
|
|
20550
20550
|
|
|
20551
20551
|
function isTextLatexMath(text) {
|
|
20552
20552
|
// We need at least two dollar signs to be latex
|
|
20553
|
-
var i = text.indexOf(
|
|
20553
|
+
var i = text.indexOf('$');
|
|
20554
20554
|
if (i < 0) return false;
|
|
20555
|
-
var j = text.indexOf(
|
|
20555
|
+
var j = text.indexOf('\\$');
|
|
20556
20556
|
if (j >= 0) return true;
|
|
20557
|
-
i = text.indexOf(
|
|
20557
|
+
i = text.indexOf('$', i + 1);
|
|
20558
20558
|
if (i < 0) return false; // Lets try and extract the potentially latex nodes
|
|
20559
20559
|
|
|
20560
20560
|
var latexMatch = text.match(BLOCL_LATEX_REG_EXP);
|
|
@@ -20566,7 +20566,7 @@ function isTextLatexMath(text) {
|
|
|
20566
20566
|
} // If all dollar signs are followed by a number, it probably is not latex
|
|
20567
20567
|
|
|
20568
20568
|
|
|
20569
|
-
i = text.indexOf(
|
|
20569
|
+
i = text.indexOf('$');
|
|
20570
20570
|
var probablyLatex = false;
|
|
20571
20571
|
|
|
20572
20572
|
while (i >= 0) {
|
|
@@ -20577,14 +20577,14 @@ function isTextLatexMath(text) {
|
|
|
20577
20577
|
|
|
20578
20578
|
var c = text.charAt(i + 1);
|
|
20579
20579
|
|
|
20580
|
-
if (c <
|
|
20580
|
+
if (c < '0' || c > '9') {
|
|
20581
20581
|
probablyLatex = true;
|
|
20582
20582
|
break;
|
|
20583
20583
|
}
|
|
20584
20584
|
|
|
20585
|
-
i = text.indexOf(
|
|
20585
|
+
i = text.indexOf('$', i + 1);
|
|
20586
20586
|
} // Note that there are other uses of a dollar sign, that couold potentially be
|
|
20587
|
-
// entered. For example, if someone created a question about the use of the
|
|
20587
|
+
// entered. For example, if someone created a question about the use of the
|
|
20588
20588
|
// $ sign in excel cells or the use of the $ sign in regular expressions.
|
|
20589
20589
|
|
|
20590
20590
|
|
|
@@ -20603,14 +20603,14 @@ function isTextLatexMath(text) {
|
|
|
20603
20603
|
var allEmpty = true;
|
|
20604
20604
|
|
|
20605
20605
|
for (var _i2 = 0; _i2 < latexMatch.length; _i2++) {
|
|
20606
|
-
if (latexMatch[_i2] !==
|
|
20606
|
+
if (latexMatch[_i2] !== '') allEmpty = false;
|
|
20607
20607
|
}
|
|
20608
20608
|
|
|
20609
20609
|
if (allEmpty) return false; // If an element between two dollars is two or more words and only words
|
|
20610
20610
|
// and at least one word has three characters then we will treat it as text
|
|
20611
20611
|
|
|
20612
20612
|
for (var _i3 = 0; _i3 < latexMatch.length; _i3++) {
|
|
20613
|
-
var words = latexMatch[_i3].split(
|
|
20613
|
+
var words = latexMatch[_i3].split(' ');
|
|
20614
20614
|
|
|
20615
20615
|
if (words.length >= 2) {
|
|
20616
20616
|
var allWords = true;
|
|
@@ -20643,8 +20643,9 @@ function isTextLatexMath(text) {
|
|
|
20643
20643
|
}
|
|
20644
20644
|
}
|
|
20645
20645
|
function isTextHtml(text) {
|
|
20646
|
+
text = text.replace(/[\r\n]+/g, ' ');
|
|
20646
20647
|
if (HTML_CODES_REG_EXP.test(text)) return true;
|
|
20647
|
-
var i = text.indexOf(
|
|
20648
|
+
var i = text.indexOf('<');
|
|
20648
20649
|
if (i < 0) return false;
|
|
20649
20650
|
var containsHtmlTags = HTML_TAGS_REG_EXP.test(text);
|
|
20650
20651
|
return containsHtmlTags;
|
|
@@ -20891,11 +20892,14 @@ function encodeToHtml(text) {
|
|
|
20891
20892
|
text = text.replace(/'/g, "'");
|
|
20892
20893
|
text = text.replace(/"/g, """);
|
|
20893
20894
|
text = text.replace(/\$/g, "$");
|
|
20895
|
+
text = text.replace(/,/g, ",");
|
|
20896
|
+
text = text.replace(/:/g, ":");
|
|
20897
|
+
text = text.replace(/\|/g, "|");
|
|
20894
20898
|
return text;
|
|
20895
20899
|
}
|
|
20896
20900
|
|
|
20897
20901
|
var decodeFromHtml = function () {
|
|
20898
|
-
var translate_re = /&(#36|quot|apos|lt|gt|amp);/g,
|
|
20902
|
+
var translate_re = /&(#36|quot|apos|lt|gt|amp|#44|#58|#124);/g,
|
|
20899
20903
|
translate = {
|
|
20900
20904
|
// 'nbsp': String.fromCharCode(160),
|
|
20901
20905
|
'#36': '$',
|
|
@@ -20903,7 +20907,10 @@ var decodeFromHtml = function () {
|
|
|
20903
20907
|
'apos': '\'',
|
|
20904
20908
|
'lt': '<',
|
|
20905
20909
|
'gt': '>',
|
|
20906
|
-
'amp': '&'
|
|
20910
|
+
'amp': '&',
|
|
20911
|
+
'#44': ',',
|
|
20912
|
+
'#58': ':',
|
|
20913
|
+
'#124': '|'
|
|
20907
20914
|
},
|
|
20908
20915
|
translator = function translator($0, $1) {
|
|
20909
20916
|
return translate[$1];
|
package/dist/math-rich-input.css
CHANGED
|
@@ -78,181 +78,6 @@
|
|
|
78
78
|
padding: 2px;
|
|
79
79
|
margin: 0px 2px;
|
|
80
80
|
}
|
|
81
|
-
/* Note that the top left position of the accent bar is set programatically in componentDidMount */
|
|
82
|
-
|
|
83
|
-
.AccentBar {
|
|
84
|
-
position: absolute;
|
|
85
|
-
z-index: 1;
|
|
86
|
-
width: 360px;
|
|
87
|
-
background-color: #fff;
|
|
88
|
-
border: 1px solid #d0d0d0;
|
|
89
|
-
border-radius: 5px;
|
|
90
|
-
box-shadow: 1px 1px 5px #a0a0a0;
|
|
91
|
-
padding: 8px;
|
|
92
|
-
animation: 0.4s fadeIn1;
|
|
93
|
-
animation-fill-mode: forwards;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
.AccentBar-compact {
|
|
97
|
-
display: flex;
|
|
98
|
-
position: absolute;
|
|
99
|
-
z-index: 1;
|
|
100
|
-
background-color: white;
|
|
101
|
-
border: 1px solid #d0d0d0;
|
|
102
|
-
border-radius: 5px;
|
|
103
|
-
box-shadow: 1px 1px 5px #a0a0a0;
|
|
104
|
-
padding: 5px;
|
|
105
|
-
animation: 0.4s fadeIn1;
|
|
106
|
-
animation-fill-mode: forwards;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
.AccentBar-outerContainer {
|
|
110
|
-
overflow-y: scroll;
|
|
111
|
-
border-radius: 5px;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
.AccentBar-innerContainer {
|
|
115
|
-
height: 350px;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
@keyframes fadeIn1 {
|
|
119
|
-
0% {
|
|
120
|
-
opacity: 0;
|
|
121
|
-
}
|
|
122
|
-
100% {
|
|
123
|
-
opacity: 1;
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
.AccentBar .symbols-grid {
|
|
128
|
-
display: grid;
|
|
129
|
-
grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
|
|
130
|
-
grid-auto-rows: minmax(min-content, max-content);
|
|
131
|
-
grid-gap: 3px;
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
.AccentBar .insert-grid {
|
|
135
|
-
padding: 5px;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
.AccentBar .type-a-letter {
|
|
139
|
-
grid-column: 1/-1;
|
|
140
|
-
color: #a0a0a0;
|
|
141
|
-
font-family: sans-serif;
|
|
142
|
-
font-size: 14px;
|
|
143
|
-
font-weight: bold;
|
|
144
|
-
height: 36px;
|
|
145
|
-
padding-top: 12px;
|
|
146
|
-
padding-left: 20px;
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
.AccentBar-button {
|
|
150
|
-
font-family: sans-serif;
|
|
151
|
-
font-size: 17px;
|
|
152
|
-
width: 40px;
|
|
153
|
-
height: 36px;
|
|
154
|
-
background: #f4f4f4;
|
|
155
|
-
border-radius: 5px;
|
|
156
|
-
border: 0px;
|
|
157
|
-
padding: 1px;
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
.AB-compact {
|
|
161
|
-
margin: 0px;
|
|
162
|
-
background: white;
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
.AB-narrow {
|
|
166
|
-
width: 36px;
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
.AccentBar-button:hover {
|
|
170
|
-
color: white;
|
|
171
|
-
background: #663676;
|
|
172
|
-
cursor: pointer;
|
|
173
|
-
box-shadow: 1px 1px 3px #808080;
|
|
174
|
-
animation: 2s grow;
|
|
175
|
-
animation-fill-mode: forwards;
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
@keyframes grow {
|
|
179
|
-
00% {
|
|
180
|
-
transform: scale(1);
|
|
181
|
-
box-shadow: 0px 0px 0px #808080;
|
|
182
|
-
}
|
|
183
|
-
10% {
|
|
184
|
-
transform: scale(1.3);
|
|
185
|
-
box-shadow: 1px 1px 3px #808080;
|
|
186
|
-
}
|
|
187
|
-
90% {
|
|
188
|
-
transform: scale(1.3);
|
|
189
|
-
box-shadow: 1px 1px 3px #808080;
|
|
190
|
-
}
|
|
191
|
-
100% {
|
|
192
|
-
transform: scale(1.8);
|
|
193
|
-
box-shadow: 1px 1px 3px #808080;
|
|
194
|
-
}
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
.AccentBar-button:active {
|
|
198
|
-
background: #808080;
|
|
199
|
-
color: white;
|
|
200
|
-
cursor: pointer;
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
.AccentBar .tabBar {
|
|
204
|
-
background: white;
|
|
205
|
-
text-align: left;
|
|
206
|
-
border: 0px;
|
|
207
|
-
padding: 10px 0;
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
.AccentBar .tab {
|
|
211
|
-
font-size: 14px;
|
|
212
|
-
font-weight: bold;
|
|
213
|
-
color: #404040;
|
|
214
|
-
text-align: left;
|
|
215
|
-
border: 0px;
|
|
216
|
-
height: 30px;
|
|
217
|
-
padding: 2px 5px 2px 5px;
|
|
218
|
-
margin: 2px;
|
|
219
|
-
border-bottom: 4px solid #d0d0d0;
|
|
220
|
-
}
|
|
221
|
-
|
|
222
|
-
.AccentBar .tab:hover {
|
|
223
|
-
cursor: pointer;
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
.AccentBar .tab-selected {
|
|
227
|
-
font-size: 14px;
|
|
228
|
-
font-weight: bold;
|
|
229
|
-
color: #404040;
|
|
230
|
-
text-align: left;
|
|
231
|
-
border: 0px;
|
|
232
|
-
height: 30px;
|
|
233
|
-
padding: 2px 5px 2px 5px;
|
|
234
|
-
margin: 2px;
|
|
235
|
-
border-bottom: 4px solid #663676;
|
|
236
|
-
}
|
|
237
|
-
|
|
238
|
-
.AccentBar .section-label {
|
|
239
|
-
grid-column: 1/-1;
|
|
240
|
-
font-size: 13px;
|
|
241
|
-
font-weight: bold;
|
|
242
|
-
color: #663676;
|
|
243
|
-
margin-top: 8px;
|
|
244
|
-
margin-left: 8px;
|
|
245
|
-
margin-bottom: 4px;
|
|
246
|
-
}
|
|
247
|
-
|
|
248
|
-
.AccentBar .replace-section {
|
|
249
|
-
min-height: 70px;
|
|
250
|
-
}
|
|
251
|
-
|
|
252
|
-
.AccentBar .tabArea {
|
|
253
|
-
animation: 0.4s fadeIn1;
|
|
254
|
-
animation-fill-mode: forwards;
|
|
255
|
-
}
|
|
256
81
|
/* Note that the top left position of the toolbar is set programatically in componentDidMount */
|
|
257
82
|
|
|
258
83
|
.Toolbar {
|
|
@@ -538,6 +363,181 @@
|
|
|
538
363
|
.EquationEditorModal .slider.round:before {
|
|
539
364
|
border-radius: 50%;
|
|
540
365
|
}
|
|
366
|
+
/* Note that the top left position of the accent bar is set programatically in componentDidMount */
|
|
367
|
+
|
|
368
|
+
.AccentBar {
|
|
369
|
+
position: absolute;
|
|
370
|
+
z-index: 1;
|
|
371
|
+
width: 360px;
|
|
372
|
+
background-color: #fff;
|
|
373
|
+
border: 1px solid #d0d0d0;
|
|
374
|
+
border-radius: 5px;
|
|
375
|
+
box-shadow: 1px 1px 5px #a0a0a0;
|
|
376
|
+
padding: 8px;
|
|
377
|
+
animation: 0.4s fadeIn1;
|
|
378
|
+
animation-fill-mode: forwards;
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
.AccentBar-compact {
|
|
382
|
+
display: flex;
|
|
383
|
+
position: absolute;
|
|
384
|
+
z-index: 1;
|
|
385
|
+
background-color: white;
|
|
386
|
+
border: 1px solid #d0d0d0;
|
|
387
|
+
border-radius: 5px;
|
|
388
|
+
box-shadow: 1px 1px 5px #a0a0a0;
|
|
389
|
+
padding: 5px;
|
|
390
|
+
animation: 0.4s fadeIn1;
|
|
391
|
+
animation-fill-mode: forwards;
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
.AccentBar-outerContainer {
|
|
395
|
+
overflow-y: scroll;
|
|
396
|
+
border-radius: 5px;
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
.AccentBar-innerContainer {
|
|
400
|
+
height: 350px;
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
@keyframes fadeIn1 {
|
|
404
|
+
0% {
|
|
405
|
+
opacity: 0;
|
|
406
|
+
}
|
|
407
|
+
100% {
|
|
408
|
+
opacity: 1;
|
|
409
|
+
}
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
.AccentBar .symbols-grid {
|
|
413
|
+
display: grid;
|
|
414
|
+
grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
|
|
415
|
+
grid-auto-rows: minmax(min-content, max-content);
|
|
416
|
+
grid-gap: 3px;
|
|
417
|
+
}
|
|
418
|
+
|
|
419
|
+
.AccentBar .insert-grid {
|
|
420
|
+
padding: 5px;
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
.AccentBar .type-a-letter {
|
|
424
|
+
grid-column: 1/-1;
|
|
425
|
+
color: #a0a0a0;
|
|
426
|
+
font-family: sans-serif;
|
|
427
|
+
font-size: 14px;
|
|
428
|
+
font-weight: bold;
|
|
429
|
+
height: 36px;
|
|
430
|
+
padding-top: 12px;
|
|
431
|
+
padding-left: 20px;
|
|
432
|
+
}
|
|
433
|
+
|
|
434
|
+
.AccentBar-button {
|
|
435
|
+
font-family: sans-serif;
|
|
436
|
+
font-size: 17px;
|
|
437
|
+
width: 40px;
|
|
438
|
+
height: 36px;
|
|
439
|
+
background: #f4f4f4;
|
|
440
|
+
border-radius: 5px;
|
|
441
|
+
border: 0px;
|
|
442
|
+
padding: 1px;
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
.AB-compact {
|
|
446
|
+
margin: 0px;
|
|
447
|
+
background: white;
|
|
448
|
+
}
|
|
449
|
+
|
|
450
|
+
.AB-narrow {
|
|
451
|
+
width: 36px;
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
.AccentBar-button:hover {
|
|
455
|
+
color: white;
|
|
456
|
+
background: #663676;
|
|
457
|
+
cursor: pointer;
|
|
458
|
+
box-shadow: 1px 1px 3px #808080;
|
|
459
|
+
animation: 2s grow;
|
|
460
|
+
animation-fill-mode: forwards;
|
|
461
|
+
}
|
|
462
|
+
|
|
463
|
+
@keyframes grow {
|
|
464
|
+
00% {
|
|
465
|
+
transform: scale(1);
|
|
466
|
+
box-shadow: 0px 0px 0px #808080;
|
|
467
|
+
}
|
|
468
|
+
10% {
|
|
469
|
+
transform: scale(1.3);
|
|
470
|
+
box-shadow: 1px 1px 3px #808080;
|
|
471
|
+
}
|
|
472
|
+
90% {
|
|
473
|
+
transform: scale(1.3);
|
|
474
|
+
box-shadow: 1px 1px 3px #808080;
|
|
475
|
+
}
|
|
476
|
+
100% {
|
|
477
|
+
transform: scale(1.8);
|
|
478
|
+
box-shadow: 1px 1px 3px #808080;
|
|
479
|
+
}
|
|
480
|
+
}
|
|
481
|
+
|
|
482
|
+
.AccentBar-button:active {
|
|
483
|
+
background: #808080;
|
|
484
|
+
color: white;
|
|
485
|
+
cursor: pointer;
|
|
486
|
+
}
|
|
487
|
+
|
|
488
|
+
.AccentBar .tabBar {
|
|
489
|
+
background: white;
|
|
490
|
+
text-align: left;
|
|
491
|
+
border: 0px;
|
|
492
|
+
padding: 10px 0;
|
|
493
|
+
}
|
|
494
|
+
|
|
495
|
+
.AccentBar .tab {
|
|
496
|
+
font-size: 14px;
|
|
497
|
+
font-weight: bold;
|
|
498
|
+
color: #404040;
|
|
499
|
+
text-align: left;
|
|
500
|
+
border: 0px;
|
|
501
|
+
height: 30px;
|
|
502
|
+
padding: 2px 5px 2px 5px;
|
|
503
|
+
margin: 2px;
|
|
504
|
+
border-bottom: 4px solid #d0d0d0;
|
|
505
|
+
}
|
|
506
|
+
|
|
507
|
+
.AccentBar .tab:hover {
|
|
508
|
+
cursor: pointer;
|
|
509
|
+
}
|
|
510
|
+
|
|
511
|
+
.AccentBar .tab-selected {
|
|
512
|
+
font-size: 14px;
|
|
513
|
+
font-weight: bold;
|
|
514
|
+
color: #404040;
|
|
515
|
+
text-align: left;
|
|
516
|
+
border: 0px;
|
|
517
|
+
height: 30px;
|
|
518
|
+
padding: 2px 5px 2px 5px;
|
|
519
|
+
margin: 2px;
|
|
520
|
+
border-bottom: 4px solid #663676;
|
|
521
|
+
}
|
|
522
|
+
|
|
523
|
+
.AccentBar .section-label {
|
|
524
|
+
grid-column: 1/-1;
|
|
525
|
+
font-size: 13px;
|
|
526
|
+
font-weight: bold;
|
|
527
|
+
color: #663676;
|
|
528
|
+
margin-top: 8px;
|
|
529
|
+
margin-left: 8px;
|
|
530
|
+
margin-bottom: 4px;
|
|
531
|
+
}
|
|
532
|
+
|
|
533
|
+
.AccentBar .replace-section {
|
|
534
|
+
min-height: 70px;
|
|
535
|
+
}
|
|
536
|
+
|
|
537
|
+
.AccentBar .tabArea {
|
|
538
|
+
animation: 0.4s fadeIn1;
|
|
539
|
+
animation-fill-mode: forwards;
|
|
540
|
+
}
|
|
541
541
|
.EquationEditor {
|
|
542
542
|
height: auto;
|
|
543
543
|
text-align: center;
|
package/package.json
CHANGED
|
@@ -245,11 +245,14 @@ function encodeToHtml(text) {
|
|
|
245
245
|
text = text.replace(/'/g,"'")
|
|
246
246
|
text = text.replace(/"/g,""")
|
|
247
247
|
text = text.replace(/\$/g,"$")
|
|
248
|
+
text = text.replace(/,/g,",")
|
|
249
|
+
text = text.replace(/:/g,":")
|
|
250
|
+
text = text.replace(/\|/g,"|")
|
|
248
251
|
return text
|
|
249
252
|
}
|
|
250
253
|
|
|
251
254
|
var decodeFromHtml = (function() {
|
|
252
|
-
var translate_re = /&(#36|quot|apos|lt|gt|amp);/g,
|
|
255
|
+
var translate_re = /&(#36|quot|apos|lt|gt|amp|#44|#58|#124);/g,
|
|
253
256
|
translate = {
|
|
254
257
|
// 'nbsp': String.fromCharCode(160),
|
|
255
258
|
'#36': '$',
|
|
@@ -257,7 +260,10 @@ var decodeFromHtml = (function() {
|
|
|
257
260
|
'apos': '\'',
|
|
258
261
|
'lt' : '<',
|
|
259
262
|
'gt' : '>',
|
|
260
|
-
'amp' : '&'
|
|
263
|
+
'amp' : '&',
|
|
264
|
+
'#44' : ',',
|
|
265
|
+
'#58' : ':',
|
|
266
|
+
'#124' : '|'
|
|
261
267
|
},
|
|
262
268
|
translator = function($0, $1) {
|
|
263
269
|
return translate[$1];
|
package/src/mimeTypeHelper.js
CHANGED
|
@@ -1,67 +1,69 @@
|
|
|
1
|
-
const INLINE_LATEX_REG_EXP =
|
|
1
|
+
const INLINE_LATEX_REG_EXP =
|
|
2
|
+
/\$\$[\s\S]+?\$\$|\\\[[\s\S]+?\\\]|\\\([\s\S]+?\\\)|\$[^$\\]*(?:\\.[^$\\]*)*\$/g;
|
|
2
3
|
const BLOCL_LATEX_REG_EXP = /\$\$[\s\S]+?\$\$|\\\[[\s\S]+?\\\]/g;
|
|
3
4
|
|
|
4
|
-
export const MIME_TYPE_PLAIN_TEXT =
|
|
5
|
-
export const MIME_TYPE_HTML =
|
|
6
|
-
export const MIME_TYPE_TEX =
|
|
7
|
-
export const MIME_TYPE_ZZISH_HTML_MATH =
|
|
5
|
+
export const MIME_TYPE_PLAIN_TEXT = 'text/plain';
|
|
6
|
+
export const MIME_TYPE_HTML = 'text/html';
|
|
7
|
+
export const MIME_TYPE_TEX = 'application/x-tex';
|
|
8
|
+
export const MIME_TYPE_ZZISH_HTML_MATH = 'application/x-zzish-html-math';
|
|
8
9
|
|
|
9
|
-
const LATEX_COMMAND_REG_EXP = /\\[a-zA-Z]/g
|
|
10
|
+
const LATEX_COMMAND_REG_EXP = /\\[a-zA-Z]/g;
|
|
10
11
|
|
|
11
|
-
const HTML_CODES_REG_EXP = /&(#36|quot|apos|lt|gt|amp)
|
|
12
|
-
const HTML_TAGS_REG_EXP =
|
|
13
|
-
|
|
12
|
+
const HTML_CODES_REG_EXP = /&(#36|quot|apos|lt|gt|amp|#44|#58|#124);/;
|
|
13
|
+
const HTML_TAGS_REG_EXP =
|
|
14
|
+
/<(br|basefont|hr|input|source|frame|param|area|meta|!--|col|link|option|base|img|wbr|!DOCTYPE).*?>|<(a|abbr|acronym|address|applet|article|aside|audio|b|bdi|bdo|big|blockquote|body|button|canvas|caption|center|cite|code|colgroup|command|datalist|dd|del|details|dfn|dialog|dir|div|dl|dt|em|embed|fieldset|figcaption|figure|font|footer|form|frameset|head|header|hgroup|h1|h2|h3|h4|h5|h6|html|i|iframe|ins|kbd|keygen|label|legend|li|map|mark|menu|meter|nav|noframes|noscript|object|ol|optgroup|output|p|pre|progress|q|rp|rt|ruby|s|samp|script|section|select|small|span|strike|strong|style|sub|summary|sup|table|tbody|td|textarea|tfoot|th|thead|time|title|tr|track|tt|u|ul|var|video).*?<\/\2>/i;
|
|
15
|
+
const HTML_MATH_TAGS_REC_EXP = /<math>/i;
|
|
14
16
|
|
|
15
|
-
const WORDS_REG_EXP = /^[a-zA-Z]*[,."';:?!]*$/i
|
|
17
|
+
const WORDS_REG_EXP = /^[a-zA-Z]*[,."';:?!]*$/i;
|
|
16
18
|
|
|
17
|
-
function stripDollars
|
|
18
|
-
return stringToStrip[0] ===
|
|
19
|
+
function stripDollars(stringToStrip) {
|
|
20
|
+
return stringToStrip[0] === '$' && stringToStrip[1] !== '$'
|
|
19
21
|
? stringToStrip.slice(1, -1)
|
|
20
|
-
: stringToStrip.slice(2, -2)
|
|
22
|
+
: stringToStrip.slice(2, -2);
|
|
21
23
|
}
|
|
22
24
|
|
|
23
25
|
export function isTextLatexMath(text) {
|
|
24
26
|
// We need at least two dollar signs to be latex
|
|
25
|
-
let i = text.indexOf(
|
|
26
|
-
if (i < 0)
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
i = text.indexOf("$",i+1)
|
|
32
|
-
if (i < 0)
|
|
33
|
-
return false
|
|
27
|
+
let i = text.indexOf('$');
|
|
28
|
+
if (i < 0) return false;
|
|
29
|
+
let j = text.indexOf('\\$');
|
|
30
|
+
if (j >= 0) return true;
|
|
31
|
+
i = text.indexOf('$', i + 1);
|
|
32
|
+
if (i < 0) return false;
|
|
34
33
|
|
|
35
34
|
// Lets try and extract the potentially latex nodes
|
|
36
|
-
let latexMatch = text.match(BLOCL_LATEX_REG_EXP)
|
|
35
|
+
let latexMatch = text.match(BLOCL_LATEX_REG_EXP);
|
|
37
36
|
if (latexMatch === null || latexMatch === undefined)
|
|
38
37
|
latexMatch = text.match(INLINE_LATEX_REG_EXP);
|
|
39
38
|
|
|
40
|
-
if (
|
|
41
|
-
|
|
42
|
-
|
|
39
|
+
if (
|
|
40
|
+
latexMatch === null ||
|
|
41
|
+
latexMatch === undefined ||
|
|
42
|
+
latexMatch.length === 0
|
|
43
|
+
)
|
|
44
|
+
return false;
|
|
45
|
+
|
|
43
46
|
for (let i = 0; i < latexMatch.length; i++)
|
|
44
|
-
latexMatch[i] = stripDollars(latexMatch[i])
|
|
47
|
+
latexMatch[i] = stripDollars(latexMatch[i]);
|
|
45
48
|
|
|
46
|
-
|
|
47
49
|
// If all dollar signs are followed by a number, it probably is not latex
|
|
48
|
-
i = text.indexOf(
|
|
49
|
-
let probablyLatex = false
|
|
50
|
-
while (i >=0) {
|
|
51
|
-
if (i === text.length-1) {
|
|
52
|
-
probablyLatex = true
|
|
53
|
-
break
|
|
50
|
+
i = text.indexOf('$');
|
|
51
|
+
let probablyLatex = false;
|
|
52
|
+
while (i >= 0) {
|
|
53
|
+
if (i === text.length - 1) {
|
|
54
|
+
probablyLatex = true;
|
|
55
|
+
break;
|
|
54
56
|
}
|
|
55
|
-
let c = text.charAt(i+1)
|
|
56
|
-
if (c <
|
|
57
|
-
probablyLatex = true
|
|
58
|
-
break
|
|
57
|
+
let c = text.charAt(i + 1);
|
|
58
|
+
if (c < '0' || c > '9') {
|
|
59
|
+
probablyLatex = true;
|
|
60
|
+
break;
|
|
59
61
|
}
|
|
60
|
-
i = text.indexOf(
|
|
62
|
+
i = text.indexOf('$', i + 1);
|
|
61
63
|
}
|
|
62
64
|
|
|
63
65
|
// Note that there are other uses of a dollar sign, that couold potentially be
|
|
64
|
-
// entered. For example, if someone created a question about the use of the
|
|
66
|
+
// entered. For example, if someone created a question about the use of the
|
|
65
67
|
// $ sign in excel cells or the use of the $ sign in regular expressions.
|
|
66
68
|
|
|
67
69
|
if (probablyLatex) {
|
|
@@ -79,80 +81,69 @@ export function isTextLatexMath(text) {
|
|
|
79
81
|
// }
|
|
80
82
|
|
|
81
83
|
// If all the latex elements are empty, then we will treat it as plain text
|
|
82
|
-
let allEmpty = true
|
|
84
|
+
let allEmpty = true;
|
|
83
85
|
for (let i = 0; i < latexMatch.length; i++) {
|
|
84
|
-
if (latexMatch[i] !==
|
|
85
|
-
allEmpty = false
|
|
86
|
+
if (latexMatch[i] !== '') allEmpty = false;
|
|
86
87
|
}
|
|
87
|
-
if (allEmpty)
|
|
88
|
-
return false
|
|
88
|
+
if (allEmpty) return false;
|
|
89
89
|
|
|
90
90
|
// If an element between two dollars is two or more words and only words
|
|
91
91
|
// and at least one word has three characters then we will treat it as text
|
|
92
92
|
for (let i = 0; i < latexMatch.length; i++) {
|
|
93
|
-
let words = latexMatch[i].split(
|
|
93
|
+
let words = latexMatch[i].split(' ');
|
|
94
94
|
if (words.length >= 2) {
|
|
95
|
-
let allWords = true
|
|
96
|
-
let longWord = false
|
|
95
|
+
let allWords = true;
|
|
96
|
+
let longWord = false;
|
|
97
97
|
for (let j = 0; j < words.length; j++) {
|
|
98
98
|
// console.log(j+":"+words[j])
|
|
99
|
-
if (words[j].length > 0 &&
|
|
100
|
-
WORDS_REG_EXP.test(words[j]) === false) {
|
|
99
|
+
if (words[j].length > 0 && WORDS_REG_EXP.test(words[j]) === false) {
|
|
101
100
|
// console.log("Not: "+words[j])
|
|
102
|
-
allWords = false
|
|
103
|
-
break
|
|
104
|
-
}
|
|
105
|
-
if (words[j].length >= 3)
|
|
106
|
-
longWord = true
|
|
101
|
+
allWords = false;
|
|
102
|
+
break;
|
|
107
103
|
}
|
|
108
|
-
|
|
109
|
-
|
|
104
|
+
if (words[j].length >= 3) longWord = true;
|
|
105
|
+
}
|
|
106
|
+
if (allWords && longWord) return false;
|
|
110
107
|
}
|
|
111
108
|
}
|
|
112
109
|
|
|
113
|
-
return true
|
|
110
|
+
return true;
|
|
114
111
|
} else {
|
|
115
112
|
// At this point it probably is not latex, but we can check inside the latex
|
|
116
113
|
// elements for things that make it likely to be latex, such as latex commands
|
|
117
114
|
|
|
118
115
|
for (let i = 0; i < latexMatch.length; i++) {
|
|
119
|
-
if (latexMatch[i].match(LATEX_COMMAND_REG_EXP) !== null)
|
|
120
|
-
return true
|
|
116
|
+
if (latexMatch[i].match(LATEX_COMMAND_REG_EXP) !== null) return true;
|
|
121
117
|
}
|
|
122
118
|
|
|
123
|
-
return false
|
|
119
|
+
return false;
|
|
124
120
|
}
|
|
125
121
|
}
|
|
126
122
|
|
|
127
123
|
export function isTextHtml(text) {
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
let i = text.indexOf(
|
|
131
|
-
if (i < 0)
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
return containsHtmlTags
|
|
124
|
+
text = text.replace(/[\r\n]+/g, ' ');
|
|
125
|
+
if (HTML_CODES_REG_EXP.test(text)) return true;
|
|
126
|
+
let i = text.indexOf('<');
|
|
127
|
+
if (i < 0) return false;
|
|
128
|
+
|
|
129
|
+
let containsHtmlTags = HTML_TAGS_REG_EXP.test(text);
|
|
130
|
+
return containsHtmlTags;
|
|
136
131
|
}
|
|
137
132
|
|
|
138
133
|
export function isTextHtmlMath(text) {
|
|
139
|
-
let containsMathTags = HTML_MATH_TAGS_REC_EXP.test(text)
|
|
140
|
-
return containsMathTags
|
|
134
|
+
let containsMathTags = HTML_MATH_TAGS_REC_EXP.test(text);
|
|
135
|
+
return containsMathTags;
|
|
141
136
|
}
|
|
142
137
|
|
|
143
138
|
export function determineMimeType(text) {
|
|
144
|
-
if (isTextHtmlMath(text))
|
|
145
|
-
return MIME_TYPE_ZZISH_HTML_MATH
|
|
146
|
-
|
|
147
|
-
if (isTextHtml(text))
|
|
148
|
-
return MIME_TYPE_HTML
|
|
139
|
+
if (isTextHtmlMath(text)) return MIME_TYPE_ZZISH_HTML_MATH;
|
|
149
140
|
|
|
150
|
-
if (
|
|
151
|
-
return MIME_TYPE_TEX
|
|
141
|
+
if (isTextHtml(text)) return MIME_TYPE_HTML;
|
|
152
142
|
|
|
153
|
-
return
|
|
154
|
-
}
|
|
143
|
+
if (isTextLatexMath(text)) return MIME_TYPE_TEX;
|
|
155
144
|
|
|
145
|
+
return MIME_TYPE_PLAIN_TEXT;
|
|
146
|
+
}
|
|
156
147
|
|
|
157
148
|
// test = (text, mimeType) => {
|
|
158
149
|
// let result = determineMimeType(text)
|
|
@@ -201,4 +192,4 @@ export function determineMimeType(text) {
|
|
|
201
192
|
{this.test("$a bcd; e$", "text/plain")}
|
|
202
193
|
{this.test("$a bcd. e$", "text/plain")}
|
|
203
194
|
{this.test("$a bcd> e$", "application/x-tex")}
|
|
204
|
-
*/
|
|
195
|
+
*/
|