Feature Request: Support for center aligned text

[kevinMEH]

Hi,

I'm currently developing a quotes plugin for OpenCode but I'm running into a problem:

For one liners, the text is correctly centered, but for text with multiple lines there doesn't appear to be a way to center each line as we could using text-align: center as in HTML:

Expected:

Now is no time to think of what you do not have. Think of
what you can do with what there is.
- Ernest Hemingway

Code:

function Quotes(props: { theme: TuiThemeCurrent }) {
  const quote = QUOTES[Math.floor(Math.random() * QUOTES.length)]!;
  const split = quote.split("—"); // NOTE: Emdash; regular dashes are for names.
  const author = split.at(-1)?.trim() || "";
  const text = split.slice(0, -1).join("—").trim();

  return (
    <box width="100%" flexDirection="column">
      <text alignSelf="center" style={{ fg: props.theme.text }}>
        {text}
      </text>
      <text
        // alignSelf={text.length < 40 ? "center" : "flex-end"}
        alignSelf="center"
        style={{ fg: props.theme.textMuted }}
      >
        <em>
          - {author}
        </em>
      </text>
    </box>
  )
}

function View(props: { show: boolean; theme: TuiThemeCurrent }) {
  return (
    <box minHeight={4} width="100%" maxWidth={60} alignItems="center" paddingTop={3}>
      <Show when={props.show}>
        <Quotes theme={props.theme} />
      </Show>
    </box>
  )
}

Is there some way to enable this functionality that I don't know about? (preferably without needing to resort to complex width calculations & text splitting)

[kommander]

That is indeed currently not supported. Would be a nice addition. The text flow algorithm is under scrutiny currently.

[viralcodex]

@simonklee @kommander, I can go ahead and work on it to add an option if there's no blocker or any other work you guys are doing currently