Description field with markdown preview

[samanthagottlieb]

What does this change?

This changes the rule Description field:

• makes it multiline, expandable and scrollable
• adds a Preview button to preview the markdown

@rhystmills and I explored adding an EuiMarkdownEditor, however this came with a toolbar that included plugins to add a task list, code snippet, etc. Because these are not supported by Composer, we thought it would be best not to show these options to the user. Unfortunately the only plugin EUI allows you to disable is 'tooltip'.

Following discussion in the Typerighter chat group, the team agreed that implementing a text box that supports markdown (to allow the user to make things bold or italic if they know the syntax) and allows you to preview how it will look in Composer is a good step in the right direction for now!

Trello card is here.

How to test

This has been tested by running the manager app locally.

Images

Before

After

Write mode:

Preview mode:

[samanthagottlieb]

Looks great and works as expected.

I wonder if it would be worth adding some styles to differentiate the preview from the body of the form, though not sure exactly what the best option would be. Perhaps a lighter background and a border? Might be worth getting some UX input.

Also not sure if we should shout out that it's a markdown field in some way in the interface. Again, not sure the best way to do this, perhaps a tooltip (I think EUI has one).

Both great points, thanks @rhystmills. I've changed the background to match the colour and padding of other fields once the preview button is pressed. In Preview mode, the surrounding box will jump in/out to hug the text, with the same amount of padding as other input fields:

Some UX input is probably a good idea, I'll reach out.

I've also added a tooltip:

[jonathonherbert]

This is looking handsome!

There are a few tweaks I'd recommend –

• the i icon should be centered with the rest of the description text. We should be able to do that with flexbox and align-items: center – there are a few examples in the codebase.
• The big button to toggle the preview really throws out the layout! I think we can get the toggle in line with the description text, too, by making it a link and using a small (xs) icon.

Super happy to pair!

[rhystmills]

Looking great! Adding to Jon's comments - I wonder if the preview field style is distinct enough from editable text fields - not sure if EUI provides a background colour that's clearly distinct from both editable text fields (i.e. white) or the form body colour itself? (Or if there's another styling option that will differentiate from both the form and the editable fields). Also happy to pair!

[samanthagottlieb]

This is looking handsome!

There are a few tweaks I'd recommend –

• the i icon should be centered with the rest of the description text. We should be able to do that with flexbox and align-items: center – there are a few examples in the codebase.
• The big button to toggle the preview really throws out the layout! I think we can get the toggle in line with the description text, too, by making it a link and using a small (xs) icon.

Super happy to pair!

Thanks for this feedback!

I've moved the i to align with the text, though not sure what the right size for it is. m looks a little big, but s is a bit hard to read:

Yes I was battling with positioning that Preview button last week - thanks for the tip re making it a link! Might reach out for pairing in a bit if I can't figure out the right alignment.

[samanthagottlieb]

Looking great! Adding to Jon's comments - I wonder if the preview field style is distinct enough from editable text fields - not sure if EUI provides a background colour that's clearly distinct from both editable text fields (i.e. white) or the form body colour itself? (Or if there's another styling option that will differentiate from both the form and the editable fields). Also happy to pair!

Thanks for this feedback Rhys - I've just done some pairing Jon changing the opacity of the background colour. Latest state of things:

[rhystmills]

Ah, excellent - clear distinction from the background and the editable fields, and the toggle button looks great too.