Wrapping long lines in an Input

[bignacio]

Hi!

First, great work on this library, thank you!

I'm trying to find a way to make an ftxui::Input wrap the text when the content is longer than the width of the input area, to no avail.

I think paragraphs can help with this but I couldn't find a way to make them work nicely inputs.
Is what I want possible at all?

Thanks

[ArthurSonzogni]

Hello @bignacio
Unfortunately, this hasn't been implemented.

An input is rendered as a scrollable frame of vbox of line of texts. Adding line wrapping would be very difficult.

Yes, paragraph and all the flexbox was meant to allow for this kind of things, but unfortunately, I haven't found a great way to make them work 100% properly, and I don't think I will ever make them be used in Input.

I think the initial architecture of FTXUI offers too much power for users, which reduce what the library author can do. I am working on an experimental TUI library inspired on HTML/CSS/Reactive where I would be able to support such a things.

Details

RTXUI_COMPONENT(Counter) {
  // Define internal reactive state.
  auto count = State(0);

  // Define computed state.
  auto double_count = Computed<int>([=] { return count->Value() * 2; });

  // Define callbacks that will be called when the user interacts with the
  // component.
  auto increment = [=] { count->Value(count->Value() + 1); };
  auto reset = [=] { count->Value(0); };

  // Import the components used in the template.
  //
  // Note that there are no "special" components in rtxui. All components are
  // regular components that can be imported and used in the template.
  //
  // RTXUI provides a set of default components that can be imported, such as
  // `p`, `span`, and `button`. These components are defined in the
  // `default_components.hpp` header file, which is included in the
  // `components` directory.
  //
  // Import are scoped to the component we are defining. This means that every
  // component can import the same component without conflicts.
  Import<rtxui::div>();
  Import<rtxui::ul>();
  Import<rtxui::li>();

  // Bind the state and callbacks to make them available to the template.
  Import("count", count);
  Import("double_count", double_count);
  Import("increment", increment);
  Import("reset", reset);

  // Return the template of the component.
  return R"html(
    <ul>
      <li>Count: {count}<p>
      <li>Count: {count}</p>
    </ul>

    <button onclick="{increment}">Increment</button>
    <button onclick="{reset}">Reset</button>

    <style>
      p {
        background-color:red;
        color: white;
        decoration: bold;
      }

      button {
        background-color: blue;
        color: white;
        padding: 5px;
      }
    </style>
  )html";
}

[bignacio]

Thanks @ArthurSonzogni for the quick reply and, again, for the great work you an all did in this library.
Cheers