Improvment: Rich text editor for the events description- EXO-73526 (#687

) - Added rich editor to the event description. - Ensured the new formatted description displays correctly when viewed on the platform and in programs after importing the ICS file. - Added try-catch block in email notif template to handle cases where the conference variable is not binded to ensure that the template does not throw a MissingPropertyException.
exoplatform · Oct 2, 2024 · 6172c3d · 6172c3d
1 parent 103a80c
commit 6172c3d
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 8 deletions.
diff --git a/agenda-services/src/main/resources/db/changelog/agenda-rdbms.db.changelog.xml b/agenda-services/src/main/resources/db/changelog/agenda-rdbms.db.changelog.xml
@@ -403,4 +403,11 @@
       <column name="SERVER_URL" type="NVARCHAR(1000)" />
     </addColumn>
   </changeSet>
+
+  <changeSet author="agenda" id="1.0.0-34">
+    <sql>
+      ALTER TABLE EXO_AGENDA_EVENT MODIFY DESCRIPTION TEXT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
+    </sql>
+  </changeSet>
+
 </databaseChangeLog>
diff --git a/...pps/src/main/webapp/WEB-INF/conf/agenda/templates/notification/mail/EventMailPlugin.gtmpl b/...pps/src/main/webapp/WEB-INF/conf/agenda/templates/notification/mail/EventMailPlugin.gtmpl
@@ -213,6 +213,7 @@
                                             <td style="color:#999999; font-size:13px;font-family:HelveticaNeue,arial,tahoma,serif; font-weight:bold"><%=_ctx.appRes("Notification.agenda.event.attendees")%></td>
                                             <td align="left"><%= attendees %></td>
                                         </tr>
+                                        <% try { %>
                                         <% if (conference != null) { %>
                                           <tr>
                                               <td style="color:#999999; font-size:13px;font-family:HelveticaNeue,arial,tahoma,serif; font-weight:bold"><%=_ctx.appRes("Notification.agenda.event.webconference")%></td>
@@ -222,6 +223,8 @@
                                               </td>
                                           </tr>
                                         <% } %>
+                                        <% } catch (MissingPropertyException e) { %>
+                                        <% } %>
                                         </tbody>
                                     </table>
                                 <% if (!isGuest) {%>

diff --git a/...pp/vue-app/agenda-common/components/event/date-poll/AgendaEventDatePollDetailsDesktop.vue b/...pp/vue-app/agenda-common/components/event/date-poll/AgendaEventDatePollDetailsDesktop.vue
@@ -8,7 +8,7 @@
         class="event-date-options-table mx-auto">
         <caption>
           <em v-if="event.description">
-            <div class="text-center font-italic subtitle-1 text-wrap pb-4">
+            <div v-sanitized-html="event.description" class="text-center font-italic subtitle-1 text-wrap pb-4 rich-editor-content">
               {{ event.description }}
             </div>
           </em>

diff --git a/...in/webapp/vue-app/agenda-common/components/event/form/AgendaEventFormBasicInformation.vue b/...in/webapp/vue-app/agenda-common/components/event/form/AgendaEventFormBasicInformation.vue
@@ -69,13 +69,14 @@
           <v-flex class="flex-grow-0">
             <i class="uiIconDescription darkGreyIcon uiIcon32x32 my-3 me-11"></i>
           </v-flex>
-          <extended-textarea
+          <rich-editor
             id="eventDescription"
             ref="eventDescription"
             v-model="event.description"
             :placeholder="$t('agenda.descriptionPlaceholder')"
             :max-length="eventDescriptionTextLength"
-            class="pt-2" />
+            :tag-enabled="true"
+            class="pt-2 width-full"/>
         </div>
       </div>
       <div class="d-none d-md-flex flex-column mx-5 event-form-body-divider ">

diff --git a/...da-webapps/src/main/webapp/vue-app/agenda-common/components/event/view/AgendaEventIcs.vue b/...da-webapps/src/main/webapp/vue-app/agenda-common/components/event/view/AgendaEventIcs.vue
@@ -39,6 +39,12 @@ export default {
         return date ? `${new Date(date).toISOString().replace(/[-:]/g, '').split('.')[0]}Z` : '';
       };
 
+      const replaceHtmlTags = (html) => {
+        html = html.replace(/<a\s+href="([^"]+)"[^>]*>(.*?)<\/a>/gi, '$2 ($1)');
+        html = html.replace(/<\/?[^>]+(>|$)/g, '');
+        html = html.replace(/\n{2,}/g, '\n').trim();
+        return html;
+      };
       const foldLine = (line) => {
         const maxLength = 70;
         if (line.length <= maxLength) { return line; }
@@ -50,15 +56,37 @@ export default {
         return result + line;
       };
 
+      const foldDescription = (text) => {
+        const maxLength = 60;
+        const lines = text.split('\n');
+        let result = '';
+        lines.forEach(line => {
+          let currentLine = '';
+          const words = line.split(' ');
+          words.forEach(word => {
+            if (currentLine.length + word.length + 1 > maxLength) {
+              result += `${currentLine.trim()}\n`;
+              currentLine = `${word} `;
+            } else {
+              currentLine += `${word} `;
+            }
+          });
+
+          result += `${currentLine.trim()}\n`;
+        });
+        return result.trim();
+      };
+
       const confurl = (event.conferences && event.conferences.length > 0) ? event.conferences[0].url : '';
       const htmlDescription = `<html><body>${this.$t('agenda.invitationText')} <b>${event.creator.dataEntity.profile.fullname}</b> ${this.$t('agenda.inSpace')} <b>${event.calendar.title}.</b>
       ${confurl ? `<br><b>${this.$t('agenda.visioLink')}</b> <a href="${confurl}">${confurl}</a>` : ''}
       ${event.description ? `<br><br><b>${this.$t('agenda.eventDetail')}</b><br>${event.description}</body></html>` : ''}
       `.replace(/\\/g, '\\\\').replace(/;/g, '\\;').replace(/,/g, '\\,').replace(/\n/g, '\\n');
 
+      const plainTextEventDescription = event.description ? replaceHtmlTags(event.description) : '';
       const plainTextDescription = `${this.$t('agenda.invitationText')} ${event.creator.dataEntity.profile.fullname} ${this.$t('agenda.inSpace')} ${event.calendar.title}.
       ${confurl ? `${this.$t('agenda.visioLink')} ${confurl}` : ''}
-      ${event.description ? `\n${this.$t('agenda.eventDetail')}\n${event.description}` : ''}
+      ${event.description ? `\n${this.$t('agenda.eventDetail')}\n${foldDescription(plainTextEventDescription)}` : ''}
       `.replace(/\\/g, '\\\\').replace(/;/g, '\\;').replace(/,/g, '\\,').replace(/\n/g, '\\n');
 
       const brandingInformation = await this.$brandingService.getBrandingInformation();
@@ -81,7 +109,13 @@ export default {
         `ORGANIZER;CN=${event.creator.dataEntity.profile.fullname}:MAILTO:${event.creator.dataEntity.profile.email}\r\n` +
         'END:VEVENT\r\n' +
         'END:VCALENDAR\r\n';
-      return icsContent.split('\r\n').map(foldLine).join('\r\n');
+
+      const processAndFoldText = (text) => {
+        const lines = text.split('\n');
+        const foldedLines = lines.map(line => foldLine(line)).join('\n');
+        return foldedLines;
+      };
+      return processAndFoldText(icsContent);
     },
     async downloadICS() {
       const icsContent = await this.generateICS(this.event);

diff --git a/...s/src/main/webapp/vue-app/agenda-common/components/event/view/AgendaEventsDetailsBody.vue b/...s/src/main/webapp/vue-app/agenda-common/components/event/view/AgendaEventsDetailsBody.vue
@@ -104,7 +104,7 @@
         </div>
         <div v-if="event.description" class="event-description d-flex flex-grow-0 flex-shrink-1 pb-5">
           <i class="uiIconDescription darkGreyIcon uiIcon32x32 pe-5"></i>
-          <span v-autolinker:[autolinkerArgs]="event.description" class="mt-1 align-self-center text-wrap text-left text-break"></span>
+          <span v-sanitized-html="event.description" class="mt-1 me-4 align-self-center text-wrap text-left text-break rich-editor-content"></span>
         </div>
         <div
           v-if="event.attachments && event.attachments.length !== 0"
@@ -192,6 +192,11 @@ export default {
     };
   },
   computed: {
+  /*  bodyElement() {
+      return {
+        template: this.ExtendedDomPurify.purify(`<div>${this.body}</div>`) || '',
+      };
+    },*/
     connectedConnector() {
       return this.connectors && this.connectors.find(connector => connector.connected);
     },

diff --git a/...ebapp/vue-app/agenda-common/components/remote-event/AgendaConnectorContemporaryEvents.vue b/...ebapp/vue-app/agenda-common/components/remote-event/AgendaConnectorContemporaryEvents.vue
@@ -19,7 +19,7 @@
             class="icon-small-size">
             {{ connectedConnectorUser }}
           </a>
-          <a
+          <div
             v-else
             class="text-subtitle d-block">
             <div>
@@ -32,7 +32,7 @@
                 {{ $t('agenda.connect') }}
               </v-btn>
            </div>
-          </a>
+          </div>
         </div>
         <template v-if="loading || connectedConnectorLoading">
           <v-progress-linear indeterminate />