diff --git a/packages/stage-ui/src/components/Widgets/PoppinText/PoppinText.web.vue b/packages/stage-ui/src/components/Widgets/PoppinText/PoppinText.web.vue index 78c4ecb12..445ea8ee0 100644 --- a/packages/stage-ui/src/components/Widgets/PoppinText/PoppinText.web.vue +++ b/packages/stage-ui/src/components/Widgets/PoppinText/PoppinText.web.vue @@ -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([]) const animatorCleanupFn = shallowRef<() => void>()