fix(stage-ui): grapheme splitter in poppin'text

2025-07-08 04:58:23 +09:00
parent bd1b6aef3d
commit 7a04fd6956
1 changed files with 7 additions and 1 deletions
@@ -10,7 +10,13 @@ const props = defineProps<{
  animator?: Animator
 }>()

-const graphemeClusters = computed(() => [...props.text]) // Safely split text into grapheme clusters with UTF-8 awareness
+// Safely split text (some effort) into grapheme clusters with UTF-8 awareness
+const graphemeClusters = computed(() => {
+  const segmenter = new Intl.Segmenter('en-US', { granularity: 'grapheme' })
+  const segments = segmenter.segment(props.text)
+  return Array.from(segments).map(s => s.segment)
+})
+
 const elements = ref<HTMLElement[]>([])

 const animatorCleanupFn = shallowRef<() => void>()