processwire / processwire-requests

ProcessWire feature requests.
39 stars 0 forks source link

InputfieldWrapper: keep css classes when field->textFormat = Inputfield::textFormatMarkdown #493

Open hiboudev opened 1 year ago

hiboudev commented 1 year ago

Short description of the enhancement

When creating a form, and setting to a inputfield: inputfield->textFormat = Inputfield::textFormatMarkdown; // Allow HTML in label, description, errors... Css classes are no longer added to output for inputfield properties related with textFormatMarkdown (label, description, errors...).

In this case I suggest to wrap HTML values in a div with appropriate classes.

Current vs. suggested behavior

Actually when NOT using HTML, InputfieldWrapper::$defaultMarkup defines a template to output HTML content, for an error it is: 'item_error' => "<p class='InputfieldError ui-state-error'><i class='fa fa-fw fa-flash'></i><span>{out}</span></p>",

You can see the "ui-state-error" class allowing to define a style for error messages and fields in error.

When using HTML (Inputfield::textFormatMarkdown) there's no template used, only the HTML given by developer (me) is outputed to page.

I suggest when using Inputfield::textFormatMarkdown, that InputfieldWrapper wraps the given HTML values (description, error, label...) inside a div with appropriate CSS classes, like this: <div class="InputfieldError ui-state-error"><!-- Here the developper HTML --></div>

Why would the enhancement be useful to users?

It would be useful for developers, because actually if you use HTML in a field, you lose CSS styles on several properties output of this inputfield.

My use case

I'm translating a web site in multiple languages. Texts are editable in admin, with a CKEditor to allow formatting and links. Some of those texts go in a form, inputfield description, inputfield error, etc.

My workaround

  1. I don't use Inputfield::textFormatMarkdown. So I don't give HTML to field properties, but markdown.
  2. Instead of a CKEditor I use a SimpleMDE (markdown).
  3. I get the unformatted value from SimpleMDE and set it to the form inputfield property: $inputfield->description($page->getUnformatted('mySimpleMDEField'))

I use getUnformatted() cause I set a "Markdown/Parsedown Extra" formatter in case I also need to display the text elsewhere in HTML.