Update docs and playground

Author: bhch

docs/docs/usage/browser.md

@@ -100,9 +100,11 @@ which may contain these keys:
  - `fileHandler` *(Optional)*: URL for the common file handler endpoint for all file fields.
  - `fileHandlerArgs` *(Optional)*: Key-value pairs which will be sent via querystring to the `fileHandler` URL.
  - `errorMap` *(Optional)*: An object containing error messages for fields.
+ - `readonly` *(Optional)*: A boolean. If `true`, the whole form will be read-only.
 
-*Changed in version 2.1*: `errorMap` option was added.
-*Changed in version 2.2*: `fileHandlerArgs` option was added.
+*Changed in version 2.1*: `errorMap` option was added.  
+*Changed in version 2.2*: `fileHandlerArgs` option was added.  
+*Changed in version 2.10*: `readonly` option was added.
 
 
 ##### `reactJsonForm.getFormInstance(containerId)`

docs/docs/usage/node.md

@@ -71,9 +71,11 @@ class MyComponent extends React.Component {
  - `fileHandler`: A URL to a common file handler endpoint for all file input fields.
  - `fileHandlerArgs` (*Optional*): Key-value pairs which will be sent via querystring to the `fileHandler` URL.
  - `errorMap`: An object containing error messages for input fields. [See data validation section](#data-validation)
- for more.  
+ for more.
+ - `readonly`: A boolean. If `true`, the whole form will be read-only.
 
-*Changed in version 2.1*: `errorMap` prop was added.
+*Changed in version 2.1*: `errorMap` prop was added.  
+*Changed in version 2.10*: `readonly` prop was added.
 
 ## `EditorState` API reference
 

docs/static/css/docs.css

@@ -450,10 +450,10 @@ label {
     width: auto;
     float: none;
 }
-input, textarea, select {
+input, textarea, select, .rjf-multiselect-field-input {
     display: block;
     width: 100%;
-    min-width: 8rem;
+    min-width: 12rem;
     padding: .25rem .5rem;
     font-size: inherit;
     font-weight: 400;
@@ -465,7 +465,7 @@ input, textarea, select {
     border-radius: .25rem;
     transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
 }
-input:focus, textarea:focus, select:focus {
+input:focus, textarea:focus, select:focus, .rjf-multiselect-field-input:focus {
     color: #495057;
     background-color: #fff;
     border-color: #f0f;
@@ -966,6 +966,35 @@ button.rjf-add-button:hover {
     background-position: right 6px center;
     background-size: 16px 12px;
 }
+.rjf-multiselect-field-input-item {
+    display: inline-block;
+    margin-right: 4px;
+    margin-bottom: 4px;
+    background-color: #eee;
+    border-radius: 4px;
+    line-height: 1;
+}
+.rjf-multiselect-field-input-item > span {
+    display: inline-block;
+    vertical-align: middle;
+    color: #000;
+    padding: 3px 6px;
+    line-height: 1;
+}
+.rjf-multiselect-field-input-item > button {
+    display: inline-block;
+    vertical-align: middle;
+    background-color: transparent;
+    border: 0;
+    font-size: 1rem;
+    padding: 3px 6px;
+    line-height: 1;
+    border-radius: 0 4px 4px 0;
+}
+.rjf-multiselect-field-input-item > button:hover {
+    color: #ee0038;
+    background-color: #ffdbe0;
+}
 .rjf-multiselect-field-options-container {
     position: absolute;
     background-color: #fff;