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