-
- {/*
- */}
-
- {
- !item.multiLine && !item.maskType &&
{
- const val = e.currentTarget.textContent;
- handleTagUpdate(item.originalIndex, val as string);
- }}
- onKeyDown={(e) => {
- if (e.key == "Enter") e.preventDefault();
- }}
- contentEditable={true}
- className={`outline-none whitespace-nowrap w-full`}
- style={{
- color: item.styles.color,
- fontSize: `${item.styles?.textSize}px`,
- fontStyle: item.styles.italic ? "italic" : "normal",
- fontWeight: item.styles.bold ? "600" : "400",
- textDecoration: item.styles.underline ? "underline" : "none"
- }}
- >{item.value ?? ""}
- }
- {
- item.multiLine && !item.maskType &&
{
- const val = e.currentTarget.textContent;
- handleTagUpdate(item.originalIndex, val as string);
- }}
- contentEditable={true}
- className={`w-full outline-none`}
+ onKeyDown={(e) => { if (e.key === "Enter") e.preventDefault(); }}
+ onBlur={(e) => handleTagUpdate(item.originalIndex, e.currentTarget.textContent as string)}
+ className="outline-none w-full h-full m-0 p-0"
style={{
color: item.styles.color,
fontSize: `${item.styles?.textSize}px`,
fontStyle: item.styles.italic ? "italic" : "normal",
fontWeight: item.styles.bold ? "600" : "400",
- textDecoration: item.styles.underline ? "underline" : "none"
+ textDecoration: item.styles.underline ? "underline" : "none",
+ whiteSpace: "nowrap",
+ overflow: "hidden", // don't let text push container
+ display: "block",
+ lineHeight: "1",
}}
- >{item.value ?? ""}
- }
- {
- "maskType" in item && "maskCharacter" in item && item.maskType &&
{
- // const val = e.currentTarget.textContent;
- // handleTagUpdate(item.originalIndex, val as string);
- // }}
- onKeyDown={(e) => {
- if (e.key == "Enter") e.preventDefault();
+ >
+ {item.value ?? ""}
+
+ )}
+
+ {/* Multiline / paragraph */}
+ {item.multiLine && !item.maskType && (
+
handleTagUpdate(item.originalIndex, e.currentTarget.textContent as string)}
+ className="outline-none w-full h-full m-0 p-0"
+ style={{
+ color: item.styles.color,
+ fontSize: `${item.styles?.textSize}px`,
+ fontStyle: item.styles.italic ? "italic" : "normal",
+ fontWeight: item.styles.bold ? "600" : "400",
+ textDecoration: item.styles.underline ? "underline" : "none",
+ whiteSpace: "pre-wrap", // respects newlines, wraps within width
+ wordBreak: "break-word",
+ overflowY: "auto", // scroll if paragraph overflows height
+ overflowX: "hidden",
+ display: "block",
}}
- // onFocus={() => {
- // }}
+ >
+ {item.value ?? ""}
+
+ )}
+
+ {/* Masked input */}
+ {"maskType" in item && "maskCharacter" in item && item.maskType && (
+
{ if (e.key === "Enter") e.preventDefault(); }}
onBlur={(e) => {
- let val = e.target.textContent;
- handleTagUpdate(item.originalIndex, val as string);
- if (typeof item.maskType == "string" && typeof val == "string" && item.maskCharacter) {
+ let val = e.target.textContent as string;
+ handleTagUpdate(item.originalIndex, val);
+ if (typeof item.maskType === "string" && val && item.maskCharacter) {
val = val.replace(/ /g, "");
- e.target.textContent = maskUtils(item.maskType, val, item.maskCharacter)
+ e.target.textContent = maskUtils(item.maskType, val, item.maskCharacter);
}
}}
- contentEditable={true}
- className={`outline-none whitespace-nowrap w-full`}
+ className="outline-none w-full h-full m-0 p-0"
style={{
color: item.styles.color,
fontSize: `${item.styles?.textSize}px`,
fontStyle: item.styles.italic ? "italic" : "normal",
fontWeight: item.styles.bold ? "600" : "400",
- textDecoration: item.styles.underline ? "underline" : "none"
+ textDecoration: item.styles.underline ? "underline" : "none",
+ whiteSpace: "nowrap",
+ overflow: "hidden",
+ display: "block",
+ lineHeight: "1",
}}
- >
- }
+ />
+ )}
- }
+ )}
{/* TEXT FIELD - END */}
{/* EMAIL FIELD - START */}
diff --git a/src/components/process/processStepTwo/DocumentContainer.tsx b/src/components/process/processStepTwo/DocumentContainer.tsx
index 0ac3bc3..c527c0e 100644
--- a/src/components/process/processStepTwo/DocumentContainer.tsx
+++ b/src/components/process/processStepTwo/DocumentContainer.tsx
@@ -591,7 +591,9 @@ const DocumentContainer = forwardRef