catchup-library-web 2.7.0 → 2.7.1
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.d.mts +1 -34
- package/dist/index.d.ts +1 -34
- package/dist/index.js +166 -283
- package/dist/index.mjs +133 -250
- package/package.json +1 -1
- package/src/components/groups/InputGroup.tsx +75 -222
- package/src/properties/TextProperties.ts +1 -1
package/package.json
CHANGED
|
@@ -1,49 +1,13 @@
|
|
|
1
1
|
import Select from "react-select";
|
|
2
2
|
import Switch from "react-switch";
|
|
3
3
|
import i18n from "../../language/i18n";
|
|
4
|
-
import { useEffect, useRef, useState
|
|
4
|
+
import { useEffect, useRef, useState } from "react";
|
|
5
5
|
import { IInputGroupProps } from "../../properties/GroupProperties";
|
|
6
6
|
import BaseImage from "../images/BaseImage";
|
|
7
7
|
import { IOptionProps } from "../../properties/CommonProperties";
|
|
8
|
-
import { MathfieldElement } from "mathlive";
|
|
9
8
|
import BaseModal from "../modals/BaseModal";
|
|
10
|
-
import
|
|
9
|
+
import InputWithSpecialExpression from "../texts/InputWithSpecialExpression";
|
|
11
10
|
|
|
12
|
-
declare global {
|
|
13
|
-
namespace JSX {
|
|
14
|
-
interface IntrinsicElements {
|
|
15
|
-
"math-field": React.DetailedHTMLProps<
|
|
16
|
-
React.HTMLAttributes<MathfieldElement>,
|
|
17
|
-
MathfieldElement
|
|
18
|
-
> & {
|
|
19
|
-
value?: string;
|
|
20
|
-
disabled?: boolean;
|
|
21
|
-
readonly?: boolean;
|
|
22
|
-
"virtual-keyboard-mode"?: "manual" | "onfocus" | "off";
|
|
23
|
-
"virtual-keyboard-theme"?: "material" | "apple";
|
|
24
|
-
"math-mode-space"?: string;
|
|
25
|
-
"letter-shape-style"?: "tex" | "french" | "iso" | "upright" | "auto";
|
|
26
|
-
"min-font-scale"?: number;
|
|
27
|
-
"max-font-scale"?: number;
|
|
28
|
-
"smart-fence"?: boolean;
|
|
29
|
-
"smart-mode"?: boolean;
|
|
30
|
-
"smart-superscript"?: boolean;
|
|
31
|
-
"inline-shortcut-timeout"?: number;
|
|
32
|
-
"keybinding-mode"?: "default" | "vim" | "emacs";
|
|
33
|
-
"speech-engine"?: "local" | "amazon" | "google";
|
|
34
|
-
"speech-engine-voice"?: string;
|
|
35
|
-
"speech-engine-rate"?: string;
|
|
36
|
-
"read-only"?: boolean;
|
|
37
|
-
"remove-extraneous-parentheses"?: boolean;
|
|
38
|
-
"script-depth"?: number;
|
|
39
|
-
placeholder?: string;
|
|
40
|
-
"default-mode"?: "math" | "text";
|
|
41
|
-
"fonts-directory"?: string;
|
|
42
|
-
"sounds-directory"?: string;
|
|
43
|
-
};
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
11
|
|
|
48
12
|
const InputGroup = ({
|
|
49
13
|
type,
|
|
@@ -70,12 +34,8 @@ const InputGroup = ({
|
|
|
70
34
|
description,
|
|
71
35
|
}: IInputGroupProps) => {
|
|
72
36
|
const textAreaRef = useRef<HTMLTextAreaElement>(null);
|
|
73
|
-
const latexTextAreaRef = useRef<HTMLTextAreaElement>(null);
|
|
74
37
|
const [showMathConstructor, setShowMathConstructor] =
|
|
75
38
|
useState<boolean>(false);
|
|
76
|
-
const [showCheatSheet, setShowCheatSheet] = useState<boolean>(false);
|
|
77
|
-
const [mathValue, setMathValue] = useState<string>("");
|
|
78
|
-
const mathFieldRef = useRef<MathfieldElement>(null);
|
|
79
39
|
|
|
80
40
|
useEffect(() => {
|
|
81
41
|
if (!textAreaRef) return;
|
|
@@ -87,24 +47,6 @@ const InputGroup = ({
|
|
|
87
47
|
}
|
|
88
48
|
}, [textAreaRef, value]);
|
|
89
49
|
|
|
90
|
-
useEffect(() => {
|
|
91
|
-
if (!latexTextAreaRef) return;
|
|
92
|
-
if (!latexTextAreaRef.current) return;
|
|
93
|
-
if (value) {
|
|
94
|
-
latexTextAreaRef.current.style.height = `${latexTextAreaRef.current.scrollHeight}px`;
|
|
95
|
-
} else {
|
|
96
|
-
latexTextAreaRef.current.style.height = `44px`;
|
|
97
|
-
}
|
|
98
|
-
}, [latexTextAreaRef, value]);
|
|
99
|
-
|
|
100
|
-
useEffect(() => {
|
|
101
|
-
if (!useMath) return;
|
|
102
|
-
import("mathlive").then(({ MathfieldElement }) => {
|
|
103
|
-
if (!customElements.get("math-field")) {
|
|
104
|
-
customElements.define("math-field", MathfieldElement);
|
|
105
|
-
}
|
|
106
|
-
});
|
|
107
|
-
}, [useMath]);
|
|
108
50
|
|
|
109
51
|
const retrieveNullableOptionList = () => {
|
|
110
52
|
if (!optionList) return [];
|
|
@@ -146,28 +88,7 @@ const InputGroup = ({
|
|
|
146
88
|
}
|
|
147
89
|
};
|
|
148
90
|
|
|
149
|
-
const handleMathFieldChange = useCallback(() => {
|
|
150
|
-
if (!mathFieldRef.current) return;
|
|
151
|
-
const latexValue = mathFieldRef.current.value;
|
|
152
|
-
const wasFocused = mathFieldRef.current === document.activeElement;
|
|
153
|
-
const cursorPosition = mathFieldRef.current.position;
|
|
154
|
-
setMathValue(latexValue);
|
|
155
|
-
if (wasFocused) {
|
|
156
|
-
setTimeout(() => {
|
|
157
|
-
if (mathFieldRef.current) {
|
|
158
|
-
mathFieldRef.current.focus();
|
|
159
|
-
mathFieldRef.current.position = cursorPosition;
|
|
160
|
-
}
|
|
161
|
-
}, 0);
|
|
162
|
-
}
|
|
163
|
-
}, []);
|
|
164
|
-
|
|
165
|
-
const handleCopyLatex = () => {
|
|
166
|
-
navigator.clipboard.writeText(`$$${mathValue}$$`);
|
|
167
|
-
};
|
|
168
|
-
|
|
169
91
|
const handleOpenMathConstructor = () => {
|
|
170
|
-
setMathValue("");
|
|
171
92
|
setShowMathConstructor(true);
|
|
172
93
|
};
|
|
173
94
|
|
|
@@ -183,148 +104,80 @@ const InputGroup = ({
|
|
|
183
104
|
}}
|
|
184
105
|
>
|
|
185
106
|
<div className="bg-catchup-white rounded-lg overflow-hidden">
|
|
186
|
-
<div className="
|
|
187
|
-
<
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
onInput={handleMathFieldChange}
|
|
193
|
-
placeholder={i18n.t("expression")}
|
|
194
|
-
virtual-keyboard-mode="onfocus"
|
|
195
|
-
smart-fence={true}
|
|
196
|
-
smart-mode={true}
|
|
197
|
-
smart-superscript={true}
|
|
198
|
-
style={{
|
|
199
|
-
fontSize: "14px",
|
|
200
|
-
paddingRight: "16px",
|
|
201
|
-
paddingLeft: "16px",
|
|
202
|
-
paddingTop: "8px",
|
|
203
|
-
paddingBottom: "8px",
|
|
204
|
-
border: "none",
|
|
205
|
-
outline: "none",
|
|
206
|
-
width: "100%",
|
|
207
|
-
backgroundColor: "transparent",
|
|
208
|
-
borderRadius: "16px",
|
|
209
|
-
fontFamily: "inherit",
|
|
210
|
-
}}
|
|
211
|
-
/>
|
|
212
|
-
</div>
|
|
213
|
-
</div>
|
|
214
|
-
|
|
215
|
-
<div>
|
|
216
|
-
<p className="text-md font-semibold pl-2 py-1 text-catchup-gray-400">
|
|
217
|
-
{i18n.t("latex_output")}
|
|
218
|
-
</p>
|
|
219
|
-
<div className="relative">
|
|
220
|
-
<textarea
|
|
221
|
-
ref={latexTextAreaRef}
|
|
222
|
-
readOnly
|
|
223
|
-
value={mathValue ? `$$${mathValue}$$` : ""}
|
|
224
|
-
className="w-full h-[44px] py-2 px-4 bg-catchup-gray-50 border border-catchup-gray-100 rounded-catchup-large resize-none focus:outline-none"
|
|
225
|
-
placeholder={i18n.t("latex_will_appear_here")}
|
|
226
|
-
/>
|
|
227
|
-
<button
|
|
228
|
-
onClick={handleCopyLatex}
|
|
229
|
-
className="absolute top-2 right-2 bg-catchup-blue-400 text-white px-3 py-1 rounded-md text-md hover:bg-catchup-blue-500 transition-colors"
|
|
230
|
-
disabled={!mathValue}
|
|
231
|
-
>
|
|
232
|
-
{i18n.t("copy")}
|
|
233
|
-
</button>
|
|
234
|
-
</div>
|
|
235
|
-
</div>
|
|
236
|
-
|
|
237
|
-
<div>
|
|
238
|
-
<button
|
|
239
|
-
onClick={() => setShowCheatSheet(!showCheatSheet)}
|
|
240
|
-
className="flex items-center gap-x-1 text-md font-semibold pl-2 py-1 text-catchup-blue-400 hover:text-catchup-blue-500 transition-colors"
|
|
241
|
-
type="button"
|
|
242
|
-
>
|
|
107
|
+
<div className="space-y-6">
|
|
108
|
+
<p className="text-md text-catchup-gray-400 pl-2">
|
|
109
|
+
{i18n.t("write_equation_in_double_dollars")}
|
|
110
|
+
</p>
|
|
111
|
+
<div className="bg-catchup-gray-50 border border-catchup-gray-100 rounded-catchup-large p-4">
|
|
112
|
+
<p className="text-md font-semibold pl-2 py-1 text-catchup-blue-400">
|
|
243
113
|
{i18n.t("latex_cheat_sheet")}
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
</
|
|
267
|
-
<
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
</tr>
|
|
312
|
-
<tr>
|
|
313
|
-
<td className="py-1">{"\\pm \\times \\div"}</td>
|
|
314
|
-
<td className="py-1">± × ÷</td>
|
|
315
|
-
</tr>
|
|
316
|
-
<tr>
|
|
317
|
-
<td className="py-1">{"\\log_{a}{b}"}</td>
|
|
318
|
-
<td className="py-1">log</td>
|
|
319
|
-
</tr>
|
|
320
|
-
<tr>
|
|
321
|
-
<td className="py-1">{"\\sin \\cos \\tan"}</td>
|
|
322
|
-
<td className="py-1">sin cos tan</td>
|
|
323
|
-
</tr>
|
|
324
|
-
</tbody>
|
|
325
|
-
</table>
|
|
326
|
-
</div>
|
|
327
|
-
)}
|
|
114
|
+
</p>
|
|
115
|
+
<table className="w-full text-md">
|
|
116
|
+
<thead>
|
|
117
|
+
<tr className="text-left text-catchup-gray-400">
|
|
118
|
+
<th className="pb-2 font-semibold">LaTeX</th>
|
|
119
|
+
<th className="pb-2 font-semibold"></th>
|
|
120
|
+
</tr>
|
|
121
|
+
</thead>
|
|
122
|
+
<tbody className="font-mono text-catchup-gray-400">
|
|
123
|
+
<tr>
|
|
124
|
+
<td className="py-1">{"\\frac{a}{b}"}</td>
|
|
125
|
+
<td className="py-1"><InputWithSpecialExpression value={"$$\\frac{a}{b}$$"} /></td>
|
|
126
|
+
</tr>
|
|
127
|
+
<tr>
|
|
128
|
+
<td className="py-1">{"x^{2}"}</td>
|
|
129
|
+
<td className="py-1"><InputWithSpecialExpression value={"$$x^{2}$$"} /></td>
|
|
130
|
+
</tr>
|
|
131
|
+
<tr>
|
|
132
|
+
<td className="py-1">{"x_{i}"}</td>
|
|
133
|
+
<td className="py-1"><InputWithSpecialExpression value={"$$x_{i}$$"} /></td>
|
|
134
|
+
</tr>
|
|
135
|
+
<tr>
|
|
136
|
+
<td className="py-1">{"\\sqrt{x}"}</td>
|
|
137
|
+
<td className="py-1"><InputWithSpecialExpression value={"$$\\sqrt{x}$$"} /></td>
|
|
138
|
+
</tr>
|
|
139
|
+
<tr>
|
|
140
|
+
<td className="py-1">{"\\sqrt[3]{x}"}</td>
|
|
141
|
+
<td className="py-1"><InputWithSpecialExpression value={"$$\\sqrt[3]{x}$$"} /></td>
|
|
142
|
+
</tr>
|
|
143
|
+
<tr>
|
|
144
|
+
<td className="py-1">{"\\sum_{i=1}^{n}"}</td>
|
|
145
|
+
<td className="py-1"><InputWithSpecialExpression value={"$$\\sum_{i=1}^{n}$$"} /></td>
|
|
146
|
+
</tr>
|
|
147
|
+
<tr>
|
|
148
|
+
<td className="py-1">{"\\int_{a}^{b}"}</td>
|
|
149
|
+
<td className="py-1"><InputWithSpecialExpression value={"$$\\int_{a}^{b}$$"} /></td>
|
|
150
|
+
</tr>
|
|
151
|
+
<tr>
|
|
152
|
+
<td className="py-1">{"\\infty"}</td>
|
|
153
|
+
<td className="py-1"><InputWithSpecialExpression value={"$$\\infty$$"} /></td>
|
|
154
|
+
</tr>
|
|
155
|
+
<tr>
|
|
156
|
+
<td className="py-1">{"\\pi"}</td>
|
|
157
|
+
<td className="py-1"><InputWithSpecialExpression value={"$$\\pi$$"} /></td>
|
|
158
|
+
</tr>
|
|
159
|
+
<tr>
|
|
160
|
+
<td className="py-1">{"\\alpha \\beta \\gamma"}</td>
|
|
161
|
+
<td className="py-1"><InputWithSpecialExpression value={"$$\\alpha \\beta \\gamma$$"} /></td>
|
|
162
|
+
</tr>
|
|
163
|
+
<tr>
|
|
164
|
+
<td className="py-1">{"\\leq \\geq \\neq"}</td>
|
|
165
|
+
<td className="py-1"><InputWithSpecialExpression value={"$$\\leq \\geq \\neq$$"} /></td>
|
|
166
|
+
</tr>
|
|
167
|
+
<tr>
|
|
168
|
+
<td className="py-1">{"\\pm \\times \\div"}</td>
|
|
169
|
+
<td className="py-1"><InputWithSpecialExpression value={"$$\\pm \\times \\div$$"} /></td>
|
|
170
|
+
</tr>
|
|
171
|
+
<tr>
|
|
172
|
+
<td className="py-1">{"\\log_{a}{b}"}</td>
|
|
173
|
+
<td className="py-1"><InputWithSpecialExpression value={"$$\\log_{a}{b}$$"} /></td>
|
|
174
|
+
</tr>
|
|
175
|
+
<tr>
|
|
176
|
+
<td className="py-1">{"\\sin \\cos \\tan"}</td>
|
|
177
|
+
<td className="py-1"><InputWithSpecialExpression value={"$$\\sin \\cos \\tan$$"} /></td>
|
|
178
|
+
</tr>
|
|
179
|
+
</tbody>
|
|
180
|
+
</table>
|
|
328
181
|
</div>
|
|
329
182
|
</div>
|
|
330
183
|
</div>
|