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