show whitespaces at beginning of lines of text

[flo-bit]

I want to show some text containing multiple lines of code, with some lines being indented by whitespace at the beginning, but I can't get this to work, is this supported/a bug?

this is what I tried:

import { Canvas } from '@react-three/fiber'
import { useState } from 'react';
import { Root, Text } from '@react-three/uikit'

function App() {
  const [text, setText] = useState('Hello \n     World!');

  return (
    <div id="canvas-container">
      <pre>{text}</pre>
      <Canvas>
        <Root backgroundColor="#ccc">
          <Text wordBreak="keep-all" fontWeight="bold" multiline>{text}</Text>
        </Root>
      </Canvas>
    </div>
  )
}

export default App;

[bbohlender]

same issue as in #77 The default text layouting behavior ignores starting and trailing whitespace, which should be configurable instead.

[flo-bit]

For anyone looking for a quick workaround, this is what I'm using currently:

<Text
    paddingLeft={(text.match(/^\s*/) || [''])[0].length * 10}
>