- fixed displaying of quill editor content on the pages;

This commit is contained in:
Vitalii Kiiko
2024-10-28 09:05:35 +01:00
parent 54391eba77
commit 455e4534d1
6 changed files with 25 additions and 16 deletions

View File

@@ -23,6 +23,7 @@
"primeicons": "7.0.0", "primeicons": "7.0.0",
"primereact": "10.8.4", "primereact": "10.8.4",
"quill": "2.0.2", "quill": "2.0.2",
"quill-delta-to-html": "^0.12.1",
"ramda": "0.30.1", "ramda": "0.30.1",
"react": "18.3.1", "react": "18.3.1",
"react-dnd": "16.0.1", "react-dnd": "16.0.1",

View File

@@ -234,7 +234,7 @@
} }
.appForm__content { .appForm__content {
p { /*p {
margin: 0; margin: 0;
&.ql-indent-1 { &.ql-indent-1 {
@@ -271,7 +271,7 @@
li[data-list="bullet"] { li[data-list="bullet"] {
list-style: disc; list-style: disc;
} }*/
} }
.appForm__delegaForm { .appForm__delegaForm {

View File

@@ -4,6 +4,7 @@ import { useParams } from 'react-router-dom';
import { head, is, pluck, isEmpty } from 'ramda'; import { head, is, pluck, isEmpty } from 'ramda';
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
import { TZDate } from '@date-fns/tz'; import { TZDate } from '@date-fns/tz';
import "quill/dist/quill.core.css";
// store // store
import { storeSet, useStore } from '../../store'; import { storeSet, useStore } from '../../store';
@@ -489,7 +490,9 @@ const BandoApplication = () => {
//console.log('validations', validations, o.name) //console.log('validations', validations, o.name)
return ['paragraph'].includes(o.name) && text 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 : <FormField
key={o.id} key={o.id}
type={o.name} type={o.name}

View File

@@ -4,6 +4,7 @@ import { useNavigate, useParams } from 'react-router-dom';
import { klona } from 'klona'; import { klona } from 'klona';
import { head, isNil } from 'ramda'; import { head, isNil } from 'ramda';
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
import "quill/dist/quill.core.css";
// store // store
import { storeSet, useStore } from '../../store'; import { storeSet, useStore } from '../../store';
@@ -154,7 +155,9 @@ const BandoFormsPreview = () => {
}, {}); }, {});
return ['paragraph'].includes(o.name) && text 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 : <FormField
key={o.id} key={o.id}
type={o.name} type={o.name}

View File

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import { useNavigate, useParams } from 'react-router-dom'; import { useNavigate, useParams } from 'react-router-dom';
import { is, isEmpty, isNil } from 'ramda'; import { is, isEmpty, isNil } from 'ramda';
import "quill/dist/quill.core.css";
// store // store
import { storeSet, useStore } from '../../store'; import { storeSet, useStore } from '../../store';
@@ -103,7 +104,7 @@ const BandoView = () => {
<div className="appPageSection__withBorder"> <div className="appPageSection__withBorder">
<h2>{__('Descrizione breve', 'gepafin')}</h2> <h2>{__('Descrizione breve', 'gepafin')}</h2>
<div className="row rowContent"> <div className="row rowContent ql-editor">
{renderHtmlContent(data.descriptionShort)} {renderHtmlContent(data.descriptionShort)}
</div> </div>
</div> </div>
@@ -138,7 +139,7 @@ const BandoView = () => {
<div className="appPageSection__withBorder"> <div className="appPageSection__withBorder">
<h2>{__('Descrizione dettagliata', 'gepafin')}</h2> <h2>{__('Descrizione dettagliata', 'gepafin')}</h2>
<div className="row rowContent"> <div className="row rowContent ql-editor">
{renderHtmlContent(data.descriptionLong)} {renderHtmlContent(data.descriptionLong)}
</div> </div>
</div> </div>
@@ -156,8 +157,8 @@ const BandoView = () => {
<div className="appPageSection__withBorder"> <div className="appPageSection__withBorder">
<h2>{__('Documentazione Richiesta', 'gepafin')}</h2> <h2>{__('Documentazione Richiesta', 'gepafin')}</h2>
<div className="row rowContent"> <div className="row rowContent ql-editor">
<p>{renderHtmlContent(data.documentationRequested)}</p> {renderHtmlContent(data.documentationRequested)}
</div> </div>
</div> </div>
@@ -191,9 +192,9 @@ const BandoView = () => {
{data.faq {data.faq
.filter(o => o.isVisible) .filter(o => o.isVisible)
.map((o, i) => <AccordionTab key={i} header={renderHtmlContent(o.value)}> .map((o, i) => <AccordionTab key={i} header={renderHtmlContent(o.value)}>
<p> <div className="ql-editor">
{renderHtmlContent(o.response)} {renderHtmlContent(o.response)}
</p> </div>
</AccordionTab>)} </AccordionTab>)}
</Accordion> </Accordion>
</div> </div>

View File

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import { useNavigate, useParams } from 'react-router-dom'; import { useNavigate, useParams } from 'react-router-dom';
import { is, isEmpty, isNil } from 'ramda'; import { is, isEmpty, isNil } from 'ramda';
import "quill/dist/quill.core.css";
// store // store
import { storeSet, useStore } from '../../store'; import { storeSet, useStore } from '../../store';
@@ -268,7 +269,7 @@ const BandoViewBeneficiario = () => {
<div className="appPageSection__withBorder"> <div className="appPageSection__withBorder">
<h2>{__('Descrizione breve', 'gepafin')}</h2> <h2>{__('Descrizione breve', 'gepafin')}</h2>
<div className="row rowContent"> <div className="row rowContent ql-editor">
{renderHtmlContent(data.descriptionShort)} {renderHtmlContent(data.descriptionShort)}
</div> </div>
</div> </div>
@@ -303,7 +304,7 @@ const BandoViewBeneficiario = () => {
<div className="appPageSection__withBorder"> <div className="appPageSection__withBorder">
<h2>{__('Descrizione dettagliata', 'gepafin')}</h2> <h2>{__('Descrizione dettagliata', 'gepafin')}</h2>
<div className="row rowContent"> <div className="row rowContent ql-editor">
{renderHtmlContent(data.descriptionLong)} {renderHtmlContent(data.descriptionLong)}
</div> </div>
</div> </div>
@@ -321,8 +322,8 @@ const BandoViewBeneficiario = () => {
<div className="appPageSection__withBorder"> <div className="appPageSection__withBorder">
<h2>{__('Documentazione Richiesta', 'gepafin')}</h2> <h2>{__('Documentazione Richiesta', 'gepafin')}</h2>
<div className="row rowContent"> <div className="row rowContent ql-editor">
<p>{renderHtmlContent(data.documentationRequested)}</p> {renderHtmlContent(data.documentationRequested)}
</div> </div>
</div> </div>
@@ -356,9 +357,9 @@ const BandoViewBeneficiario = () => {
{data.faq {data.faq
.filter(o => o.isVisible) .filter(o => o.isVisible)
.map((o, i) => <AccordionTab key={i} header={renderHtmlContent(o.value)}> .map((o, i) => <AccordionTab key={i} header={renderHtmlContent(o.value)}>
<p> <div className="ql-editor">
{renderHtmlContent(o.response)} {renderHtmlContent(o.response)}
</p> </div>
</AccordionTab>)} </AccordionTab>)}
</Accordion> </Accordion>
</div> </div>