Input Control Customization

[nathan-ep]

Is there no option to easily change a textbox input control to a text area?
There are times where my param input values are longer than the viewable textbox area. I would like to be able to view that in a word-wrapped text area.

[mathis-m]

Swagger-UI provides a Plugin API to do such things.
One solution I can think of is to use the JsonSchema input component abstraction.
It is documented here: https://github.com/swagger-api/swagger-ui/blob/cc408812fc927e265da158bf68239530740ab4cc/docs/customization/plug-points.md#json-schema-components

You could add the OAS format property to the parameter schema where you want a multiline element. Just like:

type: string
format: multiline

Then you can define a react component with the key JsonSchema_string_multiline.
Just like this:

import React from "react";

const JsonSchema_string_multiline = (props) => {
  const multilineValue = props.value || ""
  let errors = props.errors
  errors = errors.toJS ? errors.toJS() : []
  return (
    <input
      className={errors.length ? "invalid" : ""}
      type="textarea"
      title={errors.length ? errors : ""}
      onChange={e => props.onChange(e.target.value, props.keyName)}
      disabled={props.disabled}
      value={multilineValue} >
  )
}

Now you can define your plugin:

const MultilinePlugin = {
  components: {
    JsonSchema_string_multiline: JsonSchema_string_multiline,
  }
};

Now you need to edit the index.html where swagger is intantiated, to include your custom plugin:

      const ui = SwaggerUIBundle({
        url: "https://petstore.swagger.io/v2/swagger.json",
        dom_id: '#swagger-ui',
        presets: [
          SwaggerUIBundle.presets.apis,
          SwaggerUIStandalonePreset
        ],
        plugins: [
          MultilinePlugin // insert here
        ],
        layout: "StandaloneLayout"
      })