From fd6259f41fe21249d973898e7fbe6e8548b1a39a Mon Sep 17 00:00:00 2001
From: Helmi Akermi <70575401+hakermi@users.noreply.github.com>
Date: Wed, 5 Jun 2024 10:12:17 +0100
Subject: [PATCH 01/40] feat: Allow expand in treeview drawer - EXO-71946 -
 Meeds-io/MIPs#128 (#993)

Allow expand in treeview drawer
---
 .../main/webapp/vue-app/notes/components/NoteTreeviewDrawer.vue  | 1 +
 1 file changed, 1 insertion(+)

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 4c3d94b79b..9f41506b21 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
@@ -10,6 +10,7 @@
       class="breadcrumbDrawer"
       :confirm-close="exporting"
       :confirm-close-labels="confirmCloseLabels"
+      allow-expand
       v-model="drawer"
       show-overlay
       @closed="closeAllDrawer()"

From a02c94280a916e0872d3eba32753e08a7bd5d0a9 Mon Sep 17 00:00:00 2001
From: Helmi Akermi <70575401+hakermi@users.noreply.github.com>
Date: Fri, 21 Jun 2024 10:56:05 +0100
Subject: [PATCH 02/40] feat: Adjust notes action menu ui revamping - EXO-72270
 - Meeds-io/MIPs#128 (#1010)

---
 .../main/webapp/skin/less/notes/notes.less    |  23 ++-
 .../notes/components/NotesActionsMenu.vue     | 135 ---------------
 .../notes/components/NotesOverview.vue        |  36 +++-
 .../components/menu/NotesActionMenuItems.vue  | 162 ++++++++++++++++++
 .../components/menu/NotesActionsMenu.vue      |  66 +++++++
 .../components/menu/NotesMobileActionMenu.vue |  59 +++++++
 .../webapp/vue-app/notes/initComponents.js    |   8 +-
 7 files changed, 339 insertions(+), 150 deletions(-)
 delete mode 100644 notes-webapp/src/main/webapp/vue-app/notes/components/NotesActionsMenu.vue
 create mode 100644 notes-webapp/src/main/webapp/vue-app/notes/components/menu/NotesActionMenuItems.vue
 create mode 100644 notes-webapp/src/main/webapp/vue-app/notes/components/menu/NotesActionsMenu.vue
 create mode 100644 notes-webapp/src/main/webapp/vue-app/notes/components/menu/NotesMobileActionMenu.vue

diff --git a/notes-webapp/src/main/webapp/skin/less/notes/notes.less b/notes-webapp/src/main/webapp/skin/less/notes/notes.less
index 45f5502045..5dcd8a44f4 100644
--- a/notes-webapp/src/main/webapp/skin/less/notes/notes.less
+++ b/notes-webapp/src/main/webapp/skin/less/notes/notes.less
@@ -188,6 +188,22 @@
   }
 }
 
+#notesActionMenuBottomDrawer, #notesOverviewApplication,
+                           .notesApplication .notes-application-header .note-actions-menu {
+  .action-menu-item {
+    min-height: 28px !important;
+  }
+
+  .delete-option-color {
+    color: @errorColor;
+  }
+
+  .icon-menu {
+    width: 28px;
+    height: 36px;
+  }
+}
+
 #notesOverviewApplication, .notesApplication {
   max-width: 100%;
 
@@ -232,14 +248,9 @@
           }
 
           .note-actions-menu {
-            min-width: 150px !important;
             right: 7px;
-            top: 25px !important;
+            top: 30px !important;
             left: auto !important;
-
-            .action-menu-item {
-              min-height: 30px !important;
-            }
           }
         }
       }
diff --git a/notes-webapp/src/main/webapp/vue-app/notes/components/NotesActionsMenu.vue b/notes-webapp/src/main/webapp/vue-app/notes/components/NotesActionsMenu.vue
deleted file mode 100644
index dc3109fb78..0000000000
--- a/notes-webapp/src/main/webapp/vue-app/notes/components/NotesActionsMenu.vue
+++ /dev/null
@@ -1,135 +0,0 @@
-<template>
-  <v-menu
-    v-model="displayActionMenu"
-    :attach="'#note-actions-menu'"
-    transition="slide-x-reverse-transition"
-    content-class="note-actions-menu"
-    offset-y
-    left>
-    <v-list>
-      <v-list-item
-        v-if="!homePage && note.canManage"
-        class="px-2 text-left action-menu-item draftButton"
-        @click="$root.$emit('delete-note')">
-        <v-icon
-          size="18"
-          class="primary--text clickable pr-2">
-          mdi-trash-can-outline
-        </v-icon>
-        <span>{{ $t('notes.menu.label.delete') }}</span>
-      </v-list-item>
-      <v-list-item
-        v-if="note && note.canView"
-        class="px-2 text-left action-menu-item draftButton"
-        @click="copyLink">
-        <v-icon
-          size="18"
-          class="primary--text clickable pr-2">
-          mdi-link-variant
-        </v-icon>
-        <span>{{ $t('notes.menu.label.copyLink') }}</span>
-      </v-list-item>
-      <v-list-item
-        class="px-2 text-left action-menu-item draftButton"
-        @click="$emit('open-history')">
-        <v-icon
-          size="18"
-          class="primary--text clickable pr-2">
-          mdi-history
-        </v-icon>
-        <span>{{ $t('notes.menu.label.noteHistory') }}</span>
-      </v-list-item>
-      <v-list-item
-        v-if="!homePage && note.canManage"
-        class="px-2 text-left action-menu-item draftButton"
-        @click="$emit('open-treeview')">
-        <v-icon
-          size="18"
-          class="primary--text clickable pr-2">
-          mdi-cursor-move
-        </v-icon>
-        <span>{{ $t('notes.menu.label.movePage') }}</span>
-      </v-list-item>
-      <v-list-item
-        v-if="note && note.canView"
-        class="px-2 text-left noteExportPdf action-menu-item draftButton"
-        @click="$emit('export-pdf')">
-        <v-icon
-          size="18"
-          class="primary--text clickable pr-2">
-          mdi-file-pdf-box
-        </v-icon>
-        <span>{{ $t('notes.menu.label.exportPdf') }}</span>
-      </v-list-item>
-      <v-list-item
-        v-if="homePage"
-        class="px-2 text-left action-menu-item draftButton"
-        @click="$emit('open-treeview-export')">
-        <v-icon
-          size="18"
-          class="primary--text clickable pr-2">
-          mdi-export
-        </v-icon>
-        <span>{{ $t('notes.menu.label.export') }}</span>
-      </v-list-item>
-      <v-list-item
-        v-if="homePage && note.canImport"
-        class="px-2 text-left action-menu-item draftButton"
-        @click="$emit('open-import-drawer')">
-        <v-icon
-          size="18"
-          class="primary--text clickable pr-2">
-          mdi-import
-        </v-icon>
-        <span>{{ $t('notes.menu.label.import') }}</span>
-      </v-list-item>
-    </v-list>
-  </v-menu>
-</template>
-<script>
-export default {
-  data() {
-    return {
-      displayActionMenu: false,
-    };
-  },
-  props: {
-    note: {
-      type: Object,
-      default: () => null,
-    },
-    defaultPath: {
-      type: String,
-      default: () => 'Home',
-    }
-  },
-  computed: {
-    homePage(){
-      return !this.note.parentPageId;
-    }
-  },
-  created() {
-    $(document).on('mousedown', () => {
-      if (this.displayActionMenu) {
-        window.setTimeout(() => {
-          this.displayActionMenu = false;
-        }, this.waitTimeUntilCloseMenu);
-      }
-    });
-    this.$root.$on('display-action-menu', ( )=> {
-      this.displayActionMenu = true;
-    });
-  },
-  methods: {
-    copyLink() {
-      const inputTemp = $('<input>');
-      const path = window.location.href;
-      $('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')});
-    }
-  },
-};
-</script>
\ No newline at end of file
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 de39e0a272..bb2aa956d4 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
@@ -230,13 +230,14 @@
       </div>
     </div>
     <notes-actions-menu
+      v-if="!isMobile"
       :note="note"
-      :default-path="defaultPath"
-      @open-treeview="$refs.notesBreadcrumb.open(note, 'movePage')"
-      @export-pdf="createPDF(note)"
-      @open-history="openNoteVersionsHistoryDrawer()"
-      @open-treeview-export="$refs.notesBreadcrumb.open(note.id, 'exportNotes')"
-      @open-import-drawer="$refs.noteImportDrawer.open()" />
+      :default-path="defaultPath" />
+    <notes-mobile-action-menu
+      v-else
+      ref="notesMobileActionMenu"
+      :note="note"
+      :default-path="defaultPath" />
     <note-treeview-drawer
       ref="notesBreadcrumb" />
     <version-history-drawer
@@ -463,7 +464,7 @@ export default {
       }
     },
     isMobile() {
-      return this.$vuetify.breakpoint.name === 'xs';
+      return this.$vuetify?.breakpoint?.smAndDown;
     },
 
     isAvailableNote() {
@@ -565,11 +566,30 @@ export default {
     this.$root.$on('update-note-content', this.updateNoteContent);
     this.$root.$on('update-selected-translation', this.updateSelectedTranslation);
 
+    this.$root.$on('open-note-treeview', this.openNoteTreeView);
+    this.$root.$on('note-export-pdf', this.createPDF);
+    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);
+
   },
   mounted() {
     this.handleChangePages();
   },
   methods: {
+    closeMobileActionMenu() {
+      setTimeout(() => {
+        this.$refs.notesMobileActionMenu.close();
+      }, 200);
+    },
+    openNoteTreeView(note, action) {
+      this.$refs.notesBreadcrumb.open(note, action);
+      this.closeMobileActionMenu();
+    },
+    openImportDrawer() {
+      this.$refs.noteImportDrawer.open();
+      this.closeMobileActionMenu();
+    },
     updateNoteTitle(title) {
       this.noteTitle = title;
     },
@@ -835,6 +855,7 @@ export default {
           console.error('Error when exporting note: ', e);
         });
       });
+      this.closeMobileActionMenu();
     },
     displayMessage(message) {
       this.$root.$emit('alert-message', message?.message, message?.type || 'success');
@@ -882,6 +903,7 @@ export default {
         }
         this.$refs.noteVersionsHistoryDrawer.open();
       }
+      this.closeMobileActionMenu();
     },
     retrieveNoteTreeById() {
       this.note.wikiOwner = this.note.wikiOwner.substring(1);
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
new file mode 100644
index 0000000000..c85b89c8ba
--- /dev/null
+++ b/notes-webapp/src/main/webapp/vue-app/notes/components/menu/NotesActionMenuItems.vue
@@ -0,0 +1,162 @@
+<!--
+ * 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.
+ -->
+
+<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-icon
+        size="12"
+        class="clickable icon-menu">
+        fas fa-link
+      </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="12"
+        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="12"
+        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="12"
+        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="12"
+        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="12"
+        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="12"
+        class="delete-option-color clickable icon-menu">
+        fas fa-trash
+      </v-icon>
+      <span class="delete-option-color">
+        {{ $t('notes.menu.label.delete') }}
+      </span>
+    </v-list-item>
+  </v-list>
+</template>
+
+<script>
+export default {
+  props: {
+    note: {
+      type: Object,
+      default: () => null,
+    },
+    defaultPath: {
+      type: String,
+      default: () => 'Home',
+    }
+  },
+  computed: {
+    homePage(){
+      return !this.note.parentPageId;
+    }
+  },
+  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);
+    },
+    copyLink() {
+      const inputTemp = $('<input>');
+      const path = window.location.href;
+      $('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');
+    }
+  },
+};
+</script>
+
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
new file mode 100644
index 0000000000..c01bb9228a
--- /dev/null
+++ b/notes-webapp/src/main/webapp/vue-app/notes/components/menu/NotesActionsMenu.vue
@@ -0,0 +1,66 @@
+<!--
+ * 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.
+ -->
+
+<template>
+  <v-menu
+    v-model="displayActionMenu"
+    :attach="'#note-actions-menu'"
+    transition="slide-x-reverse-transition"
+    content-class="py-0 note-actions-menu pa-0 overflow-hidden"
+    max-width="fit-content"
+    max-height="fit-content"
+    offset-y
+    left>
+    <notes-action-menu-items
+      :note="note"
+      :default-path="defaultPath" />
+  </v-menu>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      displayActionMenu: false,
+    };
+  },
+  props: {
+    note: {
+      type: Object,
+      default: () => null,
+    },
+    defaultPath: {
+      type: String,
+      default: () => 'Home',
+    }
+  },
+  created() {
+    $(document).on('mousedown', () => {
+      if (this.displayActionMenu) {
+        window.setTimeout(() => {
+          this.displayActionMenu = false;
+        }, this.waitTimeUntilCloseMenu);
+      }
+    });
+    this.$root.$on('display-action-menu', ( )=> {
+      this.displayActionMenu = true;
+    });
+  }
+};
+</script>
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
new file mode 100644
index 0000000000..0642c26c04
--- /dev/null
+++ b/notes-webapp/src/main/webapp/vue-app/notes/components/menu/NotesMobileActionMenu.vue
@@ -0,0 +1,59 @@
+<!--
+ * 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.
+ -->
+
+<template>
+  <exo-drawer
+    id="notesActionMenuBottomDrawer"
+    ref="notesActionMenu"
+    :bottom="true">
+    <template slot="content">
+      <notes-action-menu-items
+        :note="note"
+        :default-path="defaultPath" />
+    </template>
+  </exo-drawer>
+</template>
+
+<script>
+export default {
+  props: {
+    note: {
+      type: Object,
+      default: () => null,
+    },
+    defaultPath: {
+      type: String,
+      default: () => 'Home',
+    }
+  },
+  created() {
+    this.$root.$on('display-action-menu', this.open);
+    this.$root.$on('close-action-menu', this.close);
+  },
+  methods: {
+    open() {
+      this.$refs.notesActionMenu.open();
+    },
+    close() {
+      this.$refs.notesActionMenu.close();
+    }
+  }
+};
+</script>
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 523c131f58..462773a680 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes/initComponents.js
+++ b/notes-webapp/src/main/webapp/vue-app/notes/initComponents.js
@@ -1,6 +1,6 @@
 import NotesOverview from './components/NotesOverview.vue';
 import NoteTreeviewDrawer from './components/NoteTreeviewDrawer.vue';
-import NotesActionsMenu from './components/NotesActionsMenu.vue';
+import NotesActionsMenu from './components/menu/NotesActionsMenu.vue';
 import NoteBreadcrumb from './components/NoteBreadcrumb.vue';
 import NoteImportDrawer from './components/NoteImportDrawer.vue';
 import AttachmentsNotesUploadInput from './components/importNotes/AttachmentsNotesUploadInput.vue';
@@ -9,6 +9,8 @@ import AttachmentsNotesItem from './components/importNotes/AttachmentsNotesItem.
 import NoteFavoriteAction from './components/NoteFavoriteAction.vue';
 import NoteContentTableItem from './components/NoteContentTableItem.vue';
 import NotesTranslationMenu from './components/NotesTranslationMenu.vue';
+import NotesActionMenuItems from './components/menu/NotesActionMenuItems.vue';
+import NotesMobileActionMenu from './components/menu/NotesMobileActionMenu.vue';
 
 const components = {
   'notes-overview': NotesOverview,
@@ -20,8 +22,10 @@ const components = {
   'attachments-uploaded-notes': AttachmentsUploadedNotes,
   'attachments-notes-item': AttachmentsNotesItem,
   'note-favorite-action': NoteFavoriteAction,
+  'notes-translation-menu': NotesTranslationMenu,
   'note-content-table-item': NoteContentTableItem,
-  'notes-translation-menu': NotesTranslationMenu
+  'notes-action-menu-items': NotesActionMenuItems,
+  'notes-mobile-action-menu': NotesMobileActionMenu
 };
 
 for (const key in components) {

From b97a2c9be5d45e295d4fb48e045f585a62afc246 Mon Sep 17 00:00:00 2001
From: Helmi Akermi <70575401+hakermi@users.noreply.github.com>
Date: Tue, 2 Jul 2024 11:54:51 +0100
Subject: [PATCH 03/40] feat: Make notes editor a re-useable component -
 EXO-72612_EXO-72145 - Meeds-io/MIPs#128  (#1021)

Make notes editor a re-usable component
---
 .../main/webapp/WEB-INF/gatein-resources.xml  |  39 +-
 .../main/webapp/skin/less/notes/notes.less    |   3 +-
 .../webapp/vue-app/note-page-view/services.js |   2 +-
 .../components/NoteTablePluginsDrawer.vue     | 386 -----------
 .../components/NotesEditorDashboard.vue       | 643 +++++-------------
 .../vue-app/notes-editor/initComponents.js    |  11 +-
 .../webapp/vue-app/notes-editor/services.js   |   7 -
 .../components/NoteCustomPlugins.vue          |  13 +-
 .../components/NoteEditorTopBar.vue           | 213 ++++++
 .../components/NoteFullRichEditor.vue         | 407 +++++++++++
 .../components/TranslationsEditBar.vue        |  18 +-
 .../notes-rich-editor/initComponents.js       |  33 +
 .../js/Utils.js                               |   0
 .../webapp/vue-app/notes-rich-editor/main.js  |  12 +
 .../src/main/webapp/vue-app/notes/services.js |   2 +-
 notes-webapp/webpack.prod.js                  |   1 +
 16 files changed, 881 insertions(+), 909 deletions(-)
 delete mode 100644 notes-webapp/src/main/webapp/vue-app/notes-editor/components/NoteTablePluginsDrawer.vue
 rename notes-webapp/src/main/webapp/vue-app/{notes-editor => notes-rich-editor}/components/NoteCustomPlugins.vue (95%)
 create mode 100644 notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue
 create mode 100644 notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteFullRichEditor.vue
 rename notes-webapp/src/main/webapp/vue-app/{notes-editor => notes-rich-editor}/components/TranslationsEditBar.vue (94%)
 create mode 100644 notes-webapp/src/main/webapp/vue-app/notes-rich-editor/initComponents.js
 rename notes-webapp/src/main/webapp/vue-app/{notes-editor => notes-rich-editor}/js/Utils.js (100%)
 create mode 100644 notes-webapp/src/main/webapp/vue-app/notes-rich-editor/main.js

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 263abdc559..5823897ea6 100644
--- a/notes-webapp/src/main/webapp/WEB-INF/gatein-resources.xml
+++ b/notes-webapp/src/main/webapp/WEB-INF/gatein-resources.xml
@@ -79,14 +79,47 @@
     </module>
   </portlet>
 
+  <module>
+    <name>NotesRichEditor</name>
+    <load-group>NotesEditorGRP</load-group>
+    <script>
+      <path>/javascript/notesRichEditor.bundle.js</path>
+    </script>
+    <depends>
+      <module>commonVueComponents</module>
+    </depends>
+    <depends>
+      <module>extensionRegistry</module>
+    </depends>
+    <depends>
+      <module>vue</module>
+    </depends>
+    <depends>
+      <module>vuetify</module>
+    </depends>
+    <depends>
+      <module>commons-editor</module>
+      <as>editor</as>
+    </depends>
+    <depends>
+      <module>eXoVueI18n</module>
+    </depends>
+    <depends>
+      <module>jquery</module>
+      <as>$</as>
+    </depends>
+  </module>
+
   <portlet>
     <name>NotesEditor</name>
     <module>
-      <load-group>NotesEditorGRP</load-group>
       <script>
         <minify>false</minify>
         <path>/javascript/notesEditor.bundle.js</path>
       </script>
+      <depends>
+        <module>NotesRichEditor</module>
+      </depends>
       <depends>
         <module>commonVueComponents</module>
       </depends>
@@ -99,10 +132,6 @@
       <depends>
         <module>vuetify</module>
       </depends>
-      <depends>
-        <module>commons-editor</module>
-        <as>editor</as>
-      </depends>
       <depends>
         <module>eXoVueI18n</module>
       </depends>
diff --git a/notes-webapp/src/main/webapp/skin/less/notes/notes.less b/notes-webapp/src/main/webapp/skin/less/notes/notes.less
index 5dcd8a44f4..2b2d7a792b 100644
--- a/notes-webapp/src/main/webapp/skin/less/notes/notes.less
+++ b/notes-webapp/src/main/webapp/skin/less/notes/notes.less
@@ -73,7 +73,8 @@
 
       .notes-content-form {
         min-height: calc(~"100vh - 140px");
-        #cke_notesContent {
+
+        .notes-content-wrapper > div[role="application"] {
           border-color: transparent;
           flex: 0 1 100%;
           margin-bottom: 0;
diff --git a/notes-webapp/src/main/webapp/vue-app/note-page-view/services.js b/notes-webapp/src/main/webapp/vue-app/note-page-view/services.js
index 22be8440b2..f7823d71fa 100644
--- a/notes-webapp/src/main/webapp/vue-app/note-page-view/services.js
+++ b/notes-webapp/src/main/webapp/vue-app/note-page-view/services.js
@@ -19,7 +19,7 @@
 
 import * as notePageViewService from './js/NotePageViewService.js';
 import * as notesService from '../../javascript/eXo/wiki/notesService.js';
-import * as noteUtils from '../notes-editor/js/Utils.js';
+import * as noteUtils from '../notes-rich-editor/js/Utils.js';
 
 if (!Vue.prototype.$notePageViewService) {
   window.Object.defineProperty(Vue.prototype, '$notePageViewService', {
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NoteTablePluginsDrawer.vue b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NoteTablePluginsDrawer.vue
deleted file mode 100644
index f0ee0628a2..0000000000
--- a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NoteTablePluginsDrawer.vue
+++ /dev/null
@@ -1,386 +0,0 @@
-<template>
-  <div>
-    <v-overlay
-      z-index="1031"
-      :value="drawer"
-      @click.native="drawer = false" />
-    <exo-drawer
-      ref="customTableDrawer"
-      v-model="drawer"
-      show-overlay
-      class="customTableDrawer"
-      @closed="closeAllDrawer()" 
-      right>
-      <template slot="title">
-        <div class="d-flex">
-          <i class="uiIcon uiArrowBAckIcon" @click="backToPlugins(); close()"></i>
-          <span class="ps-2 pt-1">{{ $t('notes.plugin.table') }}</span>
-        </div>
-      </template>
-      <template slot="content">
-        <v-container fluid>
-          <div class="d-flex">
-            <v-subheader class="px-0">
-              {{ $t('notes.plugin.table.size') }}
-            </v-subheader>
-            <v-divider class="spacesOverviewHorizontalSeparator mx-2 ma-auto" />
-          </div>
-
-          <v-row align="center">
-            <v-col cols="3">
-              <v-subheader>
-                {{ $t('notes.plugin.table.lines') }}
-              </v-subheader>
-            </v-col>
-
-            <v-col cols="3">
-              <v-text-field
-                v-model="lines"
-                class="pa-0"
-                type="number"
-                :rules="maxRules"
-                dense
-                min-height
-                outlined
-                :disabled="table ? true : false " />
-            </v-col>
-            <v-col cols="3">
-              <v-subheader>
-                {{ $t('notes.plugin.table.columns') }}
-              </v-subheader>
-            </v-col>
-
-            <v-col cols="3">
-              <v-text-field
-                v-model="columns"
-                class="pa-0"
-                type="number"
-                :rules="maxRules"
-                dense
-                min-height
-                outlined
-                :disabled="table ? true : false " />
-            </v-col>
-            <v-col cols="3">
-              <v-subheader>
-                {{ $t('notes.plugin.table.width') }}
-              </v-subheader>
-            </v-col>
-
-            <v-col cols="3">
-              <v-text-field
-                v-model="width"
-                class="pa-0"
-                :rules="maxRules"
-                dense
-                min-height
-                outlined />
-            </v-col>
-            <v-col cols="3">
-              <v-subheader>
-                {{ $t('notes.plugin.table.height') }}
-              </v-subheader>
-            </v-col>
-
-            <v-col cols="3">
-              <v-text-field
-                v-model="height"
-                class="pa-0"
-                :rules="maxRules"
-                dense
-                min-height
-                outlined />
-            </v-col>
-          </v-row>
-        </v-container>
-        <v-container fluid>
-          <div class="d-flex">
-            <v-subheader class="px-0">
-              {{ $t('notes.plugin.table.adjustment') }}
-            </v-subheader>
-            <v-divider class="spacesOverviewHorizontalSeparator mx-2 ma-auto" />
-          </div>
-
-          <v-row align="center">
-            <v-col cols="3">
-              <v-subheader>
-                {{ $t('notes.plugin.table.header') }}
-              </v-subheader>
-            </v-col>
-
-            <v-col cols="3">
-              <select
-                v-model="headerSelected"
-                name="priority"
-                class="input-block-level ignore-vuetify-classes my-3">
-                <option
-                  v-for="item in header"
-                  :key="item.name"
-                  :value="item.name">
-                  {{ $t('label.header.'+item.name.toLowerCase()) }}
-                </option>
-              </select>
-            </v-col>
-            <v-col cols="3">
-              <v-subheader>
-                {{ $t('notes.plugin.table.border') }}
-              </v-subheader>
-            </v-col>
-
-            <v-col cols="3">
-              <v-text-field
-                v-model="border"
-                class="pa-0"
-                type="number"
-                :rules="maxRules"
-                dense
-                min-height
-                outlined />
-            </v-col>
-            <v-col cols="9">
-              <v-subheader>
-                {{ $t('notes.plugin.table.spacing') }}
-              </v-subheader>
-            </v-col>
-
-            <v-col cols="3">
-              <v-text-field
-                v-model="spacing"
-                class="pa-0"
-                type="number"
-                :rules="maxRules"
-                dense
-                min-height
-                outlined />
-            </v-col>
-            <v-col cols="9">
-              <v-subheader>
-                {{ $t('notes.plugin.table.internal') }}
-              </v-subheader>
-            </v-col>
-
-            <v-col cols="3">
-              <v-text-field
-                v-model="internal"
-                class="pa-0"
-                type="number"
-                :rules="maxRules"
-                dense
-                min-height
-                outlined />
-            </v-col>
-          </v-row>
-        </v-container>
-        <v-container fluid>
-          <div class="d-flex">
-            <v-subheader class="px-0">
-              {{ $t('notes.plugin.table.alignment') }}
-            </v-subheader>
-            <v-divider class="spacesOverviewHorizontalSeparator mx-2 ma-auto" />
-          </div>
-
-          <v-row align="center">
-            <v-col cols="3">
-              <v-subheader>
-                {{ $t('notes.plugin.table.alignment') }}
-              </v-subheader>
-            </v-col>
-            <v-col cols="3">
-              <select
-                v-model="alignmentSelected"
-                name="priority"
-                class="input-block-level ignore-vuetify-classes my-3">
-                <option
-                  v-for="item in alignment"
-                  :key="item.name"
-                  :value="item.name">
-                  {{ $t('label.alignment.'+item.name.toLowerCase()) }}
-                </option>
-              </select>
-            </v-col>
-          </v-row>
-        </v-container>
-        <v-container fluid>
-          <div class="d-flex">
-            <v-subheader class="px-0">
-              {{ $t('notes.plugin.table.summary') }}
-            </v-subheader>
-            <v-divider class="spacesOverviewHorizontalSeparator mx-2 ma-auto" />
-          </div>
-          <v-row align="center">
-            <v-col>
-              <v-text-field
-                v-model="summary"
-                :placeholder="$t('notes.plugin.table.summaryPlaceholder')"
-                class="pa-0"
-                dense
-                min-height
-                outlined />
-            </v-col>
-          </v-row>
-          <div class="accessibility-text d-flex">
-            <div class="btn-accessibility me-2">
-              <v-icon size="18" class="primary v-btn--round">mdi-human</v-icon>
-            </div>
-            <span class="caption text-light-color font-italic">{{ $t('notes.plugin.table.summaryText') }}</span>
-          </div>
-        </v-container>
-      </template>
-      <template slot="footer">
-        <div class="d-flex">
-          <v-spacer />
-          <div class="VuetifyApp d-flex">
-            <div class="d-btn">
-              <v-btn class="btn mr-2" @click="close">
-                <template>
-                  {{ $t('notes.button.cancel') }}
-                </template>
-              </v-btn>
-
-              <v-btn class="btn btn-primary" @click="insertTable">
-                <template>
-                  {{ $t('notes.button.ok') }}
-                </template>
-              </v-btn>
-            </div>
-          </div>
-        </div>
-      </template>
-    </exo-drawer>
-  </div>
-</template>
-
-<script>
-export default {
-  data: () => ({
-    limit: 0,
-    maxRules: [],
-    lines: 1,
-    columns: 1,
-    width: 500,
-    height: 25,
-    border: 1,
-    spacing: 1,
-    internal: 0,
-    alignmentSelected: '',
-    table: '',
-    countIdTable: 1,
-    summary: '',
-    alignment: [
-      {name: ''},{name: 'left'},{name: 'center'},{name: 'right'}
-    ],
-    headerSelected: '',
-    header: [
-      {name: ''},{name: 'FIRST.ROW'},{name: 'FIRST.COLUMN'},{name: 'BOTH'}
-    ],
-    closeAll: true,
-    drawer: false,
-  }),
-  props: {
-    instance: {
-      type: Object,
-      default: () => null,
-    },
-  },
-  created() {
-    this.maxRules = [v => v >= 0];
-    this.$root.$on('note-table-plugins', () => {
-      this.closeAll = true;
-    });
-  },
-  methods: {
-    open(table, summary) {
-      this.table = table;
-      if (table) {
-        this.width = table.width;
-        this.height = table.height;
-        this.border = table.border;
-        this.internal = table.cellpadding;
-        this.spacing = table.cellspacing;
-        this.alignmentSelected = table.align;
-        this.headerSelected = table.tHead;
-        if (summary) {
-          this.summary = summary;
-        }
-      }
-      this.$refs.customTableDrawer.open();
-    },
-    close() {
-      this.$refs.customTableDrawer.close();
-    },
-    closeAllDrawer() {
-      if (this.closeAll) {
-        this.$emit('closed');
-      }
-    },
-    backToPlugins() {
-      this.closeAll = false;
-    },
-    insertTable() {
-      this.close();
-      this.addTable();
-    },
-    addTable() {
-      if (!this.table) {
-        const div = document.createElement('DIV');
-        const elementContainer = document.createElement('DIV');
-        const tableContainerId = Math.random().toString(16).slice(2);
-        elementContainer.setAttribute('id', `table-${tableContainerId}`);
-        const table = document.createElement('TABLE');
-        const contentSummary = document.createElement('p');
-        contentSummary.setAttribute('id', `summary-${tableContainerId}`);
-        contentSummary.appendChild(document.createTextNode(this.summary));
-        contentSummary.style.display = 'none';
-        const idTable= `table${this.countIdTable}`;
-        table.setAttribute('id', idTable);
-        elementContainer.appendChild(contentSummary);
-        elementContainer.appendChild(table);
-        div.appendChild(elementContainer);
-        table.setAttribute('style', `width:${this.width}px !important`);
-        table.setAttribute('border', this.border);
-        table.setAttribute('cellPadding', this.internal);
-        table.setAttribute('height', this.height);
-        table.setAttribute('cellSpacing', this.spacing);
-        table.setAttribute('align', this.alignmentSelected);
-        table.setAttribute('tHead', this.headerSelected);
-
-        const tableBody = document.createElement('TBODY');
-        table.appendChild(tableBody);
-
-        for (let i = 0; i < this.lines; i++) {
-          const tr = document.createElement('TR');
-          tableBody.appendChild(tr);
-
-          for (let j = 0; j < this.columns; j++) {
-            const td = document.createElement('TD');
-            const widthTd =this.columns !== 0 ? this.width/Math.abs(this.columns) : this.width;
-            const heightTd =this.lines !== 0 ? this.height/Math.abs(this.lines) : this.height;
-            td.width = widthTd.toString();
-            td.height = heightTd.toString();
-            tr.appendChild(td);
-          }
-        }
-        this.instance.insertHtml(div.innerHTML);
-        const selector = `#${idTable} br`;
-        const elements= CKEDITOR.instances['notesContent'].document.find(selector);
-        for (let i = 0; i<elements.$.length ;i++){
-          elements.$[i].remove();
-        }
-        this.countIdTable+=1;
-      } else {
-        this.instance.elementPath().contains('table', 1).setAttribute('width', this.width);
-        this.instance.elementPath().contains('table', 1).setAttribute('height', this.height);
-        this.instance.elementPath().contains('table', 1).setAttribute('border', this.border);
-        this.instance.elementPath().contains('table', 1).setAttribute('cellPadding', this.internal);
-        this.instance.elementPath().contains('table', 1).setAttribute('cellSpacing', this.spacing);
-        this.instance.elementPath().contains('table', 1).setAttribute('align', this.alignmentSelected);
-        this.instance.elementPath().contains('table', 1).setAttribute('tHead', this.headerSelected);
-        this.instance.elementPath().contains('table', 1).setAttribute('summary', this.summary);
-        const tableSummary = this.instance.elementPath().contains( 'div', 1 ).$.firstChild;
-        tableSummary.innerText = this.summary;
-        this.$root.$emit('updateData', this.instance.getData());
-      }
-    },
-  }
-};
-</script>
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
index 9c8d61331b..7666fa8487 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
@@ -20,115 +20,37 @@
 -->
 <template>
   <v-app class="notesEditor">
-    <div
-      id="notesEditor"
-      class="notesEditor width-full">
-      <div class="notes-topbar">
-        <div
-          v-if="!showTranslationBar"
-          class="notesActions white">
-          <div class="notesFormButtons d-inline-flex flex-wrap width-full pa-3 ma-0">
-            <div class="notesFormLeftActions d-inline-flex align-center me-10">
-              <img :src="srcImageNote">
-              <span class="notesFormTitle ps-2">{{ noteFormTitle }}</span>
-              <v-tooltip bottom>
-                <template #activator="{ on, attrs }">
-                  <v-icon
-                    :aria-label="$t('notes.label.button.translations.options')"
-                    size="22"
-                    class="clickable pa-2"
-                    :class="langBottonColor"
-                    v-on="on"
-                    v-bind="attrs"
-                    @click="showTranslations">
-                    fa-language
-                  </v-icon>
-                </template>
-                <span class="caption">{{ langBottonTooltipText }}</span>
-              </v-tooltip>
-            </div>
-            <div class="notesFormRightActions pr-7">
-              <p class="draftSavingStatus mr-7">{{ draftSavingStatus }}</p>
-              <button
-                id="notesUpdateAndPost"
-                class="btn btn-primary primary px-2 py-0"
-                :key="postKey"
-                :aria-label="publishButtonText"
-                @click.once="postNote(false)">
-                {{ publishButtonText }}
-                <v-icon
-                  v-if="!webPageNote"
-                  id="notesPublichAndPost"
-                  dark
-                  @click="openPublishAndPost">
-                  mdi-menu-down
-                </v-icon>
-              </button>
-              <v-menu
-                v-if="!webPageNote"
-                v-model="publishAndPost"
-                :attach="'#notesUpdateAndPost'"
-                transition="scroll-y-transition"
-                content-class="publish-and-post-btn width-full"
-                offset-y
-                left>
-                <v-list-item
-                  @click.stop="postNote(true)"
-                  class="px-2">
-                  <v-icon
-                    size="16"
-                    class="primary--text clickable pr-2">
-                    mdi-arrow-collapse-up
-                  </v-icon>
-                  <span class="body-2 text-color">{{ publishAndPostButtonText }}</span>
-                </v-list-item>
-              </v-menu>
-            </div>
-          </div>
-        </div>
-        <note-translation-edit-bar
-          ref="translationsEditBar"
-          :note="note"
-          :languages="languages"
-          :translations="translations"
-          :is-mobile="isMobile" />
-        <div id="notesTop" class="width-full darkComposerEffect"></div>
-      </div>
-
-      <form class="notes-content">
-        <div class="notes-content-form singlePageApplication my-5 mx-auto py-1 px-5">
-          <div
-            v-show="!webPageNote"
-            class="formInputGroup notesTitle white px-5">
-            <input
-              id="notesTitle"
-              ref="noteTitle"
-              v-model="note.title"
-              :placeholder="notesTitlePlaceholder"
-              type="text"
-              class="py-0 px-1 mt-5 mb-0">
-          </div>
-          <div class="formInputGroup white overflow-auto flex notes-content-wrapper">
-            <textarea
-              id="notesContent"
-              ref="notesContent"
-              :placeholder="notesBodyPlaceholder"
-              name="notesContent"
-              class="notesFormInput">
-            </textarea>
-          </div>
-        </div>
-      </form>
-    </div>
-    <note-custom-plugins ref="noteCustomPlugins" :instance="editor" />
-    <note-table-plugins-drawer
-      ref="noteTablePlugins"
-      :instance="editor"
-      @closed="closePluginsDrawer()" />
-    <note-treeview-drawer 
+    <note-full-rich-editor
+      ref="editor"
+      :note="note"
+      :draft-saving-status="draftSavingStatus"
+      :note-id-param="noteId"
+      :post-key="postKey"
+      :body-placeholder="notesBodyPlaceholder"
+      :title-placeholder="notesTitlePlaceholder"
+      :form-title="noteFormTitle"
+      :app-name="appName"
+      :web-page-note="webPageNote"
+      :web-page-url="webPageUrl"
+      :languages="languages"
+      :translations="translations"
+      :selected-language="selectedLanguage"
+      :lang-button-tooltip-text="langButtonTooltipText"
+      :publish-and-post-button-text="publishAndPostButtonText"
+      :publish-button-text="publishButtonText"
+      :space-group-id="`/spaces/${this.spaceGroupId}`"
+      :enable-publish-and-post="true"
+      :is-mobile="isMobile"
+      :editor-body-input-ref="'notesContent'"
+      :editor-title-input-ref="'noteTitle'"
+      @open-treeview="openTreeView"
+      @post-note="postNote"
+      @auto-save="autoSave"
+      @editor-ready="editorReady"
+      @update-data="updateNoteData" />
+    <note-treeview-drawer
       ref="noteTreeview"
       @closed="closePluginsDrawer()" />
-
     <div
       v-for="(extension, i) in noteEditorExtensions"
       :key="i">
@@ -168,11 +90,8 @@ export default {
       noteId: '',
       parentPageId: '',
       appName: 'notes',
-      srcImageNote: '/notes/images/wiki.png',
-      titleMaxLength: 1000,
       notesTitlePlaceholder: `${this.$t('notes.title.placeholderContentInput')}*`,
       notesBodyPlaceholder: `${this.$t('notes.body.placeholderContentInput')}`,
-      publishAndPost: false,
       spaceId: '',
       noteFormTitle: '',
       postingNote: false,
@@ -181,13 +100,13 @@ export default {
       initActualNoteDone: false,
       draftSavingStatus: '',
       autoSaveDelay: 1000,
+      titleMaxLength: 1000,
       saveDraft: '',
       postKey: 1,
       navigationLabel: `${this.$t('notes.label.Navigation')}`,
       noteNavigationDisplayed: false,
       spaceGroupId: null,
       oembedMinWidth: 300,
-      showTranslationBar: false,
       selectedLanguage: null,
       translations: null,
       languages: [],
@@ -204,19 +123,26 @@ export default {
   },
   computed: {
     publishAndPostButtonText() {
-      if (this.note.id && (this.note.targetPageId || !this.note.draftPage)) {
+      if (this.note?.id && (this.note?.targetPageId || !this.note?.draftPage)) {
         return this.$t('notes.button.updateAndPost');
       } else {
         return this.$t('notes.button.publishAndPost');
       }
     },
     publishButtonText() {
-      if (this.note.id && (this.note.targetPageId || !this.note.draftPage)) {
+      if (this.note?.id && (this.note?.targetPageId || !this.note?.draftPage)) {
         return this.$t('notes.button.update');
       } else {
         return this.$t('notes.button.publish');
       }
     },
+    langButtonTooltipText() {
+      if (this.noteId) {
+        return this.$t('notes.label.button.translations.options');
+      } else {
+        return this.$t('notes.message.firstVersionShouldBeCreated');
+      }
+    },
     initCompleted() {
       return this.initDone && ((this.initActualNoteDone || this.noteId) || (this.initActualNoteDone || !this.noteId)) ;
     },
@@ -229,54 +155,29 @@ export default {
     webPageUrl() {
       return this.urlParams?.get?.('webPageUrl');
     },
-    langBottonColor(){
-      if (!this.noteId){
-        return 'disabled--text not-clickable remove-focus';
-      }
-      return this.selectedLanguage ? 'primary--text':'';
-    },
     isMobile() {
       return this.$vuetify.breakpoint.width < 1280;
-    },
-    langBottonTooltipText() {
-      if (this.noteId) {
-        return this.$t('notes.label.button.translations.options');
-      } else {
-        return this.$t('notes.message.firstVersionShouldBeCreated');
-      }
-    },
-
+    }
   },
   watch: {
     'note.title'() {
       if (this.note.title && this.note.title !== this.actualNote.title ) {
         this.autoSave();
-        this.hideTranslations();
       }
     },
     'note.content'() {
       if (this.note.content && this.note.content !== this.actualNote.content) {
         this.autoSave();
-        this.hideTranslations();
       }
     },
     draftNote() {
       if (!this.draftNote) {
         this.$root.$emit('close-alert-message');
       }
-    },
-    editor() {
-      if (this.editor) {
-        if (this.draftNote?.id || this.loadedNote?.id) {
-          this.fillNote(this.draftNote || this.loadedNote);
-          this.displayDraftMessage();
-          this.initActualNoteDone = true;
-          this.newDraft = !this.draftNote;
-        }
-        this.setToolBarEffect();
-        this.initDone = true;
-      }
-    },
+    }
+  },
+  mounted() {
+    this.init();
   },
   created() {
     this.refreshTranslationExtensions();
@@ -316,69 +217,19 @@ export default {
       this.note.parentPageId = this.parentPageId;
     }
     this.displayFormTitle();
-    $(document).on('mousedown', () => {
-      if (this.publishAndPost) {
-        window.setTimeout(() => {
-          this.publishAndPost = false;
-        }, this.waitTimeUntilCloseMenu);
-      }
-    });
-    document.addEventListener('note-custom-plugins', () => {
-      this.$refs.noteCustomPlugins.open();
-    });
-    this.$root.$on('note-table-plugins', () => {
-      this.$refs.noteTablePlugins.open();
-    });
-    this.$root.$on('updateData', data => {
-      this.note.content= data;
-    });
     this.$root.$on('show-alert', this.displayMessage);
-    this.$root.$on('hide-translations', () => {
-      this.showTranslationBar=false;
-    });
     this.$root.$on('display-treeview-items', filter => {
       if ( urlParams.has('noteId') ) {
         this.$refs.noteTreeview.open(this.note, 'includePages', null, filter);
       } else if (urlParams.has('parentNoteId')) {
-        this.$notesService.getNoteById(this.parentPageId).then(data => {
-          const note = data;
-          this.$refs.noteTreeview.open(note, 'includePages', null, filter);
-          this.$refs.noteTreeview.open(note, 'includePages', null, filter);
+        this.$notesService.getNoteById(this.parentPageId).then(note => {
+          this.openTreeView(note, 'includePages', null, filter);
         });
       }
     });
-    this.$root.$on('add-translation', lang => {
-      this.addTranslation(lang);
-    });
-    this.$root.$on('lang-translation-changed', lang => {
-      this.changeTranslation(lang);
-    });
-    this.$root.$on('delete-lang-translation', translation => {
-      const noteId= !this.note.draftPage?this.note.id:this.note.targetPageId;
-      this.deleteTranslation(translation, noteId);
-    });
-    this.$root.$on('update-note-title', this.updateNoteTitle);
-    this.$root.$on('update-note-content', this.updateNoteContent);
-    this.$root.$on('include-page', (note) => {
-      const editorSelectedElement = this.editor.getSelection().getStartElement();
-      if (this.editor.getSelection().getSelectedText()) {
-        if (editorSelectedElement.is('a')) {
-          if (editorSelectedElement.getAttribute( 'class' ) === 'noteLink') {
-            this.editor.getSelection().getStartElement().remove();
-            this.editor.insertHtml(`<a href='${note.noteId}' class='noteLink'>${note.name}</a>`);
-          }
-          if (editorSelectedElement.getAttribute( 'class' ) === 'labelLink') {
-            const linkText = editorSelectedElement.getHtml();
-            this.editor.getSelection().getStartElement().remove();
-            this.editor.insertHtml(`<a href='${note.noteId}' class='noteLink'>${linkText}</a>`);
-          }
-        } else {
-          this.editor.insertHtml(`<a href='${note.noteId}' class='labelLink'>${this.editor.getSelection().getSelectedText()}</a>`);
-        }
-      } else {
-        this.editor.insertHtml(`<a href='${note.noteId}' class='noteLink'>${note.name}</a>`);
-      }
-    });
+    this.$root.$on('add-translation', this.addTranslation);
+    this.$root.$on('lang-translation-changed', this.changeTranslation);
+    this.$root.$on('delete-lang-translation', this.deleteTranslation);
 
     document.addEventListener('note-navigation-plugin', () => {
       this.$root.$emit('show-alert', {
@@ -387,12 +238,113 @@ export default {
       });
     });
   },
-  mounted() {
-    this.init();
-  },
   methods: {
+    closePluginsDrawer() {
+      this.$refs.editor.closePluginsDrawer();
+    },
+    openTreeView(noteId, source, includeDisplay, filter) {
+      this.$notesService.getNoteById(noteId, this.selectedLanguage).then(note => {
+        this.$refs.noteTreeview.open(note, source, includeDisplay, filter);
+      });
+    },
     init() {
-      this.initCKEditor();
+      this.$refs.editor.initCKEditor();
+    },
+    editorReady(editor) {
+      this.editor = editor;
+      this.actualNote.content = editor.getData();
+      if (this.editor) {
+        if (this.draftNote?.id || this.loadedNote?.id) {
+          this.fillNote(this.draftNote || this.loadedNote);
+          this.displayDraftMessage();
+          this.initActualNoteDone = true;
+          this.newDraft = !this.draftNote;
+        }
+        this.initDone = true;
+      }
+    },
+    updateNoteData(noteObject) {
+      this.note.title = noteObject.title;
+      this.note.content = noteObject.content;
+    },
+    postNote(toPublish) {
+      this.postingNote = true;
+      clearTimeout(this.saveDraft);
+      if (this.validateForm()) {
+        const note = {
+          id: this.note?.draftPage? this.note.targetPageId || null : this.note?.id,
+          title: this.note.title,
+          name: this.note.name,
+          lang: this.note.lang,
+          wikiType: this.note.wikiType,
+          wikiOwner: this.note.wikiOwner,
+          content: this.$noteUtils.getContentToSave('notesContent', this.oembedMinWidth) || this.note.content,
+          parentPageId: this.note?.draftPage && this.note?.targetPageId === this.parentPageId ? null : this.parentPageId,
+          toBePublished: toPublish,
+          appName: this.appName,
+        };
+        if (note.id) {
+          this.updateNote(note);
+        } else {
+          this.createNote(note);
+        }
+      }
+    },
+    validateForm() {
+      if (!this.note.title) {
+        this.enableClickOnce();
+        this.$root.$emit('show-alert', {
+          type: 'error',
+          message: this.$t('notes.message.missingTitle')
+        });
+        return false;
+      }
+      if (!isNaN(this.note.title)) {
+        this.enableClickOnce();
+        this.$root.$emit('show-alert', {
+          type: 'error',
+          message: this.$t('notes.message.numericTitle')
+        });
+        return false;
+      } else {
+        const cleanedTitle = this.note.title.replace(/<[^>]*>|&nbsp;/g, '').trim();
+        if (cleanedTitle.length < 3 || cleanedTitle.length > this.titleMaxLength) {
+          this.enableClickOnce();
+          this.$root.$emit('show-alert', {
+            type: 'error',
+            message: this.$t('notes.message.missingLengthTitle')
+          });
+          return false;
+        }
+      }
+      return true;
+    },
+    updateNote(note) {
+      return this.$notesService.updateNoteById(note).then(data => {
+        this.removeLocalStorageCurrentDraft();
+        this.redirectAfterSave(data || note);
+      }).catch(e => {
+        this.enableClickOnce();
+        this.$root.$emit('show-alert', {
+          type: 'error',
+          message: this.$t(`notes.message.${e.message}`)
+        });
+      });
+    },
+    createNote(note) {
+      return this.$notesService.createNote(note).then(data => {
+        const notePath = this.$notesService.getPathByNoteOwner(data, this.appName).replace(/ /g, '_');
+        // delete draft note
+        const draftNote = JSON.parse(localStorage.getItem(`draftNoteId-${this.note.id}-${this.slectedLanguage}`));
+        this.deleteDraftNote(draftNote, notePath);
+        this.redirectAfterSave(data || note);
+      }).catch(e => {
+        this.enableClickOnce();
+        this.$root.$emit('show-alert', {
+          type: 'error',
+          message: this.$t(`notes.message.${e.message}`)
+        });
+      });
     },
     autoSave() {
       // No draft saving if init not done or in edit mode for the moment
@@ -405,10 +357,10 @@ export default {
       }
 
       // if the Note is not updated, no need to autosave anymore
-      if ((this.note.title && this.note.title === this.actualNote.title) && (this.note.content && this.note.content === this.actualNote.content)) {
+      if ((this.note?.title === this.actualNote.title) && (this.note?.content === this.actualNote.content)) {
         return;
       }
-     
+
       clearTimeout(this.saveDraft);
       this.saveDraft = setTimeout(() => {
         this.savingDraft = true;
@@ -502,7 +454,7 @@ export default {
               }
               if (note?.children?.length) {
                 this.updateNoteContent(childContainer);
-                this.setFocus();
+                this.$refs.editor.setFocus();
               }
             });
         } else {
@@ -530,69 +482,6 @@ export default {
       }
       return draftNote;
     },
-    postNote(toPublish) {
-      this.postingNote = true;
-      clearTimeout(this.saveDraft);
-      if (this.validateForm()) {
-        let note;
-        if (this.note.draftPage) {
-          note = {
-            id: this.note.targetPageId ? this.note.targetPageId : null,
-            title: this.note.title,
-            name: this.note.name,
-            lang: this.note.lang,
-            wikiType: this.note.wikiType,
-            wikiOwner: this.note.wikiOwner,
-            content: this.$noteUtils.getContentToSave('notesContent', this.oembedMinWidth) || this.note.content,
-            parentPageId: this.note.targetPageId === this.parentPageId ? null : this.parentPageId,
-            toBePublished: toPublish,
-            appName: this.appName,
-          };
-        } else {
-          note = {
-            id: this.note.id,
-            title: this.note.title,
-            name: this.note.name,
-            lang: this.note.lang,
-            wikiType: this.note.wikiType,
-            wikiOwner: this.note.wikiOwner,
-            content: this.$noteUtils.getContentToSave('notesContent', this.oembedMinWidth) || this.note.content,
-            parentPageId: this.parentPageId,
-            toBePublished: toPublish,
-            appName: this.appName,
-          };
-        }
-        let notePath = '';
-        if (note.id) {
-          this.$notesService.updateNoteById(note).then(data => {
-            this.removeLocalStorageCurrentDraft();
-            this.redirectAfterSave(data || note);
-          }).catch(e => {
-            console.error('Error when update note page', e);
-            this.enableClickOnce();
-            this.$root.$emit('show-alert', {
-              type: 'error',
-              message: this.$t(`notes.message.${e.message}`)
-            });
-          });
-        } else {
-          this.$notesService.createNote(note).then(data => {
-            notePath = this.$notesService.getPathByNoteOwner(data, this.appName).replace(/ /g, '_');
-            // delete draft note
-            const draftNote = JSON.parse(localStorage.getItem(`draftNoteId-${this.note.id}`));
-            this.deleteDraftNote(draftNote, notePath);
-            this.redirectAfterSave(data || note);
-          }).catch(e => {
-            console.error('Error when creating note page', e);
-            this.enableClickOnce();
-            this.$root.$emit('show-alert', {
-              type: 'error',
-              message: this.$t(`notes.message.${e.message}`)
-            });
-          });
-        }
-      }
-    },
     redirectAfterSave(note) {
       if (this.webPageUrl) {
         window.location.href = this.webPageUrl;
@@ -608,13 +497,6 @@ export default {
         window.location.href = `${notePath}${translation}`;
       }
     },
-    openPublishAndPost(event) {
-      this.publishAndPost = !this.publishAndPost;
-      if (event) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-    },
     saveNoteDraft(update) {
       const draftNote = this.fillDraftNote();
       if (this.note.title || this.note.content) {
@@ -678,191 +560,6 @@ export default {
         });
       }
     },
-    closePluginsDrawer() {
-      this.$refs.noteCustomPlugins.close();
-    },
-    initCKEditor: function() {
-      if (this.editor?.destroy) {
-        this.editor.destroy(true);
-      }
-
-      CKEDITOR.dtd.$removeEmpty['i'] = false;
-
-      CKEDITOR.on('dialogDefinition', function (e) {
-        if (e.data.name === 'link') {
-          const informationTab = e.data.definition.getContents('target');
-          const targetField = informationTab.get('linkTargetType');
-          targetField['default'] = '_self';
-          targetField.items = targetField.items.filter(t => ['_self', '_blank'].includes(t[1]));
-        }
-      });
-      // this line is mandatory when a custom skin is defined
-      CKEDITOR.basePath = '/commons-extension/ckeditor/';
-      const self = this;
-
-      $(this.$refs.notesContent).ckeditor({
-        customConfig: `${eXo.env.portal.context}/${eXo.env.portal.rest}/richeditor/configuration?type=notes&v=${eXo.env.client.assetsVersion}`,
-        allowedContent: true,
-        spaceURL: self.spaceURL,
-        spaceGroupId: `/spaces/${this.spaceGroupId}`,
-        imagesDownloadFolder: 'DRIVE_ROOT_NODE/notes/images',
-        toolbarLocation: 'top',
-        extraAllowedContent: 'table[summary];img[style,class,src,referrerpolicy,alt,width,height];span(*)[*]{*}; span[data-atwho-at-query,data-atwho-at-value,contenteditable]; a[*];i[*];',
-        removeButtons: '',
-        enterMode: CKEDITOR.ENTER_P,
-        shiftEnterMode: CKEDITOR.ENTER_BR,
-        copyFormatting_allowedContexts: true,
-        indentBlock: {
-          offset: 40,
-          unit: 'px'
-        },
-        format_tags: 'p;h1;h2;h3',
-        bodyClass: 'notesContent',
-        dialog_noConfirmCancel: true,
-        colorButton_enableMore: true,
-        isImagePasteBlocked: this.webPageNote,
-        hideUploadImageLink: this.webPageNote,
-        isImageDragBlocked: this.webPageNote,
-        sharedSpaces: {
-          top: 'notesTop'
-        },
-        on: {
-          instanceReady: function (evt) {
-            self.editor = evt.editor;
-            self.actualNote.content = self.editor.getData();
-            $(self.editor.document.$)
-              .find('.atwho-inserted')
-              .each(function() {
-                $(this).on('click', '.remove', function() {
-                  $(this).closest('[data-atwho-at-query]').remove();
-                });
-              });
-
-            const treeviewParentWrapper =  self.editor.window.$.document.getElementById('note-children-container');
-            if ( treeviewParentWrapper ) {
-              treeviewParentWrapper.contentEditable='false';
-            }
-
-            const removeTreeviewBtn =  evt.editor.document.getById( 'remove-treeview' );
-            if ( removeTreeviewBtn ) {
-              evt.editor.editable().attachListener( removeTreeviewBtn, 'click', function() {
-                const treeviewParentWrapper = evt.editor.document.getById( 'note-children-container' );
-                if ( treeviewParentWrapper) {
-                  treeviewParentWrapper.remove();
-                  self.note.content = evt.editor.getData();
-                }
-                self.setFocus();
-              });
-            }
-            window.setTimeout(() => self.setFocus(), 50);
-            self.$root.$applicationLoaded();
-            self.instanceReady = true;
-          },
-          change: function (evt) {
-            if (!self.initialized) {
-              // First time setting data
-              self.initialized = true;
-              return;
-            }
-            self.note.content = evt.editor.getData();
-            self.autoSave();
-            const removeTreeviewBtn =  evt.editor.document.getById( 'remove-treeview' );
-            if (removeTreeviewBtn) {
-              evt.editor.editable().attachListener(removeTreeviewBtn, 'click', function() {
-                const treeviewParentWrapper = evt.editor.document.getById( 'note-children-container' );
-                if ( treeviewParentWrapper) {
-                  const newLine = treeviewParentWrapper.getNext();
-                  treeviewParentWrapper.remove();
-                  if ( newLine.$.innerText.trim().length === 0) {
-                    newLine.remove();
-                  }
-                  self.note.content = evt.editor.getData();
-                }
-              });
-            }
-          },
-          fileUploadResponse: function() {
-            /*add plugin fileUploadResponse to handle file upload response ,
-              in this method we can get the response from server and update the editor content
-              this method is called when file upload is finished*/
-            self.editor.once('afterInsertHtml', ()=> {
-              window.setTimeout(() => {
-                self.editor.fire('mode');
-              }, 2000);
-            });
-          },
-          doubleclick: function(evt) {
-            const element = evt.data.element;
-            if ( element && element.is('a')) {
-              const noteId = element.getAttribute( 'href' );
-              self.$notesService.getNoteById(noteId,this.selectedLanguage).then(data => {
-                const note = data;
-                self.$refs.noteTreeview.open(note, 'includePages', 'no-arrow');
-              });
-            }
-          }
-        }
-      });
-    },
-    setToolBarEffect() {
-      const elementNewTop = document.getElementById('notesTop');
-      if (this.editor){
-        this.editor.on('contentDom', function () {
-          this.document.on('click', function(){
-            elementNewTop.classList.add('darkComposerEffect');
-          });
-        });
-        this.editor.on('contentDom', function () {
-          this.document.on('keyup', function(){
-            elementNewTop.classList.add('darkComposerEffect');
-          });
-        });
-      }
-      $('#notesEditor').parent().click(() => {
-        elementNewTop.classList.remove('darkComposerEffect');
-        elementNewTop.classList.add('greyComposerEffect');
-      });
-      $('#notesEditor').parent().keyup(() => {
-        elementNewTop.classList.remove('darkComposerEffect');
-        elementNewTop.classList.add('greyComposerEffect');
-      });
-    },
-    setFocus() {
-      if (!this.noteId) {
-        this.$refs.noteTitle.focus();
-      } else if (this.editor) {
-        window.setTimeout(() => {
-          this.$nextTick().then(() => this.editor.focus());
-        }, 200);
-      }
-    },
-    validateForm() {
-      if (!this.note.title) {
-        this.enableClickOnce();
-        this.$root.$emit('show-alert', {
-          type: 'error',
-          message: this.$t('notes.message.missingTitle')
-        });
-        return false;
-      }
-      if (!isNaN(this.note.title)) {
-        this.enableClickOnce();
-        this.$root.$emit('show-alert', {
-          type: 'error',
-          message: this.$t('notes.message.numericTitle')
-        });
-        return false;
-      } else if (this.note.title.replace(/<[^>]*>/g, '').replace(/&nbsp;/g, '').trim().length < 3 || this.note.title.replace(/<[^>]*>/g, '').replace(/&nbsp;/g, '').trim().length > this.titleMaxLength) {
-        this.enableClickOnce();
-        this.$root.$emit('show-alert', {
-          type: 'error',
-          message: this.$t('notes.message.missingLengthTitle')
-        });
-        return false;
-      } else {
-        return true;
-      }
-    },
     displayDraftMessage() {
       if (!this.draftNote) {
         return;
@@ -963,16 +660,6 @@ export default {
       this.postingNote = false;
       this.postKey++;
     },
-    showTranslations() {
-      if (this.noteId){
-        this.showTranslationBar=true;
-        this.$refs.translationsEditBar.show(this.selectedLanguage);
-      }
-    },
-    hideTranslations() {
-      this.showTranslationBar=false;
-      this.$refs.translationsEditBar.hide();
-    },
     isDefaultContent(noteContent) {
       const div = document.createElement('div');
       div.innerHTML = noteContent;
@@ -1027,7 +714,8 @@ export default {
       const language = this.allLanguages.find(item => item.value === lang);
       return language?language.text:lang;
     },
-    deleteTranslation(translation,noteId){
+    deleteTranslation(translation){
+      const noteId = !this.note?.draftPage && this.note?.id || this.note?.targetPageId;
       return this.$notesService.deleteNoteTranslation(noteId,translation.value).then(() => {
         this.translations=this.translations.filter(item => item.value !== translation.value);
         const messageObject = {
@@ -1057,20 +745,13 @@ export default {
       }
       this.note.content = '';
       this.note.lang = this.selectedLanguage;
-      this.newDraft=true;
-      this.initCKEditor();
+      this.newDraft = true;
+      this.$refs.editor.resetEditorData();
       document.dispatchEvent(new CustomEvent('translation-added',{ detail: originNoteContent }));
     },
-    updateNoteTitle(title) {
-      this.note.title = title;
-    },
     updateNoteContent(content) {
       this.note.content = content;
-      if (this.editor) {
-        this.editor.setData(content);
-      } else {
-        this.$refs.notesContent.value = content;
-      }
+      this.$refs.editor.setEditorData(content);
     },
     changeTranslation(lang){
       this.closeAlertMessage();
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-editor/initComponents.js b/notes-webapp/src/main/webapp/vue-app/notes-editor/initComponents.js
index 1bfeadad5e..157e19e7ee 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-editor/initComponents.js
+++ b/notes-webapp/src/main/webapp/vue-app/notes-editor/initComponents.js
@@ -1,18 +1,9 @@
 import NotesEditorDashboard from './components/NotesEditorDashboard.vue';
-import NoteCustomPlugins from './components/NoteCustomPlugins.vue';
-import NoteTablePluginsDrawer from './components/NoteTablePluginsDrawer.vue';
-import TranslationsEditBar from './components/TranslationsEditBar.vue';
-import NoteTreeviewDrawer from '../notes/components/NoteTreeviewDrawer.vue';
-
 
 const components = {
   'notes-editor-dashboard': NotesEditorDashboard,
-  'note-custom-plugins': NoteCustomPlugins,
-  'note-treeview-drawer': NoteTreeviewDrawer,
-  'note-table-plugins-drawer': NoteTablePluginsDrawer,
-  'note-translation-edit-bar': TranslationsEditBar,
 };
 
 for (const key in components) {
   Vue.component(key, components[key]);
-}
\ No newline at end of file
+}
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-editor/services.js b/notes-webapp/src/main/webapp/vue-app/notes-editor/services.js
index f06153bab3..7070a47138 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-editor/services.js
+++ b/notes-webapp/src/main/webapp/vue-app/notes-editor/services.js
@@ -17,7 +17,6 @@
  *
  */
 
-import * as noteUtils from './js/Utils.js';
 import * as notesService from '../../javascript/eXo/wiki/notesService.js';
 import * as notePageViewService from '../note-page-view/js/NotePageViewService.js';
 
@@ -32,9 +31,3 @@ if (!Vue.prototype.$notePageViewService) {
     value: notePageViewService,
   });
 }
-
-if (!Vue.prototype.$noteUtils) {
-  window.Object.defineProperty(Vue.prototype, '$noteUtils', {
-    value: noteUtils,
-  });
-}
\ No newline at end of file
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NoteCustomPlugins.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteCustomPlugins.vue
similarity index 95%
rename from notes-webapp/src/main/webapp/vue-app/notes-editor/components/NoteCustomPlugins.vue
rename to notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteCustomPlugins.vue
index 5988522a9d..d44aa0b589 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NoteCustomPlugins.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteCustomPlugins.vue
@@ -113,22 +113,19 @@ export default {
         });
       }
     },
-    openPlugin(id){
-      if (id==='table'){
-        this.$root.$emit('note-table-plugins');
-      } else if ( id === 'note') {
+    openPlugin(id) {
+      if (id === 'note') {
         this.$root.$emit('display-treeview-items', 'published');
 
-      } else if ( id === 'Navigation') {
+      } else if (id === 'Navigation') {
         this.instance.execCommand('ToC');
         this.treeviewInserted = true;
         this.close();
-      }
-      else {
+      } else {
         this.instance.execCommand(id);
         this.close();
       }
     }
   }
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue
new file mode 100644
index 0000000000..f9f3e0d4f4
--- /dev/null
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue
@@ -0,0 +1,213 @@
+<!--
+ 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.
+-->
+
+<template>
+  <div class="notes-topbar">
+    <div
+      v-if="!showTranslationBar"
+      class="notesActions white">
+      <div class="notesFormButtons d-inline-flex flex-wrap width-full pa-3 ma-0">
+        <div class="notesFormLeftActions d-inline-flex align-center me-10">
+          <img
+            :src="srcImageNote"
+            :alt="formTitle">
+          <span class="notesFormTitle ps-2">{{ formTitle }}</span>
+          <v-tooltip bottom>
+            <template #activator="{ on, attrs }">
+              <v-icon
+                :aria-label="$t('notes.label.button.translations.options')"
+                size="22"
+                class="clickable pa-2"
+                :class="langButtonColor"
+                v-on="on"
+                v-bind="attrs"
+                @click="showTranslations">
+                fa-language
+              </v-icon>
+            </template>
+            <span class="caption">
+              {{ langButtonTooltipText }}
+            </span>
+          </v-tooltip>
+        </div>
+        <div class="notesFormRightActions pr-7">
+          <p class="draftSavingStatus mr-7">{{ draftSavingStatus }}</p>
+          <button
+            id="notesUpdateAndPost"
+            class="btn btn-primary primary px-2 py-0"
+            :key="postKey"
+            :aria-label="publishButtonText"
+            @click.once="postNote(false)">
+            {{ publishButtonText }}
+            <v-icon
+              v-if="!webPageNote && enablePublishAndPost"
+              id="notesPublichAndPost"
+              dark
+              @click.stop.prevent="openPublishAndPost">
+              mdi-menu-down
+            </v-icon>
+          </button>
+          <v-menu
+            v-if="!webPageNote"
+            v-model="publishAndPost"
+            :attach="'#notesUpdateAndPost'"
+            transition="scroll-y-transition"
+            content-class="publish-and-post-btn width-full"
+            offset-y
+            left>
+            <v-list-item
+              @click.stop="postNote(true)"
+              class="px-2">
+              <v-icon
+                size="16"
+                class="primary--text clickable pr-2">
+                mdi-arrow-collapse-up
+              </v-icon>
+              <span class="body-2 text-color">
+                {{ publishAndPostButtonText }}
+              </span>
+            </v-list-item>
+          </v-menu>
+        </div>
+      </div>
+    </div>
+    <note-translation-edit-bar
+      ref="translationsEditBar"
+      :note="note"
+      :languages="languages"
+      :translations="translations"
+      :is-mobile="isMobile"
+      @translations-hidden="showTranslationBar = false"/>
+    <div id="notesTop" class="width-full darkComposerEffect"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      srcImageNote: '/notes/images/wiki.png',
+      showTranslationBar: false,
+      publishAndPost: false,
+      waitTimeUntilCloseMenu: 200
+    };
+  },
+  props: {
+    note: {
+      type: Object,
+      default: null
+    },
+    noteIdParam: {
+      type: String,
+      default: null
+    },
+    postKey: {
+      type: Number,
+      default: 1
+    },
+    formTitle: {
+      type: String,
+      default: null
+    },
+    selectedLanguage: {
+      type: Object,
+      default: null
+    },
+    isMobile: {
+      type: Boolean,
+      default: false
+    },
+    webPageNote: {
+      type: Boolean,
+      default: false
+    },
+    languages: {
+      type: Array,
+      default: () => []
+    },
+    translations: {
+      type: Array,
+      default: () => []
+    },
+    draftSavingStatus: {
+      type: String,
+      default: null
+    },
+    publishAndPostButtonText: {
+      type: String,
+      default: null
+    },
+    publishButtonText: {
+      type: String,
+      default: null
+    },
+    langButtonTooltipText: {
+      type: String,
+      default: null
+    },
+    webPageUrl: {
+      type: Boolean,
+      default: false
+    },
+    enablePublishAndPost: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    langButtonColor(){
+      if (!this.noteIdParam){
+        return 'disabled--text not-clickable remove-focus';
+      }
+      return this.selectedLanguage ? 'primary--text':'';
+    },
+  },
+  created() {
+    this.$root.$on('hide-translations', this.hideTranslations);
+    this.initPublishAndPost();
+  },
+  methods: {
+    initPublishAndPost() {
+      $(document).on('mousedown', () => {
+        if (this.publishAndPost) {
+          window.setTimeout(() => {
+            this.publishAndPost = false;
+          }, this.waitTimeUntilCloseMenu);
+        }
+      });
+    },
+    openPublishAndPost() {
+      this.publishAndPost = !this.publishAndPost;
+    },
+    postNote(toPublish) {
+      this.$emit('post-note', toPublish);
+    },
+    showTranslations() {
+      if (this.noteIdParam) {
+        this.showTranslationBar = true;
+        this.$refs.translationsEditBar.show(this.selectedLanguage);
+      }
+    },
+    hideTranslations() {
+      this.showTranslationBar = false;
+      this.$refs.translationsEditBar.hide();
+    },
+  }
+};
+</script>
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
new file mode 100644
index 0000000000..fdc09f66fa
--- /dev/null
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteFullRichEditor.vue
@@ -0,0 +1,407 @@
+<!--
+ 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.
+-->
+
+<template>
+  <div
+    id="notesEditor"
+    class="notesEditor width-full">
+    <note-editor-top-bar
+      :note="note"
+      :languages="languages"
+      :form-title="formTitle"
+      :note-id-param="noteIdParam"
+      :web-page-note="webPageNote"
+      :selected-language="selectedLanguage"
+      :translations="translations"
+      :is-mobile="isMobile"
+      :post-key="postKey"
+      :draft-saving-status="draftSavingStatus"
+      :publish-button-text="publishButtonText"
+      :publish-and-post-button-text="publishAndPostButtonText"
+      :lang-button-tooltip-text="langButtonTooltipText"
+      :enable-publish-and-post="enablePublishAndPost"
+      :web-page-url="webPageUrl"
+      @post-note="postNote" />
+    <form class="notes-content">
+      <div class="notes-content-form singlePageApplication my-5 mx-auto py-1 px-5">
+        <div
+          v-show="!webPageNote"
+          class="formInputGroup notesTitle white px-5">
+          <input
+            id="notesTitle"
+            :ref="editorTitleInputRef"
+            v-model="noteObject.title"
+            :placeholder="titlePlaceholder"
+            type="text"
+            class="py-0 px-1 mt-5 mb-0">
+        </div>
+        <div class="formInputGroup white overflow-auto flex notes-content-wrapper">
+          <textarea
+            :id="editorBodyInputRef"
+            :ref="editorBodyInputRef"
+            :placeholder="bodyPlaceholder"
+            :name="editorBodyInputRef"
+            class="notesFormInput">
+            </textarea>
+        </div>
+      </div>
+    </form>
+    <note-custom-plugins
+      ref="noteCustomPlugins"
+      :instance="editor" />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      noteObject: null,
+      editor: null,
+    };
+  },
+  props: {
+    note: {
+      type: Object,
+      default: null
+    },
+    titlePlaceholder: {
+      type: String,
+      default: null
+    },
+    bodyPlaceholder: {
+      type: String,
+      default: null
+    },
+    languages: {
+      type: Array,
+      default: () => []
+    },
+    translations: {
+      type: Array,
+      default: () => []
+    },
+    formTitle: {
+      type: String,
+      default: null
+    },
+    selectedLanguage: {
+      type: Object,
+      default: null
+    },
+    isMobile: {
+      type: Boolean,
+      default: false
+    },
+    appName: {
+      type: String,
+      default: null
+    },
+    draftSavingStatus: {
+      type: String,
+      default: null
+    },
+    noteIdParam: {
+      type: String,
+      default: null
+    },
+    postKey: {
+      type: Number,
+      default: 1
+    },
+    webPageNote: {
+      type: Boolean,
+      default: false
+    },
+    publishAndPostButtonText: {
+      type: String,
+      default: null
+    },
+    publishButtonText: {
+      type: String,
+      default: null
+    },
+    langButtonTooltipText: {
+      type: String,
+      default: null
+    },
+    webPageUrl: {
+      type: Boolean,
+      default: false
+    },
+    editorBodyInputRef: {
+      type: String,
+      default: 'notesContent'
+    },
+    editorTitleInputRef: {
+      type: String,
+      default: 'noteTitle'
+    },
+    enablePublishAndPost: {
+      type: Boolean,
+      default: false
+    },
+    spaceUrl: {
+      type: String,
+      default: null
+    },
+    spaceGroupId: {
+      type: String,
+      default: null
+    }
+  },
+  watch: {
+    'noteObject.title': function() {
+      this.updateData();
+    },
+    'note.title': function () {
+      this.noteObject.title = this.note?.title;
+    }
+  },
+  created() {
+    this.cloneNoteObject();
+    this.$root.$on('include-page', this.includePage);
+    this.$root.$on('update-note-title', this.updateTranslatedNoteTitle);
+    this.$root.$on('update-note-content', this.updateTranslatedNoteContent);
+    document.addEventListener('note-custom-plugins', this.openCustomPluginsDrawer);
+  },
+  methods: {
+    updateTranslatedNoteTitle(title) {
+      this.noteObject.title = title;
+    },
+    updateTranslatedNoteContent(content) {
+      this.noteObject.content = content;
+      this.setEditorData(content);
+    },
+    hideTranslationsBar() {
+      this.$root.$emit('hide-translations');
+    },
+    setEditorData(content) {
+      if (this.editor) {
+        this.editor.setData(content);
+      } else {
+        this.$refs[this.editorBodyInputRef].value = content;
+      }
+    },
+    cloneNoteObject() {
+      this.noteObject = structuredClone(this.note);
+    },
+    updateData() {
+      this.$emit('update-data', this.noteObject);
+      this.hideTranslationsBar();
+    },
+    autoSave() {
+      this.$emit('auto-save', this.noteObject);
+    },
+    createLinkElement(link, label, clazz) {
+      return `<a href='${link}' class='${clazz}'>${label}</a>`;
+    },
+    includePage(note) {
+      const editorSelectedElement = this.editor?.getSelection()?.getStartElement();
+      if (this.editor?.getSelection()?.getSelectedText()) {
+        if (editorSelectedElement.is('a')) {
+          if (editorSelectedElement?.getAttribute('class') === 'noteLink') {
+            this.editor.getSelection()?.getStartElement()?.remove();
+            this.editor.insertHtml(this.createLinkElement(note.noteId, note.name, 'noteLink'));
+          }
+          if (editorSelectedElement.getAttribute('class') === 'labelLink') {
+            const linkText = editorSelectedElement.getHtml();
+            this.editor.getSelection().getStartElement().remove();
+            this.editor.insertHtml(this.createLinkElement(note.noteId, linkText, 'noteLink'));
+          }
+        } else {
+          const linkText = this.editor?.getSelection()?.getSelectedText();
+          this.editor.insertHtml(this.createLinkElement(note.noteId, linkText, 'labelLink'));
+        }
+      } else {
+        this.editor.insertHtml(this.createLinkElement(note.noteId, note.name, 'noteLink'));
+      }
+    },
+    setFocus() {
+      if (!this.noteIdParam) {
+        this.$refs[this.editorTitleInputRef].focus();
+      } else if (this.editor) {
+        window.setTimeout(() => {
+          this.$nextTick().then(() => this.editor.focus());
+        }, 200);
+      }
+    },
+    postNote(toPublish) {
+      this.$emit('post-note', toPublish);
+    },
+    resetEditorData() {
+      this.noteObject.title = null;
+      this.editor.setData('');
+    },
+    initCKEditor: function() {
+      if (this.editor?.destroy) {
+        this.editor.destroy(true);
+      }
+
+      CKEDITOR.dtd.$removeEmpty['i'] = false;
+
+      CKEDITOR.on('dialogDefinition', function (e) {
+        if (e.data.name === 'link') {
+          const informationTab = e.data.definition.getContents('target');
+          const targetField = informationTab.get('linkTargetType');
+          targetField['default'] = '_self';
+          targetField.items = targetField.items.filter(t => ['_self', '_blank'].includes(t[1]));
+        }
+      });
+
+      // this line is mandatory when a custom skin is defined
+      CKEDITOR.basePath = '/commons-extension/ckeditor/';
+      const self = this;
+
+      $(this.$refs[this.editorBodyInputRef]).ckeditor({
+        customConfig: `${eXo?.env?.portal.context}/${eXo?.env?.portal.rest}/richeditor/configuration?type=notes&v=${eXo.env.client.assetsVersion}`,
+        allowedContent: true,
+        spaceURL: self.spaceURL,
+        spaceGroupId: self.spaceGroupId,
+        imagesDownloadFolder: 'DRIVE_ROOT_NODE/notes/images',
+        toolbarLocation: 'top',
+        extraAllowedContent: 'table[summary];img[style,class,src,referrerpolicy,alt,width,height];span(*)[*]{*}; span[data-atwho-at-query,data-atwho-at-value,contenteditable]; a[*];i[*];',
+        removeButtons: '',
+        enterMode: CKEDITOR.ENTER_P,
+        shiftEnterMode: CKEDITOR.ENTER_BR,
+        copyFormatting_allowedContexts: true,
+        indentBlock: {
+          offset: 40,
+          unit: 'px'
+        },
+        format_tags: 'p;h1;h2;h3',
+        bodyClass: 'notesContent',
+        dialog_noConfirmCancel: true,
+        colorButton_enableMore: true,
+        isImagePasteBlocked: this.webPageNote,
+        hideUploadImageLink: this.webPageNote,
+        isImageDragBlocked: this.webPageNote,
+        sharedSpaces: {
+          top: 'notesTop'
+        },
+        on: {
+          instanceReady: function (evt) {
+            self.editor = evt.editor;
+            self.$emit('editor-ready', self.editor);
+            $(self.editor.document.$)
+              .find('.atwho-inserted')
+              .each(function() {
+                $(this).on('click', '.remove', function() {
+                  $(this).closest('[data-atwho-at-query]').remove();
+                });
+              });
+
+            const treeviewParentWrapper =  self.editor.window.$.document.getElementById('note-children-container');
+            if ( treeviewParentWrapper ) {
+              treeviewParentWrapper.contentEditable='false';
+            }
+
+            const removeTreeviewBtn =  evt.editor.document.getById( 'remove-treeview' );
+            if ( removeTreeviewBtn ) {
+              evt.editor.editable().attachListener( removeTreeviewBtn, 'click', function() {
+                const treeviewParentWrapper = evt.editor.document.getById( 'note-children-container' );
+                if ( treeviewParentWrapper) {
+                  treeviewParentWrapper.remove();
+                  self.noteObject.content = evt.editor.getData();
+                }
+                self.setFocus();
+              });
+            }
+            window.setTimeout(() => self.setFocus(), 50);
+            self.$root.$applicationLoaded();
+            self.instanceReady = true;
+            self.setToolBarEffect();
+          },
+          change: function (evt) {
+            if (!self.initialized) {
+              // First time setting data
+              self.initialized = true;
+              return;
+            }
+            self.noteObject.content = evt.editor.getData();
+            self.autoSave();
+            const removeTreeviewBtn =  evt.editor.document.getById( 'remove-treeview' );
+            if (removeTreeviewBtn) {
+              evt.editor.editable().attachListener(removeTreeviewBtn, 'click', function() {
+                const treeviewParentWrapper = evt.editor.document.getById( 'note-children-container' );
+                if ( treeviewParentWrapper) {
+                  const newLine = treeviewParentWrapper.getNext();
+                  treeviewParentWrapper.remove();
+                  if ( newLine.$.innerText.trim().length === 0) {
+                    newLine.remove();
+                  }
+                  self.noteObject.content = evt.editor.getData();
+                }
+              });
+            }
+            self.updateData();
+          },
+          fileUploadResponse: function() {
+            /*add plugin fileUploadResponse to handle file upload response ,
+              in this method we can get the response from server and update the editor content
+              this method is called when file upload is finished*/
+            self.editor.once('afterInsertHtml', ()=> {
+              window.setTimeout(() => {
+                self.editor.fire('mode');
+              }, 2000);
+            });
+          },
+          doubleclick: function(evt) {
+            const element = evt.data.element;
+            if ( element && element.is('a')) {
+              const noteId = element.getAttribute('href');
+              self.$emit('open-treeview', noteId, 'includePages', 'no-arrow');
+            }
+          }
+        }
+      });
+    },
+    openCustomPluginsDrawer() {
+      this.$refs.noteCustomPlugins.open();
+    },
+    closePluginsDrawer() {
+      this.$refs.noteCustomPlugins.close();
+    },
+    setToolBarEffect() {
+      const elementNewTop = document.getElementById('notesTop');
+      if (this.editor) {
+        this.editor.on('contentDom', function () {
+          this.document.on('click', function () {
+            elementNewTop.classList.add('darkComposerEffect');
+          });
+        });
+        this.editor.on('contentDom', function () {
+          this.document.on('keyup', function () {
+            elementNewTop.classList.add('darkComposerEffect');
+          });
+        });
+      }
+      const notesEditor = document.getElementById('notesEditor');
+      notesEditor.parentElement.addEventListener('click', () => {
+        elementNewTop.classList.remove('darkComposerEffect');
+        elementNewTop.classList.add('greyComposerEffect');
+      });
+      notesEditor.parentElement.addEventListener('keyup', () => {
+        elementNewTop.classList.remove('darkComposerEffect');
+        elementNewTop.classList.add('greyComposerEffect');
+      });
+    },
+  }
+};
+</script>
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/TranslationsEditBar.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/TranslationsEditBar.vue
similarity index 94%
rename from notes-webapp/src/main/webapp/vue-app/notes-editor/components/TranslationsEditBar.vue
rename to notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/TranslationsEditBar.vue
index 37e1c97bac..e998d3fd17 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/TranslationsEditBar.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/TranslationsEditBar.vue
@@ -222,30 +222,30 @@ export default {
 
   methods: {
     show(lang) {
-      this.selectedTranslation={value: lang};
+      this.selectedTranslation = {value: lang};
       if (this.translations){
         const translation = this.translations.find(item => item.value === lang);
-        if (translation){
-          this.selectedTranslation=translation;
+        if (translation) {
+          this.selectedTranslation = translation;
         }
       }
-      this.selectedLang={value: '',text: this.$t('notes.label.chooseLangage')};
-      if (!this.translations && this.note && this.noteId){
+      this.selectedLang = {value: '', text: this.$t('notes.label.chooseLangage')};
+      if (!this.translations && this.note && this.noteId) {
         this.getNoteLanguages(this.noteId);
       }
       this.showTranslationbar=true;
     },
     hide() {
-      this.showTranslationbar=false;
-      this.$root.$emit('hide-translations');
+      this.showTranslationbar = false;
+      this.$emit('translations-hidden');
     },
     add(){
       this.$root.$emit('add-translation', this.selectedLang);
       this.selectedTranslation=this.selectedLang;
-      this.selectedLang={value: '',text: this.$t('notes.label.chooseLangage')};
+      this.selectedLang = {value: '', text: this.$t('notes.label.chooseLangage')};
     },
     changeTranslation(translation){
-      this.selectedTranslation=translation;
+      this.selectedTranslation = translation;
       this.$root.$emit('lang-translation-changed', this.selectedTranslation);
     },
     removeTranslation(translation){
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/initComponents.js b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/initComponents.js
new file mode 100644
index 0000000000..78370a8c58
--- /dev/null
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/initComponents.js
@@ -0,0 +1,33 @@
+import NoteCustomPlugins from '../notes-rich-editor/components/NoteCustomPlugins.vue';
+import TranslationsEditBar from '../notes-rich-editor/components/TranslationsEditBar.vue';
+import NoteTreeviewDrawer from '../notes/components/NoteTreeviewDrawer.vue';
+import NoteEditorTopBar from '../notes-rich-editor/components/NoteEditorTopBar.vue';
+import NoteFullRichEditor from './components/NoteFullRichEditor.vue';
+
+const components = {
+  'note-custom-plugins': NoteCustomPlugins,
+  'note-treeview-drawer': NoteTreeviewDrawer,
+  'note-translation-edit-bar': TranslationsEditBar,
+  'note-editor-top-bar': NoteEditorTopBar,
+  'note-full-rich-editor': NoteFullRichEditor
+};
+
+for (const key in components) {
+  Vue.component(key, components[key]);
+}
+
+
+import * as notesService from '../../javascript/eXo/wiki/notesService.js';
+import * as noteUtils from './js/Utils.js';
+
+if (!Vue.prototype.$notesService) {
+  window.Object.defineProperty(Vue.prototype, '$notesService', {
+    value: notesService,
+  });
+}
+
+if (!Vue.prototype.$noteUtils) {
+  window.Object.defineProperty(Vue.prototype, '$noteUtils', {
+    value: noteUtils,
+  });
+}
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-editor/js/Utils.js b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/js/Utils.js
similarity index 100%
rename from notes-webapp/src/main/webapp/vue-app/notes-editor/js/Utils.js
rename to notes-webapp/src/main/webapp/vue-app/notes-rich-editor/js/Utils.js
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/main.js b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/main.js
new file mode 100644
index 0000000000..c58a07cb04
--- /dev/null
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/main.js
@@ -0,0 +1,12 @@
+import './initComponents.js';
+
+// get overrided components if exists
+if (extensionRegistry) {
+  const components = extensionRegistry.loadComponents('notesRichEditor');
+  if (components && components.length > 0) {
+    components.forEach(cmp => {
+      Vue.component(cmp.componentName, cmp.componentOptions);
+    });
+  }
+}
+
diff --git a/notes-webapp/src/main/webapp/vue-app/notes/services.js b/notes-webapp/src/main/webapp/vue-app/notes/services.js
index 69d4add978..78b516aada 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes/services.js
+++ b/notes-webapp/src/main/webapp/vue-app/notes/services.js
@@ -17,7 +17,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
  */
 
-import * as noteUtils from '../notes-editor/js/Utils.js';
+import * as noteUtils from '../notes-rich-editor/js/Utils.js';
 
 if (!Vue.prototype.$noteUtils) {
   window.Object.defineProperty(Vue.prototype, '$noteUtils', {
diff --git a/notes-webapp/webpack.prod.js b/notes-webapp/webpack.prod.js
index 1025d4ed52..ca5ead0e3e 100644
--- a/notes-webapp/webpack.prod.js
+++ b/notes-webapp/webpack.prod.js
@@ -13,6 +13,7 @@ const config = {
     wikiSearchCard: './src/main/webapp/vue-app/wikiSearch/main.js',
     notes: './src/main/webapp/vue-app/notes/main.js',
     notesEditor: './src/main/webapp/vue-app/notes-editor/main.js',
+    notesRichEditor: './src/main/webapp/vue-app/notes-rich-editor/main.js',
     notesActivityStreamExtension: './src/main/webapp/vue-app/notes-activity-stream-extension/main.js',
     notesFavoriteDrawerExtension: './src/main/webapp/vue-app/notes-favorite-drawer-extension/main.js',
     engagementCenterExtensions: './src/main/webapp/vue-app/engagementCenterExtensions/extensions.js',

From 1c895bfaf94af630d46e1bf64b8e92d37103a9ef Mon Sep 17 00:00:00 2001
From: Helmi Akermi <70575401+hakermi@users.noreply.github.com>
Date: Thu, 4 Jul 2024 11:08:52 +0100
Subject: [PATCH 04/40] fix: Allow add/edit notes in mobile - EXO-72857 -
 Meeds-io/MIPs#128  (#1025)

Allow add/edit notes in mobile
---
 .../main/webapp/vue-app/notes/components/NotesOverview.vue | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

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 bb2aa956d4..5afab9c977 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
@@ -21,7 +21,7 @@
               class="notes-header-icons text-right">
               <div
                 class="d-inline-flex">
-                <v-tooltip bottom v-if="!isMobile && !hasDraft && isManager">
+                <v-tooltip bottom v-if="!hasDraft && isManager">
                   <template #activator="{ on, attrs }">
                     <v-btn
                       v-on="on"
@@ -41,7 +41,7 @@
               </div>
               <div
                 class="d-inline-flex">
-                <v-tooltip bottom v-if="isManager && !isMobile">
+                <v-tooltip bottom v-if="isManager">
                   <template #activator="{ on, attrs }">
                     <v-btn
                       icon
@@ -137,7 +137,7 @@
               contain
               eager />
             <div>
-              <p v-if="!isMobile" class="notes-welcome-patragraph">
+              <p class="notes-welcome-patragraph">
                 <span>{{ $t('notes.label.no-content-no-redactor.content.first') }}</span>
                 <v-tooltip bottom>
                   <template #activator="{ on, attrs }">
@@ -466,7 +466,6 @@ export default {
     isMobile() {
       return this.$vuetify?.breakpoint?.smAndDown;
     },
-
     isAvailableNote() {
       return this.existingNote;
     },

From eeddbe4c3c376313c9974059c3b1d4a3d5d78eb3 Mon Sep 17 00:00:00 2001
From: Helmi Akermi <70575401+hakermi@users.noreply.github.com>
Date: Fri, 28 Jun 2024 15:20:35 +0100
Subject: [PATCH 05/40] feat: Implement note editor labels and icon -
 EXO-71931_EXO-71945_EXO-72011 - Meeds-io/MIPs#128 (#1016)

---
 .../portlet/notes/notesPortlet_ar.properties  |   1 -
 .../portlet/notes/notesPortlet_az.properties  |   1 -
 .../portlet/notes/notesPortlet_ca.properties  |   1 -
 .../portlet/notes/notesPortlet_ceb.properties |   1 -
 .../portlet/notes/notesPortlet_co.properties  |   1 -
 .../portlet/notes/notesPortlet_cs.properties  |   1 -
 .../portlet/notes/notesPortlet_de.properties  |   1 -
 .../portlet/notes/notesPortlet_el.properties  |   1 -
 .../portlet/notes/notesPortlet_en.properties  |   3 +-
 .../notes/notesPortlet_es_ES.properties       |   1 -
 .../portlet/notes/notesPortlet_eu.properties  |   1 -
 .../portlet/notes/notesPortlet_fa.properties  |   1 -
 .../portlet/notes/notesPortlet_fi.properties  |   1 -
 .../portlet/notes/notesPortlet_fil.properties |   1 -
 .../portlet/notes/notesPortlet_fr.properties  |   2 +-
 .../portlet/notes/notesPortlet_hi.properties  |   1 -
 .../portlet/notes/notesPortlet_hu.properties  |   1 -
 .../portlet/notes/notesPortlet_id.properties  |   1 -
 .../portlet/notes/notesPortlet_it.properties  |   1 -
 .../portlet/notes/notesPortlet_ja.properties  |   1 -
 .../portlet/notes/notesPortlet_ko.properties  |   1 -
 .../portlet/notes/notesPortlet_lt.properties  |   1 -
 .../portlet/notes/notesPortlet_ms.properties  |   1 -
 .../portlet/notes/notesPortlet_nl.properties  |   1 -
 .../portlet/notes/notesPortlet_no.properties  |   1 -
 .../portlet/notes/notesPortlet_pcm.properties |   1 -
 .../portlet/notes/notesPortlet_pl.properties  |   1 -
 .../notes/notesPortlet_pt_BR.properties       |   1 -
 .../notes/notesPortlet_pt_PT.properties       |   1 -
 .../portlet/notes/notesPortlet_ro.properties  |   1 -
 .../portlet/notes/notesPortlet_ru.properties  |   1 -
 .../portlet/notes/notesPortlet_sk.properties  |   1 -
 .../portlet/notes/notesPortlet_sl.properties  |   1 -
 .../portlet/notes/notesPortlet_sq.properties  |   1 -
 .../notes/notesPortlet_sv_SE.properties       |   1 -
 .../portlet/notes/notesPortlet_th.properties  |   1 -
 .../portlet/notes/notesPortlet_tl.properties  |   1 -
 .../portlet/notes/notesPortlet_tr.properties  |   1 -
 .../portlet/notes/notesPortlet_uk.properties  |   1 -
 .../notes/notesPortlet_ur_IN.properties       |   1 -
 .../portlet/notes/notesPortlet_vi.properties  |   1 -
 .../notes/notesPortlet_zh_CN.properties       |   1 -
 .../notes/notesPortlet_zh_TW.properties       |   1 -
 .../WEB-INF/conf/wiki/ckeditor/config.js      |  24 ++-
 .../main/webapp/skin/less/notes/notes.less    |  19 +++
 .../components/NotesEditorDashboard.vue       |  28 ++--
 .../components/NoteEditorTopBar.vue           | 143 +++++++++---------
 .../components/NoteFullRichEditor.vue         |  24 +--
 48 files changed, 139 insertions(+), 145 deletions(-)

diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_ar.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_ar.properties
index be9f4f7c51..9239d5b50c 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_ar.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_ar.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=تحميل المزيد
 notes.label.drop.draft=حذفها
 notes.composer.createNotes=Create
 notes.edit.editNotes=تعديل الملاحظة
-notes.edit.editTextFor=تحرير مربع النص {0}
 
 popup.confirm=تأكيد
 popup.msg.confirmation=تأكيد
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_az.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_az.properties
index 3993ad0600..6cab362b1d 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_az.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_az.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Load more
 notes.label.drop.draft=Drop it
 notes.composer.createNotes=Create
 notes.edit.editNotes=Edit note
-notes.edit.editTextFor=Edit text box {0}
 
 popup.confirm=Təsdiqlə
 popup.msg.confirmation=Confirmation
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_ca.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_ca.properties
index b9f0a12d96..c0ca449312 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_ca.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_ca.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Load more
 notes.label.drop.draft=Drop it
 notes.composer.createNotes=Create
 notes.edit.editNotes=Edit note
-notes.edit.editTextFor=Edit text box {0}
 
 popup.confirm=Confirma
 popup.msg.confirmation=Confirmació
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_ceb.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_ceb.properties
index 202ebd6913..b8c31dc9bd 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_ceb.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_ceb.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Load more
 notes.label.drop.draft=Drop it
 notes.composer.createNotes=Create
 notes.edit.editNotes=Edit note
-notes.edit.editTextFor=Edit text box {0}
 
 popup.confirm=Confirm
 popup.msg.confirmation=Ang pagkompirma
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_co.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_co.properties
index fff1d4211f..d9db17394a 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_co.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_co.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Load more
 notes.label.drop.draft=Drop it
 notes.composer.createNotes=Create
 notes.edit.editNotes=Edit note
-notes.edit.editTextFor=Edit text box {0}
 
 popup.confirm=Confirm
 popup.msg.confirmation=Confirmation
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_cs.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_cs.properties
index ab4095e55e..f32cffaaed 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_cs.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_cs.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Load more
 notes.label.drop.draft=Drop it
 notes.composer.createNotes=Create
 notes.edit.editNotes=Edit note
-notes.edit.editTextFor=Edit text box {0}
 
 popup.confirm=Potvrdit
 popup.msg.confirmation=Potvrzení
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_de.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_de.properties
index 8df2716a51..e98702167b 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_de.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_de.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Mehr laden
 notes.label.drop.draft=Ablegen
 notes.composer.createNotes=Create
 notes.edit.editNotes=Notiz bearbeiten
-notes.edit.editTextFor=Text für {0} bearbeiten
 
 popup.confirm=Bestätigen
 popup.msg.confirmation=Bestätigung
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_el.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_el.properties
index d084a46a0d..bb2169dbb2 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_el.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_el.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Load more
 notes.label.drop.draft=Drop it
 notes.composer.createNotes=Create
 notes.edit.editNotes=Edit note
-notes.edit.editTextFor=Edit text box {0}
 
 popup.confirm=Επιβεβαίωση
 popup.msg.confirmation=Επιβεβαίωση
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 fff1d4211f..3bcc757038 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
@@ -46,8 +46,7 @@ notes.button.ok=Move
 notes.button.loadMore=Load more
 notes.label.drop.draft=Drop it
 notes.composer.createNotes=Create
-notes.edit.editNotes=Edit note
-notes.edit.editTextFor=Edit text box {0}
+notes.edit.editNotes=Edit
 
 popup.confirm=Confirm
 popup.msg.confirmation=Confirmation
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_es_ES.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_es_ES.properties
index 8c8a8ed19d..62ff207049 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_es_ES.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_es_ES.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Cargar más
 notes.label.drop.draft=¡Suéltalo!
 notes.composer.createNotes=Create
 notes.edit.editNotes=Editar nota
-notes.edit.editTextFor=Edit text box {0}
 
 popup.confirm=Confirmar
 popup.msg.confirmation=Confirmación
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_eu.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_eu.properties
index fff1d4211f..d9db17394a 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_eu.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_eu.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Load more
 notes.label.drop.draft=Drop it
 notes.composer.createNotes=Create
 notes.edit.editNotes=Edit note
-notes.edit.editTextFor=Edit text box {0}
 
 popup.confirm=Confirm
 popup.msg.confirmation=Confirmation
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_fa.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_fa.properties
index 483f2feec1..bc291940eb 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_fa.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_fa.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Load more
 notes.label.drop.draft=Drop it
 notes.composer.createNotes=Create
 notes.edit.editNotes=Edit note
-notes.edit.editTextFor=Edit text box {0}
 
 popup.confirm=تایید
 popup.msg.confirmation=تاییدیه
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_fi.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_fi.properties
index fff1d4211f..d9db17394a 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_fi.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_fi.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Load more
 notes.label.drop.draft=Drop it
 notes.composer.createNotes=Create
 notes.edit.editNotes=Edit note
-notes.edit.editTextFor=Edit text box {0}
 
 popup.confirm=Confirm
 popup.msg.confirmation=Confirmation
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_fil.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_fil.properties
index bd3e7aaa6e..a028822dce 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_fil.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_fil.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Load more
 notes.label.drop.draft=Drop it
 notes.composer.createNotes=Create
 notes.edit.editNotes=Edit note
-notes.edit.editTextFor=Edit text box {0}
 
 popup.confirm=Kumpirmahin
 popup.msg.confirmation=Ang Kumpirmasyon
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 5587042c2c..38f6f68ee2 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
@@ -45,9 +45,9 @@ notes.button.updateAndPost=Publier
 notes.button.ok=Move
 notes.button.loadMore=Charger plus
 notes.label.drop.draft=Abandonner
+
 notes.composer.createNotes=Créer
 notes.edit.editNotes=Une de mes notes est modifiée
-notes.edit.editTextFor=Éditer le champ texte {0}
 
 popup.confirm=Confirmer
 popup.msg.confirmation=Confirmation
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_hi.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_hi.properties
index fff1d4211f..d9db17394a 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_hi.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_hi.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Load more
 notes.label.drop.draft=Drop it
 notes.composer.createNotes=Create
 notes.edit.editNotes=Edit note
-notes.edit.editTextFor=Edit text box {0}
 
 popup.confirm=Confirm
 popup.msg.confirmation=Confirmation
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_hu.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_hu.properties
index fff1d4211f..d9db17394a 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_hu.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_hu.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Load more
 notes.label.drop.draft=Drop it
 notes.composer.createNotes=Create
 notes.edit.editNotes=Edit note
-notes.edit.editTextFor=Edit text box {0}
 
 popup.confirm=Confirm
 popup.msg.confirmation=Confirmation
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_id.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_id.properties
index e94f00e541..50be0cd79a 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_id.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_id.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=muat lebih banyak
 notes.label.drop.draft=Lepaskan
 notes.composer.createNotes=Create
 notes.edit.editNotes=Edit Catatan
-notes.edit.editTextFor=Edit text box {0}
 
 popup.confirm=Konfirmasi
 popup.msg.confirmation=Konfirmasi
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_it.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_it.properties
index a102fea487..51cc39ab2f 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_it.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_it.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Carica più
 notes.label.drop.draft=Rilasciarlo
 notes.composer.createNotes=Create
 notes.edit.editNotes=Modificare la nota
-notes.edit.editTextFor=Modifichi la casella di testo {0}
 
 popup.confirm=Confermare
 popup.msg.confirmation=Conferma
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_ja.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_ja.properties
index e848c6e78d..d9b1aec144 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_ja.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_ja.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Load more
 notes.label.drop.draft=Drop it
 notes.composer.createNotes=Create
 notes.edit.editNotes=Edit note
-notes.edit.editTextFor=Edit text box {0}
 
 popup.confirm=確認
 popup.msg.confirmation=確認
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_ko.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_ko.properties
index fff1d4211f..d9db17394a 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_ko.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_ko.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Load more
 notes.label.drop.draft=Drop it
 notes.composer.createNotes=Create
 notes.edit.editNotes=Edit note
-notes.edit.editTextFor=Edit text box {0}
 
 popup.confirm=Confirm
 popup.msg.confirmation=Confirmation
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_lt.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_lt.properties
index 4605df7115..e361a58c1a 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_lt.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_lt.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Load more
 notes.label.drop.draft=Drop it
 notes.composer.createNotes=Create
 notes.edit.editNotes=Edit note
-notes.edit.editTextFor=Edit text box {0}
 
 popup.confirm=Patvirtinti
 popup.msg.confirmation=Patvirtinimas
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_ms.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_ms.properties
index bf4b01f3d1..08c0a41382 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_ms.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_ms.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Load more
 notes.label.drop.draft=Drop it
 notes.composer.createNotes=Create
 notes.edit.editNotes=Edit note
-notes.edit.editTextFor=Edit text box {0}
 
 popup.confirm=Mengesahkan
 popup.msg.confirmation=Confirmation
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_nl.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_nl.properties
index 65d58326d5..e7f7bc5232 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_nl.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_nl.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Load more
 notes.label.drop.draft=Drop it
 notes.composer.createNotes=Create
 notes.edit.editNotes=Edit note
-notes.edit.editTextFor=Edit text box {0}
 
 popup.confirm=Bevestig
 popup.msg.confirmation=Bevestiging
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_no.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_no.properties
index 50397148e5..df5a9c89a5 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_no.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_no.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Load more
 notes.label.drop.draft=Drop it
 notes.composer.createNotes=Create
 notes.edit.editNotes=Edit note
-notes.edit.editTextFor=Edit text box {0}
 
 popup.confirm=Bekreft
 popup.msg.confirmation=Bekreftelse
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_pcm.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_pcm.properties
index fff1d4211f..d9db17394a 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_pcm.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_pcm.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Load more
 notes.label.drop.draft=Drop it
 notes.composer.createNotes=Create
 notes.edit.editNotes=Edit note
-notes.edit.editTextFor=Edit text box {0}
 
 popup.confirm=Confirm
 popup.msg.confirmation=Confirmation
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_pl.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_pl.properties
index ba9bb4a4a1..f649073c6b 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_pl.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_pl.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Load more
 notes.label.drop.draft=Drop it
 notes.composer.createNotes=Create
 notes.edit.editNotes=Edit note
-notes.edit.editTextFor=Edit text box {0}
 
 popup.confirm=Potwierdź
 popup.msg.confirmation=Potwierdź
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_pt_BR.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_pt_BR.properties
index 7d0aafadd0..b95c0cfa6c 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_pt_BR.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_pt_BR.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Load more
 notes.label.drop.draft=Drop it
 notes.composer.createNotes=Create
 notes.edit.editNotes=Editar nota
-notes.edit.editTextFor=Edit text box {0}
 
 popup.confirm=Confirmar
 popup.msg.confirmation=Confirmação
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_pt_PT.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_pt_PT.properties
index 5910d2800e..09f826dde0 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_pt_PT.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_pt_PT.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Load more
 notes.label.drop.draft=Drop it
 notes.composer.createNotes=Create
 notes.edit.editNotes=Edit note
-notes.edit.editTextFor=Edit text box {0}
 
 popup.confirm=Confirmar
 popup.msg.confirmation=Confirmação
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_ro.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_ro.properties
index f2e01ccaa1..c9bd3d0366 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_ro.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_ro.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Load more
 notes.label.drop.draft=Drop it
 notes.composer.createNotes=Create
 notes.edit.editNotes=Edit note
-notes.edit.editTextFor=Edit text box {0}
 
 popup.confirm=Confirmă
 popup.msg.confirmation=Confirmare
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_ru.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_ru.properties
index 5c4546d88c..b800e1f2f4 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_ru.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_ru.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Load more
 notes.label.drop.draft=Drop it
 notes.composer.createNotes=Create
 notes.edit.editNotes=Edit note
-notes.edit.editTextFor=Edit text box {0}
 
 popup.confirm=Подтвердить
 popup.msg.confirmation=Подтверждение
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_sk.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_sk.properties
index fff1d4211f..d9db17394a 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_sk.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_sk.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Load more
 notes.label.drop.draft=Drop it
 notes.composer.createNotes=Create
 notes.edit.editNotes=Edit note
-notes.edit.editTextFor=Edit text box {0}
 
 popup.confirm=Confirm
 popup.msg.confirmation=Confirmation
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_sl.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_sl.properties
index 7d1316d998..36ac4f904f 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_sl.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_sl.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Naloži več
 notes.label.drop.draft=Drop it
 notes.composer.createNotes=Create
 notes.edit.editNotes=Edit note
-notes.edit.editTextFor=Edit text box {0}
 
 popup.confirm=Potrdi
 popup.msg.confirmation=Potrditev
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_sq.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_sq.properties
index e3a87522a3..9e38759b9d 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_sq.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_sq.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=crwdns44680:0crwdne44680:0
 notes.label.drop.draft=crwdns44682:0crwdne44682:0
 notes.composer.createNotes=crwdns44684:0crwdne44684:0
 notes.edit.editNotes=crwdns44686:0crwdne44686:0
-notes.edit.editTextFor=crwdns44688:0{0}crwdne44688:0
 
 popup.confirm=crwdns44690:0crwdne44690:0
 popup.msg.confirmation=crwdns44692:0crwdne44692:0
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_sv_SE.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_sv_SE.properties
index 90cab2a1ce..6b1648167c 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_sv_SE.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_sv_SE.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Load more
 notes.label.drop.draft=Drop it
 notes.composer.createNotes=Create
 notes.edit.editNotes=Edit note
-notes.edit.editTextFor=Edit text box {0}
 
 popup.confirm=Bekräfta
 popup.msg.confirmation=Bekräfta
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_th.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_th.properties
index fff1d4211f..d9db17394a 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_th.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_th.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Load more
 notes.label.drop.draft=Drop it
 notes.composer.createNotes=Create
 notes.edit.editNotes=Edit note
-notes.edit.editTextFor=Edit text box {0}
 
 popup.confirm=Confirm
 popup.msg.confirmation=Confirmation
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_tl.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_tl.properties
index b6182cf218..40f9d9daa6 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_tl.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_tl.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Load more
 notes.label.drop.draft=Drop it
 notes.composer.createNotes=Create
 notes.edit.editNotes=Edit note
-notes.edit.editTextFor=Edit text box {0}
 
 popup.confirm=Kumpirmahin
 popup.msg.confirmation=Ang kumpermasyon
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_tr.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_tr.properties
index cd33376e5e..b15e2e44a4 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_tr.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_tr.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Daha fazla yükle
 notes.label.drop.draft=Drop it
 notes.composer.createNotes=Create
 notes.edit.editNotes=Edit note
-notes.edit.editTextFor=Edit text box {0}
 
 popup.confirm=Onayla
 popup.msg.confirmation=Onay
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_uk.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_uk.properties
index 89e9eee222..3f3c5d47af 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_uk.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_uk.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Завантажити ще
 notes.label.drop.draft=Drop it
 notes.composer.createNotes=Create
 notes.edit.editNotes=Edit note
-notes.edit.editTextFor=Edit text box {0}
 
 popup.confirm=Підтвердити
 popup.msg.confirmation=Повторіть пароль
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_ur_IN.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_ur_IN.properties
index 1f02f9554c..f78fd7f655 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_ur_IN.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_ur_IN.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Load more
 notes.label.drop.draft=Drop it
 notes.composer.createNotes=Create
 notes.edit.editNotes=Edit note
-notes.edit.editTextFor=Edit text box {0}
 
 popup.confirm=تصدیق کریں
 popup.msg.confirmation=تصدیق
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_vi.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_vi.properties
index 8be6e33803..f0a90e7b7d 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_vi.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_vi.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Load more
 notes.label.drop.draft=Drop it
 notes.composer.createNotes=Create
 notes.edit.editNotes=Edit note
-notes.edit.editTextFor=Edit text box {0}
 
 popup.confirm=Xác nhận
 popup.msg.confirmation=Xác nhận
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_zh_CN.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_zh_CN.properties
index fc405b1dac..bb667f5e45 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_zh_CN.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_zh_CN.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Load more
 notes.label.drop.draft=Drop it
 notes.composer.createNotes=Create
 notes.edit.editNotes=Edit note
-notes.edit.editTextFor=Edit text box {0}
 
 popup.confirm=确认
 popup.msg.confirmation=确认
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_zh_TW.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_zh_TW.properties
index 99c2553236..ead31135a8 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_zh_TW.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_zh_TW.properties
@@ -47,7 +47,6 @@ notes.button.loadMore=Load more
 notes.label.drop.draft=Drop it
 notes.composer.createNotes=Create
 notes.edit.editNotes=Edit note
-notes.edit.editTextFor=Edit text box {0}
 
 popup.confirm=確認
 popup.msg.confirmation=確認
diff --git a/notes-webapp/src/main/webapp/WEB-INF/conf/wiki/ckeditor/config.js b/notes-webapp/src/main/webapp/WEB-INF/conf/wiki/ckeditor/config.js
index 30afb36462..48f19ec83f 100644
--- a/notes-webapp/src/main/webapp/WEB-INF/conf/wiki/ckeditor/config.js
+++ b/notes-webapp/src/main/webapp/WEB-INF/conf/wiki/ckeditor/config.js
@@ -55,6 +55,22 @@ CKEDITOR.editorConfig = function (config) {
       items: blocksToolbarGroup
     },
   ];
+  const mobileToolbar = [
+    {
+      name: 'basicstyles',
+      groups: ['basicstyles', 'cleanup'],
+      items: ['Bold', 'Italic']
+    },
+    {
+      name: 'paragraph',
+      groups: ['list'],
+      items: ['BulletedList','NumberedList'],
+    },
+    {
+      name: 'blocks',
+      items: ['Blockquote']
+    },
+  ];
   let extraPlugins = `a11ychecker,balloonpanel,indent,indentblock,indentlist,codesnippet,sharedspace,copyformatting,table,tabletools,embedsemantic,autolink,colordialog${!webPageNote && ',tagSuggester' || ''},emoji,link,font,justify,widget,${!webPageNote && ',insertOptions' || ''},contextmenu,tabletools,tableresize,toc,linkBalloon`;
   let removePlugins = `image,confirmBeforeReload,maximize,resize,autoembed${webPageNote && ',tagSuggester' || ''}`;
 
@@ -86,9 +102,13 @@ CKEDITOR.editorConfig = function (config) {
     }
   });
 
+  if (window.innerWidth < 960) {
+    config.toolbar = mobileToolbar;
+  } else {
+    config.toolbar = toolbar;
+  }
   config.extraPlugins = extraPlugins;
   config.removePlugins = removePlugins;
-  config.toolbar = toolbar;
   config.toolbarGroups = [
     { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
     { name: 'paragraph', groups: ['align', 'list', 'indent', ] },
@@ -99,4 +119,4 @@ CKEDITOR.editorConfig = function (config) {
   config.autoGrow_minHeight = 500;
   config.height = 'auto'
   config.format_tags = 'p;h1;h2;h3';
-};
\ No newline at end of file
+};
diff --git a/notes-webapp/src/main/webapp/skin/less/notes/notes.less b/notes-webapp/src/main/webapp/skin/less/notes/notes.less
index 2b2d7a792b..1029634326 100644
--- a/notes-webapp/src/main/webapp/skin/less/notes/notes.less
+++ b/notes-webapp/src/main/webapp/skin/less/notes/notes.less
@@ -105,6 +105,25 @@
       z-index: 10;
       background-color: @baseBackground;
 
+      .translation-button-icon {
+        width: 25px;
+        height: 21px;
+      }
+
+      .editor-icon {
+        margin-bottom: 2px;
+      }
+
+      .close-editor-icon {
+        width: 14px;
+        height: 21px;
+      }
+
+      .save-button-icon {
+        width: 18px;
+        height: 21px;
+      }
+
       .notesActions {
         .notesFormButtons {
           .notesFormLeftActions {
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
index 7666fa8487..a527a58831 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
@@ -38,8 +38,9 @@
       :lang-button-tooltip-text="langButtonTooltipText"
       :publish-and-post-button-text="publishAndPostButtonText"
       :publish-button-text="publishButtonText"
+      :editor-icon="editorIcon"
       :space-group-id="`/spaces/${this.spaceGroupId}`"
-      :enable-publish-and-post="true"
+      :save-button-icon="saveButtonIcon"
       :is-mobile="isMobile"
       :editor-body-input-ref="'notesContent'"
       :editor-title-input-ref="'noteTitle'"
@@ -47,7 +48,8 @@
       @post-note="postNote"
       @auto-save="autoSave"
       @editor-ready="editorReady"
-      @update-data="updateNoteData" />
+      @update-data="updateNoteData"
+      @editor-closed="editorClosed" />
     <note-treeview-drawer
       ref="noteTreeview"
       @closed="closePluginsDrawer()" />
@@ -119,6 +121,8 @@ export default {
       draftNote: null,
       instanceReady: false,
       initialized: false,
+      editorIcon: 'fas fa-clipboard',
+      saveButtonIcon: 'fas fa-save'
     };
   },
   computed: {
@@ -156,7 +160,7 @@ export default {
       return this.urlParams?.get?.('webPageUrl');
     },
     isMobile() {
-      return this.$vuetify.breakpoint.width < 1280;
+      return this.$vuetify.breakpoint.width < 960;
     }
   },
   watch: {
@@ -216,7 +220,7 @@ export default {
       this.spaceDisplayName  = urlParams.get('spaceName');
       this.note.parentPageId = this.parentPageId;
     }
-    this.displayFormTitle();
+    this.displayFormTitle(urlParams);
     this.$root.$on('show-alert', this.displayMessage);
     this.$root.$on('display-treeview-items', filter => {
       if ( urlParams.has('noteId') ) {
@@ -239,6 +243,9 @@ export default {
     });
   },
   methods: {
+    editorClosed() {
+      window.close();
+    },
     closePluginsDrawer() {
       this.$refs.editor.closePluginsDrawer();
     },
@@ -590,19 +597,12 @@ export default {
     closeAlertMessage() {
       document.dispatchEvent(new CustomEvent('close-alert-message'));
     },
-    displayFormTitle() {
-      const urlParams = new URLSearchParams(window.location.search);
+    displayFormTitle(urlParams) {
       const webPageName = urlParams.get('pageName');
-      if (webPageName) {
-        this.noteFormTitle = this.$t('notes.edit.editTextFor', {
-          0: webPageName,
-        });
-      } else if (this.noteId) {
+      if (webPageName || this.noteId) {
         this.noteFormTitle = this.$t('notes.edit.editNotes');
       } else {
-        return this.$spaceService.getSpaceById(this.spaceId).then(space => {
-          this.noteFormTitle = this.$t('notes.composer.createNotes').replace('{0}', space.displayName);
-        });
+        this.noteFormTitle = this.$t('notes.composer.createNotes');
       }
     },
     dropDraft() {
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue
index f9f3e0d4f4..afb4a07572 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue
@@ -22,68 +22,82 @@
     <div
       v-if="!showTranslationBar"
       class="notesActions white">
-      <div class="notesFormButtons d-inline-flex flex-wrap width-full pa-3 ma-0">
+      <div class="notesFormButtons d-inline-flex flex-wrap width-full py-3 px-5 ma-0">
         <div class="notesFormLeftActions d-inline-flex align-center me-10">
-          <img
-            :src="srcImageNote"
-            :alt="formTitle">
-          <span class="notesFormTitle ps-2">{{ formTitle }}</span>
+          <v-icon
+            class="icon-default-color editor-icon"
+            size="24">
+            {{ editorIcon }}
+          </v-icon>
+          <span class="notesFormTitle my-auto ms-3 me-5">{{ formTitle }}</span>
           <v-tooltip bottom>
             <template #activator="{ on, attrs }">
-              <v-icon
-                :aria-label="$t('notes.label.button.translations.options')"
-                size="22"
-                class="clickable pa-2"
-                :class="langButtonColor"
+              <v-btn
                 v-on="on"
                 v-bind="attrs"
+                width="36"
+                min-width="36"
+                height="36"
+                class="pa-0 my-auto"
+                icon
                 @click="showTranslations">
-                fa-language
-              </v-icon>
+                <v-icon
+                  :class="{'primary--text': !!selectedLanguage}"
+                  :disabled="!noteIdParam"
+                  :aria-label="$t('notes.label.button.translations.options')"
+                  size="20"
+                  class="pa-0 translation-button-icon my-auto icon-default-color">
+                  fa-language
+                </v-icon>
+              </v-btn>
             </template>
             <span class="caption">
               {{ langButtonTooltipText }}
             </span>
           </v-tooltip>
         </div>
-        <div class="notesFormRightActions pr-7">
-          <p class="draftSavingStatus mr-7">{{ draftSavingStatus }}</p>
-          <button
+        <div class="notesFormRightActions pe-5">
+          <p class="draftSavingStatus my-auto me-3">{{ draftSavingStatus }}</p>
+          <v-btn
+            v-if="!isMobile"
             id="notesUpdateAndPost"
-            class="btn btn-primary primary px-2 py-0"
+            class="btn btn-primary primary px-2 py-0 me-5"
+            height="34"
             :key="postKey"
             :aria-label="publishButtonText"
             @click.once="postNote(false)">
             {{ publishButtonText }}
-            <v-icon
-              v-if="!webPageNote && enablePublishAndPost"
-              id="notesPublichAndPost"
-              dark
-              @click.stop.prevent="openPublishAndPost">
-              mdi-menu-down
-            </v-icon>
-          </button>
-          <v-menu
-            v-if="!webPageNote"
-            v-model="publishAndPost"
-            :attach="'#notesUpdateAndPost'"
-            transition="scroll-y-transition"
-            content-class="publish-and-post-btn width-full"
-            offset-y
-            left>
-            <v-list-item
-              @click.stop="postNote(true)"
-              class="px-2">
+          </v-btn>
+          <div
+            v-else>
+            <v-btn
+              class="btn-primary primary pa-0 me-4"
+              width="42"
+              height="36"
+              min-width="42"
+              text
+              :key="postKey"
+              :aria-label="publishButtonText"
+              @click.once="postNote(false)">
+              <v-icon
+                class="text--white save-button-icon"
+                size="20">
+                {{ saveButtonIcon }}
+              </v-icon>
+            </v-btn>
+            <v-btn
+              width="36"
+              min-width="36"
+              height="36"
+              icon
+              @click="closeEditor">
               <v-icon
-                size="16"
-                class="primary--text clickable pr-2">
-                mdi-arrow-collapse-up
+                class="icon-default-color"
+                size="20">
+                fas fa-times
               </v-icon>
-              <span class="body-2 text-color">
-                {{ publishAndPostButtonText }}
-              </span>
-            </v-list-item>
-          </v-menu>
+            </v-btn>
+          </div>
         </div>
       </div>
     </div>
@@ -93,7 +107,7 @@
       :languages="languages"
       :translations="translations"
       :is-mobile="isMobile"
-      @translations-hidden="showTranslationBar = false"/>
+      @translations-hidden="showTranslationBar = false" />
     <div id="notesTop" class="width-full darkComposerEffect"></div>
   </div>
 </template>
@@ -102,10 +116,7 @@
 export default {
   data() {
     return {
-      srcImageNote: '/notes/images/wiki.png',
       showTranslationBar: false,
-      publishAndPost: false,
-      waitTimeUntilCloseMenu: 200
     };
   },
   props: {
@@ -113,6 +124,14 @@ export default {
       type: Object,
       default: null
     },
+    editorIcon: {
+      type: String,
+      default: 'fas fa-clipboard'
+    },
+    saveButtonIcon: {
+      type: String,
+      default: 'fas fa-save'
+    },
     noteIdParam: {
       type: String,
       default: null
@@ -149,10 +168,6 @@ export default {
       type: String,
       default: null
     },
-    publishAndPostButtonText: {
-      type: String,
-      default: null
-    },
     publishButtonText: {
       type: String,
       default: null
@@ -165,35 +180,13 @@ export default {
       type: Boolean,
       default: false
     },
-    enablePublishAndPost: {
-      type: Boolean,
-      default: false
-    }
-  },
-  computed: {
-    langButtonColor(){
-      if (!this.noteIdParam){
-        return 'disabled--text not-clickable remove-focus';
-      }
-      return this.selectedLanguage ? 'primary--text':'';
-    },
   },
   created() {
     this.$root.$on('hide-translations', this.hideTranslations);
-    this.initPublishAndPost();
   },
   methods: {
-    initPublishAndPost() {
-      $(document).on('mousedown', () => {
-        if (this.publishAndPost) {
-          window.setTimeout(() => {
-            this.publishAndPost = false;
-          }, this.waitTimeUntilCloseMenu);
-        }
-      });
-    },
-    openPublishAndPost() {
-      this.publishAndPost = !this.publishAndPost;
+    closeEditor() {
+      this.$emit('editor-closed');
     },
     postNote(toPublish) {
       this.$emit('post-note', toPublish);
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 fdc09f66fa..be8aaa0f81 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
@@ -33,10 +33,11 @@
       :post-key="postKey"
       :draft-saving-status="draftSavingStatus"
       :publish-button-text="publishButtonText"
-      :publish-and-post-button-text="publishAndPostButtonText"
       :lang-button-tooltip-text="langButtonTooltipText"
-      :enable-publish-and-post="enablePublishAndPost"
       :web-page-url="webPageUrl"
+      :editor-icon="editorIcon"
+      :save-button-icon="saveButtonIcon"
+      @editor-closed="editorClosed"
       @post-note="postNote" />
     <form class="notes-content">
       <div class="notes-content-form singlePageApplication my-5 mx-auto py-1 px-5">
@@ -129,10 +130,6 @@ export default {
       type: Boolean,
       default: false
     },
-    publishAndPostButtonText: {
-      type: String,
-      default: null
-    },
     publishButtonText: {
       type: String,
       default: null
@@ -153,10 +150,6 @@ export default {
       type: String,
       default: 'noteTitle'
     },
-    enablePublishAndPost: {
-      type: Boolean,
-      default: false
-    },
     spaceUrl: {
       type: String,
       default: null
@@ -164,6 +157,14 @@ export default {
     spaceGroupId: {
       type: String,
       default: null
+    },
+    editorIcon: {
+      type: String,
+      default: null
+    },
+    saveButtonIcon: {
+      type: String,
+      default: null
     }
   },
   watch: {
@@ -182,6 +183,9 @@ export default {
     document.addEventListener('note-custom-plugins', this.openCustomPluginsDrawer);
   },
   methods: {
+    editorClosed(){
+      this.$emit('editor-closed');
+    },
     updateTranslatedNoteTitle(title) {
       this.noteObject.title = title;
     },

From 1c3413cdf34b7cdf998cb8307ff953a921a07961 Mon Sep 17 00:00:00 2001
From: Helmi Akermi <70575401+hakermi@users.noreply.github.com>
Date: Mon, 1 Jul 2024 14:46:29 +0100
Subject: [PATCH 06/40] feat: Implement save note and review validate editor
 form - EXO-71943_EXO-71949 - Meeds-io/MIPs#128 (#1019)

---
 .../portlet/notes/notesPortlet_en.properties  |   3 +
 .../components/NotesEditorDashboard.vue       | 121 +++++++-----------
 .../components/NoteEditorTopBar.vue           |   6 +
 .../components/NoteFullRichEditor.vue         |   5 +
 4 files changed, 62 insertions(+), 73 deletions(-)

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 3bcc757038..737394fcfd 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
@@ -47,6 +47,9 @@ notes.button.loadMore=Load more
 notes.label.drop.draft=Drop it
 notes.composer.createNotes=Create
 notes.edit.editNotes=Edit
+notes.save.success.message=Note saved successfully
+notes.view.label=View
+
 
 popup.confirm=Confirm
 popup.msg.confirmation=Confirmation
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
index a527a58831..fcf2e4cda5 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
@@ -37,11 +37,12 @@
       :selected-language="selectedLanguage"
       :lang-button-tooltip-text="langButtonTooltipText"
       :publish-and-post-button-text="publishAndPostButtonText"
-      :publish-button-text="publishButtonText"
+      :publish-button-text="$t('notes.button.publish')"
       :editor-icon="editorIcon"
-      :space-group-id="`/spaces/${this.spaceGroupId}`"
+      :space-group-id="`/spaces/${spaceGroupId}`"
       :save-button-icon="saveButtonIcon"
       :is-mobile="isMobile"
+      :save-button-disabled="saveOrUpdateDisabled"
       :editor-body-input-ref="'notesContent'"
       :editor-title-input-ref="'noteTitle'"
       @open-treeview="openTreeView"
@@ -74,6 +75,7 @@ export default {
         hour: '2-digit',
         minute: '2-digit',
       },
+      originalNote: {},
       note: {
         id: '',
         title: '',
@@ -126,6 +128,14 @@ export default {
     };
   },
   computed: {
+    saveOrUpdateDisabled() {
+      return !this.note?.title || this.note?.title?.length < 3
+                               || this.note?.title?.length > this.titleMaxLength
+                               || this.noteNotModified;
+    },
+    noteNotModified() {
+      return this.note?.title === this.originalNote?.title && this.note?.content === this.originalNote?.content;
+    },
     publishAndPostButtonText() {
       if (this.note?.id && (this.note?.targetPageId || !this.note?.draftPage)) {
         return this.$t('notes.button.updateAndPost');
@@ -133,13 +143,6 @@ export default {
         return this.$t('notes.button.publishAndPost');
       }
     },
-    publishButtonText() {
-      if (this.note?.id && (this.note?.targetPageId || !this.note?.draftPage)) {
-        return this.$t('notes.button.update');
-      } else {
-        return this.$t('notes.button.publish');
-      }
-    },
     langButtonTooltipText() {
       if (this.noteId) {
         return this.$t('notes.label.button.translations.options');
@@ -277,81 +280,60 @@ export default {
     postNote(toPublish) {
       this.postingNote = true;
       clearTimeout(this.saveDraft);
-      if (this.validateForm()) {
-        const note = {
-          id: this.note?.draftPage? this.note.targetPageId || null : this.note?.id,
-          title: this.note.title,
-          name: this.note.name,
-          lang: this.note.lang,
-          wikiType: this.note.wikiType,
-          wikiOwner: this.note.wikiOwner,
-          content: this.$noteUtils.getContentToSave('notesContent', this.oembedMinWidth) || this.note.content,
-          parentPageId: this.note?.draftPage && this.note?.targetPageId === this.parentPageId ? null : this.parentPageId,
-          toBePublished: toPublish,
-          appName: this.appName,
-        };
-        if (note.id) {
-          this.updateNote(note);
-        } else {
-          this.createNote(note);
-        }
-      }
-    },
-    validateForm() {
-      if (!this.note.title) {
-        this.enableClickOnce();
-        this.$root.$emit('show-alert', {
-          type: 'error',
-          message: this.$t('notes.message.missingTitle')
-        });
-        return false;
-      }
-      if (!isNaN(this.note.title)) {
-        this.enableClickOnce();
-        this.$root.$emit('show-alert', {
-          type: 'error',
-          message: this.$t('notes.message.numericTitle')
-        });
-        return false;
+      const note = {
+        id: this.note?.draftPage? this.note.targetPageId || null : this.note?.id,
+        title: this.note.title,
+        name: this.note.name,
+        lang: this.note.lang,
+        wikiType: this.note.wikiType,
+        wikiOwner: this.note.wikiOwner,
+        content: this.$noteUtils.getContentToSave('notesContent', this.oembedMinWidth) || this.note.content,
+        parentPageId: this.note?.draftPage && this.note?.targetPageId === this.parentPageId ? null : this.parentPageId,
+        toBePublished: toPublish,
+        appName: this.appName,
+      };
+      if (note.id) {
+        this.updateNote(note);
       } else {
-        const cleanedTitle = this.note.title.replace(/<[^>]*>|&nbsp;/g, '').trim();
-        if (cleanedTitle.length < 3 || cleanedTitle.length > this.titleMaxLength) {
-          this.enableClickOnce();
-          this.$root.$emit('show-alert', {
-            type: 'error',
-            message: this.$t('notes.message.missingLengthTitle')
-          });
-          return false;
-        }
+        this.createNote(note);
       }
-      return true;
     },
     updateNote(note) {
       return this.$notesService.updateNoteById(note).then(data => {
+        this.originalNote = structuredClone(data);
         this.removeLocalStorageCurrentDraft();
-        this.redirectAfterSave(data || note);
+        this.displayMessage({
+          type: 'success',
+          message: this.$t('notes.save.success.message'),
+          linkText: this.$t('notes.view.label'),
+          alertLink: this.redirectAfterSaveLink(data || note)
+        });
       }).catch(e => {
-        this.enableClickOnce();
         this.$root.$emit('show-alert', {
           type: 'error',
           message: this.$t(`notes.message.${e.message}`)
         });
-      });
+      }).finally(() => this.enableClickOnce());
     },
     createNote(note) {
       return this.$notesService.createNote(note).then(data => {
+        this.originalNote = structuredClone(data);
         const notePath = this.$notesService.getPathByNoteOwner(data, this.appName).replace(/ /g, '_');
         // delete draft note
         const draftNote = JSON.parse(localStorage.getItem(`draftNoteId-${this.note.id}-${this.slectedLanguage}`));
         this.deleteDraftNote(draftNote, notePath);
-        this.redirectAfterSave(data || note);
+        this.displayMessage({
+          type: 'success',
+          message: this.$t('notes.save.success.message'),
+          linkText: this.$t('notes.view.label'),
+          alertLink: this.redirectAfterSaveLink(data || note)
+        });
       }).catch(e => {
-        this.enableClickOnce();
         this.$root.$emit('show-alert', {
           type: 'error',
           message: this.$t(`notes.message.${e.message}`)
         });
-      });
+      }).finally(() => this.enableClickOnce());
     },
     autoSave() {
       // No draft saving if init not done or in edit mode for the moment
@@ -438,6 +420,7 @@ export default {
         this.note = data;
         this.selectedLanguage = data.lang;
         this.getNoteLanguages();
+        this.originalNote = structuredClone(this.note);
         this.actualNote = {
           id: this.note.id,
           name: this.note.name,
@@ -489,19 +472,13 @@ export default {
       }
       return draftNote;
     },
-    redirectAfterSave(note) {
+    redirectAfterSaveLink(note) {
       if (this.webPageUrl) {
-        window.location.href = this.webPageUrl;
+        return this.webPageUrl;
       } else {
         const notePath = this.$notesService.getPathByNoteOwner(note, this.appName).replace(/ /g, '_');
         this.draftSavingStatus = '';
-        let translation = '';
-        if (this.selectedLanguage){
-          translation = `?translation=${this.selectedLanguage}`;
-        } else {
-          translation = '?translation=original';
-        }
-        window.location.href = `${notePath}${translation}`;
+        return `${notePath}?translation=${this.selectedLanguage || 'original'}`;
       }
     },
     saveNoteDraft(update) {
@@ -592,6 +569,7 @@ export default {
         alertType: message?.type,
         alertLinkText: message?.linkText,
         alertLinkCallback: message?.linkCallback,
+        alertLink: message.alertLink
       }}));
     },
     closeAlertMessage() {
@@ -642,9 +620,6 @@ export default {
           }
         }).then(() => {
           this.draftSavingStatus = '';
-          if (notePath) {
-            window.location.href = notePath;
-          }
         }).catch(e => {
           console.error('Error when deleting draft note', e);
         });
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue
index afb4a07572..10ba9ed9cf 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue
@@ -64,6 +64,7 @@
             class="btn btn-primary primary px-2 py-0 me-5"
             height="34"
             :key="postKey"
+            :disabled="saveButtonDisabled"
             :aria-label="publishButtonText"
             @click.once="postNote(false)">
             {{ publishButtonText }}
@@ -77,6 +78,7 @@
               min-width="42"
               text
               :key="postKey"
+              :disabled="saveButtonDisabled"
               :aria-label="publishButtonText"
               @click.once="postNote(false)">
               <v-icon
@@ -180,6 +182,10 @@ export default {
       type: Boolean,
       default: false
     },
+    saveButtonDisabled: {
+      type: Boolean,
+      default: true
+    }
   },
   created() {
     this.$root.$on('hide-translations', this.hideTranslations);
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 be8aaa0f81..d4bc16deff 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
@@ -37,6 +37,7 @@
       :web-page-url="webPageUrl"
       :editor-icon="editorIcon"
       :save-button-icon="saveButtonIcon"
+      :save-button-disabled="saveButtonDisabled"
       @editor-closed="editorClosed"
       @post-note="postNote" />
     <form class="notes-content">
@@ -165,6 +166,10 @@ export default {
     saveButtonIcon: {
       type: String,
       default: null
+    },
+    saveButtonDisabled: {
+      type: Boolean,
+      default: true
     }
   },
   watch: {

From 823007baaac255921f408b7eca894b91cac2ce9f Mon Sep 17 00:00:00 2001
From: Helmi Akermi <hakermi@exoplatform.com>
Date: Thu, 4 Jul 2024 09:42:56 +0100
Subject: [PATCH 07/40] fix: Update  mobile note editor toolbar breakpoint to
 xs - EXO-71945 - Meeds-io/MIPs#128

---
 .../src/main/webapp/WEB-INF/conf/wiki/ckeditor/config.js        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/notes-webapp/src/main/webapp/WEB-INF/conf/wiki/ckeditor/config.js b/notes-webapp/src/main/webapp/WEB-INF/conf/wiki/ckeditor/config.js
index 48f19ec83f..867f03b653 100644
--- a/notes-webapp/src/main/webapp/WEB-INF/conf/wiki/ckeditor/config.js
+++ b/notes-webapp/src/main/webapp/WEB-INF/conf/wiki/ckeditor/config.js
@@ -102,7 +102,7 @@ CKEDITOR.editorConfig = function (config) {
     }
   });
 
-  if (window.innerWidth < 960) {
+  if (window.innerWidth < 600) {
     config.toolbar = mobileToolbar;
   } else {
     config.toolbar = toolbar;

From eb177f764cf98e10197ac4749403cfd800e12ac7 Mon Sep 17 00:00:00 2001
From: Sofien Haj Chedhli <shajchedli@exoplatform.com>
Date: Wed, 10 Jul 2024 17:56:46 +0100
Subject: [PATCH 08/40] feat: Enable to mention user/group from the note editor
 - EXO-72644 - Meeds-io/MIPs#128 (#1036)

---
 .../wiki/service/rest/NotesRestService.java   | 36 +++++++++++++++----
 .../WEB-INF/conf/wiki/ckeditor/config.js      |  2 +-
 .../components/NotesEditorDashboard.vue       |  4 +++
 .../components/NoteFullRichEditor.vue         | 20 +++++++++--
 4 files changed, 53 insertions(+), 9 deletions(-)

diff --git a/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java b/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java
index 9d87b8a3b4..adb05bd667 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java
@@ -53,14 +53,12 @@
 import org.apache.commons.lang3.BooleanUtils;
 import org.apache.commons.lang3.StringUtils;
 import org.apache.commons.lang3.math.NumberUtils;
-import org.exoplatform.social.core.identity.provider.OrganizationIdentityProvider;
-import org.exoplatform.social.core.manager.IdentityManager;
-import org.exoplatform.wiki.model.*;
 import org.gatein.api.EntityNotFoundException;
 import org.json.simple.JSONArray;
 import org.json.simple.JSONObject;
 
 import org.exoplatform.common.http.HTTPStatus;
+import org.exoplatform.commons.utils.CommonsUtils;
 import org.exoplatform.commons.utils.HTMLSanitizer;
 import org.exoplatform.portal.localization.LocaleContextInfoUtils;
 import org.exoplatform.services.log.ExoLogger;
@@ -71,12 +69,22 @@
 import org.exoplatform.services.rest.resource.ResourceContainer;
 import org.exoplatform.services.security.ConversationState;
 import org.exoplatform.services.security.Identity;
+import org.exoplatform.social.core.identity.provider.OrganizationIdentityProvider;
+import org.exoplatform.social.core.manager.IdentityManager;
+import org.exoplatform.social.core.utils.MentionUtils;
 import org.exoplatform.social.rest.api.EntityBuilder;
 import org.exoplatform.social.rest.api.RestUtils;
 import org.exoplatform.social.rest.entity.IdentityEntity;
 import org.exoplatform.upload.UploadResource;
 import org.exoplatform.upload.UploadService;
 import org.exoplatform.wiki.WikiException;
+import org.exoplatform.wiki.model.Attachment;
+import org.exoplatform.wiki.model.DraftPage;
+import org.exoplatform.wiki.model.Page;
+import org.exoplatform.wiki.model.PageHistory;
+import org.exoplatform.wiki.model.PageVersion;
+import org.exoplatform.wiki.model.Wiki;
+import org.exoplatform.wiki.model.WikiType;
 import org.exoplatform.wiki.resolver.TitleResolver;
 import org.exoplatform.wiki.service.NoteService;
 import org.exoplatform.wiki.service.NotesExportService;
@@ -277,7 +285,7 @@ public Response getNoteById(@Parameter(description = "Note id", required = true)
       if (note.getContent().contains("wiki-children-pages ck-widget")) {
         note = updateChildrenContainer(note);
       }
-      note.setContent(HTMLSanitizer.sanitize(note.getContent()));
+      note.setContent(sanitizeAndSubstituteMentions(note.getContent(), lang));
       note.setBreadcrumb(noteService.getBreadCrumb(note.getWikiType(),
                                                    note.getWikiOwner(),
                                                    note.getName(),
@@ -373,7 +381,7 @@ public Response getDraftNoteById(@Parameter(description = "Note id", required =
       if (parentPage == null) {
         return Response.status(Response.Status.NOT_FOUND).build();
       }
-      draftNote.setContent(HTMLSanitizer.sanitize(draftNote.getContent()));
+      draftNote.setContent(sanitizeAndSubstituteMentions(draftNote.getContent(), lang));
       draftNote.setBreadcrumb(noteService.getBreadCrumb(parentPage.getWikiType(),
                                                         parentPage.getWikiOwner(),
                                                         draftNote.getId(),
@@ -412,6 +420,9 @@ public Response getLatestDraftOfPage(@Parameter(description = "Note id", require
       }
       DraftPage draftNote = noteService.getLatestDraftPageByTargetPageAndLang(Long.valueOf(targetPage.getId()),
                                                                                      lang);
+      if (draftNote != null) {
+        draftNote.setContent(sanitizeAndSubstituteMentions(draftNote.getContent(), lang));
+      }
       return Response.ok(draftNote != null ? draftNote : org.json.JSONObject.NULL).build();
     } catch (Exception e) {
       log.error("Can't get draft note {}", noteId, e);
@@ -438,7 +449,9 @@ public Response getNoteVersions(@Parameter(description = "Note id", required = t
       if (note == null) {
         return Response.status(Response.Status.NOT_FOUND).build();
       }
-      return Response.ok(noteService.getVersionsHistoryOfNoteByLang(note, identity.getUserId(), lang))
+      List<PageHistory> pageHistories = noteService.getVersionsHistoryOfNoteByLang(note, identity.getUserId(), lang);
+      pageHistories.forEach(pageHistory -> pageHistory.setContent(sanitizeAndSubstituteMentions(pageHistory.getContent(), lang)));
+      return Response.ok(pageHistories)
                      .build();
     } catch (IllegalAccessException e) {
       log.error("User does not have view permissions on the note {}", noteId, e);
@@ -1565,4 +1578,15 @@ private String formatWikiOwnerToGroupId(String wikiOwner) {
     return wikiOwner;
   }
 
+  private String sanitizeAndSubstituteMentions(String content, String local) {
+    try {
+      Locale locale = local == null ? null : Locale.forLanguageTag(local);
+      String sanitizedBody = HTMLSanitizer.sanitize(content);
+      sanitizedBody = sanitizedBody.replace("&#64;", "@");
+      return MentionUtils.substituteUsernames(CommonsUtils.getCurrentPortalOwner(),sanitizedBody, locale);
+    } catch (Exception e) {
+      return content;
+    }
+  }
+
 }
diff --git a/notes-webapp/src/main/webapp/WEB-INF/conf/wiki/ckeditor/config.js b/notes-webapp/src/main/webapp/WEB-INF/conf/wiki/ckeditor/config.js
index 867f03b653..ba6289729c 100644
--- a/notes-webapp/src/main/webapp/WEB-INF/conf/wiki/ckeditor/config.js
+++ b/notes-webapp/src/main/webapp/WEB-INF/conf/wiki/ckeditor/config.js
@@ -71,7 +71,7 @@ CKEDITOR.editorConfig = function (config) {
       items: ['Blockquote']
     },
   ];
-  let extraPlugins = `a11ychecker,balloonpanel,indent,indentblock,indentlist,codesnippet,sharedspace,copyformatting,table,tabletools,embedsemantic,autolink,colordialog${!webPageNote && ',tagSuggester' || ''},emoji,link,font,justify,widget,${!webPageNote && ',insertOptions' || ''},contextmenu,tabletools,tableresize,toc,linkBalloon`;
+  let extraPlugins = `a11ychecker,balloonpanel,indent,indentblock,indentlist,codesnippet,sharedspace,copyformatting,table,tabletools,embedsemantic,autolink,colordialog${!webPageNote && ',tagSuggester' || ''},emoji,link,font,justify,widget,${!webPageNote && ',insertOptions' || ''},contextmenu,tabletools,tableresize,toc,linkBalloon,suggester`;
   let removePlugins = `image,confirmBeforeReload,maximize,resize,autoembed${webPageNote && ',tagSuggester' || ''}`;
 
   require(['SHARED/extensionRegistry'], function(extensionRegistry) {
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
index fcf2e4cda5..13b4f9439b 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
@@ -40,6 +40,7 @@
       :publish-button-text="$t('notes.button.publish')"
       :editor-icon="editorIcon"
       :space-group-id="`/spaces/${spaceGroupId}`"
+      :suggester-space-url="suggesterSpaceURL"
       :save-button-icon="saveButtonIcon"
       :is-mobile="isMobile"
       :save-button-disabled="saveOrUpdateDisabled"
@@ -164,6 +165,9 @@ export default {
     },
     isMobile() {
       return this.$vuetify.breakpoint.width < 960;
+    },
+    suggesterSpaceURL() {
+      return this.spaceGroupId || this.urlParams?.get?.('spaceGroupId');
     }
   },
   watch: {
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 d4bc16deff..31f4b098ef 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
@@ -151,7 +151,7 @@ export default {
       type: String,
       default: 'noteTitle'
     },
-    spaceUrl: {
+    suggesterSpaceUrl: {
       type: String,
       default: null
     },
@@ -202,6 +202,21 @@ export default {
       this.$root.$emit('hide-translations');
     },
     setEditorData(content) {
+      if (content) {
+        const tempdiv = $('<div class=\'temp\'/>').html(content);
+        tempdiv.find('a[href*="/profile"]')
+          .each(function() {
+            $(this).replaceWith(function() {
+              return $('<span/>', {
+                class: 'atwho-inserted',
+                html: `<span class="exo-mention">${$(this).text()}<a data-cke-survive href="#" class="remove"><i data-cke-survive class="uiIconClose uiIconLightGray"></i></a></span>`
+              }).attr('data-atwho-at-query',`@${  $(this).attr('href').substring($(this).attr('href').lastIndexOf('/')+1)}`)
+                .attr('data-atwho-at-value',$(this).attr('href').substring($(this).attr('href').lastIndexOf('/')+1))
+                .attr('contenteditable','false');
+            });
+          });
+        content = `${tempdiv.html()}&nbsp;`;
+      }
       if (this.editor) {
         this.editor.setData(content);
       } else {
@@ -281,7 +296,8 @@ export default {
       $(this.$refs[this.editorBodyInputRef]).ckeditor({
         customConfig: `${eXo?.env?.portal.context}/${eXo?.env?.portal.rest}/richeditor/configuration?type=notes&v=${eXo.env.client.assetsVersion}`,
         allowedContent: true,
-        spaceURL: self.spaceURL,
+        typeOfRelation: 'mention_activity_stream',
+        spaceURL: self.suggesterSpaceUrl,
         spaceGroupId: self.spaceGroupId,
         imagesDownloadFolder: 'DRIVE_ROOT_NODE/notes/images',
         toolbarLocation: 'top',

From c6b755ac92c5fab5571dce83e3d8b3862f69f563 Mon Sep 17 00:00:00 2001
From: Ayoub Zayati <ayoub.ezzayati@exoplatform.com>
Date: Wed, 10 Jul 2024 18:48:08 +0100
Subject: [PATCH 09/40] fix: Cannot update a note during creation -  EXO-73062
 - Meeds-io/MIPs#128 (#1037)

---
 .../vue-app/notes-editor/components/NotesEditorDashboard.vue     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
index 13b4f9439b..d8e5115d49 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
@@ -321,6 +321,7 @@ export default {
     },
     createNote(note) {
       return this.$notesService.createNote(note).then(data => {
+        this.note = data;
         this.originalNote = structuredClone(data);
         const notePath = this.$notesService.getPathByNoteOwner(data, this.appName).replace(/ /g, '_');
         // delete draft note

From 23d5e8a8af01f448e34b55c0648784ae4b2677ed Mon Sep 17 00:00:00 2001
From: Ayoub Zayati <ayoub.ezzayati@exoplatform.com>
Date: Thu, 11 Jul 2024 17:29:02 +0100
Subject: [PATCH 10/40] feat: Allow to create note pages with the same title -
 EXO-72093 - Meeds-io/MIPs#128 (#1038)

---
 .../wiki/resolver/TitleResolver.java          |   4 +-
 .../wiki/service/rest/NotesRestService.java   |   2 +-
 .../wiki/service/TestNoteService.java         | 177 +++++++++---------
 3 files changed, 92 insertions(+), 91 deletions(-)

diff --git a/notes-service/src/main/java/org/exoplatform/wiki/resolver/TitleResolver.java b/notes-service/src/main/java/org/exoplatform/wiki/resolver/TitleResolver.java
index a9eec3f831..6e100aced0 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/resolver/TitleResolver.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/resolver/TitleResolver.java
@@ -18,6 +18,8 @@
 
 import java.net.URLDecoder;
 import java.nio.charset.StandardCharsets;
+import java.text.SimpleDateFormat;
+import java.util.Date;
 
 public class TitleResolver {
 
@@ -32,7 +34,7 @@ public static String getId(String title, boolean isEncoded) {
     if (isEncoded) {
       title = URLDecoder.decode(title, StandardCharsets.UTF_8);
     }
-    return title.replaceAll("[^a-zA-Z0-9_\\-]", "_");
+    return title.replaceAll("[^a-zA-Z0-9_\\-]", "_") + "_" + new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date(System.currentTimeMillis()));
   }
 
 }
diff --git a/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java b/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java
index adb05bd667..d6da93cb81 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java
@@ -509,7 +509,7 @@ public Response createNote(@Parameter(description = "note object to be created",
       note.setAuthor(currentUser);
       note.setOwner(currentUser);
       note.setSyntax(syntaxId);
-      note.setName(TitleResolver.getId(note.getTitle(), false));
+      note.setName(note.getTitle());
       note.setUrl("");
       Page createdNote = noteService.createNote(noteBook, note.getParentPageName(), note, identity);
       return Response.ok(createdNote, MediaType.APPLICATION_JSON).cacheControl(cc).build();
diff --git a/notes-service/src/test/java/org/exoplatform/wiki/service/TestNoteService.java b/notes-service/src/test/java/org/exoplatform/wiki/service/TestNoteService.java
index f32521f8b2..8b4749eab8 100644
--- a/notes-service/src/test/java/org/exoplatform/wiki/service/TestNoteService.java
+++ b/notes-service/src/test/java/org/exoplatform/wiki/service/TestNoteService.java
@@ -77,9 +77,9 @@ public void testGetGroupPageById() throws WikiException, IllegalAccessException
 
     assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.GROUP_TYPE, "platform/users", "Home")) ;
 
-    noteService.createNote(wiki, "Home", new Page("testGetGroupPageById-101", "testGetGroupPageById-101"),root);
+    Page notePage = noteService.createNote(wiki, "Home", new Page("testGetGroupPageById-101", "testGetGroupPageById-101"),root);
 
-    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.GROUP_TYPE, "platform/users", "testGetGroupPageById-101")) ;
+    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.GROUP_TYPE, "platform/users", notePage.getName())) ;
     assertNull(noteService.getNoteOfNoteBookByName(PortalConfig.GROUP_TYPE, "unknown", "Home"));
   }
 
@@ -88,40 +88,40 @@ public void testGetUserPageById() throws WikiException, IllegalAccessException {
     Identity john = new Identity("john");
     assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.USER_TYPE, "john", "Home")) ;
 
-    noteService.createNote(wiki, "Home", new Page("testGetUserPageById-101", "testGetUserPageById-101"), john);
+    Page notePage = noteService.createNote(wiki, "Home", new Page("testGetUserPageById-101", "testGetUserPageById-101"), john);
 
-    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.USER_TYPE, "john", "testGetUserPageById-101")) ;
+    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.USER_TYPE, "john", notePage.getName())) ;
     assertNull(noteService.getNoteOfNoteBookByName(PortalConfig.USER_TYPE, "unknown", "Home"));
   }
 
   public void testCreatePageAndSubNote() throws WikiException, IllegalAccessException {
     Wiki wiki = new Wiki(PortalConfig.PORTAL_TYPE, "classic");
     Identity root = new Identity("root");
-    noteService.createNote(wiki, "Home", new Page("parentPage_", "parentPage_"), root) ;
-    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "classic", "parentPage_", root)) ;
-    noteService.createNote(wiki, "parentPage_", new Page("childPage_", "childPage_"),root) ;
-    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "classic", "childPage_", root)) ;
+    Page parentNotePage = noteService.createNote(wiki, "Home", new Page("parentPage_", "parentPage_"), root) ;
+    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "classic", parentNotePage.getName(), root)) ;
+    Page childNotePage = noteService.createNote(wiki, parentNotePage.getName(), new Page("childPage_", "childPage_"),root) ;
+    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "classic", childNotePage.getName(), root)) ;
   }
 
   public void testGetBreadcumb() throws WikiException, IllegalAccessException {
     Identity root = new Identity("root");
     Wiki portalWiki = getOrCreateWiki(wService, PortalConfig.PORTAL_TYPE, "classic");
-    noteService.createNote(portalWiki, "Home", new Page("Breadcumb1_", "Breadcumb1_"),root) ;
-    noteService.createNote(portalWiki, "Breadcumb1_", new Page("Breadcumb2_", "Breadcumb2_"),root) ;
-    noteService.createNote(portalWiki, "Breadcumb2_", new Page("Breadcumb3_", "Breadcumb3_"),root) ;
-    List<BreadcrumbData> breadCumbs = noteService.getBreadCrumb(PortalConfig.PORTAL_TYPE, "classic", "Breadcumb3_", false);
+    Page breadcrumb1NotPage = noteService.createNote(portalWiki, "Home", new Page("Breadcrumb1_", "Breadcrumb1_"),root) ;
+    Page breadcrumb2NotPage = noteService.createNote(portalWiki, breadcrumb1NotPage.getName(), new Page("Breadcrumb2_", "Breadcrumb2_"),root) ;
+    Page breadcrumb3NotPage = noteService.createNote(portalWiki, breadcrumb2NotPage.getName(), new Page("Breadcrumb3_", "Breadcrumb3_"),root) ;
+    List<BreadcrumbData> breadCumbs = noteService.getBreadCrumb(PortalConfig.PORTAL_TYPE, "classic", breadcrumb3NotPage.getName(), false);
     assertEquals(4, breadCumbs.size());
     assertEquals("Home", breadCumbs.get(0).getId());
-    assertEquals("Breadcumb1_", breadCumbs.get(1).getId());
-    assertEquals("Breadcumb2_", breadCumbs.get(2).getId());
-    assertEquals("Breadcumb3_", breadCumbs.get(3).getId());
+    assertEquals(breadcrumb1NotPage.getName(), breadCumbs.get(1).getId());
+    assertEquals(breadcrumb2NotPage.getName(), breadCumbs.get(2).getId());
+    assertEquals(breadcrumb3NotPage.getName(), breadCumbs.get(3).getId());
   }
   public void testGetBreadcumbWithLanguage() throws WikiException, IllegalAccessException {
     Identity root = new Identity("root");
     Wiki portalWiki = getOrCreateWiki(wService, PortalConfig.PORTAL_TYPE, "classic");
     Page note1 = noteService.createNote(portalWiki, "Home", new Page("Breadcumb1", "Breadcumb1"),root) ;
-    Page note2 = noteService.createNote(portalWiki, "Breadcumb1", new Page("Breadcumb2", "Breadcumb2"),root) ;
-    Page note3 = noteService.createNote(portalWiki, "Breadcumb2", new Page("Breadcumb3", "Breadcumb3"),root) ;
+    Page note2 = noteService.createNote(portalWiki, note1.getName(), new Page("Breadcumb2", "Breadcumb2"),root) ;
+    Page note3 = noteService.createNote(portalWiki, note2.getName(), new Page("Breadcumb3", "Breadcumb3"),root) ;
 
     note1.setLang("fr");
     note1.setTitle("Breadcumb1_fr");
@@ -132,13 +132,13 @@ public void testGetBreadcumbWithLanguage() throws WikiException, IllegalAccessEx
     note3.setLang("fr");
     note3.setTitle("Breadcumb3_fr");
     noteService.createVersionOfNote(note3, "root");
-    List<BreadcrumbData> breadCumbs = noteService.getBreadCrumb(PortalConfig.PORTAL_TYPE, "classic", "Breadcumb3", false);
+    List<BreadcrumbData> breadCumbs = noteService.getBreadCrumb(PortalConfig.PORTAL_TYPE, "classic", note3.getName(), false);
     assertEquals(4, breadCumbs.size());
     assertEquals("Home", breadCumbs.get(0).getId());
     assertEquals("Breadcumb1", breadCumbs.get(1).getTitle());
     assertEquals("Breadcumb2", breadCumbs.get(2).getTitle());
     assertEquals("Breadcumb3", breadCumbs.get(3).getTitle());
-    breadCumbs = noteService.getBreadCrumb(PortalConfig.PORTAL_TYPE, "classic", "Breadcumb3", "fr", root, false);
+    breadCumbs = noteService.getBreadCrumb(PortalConfig.PORTAL_TYPE, "classic", note3.getName(), "fr", root, false);
     assertEquals(4, breadCumbs.size());
     assertEquals("Home", breadCumbs.get(0).getId());
     assertEquals("Breadcumb1_fr", breadCumbs.get(1).getTitle());
@@ -150,45 +150,45 @@ public void testMoveNote() throws WikiException, IllegalAccessException {
     //moving page in same space
     Identity root = new Identity("root");
     Wiki portalWiki = getOrCreateWiki(wService, PortalConfig.PORTAL_TYPE, "classic");
-    noteService.createNote(portalWiki, "Home", new Page("oldParent_", "oldParent_"),root) ;
-    noteService.createNote(portalWiki, "oldParent_", new Page("child_", "child_"),root) ;
-    noteService.createNote(portalWiki, "Home", new Page("newParent_", "newParent_"),root) ;
+    Page oldParentNotePage = noteService.createNote(portalWiki, "Home", new Page("oldParent_", "oldParent_"), root) ;
+    Page childNotePage = noteService.createNote(portalWiki, oldParentNotePage.getName(), new Page("child_", "child_"), root) ;
+    Page newsParentNotPage = noteService.createNote(portalWiki, "Home", new Page("newParent_", "newParent_"), root) ;
 
-    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "classic", "oldParent_")) ;
-    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "classic", "child_")) ;
-    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "classic", "newParent_")) ;
+    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "classic", oldParentNotePage.getName())) ;
+    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "classic", childNotePage.getName())) ;
+    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "classic", newsParentNotPage.getName())) ;
 
     WikiPageParams currentLocationParams= new WikiPageParams();
     WikiPageParams newLocationParams= new WikiPageParams();
-    currentLocationParams.setPageName("child_");
+    currentLocationParams.setPageName(childNotePage.getName());
     currentLocationParams.setType(PortalConfig.PORTAL_TYPE);
     currentLocationParams.setOwner("classic");
-    newLocationParams.setPageName("newParent_");
+    newLocationParams.setPageName(newsParentNotPage.getName());
     newLocationParams.setType(PortalConfig.PORTAL_TYPE);
     newLocationParams.setOwner("classic");
 
-    assertTrue(noteService.moveNote(currentLocationParams,newLocationParams,root)) ;
+    assertTrue(noteService.moveNote(currentLocationParams, newLocationParams, root)) ;
 
     //moving page from different spaces
     Wiki userWiki = getOrCreateWiki(wService, PortalConfig.USER_TYPE, "root");
-    noteService.createNote(userWiki, "Home", new Page("acmePage_", "acmePage_"),root) ;
-    noteService.createNote(portalWiki, "Home", new Page("classicPage_", "classicPage_"),root) ;
+    Page acmeNotePage = noteService.createNote(userWiki, "Home", new Page("acmePage_", "acmePage_"), root) ;
+    Page classicNotePage = noteService.createNote(portalWiki, "Home", new Page("classicPage_", "classicPage_"), root) ;
 
-    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.USER_TYPE, "root", "acmePage_",root)) ;
-    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "classic", "classicPage_",root)) ;
+    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.USER_TYPE, "root", acmeNotePage.getName(), root)) ;
+    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "classic", classicNotePage.getName(), root)) ;
 
-    currentLocationParams.setPageName("acmePage_");
+    currentLocationParams.setPageName(acmeNotePage.getName());
     currentLocationParams.setType(PortalConfig.USER_TYPE);
     currentLocationParams.setOwner("root");
-    newLocationParams.setPageName("classicPage_");
+    newLocationParams.setPageName(classicNotePage.getName());
     newLocationParams.setType(PortalConfig.PORTAL_TYPE);
     newLocationParams.setOwner("classic");
-    assertTrue(noteService.moveNote(currentLocationParams,newLocationParams,root)) ;
+    assertTrue(noteService.moveNote(currentLocationParams, newLocationParams, root)) ;
 
     // moving a page to another read-only page
     Wiki demoWiki = getOrCreateWiki(wService, PortalConfig.PORTAL_TYPE, "root");
-    noteService.createNote(demoWiki, "Home", new Page("toMovedPage_", "toMovedPage_"),root);
-    Page page = noteService.createNote(userWiki, "Home", new Page("privatePage_", "privatePage_"),root);
+    Page toMovedNotePage = noteService.createNote(demoWiki, "Home", new Page("toMovedPage_", "toMovedPage_"), root);
+    Page privateNotePage = noteService.createNote(userWiki, "Home", new Page("privatePage_", "privatePage_"), root);
     HashMap<String, String[]> permissionMap = new HashMap<>();
     permissionMap.put("any", new String[] {PermissionType.VIEWPAGE.toString(), PermissionType.EDITPAGE.toString()});
     List<PermissionEntry> permissionEntries = new ArrayList<>();
@@ -197,15 +197,15 @@ public void testMoveNote() throws WikiException, IllegalAccessException {
             new Permission(PermissionType.EDITPAGE, true)
     });
     permissionEntries.add(permissionEntry);
-    page.setPermissions(permissionEntries);
+    privateNotePage.setPermissions(permissionEntries);
 
-    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "root", "toMovedPage_"));
-    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.USER_TYPE, "root", "privatePage_"));
+    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "root", toMovedNotePage.getName()));
+    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.USER_TYPE, "root", privateNotePage.getName()));
 
-    currentLocationParams.setPageName("toMovedPage_");
+    currentLocationParams.setPageName(toMovedNotePage.getName());
     currentLocationParams.setType(PortalConfig.PORTAL_TYPE);
     currentLocationParams.setOwner("root");
-    newLocationParams.setPageName("privatePage_");
+    newLocationParams.setPageName(privateNotePage.getName());
     newLocationParams.setType(PortalConfig.USER_TYPE);
     newLocationParams.setOwner("root");
   }
@@ -213,37 +213,37 @@ public void testMoveNote() throws WikiException, IllegalAccessException {
   public void testDeleteNote() throws WikiException, IllegalAccessException {
     Identity root = new Identity("root");
     Wiki portalWiki = getOrCreateWiki(wService, PortalConfig.PORTAL_TYPE, "classic");
-    noteService.createNote(portalWiki, "Home", new Page("deletePage_", "deletePage_"),root) ;
-    assertTrue(noteService.deleteNote(PortalConfig.PORTAL_TYPE, "classic", "deletePage_")) ;
-    //wait(10) ;
-    noteService.createNote(portalWiki, "Home", new Page("deletePage_", "deletePage_"),root) ;
-    assertTrue(noteService.deleteNote(PortalConfig.PORTAL_TYPE, "classic", "deletePage_")) ;
-    assertNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "classic", "deletePage_")) ;
-    assertFalse(noteService.deleteNote(PortalConfig.PORTAL_TYPE, "classic", "Home")) ;
+    Page notePage1 = noteService.createNote(portalWiki, "Home", new Page("deletePage_", "deletePage_"), root);
+    assertTrue(noteService.deleteNote(PortalConfig.PORTAL_TYPE, "classic", notePage1.getName()));
+    // wait(10) ;
+    Page notePage2 = noteService.createNote(portalWiki, "Home", new Page("deletePage_", "deletePage_"), root);
+    assertTrue(noteService.deleteNote(PortalConfig.PORTAL_TYPE, "classic", notePage2.getName()));
+    assertNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "classic", notePage2.getName()));
+    assertFalse(noteService.deleteNote(PortalConfig.PORTAL_TYPE, "classic", "Home"));
   }
 
 
   public void testRenameNote() throws WikiException, IllegalAccessException {
     Identity root = new Identity("root");
     Wiki portalWiki = getOrCreateWiki(wService, PortalConfig.PORTAL_TYPE, "classic");
-    noteService.createNote(portalWiki, "Home", new Page("currentPage_", "currentPage_"),root) ;
-    assertTrue(noteService.renameNote(PortalConfig.PORTAL_TYPE, "classic", "currentPage_", "renamedPage_", "renamedPage_")) ;
+    Page currentNotePage = noteService.createNote(portalWiki, "Home", new Page("currentPage_", "currentPage_"),root);
+    assertTrue(noteService.renameNote(PortalConfig.PORTAL_TYPE, "classic", currentNotePage.getName(), "renamedPage_", "renamedPage_")) ;
     assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "classic", "renamedPage_")) ;
   }
 
   public void testRenamePageToExistingNote() throws WikiException, IllegalAccessException  {
     Identity root = new Identity("root");
     Wiki portalWiki = getOrCreateWiki(wService, PortalConfig.PORTAL_TYPE, "classic");
-    noteService.createNote(portalWiki, "Home", new Page("currentPage_", "currentPage_"),root) ;
-    noteService.createNote(portalWiki, "Home", new Page("currentPage2_", "currentPage2_"),root) ;
+    Page currentNotePage = noteService.createNote(portalWiki, "Home", new Page("currentPage_", "currentPage_"), root) ;
+    Page currentNotePage2 = noteService.createNote(portalWiki, "Home", new Page("currentPage2_", "currentPage2_"), root) ;
     try {
-      noteService.renameNote(PortalConfig.PORTAL_TYPE, "classic", "currentPage_", "currentPage2_", "renamedPage2_");
-      fail("Renaming page currentPage to the existing page currentPage2_ should throw an exception");
+      noteService.renameNote(PortalConfig.PORTAL_TYPE, "classic", currentNotePage.getName(), currentNotePage2.getName(), "renamedPage2_");
+      fail("Renaming page currentPage to the existing page " + currentNotePage2.getName() + " should throw an exception");
     } catch (WikiException e) {
-      assertEquals("Note portal:classic:currentPage2_ already exists, cannot rename it.", e.getMessage());
+      assertEquals("Note portal:classic:" + currentNotePage2.getName() + " already exists, cannot rename it.", e.getMessage());
     }
-    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "classic", "currentPage_")) ;
-    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "classic", "currentPage2_")) ;
+    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "classic", currentNotePage.getName()));
+    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "classic", currentNotePage2.getName())) ;
   }
   
   public void testHasPermisionOnSystemPage() throws WikiException, IllegalAccessException, ObjectAlreadyExistsException {
@@ -387,7 +387,7 @@ public void testGEtNoteById() throws WikiException, IllegalAccessException {
     Wiki portalWiki = getOrCreateWiki(wService, PortalConfig.PORTAL_TYPE, "testPortal");
     Page note1 = noteService.createNote(portalWiki, "Home", new Page("exported1", "exported1"),root) ;
 
-    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "testPortal", "exported1")) ;
+    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "testPortal", note1.getName())) ;
 
     Page note = noteService.getNoteById(note1.getId(),root,"");
 
@@ -406,21 +406,21 @@ public void testGEtNoteById() throws WikiException, IllegalAccessException {
   public void testGetNoteByIdAndLang() throws WikiException, IllegalAccessException {
     Identity root = new Identity("root");
     Wiki portalWiki = getOrCreateWiki(wService, PortalConfig.PORTAL_TYPE, "testPortal");
-    Page note1 = noteService.createNote(portalWiki, "Home", new Page("testPage", "testPage"), root) ;
+    Page note1 = noteService.createNote(portalWiki, "Home", new Page("testPage", "testPage"), root);
     note1.setLang("en");
     noteService.createVersionOfNote(note1, "root");
 
-    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "testPortal", "testPage")) ;
+    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "testPortal", note1.getName()));
 
-    Page note = noteService.getNoteByIdAndLang(Long.valueOf(note1.getId()),root,"", "en");
+    Page note = noteService.getNoteByIdAndLang(Long.valueOf(note1.getId()), root, "", "en");
 
     assertNotNull(note);
-    assertEquals(note.getName(),note1.getName());
+    assertEquals(note.getName(), note1.getName());
 
     assertFalse(note.isDeleted());
 
     noteService.deleteNote(note.getWikiType(), note.getWikiOwner(), note.getName());
-    Page deletedNote = noteService.getNoteById(note1.getId(),root,"");
+    Page deletedNote = noteService.getNoteById(note1.getId(), root, "");
 
     assertNotNull(deletedNote);
     assertTrue(deletedNote.isDeleted());
@@ -488,20 +488,19 @@ public void testExportNotes() throws Exception {
     Wiki portalWiki = getOrCreateWiki(wService, PortalConfig.PORTAL_TYPE, "exportPortal");
     Page page1 = new Page("exported1", "exported1");
     page1.setContent("<figure class=\"image\"><img src=\"/portal/rest/wiki/attachments/group/space//spaces/base_de_connaissances/page/4.01-_Profil_et_paramètres/Navigation paramètres.png\"></figure>");
-    Page note1 = noteService.createNote(portalWiki, "Home",page1,root) ;
+    Page note1 = noteService.createNote(portalWiki, "Home", page1, root);
 
     Page page2 = new Page("exported2", "exported2");
     page2.setContent("<a class=\"noteLink\" href=\"exported1\" target=\"_blank\">Règles de rédaction des tutoriels </a>");
-    Page note2 = noteService.createNote(portalWiki, "Home",page2,root) ;
-
+    Page note2 = noteService.createNote(portalWiki, "Home", page2, root);
 
     Page page3 = new Page("exported3", "exported3");
-    page3.setContent("<a class=\"noteLink\" href=\""+note2.getId()+"\">Home</a>");
-    Page note3 = noteService.createNote(portalWiki, "Home",page3,root) ;
+    page3.setContent("<a class=\"noteLink\" href=\"" + note2.getId() + "\">Home</a>");
+    Page note3 = noteService.createNote(portalWiki, "Home", page3, root);
 
-    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "exportPortal", "exported1")) ;
-    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "exportPortal", "exported2")) ;
-    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "exportPortal", "exported3")) ;
+    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "exportPortal", note1.getName()));
+    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "exportPortal", note2.getName()));
+    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "exportPortal", note3.getName()));
 
     String[] notes = new String[3];
     notes[0] = note1.getId();
@@ -509,9 +508,9 @@ public void testExportNotes() throws Exception {
     notes[2] = note3.getId();
 
     notesExportService.startExportNotes(200231, notes, true, root);
-    boolean exportDone= false;
-    while (!exportDone){
-      if(notesExportService.getStatus(200231).getStatus().equals("ZIP_CREATED")){
+    boolean exportDone = false;
+    while (!exportDone) {
+      if (notesExportService.getStatus(200231).getStatus().equals("ZIP_CREATED")) {
         exportDone = true;
       }
     }
@@ -526,9 +525,9 @@ public void testImportNotes() throws Exception {
     Page note2 = noteService.createNote(portalWiki, "Home", new Page("to_be_imported2", "to_be_imported2"),user) ;
     Page note3 = noteService.createNote(portalWiki, "Home", new Page("to_be_imported3", "to_be_imported3"),user) ;
 
-    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "importPortal", "to_be_imported1")) ;
-    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "importPortal", "to_be_imported2")) ;
-    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "importPortal", "to_be_imported3")) ;
+    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "importPortal", note1.getName())) ;
+    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "importPortal", note2.getName())) ;
+    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "importPortal", note3.getName())) ;
 
     String[] notes = new String[3];
     notes[0] = note1.getId();
@@ -557,13 +556,13 @@ public void testImportNotes() throws Exception {
   public void testGetNotesOfWiki() throws WikiException, IllegalAccessException {
     Identity user = new Identity("user");
     Wiki portalWiki = getOrCreateWiki(wService, PortalConfig.PORTAL_TYPE, "testPortal1");
-    noteService.createNote(portalWiki, "Home", new Page("to_be_imported1", "to_be_imported1"),user) ;
-    noteService.createNote(portalWiki, "Home", new Page("to_be_imported2", "to_be_imported2"),user) ;
-    noteService.createNote(portalWiki, "Home", new Page("to_be_imported3", "to_be_imported3"),user) ;
+    Page toBeImported1NotPage = noteService.createNote(portalWiki, "Home", new Page("to_be_imported1", "to_be_imported1"),user) ;
+    Page toBeImported2NotPage = noteService.createNote(portalWiki, "Home", new Page("to_be_imported2", "to_be_imported2"),user) ;
+    Page toBeImported3NotPage = noteService.createNote(portalWiki, "Home", new Page("to_be_imported3", "to_be_imported3"),user) ;
 
-    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "testPortal1", "to_be_imported1")) ;
-    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "testPortal1", "to_be_imported2")) ;
-    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "testPortal1", "to_be_imported3")) ;
+    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "testPortal1", toBeImported1NotPage.getName())) ;
+    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "testPortal1", toBeImported2NotPage.getName())) ;
+    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "testPortal1", toBeImported3NotPage.getName())) ;
 
     List<Page> pages = noteService.getNotesOfWiki(portalWiki.getType(),portalWiki.getOwner());
 
@@ -573,18 +572,18 @@ public void testGetNotesOfWiki() throws WikiException, IllegalAccessException {
   public void testDeleteNote1() throws WikiException, IllegalAccessException {
     Identity user = new Identity("user");
     Wiki portalWiki = getOrCreateWiki(wService, PortalConfig.PORTAL_TYPE, "testPortal2");
-    noteService.createNote(portalWiki, "Home", new Page("note1", "note1"),user) ;
-    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "testPortal2", "note1")) ;
-    noteService.deleteNote(PortalConfig.PORTAL_TYPE, "testPortal2", "note1",user);
+    Page notePage = noteService.createNote(portalWiki, "Home", new Page("note1", "note1"), user);
+    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "testPortal2", notePage.getName()));
+    noteService.deleteNote(PortalConfig.PORTAL_TYPE, "testPortal2", notePage.getName(), user);
 
-    assertNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "testPortal2", "note1")) ;
+    assertNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "testPortal2", notePage.getName()));
   }
 
   public void testDeleteVersionsByNoteIdAndLang() throws WikiException, IllegalAccessException {
     Identity root = new Identity("root");
     Wiki portalWiki = getOrCreateWiki(wService, PortalConfig.PORTAL_TYPE, "testPortal");
     Page note1 = noteService.createNote(portalWiki, "Home", new Page("testPage1", "testPage1"), root);
-    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "testPortal", "testPage1"));
+    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "testPortal", note1.getName()));
     note1 = noteService.getNoteById(note1.getId());
     note1.setLang("en");
     note1.setTitle("englishTitle");

From ca601e53102b4aa6d428c3785368c3a6d491444a Mon Sep 17 00:00:00 2001
From: Sofien Haj Chedhli <shajchedli@exoplatform.com>
Date: Mon, 22 Jul 2024 11:01:22 +0100
Subject: [PATCH 11/40] feat: Configure contentTranslateOption feature property
 - EXO-73118 -Meeds-io/MIPs#128 (#1045)

---
 .../notes-rich-editor/components/NoteEditorTopBar.vue       | 6 +++++-
 .../notes-rich-editor/components/NoteFullRichEditor.vue     | 5 +++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue
index 10ba9ed9cf..1627d6d5e7 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue
@@ -30,7 +30,7 @@
             {{ editorIcon }}
           </v-icon>
           <span class="notesFormTitle my-auto ms-3 me-5">{{ formTitle }}</span>
-          <v-tooltip bottom>
+          <v-tooltip bottom v-if="translationOptionEnabled">
             <template #activator="{ on, attrs }">
               <v-btn
                 v-on="on"
@@ -185,6 +185,10 @@ export default {
     saveButtonDisabled: {
       type: Boolean,
       default: true
+    },
+    translationOptionEnabled: {
+      type: Boolean,
+      default: true
     }
   },
   created() {
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 31f4b098ef..437a63f9ec 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
@@ -38,6 +38,7 @@
       :editor-icon="editorIcon"
       :save-button-icon="saveButtonIcon"
       :save-button-disabled="saveButtonDisabled"
+      :translation-option-enabled="translationOptionEnabled"
       @editor-closed="editorClosed"
       @post-note="postNote" />
     <form class="notes-content">
@@ -170,6 +171,10 @@ export default {
     saveButtonDisabled: {
       type: Boolean,
       default: true
+    },
+    translationOptionEnabled: {
+      type: Boolean,
+      default: true
     }
   },
   watch: {

From 7353b3578c64a661afdaae5fe38a728d3f870956 Mon Sep 17 00:00:00 2001
From: Sofien Haj Chedhli <shajchedli@exoplatform.com>
Date: Mon, 22 Jul 2024 11:11:04 +0100
Subject: [PATCH 12/40] feat: include select image extension in the note rich
 editor - EXO-73170 - meeds-io/MIPs#128  (#1046)

---
 .../vue-app/notes-rich-editor/js/Utils.js     | 27 +++++++++++++++++++
 .../webapp/vue-app/notes-rich-editor/main.js  |  1 +
 2 files changed, 28 insertions(+)

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 90bb46b890..96dc12934e 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
@@ -128,3 +128,30 @@ function preserveHighlightedCode(body, documentElement) {
     });
   }
 }
+export function isSameContent(content, originalContent) {
+  // check if content composed only by text and then compare only the text content
+  const containOnlyText = Array.from(new DOMParser().parseFromString(content, 'text/html').body.childNodes).every(node => (node.nodeName === 'P' && node.textContent.trim()) || node.nodeType === Node.TEXT_NODE)
+      && Array.from(new DOMParser().parseFromString(originalContent, 'text/html').body.childNodes).every(node => (node.nodeName === 'P' && node.textContent.trim()) || node.nodeType === Node.TEXT_NODE);
+  if (containOnlyText) {
+    return getString(content) === getString(originalContent);
+  }
+  // get nodes and remove all empty paragraph elements then compare.
+  const originalContentNode = Array.from(new DOMParser().parseFromString(originalContent, 'text/html').body.childNodes).filter(node => !(node.nodeName === 'P' && !node.textContent.trim() && !node.children.length > 0));
+  let index = originalContentNode.length - 1;
+  //remove all empty text nodes at the end.
+  while (index >= 0 && originalContentNode[index].nodeType === Node.TEXT_NODE && !originalContentNode[index].textContent.trim() ) {
+    originalContentNode.pop();
+    index--;
+  }
+  const currentContentNode = Array.from(new DOMParser().parseFromString(content, 'text/html').body.childNodes).filter(node => !(node.nodeName === 'P' && !node.textContent.trim() && !node.children.length > 0));
+  index = currentContentNode.length - 1;
+  while (index >= 0 && currentContentNode[index].nodeType === Node.TEXT_NODE && !currentContentNode[index].textContent.trim() ) {
+    currentContentNode.pop();
+    index--;
+  }
+  // isEqualNode : Two nodes are equal when they have the same type and the same content.
+  return  originalContentNode.length === currentContentNode.length && originalContentNode.every((node, index) => node.isEqualNode(currentContentNode[index]));
+}
+function getString(body) {
+  return new DOMParser().parseFromString(body, 'text/html').documentElement.textContent.replace(/&nbsp;/g, '').trim();
+}
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/main.js b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/main.js
index c58a07cb04..40f206f5e7 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/main.js
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/main.js
@@ -9,4 +9,5 @@ if (extensionRegistry) {
     });
   }
 }
+Vue.prototype.$utils.includeExtensions('WYSIWYGPluginsExtensions');
 

From cf7c77f8d9a0b557172525b276568f639044feb9 Mon Sep 17 00:00:00 2001
From: Sofien Haj Chedhli <shajchedli@exoplatform.com>
Date: Wed, 24 Jul 2024 15:14:53 +0100
Subject: [PATCH 13/40] feat: Add image download folder to the content editor
 instance - EXO-72679 - Meeds-io/MIPs#128 (#1044)

---
 .../notes-rich-editor/components/NoteFullRichEditor.vue     | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

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 437a63f9ec..6912b54a07 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
@@ -175,6 +175,10 @@ export default {
     translationOptionEnabled: {
       type: Boolean,
       default: true
+    },
+    imagesDownloadFolder: {
+      type: String,
+      default: 'DRIVE_ROOT_NODE/notes/images'
     }
   },
   watch: {
@@ -304,7 +308,7 @@ export default {
         typeOfRelation: 'mention_activity_stream',
         spaceURL: self.suggesterSpaceUrl,
         spaceGroupId: self.spaceGroupId,
-        imagesDownloadFolder: 'DRIVE_ROOT_NODE/notes/images',
+        imagesDownloadFolder: self.imagesDownloadFolder,
         toolbarLocation: 'top',
         extraAllowedContent: 'table[summary];img[style,class,src,referrerpolicy,alt,width,height];span(*)[*]{*}; span[data-atwho-at-query,data-atwho-at-value,contenteditable]; a[*];i[*];',
         removeButtons: '',

From 77e7ac9a2b291465035bb262c3e71c94d94f6a70 Mon Sep 17 00:00:00 2001
From: Sofien Haj Chedhli <shajchedli@exoplatform.com>
Date: Wed, 24 Jul 2024 15:15:27 +0100
Subject: [PATCH 14/40] feat: Enable the inclusion of notes in the article
 content - EXO-72731 - Meeds-io/MIPs#128 (#1047)

---
 .../notes-editor/components/NotesEditorDashboard.vue      | 6 ++----
 .../notes-rich-editor/components/NoteFullRichEditor.vue   | 8 ++++----
 .../vue-app/notes/components/NoteTreeviewDrawer.vue       | 2 +-
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
index d8e5115d49..56c25e1d88 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
@@ -231,11 +231,9 @@ export default {
     this.$root.$on('show-alert', this.displayMessage);
     this.$root.$on('display-treeview-items', filter => {
       if ( urlParams.has('noteId') ) {
-        this.$refs.noteTreeview.open(this.note, 'includePages', null, filter);
+        this.openTreeView(urlParams.get('noteId'), 'includePages', null, filter);
       } else if (urlParams.has('parentNoteId')) {
-        this.$notesService.getNoteById(this.parentPageId).then(note => {
-          this.openTreeView(note, 'includePages', null, filter);
-        });
+        this.openTreeView(urlParams.get('parentNoteId'), 'includePages', null, filter);
       }
     });
     this.$root.$on('add-translation', this.addTranslation);
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 6912b54a07..bf835fb633 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
@@ -251,19 +251,19 @@ export default {
         if (editorSelectedElement.is('a')) {
           if (editorSelectedElement?.getAttribute('class') === 'noteLink') {
             this.editor.getSelection()?.getStartElement()?.remove();
-            this.editor.insertHtml(this.createLinkElement(note.noteId, note.name, 'noteLink'));
+            this.editor.insertHtml(this.createLinkElement(note.url, note.name, 'noteLink'));
           }
           if (editorSelectedElement.getAttribute('class') === 'labelLink') {
             const linkText = editorSelectedElement.getHtml();
             this.editor.getSelection().getStartElement().remove();
-            this.editor.insertHtml(this.createLinkElement(note.noteId, linkText, 'noteLink'));
+            this.editor.insertHtml(this.createLinkElement(note.url, linkText, 'noteLink'));
           }
         } else {
           const linkText = this.editor?.getSelection()?.getSelectedText();
-          this.editor.insertHtml(this.createLinkElement(note.noteId, linkText, 'labelLink'));
+          this.editor.insertHtml(this.createLinkElement(note.url, linkText, 'labelLink'));
         }
       } else {
-        this.editor.insertHtml(this.createLinkElement(note.noteId, note.name, 'noteLink'));
+        this.editor.insertHtml(this.createLinkElement(note.url, note.name, 'noteLink'));
       }
     },
     setFocus() {
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 9f41506b21..237e77bc73 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
@@ -547,7 +547,7 @@ export default {
         this.render = true;
         this.$refs.breadcrumbDrawer.open();
       });
-      if (this.note.canManage && !this.filterOptions.includes(this.$t('notes.filter.label.drafts'))) {
+      if (this.note.canManage || note.canManage && !this.filterOptions.includes(this.$t('notes.filter.label.drafts'))) {
         this.filterOptions.push(this.$t('notes.filter.label.drafts'));
       }
     },

From 5f49af63c7707f2c3d23a9db1215c50fa9a1d279 Mon Sep 17 00:00:00 2001
From: Helmi Akermi <70575401+hakermi@users.noreply.github.com>
Date: Thu, 18 Jul 2024 10:46:17 +0100
Subject: [PATCH 15/40] feat: Implement note editor metadata drawer -
 EXO-71928,EXO-71929,EXO-71930 - Meeds-io/MIPs#128 (#1039)

Implement note editor metadata drawer
---
 .../meeds/notes/model/NoteFeaturedImage.java  |  70 ++++
 .../meeds/notes/model/NoteMetadataObject.java |  29 ++
 .../meeds/notes/model/NotePageProperties.java |  39 ++
 .../notes/rest/model/FeaturedImageEntity.java |  37 ++
 .../rest/model/PagePropertiesEntity.java      |  37 ++
 .../meeds/notes/rest/utils/EntityBuilder.java |  51 +++
 .../exoplatform/wiki/jpa/EntityConverter.java |  57 ++-
 .../exoplatform/wiki/jpa/JPADataStorage.java  |   8 +-
 .../org/exoplatform/wiki/model/DraftPage.java |   8 +-
 .../java/org/exoplatform/wiki/model/Page.java |   2 +
 .../exoplatform/wiki/service/DataStorage.java |  20 +-
 .../exoplatform/wiki/service/NoteService.java |  44 ++
 .../wiki/service/impl/NoteServiceImpl.java    | 387 ++++++++++++++++--
 .../wiki/service/rest/NotesRestService.java   | 140 ++++++-
 .../wiki/service/TestNoteService.java         | 113 ++++-
 .../service/rest/NotesRestServiceTest.java    |  93 ++++-
 .../resources/conf/metadata-configuration.xml |  47 +++
 .../resources/conf/portal/configuration.xml   |   3 +-
 .../portlet/notes/notesPortlet_en.properties  |  11 +
 .../webapp/WEB-INF/conf/configuration.xml     |   1 +
 .../conf/wiki/feature-flags-configuration.xml |  52 +++
 .../conf/wiki/metadata-configuration.xml      |  23 +-
 .../webui/workspace/UINotesHeadTemplate.gtmpl |   5 +-
 .../javascript/eXo/wiki/notesService.js       |  41 ++
 .../main/webapp/skin/less/notes/notes.less    |  61 +++
 .../components/NotesEditorDashboard.vue       |  39 +-
 .../NoteEditorFeaturedImageDrawer.vue         | 124 ++++++
 .../components/NoteEditorMetadataDrawer.vue   | 315 ++++++++++++++
 .../components/NoteEditorTopBar.vue           |  29 +-
 .../components/NoteFullRichEditor.vue         |  52 ++-
 .../notes-rich-editor/initComponents.js       |   6 +-
 31 files changed, 1851 insertions(+), 93 deletions(-)
 create mode 100644 notes-service/src/main/java/io/meeds/notes/model/NoteFeaturedImage.java
 create mode 100644 notes-service/src/main/java/io/meeds/notes/model/NoteMetadataObject.java
 create mode 100644 notes-service/src/main/java/io/meeds/notes/model/NotePageProperties.java
 create mode 100644 notes-service/src/main/java/io/meeds/notes/rest/model/FeaturedImageEntity.java
 create mode 100644 notes-service/src/main/java/io/meeds/notes/rest/model/PagePropertiesEntity.java
 create mode 100644 notes-service/src/main/java/io/meeds/notes/rest/utils/EntityBuilder.java
 create mode 100644 notes-service/src/test/resources/conf/metadata-configuration.xml
 create mode 100644 notes-webapp/src/main/webapp/WEB-INF/conf/wiki/feature-flags-configuration.xml
 create mode 100644 notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorFeaturedImageDrawer.vue
 create mode 100644 notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue

diff --git a/notes-service/src/main/java/io/meeds/notes/model/NoteFeaturedImage.java b/notes-service/src/main/java/io/meeds/notes/model/NoteFeaturedImage.java
new file mode 100644
index 0000000000..6d0b6f19dc
--- /dev/null
+++ b/notes-service/src/main/java/io/meeds/notes/model/NoteFeaturedImage.java
@@ -0,0 +1,70 @@
+/*
+ * 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.
+*/
+package io.meeds.notes.model;
+
+import lombok.AllArgsConstructor;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+import java.io.InputStream;
+
+@Data
+@NoArgsConstructor
+@AllArgsConstructor
+public class NoteFeaturedImage {
+
+  private Long        id;
+
+  private String      fileName;
+
+  private String      mimeType;
+
+  private long        fileSize;
+
+  private Long        lastUpdated;
+
+  private String      base64Data;
+
+  private String      uploadId;
+  
+  private String      altText;
+
+  private InputStream fileInputStream;
+
+  public NoteFeaturedImage(Long id,
+                           String fileName,
+                           String mimeType,
+                           long fileSize,
+                           Long lastUpdated,
+                           InputStream fileInputStream) {
+    this.id = id;
+    this.fileName = fileName;
+    this.mimeType = mimeType;
+    this.fileSize = fileSize;
+    this.lastUpdated = lastUpdated;
+    this.fileInputStream = fileInputStream;
+  }
+
+  public NoteFeaturedImage(String base64Data, String mimeType, String uploadId, String altText) {
+    this.base64Data = base64Data;
+    this.mimeType = mimeType;
+    this.uploadId = uploadId;
+    this.altText = altText;
+  }
+}
diff --git a/notes-service/src/main/java/io/meeds/notes/model/NoteMetadataObject.java b/notes-service/src/main/java/io/meeds/notes/model/NoteMetadataObject.java
new file mode 100644
index 0000000000..e4f767eedd
--- /dev/null
+++ b/notes-service/src/main/java/io/meeds/notes/model/NoteMetadataObject.java
@@ -0,0 +1,29 @@
+/*
+ * 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,
+ *
+ */
+package io.meeds.notes.model;
+
+import org.exoplatform.social.metadata.model.MetadataObject;
+
+public class NoteMetadataObject extends MetadataObject {
+
+  public NoteMetadataObject(String type, String id, String parentId, long spaceId) {
+    super(type, id, parentId, spaceId);
+  }
+}
diff --git a/notes-service/src/main/java/io/meeds/notes/model/NotePageProperties.java b/notes-service/src/main/java/io/meeds/notes/model/NotePageProperties.java
new file mode 100644
index 0000000000..797599d31c
--- /dev/null
+++ b/notes-service/src/main/java/io/meeds/notes/model/NotePageProperties.java
@@ -0,0 +1,39 @@
+/*
+ * 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,
+ *
+ */
+
+package io.meeds.notes.model;
+
+import lombok.AllArgsConstructor;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+@Data
+@NoArgsConstructor
+@AllArgsConstructor
+public class NotePageProperties {
+
+  private long              noteId;
+
+  private String            summary;
+
+  private NoteFeaturedImage featuredImage;
+
+  private boolean           isDraft;
+}
diff --git a/notes-service/src/main/java/io/meeds/notes/rest/model/FeaturedImageEntity.java b/notes-service/src/main/java/io/meeds/notes/rest/model/FeaturedImageEntity.java
new file mode 100644
index 0000000000..285577e965
--- /dev/null
+++ b/notes-service/src/main/java/io/meeds/notes/rest/model/FeaturedImageEntity.java
@@ -0,0 +1,37 @@
+/*
+ * 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.
+ */
+package io.meeds.notes.rest.model;
+
+import lombok.AllArgsConstructor;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+@Data
+@NoArgsConstructor
+@AllArgsConstructor
+public class FeaturedImageEntity {
+
+  private String base64Data;
+
+  private String mimeType;
+
+  private String uploadId;
+
+  private String altText;
+}
diff --git a/notes-service/src/main/java/io/meeds/notes/rest/model/PagePropertiesEntity.java b/notes-service/src/main/java/io/meeds/notes/rest/model/PagePropertiesEntity.java
new file mode 100644
index 0000000000..e89d41f1ab
--- /dev/null
+++ b/notes-service/src/main/java/io/meeds/notes/rest/model/PagePropertiesEntity.java
@@ -0,0 +1,37 @@
+/*
+ * 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.
+ */
+package io.meeds.notes.rest.model;
+
+import lombok.AllArgsConstructor;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+@Data
+@NoArgsConstructor
+@AllArgsConstructor
+public class PagePropertiesEntity {
+
+  private long                noteId;
+
+  private String              summary;
+
+  private FeaturedImageEntity featuredImage;
+
+  private boolean             isDraft;
+}
diff --git a/notes-service/src/main/java/io/meeds/notes/rest/utils/EntityBuilder.java b/notes-service/src/main/java/io/meeds/notes/rest/utils/EntityBuilder.java
new file mode 100644
index 0000000000..1e77b3c2e4
--- /dev/null
+++ b/notes-service/src/main/java/io/meeds/notes/rest/utils/EntityBuilder.java
@@ -0,0 +1,51 @@
+/*
+ * 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,
+ *
+ */
+package io.meeds.notes.rest.utils;
+
+import io.meeds.notes.model.NoteFeaturedImage;
+import io.meeds.notes.model.NotePageProperties;
+import io.meeds.notes.rest.model.FeaturedImageEntity;
+import io.meeds.notes.rest.model.PagePropertiesEntity;
+
+public class EntityBuilder {
+
+  private EntityBuilder() { // NOSONAR
+  }
+
+  public static NotePageProperties toNotePageProperties(PagePropertiesEntity pagePropertiesEntity) {
+    if (pagePropertiesEntity == null) {
+      return null;
+    }
+    return new NotePageProperties(pagePropertiesEntity.getNoteId(),
+                                  pagePropertiesEntity.getSummary(),
+                                  toNoteFeaturedImage(pagePropertiesEntity.getFeaturedImage()),
+                                  pagePropertiesEntity.isDraft());
+  }
+
+  public static NoteFeaturedImage toNoteFeaturedImage(FeaturedImageEntity featuredImageEntity) {
+    if (featuredImageEntity == null) {
+      return null;
+    }
+    return new NoteFeaturedImage(featuredImageEntity.getBase64Data(),
+                                 featuredImageEntity.getMimeType(),
+                                 featuredImageEntity.getUploadId(),
+                                 featuredImageEntity.getAltText());
+  }
+}
diff --git a/notes-service/src/main/java/org/exoplatform/wiki/jpa/EntityConverter.java b/notes-service/src/main/java/org/exoplatform/wiki/jpa/EntityConverter.java
index 1bee657786..5c28c6cba5 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/jpa/EntityConverter.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/jpa/EntityConverter.java
@@ -19,6 +19,7 @@
 
 package org.exoplatform.wiki.jpa;
 
+import io.meeds.notes.model.NoteMetadataObject;
 import org.apache.commons.lang3.ArrayUtils;
 import org.apache.commons.lang3.StringUtils;
 import org.exoplatform.commons.file.model.FileInfo;
@@ -30,6 +31,11 @@
 import org.exoplatform.social.core.identity.model.Identity;
 import org.exoplatform.social.core.identity.provider.OrganizationIdentityProvider;
 import org.exoplatform.social.core.manager.IdentityManager;
+import org.exoplatform.social.core.space.model.Space;
+import org.exoplatform.social.core.space.spi.SpaceService;
+import org.exoplatform.social.metadata.MetadataService;
+import org.exoplatform.social.metadata.model.MetadataKey;
+import org.exoplatform.social.metadata.model.MetadataType;
 import org.exoplatform.wiki.WikiException;
 import org.exoplatform.wiki.jpa.dao.PageDAO;
 import org.exoplatform.wiki.jpa.dao.WikiDAO;
@@ -46,7 +52,17 @@
  */
 public class EntityConverter {
 
-  private static final Log LOG                            = ExoLogger.getLogger(EntityConverter.class);
+  private static final Log       LOG = ExoLogger.getLogger(EntityConverter.class);
+
+  private static SpaceService    spaceService;
+
+  private static MetadataService metadataService;
+
+  public static final MetadataType NOTES_METADATA_TYPE = new MetadataType(1001, "notes");
+
+  public static final MetadataKey  NOTES_METADATA_KEY   = new MetadataKey(NOTES_METADATA_TYPE.getName(),
+                                                                         Utils.NOTES_METADATA_OBJECT_TYPE,
+                                                                         0);
 
   public static Wiki convertWikiEntityToWiki(WikiEntity wikiEntity) {
     Wiki wiki = null;
@@ -122,10 +138,47 @@ public static Page convertPageEntityToPage(PageEntity pageEntity) {
       page.setActivityId(pageEntity.getActivityId());
       page.setDeleted(pageEntity.isDeleted());
       page.setUrl(Utils.getPageUrl(page));
+      buildNotePageMetadata(page, page.isDraftPage());
     }
     return page;
   }
 
+  private static void buildNotePageMetadata(Page note, boolean isDraft) {
+    if (note == null) {
+      return;
+    }
+    Space space = getSpaceService().getSpaceByGroupId(note.getWikiOwner());
+    if (space != null) {
+      String noteId = note.getId();
+      if (note.getLang() != null) {
+        noteId = noteId + "-" + note.getLang();
+      }
+      NoteMetadataObject noteMetadataObject = new NoteMetadataObject(isDraft ? "noteDraftPage" : "notePage",
+                                                                     noteId,
+                                                                     note.getParentPageId(),
+                                                                     Long.parseLong(space.getId()));
+      getMetadataService().getMetadataItemsByMetadataAndObject(NOTES_METADATA_KEY, noteMetadataObject)
+                          .stream()
+                          .findFirst()
+                          .ifPresent(metadataItem -> note.setProperties(metadataItem.getProperties()));
+
+    }
+  }
+
+  private static SpaceService getSpaceService() {
+    if (spaceService == null) {
+      spaceService = CommonsUtils.getService(SpaceService.class);
+    }
+    return spaceService;
+  }
+
+  private static MetadataService getMetadataService() {
+    if (metadataService == null) {
+      metadataService = CommonsUtils.getService(MetadataService.class);
+    }
+    return metadataService;
+  }
+  
   public static List<PermissionEntry> convertPermissionEntitiesToPermissionEntries(List<PermissionEntity> permissionEntities,
                                                                                    List<PermissionType> filteredPermissionTypes) {
     List<PermissionEntry> permissionEntries = new ArrayList<>();
@@ -406,6 +459,7 @@ public static DraftPage convertDraftPageEntityToDraftPage(DraftPageEntity draftP
           draftPage.setWikiType(wiki.getType());
         }
       }
+      buildNotePageMetadata(draftPage, true);
     }
     return draftPage;
   }
@@ -454,6 +508,7 @@ public static PageVersion convertPageVersionEntityToPageVersion(PageVersionEntit
       pageVersion.setOwner(pageVersionEntity.getAuthor());
       pageVersion.setParent(convertPageEntityToPage(pageVersionEntity.getPage()));
       pageVersion.setLang(pageVersionEntity.getLang());
+      buildNotePageMetadata(pageVersion, pageVersion.isDraftPage());
     }
     return pageVersion;
   }
diff --git a/notes-service/src/main/java/org/exoplatform/wiki/jpa/JPADataStorage.java b/notes-service/src/main/java/org/exoplatform/wiki/jpa/JPADataStorage.java
index c40b45c32a..d0def7fe2f 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/jpa/JPADataStorage.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/jpa/JPADataStorage.java
@@ -1144,7 +1144,7 @@ public List<PageHistory> getHistoryOfPage(Page page) throws WikiException {
 
   @Override
   @ExoTransactional
-  public void addPageVersion(Page page , String userName) throws WikiException {
+  public PageVersion addPageVersion(Page page , String userName) throws WikiException {
     if(page != null) {
       PageEntity pageEntity = fetchPageEntity(page);
 
@@ -1154,7 +1154,6 @@ public void addPageVersion(Page page , String userName) throws WikiException {
       }
 
       PageVersionEntity pageVersionEntity = new PageVersionEntity();
-
       Long versionNumber = pageVersionDAO.getLastversionNumberOfPage(pageEntity.getId());
       if(versionNumber == null) {
         versionNumber = 1L;
@@ -1191,13 +1190,15 @@ public void addPageVersion(Page page , String userName) throws WikiException {
       pageEntity.setVersions(pageVersionEntities);
 
       pageDAO.update(pageEntity);
+
+      return EntityConverter.convertPageVersionEntityToPageVersion(pageVersionEntity);
     } else {
       throw new WikiException("Cannot create version of a page null");
     }
   }
 
   @Override
-  public void restoreVersionOfPage(String versionName, Page page) throws WikiException {
+  public PageVersion restoreVersionOfPage(String versionName, Page page) throws WikiException {
     if(page != null) {
       PageEntity pageEntity = fetchPageEntity(page);
 
@@ -1211,6 +1212,7 @@ public void restoreVersionOfPage(String versionName, Page page) throws WikiExcep
         pageEntity.setContent(versionToRestore.getContent());
         pageEntity.setUpdatedDate(Calendar.getInstance().getTime());
         pageDAO.update(pageEntity);
+        return EntityConverter.convertPageVersionEntityToPageVersion(versionToRestore);
       } else {
         throw new WikiException("Cannot restore version " + versionName + " of a page " + page.getWikiType() + ":"
             + page.getWikiOwner() + ":" + page.getName() + " because version does not exist.");
diff --git a/notes-service/src/main/java/org/exoplatform/wiki/model/DraftPage.java b/notes-service/src/main/java/org/exoplatform/wiki/model/DraftPage.java
index 9aa99ea929..f85d830cb4 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/model/DraftPage.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/model/DraftPage.java
@@ -25,13 +25,13 @@
 
 @Data
 public class DraftPage extends Page {
-  private String     targetPageId;
+  private String              targetPageId;
 
-  private String     targetPageRevision;
+  private String              targetPageRevision;
 
-  private boolean    newPage;
+  private boolean             newPage;
 
-  private DiffResult changes;
+  private DiffResult          changes;
 
   @Override
   public boolean isDraftPage() {
diff --git a/notes-service/src/main/java/org/exoplatform/wiki/model/Page.java b/notes-service/src/main/java/org/exoplatform/wiki/model/Page.java
index 16d60123bd..d252b409a3 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/model/Page.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/model/Page.java
@@ -101,6 +101,8 @@ public class Page {
 
   private String                          lang;
 
+  private Map<String, String>             properties;
+
   public Page(String name) {
     this.name = name;
   }
diff --git a/notes-service/src/main/java/org/exoplatform/wiki/service/DataStorage.java b/notes-service/src/main/java/org/exoplatform/wiki/service/DataStorage.java
index 6da4bde05a..3441db6061 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/service/DataStorage.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/service/DataStorage.java
@@ -197,9 +197,25 @@ public default List<Attachment> getAttachmentsOfPage(Page page, boolean loadCont
 
   public List<PageHistory> getHistoryOfPage(Page page) throws WikiException;
 
-  public void addPageVersion(Page page, String userName) throws WikiException;
+  /**
+   * Creates a new page version
+   *
+   * @param page target note page
+   * @param userName current username
+   * @return {@link PageVersion}
+   * @throws WikiException
+   */
+  PageVersion addPageVersion(Page page, String userName) throws WikiException;
 
-  public void restoreVersionOfPage(String versionName, Page page) throws WikiException;
+  /**
+   * Restore a note from given version
+   *
+   * @param versionName version name
+   * @param page target note page
+   * @return {@link PageVersion}
+   * @throws WikiException
+   */
+  PageVersion restoreVersionOfPage(String versionName, Page page) throws WikiException;
 
   public Page updatePage(Page page) throws WikiException;
 
diff --git a/notes-service/src/main/java/org/exoplatform/wiki/service/NoteService.java b/notes-service/src/main/java/org/exoplatform/wiki/service/NoteService.java
index 3c59998946..2d7ff143f6 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/service/NoteService.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/service/NoteService.java
@@ -22,7 +22,10 @@
 
 import java.io.IOException;
 import java.util.List;
+import java.util.Map;
 
+import io.meeds.notes.model.NoteFeaturedImage;
+import io.meeds.notes.model.NotePageProperties;
 import org.gatein.api.EntityNotFoundException;
 
 import org.exoplatform.commons.utils.PageList;
@@ -773,4 +776,45 @@ Page getNoteByIdAndLang(Long pageId, Identity userIdentity, String source, Strin
    * @param parentPageId Note parent page id
    */
   void removeOrphanDraftPagesByParentPage(long parentPageId);
+
+  /**
+   * Saves Note featured Image
+   *
+   * @param note target note page
+   * @param featuredImage Note featured image
+   * @return saved featured image ID
+   */
+  Long saveNoteFeaturedImage(Page note, NoteFeaturedImage featuredImage) throws Exception;
+
+  /**
+   * Get Note featured Image by its given id
+   *
+   * @param noteId Note id
+   * @param lang note version language
+   * @param isDraft is target not a draft
+   * @param userIdentityId user identity id
+   * @return {@link NoteFeaturedImage}
+   */
+  NoteFeaturedImage getNoteFeaturedImageInfo(Long noteId, String lang, boolean isDraft, long userIdentityId) throws Exception;
+
+  /**
+   * Save note metadata properties
+   *
+   * @param pageProperties note metadata properties to save
+   * @param lang target version language
+   * @param userIdentityId user identity id
+   */
+  Map<String, String> saveNoteMetadata(NotePageProperties pageProperties, String lang, Long userIdentityId) throws Exception;
+
+  /**
+   * Removes note featured image and its related metadata property
+   *
+   * @param noteId target note id
+   * @param featuredImageId featured image id
+   * @param lang target version language
+   * @param isDraft is the target note a draft
+   * @param userIdentityId user identity id
+   * @throws Exception
+   */
+  void removeNoteFeaturedImage(Long noteId, Long featuredImageId, String lang, boolean isDraft, Long userIdentityId) throws Exception;
 }
diff --git a/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java b/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java
index cd0d6b78f7..bffbeb47ba 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java
@@ -20,25 +20,32 @@
 
 package org.exoplatform.wiki.service.impl;
 
+import java.io.ByteArrayInputStream;
 import java.io.File;
 import java.io.IOException;
 import java.net.MalformedURLException;
 import java.net.URL;
+import java.nio.charset.Charset;
 import java.nio.file.Files;
 import java.text.SimpleDateFormat;
-import java.util.ArrayList;
-import java.util.Calendar;
-import java.util.Date;
-import java.util.HashMap;
-import java.util.HashSet;
-import java.util.LinkedList;
-import java.util.List;
-import java.util.Map;
-import java.util.Queue;
-import java.util.Set;
+import java.util.*;
 import java.util.concurrent.ConcurrentHashMap;
 
+import io.meeds.notes.model.NoteFeaturedImage;
+import io.meeds.notes.model.NoteMetadataObject;
+import io.meeds.notes.model.NotePageProperties;
+import org.apache.commons.collections4.MapUtils;
 import org.apache.commons.lang3.StringUtils;
+import org.apache.ecs.html.S;
+import org.exoplatform.commons.exception.ObjectNotFoundException;
+import org.exoplatform.commons.file.model.FileInfo;
+import org.exoplatform.commons.file.model.FileItem;
+import org.exoplatform.commons.file.services.FileService;
+import org.exoplatform.social.common.ObjectAlreadyExistsException;
+import org.exoplatform.social.metadata.model.MetadataKey;
+import org.exoplatform.social.metadata.model.MetadataType;
+import org.exoplatform.upload.UploadResource;
+import org.exoplatform.upload.UploadService;
 import org.gatein.api.EntityNotFoundException;
 
 import com.fasterxml.jackson.core.type.TypeReference;
@@ -52,10 +59,8 @@
 import org.exoplatform.services.listener.ListenerService;
 import org.exoplatform.services.log.ExoLogger;
 import org.exoplatform.services.log.Log;
-import org.exoplatform.services.organization.OrganizationService;
 import org.exoplatform.services.security.Identity;
 import org.exoplatform.services.security.IdentityConstants;
-import org.exoplatform.services.security.IdentityRegistry;
 import org.exoplatform.social.common.service.HTMLUploadImageProcessor;
 import org.exoplatform.social.core.identity.provider.OrganizationIdentityProvider;
 import org.exoplatform.social.core.manager.IdentityManager;
@@ -96,15 +101,40 @@
 
 public class NoteServiceImpl implements NoteService {
 
-  public static final String                              CACHE_NAME          = "wiki.PageRenderingCache";
+  public static final String                              CACHE_NAME                             = "wiki.PageRenderingCache";
 
-  public static final String                              ATT_CACHE_NAME      = "wiki.PageAttachmentCache";
+  public static final String                              ATT_CACHE_NAME                         = "wiki.PageAttachmentCache";
 
-  private static final String                             UNTITLED_PREFIX     = "Untitled_";
+  private static final String                             UNTITLED_PREFIX                        = "Untitled_";
 
-  private static final String                             TEMP_DIRECTORY_PATH = "java.io.tmpdir";
+  private static final String                             TEMP_DIRECTORY_PATH                    = "java.io.tmpdir";
 
-  private static final Log                                log                 = ExoLogger.getLogger(NoteServiceImpl.class);
+  private static final String                             FILE_NAME_SPACE                        = "wiki";
+
+  private static final Log                                log                                    =
+                                                              ExoLogger.getLogger(NoteServiceImpl.class);
+
+  private static final MetadataType                       NOTES_METADATA_TYPE                    =
+                                                                              new MetadataType(1001, "notes");
+
+  private static final MetadataKey                        NOTES_METADATA_KEY                     =
+                                                                             new MetadataKey(NOTES_METADATA_TYPE.getName(),
+                                                                                             Utils.NOTES_METADATA_OBJECT_TYPE,
+                                                                                             0);
+
+  public static final String                              NOTE_METADATA_PAGE_OBJECT_TYPE         = "notePage";
+
+  public static final String                              NOTE_METADATA_DRAFT_PAGE_OBJECT_TYPE   = "noteDraftPage";
+
+  public static final String                              NOTE_METADATA_VERSION_PAGE_OBJECT_TYPE = "noteVersionPage";
+
+  private static final String                             SUMMARY_PROP                           = "summary";
+
+  private static final String                             FEATURED_IMAGE_ID                      = "featuredImageId";
+
+  private static final String                             FEATURED_IMAGE_UPDATED_DATE            = "featuredImageUpdatedDate";
+
+  private static final String                             FEATURED_IMAGE_ALT_TEXT                = "featuredImageAltText";
 
   private final WikiService                               wikiService;
 
@@ -114,7 +144,7 @@ public class NoteServiceImpl implements NoteService {
 
   private final ExoCache<Integer, AttachmentCountData>    attachmentCountCache;
 
-  private final Map<WikiPageParams, List<WikiPageParams>> pageLinksMap        = new ConcurrentHashMap<>();
+  private final Map<WikiPageParams, List<WikiPageParams>> pageLinksMap                           = new ConcurrentHashMap<>();
 
   private final IdentityManager                           identityManager;
 
@@ -122,23 +152,21 @@ public class NoteServiceImpl implements NoteService {
 
   private final CMSService                                cmsService;
 
-  private final IdentityRegistry                          identityRegistry;
-
-  private final OrganizationService                       organizationService;
-
   private final ListenerService                           listenerService;
+  
+  private final FileService                               fileService;
+
+  private final UploadService                             uploadService;
 
   private final HTMLUploadImageProcessor                  htmlUploadImageProcessor;
 
-  public NoteServiceImpl( DataStorage dataStorage,
-                          CacheService cacheService,
-                          WikiService wikiService,
-                          IdentityManager identityManager,
-                          SpaceService spaceService,
-                          CMSService cmsService,
-                          IdentityRegistry identityRegistry,
-                          OrganizationService organizationService,
-                          ListenerService listenerService) {
+  public NoteServiceImpl(DataStorage dataStorage,
+                         CacheService cacheService,
+                         WikiService wikiService,
+                         IdentityManager identityManager,
+                         SpaceService spaceService,
+                         CMSService cmsService,
+                         ListenerService listenerService, FileService fileService, UploadService uploadService) {
     this.dataStorage = dataStorage;
     this.wikiService = wikiService;
     this.identityManager = identityManager;
@@ -147,8 +175,8 @@ public NoteServiceImpl( DataStorage dataStorage,
     this.spaceService = spaceService;
     this.listenerService = listenerService;
     this.cmsService = cmsService;
-    this.identityRegistry = identityRegistry;
-    this.organizationService = organizationService;
+    this.fileService = fileService;
+    this.uploadService = uploadService;
     this.htmlUploadImageProcessor = null;
   }
 
@@ -158,9 +186,7 @@ public NoteServiceImpl(DataStorage dataStorage,
                          IdentityManager identityManager,
                          SpaceService spaceService,
                          CMSService cmsService,
-                         IdentityRegistry identityRegistry,
-                         OrganizationService organizationService,
-                         ListenerService listenerService,
+                         ListenerService listenerService, FileService fileService, UploadService uploadService,
                          HTMLUploadImageProcessor htmlUploadImageProcessor) {
     this.dataStorage = dataStorage;
     this.wikiService = wikiService;
@@ -170,8 +196,8 @@ public NoteServiceImpl(DataStorage dataStorage,
     this.spaceService = spaceService;
     this.listenerService = listenerService;
     this.cmsService = cmsService;
-    this.identityRegistry = identityRegistry;
-    this.organizationService = organizationService;
+    this.fileService = fileService;
+    this.uploadService = uploadService;
     this.htmlUploadImageProcessor = htmlUploadImageProcessor;
   }
 
@@ -260,6 +286,18 @@ public Page updateNote(Page note, PageUpdateType type, Identity userIdentity) th
     }
     note.setContent(note.getContent());
     Page updatedPage = dataStorage.updatePage(note);
+    if (userIdentity != null) {
+      DraftPage draftPage = getLatestDraftPageByTargetPageAndLang(Long.valueOf(note.getId()), note.getLang());
+      moveOrCopyNotePageProperties(draftPage,
+                                   note,
+                                   draftPage.getLang(),
+                                   note.getLang(),
+                                   NOTE_METADATA_DRAFT_PAGE_OBJECT_TYPE,
+                                   NOTE_METADATA_PAGE_OBJECT_TYPE,
+                                   userIdentity.getUserId(),
+                                   true);
+    }
+
     invalidateCache(note);
 
     updatedPage.setUrl(Utils.getPageUrl(updatedPage));
@@ -869,10 +907,20 @@ public List<PageHistory> getVersionsHistoryOfNote(Page note, String userName) th
    */
   @Override
   public void createVersionOfNote(Page note, String userName) throws WikiException {
-    dataStorage.addPageVersion(note, userName);
+    PageVersion pageVersion = dataStorage.addPageVersion(note, userName);
     if (note.getLang() != null) {
-      String versionLandId =  note.getId() + "-" + note.getLang();
-      postUpdatePageVersionLanguage(versionLandId);
+      String versionLangId =  note.getId() + "-" + note.getLang();
+      postUpdatePageVersionLanguage(versionLangId);
+    } else {
+      pageVersion.setId(note.getId() + "-" + pageVersion.getName());
+      moveOrCopyNotePageProperties(note,
+                                   pageVersion,
+                                   note.getLang(),
+                                   null,
+                                   NOTE_METADATA_PAGE_OBJECT_TYPE,
+                                   NOTE_METADATA_VERSION_PAGE_OBJECT_TYPE,
+                                   userName,
+                                   false);
     }
   }
 
@@ -881,7 +929,16 @@ public void createVersionOfNote(Page note, String userName) throws WikiException
    */
   @Override
   public void restoreVersionOfNote(String versionName, Page note, String userName) throws WikiException {
-    dataStorage.restoreVersionOfPage(versionName, note);
+    PageVersion pageVersion = dataStorage.restoreVersionOfPage(versionName, note);
+    pageVersion.setId(note.getId() + "-" + pageVersion.getName());
+    moveOrCopyNotePageProperties(pageVersion,
+                                 note,
+                                 null,
+                                 null,
+                                 NOTE_METADATA_VERSION_PAGE_OBJECT_TYPE,
+                                 NOTE_METADATA_PAGE_OBJECT_TYPE,
+                                 userName,
+                                 false);
     createVersionOfNote(note, userName);
     invalidateCache(note);
   }
@@ -1012,7 +1069,15 @@ public DraftPage createDraftForExistPage(DraftPage draftPage,
     }
 
     newDraftPage = dataStorage.createDraftPageForUser(newDraftPage, username);
-
+    moveOrCopyNotePageProperties(targetPage,
+                                 newDraftPage,
+                                 targetPage.getLang(),
+                                 newDraftPage.getLang(),
+                                 NOTE_METADATA_PAGE_OBJECT_TYPE,
+                                 NOTE_METADATA_DRAFT_PAGE_OBJECT_TYPE,
+                                 username,
+                                 false);
+    newDraftPage.setProperties(targetPage.getProperties());
     return newDraftPage;
   }
 
@@ -1779,4 +1844,240 @@ private Map<String, List<MetadataItem>> retrieveMetadataItems(String noteId, Str
   public void removeOrphanDraftPagesByParentPage(long parentPageId) {
     dataStorage.deleteOrphanDraftPagesByParentPage(parentPageId);
   }
+
+  /**
+   * {@inheritDoc}
+   */
+  @Override
+  public Long saveNoteFeaturedImage(Page note, NoteFeaturedImage featuredImage) throws Exception {
+    long featuredImageId = 0L;
+    if (!MapUtils.isEmpty(note.getProperties())) {
+      String featuredImageIdProp = note.getProperties().get(FEATURED_IMAGE_ID);
+      featuredImageId = featuredImageIdProp != null && !featuredImageIdProp.equals("null") ? Long.parseLong(featuredImageIdProp)
+                                                                                          : 0L;
+    }
+    String uploadId = featuredImage.getUploadId();
+    if (uploadId != null && featuredImage.getBase64Data() != null) {
+      UploadResource uploadResource = uploadService.getUploadResource(uploadId);
+      if (uploadResource != null) {
+        String data = featuredImage.getBase64Data().split("base64,")[1];
+        byte[] bytes = Base64.getDecoder().decode(data.getBytes(Charset.defaultCharset()));
+        FileItem fileItem = new FileItem(featuredImageId,
+                                         note.getName(),
+                                         featuredImage.getMimeType(),
+                                         FILE_NAME_SPACE,
+                                         (long) uploadResource.getUploadedSize(),
+                                         new Date(),
+                                         null,
+                                         false,
+                                         new ByteArrayInputStream(bytes));
+        if (featuredImageId == 0) {
+          fileItem = fileService.writeFile(fileItem);
+        } else {
+          fileItem = fileService.updateFile(fileItem);
+        }
+        if (fileItem != null && fileItem.getFileInfo() != null) {
+          return fileItem.getFileInfo().getId();
+        }
+      }
+    }
+    return null;
+  }
+
+  /**
+   * {@inheritDoc}
+   */
+  @Override
+  public NoteFeaturedImage getNoteFeaturedImageInfo(Long noteId, String lang, boolean isDraft, long userIdentityId) throws Exception {
+    if (noteId == null) {
+      throw new IllegalArgumentException("note id is mandatory");
+    }
+    Page note;
+    if (isDraft) {
+      note = getDraftNoteById(String.valueOf(noteId), identityManager.getIdentity(String.valueOf(userIdentityId)).getRemoteId());
+    } else {
+      note = getNoteByIdAndLang(noteId, lang);
+    }
+    if (note == null) {
+      throw new ObjectNotFoundException("Note with id: " + noteId + " and lang: " + lang + " not found");
+    }
+    MetadataItem metadataItem = getNoteMetadataItem(note,
+                                                    lang,
+                                                    isDraft ? NOTE_METADATA_DRAFT_PAGE_OBJECT_TYPE
+                                                            : NOTE_METADATA_PAGE_OBJECT_TYPE);
+    if (metadataItem != null && !MapUtils.isEmpty(metadataItem.getProperties())) {
+      String featuredImageIdProp = metadataItem.getProperties().get(FEATURED_IMAGE_ID);
+      long noteFeaturedImageId = featuredImageIdProp != null
+          && !featuredImageIdProp.equals("null") ? Long.parseLong(featuredImageIdProp) : 0L;
+      FileItem fileItem = fileService.getFile(noteFeaturedImageId);
+      if (fileItem != null && fileItem.getFileInfo() != null) {
+        FileInfo fileInfo = fileItem.getFileInfo();
+        return new NoteFeaturedImage(fileInfo.getId(),
+                                     fileInfo.getName(),
+                                     fileInfo.getMimetype(),
+                                     fileInfo.getSize(),
+                                     fileInfo.getUpdatedDate().getTime(),
+                                     fileItem.getAsStream());
+      }
+    }
+    return null;
+  }
+
+  private NoteMetadataObject buildNoteMetadataObject(Page note, String lang, String objectType) {
+    Space space = spaceService.getSpaceByGroupId(note.getWikiOwner());
+    long spaceId = space != null ? Long.parseLong(space.getId()) : 0L;
+    String noteId = String.valueOf(note.getId());
+    noteId = lang != null ? noteId + "-" + lang : noteId;
+    return new NoteMetadataObject(objectType, noteId, note.getParentPageId(), spaceId);
+  }
+
+  private MetadataItem getNoteMetadataItem(Page note, String lang, String objectType) {
+    NoteMetadataObject noteMetadataObject = buildNoteMetadataObject(note, lang, objectType);
+    MetadataService metadataService = CommonsUtils.getService(MetadataService.class);
+    return metadataService.getMetadataItemsByMetadataAndObject(NOTES_METADATA_KEY, noteMetadataObject)
+                          .stream()
+                          .findFirst()
+                          .orElse(null);
+  }
+
+  private void moveOrCopyNotePageProperties(Page oldNote,
+                                            Page note,
+                                            String oldLang,
+                                            String lang,
+                                            String oldObjectType,
+                                            String newObjectType,
+                                            String username,
+                                            boolean move) {
+    if (note == null || oldNote == null) {
+      return;
+    }
+    if (username != null) {
+      org.exoplatform.social.core.identity.model.Identity identity =
+                                                                   identityManager.getOrCreateIdentity(OrganizationIdentityProvider.NAME,
+                                                                                                       username);
+      NoteMetadataObject newNoteMetadataObject = buildNoteMetadataObject(note, lang, newObjectType);
+      MetadataItem oldNoteMetadataItem = getNoteMetadataItem(oldNote, oldLang, oldObjectType);
+      MetadataItem newNoteMetadataItem = getNoteMetadataItem(note, lang, newObjectType);
+      if (oldNoteMetadataItem != null && oldNoteMetadataItem.getProperties() != null) {
+        MetadataService metadataService = CommonsUtils.getService(MetadataService.class);
+        if (newNoteMetadataItem != null) {
+          newNoteMetadataItem.setProperties(oldNoteMetadataItem.getProperties());
+          metadataService.updateMetadataItem(newNoteMetadataItem, Long.parseLong(identity.getId()));
+        } else {
+          try {
+            metadataService.createMetadataItem(newNoteMetadataObject,
+                                               NOTES_METADATA_KEY,
+                                               oldNoteMetadataItem.getProperties(),
+                                               Long.parseLong(identity.getId()));
+          } catch (Exception e) {
+            log.error("Error while creating note metadata item", e);
+          }
+        }
+        if (move) {
+          metadataService.deleteMetadataById(oldNoteMetadataItem.getId());
+        }
+      }
+    }
+  }
+  
+  private boolean isOriginalFeaturedImage(Page draftPage, Page targetPage) {
+    if (draftPage == null || targetPage == null) {
+      return false;
+    }
+    Map<String, String> draftProperties = draftPage.getProperties();
+    Map<String, String> targetProperties = targetPage.getProperties();
+    return draftProperties != null && targetProperties != null
+        && targetProperties.get(FEATURED_IMAGE_ID).equals(draftProperties.get(FEATURED_IMAGE_ID));
+  }
+  
+  /**
+   * {@inheritDoc}
+   */
+  @Override
+  public void removeNoteFeaturedImage(Long noteId,
+                                      Long featuredImageId,
+                                      String lang,
+                                      boolean isDraft,
+                                      Long userIdentityId) throws Exception {
+    boolean removeFeaturedImageFile = true;
+    Page note;
+    if (isDraft) {
+      DraftPage draftPage = getDraftNoteById(String.valueOf(noteId),
+                                             identityManager.getIdentity(String.valueOf(userIdentityId)).getRemoteId());
+      if (isOriginalFeaturedImage(draftPage, getNoteByIdAndLang(Long.valueOf(draftPage.getTargetPageId()), lang))) {
+        removeFeaturedImageFile = false;
+      }
+      note = draftPage;
+    } else {
+      note = getNoteByIdAndLang(noteId, lang);
+    }
+    if (note == null) {
+      throw new ObjectNotFoundException("note not found");
+    }
+    if (featuredImageId == null) {
+      throw new IllegalArgumentException("featured image id is mandatory");
+    }
+    MetadataService metadataService = CommonsUtils.getService(MetadataService.class);
+    if (removeFeaturedImageFile) {
+      fileService.deleteFile(featuredImageId);
+    }
+    MetadataItem metadataItem = getNoteMetadataItem(note,
+                                                    lang,
+                                                    isDraft ? NOTE_METADATA_DRAFT_PAGE_OBJECT_TYPE
+                                                            : NOTE_METADATA_PAGE_OBJECT_TYPE);
+    if (metadataItem != null) {
+      Map<String, String> properties = metadataItem.getProperties();
+      properties.remove(FEATURED_IMAGE_ID);
+      properties.remove(FEATURED_IMAGE_UPDATED_DATE);
+      properties.remove(FEATURED_IMAGE_ALT_TEXT);
+      metadataItem.setProperties(properties);
+      metadataService.updateMetadataItem(metadataItem, userIdentityId);
+    }
+  }
+
+  /**
+   * {@inheritDoc}
+   */
+  @Override
+  public Map<String, String> saveNoteMetadata(NotePageProperties notePageProperties, String lang, Long userIdentityId) throws Exception {
+    Page note;
+    if (notePageProperties.isDraft()) {
+      note = getLatestDraftPageByTargetPageAndLang(notePageProperties.getNoteId(), lang);
+    } else {
+      note = getNoteByIdAndLang(notePageProperties.getNoteId(), lang);
+    }
+    if (note == null) {
+      throw new ObjectNotFoundException("note not found");
+    }
+    Long featuredImageId = saveNoteFeaturedImage(note, notePageProperties.getFeaturedImage());
+    MetadataService metadataService = CommonsUtils.getService(MetadataService.class);
+
+    NoteMetadataObject noteMetadataObject =
+                                          buildNoteMetadataObject(note,
+                                                                  lang,
+                                                                  notePageProperties.isDraft() ? NOTE_METADATA_DRAFT_PAGE_OBJECT_TYPE
+                                                                                               : NOTE_METADATA_PAGE_OBJECT_TYPE);
+    MetadataItem metadataItem = getNoteMetadataItem(note,
+                                                    lang,
+                                                    notePageProperties.isDraft() ? NOTE_METADATA_DRAFT_PAGE_OBJECT_TYPE
+                                                                                 : NOTE_METADATA_PAGE_OBJECT_TYPE);
+
+    Map<String, String> properties = new HashMap<>();
+    if (metadataItem != null && metadataItem.getProperties() != null) {
+      properties = metadataItem.getProperties();
+    }
+    properties.put(SUMMARY_PROP, notePageProperties.getSummary());
+    if (featuredImageId != null) {
+      properties.put(FEATURED_IMAGE_ID, String.valueOf(featuredImageId));
+      properties.put(FEATURED_IMAGE_UPDATED_DATE, String.valueOf(new Date().getTime()));
+      properties.put(FEATURED_IMAGE_ALT_TEXT, notePageProperties.getFeaturedImage().getAltText());
+    }
+    if (metadataItem == null) {
+      metadataService.createMetadataItem(noteMetadataObject, NOTES_METADATA_KEY, properties, userIdentityId);
+    } else {
+      metadataItem.setProperties(properties);
+      metadataService.updateMetadataItem(metadataItem, userIdentityId);
+    }
+    return properties;
+  }
 }
diff --git a/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java b/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java
index d6da93cb81..4b9c393243 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java
@@ -20,6 +20,7 @@
 
 package org.exoplatform.wiki.service.rest;
 
+import java.io.InputStream;
 import java.net.URLDecoder;
 import java.nio.charset.StandardCharsets;
 import java.util.ArrayList;
@@ -29,6 +30,7 @@
 import java.util.HashMap;
 import java.util.List;
 import java.util.Locale;
+import java.util.Map;
 import java.util.Optional;
 import java.util.ResourceBundle;
 import java.util.Set;
@@ -45,7 +47,9 @@
 import javax.ws.rs.QueryParam;
 import javax.ws.rs.core.CacheControl;
 import javax.ws.rs.core.Context;
+import javax.ws.rs.core.EntityTag;
 import javax.ws.rs.core.MediaType;
+import javax.ws.rs.core.Request;
 import javax.ws.rs.core.Response;
 import javax.ws.rs.core.UriInfo;
 
@@ -58,6 +62,7 @@
 import org.json.simple.JSONObject;
 
 import org.exoplatform.common.http.HTTPStatus;
+import org.exoplatform.commons.exception.ObjectNotFoundException;
 import org.exoplatform.commons.utils.CommonsUtils;
 import org.exoplatform.commons.utils.HTMLSanitizer;
 import org.exoplatform.portal.localization.LocaleContextInfoUtils;
@@ -104,6 +109,8 @@
 import org.exoplatform.wiki.utils.NoteConstants;
 import org.exoplatform.wiki.utils.Utils;
 
+import io.meeds.notes.model.NoteFeaturedImage;
+import io.meeds.notes.rest.model.PagePropertiesEntity;
 import io.swagger.v3.oas.annotations.Operation;
 import io.swagger.v3.oas.annotations.Parameter;
 import io.swagger.v3.oas.annotations.parameters.RequestBody;
@@ -136,6 +143,17 @@ public class NotesRestService implements ResourceContainer {
 
   private final CacheControl          cc;
 
+  private static final int            CACHE_DURATION_SECONDS      = 31536000;
+
+  private static final long           CACHE_DURATION_MILLISECONDS = CACHE_DURATION_SECONDS * 1000L;
+
+  private static final CacheControl   ILLUSTRATION_CACHE_CONTROL  = new CacheControl();
+
+  static {
+    ILLUSTRATION_CACHE_CONTROL.setMaxAge(CACHE_DURATION_SECONDS);
+  }
+  
+
   public NotesRestService(NoteService noteService,
                           WikiService noteBookService,
                           UploadService uploadService,
@@ -726,10 +744,10 @@ public Response updateNoteById(@Parameter(description = "Note id", required = tr
           }
           note_ = noteService.updateNote(note_, PageUpdateType.EDIT_PAGE_CONTENT_AND_TITLE, identity);
         } else {
+          note_.setLang(note.getLang());
           note_ = noteService.updateNote(note_, PageUpdateType.EDIT_PAGE_CONTENT_AND_TITLE, identity);
           note_.setTitle(note.getTitle());
           note_.setContent(note.getContent());
-          note_.setLang(note.getLang());
         }
         noteService.createVersionOfNote(note_, identity.getUserId());
         if (!Utils.ANONYM_IDENTITY.equals(identity.getUserId())) {
@@ -1510,6 +1528,126 @@ public Response getAvailableLanguages(@Context
     }
   }
 
+  @POST
+  @Path("/metadata")
+  @Produces(MediaType.APPLICATION_JSON)
+  @RolesAllowed("users")
+  @Operation(
+          summary = "Saves a note metadata properties",
+          description = "Saves a note metadata properties",
+          method = "POST")
+  @ApiResponses(value = { @ApiResponse(responseCode = "200", description = "Request fulfilled"),
+          @ApiResponse(responseCode = "500", description = "Internal server error"),
+          @ApiResponse(responseCode = "400", description = "Invalid query input"),
+          @ApiResponse(responseCode = "404", description = "Resource not found") })
+  public Response saveNoteMetadata(@RequestBody(description = "note metadata properties") PagePropertiesEntity pageProperties,
+                                   @Parameter(description = "target version language", required = true) @QueryParam("lang") String lang) {
+    if (pageProperties == null ) {
+      return Response.status(Response.Status.BAD_REQUEST).entity("notePageProperties object is mandatory").build();
+    }
+    try {
+      Map<String, String> noteProperties =
+                                         noteService.saveNoteMetadata(io.meeds.notes.rest.utils.EntityBuilder.toNotePageProperties(pageProperties),
+                                                                      lang,
+                                                                      RestUtils.getCurrentUserIdentityId());
+      return Response.ok(noteProperties, MediaType.APPLICATION_JSON_TYPE).build();
+    } catch (ObjectNotFoundException e) {
+      log.warn("target note not found", e);
+      return Response.status(HTTPStatus.NOT_FOUND).build();
+    } catch (Exception e) {
+      log.error("Error occurred while saving note metadata properties", e);
+      return Response.status(HTTPStatus.INTERNAL_ERROR).build();
+    }
+  }
+
+  @GET
+  @Path( "/illustration/{noteId}")
+  @RolesAllowed("users")
+  @Operation(
+          summary = "Gets a note featured image illustration by note Id",
+          description = "Gets a note featured image illustration by note Id",
+          method = "GET")
+  @ApiResponses(value = { @ApiResponse(responseCode = "200", description = "Request fulfilled"),
+          @ApiResponse(responseCode = "500", description = "Internal server error"),
+          @ApiResponse(responseCode = "400", description = "Invalid query input"),
+          @ApiResponse(responseCode = "404", description = "Resource not found") })
+  public Response getFeaturedImageIllustration(@Context Request request,
+                                       @Parameter(description = "target note id", required = true) @PathParam("noteId") Long noteId,
+                                       @Parameter(description = "target version language", required = true) @QueryParam("isDraft") boolean isDraft,
+                                       @Parameter(description = "target version language", required = true) @QueryParam("lang") String lang,
+                                       @Parameter(description = "Optional last modified parameter") @QueryParam("v") long lastModified) {
+
+    if (noteId == null) {
+      return Response.status(Response.Status.BAD_REQUEST).entity("note id is mandatory").build();
+    }
+    try {
+      NoteFeaturedImage noteFeaturedImage = noteService.getNoteFeaturedImageInfo(noteId,
+                                                                                 lang,
+                                                                                 isDraft,
+                                                                                 RestUtils.getCurrentUserIdentityId());
+      if (noteFeaturedImage == null) {
+        return Response.status(HTTPStatus.NOT_FOUND).build();
+      }
+      Long lastUpdated = noteFeaturedImage.getLastUpdated();
+      EntityTag eTag = new EntityTag(lastUpdated + noteId + lang, true);
+      Response.ResponseBuilder builder = request.evaluatePreconditions(eTag);
+      if (builder == null) {
+        InputStream stream = noteFeaturedImage.getFileInputStream();
+        builder = Response.ok(stream, noteFeaturedImage.getMimeType());
+        builder.tag(eTag);
+        if (lastModified > 0) {
+          builder.lastModified(new Date(lastUpdated));
+          builder.expires(new Date(System.currentTimeMillis() + CACHE_DURATION_MILLISECONDS));
+          builder.cacheControl(ILLUSTRATION_CACHE_CONTROL);
+        }
+      }
+      return builder.build();
+    } catch (ObjectNotFoundException e) {
+      log.warn("target note not found", e);
+      return Response.status(Response.Status.NOT_FOUND).build();
+    } catch (Exception e) {
+      log.error("An error occurred while getting featured image illustration", e);
+      return Response.serverError().build();
+    }
+  }
+
+  @DELETE
+  @Path("/metadata/featured-image/{noteId}")
+  @RolesAllowed("users")
+  @Operation(
+          summary = "delete a note featured image",
+          description = "Deletes note featured image and its related metadata property",
+          method = "DELETE")
+  @ApiResponses(value = { @ApiResponse(responseCode = "200", description = "Request fulfilled"),
+          @ApiResponse(responseCode = "500", description = "Internal server error"),
+          @ApiResponse(responseCode = "400", description = "Invalid query input"),
+          @ApiResponse(responseCode = "404", description = "Resource not found") })
+  public Response removeNoteFeaturedImage(@Parameter(description = "target note id", required = true) @PathParam("noteId") Long noteId,
+                                          @Parameter(description = "draft note", required = true) @QueryParam("isDraft") boolean isDraft,
+                                          @Parameter(description = "Note version language", required = true) @QueryParam("lang") String lang) 
+  {
+    if (noteId == null) {
+      return Response.status(Response.Status.BAD_REQUEST).entity("note id is mandatory").build();
+    }
+    try {
+      NoteFeaturedImage noteFeaturedImage = noteService.getNoteFeaturedImageInfo(noteId,
+                                                                                 lang,
+                                                                                 isDraft,
+                                                                                 RestUtils.getCurrentUserIdentityId());
+      if (noteFeaturedImage == null) {
+        return Response.status(HTTPStatus.NOT_FOUND).build();
+      }
+      noteService.removeNoteFeaturedImage(noteId, noteFeaturedImage.getId(), lang, isDraft, RestUtils.getCurrentUserIdentityId());
+      return Response.status(HTTPStatus.OK).build();
+    } catch (ObjectNotFoundException e) {
+      log.warn("target note not found", e);
+      return Response.status(HTTPStatus.NOT_FOUND).build();
+    } catch (Exception e) {
+      log.error("Error occurred while removing note featured image", e);
+      return Response.status(HTTPStatus.INTERNAL_ERROR).build();
+    }
+  }
+
   private List<JsonNodeData> getJsonTree(WikiPageParams params, HashMap<String, Object> context) throws Exception {
     Wiki noteBook = noteBookService.getWikiByTypeAndOwner(params.getType(), params.getOwner());
     WikiTreeNode noteBookNode = new WikiTreeNode(noteBook);
diff --git a/notes-service/src/test/java/org/exoplatform/wiki/service/TestNoteService.java b/notes-service/src/test/java/org/exoplatform/wiki/service/TestNoteService.java
index 8b4749eab8..c843ed7b2e 100644
--- a/notes-service/src/test/java/org/exoplatform/wiki/service/TestNoteService.java
+++ b/notes-service/src/test/java/org/exoplatform/wiki/service/TestNoteService.java
@@ -23,16 +23,20 @@
 
 import static org.exoplatform.social.core.jpa.test.AbstractCoreTest.persist;
 import static org.junit.Assert.assertThrows;
+import static org.mockito.ArgumentMatchers.anyString;
+import static org.mockito.Mockito.mock;
+import static org.mockito.Mockito.when;
 
 import java.io.File;
+import java.lang.reflect.Field;
 import java.text.SimpleDateFormat;
-import java.util.ArrayList;
-import java.util.Arrays;
-import java.util.Date;
-import java.util.HashMap;
-import java.util.List;
+import java.util.*;
 
+import io.meeds.notes.model.NoteFeaturedImage;
+import io.meeds.notes.model.NotePageProperties;
 import org.apache.commons.io.FileUtils;
+import org.exoplatform.upload.UploadResource;
+import org.exoplatform.upload.UploadService;
 import org.junit.Assert;
 
 import org.exoplatform.commons.ObjectAlreadyExistsException;
@@ -66,7 +70,7 @@ public void setUp() throws Exception {
     super.setUp() ;
     wService = getContainer().getComponentInstanceOfType(WikiService.class) ;
     noteService = getContainer().getComponentInstanceOfType(NoteService.class) ;
-    notesExportService = getContainer().getComponentInstanceOfType(NotesExportService.class) ;
+    notesExportService = getContainer().getComponentInstanceOfType(NotesExportService.class);
     getOrCreateWiki(wService, PortalConfig.PORTAL_TYPE, "classic");
   }
   
@@ -309,6 +313,10 @@ public void testUpdateNote() throws WikiException, IllegalAccessException {
 
     // update content of page
     page.setContent("Page content updated_");
+    DraftPage draftPage = new DraftPage();
+    draftPage.setContent("test");
+    draftPage.setTitle("test");
+    noteService.createDraftForExistPage(draftPage, page, "", new Date().getTime(), "root");
     noteService.updateNote(page, PageUpdateType.EDIT_PAGE_CONTENT,root);
     assertNotNull(page);
     assertEquals("Page content updated_", page.getContent());
@@ -694,4 +702,97 @@ public void testRemoveOrphanDraftPagesByParentPage() throws Exception {
     persist();
     assertNull(noteService.getDraftNoteById(draft.getId(), "root"));
   }
+  
+  private Page createTestNoteWithVersionLang(String name, String lang, Identity user) throws Exception {
+    Wiki portalWiki = getOrCreateWiki(wService, PortalConfig.PORTAL_TYPE, "testPortal");
+    Page note = noteService.createNote(portalWiki, "Home", new Page(name, name), user);
+    note.setLang(lang);
+    note.setTitle("language title");
+    note.setContent("language content");
+    noteService.createVersionOfNote(note, user.getUserId());
+    return note;
+  } 
+
+  private void bindMockedUploadService() throws Exception {
+    UploadService uploadService = mock(UploadService.class);
+    UploadResource uploadResource = mock(UploadResource.class);
+    when(uploadResource.getUploadedSize()).thenReturn(12548d);
+    when(uploadService.getUploadResource(anyString())).thenReturn(uploadResource);
+    Field field = noteService.getClass().getDeclaredField("uploadService");
+    field.setAccessible(true);
+    field.set(noteService, uploadService);
+  }
+
+  private NotePageProperties createNotePageProperties(long noteId, String altText, String summary) {
+    NotePageProperties notePageProperties = new NotePageProperties();
+    NoteFeaturedImage featuredImage = new NoteFeaturedImage();
+    featuredImage.setBase64Data("data:image/png;base64,++dhPs679jlDMhAIYFDUu0+SNTDnnL33+e+P33");
+    featuredImage.setMimeType("image/png");
+    featuredImage.setUploadId("123");
+    featuredImage.setAltText(altText);
+    notePageProperties.setFeaturedImage(featuredImage);
+    notePageProperties.setNoteId(noteId);
+    notePageProperties.setSummary(summary);
+    return notePageProperties;
+  }
+
+  public void testSaveNoteFeaturedImage() throws Exception {
+    Identity user = new Identity("user");
+    Page note = createTestNoteWithVersionLang("testMetadata", "en", user);
+    
+    this.bindMockedUploadService();
+
+    NotePageProperties notePageProperties = createNotePageProperties(Long.parseLong(note.getId()), "alt text", "summary test");
+    Map<String, String> properties = noteService.saveNoteMetadata(notePageProperties, null, 1L);
+    assertEquals(4, properties.size());
+    assertEquals("summary test", properties.get("summary"));
+
+    notePageProperties.setSummary("version language summary");
+    properties = noteService.saveNoteMetadata(notePageProperties, "en", 1L);
+    assertEquals(4, properties.size());
+    assertEquals("version language summary", properties.get("summary"));
+  }
+  
+  public void testRemoveNoteFeaturedImage() throws Exception {
+    Identity user = new Identity("user");
+    Page note = createTestNoteWithVersionLang("testMetadataRemove", "fr", user);
+
+    this.bindMockedUploadService();
+
+    NotePageProperties notePageProperties = createNotePageProperties(Long.parseLong(note.getId()), "alt text", "summary test");
+    Map<String, String> properties = noteService.saveNoteMetadata(notePageProperties, null, 1L);
+    noteService.saveNoteMetadata(notePageProperties, "fr", 1L);
+
+    assertEquals(4, properties.size());
+    assertNotNull(properties.get("featuredImageId"));
+    assertNotNull(noteService.getNoteFeaturedImageInfo(Long.parseLong(note.getId()), null, false, 1L));
+
+    noteService.removeNoteFeaturedImage(Long.parseLong(note.getId()),
+                                        Long.parseLong(properties.get("featuredImageId")),
+                                        null,
+                                        false,
+                                        1L);
+
+    NoteFeaturedImage savedFeaturedImage = noteService.getNoteFeaturedImageInfo(Long.parseLong(note.getId()), null, false, 1L);
+    assertNull(savedFeaturedImage);
+
+    assertNotNull(noteService.getNoteFeaturedImageInfo(Long.parseLong(note.getId()), "fr", false, 1L));
+  }
+
+  public void testGetNoteFeaturedImageInfo() throws Exception {
+    Identity user = new Identity("user");
+    Page note = createTestNoteWithVersionLang("testGetMetadataInfo", "ar", user);
+
+    this.bindMockedUploadService();
+
+    NotePageProperties notePageProperties = createNotePageProperties(Long.parseLong(note.getId()), "alt text", "summary Test");
+    noteService.saveNoteMetadata(notePageProperties, null, 1L);
+    noteService.saveNoteMetadata(notePageProperties, "ar", 1L);
+    NoteFeaturedImage featuredImage = noteService.getNoteFeaturedImageInfo(Long.parseLong(note.getId()), null, false, 1L);
+    NoteFeaturedImage versionLanguageFeaturedImage = noteService.getNoteFeaturedImageInfo(Long.parseLong(note.getId()), "ar", false, 1L);
+
+    assertNotNull(featuredImage);
+    assertTrue(featuredImage.getLastUpdated() > 0L);
+    assertNotSame(featuredImage.getId(), versionLanguageFeaturedImage.getId());
+  }
 }
diff --git a/notes-service/src/test/java/org/exoplatform/wiki/service/rest/NotesRestServiceTest.java b/notes-service/src/test/java/org/exoplatform/wiki/service/rest/NotesRestServiceTest.java
index 421baad47a..5741604b19 100644
--- a/notes-service/src/test/java/org/exoplatform/wiki/service/rest/NotesRestServiceTest.java
+++ b/notes-service/src/test/java/org/exoplatform/wiki/service/rest/NotesRestServiceTest.java
@@ -24,23 +24,26 @@
 import static org.mockito.ArgumentMatchers.any;
 import static org.mockito.ArgumentMatchers.anyList;
 import static org.mockito.ArgumentMatchers.anyString;
+import static org.mockito.Mockito.doNothing;
 import static org.mockito.Mockito.doThrow;
 import static org.mockito.Mockito.mock;
 import static org.mockito.Mockito.mockStatic;
+import static org.mockito.Mockito.reset;
 import static org.mockito.Mockito.when;
 
 import java.util.ArrayList;
 import java.util.Calendar;
+import java.util.Date;
 import java.util.Deque;
+import java.util.HashMap;
 import java.util.List;
 import java.util.Locale;
 import java.util.ResourceBundle;
 
+import javax.ws.rs.core.Request;
 import javax.ws.rs.core.Response;
 import javax.ws.rs.core.UriInfo;
 
-import jakarta.persistence.EntityManager;
-import org.exoplatform.social.core.manager.IdentityManager;
 import org.junit.After;
 import org.junit.Before;
 import org.junit.Test;
@@ -49,6 +52,7 @@
 import org.mockito.MockedStatic;
 import org.mockito.junit.MockitoJUnitRunner;
 
+import org.exoplatform.commons.exception.ObjectNotFoundException;
 import org.exoplatform.commons.utils.PageList;
 import org.exoplatform.component.test.AbstractKernelTest;
 import org.exoplatform.container.ExoContainer;
@@ -57,6 +61,7 @@
 import org.exoplatform.services.rest.impl.EnvironmentContext;
 import org.exoplatform.services.security.ConversationState;
 import org.exoplatform.services.security.Identity;
+import org.exoplatform.social.core.manager.IdentityManager;
 import org.exoplatform.social.core.space.model.Space;
 import org.exoplatform.social.core.space.spi.SpaceService;
 import org.exoplatform.social.rest.api.EntityBuilder;
@@ -79,6 +84,9 @@
 import org.exoplatform.wiki.utils.NoteConstants;
 import org.exoplatform.wiki.utils.Utils;
 
+import io.meeds.notes.model.NoteFeaturedImage;
+import io.meeds.notes.rest.model.FeaturedImageEntity;
+import io.meeds.notes.rest.model.PagePropertiesEntity;
 import jakarta.servlet.http.HttpServletRequest;
 
 @RunWith(MockitoJUnitRunner.Silent.class)
@@ -443,4 +451,85 @@ public void testSearchData() throws Exception {
     Response response = notesRestService.searchData(uriInfo, "test", 10, "wikiType", "wikiOwner", true, new ArrayList<>());
     assertEquals(Response.Status.OK.getStatusCode(), response.getStatus());
   }
+  
+  @Test
+  public void saveNoteMetadata() throws Exception {
+    PagePropertiesEntity pagePropertiesEntity = new PagePropertiesEntity();
+    pagePropertiesEntity.setNoteId(1L);
+    pagePropertiesEntity.setSummary("summary");
+    pagePropertiesEntity.setFeaturedImage(new FeaturedImageEntity());
+    Response response = notesRestService.saveNoteMetadata(null, null);
+    assertEquals(Response.Status.BAD_REQUEST.getStatusCode(), response.getStatus());
+
+    REST_UTILS.when(RestUtils::getCurrentUserIdentityId).thenReturn(1L);
+    when(noteService.saveNoteMetadata(io.meeds.notes.rest.utils.EntityBuilder.toNotePageProperties(pagePropertiesEntity),
+                                      null,
+                                      1L)).thenReturn(new HashMap<>());
+    response = notesRestService.saveNoteMetadata(pagePropertiesEntity, null);
+    assertEquals(Response.Status.OK.getStatusCode(), response.getStatus());
+
+    when(noteService.saveNoteMetadata(io.meeds.notes.rest.utils.EntityBuilder.toNotePageProperties(pagePropertiesEntity),
+                                      null,
+                                      1L)).thenThrow(new ObjectNotFoundException("note not found"));
+    response = notesRestService.saveNoteMetadata(pagePropertiesEntity, null);
+    assertEquals(Response.Status.NOT_FOUND.getStatusCode(), response.getStatus());
+
+    reset(noteService);
+
+    when(noteService.saveNoteMetadata(io.meeds.notes.rest.utils.EntityBuilder.toNotePageProperties(pagePropertiesEntity),
+                                      null,
+                                      1L)).thenThrow(new RuntimeException());
+    response = notesRestService.saveNoteMetadata(pagePropertiesEntity, null);
+    assertEquals(Response.Status.INTERNAL_SERVER_ERROR.getStatusCode(), response.getStatus());
+  }
+
+  @Test
+  public void removeNoteFeaturedImage() throws Exception {
+    Response response = notesRestService.removeNoteFeaturedImage(null, false,null);
+    assertEquals(Response.Status.BAD_REQUEST.getStatusCode(), response.getStatus());
+    REST_UTILS.when(RestUtils::getCurrentUserIdentityId).thenReturn(1L);
+
+    NoteFeaturedImage noteFeaturedImage = new NoteFeaturedImage();
+    noteFeaturedImage.setId(123L);
+    when(noteService.getNoteFeaturedImageInfo(1L, null, false,1L)).thenReturn(noteFeaturedImage);
+
+    doNothing().when(noteService).removeNoteFeaturedImage(1L, 123L, null, false, 1L);
+    response = notesRestService.removeNoteFeaturedImage(1L, false, null);
+    assertEquals(Response.Status.OK.getStatusCode(), response.getStatus());
+
+    doThrow(new ObjectNotFoundException("note not found")).when(noteService).removeNoteFeaturedImage(1L, 123L, null, false, 1L);
+    response = notesRestService.removeNoteFeaturedImage(1L, false, null);
+    assertEquals(Response.Status.NOT_FOUND.getStatusCode(), response.getStatus());
+
+    reset(noteService);
+    when(noteService.getNoteFeaturedImageInfo(1L, null, false, 1L)).thenReturn(noteFeaturedImage);
+    doThrow(new RuntimeException()).when(noteService).removeNoteFeaturedImage(1L, 123L, null, false, 1L);
+    response = notesRestService.removeNoteFeaturedImage(1L, false, null);
+    assertEquals(Response.Status.INTERNAL_SERVER_ERROR.getStatusCode(), response.getStatus());
+  }
+
+  @Test
+  public void getFeaturedImageIllustration() throws Exception {
+    Request request = mock(Request.class);
+    Response response = notesRestService.getFeaturedImageIllustration(request, null, false, null, 0L);
+    assertEquals(Response.Status.BAD_REQUEST.getStatusCode(), response.getStatus());
+    REST_UTILS.when(RestUtils::getCurrentUserIdentityId).thenReturn(1L);
+
+    NoteFeaturedImage noteFeaturedImage = new NoteFeaturedImage();
+    noteFeaturedImage.setId(123L);
+    noteFeaturedImage.setLastUpdated(new Date().getTime());
+    noteFeaturedImage.setMimeType("image/png");
+    when(noteService.getNoteFeaturedImageInfo(1L, null, false, 1L)).thenReturn(noteFeaturedImage);
+    response = notesRestService.getFeaturedImageIllustration(request, 1L, false, null, 12359547L);
+    assertEquals(Response.Status.OK.getStatusCode(), response.getStatus());
+
+    when(noteService.getNoteFeaturedImageInfo(1L, null, false, 1L)).thenThrow(new ObjectNotFoundException("note not found"));
+    response = notesRestService.getFeaturedImageIllustration(request, 1L, false, null, 12359547L);
+    assertEquals(Response.Status.NOT_FOUND.getStatusCode(), response.getStatus());
+
+    reset(noteService);
+    when(noteService.getNoteFeaturedImageInfo(1L, null, false, 1L)).thenThrow(new RuntimeException());
+    response = notesRestService.getFeaturedImageIllustration(request, 1L, false, null, 12359547L);
+    assertEquals(Response.Status.INTERNAL_SERVER_ERROR.getStatusCode(), response.getStatus());
+  }
 }
diff --git a/notes-service/src/test/resources/conf/metadata-configuration.xml b/notes-service/src/test/resources/conf/metadata-configuration.xml
new file mode 100644
index 0000000000..03b60acf50
--- /dev/null
+++ b/notes-service/src/test/resources/conf/metadata-configuration.xml
@@ -0,0 +1,47 @@
+<!--
+ *
+ * This file is part of the Meeds project (https://meeds.io/).
+ *
+ * Copyright (C) 2020 - 2023 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_2.xsd http://www.exoplatform.org/xml/ns/kernel_1_2.xsd"
+        xmlns="http://www.exoplatform.org/xml/ns/kernel_1_2.xsd">
+
+    <external-component-plugins>
+        <target-component>org.exoplatform.social.metadata.MetadataService</target-component>
+        <component-plugin>
+            <name>NotesMetadataTypePlugin</name>
+            <set-method>addMetadataTypePlugin</set-method>
+            <type>org.exoplatform.social.metadata.MetadataTypePlugin</type>
+            <init-params>
+                <object-param>
+                    <name>metadataType</name>
+                    <object type="org.exoplatform.social.metadata.model.MetadataType">
+                        <field name="id">
+                            <int>1001</int>
+                        </field>
+                        <field name="name">
+                            <string>notes</string>
+                        </field>
+                    </object>
+                </object-param>
+            </init-params>
+        </component-plugin>
+    </external-component-plugins>
+</configuration>
diff --git a/notes-service/src/test/resources/conf/portal/configuration.xml b/notes-service/src/test/resources/conf/portal/configuration.xml
index ac52517066..15da04530f 100644
--- a/notes-service/src/test/resources/conf/portal/configuration.xml
+++ b/notes-service/src/test/resources/conf/portal/configuration.xml
@@ -24,5 +24,6 @@
         xmlns="http://www.exoplatform.org/xml/ns/kernel_1_2.xsd">
 
   <import>jar:/conf/notes-service-configuration.xml</import>
+  <import>jar:/conf/metadata-configuration.xml</import>
 
-</configuration>
\ No newline at end of file
+</configuration>
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 737394fcfd..6a7ab4040e 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
@@ -50,6 +50,17 @@ notes.edit.editNotes=Edit
 notes.save.success.message=Note saved successfully
 notes.view.label=View
 
+notes.metadata.properties.label=Properties
+notes.metadata.featuredImage.label=Featured images
+notes.metadata.featuredImage.add.label=Add an image
+notes.metadata.featuredImage.alt=Featured image
+notes.metadata.summary.label=Summary
+notes.metadata.add.summary.placeholder=Write a text to summarize the content
+notes.metadata.featuredImage.edit.label=Edit The Featured Image
+notes.metadata.saved.success.message=Note properties saved successfully
+notes.metadata.saved.success.error=Error while saving note properties
+notes.featuredImage.remove.error.message=Error while removing featured image
+notes.featuredImage.remove.success.message=Featured image removed successfully
 
 popup.confirm=Confirm
 popup.msg.confirmation=Confirmation
diff --git a/notes-webapp/src/main/webapp/WEB-INF/conf/configuration.xml b/notes-webapp/src/main/webapp/WEB-INF/conf/configuration.xml
index 182a5bb781..7c55effc65 100644
--- a/notes-webapp/src/main/webapp/WEB-INF/conf/configuration.xml
+++ b/notes-webapp/src/main/webapp/WEB-INF/conf/configuration.xml
@@ -32,5 +32,6 @@
   <import>war:/conf/wiki/search-configuration.xml</import>
   <import>war:/conf/wiki/ckeditor-configuration.xml</import>
   <import>war:/conf/wiki/metadata-configuration.xml</import>
+  <import>war:/conf/wiki/feature-flags-configuration.xml</import>
 
 </configuration>
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..5e523b55a0
--- /dev/null
+++ b/notes-webapp/src/main/webapp/WEB-INF/conf/wiki/feature-flags-configuration.xml
@@ -0,0 +1,52 @@
+<?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>NotesEditorMetadataDrawerFeatureProperties</key>
+    <type>org.exoplatform.container.ExtendedPropertyConfigurator</type>
+    <init-params>
+      <properties-param>
+        <name>NotesEditorMetadataDrawerFeatureProperties</name>
+        <description>Metadata drawer Feature enablement flag</description>
+        <property name="exo.feature.notesEditorMetadataDrawer.enabled"
+                  value="${exo.feature.notesEditorMetadataDrawer.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/conf/wiki/metadata-configuration.xml b/notes-webapp/src/main/webapp/WEB-INF/conf/wiki/metadata-configuration.xml
index 288accb8bf..8bf6899d14 100644
--- a/notes-webapp/src/main/webapp/WEB-INF/conf/wiki/metadata-configuration.xml
+++ b/notes-webapp/src/main/webapp/WEB-INF/conf/wiki/metadata-configuration.xml
@@ -46,4 +46,25 @@
         </component-plugin>
     </external-component-plugins>
 
-</configuration>
\ No newline at end of file
+    <external-component-plugins>
+        <target-component>org.exoplatform.social.metadata.MetadataService</target-component>
+        <component-plugin>
+            <name>NotesMetadataTypePlugin</name>
+            <set-method>addMetadataTypePlugin</set-method>
+            <type>org.exoplatform.social.metadata.MetadataTypePlugin</type>
+            <init-params>
+                <object-param>
+                    <name>metadataType</name>
+                    <object type="org.exoplatform.social.metadata.model.MetadataType">
+                        <field name="id">
+                            <int>1001</int>
+                        </field>
+                        <field name="name">
+                            <string>notes</string>
+                        </field>
+                    </object>
+                </object-param>
+            </init-params>
+        </component-plugin>
+    </external-component-plugins>
+</configuration>
diff --git a/notes-webapp/src/main/webapp/groovy/webui/workspace/UINotesHeadTemplate.gtmpl b/notes-webapp/src/main/webapp/groovy/webui/workspace/UINotesHeadTemplate.gtmpl
index c4757187bc..aa40f19610 100644
--- a/notes-webapp/src/main/webapp/groovy/webui/workspace/UINotesHeadTemplate.gtmpl
+++ b/notes-webapp/src/main/webapp/groovy/webui/workspace/UINotesHeadTemplate.gtmpl
@@ -1,11 +1,10 @@
 <%
   import org.exoplatform.commons.api.settings.ExoFeatureService;
-  import org.exoplatform.portal.application.PortalRequestContext;
   def rcontext = _ctx.getRequestContext();
   ExoFeatureService featureService = uicomponent.getApplicationComponent(ExoFeatureService.class);
   def userName = rcontext.getRemoteUser();
 %>
 
 <script type="text/javascript" id="notesHeadScripts">
-    eXo.env.portal.notesMultilingual = <%=featureService.isFeatureActiveForUser("NotesMultilingual", userName)%>;
-</script>
\ No newline at end of file
+    eXo.env.portal.notesEditorMetadataDrawerEnabled = <%=featureService.isFeatureActiveForUser("notesEditorMetadataDrawer", userName)%>;
+</script>
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 bb046c5f1c..1889489aed 100644
--- a/notes-webapp/src/main/webapp/javascript/eXo/wiki/notesService.js
+++ b/notes-webapp/src/main/webapp/javascript/eXo/wiki/notesService.js
@@ -401,3 +401,44 @@ export function deleteNoteTranslation(noteId, translation) {
   });
 }
 
+export function saveNoteMetadata(properties, lang) {
+  const formData = new FormData();
+  if (lang) {
+    formData.append('lang', lang);
+  }
+  const params = new URLSearchParams(formData).toString();
+  return fetch(`${notesConstants.PORTAL}/${notesConstants.PORTAL_REST}/notes/metadata?${params}`, {
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json'
+    },
+    method: 'POST',
+    body: JSON.stringify(properties),
+    credentials: 'include',
+  }).then((resp) => {
+    if (!resp?.ok) {
+      throw new Error('Error while saving note metadata');
+    } else {
+      return resp.json();
+    }
+  });
+}
+
+export function removeNoteFeaturedImage(noteId, isDraft, lang) {
+  const formData = new FormData();
+  if (lang) {
+    formData.append('lang', lang);
+  }
+  formData.append('isDraft', isDraft);
+  const params = new URLSearchParams(formData).toString();
+  return fetch(`${notesConstants.PORTAL}/${notesConstants.PORTAL_REST}/notes/metadata/featured-image/${noteId}?${params}`, {
+    credentials: 'include',
+    method: 'DELETE',
+  }).then((resp) => {
+    if (resp?.ok) {
+      return resp;
+    } else {
+      throw new Error('Error when deleting note featured image');
+    }
+  });
+}
diff --git a/notes-webapp/src/main/webapp/skin/less/notes/notes.less b/notes-webapp/src/main/webapp/skin/less/notes/notes.less
index 1029634326..ce26005bb1 100644
--- a/notes-webapp/src/main/webapp/skin/less/notes/notes.less
+++ b/notes-webapp/src/main/webapp/skin/less/notes/notes.less
@@ -124,6 +124,11 @@
         height: 21px;
       }
 
+      .metadata-button-icon {
+        width: 20px;
+        height: 21px;
+      }
+
       .notesActions {
         .notesFormButtons {
           .notesFormLeftActions {
@@ -208,6 +213,62 @@
   }
 }
 
+#editorMetadataDrawer {
+
+  .xlarge-font-size {
+    font-size: @fontSizeLarge
+  }
+
+  .add-image-area {
+    background-color: @primaryBackground !important;
+  }
+
+  .cke_bottom {
+    height: auto;
+    opacity: 0.4;
+    background: transparent;
+  }
+
+  .featured-image-controls {
+    margin-top: -42px !important;
+  }
+
+  .feature-image-trash-icon {
+    width: 18px;
+    height: 21px;
+  }
+
+  .feature-image-file-icon {
+    width: 15px;
+    height: 21px;
+  }
+
+  .feature-image-button {
+    background: @greyColorLighten1Default;
+    opacity: 0.75;
+  }
+
+  .summary-metadata-input {
+    .v-input__slot {
+      padding: 0;
+
+      fieldset {
+        padding: 0;
+      }
+
+      .v-text-field__slot {
+        margin: 0;
+
+        textarea {
+          border: 0;
+          margin: 0 auto;
+          padding: 12px;
+        }
+      }
+    }
+  }
+}
+
 #notesActionMenuBottomDrawer, #notesOverviewApplication,
                            .notesApplication .notes-application-header .note-actions-menu {
   .action-menu-item {
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
index 56c25e1d88..c3eacc69bb 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
@@ -36,11 +36,10 @@
       :translations="translations"
       :selected-language="selectedLanguage"
       :lang-button-tooltip-text="langButtonTooltipText"
-      :publish-and-post-button-text="publishAndPostButtonText"
       :publish-button-text="$t('notes.button.publish')"
       :editor-icon="editorIcon"
       :space-group-id="`/spaces/${spaceGroupId}`"
-      :suggester-space-url="suggesterSpaceURL"
+      :suggester-space-url="spaceGroupId"
       :save-button-icon="saveButtonIcon"
       :is-mobile="isMobile"
       :save-button-disabled="saveOrUpdateDisabled"
@@ -132,18 +131,11 @@ export default {
     saveOrUpdateDisabled() {
       return !this.note?.title || this.note?.title?.length < 3
                                || this.note?.title?.length > this.titleMaxLength
-                               || this.noteNotModified;
+                               || this.noteNotModified && !this.draftNote;
     },
     noteNotModified() {
       return this.note?.title === this.originalNote?.title && this.note?.content === this.originalNote?.content;
     },
-    publishAndPostButtonText() {
-      if (this.note?.id && (this.note?.targetPageId || !this.note?.draftPage)) {
-        return this.$t('notes.button.updateAndPost');
-      } else {
-        return this.$t('notes.button.publishAndPost');
-      }
-    },
     langButtonTooltipText() {
       if (this.noteId) {
         return this.$t('notes.label.button.translations.options');
@@ -165,9 +157,6 @@ export default {
     },
     isMobile() {
       return this.$vuetify.breakpoint.width < 960;
-    },
-    suggesterSpaceURL() {
-      return this.spaceGroupId || this.urlParams?.get?.('spaceGroupId');
     }
   },
   watch: {
@@ -176,16 +165,16 @@ export default {
         this.autoSave();
       }
     },
-    'note.content'() {
-      if (this.note.content && this.note.content !== this.actualNote.content) {
-        this.autoSave();
-      }
-    },
     draftNote() {
       if (!this.draftNote) {
         this.$root.$emit('close-alert-message');
       }
-    }
+    },
+    'note.content'() {
+      if (!this.$noteUtils.isSameContent(this.note?.content, this.actualNote?.content)) {
+        this.autoSave();
+      }
+    },
   },
   mounted() {
     this.init();
@@ -300,8 +289,14 @@ export default {
         this.createNote(note);
       }
     },
+    addParamToUrl(paramName, paramValue) {
+      const url = new URL(window.location.href);
+      url.searchParams.set(paramName, paramValue);
+      history.pushState({}, null, url.toString());
+    },
     updateNote(note) {
       return this.$notesService.updateNoteById(note).then(data => {
+        this.note = data;
         this.originalNote = structuredClone(data);
         this.removeLocalStorageCurrentDraft();
         this.displayMessage({
@@ -320,6 +315,8 @@ export default {
     createNote(note) {
       return this.$notesService.createNote(note).then(data => {
         this.note = data;
+        this.noteId = data.id;
+        this.addParamToUrl('noteId', this.noteId);
         this.originalNote = structuredClone(data);
         const notePath = this.$notesService.getPathByNoteOwner(data, this.appName).replace(/ /g, '_');
         // delete draft note
@@ -488,7 +485,7 @@ export default {
       const draftNote = this.fillDraftNote();
       if (this.note.title || this.note.content) {
         // if draft page not created persist it only the first time else update it in browser's localStorage
-        if (this.note.draftPage && this.note.id) {
+        if (this.note.draftPage && this.note.id && !this.note?.lang) {
           this.note.parentPageId = this.parentPageId;
           localStorage.setItem(`draftNoteId-${this.note.id}`, JSON.stringify(draftNote));
           this.actualNote = {
@@ -511,7 +508,7 @@ export default {
     },
     persistDraftNote(draftNote,update) {
       clearTimeout(this.saveDraft);
-      draftNote.lang=this.selectedLanguage;
+      draftNote.lang = this.selectedLanguage;
       if (this.note.title || this.note.content) {
         if (this.newDraft){
           draftNote.id=null;
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorFeaturedImageDrawer.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorFeaturedImageDrawer.vue
new file mode 100644
index 0000000000..dfb0ff8d84
--- /dev/null
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorFeaturedImageDrawer.vue
@@ -0,0 +1,124 @@
+<!--
+ 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.
+-->
+
+<template>
+  <image-crop-drawer
+    ref="featuredImageDrawer"
+    :drawer-title="$t('notes.metadata.featuredImage.edit.label')"
+    :can-upload="true"
+    back-icon="fas fa-arrow-left"
+    :src="featuredImageLink"
+    :max-file-size="maxFileSize"
+    :crop-options="cropOptions"
+    alt
+    @input="uploadId = $event"
+    @data="imageData = $event"
+    @alt-text="featuredImageAltText = $event" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      uploadId: null,
+      maxFileSize: 20971520,
+      format: 'landscape',
+      imageData: null,
+      featuredImageAltText: null,
+      hasFeaturedImageValue: false,
+      illustrationBaseUrl: `${eXo.env.portal.context}/${eXo.env.portal.rest}/notes/illustration/`,
+      cropOptions: {
+        aspectRatio: 8,
+        viewMode: 1
+      },
+    };
+  },
+  props: {
+    note: {
+      type: Number,
+      default: null
+    },
+    hasFeaturedImage: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    imageData() {
+      if (this.imageData?.length) {
+        this.$root.$emit('image-data', this.imageData, this.mimeType);
+      }
+    },
+    uploadId() {
+      if (this.uploadId) {
+        this.$root.$emit('image-uploaded', this.uploadId);
+      }
+    },
+    featuredImageAltText() {
+      this.$root.$emit('image-alt-text', this.featuredImageAltText);
+    },
+    hasFeaturedImage() {
+      this.hasFeaturedImageValue = this.hasFeaturedImage;
+    }
+  },
+  computed: {
+    lang() {
+      return this.note?.lang || '';
+    },
+    isDraft() {
+      return this.note?.draftPage;
+    },
+    noteFeatureImageUpdatedDate() {
+      return this.note?.properties?.featuredImageUpdatedDate;
+    },
+    featuredImageLink() {
+      const langParam = this.lang && `&lang=${this.lang}` || '';
+      return this.imageData || this.hasFeaturedImageValue
+                            && `${this.illustrationBaseUrl}${this.note?.id}?v=${this.noteFeatureImageUpdatedDate}&isDraft=${this.isDraft}${langParam}` || '';
+    },
+    mimeType() {
+      return this.getMimeType(this.imageData);
+    }
+  },
+  created() {
+    this.$root.$on('open-featured-image-drawer', this.open);
+    this.$root.$on('reset-featured-image-data', this.resetData);
+  },
+  methods: {
+    resetData() {
+      this.imageData = null;
+      this.uploadId = null;
+      this.hasFeaturedImageValue = false;
+    },
+    getMimeType(data) {
+      return this.$refs.featuredImageDrawer.getBase64Mimetype(data);
+    },
+    open(imageItem) {
+      this.hasFeaturedImageValue = this.hasFeaturedImage;
+      this.$refs.featuredImageDrawer.open(imageItem);
+    },
+    close() {
+      this.$refs.featuredImageDrawer.close();
+    },
+    isClosed() {
+      return this.$refs.featuredImageDrawer.$el.classList.contains('v-navigation-drawer--close');
+    },
+  }
+};
+</script>
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue
new file mode 100644
index 0000000000..06dc0cbf9c
--- /dev/null
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue
@@ -0,0 +1,315 @@
+<!--
+ 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.
+-->
+
+<template>
+  <div>
+    <v-overlay
+      z-index="2000"
+      :value="drawer"
+      @click.native="closeDrawersByOverlay" />
+    <exo-drawer
+      id="editorMetadataDrawer"
+      ref="metadataDrawer"
+      v-model="drawer"
+      allow-expand
+      show-overlay
+      right
+      @closed="resetProperties">
+      <template slot="title">
+        <div class="d-flex my-auto font-weight-bold text-color">
+          {{ $t('notes.metadata.properties.label') }}
+        </div>
+      </template>
+      <template slot="content">
+        <div class="pa-5">
+          <v-form>
+            <label for="image-area">
+              <p class="text-color xlarge-font-size mb-3">
+                {{ $t('notes.metadata.featuredImage.label') }}
+              </p>
+              <v-btn
+                v-if="!canShowFeaturedImagePreview"
+                name="image-area"
+                class="btn add-image-area d-flex"
+                height="95"
+                width="100%"
+                text
+                @click="openFeaturedImageDrawer">
+                <div class="d-flex width-fit-content mx-auto">
+                  <v-icon
+                    class="me-15 icon-default-color"
+                    size="40">
+                    fas fa-image
+                  </v-icon>
+                  <p class="text-header text-color my-auto">
+                    {{ $t('notes.metadata.featuredImage.add.label') }}
+                  </p>
+                </div>
+              </v-btn>
+              <v-sheet
+                v-else
+                height="48">
+                <v-hover v-slot="{ hover }">
+                  <div>
+                    <v-img
+                      height="48"
+                      :lazy-src="featuredImageLink"
+                      :alt="savedFeaturedImageAltText"
+                      :src="featuredImageLink" />
+                    <div
+                      v-if="hover && canShowFeaturedImagePreview"
+                      class="width-fit-content ms-auto featured-image-controls me-2">
+                      <v-btn
+                        :loading="isRemovingFeaturedImage"
+                        class="feature-image-button me-1"
+                        icon
+                        @click.stop="removeNoteFeaturedImage">
+                        <v-icon
+                          class="feature-image-trash-icon white--text"
+                          size="20">
+                          fa-solid fa-trash
+                        </v-icon>
+                      </v-btn>
+                      <v-btn
+                        class="feature-image-button"
+                        icon
+                        @click="openFeaturedImageDrawer">
+                        <v-icon
+                          class="feature-image-file-icon white--text"
+                          size="20">
+                          fa-regular fa-file-image
+                        </v-icon>
+                      </v-btn>
+                    </div>
+                  </div>
+                </v-hover>
+              </v-sheet>
+            </label>
+            <label for="summaryInputEditor">
+              <div class="mt-5">
+                <p class="text-color xlarge-font-size mb-3">
+                  {{ $t('notes.metadata.summary.label') }}
+                </p>
+                <v-textarea
+                  v-model="summaryContent"
+                  name="summaryInputEditor"
+                  class="summary-metadata-input pt-0"
+                  :placeholder="$t('notes.metadata.add.summary.placeholder')"
+                  rows="17"
+                  row-height="8"
+                  dense
+                  outlined
+                  auto-grow />
+              </div>
+            </label>
+          </v-form>
+        </div>
+      </template>
+      <template slot="footer">
+        <div class="d-flex width-fit-content ms-auto">
+          <v-btn
+            class="btn me-5"
+            @click="close">
+            {{ $t('notes.button.cancel') }}
+          </v-btn>
+          <v-btn
+            :disabled="saveDisabled"
+            :loading="isSaving"
+            class="btn btn-primary"
+            @click="save">
+            {{ $t('notes.button.publish') }}
+          </v-btn>
+        </div>
+      </template>
+    </exo-drawer>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      noteObject: null,
+      drawer: false,
+      summaryContent: null,
+      imageData: null,
+      uploadId: null,
+      mimeType: null,
+      featuredImageAltText: null,
+      hasFeaturedImageValue: false,
+      featureImageUpdated: false,
+      illustrationBaseUrl: `${eXo.env.portal.context}/${eXo.env.portal.rest}/notes/illustration/`,
+      currentNoteProperties: {},
+      isSaving: false,
+      isRemovingFeaturedImage: false
+    };
+  },
+  props: {
+    hasFeaturedImage: {
+      type: Boolean,
+      default: false
+    }
+  },
+  created() {
+    this.$root.$on('image-data', this.imageDataUpdated);
+    this.$root.$on('image-uploaded', (uploadId) => this.uploadId = uploadId);
+    this.$root.$on('image-alt-text', (altText) => this.featuredImageAltText = altText);
+  },
+  computed: {
+    savedFeaturedImageAltText() {
+      return this.noteObject?.properties?.featuredImageAltText;
+    },
+    saveDisabled() {
+      return !this.propertiesChanged && !this.imageData;
+    },
+    propertiesChanged() {
+      return JSON.stringify(this.noteObject?.properties || {}) !== JSON.stringify(this.currentNoteProperties || {});
+    },
+    canShowFeaturedImagePreview() {
+      return this.hasFeaturedImageValue || this.imageData?.length;
+    },
+    notedId() {
+      return this.noteObject?.id;
+    },
+    lang() {
+      return this.noteObject?.lang || '';
+    },
+    isDraft() {
+      return this.noteObject?.draftPage;
+    },
+    noteFeatureImageUpdatedDate() {
+      return this.noteObject?.properties?.featuredImageUpdatedDate || 0;
+    },
+    featuredImageLink() {
+      const langParam = this.lang && `&lang=${this.lang}` || '';
+      return this.imageData || this.hasFeaturedImageValue
+                            && `${this.illustrationBaseUrl}${this.notedId}?v=${this.noteFeatureImageUpdatedDate}&isDraft=${this.isDraft}${langParam}` || '';
+    },
+  },
+  watch: {
+    hasFeaturedImage() {
+      this.hasFeaturedImageValue = this.hasFeaturedImage;
+    },
+    imageData() {
+      if (!this.imageData?.length) {
+        this.$root.$emit('reset-featured-image-data');
+      }
+      this.featureImageUpdated = true;
+    },
+    summaryContent() {
+      if (!this.noteObject?.properties) {
+        this.noteObject.properties = {};
+      }
+      this.noteObject.properties.summary = this.summaryContent;
+    }
+  },
+  methods: {
+    resetProperties() {
+      this.noteObject.properties = this.currentNoteProperties;
+      this.featureImageUpdated = false;
+    },
+    imageDataUpdated(data, mimeType) {
+      this.imageData = data;
+      this.mimeType = mimeType;
+    },
+    openFeaturedImageDrawer() {
+      this.$root.$emit('open-featured-image-drawer', {altText: this.savedFeaturedImageAltText});
+    },
+    closeFeaturedImageDrawerByOverlay() {
+      this.$root.$emit('close-featured-image-byOverlay');
+    },
+    closeDrawersByOverlay() {
+      this.closeFeaturedImageDrawerByOverlay();
+    },
+    open(note) {
+      this.noteObject = note;
+      this.currentNoteProperties = structuredClone(this.noteObject?.properties || {});
+      this.summaryContent = this.currentNoteProperties?.summary || '';
+      this.$refs.metadataDrawer.open();
+    },
+    close() {
+      this.$refs.metadataDrawer.close();
+    },
+    displayMessage(message) {
+      document.dispatchEvent(new CustomEvent('alert-message', {
+        detail: {
+          alertType: message.type,
+          alertMessage: message.text
+        }
+      }));
+    },
+    save() {
+      const properties = {
+        noteId: this.isDraft && this.noteObject?.targetPageId
+                             || this.noteObject?.id,
+        summary: this.summaryContent,
+        featuredImage: {
+          uploadId: this.uploadId,
+          base64Data: this.imageData,
+          mimeType: this.mimeType,
+          altText: this.featuredImageAltText
+        },
+        draft: this.isDraft
+      };
+      this.isSaving = true;
+      return this.$notesService.saveNoteMetadata(properties, this.lang).then((properties) => {
+        this.hasFeaturedImageValue = !!properties?.featuredImageId;
+        this.noteObject.properties = properties;
+        this.currentNoteProperties = structuredClone(properties);
+        this.$emit('metadata-updated');
+        this.displayMessage({
+          type: 'success',
+          text: this.$t('notes.metadata.saved.success.message')
+        });
+      }).catch(() => {
+        this.displayMessage({
+          type: 'error',
+          text: this.$t('notes.metadata.saved.error.message')
+        });
+      }).finally(() => {
+        this.isSaving = false;
+        this.close();
+      });
+    },
+    removeNoteFeaturedImage() {
+      if (!this.hasFeaturedImage) {
+        this.imageData = null;
+        this.hasFeaturedImageValue = false;
+        return;
+      }
+      this.isRemovingFeaturedImage = true;
+      return this.$notesService.removeNoteFeaturedImage(this.notedId, this.noteObject?.draftPage, this.lang).then(() => {
+        this.hasFeaturedImageValue = false;
+        this.imageData = null;
+        this.$root.$emit('reset-featured-image-data');
+        this.displayMessage({
+          type: 'success',
+          text: this.$t('notes.featuredImage.remove.success.message')
+        });
+      }).catch(() => {
+        this.displayMessage({
+          type: 'error',
+          text: this.$t('notes.featuredImage.remove.error.message')
+        });
+      }).finally(() => this.isRemovingFeaturedImage = false);
+    }
+  }
+};
+</script>
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue
index 1627d6d5e7..897e20548a 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue
@@ -40,10 +40,10 @@
                 height="36"
                 class="pa-0 my-auto"
                 icon
+                :disabled="!noteIdParam || !editorReady"
                 @click="showTranslations">
                 <v-icon
                   :class="{'primary--text': !!selectedLanguage}"
-                  :disabled="!noteIdParam"
                   :aria-label="$t('notes.label.button.translations.options')"
                   size="20"
                   class="pa-0 translation-button-icon my-auto icon-default-color">
@@ -55,6 +55,21 @@
               {{ langButtonTooltipText }}
             </span>
           </v-tooltip>
+          <v-btn
+            v-if="editorMetadataDrawerEnabled"
+            width="36"
+            min-width="36"
+            height="36"
+            class="pa-0 my-auto"
+            text
+            :disabled="!noteIdParam || !editorReady"
+            @click="openMetadataDrawer">
+            <v-icon
+              size="20"
+              class="pa-0 metadata-button-icon my-auto icon-default-color">
+              fas fa-th-list
+            </v-icon>
+          </v-btn>
         </div>
         <div class="notesFormRightActions pe-5">
           <p class="draftSavingStatus my-auto me-3">{{ draftSavingStatus }}</p>
@@ -189,6 +204,15 @@ export default {
     translationOptionEnabled: {
       type: Boolean,
       default: true
+    },
+    editorReady: {
+      type: Boolean,
+      default: false
+    },
+  },
+  computed: {
+    editorMetadataDrawerEnabled() {
+      return eXo?.env?.portal?.notesEditorMetadataDrawerEnabled &&!this.isMobile && !this.webPageNote;
     }
   },
   created() {
@@ -211,6 +235,9 @@ export default {
       this.showTranslationBar = false;
       this.$refs.translationsEditBar.hide();
     },
+    openMetadataDrawer() {
+      this.$emit('open-metadata-drawer');
+    }
   }
 };
 </script>
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 bf835fb633..7237015cc0 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
@@ -39,8 +39,10 @@
       :save-button-icon="saveButtonIcon"
       :save-button-disabled="saveButtonDisabled"
       :translation-option-enabled="translationOptionEnabled"
+      :editor-ready="!!editor"
       @editor-closed="editorClosed"
-      @post-note="postNote" />
+      @post-note="postNote"
+      @open-metadata-drawer="openMetadataDrawer" />
     <form class="notes-content">
       <div class="notes-content-form singlePageApplication my-5 mx-auto py-1 px-5">
         <div
@@ -68,6 +70,13 @@
     <note-custom-plugins
       ref="noteCustomPlugins"
       :instance="editor" />
+    <note-editor-metadata-drawer
+      :has-featured-image="hasFeaturedImage"
+      ref="editorMetadataDrawer" />
+    <note-editor-featured-image-drawer
+      :note="noteObject"
+      :has-featured-image="hasFeaturedImage"
+      ref="featuredImageDrawer" />
   </div>
 </template>
 
@@ -77,6 +86,8 @@ export default {
     return {
       noteObject: null,
       editor: null,
+      initialized: false,
+      instanceReady: false
     };
   },
   props: {
@@ -185,8 +196,30 @@ export default {
     'noteObject.title': function() {
       this.updateData();
     },
+    'noteObject.content': function () {
+      this.updateData();
+    },
+    'note.id': function () {
+      this.cloneNoteObject();
+    },
+    'note.properties': function () {
+      this.cloneNoteObject();
+    },
     'note.title': function () {
       this.noteObject.title = this.note?.title;
+    },
+    instanceReady() {
+      if (this.instanceReady) {
+        this.$emit('editor-ready', this.editor);
+      }
+    }
+  },
+  computed: {
+    featuredImageId() {
+      return this.noteObject?.properties?.featuredImageId;
+    },
+    hasFeaturedImage() {
+      return !!this.featuredImageId && this.featuredImageId !== 'null';
     }
   },
   created() {
@@ -194,6 +227,8 @@ export default {
     this.$root.$on('include-page', this.includePage);
     this.$root.$on('update-note-title', this.updateTranslatedNoteTitle);
     this.$root.$on('update-note-content', this.updateTranslatedNoteContent);
+    this.$root.$on('close-featured-image-byOverlay', this.closeFeaturedImageDrawerByOverlay);
+
     document.addEventListener('note-custom-plugins', this.openCustomPluginsDrawer);
   },
   methods: {
@@ -332,7 +367,6 @@ export default {
         on: {
           instanceReady: function (evt) {
             self.editor = evt.editor;
-            self.$emit('editor-ready', self.editor);
             $(self.editor.document.$)
               .find('.atwho-inserted')
               .each(function() {
@@ -384,7 +418,6 @@ export default {
                 }
               });
             }
-            self.updateData();
           },
           fileUploadResponse: function() {
             /*add plugin fileUploadResponse to handle file upload response ,
@@ -436,6 +469,19 @@ export default {
         elementNewTop.classList.add('greyComposerEffect');
       });
     },
+    closeFeaturedImageDrawerByOverlay() {
+      if (!this.isImageDrawerClosed()) {
+        this.$refs.featuredImageDrawer.close();
+        return;
+      }
+      this.$refs.editorMetadataDrawer.close();
+    },
+    isImageDrawerClosed() {
+      return this.$refs.featuredImageDrawer.isClosed();
+    },
+    openMetadataDrawer() {
+      this.$refs.editorMetadataDrawer.open(this.noteObject);
+    },
   }
 };
 </script>
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/initComponents.js b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/initComponents.js
index 78370a8c58..91112ea135 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/initComponents.js
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/initComponents.js
@@ -3,13 +3,17 @@ import TranslationsEditBar from '../notes-rich-editor/components/TranslationsEdi
 import NoteTreeviewDrawer from '../notes/components/NoteTreeviewDrawer.vue';
 import NoteEditorTopBar from '../notes-rich-editor/components/NoteEditorTopBar.vue';
 import NoteFullRichEditor from './components/NoteFullRichEditor.vue';
+import NoteEditorMetadataDrawer from './components/NoteEditorMetadataDrawer.vue';
+import NoteEditorFeaturedImageDrawer from './components/NoteEditorFeaturedImageDrawer.vue';
 
 const components = {
   'note-custom-plugins': NoteCustomPlugins,
   'note-treeview-drawer': NoteTreeviewDrawer,
   'note-translation-edit-bar': TranslationsEditBar,
   'note-editor-top-bar': NoteEditorTopBar,
-  'note-full-rich-editor': NoteFullRichEditor
+  'note-full-rich-editor': NoteFullRichEditor,
+  'note-editor-metadata-drawer': NoteEditorMetadataDrawer,
+  'note-editor-featured-image-drawer': NoteEditorFeaturedImageDrawer
 };
 
 for (const key in components) {

From 086bfa7645beb27378ee985f292b01dc4faca4e7 Mon Sep 17 00:00:00 2001
From: Helmi Akermi <70575401+hakermi@users.noreply.github.com>
Date: Wed, 24 Jul 2024 15:09:35 +0100
Subject: [PATCH 16/40] feat: Include draft management in Note properties -
 EXO-71930, EXO-71929, EXO-71928 - Meeds-io/MIPs#128 (#1048)

Include draft management in Note properties
---
 .../meeds/notes/model/NoteFeaturedImage.java  |  36 ++-
 .../meeds/notes/model/NotePageProperties.java |   4 +-
 .../notes/rest/model/DraftPageEntity.java     |  20 ++
 .../notes/rest/model/FeaturedImageEntity.java |  18 +-
 .../io/meeds/notes/rest/model/PageEntity.java |  47 ++++
 .../rest/model/PagePropertiesEntity.java      |   4 +-
 .../meeds/notes/rest/utils/EntityBuilder.java |  61 ++++-
 .../exoplatform/wiki/jpa/EntityConverter.java |  27 +-
 .../exoplatform/wiki/jpa/JPADataStorage.java  |  11 +-
 .../java/org/exoplatform/wiki/model/Page.java |   4 +-
 .../exoplatform/wiki/service/NoteService.java |  12 +-
 .../wiki/service/impl/NoteServiceImpl.java    | 234 +++++++++++++-----
 .../wiki/service/rest/NotesRestService.java   | 122 +++------
 .../wiki/service/TestNoteService.java         | 109 ++++++--
 .../service/rest/NotesRestServiceTest.java    |  74 +-----
 .../main/webapp/WEB-INF/gatein-resources.xml  |   3 +
 .../main/webapp/skin/less/notes/notes.less    |  13 +-
 .../components/NotesEditorDashboard.vue       |  38 ++-
 .../NoteEditorFeaturedImageDrawer.vue         |  16 +-
 .../components/NoteEditorMetadataDrawer.vue   | 154 +++++-------
 .../components/NoteEditorTopBar.vue           |   6 +-
 .../components/NoteFullRichEditor.vue         |  39 ++-
 22 files changed, 655 insertions(+), 397 deletions(-)
 create mode 100644 notes-service/src/main/java/io/meeds/notes/rest/model/DraftPageEntity.java
 create mode 100644 notes-service/src/main/java/io/meeds/notes/rest/model/PageEntity.java

diff --git a/notes-service/src/main/java/io/meeds/notes/model/NoteFeaturedImage.java b/notes-service/src/main/java/io/meeds/notes/model/NoteFeaturedImage.java
index 6d0b6f19dc..56e0bc1b64 100644
--- a/notes-service/src/main/java/io/meeds/notes/model/NoteFeaturedImage.java
+++ b/notes-service/src/main/java/io/meeds/notes/model/NoteFeaturedImage.java
@@ -23,29 +23,32 @@
 import lombok.NoArgsConstructor;
 
 import java.io.InputStream;
+import java.io.Serializable;
 
 @Data
 @NoArgsConstructor
 @AllArgsConstructor
-public class NoteFeaturedImage {
+public class NoteFeaturedImage implements Serializable {
 
-  private Long        id;
+  private Long                  id;
 
-  private String      fileName;
+  private String                fileName;
 
-  private String      mimeType;
+  private String                mimeType;
 
-  private long        fileSize;
+  private long                  fileSize;
 
-  private Long        lastUpdated;
+  private Long                  lastUpdated;
 
-  private String      base64Data;
+  private String                base64Data;
 
-  private String      uploadId;
-  
-  private String      altText;
+  private String                uploadId;
 
-  private InputStream fileInputStream;
+  private String                altText;
+
+  private transient InputStream fileInputStream;
+
+  private boolean               toDelete;
 
   public NoteFeaturedImage(Long id,
                            String fileName,
@@ -61,10 +64,19 @@ public NoteFeaturedImage(Long id,
     this.fileInputStream = fileInputStream;
   }
 
-  public NoteFeaturedImage(String base64Data, String mimeType, String uploadId, String altText) {
+  public NoteFeaturedImage(Long id,
+                           String base64Data,
+                           String mimeType,
+                           String uploadId,
+                           String altText,
+                           Long lastUpdated,
+                           boolean toDelete) {
+    this.id = id;
     this.base64Data = base64Data;
     this.mimeType = mimeType;
     this.uploadId = uploadId;
     this.altText = altText;
+    this.lastUpdated = lastUpdated;
+    this.toDelete = toDelete;
   }
 }
diff --git a/notes-service/src/main/java/io/meeds/notes/model/NotePageProperties.java b/notes-service/src/main/java/io/meeds/notes/model/NotePageProperties.java
index 797599d31c..4e42b68c46 100644
--- a/notes-service/src/main/java/io/meeds/notes/model/NotePageProperties.java
+++ b/notes-service/src/main/java/io/meeds/notes/model/NotePageProperties.java
@@ -24,10 +24,12 @@
 import lombok.Data;
 import lombok.NoArgsConstructor;
 
+import java.io.Serializable;
+
 @Data
 @NoArgsConstructor
 @AllArgsConstructor
-public class NotePageProperties {
+public class NotePageProperties implements Serializable {
 
   private long              noteId;
 
diff --git a/notes-service/src/main/java/io/meeds/notes/rest/model/DraftPageEntity.java b/notes-service/src/main/java/io/meeds/notes/rest/model/DraftPageEntity.java
new file mode 100644
index 0000000000..4016560289
--- /dev/null
+++ b/notes-service/src/main/java/io/meeds/notes/rest/model/DraftPageEntity.java
@@ -0,0 +1,20 @@
+package io.meeds.notes.rest.model;
+
+import lombok.AllArgsConstructor;
+import lombok.Data;
+import lombok.EqualsAndHashCode;
+import lombok.NoArgsConstructor;
+
+import java.io.Serializable;
+
+@EqualsAndHashCode(callSuper = true)
+@Data
+@NoArgsConstructor
+@AllArgsConstructor
+public class DraftPageEntity extends PageEntity implements Serializable {
+
+  private String  targetPageId;
+
+  private boolean newPage;
+
+}
diff --git a/notes-service/src/main/java/io/meeds/notes/rest/model/FeaturedImageEntity.java b/notes-service/src/main/java/io/meeds/notes/rest/model/FeaturedImageEntity.java
index 285577e965..eaf1bd20fb 100644
--- a/notes-service/src/main/java/io/meeds/notes/rest/model/FeaturedImageEntity.java
+++ b/notes-service/src/main/java/io/meeds/notes/rest/model/FeaturedImageEntity.java
@@ -22,16 +22,24 @@
 import lombok.Data;
 import lombok.NoArgsConstructor;
 
+import java.io.Serializable;
+
 @Data
 @NoArgsConstructor
 @AllArgsConstructor
-public class FeaturedImageEntity {
+public class FeaturedImageEntity implements Serializable {
+
+  private Long    id;
+
+  private String  base64Data;
+
+  private String  mimeType;
 
-  private String base64Data;
+  private String  uploadId;
 
-  private String mimeType;
+  private String  altText;
 
-  private String uploadId;
+  private Long    lastUpdated;
 
-  private String altText;
+  private boolean toDelete;
 }
diff --git a/notes-service/src/main/java/io/meeds/notes/rest/model/PageEntity.java b/notes-service/src/main/java/io/meeds/notes/rest/model/PageEntity.java
new file mode 100644
index 0000000000..1085dc6ca7
--- /dev/null
+++ b/notes-service/src/main/java/io/meeds/notes/rest/model/PageEntity.java
@@ -0,0 +1,47 @@
+package io.meeds.notes.rest.model;
+
+import lombok.AllArgsConstructor;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+import java.io.Serializable;
+
+@Data
+@NoArgsConstructor
+@AllArgsConstructor
+public class PageEntity implements Serializable {
+
+  private String               id;
+
+  private String               name;
+
+  private String               title;
+
+  private String               content;
+
+  private Long                 pageParentId;
+
+  private String               parentPageName;
+
+  private String               parentPageId;
+
+  private String               wikiType;
+
+  private String               wikiOwner;
+
+  private String               owner;
+
+  private String               author;
+
+  private boolean              toBePublished;
+
+  private String               url;
+
+  private String               syntax;
+
+  private String               appName;
+
+  private String               lang;
+
+  private PagePropertiesEntity properties;
+}
diff --git a/notes-service/src/main/java/io/meeds/notes/rest/model/PagePropertiesEntity.java b/notes-service/src/main/java/io/meeds/notes/rest/model/PagePropertiesEntity.java
index e89d41f1ab..36a491307b 100644
--- a/notes-service/src/main/java/io/meeds/notes/rest/model/PagePropertiesEntity.java
+++ b/notes-service/src/main/java/io/meeds/notes/rest/model/PagePropertiesEntity.java
@@ -22,10 +22,12 @@
 import lombok.Data;
 import lombok.NoArgsConstructor;
 
+import java.io.Serializable;
+
 @Data
 @NoArgsConstructor
 @AllArgsConstructor
-public class PagePropertiesEntity {
+public class PagePropertiesEntity implements Serializable {
 
   private long                noteId;
 
diff --git a/notes-service/src/main/java/io/meeds/notes/rest/utils/EntityBuilder.java b/notes-service/src/main/java/io/meeds/notes/rest/utils/EntityBuilder.java
index 1e77b3c2e4..9d7603a8cf 100644
--- a/notes-service/src/main/java/io/meeds/notes/rest/utils/EntityBuilder.java
+++ b/notes-service/src/main/java/io/meeds/notes/rest/utils/EntityBuilder.java
@@ -21,8 +21,12 @@
 
 import io.meeds.notes.model.NoteFeaturedImage;
 import io.meeds.notes.model.NotePageProperties;
+import io.meeds.notes.rest.model.DraftPageEntity;
 import io.meeds.notes.rest.model.FeaturedImageEntity;
+import io.meeds.notes.rest.model.PageEntity;
 import io.meeds.notes.rest.model.PagePropertiesEntity;
+import org.exoplatform.wiki.model.DraftPage;
+import org.exoplatform.wiki.model.Page;
 
 public class EntityBuilder {
 
@@ -43,9 +47,62 @@ public static NoteFeaturedImage toNoteFeaturedImage(FeaturedImageEntity featured
     if (featuredImageEntity == null) {
       return null;
     }
-    return new NoteFeaturedImage(featuredImageEntity.getBase64Data(),
+    return new NoteFeaturedImage(featuredImageEntity.getId(),
+                                 featuredImageEntity.getBase64Data(),
                                  featuredImageEntity.getMimeType(),
                                  featuredImageEntity.getUploadId(),
-                                 featuredImageEntity.getAltText());
+                                 featuredImageEntity.getAltText(),
+                                 featuredImageEntity.getLastUpdated(),
+                                 featuredImageEntity.isToDelete());
+  }
+
+  public static Page toPage(PageEntity pageEntity) {
+    if (pageEntity == null) {
+      return null;
+    }
+    Page page = new Page();
+    page.setId(pageEntity.getId());
+    page.setTitle(pageEntity.getTitle());
+    page.setName(pageEntity.getName());
+    page.setUrl(pageEntity.getUrl());
+    page.setAuthor(pageEntity.getAuthor());
+    page.setOwner(pageEntity.getOwner());
+    page.setSyntax(pageEntity.getSyntax());
+    page.setParentPageId(pageEntity.getParentPageId());
+    page.setParentPageName(pageEntity.getParentPageName());
+    page.setContent(pageEntity.getContent());
+    page.setWikiType(pageEntity.getWikiType());
+    page.setWikiOwner(pageEntity.getWikiOwner());
+    page.setAppName(pageEntity.getAppName());
+    page.setLang(pageEntity.getLang());
+    page.setToBePublished(pageEntity.isToBePublished());
+    page.setProperties(toNotePageProperties(pageEntity.getProperties()));
+    return page;
+  }
+  
+  public static DraftPage toDraftPage(DraftPageEntity draftPageEntity) {
+    if (draftPageEntity == null) {
+      return null;
+    }
+    DraftPage draftPage = new DraftPage();
+    draftPage.setId(draftPageEntity.getId());
+    draftPage.setTitle(draftPageEntity.getTitle());
+    draftPage.setName(draftPageEntity.getName());
+    draftPage.setUrl(draftPageEntity.getUrl());
+    draftPage.setAuthor(draftPageEntity.getAuthor());
+    draftPage.setOwner(draftPageEntity.getOwner());
+    draftPage.setSyntax(draftPageEntity.getSyntax());
+    draftPage.setParentPageId(draftPageEntity.getParentPageId());
+    draftPage.setParentPageName(draftPageEntity.getParentPageName());
+    draftPage.setContent(draftPageEntity.getContent());
+    draftPage.setWikiType(draftPageEntity.getWikiType());
+    draftPage.setWikiOwner(draftPageEntity.getWikiOwner());
+    draftPage.setAppName(draftPageEntity.getAppName());
+    draftPage.setToBePublished(draftPageEntity.isToBePublished());
+    draftPage.setLang(draftPageEntity.getLang());
+    draftPage.setTargetPageId(draftPageEntity.getTargetPageId());
+    draftPage.setNewPage(draftPageEntity.isNewPage());
+    draftPage.setProperties(toNotePageProperties(draftPageEntity.getProperties()));
+    return draftPage;
   }
 }
diff --git a/notes-service/src/main/java/org/exoplatform/wiki/jpa/EntityConverter.java b/notes-service/src/main/java/org/exoplatform/wiki/jpa/EntityConverter.java
index 5c28c6cba5..a15aa5bcf6 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/jpa/EntityConverter.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/jpa/EntityConverter.java
@@ -19,7 +19,10 @@
 
 package org.exoplatform.wiki.jpa;
 
+import io.meeds.notes.model.NoteFeaturedImage;
 import io.meeds.notes.model.NoteMetadataObject;
+import io.meeds.notes.model.NotePageProperties;
+import org.apache.commons.collections4.MapUtils;
 import org.apache.commons.lang3.ArrayUtils;
 import org.apache.commons.lang3.StringUtils;
 import org.exoplatform.commons.file.model.FileInfo;
@@ -42,6 +45,7 @@
 import org.exoplatform.wiki.jpa.entity.*;
 import org.exoplatform.wiki.model.*;
 import org.exoplatform.wiki.service.IDType;
+import org.exoplatform.wiki.service.impl.NoteServiceImpl;
 import org.exoplatform.wiki.utils.Utils;
 
 import java.io.ByteArrayInputStream;
@@ -143,7 +147,7 @@ public static Page convertPageEntityToPage(PageEntity pageEntity) {
     return page;
   }
 
-  private static void buildNotePageMetadata(Page note, boolean isDraft) {
+  public static void buildNotePageMetadata(Page note, boolean isDraft) {
     if (note == null) {
       return;
     }
@@ -160,10 +164,27 @@ private static void buildNotePageMetadata(Page note, boolean isDraft) {
       getMetadataService().getMetadataItemsByMetadataAndObject(NOTES_METADATA_KEY, noteMetadataObject)
                           .stream()
                           .findFirst()
-                          .ifPresent(metadataItem -> note.setProperties(metadataItem.getProperties()));
+                          .ifPresent(metadataItem -> {
+                            if (!MapUtils.isEmpty(metadataItem.getProperties())) {
+                              buildPageProperties(metadataItem.getProperties(), note);
+                            }
+                          });
 
     }
   }
+  
+  private static void buildPageProperties(Map<String, String> properties, Page note) {
+    NotePageProperties notePageProperties = new NotePageProperties();
+    NoteFeaturedImage noteFeaturedImage = new NoteFeaturedImage();
+    notePageProperties.setNoteId(Long.parseLong(note.getId()));
+    notePageProperties.setSummary(properties.get(NoteServiceImpl.SUMMARY_PROP));
+    noteFeaturedImage.setId(Long.valueOf(properties.getOrDefault(NoteServiceImpl.FEATURED_IMAGE_ID, "0")));
+    noteFeaturedImage.setLastUpdated(Long.valueOf(properties.getOrDefault(NoteServiceImpl.FEATURED_IMAGE_UPDATED_DATE, "0")));
+    noteFeaturedImage.setAltText(properties.get(NoteServiceImpl.FEATURED_IMAGE_ALT_TEXT));
+    notePageProperties.setDraft(note.isDraftPage());
+    notePageProperties.setFeaturedImage(noteFeaturedImage);
+    note.setProperties(notePageProperties);
+  }
 
   private static SpaceService getSpaceService() {
     if (spaceService == null) {
@@ -489,6 +510,7 @@ public static DraftPageEntity convertDraftPageToDraftPageEntity(DraftPage draftP
         draftPageEntity.setParentPage(pageDAO.find(Long.valueOf(parentPageId)));
       }
       draftPageEntity.setTargetRevision(draftPage.getTargetPageRevision());
+      buildNotePageMetadata(draftPage, true);
     }
     return draftPageEntity;
   }
@@ -508,6 +530,7 @@ public static PageVersion convertPageVersionEntityToPageVersion(PageVersionEntit
       pageVersion.setOwner(pageVersionEntity.getAuthor());
       pageVersion.setParent(convertPageEntityToPage(pageVersionEntity.getPage()));
       pageVersion.setLang(pageVersionEntity.getLang());
+      pageVersion.setWikiOwner(pageVersionEntity.getPage().getWiki().getOwner());
       buildNotePageMetadata(pageVersion, pageVersion.isDraftPage());
     }
     return pageVersion;
diff --git a/notes-service/src/main/java/org/exoplatform/wiki/jpa/JPADataStorage.java b/notes-service/src/main/java/org/exoplatform/wiki/jpa/JPADataStorage.java
index d0def7fe2f..fb6faf2140 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/jpa/JPADataStorage.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/jpa/JPADataStorage.java
@@ -1525,7 +1525,16 @@ public PageVersion getPublishedVersionByPageIdAndLang(Long pageId, String lang)
     if (pageId == null) {
       throw new IllegalArgumentException("targetPageId argument is null");
     }
-    return convertPageVersionEntityToPageVersion(pageVersionDAO.findLatestVersionByPageIdAndLang(pageId, lang));
+    PageVersion pageVersion =
+                            convertPageVersionEntityToPageVersion(pageVersionDAO.findLatestVersionByPageIdAndLang(pageId, lang));
+    if (pageVersion != null) {
+      Page page = pageVersion.getParent();
+      page.setLang(lang);
+      EntityConverter.buildNotePageMetadata(page, false);
+      pageVersion.setProperties(page.getProperties());
+      return pageVersion;
+    }
+    return null;
   }
 
   /**
diff --git a/notes-service/src/main/java/org/exoplatform/wiki/model/Page.java b/notes-service/src/main/java/org/exoplatform/wiki/model/Page.java
index d252b409a3..415bf763a0 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/model/Page.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/model/Page.java
@@ -24,6 +24,8 @@
 
 import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
 
+import io.meeds.notes.model.NotePageProperties;
+import io.meeds.notes.rest.model.PagePropertiesEntity;
 import org.exoplatform.social.metadata.model.MetadataItem;
 import org.exoplatform.wiki.service.BreadcrumbData;
 
@@ -101,7 +103,7 @@ public class Page {
 
   private String                          lang;
 
-  private Map<String, String>             properties;
+  private NotePageProperties              properties;
 
   public Page(String name) {
     this.name = name;
diff --git a/notes-service/src/main/java/org/exoplatform/wiki/service/NoteService.java b/notes-service/src/main/java/org/exoplatform/wiki/service/NoteService.java
index 2d7ff143f6..eb454838e9 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/service/NoteService.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/service/NoteService.java
@@ -535,10 +535,11 @@ DraftPage updateDraftForExistPage(DraftPage draftNoteToUpdate,
    *
    * @param draftNoteToUpdate the draft note to be updated
    * @param currentTimeMillis
+   * @param userIdentityId user identity id
    * @return Updated draft
    * @throws WikiException
    */
-  DraftPage updateDraftForNewPage(DraftPage draftNoteToUpdate, long currentTimeMillis) throws WikiException;
+  DraftPage updateDraftForNewPage(DraftPage draftNoteToUpdate, long currentTimeMillis, long userIdentityId) throws WikiException;
 
   /**
    * Creates a draft for an existing page
@@ -563,10 +564,11 @@ DraftPage createDraftForExistPage(DraftPage draftNoteToSave,
    *
    * @param draftNoteToSave The draft note to be created
    * @param currentTimeMillis
+   * @param userIdentityId user identity id
    * @return Created draft
    * @throws WikiException
    */
-  DraftPage createDraftForNewPage(DraftPage draftNoteToSave, long currentTimeMillis) throws WikiException;
+  DraftPage createDraftForNewPage(DraftPage draftNoteToSave, long currentTimeMillis, long userIdentityId) throws WikiException;
 
   /**
    * Return the list of children of the note to export
@@ -792,10 +794,11 @@ Page getNoteByIdAndLang(Long pageId, Identity userIdentity, String source, Strin
    * @param noteId Note id
    * @param lang note version language
    * @param isDraft is target not a draft
+   * @param thumbnailSize featured image thumbnail size
    * @param userIdentityId user identity id
    * @return {@link NoteFeaturedImage}
    */
-  NoteFeaturedImage getNoteFeaturedImageInfo(Long noteId, String lang, boolean isDraft, long userIdentityId) throws Exception;
+  NoteFeaturedImage getNoteFeaturedImageInfo(Long noteId, String lang, boolean isDraft, String thumbnailSize, long userIdentityId) throws Exception;
 
   /**
    * Save note metadata properties
@@ -803,8 +806,9 @@ Page getNoteByIdAndLang(Long pageId, Identity userIdentity, String source, Strin
    * @param pageProperties note metadata properties to save
    * @param lang target version language
    * @param userIdentityId user identity id
+   * @return {@link NotePageProperties}                      
    */
-  Map<String, String> saveNoteMetadata(NotePageProperties pageProperties, String lang, Long userIdentityId) throws Exception;
+  NotePageProperties saveNoteMetadata(NotePageProperties pageProperties, String lang, Long userIdentityId) throws Exception;
 
   /**
    * Removes note featured image and its related metadata property
diff --git a/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java b/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java
index bffbeb47ba..7c81dda47a 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java
@@ -36,14 +36,13 @@
 import io.meeds.notes.model.NotePageProperties;
 import org.apache.commons.collections4.MapUtils;
 import org.apache.commons.lang3.StringUtils;
-import org.apache.ecs.html.S;
 import org.exoplatform.commons.exception.ObjectNotFoundException;
 import org.exoplatform.commons.file.model.FileInfo;
 import org.exoplatform.commons.file.model.FileItem;
 import org.exoplatform.commons.file.services.FileService;
-import org.exoplatform.social.common.ObjectAlreadyExistsException;
 import org.exoplatform.social.metadata.model.MetadataKey;
 import org.exoplatform.social.metadata.model.MetadataType;
+import org.exoplatform.social.metadata.thumbnail.ImageThumbnailService;
 import org.exoplatform.upload.UploadResource;
 import org.exoplatform.upload.UploadService;
 import org.gatein.api.EntityNotFoundException;
@@ -128,13 +127,13 @@ public class NoteServiceImpl implements NoteService {
 
   public static final String                              NOTE_METADATA_VERSION_PAGE_OBJECT_TYPE = "noteVersionPage";
 
-  private static final String                             SUMMARY_PROP                           = "summary";
+  public static final String                              SUMMARY_PROP                           = "summary";
 
-  private static final String                             FEATURED_IMAGE_ID                      = "featuredImageId";
+  public static final String                              FEATURED_IMAGE_ID                      = "featuredImageId";
 
-  private static final String                             FEATURED_IMAGE_UPDATED_DATE            = "featuredImageUpdatedDate";
+  public static final String                              FEATURED_IMAGE_UPDATED_DATE            = "featuredImageUpdatedDate";
 
-  private static final String                             FEATURED_IMAGE_ALT_TEXT                = "featuredImageAltText";
+  public static final String                              FEATURED_IMAGE_ALT_TEXT                = "featuredImageAltText";
 
   private final WikiService                               wikiService;
 
@@ -225,11 +224,43 @@ public Page createNote(Wiki noteBook, String parentNoteName, Page note, Identity
       note.setAuthor(userIdentity.getUserId());
       note.setContent(note.getContent());
       Page createdPage = createNote(noteBook, parentPage, note);
-
-      Space space = spaceService.getSpaceByGroupId(note.getWikiOwner());
-      createdPage.setCanManage(Utils.canManageNotes(note.getAuthor(), space, note));
-      createdPage.setCanImport(canImportNotes(note.getAuthor(), space, note));
-      createdPage.setCanView(canViewNotes(note.getAuthor(), space, note));
+      NotePageProperties properties = note.getProperties();
+      try {
+        if (properties != null) {
+          DraftPage draftPage = getDraftNoteById(String.valueOf(properties.getNoteId()), userIdentity.getUserId());
+          if (draftPage != null) {
+            NoteFeaturedImage featuredImage = properties.getFeaturedImage();
+            if (featuredImage != null && featuredImage.getId() != null && featuredImage.getId() > 0) {
+              moveOrCopyNotePageProperties(draftPage,
+                                           createdPage,
+                                           draftPage.getLang(),
+                                           note.getLang(),
+                                           NOTE_METADATA_DRAFT_PAGE_OBJECT_TYPE,
+                                           NOTE_METADATA_PAGE_OBJECT_TYPE,
+                                           userIdentity.getUserId(),
+                                           true);
+            } else {
+              properties.setNoteId(Long.parseLong(createdPage.getId()));
+              properties.setDraft(false);
+              properties = saveNoteMetadata(properties,
+                                            note.getLang(),
+                                            Long.valueOf(identityManager.getOrCreateUserIdentity(userIdentity.getUserId())
+                                                                        .getId()));
+            }
+            removeDraftById(draftPage.getId());
+            invalidateCache(draftPage);
+          }
+        }
+      } catch (Exception e) {
+        log.error("Failed to save note metadata", e);
+      }
+      if (createdPage != null) {
+        createdPage.setProperties(properties);
+        Space space = spaceService.getSpaceByGroupId(note.getWikiOwner());
+        createdPage.setCanManage(Utils.canManageNotes(note.getAuthor(), space, note));
+        createdPage.setCanImport(canImportNotes(note.getAuthor(), space, note));
+        createdPage.setCanView(canViewNotes(note.getAuthor(), space, note));
+      }
       return createdPage;
     } else {
       throw new EntityNotFoundException("Parent note not found");
@@ -286,8 +317,8 @@ public Page updateNote(Page note, PageUpdateType type, Identity userIdentity) th
     }
     note.setContent(note.getContent());
     Page updatedPage = dataStorage.updatePage(note);
-    if (userIdentity != null) {
-      DraftPage draftPage = getLatestDraftPageByTargetPageAndLang(Long.valueOf(note.getId()), note.getLang());
+    DraftPage draftPage = getLatestDraftPageByTargetPageAndLang(Long.valueOf(note.getId()), note.getLang());
+    if (userIdentity != null && draftPage != null) {
       moveOrCopyNotePageProperties(draftPage,
                                    note,
                                    draftPage.getLang(),
@@ -313,7 +344,7 @@ public Page updateNote(Page note, PageUpdateType type, Identity userIdentity) th
     }
     Utils.broadcast(listenerService, "note.updated", note.getAuthor(), updatedPage);
     postUpdatePage(updatedPage.getWikiType(), updatedPage.getWikiOwner(), updatedPage.getName(), updatedPage, type);
-
+    updatedPage.setLang(note.getLang());
     return updatedPage;
   }
 
@@ -909,7 +940,14 @@ public List<PageHistory> getVersionsHistoryOfNote(Page note, String userName) th
   public void createVersionOfNote(Page note, String userName) throws WikiException {
     PageVersion pageVersion = dataStorage.addPageVersion(note, userName);
     if (note.getLang() != null) {
-      String versionLangId =  note.getId() + "-" + note.getLang();
+      try {
+        saveNoteMetadata(note.getProperties(),
+                         note.getLang(),
+                         Long.valueOf(identityManager.getOrCreateUserIdentity(userName).getId()));
+      } catch (Exception e) {
+        log.error("Error while saving note version language metadata", e);
+      }
+      String versionLangId = note.getId() + "-" + note.getLang();
       postUpdatePageVersionLanguage(versionLangId);
     } else {
       pageVersion.setId(note.getId() + "-" + pageVersion.getName());
@@ -1003,7 +1041,15 @@ public DraftPage updateDraftForExistPage(DraftPage draftNoteToUpdate,
     }
 
     newDraftPage = dataStorage.updateDraftPageForUser(newDraftPage, Utils.getCurrentUser());
-
+    NotePageProperties properties = draftNoteToUpdate.getProperties();
+    try {
+      properties = saveNoteMetadata(properties,
+                                    newDraftPage.getLang(),
+                                    Long.valueOf(identityManager.getOrCreateUserIdentity(username).getId()));
+    } catch (Exception e) {
+      log.error("Failed to save draft note metadata", e);
+    }
+    newDraftPage.setProperties(properties);
     return newDraftPage;
   }
 
@@ -1011,7 +1057,7 @@ public DraftPage updateDraftForExistPage(DraftPage draftNoteToUpdate,
    * {@inheritDoc}
    */
   @Override
-  public DraftPage updateDraftForNewPage(DraftPage draftNoteToUpdate, long clientTime) throws WikiException {
+  public DraftPage updateDraftForNewPage(DraftPage draftNoteToUpdate, long clientTime, long userIdentityId) throws WikiException {
     // Create suffix for draft name
     String draftSuffix = getDraftNameSuffix(clientTime);
 
@@ -1030,7 +1076,13 @@ public DraftPage updateDraftForNewPage(DraftPage draftNoteToUpdate, long clientT
     newDraftPage.setUpdatedDate(new Date(clientTime));
 
     newDraftPage = dataStorage.updateDraftPageForUser(newDraftPage, Utils.getCurrentUser());
-
+    NotePageProperties properties = draftNoteToUpdate.getProperties();
+    try {
+      properties = saveNoteMetadata(properties, newDraftPage.getLang(), userIdentityId);
+    } catch (Exception e) {
+      log.error("Failed to save draft note metadata", e);
+    }
+    newDraftPage.setProperties(properties);
     return newDraftPage;
   }
 
@@ -1067,17 +1119,33 @@ public DraftPage createDraftForExistPage(DraftPage draftPage,
     } else {
       newDraftPage.setTargetPageRevision(revision);
     }
-
     newDraftPage = dataStorage.createDraftPageForUser(newDraftPage, username);
-    moveOrCopyNotePageProperties(targetPage,
-                                 newDraftPage,
-                                 targetPage.getLang(),
-                                 newDraftPage.getLang(),
-                                 NOTE_METADATA_PAGE_OBJECT_TYPE,
-                                 NOTE_METADATA_DRAFT_PAGE_OBJECT_TYPE,
-                                 username,
-                                 false);
-    newDraftPage.setProperties(targetPage.getProperties());
+    NotePageProperties properties = draftPage.getProperties();
+    try {
+      if (properties != null) {
+        NoteFeaturedImage featuredImage = properties.getFeaturedImage();
+        if (featuredImage != null && featuredImage.getId() != null && featuredImage.getId() > 0) {
+          Map<String, String> props = moveOrCopyNotePageProperties(targetPage,
+                                                                   newDraftPage,
+                                                                   targetPage.getLang(),
+                                                                   newDraftPage.getLang(),
+                                                                   NOTE_METADATA_PAGE_OBJECT_TYPE,
+                                                                   NOTE_METADATA_DRAFT_PAGE_OBJECT_TYPE,
+                                                                   username,
+                                                                   false);
+          if (props != null && props.getOrDefault(FEATURED_IMAGE_ID, null) == null) {
+            properties.setFeaturedImage(null);
+          }
+        } else {
+          properties = saveNoteMetadata(properties,
+                                        draftPage.getLang(),
+                                        Long.valueOf(identityManager.getOrCreateUserIdentity(username).getId()));
+        }
+      }
+    } catch (Exception e) {
+      log.error("Failed to save draft note metadata", e);
+    }
+    newDraftPage.setProperties(properties);
     return newDraftPage;
   }
 
@@ -1085,7 +1153,7 @@ public DraftPage createDraftForExistPage(DraftPage draftPage,
    * {@inheritDoc}
    */
   @Override
-  public DraftPage createDraftForNewPage(DraftPage draftPage, long clientTime) throws WikiException {
+  public DraftPage createDraftForNewPage(DraftPage draftPage, long clientTime, long userIdentityId) throws WikiException {
     // Create suffix for draft name
     String draftSuffix = getDraftNameSuffix(clientTime);
 
@@ -1102,9 +1170,17 @@ public DraftPage createDraftForNewPage(DraftPage draftPage, long clientTime) thr
     newDraftPage.setSyntax(draftPage.getSyntax());
     newDraftPage.setCreatedDate(new Date(clientTime));
     newDraftPage.setUpdatedDate(new Date(clientTime));
-
     newDraftPage = dataStorage.createDraftPageForUser(newDraftPage, Utils.getCurrentUser());
-
+    NotePageProperties properties = draftPage.getProperties();
+    try {
+      if (properties != null) {
+        properties.setNoteId(Long.parseLong(newDraftPage.getId()));
+        properties = saveNoteMetadata(properties, draftPage.getLang(), userIdentityId);
+      }
+    } catch (Exception e) {
+      log.error("Failed to save draft note metadata", e);
+    }
+    newDraftPage.setProperties(properties);
     return newDraftPage;
   }
   
@@ -1262,6 +1338,7 @@ public Page getNoteByIdAndLang(Long pageId, Identity userIdentity, String source
       page.setTitle(publishedVersion.getTitle());
       page.setContent(publishedVersion.getContent());
       page.setLang(publishedVersion.getLang());
+      page.setProperties(publishedVersion.getProperties());
       if (lang != null) {
         page.setMetadatas(retrieveMetadataItems(pageId + "-" + lang, userIdentity.getUserId()));
       }
@@ -1850,12 +1927,10 @@ public void removeOrphanDraftPagesByParentPage(long parentPageId) {
    */
   @Override
   public Long saveNoteFeaturedImage(Page note, NoteFeaturedImage featuredImage) throws Exception {
-    long featuredImageId = 0L;
-    if (!MapUtils.isEmpty(note.getProperties())) {
-      String featuredImageIdProp = note.getProperties().get(FEATURED_IMAGE_ID);
-      featuredImageId = featuredImageIdProp != null && !featuredImageIdProp.equals("null") ? Long.parseLong(featuredImageIdProp)
-                                                                                          : 0L;
+    if (featuredImage == null) {
+      return null;
     }
+    long featuredImageId = featuredImage.getId() != null ? featuredImage.getId(): 0L;
     String uploadId = featuredImage.getUploadId();
     if (uploadId != null && featuredImage.getBase64Data() != null) {
       UploadResource uploadResource = uploadService.getUploadResource(uploadId);
@@ -1888,13 +1963,14 @@ public Long saveNoteFeaturedImage(Page note, NoteFeaturedImage featuredImage) th
    * {@inheritDoc}
    */
   @Override
-  public NoteFeaturedImage getNoteFeaturedImageInfo(Long noteId, String lang, boolean isDraft, long userIdentityId) throws Exception {
+  public NoteFeaturedImage getNoteFeaturedImageInfo(Long noteId, String lang, boolean isDraft, String thumbnailSize, long userIdentityId) throws Exception {
     if (noteId == null) {
       throw new IllegalArgumentException("note id is mandatory");
     }
     Page note;
+    org.exoplatform.social.core.identity.model.Identity identity = identityManager.getIdentity(String.valueOf(userIdentityId));
     if (isDraft) {
-      note = getDraftNoteById(String.valueOf(noteId), identityManager.getIdentity(String.valueOf(userIdentityId)).getRemoteId());
+      note = getDraftNoteById(String.valueOf(noteId), identity.getRemoteId());
     } else {
       note = getNoteByIdAndLang(noteId, lang);
     }
@@ -1912,6 +1988,11 @@ public NoteFeaturedImage getNoteFeaturedImageInfo(Long noteId, String lang, bool
       FileItem fileItem = fileService.getFile(noteFeaturedImageId);
       if (fileItem != null && fileItem.getFileInfo() != null) {
         FileInfo fileInfo = fileItem.getFileInfo();
+        if (thumbnailSize != null) {
+          ImageThumbnailService thumbnailService = CommonsUtils.getService(ImageThumbnailService.class);
+          int[] dimension = org.exoplatform.social.common.Utils.parseDimension(thumbnailSize);
+          fileItem = thumbnailService.getOrCreateThumbnail(fileItem, identity, dimension[0], dimension[1]);
+        }
         return new NoteFeaturedImage(fileInfo.getId(),
                                      fileInfo.getName(),
                                      fileInfo.getMimetype(),
@@ -1940,17 +2021,18 @@ private MetadataItem getNoteMetadataItem(Page note, String lang, String objectTy
                           .orElse(null);
   }
 
-  private void moveOrCopyNotePageProperties(Page oldNote,
-                                            Page note,
-                                            String oldLang,
-                                            String lang,
-                                            String oldObjectType,
-                                            String newObjectType,
-                                            String username,
-                                            boolean move) {
+  private Map<String, String> moveOrCopyNotePageProperties(Page oldNote,
+                                                           Page note,
+                                                           String oldLang,
+                                                           String lang,
+                                                           String oldObjectType,
+                                                           String newObjectType,
+                                                           String username,
+                                                           boolean move) {
     if (note == null || oldNote == null) {
-      return;
+      return null;
     }
+    Map<String, String> properties = new HashMap<>();
     if (username != null) {
       org.exoplatform.social.core.identity.model.Identity identity =
                                                                    identityManager.getOrCreateIdentity(OrganizationIdentityProvider.NAME,
@@ -1960,14 +2042,20 @@ private void moveOrCopyNotePageProperties(Page oldNote,
       MetadataItem newNoteMetadataItem = getNoteMetadataItem(note, lang, newObjectType);
       if (oldNoteMetadataItem != null && oldNoteMetadataItem.getProperties() != null) {
         MetadataService metadataService = CommonsUtils.getService(MetadataService.class);
+        properties = oldNoteMetadataItem.getProperties();
+        if (properties != null && oldLang == null && lang != null) {
+          properties.remove(FEATURED_IMAGE_ID);
+          properties.remove(FEATURED_IMAGE_ALT_TEXT);
+          properties.remove(FEATURED_IMAGE_UPDATED_DATE);
+        }
         if (newNoteMetadataItem != null) {
-          newNoteMetadataItem.setProperties(oldNoteMetadataItem.getProperties());
+          newNoteMetadataItem.setProperties(properties);
           metadataService.updateMetadataItem(newNoteMetadataItem, Long.parseLong(identity.getId()));
         } else {
           try {
             metadataService.createMetadataItem(newNoteMetadataObject,
                                                NOTES_METADATA_KEY,
-                                               oldNoteMetadataItem.getProperties(),
+                                               properties,
                                                Long.parseLong(identity.getId()));
           } catch (Exception e) {
             log.error("Error while creating note metadata item", e);
@@ -1978,16 +2066,20 @@ private void moveOrCopyNotePageProperties(Page oldNote,
         }
       }
     }
+    return properties;
   }
   
   private boolean isOriginalFeaturedImage(Page draftPage, Page targetPage) {
     if (draftPage == null || targetPage == null) {
       return false;
     }
-    Map<String, String> draftProperties = draftPage.getProperties();
-    Map<String, String> targetProperties = targetPage.getProperties();
-    return draftProperties != null && targetProperties != null
-        && targetProperties.get(FEATURED_IMAGE_ID).equals(draftProperties.get(FEATURED_IMAGE_ID));
+    if (draftPage.getProperties() == null || targetPage.getProperties() == null) {
+      return false;
+    }
+    NoteFeaturedImage draftFeaturedImage = draftPage.getProperties().getFeaturedImage();
+    NoteFeaturedImage targetFeaturedImage = targetPage.getProperties().getFeaturedImage();
+    return draftFeaturedImage != null && targetFeaturedImage != null
+        && targetFeaturedImage.getId().equals(draftFeaturedImage.getId());
   }
   
   /**
@@ -1999,6 +2091,9 @@ public void removeNoteFeaturedImage(Long noteId,
                                       String lang,
                                       boolean isDraft,
                                       Long userIdentityId) throws Exception {
+    if (featuredImageId == null || featuredImageId <= 0) {
+      return;
+    }
     boolean removeFeaturedImageFile = true;
     Page note;
     if (isDraft) {
@@ -2014,9 +2109,6 @@ public void removeNoteFeaturedImage(Long noteId,
     if (note == null) {
       throw new ObjectNotFoundException("note not found");
     }
-    if (featuredImageId == null) {
-      throw new IllegalArgumentException("featured image id is mandatory");
-    }
     MetadataService metadataService = CommonsUtils.getService(MetadataService.class);
     if (removeFeaturedImageFile) {
       fileService.deleteFile(featuredImageId);
@@ -2039,17 +2131,34 @@ public void removeNoteFeaturedImage(Long noteId,
    * {@inheritDoc}
    */
   @Override
-  public Map<String, String> saveNoteMetadata(NotePageProperties notePageProperties, String lang, Long userIdentityId) throws Exception {
+  public NotePageProperties saveNoteMetadata(NotePageProperties notePageProperties, String lang, Long userIdentityId) throws Exception {
+    if (notePageProperties == null) {
+      return null;
+    }
     Page note;
+    Long featuredImageId = null;
     if (notePageProperties.isDraft()) {
-      note = getLatestDraftPageByTargetPageAndLang(notePageProperties.getNoteId(), lang);
+        note = getLatestDraftPageByTargetPageAndLang(notePageProperties.getNoteId(), lang);
+        if (note == null) {
+          note = getDraftNoteById(String.valueOf(notePageProperties.getNoteId()),
+                                  identityManager.getIdentity(String.valueOf(userIdentityId)).getRemoteId());
+        }
     } else {
       note = getNoteByIdAndLang(notePageProperties.getNoteId(), lang);
     }
     if (note == null) {
       throw new ObjectNotFoundException("note not found");
     }
-    Long featuredImageId = saveNoteFeaturedImage(note, notePageProperties.getFeaturedImage());
+    NoteFeaturedImage featuredImage = notePageProperties.getFeaturedImage();
+    if (featuredImage != null && featuredImage.isToDelete()) {
+      removeNoteFeaturedImage(Long.valueOf(note.getId()),
+                              featuredImage.getId(),
+                              lang,
+                              notePageProperties.isDraft(),
+                              userIdentityId);
+    } else {
+      featuredImageId = saveNoteFeaturedImage(note, featuredImage);
+    }
     MetadataService metadataService = CommonsUtils.getService(MetadataService.class);
 
     NoteMetadataObject noteMetadataObject =
@@ -2078,6 +2187,11 @@ public Map<String, String> saveNoteMetadata(NotePageProperties notePagePropertie
       metadataItem.setProperties(properties);
       metadataService.updateMetadataItem(metadataItem, userIdentityId);
     }
-    return properties;
+    if (featuredImage != null) {
+      featuredImage.setId(featuredImageId);
+      featuredImage.setLastUpdated(Long.valueOf(properties.getOrDefault(FEATURED_IMAGE_UPDATED_DATE, "0")));
+      notePageProperties.setFeaturedImage(featuredImage);
+    }
+    return notePageProperties;
   }
 }
diff --git a/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java b/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java
index 4b9c393243..17050b0aad 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java
@@ -30,7 +30,6 @@
 import java.util.HashMap;
 import java.util.List;
 import java.util.Locale;
-import java.util.Map;
 import java.util.Optional;
 import java.util.ResourceBundle;
 import java.util.Set;
@@ -110,7 +109,9 @@
 import org.exoplatform.wiki.utils.Utils;
 
 import io.meeds.notes.model.NoteFeaturedImage;
-import io.meeds.notes.rest.model.PagePropertiesEntity;
+import io.meeds.notes.model.NotePageProperties;
+import io.meeds.notes.rest.model.DraftPageEntity;
+import io.meeds.notes.rest.model.PageEntity;
 import io.swagger.v3.oas.annotations.Operation;
 import io.swagger.v3.oas.annotations.Parameter;
 import io.swagger.v3.oas.annotations.parameters.RequestBody;
@@ -489,7 +490,7 @@ public Response getNoteVersions(@Parameter(description = "Note id", required = t
           @ApiResponse(responseCode = "403", description = "Unauthorized operation"),
           @ApiResponse(responseCode = "404", description = "Resource not found") })
   public Response createNote(@Parameter(description = "note object to be created", required = true)
-  Page note) {
+                             PageEntity note) {
     if (note == null) {
       return Response.status(Response.Status.BAD_REQUEST).build();
     }
@@ -529,7 +530,10 @@ public Response createNote(@Parameter(description = "note object to be created",
       note.setSyntax(syntaxId);
       note.setName(note.getTitle());
       note.setUrl("");
-      Page createdNote = noteService.createNote(noteBook, note.getParentPageName(), note, identity);
+      Page createdNote = noteService.createNote(noteBook,
+                                                note.getParentPageName(),
+                                                io.meeds.notes.rest.utils.EntityBuilder.toPage(note),
+                                                identity);
       return Response.ok(createdNote, MediaType.APPLICATION_JSON).cacheControl(cc).build();
     } catch (IllegalAccessException e) {
       log.error("User does not have view permissions on the note {}", note.getName(), e);
@@ -548,7 +552,7 @@ public Response createNote(@Parameter(description = "note object to be created",
       @ApiResponse(responseCode = "400", description = "Invalid query input"), @ApiResponse(responseCode = "403", description = "Unauthorized operation"),
       @ApiResponse(responseCode = "404", description = "Resource not found") })
   public Response saveDraft(@RequestBody(description = "Note draft page object to be created", required = true)
-  DraftPage draftNoteToSave) {
+                            DraftPageEntity draftNoteToSave) {
     if (draftNoteToSave == null) {
       return Response.status(Response.Status.BAD_REQUEST).build();
     }
@@ -561,6 +565,7 @@ public Response saveDraft(@RequestBody(description = "Note draft page object to
     String noteBookOwner = draftNoteToSave.getWikiOwner();
     Page parentNote = null;
     Page targetNote = null;
+    DraftPage savedDraftPage = null;
     try {
       Identity identity = ConversationState.getCurrent().getIdentity();
       if (StringUtils.isNoneEmpty(draftNoteToSave.getParentPageId())) {
@@ -595,28 +600,31 @@ public Response saveDraft(@RequestBody(description = "Note draft page object to
           draftNoteToSave.setId(draftPage.getId());
         }
       }
-
       if (StringUtils.isNoneEmpty(draftNoteToSave.getId())) {
-        draftNoteToSave = targetNote != null
-                                             ? noteService.updateDraftForExistPage(draftNoteToSave,
+        savedDraftPage = targetNote != null
+                                             ? noteService.updateDraftForExistPage(io.meeds.notes.rest.utils.EntityBuilder.toDraftPage(draftNoteToSave),
                                                                                    targetNote,
                                                                                    null,
                                                                                    System.currentTimeMillis(),
                                                                                    currentUser)
-                                             : noteService.updateDraftForNewPage(draftNoteToSave, System.currentTimeMillis());
+                                             : noteService.updateDraftForNewPage(io.meeds.notes.rest.utils.EntityBuilder.toDraftPage(draftNoteToSave),
+                                                                                 System.currentTimeMillis(),
+                                                                                 RestUtils.getCurrentUserIdentityId());
       } else {
-        draftNoteToSave = targetNote != null
-                                             ? noteService.createDraftForExistPage(draftNoteToSave,
+        savedDraftPage = targetNote != null
+                                             ? noteService.createDraftForExistPage(io.meeds.notes.rest.utils.EntityBuilder.toDraftPage(draftNoteToSave),
                                                                                    targetNote,
                                                                                    null,
                                                                                    System.currentTimeMillis(),
                                                                                    currentUser)
-                                             : noteService.createDraftForNewPage(draftNoteToSave, System.currentTimeMillis());
+                                             : noteService.createDraftForNewPage(io.meeds.notes.rest.utils.EntityBuilder.toDraftPage(draftNoteToSave),
+                                                                                 System.currentTimeMillis(),
+                                                                                 RestUtils.getCurrentUserIdentityId());
       }
 
-      return Response.ok(draftNoteToSave, MediaType.APPLICATION_JSON).cacheControl(cc).build();
+      return Response.ok(savedDraftPage, MediaType.APPLICATION_JSON).cacheControl(cc).build();
     } catch (Exception ex) {
-      log.warn("Failed to perform save noteBook draft note {}:{}:{}", noteBookType, noteBookOwner, draftNoteToSave.getId(), ex);
+      log.warn("Failed to perform save noteBook draft note {}:{}", noteBookType, noteBookOwner, ex);
       return Response.status(HTTPStatus.INTERNAL_ERROR).cacheControl(cc).build();
     }
   }
@@ -638,7 +646,7 @@ public Response updateNote(@Parameter(description = "NoteBook Type", required =
                              @PathParam("noteId")
                              String noteId,
                              @RequestBody(description = "note object to be updated", required = true)
-                             Page note) {
+                             PageEntity note) {
     if (note == null) {
       return Response.status(Response.Status.BAD_REQUEST).build();
     }
@@ -706,10 +714,8 @@ public Response updateNote(@Parameter(description = "NoteBook Type", required =
   @ApiResponses(value = { @ApiResponse(responseCode = "200", description = "Request fulfilled"),
       @ApiResponse(responseCode = "400", description = "Invalid query input"), @ApiResponse(responseCode = "403", description = "Unauthorized operation"),
       @ApiResponse(responseCode = "404", description = "Resource not found") })
-    public Response updateNoteById(@Parameter(description = "Note id", required = true)
-  @PathParam("noteId")
-  String noteId, @RequestBody(description = "note object to be updated", required = true)
-  Page note) {
+    public Response updateNoteById(@Parameter(description = "Note id", required = true) @PathParam("noteId") String noteId, 
+                                   @RequestBody(description = "note object to be updated", required = true) PageEntity note) {
     if (note == null) {
       return Response.status(Response.Status.BAD_REQUEST).build();
     }
@@ -748,6 +754,9 @@ public Response updateNoteById(@Parameter(description = "Note id", required = tr
           note_ = noteService.updateNote(note_, PageUpdateType.EDIT_PAGE_CONTENT_AND_TITLE, identity);
           note_.setTitle(note.getTitle());
           note_.setContent(note.getContent());
+          NotePageProperties notePageProperties =
+                                                io.meeds.notes.rest.utils.EntityBuilder.toNotePageProperties(note.getProperties());
+          note_.setProperties(notePageProperties);
         }
         noteService.createVersionOfNote(note_, identity.getUserId());
         if (!Utils.ANONYM_IDENTITY.equals(identity.getUserId())) {
@@ -792,7 +801,7 @@ public Response updateNoteById(@Parameter(description = "Note id", required = tr
       } else {
         // in this case, the note didnt change on title nor content. As we need the page
         // url in front side, we compute it here
-        note_.setUrl(Utils.getPageUrl(note));
+        note_.setUrl(Utils.getPageUrl(io.meeds.notes.rest.utils.EntityBuilder.toPage(note)));
       }
       return Response.ok(note_, MediaType.APPLICATION_JSON).cacheControl(cc).build();
     } catch (IllegalAccessException e) {
@@ -1528,38 +1537,6 @@ public Response getAvailableLanguages(@Context
     }
   }
 
-  @POST
-  @Path("/metadata")
-  @Produces(MediaType.APPLICATION_JSON)
-  @RolesAllowed("users")
-  @Operation(
-          summary = "Saves a note metadata properties",
-          description = "Saves a note metadata properties",
-          method = "POST")
-  @ApiResponses(value = { @ApiResponse(responseCode = "200", description = "Request fulfilled"),
-          @ApiResponse(responseCode = "500", description = "Internal server error"),
-          @ApiResponse(responseCode = "400", description = "Invalid query input"),
-          @ApiResponse(responseCode = "404", description = "Resource not found") })
-  public Response saveNoteMetadata(@RequestBody(description = "note metadata properties") PagePropertiesEntity pageProperties,
-                                   @Parameter(description = "target version language", required = true) @QueryParam("lang") String lang) {
-    if (pageProperties == null ) {
-      return Response.status(Response.Status.BAD_REQUEST).entity("notePageProperties object is mandatory").build();
-    }
-    try {
-      Map<String, String> noteProperties =
-                                         noteService.saveNoteMetadata(io.meeds.notes.rest.utils.EntityBuilder.toNotePageProperties(pageProperties),
-                                                                      lang,
-                                                                      RestUtils.getCurrentUserIdentityId());
-      return Response.ok(noteProperties, MediaType.APPLICATION_JSON_TYPE).build();
-    } catch (ObjectNotFoundException e) {
-      log.warn("target note not found", e);
-      return Response.status(HTTPStatus.NOT_FOUND).build();
-    } catch (Exception e) {
-      log.error("Error occurred while saving note metadata properties", e);
-      return Response.status(HTTPStatus.INTERNAL_ERROR).build();
-    }
-  }
-
   @GET
   @Path( "/illustration/{noteId}")
   @RolesAllowed("users")
@@ -1575,6 +1552,7 @@ public Response getFeaturedImageIllustration(@Context Request request,
                                        @Parameter(description = "target note id", required = true) @PathParam("noteId") Long noteId,
                                        @Parameter(description = "target version language", required = true) @QueryParam("isDraft") boolean isDraft,
                                        @Parameter(description = "target version language", required = true) @QueryParam("lang") String lang,
+                                       @Parameter(description = "Optional size parameter", required = true) @QueryParam("size") String size,
                                        @Parameter(description = "Optional last modified parameter") @QueryParam("v") long lastModified) {
 
     if (noteId == null) {
@@ -1584,12 +1562,13 @@ public Response getFeaturedImageIllustration(@Context Request request,
       NoteFeaturedImage noteFeaturedImage = noteService.getNoteFeaturedImageInfo(noteId,
                                                                                  lang,
                                                                                  isDraft,
+                                                                                 size,
                                                                                  RestUtils.getCurrentUserIdentityId());
       if (noteFeaturedImage == null) {
         return Response.status(HTTPStatus.NOT_FOUND).build();
       }
       Long lastUpdated = noteFeaturedImage.getLastUpdated();
-      EntityTag eTag = new EntityTag(lastUpdated + noteId + lang, true);
+      EntityTag eTag = new EntityTag(lastUpdated + noteId + lang + size, true);
       Response.ResponseBuilder builder = request.evaluatePreconditions(eTag);
       if (builder == null) {
         InputStream stream = noteFeaturedImage.getFileInputStream();
@@ -1611,43 +1590,6 @@ public Response getFeaturedImageIllustration(@Context Request request,
     }
   }
 
-  @DELETE
-  @Path("/metadata/featured-image/{noteId}")
-  @RolesAllowed("users")
-  @Operation(
-          summary = "delete a note featured image",
-          description = "Deletes note featured image and its related metadata property",
-          method = "DELETE")
-  @ApiResponses(value = { @ApiResponse(responseCode = "200", description = "Request fulfilled"),
-          @ApiResponse(responseCode = "500", description = "Internal server error"),
-          @ApiResponse(responseCode = "400", description = "Invalid query input"),
-          @ApiResponse(responseCode = "404", description = "Resource not found") })
-  public Response removeNoteFeaturedImage(@Parameter(description = "target note id", required = true) @PathParam("noteId") Long noteId,
-                                          @Parameter(description = "draft note", required = true) @QueryParam("isDraft") boolean isDraft,
-                                          @Parameter(description = "Note version language", required = true) @QueryParam("lang") String lang) 
-  {
-    if (noteId == null) {
-      return Response.status(Response.Status.BAD_REQUEST).entity("note id is mandatory").build();
-    }
-    try {
-      NoteFeaturedImage noteFeaturedImage = noteService.getNoteFeaturedImageInfo(noteId,
-                                                                                 lang,
-                                                                                 isDraft,
-                                                                                 RestUtils.getCurrentUserIdentityId());
-      if (noteFeaturedImage == null) {
-        return Response.status(HTTPStatus.NOT_FOUND).build();
-      }
-      noteService.removeNoteFeaturedImage(noteId, noteFeaturedImage.getId(), lang, isDraft, RestUtils.getCurrentUserIdentityId());
-      return Response.status(HTTPStatus.OK).build();
-    } catch (ObjectNotFoundException e) {
-      log.warn("target note not found", e);
-      return Response.status(HTTPStatus.NOT_FOUND).build();
-    } catch (Exception e) {
-      log.error("Error occurred while removing note featured image", e);
-      return Response.status(HTTPStatus.INTERNAL_ERROR).build();
-    }
-  }
-
   private List<JsonNodeData> getJsonTree(WikiPageParams params, HashMap<String, Object> context) throws Exception {
     Wiki noteBook = noteBookService.getWikiByTypeAndOwner(params.getType(), params.getOwner());
     WikiTreeNode noteBookNode = new WikiTreeNode(noteBook);
diff --git a/notes-service/src/test/java/org/exoplatform/wiki/service/TestNoteService.java b/notes-service/src/test/java/org/exoplatform/wiki/service/TestNoteService.java
index c843ed7b2e..c180d9b811 100644
--- a/notes-service/src/test/java/org/exoplatform/wiki/service/TestNoteService.java
+++ b/notes-service/src/test/java/org/exoplatform/wiki/service/TestNoteService.java
@@ -336,7 +336,7 @@ public void testDraftPage() throws WikiException, IllegalAccessException {
     draftOfNewPage.setTitle("Draft page");
     draftOfNewPage.setContent("Draft page content");
     long now = new Date().getTime();
-    draftOfNewPage = noteService.createDraftForNewPage(new DraftPage(), now);
+    draftOfNewPage = noteService.createDraftForNewPage(new DraftPage(), now, 1L);
     assertNotNull(draftOfNewPage);
     String draftNameForNewPage = draftOfNewPage.getName();
     assertTrue(draftOfNewPage.isNewPage());
@@ -367,7 +367,7 @@ public void testDraftPage() throws WikiException, IllegalAccessException {
     //Test Update draft page
     draftOfNewPage.setTitle("Draft page updated");
     draftOfNewPage.setContent("Draft page content updated");
-    DraftPage updatedDraftOfNewPage = noteService.updateDraftForNewPage(draftOfNewPage, now);
+    DraftPage updatedDraftOfNewPage = noteService.updateDraftForNewPage(draftOfNewPage, now, 1L);
     assertNotNull(updatedDraftOfNewPage);
     assertEquals(updatedDraftOfNewPage.getTitle(), draftOfNewPage.getTitle());
     assertEquals(updatedDraftOfNewPage.getContent(), draftOfNewPage.getContent());
@@ -696,7 +696,7 @@ public void testRemoveOrphanDraftPagesByParentPage() throws Exception {
     DraftPage draft = new DraftPage();
     draft.setParentPageId(homePage.getId());
     draft.setTargetPageId(null);
-    draft = noteService.createDraftForNewPage(draft, new Date().getTime());
+    draft = noteService.createDraftForNewPage(draft, new Date().getTime(), 1L);
     assertNotNull(draft);
     noteService.removeOrphanDraftPagesByParentPage(Long.parseLong(homePage.getId()));
     persist();
@@ -743,14 +743,12 @@ public void testSaveNoteFeaturedImage() throws Exception {
     this.bindMockedUploadService();
 
     NotePageProperties notePageProperties = createNotePageProperties(Long.parseLong(note.getId()), "alt text", "summary test");
-    Map<String, String> properties = noteService.saveNoteMetadata(notePageProperties, null, 1L);
-    assertEquals(4, properties.size());
-    assertEquals("summary test", properties.get("summary"));
+    NotePageProperties properties = noteService.saveNoteMetadata(notePageProperties, null, 1L);
+    assertEquals("summary test", properties.getSummary());
 
     notePageProperties.setSummary("version language summary");
     properties = noteService.saveNoteMetadata(notePageProperties, "en", 1L);
-    assertEquals(4, properties.size());
-    assertEquals("version language summary", properties.get("summary"));
+    assertEquals("version language summary", properties.getSummary());
   }
   
   public void testRemoveNoteFeaturedImage() throws Exception {
@@ -760,23 +758,26 @@ public void testRemoveNoteFeaturedImage() throws Exception {
     this.bindMockedUploadService();
 
     NotePageProperties notePageProperties = createNotePageProperties(Long.parseLong(note.getId()), "alt text", "summary test");
-    Map<String, String> properties = noteService.saveNoteMetadata(notePageProperties, null, 1L);
+    NotePageProperties properties = noteService.saveNoteMetadata(notePageProperties, null, 1L);
     noteService.saveNoteMetadata(notePageProperties, "fr", 1L);
 
-    assertEquals(4, properties.size());
-    assertNotNull(properties.get("featuredImageId"));
-    assertNotNull(noteService.getNoteFeaturedImageInfo(Long.parseLong(note.getId()), null, false, 1L));
+    assertNotNull(properties.getFeaturedImage().getId());
+    assertNotNull(noteService.getNoteFeaturedImageInfo(Long.parseLong(note.getId()), null, false, null, 1L));
 
     noteService.removeNoteFeaturedImage(Long.parseLong(note.getId()),
-                                        Long.parseLong(properties.get("featuredImageId")),
+                                        properties.getFeaturedImage().getId(),
                                         null,
                                         false,
                                         1L);
 
-    NoteFeaturedImage savedFeaturedImage = noteService.getNoteFeaturedImageInfo(Long.parseLong(note.getId()), null, false, 1L);
+    NoteFeaturedImage savedFeaturedImage = noteService.getNoteFeaturedImageInfo(Long.parseLong(note.getId()),
+                                                                                null,
+                                                                                false,
+                                                                                null,
+                                                                                1L);
     assertNull(savedFeaturedImage);
 
-    assertNotNull(noteService.getNoteFeaturedImageInfo(Long.parseLong(note.getId()), "fr", false, 1L));
+    assertNotNull(noteService.getNoteFeaturedImageInfo(Long.parseLong(note.getId()), "fr", false, null, 1L));
   }
 
   public void testGetNoteFeaturedImageInfo() throws Exception {
@@ -787,12 +788,86 @@ public void testGetNoteFeaturedImageInfo() throws Exception {
 
     NotePageProperties notePageProperties = createNotePageProperties(Long.parseLong(note.getId()), "alt text", "summary Test");
     noteService.saveNoteMetadata(notePageProperties, null, 1L);
+    notePageProperties = createNotePageProperties(Long.parseLong(note.getId()), "alt text", "summary Test");
     noteService.saveNoteMetadata(notePageProperties, "ar", 1L);
-    NoteFeaturedImage featuredImage = noteService.getNoteFeaturedImageInfo(Long.parseLong(note.getId()), null, false, 1L);
-    NoteFeaturedImage versionLanguageFeaturedImage = noteService.getNoteFeaturedImageInfo(Long.parseLong(note.getId()), "ar", false, 1L);
+    NoteFeaturedImage featuredImage = noteService.getNoteFeaturedImageInfo(Long.parseLong(note.getId()), null, false, "150x150", 1L);
+    NoteFeaturedImage versionLanguageFeaturedImage = noteService.getNoteFeaturedImageInfo(Long.parseLong(note.getId()), "ar", false, "150x150", 1L);
 
     assertNotNull(featuredImage);
     assertTrue(featuredImage.getLastUpdated() > 0L);
     assertNotSame(featuredImage.getId(), versionLanguageFeaturedImage.getId());
   }
+
+  public void testCreatePageWithProperties() throws Exception {
+    Identity user = new Identity("user");
+    this.bindMockedUploadService();
+    NotePageProperties notePageProperties = createNotePageProperties(0L, "alt text", "summary Test");
+    DraftPage draftPage = new DraftPage();
+    draftPage.setTitle("test");
+    draftPage.setContent("test");
+    draftPage.setProperties(notePageProperties);
+    draftPage = noteService.createDraftForNewPage(draftPage, new Date().getTime(), 1L);
+    Wiki portalWiki = getOrCreateWiki(wService, PortalConfig.PORTAL_TYPE, "testPortal");
+
+    // case save properties of new page from new page draft
+    Page page = new Page();
+    page.setTitle("testSaveProperties1");
+    page.setName("testSaveProperties1");
+    page.setContent("test");
+    page.setProperties(draftPage.getProperties());
+    Page note = noteService.createNote(portalWiki, "Home", page , user);
+    assertNotNull(note);
+    assertNotNull(note.getProperties());
+
+    notePageProperties.setFeaturedImage(null);
+    page.setTitle("testSaveProperties2");
+    page.setName("testSaveProperties2");
+    page.setProperties(notePageProperties);
+    note = noteService.createNote(portalWiki, "Home", page , user);
+    assertNotNull(note);
+    assertNotNull(note.getProperties());
+  }
+
+  public void testCreateDraftForNewPageWithProperties() throws Exception {
+    Identity user = new Identity("user");
+    this.bindMockedUploadService();
+    NotePageProperties notePageProperties = createNotePageProperties(0L, "alt text", "summary Test");
+    DraftPage draftPage = new DraftPage();
+    draftPage.setTitle("test");
+    draftPage.setContent("test");
+    draftPage.setProperties(notePageProperties);
+    draftPage = noteService.createDraftForNewPage(draftPage, new Date().getTime(), 1L);
+    Wiki portalWiki = getOrCreateWiki(wService, PortalConfig.PORTAL_TYPE, "testPortal");
+    assertNotNull(draftPage);
+    assertNotNull(draftPage.getProperties());
+  }
+
+  public void testCreateDraftForExistPageWithProperties() throws Exception {
+    Identity user = new Identity("user");
+    this.bindMockedUploadService();
+    NotePageProperties notePageProperties = createNotePageProperties(0L, "alt text", "summary Test");
+    DraftPage draftPage = new DraftPage();
+    draftPage.setTitle("test");
+    draftPage.setContent("test");
+    draftPage.setProperties(notePageProperties);
+    Page page = new Page();
+    page.setTitle("testSaveProperties3");
+    page.setName("testSaveProperties3");
+    page.setContent("test");
+    page.setProperties(draftPage.getProperties());
+    Wiki portalWiki = getOrCreateWiki(wService, PortalConfig.PORTAL_TYPE, "testPortal");
+    Page note = noteService.createNote(portalWiki, "Home", page , user);
+    // Case copy from target page
+    draftPage = noteService.createDraftForExistPage(draftPage, note, null, new Date().getTime(), "root");
+    assertNotNull(draftPage);
+    assertNotNull(draftPage.getProperties());
+
+    // Case save from the draft page
+    draftPage.setId("0");
+    notePageProperties.getFeaturedImage().setId(0L);
+    draftPage.setProperties(notePageProperties);
+    draftPage = noteService.createDraftForExistPage(draftPage, note, null, new Date().getTime(), "root");
+    assertNotNull(draftPage);
+    assertNotNull(draftPage.getProperties());
+  }
 }
diff --git a/notes-service/src/test/java/org/exoplatform/wiki/service/rest/NotesRestServiceTest.java b/notes-service/src/test/java/org/exoplatform/wiki/service/rest/NotesRestServiceTest.java
index 5741604b19..02a5566e1e 100644
--- a/notes-service/src/test/java/org/exoplatform/wiki/service/rest/NotesRestServiceTest.java
+++ b/notes-service/src/test/java/org/exoplatform/wiki/service/rest/NotesRestServiceTest.java
@@ -24,7 +24,6 @@
 import static org.mockito.ArgumentMatchers.any;
 import static org.mockito.ArgumentMatchers.anyList;
 import static org.mockito.ArgumentMatchers.anyString;
-import static org.mockito.Mockito.doNothing;
 import static org.mockito.Mockito.doThrow;
 import static org.mockito.Mockito.mock;
 import static org.mockito.Mockito.mockStatic;
@@ -35,7 +34,6 @@
 import java.util.Calendar;
 import java.util.Date;
 import java.util.Deque;
-import java.util.HashMap;
 import java.util.List;
 import java.util.Locale;
 import java.util.ResourceBundle;
@@ -85,8 +83,6 @@
 import org.exoplatform.wiki.utils.Utils;
 
 import io.meeds.notes.model.NoteFeaturedImage;
-import io.meeds.notes.rest.model.FeaturedImageEntity;
-import io.meeds.notes.rest.model.PagePropertiesEntity;
 import jakarta.servlet.http.HttpServletRequest;
 
 @RunWith(MockitoJUnitRunner.Silent.class)
@@ -451,67 +447,11 @@ public void testSearchData() throws Exception {
     Response response = notesRestService.searchData(uriInfo, "test", 10, "wikiType", "wikiOwner", true, new ArrayList<>());
     assertEquals(Response.Status.OK.getStatusCode(), response.getStatus());
   }
-  
-  @Test
-  public void saveNoteMetadata() throws Exception {
-    PagePropertiesEntity pagePropertiesEntity = new PagePropertiesEntity();
-    pagePropertiesEntity.setNoteId(1L);
-    pagePropertiesEntity.setSummary("summary");
-    pagePropertiesEntity.setFeaturedImage(new FeaturedImageEntity());
-    Response response = notesRestService.saveNoteMetadata(null, null);
-    assertEquals(Response.Status.BAD_REQUEST.getStatusCode(), response.getStatus());
-
-    REST_UTILS.when(RestUtils::getCurrentUserIdentityId).thenReturn(1L);
-    when(noteService.saveNoteMetadata(io.meeds.notes.rest.utils.EntityBuilder.toNotePageProperties(pagePropertiesEntity),
-                                      null,
-                                      1L)).thenReturn(new HashMap<>());
-    response = notesRestService.saveNoteMetadata(pagePropertiesEntity, null);
-    assertEquals(Response.Status.OK.getStatusCode(), response.getStatus());
-
-    when(noteService.saveNoteMetadata(io.meeds.notes.rest.utils.EntityBuilder.toNotePageProperties(pagePropertiesEntity),
-                                      null,
-                                      1L)).thenThrow(new ObjectNotFoundException("note not found"));
-    response = notesRestService.saveNoteMetadata(pagePropertiesEntity, null);
-    assertEquals(Response.Status.NOT_FOUND.getStatusCode(), response.getStatus());
-
-    reset(noteService);
-
-    when(noteService.saveNoteMetadata(io.meeds.notes.rest.utils.EntityBuilder.toNotePageProperties(pagePropertiesEntity),
-                                      null,
-                                      1L)).thenThrow(new RuntimeException());
-    response = notesRestService.saveNoteMetadata(pagePropertiesEntity, null);
-    assertEquals(Response.Status.INTERNAL_SERVER_ERROR.getStatusCode(), response.getStatus());
-  }
-
-  @Test
-  public void removeNoteFeaturedImage() throws Exception {
-    Response response = notesRestService.removeNoteFeaturedImage(null, false,null);
-    assertEquals(Response.Status.BAD_REQUEST.getStatusCode(), response.getStatus());
-    REST_UTILS.when(RestUtils::getCurrentUserIdentityId).thenReturn(1L);
-
-    NoteFeaturedImage noteFeaturedImage = new NoteFeaturedImage();
-    noteFeaturedImage.setId(123L);
-    when(noteService.getNoteFeaturedImageInfo(1L, null, false,1L)).thenReturn(noteFeaturedImage);
-
-    doNothing().when(noteService).removeNoteFeaturedImage(1L, 123L, null, false, 1L);
-    response = notesRestService.removeNoteFeaturedImage(1L, false, null);
-    assertEquals(Response.Status.OK.getStatusCode(), response.getStatus());
-
-    doThrow(new ObjectNotFoundException("note not found")).when(noteService).removeNoteFeaturedImage(1L, 123L, null, false, 1L);
-    response = notesRestService.removeNoteFeaturedImage(1L, false, null);
-    assertEquals(Response.Status.NOT_FOUND.getStatusCode(), response.getStatus());
-
-    reset(noteService);
-    when(noteService.getNoteFeaturedImageInfo(1L, null, false, 1L)).thenReturn(noteFeaturedImage);
-    doThrow(new RuntimeException()).when(noteService).removeNoteFeaturedImage(1L, 123L, null, false, 1L);
-    response = notesRestService.removeNoteFeaturedImage(1L, false, null);
-    assertEquals(Response.Status.INTERNAL_SERVER_ERROR.getStatusCode(), response.getStatus());
-  }
 
   @Test
   public void getFeaturedImageIllustration() throws Exception {
     Request request = mock(Request.class);
-    Response response = notesRestService.getFeaturedImageIllustration(request, null, false, null, 0L);
+    Response response = notesRestService.getFeaturedImageIllustration(request, null, false, null, null,0L);
     assertEquals(Response.Status.BAD_REQUEST.getStatusCode(), response.getStatus());
     REST_UTILS.when(RestUtils::getCurrentUserIdentityId).thenReturn(1L);
 
@@ -519,17 +459,17 @@ public void getFeaturedImageIllustration() throws Exception {
     noteFeaturedImage.setId(123L);
     noteFeaturedImage.setLastUpdated(new Date().getTime());
     noteFeaturedImage.setMimeType("image/png");
-    when(noteService.getNoteFeaturedImageInfo(1L, null, false, 1L)).thenReturn(noteFeaturedImage);
-    response = notesRestService.getFeaturedImageIllustration(request, 1L, false, null, 12359547L);
+    when(noteService.getNoteFeaturedImageInfo(1L, null, false, "150x150", 1L)).thenReturn(noteFeaturedImage);
+    response = notesRestService.getFeaturedImageIllustration(request, 1L, false, null, "150x150", 12359547L);
     assertEquals(Response.Status.OK.getStatusCode(), response.getStatus());
 
-    when(noteService.getNoteFeaturedImageInfo(1L, null, false, 1L)).thenThrow(new ObjectNotFoundException("note not found"));
-    response = notesRestService.getFeaturedImageIllustration(request, 1L, false, null, 12359547L);
+    when(noteService.getNoteFeaturedImageInfo(1L, null, false, "150x150", 1L)).thenThrow(new ObjectNotFoundException("note not found"));
+    response = notesRestService.getFeaturedImageIllustration(request, 1L, false, null, "150x150", 12359547L);
     assertEquals(Response.Status.NOT_FOUND.getStatusCode(), response.getStatus());
 
     reset(noteService);
-    when(noteService.getNoteFeaturedImageInfo(1L, null, false, 1L)).thenThrow(new RuntimeException());
-    response = notesRestService.getFeaturedImageIllustration(request, 1L, false, null, 12359547L);
+    when(noteService.getNoteFeaturedImageInfo(1L, null, false, "150x150", 1L)).thenThrow(new RuntimeException());
+    response = notesRestService.getFeaturedImageIllustration(request, 1L, false, null, "150x150", 12359547L);
     assertEquals(Response.Status.INTERNAL_SERVER_ERROR.getStatusCode(), response.getStatus());
   }
 }
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 5823897ea6..f29a4f969e 100644
--- a/notes-webapp/src/main/webapp/WEB-INF/gatein-resources.xml
+++ b/notes-webapp/src/main/webapp/WEB-INF/gatein-resources.xml
@@ -104,6 +104,9 @@
     <depends>
       <module>eXoVueI18n</module>
     </depends>
+    <depends>
+      <module>imageCropper</module>
+    </depends>
     <depends>
       <module>jquery</module>
       <as>$</as>
diff --git a/notes-webapp/src/main/webapp/skin/less/notes/notes.less b/notes-webapp/src/main/webapp/skin/less/notes/notes.less
index ce26005bb1..374fc6436c 100644
--- a/notes-webapp/src/main/webapp/skin/less/notes/notes.less
+++ b/notes-webapp/src/main/webapp/skin/less/notes/notes.less
@@ -215,10 +215,6 @@
 
 #editorMetadataDrawer {
 
-  .xlarge-font-size {
-    font-size: @fontSizeLarge
-  }
-
   .add-image-area {
     background-color: @primaryBackground !important;
   }
@@ -229,10 +225,6 @@
     background: transparent;
   }
 
-  .featured-image-controls {
-    margin-top: -42px !important;
-  }
-
   .feature-image-trash-icon {
     width: 18px;
     height: 21px;
@@ -245,7 +237,9 @@
 
   .feature-image-button {
     background: @greyColorLighten1Default;
-    opacity: 0.75;
+    background: rgba(0, 0, 0, 0.25);
+    border: 1px solid @whiteColorDefault;
+    color: @whiteColorDefault
   }
 
   .summary-metadata-input {
@@ -260,6 +254,7 @@
         margin: 0;
 
         textarea {
+          overflow: auto;
           border: 0;
           margin: 0 auto;
           padding: 12px;
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
index c3eacc69bb..e14fc42bd2 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
@@ -81,12 +81,14 @@ export default {
         title: '',
         content: '',
         parentPageId: '',
+        properties: {}
       },
       actualNote: {
         id: '',
         title: '',
         content: '',
         parentPageId: '',
+        properties: {}
       },
       alert: false,
       alertType: '',
@@ -124,18 +126,23 @@ export default {
       instanceReady: false,
       initialized: false,
       editorIcon: 'fas fa-clipboard',
-      saveButtonIcon: 'fas fa-save'
+      saveButtonIcon: 'fas fa-save',
+      translationSwitch: false,
     };
   },
   computed: {
     saveOrUpdateDisabled() {
-      return !this.note?.title || this.note?.title?.length < 3
-                               || this.note?.title?.length > this.titleMaxLength
-                               || this.noteNotModified && !this.draftNote;
+      return (!this.note?.title || this.note?.title?.length < 3
+                                || this.note?.title?.length > this.titleMaxLength)
+                                || (this.noteNotModified
+                                && !this.propertiesModified && !this.draftNote);
     },
     noteNotModified() {
       return this.note?.title === this.originalNote?.title && this.note?.content === this.originalNote?.content;
     },
+    propertiesModified() {
+      return JSON.stringify(this.note?.properties) !== JSON.stringify(this.originalNote?.properties);
+    },
     langButtonTooltipText() {
       if (this.noteId) {
         return this.$t('notes.label.button.translations.options');
@@ -161,7 +168,7 @@ export default {
   },
   watch: {
     'note.title'() {
-      if (this.note.title && this.note.title !== this.actualNote.title ) {
+      if (this.note?.title !== this.actualNote.title ) {
         this.autoSave();
       }
     },
@@ -265,8 +272,10 @@ export default {
       }
     },
     updateNoteData(noteObject) {
+      this.translationSwitch = this.note?.lang !== noteObject?.lang;
       this.note.title = noteObject.title;
       this.note.content = noteObject.content;
+      this.note.properties = noteObject.properties;
     },
     postNote(toPublish) {
       this.postingNote = true;
@@ -282,12 +291,14 @@ export default {
         parentPageId: this.note?.draftPage && this.note?.targetPageId === this.parentPageId ? null : this.parentPageId,
         toBePublished: toPublish,
         appName: this.appName,
+        properties: this.note?.properties
       };
       if (note.id) {
         this.updateNote(note);
       } else {
         this.createNote(note);
       }
+      this.draftNote = null;
     },
     addParamToUrl(paramName, paramValue) {
       const url = new URL(window.location.href);
@@ -336,6 +347,9 @@ export default {
       }).finally(() => this.enableClickOnce());
     },
     autoSave() {
+      if (this.translationSwitch) {
+        return;
+      }
       // No draft saving if init not done or in edit mode for the moment
       if (!this.initCompleted || !this.initActualNoteDone) {
         return;
@@ -346,7 +360,8 @@ export default {
       }
 
       // if the Note is not updated, no need to autosave anymore
-      if ((this.note?.title === this.actualNote.title) && (this.note?.content === this.actualNote.content)) {
+      if ((this.note?.title === this.actualNote.title) && (this.note?.content === this.actualNote.content)
+          && (JSON.stringify(this.note?.properties) === JSON.stringify(this.actualNote?.properties))) {
         return;
       }
 
@@ -431,6 +446,7 @@ export default {
           owner: this.note.owner,
           breadcrumb: this.note.breadcrumb,
           toBePublished: this.note.toBePublished,
+          properties: this.note?.properties
         };
         const childContainer = '<div id="note-children-container" class="navigation-img-wrapper" contenteditable="false"><figure class="image-navigation" contenteditable="false">'
         +'<img src="/notes/images/children.png" role="presentation"/><img src="/notes/images/trash.png" id="remove-treeview" alt="remove treeview"/>'
@@ -464,6 +480,7 @@ export default {
         wikiType: this.note.wikiType,
         wikiOwner: this.note.wikiOwner,
         parentPageId: this.parentPageId,
+        properties: this.note?.properties
       };
       if (this.note.draftPage && this.note.id) {
         draftNote.targetPageId = this.note.targetPageId;
@@ -492,6 +509,7 @@ export default {
             name: draftNote.name,
             title: draftNote.title,
             content: draftNote.content,
+            properties: draftNote.properties
           };
           setTimeout(() => {
             this.draftSavingStatus = this.$t('notes.draft.savedDraftStatus');
@@ -511,7 +529,11 @@ export default {
       draftNote.lang = this.selectedLanguage;
       if (this.note.title || this.note.content) {
         if (this.newDraft){
-          draftNote.id=null;
+          draftNote.id = null;
+        }
+        if (draftNote.properties) {
+          draftNote.properties.draft = true;
+          draftNote.properties.noteId = this.note?.targetPageId || this.note?.id;
         }
         this.$notesService.saveDraftNote(draftNote, this.parentPageId).then(savedDraftNote => {
           if (update){
@@ -522,6 +544,7 @@ export default {
               content: savedDraftNote.content,
               author: savedDraftNote.author,
               owner: savedDraftNote.owner,
+              properties: savedDraftNote.properties
             };
             this.newDraft=false;
             savedDraftNote.parentPageId = this.parentPageId;
@@ -708,6 +731,7 @@ export default {
       const originNoteContent = {
         title: this.note.title,
         content: this.note.content,
+        properties: structuredClone(this.note?.properties),
         lang: lang?.value
       };
       this.languages = this.languages.filter(item => item.value !== lang?.value);
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorFeaturedImageDrawer.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorFeaturedImageDrawer.vue
index dfb0ff8d84..b77daf75f3 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorFeaturedImageDrawer.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorFeaturedImageDrawer.vue
@@ -51,7 +51,7 @@ export default {
   },
   props: {
     note: {
-      type: Number,
+      type: Object,
       default: null
     },
     hasFeaturedImage: {
@@ -62,7 +62,7 @@ export default {
   watch: {
     imageData() {
       if (this.imageData?.length) {
-        this.$root.$emit('image-data', this.imageData, this.mimeType);
+        this.$root.$emit('image-data', this.imageData, this.getMimeType(this.imageData));
       }
     },
     uploadId() {
@@ -78,22 +78,18 @@ export default {
     }
   },
   computed: {
-    lang() {
-      return this.note?.lang || '';
+    langParam() {
+      return this.note?.lang && `&lang=${this.note.lang}` || '';
     },
     isDraft() {
       return this.note?.draftPage;
     },
     noteFeatureImageUpdatedDate() {
-      return this.note?.properties?.featuredImageUpdatedDate;
+      return this.note?.properties.featuredImage?.lastUpdated;
     },
     featuredImageLink() {
-      const langParam = this.lang && `&lang=${this.lang}` || '';
       return this.imageData || this.hasFeaturedImageValue
-                            && `${this.illustrationBaseUrl}${this.note?.id}?v=${this.noteFeatureImageUpdatedDate}&isDraft=${this.isDraft}${langParam}` || '';
-    },
-    mimeType() {
-      return this.getMimeType(this.imageData);
+                            && `${this.illustrationBaseUrl}${this.note?.id}?v=${this.noteFeatureImageUpdatedDate}&isDraft=${this.isDraft}${this.langParam}` || '';
     }
   },
   created() {
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue
index 06dc0cbf9c..08981aff44 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue
@@ -32,7 +32,7 @@
       right
       @closed="resetProperties">
       <template slot="title">
-        <div class="d-flex my-auto font-weight-bold text-color">
+        <div class="d-flex my-auto text-header font-weight-bold text-color">
           {{ $t('notes.metadata.properties.label') }}
         </div>
       </template>
@@ -40,7 +40,7 @@
         <div class="pa-5">
           <v-form>
             <label for="image-area">
-              <p class="text-color xlarge-font-size mb-3">
+              <p class="text-color text-body mb-3">
                 {{ $t('notes.metadata.featuredImage.label') }}
               </p>
               <v-btn
@@ -64,52 +64,54 @@
               </v-btn>
               <v-sheet
                 v-else
-                height="48">
+                min-width="48">
                 <v-hover v-slot="{ hover }">
-                  <div>
+                  <div class="d-flex">
                     <v-img
-                      height="48"
+                      width="100%"
+                      min-height="48"
+                      aspect-ratio="8"
                       :lazy-src="featuredImageLink"
                       :alt="savedFeaturedImageAltText"
-                      :src="featuredImageLink" />
-                    <div
-                      v-if="hover && canShowFeaturedImagePreview"
-                      class="width-fit-content ms-auto featured-image-controls me-2">
-                      <v-btn
-                        :loading="isRemovingFeaturedImage"
-                        class="feature-image-button me-1"
-                        icon
-                        @click.stop="removeNoteFeaturedImage">
-                        <v-icon
-                          class="feature-image-trash-icon white--text"
-                          size="20">
-                          fa-solid fa-trash
-                        </v-icon>
-                      </v-btn>
-                      <v-btn
-                        class="feature-image-button"
-                        icon
-                        @click="openFeaturedImageDrawer">
-                        <v-icon
-                          class="feature-image-file-icon white--text"
-                          size="20">
-                          fa-regular fa-file-image
-                        </v-icon>
-                      </v-btn>
-                    </div>
+                      :src="featuredImageLink">
+                      <div
+                        v-if="hover && canShowFeaturedImagePreview"
+                        class="width-fit-content full-height ms-auto d-flex me-2">
+                        <v-btn
+                          class="feature-image-button me-1 my-auto"
+                          icon
+                          @click.stop="removeNoteFeaturedImage">
+                          <v-icon
+                            class="feature-image-trash-icon"
+                            size="20">
+                            fa-solid fa-trash
+                          </v-icon>
+                        </v-btn>
+                        <v-btn
+                          class="feature-image-button my-auto"
+                          icon
+                          @click="openFeaturedImageDrawer">
+                          <v-icon
+                            class="feature-image-file-icon"
+                            size="20">
+                            fa-regular fa-file-image
+                          </v-icon>
+                        </v-btn>
+                      </div>
+                    </v-img>
                   </div>
                 </v-hover>
               </v-sheet>
             </label>
             <label for="summaryInputEditor">
               <div class="mt-5">
-                <p class="text-color xlarge-font-size mb-3">
+                <p class="text-color text-body mb-3">
                   {{ $t('notes.metadata.summary.label') }}
                 </p>
                 <v-textarea
                   v-model="summaryContent"
                   name="summaryInputEditor"
-                  class="summary-metadata-input pt-0"
+                  class="summary-metadata-input pt-0 overflow-auto"
                   :placeholder="$t('notes.metadata.add.summary.placeholder')"
                   rows="17"
                   row-height="8"
@@ -129,8 +131,7 @@
             {{ $t('notes.button.cancel') }}
           </v-btn>
           <v-btn
-            :disabled="saveDisabled"
-            :loading="isSaving"
+            :disabled="saveDisabled && !enableSave"
             class="btn btn-primary"
             @click="save">
             {{ $t('notes.button.publish') }}
@@ -157,8 +158,8 @@ export default {
       featureImageUpdated: false,
       illustrationBaseUrl: `${eXo.env.portal.context}/${eXo.env.portal.rest}/notes/illustration/`,
       currentNoteProperties: {},
-      isSaving: false,
-      isRemovingFeaturedImage: false
+      removeFeaturedImage: false,
+      enableSave: false
     };
   },
   props: {
@@ -174,7 +175,7 @@ export default {
   },
   computed: {
     savedFeaturedImageAltText() {
-      return this.noteObject?.properties?.featuredImageAltText;
+      return this.noteObject?.properties.featuredImage?.featuredImageAltText;
     },
     saveDisabled() {
       return !this.propertiesChanged && !this.imageData;
@@ -188,22 +189,24 @@ export default {
     notedId() {
       return this.noteObject?.id;
     },
-    lang() {
-      return this.noteObject?.lang || '';
+    langParam() {
+      return this.noteObject?.lang && `&lang=${this.noteObject?.lang}` || '';
     },
     isDraft() {
       return this.noteObject?.draftPage;
     },
     noteFeatureImageUpdatedDate() {
-      return this.noteObject?.properties?.featuredImageUpdatedDate || 0;
+      return this.noteObject?.properties?.featuredImage?.lastUpdated || 0;
     },
     featuredImageLink() {
-      const langParam = this.lang && `&lang=${this.lang}` || '';
       return this.imageData || this.hasFeaturedImageValue
-                            && `${this.illustrationBaseUrl}${this.notedId}?v=${this.noteFeatureImageUpdatedDate}&isDraft=${this.isDraft}${langParam}` || '';
-    },
+                            && `${this.illustrationBaseUrl}${this.notedId}?v=${this.noteFeatureImageUpdatedDate}&isDraft=${this.isDraft}${this.langParam}` || '';
+    }
   },
   watch: {
+    'noteObject.lang': function () {
+      this.imageData = null;
+    },
     hasFeaturedImage() {
       this.hasFeaturedImageValue = this.hasFeaturedImage;
     },
@@ -222,7 +225,6 @@ export default {
   },
   methods: {
     resetProperties() {
-      this.noteObject.properties = this.currentNoteProperties;
       this.featureImageUpdated = false;
     },
     imageDataUpdated(data, mimeType) {
@@ -242,73 +244,35 @@ export default {
       this.noteObject = note;
       this.currentNoteProperties = structuredClone(this.noteObject?.properties || {});
       this.summaryContent = this.currentNoteProperties?.summary || '';
+      this.removeFeaturedImage = false;
       this.$refs.metadataDrawer.open();
     },
     close() {
       this.$refs.metadataDrawer.close();
     },
-    displayMessage(message) {
-      document.dispatchEvent(new CustomEvent('alert-message', {
-        detail: {
-          alertType: message.type,
-          alertMessage: message.text
-        }
-      }));
-    },
     save() {
       const properties = {
         noteId: this.isDraft && this.noteObject?.targetPageId
-                             || this.noteObject?.id,
+            || this.noteObject?.id,
         summary: this.summaryContent,
         featuredImage: {
           uploadId: this.uploadId,
           base64Data: this.imageData,
           mimeType: this.mimeType,
-          altText: this.featuredImageAltText
+          altText: this.featuredImageAltText,
+          toDelete: this.removeFeaturedImage
         },
-        draft: this.isDraft
+        draft: this.isDraft || !this.notedId
       };
-      this.isSaving = true;
-      return this.$notesService.saveNoteMetadata(properties, this.lang).then((properties) => {
-        this.hasFeaturedImageValue = !!properties?.featuredImageId;
-        this.noteObject.properties = properties;
-        this.currentNoteProperties = structuredClone(properties);
-        this.$emit('metadata-updated');
-        this.displayMessage({
-          type: 'success',
-          text: this.$t('notes.metadata.saved.success.message')
-        });
-      }).catch(() => {
-        this.displayMessage({
-          type: 'error',
-          text: this.$t('notes.metadata.saved.error.message')
-        });
-      }).finally(() => {
-        this.isSaving = false;
-        this.close();
-      });
+      this.$emit('metadata-updated', properties);
+      this.close();
     },
     removeNoteFeaturedImage() {
-      if (!this.hasFeaturedImage) {
-        this.imageData = null;
-        this.hasFeaturedImageValue = false;
-        return;
-      }
-      this.isRemovingFeaturedImage = true;
-      return this.$notesService.removeNoteFeaturedImage(this.notedId, this.noteObject?.draftPage, this.lang).then(() => {
-        this.hasFeaturedImageValue = false;
-        this.imageData = null;
-        this.$root.$emit('reset-featured-image-data');
-        this.displayMessage({
-          type: 'success',
-          text: this.$t('notes.featuredImage.remove.success.message')
-        });
-      }).catch(() => {
-        this.displayMessage({
-          type: 'error',
-          text: this.$t('notes.featuredImage.remove.error.message')
-        });
-      }).finally(() => this.isRemovingFeaturedImage = false);
+      this.hasFeaturedImageValue = false;
+      this.imageData = null;
+      this.removeFeaturedImage = true;
+      this.enableSave = true;
+      this.$root.$emit('reset-featured-image-data');
     }
   }
 };
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue
index 897e20548a..05084698d4 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue
@@ -60,9 +60,9 @@
             width="36"
             min-width="36"
             height="36"
-            class="pa-0 my-auto"
-            text
-            :disabled="!noteIdParam || !editorReady"
+            class="pa-0 my-auto "
+            icon
+            :disabled="!editorReady"
             @click="openMetadataDrawer">
             <v-icon
               size="20"
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 7237015cc0..4b7012cb65 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
@@ -71,12 +71,13 @@
       ref="noteCustomPlugins"
       :instance="editor" />
     <note-editor-metadata-drawer
+      ref="editorMetadataDrawer"
       :has-featured-image="hasFeaturedImage"
-      ref="editorMetadataDrawer" />
+      @metadata-updated="metadataUpdated" />
     <note-editor-featured-image-drawer
+      ref="featuredImageDrawer"
       :note="noteObject"
-      :has-featured-image="hasFeaturedImage"
-      ref="featuredImageDrawer" />
+      :has-featured-image="hasFeaturedImage" />
   </div>
 </template>
 
@@ -197,15 +198,17 @@ export default {
       this.updateData();
     },
     'noteObject.content': function () {
-      this.updateData();
+      if (this.initialized) {
+        this.updateData();
+      }
     },
     'note.id': function () {
       this.cloneNoteObject();
     },
-    'note.properties': function () {
+    'note.lang': function() {
       this.cloneNoteObject();
     },
-    'note.title': function () {
+    'note.title': function() {
       this.noteObject.title = this.note?.title;
     },
     instanceReady() {
@@ -216,10 +219,10 @@ export default {
   },
   computed: {
     featuredImageId() {
-      return this.noteObject?.properties?.featuredImageId;
+      return this.noteObject?.properties?.featuredImage?.id;
     },
     hasFeaturedImage() {
-      return !!this.featuredImageId && this.featuredImageId !== 'null';
+      return !!this.featuredImageId;
     }
   },
   created() {
@@ -227,17 +230,28 @@ export default {
     this.$root.$on('include-page', this.includePage);
     this.$root.$on('update-note-title', this.updateTranslatedNoteTitle);
     this.$root.$on('update-note-content', this.updateTranslatedNoteContent);
+    this.$root.$on('update-note-summary', this.updateTranslatedNoteSummary);
     this.$root.$on('close-featured-image-byOverlay', this.closeFeaturedImageDrawerByOverlay);
 
     document.addEventListener('note-custom-plugins', this.openCustomPluginsDrawer);
   },
   methods: {
+    metadataUpdated(properties) {
+      this.noteObject.properties = properties;
+      this.updateData();
+      if (this.noteObject?.title?.length) {
+        this.autoSave();
+      }
+    },
     editorClosed(){
       this.$emit('editor-closed');
     },
     updateTranslatedNoteTitle(title) {
       this.noteObject.title = title;
     },
+    updateTranslatedNoteSummary(summary) {
+      this.noteObject.properties.summary = summary;
+    },
     updateTranslatedNoteContent(content) {
       this.noteObject.content = content;
       this.setEditorData(content);
@@ -271,8 +285,10 @@ export default {
       this.noteObject = structuredClone(this.note);
     },
     updateData() {
-      this.$emit('update-data', this.noteObject);
-      this.hideTranslationsBar();
+      if (this.instanceReady) {
+        this.$emit('update-data', this.noteObject);
+        this.hideTranslationsBar();
+      }
     },
     autoSave() {
       this.$emit('auto-save', this.noteObject);
@@ -315,6 +331,9 @@ export default {
     },
     resetEditorData() {
       this.noteObject.title = null;
+      if (this.noteObject?.properties) {
+        this.noteObject.properties.summary = '';
+      }
       this.editor.setData('');
     },
     initCKEditor: function() {

From 2d3caddefafe906fc4f6b94697e91c218ed24112 Mon Sep 17 00:00:00 2001
From: Helmi Akermi <70575401+hakermi@users.noreply.github.com>
Date: Mon, 29 Jul 2024 20:23:05 +0100
Subject: [PATCH 17/40] feat: Disable the use of the image cropping drawer for
 featured image property - EXO-73471 - Meeds-io/MIPs#128 (#1052)

Disable the use of the image cropping drawer for featured image property
---
 .../wiki/service/impl/NoteServiceImpl.java    |  6 +++
 .../portlet/notes/notesPortlet_en.properties  |  1 +
 .../components/NoteEditorMetadataDrawer.vue   | 48 +++++++++++++++++--
 .../components/NoteFullRichEditor.vue         |  5 +-
 4 files changed, 53 insertions(+), 7 deletions(-)

diff --git a/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java b/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java
index 7c81dda47a..d313994ee5 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java
@@ -327,6 +327,12 @@ public Page updateNote(Page note, PageUpdateType type, Identity userIdentity) th
                                    NOTE_METADATA_PAGE_OBJECT_TYPE,
                                    userIdentity.getUserId(),
                                    true);
+      NotePageProperties notePageProperties = draftPage.getProperties();
+      if (notePageProperties != null) {
+        notePageProperties.setNoteId(Long.parseLong(updatedPage.getId()));
+        notePageProperties.setDraft(false);
+        updatedPage.setProperties(notePageProperties);
+      }
     }
 
     invalidateCache(note);
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 6a7ab4040e..5064993bfe 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
@@ -61,6 +61,7 @@ notes.metadata.saved.success.message=Note properties saved successfully
 notes.metadata.saved.success.error=Error while saving note properties
 notes.featuredImage.remove.error.message=Error while removing featured image
 notes.featuredImage.remove.success.message=Featured image removed successfully
+notes.featuredImage.size.error.message=Featured image size should be less or equals to 20MB
 
 popup.confirm=Confirm
 popup.msg.confirmation=Confirmation
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue
index 08981aff44..c1b8fa3f79 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue
@@ -43,6 +43,12 @@
               <p class="text-color text-body mb-3">
                 {{ $t('notes.metadata.featuredImage.label') }}
               </p>
+              <v-file-input
+                id="featuredImageInput"
+                ref="featuredImageInput"
+                accept="image/*"
+                class="position-absolute hidden"
+                @change="handleUpload" />
               <v-btn
                 v-if="!canShowFeaturedImagePreview"
                 name="image-area"
@@ -50,7 +56,7 @@
                 height="95"
                 width="100%"
                 text
-                @click="openFeaturedImageDrawer">
+                @click="uploadFeaturedImage">
                 <div class="d-flex width-fit-content mx-auto">
                   <v-icon
                     class="me-15 icon-default-color"
@@ -90,7 +96,7 @@
                         <v-btn
                           class="feature-image-button my-auto"
                           icon
-                          @click="openFeaturedImageDrawer">
+                          @click="uploadFeaturedImage">
                           <v-icon
                             class="feature-image-file-icon"
                             size="20">
@@ -147,6 +153,7 @@
 export default {
   data() {
     return {
+      maxFileSize: 20 * 1024 * 1024,
       noteObject: null,
       drawer: false,
       summaryContent: null,
@@ -224,6 +231,40 @@ export default {
     }
   },
   methods: {
+    displayMessage(message) {
+      document.dispatchEvent(new CustomEvent('alert-message', {
+        detail: {
+          alertType: message.type,
+          alertMessage: message.text
+        }
+      }));
+    },
+    uploadFeaturedImage() {
+      document.getElementById('featuredImageInput').click();
+    },
+    handleUpload(image) {
+      if (!image) {
+        return;
+      }
+      if (image.size > this.maxFileSize) {
+        this.displayMessage({
+          type: 'error',
+          text: this.$t('notes.featuredImage.size.error.message')
+        });
+        return;
+      }
+      const reader = new FileReader();
+      reader.onload = e => {
+        this.imageData = e.target.result
+                        && e.target.result.length > 23
+                        && e.target.result || null;
+        this.mimeType = image.type;
+      };
+      reader.readAsDataURL(image);
+      this.$uploadService.upload(image).then(uploadId => {
+        this.uploadId = uploadId;
+      });
+    },
     resetProperties() {
       this.featureImageUpdated = false;
     },
@@ -268,9 +309,10 @@ export default {
       this.close();
     },
     removeNoteFeaturedImage() {
+      this.featuredImage = null;
+      this.removeFeaturedImage = true;
       this.hasFeaturedImageValue = false;
       this.imageData = null;
-      this.removeFeaturedImage = true;
       this.enableSave = true;
       this.$root.$emit('reset-featured-image-data');
     }
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 4b7012cb65..31a0d02de2 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
@@ -218,11 +218,8 @@ export default {
     }
   },
   computed: {
-    featuredImageId() {
-      return this.noteObject?.properties?.featuredImage?.id;
-    },
     hasFeaturedImage() {
-      return !!this.featuredImageId;
+      return !!this.noteObject?.properties?.featuredImage?.id;
     }
   },
   created() {

From 67d32677d363988a11d6cdb1ac66c4747427da71 Mon Sep 17 00:00:00 2001
From: Helmi Akermi <70575401+hakermi@users.noreply.github.com>
Date: Tue, 30 Jul 2024 20:58:10 +0100
Subject: [PATCH 18/40] feat: Improve the preview of the featured image -
 EXO-73558 - Meeds-io/MIPs#128 (#1054)

Improve the preview of the featured image
---
 .../components/NoteEditorMetadataDrawer.vue                  | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue
index c1b8fa3f79..14e59a7078 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue
@@ -70,13 +70,14 @@
               </v-btn>
               <v-sheet
                 v-else
+                max-height="380"
                 min-width="48">
                 <v-hover v-slot="{ hover }">
-                  <div class="d-flex">
+                  <div class="d-flex full-height">
                     <v-img
                       width="100%"
                       min-height="48"
-                      aspect-ratio="8"
+                      max-height="380"
                       :lazy-src="featuredImageLink"
                       :alt="savedFeaturedImageAltText"
                       :src="featuredImageLink">

From 7d4b8b3802145c6f80c3a173bfd11554709af4f3 Mon Sep 17 00:00:00 2001
From: Sofien Haj Chedhli <shajchedli@exoplatform.com>
Date: Wed, 31 Jul 2024 15:50:58 +0100
Subject: [PATCH 19/40] feat: Implement mentions in note user notification -
 EXO-73071 - Meeds-io/MIPs#128  (#1056)

---
 .../MentionInNoteNotificationPlugin.java      | 113 ++++++++++++
 .../provider/MailTemplateProvider.java        | 168 ++++++++++++++++++
 .../provider/PushTemplateProvider.java        |  89 ++++++++++
 .../wiki/service/impl/NoteServiceImpl.java    |  17 ++
 .../org/exoplatform/wiki/utils/Utils.java     |  82 +++++++++
 .../MentionInNoteNotificationPluginTest.java  | 152 ++++++++++++++++
 .../provider/MailTemplateProviderTest.java    |  95 ++++++++++
 .../portlet/notes/notesPortlet_en.properties  |  15 ++
 .../webapp/WEB-INF/conf/configuration.xml     |   1 +
 .../conf/wiki/notification-configuration.xml  | 106 +++++++++++
 .../main/webapp/WEB-INF/gatein-resources.xml  |  22 ++-
 .../MentionInNoteNotificationPlugin.gtmpl     | 128 +++++++++++++
 .../MentionInNoteNotificationPlugin.gtmpl     |  21 +++
 .../MentionInNoteNotificationPlugin.vue       |  39 ++++
 .../notification-extensions/extensions.js     |  32 ++++
 .../notification-extensions/initComponents.js |  29 +++
 .../vue-app/notification-extensions/main.js   |  33 ++++
 notes-webapp/webpack.prod.js                  |   3 +-
 18 files changed, 1143 insertions(+), 2 deletions(-)
 create mode 100644 notes-service/src/main/java/io/meeds/notes/notifications/plugin/MentionInNoteNotificationPlugin.java
 create mode 100644 notes-service/src/main/java/io/meeds/notes/notifications/provider/MailTemplateProvider.java
 create mode 100644 notes-service/src/main/java/io/meeds/notes/notifications/provider/PushTemplateProvider.java
 create mode 100644 notes-service/src/test/java/io/meeds/notes/notification/plugin/MentionInNoteNotificationPluginTest.java
 create mode 100644 notes-service/src/test/java/io/meeds/notes/notification/provider/MailTemplateProviderTest.java
 create mode 100644 notes-webapp/src/main/webapp/WEB-INF/conf/wiki/notification-configuration.xml
 create mode 100644 notes-webapp/src/main/webapp/WEB-INF/notification/templates/mail/MentionInNoteNotificationPlugin.gtmpl
 create mode 100644 notes-webapp/src/main/webapp/WEB-INF/notification/templates/push/MentionInNoteNotificationPlugin.gtmpl
 create mode 100644 notes-webapp/src/main/webapp/vue-app/notification-extensions/components/MentionInNoteNotificationPlugin.vue
 create mode 100644 notes-webapp/src/main/webapp/vue-app/notification-extensions/extensions.js
 create mode 100644 notes-webapp/src/main/webapp/vue-app/notification-extensions/initComponents.js
 create mode 100644 notes-webapp/src/main/webapp/vue-app/notification-extensions/main.js

diff --git a/notes-service/src/main/java/io/meeds/notes/notifications/plugin/MentionInNoteNotificationPlugin.java b/notes-service/src/main/java/io/meeds/notes/notifications/plugin/MentionInNoteNotificationPlugin.java
new file mode 100644
index 0000000000..9a39f4c839
--- /dev/null
+++ b/notes-service/src/main/java/io/meeds/notes/notifications/plugin/MentionInNoteNotificationPlugin.java
@@ -0,0 +1,113 @@
+/*
+ * 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.
+ */
+package io.meeds.notes.notifications.plugin;
+
+import org.exoplatform.commons.api.notification.NotificationContext;
+import org.exoplatform.commons.api.notification.model.ArgumentLiteral;
+import org.exoplatform.commons.api.notification.model.NotificationInfo;
+import org.exoplatform.commons.api.notification.plugin.BaseNotificationPlugin;
+import org.exoplatform.commons.utils.CommonsUtils;
+import org.exoplatform.container.xml.InitParams;
+import org.exoplatform.services.log.ExoLogger;
+import org.exoplatform.services.log.Log;
+import org.exoplatform.services.organization.OrganizationService;
+import org.exoplatform.services.organization.User;
+import org.exoplatform.services.organization.UserHandler;
+import org.exoplatform.social.notification.Utils;
+
+import java.util.ArrayList;
+import java.util.HashSet;
+import java.util.List;
+import java.util.Set;
+import java.util.regex.Pattern;
+
+public class MentionInNoteNotificationPlugin extends BaseNotificationPlugin {
+
+  public final static String                  ID                 = "MentionInNoteNotificationPlugin";
+
+  private static final Log                    LOG                = ExoLogger.getLogger(MentionInNoteNotificationPlugin.class);
+
+  public static final ArgumentLiteral<String> CURRENT_USER       = new ArgumentLiteral<>(String.class, "CURRENT_USER");
+
+  public static final ArgumentLiteral<String> NOTE_AUTHOR        = new ArgumentLiteral<>(String.class, "NOTE_AUTHOR");
+
+  public static final ArgumentLiteral<String> AUTHOR_AVATAR_URL  = new ArgumentLiteral<>(String.class, "AUTHOR_AVATAR_URL");
+
+  public static final ArgumentLiteral<String> AUTHOR_PROFILE_URL = new ArgumentLiteral<>(String.class, "AUTHOR_PROFILE_URL");
+
+  public static final ArgumentLiteral<String> ACTIVITY_LINK      = new ArgumentLiteral<>(String.class, "ACTIVITY_LINK");
+
+  public static final ArgumentLiteral<Set>    MENTIONED_IDS      = new ArgumentLiteral<Set>(Set.class, "MENTIONED_IDS");
+
+  public static final ArgumentLiteral<String> NOTE_TITLE         = new ArgumentLiteral<>(String.class, "NOTE_TITLE");
+
+  public static final ArgumentLiteral<String> SPACE_ID           = new ArgumentLiteral<>(String.class, "SPACE_ID");
+
+  public MentionInNoteNotificationPlugin(InitParams initParams) {
+    super(initParams);
+  }
+
+  @Override
+  public String getId() {
+    return ID;
+  }
+
+  @Override
+  public boolean isValid(NotificationContext ctx) {
+    return true;
+  }
+
+  @Override
+  public NotificationInfo makeNotification(NotificationContext ctx) {
+    String currentUserName = ctx.value(CURRENT_USER);
+    String currentUserFullName = currentUserName;
+    try {
+      currentUserFullName = getUserFullName(currentUserName);
+    } catch (Exception e) {
+      LOG.error("An error occured when trying to retreive a user with username " + currentUserName + " " + e.getMessage(), e);
+    }
+    List<String> mentionedIds = new ArrayList<>(ctx.value(MENTIONED_IDS));
+    String spaceId = ctx.value(SPACE_ID);
+    Set<String> receivers = new HashSet<>();
+    String[] mentionnedIdArray = new String[mentionedIds.size()];
+    Utils.sendToMentioners(receivers, mentionedIds.toArray(mentionnedIdArray), currentUserName, spaceId);
+    return NotificationInfo.instance()
+                           .setFrom(currentUserName)
+                           .to(new ArrayList<>(receivers))
+                           .key(getKey())
+                           .with(NOTE_TITLE.getKey(), ctx.value(NOTE_TITLE))
+                           .with(NOTE_AUTHOR.getKey(), ctx.value(NOTE_AUTHOR))
+                           .with(AUTHOR_AVATAR_URL.getKey(), ctx.value(AUTHOR_AVATAR_URL))
+                           .with(AUTHOR_PROFILE_URL.getKey(), ctx.value(AUTHOR_PROFILE_URL))
+                           .with(ACTIVITY_LINK.getKey(), ctx.value(ACTIVITY_LINK))
+                           .with(MENTIONED_IDS.getKey(), String.valueOf(mentionedIds))
+                           .with(CURRENT_USER.getKey(), currentUserFullName)
+                           .end();
+  }
+
+  private String getUserFullName(String userName) throws Exception {
+    OrganizationService organizationService = CommonsUtils.getService(OrganizationService.class);
+    UserHandler userHandler = organizationService.getUserHandler();
+    User user = userHandler.findUserByName(userName);
+    if (user == null) {
+      throw new Exception("An error occured when trying to retreive a user with username " + userName);
+    }
+    return user.getFullName();
+  }
+}
diff --git a/notes-service/src/main/java/io/meeds/notes/notifications/provider/MailTemplateProvider.java b/notes-service/src/main/java/io/meeds/notes/notifications/provider/MailTemplateProvider.java
new file mode 100644
index 0000000000..53a8bd7335
--- /dev/null
+++ b/notes-service/src/main/java/io/meeds/notes/notifications/provider/MailTemplateProvider.java
@@ -0,0 +1,168 @@
+/*
+ * 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.
+ */
+package io.meeds.notes.notifications.provider;
+
+import java.io.IOException;
+import java.io.Writer;
+import java.util.Calendar;
+import java.util.List;
+import java.util.Locale;
+import java.util.stream.Collectors;
+import java.util.stream.Stream;
+
+import io.meeds.notes.notifications.plugin.MentionInNoteNotificationPlugin;
+import org.exoplatform.commons.utils.CommonsUtils;
+import org.gatein.common.text.EntityEncoder;
+
+import org.exoplatform.commons.api.notification.NotificationContext;
+import org.exoplatform.commons.api.notification.annotation.TemplateConfig;
+import org.exoplatform.commons.api.notification.annotation.TemplateConfigs;
+import org.exoplatform.commons.api.notification.channel.template.AbstractTemplateBuilder;
+import org.exoplatform.commons.api.notification.channel.template.TemplateProvider;
+import org.exoplatform.commons.api.notification.model.MessageInfo;
+import org.exoplatform.commons.api.notification.model.NotificationInfo;
+import org.exoplatform.commons.api.notification.model.PluginKey;
+import org.exoplatform.commons.api.notification.service.template.TemplateContext;
+import org.exoplatform.commons.notification.template.DigestTemplate;
+import org.exoplatform.commons.notification.template.TemplateUtils;
+import org.exoplatform.commons.utils.HTMLEntityEncoder;
+import org.exoplatform.container.xml.InitParams;
+import org.exoplatform.services.log.ExoLogger;
+import org.exoplatform.services.log.Log;
+import org.exoplatform.social.core.identity.model.Identity;
+import org.exoplatform.social.core.identity.model.Profile;
+import org.exoplatform.social.core.identity.provider.OrganizationIdentityProvider;
+import org.exoplatform.social.core.manager.IdentityManager;
+import org.exoplatform.social.notification.LinkProviderUtils;
+import org.exoplatform.webui.utils.TimeConvertUtils;
+
+@TemplateConfigs(templates = {
+    @TemplateConfig(pluginId = MentionInNoteNotificationPlugin.ID, template = "war:/notification/templates/mail/MentionInNoteNotificationPlugin.gtmpl") })
+public class MailTemplateProvider extends TemplateProvider {
+  protected static Log          log = ExoLogger.getLogger(MailTemplateProvider.class);
+
+  private final IdentityManager identityManager;
+
+  public MailTemplateProvider(InitParams initParams, IdentityManager identityManager) {
+    super(initParams);
+    this.templateBuilders.put(PluginKey.key(MentionInNoteNotificationPlugin.ID), new TemplateBuilder());
+    this.identityManager = identityManager;
+  }
+
+  public class TemplateBuilder extends AbstractTemplateBuilder {
+    @Override
+    public MessageInfo makeMessage(NotificationContext ctx) {
+      NotificationInfo notification = ctx.getNotificationInfo();
+      String pluginId = notification.getKey().getId();
+
+      String language = getLanguage(notification);
+      String activityLink = notification.getValueOwnerParameter(MentionInNoteNotificationPlugin.ACTIVITY_LINK.getKey());
+      String authorProfileUrl = notification.getValueOwnerParameter(MentionInNoteNotificationPlugin.AUTHOR_PROFILE_URL.getKey());
+      String currentDomain = CommonsUtils.getCurrentDomain();
+      activityLink = currentDomain + activityLink;
+      authorProfileUrl = currentDomain + authorProfileUrl;
+      TemplateContext templateContext = TemplateContext.newChannelInstance(getChannelKey(), pluginId, language);
+
+      HTMLEntityEncoder encoder = HTMLEntityEncoder.getInstance();
+      templateContext.put(MentionInNoteNotificationPlugin.NOTE_TITLE.getKey(),
+                          encoder.encode(notification.getValueOwnerParameter(MentionInNoteNotificationPlugin.NOTE_TITLE.getKey())));
+      templateContext.put(MentionInNoteNotificationPlugin.NOTE_AUTHOR.getKey(),
+                          encoder.encode(notification.getValueOwnerParameter(MentionInNoteNotificationPlugin.NOTE_AUTHOR.getKey())));
+      templateContext.put(MentionInNoteNotificationPlugin.CURRENT_USER.getKey(),
+                          notification.getValueOwnerParameter(MentionInNoteNotificationPlugin.CURRENT_USER.getKey()));
+      templateContext.put(MentionInNoteNotificationPlugin.AUTHOR_AVATAR_URL.getKey(),
+                          encoder.encode(notification.getValueOwnerParameter(MentionInNoteNotificationPlugin.AUTHOR_AVATAR_URL.getKey())));
+      templateContext.put(MentionInNoteNotificationPlugin.AUTHOR_PROFILE_URL.getKey(),
+                          encoder.encode(authorProfileUrl));
+      templateContext.put(MentionInNoteNotificationPlugin.ACTIVITY_LINK.getKey(),
+                          encoder.encode(activityLink));
+
+      templateContext.put("READ", Boolean.valueOf(notification.isRead()) ? "read" : "unread");
+      templateContext.put("NOTIFICATION_ID", notification.getId());
+      Calendar lastModified = Calendar.getInstance();
+      lastModified.setTimeInMillis(notification.getLastModifiedDate());
+      templateContext.put("LAST_UPDATED_TIME",
+                          TimeConvertUtils.convertXTimeAgoByTimeServer(lastModified.getTime(),
+                                                                       "EE, dd yyyy",
+                                                                       new Locale(language),
+                                                                       TimeConvertUtils.YEAR));
+      // Receiver
+      Identity receiver = identityManager.getOrCreateIdentity(OrganizationIdentityProvider.NAME, notification.getTo());
+      if (receiver == null || receiver.getRemoteId().equals(notification.getFrom())) {
+        return null;
+      }
+      templateContext.put("FIRST_NAME", encoder.encode(receiver.getProfile().getProperty(Profile.FIRST_NAME).toString()));
+      // Footer
+      templateContext.put("FOOTER_LINK", LinkProviderUtils.getRedirectUrl("notification_settings", receiver.getRemoteId()));
+      templateContext.put("COMPANY_LINK", LinkProviderUtils.getBaseUrl());
+      String subject = TemplateUtils.processSubject(templateContext);
+      String body = TemplateUtils.processGroovy(templateContext);
+      // binding the exception throws by processing template
+      ctx.setException(templateContext.getException());
+      MessageInfo messageInfo = new MessageInfo();
+      return messageInfo.subject(subject).body(body).end();
+    }
+
+    @Override
+    protected boolean makeDigest(NotificationContext ctx, Writer writer) {
+      EntityEncoder encoder = HTMLEntityEncoder.getInstance();
+      List<NotificationInfo> notifications = ctx.getNotificationInfos();
+      NotificationInfo notificationInfo = notifications.get(0);
+      try {
+        String pluginId = notificationInfo.getKey().getId();
+        if (pluginId.equals(MentionInNoteNotificationPlugin.ID)) {
+          String mentionedIds = notificationInfo.getValueOwnerParameter(MentionInNoteNotificationPlugin.MENTIONED_IDS.getKey());
+          String ids = mentionedIds.substring(1, mentionedIds.length() - 1);
+          List<String> mentionedList = Stream.of(ids.split(",")).map(String::trim).collect(Collectors.toList());
+          if (!mentionedList.contains(notificationInfo.getTo())) {
+            return false;
+          }
+        }
+        String language = getLanguage(notificationInfo);
+        TemplateContext templateContext = new TemplateContext(pluginId, language);
+        //
+        Identity receiver = identityManager.getOrCreateIdentity(OrganizationIdentityProvider.NAME, notificationInfo.getTo());
+        templateContext.put("FIRST_NAME", encoder.encode(receiver.getProfile().getProperty(Profile.FIRST_NAME).toString()));
+        templateContext.put("FOOTER_LINK", LinkProviderUtils.getRedirectUrl("notification_settings", receiver.getRemoteId()));
+
+        writer.append(buildDigestMsg(notifications, templateContext));
+      } catch (IOException e) {
+        ctx.setException(e);
+        return false;
+      }
+      return true;
+    }
+
+    protected String buildDigestMsg(List<NotificationInfo> notifications, TemplateContext templateContext) {
+      StringBuilder sb = new StringBuilder();
+      for (NotificationInfo notification : notifications) {
+        templateContext.put(MentionInNoteNotificationPlugin.NOTE_TITLE.getKey(),
+                            notification.getValueOwnerParameter(MentionInNoteNotificationPlugin.NOTE_TITLE.getKey()));
+        templateContext.put("USER", notification.getValueOwnerParameter(MentionInNoteNotificationPlugin.NOTE_AUTHOR.getKey()));
+        templateContext.digestType(DigestTemplate.ElementType.DIGEST_ONE.getValue());
+
+        sb.append("<li style=\"margin: 0 0 13px 14px; font-size: 13px; line-height: 18px; font-family: HelveticaNeue, Helvetica, Arial, sans-serif;\">");
+        String digester = TemplateUtils.processDigest(templateContext);
+        sb.append(digester);
+        sb.append("</div></li>");
+      }
+      return sb.toString();
+    }
+  }
+}
diff --git a/notes-service/src/main/java/io/meeds/notes/notifications/provider/PushTemplateProvider.java b/notes-service/src/main/java/io/meeds/notes/notifications/provider/PushTemplateProvider.java
new file mode 100644
index 0000000000..aa2a24c141
--- /dev/null
+++ b/notes-service/src/main/java/io/meeds/notes/notifications/provider/PushTemplateProvider.java
@@ -0,0 +1,89 @@
+/*
+ * 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.
+ */
+package io.meeds.notes.notifications.provider;
+
+import java.io.Writer;
+
+import io.meeds.notes.notifications.plugin.MentionInNoteNotificationPlugin;
+
+import org.exoplatform.commons.api.notification.NotificationContext;
+import org.exoplatform.commons.api.notification.annotation.TemplateConfig;
+import org.exoplatform.commons.api.notification.annotation.TemplateConfigs;
+import org.exoplatform.commons.api.notification.channel.template.AbstractTemplateBuilder;
+import org.exoplatform.commons.api.notification.channel.template.TemplateProvider;
+import org.exoplatform.commons.api.notification.model.MessageInfo;
+import org.exoplatform.commons.api.notification.model.NotificationInfo;
+import org.exoplatform.commons.api.notification.model.PluginKey;
+import org.exoplatform.commons.api.notification.service.template.TemplateContext;
+import org.exoplatform.commons.notification.template.TemplateUtils;
+import org.exoplatform.commons.utils.HTMLEntityEncoder;
+import org.exoplatform.container.xml.InitParams;
+import org.exoplatform.services.log.ExoLogger;
+import org.exoplatform.services.log.Log;
+import org.exoplatform.social.core.identity.model.Identity;
+import org.exoplatform.social.core.identity.provider.OrganizationIdentityProvider;
+import org.exoplatform.social.core.manager.IdentityManager;
+
+@TemplateConfigs(templates = {
+    @TemplateConfig(pluginId = MentionInNoteNotificationPlugin.ID, template = "war:/notification/templates/push/MentionInNoteNotificationPlugin.gtmpl") })
+public class PushTemplateProvider extends TemplateProvider {
+  protected static Log          log = ExoLogger.getLogger(MailTemplateProvider.class);
+
+  private final IdentityManager identityManager;
+
+  public PushTemplateProvider(InitParams initParams, IdentityManager identityManager) {
+    super(initParams);
+    this.templateBuilders.put(PluginKey.key(MentionInNoteNotificationPlugin.ID), new TemplateBuilder());
+    this.identityManager = identityManager;
+  }
+
+  protected class TemplateBuilder extends AbstractTemplateBuilder {
+    @Override
+    protected MessageInfo makeMessage(NotificationContext ctx) {
+      NotificationInfo notification = ctx.getNotificationInfo();
+      String pluginId = notification.getKey().getId();
+
+      String language = getLanguage(notification);
+      TemplateContext templateContext = TemplateContext.newChannelInstance(getChannelKey(), pluginId, language);
+
+      HTMLEntityEncoder encoder = HTMLEntityEncoder.getInstance();
+      templateContext.put(MentionInNoteNotificationPlugin.NOTE_TITLE.getKey(),
+                          encoder.encode(notification.getValueOwnerParameter(MentionInNoteNotificationPlugin.NOTE_TITLE.getKey())));
+      templateContext.put(MentionInNoteNotificationPlugin.CURRENT_USER.getKey(),
+              encoder.encode(notification.getValueOwnerParameter(MentionInNoteNotificationPlugin.CURRENT_USER.getKey())));
+      // Receiver
+      Identity receiver = identityManager.getOrCreateIdentity(OrganizationIdentityProvider.NAME, notification.getTo());
+      if (receiver == null || receiver.getRemoteId().equals(notification.getFrom())) {
+        return null;
+      }
+      String subject = TemplateUtils.processSubject(templateContext);
+      String body = TemplateUtils.processGroovy(templateContext);
+      // binding the exception throws by processing template
+      ctx.setException(templateContext.getException());
+      MessageInfo messageInfo = new MessageInfo();
+      return messageInfo.subject(subject).body(body).end();
+    }
+
+    @Override
+    protected boolean makeDigest(NotificationContext ctx, Writer writer) {
+      return false;
+    }
+
+  }
+}
diff --git a/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java b/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java
index d313994ee5..649033d13f 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java
@@ -30,12 +30,18 @@
 import java.text.SimpleDateFormat;
 import java.util.*;
 import java.util.concurrent.ConcurrentHashMap;
+import java.util.regex.Matcher;
+import java.util.stream.Collectors;
 
 import io.meeds.notes.model.NoteFeaturedImage;
 import io.meeds.notes.model.NoteMetadataObject;
 import io.meeds.notes.model.NotePageProperties;
+import io.meeds.notes.notifications.plugin.MentionInNoteNotificationPlugin;
 import org.apache.commons.collections4.MapUtils;
 import org.apache.commons.lang3.StringUtils;
+
+import org.exoplatform.commons.api.notification.NotificationContext;
+import org.exoplatform.commons.api.notification.model.PluginKey;
 import org.exoplatform.commons.exception.ObjectNotFoundException;
 import org.exoplatform.commons.file.model.FileInfo;
 import org.exoplatform.commons.file.model.FileItem;
@@ -43,6 +49,8 @@
 import org.exoplatform.social.metadata.model.MetadataKey;
 import org.exoplatform.social.metadata.model.MetadataType;
 import org.exoplatform.social.metadata.thumbnail.ImageThumbnailService;
+import org.exoplatform.commons.notification.impl.NotificationContextImpl;
+import org.exoplatform.social.notification.LinkProviderUtils;
 import org.exoplatform.upload.UploadResource;
 import org.exoplatform.upload.UploadService;
 import org.gatein.api.EntityNotFoundException;
@@ -285,6 +293,10 @@ public Page createNote(Wiki noteBook, Page parentPage, Page note) throws WikiExc
 
     Utils.broadcast(listenerService, "note.posted", note.getAuthor(), createdPage);
     postAddPage(noteBook.getType(), noteBook.getOwner(), note.getName(), createdPage);
+    Matcher mentionMatcher = Utils.MENTION_PATTERN.matcher(createdPage.getContent());
+    if (mentionMatcher.find()) {
+      Utils.sendMentionInNoteNotification(createdPage, null, createdPage.getAuthor());
+    }
     return createdPage;
   }
 
@@ -348,6 +360,11 @@ public Page updateNote(Page note, PageUpdateType type, Identity userIdentity) th
       updatedPage.setMetadatas(metadata);
       note.setAuthor(userIdentity.getUserId());
     }
+
+    Matcher mentionsMatcher = Utils.MENTION_PATTERN.matcher(note.getContent());
+    if (mentionsMatcher.find()) {
+      Utils.sendMentionInNoteNotification(note, existingNote, userIdentity != null ? userIdentity.getUserId() : existingNote.getAuthor());
+    }
     Utils.broadcast(listenerService, "note.updated", note.getAuthor(), updatedPage);
     postUpdatePage(updatedPage.getWikiType(), updatedPage.getWikiOwner(), updatedPage.getName(), updatedPage, type);
     updatedPage.setLang(note.getLang());
diff --git a/notes-service/src/main/java/org/exoplatform/wiki/utils/Utils.java b/notes-service/src/main/java/org/exoplatform/wiki/utils/Utils.java
index c9c7fe6219..3502775ab8 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/utils/Utils.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/utils/Utils.java
@@ -27,19 +27,33 @@
 import java.io.IOException;
 import java.util.ArrayDeque;
 import java.util.ArrayList;
+import java.util.Arrays;
 import java.util.Deque;
 import java.util.HashMap;
+import java.util.HashSet;
 import java.util.List;
 import java.util.Locale;
 import java.util.Map;
+import java.util.Objects;
 import java.util.ResourceBundle;
+import java.util.Set;
+import java.util.regex.Pattern;
+import java.util.stream.Collectors;
 import java.util.zip.ZipEntry;
 import java.util.zip.ZipInputStream;
 
+import io.meeds.notes.notifications.plugin.MentionInNoteNotificationPlugin;
 import org.apache.commons.collections.CollectionUtils;
 import org.apache.commons.collections.map.HashedMap;
 import org.apache.commons.lang3.ArrayUtils;
 import org.apache.commons.lang3.StringUtils;
+import org.exoplatform.commons.api.notification.NotificationContext;
+import org.exoplatform.commons.api.notification.model.PluginKey;
+import org.exoplatform.commons.notification.impl.NotificationContextImpl;
+import org.exoplatform.social.core.identity.provider.SpaceIdentityProvider;
+import org.exoplatform.social.core.storage.api.IdentityStorage;
+import org.exoplatform.social.core.utils.MentionUtils;
+import org.exoplatform.social.notification.LinkProviderUtils;
 import org.jsoup.Jsoup;
 import org.jsoup.nodes.Document;
 import org.suigeneris.jrcs.diff.DifferentiationFailedException;
@@ -149,6 +163,9 @@ public class Utils {
 
   public static final String                                     PAGE_OWNER_KEY                   = "page_owner";
 
+  public static final Pattern                                    MENTION_PATTERN                  =
+                                                                                 Pattern.compile("@([^\\s]+)|@([^\\s]+)$");
+
   public static String normalizeUploadedFilename(String name) {
     name = name.replace("%22", "\"");  // Fix the bug in Chrome which a double quotes is encoded to %22
     name = name.replace("\\\"", "\"");  // Fix the bug in Firefox which a double quotes is escaped to \\"
@@ -756,4 +773,69 @@ public static org.exoplatform.services.security.Identity getIdentity(String user
     }
     return aclIdentity;
   }
+
+  public static Set<String> processMentions(String content, Space space) {
+    Set<String> mentions = new HashSet<>();
+    mentions.addAll(MentionUtils.getMentionedUsernames(content));
+
+    if (space != null) {
+      IdentityStorage identityStorage = CommonsUtils.getService(IdentityStorage.class);
+      String spaceIdentityId = identityStorage.findIdentityId(SpaceIdentityProvider.NAME, space.getPrettyName());
+      Set<String> mentionedRoles = MentionUtils.getMentionedRoles(content, spaceIdentityId);
+      mentionedRoles.forEach(role -> {
+        if (StringUtils.equals("member", role) && space.getMembers() != null) {
+          mentions.addAll(Arrays.asList(space.getMembers()));
+        } else if (StringUtils.equals("manager", role) && space.getManagers() != null) {
+          mentions.addAll(Arrays.asList(space.getManagers()));
+        } else if (StringUtils.equals("redactor", role) && space.getRedactors() != null) {
+          mentions.addAll(Arrays.asList(space.getRedactors()));
+        } else if (StringUtils.equals("publisher", role) && space.getPublishers() != null) {
+          mentions.addAll(Arrays.asList(space.getPublishers()));
+        }
+      });
+    }
+
+    return mentions.stream().map(remoteId -> {
+      IdentityStorage identityStorage = CommonsUtils.getService(IdentityStorage.class);
+
+      Identity identity = identityStorage.findIdentity(OrganizationIdentityProvider.NAME, remoteId);
+      return identity == null ? null : identity.getId();
+    }).filter(Objects::nonNull).collect(Collectors.toSet());
+  }
+
+  public static void sendMentionInNoteNotification(Page note, Page originalNote, String currentUser) {
+    SpaceService spaceService = CommonsUtils.getService(SpaceService.class);
+    IdentityManager identityManager = CommonsUtils.getService(IdentityManager.class);
+    Space space = spaceService.getSpaceByGroupId(note.getWikiOwner());
+    org.exoplatform.social.core.identity.model.Identity identity = identityManager.getOrCreateUserIdentity(note.getAuthor());
+    String authorAvatarUrl = LinkProviderUtils.getUserAvatarUrl(identity.getProfile());
+    String authorProfileUrl = identity.getProfile().getUrl();
+    Set<String> mentionedIds = Utils.processMentions(note.getContent(), space);
+    if (originalNote != null) {
+      Set<String> previousMentionedIds = Utils.processMentions(originalNote.getContent(), space);
+      mentionedIds = mentionedIds.stream().filter(id -> !previousMentionedIds.contains(id)).collect(Collectors.toSet());
+    }
+    NotificationContext mentionNotificationCtx =
+            NotificationContextImpl.cloneInstance()
+                    .append(MentionInNoteNotificationPlugin.CURRENT_USER,
+                            currentUser)
+                    .append(MentionInNoteNotificationPlugin.NOTE_AUTHOR,
+                            note.getAuthor())
+                    .append(MentionInNoteNotificationPlugin.SPACE_ID,
+                            space.getId())
+                    .append(MentionInNoteNotificationPlugin.NOTE_TITLE,
+                            note.getTitle())
+                    .append(MentionInNoteNotificationPlugin.AUTHOR_AVATAR_URL,
+                            authorAvatarUrl)
+                    .append(MentionInNoteNotificationPlugin.AUTHOR_PROFILE_URL,
+                            authorProfileUrl)
+                    .append(MentionInNoteNotificationPlugin.ACTIVITY_LINK,
+                            note.getUrl())
+                    .append(MentionInNoteNotificationPlugin.MENTIONED_IDS,
+                            mentionedIds);
+    mentionNotificationCtx.getNotificationExecutor()
+            .with(mentionNotificationCtx.makeCommand(PluginKey.key(MentionInNoteNotificationPlugin.ID)))
+            .execute(mentionNotificationCtx);
+  }
+
 }
diff --git a/notes-service/src/test/java/io/meeds/notes/notification/plugin/MentionInNoteNotificationPluginTest.java b/notes-service/src/test/java/io/meeds/notes/notification/plugin/MentionInNoteNotificationPluginTest.java
new file mode 100644
index 0000000000..44cbb02543
--- /dev/null
+++ b/notes-service/src/test/java/io/meeds/notes/notification/plugin/MentionInNoteNotificationPluginTest.java
@@ -0,0 +1,152 @@
+/*
+ * 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.
+ */
+package io.meeds.notes.notification.plugin;
+
+import io.meeds.notes.notifications.plugin.MentionInNoteNotificationPlugin;
+import org.exoplatform.commons.api.notification.NotificationContext;
+import org.exoplatform.commons.api.notification.model.NotificationInfo;
+import org.exoplatform.commons.api.notification.model.PluginKey;
+import org.exoplatform.commons.api.notification.service.NotificationCompletionService;
+import org.exoplatform.commons.api.notification.service.storage.NotificationService;
+import org.exoplatform.commons.notification.impl.NotificationContextImpl;
+import org.exoplatform.commons.utils.CommonsUtils;
+import org.exoplatform.container.ExoContainerContext;
+import org.exoplatform.container.PortalContainer;
+import org.exoplatform.container.xml.InitParams;
+import org.exoplatform.services.organization.OrganizationService;
+import org.exoplatform.services.organization.User;
+import org.exoplatform.services.organization.UserHandler;
+import org.exoplatform.social.core.identity.model.Identity;
+import org.exoplatform.social.core.manager.IdentityManager;
+import org.exoplatform.social.core.space.model.Space;
+import org.exoplatform.social.core.space.spi.SpaceService;
+import org.exoplatform.wiki.utils.Utils;
+import org.junit.AfterClass;
+import org.junit.Test;
+import org.junit.runner.RunWith;
+import org.mockito.Mock;
+import org.mockito.MockedStatic;
+import org.mockito.junit.MockitoJUnitRunner;
+
+import java.util.Collections;
+import java.util.HashSet;
+import java.util.Set;
+
+import static org.junit.Assert.assertEquals;
+import static org.mockito.ArgumentMatchers.any;
+import static org.mockito.ArgumentMatchers.anyBoolean;
+import static org.mockito.ArgumentMatchers.anyString;
+import static org.mockito.Mockito.mock;
+import static org.mockito.Mockito.mockStatic;
+import static org.mockito.Mockito.when;
+
+@RunWith(MockitoJUnitRunner.class)
+public class MentionInNoteNotificationPluginTest {
+
+  @Mock
+  private UserHandler                                    userhandler;
+
+  @Mock
+  private InitParams                                     initParams;
+
+  @Mock
+  private OrganizationService                            orgService;
+
+  @Mock
+  private SpaceService                                   spaceService;
+
+  @Mock
+  private PortalContainer                                portalContainer;
+
+  @Mock
+  private IdentityManager                                identityManager;
+
+  private static final MockedStatic<CommonsUtils>        COMMONS_UTILS         = mockStatic(CommonsUtils.class);
+
+  private static final MockedStatic<Utils>               SOCIAL_UTILS          = mockStatic(Utils.class);
+
+  private static final MockedStatic<PluginKey>           PLUGIN_KEY            = mockStatic(PluginKey.class);
+
+  private static final MockedStatic<ExoContainerContext> EXO_CONTAINER_CONTEXT = mockStatic(ExoContainerContext.class);
+
+  private static final MockedStatic<PortalContainer>     PORTAL_CONTAINER      = mockStatic(PortalContainer.class);
+
+  @AfterClass
+  public static void afterRunBare() throws Exception { // NOSONAR
+    COMMONS_UTILS.close();
+    SOCIAL_UTILS.close();
+    PLUGIN_KEY.close();
+    EXO_CONTAINER_CONTEXT.close();
+    PORTAL_CONTAINER.close();
+  }
+
+  @Test
+    public void testShouldMakeNotificationForMentionInNoteContext() throws Exception {
+        // Given
+        when(orgService.getUserHandler()).thenReturn(userhandler);
+        MentionInNoteNotificationPlugin notePlugin = new MentionInNoteNotificationPlugin(initParams);
+        Set<String> mentionedIds = new HashSet<>(Collections.singleton("1"));
+
+        COMMONS_UTILS.when(() -> CommonsUtils.getService(NotificationService.class)).thenReturn(null);
+        COMMONS_UTILS.when(() -> CommonsUtils.getService(NotificationCompletionService.class)).thenReturn(null);
+        NotificationContext ctx =
+                NotificationContextImpl.cloneInstance()
+                        .append(MentionInNoteNotificationPlugin.NOTE_TITLE, "title")
+                        .append(MentionInNoteNotificationPlugin.NOTE_AUTHOR, "root")
+                        .append(MentionInNoteNotificationPlugin.CURRENT_USER, "root")
+                        .append(MentionInNoteNotificationPlugin.SPACE_ID, "1")
+                        .append(MentionInNoteNotificationPlugin.MENTIONED_IDS, mentionedIds)
+                        .append(MentionInNoteNotificationPlugin.AUTHOR_AVATAR_URL,
+                                "http://localhost:8080/portal/rest/v1/social/users/default-image/avatar")
+                        .append(MentionInNoteNotificationPlugin.ACTIVITY_LINK,
+                                "http://localhost:8080/portal/g/:spaces:space_test/space_test/notes/1");
+
+        User currentUser = mock(User.class);
+        when(userhandler.findUserByName("root")).thenReturn(currentUser);
+        when(currentUser.getFullName()).thenReturn("root root");
+
+        Space space = new Space();
+        space.setId("1");
+        space.setGroupId("space_test");
+
+        COMMONS_UTILS.when(() -> CommonsUtils.getService(OrganizationService.class)).thenReturn(orgService);
+        PORTAL_CONTAINER.when(PortalContainer::getInstance).thenReturn(portalContainer);
+        when(portalContainer.getComponentInstanceOfType(SpaceService.class)).thenReturn(spaceService);
+        when(portalContainer.getComponentInstanceOfType(IdentityManager.class)).thenReturn(identityManager);
+        Identity identity = mock(Identity.class);
+        when(identity.getRemoteId()).thenReturn("receiver");
+        when(identityManager.getIdentity(anyString(), anyBoolean())).thenReturn(identity);
+        when(spaceService.isMember(any(Space.class), anyString())).thenReturn(true);
+        when(spaceService.getSpaceById(anyString())).thenReturn(space);
+
+        // When
+        NotificationInfo notificationInfo = notePlugin.makeNotification(ctx);
+
+        // Then
+        assertEquals("root", notificationInfo.getFrom());
+        assertEquals("", notificationInfo.getTitle());
+        assertEquals("title", notificationInfo.getValueOwnerParameter("NOTE_TITLE"));
+        assertEquals("root", notificationInfo.getValueOwnerParameter("NOTE_AUTHOR"));
+        assertEquals("http://localhost:8080/portal/rest/v1/social/users/default-image/avatar",
+                notificationInfo.getValueOwnerParameter("AUTHOR_AVATAR_URL"));
+        assertEquals("http://localhost:8080/portal/g/:spaces:space_test/space_test/notes/1",
+                notificationInfo.getValueOwnerParameter("ACTIVITY_LINK"));
+    }
+
+}
diff --git a/notes-service/src/test/java/io/meeds/notes/notification/provider/MailTemplateProviderTest.java b/notes-service/src/test/java/io/meeds/notes/notification/provider/MailTemplateProviderTest.java
new file mode 100644
index 0000000000..fe722d6a0b
--- /dev/null
+++ b/notes-service/src/test/java/io/meeds/notes/notification/provider/MailTemplateProviderTest.java
@@ -0,0 +1,95 @@
+package io.meeds.notes.notification.provider;
+
+import static org.mockito.Mockito.*;
+import static org.junit.Assert.*;
+
+import io.meeds.notes.notifications.plugin.MentionInNoteNotificationPlugin;
+import io.meeds.notes.notifications.provider.MailTemplateProvider;
+import org.exoplatform.commons.api.notification.NotificationContext;
+import org.exoplatform.commons.api.notification.model.MessageInfo;
+import org.exoplatform.commons.api.notification.model.NotificationInfo;
+import org.exoplatform.commons.api.notification.model.PluginKey;
+import org.exoplatform.commons.api.notification.plugin.NotificationPluginUtils;
+import org.exoplatform.commons.api.notification.service.template.TemplateContext;
+import org.exoplatform.commons.notification.template.TemplateUtils;
+import org.exoplatform.container.PortalContainer;
+import org.exoplatform.container.xml.InitParams;
+import org.exoplatform.social.core.identity.model.Identity;
+import org.exoplatform.social.core.identity.model.Profile;
+import org.exoplatform.social.core.identity.provider.OrganizationIdentityProvider;
+import org.exoplatform.social.core.manager.IdentityManager;
+import org.exoplatform.social.notification.LinkProviderUtils;
+import org.junit.After;
+import org.junit.Before;
+import org.junit.Test;
+import org.junit.runner.RunWith;
+import org.mockito.Mock;
+import org.mockito.MockedStatic;
+import org.mockito.junit.MockitoJUnitRunner;
+
+@RunWith(MockitoJUnitRunner.class)
+public class MailTemplateProviderTest {
+
+  private MailTemplateProvider.TemplateBuilder               templateBuilder;
+
+  @Mock
+  private IdentityManager                                    identityManager;
+
+  @Mock
+  private NotificationContext                                ctx;
+
+  @Mock
+  private NotificationInfo                                   notificationInfo;
+
+  @Mock
+  private Identity                                           receiver;
+
+  @Mock
+  private Profile                                            profile;
+
+  private static final MockedStatic<TemplateUtils>           TEMPLATE_UTILS            = mockStatic(TemplateUtils.class);
+
+  private static final MockedStatic<NotificationPluginUtils> NOTIFICATION_PLUGIN_UTILS =
+                                                                                       mockStatic(NotificationPluginUtils.class);
+
+  private static final MockedStatic<LinkProviderUtils>       LINK_PROVIDER_UTILS       = mockStatic(LinkProviderUtils.class);
+
+  @Before
+  public void setUp() {
+    MailTemplateProvider mailTemplateProvider = new MailTemplateProvider(new InitParams(), identityManager);
+    templateBuilder = mailTemplateProvider.new TemplateBuilder();
+  }
+
+  @After
+  public void tearDown() {
+    TEMPLATE_UTILS.close();
+    NOTIFICATION_PLUGIN_UTILS.close();
+    LINK_PROVIDER_UTILS.close();
+  }
+
+  @Test
+  public void testMakeMessage() {
+      
+      when(ctx.getNotificationInfo()).thenReturn(notificationInfo);
+      when(notificationInfo.getKey()).thenReturn(new PluginKey(MentionInNoteNotificationPlugin.ID));
+      when(notificationInfo.getValueOwnerParameter(anyString())).thenReturn("testValue");
+      when(notificationInfo.getTo()).thenReturn("receiverId");
+      when(identityManager.getOrCreateIdentity(OrganizationIdentityProvider.NAME, "receiverId")).thenReturn(receiver);
+      when(receiver.getProfile()).thenReturn(profile);
+      when(receiver.getRemoteId()).thenReturn("receiverId");
+      when(profile.getProperty(Profile.FIRST_NAME)).thenReturn("ReceiverFirstName");
+      TEMPLATE_UTILS.when(() -> TemplateUtils.processGroovy(any(TemplateContext.class)))
+              .thenReturn("you have been mentioned in a note");
+      TEMPLATE_UTILS.when(() -> TemplateUtils.processSubject(any(TemplateContext.class)))
+              .thenReturn("author mentioned you in the note test");
+      NOTIFICATION_PLUGIN_UTILS.when(() -> NotificationPluginUtils.getLanguage(anyString())).thenReturn("en");
+      LINK_PROVIDER_UTILS.when(() -> LinkProviderUtils.getBaseUrl()).thenReturn("baseUrl");
+      LINK_PROVIDER_UTILS.when(() -> LinkProviderUtils.getRedirectUrl(anyString(), anyString()))
+              .thenReturn("notifications/settings/redirect/url");
+    MessageInfo messageInfo = templateBuilder.makeMessage(ctx);
+
+    assertNotNull(messageInfo);
+    assertTrue(messageInfo.getBody().equals("you have been mentioned in a note"));
+    assertTrue(messageInfo.getSubject().equals("author mentioned you in the note test"));
+  }
+}
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 5064993bfe..a37632e539 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
@@ -200,3 +200,18 @@ SpaceSettings.application.wiki.description=Notes Portlet
 
 SpaceSettings.application.notes.application.title=Notes
 SpaceSettings.application.notes.application.description=Notes Application
+
+#############################################################################
+#Notification
+#############################################################################
+
+UINotification.label.mentionInNote=Mentions in note
+UINotification.label.note=Notes Notifications
+note.notification.mention.in.note.description=You have been mentioned in a note:
+Notification.label.types.notes=Notes
+UINotification.title.MentionInNoteNotificationPlugin=Someone mentions me in a note
+notes.notification.label.footer=If you do not want to receive such notifications, <a target="_blank" class="notification_settings_url" href="{0}">click here</a> to change your notification settings.
+notes.notification.button.goToNote.label=Go to note
+notes.notification.title.mention.in.note=You have been mentioned in a note "{0}"
+Notification.label.SayHello=Hi
+Notification.subject.MentionInNoteNotificationPlugin=$CURRENT_USER mentioned you in the note $NOTE_TITLE
\ No newline at end of file
diff --git a/notes-webapp/src/main/webapp/WEB-INF/conf/configuration.xml b/notes-webapp/src/main/webapp/WEB-INF/conf/configuration.xml
index 7c55effc65..899bbcd9fd 100644
--- a/notes-webapp/src/main/webapp/WEB-INF/conf/configuration.xml
+++ b/notes-webapp/src/main/webapp/WEB-INF/conf/configuration.xml
@@ -33,5 +33,6 @@
   <import>war:/conf/wiki/ckeditor-configuration.xml</import>
   <import>war:/conf/wiki/metadata-configuration.xml</import>
   <import>war:/conf/wiki/feature-flags-configuration.xml</import>
+  <import>war:/conf/wiki/notification-configuration.xml</import>
 
 </configuration>
diff --git a/notes-webapp/src/main/webapp/WEB-INF/conf/wiki/notification-configuration.xml b/notes-webapp/src/main/webapp/WEB-INF/conf/wiki/notification-configuration.xml
new file mode 100644
index 0000000000..9b211431a0
--- /dev/null
+++ b/notes-webapp/src/main/webapp/WEB-INF/conf/wiki/notification-configuration.xml
@@ -0,0 +1,106 @@
+<configuration
+        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+        xsi:schemaLocation="http://www.exoplatform.org/xml/ns/kernel_1_2.xsd http://www.exoplatform.org/xml/ns/kernel_1_2.xsd"
+        xmlns="http://www.exoplatform.org/xml/ns/kernel_1_2.xsd">
+
+    <external-component-plugins>
+        <target-component>org.exoplatform.commons.api.notification.service.setting.PluginSettingService
+        </target-component>
+        <component-plugin profiles="all">
+            <name>notification.groups</name>
+            <set-method>registerGroupConfig</set-method>
+            <type>org.exoplatform.commons.api.notification.plugin.GroupProviderPlugin</type>
+            <description>Initial the default groups.</description>
+            <init-params>
+                <object-param>
+                    <name>notes</name>
+                    <description>The information of Notification group : componentUpdateState</description>
+                    <object type="org.exoplatform.commons.api.notification.plugin.config.GroupConfig">
+                        <field name="id">
+                            <string>notes</string>
+                        </field>
+                        <field name="resourceBundleKey">
+                            <string>UINotification.label.note</string>
+                        </field>
+                        <field name="order">
+                            <string>120</string>
+                        </field>
+                    </object>
+                </object-param>
+            </init-params>
+        </component-plugin>
+    </external-component-plugins>
+
+    <external-component-plugins>
+        <target-component>org.exoplatform.commons.api.notification.service.setting.PluginContainer</target-component>
+        <component-plugin>
+            <name>notification.plugins</name>
+            <set-method>addPlugin</set-method>
+            <type>io.meeds.notes.notifications.plugin.MentionInNoteNotificationPlugin</type>
+            <description>Initial information for plugin MentionInNoteNotificationPlugin</description>
+            <init-params>
+                <object-param>
+                    <name>template.MentionInNoteNotificationPlugin</name>
+                    <description>The template for the plugin of the state updates of notes</description>
+                    <object type="org.exoplatform.commons.api.notification.plugin.config.PluginConfig">
+                        <field name="pluginId">
+                            <string>MentionInNoteNotificationPlugin</string>
+                        </field>
+                        <field name="resourceBundleKey">
+                            <string>UINotification.label.mentionInNote</string>
+                        </field>
+                        <field name="order">
+                            <string>10</string>
+                        </field>
+                        <field name="defaultConfig">
+                            <collection type="java.util.ArrayList">
+                                <value>
+                                    <string>daily</string>
+                                </value>
+                                <value>
+                                    <string>Instantly</string>
+                                </value>
+                            </collection>
+                        </field>
+                        <field name="groupId">
+                            <string>notes</string>
+                        </field>
+                        <field name="bundlePath">
+                            <string>locale.portlet.notes.notesPortlet</string>
+                        </field>
+                        <field name="mutable">
+                            <boolean>false</boolean>
+                        </field>
+                    </object>
+                </object-param>
+            </init-params>
+        </component-plugin>
+    </external-component-plugins>
+
+    <external-component-plugins>
+        <target-component>org.exoplatform.commons.api.notification.channel.ChannelManager</target-component>
+        <component-plugin>
+            <name>mail.channel.notes.template</name>
+            <set-method>registerTemplateProvider</set-method>
+            <type>io.meeds.notes.notifications.provider.MailTemplateProvider</type>
+            <init-params>
+                <value-param>
+                    <name>channel-id</name>
+                    <value>MAIL_CHANNEL</value>
+                </value-param>
+            </init-params>
+        </component-plugin>
+        <component-plugin>
+            <name>web.channel.notes.template</name>
+            <set-method>registerTemplateProvider</set-method>
+            <type>io.meeds.notes.notifications.provider.PushTemplateProvider</type>
+            <init-params>
+                <value-param>
+                    <name>channel-id</name>
+                    <value>PUSH_CHANNEL</value>
+                </value-param>
+            </init-params>
+        </component-plugin>
+    </external-component-plugins>
+
+</configuration>
\ No newline at end of file
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 f29a4f969e..521ad8296d 100644
--- a/notes-webapp/src/main/webapp/WEB-INF/gatein-resources.xml
+++ b/notes-webapp/src/main/webapp/WEB-INF/gatein-resources.xml
@@ -306,5 +306,25 @@
       <module>commonVueComponents</module>
     </depends>
   </module>
-  
+
+  <module>
+    <name>notesNotificationExtension</name>
+    <load-group>notificationGRP</load-group>
+    <script>
+      <path>/javascript/notesNotificationExtension.bundle.js</path>
+    </script>
+    <depends>
+      <module>vue</module>
+    </depends>
+    <depends>
+      <module>vuetify</module>
+    </depends>
+    <depends>
+      <module>eXoVueI18n</module>
+    </depends>
+    <depends>
+      <module>extensionRegistry</module>
+    </depends>
+  </module>
+
 </gatein-resources>
diff --git a/notes-webapp/src/main/webapp/WEB-INF/notification/templates/mail/MentionInNoteNotificationPlugin.gtmpl b/notes-webapp/src/main/webapp/WEB-INF/notification/templates/mail/MentionInNoteNotificationPlugin.gtmpl
new file mode 100644
index 0000000000..305ac20aee
--- /dev/null
+++ b/notes-webapp/src/main/webapp/WEB-INF/notification/templates/mail/MentionInNoteNotificationPlugin.gtmpl
@@ -0,0 +1,128 @@
+<%
+/*
+ * 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.
+*/
+%>
+<table border="0" cellpadding="0" cellspacing="0" width="600" bgcolor="#ffffff" align="center"
+	   style="background-color: #ffffff; font-size: 13px;color:#333333;line-height: 18px;font-family: HelveticaNeue, Helvetica, Arial, sans-serif;"
+	   xmlns="http://www.w3.org/1999/html">
+<tr>
+<td align="center"  valign="middle" >
+<table  cellpadding="0" cellspacing="0" width="100%" bgcolor="#ffffff" align="center" style="border:1px solid #d8d8d8;">
+<tr>
+<td  height="45" valign="middle" style="margin:0;height:45px;font-weight:bold;vertical-align:middle;;background-color: #efefef;font-family: 'HelveticaNeue Bold', Helvetica, Arial, sans-serif;color:#2f5e92;font-size:18px;text-align:center">
+<a href="$ACTIVITY_LINK" style="text-decoration: none; color: #2f5e92; font-family: 'HelveticaNeue Bold', Helvetica, Arial, sans-serif; font-size: 18px;">
+<%
+def title = _ctx.appRes("notes.notification.title.mention.in.note",NOTE_TITLE);
+%>
+$title
+</a>
+						</td>
+</tr>
+				</table>
+</td>
+		</tr><!--end header area-->
+<tr>
+<td bgcolor="#ffffff" style="background-color: #ffffff;">
+<table cellpadding="0" cellspacing="0" width="100%"  bgcolor="#ffffff" style="background-color: #ffffff; border-left:1px solid #d8d8d8;border-right:1px solid #d8d8d8;">
+<tr>
+<td bgcolor="#ffffff" style="background-color: #ffffff;">
+<table border="0" cellpadding="0" cellspacing="0" width="92%" bgcolor="#ffffff" align="center" style="background-color: #ffffff; font-size: 13px;color:#333333;line-height: 18px;">
+<tr>
+<td align="left" bgcolor="#ffffff" style="background-color: #ffffff;padding: 20px 0 10px;">
+<p style="margin: 0 0 10px; color: #333333; font-size: 13px; line-height: 18px;">
+<%=_ctx.appRes("Notification.label.SayHello")%> $FIRST_NAME,
+</p>
+	<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#ffffff" align="center" style="background-color: #ffffff; font-size: 13px;color:#333333;line-height: 18px;"><tbody><tr><td align="left" style="padding: 0;"><table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#ffffff" align="center" style="width: 100%; background-color: #ffffff; font-size: 13px; color:#333333;line-height: 18px;">
+	<tr>
+	<td align="left" valign="top" bgcolor="#ffffff" style="vertical-align: top; background-color: #ffffff; padding: 0 15px 0 0;">
+		<a href="$AUTHOR_PROFILE_URL" style="margin: 4px 0 0; padding: 0; display: block;">
+<img style="border-radius: 4px;" height="76" width="76" src="$AUTHOR_AVATAR_URL"/>
+</a>
+																</td>
+<td align="left" bgcolor="#ffffff" width="90%" align="top" style="width: 90%; background-color: #ffffff; padding: 0 0; vertical-align: top;">
+<p style="margin: 0 0 10px; color: #333333; font-size: 13px; line-height: 18px;">
+<%
+def notificationDescription = _ctx.appRes("note.notification.mention.in.note.description");
+%>
+</p>
+	<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#f9f9f9" align="center" style="margin:0 0 10px; width: 100%; background-color: #f9f9f9; font-size: 13px; color:#333333;line-height: 18px;">
+	<tr>
+	<td align="left" valign="top" bgcolor="#f9f9f9" style="vertical-align: top; background-color: #f9f9f9; padding: 10px 15px;">
+	<p style="margin: 0 0 10px; color: #333333; font-size: 13px; line-height: 18px;">
+	<a href="#" style="text-decoration: none; color: #2f5e92; font-family: 'HelveticaNeue Bold', Helvetica, Arial, sans-serif">
+</a>
+</p>
+<p style="margin: 0; color: #333333; font-size: 13px; line-height: 18px;">
+		<%=notificationDescription%>
+</p>
+</td>
+</tr>
+</tr>
+<tr>
+<td align="left" valign="top" bgcolor="#ffffff" style="vertical-align: top; background-color: #ffffff; padding: 10px 0 0">
+<p style="margin: 0">
+<%
+def buttonLabel=_ctx.appRes("notes.notification.button.goToNote.label");
+%>
+<a target="_blank" style="
+display: inline-block;
+text-decoration: none;
+font-size: 11px;
+font-family: HelveticaNeue, Helvetica, Arial, sans-serif,serif;
+color: #333333;
+background-color: #f1f1f1;;
+background-image: linear-gradient(to bottom, #ffffff, #f1f1f1);
+border-radius: 4px;
+-moz-border-radius: 4px;
+padding: 5px 8px;
+line-height: 100%;
+text-align: center;
+border: 1px solid #c7c7c7;
+-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
+-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
+box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
+vertical-align: middle;
+margin-left: 81%;
+" href="$ACTIVITY_LINK" target="_blank">$buttonLabel</a>
+</p>
+																			</td>
+</tr>
+																	</table>
+</td>
+															</tr>
+</table>
+													</td>
+</tr>
+											</tbody>
+</table>
+										<br>
+										<p style="margin: 0 0 10px; color: #999999; font-size: 13px; line-height: 18px;">
+										   <%=_ctx.appRes("", "" + FOOTER_LINK)%>
+										</p>
+</td>
+								</tr>
+</table>
+						</td>
+</tr>
+				</table>
+
+</td>
+		</tr><!--end content area-->
+    <% _ctx.include("war:/notification/templates/mail/NotificationFooter.gtmpl", _templateContext);%>
+	</table>
\ No newline at end of file
diff --git a/notes-webapp/src/main/webapp/WEB-INF/notification/templates/push/MentionInNoteNotificationPlugin.gtmpl b/notes-webapp/src/main/webapp/WEB-INF/notification/templates/push/MentionInNoteNotificationPlugin.gtmpl
new file mode 100644
index 0000000000..7a283700a8
--- /dev/null
+++ b/notes-webapp/src/main/webapp/WEB-INF/notification/templates/push/MentionInNoteNotificationPlugin.gtmpl
@@ -0,0 +1,21 @@
+<%
+/*
+ * 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.
+*/
+%>
+<%=_ctx.appRes("notes.notification.title.mention.in.note",NOTE_TITLE)%>
\ No newline at end of file
diff --git a/notes-webapp/src/main/webapp/vue-app/notification-extensions/components/MentionInNoteNotificationPlugin.vue b/notes-webapp/src/main/webapp/vue-app/notification-extensions/components/MentionInNoteNotificationPlugin.vue
new file mode 100644
index 0000000000..e2486ce089
--- /dev/null
+++ b/notes-webapp/src/main/webapp/vue-app/notification-extensions/components/MentionInNoteNotificationPlugin.vue
@@ -0,0 +1,39 @@
+<template>
+  <user-notification-template
+    :notification="notification"
+    :avatar-url="avatarUrl"
+    :message="message"
+    :url="url"
+    user-avatar>
+    <template #actions>
+      <div class="text-truncate">
+        <v-icon size="14" class="me-1 mb-1">fas fa-clipboard</v-icon>
+        {{ noteTitle }}
+      </div>
+    </template>
+  </user-notification-template>
+</template>
+<script>
+export default {
+  props: {
+    notification: {
+      type: Object,
+      default: null,
+    },
+  },
+  computed: {
+    url() {
+      return this.notification?.parameters?.ACTIVITY_LINK;
+    },
+    noteTitle() {
+      return this.notification?.parameters?.NOTE_TITLE;
+    },
+    avatarUrl() {
+      return this.notification?.parameters?.AUTHOR_AVATAR_URL;
+    },
+    message() {
+      return this.$t('note.notification.mention.in.note.description');
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/notes-webapp/src/main/webapp/vue-app/notification-extensions/extensions.js b/notes-webapp/src/main/webapp/vue-app/notification-extensions/extensions.js
new file mode 100644
index 0000000000..1adbee50c8
--- /dev/null
+++ b/notes-webapp/src/main/webapp/vue-app/notification-extensions/extensions.js
@@ -0,0 +1,32 @@
+/**
+ * This file is part of the Meeds project (https://meeds.io/).
+ *
+ * Copyright (C) 2020 - 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.
+ */
+extensionRegistry.registerExtension('WebNotification', 'notification-group-extension', {
+  rank: 30,
+  name: 'notes',
+  plugins: [
+    'MentionInNoteNotificationPlugin',
+  ],
+  icon: 'fas fa-clipboard',
+});
+extensionRegistry.registerExtension('WebNotification', 'notification-content-extension', {
+  type: 'MentionInNoteNotificationPlugin',
+  rank: 10,
+  vueComponent: Vue.options.components['mention-user-notification'],
+});
diff --git a/notes-webapp/src/main/webapp/vue-app/notification-extensions/initComponents.js b/notes-webapp/src/main/webapp/vue-app/notification-extensions/initComponents.js
new file mode 100644
index 0000000000..012796742d
--- /dev/null
+++ b/notes-webapp/src/main/webapp/vue-app/notification-extensions/initComponents.js
@@ -0,0 +1,29 @@
+/**
+ * This file is part of the Meeds project (https://meeds.io/).
+ *
+ * Copyright (C) 2020 - 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.
+ */
+
+import MentionInNoteNotificationPlugin  from './components/MentionInNoteNotificationPlugin.vue';
+
+const components = {
+  'mention-user-notification': MentionInNoteNotificationPlugin,
+};
+
+for (const key in components) {
+  Vue.component(key, components[key]);
+}
\ No newline at end of file
diff --git a/notes-webapp/src/main/webapp/vue-app/notification-extensions/main.js b/notes-webapp/src/main/webapp/vue-app/notification-extensions/main.js
new file mode 100644
index 0000000000..ad5fe00ff6
--- /dev/null
+++ b/notes-webapp/src/main/webapp/vue-app/notification-extensions/main.js
@@ -0,0 +1,33 @@
+/**
+ * This file is part of the Meeds project (https://meeds.io/).
+ *
+ * Copyright (C) 2020 - 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.
+ */
+import './initComponents.js';
+import './extensions.js';
+
+const lang = eXo.env.portal.language;
+const url = `${eXo.env.portal.context}/${eXo.env.portal.rest}/i18n/bundle/locale.portlet.notes.notesPortlet-${lang}.json`;
+
+export function init() {
+  return exoi18n.loadLanguageAsync(lang, url)
+    .then(() => {
+      new Vue({
+        i18n: exoi18n.i18n,
+      });
+    });
+}
\ No newline at end of file
diff --git a/notes-webapp/webpack.prod.js b/notes-webapp/webpack.prod.js
index ca5ead0e3e..022fdf509b 100644
--- a/notes-webapp/webpack.prod.js
+++ b/notes-webapp/webpack.prod.js
@@ -18,7 +18,8 @@ const config = {
     notesFavoriteDrawerExtension: './src/main/webapp/vue-app/notes-favorite-drawer-extension/main.js',
     engagementCenterExtensions: './src/main/webapp/vue-app/engagementCenterExtensions/extensions.js',
     connectorEventExtensions: './src/main/webapp/vue-app/connectorEventExtensions/extensions.js',
-    notePageView: './src/main/webapp/vue-app/note-page-view/main.js'
+    notePageView: './src/main/webapp/vue-app/note-page-view/main.js',
+    notesNotificationExtension: './src/main/webapp/vue-app/notification-extensions/main.js'
   },
   output: {
     publicPath: '',

From a83b6d14659f73dfe662b9b0484ec8a6b50191e1 Mon Sep 17 00:00:00 2001
From: Helmi Akermi <70575401+hakermi@users.noreply.github.com>
Date: Fri, 2 Aug 2024 09:49:08 +0100
Subject: [PATCH 20/40] feat: Improve the preview of the featured image -
 EXO-73558 - Meeds-io/MIPs#128  (#1058)

Improve the preview of the featured image
---
 .../src/main/webapp/skin/less/notes/notes.less     |  2 +-
 .../components/NoteEditorMetadataDrawer.vue        | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/notes-webapp/src/main/webapp/skin/less/notes/notes.less b/notes-webapp/src/main/webapp/skin/less/notes/notes.less
index 374fc6436c..2c3f0fe885 100644
--- a/notes-webapp/src/main/webapp/skin/less/notes/notes.less
+++ b/notes-webapp/src/main/webapp/skin/less/notes/notes.less
@@ -215,7 +215,7 @@
 
 #editorMetadataDrawer {
 
-  .add-image-area {
+  .add-image-area, .image-preview {
     background-color: @primaryBackground !important;
   }
 
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue
index 14e59a7078..f1f8db0a89 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue
@@ -53,7 +53,7 @@
                 v-if="!canShowFeaturedImagePreview"
                 name="image-area"
                 class="btn add-image-area d-flex"
-                height="95"
+                height="206"
                 width="100%"
                 text
                 @click="uploadFeaturedImage">
@@ -70,14 +70,14 @@
               </v-btn>
               <v-sheet
                 v-else
-                max-height="380"
-                min-width="48">
+                height="206"
+                min-width="48"
+                class="card-border-radius image-preview">
                 <v-hover v-slot="{ hover }">
                   <div class="d-flex full-height">
                     <v-img
                       width="100%"
-                      min-height="48"
-                      max-height="380"
+                      contain
                       :lazy-src="featuredImageLink"
                       :alt="savedFeaturedImageAltText"
                       :src="featuredImageLink">
@@ -85,7 +85,7 @@
                         v-if="hover && canShowFeaturedImagePreview"
                         class="width-fit-content full-height ms-auto d-flex me-2">
                         <v-btn
-                          class="feature-image-button me-1 my-auto"
+                          class="feature-image-button me-1 mt-2 mb-auto"
                           icon
                           @click.stop="removeNoteFeaturedImage">
                           <v-icon
@@ -95,7 +95,7 @@
                           </v-icon>
                         </v-btn>
                         <v-btn
-                          class="feature-image-button my-auto"
+                          class="feature-image-button mt-2 mb-auto"
                           icon
                           @click="uploadFeaturedImage">
                           <v-icon

From b600e551d68cdd95e763ab0c8e460516ee58e788 Mon Sep 17 00:00:00 2001
From: Helmi Akermi <70575401+hakermi@users.noreply.github.com>
Date: Fri, 2 Aug 2024 21:41:33 +0100
Subject: [PATCH 21/40] feat: Add getPageVersionById function in note service
 api - EXO-73181 - Meeds-io/MIPs#128  (#1059)

Add getPageVersionById function in note service api
---
 .../exoplatform/wiki/jpa/JPADataStorage.java  |  8 ++++++
 .../exoplatform/wiki/service/DataStorage.java |  8 ++++++
 .../exoplatform/wiki/service/NoteService.java |  8 ++++++
 .../wiki/service/impl/NoteServiceImpl.java    | 11 ++++++++
 .../wiki/jpa/JPADataStorageTest.java          | 22 ++++++++++++++++
 .../wiki/service/TestNoteService.java         | 25 +++++++++++--------
 6 files changed, 72 insertions(+), 10 deletions(-)

diff --git a/notes-service/src/main/java/org/exoplatform/wiki/jpa/JPADataStorage.java b/notes-service/src/main/java/org/exoplatform/wiki/jpa/JPADataStorage.java
index fb6faf2140..e251ce474b 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/jpa/JPADataStorage.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/jpa/JPADataStorage.java
@@ -1579,4 +1579,12 @@ public void deleteVersionsByNoteIdAndLang(Long noteId, String lang) throws WikiE
   public void deleteOrphanDraftPagesByParentPage(long parentPageId) {
     draftPageDAO.deleteOrphanDraftPagesByParentPage(parentPageId);
   }
+
+  /**
+   * {@inheritDoc}
+   */
+  @Override
+  public PageVersion getPageVersionById(long versionId) {
+    return EntityConverter.convertPageVersionEntityToPageVersion(pageVersionDAO.find(versionId));
+  }
 }
diff --git a/notes-service/src/main/java/org/exoplatform/wiki/service/DataStorage.java b/notes-service/src/main/java/org/exoplatform/wiki/service/DataStorage.java
index 3441db6061..275c8d438d 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/service/DataStorage.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/service/DataStorage.java
@@ -286,4 +286,12 @@ public default List<Attachment> getAttachmentsOfPage(Page page, boolean loadCont
    * @param parentPageId Note parent page id
    */
   void deleteOrphanDraftPagesByParentPage(long parentPageId);
+
+  /**
+   * Gets page version by its given id
+   *
+   * @param versionId page version id
+   * @return {@link PageVersion}
+   */
+  PageVersion getPageVersionById(long versionId);
 }
diff --git a/notes-service/src/main/java/org/exoplatform/wiki/service/NoteService.java b/notes-service/src/main/java/org/exoplatform/wiki/service/NoteService.java
index eb454838e9..acad536943 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/service/NoteService.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/service/NoteService.java
@@ -821,4 +821,12 @@ Page getNoteByIdAndLang(Long pageId, Identity userIdentity, String source, Strin
    * @throws Exception
    */
   void removeNoteFeaturedImage(Long noteId, Long featuredImageId, String lang, boolean isDraft, Long userIdentityId) throws Exception;
+
+  /**
+   * Gets page version by its given id
+   *
+   * @param versionId page version id
+   * @return {@link PageVersion}
+   */
+  PageVersion getPageVersionById(Long versionId);
 }
diff --git a/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java b/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java
index 649033d13f..56ddb2ed7a 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java
@@ -2217,4 +2217,15 @@ public NotePageProperties saveNoteMetadata(NotePageProperties notePageProperties
     }
     return notePageProperties;
   }
+
+  /**
+   * {@inheritDoc}
+   */
+  @Override
+  public PageVersion getPageVersionById(Long versionId) {
+    if (versionId == null) {
+      throw new IllegalArgumentException("version id is mandatory");
+    }
+    return dataStorage.getPageVersionById(versionId);
+  }
 }
diff --git a/notes-service/src/test/java/org/exoplatform/wiki/jpa/JPADataStorageTest.java b/notes-service/src/test/java/org/exoplatform/wiki/jpa/JPADataStorageTest.java
index bfdfc2fff9..c4bd2b75b1 100644
--- a/notes-service/src/test/java/org/exoplatform/wiki/jpa/JPADataStorageTest.java
+++ b/notes-service/src/test/java/org/exoplatform/wiki/jpa/JPADataStorageTest.java
@@ -1164,6 +1164,28 @@ public void testDeleteOrphanDraftPagesByParentPage() throws Exception {
     persist();
     assertNull(draftPageDAO.find(draft.getId()));
   }
+  
+  public void testGetVersionById() throws Exception {
+    // Given
+    Wiki wiki = new Wiki();
+    wiki.setType("portal");
+    wiki.setOwner("wiki1");
+    wiki = storage.createWiki(wiki);
+
+    Page page = new Page();
+    page.setWikiId(wiki.getId());
+    page.setWikiType(wiki.getType());
+    page.setWikiOwner(wiki.getOwner());
+    page.setName("testGetVersionById");
+    page.setTitle("testGetVersionById");
+    page.setContent("content");
+    Page createdPage = storage.createPage(wiki, wiki.getWikiHome(), page);
+    org.exoplatform.social.core.identity.model.Identity identity =
+                                                                 Mockito.mock(org.exoplatform.social.core.identity.model.Identity.class);
+    // When
+    PageVersion pageVersion = storage.addPageVersion(createdPage, identity.getId());
+    assertNotNull(storage.getPageVersionById(Long.parseLong(pageVersion.getId())));
+  }
 
   protected void startSessionAs(String user) {
     startSessionAs(user, new HashSet<MembershipEntry>());
diff --git a/notes-service/src/test/java/org/exoplatform/wiki/service/TestNoteService.java b/notes-service/src/test/java/org/exoplatform/wiki/service/TestNoteService.java
index c180d9b811..80e03e08be 100644
--- a/notes-service/src/test/java/org/exoplatform/wiki/service/TestNoteService.java
+++ b/notes-service/src/test/java/org/exoplatform/wiki/service/TestNoteService.java
@@ -37,6 +37,7 @@
 import org.apache.commons.io.FileUtils;
 import org.exoplatform.upload.UploadResource;
 import org.exoplatform.upload.UploadService;
+import org.exoplatform.wiki.model.*;
 import org.junit.Assert;
 
 import org.exoplatform.commons.ObjectAlreadyExistsException;
@@ -48,16 +49,8 @@
 import org.exoplatform.wiki.WikiException;
 import org.exoplatform.wiki.jpa.BaseTest;
 import org.exoplatform.wiki.jpa.JPADataStorage;
-import org.exoplatform.wiki.model.DraftPage;
-import org.exoplatform.wiki.model.NoteToExport;
-import org.exoplatform.wiki.model.Page;
-import org.exoplatform.wiki.model.PageHistory;
-import org.exoplatform.wiki.model.Permission;
-import org.exoplatform.wiki.model.PermissionEntry;
-import org.exoplatform.wiki.model.PermissionType;
-import org.exoplatform.wiki.model.Wiki;
-
-public class TestNoteService extends BaseTest {
+
+ public class TestNoteService extends BaseTest {
   private WikiService wService;
   private NoteService noteService;
   private NotesExportService notesExportService;
@@ -870,4 +863,16 @@ public void testCreateDraftForExistPageWithProperties() throws Exception {
     assertNotNull(draftPage);
     assertNotNull(draftPage.getProperties());
   }
+
+  public void testGetVersionById() throws Exception {
+    Identity user = new Identity("user");
+    Wiki portalWiki = getOrCreateWiki(wService, PortalConfig.PORTAL_TYPE, "testPortal");
+    Page note = noteService.createNote(portalWiki, "Home", new Page("testGetVersionById", "testGetVersionById"), user);
+    note.setLang("en");
+    note.setTitle("english title");
+    note.setContent("english content");
+    noteService.createVersionOfNote(note, user.getUserId());
+    PageVersion pageVersion = noteService.getPublishedVersionByPageIdAndLang(Long.valueOf(note.getId()), "en");
+    assertNotNull(noteService.getPageVersionById(Long.valueOf(pageVersion.getId())));
+  }
 }

From ed1a8ecce5f666d2ccc4a9214e027af6afea7b3c Mon Sep 17 00:00:00 2001
From: Helmi Akermi <70575401+hakermi@users.noreply.github.com>
Date: Tue, 6 Aug 2024 15:00:53 +0100
Subject: [PATCH 22/40] fix: fix margin issue between save and close editor
 buttons - EXO-72923 - Meeds-io/MIPs#128 (#1062)

fix margin issue between save and close editor buttons
---
 .../vue-app/notes-rich-editor/components/NoteEditorTopBar.vue  | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue
index 05084698d4..b8c29c92fd 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue
@@ -87,7 +87,7 @@
           <div
             v-else>
             <v-btn
-              class="btn-primary primary pa-0 me-4"
+              class="btn-primary primary pa-0 me-2"
               width="42"
               height="36"
               min-width="42"
@@ -103,6 +103,7 @@
               </v-icon>
             </v-btn>
             <v-btn
+              class="me-2"
               width="36"
               min-width="36"
               height="36"

From 17d683e06ff72f097b44ba1a0ca2b17b1a00f6dc Mon Sep 17 00:00:00 2001
From: Helmi Akermi <70575401+hakermi@users.noreply.github.com>
Date: Tue, 6 Aug 2024 15:01:17 +0100
Subject: [PATCH 23/40] feat: Disable save/publish while saving draft is
 inprogress - EXO-73625 (#1061)

Disable save/publish while saving draft is inprogress
---
 .../vue-app/notes-editor/components/NotesEditorDashboard.vue   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
index e14fc42bd2..078e5e64b4 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
@@ -135,7 +135,7 @@ export default {
       return (!this.note?.title || this.note?.title?.length < 3
                                 || this.note?.title?.length > this.titleMaxLength)
                                 || (this.noteNotModified
-                                && !this.propertiesModified && !this.draftNote);
+                                && !this.propertiesModified && !this.draftNote) || this.savingDraft;
     },
     noteNotModified() {
       return this.note?.title === this.originalNote?.title && this.note?.content === this.originalNote?.content;
@@ -513,6 +513,7 @@ export default {
           };
           setTimeout(() => {
             this.draftSavingStatus = this.$t('notes.draft.savedDraftStatus');
+            this.savingDraft = false;
           }, this.autoSaveDelay/2);
         } else {
           if (!this.isDefaultContent(this.note.content)) {

From e39d85502b67abaad7822f4f37e2ab93c75e066a Mon Sep 17 00:00:00 2001
From: Helmi Akermi <70575401+hakermi@users.noreply.github.com>
Date: Tue, 6 Aug 2024 15:01:36 +0100
Subject: [PATCH 24/40] feat: Review Note display - EXO-71927 -
 Meeds-io/MIPs#128 (#1060)

Review Note display
---
 .../main/webapp/skin/less/notes/notes.less    |  23 +-
 .../notes/components/NoteBreadcrumb.vue       |  64 +++--
 .../notes/components/NotesOverview.vue        | 272 +++++++++---------
 .../notes/components/NotesTranslationMenu.vue |   2 +-
 4 files changed, 205 insertions(+), 156 deletions(-)

diff --git a/notes-webapp/src/main/webapp/skin/less/notes/notes.less b/notes-webapp/src/main/webapp/skin/less/notes/notes.less
index 2c3f0fe885..f507646f48 100644
--- a/notes-webapp/src/main/webapp/skin/less/notes/notes.less
+++ b/notes-webapp/src/main/webapp/skin/less/notes/notes.less
@@ -309,11 +309,24 @@
     min-height: calc(~"100vh - 170px");
 
     .notes-application-header {
+      .note-actions-menu {
+        right: 35px ~'; /** orientation=lt */ ';
+        right: auto ~'; /** orientation=rt */ ';
+        top: 50px !important;
+        left: auto ~'!important; /** orientation=lt */ ';
+        left: 35px ~'!important; /** orientation=rt */ ';
+      }
+
+      .note-summary {
+        font-size: 24px;
+        line-height: 1.2;
+      }
+
       .notes-title {
-        .title{
+        .title {
           font-weight: bold;
           font-family: 'Helvetica', 'Arial', sans-serif;
-          font-size: 18px!important;
+          font-size: 34px!important;
         }
         .notes-header-icons {
           min-width: 100px !important;
@@ -322,12 +335,6 @@
           button {
             padding: 1px 2px;
           }
-
-          .note-actions-menu {
-            right: 7px;
-            top: 30px !important;
-            left: auto !important;
-          }
         }
       }
 
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 06463ef9e0..7cc648d9fb 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
@@ -1,31 +1,39 @@
 <template>
   <div class="note-breadcrumb-wrapper">
-    <div v-if="noteBreadcrumb && noteBreadcrumb.length <= 4" class="notes-tree-items d-flex">
+    <div
+      v-if="noteBreadcrumb && noteBreadcrumb.length <= 4"
+      class="notes-tree-items flex-nowrap d-flex">
       <div
         v-for="(note, index) in noteBreadcrumb"
         :key="index"
         :class="noteBreadcrumb && noteBreadcrumb.length === 1 && 'single-path-element' || ''"
-        class="notes-tree-item d-flex text-truncate"
-        :style="`max-width: ${100 / (noteBreadcrumb.length)}%`">
+        class="notes-tree-item d-flex flex-nowrap  text-truncate flex-0-1">
         <v-tooltip max-width="300" bottom>
           <template #activator="{ on, attrs }">
             <v-btn
               height="20px"
-              min-width="45px"
-              class="pa-0"
+              :min-width="index && 30 || 45"
+              class="pa-0 d-block flex-shrink-1 flex-grow-0"
               :class="noteBreadcrumb[noteBreadcrumb.length-1].id === actualNoteId && 'clickable' || ''"
               text
               v-bind="attrs"
               v-on="on"
               @click="openNote(note)">
-              <a
+              <span
                 class="caption text-truncate breadCrumb-link"
-                :class="index < noteBreadcrumb.length-1 && 'path-clickable text-color' || 'text-sub-title not-clickable'">{{ note.title }}</a>
+                :class="index < noteBreadcrumb.length-1 && 'path-clickable text-sub-title' || 'text-color not-clickable'">
+                {{ note.title }}
+              </span>
             </v-btn>
           </template>
           <span class="caption">{{ note.title }}</span>
         </v-tooltip>
-        <v-icon v-if="index < noteBreadcrumb.length-1" size="18">mdi-chevron-right</v-icon>
+        <v-icon
+          v-if="index < noteBreadcrumb.length-1"
+          class="flex-grow-1 icon-default-color flex-shrink-0 mx-2"
+          size="18">
+          fas fa-chevron-right
+        </v-icon>
       </div>
     </div>
     <div v-else class="notes-tree-items notes-long-path d-flex align-center">
@@ -33,7 +41,7 @@
         <v-tooltip max-width="300" bottom>
           <template #activator="{ on, attrs }">
             <a
-              class="caption text-color text-truncate path-clickable breadCrumb-link"
+              class="caption text-sub-title text-truncate path-clickable breadCrumb-link"
               :class="noteBreadcrumb[noteBreadcrumb.length-1].id === actualNoteId && 'clickable' || ''"
               v-bind="attrs"
               v-on="on"
@@ -41,7 +49,11 @@
           </template>
           <span class="caption">{{ noteBreadcrumb && noteBreadcrumb.length && noteBreadcrumb[0].title }}</span>
         </v-tooltip>
-        <v-icon size="18">mdi-chevron-right</v-icon>
+        <v-icon
+          class="flex-grow-1 icon-default-color flex-shrink-0 mx-2"
+          size="18">
+          fas fa-chevron-right
+        </v-icon>
       </div>
       <div class="notes-tree-item long-path-second-item d-flex">
         <v-tooltip bottom>
@@ -49,24 +61,34 @@
             <v-icon
               v-bind="attrs"
               v-on="on"
-              size="24">
-              mdi-dots-horizontal
+              class="me-2 text-sub-title"
+              size="18">
+              fas fa-ellipsis-h
             </v-icon>
           </template>
           <p
             v-for="(note, index) in noteBreadcrumb"
             :key="index"
             class="mb-0">
-            <span v-if="index > 0 && index < noteBreadcrumb.length-2" class="caption"><v-icon size="18" class="tooltip-chevron">mdi-chevron-right</v-icon> {{ note.title }}</span>
+            <span
+              v-if="index > 0 && index < noteBreadcrumb.length-2"
+              class="caption">
+              <v-icon
+                size="18"
+                class="tooltip-chevron me-2">
+                fas fa-chevron-right
+              </v-icon>
+              {{ note.title }}
+            </span>
           </p>
         </v-tooltip>
-        <v-icon class="clickable" size="18">mdi-chevron-right</v-icon>
+        <v-icon class="clickable" size="18">fas fa-chevron-right</v-icon>
       </div>
-      <div class="notes-tree-item long-path-third-item d-flex text-truncate">
+      <div class="ms-2 notes-tree-item long-path-third-item d-flex text-truncate">
         <v-tooltip max-width="300" bottom>
           <template #activator="{ on, attrs }">
             <a
-              class="caption text-color text-truncate path-clickable breadCrumb-link"
+              class="caption text-sub-title text-truncate path-clickable breadCrumb-link"
               :class="noteBreadcrumb[noteBreadcrumb.length-1].id === actualNoteId && 'clickable' || ''"
               v-bind="attrs"
               v-on="on"
@@ -74,13 +96,17 @@
           </template>
           <span class="caption">{{ noteBreadcrumb[noteBreadcrumb.length-2].title }}</span>
         </v-tooltip>
-        <v-icon size="18">mdi-chevron-right</v-icon>
+        <v-icon
+          class="flex-grow-1 icon-default-color flex-shrink-0 mx-2"
+          size="18">
+          fas fa-chevron-right
+        </v-icon>
       </div>
       <div class="notes-tree-item d-flex text-truncate">
         <v-tooltip max-width="300" bottom>
           <template #activator="{ on, attrs }">
             <a
-              class="caption text-color text-truncate text-sub-title breadCrumb-link"
+              class="caption text-color text-truncate breadCrumb-link"
               :class="noteBreadcrumb[noteBreadcrumb.length-1].id === actualNoteId && 'clickable' || ''"
               v-bind="attrs"
               v-on="on"
@@ -112,4 +138,4 @@ export default {
     }
   }
 };
-</script>
\ No newline at end of file
+</script>
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 5afab9c977..06281a7fb8 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
@@ -9,119 +9,148 @@
         class="notes-application application-body pa-5"
         ref="content">
         <div class="notes-application-header">
-          <div class="notes-title d-flex justify-space-between pb-4 ps-1">
-            <span
-              ref="noteTitle"
-              class="title text-color mt-n1">
-              {{ noteTitle }}
-            </span>
-            <div
-              id="note-actions-menu"
-              v-show="loadData && !hideElementsForSavingPDF"
-              class="notes-header-icons text-right">
-              <div
-                class="d-inline-flex">
-                <v-tooltip bottom v-if="!hasDraft && isManager">
+          <v-row
+            no-gutters
+            class="mb-5">
+            <v-col
+              xl="11"
+              lg="10"
+              md="10"
+              sm="8"
+              cols="6">
+              <div v-if="!hideElementsForSavingPDF" class="notes-treeview d-flex flex-grow-1">
+                <v-tooltip bottom>
                   <template #activator="{ on, attrs }">
                     <v-btn
                       v-on="on"
                       v-bind="attrs"
-                      class="pa-0 mt-0"
-                      @click="addNote"
-                      icon>
-                      <v-icon
-                        size="16"
-                        class="clickable add-note-click">
-                        fas fa-plus
-                      </v-icon>
-                    </v-btn>
-                  </template>
-                  <span class="caption">{{ $t('notes.label.addPage') }}</span>
-                </v-tooltip>
-              </div>
-              <div
-                class="d-inline-flex">
-                <v-tooltip bottom v-if="isManager">
-                  <template #activator="{ on, attrs }">
-                    <v-btn
+                      class="pa-0 me-2"
+                      width="36"
+                      min-width="36"
+                      height="36"
                       icon
-                      v-on="on"
-                      v-bind="attrs"
-                      class="pa-0 mt-0"
-                      @click="editNote">
+                      @click="$refs.notesBreadcrumb.open(note, 'displayNote')">
                       <v-icon
-                        size="16"
-                        class="clickable edit-note-click">
-                        fas fa-edit
+                        class="icon-default-color"
+                        size="20">
+                        fas fa-sitemap
                       </v-icon>
                     </v-btn>
                   </template>
-                  <span class="caption">{{ $t('notes.label.editPage') }}</span>
+                  <span class="caption">{{ $t('notes.label.noteTreeview.tooltip') }}</span>
                 </v-tooltip>
+                <note-breadcrumb
+                  class="my-auto"
+                  :note-breadcrumb="notebreadcrumb"
+                  :actual-note-id="note.id"
+                  @open-note="getNoteByName($event, 'breadCrumb', true)" />
               </div>
-
-              <note-favorite-action
-                :note="note"
-                :activity-id="note.activityId" />
+            </v-col>
+            <v-col
+              xl="1"
+              lg="2"
+              md="2"
+              sm="4"
+              cols="6">
               <div
-                class="d-inline-flex">
-                <v-tooltip bottom>
-                  <template #activator="{ on, attrs }">
-                    <v-btn
-                      v-on="on"
-                      @click="$root.$emit('display-action-menu')"
-                      v-bind="attrs"
-                      class="pa-0 mt-0"
-                      icon>
-                      <v-icon
-                        size="16"
-                        class="clickable">
-                        fas fa-ellipsis-v
-                      </v-icon>
-                    </v-btn>
-                  </template>
-                  <span class="caption">{{ $t('notes.label.openMenu') }}</span>
-                </v-tooltip>
+                id="note-actions-menu"
+                v-show="loadData && !hideElementsForSavingPDF"
+                class="notes-header-icons text-right d-flex justify-end">
+                <div
+                  class="d-inline-flex">
+                  <v-tooltip bottom v-if="!hasDraft && isManager">
+                    <template #activator="{ on, attrs }">
+                      <v-btn
+                        v-on="on"
+                        v-bind="attrs"
+                        class="pa-0 mt-0"
+                        @click="addNote"
+                        icon>
+                        <v-icon
+                          size="20"
+                          class="clickable add-note-click">
+                          fas fa-plus
+                        </v-icon>
+                      </v-btn>
+                    </template>
+                    <span class="caption">{{ $t('notes.label.addPage') }}</span>
+                  </v-tooltip>
+                </div>
+                <div
+                  class="d-inline-flex ms-2">
+                  <v-tooltip bottom v-if="isManager">
+                    <template #activator="{ on, attrs }">
+                      <v-btn
+                        icon
+                        v-on="on"
+                        v-bind="attrs"
+                        class="pa-0 mt-0"
+                        @click="editNote">
+                        <v-icon
+                          size="20"
+                          class="clickable edit-note-click">
+                          fas fa-edit
+                        </v-icon>
+                      </v-btn>
+                    </template>
+                    <span class="caption">{{ $t('notes.label.editPage') }}</span>
+                  </v-tooltip>
+                </div>
+                <note-favorite-action
+                  class="ms-2"
+                  :note="note"
+                  :activity-id="note.activityId" />
+                <div
+                  class="d-inline-flex ms-2">
+                  <v-tooltip bottom>
+                    <template #activator="{ on, attrs }">
+                      <v-btn
+                        v-on="on"
+                        @click="$root.$emit('display-action-menu')"
+                        v-bind="attrs"
+                        class="pa-0 mt-0"
+                        icon>
+                        <v-icon
+                          size="20"
+                          class="clickable">
+                          fas fa-ellipsis-v
+                        </v-icon>
+                      </v-btn>
+                    </template>
+                    <span class="caption">{{ $t('notes.label.openMenu') }}</span>
+                  </v-tooltip>
+                </div>
               </div>
-            </div>
-          </div>
-          <div v-if="!hideElementsForSavingPDF" class="notes-treeview d-flex flex-inline">
-            <v-tooltip bottom>
-              <template #activator="{ on, attrs }">
-                <v-btn
-                  @click="$refs.notesBreadcrumb.open(note, 'displayNote')"
-                  v-on="on"
-                  class="pa-0"
-                  min-width="24"
-                  v-bind="attrs"
-                  text>
-                  <i
-                    class="uiIcon uiTreeviewIcon primary--text"></i>
-                </v-btn>
-              </template>
-              <span class="caption">{{ $t('notes.label.noteTreeview.tooltip') }}</span>
-            </v-tooltip>
-            <note-breadcrumb
-              class="pt-2 pe-1 pl-1"
-              :note-breadcrumb="notebreadcrumb"
-              :actual-note-id="note.id"
-              @open-note="getNoteByName($event, 'breadCrumb', true)" />
-          </div>
-          <div v-show="!hideElementsForSavingPDF" class="notes-last-update-info">
+            </v-col>
+          </v-row>
+          <v-img
+            v-if="hasFeaturedImage"
+            :lazy-src="featuredImageLink"
+            :alt="featuredImageAltText"
+            :src="featuredImageLink"
+            contain
+            class="mb-5"
+            width="100%"
+            max-height="400" />
+          <div class="notes-title mb-3">
+            <span
+              ref="noteTitle"
+              class="title text-color">
+              {{ noteTitle }}
+            </span>
             <notes-translation-menu
               :note="note"
               :translations="translations"
               :selected-translation="selectedTranslation"
               @change-translation="changeTranslation" />
-            <span
-              v-show="lastNoteVersion"
-              class="note-version border-radius primary my-auto px-2 font-weight-bold me-2 caption clickable"
-              @click="openNoteVersionsHistoryDrawer(noteVersions, isManager)">V{{ lastNoteVersion }}</span>
-            <span class="caption text-sub-title font-italic">{{ $t('notes.label.LastModifiedBy', {0: lastNoteUpdatedBy, 1: displayedDate}) }}</span>
           </div>
+          <p
+            v-if="hasSummary"
+            class="note-summary text-sub-title mb-8">
+            {{ note?.properties?.summary }}
+          </p>
         </div>
-        <v-divider class="my-4" />
-        <div class="note-content" v-if="!hasEmptyContent && !isHomeNoteDefaultContent">
+        <div class="note-content my-4" v-if="!hasEmptyContent && !isHomeNoteDefaultContent">
           <div
             class="notes-application-content text-color">
             <component :is="notesContentProcessor" />
@@ -319,7 +348,9 @@ export default {
       translations: [],
       languages: [],
       slectedLanguage: null,
-      originalVersion: { value: null, text: this.$t('notes.label.translation.originalVersion') },
+      translationsMenu: false,
+      originalVersion: { value: '', text: this.$t('notes.label.translation.originalVersion') },
+      illustrationBaseUrl: `${eXo.env.portal.context}/${eXo.env.portal.rest}/notes/illustration/`,
     };
   },
   watch: {
@@ -354,6 +385,24 @@ export default {
     }
   },
   computed: {
+    hasSummary() {
+      return this.note?.properties?.summary?.length;
+    },
+    langParam() {
+      return this.note?.lang && `&lang=${this.note?.lang}` || '';
+    },
+    noteFeatureImageUpdatedDate() {
+      return this.note?.properties?.featuredImage?.lastUpdated || 0;
+    },
+    hasFeaturedImage() {
+      return !!this.note?.properties?.featuredImage?.id;
+    },
+    featuredImageAltText() {
+      return this.note?.properties?.featuredImage?.altText;
+    },
+    featuredImageLink() {
+      return `${this.illustrationBaseUrl}${this.noteId}?v=${this.noteFeatureImageUpdatedDate}&isDraft=false${this.langParam}&size=0x400`;
+    },
     notesContentProcessor() {
       return {
         template: `<div class='rich-editor-content extended-rich-content'>${this.$noteUtils.getContentToDisplay(this.noteContent, this.note?.id, this.noteBookType, this.noteBookOwner, true)}</div>`,
@@ -424,45 +473,12 @@ export default {
     hasMoreVersions() {
       return this.allNoteVersionsCount > this.versionsPageSize;
     },
-    noteVersionContent() {
-      return this.note.content && this.noteContent && this.$noteUtils.getContentToDisplay(this.noteContent, this.note?.id, this.noteBookType, this.noteBookOwner, true);
-    },
     isHomeNoteDefaultContent() {
       return !this.note.parentPageId && ( this.noteContent===`<h1> Welcome to Space ${this.spaceDisplayName} Notes Home </h1>` || this.noteContent === '');
     },
-    lastNoteVersion() {
-      return this.noteVersions && this.noteVersions[0] && this.noteVersions[0].versionNumber;
-
-    },
-    NoteTranslations() {
-      return this.translations && this.noteVersions[0] && this.noteVersions[0].versionNumber;
-
-    },
-    lastNoteUpdatedBy() {
-      if (this.isDraft) {
-        return this.note.authorFullName;
-      } else {
-        if (this.displayLastVersion) {
-          return this.noteVersions && this.noteVersions[0] && this.noteVersions[0].authorFullName;
-        } else {
-          return this.actualVersion.authorFullName;
-        }
-      }
-    },
     noteAllChildren() {
       return this.noteChildren && this.noteChildren.length && this.noteChildren[0].children;
     },
-    displayedDate() {
-      if (this.isDraft && this.note && this.note.updatedDate && this.note.updatedDate.time) {
-        return this.$dateUtil.formatDateObjectToDisplay(new Date(this.note.updatedDate.time), this.dateTimeFormat, this.lang) || '';
-      } else {
-        if (this.displayLastVersion) {
-          return this.noteVersions && this.noteVersions[0] && this.noteVersions[0].updatedDate.time && this.$dateUtil.formatDateObjectToDisplay(new Date(this.noteVersions[0].updatedDate.time), this.dateTimeFormat, this.lang) || '';
-        } else {
-          return this.$dateUtil.formatDateObjectToDisplay(new Date(this.actualVersion.updatedDate.time), this.dateTimeFormat, this.lang) || '';
-        }
-      }
-    },
     isMobile() {
       return this.$vuetify?.breakpoint?.smAndDown;
     },
@@ -509,7 +525,7 @@ export default {
     appName() {
       const uris = eXo.env.portal.selectedNodeUri.split('/');
       return uris[uris.length - 1];
-    },
+    }
   },
   created() {
     this.getAvailableLanguages();
diff --git a/notes-webapp/src/main/webapp/vue-app/notes/components/NotesTranslationMenu.vue b/notes-webapp/src/main/webapp/vue-app/notes/components/NotesTranslationMenu.vue
index 72d37bf9d6..59fd6430cc 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes/components/NotesTranslationMenu.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes/components/NotesTranslationMenu.vue
@@ -29,7 +29,7 @@
       <v-icon
         size="22"
         :class="langButtonColor"
-        class="remove-focus my-auto pa-0  pe-1"
+        class="remove-focus mt-n2 pa-0  ms-5"
         v-bind="attrs"
         v-on="on">
         fa-language

From 1db3b326168eb17e88816192762ec2a037193923 Mon Sep 17 00:00:00 2001
From: Ayoub Zayati <ayoub.ezzayati@exoplatform.com>
Date: Fri, 23 Aug 2024 14:52:20 +0100
Subject: [PATCH 25/40] fix: Adapt Thumbnail Service API change -
 Meeds-io/MIPs#128 (#1069)

After merging MIP-134, the class ImageThumbnailService.java location has been changed from social module to gatein-portal module with a package modification, in addition to that the used method getOrCreateThumbnail signature has been changed also.
After this change, the notes code will be adapted according to theses modifications.
---
 .../wiki/service/impl/NoteServiceImpl.java    | 45 ++++++++++---------
 1 file changed, 24 insertions(+), 21 deletions(-)

diff --git a/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java b/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java
index 56ddb2ed7a..e61a252b1c 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java
@@ -28,36 +28,31 @@
 import java.nio.charset.Charset;
 import java.nio.file.Files;
 import java.text.SimpleDateFormat;
-import java.util.*;
+import java.util.ArrayList;
+import java.util.Base64;
+import java.util.Calendar;
+import java.util.Date;
+import java.util.HashMap;
+import java.util.HashSet;
+import java.util.LinkedList;
+import java.util.List;
+import java.util.Map;
+import java.util.Queue;
+import java.util.Set;
 import java.util.concurrent.ConcurrentHashMap;
 import java.util.regex.Matcher;
-import java.util.stream.Collectors;
 
-import io.meeds.notes.model.NoteFeaturedImage;
-import io.meeds.notes.model.NoteMetadataObject;
-import io.meeds.notes.model.NotePageProperties;
-import io.meeds.notes.notifications.plugin.MentionInNoteNotificationPlugin;
 import org.apache.commons.collections4.MapUtils;
 import org.apache.commons.lang3.StringUtils;
-
-import org.exoplatform.commons.api.notification.NotificationContext;
-import org.exoplatform.commons.api.notification.model.PluginKey;
-import org.exoplatform.commons.exception.ObjectNotFoundException;
-import org.exoplatform.commons.file.model.FileInfo;
-import org.exoplatform.commons.file.model.FileItem;
-import org.exoplatform.commons.file.services.FileService;
-import org.exoplatform.social.metadata.model.MetadataKey;
-import org.exoplatform.social.metadata.model.MetadataType;
-import org.exoplatform.social.metadata.thumbnail.ImageThumbnailService;
-import org.exoplatform.commons.notification.impl.NotificationContextImpl;
-import org.exoplatform.social.notification.LinkProviderUtils;
-import org.exoplatform.upload.UploadResource;
-import org.exoplatform.upload.UploadService;
 import org.gatein.api.EntityNotFoundException;
 
 import com.fasterxml.jackson.core.type.TypeReference;
 import com.fasterxml.jackson.databind.ObjectMapper;
 
+import org.exoplatform.commons.exception.ObjectNotFoundException;
+import org.exoplatform.commons.file.model.FileInfo;
+import org.exoplatform.commons.file.model.FileItem;
+import org.exoplatform.commons.file.services.FileService;
 import org.exoplatform.commons.utils.CommonsUtils;
 import org.exoplatform.commons.utils.ObjectPageList;
 import org.exoplatform.commons.utils.PageList;
@@ -75,7 +70,12 @@
 import org.exoplatform.social.core.space.spi.SpaceService;
 import org.exoplatform.social.metadata.MetadataService;
 import org.exoplatform.social.metadata.model.MetadataItem;
+import org.exoplatform.social.metadata.model.MetadataKey;
 import org.exoplatform.social.metadata.model.MetadataObject;
+import org.exoplatform.social.metadata.model.MetadataType;
+import org.exoplatform.services.thumbnail.ImageThumbnailService;
+import org.exoplatform.upload.UploadResource;
+import org.exoplatform.upload.UploadService;
 import org.exoplatform.wiki.WikiException;
 import org.exoplatform.wiki.model.DraftPage;
 import org.exoplatform.wiki.model.ImportList;
@@ -102,6 +102,9 @@
 import org.exoplatform.wiki.utils.NoteConstants;
 import org.exoplatform.wiki.utils.Utils;
 
+import io.meeds.notes.model.NoteFeaturedImage;
+import io.meeds.notes.model.NoteMetadataObject;
+import io.meeds.notes.model.NotePageProperties;
 import io.meeds.notes.service.NotePageViewService;
 import io.meeds.social.cms.service.CMSService;
 import lombok.SneakyThrows;
@@ -2014,7 +2017,7 @@ public NoteFeaturedImage getNoteFeaturedImageInfo(Long noteId, String lang, bool
         if (thumbnailSize != null) {
           ImageThumbnailService thumbnailService = CommonsUtils.getService(ImageThumbnailService.class);
           int[] dimension = org.exoplatform.social.common.Utils.parseDimension(thumbnailSize);
-          fileItem = thumbnailService.getOrCreateThumbnail(fileItem, identity, dimension[0], dimension[1]);
+          fileItem = thumbnailService.getOrCreateThumbnail(fileItem, dimension[0], dimension[1]);
         }
         return new NoteFeaturedImage(fileInfo.getId(),
                                      fileInfo.getName(),

From bc178a266f51c74f568c23012e2c13da83e6af50 Mon Sep 17 00:00:00 2001
From: Ayoub Zayati <ayoub.ezzayati@exoplatform.com>
Date: Wed, 4 Sep 2024 11:46:01 +0200
Subject: [PATCH 26/40] feat: Add NOTE_ID param when sending mention in note
 notification - EXO-73814 - Meeds-io/MIPs#128 (#1086)

---
 .../plugin/MentionInNoteNotificationPlugin.java    | 14 ++++++++------
 .../java/org/exoplatform/wiki/utils/Utils.java     |  2 ++
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/notes-service/src/main/java/io/meeds/notes/notifications/plugin/MentionInNoteNotificationPlugin.java b/notes-service/src/main/java/io/meeds/notes/notifications/plugin/MentionInNoteNotificationPlugin.java
index 9a39f4c839..ed4b2dc6cd 100644
--- a/notes-service/src/main/java/io/meeds/notes/notifications/plugin/MentionInNoteNotificationPlugin.java
+++ b/notes-service/src/main/java/io/meeds/notes/notifications/plugin/MentionInNoteNotificationPlugin.java
@@ -18,6 +18,11 @@
  */
 package io.meeds.notes.notifications.plugin;
 
+import java.util.ArrayList;
+import java.util.HashSet;
+import java.util.List;
+import java.util.Set;
+
 import org.exoplatform.commons.api.notification.NotificationContext;
 import org.exoplatform.commons.api.notification.model.ArgumentLiteral;
 import org.exoplatform.commons.api.notification.model.NotificationInfo;
@@ -31,12 +36,6 @@
 import org.exoplatform.services.organization.UserHandler;
 import org.exoplatform.social.notification.Utils;
 
-import java.util.ArrayList;
-import java.util.HashSet;
-import java.util.List;
-import java.util.Set;
-import java.util.regex.Pattern;
-
 public class MentionInNoteNotificationPlugin extends BaseNotificationPlugin {
 
   public final static String                  ID                 = "MentionInNoteNotificationPlugin";
@@ -55,6 +54,8 @@ public class MentionInNoteNotificationPlugin extends BaseNotificationPlugin {
 
   public static final ArgumentLiteral<Set>    MENTIONED_IDS      = new ArgumentLiteral<Set>(Set.class, "MENTIONED_IDS");
 
+  public static final ArgumentLiteral<String> NOTE_URL           = new ArgumentLiteral<>(String.class, "NOTE_URL");
+
   public static final ArgumentLiteral<String> NOTE_TITLE         = new ArgumentLiteral<>(String.class, "NOTE_TITLE");
 
   public static final ArgumentLiteral<String> SPACE_ID           = new ArgumentLiteral<>(String.class, "SPACE_ID");
@@ -91,6 +92,7 @@ public NotificationInfo makeNotification(NotificationContext ctx) {
                            .setFrom(currentUserName)
                            .to(new ArrayList<>(receivers))
                            .key(getKey())
+                           .with(NOTE_URL.getKey(), ctx.value(NOTE_URL))
                            .with(NOTE_TITLE.getKey(), ctx.value(NOTE_TITLE))
                            .with(NOTE_AUTHOR.getKey(), ctx.value(NOTE_AUTHOR))
                            .with(AUTHOR_AVATAR_URL.getKey(), ctx.value(AUTHOR_AVATAR_URL))
diff --git a/notes-service/src/main/java/org/exoplatform/wiki/utils/Utils.java b/notes-service/src/main/java/org/exoplatform/wiki/utils/Utils.java
index 3502775ab8..9c8e87b64e 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/utils/Utils.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/utils/Utils.java
@@ -823,6 +823,8 @@ public static void sendMentionInNoteNotification(Page note, Page originalNote, S
                             note.getAuthor())
                     .append(MentionInNoteNotificationPlugin.SPACE_ID,
                             space.getId())
+                    .append(MentionInNoteNotificationPlugin.NOTE_URL,
+                            note.getUrl())
                     .append(MentionInNoteNotificationPlugin.NOTE_TITLE,
                             note.getTitle())
                     .append(MentionInNoteNotificationPlugin.AUTHOR_AVATAR_URL,

From 85f2f33f0460276cf5dcd65360b32be73d9286ea Mon Sep 17 00:00:00 2001
From: Ayoub Zayati <ayoub.ezzayati@exoplatform.com>
Date: Thu, 22 Aug 2024 11:38:33 +0100
Subject: [PATCH 27/40] Fix: Fix issues when editing notes/news properties -
 EXO-73674_EXO-73696 - Meeds-io/MIPs#128 (#1065)

---
 .../meeds/notes/model/NoteFeaturedImage.java  |   4 -
 .../notes/rest/model/FeaturedImageEntity.java |   2 -
 .../meeds/notes/rest/utils/EntityBuilder.java |   1 -
 .../exoplatform/wiki/jpa/JPADataStorage.java  |  12 +
 .../exoplatform/wiki/service/DataStorage.java |   2 +
 .../exoplatform/wiki/service/NoteService.java |  19 +-
 .../wiki/service/PageUpdateType.java          |   3 +-
 .../wiki/service/impl/NoteServiceImpl.java    | 269 +++++++++---------
 .../wiki/service/rest/NotesRestService.java   |  26 +-
 .../wiki/service/TestNoteService.java         |   7 +-
 .../components/NotesEditorDashboard.vue       |   9 +-
 .../components/NoteEditorMetadataDrawer.vue   |   6 +-
 .../notes/components/NotesOverview.vue        |   2 +-
 13 files changed, 204 insertions(+), 158 deletions(-)

diff --git a/notes-service/src/main/java/io/meeds/notes/model/NoteFeaturedImage.java b/notes-service/src/main/java/io/meeds/notes/model/NoteFeaturedImage.java
index 56e0bc1b64..c1cffc8578 100644
--- a/notes-service/src/main/java/io/meeds/notes/model/NoteFeaturedImage.java
+++ b/notes-service/src/main/java/io/meeds/notes/model/NoteFeaturedImage.java
@@ -40,8 +40,6 @@ public class NoteFeaturedImage implements Serializable {
 
   private Long                  lastUpdated;
 
-  private String                base64Data;
-
   private String                uploadId;
 
   private String                altText;
@@ -65,14 +63,12 @@ public NoteFeaturedImage(Long id,
   }
 
   public NoteFeaturedImage(Long id,
-                           String base64Data,
                            String mimeType,
                            String uploadId,
                            String altText,
                            Long lastUpdated,
                            boolean toDelete) {
     this.id = id;
-    this.base64Data = base64Data;
     this.mimeType = mimeType;
     this.uploadId = uploadId;
     this.altText = altText;
diff --git a/notes-service/src/main/java/io/meeds/notes/rest/model/FeaturedImageEntity.java b/notes-service/src/main/java/io/meeds/notes/rest/model/FeaturedImageEntity.java
index eaf1bd20fb..25c09c252d 100644
--- a/notes-service/src/main/java/io/meeds/notes/rest/model/FeaturedImageEntity.java
+++ b/notes-service/src/main/java/io/meeds/notes/rest/model/FeaturedImageEntity.java
@@ -31,8 +31,6 @@ public class FeaturedImageEntity implements Serializable {
 
   private Long    id;
 
-  private String  base64Data;
-
   private String  mimeType;
 
   private String  uploadId;
diff --git a/notes-service/src/main/java/io/meeds/notes/rest/utils/EntityBuilder.java b/notes-service/src/main/java/io/meeds/notes/rest/utils/EntityBuilder.java
index 9d7603a8cf..c382f8e012 100644
--- a/notes-service/src/main/java/io/meeds/notes/rest/utils/EntityBuilder.java
+++ b/notes-service/src/main/java/io/meeds/notes/rest/utils/EntityBuilder.java
@@ -48,7 +48,6 @@ public static NoteFeaturedImage toNoteFeaturedImage(FeaturedImageEntity featured
       return null;
     }
     return new NoteFeaturedImage(featuredImageEntity.getId(),
-                                 featuredImageEntity.getBase64Data(),
                                  featuredImageEntity.getMimeType(),
                                  featuredImageEntity.getUploadId(),
                                  featuredImageEntity.getAltText(),
diff --git a/notes-service/src/main/java/org/exoplatform/wiki/jpa/JPADataStorage.java b/notes-service/src/main/java/org/exoplatform/wiki/jpa/JPADataStorage.java
index e251ce474b..da594544c5 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/jpa/JPADataStorage.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/jpa/JPADataStorage.java
@@ -669,6 +669,17 @@ public Page getExsitedOrNewDraftPageById(String wikiType, String wikiOwner, Stri
     return draftPage;
   }
 
+  @Override
+  public DraftPage getDraftOfPageByLang(Page page, String lang) throws WikiException {
+    List<DraftPageEntity> draftPages = draftPageDAO.findDraftPagesByTargetPage(Long.parseLong(page.getId()));
+    for (DraftPageEntity draftPage : draftPages) {
+      if (draftPage != null && StringUtils.equals(draftPage.getLang(), lang)) {
+        return convertDraftPageEntityToDraftPage(draftPage);
+      }
+    }
+    return null;
+  }
+  
   @Override
   public List<DraftPage> getDraftsOfPage(Long pageId) {
     List<DraftPage> draftPages = new ArrayList<>();
@@ -679,6 +690,7 @@ public List<DraftPage> getDraftsOfPage(Long pageId) {
 
     return draftPages;
   }
+  
   @Override
   public DraftPage getDraft(WikiPageParams wikiPageParams) throws WikiException {
     DraftPage latestDraft = null;
diff --git a/notes-service/src/main/java/org/exoplatform/wiki/service/DataStorage.java b/notes-service/src/main/java/org/exoplatform/wiki/service/DataStorage.java
index 275c8d438d..f629221a5d 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/service/DataStorage.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/service/DataStorage.java
@@ -71,6 +71,8 @@ public interface DataStorage {
   public Page getPageById(String id) throws WikiException;
 
   public DraftPage getDraftPageById(String id) throws WikiException;
+  
+  public DraftPage getDraftOfPageByLang(Page page, String lang) throws WikiException;
 
   public Page getParentPageOf(Page page) throws WikiException;
   
diff --git a/notes-service/src/main/java/org/exoplatform/wiki/service/NoteService.java b/notes-service/src/main/java/org/exoplatform/wiki/service/NoteService.java
index acad536943..3cd6f971da 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/service/NoteService.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/service/NoteService.java
@@ -364,9 +364,9 @@ List<BreadcrumbData> getBreadCrumb(String noteType,
    *
    * @param param Note location params.
    * @param lang draft lang.
-   * @throws WikiException if an error occured
+   * @throws Exception if an error occured
    */
-  void removeDraftOfNote(WikiPageParams param, String lang) throws WikiException;
+  void removeDraftOfNote(WikiPageParams param, String lang) throws Exception;
 
   /**
    * Remove the Drafts of a note
@@ -400,8 +400,9 @@ List<BreadcrumbData> getBreadCrumb(String noteType,
    *
    * @param draftId Technical Id of the draft page.
    * @throws WikiException if an error occured
+   * @throws Exception 
    */
-  void removeDraftById(String draftId) throws WikiException;
+  void removeDraftById(String draftId) throws Exception;
 
   /**
    * Gets all the Histories of the given note
@@ -469,7 +470,8 @@ List<BreadcrumbData> getBreadCrumb(String noteType,
    */
   Page updateNote(Page note, PageUpdateType type, Identity userIdentity) throws WikiException,
                                                                          IllegalAccessException,
-                                                                         EntityNotFoundException;
+                                                                         EntityNotFoundException,
+                                                                         Exception;
 
   /**
    * Update the given note. This does not automatically create a new version. If
@@ -623,7 +625,7 @@ DraftPage createDraftForExistPage(DraftPage draftNoteToSave,
    */
   void importNotes(String zipLocation, Page parent, String conflict, Identity userIdentity) throws WikiException,
                                                                                             IllegalAccessException,
-                                                                                            IOException;
+                                                                                            IOException, Exception;
 
   /**
    * Import Notes from a list of files
@@ -640,7 +642,7 @@ void importNotes(String zipLocation, Page parent, String conflict, Identity user
    */
   void importNotes(List<String> files, Page parent, String conflict, Identity userIdentity) throws WikiException,
                                                                                             IllegalAccessException,
-                                                                                            IOException;
+                                                                                            IOException, Exception;
 
   /**
    * Searches in all wiki pages.
@@ -829,4 +831,9 @@ Page getNoteByIdAndLang(Long pageId, Identity userIdentity, String source, Strin
    * @return {@link PageVersion}
    */
   PageVersion getPageVersionById(Long versionId);
+
+  /**
+   * {@inheritDoc}
+   */
+  DraftPage getDraftOfPageByLang(WikiPageParams param, String lang) throws WikiException;
 }
diff --git a/notes-service/src/main/java/org/exoplatform/wiki/service/PageUpdateType.java b/notes-service/src/main/java/org/exoplatform/wiki/service/PageUpdateType.java
index 7a6ae24056..abdbea0dac 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/service/PageUpdateType.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/service/PageUpdateType.java
@@ -10,5 +10,6 @@ public enum PageUpdateType {
   EDIT_PAGE_CONTENT_AND_TITLE,
   EDIT_PAGE_PERMISSIONS,
   MOVE_PAGE,
-  PUBLISH
+  PUBLISH,
+  EDIT_PAGE_PROPERTIES
 }
diff --git a/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java b/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java
index e61a252b1c..a92aaa9742 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java
@@ -20,16 +20,12 @@
 
 package org.exoplatform.wiki.service.impl;
 
-import java.io.ByteArrayInputStream;
-import java.io.File;
-import java.io.IOException;
+import java.io.*;
 import java.net.MalformedURLException;
 import java.net.URL;
-import java.nio.charset.Charset;
 import java.nio.file.Files;
 import java.text.SimpleDateFormat;
 import java.util.ArrayList;
-import java.util.Base64;
 import java.util.Calendar;
 import java.util.Date;
 import java.util.HashMap;
@@ -167,6 +163,10 @@ public class NoteServiceImpl implements NoteService {
   private final FileService                               fileService;
 
   private final UploadService                             uploadService;
+  
+  private final MetadataService                           metadataService;
+  
+  private final ImageThumbnailService                     imageThumbnailService;
 
   private final HTMLUploadImageProcessor                  htmlUploadImageProcessor;
 
@@ -176,7 +176,11 @@ public NoteServiceImpl(DataStorage dataStorage,
                          IdentityManager identityManager,
                          SpaceService spaceService,
                          CMSService cmsService,
-                         ListenerService listenerService, FileService fileService, UploadService uploadService) {
+                         ListenerService listenerService,
+                         FileService fileService,
+                         UploadService uploadService,
+                         MetadataService metadataService,
+                         ImageThumbnailService imageThumbnailService) {
     this.dataStorage = dataStorage;
     this.wikiService = wikiService;
     this.identityManager = identityManager;
@@ -187,6 +191,8 @@ public NoteServiceImpl(DataStorage dataStorage,
     this.cmsService = cmsService;
     this.fileService = fileService;
     this.uploadService = uploadService;
+    this.metadataService = metadataService;
+    this.imageThumbnailService = imageThumbnailService;
     this.htmlUploadImageProcessor = null;
   }
 
@@ -196,7 +202,11 @@ public NoteServiceImpl(DataStorage dataStorage,
                          IdentityManager identityManager,
                          SpaceService spaceService,
                          CMSService cmsService,
-                         ListenerService listenerService, FileService fileService, UploadService uploadService,
+                         ListenerService listenerService,
+                         FileService fileService,
+                         UploadService uploadService,
+                         MetadataService metadataService,
+                         ImageThumbnailService imageThumbnailService,
                          HTMLUploadImageProcessor htmlUploadImageProcessor) {
     this.dataStorage = dataStorage;
     this.wikiService = wikiService;
@@ -208,6 +218,8 @@ public NoteServiceImpl(DataStorage dataStorage,
     this.cmsService = cmsService;
     this.fileService = fileService;
     this.uploadService = uploadService;
+    this.metadataService = metadataService;
+    this.imageThumbnailService = imageThumbnailService;
     this.htmlUploadImageProcessor = htmlUploadImageProcessor;
   }
 
@@ -238,26 +250,14 @@ public Page createNote(Wiki noteBook, String parentNoteName, Page note, Identity
       NotePageProperties properties = note.getProperties();
       try {
         if (properties != null) {
+          properties.setNoteId(Long.parseLong(createdPage.getId()));
+          properties.setDraft(false);
+          properties =
+                  saveNoteMetadata(properties,
+                          note.getLang(),
+                          Long.valueOf(identityManager.getOrCreateUserIdentity(userIdentity.getUserId()).getId()));
           DraftPage draftPage = getDraftNoteById(String.valueOf(properties.getNoteId()), userIdentity.getUserId());
           if (draftPage != null) {
-            NoteFeaturedImage featuredImage = properties.getFeaturedImage();
-            if (featuredImage != null && featuredImage.getId() != null && featuredImage.getId() > 0) {
-              moveOrCopyNotePageProperties(draftPage,
-                                           createdPage,
-                                           draftPage.getLang(),
-                                           note.getLang(),
-                                           NOTE_METADATA_DRAFT_PAGE_OBJECT_TYPE,
-                                           NOTE_METADATA_PAGE_OBJECT_TYPE,
-                                           userIdentity.getUserId(),
-                                           true);
-            } else {
-              properties.setNoteId(Long.parseLong(createdPage.getId()));
-              properties.setDraft(false);
-              properties = saveNoteMetadata(properties,
-                                            note.getLang(),
-                                            Long.valueOf(identityManager.getOrCreateUserIdentity(userIdentity.getUserId())
-                                                                        .getId()));
-            }
             removeDraftById(draftPage.getId());
             invalidateCache(draftPage);
           }
@@ -318,7 +318,8 @@ public Page updateNote(Page note) throws WikiException {
   @Override
   public Page updateNote(Page note, PageUpdateType type, Identity userIdentity) throws WikiException,
                                                                                 IllegalAccessException,
-                                                                                EntityNotFoundException {
+                                                                                EntityNotFoundException,
+                                                                                Exception {
     Page existingNote = getNoteById(note.getId());
     if (existingNote == null) {
       throw new EntityNotFoundException("Note to update not found");
@@ -327,29 +328,25 @@ public Page updateNote(Page note, PageUpdateType type, Identity userIdentity) th
     if (userIdentity != null && !Utils.canManageNotes(userIdentity.getUserId(), space, existingNote)) {
       throw new IllegalAccessException("User does not have edit the note.");
     }
-    if (PageUpdateType.EDIT_PAGE_CONTENT.equals(type) || PageUpdateType.EDIT_PAGE_CONTENT_AND_TITLE.equals(type)) {
+    if (PageUpdateType.EDIT_PAGE_CONTENT.equals(type) || PageUpdateType.EDIT_PAGE_CONTENT_AND_TITLE.equals(type)
+        || PageUpdateType.EDIT_PAGE_PROPERTIES.equals(type)) {
       note.setUpdatedDate(Calendar.getInstance().getTime());
     }
     note.setContent(note.getContent());
     Page updatedPage = dataStorage.updatePage(note);
-    DraftPage draftPage = getLatestDraftPageByTargetPageAndLang(Long.valueOf(note.getId()), note.getLang());
-    if (userIdentity != null && draftPage != null) {
-      moveOrCopyNotePageProperties(draftPage,
-                                   note,
-                                   draftPage.getLang(),
-                                   note.getLang(),
-                                   NOTE_METADATA_DRAFT_PAGE_OBJECT_TYPE,
-                                   NOTE_METADATA_PAGE_OBJECT_TYPE,
-                                   userIdentity.getUserId(),
-                                   true);
-      NotePageProperties notePageProperties = draftPage.getProperties();
-      if (notePageProperties != null) {
-        notePageProperties.setNoteId(Long.parseLong(updatedPage.getId()));
-        notePageProperties.setDraft(false);
-        updatedPage.setProperties(notePageProperties);
+    NotePageProperties properties = note.getProperties();
+    if (userIdentity != null && properties != null) {
+      try {
+        properties.setNoteId(Long.parseLong(updatedPage.getId()));
+        properties.setDraft(false);
+        properties = saveNoteMetadata(note.getProperties(),
+                                      note.getLang(),
+                                      Long.valueOf(identityManager.getOrCreateUserIdentity(userIdentity.getUserId()).getId()));
+        updatedPage.setProperties(properties);
+      } catch (Exception e) {
+        log.error("Error while updating note metadata properties", e);
       }
     }
-
     invalidateCache(note);
 
     updatedPage.setUrl(Utils.getPageUrl(updatedPage));
@@ -912,14 +909,25 @@ public void removeDraftOfNote(Page page, String username) throws WikiException {
   public void removeDraftOfNote(Page page) throws WikiException {
     dataStorage.deleteDraftOfPage(page);
   }
-
+  
   /**
    * {@inheritDoc}
    */
   @Override
-  public void removeDraftOfNote(WikiPageParams param, String lang) throws WikiException {
+  public DraftPage getDraftOfPageByLang(WikiPageParams param, String lang) throws WikiException {
     Page page = getNoteOfNoteBookByName(param.getType(), param.getOwner(), param.getPageName());
-    dataStorage.deleteDraftOfPage(page, lang);
+    return dataStorage.getDraftOfPageByLang(page, lang);
+  }
+
+  /**
+   * {@inheritDoc}
+   */
+  @Override
+  public void removeDraftOfNote(WikiPageParams param, String lang) throws Exception {
+    DraftPage draftPage = getDraftOfPageByLang(param, lang);
+    if (draftPage != null) {
+      removeDraftById(draftPage.getId());
+    }
   }
 
   /**
@@ -934,8 +942,14 @@ public void removeDraft(String draftName) throws WikiException {
    * {@inheritDoc}
    */
   @Override
-  public void removeDraftById(String draftId) throws WikiException {
+  public void removeDraftById(String draftId) throws Exception {
+    Page draftNote = dataStorage.getDraftPageById(draftId);
     dataStorage.deleteDraftById(draftId);
+    MetadataItem draftNoteMetadataItem =
+                                       getNoteMetadataItem(draftNote, draftNote.getLang(), NOTE_METADATA_DRAFT_PAGE_OBJECT_TYPE);
+    if (draftNoteMetadataItem != null) {
+      metadataService.deleteMetadataItem(draftNoteMetadataItem.getId(), false);
+    }
   }
   
   /**
@@ -945,7 +959,15 @@ public void removeDraftById(String draftId) throws WikiException {
   public List<PageHistory> getVersionsHistoryOfNote(Page note, String userName) throws WikiException {
     List<PageHistory> versionsHistory = dataStorage.getHistoryOfPage(note);
     if (versionsHistory == null || versionsHistory.isEmpty()) {
-      dataStorage.addPageVersion(note, userName);
+      PageVersion pageVersion = dataStorage.addPageVersion(note, userName);
+      pageVersion.setId(note.getId() + "-" + pageVersion.getName());
+      copyNotePageProperties(note,
+                             pageVersion,
+                             note.getLang(),
+                             null,
+                             NOTE_METADATA_PAGE_OBJECT_TYPE,
+                             NOTE_METADATA_VERSION_PAGE_OBJECT_TYPE,
+                             userName);
       versionsHistory = dataStorage.getHistoryOfPage(note);
     }
     for (PageHistory version : versionsHistory) {
@@ -977,14 +999,14 @@ public void createVersionOfNote(Page note, String userName) throws WikiException
       postUpdatePageVersionLanguage(versionLangId);
     } else {
       pageVersion.setId(note.getId() + "-" + pageVersion.getName());
-      moveOrCopyNotePageProperties(note,
-                                   pageVersion,
-                                   note.getLang(),
-                                   null,
-                                   NOTE_METADATA_PAGE_OBJECT_TYPE,
-                                   NOTE_METADATA_VERSION_PAGE_OBJECT_TYPE,
-                                   userName,
-                                   false);
+      copyNotePageProperties(note,
+                             pageVersion,
+                             note.getLang(),
+                             null,
+                             NOTE_METADATA_PAGE_OBJECT_TYPE,
+                             NOTE_METADATA_VERSION_PAGE_OBJECT_TYPE,
+                             userName
+      );
     }
   }
 
@@ -995,14 +1017,13 @@ public void createVersionOfNote(Page note, String userName) throws WikiException
   public void restoreVersionOfNote(String versionName, Page note, String userName) throws WikiException {
     PageVersion pageVersion = dataStorage.restoreVersionOfPage(versionName, note);
     pageVersion.setId(note.getId() + "-" + pageVersion.getName());
-    moveOrCopyNotePageProperties(pageVersion,
-                                 note,
-                                 null,
-                                 null,
-                                 NOTE_METADATA_VERSION_PAGE_OBJECT_TYPE,
-                                 NOTE_METADATA_PAGE_OBJECT_TYPE,
-                                 userName,
-                                 false);
+    copyNotePageProperties(pageVersion,
+                           note,
+                           null,
+                           null,
+                           NOTE_METADATA_VERSION_PAGE_OBJECT_TYPE,
+                           NOTE_METADATA_PAGE_OBJECT_TYPE,
+                           userName);
     createVersionOfNote(note, userName);
     invalidateCache(note);
   }
@@ -1149,24 +1170,9 @@ public DraftPage createDraftForExistPage(DraftPage draftPage,
     NotePageProperties properties = draftPage.getProperties();
     try {
       if (properties != null) {
-        NoteFeaturedImage featuredImage = properties.getFeaturedImage();
-        if (featuredImage != null && featuredImage.getId() != null && featuredImage.getId() > 0) {
-          Map<String, String> props = moveOrCopyNotePageProperties(targetPage,
-                                                                   newDraftPage,
-                                                                   targetPage.getLang(),
-                                                                   newDraftPage.getLang(),
-                                                                   NOTE_METADATA_PAGE_OBJECT_TYPE,
-                                                                   NOTE_METADATA_DRAFT_PAGE_OBJECT_TYPE,
-                                                                   username,
-                                                                   false);
-          if (props != null && props.getOrDefault(FEATURED_IMAGE_ID, null) == null) {
-            properties.setFeaturedImage(null);
-          }
-        } else {
-          properties = saveNoteMetadata(properties,
-                                        draftPage.getLang(),
-                                        Long.valueOf(identityManager.getOrCreateUserIdentity(username).getId()));
-        }
+        properties = saveNoteMetadata(properties,
+                                      draftPage.getLang(),
+                                      Long.valueOf(identityManager.getOrCreateUserIdentity(username).getId()));
       }
     } catch (Exception e) {
       log.error("Failed to save draft note metadata", e);
@@ -1258,7 +1264,7 @@ public String getNoteRenderedContent(Page note) {
   @Override
   public void importNotes(String zipLocation, Page parent, String conflict, Identity userIdentity) throws WikiException,
           IllegalAccessException,
-          IOException {
+          IOException, Exception {
     List<String> files = Utils.unzip(zipLocation, System.getProperty(TEMP_DIRECTORY_PATH));
     importNotes(files, parent, conflict, userIdentity);
   }
@@ -1269,7 +1275,7 @@ public void importNotes(String zipLocation, Page parent, String conflict, Identi
   @Override
   public void importNotes(List<String> files, Page parent, String conflict, Identity userIdentity) throws WikiException,
           IllegalAccessException,
-          IOException {
+          IOException, Exception {
 
     String notesFilePath = "";
     for (String file : files) {
@@ -1424,7 +1430,15 @@ public List<String> getPageAvailableTranslationLanguages(Long pageId, String use
   public List<PageHistory> getVersionsHistoryOfNoteByLang(Page note, String userName, String lang) throws WikiException {
     List<PageHistory> pageHistories = dataStorage.getPageHistoryVersionsByPageIdAndLang(Long.valueOf(note.getId()), lang);
     if (lang == null && pageHistories.isEmpty()) {
-      dataStorage.addPageVersion(note, userName);
+      PageVersion pageVersion =  dataStorage.addPageVersion(note, userName);
+      pageVersion.setId(note.getId() + "-" + pageVersion.getName());
+      copyNotePageProperties(note,
+                             pageVersion,
+                             note.getLang(),
+                             null,
+                             NOTE_METADATA_PAGE_OBJECT_TYPE,
+                             NOTE_METADATA_VERSION_PAGE_OBJECT_TYPE,
+                             userName);
       pageHistories = dataStorage.getPageHistoryVersionsByPageIdAndLang(Long.valueOf(note.getId()), null);
     }
     return pageHistories;
@@ -1644,7 +1658,7 @@ protected void invalidateAttachmentCache(Page note) {
   /******* Private methods *******/
   
   private void importNote(Page note, Page parent, Wiki wiki, String conflict, Identity userIdentity) throws WikiException,
-                                                                                                    IllegalAccessException {
+                                                                                                    IllegalAccessException, Exception {
 
     Page parent_ = getNoteOfNoteBookByName(wiki.getType(), wiki.getOwner(), parent.getName());
     if (parent_ == null) {
@@ -1925,7 +1939,6 @@ private Map<String, List<MetadataItem>> retrieveMetadataItems(String noteId, Str
                                                                         identityManager.getOrCreateIdentity(OrganizationIdentityProvider.NAME,
                                                                                                             username);
     long currentUserId = Long.parseLong(currentIdentity.getId());
-    MetadataService metadataService = CommonsUtils.getService(MetadataService.class);
     MetadataObject metadataObject = new MetadataObject(Utils.NOTES_METADATA_OBJECT_TYPE, noteId);
     List<MetadataItem> metadataItems = metadataService.getMetadataItemsByObject(metadataObject);
     Map<String, List<MetadataItem>> metadata = new HashMap<>();
@@ -1958,31 +1971,35 @@ public Long saveNoteFeaturedImage(Page note, NoteFeaturedImage featuredImage) th
     }
     long featuredImageId = featuredImage.getId() != null ? featuredImage.getId(): 0L;
     String uploadId = featuredImage.getUploadId();
-    if (uploadId != null && featuredImage.getBase64Data() != null) {
+    if (uploadId != null) {
       UploadResource uploadResource = uploadService.getUploadResource(uploadId);
       if (uploadResource != null) {
-        String data = featuredImage.getBase64Data().split("base64,")[1];
-        byte[] bytes = Base64.getDecoder().decode(data.getBytes(Charset.defaultCharset()));
-        FileItem fileItem = new FileItem(featuredImageId,
-                                         note.getName(),
-                                         featuredImage.getMimeType(),
-                                         FILE_NAME_SPACE,
-                                         (long) uploadResource.getUploadedSize(),
-                                         new Date(),
-                                         null,
-                                         false,
-                                         new ByteArrayInputStream(bytes));
-        if (featuredImageId == 0) {
-          fileItem = fileService.writeFile(fileItem);
-        } else {
-          fileItem = fileService.updateFile(fileItem);
-        }
-        if (fileItem != null && fileItem.getFileInfo() != null) {
-          return fileItem.getFileInfo().getId();
+        String fileDiskLocation = uploadResource.getStoreLocation();
+        try (InputStream inputStream = new FileInputStream(fileDiskLocation);) {
+          FileItem fileItem = new FileItem(featuredImageId,
+                                           note.getName(),
+                                           featuredImage.getMimeType(),
+                                           FILE_NAME_SPACE,
+                                           inputStream.available(),
+                                           new Date(),
+                                           null,
+                                           false,
+                                           inputStream);
+          if (featuredImageId == 0) {
+            fileItem = fileService.writeFile(fileItem);
+          } else {
+            fileItem = fileService.updateFile(fileItem);
+          }
+          if (fileItem != null && fileItem.getFileInfo() != null) {
+            return fileItem.getFileInfo().getId();
+          }
+          uploadService.removeUploadResource(uploadId);
+        } catch (Exception e) {
+          log.error("Error while saving note featured image", e);
         }
       }
     }
-    return null;
+    return featuredImageId;
   }
 
   /**
@@ -2015,9 +2032,8 @@ public NoteFeaturedImage getNoteFeaturedImageInfo(Long noteId, String lang, bool
       if (fileItem != null && fileItem.getFileInfo() != null) {
         FileInfo fileInfo = fileItem.getFileInfo();
         if (thumbnailSize != null) {
-          ImageThumbnailService thumbnailService = CommonsUtils.getService(ImageThumbnailService.class);
           int[] dimension = org.exoplatform.social.common.Utils.parseDimension(thumbnailSize);
-          fileItem = thumbnailService.getOrCreateThumbnail(fileItem, dimension[0], dimension[1]);
+          fileItem = imageThumbnailService.getOrCreateThumbnail(fileItem, dimension[0], dimension[1]);
         }
         return new NoteFeaturedImage(fileInfo.getId(),
                                      fileInfo.getName(),
@@ -2040,21 +2056,19 @@ private NoteMetadataObject buildNoteMetadataObject(Page note, String lang, Strin
 
   private MetadataItem getNoteMetadataItem(Page note, String lang, String objectType) {
     NoteMetadataObject noteMetadataObject = buildNoteMetadataObject(note, lang, objectType);
-    MetadataService metadataService = CommonsUtils.getService(MetadataService.class);
     return metadataService.getMetadataItemsByMetadataAndObject(NOTES_METADATA_KEY, noteMetadataObject)
                           .stream()
                           .findFirst()
                           .orElse(null);
   }
 
-  private Map<String, String> moveOrCopyNotePageProperties(Page oldNote,
-                                                           Page note,
-                                                           String oldLang,
-                                                           String lang,
-                                                           String oldObjectType,
-                                                           String newObjectType,
-                                                           String username,
-                                                           boolean move) {
+  private Map<String, String> copyNotePageProperties(Page oldNote,
+                                                     Page note,
+                                                     String oldLang,
+                                                     String lang,
+                                                     String oldObjectType,
+                                                     String newObjectType,
+                                                     String username) {
     if (note == null || oldNote == null) {
       return null;
     }
@@ -2067,7 +2081,6 @@ private Map<String, String> moveOrCopyNotePageProperties(Page oldNote,
       MetadataItem oldNoteMetadataItem = getNoteMetadataItem(oldNote, oldLang, oldObjectType);
       MetadataItem newNoteMetadataItem = getNoteMetadataItem(note, lang, newObjectType);
       if (oldNoteMetadataItem != null && oldNoteMetadataItem.getProperties() != null) {
-        MetadataService metadataService = CommonsUtils.getService(MetadataService.class);
         properties = oldNoteMetadataItem.getProperties();
         if (properties != null && oldLang == null && lang != null) {
           properties.remove(FEATURED_IMAGE_ID);
@@ -2087,9 +2100,6 @@ private Map<String, String> moveOrCopyNotePageProperties(Page oldNote,
             log.error("Error while creating note metadata item", e);
           }
         }
-        if (move) {
-          metadataService.deleteMetadataById(oldNoteMetadataItem.getId());
-        }
       }
     }
     return properties;
@@ -2117,15 +2127,13 @@ public void removeNoteFeaturedImage(Long noteId,
                                       String lang,
                                       boolean isDraft,
                                       Long userIdentityId) throws Exception {
-    if (featuredImageId == null || featuredImageId <= 0) {
-      return;
-    }
     boolean removeFeaturedImageFile = true;
     Page note;
     if (isDraft) {
       DraftPage draftPage = getDraftNoteById(String.valueOf(noteId),
                                              identityManager.getIdentity(String.valueOf(userIdentityId)).getRemoteId());
-      if (isOriginalFeaturedImage(draftPage, getNoteByIdAndLang(Long.valueOf(draftPage.getTargetPageId()), lang))) {
+      if (draftPage != null && draftPage.getTargetPageId() != null
+          && isOriginalFeaturedImage(draftPage, getNoteByIdAndLang(Long.valueOf(draftPage.getTargetPageId()), lang))) {
         removeFeaturedImageFile = false;
       }
       note = draftPage;
@@ -2135,8 +2143,7 @@ public void removeNoteFeaturedImage(Long noteId,
     if (note == null) {
       throw new ObjectNotFoundException("note not found");
     }
-    MetadataService metadataService = CommonsUtils.getService(MetadataService.class);
-    if (removeFeaturedImageFile) {
+    if (removeFeaturedImageFile && featuredImageId != null && featuredImageId > 0) {
       fileService.deleteFile(featuredImageId);
     }
     MetadataItem metadataItem = getNoteMetadataItem(note,
@@ -2163,6 +2170,7 @@ public NotePageProperties saveNoteMetadata(NotePageProperties notePageProperties
     }
     Page note;
     Long featuredImageId = null;
+    NoteFeaturedImage featuredImage = notePageProperties.getFeaturedImage();
     if (notePageProperties.isDraft()) {
         note = getLatestDraftPageByTargetPageAndLang(notePageProperties.getNoteId(), lang);
         if (note == null) {
@@ -2175,7 +2183,7 @@ public NotePageProperties saveNoteMetadata(NotePageProperties notePageProperties
     if (note == null) {
       throw new ObjectNotFoundException("note not found");
     }
-    NoteFeaturedImage featuredImage = notePageProperties.getFeaturedImage();
+
     if (featuredImage != null && featuredImage.isToDelete()) {
       removeNoteFeaturedImage(Long.valueOf(note.getId()),
                               featuredImage.getId(),
@@ -2185,8 +2193,6 @@ public NotePageProperties saveNoteMetadata(NotePageProperties notePageProperties
     } else {
       featuredImageId = saveNoteFeaturedImage(note, featuredImage);
     }
-    MetadataService metadataService = CommonsUtils.getService(MetadataService.class);
-
     NoteMetadataObject noteMetadataObject =
                                           buildNoteMetadataObject(note,
                                                                   lang,
@@ -2216,6 +2222,7 @@ public NotePageProperties saveNoteMetadata(NotePageProperties notePageProperties
     if (featuredImage != null) {
       featuredImage.setId(featuredImageId);
       featuredImage.setLastUpdated(Long.valueOf(properties.getOrDefault(FEATURED_IMAGE_UPDATED_DATE, "0")));
+      featuredImage.setUploadId(null);
       notePageProperties.setFeaturedImage(featuredImage);
     }
     return notePageProperties;
diff --git a/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java b/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java
index 17050b0aad..9d3704468a 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java
@@ -738,12 +738,15 @@ public Response updateNoteById(@Parameter(description = "Note id", required = tr
         return Response.status(Response.Status.CONFLICT).entity(NOTE_NAME_EXISTS).build();
       }
       note_.setToBePublished(note.isToBePublished());
+      NotePageProperties notePageProperties = io.meeds.notes.rest.utils.EntityBuilder.toNotePageProperties(note.getProperties());
+      NoteFeaturedImage featuredImage = notePageProperties.getFeaturedImage();
       String newNoteName = note_.getName();
       if (!note_.getTitle().equals(note.getTitle()) && !note_.getContent().equals(note.getContent())) {
         if (StringUtils.isBlank(note.getLang())) {
           newNoteName = TitleResolver.getId(note.getTitle(), false);
           note_.setTitle(note.getTitle());
           note_.setContent(note.getContent());
+          note_.setProperties(notePageProperties);
           if (!NoteConstants.NOTE_HOME_NAME.equals(note.getName()) && !note.getName().equals(newNoteName)) {
             noteService.renameNote(note_.getWikiType(), note_.getWikiOwner(), note_.getName(), newNoteName, note.getTitle());
             note_.setName(newNoteName);
@@ -754,8 +757,6 @@ public Response updateNoteById(@Parameter(description = "Note id", required = tr
           note_ = noteService.updateNote(note_, PageUpdateType.EDIT_PAGE_CONTENT_AND_TITLE, identity);
           note_.setTitle(note.getTitle());
           note_.setContent(note.getContent());
-          NotePageProperties notePageProperties =
-                                                io.meeds.notes.rest.utils.EntityBuilder.toNotePageProperties(note.getProperties());
           note_.setProperties(notePageProperties);
         }
         noteService.createVersionOfNote(note_, identity.getUserId());
@@ -771,11 +772,13 @@ public Response updateNoteById(@Parameter(description = "Note id", required = tr
             note_.setName(newNoteName);
           }
           note_.setTitle(note.getTitle());
+          note_.setProperties(notePageProperties);
           note_ = noteService.updateNote(note_, PageUpdateType.EDIT_PAGE_TITLE, identity);
         } else {
+          note_.setLang(note.getLang());
           note_ = noteService.updateNote(note_, PageUpdateType.EDIT_PAGE_TITLE, identity);
           note_.setTitle(note.getTitle());
-          note_.setLang(note.getLang());
+          note_.setProperties(notePageProperties);
         }
         noteService.createVersionOfNote(note_, identity.getUserId());
         if (!Utils.ANONYM_IDENTITY.equals(identity.getUserId())) {
@@ -785,11 +788,28 @@ public Response updateNoteById(@Parameter(description = "Note id", required = tr
       } else if (!note_.getContent().equals(note.getContent())) {
         if (StringUtils.isBlank(note.getLang())) {
           note_.setContent(note.getContent());
+          note_.setProperties(notePageProperties);
           note_ = noteService.updateNote(note_, PageUpdateType.EDIT_PAGE_CONTENT, identity);
         } else {
+          note_.setLang(note.getLang());
           note_ = noteService.updateNote(note_, PageUpdateType.EDIT_PAGE_CONTENT, identity);
           note_.setContent(note.getContent());
+          note_.setProperties(notePageProperties);
+        }
+        noteService.createVersionOfNote(note_, identity.getUserId());
+        if (!Utils.ANONYM_IDENTITY.equals(identity.getUserId())) {
+          WikiPageParams noteParams = new WikiPageParams(note_.getWikiType(), note_.getWikiOwner(), newNoteName);
+          noteService.removeDraftOfNote(noteParams, note.getLang());
+        }
+      } else if ((featuredImage != null && (featuredImage.isToDelete() || featuredImage.getUploadId() != null))
+          || !notePageProperties.getSummary().equals(note_.getProperties().getSummary())) {
+        if (StringUtils.isBlank(note.getLang())) {
+          note_.setProperties(notePageProperties);
+          note_ = noteService.updateNote(note_, PageUpdateType.EDIT_PAGE_PROPERTIES, identity);
+        } else {
           note_.setLang(note.getLang());
+          note_ = noteService.updateNote(note_, PageUpdateType.EDIT_PAGE_PROPERTIES, identity);
+          note_.setProperties(notePageProperties);
         }
         noteService.createVersionOfNote(note_, identity.getUserId());
         if (!Utils.ANONYM_IDENTITY.equals(identity.getUserId())) {
diff --git a/notes-service/src/test/java/org/exoplatform/wiki/service/TestNoteService.java b/notes-service/src/test/java/org/exoplatform/wiki/service/TestNoteService.java
index 80e03e08be..431fd778e8 100644
--- a/notes-service/src/test/java/org/exoplatform/wiki/service/TestNoteService.java
+++ b/notes-service/src/test/java/org/exoplatform/wiki/service/TestNoteService.java
@@ -291,7 +291,7 @@ public void testHasPermisionOnSystemPage() throws WikiException, IllegalAccessEx
                  () -> noteService.getNoteById(storedSystemPermissionPage.getId(), userAclIdentity));
   }
 
-  public void testUpdateNote() throws WikiException, IllegalAccessException {
+  public void testUpdateNote() throws WikiException, IllegalAccessException, Exception {
     Identity root = new Identity("root");
     // Get Home
     getOrCreateWiki(wService, PortalConfig.PORTAL_TYPE, "classic").getWikiHome();
@@ -626,7 +626,7 @@ public void testGetChildrenNoteOf() throws WikiException, IllegalAccessException
     assertEquals(eXportCildren,childern);
   }
 
-  public void testRemoveDraftOfNote() throws WikiException, IllegalAccessException {
+  public void testRemoveDraftOfNote() throws Exception {
     Identity root = new Identity("root");
     startSessionAs("root");
     long now = new Date().getTime();
@@ -711,6 +711,8 @@ private void bindMockedUploadService() throws Exception {
     UploadResource uploadResource = mock(UploadResource.class);
     when(uploadResource.getUploadedSize()).thenReturn(12548d);
     when(uploadService.getUploadResource(anyString())).thenReturn(uploadResource);
+    String location = getClass().getResource("/images/John.png").getPath();
+    when(uploadResource.getStoreLocation()).thenReturn(location);
     Field field = noteService.getClass().getDeclaredField("uploadService");
     field.setAccessible(true);
     field.set(noteService, uploadService);
@@ -719,7 +721,6 @@ private void bindMockedUploadService() throws Exception {
   private NotePageProperties createNotePageProperties(long noteId, String altText, String summary) {
     NotePageProperties notePageProperties = new NotePageProperties();
     NoteFeaturedImage featuredImage = new NoteFeaturedImage();
-    featuredImage.setBase64Data("data:image/png;base64,++dhPs679jlDMhAIYFDUu0+SNTDnnL33+e+P33");
     featuredImage.setMimeType("image/png");
     featuredImage.setUploadId("123");
     featuredImage.setAltText(altText);
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
index 078e5e64b4..499b2d43e2 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
@@ -280,6 +280,8 @@ export default {
     postNote(toPublish) {
       this.postingNote = true;
       clearTimeout(this.saveDraft);
+      const properties = this.note?.properties;
+      properties.draft = this.note?.draftPage;
       const note = {
         id: this.note?.draftPage? this.note.targetPageId || null : this.note?.id,
         title: this.note.title,
@@ -291,7 +293,7 @@ export default {
         parentPageId: this.note?.draftPage && this.note?.targetPageId === this.parentPageId ? null : this.parentPageId,
         toBePublished: toPublish,
         appName: this.appName,
-        properties: this.note?.properties
+        properties: properties
       };
       if (note.id) {
         this.updateNote(note);
@@ -309,7 +311,6 @@ export default {
       return this.$notesService.updateNoteById(note).then(data => {
         this.note = data;
         this.originalNote = structuredClone(data);
-        this.removeLocalStorageCurrentDraft();
         this.displayMessage({
           type: 'success',
           message: this.$t('notes.save.success.message'),
@@ -321,7 +322,7 @@ export default {
           type: 'error',
           message: this.$t(`notes.message.${e.message}`)
         });
-      }).finally(() => this.enableClickOnce());
+      }).finally(() => this.enableClickOnce(),this.removeLocalStorageCurrentDraft());
     },
     createNote(note) {
       return this.$notesService.createNote(note).then(data => {
@@ -344,7 +345,7 @@ export default {
           type: 'error',
           message: this.$t(`notes.message.${e.message}`)
         });
-      }).finally(() => this.enableClickOnce());
+      }).finally(() => this.enableClickOnce(),this.removeLocalStorageCurrentDraft());
     },
     autoSave() {
       if (this.translationSwitch) {
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue
index f1f8db0a89..628061947e 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue
@@ -264,6 +264,7 @@ export default {
       reader.readAsDataURL(image);
       this.$uploadService.upload(image).then(uploadId => {
         this.uploadId = uploadId;
+        this.removeFeaturedImage = false;
       });
     },
     resetProperties() {
@@ -293,16 +294,17 @@ export default {
       this.$refs.metadataDrawer.close();
     },
     save() {
+      const savedFeaturedImageId = this.noteObject?.properties?.featuredImage?.id;
       const properties = {
         noteId: this.isDraft && this.noteObject?.targetPageId
             || this.noteObject?.id,
         summary: this.summaryContent,
         featuredImage: {
+          id: savedFeaturedImageId,
           uploadId: this.uploadId,
-          base64Data: this.imageData,
           mimeType: this.mimeType,
           altText: this.featuredImageAltText,
-          toDelete: this.removeFeaturedImage
+          toDelete: this.removeFeaturedImage || (!this.uploadId && !savedFeaturedImageId)
         },
         draft: this.isDraft || !this.notedId
       };
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 06281a7fb8..f5d7c0b2f5 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
@@ -401,7 +401,7 @@ export default {
       return this.note?.properties?.featuredImage?.altText;
     },
     featuredImageLink() {
-      return `${this.illustrationBaseUrl}${this.noteId}?v=${this.noteFeatureImageUpdatedDate}&isDraft=false${this.langParam}&size=0x400`;
+      return `${this.illustrationBaseUrl}${this.noteId || this.note?.id}?v=${this.noteFeatureImageUpdatedDate}&isDraft=${this.isDraft}${this.langParam}&size=0x400`;
     },
     notesContentProcessor() {
       return {

From ef06eef4ff9dd6fc9ea2ef1c970a3733d372edab Mon Sep 17 00:00:00 2001
From: Helmi Akermi <70575401+hakermi@users.noreply.github.com>
Date: Tue, 27 Aug 2024 16:27:20 +0100
Subject: [PATCH 28/40] fix: Adjust ui/ux issues in note view mode - EXO-73673
 - Meeds-io/MIPs#128 (#1074)

---
 .../wiki/service/impl/NoteServiceImpl.java    |  8 +++++---
 .../wiki/service/rest/NotesRestService.java   |  5 ++++-
 .../main/webapp/skin/less/notes/notes.less    |  6 ++++++
 .../components/NotesEditorDashboard.vue       |  4 +++-
 .../notes/components/NotesOverview.vue        | 20 ++++++++++++-------
 .../notes/components/NotesTranslationMenu.vue | 20 ++++++++++++-------
 6 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java b/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java
index a92aaa9742..9556756af5 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java
@@ -989,9 +989,11 @@ public void createVersionOfNote(Page note, String userName) throws WikiException
     PageVersion pageVersion = dataStorage.addPageVersion(note, userName);
     if (note.getLang() != null) {
       try {
-        saveNoteMetadata(note.getProperties(),
-                         note.getLang(),
-                         Long.valueOf(identityManager.getOrCreateUserIdentity(userName).getId()));
+        NotePageProperties properties = note.getProperties();
+        if (properties != null) {
+          properties.setDraft(false);
+          saveNoteMetadata(properties, note.getLang(), Long.valueOf(identityManager.getOrCreateUserIdentity(userName).getId()));
+        }
       } catch (Exception e) {
         log.error("Error while saving note version language metadata", e);
       }
diff --git a/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java b/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java
index 9d3704468a..60ad56f6fd 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java
@@ -739,7 +739,10 @@ public Response updateNoteById(@Parameter(description = "Note id", required = tr
       }
       note_.setToBePublished(note.isToBePublished());
       NotePageProperties notePageProperties = io.meeds.notes.rest.utils.EntityBuilder.toNotePageProperties(note.getProperties());
-      NoteFeaturedImage featuredImage = notePageProperties.getFeaturedImage();
+      NoteFeaturedImage featuredImage = null;
+      if (notePageProperties != null) {
+        featuredImage = notePageProperties.getFeaturedImage();
+      }
       String newNoteName = note_.getName();
       if (!note_.getTitle().equals(note.getTitle()) && !note_.getContent().equals(note.getContent())) {
         if (StringUtils.isBlank(note.getLang())) {
diff --git a/notes-webapp/src/main/webapp/skin/less/notes/notes.less b/notes-webapp/src/main/webapp/skin/less/notes/notes.less
index f507646f48..09b39a719a 100644
--- a/notes-webapp/src/main/webapp/skin/less/notes/notes.less
+++ b/notes-webapp/src/main/webapp/skin/less/notes/notes.less
@@ -359,6 +359,12 @@
           color: @primaryColor !important;
         }
       }
+
+      .not-clickable {
+        &:hover {
+          color: @primaryColor !important;
+        }
+      }
     }
   }
 
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
index 499b2d43e2..6e275b6aa3 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
@@ -281,7 +281,9 @@ export default {
       this.postingNote = true;
       clearTimeout(this.saveDraft);
       const properties = this.note?.properties;
-      properties.draft = this.note?.draftPage;
+      if (properties) {
+        properties.draft = this.note?.draftPage;
+      }
       const note = {
         id: this.note?.draftPage? this.note.targetPageId || null : this.note?.id,
         title: this.note.title,
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 f5d7c0b2f5..4bbd736f16 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
@@ -132,7 +132,7 @@
             class="mb-5"
             width="100%"
             max-height="400" />
-          <div class="notes-title mb-3">
+          <div class="notes-title">
             <span
               ref="noteTitle"
               class="title text-color">
@@ -146,11 +146,11 @@
           </div>
           <p
             v-if="hasSummary"
-            class="note-summary text-sub-title mb-8">
-            {{ note?.properties?.summary }}
+            class="note-summary text-sub-title mt-4 mb-0">
+            {{ noteSummary }}
           </p>
         </div>
-        <div class="note-content my-4" v-if="!hasEmptyContent && !isHomeNoteDefaultContent">
+        <div class="note-content mt-8 my-4" v-if="!hasEmptyContent && !isHomeNoteDefaultContent">
           <div
             class="notes-application-content text-color">
             <component :is="notesContentProcessor" />
@@ -338,6 +338,7 @@ export default {
       noteChildren: [],
       isDraft: false,
       noteTitle: '',
+      noteSummary: '',
       spaceMembersUrl: `${eXo.env.portal.context}/g/:spaces:${eXo.env.portal.spaceGroup}/${eXo.env.portal.spaceUrl}/members`,
       childNodes: [],
       exportStatus: '',
@@ -364,6 +365,7 @@ export default {
       }
       this.noteTitle = !this.note.parentPageId && this.note.title==='Home' ? `${this.$t('notes.label.noteHome')}` : this.note.title;
       this.noteContent = this.note.content;
+      this.noteSummary = this.note?.properties?.summary;
       this.retrieveNoteTreeById();
     },
     actualVersion() {
@@ -569,6 +571,10 @@ export default {
       this.popStateChange = true;
       this.handleChangePages();
     });
+    this.$root.$on('update-note-title', this.updateNoteTitle);
+    this.$root.$on('update-note-content', this.updateNoteContent);
+    this.$root.$on('update-note-summary', this.updateNoteSummary);
+    this.$root.$on('update-selected-translation', this.updateSelectedTranslation);
     window.addEventListener('message', (event) => {
       if (this.iframelyOriginRegex.exec(event.origin)) {
         const data = JSON.parse(event.data);
@@ -577,9 +583,6 @@ export default {
         }
       }
     });
-    this.$root.$on('update-note-title', this.updateNoteTitle);
-    this.$root.$on('update-note-content', this.updateNoteContent);
-    this.$root.$on('update-selected-translation', this.updateSelectedTranslation);
 
     this.$root.$on('open-note-treeview', this.openNoteTreeView);
     this.$root.$on('note-export-pdf', this.createPDF);
@@ -611,6 +614,9 @@ export default {
     updateNoteContent(content) {
       this.noteContent = content;
     },
+    updateNoteSummary(summary) {
+      this.noteSummary = summary;
+    },
     updateSelectedTranslation(translation) {
       this.selectedTranslation = translation;
     },
diff --git a/notes-webapp/src/main/webapp/vue-app/notes/components/NotesTranslationMenu.vue b/notes-webapp/src/main/webapp/vue-app/notes/components/NotesTranslationMenu.vue
index 59fd6430cc..2f0e73b5a5 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes/components/NotesTranslationMenu.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes/components/NotesTranslationMenu.vue
@@ -26,14 +26,20 @@
     offset-y
     bottom>
     <template #activator="{ on, attrs }">
-      <v-icon
-        size="22"
-        :class="langButtonColor"
-        class="remove-focus mt-n2 pa-0  ms-5"
+      <v-btn
+        v-on="on"
         v-bind="attrs"
-        v-on="on">
-        fa-language
-      </v-icon>
+        width="36"
+        min-width="36"
+        height="36"
+        class="mt-n2 pa-0  ms-5"
+        :class="langButtonColor"
+        icon>
+        <v-icon
+          size="22">
+          fa-language
+        </v-icon>
+      </v-btn>
     </template>
     <v-list class="px-2" dense>
       <v-list-item

From d01ddcc706c843c908b9a4c7b6db240b39df435e Mon Sep 17 00:00:00 2001
From: Helmi Akermi <70575401+hakermi@users.noreply.github.com>
Date: Thu, 29 Aug 2024 16:23:00 +0100
Subject: [PATCH 29/40] fix: Editor header disappears once clicked on translate
 button right after note creation - EXO-73506 - Meeds-io/MIPs#128 (#1078)

---
 .../components/NotesEditorDashboard.vue       | 45 ++++++++++---------
 .../components/TranslationsEditBar.vue        |  7 +--
 2 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
index 6e275b6aa3..029789b07d 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
@@ -680,37 +680,36 @@ export default {
         return false;
       }
     },
-    getNoteLanguages(){
-      const noteId= !this.note.draftPage?this.note.id:this.note.targetPageId;
-      return this.$notesService.getNoteLanguages(noteId,true).then(data => {
-        this.translations =  data || [];
-        if (this.translations.length>0) {
-          this.translations = this.allLanguages.filter(item1 => this.translations.some(item2 => item2 === item1.value));
+    getNoteLanguages() {
+      const noteId = !this.note.draftPage ? this.note.id : this.note.targetPageId;
+      return this.$notesService.getNoteLanguages(noteId, true).then(data => {
+        this.translations ??= [];
+        this.translations = this.translations.map(translation => translation.value);
+        this.translations.push(...data);
+        if (this.translations.length > 0) {
+          this.translations = this.allLanguages.filter(lang => this.translations.includes(lang.value));
           this.translations.sort((a, b) => a.text.localeCompare(b.text));
-          this.languages = this.allLanguages.filter(item1 => !this.translations.some(item2 => item2.value === item1.value));
+          this.languages = this.allLanguages.filter(lang => !this.translations.includes(lang.value));
         }
         if (this.isMobile) {
-          this.translations.unshift({value: null,text: this.$t('notes.label.translation.originalVersion')});
+          this.translations.unshift({value: null, text: this.$t('notes.label.translation.originalVersion')});
         }
-        if (!this.selectedLanguage){
+        if (!this.selectedLanguage) {
           const lang = this.translations.find(item => item.value === this.selectedLanguage);
-          if (lang){
-            this.translations=this.translations.filter(item => item.value !== lang.value);
+          if (lang) {
+            this.translations = this.translations.filter(item => item.value !== lang.value);
             this.translations.unshift(lang);
           }
         }
       });
     },
-    getAvailableLanguages(){
-      return this.$notesService.getAvailableLanguages().then(data => {
-        this.languages = data || [];
-        this.languages.sort((a, b) => a.text.localeCompare(b.text));
-        this.allLanguages=this.languages;
-        this.languages.unshift({value: '',text: this.$t('notes.label.chooseLangage')});
-        if (this.translations){
-          this.languages = this.languages.filter(item1 => !this.translations.some(item2 => item2.value === item1.value));
-        }
-      });
+    getAvailableLanguages() {
+      this.languages = this.allLanguages = JSON.parse(eXo?.env?.portal?.availableLanguages)
+        ?.sort((a, b) => a.text.localeCompare(b.text));
+      this.languages.unshift({value: '', text: this.$t('notes.label.chooseLangage')});
+      if (this.translations) {
+        this.languages = this.languages.filter(item1 => !this.translations.some(item2 => item2.value === item1.value));
+      }
     },
     getLanguageName(lang){
       const language = this.allLanguages.find(item => item.value === lang);
@@ -728,6 +727,9 @@ export default {
       });
     },
     addTranslation(lang){
+      if (!this.translations && this.note?.id) {
+        this.getNoteLanguages(this.note.id);
+      }
       this.closeAlertMessage();
       if (!this.postingNote && this.note.draftPage && this.note.id) {
         this.saveDraftFromLocalStorage();
@@ -740,6 +742,7 @@ export default {
       };
       this.languages = this.languages.filter(item => item.value !== lang?.value);
       this.selectedLanguage = lang?.value;
+      this.translations ??= [];
       this.translations.unshift(lang);
       if (this.webPageNote) {
         this.note.title = this.selectedLanguage && `${this.note.title}_${this.selectedLanguage}` || this.note.title;
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/TranslationsEditBar.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/TranslationsEditBar.vue
index e998d3fd17..b860c01a94 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/TranslationsEditBar.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/TranslationsEditBar.vue
@@ -223,17 +223,14 @@ export default {
   methods: {
     show(lang) {
       this.selectedTranslation = {value: lang};
-      if (this.translations){
+      if (this.translations) {
         const translation = this.translations.find(item => item.value === lang);
         if (translation) {
           this.selectedTranslation = translation;
         }
       }
       this.selectedLang = {value: '', text: this.$t('notes.label.chooseLangage')};
-      if (!this.translations && this.note && this.noteId) {
-        this.getNoteLanguages(this.noteId);
-      }
-      this.showTranslationbar=true;
+      this.showTranslationbar = true;
     },
     hide() {
       this.showTranslationbar = false;

From eba87bf69aa8515716ffda4291a1f644858ee267 Mon Sep 17 00:00:00 2001
From: Helmi Akermi <70575401+hakermi@users.noreply.github.com>
Date: Thu, 29 Aug 2024 16:39:08 +0100
Subject: [PATCH 30/40] fix: Fix accessibility issues in open/close metadata
 drawer buttons - EXO-73675 - Meeds-io/MIPs#128 (#1079)

---
 .../resources/locale/portlet/notes/notesPortlet_en.properties  | 3 ++-
 .../vue-app/notes-rich-editor/components/NoteEditorTopBar.vue  | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

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 a37632e539..2ff2f16751 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
@@ -62,6 +62,7 @@ notes.metadata.saved.success.error=Error while saving note properties
 notes.featuredImage.remove.error.message=Error while removing featured image
 notes.featuredImage.remove.success.message=Featured image removed successfully
 notes.featuredImage.size.error.message=Featured image size should be less or equals to 20MB
+notes.metadata.close.drawer=Close the drawer
 
 popup.confirm=Confirm
 popup.msg.confirmation=Confirmation
@@ -214,4 +215,4 @@ notes.notification.label.footer=If you do not want to receive such notifications
 notes.notification.button.goToNote.label=Go to note
 notes.notification.title.mention.in.note=You have been mentioned in a note "{0}"
 Notification.label.SayHello=Hi
-Notification.subject.MentionInNoteNotificationPlugin=$CURRENT_USER mentioned you in the note $NOTE_TITLE
\ No newline at end of file
+Notification.subject.MentionInNoteNotificationPlugin=$CURRENT_USER mentioned you in the note $NOTE_TITLE
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue
index b8c29c92fd..30ade63c3d 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue
@@ -61,8 +61,9 @@
             min-width="36"
             height="36"
             class="pa-0 my-auto "
-            icon
+            :aria-label="$t('notes.metadata.open.drawer')"
             :disabled="!editorReady"
+            icon
             @click="openMetadataDrawer">
             <v-icon
               size="20"

From 6a55372e30b72bc10e14fbf3290c495ab757f04d Mon Sep 17 00:00:00 2001
From: Ayoub Zayati <ayoub.ezzayati@exoplatform.com>
Date: Wed, 4 Sep 2024 20:34:31 +0200
Subject: [PATCH 31/40] fix: Fix notes summary font size - EXO-73699 -
 Meeds-io/MIPs#128 (#1090)

---
 .../src/main/webapp/skin/less/notes/notes.less         | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/notes-webapp/src/main/webapp/skin/less/notes/notes.less b/notes-webapp/src/main/webapp/skin/less/notes/notes.less
index 09b39a719a..f1dc8f6a80 100644
--- a/notes-webapp/src/main/webapp/skin/less/notes/notes.less
+++ b/notes-webapp/src/main/webapp/skin/less/notes/notes.less
@@ -280,7 +280,7 @@
   }
 }
 
-#notesOverviewApplication, .notesApplication {
+#notesOverviewApplication {
   max-width: 100%;
 
   .notes-wrapper {
@@ -318,7 +318,7 @@
       }
 
       .note-summary {
-        font-size: 24px;
+        font-size: 20px;
         line-height: 1.2;
       }
 
@@ -1242,8 +1242,4 @@ ul.note-manual-child  {
 
 .remove-focus:focus::after {
   opacity: 0 !important;
-}
-
-
-
-
+}
\ No newline at end of file

From 70b1e3a40f6ec711ba582ddf2db8a0a5e2629a7d Mon Sep 17 00:00:00 2001
From: Helmi Akermi <hakermi@exoplatform.com>
Date: Wed, 4 Sep 2024 16:18:12 +0100
Subject: [PATCH 32/40] feat: Enhance featured image upload ui/ux - EXO-73938 -
 Meeds-io/MIPs#128

---
 .../wiki/service/impl/NoteServiceImpl.java    |  3 +-
 .../wiki/service/rest/NotesRestService.java   |  2 +-
 .../main/webapp/skin/less/notes/notes.less    |  6 +++
 .../components/NotesEditorDashboard.vue       |  3 +-
 .../components/NoteEditorMetadataDrawer.vue   | 40 ++++++++++++++++---
 .../components/NoteFullRichEditor.vue         |  3 ++
 6 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java b/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java
index 9556756af5..42d8b3793f 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java
@@ -1995,9 +1995,10 @@ public Long saveNoteFeaturedImage(Page note, NoteFeaturedImage featuredImage) th
           if (fileItem != null && fileItem.getFileInfo() != null) {
             return fileItem.getFileInfo().getId();
           }
-          uploadService.removeUploadResource(uploadId);
         } catch (Exception e) {
           log.error("Error while saving note featured image", e);
+        } finally {
+          uploadService.removeUploadResource(uploadId);
         }
       }
     }
diff --git a/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java b/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java
index 60ad56f6fd..23f864d0fb 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java
@@ -805,7 +805,7 @@ public Response updateNoteById(@Parameter(description = "Note id", required = tr
           noteService.removeDraftOfNote(noteParams, note.getLang());
         }
       } else if ((featuredImage != null && (featuredImage.isToDelete() || featuredImage.getUploadId() != null))
-          || !notePageProperties.getSummary().equals(note_.getProperties().getSummary())) {
+          || (note_.getProperties() != null && !notePageProperties.getSummary().equals(note_.getProperties().getSummary()))) {
         if (StringUtils.isBlank(note.getLang())) {
           note_.setProperties(notePageProperties);
           note_ = noteService.updateNote(note_, PageUpdateType.EDIT_PAGE_PROPERTIES, identity);
diff --git a/notes-webapp/src/main/webapp/skin/less/notes/notes.less b/notes-webapp/src/main/webapp/skin/less/notes/notes.less
index f1dc8f6a80..5c89e0a9e2 100644
--- a/notes-webapp/src/main/webapp/skin/less/notes/notes.less
+++ b/notes-webapp/src/main/webapp/skin/less/notes/notes.less
@@ -219,6 +219,12 @@
     background-color: @primaryBackground !important;
   }
 
+  .image-pre-upload {
+    .v-image__image {
+      filter: blur(2px);
+    }
+  }
+
   .cke_bottom {
     height: auto;
     opacity: 0.4;
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
index 029789b07d..2083ef3876 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
@@ -505,7 +505,8 @@ export default {
       const draftNote = this.fillDraftNote();
       if (this.note.title || this.note.content) {
         // if draft page not created persist it only the first time else update it in browser's localStorage
-        if (this.note.draftPage && this.note.id && !this.note?.lang) {
+        if (this.note.draftPage && this.note.id && !this.note?.lang
+            && !this.note?.properties?.featuredImage?.uploadId) {
           this.note.parentPageId = this.parentPageId;
           localStorage.setItem(`draftNoteId-${this.note.id}`, JSON.stringify(draftNote));
           this.actualNote = {
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue
index 628061947e..d942026489 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue
@@ -78,9 +78,19 @@
                     <v-img
                       width="100%"
                       contain
+                      :class="{'image-pre-upload': isUploading}"
                       :lazy-src="featuredImageLink"
                       :alt="savedFeaturedImageAltText"
                       :src="featuredImageLink">
+                      <v-row
+                        v-if="isUploading"
+                        class="fill-height ma-0"
+                        align="center"
+                        justify="center">
+                        <v-progress-circular
+                          indeterminate
+                          color="grey lighten-5" />
+                      </v-row>
                       <div
                         v-if="hover && canShowFeaturedImagePreview"
                         class="width-fit-content full-height ms-auto d-flex me-2">
@@ -134,11 +144,11 @@
         <div class="d-flex width-fit-content ms-auto">
           <v-btn
             class="btn me-5"
-            @click="close">
+            @click="cancelChanges">
             {{ $t('notes.button.cancel') }}
           </v-btn>
           <v-btn
-            :disabled="saveDisabled && !enableSave"
+            :disabled="saveDisabled"
             class="btn btn-primary"
             @click="save">
             {{ $t('notes.button.publish') }}
@@ -167,7 +177,7 @@ export default {
       illustrationBaseUrl: `${eXo.env.portal.context}/${eXo.env.portal.rest}/notes/illustration/`,
       currentNoteProperties: {},
       removeFeaturedImage: false,
-      enableSave: false
+      isUploading: false
     };
   },
   props: {
@@ -186,7 +196,7 @@ export default {
       return this.noteObject?.properties.featuredImage?.featuredImageAltText;
     },
     saveDisabled() {
-      return !this.propertiesChanged && !this.imageData;
+      return (!this.propertiesChanged && !this.imageData && !this.removeFeaturedImage) || this.isUploading;
     },
     propertiesChanged() {
       return JSON.stringify(this.noteObject?.properties || {}) !== JSON.stringify(this.currentNoteProperties || {});
@@ -254,6 +264,7 @@ export default {
         });
         return;
       }
+      this.isUploading = true;
       const reader = new FileReader();
       reader.onload = e => {
         this.imageData = e.target.result
@@ -265,10 +276,23 @@ export default {
       this.$uploadService.upload(image).then(uploadId => {
         this.uploadId = uploadId;
         this.removeFeaturedImage = false;
+        this.controlUploadStatus(uploadId);
       });
     },
+    controlUploadStatus(uploadId) {
+      window.setTimeout(() => {
+        this.$uploadService.getUploadProgress(uploadId).then(percent => {
+          if (Number(percent) < 100) {
+            this.controlUploadStatus(uploadId);
+          } else {
+            this.isUploading = false;
+          }
+        });
+      }, 200);
+    },
     resetProperties() {
       this.featureImageUpdated = false;
+      this.cancelChanges();
     },
     imageDataUpdated(data, mimeType) {
       this.imageData = data;
@@ -290,6 +314,13 @@ export default {
       this.removeFeaturedImage = false;
       this.$refs.metadataDrawer.open();
     },
+    cancelChanges() {
+      this.noteObject.properties = structuredClone(this.currentNoteProperties || {});
+      this.summaryContent = this.currentNoteProperties?.summary || '';
+      this.hasFeaturedImageValue = this.hasFeaturedImage;
+      this.imageData = null;
+      this.close();
+    },
     close() {
       this.$refs.metadataDrawer.close();
     },
@@ -316,7 +347,6 @@ export default {
       this.removeFeaturedImage = true;
       this.hasFeaturedImageValue = false;
       this.imageData = null;
-      this.enableSave = true;
       this.$root.$emit('reset-featured-image-data');
     }
   }
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 31a0d02de2..be0389b8cd 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
@@ -202,6 +202,9 @@ export default {
         this.updateData();
       }
     },
+    'note.properties': function () {
+      this.cloneNoteObject();
+    },
     'note.id': function () {
       this.cloneNoteObject();
     },

From 073b2ec9e7b2ed1f4fe912d241773eea56d9e490 Mon Sep 17 00:00:00 2001
From: Helmi Akermi <hakermi@exoplatform.com>
Date: Wed, 4 Sep 2024 19:54:33 +0100
Subject: [PATCH 33/40] fix: Featured image link is not updated in note view
 when navigate using treeview - EXO-73961 - Meeds-io/MIPs#128

---
 .../src/main/webapp/vue-app/notes/components/NotesOverview.vue  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 4bbd736f16..7f5ae0c8d6 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
@@ -403,7 +403,7 @@ export default {
       return this.note?.properties?.featuredImage?.altText;
     },
     featuredImageLink() {
-      return `${this.illustrationBaseUrl}${this.noteId || this.note?.id}?v=${this.noteFeatureImageUpdatedDate}&isDraft=${this.isDraft}${this.langParam}&size=0x400`;
+      return `${this.illustrationBaseUrl}${this.note?.id}?v=${this.noteFeatureImageUpdatedDate}&isDraft=${this.isDraft}${this.langParam}&size=0x400`;
     },
     notesContentProcessor() {
       return {

From 38154a8af8433945e48346dc5874b6e6bc060d00 Mon Sep 17 00:00:00 2001
From: Ayoub Zayati <ayoub.ezzayati@exoplatform.com>
Date: Mon, 9 Sep 2024 19:03:30 +0200
Subject: [PATCH 34/40] feat: Fix performance issues when creating and updating
 note - EXO-73685 - Meeds-io/MIPs#128 (#1097)

---
 .../wiki/service/impl/NoteServiceImpl.java            | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java b/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java
index 42d8b3793f..83544d4b38 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java
@@ -2092,13 +2092,14 @@ private Map<String, String> copyNotePageProperties(Page oldNote,
         }
         if (newNoteMetadataItem != null) {
           newNoteMetadataItem.setProperties(properties);
-          metadataService.updateMetadataItem(newNoteMetadataItem, Long.parseLong(identity.getId()));
+          metadataService.updateMetadataItem(newNoteMetadataItem, Long.parseLong(identity.getId()), false);
         } else {
           try {
             metadataService.createMetadataItem(newNoteMetadataObject,
                                                NOTES_METADATA_KEY,
                                                properties,
-                                               Long.parseLong(identity.getId()));
+                                               Long.parseLong(identity.getId()),
+                                               false);
           } catch (Exception e) {
             log.error("Error while creating note metadata item", e);
           }
@@ -2159,7 +2160,7 @@ && isOriginalFeaturedImage(draftPage, getNoteByIdAndLang(Long.valueOf(draftPage.
       properties.remove(FEATURED_IMAGE_UPDATED_DATE);
       properties.remove(FEATURED_IMAGE_ALT_TEXT);
       metadataItem.setProperties(properties);
-      metadataService.updateMetadataItem(metadataItem, userIdentityId);
+      metadataService.updateMetadataItem(metadataItem, userIdentityId, false);
     }
   }
 
@@ -2217,10 +2218,10 @@ public NotePageProperties saveNoteMetadata(NotePageProperties notePageProperties
       properties.put(FEATURED_IMAGE_ALT_TEXT, notePageProperties.getFeaturedImage().getAltText());
     }
     if (metadataItem == null) {
-      metadataService.createMetadataItem(noteMetadataObject, NOTES_METADATA_KEY, properties, userIdentityId);
+      metadataService.createMetadataItem(noteMetadataObject, NOTES_METADATA_KEY, properties, userIdentityId, false);
     } else {
       metadataItem.setProperties(properties);
-      metadataService.updateMetadataItem(metadataItem, userIdentityId);
+      metadataService.updateMetadataItem(metadataItem, userIdentityId, false);
     }
     if (featuredImage != null) {
       featuredImage.setId(featuredImageId);

From 1aeda14eb435a410f3c57ef9df136ea481500827 Mon Sep 17 00:00:00 2001
From: Sofien Haj Chedhli <shajchedli@exoplatform.com>
Date: Tue, 10 Sep 2024 12:09:40 +0100
Subject: [PATCH 35/40] feat: Remove all feature flags related to the MIP-128 -
 EXO-72335 - Meeds-io/MIPs#128  (#1100)

---
 .../webapp/WEB-INF/conf/configuration.xml     |  1 -
 .../conf/wiki/feature-flags-configuration.xml | 52 -------------------
 .../webui/workspace/UINotesHeadTemplate.gtmpl | 10 ----
 .../components/NoteEditorTopBar.vue           | 12 +----
 .../components/NoteFullRichEditor.vue         |  5 --
 5 files changed, 1 insertion(+), 79 deletions(-)
 delete mode 100644 notes-webapp/src/main/webapp/WEB-INF/conf/wiki/feature-flags-configuration.xml
 delete mode 100644 notes-webapp/src/main/webapp/groovy/webui/workspace/UINotesHeadTemplate.gtmpl

diff --git a/notes-webapp/src/main/webapp/WEB-INF/conf/configuration.xml b/notes-webapp/src/main/webapp/WEB-INF/conf/configuration.xml
index 899bbcd9fd..e5c8abd60f 100644
--- a/notes-webapp/src/main/webapp/WEB-INF/conf/configuration.xml
+++ b/notes-webapp/src/main/webapp/WEB-INF/conf/configuration.xml
@@ -32,7 +32,6 @@
   <import>war:/conf/wiki/search-configuration.xml</import>
   <import>war:/conf/wiki/ckeditor-configuration.xml</import>
   <import>war:/conf/wiki/metadata-configuration.xml</import>
-  <import>war:/conf/wiki/feature-flags-configuration.xml</import>
   <import>war:/conf/wiki/notification-configuration.xml</import>
 
 </configuration>
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
deleted file mode 100644
index 5e523b55a0..0000000000
--- a/notes-webapp/src/main/webapp/WEB-INF/conf/wiki/feature-flags-configuration.xml
+++ /dev/null
@@ -1,52 +0,0 @@
-<?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>NotesEditorMetadataDrawerFeatureProperties</key>
-    <type>org.exoplatform.container.ExtendedPropertyConfigurator</type>
-    <init-params>
-      <properties-param>
-        <name>NotesEditorMetadataDrawerFeatureProperties</name>
-        <description>Metadata drawer Feature enablement flag</description>
-        <property name="exo.feature.notesEditorMetadataDrawer.enabled"
-                  value="${exo.feature.notesEditorMetadataDrawer.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/groovy/webui/workspace/UINotesHeadTemplate.gtmpl b/notes-webapp/src/main/webapp/groovy/webui/workspace/UINotesHeadTemplate.gtmpl
deleted file mode 100644
index aa40f19610..0000000000
--- a/notes-webapp/src/main/webapp/groovy/webui/workspace/UINotesHeadTemplate.gtmpl
+++ /dev/null
@@ -1,10 +0,0 @@
-<%
-  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="notesHeadScripts">
-    eXo.env.portal.notesEditorMetadataDrawerEnabled = <%=featureService.isFeatureActiveForUser("notesEditorMetadataDrawer", userName)%>;
-</script>
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue
index 30ade63c3d..741f467923 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue
@@ -30,7 +30,7 @@
             {{ editorIcon }}
           </v-icon>
           <span class="notesFormTitle my-auto ms-3 me-5">{{ formTitle }}</span>
-          <v-tooltip bottom v-if="translationOptionEnabled">
+          <v-tooltip bottom>
             <template #activator="{ on, attrs }">
               <v-btn
                 v-on="on"
@@ -56,7 +56,6 @@
             </span>
           </v-tooltip>
           <v-btn
-            v-if="editorMetadataDrawerEnabled"
             width="36"
             min-width="36"
             height="36"
@@ -203,20 +202,11 @@ export default {
       type: Boolean,
       default: true
     },
-    translationOptionEnabled: {
-      type: Boolean,
-      default: true
-    },
     editorReady: {
       type: Boolean,
       default: false
     },
   },
-  computed: {
-    editorMetadataDrawerEnabled() {
-      return eXo?.env?.portal?.notesEditorMetadataDrawerEnabled &&!this.isMobile && !this.webPageNote;
-    }
-  },
   created() {
     this.$root.$on('hide-translations', this.hideTranslations);
   },
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 be0389b8cd..c9f62a8a41 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
@@ -38,7 +38,6 @@
       :editor-icon="editorIcon"
       :save-button-icon="saveButtonIcon"
       :save-button-disabled="saveButtonDisabled"
-      :translation-option-enabled="translationOptionEnabled"
       :editor-ready="!!editor"
       @editor-closed="editorClosed"
       @post-note="postNote"
@@ -184,10 +183,6 @@ export default {
       type: Boolean,
       default: true
     },
-    translationOptionEnabled: {
-      type: Boolean,
-      default: true
-    },
     imagesDownloadFolder: {
       type: String,
       default: 'DRIVE_ROOT_NODE/notes/images'

From 9814b7a2d622f118113d4d959041b33f5a56ba93 Mon Sep 17 00:00:00 2001
From: Helmi Akermi <70575401+hakermi@users.noreply.github.com>
Date: Tue, 10 Sep 2024 16:04:52 +0100
Subject: [PATCH 36/40] feat: Disable property drawer in mobile/webPageNote -
 EXO-72335 - meeds-io/MIPs#128 (#1101)

Disbale property drawer in mobile/webPageNote
---
 .../notes-rich-editor/components/NoteEditorTopBar.vue       | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue
index 741f467923..cb4dea344e 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorTopBar.vue
@@ -56,6 +56,7 @@
             </span>
           </v-tooltip>
           <v-btn
+            v-if="editorMetadataDrawerEnabled"
             width="36"
             min-width="36"
             height="36"
@@ -207,6 +208,11 @@ export default {
       default: false
     },
   },
+  computed: {
+    editorMetadataDrawerEnabled() {
+      return !this.isMobile && !this.webPageNote;
+    }
+  },
   created() {
     this.$root.$on('hide-translations', this.hideTranslations);
   },

From 3c1ea93291d8941926459c5369f9e2f44e1beb85 Mon Sep 17 00:00:00 2001
From: Helmi Akermi <70575401+hakermi@users.noreply.github.com>
Date: Wed, 11 Sep 2024 18:10:27 +0100
Subject: [PATCH 37/40] feat: Remove metadata properties when delete note/draft
 - EXO-73990 - Meeds-io/MIPs#128 (#1104)

Remove metadata properties when delete note/draft
---
 .../exoplatform/wiki/jpa/EntityConverter.java |   8 ++
 .../exoplatform/wiki/jpa/JPADataStorage.java  |  43 ++----
 .../exoplatform/wiki/service/DataStorage.java |   7 +
 .../exoplatform/wiki/service/NoteService.java |   4 +-
 .../wiki/service/impl/NoteServiceImpl.java    | 124 +++++++++++-------
 .../wiki/service/rest/NotesRestService.java   |   3 +-
 .../wiki/service/TestNoteService.java         | 105 ++++++++++++++-
 .../components/NotesEditorDashboard.vue       |  70 ++++++----
 .../components/NoteEditorMetadataDrawer.vue   |   5 +-
 9 files changed, 249 insertions(+), 120 deletions(-)

diff --git a/notes-service/src/main/java/org/exoplatform/wiki/jpa/EntityConverter.java b/notes-service/src/main/java/org/exoplatform/wiki/jpa/EntityConverter.java
index a15aa5bcf6..2cecfe3850 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/jpa/EntityConverter.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/jpa/EntityConverter.java
@@ -22,6 +22,7 @@
 import io.meeds.notes.model.NoteFeaturedImage;
 import io.meeds.notes.model.NoteMetadataObject;
 import io.meeds.notes.model.NotePageProperties;
+import org.apache.commons.collections4.CollectionUtils;
 import org.apache.commons.collections4.MapUtils;
 import org.apache.commons.lang3.ArrayUtils;
 import org.apache.commons.lang3.StringUtils;
@@ -439,6 +440,13 @@ public static DraftPageAttachmentEntity convertAttachmentToDraftPageAttachmentEn
     return attachmentEntity;
   }
 
+  public static List<DraftPage> convertDraftPageEntitiesToDraftPages(List<DraftPageEntity> draftPageEntities) {
+    if (CollectionUtils.isEmpty(draftPageEntities)) {
+      return new ArrayList<>();
+    }
+    return draftPageEntities.stream().map(EntityConverter::convertDraftPageEntityToDraftPage).toList();
+  }
+  
   public static DraftPage convertDraftPageEntityToDraftPage(DraftPageEntity draftPageEntity) {
     DraftPage draftPage = null;
     if (draftPageEntity != null) {
diff --git a/notes-service/src/main/java/org/exoplatform/wiki/jpa/JPADataStorage.java b/notes-service/src/main/java/org/exoplatform/wiki/jpa/JPADataStorage.java
index da594544c5..d525a25c78 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/jpa/JPADataStorage.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/jpa/JPADataStorage.java
@@ -20,20 +20,6 @@
 
 package org.exoplatform.wiki.jpa;
 
-import static org.exoplatform.wiki.jpa.EntityConverter.convertAttachmentEntityToAttachment;
-import static org.exoplatform.wiki.jpa.EntityConverter.convertAttachmentToDraftPageAttachmentEntity;
-import static org.exoplatform.wiki.jpa.EntityConverter.convertAttachmentToPageAttachmentEntity;
-import static org.exoplatform.wiki.jpa.EntityConverter.convertDraftPageEntityToDraftPage;
-import static org.exoplatform.wiki.jpa.EntityConverter.convertDraftPageToDraftPageEntity;
-import static org.exoplatform.wiki.jpa.EntityConverter.convertPageEntityToPage;
-import static org.exoplatform.wiki.jpa.EntityConverter.convertPageToPageEntity;
-import static org.exoplatform.wiki.jpa.EntityConverter.convertPageVersionEntityToPageHistory;
-import static org.exoplatform.wiki.jpa.EntityConverter.convertPageVersionEntityToPageVersion;
-import static org.exoplatform.wiki.jpa.EntityConverter.convertPermissionEntitiesToPermissionEntries;
-import static org.exoplatform.wiki.jpa.EntityConverter.convertPermissionEntriesToPermissionEntities;
-import static org.exoplatform.wiki.jpa.EntityConverter.convertWikiEntityToWiki;
-import static org.exoplatform.wiki.jpa.EntityConverter.convertWikiToWikiEntity;
-
 import java.io.UnsupportedEncodingException;
 import java.net.URLEncoder;
 import java.util.ArrayList;
@@ -105,7 +91,9 @@
 import org.exoplatform.wiki.utils.Utils;
 import org.exoplatform.wiki.utils.VersionNameComparatorDesc;
 
-/**
+import static org.exoplatform.wiki.jpa.EntityConverter.*;
+
+ /**
  * Created by The eXo Platform SAS Author : eXoPlatform exo@exoplatform.com
  * 9/8/15
  */
@@ -382,15 +370,14 @@ private void deletePageEntity(PageEntity pageEntity) {
 
   @Override
   public void deleteDraftOfPage(Page page) throws WikiException {
-    List<DraftPageEntity> draftPages = draftPageDAO.findDraftPagesByTargetPage(Long.parseLong(page.getId()));
-    for (DraftPageEntity draftPage: draftPages) {
-      if(draftPage != null){
-        deleteAttachmentsOfDraftPage(draftPage);
-      }
-    }
-    draftPageDAO.deleteDraftPagesByTargetPage(Long.valueOf(page.getId()));
+    draftPageDAO.deleteDraftPagesByTargetPage(Long.parseLong(page.getId()));
   }
 
+  @Override
+  public void deleteAttachmentsOfDraftPage(DraftPage draftPage) {
+    deleteAttachmentsOfDraftPage(convertDraftPageToDraftPageEntity(draftPage, pageDAO));
+  }
+  
   @Override
   public void deleteDraftOfPage(Page page, String lang) throws WikiException {
     List<DraftPageEntity> draftPages = draftPageDAO.findDraftPagesByTargetPage(Long.parseLong(page.getId()));
@@ -679,16 +666,10 @@ public DraftPage getDraftOfPageByLang(Page page, String lang) throws WikiExcepti
     }
     return null;
   }
-  
+
   @Override
   public List<DraftPage> getDraftsOfPage(Long pageId) {
-    List<DraftPage> draftPages = new ArrayList<>();
-    List<DraftPageEntity> draftPagesOfUser = draftPageDAO.findDraftPagesByTargetPage(pageId);
-    for (DraftPageEntity draft : draftPagesOfUser) {
-      draftPages.add(convertDraftPageEntityToDraftPage(draft));
-    }
-
-    return draftPages;
+    return convertDraftPageEntitiesToDraftPages(draftPageDAO.findDraftPagesByTargetPage(pageId));
   }
   
   @Override
@@ -1343,7 +1324,7 @@ public void deleteWatcherOfPage(String username, Page page) throws WikiException
   }
 
   @ExoTransactional
-  public void deleteAttachmentsOfDraftPage(DraftPageEntity page) throws WikiException {
+  public void deleteAttachmentsOfDraftPage(DraftPageEntity page) {
     List<DraftPageAttachmentEntity> attachmentsEntities = page.getAttachments();
     if (attachmentsEntities != null) {
       for (int i = 0; i < attachmentsEntities.size(); i++) {
diff --git a/notes-service/src/main/java/org/exoplatform/wiki/service/DataStorage.java b/notes-service/src/main/java/org/exoplatform/wiki/service/DataStorage.java
index f629221a5d..05dff8ae55 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/service/DataStorage.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/service/DataStorage.java
@@ -238,6 +238,13 @@ public default List<Attachment> getAttachmentsOfPage(Page page, boolean loadCont
    */
   public List<Page> getPagesOfWiki(String wikiType, String wikiOwner);
 
+  /**
+   * Delete attachments of target draft page
+   *
+   * @param draftPage target draft page
+   */
+  void deleteAttachmentsOfDraftPage(DraftPage draftPage);
+
   /**
    * Retrieves list of page versions by page id and lang
    *
diff --git a/notes-service/src/main/java/org/exoplatform/wiki/service/NoteService.java b/notes-service/src/main/java/org/exoplatform/wiki/service/NoteService.java
index 3cd6f971da..334514f22c 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/service/NoteService.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/service/NoteService.java
@@ -759,7 +759,7 @@ Page getNoteByIdAndLang(Long pageId, Identity userIdentity, String source, Strin
    * @param lang language.
    * @throws WikiException if an error occured
    */
-  void deleteVersionsByNoteIdAndLang(Long noteId, String lang) throws WikiException;
+  void deleteVersionsByNoteIdAndLang(Long noteId, String lang) throws Exception;
 
   /**
    * Deletes a list of versions of note by language.
@@ -771,7 +771,7 @@ Page getNoteByIdAndLang(Long pageId, Identity userIdentity, String source, Strin
    */
   @Deprecated
   // Use {@link deleteVersionsByNoteIdAndLang(Long noteId, String lang)} instead
-  void deleteVersionsByNoteIdAndLang(Long noteId, String username, String lang) throws WikiException;
+  void deleteVersionsByNoteIdAndLang(Long noteId, String username, String lang) throws Exception;
 
 
   /**
diff --git a/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java b/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java
index 83544d4b38..85bd7af5a1 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java
@@ -40,6 +40,7 @@
 
 import org.apache.commons.collections4.MapUtils;
 import org.apache.commons.lang3.StringUtils;
+import org.exoplatform.wiki.jpa.entity.DraftPageEntity;
 import org.gatein.api.EntityNotFoundException;
 
 import com.fasterxml.jackson.core.type.TypeReference;
@@ -252,15 +253,9 @@ public Page createNote(Wiki noteBook, String parentNoteName, Page note, Identity
         if (properties != null) {
           properties.setNoteId(Long.parseLong(createdPage.getId()));
           properties.setDraft(false);
-          properties =
-                  saveNoteMetadata(properties,
-                          note.getLang(),
-                          Long.valueOf(identityManager.getOrCreateUserIdentity(userIdentity.getUserId()).getId()));
-          DraftPage draftPage = getDraftNoteById(String.valueOf(properties.getNoteId()), userIdentity.getUserId());
-          if (draftPage != null) {
-            removeDraftById(draftPage.getId());
-            invalidateCache(draftPage);
-          }
+          properties = saveNoteMetadata(properties,
+                                        note.getLang(),
+                                        Long.valueOf(identityManager.getOrCreateUserIdentity(userIdentity.getUserId()).getId()));
         }
       } catch (Exception e) {
         log.error("Failed to save note metadata", e);
@@ -441,7 +436,6 @@ public boolean deleteNote(String noteType, String noteOwner, String noteName, Id
         }
 
         deleteNote(noteType, noteOwner, noteName);
-
         postDeletePage(noteType, noteOwner, noteName, note);
 
         // Post delete activity for all children pages
@@ -907,6 +901,17 @@ public void removeDraftOfNote(Page page, String username) throws WikiException {
    */
   @Override
   public void removeDraftOfNote(Page page) throws WikiException {
+    List<DraftPage> draftPages = dataStorage.getDraftsOfPage(Long.valueOf(page.getId()));
+    for (DraftPage draftPage : draftPages) {
+      if (draftPage != null) {
+        dataStorage.deleteAttachmentsOfDraftPage(draftPage);
+        try {
+          deleteNoteMetadataProperties(draftPage, draftPage.getLang(), NOTE_METADATA_DRAFT_PAGE_OBJECT_TYPE);
+        } catch (Exception e) {
+          log.error("Error while deleting draft properties");
+        }
+      }
+    }
     dataStorage.deleteDraftOfPage(page);
   }
   
@@ -943,15 +948,11 @@ public void removeDraft(String draftName) throws WikiException {
    */
   @Override
   public void removeDraftById(String draftId) throws Exception {
-    Page draftNote = dataStorage.getDraftPageById(draftId);
+    DraftPage draftNote = dataStorage.getDraftPageById(draftId);
+    deleteNoteMetadataProperties(draftNote, draftNote.getLang(), NOTE_METADATA_DRAFT_PAGE_OBJECT_TYPE);
     dataStorage.deleteDraftById(draftId);
-    MetadataItem draftNoteMetadataItem =
-                                       getNoteMetadataItem(draftNote, draftNote.getLang(), NOTE_METADATA_DRAFT_PAGE_OBJECT_TYPE);
-    if (draftNoteMetadataItem != null) {
-      metadataService.deleteMetadataItem(draftNoteMetadataItem.getId(), false);
-    }
   }
-  
+
   /**
    * {@inheritDoc}
    */
@@ -991,6 +992,7 @@ public void createVersionOfNote(Page note, String userName) throws WikiException
       try {
         NotePageProperties properties = note.getProperties();
         if (properties != null) {
+          properties.setNoteId(Long.parseLong(note.getId()));
           properties.setDraft(false);
           saveNoteMetadata(properties, note.getLang(), Long.valueOf(identityManager.getOrCreateUserIdentity(userName).getId()));
         }
@@ -1088,13 +1090,19 @@ public DraftPage updateDraftForExistPage(DraftPage draftNoteToUpdate,
     } else {
       newDraftPage.setTargetPageRevision(revision);
     }
-
     newDraftPage = dataStorage.updateDraftPageForUser(newDraftPage, Utils.getCurrentUser());
     NotePageProperties properties = draftNoteToUpdate.getProperties();
     try {
-      properties = saveNoteMetadata(properties,
-                                    newDraftPage.getLang(),
-                                    Long.valueOf(identityManager.getOrCreateUserIdentity(username).getId()));
+      if (properties != null) {
+        NoteFeaturedImage featuredImage = properties.getFeaturedImage();
+        if (featuredImage != null && featuredImage.getUploadId() != null
+            && isOriginalFeaturedImage(draftNoteToUpdate, targetPage)) {
+          featuredImage.setId(0L);
+        }
+        properties = saveNoteMetadata(properties,
+                                      newDraftPage.getLang(),
+                                      Long.valueOf(identityManager.getOrCreateUserIdentity(username).getId()));
+      }
     } catch (Exception e) {
       log.error("Failed to save draft note metadata", e);
     }
@@ -1172,6 +1180,11 @@ public DraftPage createDraftForExistPage(DraftPage draftPage,
     NotePageProperties properties = draftPage.getProperties();
     try {
       if (properties != null) {
+        NoteFeaturedImage featuredImage = properties.getFeaturedImage();
+        if (featuredImage != null && featuredImage.getUploadId() != null) {
+          featuredImage.setId(0L);
+        }
+        properties.setNoteId(Long.parseLong(newDraftPage.getId()));
         properties = saveNoteMetadata(properties,
                                       draftPage.getLang(),
                                       Long.valueOf(identityManager.getOrCreateUserIdentity(username).getId()));
@@ -1466,22 +1479,46 @@ public DraftPage getLatestDraftPageByUserAndTargetPageAndLang(Long targetPageId,
    * {@inheritDoc}
    */
   @Override
-  public void deleteVersionsByNoteIdAndLang(Long noteId, String lang) throws WikiException {
+  public void deleteVersionsByNoteIdAndLang(Long noteId, String lang) throws Exception {
+    Page note = getNoteById(String.valueOf(noteId));
+    if (note != null) {
+      deleteNoteMetadataProperties(note, lang, NOTE_METADATA_PAGE_OBJECT_TYPE);
+    }
     dataStorage.deleteVersionsByNoteIdAndLang(noteId, lang);
     List<DraftPage> drafts = dataStorage.getDraftsOfPage(noteId);
     for (DraftPage draftPage : drafts) {
       if (StringUtils.equals(draftPage.getLang(),lang)) {
-        removeDraft(draftPage.getName());
+        removeDraftById(draftPage.getId());
       }
     }
     postDeletePageVersionLanguage(noteId + "-" + lang);
   }
 
+  private void deleteNoteMetadataProperties(Page note, String lang, String objectType) throws Exception {
+    MetadataItem draftNoteMetadataItem = getNoteMetadataItem(note, lang, objectType);
+    if (draftNoteMetadataItem != null) {
+      Map<String, String> properties = draftNoteMetadataItem.getProperties();
+      if (properties != null && properties.getOrDefault(FEATURED_IMAGE_ID, null) != null) {
+        String featuredImageId = properties.get(FEATURED_IMAGE_ID);
+        if (note.isDraftPage() && ((DraftPage) note).getTargetPageId() != null) {
+          removeNoteFeaturedImage(Long.parseLong(note.getId()),
+                                  Long.parseLong(featuredImageId),
+                                  lang,
+                                  true,
+                                  Long.parseLong(identityManager.getOrCreateUserIdentity(note.getOwner()).getId()));
+        } else {
+          fileService.deleteFile(Long.parseLong(featuredImageId));
+        }
+      }
+      metadataService.deleteMetadataItem(draftNoteMetadataItem.getId(), false);
+    }
+  }
+  
   /**
    * {@inheritDoc}
    */
   @Override
-  public void deleteVersionsByNoteIdAndLang(Long noteId, String userName, String lang) throws WikiException {
+  public void deleteVersionsByNoteIdAndLang(Long noteId, String userName, String lang) throws Exception {
     deleteVersionsByNoteIdAndLang(noteId, lang);
   }
   
@@ -1974,6 +2011,7 @@ public Long saveNoteFeaturedImage(Page note, NoteFeaturedImage featuredImage) th
     long featuredImageId = featuredImage.getId() != null ? featuredImage.getId(): 0L;
     String uploadId = featuredImage.getUploadId();
     if (uploadId != null) {
+      
       UploadResource uploadResource = uploadService.getUploadResource(uploadId);
       if (uploadResource != null) {
         String fileDiskLocation = uploadResource.getStoreLocation();
@@ -2023,6 +2061,7 @@ public NoteFeaturedImage getNoteFeaturedImageInfo(Long noteId, String lang, bool
     if (note == null) {
       throw new ObjectNotFoundException("Note with id: " + noteId + " and lang: " + lang + " not found");
     }
+
     MetadataItem metadataItem = getNoteMetadataItem(note,
                                                     lang,
                                                     isDraft ? NOTE_METADATA_DRAFT_PAGE_OBJECT_TYPE
@@ -2065,18 +2104,17 @@ private MetadataItem getNoteMetadataItem(Page note, String lang, String objectTy
                           .orElse(null);
   }
 
-  private Map<String, String> copyNotePageProperties(Page oldNote,
-                                                     Page note,
-                                                     String oldLang,
-                                                     String lang,
-                                                     String oldObjectType,
-                                                     String newObjectType,
-                                                     String username) {
+  private void copyNotePageProperties(Page oldNote,
+                                      Page note,
+                                      String oldLang,
+                                      String lang,
+                                      String oldObjectType,
+                                      String newObjectType,
+                                      String username) {
     if (note == null || oldNote == null) {
-      return null;
+      return;
     }
-    Map<String, String> properties = new HashMap<>();
-    if (username != null) {
+      if (username != null) {
       org.exoplatform.social.core.identity.model.Identity identity =
                                                                    identityManager.getOrCreateIdentity(OrganizationIdentityProvider.NAME,
                                                                                                        username);
@@ -2084,20 +2122,14 @@ private Map<String, String> copyNotePageProperties(Page oldNote,
       MetadataItem oldNoteMetadataItem = getNoteMetadataItem(oldNote, oldLang, oldObjectType);
       MetadataItem newNoteMetadataItem = getNoteMetadataItem(note, lang, newObjectType);
       if (oldNoteMetadataItem != null && oldNoteMetadataItem.getProperties() != null) {
-        properties = oldNoteMetadataItem.getProperties();
-        if (properties != null && oldLang == null && lang != null) {
-          properties.remove(FEATURED_IMAGE_ID);
-          properties.remove(FEATURED_IMAGE_ALT_TEXT);
-          properties.remove(FEATURED_IMAGE_UPDATED_DATE);
-        }
         if (newNoteMetadataItem != null) {
-          newNoteMetadataItem.setProperties(properties);
+          newNoteMetadataItem.setProperties(oldNoteMetadataItem.getProperties());
           metadataService.updateMetadataItem(newNoteMetadataItem, Long.parseLong(identity.getId()), false);
         } else {
           try {
             metadataService.createMetadataItem(newNoteMetadataObject,
                                                NOTES_METADATA_KEY,
-                                               properties,
+                                               oldNoteMetadataItem.getProperties(),
                                                Long.parseLong(identity.getId()),
                                                false);
           } catch (Exception e) {
@@ -2106,7 +2138,6 @@ private Map<String, String> copyNotePageProperties(Page oldNote,
         }
       }
     }
-    return properties;
   }
   
   private boolean isOriginalFeaturedImage(Page draftPage, Page targetPage) {
@@ -2176,11 +2207,8 @@ public NotePageProperties saveNoteMetadata(NotePageProperties notePageProperties
     Long featuredImageId = null;
     NoteFeaturedImage featuredImage = notePageProperties.getFeaturedImage();
     if (notePageProperties.isDraft()) {
-        note = getLatestDraftPageByTargetPageAndLang(notePageProperties.getNoteId(), lang);
-        if (note == null) {
-          note = getDraftNoteById(String.valueOf(notePageProperties.getNoteId()),
-                                  identityManager.getIdentity(String.valueOf(userIdentityId)).getRemoteId());
-        }
+      note = getDraftNoteById(String.valueOf(notePageProperties.getNoteId()),
+                              identityManager.getIdentity(String.valueOf(userIdentityId)).getRemoteId());
     } else {
       note = getNoteByIdAndLang(notePageProperties.getNoteId(), lang);
     }
diff --git a/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java b/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java
index 23f864d0fb..4eef21aefb 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java
@@ -965,8 +965,7 @@ public Response deleteDraftNote(@Parameter(description = "Note id", required = t
       if (draftNote == null) {
         return Response.status(Response.Status.BAD_REQUEST).build();
       }
-      String draftNoteName = draftNote.getName();
-      noteService.removeDraft(draftNoteName);
+      noteService.removeDraftById(draftNote.getId());
       return Response.ok().build();
     } catch (Exception ex) {
       log.warn("Failed to perform Delete of noteBook note {}", noteId, ex);
diff --git a/notes-service/src/test/java/org/exoplatform/wiki/service/TestNoteService.java b/notes-service/src/test/java/org/exoplatform/wiki/service/TestNoteService.java
index 431fd778e8..b8d091bfcb 100644
--- a/notes-service/src/test/java/org/exoplatform/wiki/service/TestNoteService.java
+++ b/notes-service/src/test/java/org/exoplatform/wiki/service/TestNoteService.java
@@ -35,6 +35,10 @@
 import io.meeds.notes.model.NoteFeaturedImage;
 import io.meeds.notes.model.NotePageProperties;
 import org.apache.commons.io.FileUtils;
+import org.exoplatform.commons.file.services.FileService;
+import org.exoplatform.social.core.manager.IdentityManager;
+import org.exoplatform.social.core.space.model.Space;
+import org.exoplatform.social.core.space.spi.SpaceService;
 import org.exoplatform.upload.UploadResource;
 import org.exoplatform.upload.UploadService;
 import org.exoplatform.wiki.model.*;
@@ -54,6 +58,9 @@ public class TestNoteService extends BaseTest {
   private WikiService wService;
   private NoteService noteService;
   private NotesExportService notesExportService;
+  private IdentityManager identityManager;
+  private FileService fileService;
+  private SpaceService spaceService;
 
   public TestNoteService() {
     setForceContainerReload(true);
@@ -64,6 +71,9 @@ public void setUp() throws Exception {
     wService = getContainer().getComponentInstanceOfType(WikiService.class) ;
     noteService = getContainer().getComponentInstanceOfType(NoteService.class) ;
     notesExportService = getContainer().getComponentInstanceOfType(NotesExportService.class);
+    identityManager = getContainer().getComponentInstanceOfType(IdentityManager.class) ;
+    fileService = getContainer().getComponentInstanceOfType(FileService.class) ;
+    spaceService = getContainer().getComponentInstanceOfType(SpaceService.class) ;
     getOrCreateWiki(wService, PortalConfig.PORTAL_TYPE, "classic");
   }
   
@@ -570,28 +580,45 @@ public void testGetNotesOfWiki() throws WikiException, IllegalAccessException {
     assertEquals(pages.size(),4);
   }
 
-  public void testDeleteNote1() throws WikiException, IllegalAccessException {
+  public void testDeleteNote1() throws Exception {
     Identity user = new Identity("user");
     Wiki portalWiki = getOrCreateWiki(wService, PortalConfig.PORTAL_TYPE, "testPortal2");
     Page notePage = noteService.createNote(portalWiki, "Home", new Page("note1", "note1"), user);
     assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "testPortal2", notePage.getName()));
     noteService.deleteNote(PortalConfig.PORTAL_TYPE, "testPortal2", notePage.getName(), user);
-
     assertNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "testPortal2", notePage.getName()));
   }
 
-  public void testDeleteVersionsByNoteIdAndLang() throws WikiException, IllegalAccessException {
+  public void testDeleteVersionsByNoteIdAndLang() throws Exception {
     Identity root = new Identity("root");
-    Wiki portalWiki = getOrCreateWiki(wService, PortalConfig.PORTAL_TYPE, "testPortal");
+    org.exoplatform.social.core.identity.model.Identity identity = identityManager.getOrCreateUserIdentity("root");
+    Space space = new Space();
+    space.setDisplayName("test2");
+    space.setPrettyName("test2");
+    space.setRegistration(Space.OPEN);
+    space.setVisibility(Space.PUBLIC);
+    space = spaceService.createSpace(space, "root");
+    Wiki portalWiki = getOrCreateWiki(wService, PortalConfig.PORTAL_TYPE, space.getGroupId());
     Page note1 = noteService.createNote(portalWiki, "Home", new Page("testPage1", "testPage1"), root);
-    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, "testPortal", note1.getName()));
+    assertNotNull(noteService.getNoteOfNoteBookByName(PortalConfig.PORTAL_TYPE, space.getGroupId(), note1.getName()));
     note1 = noteService.getNoteById(note1.getId());
     note1.setLang("en");
     note1.setTitle("englishTitle");
     noteService.createVersionOfNote(note1, "root");
     note1.setLang("fr");
     note1.setTitle("frenchTitle");
+
+    // Check delete properties
+    this.bindMockedUploadService();
+    NotePageProperties notePageProperties = createNotePageProperties(Long.parseLong(note1.getId()), "alt text", "summary test");
+    note1.setProperties(notePageProperties);
     noteService.createVersionOfNote(note1, "root");
+    NoteFeaturedImage featuredImage = noteService.getNoteFeaturedImageInfo(Long.valueOf(note1.getId()),
+                                                                           "fr",
+                                                                           false,
+                                                                           null,
+                                                                           Long.parseLong(identity.getId()));
+    assertNotNull(featuredImage);
     noteService.deleteVersionsByNoteIdAndLang(Long.valueOf(note1.getId()), "en");
     Page note = noteService.getNoteByIdAndLang(Long.valueOf(note1.getId()), root, "", "en");
     assertEquals(note.getTitle(), "testPage1");
@@ -599,6 +626,7 @@ public void testDeleteVersionsByNoteIdAndLang() throws WikiException, IllegalAcc
     assertNotNull(note);
     assertEquals(note.getTitle(), "frenchTitle");
     noteService.deleteVersionsByNoteIdAndLang(Long.valueOf(note.getId()), "fr");
+    assertTrue(fileService.getFile(featuredImage.getId()).getFileInfo().isDeleted());
     note = noteService.getNoteByIdAndLang(Long.valueOf(note1.getId()), root, "", "fr");
     assertEquals(note.getTitle(), "testPage1");
     noteService.deleteNote(note1.getWikiType(), note1.getWikiOwner(), note1.getName());
@@ -876,4 +904,69 @@ public void testGetVersionById() throws Exception {
     PageVersion pageVersion = noteService.getPublishedVersionByPageIdAndLang(Long.valueOf(note.getId()), "en");
     assertNotNull(noteService.getPageVersionById(Long.valueOf(pageVersion.getId())));
   }
-}
+
+   public void testFeaturedImageWhenRemoveDraftById() throws Exception {
+     startSessionAs("root");
+     identityManager.getOrCreateUserIdentity("root");
+     Space space = new Space();
+     space.setDisplayName("test");
+     space.setPrettyName("test");
+     space.setRegistration(Space.OPEN);
+     space.setVisibility(Space.PUBLIC);
+     space = spaceService.createSpace(space, "root");
+     Identity user = new Identity("root");
+     this.bindMockedUploadService();
+     NotePageProperties notePageProperties = createNotePageProperties(0L, "alt text", "summary Test");
+     notePageProperties.setDraft(true);
+     DraftPage draftPage = new DraftPage();
+     draftPage.setTitle("test");
+     draftPage.setContent("test");
+     draftPage.setWikiOwner(space.getGroupId());
+     draftPage.setProperties(notePageProperties);
+
+     // Draft not related to page
+     draftPage = noteService.createDraftForNewPage(draftPage, new Date().getTime(), 1L);
+     Wiki portalWiki = getOrCreateWiki(wService, PortalConfig.PORTAL_TYPE, space.getGroupId());
+     NoteFeaturedImage featuredImage =
+                                     noteService.getNoteFeaturedImageInfo(Long.valueOf(draftPage.getId()), null, true, null, 1L);
+     assertNotNull(featuredImage);
+     noteService.removeDraftById(draftPage.getId());
+     assertTrue(fileService.getFile(featuredImage.getId()).getFileInfo().isDeleted());
+
+     // Draft related to page
+     // Once deleted we should be aware of illustration assigned to parent page or not
+     Page page = new Page();
+     page.setTitle("testRemoveImageWhenDraftRemoved");
+     page.setName("testRemoveImageWhenDraftRemoved");
+     page.setContent("testRemoveImageWhenDraftRemoved");
+     page.setWikiOwner(space.getGroupId());
+
+     notePageProperties = createNotePageProperties(0L, "alt text", "summary Test");
+     page.setProperties(notePageProperties);
+     Page note = noteService.createNote(portalWiki, "Home", page , user);
+  
+     
+     // Draft has same associated file with parent, it should not be deleted
+     draftPage.setTargetPageId(note.getId());
+     draftPage.setId(null);
+     notePageProperties = note.getProperties();
+     notePageProperties.setDraft(true);
+     draftPage.setProperties(notePageProperties);
+     draftPage = noteService.createDraftForExistPage(draftPage, note, null, new Date().getTime(), "root");
+     featuredImage = noteService.getNoteFeaturedImageInfo(Long.valueOf(draftPage.getId()), null, true, null, 1L);
+     assertNotNull(featuredImage);
+     noteService.removeDraftById(draftPage.getId());
+     assertFalse(fileService.getFile(featuredImage.getId()).getFileInfo().isDeleted());
+
+     // Draft has different associated file, it should be deleted
+     draftPage = noteService.createDraftForExistPage(draftPage, note, null, new Date().getTime(), "root");
+     notePageProperties = createNotePageProperties(Long.parseLong(draftPage.getId()), "alt text", "summary Test");
+     notePageProperties.setDraft(true);
+     draftPage.setProperties(notePageProperties);
+     draftPage = noteService.updateDraftForExistPage(draftPage, note, null, new Date().getTime(), "root");
+     featuredImage = noteService.getNoteFeaturedImageInfo(Long.valueOf(draftPage.getId()), null, true, null, 1L);
+     assertNotNull(featuredImage);
+     noteService.removeDraftById(draftPage.getId());
+     assertTrue(fileService.getFile(featuredImage.getId()).getFileInfo().isDeleted());
+   }
+ }
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
index 2083ef3876..f739b86d88 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
@@ -116,7 +116,7 @@ export default {
       selectedLanguage: null,
       translations: null,
       languages: [],
-      allLanguages: [],
+      allLanguages: null,
       newDraft: false,
       spaceDisplayName: null,
       noteEditorExtensions: null,
@@ -128,6 +128,7 @@ export default {
       editorIcon: 'fas fa-clipboard',
       saveButtonIcon: 'fas fa-save',
       translationSwitch: false,
+      newTranslation: false,
     };
   },
   computed: {
@@ -143,6 +144,9 @@ export default {
     propertiesModified() {
       return JSON.stringify(this.note?.properties) !== JSON.stringify(this.originalNote?.properties);
     },
+    featuredImageUpdated() {
+      return this.note?.properties?.featuredImage?.uploadId || this.note?.properties?.featuredImage?.toDelete;
+    },
     langButtonTooltipText() {
       if (this.noteId) {
         return this.$t('notes.label.button.translations.options');
@@ -310,6 +314,7 @@ export default {
       history.pushState({}, null, url.toString());
     },
     updateNote(note) {
+      const currentDraftId = this.note?.id;
       return this.$notesService.updateNoteById(note).then(data => {
         this.note = data;
         this.originalNote = structuredClone(data);
@@ -324,17 +329,20 @@ export default {
           type: 'error',
           message: this.$t(`notes.message.${e.message}`)
         });
-      }).finally(() => this.enableClickOnce(),this.removeLocalStorageCurrentDraft());
+      }).finally(() => {
+        this.enableClickOnce();
+        this.removeLocalStorageCurrentDraft(currentDraftId);
+      });
     },
     createNote(note) {
       return this.$notesService.createNote(note).then(data => {
+        const draftNote = JSON.parse(localStorage.getItem(`draftNoteId-${this.note.id}-${this.selectedLanguage}`));
         this.note = data;
         this.noteId = data.id;
         this.addParamToUrl('noteId', this.noteId);
         this.originalNote = structuredClone(data);
         const notePath = this.$notesService.getPathByNoteOwner(data, this.appName).replace(/ /g, '_');
         // delete draft note
-        const draftNote = JSON.parse(localStorage.getItem(`draftNoteId-${this.note.id}-${this.slectedLanguage}`));
         this.deleteDraftNote(draftNote, notePath);
         this.displayMessage({
           type: 'success',
@@ -347,7 +355,7 @@ export default {
           type: 'error',
           message: this.$t(`notes.message.${e.message}`)
         });
-      }).finally(() => this.enableClickOnce(),this.removeLocalStorageCurrentDraft());
+      }).finally(() => this.enableClickOnce());
     },
     autoSave() {
       if (this.translationSwitch) {
@@ -377,10 +385,10 @@ export default {
         });
       }, this.autoSaveDelay);
     },
-    saveDraftFromLocalStorage(){
-      const currentDraft = localStorage.getItem(`draftNoteId-${this.note.id}`);
+    saveDraftFromLocalStorage() {
+      const currentDraft = localStorage.getItem(`draftNoteId-${this.note?.id}-${this.selectedLanguage}`);
       if (currentDraft) {
-        this.removeLocalStorageCurrentDraft();
+        this.removeLocalStorageCurrentDraft(this.note?.id);
         const draftToPersist = JSON.parse(currentDraft);
         this.persistDraftNote(draftToPersist, false);
       }
@@ -505,10 +513,9 @@ export default {
       const draftNote = this.fillDraftNote();
       if (this.note.title || this.note.content) {
         // if draft page not created persist it only the first time else update it in browser's localStorage
-        if (this.note.draftPage && this.note.id && !this.note?.lang
-            && !this.note?.properties?.featuredImage?.uploadId) {
+        if (this.note.draftPage && this.note.id && !this.note?.lang && !this.featuredImageUpdated) {
           this.note.parentPageId = this.parentPageId;
-          localStorage.setItem(`draftNoteId-${this.note.id}`, JSON.stringify(draftNote));
+          localStorage.setItem(`draftNoteId-${this.note.id}-${this.selectedLanguage}`, JSON.stringify(draftNote));
           this.actualNote = {
             name: draftNote.name,
             title: draftNote.title,
@@ -538,7 +545,9 @@ export default {
         }
         if (draftNote.properties) {
           draftNote.properties.draft = true;
-          draftNote.properties.noteId = this.note?.targetPageId || this.note?.id;
+          if (this.newTranslation) {
+            draftNote.properties.featuredImage = null;
+          }
         }
         this.$notesService.saveDraftNote(draftNote, this.parentPageId).then(savedDraftNote => {
           if (update){
@@ -554,9 +563,10 @@ export default {
             this.newDraft=false;
             savedDraftNote.parentPageId = this.parentPageId;
             this.note = savedDraftNote;
-            localStorage.setItem(`draftNoteId-${this.note.id}`, JSON.stringify(savedDraftNote));
+            localStorage.setItem(`draftNoteId-${this.note.id}-${this.selectedLanguage}`, JSON.stringify(savedDraftNote));
+            this.newTranslation = false;
           } else {
-            this.removeLocalStorageCurrentDraft();
+            this.removeLocalStorageCurrentDraft(draftNote.id);
           }
         }).then(() => {
           this.savingDraft = false;
@@ -615,7 +625,7 @@ export default {
       if (this.note.draftPage && this.note.id) {
         this.$notesService.deleteDraftNote(this.note)
           .then(() => {
-            this.removeLocalStorageCurrentDraft();
+            this.removeLocalStorageCurrentDraft(this.note?.id);
             return this.getNote(this.note.targetPageId, this.selectedLanguage);
           })
           .catch(e => console.error('Error when deleting draft note', e));
@@ -625,9 +635,9 @@ export default {
       if (!draftNote) {
         draftNote = this.note;
       }
-      if (this.note.draftPage && this.note.id) {
-        this.removeLocalStorageCurrentDraft();
-        this.$notesService.deleteDraftNote(draftNote).then(() => {
+      if (draftNote.draftPage && draftNote?.id) {
+        this.removeLocalStorageCurrentDraft(draftNote.id);
+        return this.$notesService.deleteDraftNote(draftNote).then(() => {
           this.draftSavingStatus = '';
           //re-initialize data
           if (!notePath) {
@@ -653,10 +663,10 @@ export default {
         });
       }
     },
-    removeLocalStorageCurrentDraft() {
-      const currentDraft = localStorage.getItem(`draftNoteId-${this.note.id}`);
+    removeLocalStorageCurrentDraft(draftId) {
+      const currentDraft = localStorage.getItem(`draftNoteId-${draftId}-${this.selectedLanguage}`);
       if (currentDraft) {
-        localStorage.removeItem(`draftNoteId-${this.note.id}`);
+        localStorage.removeItem(`draftNoteId-${draftId}-${this.selectedLanguage}`);
       }
     },
     enableClickOnce() {
@@ -688,9 +698,9 @@ export default {
         this.translations = this.translations.map(translation => translation.value);
         this.translations.push(...data);
         if (this.translations.length > 0) {
-          this.translations = this.allLanguages.filter(lang => this.translations.includes(lang.value));
+          this.translations = this.allLanguages.filter(lang => this.translations.some(translation => translation === lang.value));
           this.translations.sort((a, b) => a.text.localeCompare(b.text));
-          this.languages = this.allLanguages.filter(lang => !this.translations.includes(lang.value));
+          this.languages = this.allLanguages.filter(lang => !this.translations.some(translation => translation.value === lang.value));
         }
         if (this.isMobile) {
           this.translations.unshift({value: null, text: this.$t('notes.label.translation.originalVersion')});
@@ -705,12 +715,15 @@ export default {
       });
     },
     getAvailableLanguages() {
-      this.languages = this.allLanguages = JSON.parse(eXo?.env?.portal?.availableLanguages)
-        ?.sort((a, b) => a.text.localeCompare(b.text));
-      this.languages.unshift({value: '', text: this.$t('notes.label.chooseLangage')});
-      if (this.translations) {
-        this.languages = this.languages.filter(item1 => !this.translations.some(item2 => item2.value === item1.value));
-      }
+      return this.$notesService.getAvailableLanguages().then(data => {
+        this.languages = data || [];
+        this.languages.sort((a, b) => a.text.localeCompare(b.text));
+        this.allLanguages = this.languages;
+        this.languages.unshift({value: '', text: this.$t('notes.label.chooseLangage')});
+        if (this.translations) {
+          this.languages = this.languages.filter(item1 => !this.translations.some(item2 => item2.value === item1.value));
+        }
+      });
     },
     getLanguageName(lang){
       const language = this.allLanguages.find(item => item.value === lang);
@@ -728,6 +741,7 @@ export default {
       });
     },
     addTranslation(lang){
+      this.newTranslation = true;
       if (!this.translations && this.note?.id) {
         this.getNoteLanguages(this.note.id);
       }
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue
index d942026489..dfaa23c4ee 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue
@@ -315,11 +315,11 @@ export default {
       this.$refs.metadataDrawer.open();
     },
     cancelChanges() {
+      this.close();
       this.noteObject.properties = structuredClone(this.currentNoteProperties || {});
       this.summaryContent = this.currentNoteProperties?.summary || '';
       this.hasFeaturedImageValue = this.hasFeaturedImage;
       this.imageData = null;
-      this.close();
     },
     close() {
       this.$refs.metadataDrawer.close();
@@ -327,8 +327,7 @@ export default {
     save() {
       const savedFeaturedImageId = this.noteObject?.properties?.featuredImage?.id;
       const properties = {
-        noteId: this.isDraft && this.noteObject?.targetPageId
-            || this.noteObject?.id,
+        noteId: this.noteObject?.id,
         summary: this.summaryContent,
         featuredImage: {
           id: savedFeaturedImageId,

From 180d9c21907e848a979fec1a66046ac20d81dcae Mon Sep 17 00:00:00 2001
From: Helmi Akermi <70575401+hakermi@users.noreply.github.com>
Date: Mon, 16 Sep 2024 12:08:29 +0100
Subject: [PATCH 38/40] fix: Properties of newly created note are not updated -
 EXO-74190 - Meed-io/MIPs#128 (#1107)

Properties of newly created note are not updated
---
 .../org/exoplatform/wiki/service/rest/NotesRestService.java    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java b/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java
index 4eef21aefb..0cd52ab1e3 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java
@@ -30,6 +30,7 @@
 import java.util.HashMap;
 import java.util.List;
 import java.util.Locale;
+import java.util.Objects;
 import java.util.Optional;
 import java.util.ResourceBundle;
 import java.util.Set;
@@ -805,7 +806,7 @@ public Response updateNoteById(@Parameter(description = "Note id", required = tr
           noteService.removeDraftOfNote(noteParams, note.getLang());
         }
       } else if ((featuredImage != null && (featuredImage.isToDelete() || featuredImage.getUploadId() != null))
-          || (note_.getProperties() != null && !notePageProperties.getSummary().equals(note_.getProperties().getSummary()))) {
+          || !Objects.equals(note_.getProperties(), notePageProperties)) {
         if (StringUtils.isBlank(note.getLang())) {
           note_.setProperties(notePageProperties);
           note_ = noteService.updateNote(note_, PageUpdateType.EDIT_PAGE_PROPERTIES, identity);

From 28934a543060b93404809a6f62158b8d6bc8646a Mon Sep 17 00:00:00 2001
From: Sofien Haj Chedhli <shajchedli@exoplatform.com>
Date: Wed, 18 Sep 2024 09:00:50 +0100
Subject: [PATCH 39/40] feat: Add validation for note title field to limit
 input length - EXO-74191 - Meeds-io/MIPs#128  (#1113)

---
 .../portlet/notes/notesPortlet_en.properties  |  1 +
 .../portlet/notes/notesPortlet_fr.properties  |  1 +
 .../main/webapp/skin/less/notes/notes.less    |  1 -
 .../components/NoteFullRichEditor.vue         | 19 +++++++++++++++++--
 4 files changed, 19 insertions(+), 3 deletions(-)

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 2ff2f16751..91cd4959ca 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
@@ -1,5 +1,6 @@
 #Portlet notes
 notes.title.placeholderContentInput=Title
+notes.title.max.length.warning.message=The title cannot be longer than {0} chars
 notes.body.placeholderContentInput=Body
 notes.label.noteHome=Home
 notes.label.addPage=Add Page
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 38f6f68ee2..cf1220d993 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
@@ -1,5 +1,6 @@
 #Portlet notes
 notes.title.placeholderContentInput=Titre
+notes.title.max.length.warning.message=Le titre est limité à {0} caractères
 notes.body.placeholderContentInput=Contenu
 notes.label.noteHome=Accueil
 notes.label.addPage=Ajouter
diff --git a/notes-webapp/src/main/webapp/skin/less/notes/notes.less b/notes-webapp/src/main/webapp/skin/less/notes/notes.less
index 5c89e0a9e2..9aae3f39f0 100644
--- a/notes-webapp/src/main/webapp/skin/less/notes/notes.less
+++ b/notes-webapp/src/main/webapp/skin/less/notes/notes.less
@@ -73,7 +73,6 @@
 
       .notes-content-form {
         min-height: calc(~"100vh - 140px");
-
         .notes-content-wrapper > div[role="application"] {
           border-color: transparent;
           flex: 0 1 100%;
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 c9f62a8a41..4f7df1e428 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
@@ -53,6 +53,7 @@
             v-model="noteObject.title"
             :placeholder="titlePlaceholder"
             type="text"
+            :maxlength="noteTitleMaxLength"
             class="py-0 px-1 mt-5 mb-0">
         </div>
         <div class="formInputGroup white overflow-auto flex notes-content-wrapper">
@@ -87,7 +88,8 @@ export default {
       noteObject: null,
       editor: null,
       initialized: false,
-      instanceReady: false
+      instanceReady: false,
+      noteTitleMaxLength: 500
     };
   },
   props: {
@@ -190,6 +192,13 @@ export default {
   },
   watch: {
     'noteObject.title': function() {
+      if (this.noteObject.title.length >= this.noteTitleMaxLength) {
+        const messageObject = {
+          type: 'warning',
+          message: this.$t('notes.title.max.length.warning.message', {0: this.noteTitleMaxLength})
+        };
+        this.displayAlert(messageObject);
+      }
       this.updateData();
     },
     'noteObject.content': function () {
@@ -218,7 +227,7 @@ export default {
   computed: {
     hasFeaturedImage() {
       return !!this.noteObject?.properties?.featuredImage?.id;
-    }
+    },
   },
   created() {
     this.cloneNoteObject();
@@ -496,6 +505,12 @@ export default {
     openMetadataDrawer() {
       this.$refs.editorMetadataDrawer.open(this.noteObject);
     },
+    displayAlert(detail) {
+      document.dispatchEvent(new CustomEvent('alert-message', {detail: {
+        alertType: detail?.type,
+        alertMessage: detail?.message,
+      }}));
+    },
   }
 };
 </script>

From 1d5a3b1c9ff4c8d582bb48d87bcea50d1c0b175d Mon Sep 17 00:00:00 2001
From: Helmi Akermi <70575401+hakermi@users.noreply.github.com>
Date: Wed, 18 Sep 2024 16:13:04 +0100
Subject: [PATCH 40/40] fix: Fix issue when update only summary of newly
 created note - EXO-74245 - Meeds-io/MIPs#128 (#1116)

fix Issue when update only summary of newly created note
---
 .../java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java | 2 +-
 .../notes-rich-editor/components/NoteEditorMetadataDrawer.vue   | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java b/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java
index 85bd7af5a1..061648f037 100644
--- a/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java
+++ b/notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java
@@ -2185,7 +2185,7 @@ && isOriginalFeaturedImage(draftPage, getNoteByIdAndLang(Long.valueOf(draftPage.
                                                     lang,
                                                     isDraft ? NOTE_METADATA_DRAFT_PAGE_OBJECT_TYPE
                                                             : NOTE_METADATA_PAGE_OBJECT_TYPE);
-    if (metadataItem != null) {
+    if (metadataItem != null && metadataItem.getProperties() != null) {
       Map<String, String> properties = metadataItem.getProperties();
       properties.remove(FEATURED_IMAGE_ID);
       properties.remove(FEATURED_IMAGE_UPDATED_DATE);
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue
index dfaa23c4ee..f9576dacb9 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue
@@ -320,6 +320,7 @@ export default {
       this.summaryContent = this.currentNoteProperties?.summary || '';
       this.hasFeaturedImageValue = this.hasFeaturedImage;
       this.imageData = null;
+      this.uploadId = null;
     },
     close() {
       this.$refs.metadataDrawer.close();