From 455e4534d1d67543c6147f99ce34b3c095196303 Mon Sep 17 00:00:00 2001
From: Vitalii Kiiko <mr.psiho@gmail.com>
Date: Mon, 28 Oct 2024 09:05:35 +0100
Subject: [PATCH] - fixed displaying of quill editor content on the pages;

---
 package.json                             |  1 +
 src/assets/scss/components/appForm.scss  |  4 ++--
 src/pages/BandoApplication/index.js      |  5 ++++-
 src/pages/BandoFormsPreview/index.js     |  5 ++++-
 src/pages/BandoView/index.js             | 13 +++++++------
 src/pages/BandoViewBeneficiario/index.js | 13 +++++++------
 6 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/package.json b/package.json
index 9b1eeda..b286200 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "primeicons": "7.0.0",
     "primereact": "10.8.4",
     "quill": "2.0.2",
+    "quill-delta-to-html": "^0.12.1",
     "ramda": "0.30.1",
     "react": "18.3.1",
     "react-dnd": "16.0.1",
diff --git a/src/assets/scss/components/appForm.scss b/src/assets/scss/components/appForm.scss
index c8f4180..db6b970 100644
--- a/src/assets/scss/components/appForm.scss
+++ b/src/assets/scss/components/appForm.scss
@@ -234,7 +234,7 @@
 }
 
 .appForm__content {
-  p {
+  /*p {
     margin: 0;
 
     &.ql-indent-1 {
@@ -271,7 +271,7 @@
 
   li[data-list="bullet"] {
     list-style: disc;
-  }
+  }*/
 }
 
 .appForm__delegaForm {
diff --git a/src/pages/BandoApplication/index.js b/src/pages/BandoApplication/index.js
index c2b3cfb..d12ab66 100644
--- a/src/pages/BandoApplication/index.js
+++ b/src/pages/BandoApplication/index.js
@@ -4,6 +4,7 @@ import { useParams } from 'react-router-dom';
 import { head, is, pluck, isEmpty } from 'ramda';
 import { useForm } from 'react-hook-form';
 import { TZDate } from '@date-fns/tz';
+import "quill/dist/quill.core.css";
 
 // store
 import { storeSet, useStore } from '../../store';
@@ -489,7 +490,9 @@ const BandoApplication = () => {
                             //console.log('validations', validations, o.name)
 
                             return ['paragraph'].includes(o.name) && text
-                                ? <div className="appForm__content" key={o.id}>{renderHtmlContent(text.value)}</div>
+                                ? <div className="appForm__content ql-editor" key={o.id}>
+                                    {renderHtmlContent(text.value)}
+                            </div>
                                 : <FormField
                                     key={o.id}
                                     type={o.name}
diff --git a/src/pages/BandoFormsPreview/index.js b/src/pages/BandoFormsPreview/index.js
index 050582a..b8ec986 100644
--- a/src/pages/BandoFormsPreview/index.js
+++ b/src/pages/BandoFormsPreview/index.js
@@ -4,6 +4,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { klona } from 'klona';
 import { head, isNil } from 'ramda';
 import { useForm } from 'react-hook-form';
+import "quill/dist/quill.core.css";
 
 // store
 import { storeSet, useStore } from '../../store';
@@ -154,7 +155,9 @@ const BandoFormsPreview = () => {
                                 }, {});
 
                                 return ['paragraph'].includes(o.name) && text
-                                    ? <div className="appForm__content" key={o.id}>{renderHtmlContent(text.value)}</div>
+                                    ? <div className="appForm__content ql-editor" key={o.id}>
+                                        {renderHtmlContent(text.value)}
+                                </div>
                                     : <FormField
                                         key={o.id}
                                         type={o.name}
diff --git a/src/pages/BandoView/index.js b/src/pages/BandoView/index.js
index 1157178..d4e736c 100644
--- a/src/pages/BandoView/index.js
+++ b/src/pages/BandoView/index.js
@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import { __ } from '@wordpress/i18n';
 import { useNavigate, useParams } from 'react-router-dom';
 import { is, isEmpty, isNil } from 'ramda';
+import "quill/dist/quill.core.css";
 
 // store
 import { storeSet, useStore } from '../../store';
@@ -103,7 +104,7 @@ const BandoView = () => {
 
                     <div className="appPageSection__withBorder">
                         <h2>{__('Descrizione breve', 'gepafin')}</h2>
-                        <div className="row rowContent">
+                        <div className="row rowContent ql-editor">
                             {renderHtmlContent(data.descriptionShort)}
                         </div>
                     </div>
@@ -138,7 +139,7 @@ const BandoView = () => {
 
                     <div className="appPageSection__withBorder">
                         <h2>{__('Descrizione dettagliata', 'gepafin')}</h2>
-                        <div className="row rowContent">
+                        <div className="row rowContent ql-editor">
                             {renderHtmlContent(data.descriptionLong)}
                         </div>
                     </div>
@@ -156,8 +157,8 @@ const BandoView = () => {
 
                     <div className="appPageSection__withBorder">
                         <h2>{__('Documentazione Richiesta', 'gepafin')}</h2>
-                        <div className="row rowContent">
-                            <p>{renderHtmlContent(data.documentationRequested)}</p>
+                        <div className="row rowContent ql-editor">
+                            {renderHtmlContent(data.documentationRequested)}
                         </div>
                     </div>
 
@@ -191,9 +192,9 @@ const BandoView = () => {
                             {data.faq
                                 .filter(o => o.isVisible)
                                 .map((o, i) => <AccordionTab key={i} header={renderHtmlContent(o.value)}>
-                                <p>
+                                <div className="ql-editor">
                                     {renderHtmlContent(o.response)}
-                                </p>
+                                </div>
                             </AccordionTab>)}
                         </Accordion>
                     </div>
diff --git a/src/pages/BandoViewBeneficiario/index.js b/src/pages/BandoViewBeneficiario/index.js
index cd0ecc8..1505dd5 100644
--- a/src/pages/BandoViewBeneficiario/index.js
+++ b/src/pages/BandoViewBeneficiario/index.js
@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import { __ } from '@wordpress/i18n';
 import { useNavigate, useParams } from 'react-router-dom';
 import { is, isEmpty, isNil } from 'ramda';
+import "quill/dist/quill.core.css";
 
 // store
 import { storeSet, useStore } from '../../store';
@@ -268,7 +269,7 @@ const BandoViewBeneficiario = () => {
 
                     <div className="appPageSection__withBorder">
                         <h2>{__('Descrizione breve', 'gepafin')}</h2>
-                        <div className="row rowContent">
+                        <div className="row rowContent ql-editor">
                             {renderHtmlContent(data.descriptionShort)}
                         </div>
                     </div>
@@ -303,7 +304,7 @@ const BandoViewBeneficiario = () => {
 
                     <div className="appPageSection__withBorder">
                         <h2>{__('Descrizione dettagliata', 'gepafin')}</h2>
-                        <div className="row rowContent">
+                        <div className="row rowContent ql-editor">
                             {renderHtmlContent(data.descriptionLong)}
                         </div>
                     </div>
@@ -321,8 +322,8 @@ const BandoViewBeneficiario = () => {
 
                     <div className="appPageSection__withBorder">
                         <h2>{__('Documentazione Richiesta', 'gepafin')}</h2>
-                        <div className="row rowContent">
-                            <p>{renderHtmlContent(data.documentationRequested)}</p>
+                        <div className="row rowContent ql-editor">
+                            {renderHtmlContent(data.documentationRequested)}
                         </div>
                     </div>
 
@@ -356,9 +357,9 @@ const BandoViewBeneficiario = () => {
                             {data.faq
                                 .filter(o => o.isVisible)
                                 .map((o, i) => <AccordionTab key={i} header={renderHtmlContent(o.value)}>
-                                    <p>
+                                    <div className="ql-editor">
                                         {renderHtmlContent(o.response)}
-                                    </p>
+                                    </div>
                                 </AccordionTab>)}
                         </Accordion>
                     </div>