Use italics/bold in text

[flayks]

Hey @CyriacBr, I discovered your library recently and it's very good as Splitting is not very optimized for React and SSR use. The thing is tho, I would like to have some italics or text formatting in my string, and as I understand it, that makes it tricky. I tried to play with some kind of Markdown way to make a text italic, but as the Component splits every character, that simply doesn't work…

The desired effect would be something like that:

Any lead?

Page.jsx

<SplitText text={RichText.asText(data.intro_headline)} className="title" mode="lines" />

SplitText.jsx

...

    /*
    ** Lines only
    */
    else if (mode === 'lines') {
        const Lines = ({ text, className }) => {
            return (
                <SplitText className={className}
                    LineWrapper={({ lineIndex, children }) => (
                        <div className="ln" style={{ '--ln-i': lineIndex }}>
                            <div className="ln__inner">
                                {children} // my text in italics would go there, but that contains HTML, so…
                            </div>
                        </div>
                    )}
                    WordWrapper={({ children }) => children}
                    LetterWrapper={({ children }) => {}}
                >
                    {text}
                </SplitText>
            )
        }

        return <Lines text={text} />
    }

[trompx]

Would also love this, being able to add links too. I think Gsap splitText allows this. Example: https://codepen.io/GreenSock/pen/pEKYVz @CyriacBr do you think it could be a simple addition?

[adamjw3]

also would like to be able to add html elements