@teamturing/react-native-tex 1.1.6 → 1.1.8

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 (11) hide show
  1. package/lib/commonjs/html/LaTexHtml.html +454 -435
  2. package/lib/commonjs/html/LaTexHtmlText.js +454 -435
  3. package/lib/commonjs/html/LaTexHtmlText.js.map +1 -1
  4. package/lib/module/html/LaTexHtml.html +454 -435
  5. package/lib/module/html/LaTexHtmlText.js +454 -435
  6. package/lib/module/html/LaTexHtmlText.js.map +1 -1
  7. package/lib/typescript/commonjs/src/html/LaTexHtmlText.d.ts.map +1 -1
  8. package/lib/typescript/module/src/html/LaTexHtmlText.d.ts.map +1 -1
  9. package/package.json +2 -2
  10. package/src/html/LaTexHtml.html +454 -435
  11. package/src/html/LaTexHtmlText.ts +454 -435
package/lib/commonjs/html/LaTexHtml.html CHANGED
@@ -1,483 +1,502 @@
1
1
  <!DOCTYPE html>
2
2
  <html lang="ko">
3
- <head>
4
- <title>MathKing</title>
5
- <meta
6
- content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
7
- name="viewport"
8
- id="latex_viewport"
9
- charset="UTF-8"
10
- />
11
-
12
- <script async src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
13
- <link
14
- rel="stylesheet"
15
- href="https://cdn.jsdelivr.net/npm/@teamturing/katex-utils@2.19.0/dist/mathking-katex.css"
16
- crossorigin="anonymous"
17
- />
18
-
19
- <style>
3
+ <head>
4
+ <title>MathKing</title>
5
+ <meta
6
+ content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
7
+ name="viewport"
8
+ id="latex_viewport"
9
+ charset="UTF-8"
10
+ />
11
+
12
+ <script async src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
13
+ <link
14
+ rel="stylesheet"
15
+ href="https://cdn.jsdelivr.net/npm/@teamturing/katex-utils@2.19.0/dist/mathking-katex.css"
16
+ crossorigin="anonymous"
17
+ />
18
+
19
+ <style>
20
20
  ._cms_content-frame {
21
- font-size: 99999px;
21
+ font-size: 99999px;
22
22
  }
23
- </style>
24
-
25
- <style>
23
+ </style>
24
+
25
+ <style>
26
26
  *,
27
27
  *::after,
28
28
  *::before {
29
- -webkit-user-select: none;
30
- -webkit-user-drag: none;
31
- cursor: default;
32
- -webkit-touch-callout: none;
33
- -moz-user-select: none;
34
- -ms-user-select: none;
35
- user-select: none;
29
+ -webkit-user-select: none;
30
+ -webkit-user-drag: none;
31
+ cursor: default;
32
+ -webkit-touch-callout: none;
33
+ -moz-user-select: none;
34
+ -ms-user-select: none;
35
+ user-select: none;
36
36
  }
37
37
 
38
38
  html {
39
- padding: 0 0;
40
- margin: 0;
39
+ padding: 0 0;
40
+ margin: 0;
41
41
  }
42
42
 
43
43
  body {
44
- padding: 0;
45
- margin: 0 0 0 0;
46
- position: relative;
44
+ padding: 0;
45
+ margin: 0 0 0 0;
46
+ position: relative;
47
47
  }
48
- </style>
49
- <style>
48
+ </style>
49
+ <style>
50
50
  #container {
51
- background-color: white;
52
- width: 100%;
51
+ background-color: white;
52
+ width: 100%;
53
53
  }
54
54
 
55
55
  #shadow-animation-container {
56
- visibility: hidden;
56
+ visibility: hidden;
57
57
  }
58
58
 
59
59
  @keyframes fade-in {
60
- to {
61
- opacity: 1;
62
- }
63
- from {
64
- opacity: 0;
65
- }
60
+ to {
61
+ opacity: 1;
62
+ }
63
+ from {
64
+ opacity: 0;
65
+ }
66
66
  }
67
67
 
68
68
  @keyframes cursor-blink {
69
- 0% {
70
- opacity: 0;
71
- }
72
- 50% {
73
- opacity: 1;
74
- }
75
- 100% {
76
- opacity: 0;
77
- }
69
+ 0% {
70
+ opacity: 0;
71
+ }
72
+ 50% {
73
+ opacity: 1;
74
+ }
75
+ 100% {
76
+ opacity: 0;
77
+ }
78
78
  }
79
79
 
80
80
  .typewriter-cursor {
81
- border-radius: 1px;
82
- width: 1.5px;
83
- height: 14px;
84
- /*border: 1px solid black;*/
85
- background: black;
86
- visibility: hidden;
87
- position: absolute;
81
+ border-radius: 1px;
82
+ width: 1.5px;
83
+ height: 14px;
84
+ /*border: 1px solid black;*/
85
+ background: black;
86
+ visibility: hidden;
87
+ position: absolute;
88
88
  }
89
- </style>
90
- </head>
91
- <body>
92
- <div id="container" onmousedown="return false;"></div>
93
- <div id="shadow-animation-container" onmousedown="return false;" aria-hidden="true"></div>
94
- <div class="typewriter-cursor"></div>
95
- <script>
96
- const CONTENT_FRAME_CLASS = '_cms_content-frame';
97
-
98
- const documentResizeObserver = new ResizeObserver(() => {
99
- onDocumentResized();
100
- });
101
- documentResizeObserver.observe(document.getElementById('container'));
102
-
103
- const renderChoiceLayout = (container) => {
104
- const choiceBox = container.querySelector('._cms_choice-box');
105
- if (!choiceBox) return;
106
-
107
- const choiceBoxWidth = choiceBox.getBoundingClientRect().width;
108
- choiceBox.classList.remove('strip');
109
- choiceBox.classList.remove('third');
110
- choiceBox.classList.remove('half');
111
- choiceBox.classList.remove('full');
112
-
113
- const maxChoiceWidth = Array.from(choiceBox.querySelectorAll('._cms_choice')).reduce((pre, choice) => {
114
- const width = choice.getBoundingClientRect().width;
115
- return pre > width ? pre : width;
116
- }, 0);
117
-
118
- if (maxChoiceWidth > (choiceBoxWidth / 100) * 50) {
119
- choiceBox.classList.add('full');
120
- } else if (maxChoiceWidth > (choiceBoxWidth / 100) * 33) {
121
- choiceBox.classList.add('half');
122
- } else if (maxChoiceWidth > (choiceBoxWidth / 100) * 25) {
123
- choiceBox.classList.add('third');
124
- } else if (maxChoiceWidth < (choiceBoxWidth / 100) * 20) {
125
- choiceBox.classList.add('strip');
126
- } else {
127
- choiceBox.classList.add('third');
128
- }
129
- };
130
-
131
- function relayout() {
132
- try {
133
- const container = document.getElementById('container');
134
- if (container) renderChoiceLayout(container);
135
- } catch (e) {
136
- reportErrorWithSlackWebhook(e);
137
- }
89
+ </style>
90
+ </head>
91
+ <body>
92
+ <div id="container" onmousedown="return false;"></div>
93
+ <div id="shadow-animation-container" onmousedown="return false;" aria-hidden="true"></div>
94
+ <div class="typewriter-cursor"></div>
95
+ <script>
96
+ const CONTENT_FRAME_CLASS = "_cms_content-frame";
97
+
98
+ const documentResizeObserver = new ResizeObserver(() => {
99
+ onDocumentResized();
100
+ });
101
+ documentResizeObserver.observe(document.getElementById("container"));
102
+
103
+ const renderChoiceLayout = (container) => {
104
+ const choiceBox = container.querySelector("._cms_choice-box");
105
+ if (!choiceBox) return;
106
+
107
+ const choiceBoxWidth = choiceBox.getBoundingClientRect().width;
108
+ choiceBox.classList.remove("strip");
109
+ choiceBox.classList.remove("third");
110
+ choiceBox.classList.remove("half");
111
+ choiceBox.classList.remove("full");
112
+
113
+ const maxChoiceWidth = Array.from(choiceBox.querySelectorAll("._cms_choice")).reduce((pre, choice) => {
114
+ const width = choice.getBoundingClientRect().width;
115
+ return pre > width ? pre : width;
116
+ }, 0);
117
+
118
+ if (maxChoiceWidth > (choiceBoxWidth / 100) * 50) {
119
+ choiceBox.classList.add("full");
120
+ } else if (maxChoiceWidth > (choiceBoxWidth / 100) * 33) {
121
+ choiceBox.classList.add("half");
122
+ } else if (maxChoiceWidth > (choiceBoxWidth / 100) * 25) {
123
+ choiceBox.classList.add("third");
124
+ } else if (maxChoiceWidth < (choiceBoxWidth / 100) * 20) {
125
+ choiceBox.classList.add("strip");
126
+ } else {
127
+ choiceBox.classList.add("third");
128
+ }
129
+ };
130
+
131
+ function relayout () {
132
+ try {
133
+ const container = document.getElementById("container");
134
+ if (container) renderChoiceLayout(container);
135
+ } catch (e) {
136
+ reportErrorWithSlackWebhook(e);
137
+ }
138
+ }
139
+
140
+ const onRenderSuccess = () => {
141
+ window.ReactNativeWebView.postMessage(JSON.stringify({ event: "render-success" }));
142
+ };
143
+ const onRenderFailed = () => {
144
+ window.ReactNativeWebView.postMessage(JSON.stringify({ event: "render-fail" }));
145
+ };
146
+ const onPhantomBoxCountChanged = (count) => {
147
+ window.ReactNativeWebView.postMessage(JSON.stringify({ event: "phantom-box-count-changed", count }));
148
+ };
149
+ const onPhantomBoxPressed = (index) => {
150
+ window.ReactNativeWebView.postMessage(JSON.stringify({ event: "phantom-box-pressed", index }));
151
+ };
152
+
153
+ let debounceHandler = -1;
154
+ const debounce = (fn) => {
155
+ if(debounceHandler !== -1) clearTimeout(debounceHandler);
156
+ debounceHandler = setTimeout(() => {
157
+ fn();
158
+ debounceHandler = -1;
159
+ }, 500);
160
+ }
161
+
162
+ let lastScrollHeight = 0;
163
+ let lastScrollWidth = 0;
164
+ let lastClientWidth = 0;
165
+ const onDocumentResized = () => {
166
+ debounce(() => {
167
+ const container = document.getElementById("container");
168
+ if (container && Math.abs(lastScrollHeight - container.scrollHeight) +
169
+ Math.abs(lastScrollWidth - container.scrollWidth) + Math.abs(lastClientWidth - container.clientWidth) >= 15) {
170
+ lastScrollHeight = container.scrollHeight;
171
+ lastScrollWidth = container.scrollWidth;
172
+ lastClientWidth = container.clientWidth;
173
+ window.ReactNativeWebView.postMessage(
174
+ JSON.stringify({
175
+ event: "set-layout",
176
+ scrollHeight: container.scrollHeight,
177
+ scrollWidth: container.scrollWidth,
178
+ clientWidth: container.clientWidth
179
+ })
180
+ );
138
181
  }
139
-
140
- const onRenderSuccess = () => {
141
- window.ReactNativeWebView.postMessage(JSON.stringify({ event: 'render-success' }));
142
- };
143
- const onRenderFailed = () => {
144
- window.ReactNativeWebView.postMessage(JSON.stringify({ event: 'render-fail' }));
145
- };
146
- const onPhantomBoxCountChanged = (count) => {
147
- window.ReactNativeWebView.postMessage(JSON.stringify({ event: 'phantom-box-count-changed', count }));
148
- };
149
- const onPhantomBoxPressed = (index) => {
150
- window.ReactNativeWebView.postMessage(JSON.stringify({ event: 'phantom-box-pressed', index }));
151
- };
152
- const onDocumentResized = () => {
153
- const container = document.getElementById('container');
154
- if (container) {
155
- window.ReactNativeWebView.postMessage(
156
- JSON.stringify({
157
- event: 'set-layout',
158
- scrollHeight: container.scrollHeight,
159
- scrollWidth: container.scrollWidth,
160
- clientWidth: container.clientWidth,
161
- }),
162
- );
163
- }
164
- };
165
-
166
- const scrollToTop = () => {
167
- window.scrollTo(0, 0);
168
- };
169
-
170
- const setPhantomBoxVisibility = (index, state) => {
171
- const box = document.getElementById('phantom-box-' + index);
172
- const border = document.getElementById('phantom-box-border-' + index);
182
+ });
183
+ };
184
+
185
+ const scrollToTop = () => {
186
+ window.scrollTo(0, 0);
187
+ };
188
+
189
+ const setPhantomBoxVisibility = (index, state) => {
190
+ const box = document.getElementById("phantom-box-" + index);
191
+ const border = document.getElementById("phantom-box-border-" + index);
192
+ if (box && border) {
193
+ box.classList.remove("_cms_phantom_box_invisible", "_cms_phantom_box_visible", "_cms_phantom_no_box");
194
+ border.classList.remove("_cms_phantom_border_visible", "_cms_phantom_border_invisible");
195
+ if (state === "box_visible") {
196
+ box.classList.add("_cms_phantom_box_visible");
197
+ border.classList.add("_cms_phantom_border_visible");
198
+ } else if (state === "box_invisible") {
199
+ box.classList.add("_cms_phantom_box_invisible");
200
+ border.classList.add("_cms_phantom_border_visible");
201
+ } else {
202
+ box.classList.add("_cms_phantom_no_box");
203
+ border.classList.add("_cms_phantom_border_invisible");
204
+ }
205
+ }
206
+ };
207
+
208
+ const togglePhantomBoxVisibility = (index) => {
209
+ const box = document.getElementById("phantom-box-" + index);
210
+ if (box) {
211
+ if (box.classList.contains("_cms_phantom_box_invisible")) {
212
+ setPhantomBoxVisibility(index, "box_visible");
213
+ } else if (box.classList.contains("_cms_phantom_box_visible")) {
214
+ setPhantomBoxVisibility(index, "box_invisible");
215
+ } else {
216
+ // if no_box state, do nothing
217
+ }
218
+ }
219
+ };
220
+
221
+ const initializePhantomBoxes = (initialPhantomBoxVisibility, isPhantomBoxClickable) => {
222
+ let count = 0;
223
+ iteratePhantomBoxes((box, border, i) => {
224
+ count += 1;
225
+ initializeBox(box, border, i);
226
+ });
227
+ onPhantomBoxCountChanged(count);
228
+
229
+ function initializeBox (box, border, index) {
230
+ setPhantomBoxVisibility(index, initialPhantomBoxVisibility || "box_invisible");
231
+ if (isPhantomBoxClickable) {
232
+ box.onclick = () => {
233
+ togglePhantomBoxVisibility(index);
234
+ onPhantomBoxPressed(index);
235
+ };
236
+ }
237
+ }
238
+ };
239
+
240
+ const iteratePhantomBoxes = (callback) => {
241
+ try {
242
+ for (let i = 0; ; i++) {
243
+ const box = document.getElementById("phantom-box-" + i);
244
+ const border = document.getElementById("phantom-box-border-" + i);
173
245
  if (box && border) {
174
- box.classList.remove('_cms_phantom_box_invisible', '_cms_phantom_box_visible', '_cms_phantom_no_box');
175
- border.classList.remove('_cms_phantom_border_visible', '_cms_phantom_border_invisible');
176
- if (state === 'box_visible') {
177
- box.classList.add('_cms_phantom_box_visible');
178
- border.classList.add('_cms_phantom_border_visible');
179
- } else if (state === 'box_invisible') {
180
- box.classList.add('_cms_phantom_box_invisible');
181
- border.classList.add('_cms_phantom_border_visible');
182
- } else {
183
- box.classList.add('_cms_phantom_no_box');
184
- border.classList.add('_cms_phantom_border_invisible');
185
- }
186
- }
187
- };
188
-
189
- const togglePhantomBoxVisibility = (index) => {
190
- const box = document.getElementById('phantom-box-' + index);
191
- if (box) {
192
- if (box.classList.contains('_cms_phantom_box_invisible')) {
193
- setPhantomBoxVisibility(index, 'box_visible');
194
- } else if (box.classList.contains('_cms_phantom_box_visible')) {
195
- setPhantomBoxVisibility(index, 'box_invisible');
196
- } else {
197
- // if no_box state, do nothing
198
- }
199
- }
200
- };
201
-
202
- const initializePhantomBoxes = (initialPhantomBoxVisibility, isPhantomBoxClickable) => {
203
- let count = 0;
204
- iteratePhantomBoxes((box, border, i) => {
205
- count += 1;
206
- initializeBox(box, border, i);
207
- });
208
- onPhantomBoxCountChanged(count);
209
-
210
- function initializeBox(box, border, index) {
211
- setPhantomBoxVisibility(index, initialPhantomBoxVisibility || 'box_invisible');
212
- if (isPhantomBoxClickable) {
213
- box.onclick = () => {
214
- togglePhantomBoxVisibility(index);
215
- onPhantomBoxPressed(index);
216
- };
217
- }
246
+ callback(box, border, i);
247
+ } else {
248
+ break;
218
249
  }
219
- };
220
-
221
- const iteratePhantomBoxes = (callback) => {
222
- try {
223
- for (let i = 0; ; i++) {
224
- const box = document.getElementById('phantom-box-' + i);
225
- const border = document.getElementById('phantom-box-border-' + i);
226
- if (box && border) {
227
- callback(box, border, i);
250
+ }
251
+ } catch (e) {}
252
+ };
253
+
254
+ const renderLaTex = ({
255
+ html,
256
+ paddingHorizontal,
257
+ initialPhantomBoxVisibility,
258
+ isPhantomBoxClickable,
259
+ paddingBottom,
260
+ paddingTop,
261
+ isAiAnimationEnable
262
+ }) => {
263
+ const container = document.getElementById("container");
264
+ const shadowContainer = document.getElementById("shadow-animation-container");
265
+
266
+ let delayHandler = -1;
267
+
268
+ function setPaddingForContentFrame (element) {
269
+ if (element instanceof HTMLElement) {
270
+ const paddingStyle =
271
+ (paddingTop || 0) +
272
+ "px " +
273
+ (paddingHorizontal || 0) +
274
+ "px " +
275
+ (paddingBottom || "0") +
276
+ "px " +
277
+ (paddingHorizontal || 0) +
278
+ "px";
279
+
280
+ element.style.padding = paddingStyle;
281
+ }
282
+ }
283
+
284
+ function renderContainer () {
285
+ container.innerHTML = html;
286
+ container.style.visibility = "visible";
287
+ shadowContainer.innerHTML = "";
288
+ clearTimeout(delayHandler);
289
+ setPaddingForContentFrame(container.querySelector("." + CONTENT_FRAME_CLASS));
290
+ setTimeout(function() {
291
+ relayout();
292
+ }, 100);
293
+ initializePhantomBoxes(initialPhantomBoxVisibility, isPhantomBoxClickable);
294
+ onRenderSuccess();
295
+ }
296
+
297
+ function onAiAnimationRenderFailed () {
298
+ clearTimeout(delayHandler);
299
+ shadowContainer.innerHTML = "";
300
+ /** @type {HTMLDivElement} */
301
+ const cursor = document.querySelector(".typewriter-cursor");
302
+ if (cursor) {
303
+ cursor.style.visibility = "hidden";
304
+ }
305
+ renderContainer();
306
+ }
307
+
308
+ function renderContainerWithAiAnimation () {
309
+ try {
310
+ container.innerHTML = "";
311
+ const mockedContentFrame = document.createElement("div");
312
+ mockedContentFrame.className = CONTENT_FRAME_CLASS;
313
+ setPaddingForContentFrame(mockedContentFrame);
314
+ container.appendChild(mockedContentFrame);
315
+ shadowContainer.innerHTML = html;
316
+ const root = shadowContainer.querySelector("." + CONTENT_FRAME_CLASS);
317
+ if (root) {
318
+ root.style.visibility = "hidden";
319
+ /** @type {Node[]} */
320
+ const replacedElements = [];
321
+ /** @type {HTMLElement[]} */
322
+ const animatedElements = [];
323
+
324
+ for (let node = root.firstChild; node; node = node.nextSibling) {
325
+ if (node.nodeType === 3 /* text */ && typeof node.textContent === "string" && node.textContent.trim()) {
326
+ for (let i = 0; i < node.textContent.length; i++) {
327
+ /** @type {HTMLSpanElement} */
328
+ const newSpan = document.createElement("span");
329
+ newSpan.textContent = node.textContent.charAt(i);
330
+ newSpan.style.visibility = "hidden";
331
+ newSpan.className += " splitted-text";
332
+ animatedElements.push(newSpan);
333
+ replacedElements.push(newSpan);
334
+ }
335
+ } else if (
336
+ node.firstChild &&
337
+ node.firstChild.firstChild &&
338
+ node.firstChild.firstChild.classList.contains("base")
339
+ ) {
340
+ /** @type {HTMLElement} */
341
+ const katexHtml = node.firstChild;
342
+ for (let i = 0; i < katexHtml.children.length; i++) {
343
+ /** @type {HTMLElement} */
344
+ const baseElement = katexHtml.children[i];
345
+ if (baseElement.classList.contains("base")) {
346
+ baseElement.style.visibility = "hidden";
347
+ animatedElements.push(baseElement);
348
+ }
349
+ }
350
+ replacedElements.push(node);
228
351
  } else {
229
- break;
352
+ if (node.nodeType === 1 /* element */) {
353
+ node.style.visibility = "hidden";
354
+ animatedElements.push(node);
355
+ }
356
+ replacedElements.push(node);
230
357
  }
231
358
  }
232
- } catch (e) {}
233
- };
234
-
235
- const renderLaTex = ({
236
- html,
237
- paddingHorizontal,
238
- initialPhantomBoxVisibility,
239
- isPhantomBoxClickable,
240
- paddingBottom,
241
- paddingTop,
242
- isAiAnimationEnable,
243
- }) => {
244
- const container = document.getElementById('container');
245
- const shadowContainer = document.getElementById('shadow-animation-container');
246
-
247
- let delayHandler = -1;
248
-
249
- function setPaddingForContentFrame(element) {
250
- if (element instanceof HTMLElement) {
251
- const paddingStyle =
252
- (paddingTop || 0) +
253
- 'px ' +
254
- (paddingHorizontal || 0) +
255
- 'px ' +
256
- (paddingBottom || '0') +
257
- 'px ' +
258
- (paddingHorizontal || 0) +
259
- 'px';
260
-
261
- element.style.padding = paddingStyle;
359
+ root.innerHTML = "";
360
+ for (const el of replacedElements) {
361
+ root.appendChild(el);
262
362
  }
263
- }
264
363
 
265
- function renderContainer() {
266
- container.innerHTML = html;
267
- container.style.visibility = 'visible';
268
- shadowContainer.innerHTML = '';
269
- clearTimeout(delayHandler);
270
- setPaddingForContentFrame(container.querySelector('.' + CONTENT_FRAME_CLASS));
271
- setTimeout(function () {
272
- relayout();
273
- }, 100);
274
- initializePhantomBoxes(initialPhantomBoxVisibility, isPhantomBoxClickable);
275
- onRenderSuccess();
276
- }
277
-
278
- function onAiAnimationRenderFailed() {
279
- clearTimeout(delayHandler);
280
- shadowContainer.innerHTML = '';
281
- /** @type {HTMLDivElement} */
282
- const cursor = document.querySelector('.typewriter-cursor');
283
- if (cursor) {
284
- cursor.style.visibility = 'hidden';
285
- }
286
- renderContainer();
287
- }
288
-
289
- function renderContainerWithAiAnimation() {
290
- try {
291
- container.innerHTML = '';
292
- const mockedContentFrame = document.createElement('div');
293
- mockedContentFrame.className = CONTENT_FRAME_CLASS;
294
- setPaddingForContentFrame(mockedContentFrame);
295
- container.appendChild(mockedContentFrame);
296
- shadowContainer.innerHTML = html;
297
- const root = shadowContainer.querySelector('.' + CONTENT_FRAME_CLASS);
298
- if (root) {
299
- root.style.visibility = 'hidden';
300
- /** @type {Node[]} */
301
- const replacedElements = [];
302
- /** @type {HTMLElement[]} */
303
- const animatedElements = [];
304
-
305
- for (let node = root.firstChild; node; node = node.nextSibling) {
306
- if (node.nodeType === 3 /* text */ && typeof node.textContent === 'string' && node.textContent.trim()) {
307
- for (let i = 0; i < node.textContent.length; i++) {
308
- /** @type {HTMLSpanElement} */
309
- const newSpan = document.createElement('span');
310
- newSpan.textContent = node.textContent.charAt(i);
311
- newSpan.style.visibility = 'hidden';
312
- newSpan.className += ' splitted-text';
313
- animatedElements.push(newSpan);
314
- replacedElements.push(newSpan);
315
- }
316
- } else if (
317
- node.firstChild &&
318
- node.firstChild.firstChild &&
319
- node.firstChild.firstChild.classList.contains('base')
320
- ) {
321
- /** @type {HTMLElement} */
322
- const katexHtml = node.firstChild;
323
- for (let i = 0; i < katexHtml.children.length; i++) {
324
- /** @type {HTMLElement} */
325
- const baseElement = katexHtml.children[i];
326
- if (baseElement.classList.contains('base')) {
327
- baseElement.style.visibility = 'hidden';
328
- animatedElements.push(baseElement);
329
- }
330
- }
331
- replacedElements.push(node);
332
- } else {
333
- if (node.nodeType === 1 /* element */) {
334
- node.style.visibility = 'hidden';
335
- animatedElements.push(node);
336
- }
337
- replacedElements.push(node);
338
- }
339
- }
340
- root.innerHTML = '';
341
- for (const el of replacedElements) {
342
- root.appendChild(el);
364
+ // 구성된 root를 contianer에 넣어준다.
365
+ mockedContentFrame.appendChild(root);
366
+ shadowContainer.innerHTML = "";
367
+
368
+ /** @type {number[]} */
369
+ const durations = [];
370
+ for (let i = 0, j = 0, k = 0; i < animatedElements.length; i++) {
371
+ const el = animatedElements[i];
372
+ if (el.className && el.className.includes("splitted-text")) {
373
+ k++;
374
+ if (el.textContent === " " && k % 10 === 0 && Math.random() < 0.5) {
375
+ durations.push(400 + Math.random() * 200 - 200);
376
+ } else {
377
+ durations.push(20 + Math.random() * 10 - 10);
343
378
  }
344
-
345
- // 구성된 root를 contianer에 넣어준다.
346
- mockedContentFrame.appendChild(root);
347
- shadowContainer.innerHTML = '';
348
-
349
- /** @type {number[]} */
350
- const durations = [];
351
- for (let i = 0, j = 0, k = 0; i < animatedElements.length; i++) {
352
- const el = animatedElements[i];
353
- if (el.className && el.className.includes('splitted-text')) {
354
- k++;
355
- if (el.textContent === ' ' && k % 10 === 0 && Math.random() < 0.5) {
356
- durations.push(400 + Math.random() * 200 - 200);
357
- } else {
358
- durations.push(20 + Math.random() * 10 - 10);
359
- }
360
- } else {
361
- j++;
362
- if (j % 20 === 0 && Math.random() < 0.5) {
363
- durations.push(250);
364
- } else {
365
- durations.push(80 + Math.random() * 40 - 40);
366
- }
367
- }
379
+ } else {
380
+ j++;
381
+ if (j % 20 === 0 && Math.random() < 0.5) {
382
+ durations.push(250);
383
+ } else {
384
+ durations.push(80 + Math.random() * 40 - 40);
368
385
  }
369
- const runAnimation = (index) => {
370
- if (animatedElements.length <= index || animatedElements.length !== durations.length) {
371
- // setContainerVisible(false);
372
- // clearTimeout(delayHandler.current);
373
- onAiAnimationRenderFailed();
374
- return;
375
- }
376
- const el = animatedElements[index];
386
+ }
387
+ }
388
+ const runAnimation = (index) => {
389
+ if (animatedElements.length <= index || animatedElements.length !== durations.length) {
390
+ // setContainerVisible(false);
391
+ // clearTimeout(delayHandler.current);
392
+ onAiAnimationRenderFailed();
393
+ return;
394
+ }
395
+ const el = animatedElements[index];
377
396
 
378
- el.style.visibility = 'visible';
379
- if (el.tagName === 'IMG') {
380
- el.style.animation = '.5s fade-in ease-in';
381
- }
397
+ el.style.visibility = "visible";
398
+ if (el.tagName === "IMG") {
399
+ el.style.animation = ".5s fade-in ease-in";
400
+ }
382
401
 
383
- /** @type {HTMLDivElement} */
384
- const cursor = document.querySelector('.typewriter-cursor');
385
- if (cursor && el.tagName === 'SPAN') {
386
- cursor.style.visibility = 'visible';
387
- const rect = el.getBoundingClientRect();
388
- cursor.style.top = rect.y + (rect.height - 14) / 2 + 'px';
389
- cursor.style.left = rect.right + 4 + 'px';
390
- }
402
+ /** @type {HTMLDivElement} */
403
+ const cursor = document.querySelector(".typewriter-cursor");
404
+ if (cursor && el.tagName === "SPAN") {
405
+ cursor.style.visibility = "visible";
406
+ const rect = el.getBoundingClientRect();
407
+ cursor.style.top = rect.y + (rect.height - 14) / 2 + "px";
408
+ cursor.style.left = rect.right + 4 + "px";
409
+ }
391
410
 
392
- if (index === durations.length - 1) {
393
- // 애니메이션 종료
394
- clearTimeout(delayHandler);
395
- if (cursor) {
396
- const anim = cursor.animate([{ opacity: 0 }, { opacity: 1 }], {
397
- duration: 500,
398
- iterations: Infinity,
399
- direction: 'alternate-reverse',
400
- easing: 'ease-in-out',
401
- });
402
- delayHandler = setTimeout(() => {
403
- anim.cancel();
404
- cursor.style.visibility = 'hidden';
405
- cursor.style.animation = '';
406
- }, 1500);
407
- }
408
- } else {
409
- // 다음 요소 애니메이션
410
- delayHandler = setTimeout(() => {
411
- runAnimation(index + 1);
412
- }, durations[index]);
413
- }
414
- };
415
- runAnimation(0);
411
+ if (index === durations.length - 1) {
412
+ // 애니메이션 종료
413
+ clearTimeout(delayHandler);
414
+ if (cursor) {
415
+ const anim = cursor.animate([{ opacity: 0 }, { opacity: 1 }], {
416
+ duration: 500,
417
+ iterations: Infinity,
418
+ direction: "alternate-reverse",
419
+ easing: "ease-in-out"
420
+ });
421
+ delayHandler = setTimeout(() => {
422
+ anim.cancel();
423
+ cursor.style.visibility = "hidden";
424
+ cursor.style.animation = "";
425
+ }, 1500);
426
+ }
416
427
  } else {
417
- onAiAnimationRenderFailed();
428
+ // 다음 요소 애니메이션
429
+ delayHandler = setTimeout(() => {
430
+ runAnimation(index + 1);
431
+ }, durations[index]);
418
432
  }
419
- } catch (e) {
420
- onAiAnimationRenderFailed();
421
- }
433
+ };
434
+ runAnimation(0);
435
+ } else {
436
+ onAiAnimationRenderFailed();
422
437
  }
438
+ } catch (e) {
439
+ onAiAnimationRenderFailed();
440
+ }
441
+ }
423
442
 
424
- try {
425
- if (isAiAnimationEnable) {
426
- renderContainerWithAiAnimation();
427
- } else {
428
- renderContainer();
429
- }
430
- } catch (e) {
431
- reportErrorWithSlackWebhook(e);
432
- onRenderFailed();
433
- }
434
- };
435
-
436
- function reportErrorWithSlackWebhook(e) {
437
- fetch('https://hooks.slack.com/services/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', {
438
- method: 'POST',
439
- headers: {
440
- 'Content-type': 'application/json',
441
- },
442
- body: JSON.stringify({
443
- text: '*Tex Rendering Issue*\`\`\`' + ('' + e) + '\n\`\`\`',
444
- }),
443
+ try {
444
+ if (isAiAnimationEnable) {
445
+ renderContainerWithAiAnimation();
446
+ } else {
447
+ renderContainer();
448
+ }
449
+ } catch (e) {
450
+ reportErrorWithSlackWebhook(e);
451
+ onRenderFailed();
452
+ }
453
+ };
454
+
455
+ function reportErrorWithSlackWebhook (e) {
456
+ fetch("https://hooks.slack.com/services/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", {
457
+ method: "POST",
458
+ headers: {
459
+ "Content-type": "application/json"
460
+ },
461
+ body: JSON.stringify({
462
+ text: "*Tex Rendering Issue*\`\`\`" + ("" + e) + "\n\`\`\`"
463
+ })
464
+ });
465
+ }
466
+
467
+ const MessageTypes = ["render_tex", "set_phantom_boxes_visibility", "scroll_to_top"];
468
+
469
+ const checkIsValidArgument = (type) => {
470
+ return MessageTypes.includes(type);
471
+ };
472
+
473
+ const handleMessage = ({ type, data }) => {
474
+ if (!checkIsValidArgument(type)) return;
475
+
476
+ try {
477
+ if (type === "render_tex") {
478
+ renderLaTex(data);
479
+ } else if (type === "set_phantom_boxes_visibility") {
480
+ iteratePhantomBoxes((box, border, i) => {
481
+ setPhantomBoxVisibility(i, data.visibility);
445
482
  });
483
+ } else if (type === "scroll_to_top") {
484
+ scrollToTop();
446
485
  }
447
-
448
- const MessageTypes = ['render_tex', 'set_phantom_boxes_visibility', 'scroll_to_top'];
449
-
450
- const checkIsValidArgument = (type) => {
451
- return MessageTypes.includes(type);
452
- };
453
-
454
- const handleMessage = ({ type, data }) => {
455
- if (!checkIsValidArgument(type)) return;
456
-
457
- try {
458
- if (type === 'render_tex') {
459
- renderLaTex(data);
460
- } else if (type === 'set_phantom_boxes_visibility') {
461
- iteratePhantomBoxes((box, border, i) => {
462
- setPhantomBoxVisibility(i, data.visibility);
463
- });
464
- } else if (type === 'scroll_to_top') {
465
- scrollToTop();
466
- }
467
- } catch (e) {}
468
- };
469
-
470
- /**
471
- * For Android, use document and use window for iOS
472
- * @link https://github.com/react-native-community/react-native-webview/issues/356#issuecomment-467430141
473
- */
474
- document.addEventListener('message', (event) => {
475
- handleMessage(event.data);
476
- });
477
-
478
- window.addEventListener('message', (event) => {
479
- handleMessage(event.data);
480
- });
481
- </script>
482
- </body>
486
+ } catch (e) {}
487
+ };
488
+
489
+ /**
490
+ * For Android, use document and use window for iOS
491
+ * @link https://github.com/react-native-community/react-native-webview/issues/356#issuecomment-467430141
492
+ */
493
+ document.addEventListener("message", (event) => {
494
+ handleMessage(event.data);
495
+ });
496
+
497
+ window.addEventListener("message", (event) => {
498
+ handleMessage(event.data);
499
+ });
500
+ </script>
501
+ </body>
483
502
  </html>