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);