TextArea component

[mistakenelf]

Looking to create a simple notepad app but didn't see a text area. Does this exist or is it possible somehow to get a large text input?

[boydm]

Getting a good text area control done depends on truetype font metrics, which is difficult for multiple reasons. It is in progress, but not done.

In the meantime, what I've done when I need something like this is restrict myself to the monosopace font (which is part of the Scenic drivers). Then you can choose when to break a line simply by watching the character count.

You will probably want some level of manual control over line breaks and such anyway for that style of app. Any Text Area control would e aimed at the minimal scenario.

Let me know if you want more guidance than that.

[mistakenelf]

Thanks for the help, is it possible on the text input component to set a fixed height while not affecting the cursor height? I added a text input and set the height but it also made the cursor the same height

[boydm]

fyi... I'm working on an experimental Font metrics package. Will help to unblock this...

[boydm]

Font Metrics is in master.

[ConnorRigby]

interested in this component as well. I've noticed the current Input.TextField component does not support newline characters.

[boydm]

Am planning this for v0.11. Supporting newline is one thing (definitely yes), but I'd like feedback on the rest. Is select/replace important? Copy/paste? double-tap word to select it?

Text input is one of those areas that goes deep fast. To keep the level of work involved realistic, I'd like to find the set of features that provides what we actually need, but also lets me roll out the full set later.

[crertel]

Being able to support newlines is one thing, but doing selection/copy/paste/etc. is a whole thing, especially if the desire is to support clipboard operations outside of the application.

I'd suggest starting with just the simple input and newline support and scrolling or whatever until we have an idea what to do with those more advanced features.

[fantypants]

I actually worked a system out for the clipboard access on osx and windows with a few little changes, my biggest hurdle at current for our project is select-able/highlight-able text. I was considering the following method:
on click down, trace the cursor and over each codepoint and copy to clipboard, provide invert fill for each highlighted character.

Thoughts Boyd?

[crertel]

@fantypants Maybe a dedicated highlight function in the text area to take a scroll offset and mouse position to find the starting glyph (via metrics) and then on mouseup the same information to find ending glyph. This feels like something that might want to be done mathematically to be performant.

[Eiji7]

@boydm Am planning this for v0.11. Supporting newline is one thing (definitely yes), but I'd like feedback on the rest. Is select/replace important? Copy/paste? double-tap word to select it?

I think that only simplest features should be supported. Highlight (applying styles on specific graphemes range), copy and paste should be supported in multiple components/primitives. I would like to see a much more generic solution in such cases. For example somebody would like to write a find tool for categorized settings in order to find specific option. Ability to highlight (just apply custom style) only specific text (i.e. not full text primitive) would be really important.

For me select/replace is not that important - it could be later enhanced in this library or even in other helper library. What we would need is to easy work on them to not make it too complicated. I don't even see context menu required here.

I believe that with Font Metrics there should be an easy API to work on every graphemes. For example having TextArea id and graphemes range I would like to apply some style on specified (by range) text. Of course same goes to read and replace.

# TextArea value: "abc some text xyz"
ranges = get_text_ranges(graph, :textarea_id, "some text")
Enum.map(ranges, &apply_text_style(graph, :textarea_id, &1, background: :yellow))
# or
get_text(graph, :textarea_id, 4..-5) # returns some text
# or
put_text(graph, :textarea_id, 4..-5, "new some text") # TextArea value: "abc new some text xyz"

With that we can write our own find/replace components without any problem. I have one good example here: I would like to put text into TextArea part by part (file streaming) in order to not freeze loading simple text documents into TextArea.

In short I would like to see:

1. API to apply, read and reset custom styles for specified text range
2. API to read and replace text based on specified text range (just like String.slice/2 works)
3. API to limit height and width of TextArea (scrollbars are not even required)
   Ideally if it would be possible using all of px, % and cols/rows units.

Something like:

add_textarea(group, :textarea_id, "some text", transform: {{10, "%"}, {10, "%"}}, fill: {{80, "%"}, {80, "%"})

[boydm]

Hey guys.

Yeah. this whole topic is hard, mostly becuase (as you correctly pointed out) the click-drag selection thing is a bunch of work.

Related to it, There also needs to be a better system for control focus. This will be especially important when implementing a virtual keyboard. So these issues end up being inter-related. This is why it still isn't done. Requires some serious experimentation and thought...