Fix tokenize

src/components/v2-pre/FormattedText.tsx

@@ -7,7 +7,7 @@ interface FormattedTextProps {
 
 const FormattedText = ({ children }: FormattedTextProps) => {
   if (children == null) {
-    children = ''
+    return <></>
   }
   const tokens = tokenize(children)
 

src/lib/v2-pre/data/formatText.spec.ts

@@ -37,4 +37,22 @@ describe('formatSubSkillInfo', () => {
 
     expect(result).toBe('전투 중 초기 SP가 <color=#23B2E3FF>40.0</color> 증가하며, 오픈월드에서는 10분에 1회 발동한다.')
   })
+  it('prepends 0 if the calculated value below 0', () => {
+    const params = {
+      info: '파티원이 출혈 상태의 적 공격 시, 출혈 상태 스택마다 크리티컬률이 #1[f1]% 증가하고, 캐릭터 자신의 물리 대미지가 #2[f1]% 증가한다.',
+      maxLv: 11,
+      paramBase1: 0.004,
+      paramBase2: 0.0025,
+      paramBase3: 0,
+      paramAdd1: 0.0003,
+      paramAdd2: 0.00025,
+      paramAdd3: 0
+    }
+
+    const result = formatSubSkillInfo(params)
+
+    expect(result).toBe(
+      '필살기 꿈 세계 창조는 추가로 SP를 소모해 물리 대미지가 추가 소모 SP*<color=#23B2E3FF>0.70%</color>만큼 증가하고, 크리티컬률이 추가 소모 SP*<color=#23B2E3FF>0.50%</color>만큼 증가한다(최대 추가 소모 SP: 50pt). 해당 효과는 피니쉬가 종료될 때까지 지속되며, 캐릭터가 사망하거나 퇴장 시 해제된다.'
+    )
+  })
 })

src/lib/v2-pre/data/formatText.ts

@@ -66,7 +66,7 @@ export function formatSubSkillInfo({
 
 export function replaceNewLine(value: string) {
   if (value == null) {
-    value = ''
+    return ''
   }
   return value.replace(/\\n/g, '\n')
 }

src/lib/v2-pre/formattedText/tokenize.spec.ts

@@ -1,6 +1,27 @@
 import { tokenize } from './tokenize'
 
 describe('tokenize', () => {
+  it('still tokenize even when a closing tag is missing', () => {
+    const rawString = '<color=#FFC741FF>분기'
+
+    const result = tokenize(rawString)
+
+    expect(result).toEqual([
+      {
+        type: 'element',
+        tagName: 'color',
+        attributes: {
+          color: '#FFC741FF'
+        },
+        children: [
+          {
+            type: 'text',
+            text: '분기'
+          }
+        ]
+      }
+    ])
+  })
   it('tokenize', () => {
     const rawString =
       '기본 공격 또는 분기 공격이 적에게 연소 게이지를 <color=#FEDF4CFF><color=#23B2E3FF>4.0</color>pt 누적한다.</color> 발동 간격: <color=#23B2E3FF>6.0</color>초. 기본 공격과 분기 공격이 가하는 화염 원소 대미지가 <color=#23B2E3FF>30.0%</color> 증가한다.'

src/lib/v2-pre/formattedText/tokenize.ts

@@ -18,7 +18,7 @@ export function tokenize(value: string) {
   let currentValue = value.replace(/{{/g, '').replace(/}}/g, '')
 
   while (currentValue.length > 0) {
-    const openingBracketStartIndex = currentValue.indexOf('<')
+    const openingBracketStartIndex = currentValue.indexOf('<color')
     if (openingBracketStartIndex < 0) {
       tokens.push({ type: 'text', text: currentValue })
       eat(openingBracketStartIndex)
@@ -53,7 +53,11 @@ export function tokenize(value: string) {
       children
     })
     const nextClosingBracketEndIndex = currentValue.indexOf('>', nextClosingBracketStartIndex)
-    eat(nextClosingBracketEndIndex + 1)
+    if (nextClosingBracketEndIndex < 0) {
+      eat(currentValue.length)
+    } else {
+      eat(nextClosingBracketEndIndex + 1)
+    }
   }
 
   return tokens