vankeisb/elm-rich-textarea

Textarea with style !

My textarea is Rich !

This project is in early inception stage. Use at your own risk.

Live Demo

Features

• textarea-like editing experience...
  • edition
  • key/mouse nav and selection
  • scrolling
• but with styled text !
  • ability to plug-in custom "highlighting"
  • with debouncing (do not parse at every keystroke)
  • in Elm, or in JS through ports
• and prediction/completion
  • with pluggable prediction engine
  • in Elm, or in JS through ports
• 100% pure Elm (0.19)

elm-rich-textarea's Issues

testing

mouse selection issue on editor mouseout

mouse leaves the editor without selecting the first line.

caret should not be rendered if the textarea doesn't have focus

caret should blink !

separate package project and demo project

completion/prediction

• Handle key strokes (CTRL-SPACE) and focus stuff
• Find position of the completion box
• Pop the completion panel somewhere
  • position and LaF to be determined. Look Slack, IDEs, and other similar stuff for inspiration...
• Design a prediction API that's easy to use (pass text+caret pos, and let the user render the prediction box content herself)

insert mode

support the insert key

hide the textarea

It should (of course) not be visible to the user...

Maybe we want a way to make it visible for debugging ?

scrollable editor

The editor should scroll to the caret pos when navigating with keys.

This requires to make the editor scrollable first !

mouse click should set the caret at the appropriate pos

left click on a char => we need to know where the char was clicked relative to its vert center.

CI build

mouse interactions

style expansion issue

styles are always expanded, which can lead to ugly styling when typing fast / highlight delays :

we'd like the styles to be "reset" in that case.

caret width is not always 1px on chrome

when navigating you can see that the caret's width is changing from 1 to 2px, whereas it should be constrained to 1px...

cursor should be in "select text" mode when hovering the div

when eol is selected we need to add an extra "blank" to mimic textarea's native behavior

mouse drag should change selection

blink via CSS

demo project on github

mouse selection is not exactly like textarea

There seems to be one "char" missing in mouse selection :

Compared to this :

asynchronous styling

Styling should be available as a Cmd and not directly as a function, in order to support external, async parsing (HTTP, ports)