axeltlarsson / receptdatabasen-api

The new PostgREST API and Elm SPA for receptdatabasen
MIT License
0 stars 1 forks source link

Trello-like checklist paste for ingredient input #3

Closed axeltlarsson closed 4 years ago

axeltlarsson commented 4 years ago

If pasting a string with newlines, split it up into multiple ingredients, e.g. if the string that is pasted is:

1 kg mjöl
1 dl smält smör
3 ägg

then that should be turned into three separate ingredient input fields.

axeltlarsson commented 4 years ago

A problem is that Elm doesn't allow you access to the actual event, so can't simply do event.clipboardData.getData() on paste as would be the natural way to split the pasted string by newlines: (ref). And targetValue is useless in this context as it doesn't give you the pasted data - you need the clipboardData. The other solution was to simply have a custom event handler like so:

onPaste : msg -> Attribute msg
onPaste tagger =
    on "paste" <| Decode.succeed tagger

called with e.g. onPaste (Form.Append "paste:ingredients.0.ingredients") on the input element, then update would look at the unmodified pasted content ((Form.getFieldAsString "ingredients.0.newIngredientInput" form).value), and then split by newlines and then emit further Form.Msg messages to add each individual ingredient. The problem with that is that when pasting into a regular input element, the newlines are stripped... Thus information is lost from the pasted data as newlines are already stripped away by this time. Then of course there are two alternatives:

  1. Split by something other than '\n'; e.g. digits (as most ingredient entries start with a digit specifying the quantity). However, this would be less robust than splitting by newlines as sometimes the quantity is not specified by a digit or it's left out altogether.
  2. Do not use a regular input type="test" but rather a textarea as that preserves the newlines upon paste.

The downside of approach 2 is that it's slightly hacky and it could make the styling more difficult.

axeltlarsson commented 4 years ago

Since I've gone over to using one EasyMDE input for all ingredients, this is a non-issue now.