diff --git a/README.md b/README.md
index 09f37c6..16b70db 100644
--- a/README.md
+++ b/README.md
@@ -264,6 +264,10 @@ containers and keys or use the ones that come with the module.
| | as | String | HTML tag to use for the inner-text field |
| | htmlClass | String | HTML class for the tag used |
| | defaultValue | String | Either used as a static value for the HTML element or as a placeholder when is not defined |
+| inner-html | renderer | String | inner-html |
+| | as | String | HTML tag to use for the inner-html field |
+| | htmlClass | String | HTML class for the tag used |
+| | defaultValue | String | Either used as a static value for the HTML element |
| button | renderer | String | button |
| | content | String | button inner html |
diff --git a/demo/src/schema/all-available-fields.js b/demo/src/schema/all-available-fields.js
index f7f9335..7e0e2c3 100644
--- a/demo/src/schema/all-available-fields.js
+++ b/demo/src/schema/all-available-fields.js
@@ -84,6 +84,15 @@ export default {
htmlClass: 'text-muted d-block mb-3 mt-1',
defaultValue: 'This is some raw html text content: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum'
},
+ innerHtml: {
+ type: "field",
+ renderer: "inner-html",
+ name: "innerText",
+ as: "p",
+ htmlClass: "text-muted d-block mb-3 mt-1",
+ defaultValue:
+ "This is some raw html content
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum",
+ },
autocomplete: {
name: "autocomplete",
label: "Autocomplete",
@@ -151,6 +160,23 @@ export default {
formGroupClass: "form-group mb-4",
validation: [['array'], ['of', [['string']]]]
},
+ reactSelectCreatableMultiDelimited: {
+ type: "field",
+ renderer: "react-select",
+ name: "react-select-creatable-multi-delimited",
+ label: "React Select Creatable Multi Delimited with ','",
+ delimiter: ',',
+ isMulti: true,
+ isCreatable: true,
+ options: [],
+ menuIsOpen: false,
+ defaultValue: [],
+ components: {
+ DropdownIndicator: null
+ },
+ formGroupClass: "form-group mb-4",
+ validation: [['array'], ['of', [['string']]]]
+ },
textarea: {
name: "description",
label: "Description",
@@ -271,4 +297,4 @@ export default {
}
}
}
-}
+}
\ No newline at end of file
diff --git a/src/Field/InnerHtml.js b/src/Field/InnerHtml.js
new file mode 100644
index 0000000..32c416b
--- /dev/null
+++ b/src/Field/InnerHtml.js
@@ -0,0 +1,19 @@
+import React from "react";
+
+const InnerHtml = ({ config, formik, value, error }) => {
+ const {
+ name,
+ as: Component = "div",
+ htmlClass,
+ defaultValue = "",
+ ...attributes
+ } = config;
+
+ return (
+
+
+
+ );
+};
+
+export default React.memo(InnerHtml);
diff --git a/src/Field/ReactSelect.js b/src/Field/ReactSelect.js
index b62b35a..dcfd355 100644
--- a/src/Field/ReactSelect.js
+++ b/src/Field/ReactSelect.js
@@ -52,6 +52,7 @@ const ReactSelect = ({ config, formik, value, error }) => {
isDisabled = false,
isClearable = false,
isCreatable = false,
+ delimiter= '',
options: initialOptions,
...attributes
} = config;
@@ -103,15 +104,25 @@ const ReactSelect = ({ config, formik, value, error }) => {
switch (event.key) {
case 'Enter':
case 'Tab':
- changeHandler(
+ if (delimiter && inputValue.indexOf(delimiter) >= 1) {
+ changeHandler(
setFieldValueWrapper(setFieldValue, name),
formik,
config,
- [ ...selectedValue, inputValue ],
+ [...selectedValue, ...inputValue.split(delimiter)],
'onChange'
- );
- setInputValue('');
- event.preventDefault();
+ );
+ } else {
+ changeHandler(
+ setFieldValueWrapper(setFieldValue, name),
+ formik,
+ config,
+ [...selectedValue, inputValue],
+ 'onChange'
+ );
+ }
+ setInputValue('');
+ event.preventDefault();
}
},
...attributes
diff --git a/src/Field/index.js b/src/Field/index.js
index 65f6a15..875943d 100644
--- a/src/Field/index.js
+++ b/src/Field/index.js
@@ -8,6 +8,7 @@ import Wysiwyg from './Wysiwyg';
import Textarea from './Textarea';
import Checkbox from './Checkbox';
import InnerText from './InnerText';
+import InnerHtml from './InnerHtml';
import CodeEditor from './CodeEditor';
import ReactSelect from './ReactSelect';
import FileUploader from './FileUploader';
@@ -29,6 +30,7 @@ registerField('wysiwyg', Wysiwyg);
registerField('textarea', Textarea);
registerField('checkbox', Checkbox);
registerField('inner-text', InnerText);
+registerField('inner-html', InnerHtml);
registerField('code-editor', CodeEditor);
registerField('react-select', ReactSelect);
registerField('autocomplete', Autocomplete);