[openstreetmap/openstreetmap-website] Richtext refactor (#3045)

[Andy Allan]

I started work on refactoring another form to use our richtext_field, and I realised that there was no support in our new template for help text. For example, the Trace.tagstring help text (activerecord.help.trace.tagstring: 'comma delimited') appears automatically in small below the form field. I wanted to do the same thing for any `richtext_field` that has help text.

The first and trivial part of this was aligning the textarea and help panel, so that text underneath looks more natural. So that's one commit.

The second part was a complete rabbit hole into how bootstrap_form works internally. In order to get control over the text_area (to arrange it with the help text and preview divs), we need to ask bootstrap_form to provide a text_area without the normal wrapper. But then we are left to create the label and help text ourselves. The current solution has a straightforward implementation of a label ('object.class.human_attribute_name(attribute)') but there is a lot more complexity when we start to consider error handling, required attributes etc. So I've pared back the template, and used the built-in `form_group_builder` to wrap our textarea/help/preview, which takes care of both the label before and the help text after.

Finally, I wasn't super happy with having to have some forms use a specific builder, and the naming of it (RichtextFormBuilder) didn't leave much scope for further custom inputs. So instead I'm proposing we use an initializer to load our custom input into the bootstrap_form builder, along with a bit further refactoring so that it's as close as possible to the upstream inputs (in terms of class hierarchy etc).
You can view, comment on, or merge this pull request online at:

  https://github.com/openstreetmap/openstreetmap-website/pull/3045

-- Commit Summary --

  * Align the richtext help text height with the height of the textarea.
  * Refactor richtext fields to use a custom bootstrap_form input.

-- File Changes --

    M app/views/diary_entries/edit.html.erb (2)
    M app/views/diary_entries/new.html.erb (2)
    M app/views/shared/_richtext_field.html.erb (25)
    A config/initializers/bootstrap_form.rb (2)
    A lib/bootstrap_form/inputs/richtext_field.rb (35)
    D lib/richtext_form_builder.rb (15)

-- Patch Links --

https://github.com/openstreetmap/openstreetmap-website/pull/3045.patch
https://github.com/openstreetmap/openstreetmap-website/pull/3045.diff

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/3045
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20210113/8f9237ec/attachment.htm>