Set Creation: Prompt Entry (w/ Native Keyboard)

This task defines the second section (prompt portion) of the input area for problem creation

Full Mockup

Prompt

An empty problem should contain the speech bubble icon (alt: "speech bubble emoji") and the option to "Add the prompt and any details here"

When the prompt input box is clicked / enters focus, this should clear to a blank line with a standard flashing cursor icon, and bring up a standard phone keyboard to allow for textual input.

Overflow behavior

When the problem is long enough to necessitate overflow (e.g. would otherwise be going over the opposite edge of the box), it should overflow to the next line.

Line breaks should occur primarily on spaces.
If there are no spaces (for example, a teacher attempting to include long mathematical phrases in the prompt box), this should occur on operations (e.g. plus, minus, equals), where the operation is also brought down to the beginning of the new line.
If there are no operations (e.g. just a really long number or string of characters), the break can happen between characters.

Reference

Style Guides: https://invis.io/CQYLLW8J49U Mobile Mockups: https://invis.io/5HYLLW1G4BD Fonts: https://www.dropbox.com/sh/c12m6ufweyds20d/AAAdXNPOt8e52DkSAr9pd-a-a/Fonts?dl=0

Acceptance criteria:

Given that I'm a user on the problem creation page, when I enter the text field to add my prompt in the bottom box, the default text should disappear, the blinking cursor should come up, and my native keyboard should appear, allowing me to type my prompt into the text box.. If I enter a particularly long prompt, this should overflow to the next line on an intuitive break, such as an operator.

benetech / MathShare