@teamturing/react-native-tex 1.1.6 → 1.1.7

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 +442 -435
  2. package/lib/commonjs/html/LaTexHtmlText.js +442 -435
  3. package/lib/commonjs/html/LaTexHtmlText.js.map +1 -1
  4. package/lib/module/html/LaTexHtml.html +442 -435
  5. package/lib/module/html/LaTexHtmlText.js +442 -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 +442 -435
  11. package/src/html/LaTexHtmlText.ts +442 -435
package/lib/commonjs/html/LaTexHtml.html CHANGED
@@ -1,483 +1,490 @@
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
+ let lastScrollHeight = 0;
153
+ let lastScrollWidth = 0;
154
+ let lastClientWidth = 0;
155
+ const onDocumentResized = () => {
156
+ const container = document.getElementById("container");
157
+ if (container && Math.abs(lastScrollHeight - container.scrollHeight) +
158
+ Math.abs(lastScrollWidth - container.scrollWidth) + Math.abs(lastClientWidth - container.clientWidth) >= 15) {
159
+ lastScrollHeight = container.scrollHeight;
160
+ lastScrollWidth = container.scrollWidth;
161
+ lastClientWidth = container.clientWidth;
162
+ window.ReactNativeWebView.postMessage(
163
+ JSON.stringify({
164
+ event: "set-layout",
165
+ scrollHeight: container.scrollHeight,
166
+ scrollWidth: container.scrollWidth,
167
+ clientWidth: container.clientWidth
168
+ })
169
+ );
170
+ }
171
+ };
172
+
173
+ const scrollToTop = () => {
174
+ window.scrollTo(0, 0);
175
+ };
176
+
177
+ const setPhantomBoxVisibility = (index, state) => {
178
+ const box = document.getElementById("phantom-box-" + index);
179
+ const border = document.getElementById("phantom-box-border-" + index);
180
+ if (box && border) {
181
+ box.classList.remove("_cms_phantom_box_invisible", "_cms_phantom_box_visible", "_cms_phantom_no_box");
182
+ border.classList.remove("_cms_phantom_border_visible", "_cms_phantom_border_invisible");
183
+ if (state === "box_visible") {
184
+ box.classList.add("_cms_phantom_box_visible");
185
+ border.classList.add("_cms_phantom_border_visible");
186
+ } else if (state === "box_invisible") {
187
+ box.classList.add("_cms_phantom_box_invisible");
188
+ border.classList.add("_cms_phantom_border_visible");
189
+ } else {
190
+ box.classList.add("_cms_phantom_no_box");
191
+ border.classList.add("_cms_phantom_border_invisible");
138
192
  }
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);
193
+ }
194
+ };
195
+
196
+ const togglePhantomBoxVisibility = (index) => {
197
+ const box = document.getElementById("phantom-box-" + index);
198
+ if (box) {
199
+ if (box.classList.contains("_cms_phantom_box_invisible")) {
200
+ setPhantomBoxVisibility(index, "box_visible");
201
+ } else if (box.classList.contains("_cms_phantom_box_visible")) {
202
+ setPhantomBoxVisibility(index, "box_invisible");
203
+ } else {
204
+ // if no_box state, do nothing
205
+ }
206
+ }
207
+ };
208
+
209
+ const initializePhantomBoxes = (initialPhantomBoxVisibility, isPhantomBoxClickable) => {
210
+ let count = 0;
211
+ iteratePhantomBoxes((box, border, i) => {
212
+ count += 1;
213
+ initializeBox(box, border, i);
214
+ });
215
+ onPhantomBoxCountChanged(count);
216
+
217
+ function initializeBox (box, border, index) {
218
+ setPhantomBoxVisibility(index, initialPhantomBoxVisibility || "box_invisible");
219
+ if (isPhantomBoxClickable) {
220
+ box.onclick = () => {
221
+ togglePhantomBoxVisibility(index);
222
+ onPhantomBoxPressed(index);
223
+ };
224
+ }
225
+ }
226
+ };
227
+
228
+ const iteratePhantomBoxes = (callback) => {
229
+ try {
230
+ for (let i = 0; ; i++) {
231
+ const box = document.getElementById("phantom-box-" + i);
232
+ const border = document.getElementById("phantom-box-border-" + i);
173
233
  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
- }
234
+ callback(box, border, i);
235
+ } else {
236
+ break;
218
237
  }
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);
238
+ }
239
+ } catch (e) {}
240
+ };
241
+
242
+ const renderLaTex = ({
243
+ html,
244
+ paddingHorizontal,
245
+ initialPhantomBoxVisibility,
246
+ isPhantomBoxClickable,
247
+ paddingBottom,
248
+ paddingTop,
249
+ isAiAnimationEnable
250
+ }) => {
251
+ const container = document.getElementById("container");
252
+ const shadowContainer = document.getElementById("shadow-animation-container");
253
+
254
+ let delayHandler = -1;
255
+
256
+ function setPaddingForContentFrame (element) {
257
+ if (element instanceof HTMLElement) {
258
+ const paddingStyle =
259
+ (paddingTop || 0) +
260
+ "px " +
261
+ (paddingHorizontal || 0) +
262
+ "px " +
263
+ (paddingBottom || "0") +
264
+ "px " +
265
+ (paddingHorizontal || 0) +
266
+ "px";
267
+
268
+ element.style.padding = paddingStyle;
269
+ }
270
+ }
271
+
272
+ function renderContainer () {
273
+ container.innerHTML = html;
274
+ container.style.visibility = "visible";
275
+ shadowContainer.innerHTML = "";
276
+ clearTimeout(delayHandler);
277
+ setPaddingForContentFrame(container.querySelector("." + CONTENT_FRAME_CLASS));
278
+ setTimeout(function() {
279
+ relayout();
280
+ }, 100);
281
+ initializePhantomBoxes(initialPhantomBoxVisibility, isPhantomBoxClickable);
282
+ onRenderSuccess();
283
+ }
284
+
285
+ function onAiAnimationRenderFailed () {
286
+ clearTimeout(delayHandler);
287
+ shadowContainer.innerHTML = "";
288
+ /** @type {HTMLDivElement} */
289
+ const cursor = document.querySelector(".typewriter-cursor");
290
+ if (cursor) {
291
+ cursor.style.visibility = "hidden";
292
+ }
293
+ renderContainer();
294
+ }
295
+
296
+ function renderContainerWithAiAnimation () {
297
+ try {
298
+ container.innerHTML = "";
299
+ const mockedContentFrame = document.createElement("div");
300
+ mockedContentFrame.className = CONTENT_FRAME_CLASS;
301
+ setPaddingForContentFrame(mockedContentFrame);
302
+ container.appendChild(mockedContentFrame);
303
+ shadowContainer.innerHTML = html;
304
+ const root = shadowContainer.querySelector("." + CONTENT_FRAME_CLASS);
305
+ if (root) {
306
+ root.style.visibility = "hidden";
307
+ /** @type {Node[]} */
308
+ const replacedElements = [];
309
+ /** @type {HTMLElement[]} */
310
+ const animatedElements = [];
311
+
312
+ for (let node = root.firstChild; node; node = node.nextSibling) {
313
+ if (node.nodeType === 3 /* text */ && typeof node.textContent === "string" && node.textContent.trim()) {
314
+ for (let i = 0; i < node.textContent.length; i++) {
315
+ /** @type {HTMLSpanElement} */
316
+ const newSpan = document.createElement("span");
317
+ newSpan.textContent = node.textContent.charAt(i);
318
+ newSpan.style.visibility = "hidden";
319
+ newSpan.className += " splitted-text";
320
+ animatedElements.push(newSpan);
321
+ replacedElements.push(newSpan);
322
+ }
323
+ } else if (
324
+ node.firstChild &&
325
+ node.firstChild.firstChild &&
326
+ node.firstChild.firstChild.classList.contains("base")
327
+ ) {
328
+ /** @type {HTMLElement} */
329
+ const katexHtml = node.firstChild;
330
+ for (let i = 0; i < katexHtml.children.length; i++) {
331
+ /** @type {HTMLElement} */
332
+ const baseElement = katexHtml.children[i];
333
+ if (baseElement.classList.contains("base")) {
334
+ baseElement.style.visibility = "hidden";
335
+ animatedElements.push(baseElement);
336
+ }
337
+ }
338
+ replacedElements.push(node);
228
339
  } else {
229
- break;
340
+ if (node.nodeType === 1 /* element */) {
341
+ node.style.visibility = "hidden";
342
+ animatedElements.push(node);
343
+ }
344
+ replacedElements.push(node);
230
345
  }
231
346
  }
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;
347
+ root.innerHTML = "";
348
+ for (const el of replacedElements) {
349
+ root.appendChild(el);
262
350
  }
263
- }
264
-
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
351
 
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
- }
352
+ // 구성된 root를 contianer에 넣어준다.
353
+ mockedContentFrame.appendChild(root);
354
+ shadowContainer.innerHTML = "";
355
+
356
+ /** @type {number[]} */
357
+ const durations = [];
358
+ for (let i = 0, j = 0, k = 0; i < animatedElements.length; i++) {
359
+ const el = animatedElements[i];
360
+ if (el.className && el.className.includes("splitted-text")) {
361
+ k++;
362
+ if (el.textContent === " " && k % 10 === 0 && Math.random() < 0.5) {
363
+ durations.push(400 + Math.random() * 200 - 200);
364
+ } else {
365
+ durations.push(20 + Math.random() * 10 - 10);
339
366
  }
340
- root.innerHTML = '';
341
- for (const el of replacedElements) {
342
- root.appendChild(el);
343
- }
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
- }
367
+ } else {
368
+ j++;
369
+ if (j % 20 === 0 && Math.random() < 0.5) {
370
+ durations.push(250);
371
+ } else {
372
+ durations.push(80 + Math.random() * 40 - 40);
368
373
  }
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];
374
+ }
375
+ }
376
+ const runAnimation = (index) => {
377
+ if (animatedElements.length <= index || animatedElements.length !== durations.length) {
378
+ // setContainerVisible(false);
379
+ // clearTimeout(delayHandler.current);
380
+ onAiAnimationRenderFailed();
381
+ return;
382
+ }
383
+ const el = animatedElements[index];
377
384
 
378
- el.style.visibility = 'visible';
379
- if (el.tagName === 'IMG') {
380
- el.style.animation = '.5s fade-in ease-in';
381
- }
385
+ el.style.visibility = "visible";
386
+ if (el.tagName === "IMG") {
387
+ el.style.animation = ".5s fade-in ease-in";
388
+ }
382
389
 
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
- }
390
+ /** @type {HTMLDivElement} */
391
+ const cursor = document.querySelector(".typewriter-cursor");
392
+ if (cursor && el.tagName === "SPAN") {
393
+ cursor.style.visibility = "visible";
394
+ const rect = el.getBoundingClientRect();
395
+ cursor.style.top = rect.y + (rect.height - 14) / 2 + "px";
396
+ cursor.style.left = rect.right + 4 + "px";
397
+ }
391
398
 
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);
399
+ if (index === durations.length - 1) {
400
+ // 애니메이션 종료
401
+ clearTimeout(delayHandler);
402
+ if (cursor) {
403
+ const anim = cursor.animate([{ opacity: 0 }, { opacity: 1 }], {
404
+ duration: 500,
405
+ iterations: Infinity,
406
+ direction: "alternate-reverse",
407
+ easing: "ease-in-out"
408
+ });
409
+ delayHandler = setTimeout(() => {
410
+ anim.cancel();
411
+ cursor.style.visibility = "hidden";
412
+ cursor.style.animation = "";
413
+ }, 1500);
414
+ }
416
415
  } else {
417
- onAiAnimationRenderFailed();
416
+ // 다음 요소 애니메이션
417
+ delayHandler = setTimeout(() => {
418
+ runAnimation(index + 1);
419
+ }, durations[index]);
418
420
  }
419
- } catch (e) {
420
- onAiAnimationRenderFailed();
421
- }
421
+ };
422
+ runAnimation(0);
423
+ } else {
424
+ onAiAnimationRenderFailed();
422
425
  }
426
+ } catch (e) {
427
+ onAiAnimationRenderFailed();
428
+ }
429
+ }
423
430
 
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
- }),
431
+ try {
432
+ if (isAiAnimationEnable) {
433
+ renderContainerWithAiAnimation();
434
+ } else {
435
+ renderContainer();
436
+ }
437
+ } catch (e) {
438
+ reportErrorWithSlackWebhook(e);
439
+ onRenderFailed();
440
+ }
441
+ };
442
+
443
+ function reportErrorWithSlackWebhook (e) {
444
+ fetch("https://hooks.slack.com/services/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", {
445
+ method: "POST",
446
+ headers: {
447
+ "Content-type": "application/json"
448
+ },
449
+ body: JSON.stringify({
450
+ text: "*Tex Rendering Issue*\`\`\`" + ("" + e) + "\n\`\`\`"
451
+ })
452
+ });
453
+ }
454
+
455
+ const MessageTypes = ["render_tex", "set_phantom_boxes_visibility", "scroll_to_top"];
456
+
457
+ const checkIsValidArgument = (type) => {
458
+ return MessageTypes.includes(type);
459
+ };
460
+
461
+ const handleMessage = ({ type, data }) => {
462
+ if (!checkIsValidArgument(type)) return;
463
+
464
+ try {
465
+ if (type === "render_tex") {
466
+ renderLaTex(data);
467
+ } else if (type === "set_phantom_boxes_visibility") {
468
+ iteratePhantomBoxes((box, border, i) => {
469
+ setPhantomBoxVisibility(i, data.visibility);
445
470
  });
471
+ } else if (type === "scroll_to_top") {
472
+ scrollToTop();
446
473
  }
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>
474
+ } catch (e) {}
475
+ };
476
+
477
+ /**
478
+ * For Android, use document and use window for iOS
479
+ * @link https://github.com/react-native-community/react-native-webview/issues/356#issuecomment-467430141
480
+ */
481
+ document.addEventListener("message", (event) => {
482
+ handleMessage(event.data);
483
+ });
484
+
485
+ window.addEventListener("message", (event) => {
486
+ handleMessage(event.data);
487
+ });
488
+ </script>
489
+ </body>
483
490
  </html>