Horizontal overflow using this TUI or buttons within a paragraph?

[TahaAbbasi-Hashemi]

Hello im looking to create something similar to this example here. example

The main difference is that I would like to introduce links like you have in a web page. This is a link , and this is a [link] (https://github.com/ArthurSonzogni/FTXUI) but notice how they are within a block of text. Im looking to create that, but without using something like hbox or the example hflow.

I was wondering if I can only fit 500 characters in a horizontal space, and a link is present on characters 450-650, that the button will wrap to the next horizontal line for 150 characters?

I havent seen something in others tuis yet, but i think I can hack a solution together using flexbox but an integrated option would be better.

[ArthurSonzogni]

Hello!
I am not sure to understand the question. Anyway, here is one path you can have a component displaying some words and button in a flexbox:

You can split a sentence into individual words, to fill a list of elements.

void Split(const std::string& the_text, Elements& out) {
  Elements output;
  std::stringstream ss(the_text);
  std::string word;
  while (std::getline(ss, word, ' ')) {
    out.push_back(text(word));
  }
}

You can create some buttons:

auto btn_1 = Button("Button 1", ButtonOption::Animated());
auto btn_2 = Button("Button 2", ButtonOption::Animated());
auto btn_3 = Button("Button 3", ButtonOption::Animated());

Then you can make an horizontal layout:

auto layout = Container::Horizontal({
  btn_1,
  btn_2,
  btn_3
});

Then you can render them in a flexbox

auto final_component = Renderer(layout, [&] {
  auto config = FlexboxConfig().SetGap(1, 0);
  Elements elements;
  Split("This is the beginning of many words. Here is a button:", elements);
  elements.push_back(btn_1.Render());
  Split("Here is another button:", elements);
  elements.push_back(btn_2.Render());
  Split("And one more.", elements);
  elements.push_back(btn_3.Render());
  Split("That's all!.", elements);
  return flexbox(std::move(elements), config);
});