diff --git a/src/@episerver/forms-react/src/components/elements/ParagraphTextElementBlock.tsx b/src/@episerver/forms-react/src/components/elements/ParagraphTextElementBlock.tsx new file mode 100644 index 0000000..7a8a9f5 --- /dev/null +++ b/src/@episerver/forms-react/src/components/elements/ParagraphTextElementBlock.tsx @@ -0,0 +1,66 @@ +import { FormCache, FormContainer, FormStorage, ParagraphText, Url } from "@episerver/forms-sdk" +import React, { useMemo } from "react"; +import ElementWrapper from "./shared/ElementWrapper"; +import { useElement } from "../../hooks/useElement"; +import { ElementCaption, ValidationMessage } from "./shared"; +import { useForms } from "../../context/store"; + +export interface ParagraphTextElementBlockProps { + element: ParagraphText +} + +export const ParagraphTextElementBlock = (props: ParagraphTextElementBlockProps) => { + const { element } = props; + const { elementContext, handleChange, handleBlur } = useElement(element); + const { isVisible, validationResults, value, validatorClasses } = elementContext; + const formContext = useForms(); + const form = formContext?.formContainer as FormContainer + const formKey = form.key; + + const formStorage = new FormStorage(form); + const data = formStorage.loadFormDataFromStorage(); + + const doReplaceText = element.properties.disablePlaceholdersReplacement ?? true + + function extractTextsWithFormat(inputString: string) { + const regex = /::(.*?)::/g; + const matches = inputString.match(regex); + if (matches) { + return matches.map(match => match.slice(2, -2)); + } else { + return []; + } + } + + let text = element.properties.paragraphText + const placeHolders = extractTextsWithFormat(element.properties.paragraphText) + + if (doReplaceText) { + data.forEach(element => { + const key = element.elementKey + const value = element.value as string + const friendlyName = form.formElements.find(fe => fe.key === key)?.displayName + if (friendlyName && placeHolders.indexOf(friendlyName) !== -1) { + text = text.replace("::" + friendlyName + "::", value) + } + }); + } + + console.log(text) + + return useMemo(() => ( + + + <> +
+
+
+
+ +
+ + + ), [isVisible, validationResults, value]); +} \ No newline at end of file diff --git a/src/@episerver/forms-react/src/components/elements/index.ts b/src/@episerver/forms-react/src/components/elements/index.ts index 472e0d7..f9a9e0e 100644 --- a/src/@episerver/forms-react/src/components/elements/index.ts +++ b/src/@episerver/forms-react/src/components/elements/index.ts @@ -11,6 +11,7 @@ import { ImageChoiceElementBlock } from "./ImageChoiceElementBlock"; import { FileUploadElementBlock } from "./FileUploadElementBlock"; import { ResetButtonElementBlock } from "./ResetButtonElementBlock"; import { SubmitButtonElementBlock } from "./SubmitButtonElementBlock"; +import { ParagraphTextElementBlock } from "./ParagraphTextElementBlock"; export const components: Record = { TextboxElementBlock, @@ -25,5 +26,6 @@ export const components: Record = { ImageChoiceElementBlock, FileUploadElementBlock, ResetButtonElementBlock, - SubmitButtonElementBlock + SubmitButtonElementBlock, + ParagraphTextElementBlock }; \ No newline at end of file diff --git a/src/@episerver/forms-sdk/src/form-submit/formSubmit.ts b/src/@episerver/forms-sdk/src/form-submit/formSubmit.ts index f767970..c1872dc 100644 --- a/src/@episerver/forms-sdk/src/form-submit/formSubmit.ts +++ b/src/@episerver/forms-sdk/src/form-submit/formSubmit.ts @@ -93,10 +93,11 @@ export class FormSubmitter { return new Promise((resolve, reject)=>{ let formStorage = new FormStorage(this._form); - //save data to storage of browser - formStorage.saveFormDataToStorage(model.submissionData); + // Save data to storage of browser + let currentData = formStorage.loadFormDataFromStorage() + formStorage.saveFormDataToStorage(currentData.concat(model.submissionData)); - //post data to API + // Post data to API let formData = new FormData(); formData.append("formKey", model.formKey); formData.append("locale", model.locale);