From 6a1afb287541059b7a14bf9e7c257c99d96fefee Mon Sep 17 00:00:00 2001
From: Helmi Akermi <70575401+hakermi@users.noreply.github.com>
Date: Mon, 18 Nov 2024 10:37:19 +0100
Subject: [PATCH] feat: Implement publish note - EXO-73041 - Meeds-io/MIPs#161
 (#1212)

Implement publish note

feat: Add feature flag for publish note option - EXO-73041 - Meeds-io/MIPs#161 (#1219)

Add feature flag for publish note optio

fix: Fix enable condition of delete and import/export action menu options - EXO-73041 - Meeds-io/MIPs#161

fix enable condition of delete/import/export action menu options

feat: Refactor publish note option integration - EXO-73041 - Meeds-io/Meeds#161 (#1220)

Refactor publish note option integration
---
 .../portlet/notes/notesPortlet_en.properties  |   3 +
 .../portlet/notes/notesPortlet_fr.properties  |   3 +
 .../conf/wiki/feature-flags-configuration.xml |  53 +++++++
 .../main/webapp/WEB-INF/gatein-resources.xml  |   6 +
 .../webui/workspace/UINotesHeadTemplate.gtmpl |  11 ++
 .../components/NotePublicationDrawer.vue      |   9 +-
 .../NotePublicationAdvancedOption.vue         |   5 +
 .../schedule-option/NoteScheduleOption.vue    |  25 +++-
 .../components/NoteFullRichEditor.vue         |   2 +-
 .../vue-app/notes-rich-editor/js/Utils.js     |  30 ++++
 .../notes/components/NoteBreadcrumb.vue       |   1 +
 .../notes/components/NoteTreeviewDrawer.vue   |   1 +
 .../notes/components/NotesOverview.vue        | 119 ++++++++++++---
 .../components/menu/NotesActionMenuItems.vue  | 136 ++++--------------
 .../components/menu/NotesActionsMenu.vue      |   7 +-
 .../components/menu/NotesMobileActionMenu.vue |   3 +-
 .../main/webapp/vue-app/notes/extensions.js   |  76 ++++++++++
 .../webapp/vue-app/notes/initComponents.js    |   4 +-
 .../src/main/webapp/vue-app/notes/main.js     |   3 +-
 19 files changed, 355 insertions(+), 142 deletions(-)
 create mode 100644 notes-webapp/src/main/webapp/WEB-INF/conf/wiki/feature-flags-configuration.xml
 create mode 100644 notes-webapp/src/main/webapp/groovy/webui/workspace/UINotesHeadTemplate.gtmpl
 create mode 100644 notes-webapp/src/main/webapp/vue-app/notes/extensions.js

diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_en.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_en.properties
index 687794b17d..bee3b57ae8 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_en.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_en.properties
@@ -105,6 +105,9 @@ notes.publication.schedule.publish.now.tooltip=By scheduling only a end date you
 notes.publication.advanced.option.label=Advanced options
 notes.publication.hide.author.label=Hide author
 notes.publication.hide.reaction.label=Hide reaction
+notes.publication.success.message=Note successfully published
+notes.schedule.success.message=Note scheduled successfully
+notes.publication.externalPage.publish.cancel.label=Cancel publishing
 
 popup.confirm=Confirm
 popup.msg.confirmation=Confirmation
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_fr.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_fr.properties
index 94bf19edf0..feb72e9477 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_fr.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_fr.properties
@@ -104,6 +104,9 @@ notes.publication.schedule.publish.now.tooltip=En programmant uniquement une dat
 notes.publication.advanced.option.label=Options avancées
 notes.publication.hide.author.label=Masquer l'auteur
 notes.publication.hide.reaction.label=Masquer la réaction
+notes.publication.success.message=Note publi\u00E9e avec succ\u00E8s
+notes.schedule.success.message=Note planifi\u00E9 avec succ\u00E8s
+notes.publication.externalPage.publish.cancel.label=Annuler la publication
 
 popup.confirm=Confirmer
 popup.msg.confirmation=Confirmation
diff --git a/notes-webapp/src/main/webapp/WEB-INF/conf/wiki/feature-flags-configuration.xml b/notes-webapp/src/main/webapp/WEB-INF/conf/wiki/feature-flags-configuration.xml
new file mode 100644
index 0000000000..5202dd8bad
--- /dev/null
+++ b/notes-webapp/src/main/webapp/WEB-INF/conf/wiki/feature-flags-configuration.xml
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ * This file is part of the Meeds project (https://meeds.io/).
+ *
+ * Copyright (C) 2024 Meeds Association contact@meeds.io
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+-->
+<configuration xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+               xsi:schemaLocation="http://www.exoplatform.org/xml/ns/kernel_1_3.xsd http://www.exoplatform.org/xml/ns/kernel_1_3.xsd"
+               xmlns="http://www.exoplatform.org/xml/ns/kernel_1_3.xsd">
+    <component>
+        <key>NoteFeatureProperties</key>
+        <type>org.exoplatform.container.ExtendedPropertyConfigurator</type>
+        <init-params>
+            <properties-param>
+                <name>NoteFeatureProperties</name>
+                <description>Note Feature enablement flag</description>
+                <property name="exo.feature.insertImage.enabled"
+                          value="${exo.feature.insertImage.enabled:false}"/>
+                <property name="exo.feature.notePublication.enabled"
+                          value="${exo.feature.notePublication.enabled:false}"/>
+            </properties-param>
+        </init-params>
+    </component>
+    <external-component-plugins>
+        <target-component>org.exoplatform.groovyscript.text.TemplateService</target-component>
+        <component-plugin>
+            <name>UIPortalApplication-head</name>
+            <set-method>addTemplateExtension</set-method>
+            <type>org.exoplatform.groovyscript.text.TemplateExtensionPlugin</type>
+            <init-params>
+                <values-param>
+                    <name>templates</name>
+                    <description>The list of templates to include in HTML Page Header with UIPortalApplication.gtmpl</description>
+                    <value>war:/groovy/webui/workspace/UINotesHeadTemplate.gtmpl</value>
+                </values-param>
+            </init-params>
+        </component-plugin>
+    </external-component-plugins>
+</configuration>
diff --git a/notes-webapp/src/main/webapp/WEB-INF/gatein-resources.xml b/notes-webapp/src/main/webapp/WEB-INF/gatein-resources.xml
index fbb9ee85ed..30e78d4ab6 100644
--- a/notes-webapp/src/main/webapp/WEB-INF/gatein-resources.xml
+++ b/notes-webapp/src/main/webapp/WEB-INF/gatein-resources.xml
@@ -49,6 +49,12 @@
         <minify>false</minify>
         <path>/javascript/notes.bundle.js</path>
       </script>
+      <depends>
+        <module>NotesPublication</module>
+      </depends>
+      <depends>
+        <module>imageCropper</module>
+      </depends>
       <depends>
         <module>html2canvas</module>
       </depends>
diff --git a/notes-webapp/src/main/webapp/groovy/webui/workspace/UINotesHeadTemplate.gtmpl b/notes-webapp/src/main/webapp/groovy/webui/workspace/UINotesHeadTemplate.gtmpl
new file mode 100644
index 0000000000..e9aacd6a2d
--- /dev/null
+++ b/notes-webapp/src/main/webapp/groovy/webui/workspace/UINotesHeadTemplate.gtmpl
@@ -0,0 +1,11 @@
+<%
+  import org.exoplatform.commons.api.settings.ExoFeatureService;
+  def rcontext = _ctx.getRequestContext();
+  ExoFeatureService featureService = uicomponent.getApplicationComponent(ExoFeatureService.class);
+  def userName = rcontext.getRemoteUser();
+%>
+
+<script type="text/javascript" id="NoteHeadScripts">
+    eXo.env.portal.insertImageOptionEnabled = <%=featureService.isFeatureActiveForUser("insertImage", userName)%>;
+    eXo.env.portal.notePublicationEnabled = <%=featureService.isFeatureActiveForUser("notePublication", userName)%>;
+</script>
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-publication/components/NotePublicationDrawer.vue b/notes-webapp/src/main/webapp/vue-app/notes-publication/components/NotePublicationDrawer.vue
index bda62e85b1..db4019ab4c 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-publication/components/NotePublicationDrawer.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-publication/components/NotePublicationDrawer.vue
@@ -342,6 +342,8 @@ export default {
         this.cloneScheduleSettings();
         this.cloneAdvancedSettings();
         this.clonePublicationSettings();
+      } else {
+        this.initSettings();
       }
       this.currentScheduleSettings = structuredClone(this.scheduleSettings);
       this.currentAdvancedSettings = structuredClone(this.advancedSettings);
@@ -400,6 +402,11 @@ export default {
       this.$refs?.scheduleOption?.cancelChanges();
       this.$refs?.advancedOption?.cancelChanges();
     },
+    initSettings() {
+      this.scheduleSettings = {};
+      this.advancedSettings = {};
+      this.publicationSettings = {post: true};
+    },
     reset() {
       setTimeout(() => {
         this.cancelChanges();
@@ -422,7 +429,7 @@ export default {
         return;
       }
       this.$emit('metadata-updated', this.noteObject.properties);
-      this.$emit('publish', this.noteObject, this.publicationSettings);
+      this.$emit('publish', this.publicationSettings, this.noteObject,);
     },
     updateCurrentNoteObjectProperties(properties) {
       this.noteObject.properties.noteId = Number(properties.noteId);
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-publication/components/advanced-option/NotePublicationAdvancedOption.vue b/notes-webapp/src/main/webapp/vue-app/notes-publication/components/advanced-option/NotePublicationAdvancedOption.vue
index a2bfb8e007..7232a10188 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-publication/components/advanced-option/NotePublicationAdvancedOption.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-publication/components/advanced-option/NotePublicationAdvancedOption.vue
@@ -91,6 +91,7 @@ export default {
     },
     initSettings() {
       if (!this.editMode) {
+        this.resetSettings();
         return;
       }
       this.hideAuthor = this.savedAdvancedSettings?.hideAuthor;
@@ -98,6 +99,10 @@ export default {
     },
     cancelChanges() {
       this.initSettings();
+    },
+    resetSettings() {
+      this.hideAuthor = false;
+      this.hideReaction = false;
     }
   }
 };
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-publication/components/schedule-option/NoteScheduleOption.vue b/notes-webapp/src/main/webapp/vue-app/notes-publication/components/schedule-option/NoteScheduleOption.vue
index 1df7e12d1d..139a8803be 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-publication/components/schedule-option/NoteScheduleOption.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-publication/components/schedule-option/NoteScheduleOption.vue
@@ -30,8 +30,17 @@
       :multiple="isMultipleSelectionOption"
       class="d-flex ms-n1 mt-0 pt-0">
       <v-radio
-        :label="cancelOption.label"
-        :value="cancelOption.value" />
+        v-if="fromExternalPage && !hasSavedUnpublishSchedule"
+        :label="$t('notes.publication.externalPage.publish.cancel.label')"
+        :value="CANCEL_SCHEDULE_OPTION" />
+      <v-radio
+        v-else-if="hasSavedUnpublishSchedule"
+        :label="$t('notes.publication.publish.cancel.label')"
+        :value="CANCEL_PUBLICATION_OPTION" />
+      <v-radio
+        v-else
+        :label="$t('notes.publication.schedule.cancel.label')"
+        :value="CANCEL_SCHEDULE_OPTION" />
       <v-tooltip
         v-if="canPublish"
         :disabled="!isMultipleSelectionOption"
@@ -380,6 +389,7 @@ export default {
     },
     initSettings() {
       if (!this.editMode) {
+        this.resetSettings();
         return;
       }
       this.schedule = this.savedScheduleSettings.scheduled;
@@ -491,6 +501,17 @@ export default {
     },
     cancelChanges() {
       this.initSettings();
+    },
+    resetSettings() {
+      this.schedule = false;
+      this.savedScheduleSettings = {};
+      const {startDate, minStartDate, endDate} = this.initDateValues();
+      this.startDate = startDate;
+      this.endDate = endDate;
+      this.minStartDate = minStartDate;
+      this.minEndDate = minStartDate;
+      this.endTime = '18:00';
+      this.startTime= '08:00';
     }
   }
 };
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteFullRichEditor.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteFullRichEditor.vue
index 675b9e0cae..230c8db759 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteFullRichEditor.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteFullRichEditor.vue
@@ -402,7 +402,7 @@ export default {
       }
       this.postAndPublishNote();
     },
-    postAndPublishNote(note, publicationSettings) {
+    postAndPublishNote(publicationSettings, note) {
       if (this.newPublicationDrawerEnabled) {
         this.noteObject = note;
         this.updateData();
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/js/Utils.js b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/js/Utils.js
index 96dc12934e..672d92180d 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/js/Utils.js
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/js/Utils.js
@@ -155,3 +155,33 @@ export function isSameContent(content, originalContent) {
 function getString(body) {
   return new DOMParser().parseFromString(body, 'text/html').documentElement.textContent.replace(/&nbsp;/g, '').trim();
 }
+
+export function sanitizeSrcImageTags(content) {
+  if (!content) {
+    return content;
+  }
+  const regex = /(<img[^>]*?)(\s+src="data:image\/[^;]+;base64,[^"]*")/g;
+  content = content.replace(regex, '$1');
+  return content;
+}
+
+export function isHasImagesToBeProcessed(htmlStringContent, objectType) {
+  // Parse the HTML content
+  const parser = new DOMParser();
+  const document = parser.parseFromString(htmlStringContent, 'text/html');
+
+  const imgTags = document.querySelectorAll('img');
+  const prefix = '/portal/rest/v1/social/attachments/';
+
+  for (const imgTag of imgTags) {
+    const src = imgTag.getAttribute('src');
+    if (src?.startsWith?.(prefix)) {
+      const srcPart = src.substring(prefix.length);
+      const sourceObject = srcPart.substring(0, srcPart.indexOf('/'));
+      if (sourceObject !== objectType) {
+        return true;
+      }
+    }
+  }
+  return htmlStringContent.includes('cke_upload_id=');
+}
diff --git a/notes-webapp/src/main/webapp/vue-app/notes/components/NoteBreadcrumb.vue b/notes-webapp/src/main/webapp/vue-app/notes/components/NoteBreadcrumb.vue
index 7cc648d9fb..fe432dc79f 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes/components/NoteBreadcrumb.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes/components/NoteBreadcrumb.vue
@@ -134,6 +134,7 @@ export default {
     openNote(note) {
       if (note.noteId !== this.actualNoteId ) {
         this.$emit('open-note',note.id);
+        document.dispatchEvent(new CustomEvent('note-navigation-updated', {detail: note}));
       }
     }
   }
diff --git a/notes-webapp/src/main/webapp/vue-app/notes/components/NoteTreeviewDrawer.vue b/notes-webapp/src/main/webapp/vue-app/notes/components/NoteTreeviewDrawer.vue
index 782b157e92..0eb7579c36 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes/components/NoteTreeviewDrawer.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes/components/NoteTreeviewDrawer.vue
@@ -701,6 +701,7 @@ export default {
           this.$root.$emit('open-note-by-name', noteName, note.draftPage);
           this.$refs.breadcrumbDrawer.close();
         }
+        document.dispatchEvent(new CustomEvent('note-navigation-updated', {detail: note}));
       } else {
         this.$refs.breadcrumbDrawer.close();
       }
diff --git a/notes-webapp/src/main/webapp/vue-app/notes/components/NotesOverview.vue b/notes-webapp/src/main/webapp/vue-app/notes/components/NotesOverview.vue
index dd1d2aac7b..168830ba06 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes/components/NotesOverview.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes/components/NotesOverview.vue
@@ -279,15 +279,23 @@
         </a>
       </div>
     </div>
+    <exo-confirm-dialog
+      ref="DeleteNoteDialog"
+      :message="confirmMessage"
+      :title="hasDraft ? $t('popup.confirmation.delete.draft') : $t('popup.confirmation.delete')"
+      :ok-label="$t('notes.button.delete')"
+      :cancel-label="$t('notes.button.cancel')"
+      persistent
+      @ok="deleteNote()"
+      @dialog-opened="$emit('confirmDialogOpened')"
+      @dialog-closed="$emit('confirmDialogClosed')" />
     <notes-actions-menu
       v-if="!isMobile"
-      :note="note"
-      :default-path="defaultPath" />
+      :note="note" />
     <notes-mobile-action-menu
       v-else
       ref="notesMobileActionMenu"
-      :note="note"
-      :default-path="defaultPath" />
+      :note="note" />
     <note-treeview-drawer
       ref="notesBreadcrumb" 
       :selected-translation="selectedTranslation.value" />
@@ -301,21 +309,29 @@
       ref="noteVersionsHistoryDrawer" />
     <note-import-drawer
       ref="noteImportDrawer" />
-    <exo-confirm-dialog
-      ref="DeleteNoteDialog"
-      :message="confirmMessage"
-      :title="hasDraft ? $t('popup.confirmation.delete.draft') : $t('popup.confirmation.delete')"
-      :ok-label="$t('notes.button.delete')"
-      :cancel-label="$t('notes.button.cancel')"
-      persistent
-      @ok="deleteNote()"
-      @dialog-opened="$emit('confirmDialogOpened')"
-      @dialog-closed="$emit('confirmDialogClosed')" />
+    <note-featured-image-drawer
+      ref="featuredImageDrawer"
+      :note="note"
+      :has-featured-image="hasFeaturedImage" />
+    <note-publication-target-drawer />
+    <note-publication-drawer
+      v-if="newPublicationDrawerEnabled"
+      ref="publicationDrawer"
+      :has-featured-image="hasFeaturedImage"
+      :is-publishing="isPublishing"
+      :params="{
+        spaceId: spaceId,
+        allowedTargets: publishTargets,
+        canPublish: canPublish,
+        canSchedule: canScheduleNotePublication
+      }"
+      :edit-mode="published"
+      @publish="publishNote" />
   </v-app>
 </template>
 <script>
 
-import { notesConstants } from '../../../javascript/eXo/wiki/notesConstants.js';
+import {notesConstants} from '../../../javascript/eXo/wiki/notesConstants.js';
 import html2canvas from 'html2canvas';
 import JSPDF from 'jspdf';
 
@@ -376,6 +392,11 @@ export default {
       illustrationBaseUrl: `${eXo.env.portal.context}/${eXo.env.portal.rest}/notes/illustration/`,
       initialized: false,
       overviewExtensions: [],
+      isPublishing: false,
+      publishTargets: [],
+      canPublish: false,
+      canSchedule: false,
+      published: false
     };
   },
   watch: {
@@ -413,6 +434,9 @@ export default {
     }
   },
   computed: {
+    newPublicationDrawerEnabled() {
+      return eXo?.env?.portal?.newPublicationDrawerEnabled;
+    },
     extensionParams() {
       return {
         entityId: this.entityId,
@@ -575,6 +599,12 @@ export default {
     appName() {
       const uris = eXo.env.portal.selectedNodeUri.split('/');
       return uris[uris.length - 1];
+    },
+    isNoteAuthor() {
+      return !this.published && this?.note.author === eXo.env.portal.userName;
+    },
+    canScheduleNotePublication() {
+      return this.isNoteAuthor || this.canSchedule || this.canPublish;
     }
   },
   created() {
@@ -637,9 +667,10 @@ export default {
     this.$root.$on('open-note-history', this.openNoteVersionsHistoryDrawer);
     this.$root.$on('open-note-treeview-export', this.openNoteTreeView);
     this.$root.$on('open-note-import-drawer', this.openImportDrawer);
+    this.$root.$on('open-publish-drawer', this.openPublishDrawer);
     document.addEventListener('notes-extensions-updated', this.refreshOverviewExtensions);
+    document.addEventListener('note-published', this.handleNotePublished);
     this.refreshOverviewExtensions();
-
   },
   mounted() {
     this.handleChangePages();
@@ -648,9 +679,49 @@ export default {
     });
   },
   methods: {
+    publishNote(publicationSettings, note) {
+      const scheduleSettings = publicationSettings?.scheduleSettings;
+      const noteArticle = structuredClone(note || this.note);
+      noteArticle.schedulePostDate = scheduleSettings?.postDate;
+      noteArticle.scheduleUnpublishDate = scheduleSettings?.unpublishDate;
+      noteArticle.activityPosted = publicationSettings?.post;
+      noteArticle.published = publicationSettings?.publish;
+      noteArticle.targets = publicationSettings?.selectedTargets;
+      noteArticle.audience = publicationSettings?.selectedAudience;
+      this.isPublishing = true;
+      if (note) {
+        this.$notesService.updateNoteById(note).then(() => {
+          document.dispatchEvent(new CustomEvent('publish-note', {
+            detail: {
+              editPublication: false,
+              article: noteArticle
+            }
+          }));
+        });
+      } else {
+        document.dispatchEvent(new CustomEvent('publish-note', {
+          detail: {
+            editPublication: true,
+            article: noteArticle,
+            scheduleSettings: scheduleSettings,
+          }
+        }));
+      }
+    },
+    openPublishDrawer(publicationParams) {
+      const savedSettings = publicationParams?.savedSettings;
+      this.published = !!savedSettings;
+      this.publishTargets = publicationParams.targets;
+      this.canPublish = publicationParams?.canPublish;
+      this.canSchedule = publicationParams?.canSchedule;
+      this.note = Object.assign(this.note, savedSettings);
+      setTimeout(() => {
+        this.$refs.publicationDrawer.open(this.note);
+      },200);
+    },
     closeMobileActionMenu() {
       setTimeout(() => {
-        this.$refs.notesMobileActionMenu.close();
+        this.$refs.notesMobileActionMenu?.close();
       }, 200);
     },
     openNoteTreeView(note, action) {
@@ -1010,6 +1081,7 @@ export default {
     openNoteChild(item) {
       const noteName = item.path.split('%2F').pop();
       this.$root.$emit('open-note-by-name', noteName);
+      document.dispatchEvent(new CustomEvent('note-navigation-updated', {detail: item}));
     },
     updateNote(noteParam) {
       const note = {
@@ -1102,6 +1174,19 @@ export default {
     },
     refreshOverviewExtensions() {
       this.overviewExtensions = extensionRegistry.loadComponents('NotesOverview') || [];
+    },
+    handleNotePublished(event) {
+      const {editPublication, isPublishSchedule, link} = event.detail;
+      this.isPublishing = false;
+      this.$refs.publicationDrawer.close();
+      document.dispatchEvent(new CustomEvent('alert-message-html', {detail: {
+        alertType: 'success',
+        alertMessage: isPublishSchedule && this.$t('notes.schedule.success.message')
+                                   || editPublication && this.$t('notes.publication.settings.update.success')
+                                   || this.$t('notes.publication.success.message'),
+        alertLink: link,
+        alertLinkText: this.$t('notes.view.label')
+      }}));
     }
   }
 };
diff --git a/notes-webapp/src/main/webapp/vue-app/notes/components/menu/NotesActionMenuItems.vue b/notes-webapp/src/main/webapp/vue-app/notes/components/menu/NotesActionMenuItems.vue
index 0ec75e083a..ede8380789 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes/components/menu/NotesActionMenuItems.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes/components/menu/NotesActionMenuItems.vue
@@ -21,93 +21,18 @@
 <template>
   <v-list class="py-0 text-no-wrap width-fit-content">
     <v-list-item
-      v-if="note?.canView"
-      class="ps-2 pe-4 action-menu-item draftButton"
-      @click="copyLink">
+      v-for="extension in filteredExtensions"
+      :key="extension.id"
+      :class="extension.cssClass"
+      @click="handleAction(extension)">
       <v-icon
         size="16"
+        :class="extension?.iconCssClass"
         class="clickable icon-menu">
-        fas fa-link
+        {{ extension?.icon }}
       </v-icon>
       <span class="text-color">
-        {{ $t('notes.menu.label.copyLink') }}
-      </span>
-    </v-list-item>
-    <v-list-item
-      v-if="note?.canView"
-      class="ps-2 pe-4 noteExportPdf action-menu-item draftButton"
-      @click="exportPdf">
-      <v-icon
-        size="16"
-        class="clickable icon-menu">
-        fas fa-file-pdf
-      </v-icon>
-      <span class="text-color">
-        {{ $t('notes.menu.label.exportPdf') }}
-      </span>
-    </v-list-item>
-    <v-list-item
-      class="ps-2 pe-4 action-menu-item draftButton"
-      @click="openNoteHistory">
-      <v-icon
-        size="16"
-        class="clickable icon-menu">
-        fas fa-history
-      </v-icon>
-      <span class="text-color">
-        {{ $t('notes.menu.label.noteHistory') }}
-      </span>
-    </v-list-item>
-    <v-list-item
-      v-if="!homePage && note.canManage"
-      class="ps-2 pe-4 action-menu-item draftButton"
-      @click="openTreeView('movePage')">
-      <v-icon
-        size="16"
-        class="clickable icon-menu">
-        fas fa-arrows-alt
-      </v-icon>
-      <span class="text-color">
-        {{ $t('notes.menu.label.movePage') }}
-      </span>
-    </v-list-item>
-    <v-list-item
-      v-if="homePage"
-      class="ps-2 pe-4 action-menu-item draftButton"
-      @click="openTreeView('exportNotes')">
-      <v-icon
-        size="16"
-        class="clickable icon-menu">
-        fas fa-sign-in-alt
-      </v-icon>
-      <span class="text-color">
-        {{ $t('notes.menu.label.export') }}
-      </span>
-    </v-list-item>
-    <v-list-item
-      v-if="homePage && note?.canImport"
-      class="ps-2 pe-4 action-menu-item draftButton"
-      @click="openImportDrawer">
-      <v-icon
-        size="16"
-        class="clickable icon-menu">
-        fas fa-sign-out-alt
-      </v-icon>
-      <span class="text-color">
-        {{ $t('notes.menu.label.import') }}
-      </span>
-    </v-list-item>
-    <v-list-item
-      v-if="!homePage && note?.canManage"
-      class="red--text ps-2 pe-4 action-menu-item draftButton"
-      @click="deleteNote">
-      <v-icon
-        size="16"
-        class="delete-option-color clickable icon-menu">
-        fas fa-trash
-      </v-icon>
-      <span class="delete-option-color">
-        {{ $t('notes.menu.label.delete') }}
+        {{ $t(extension.labelKey) }}
       </span>
     </v-list-item>
   </v-list>
@@ -115,46 +40,35 @@
 
 <script>
 export default {
+  data() {
+    return {
+      extensions: []
+    };
+  },
   props: {
     note: {
       type: Object,
       default: () => null,
-    },
-    defaultPath: {
-      type: String,
-      default: () => 'Home',
     }
   },
   computed: {
-    homePage(){
-      return !this.note.parentPageId;
+    filteredExtensions() {
+      return this.extensions.filter(extension => extension.enabled(this.note));
     }
   },
+  created() {
+    this.refreshMenuExtensions();
+  },
   methods: {
-    exportPdf() {
-      this.$root.$emit('note-export-pdf', this.note);
-    },
-    openTreeView(action) {
-      this.$root.$emit('open-note-treeview', this.note, action);
-    },
-    openNoteHistory() {
-      this.$root.$emit('open-note-history', this.note);
-    },
-    openImportDrawer() {
-      this.$root.$emit('open-note-import-drawer');
-    },
-    deleteNote() {
-      this.$root.$emit('delete-note', this.note);
+    refreshMenuExtensions() {
+      this.extensions = extensionRegistry.loadExtensions('NotesMenu', 'menuActionMenu');
     },
-    copyLink() {
-      const inputTemp = $('<input>');
-      const path = `${window.location.origin}${this.note.url}`;
-      $('body').append(inputTemp);
-      inputTemp.val(path).select();
-      document.execCommand('copy');
-      inputTemp.remove();
-      this.$root.$emit('show-alert', {type: 'success',message: this.$t('notes.alert.success.label.linkCopied')});
-      this.$root.$emit('close-action-menu');
+    handleAction(extension) {
+      if (extension?.action) {
+        extension.action(this);
+      } else {
+        this.$root.$emit(extension.actionEvent, this.note, extension.id);
+      }
     }
   },
 };
diff --git a/notes-webapp/src/main/webapp/vue-app/notes/components/menu/NotesActionsMenu.vue b/notes-webapp/src/main/webapp/vue-app/notes/components/menu/NotesActionsMenu.vue
index 0de84c71f4..2bdcab09a1 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes/components/menu/NotesActionsMenu.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes/components/menu/NotesActionsMenu.vue
@@ -29,8 +29,7 @@
     offset-y
     left>
     <notes-action-menu-items
-      :note="note"
-      :default-path="defaultPath" />
+      :note="note" />
   </v-menu>
 </template>
 <script>
@@ -45,10 +44,6 @@ export default {
     note: {
       type: Object,
       default: () => null,
-    },
-    defaultPath: {
-      type: String,
-      default: () => 'Home',
     }
   },
   created() {
diff --git a/notes-webapp/src/main/webapp/vue-app/notes/components/menu/NotesMobileActionMenu.vue b/notes-webapp/src/main/webapp/vue-app/notes/components/menu/NotesMobileActionMenu.vue
index 0642c26c04..7954f2f04e 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes/components/menu/NotesMobileActionMenu.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes/components/menu/NotesMobileActionMenu.vue
@@ -25,8 +25,7 @@
     :bottom="true">
     <template slot="content">
       <notes-action-menu-items
-        :note="note"
-        :default-path="defaultPath" />
+        :note="note" />
     </template>
   </exo-drawer>
 </template>
diff --git a/notes-webapp/src/main/webapp/vue-app/notes/extensions.js b/notes-webapp/src/main/webapp/vue-app/notes/extensions.js
new file mode 100644
index 0000000000..6efba810af
--- /dev/null
+++ b/notes-webapp/src/main/webapp/vue-app/notes/extensions.js
@@ -0,0 +1,76 @@
+extensionRegistry.registerExtension('NotesMenu', 'menuActionMenu', {
+  id: 'copyLink',
+  labelKey: 'notes.menu.label.copyLink',
+  icon: 'fas fa-link',
+  sortable: true,
+  cssClass: 'ps-2 pe-4 action-menu-item',
+  rank: 10,
+  enabled: (note) => note?.canView,
+  action: (vm) => {
+    navigator.clipboard.writeText(`${window.location.origin}${vm.note.url}`).then(() => {
+      vm.$root.$emit('show-alert', {type: 'success', message: vm.$t('notes.alert.success.label.linkCopied')});
+      vm.$root.$emit('close-action-menu');
+    });
+  }
+});
+extensionRegistry.registerExtension('NotesMenu', 'menuActionMenu', {
+  id: 'exportPdf',
+  labelKey: 'notes.menu.label.exportPdf',
+  icon: 'fas fa-file-pdf',
+  sortable: true,
+  cssClass: 'ps-2 pe-4 noteExportPdf action-menu-item',
+  rank: 20,
+  actionEvent: 'note-export-pdf',
+  enabled: (note) => note?.canView,
+});
+extensionRegistry.registerExtension('NotesMenu', 'menuActionMenu', {
+  id: 'noteHistory',
+  labelKey: 'notes.menu.label.noteHistory',
+  icon: 'fas fa-history',
+  sortable: true,
+  cssClass: 'ps-2 pe-4 action-menu-item',
+  rank: 40,
+  actionEvent: 'open-note-history',
+  enabled: () => true,
+});
+extensionRegistry.registerExtension('NotesMenu', 'menuActionMenu', {
+  id: 'movePage',
+  labelKey: 'notes.menu.label.movePage',
+  icon: 'fas fa-arrows-alt',
+  sortable: true,
+  cssClass: 'ps-2 pe-4 action-menu-item',
+  rank: 50,
+  actionEvent: 'open-note-treeview',
+  enabled: (note) => note?.parentPageId && note?.canManage
+});
+extensionRegistry.registerExtension('NotesMenu', 'menuActionMenu', {
+  id: 'exportNotes',
+  labelKey: 'notes.menu.label.export',
+  icon: 'fas fa-sign-in-alt',
+  sortable: true,
+  cssClass: 'ps-2 pe-4 action-menu-item',
+  rank: 50,
+  actionEvent: 'open-note-treeview',
+  enabled: (note) => !note?.parentPageId
+});
+extensionRegistry.registerExtension('NotesMenu', 'menuActionMenu', {
+  id: 'importNotes',
+  labelKey: 'notes.menu.label.import',
+  icon: 'fas fa-sign-out-alt',
+  sortable: true,
+  cssClass: 'ps-2 pe-4 action-menu-item',
+  rank: 60,
+  actionEvent: 'open-note-import-drawer',
+  enabled: (note) => !note?.parentPageId && note?.canImport
+});
+extensionRegistry.registerExtension('NotesMenu', 'menuActionMenu', {
+  id: 'deleteNote',
+  labelKey: 'notes.menu.label.delete',
+  icon: 'fas fa-trash',
+  sortable: true,
+  cssClass: 'ps-2 pe-4 action-menu-item',
+  iconCssClass: 'delete-option-color',
+  rank: 70,
+  actionEvent: 'delete-note',
+  enabled: (note) => note?.parentPageId && note?.canManage
+});
diff --git a/notes-webapp/src/main/webapp/vue-app/notes/initComponents.js b/notes-webapp/src/main/webapp/vue-app/notes/initComponents.js
index 5c95e365c2..dcc99f5162 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes/initComponents.js
+++ b/notes-webapp/src/main/webapp/vue-app/notes/initComponents.js
@@ -12,6 +12,7 @@ import NoteContentTableItem from './components/NoteContentTableItem.vue';
 import NotesActionMenuItems from './components/menu/NotesActionMenuItems.vue';
 import NotesMobileActionMenu from './components/menu/NotesMobileActionMenu.vue';
 import NoteTreeviewItemPrepend from './components/NoteTreeviewItemPrepend.vue';
+import NoteEditorFeaturedImageDrawer from '../notes-rich-editor/components/note-properties/NoteEditorFeaturedImageDrawer.vue';
 
 const components = {
   'notes-overview': NotesOverview,
@@ -27,7 +28,8 @@ const components = {
   'note-content-table-item': NoteContentTableItem,
   'notes-action-menu-items': NotesActionMenuItems,
   'notes-mobile-action-menu': NotesMobileActionMenu,
-  'note-treeview-item-prepend': NoteTreeviewItemPrepend
+  'note-treeview-item-prepend': NoteTreeviewItemPrepend,
+  'note-featured-image-drawer': NoteEditorFeaturedImageDrawer
 };
 
 for (const key in components) {
diff --git a/notes-webapp/src/main/webapp/vue-app/notes/main.js b/notes-webapp/src/main/webapp/vue-app/notes/main.js
index 0fd20addd7..38c5653715 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes/main.js
+++ b/notes-webapp/src/main/webapp/vue-app/notes/main.js
@@ -1,5 +1,6 @@
 import './initComponents.js';
 import './services.js';
+import './extensions.js';
 import * as notesService from '../../javascript/eXo/wiki/notesService.js';
 
 // get overrided components if exists
@@ -51,4 +52,4 @@ export function init() {
       i18n
     }, appElement, 'Notes Overview');
   }).finally(() => Vue.prototype.$utils.includeExtensions('NotesExtension'));
-}
\ No newline at end of file
+}