Supporting google/budoux for better line breakings

[peacock0803sz]

Problem and Motivation

In some multibite Languages, It's too hard to make line breaklings correctly 😕
I'd like to use Budoux (JavaScript module) to solve this problem, but I felt configuring it as a vite plugin is pretty difficult...
Budoux is the machine learning powered line break organizer tool, and it's standalone, small, language-neutral.

How can I apply Bodoux for slidev slides?
Just installing budoux npm package and adding import to somewhere TypeScript file, It's not working...

Actual / Expected Behaviors

[ryoppippi]

So, I created a transformer to apply budoux to statements in slide.

https://github.com/ryoppippi/slidev-transformer-budoux

This makes your life easier.

[peacock0803sz]

@ryoppippi Thanks, looks so cool! Can I use via custom HTML class or CSS property (better)?

[ryoppippi]

What do you mean "custom html"? Give me an example

[peacock0803sz]

Oh, I meant "Custom class attributes" like this

<div class="bodoux">
Here to something better line breaking
</div>

Or, via using@apply in CSS:

.slidev-layout.default div {
  @apply budoux
}

[peacock0803sz]

@ryoppippi It's a just a kindly reminder) Is there any updates or ideas? I hope to be able to use without <budoux> tag elements 👀

[ryoppippi]

Based on our personal conversation with @peacock0803sz , I cannot implement it because slidev transformer does not process DOM, so adding class does not work