From 7cb0b714c3f779e7d4d383c78b962d9319896f47 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
---
 .../portlet/notes/notesPortlet_en.properties  |   1 +
 .../portlet/notes/notesPortlet_fr.properties  |   1 +
 .../main/webapp/WEB-INF/gatein-resources.xml  |   9 ++
 .../javascript/eXo/wiki/notesService.js       |  76 ++++++++++
 .../components/NotePublicationDrawer.vue      |   2 +-
 .../components/NoteFullRichEditor.vue         |   2 +-
 .../vue-app/notes-rich-editor/js/Utils.js     |  20 +++
 .../notes/components/NotesOverview.vue        | 121 +++++++++++++---
 .../components/menu/NotesActionMenuItems.vue  | 136 ++++--------------
 .../components/menu/NotesActionsMenu.vue      |   7 +-
 .../components/menu/NotesMobileActionMenu.vue |   3 +-
 .../main/webapp/vue-app/notes/extensions.js   |  86 +++++++++++
 .../webapp/vue-app/notes/initComponents.js    |   4 +-
 .../src/main/webapp/vue-app/notes/main.js     |   3 +-
 14 files changed, 331 insertions(+), 140 deletions(-)
 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 687794b17..f40176194 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,7 @@ 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
 
 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 94bf19edf..e83a0e112 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,7 @@ 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
 
 popup.confirm=Confirmer
 popup.msg.confirmation=Confirmation
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 fbb9ee85e..f77772434 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,15 @@
         <minify>false</minify>
         <path>/javascript/notes.bundle.js</path>
       </script>
+      <depends>
+        <module>NotePublishExtensions</module>
+      </depends>
+      <depends>
+        <module>NotesPublication</module>
+      </depends>
+      <depends>
+        <module>imageCropper</module>
+      </depends>
       <depends>
         <module>html2canvas</module>
       </depends>
diff --git a/notes-webapp/src/main/webapp/javascript/eXo/wiki/notesService.js b/notes-webapp/src/main/webapp/javascript/eXo/wiki/notesService.js
index 1b039df14..de811aa81 100644
--- a/notes-webapp/src/main/webapp/javascript/eXo/wiki/notesService.js
+++ b/notes-webapp/src/main/webapp/javascript/eXo/wiki/notesService.js
@@ -429,3 +429,79 @@ export function removeNoteFeaturedImage(noteId, isDraft, lang) {
     }
   });
 }
+
+export async function getNotePublishTargets() {
+  const targets = await Vue.prototype.$newsTargetingService.getAllowedTargets();
+  return targets.map(target => ({
+    name: target.name,
+    label: target?.properties?.label,
+    tooltipInfo: `${target?.properties?.label}: ${target?.properties?.description || ''}`,
+    description: target?.properties?.description,
+    restrictedAudience: target?.restrictedAudience,
+  }));
+}
+
+export function saveNoteArticle(article) {
+  if (article?.schedulePostDate) {
+    article.publicationState = 'staged';
+  }
+  if (article.scheduleUnpublishDate || article?.schedulePostDate) {
+    article.timeZoneId = new window.Intl.DateTimeFormat().resolvedOptions().timeZone;
+  }
+  if (article.publicationState === 'staged') {
+    return Vue.prototype.$newsService.scheduleNews(article, 'existing_page');
+  } else {
+    return Vue.prototype.$newsService.saveNews(article);
+  }
+}
+
+export function canPublish(spaceId) {
+  return Vue.prototype.$newsService.canPublishNews(spaceId);
+}
+
+export function canSchedule(spaceId, articleId) {
+  return Vue.prototype.$newsService.canScheduleNews(spaceId, articleId);
+}
+
+export async function getSavedNotePublicationSettings(id, lang) {
+  try {
+    const article = await Vue.prototype.$newsService.getNewsById(id, false, 'article', lang);
+    if (!article || article.status === 404) {
+      return null;
+    }
+    return {
+      activityPosted: article.activityPosted,
+      published: article.published,
+      targets: article.targets,
+      audience: article.audience,
+      schedulePostDate: article.schedulePostDate,
+      scheduleUnpublishDate: article.scheduleUnpublishDate,
+      properties: article.properties ?? {}
+    };
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+}
+
+export function updateNotePublication(editScheduleAction, scheduleSettings, article) {
+  article.timeZoneId = new window.Intl.DateTimeFormat().resolvedOptions().timeZone;
+  switch (editScheduleAction) {
+    case 'schedule':
+      article.publicationState = scheduleSettings?.postDate ? 'staged' : '';
+      return Vue.prototype.$newsService.scheduleNews(article, 'article');
+    case 'cancel_schedule':
+      article.schedulePostDate = 0;
+      article.publicationState = 'draft';
+      return Vue.prototype.$newsService.saveNews(article);
+    case 'publish_now':
+      article.schedulePostDate = 0;
+      article.publicationState = 'posted';
+      return Vue.prototype.$newsService.saveNews(article);
+    default:
+      article.publicationState = 'posted';
+      return Vue.prototype.$newsService.updateNews(article, article.activityPosted, 'article', 'POSTING_AND_PUBLISHING');
+  }
+}
+
+
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 bda62e85b..672732776 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
@@ -422,7 +422,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-rich-editor/components/NoteFullRichEditor.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteFullRichEditor.vue
index 4afdafebb..a880c9202 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 96dc12934..ee6dfb071 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,23 @@ export function isSameContent(content, originalContent) {
 function getString(body) {
   return new DOMParser().parseFromString(body, 'text/html').documentElement.textContent.replace(/&nbsp;/g, '').trim();
 }
+
+export function noteToArticle(note, spaceId) {
+  return {
+    id: note.id,
+    title: note.title,
+    body: note.content,
+    author: note.author,
+    published: note.published,
+    targets: note.targets,
+    spaceId: spaceId,
+    publicationState: 'posted',
+    schedulePostDate: note.schedulePostDate,
+    timeZoneId: null,
+    activityPosted: note.activityPosted,
+    audience: note.audience,
+    draftPage: false,
+    scheduleUnpublishDate: note.scheduleUnpublishDate,
+    properties: note?.properties
+  };
+}
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 dd1d2aac7..1d0a79f35 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,28 @@
       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-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,12 +391,19 @@ 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: {
     note() {
       if (!this.note.draftPage) {
         this.getNoteVersionByNoteId(this.note.id);
+        this.getSavedNotePublicationSettings(this.note.id);
+        this.getCanSchedule();
       }
       if ( this.note && this.note.breadcrumb && this.note.breadcrumb.length ) {
         this.note.breadcrumb[0].title = this.getHomeTitle(this.note.breadcrumb[0].title);
@@ -413,6 +435,9 @@ export default {
     }
   },
   computed: {
+    newPublicationDrawerEnabled() {
+      return eXo?.env?.portal?.newPublicationDrawerEnabled;
+    },
     extensionParams() {
       return {
         entityId: this.entityId,
@@ -575,10 +600,18 @@ 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() {
     this.getAvailableLanguages();
+    this.getPublishTargets();
+    this.getCanPublish();
     const queryPath = window.location.search;
     const urlParams = new URLSearchParams(queryPath);
     if (urlParams.has('translation')) {
@@ -637,9 +670,9 @@ 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);
     this.refreshOverviewExtensions();
-
   },
   mounted() {
     this.handleChangePages();
@@ -648,9 +681,62 @@ export default {
     });
   },
   methods: {
+    getSavedNotePublicationSettings(id, lang) {
+      return this.$notesService.getSavedNotePublicationSettings(id, lang).then(settings => {
+        if (settings) {
+          this.note = Object.assign(this.note, settings);
+        }
+        this.published = !!settings;
+      });
+    },
+    getCanPublish() {
+      this.$notesService.canPublish(this.spaceId).then(canPublish => {
+        this.canPublish = canPublish;
+      });
+    },
+    getCanSchedule() {
+      this.$notesService.canSchedule(this.spaceId, this.note?.id).then(canSchedule => {
+        this.canSchedule = canSchedule;
+      });
+    },
+    getPublishTargets() {
+      this.$notesService.getNotePublishTargets().then(targets => {
+        this.publishTargets = targets;
+      });
+    },
+    publishNote(publicationSettings, note) {
+      const scheduleSettings = publicationSettings?.scheduleSettings;
+      const article = structuredClone(note || this.note);
+      article.schedulePostDate = scheduleSettings?.postDate;
+      article.scheduleUnpublishDate = scheduleSettings?.unpublishDate;
+      article.activityPosted = publicationSettings?.post;
+      article.published = publicationSettings?.publish;
+      article.targets = publicationSettings?.selectedTargets;
+      article.audience = publicationSettings?.selectedAudience;
+      this.isPublishing = true;
+      if (note) {
+        this.$notesService.updateNoteById(note).then(() => {
+          this.$notesService.saveNoteArticle(this.$noteUtils.noteToArticle(article, this.spaceId)).then(() => {
+            this.isPublishing = false;
+            this.$refs.publicationDrawer.close();
+            this.$root.$emit('show-alert', {type: 'success', message: this.$t('notes.publication.success.message')});
+          });
+        });
+      } else {
+        const editScheduleAction = scheduleSettings?.editScheduleAction;
+        this.$notesService.updateNotePublication(editScheduleAction, scheduleSettings,
+          this.$noteUtils.noteToArticle(article, this.spaceId)).then(() => {
+          this.isPublishing = false;
+          this.$root.$emit('show-alert', {type: 'success', message: this.$t('notes.publication.success.message')});
+        });
+      }
+    },
+    openPublishDrawer() {
+      this.$refs.publicationDrawer.open(this.note);
+    },
     closeMobileActionMenu() {
       setTimeout(() => {
-        this.$refs.notesMobileActionMenu.close();
+        this.$refs.notesMobileActionMenu?.close();
       }, 200);
     },
     openNoteTreeView(note, action) {
@@ -1010,6 +1096,7 @@ export default {
     openNoteChild(item) {
       const noteName = item.path.split('%2F').pop();
       this.$root.$emit('open-note-by-name', noteName);
+      this.getSavedNotePublicationSettings(item.noteId);
     },
     updateNote(noteParam) {
       const note = {
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 0ec75e083..ede838078 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 0de84c71f..2bdcab09a 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 0642c26c0..7954f2f04 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 000000000..9107d6995
--- /dev/null
+++ b/notes-webapp/src/main/webapp/vue-app/notes/extensions.js
@@ -0,0 +1,86 @@
+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: 'publishNote',
+  labelKey: 'notes.publication.publish.save.label',
+  icon: 'fas fa-paper-plane',
+  sortable: true,
+  cssClass: 'ps-2 pe-4 action-menu-item',
+  rank: 30,
+  actionEvent: 'open-publish-drawer',
+  enabled: (note) => eXo?.env?.portal?.newPublicationDrawerEnabled && !note.draftPage,
+});
+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 5c95e365c..dcc99f516 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 0fd20addd..38c565371 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
+}