From 0661a6a28aa519d1cf16b129cf82dde7e1d9c43b Mon Sep 17 00:00:00 2001
From: Helmi Akermi <hakermi@exoplatform.com>
Date: Thu, 3 Oct 2024 11:09:11 +0100
Subject: [PATCH] feat: Implement notes publication drawer - EXO-72738

feat: Implement note publication drawer - EXO-72738 - Meeds-io/MIPs#161

Implement note publication drawer
---
 .../wiki/service/rest/NotesRestService.java   |   8 +-
 .../portlet/notes/notesPortlet_en.properties  |   7 +
 .../portlet/notes/notesPortlet_fr.properties  |   5 +
 .../webapp/WEB-INF/conf/configuration.xml     |   1 +
 .../conf/wiki/feature-flags-configuration.xml |  52 +++
 .../webui/workspace/UINotesHeadTemplate.gtmpl |  10 +
 .../main/webapp/skin/less/notes/notes.less    |   2 +-
 .../components/NotesEditorDashboard.vue       |   2 +-
 .../components/NoteEditorMetadataDrawer.vue   | 310 ------------------
 .../components/NoteFullRichEditor.vue         |  77 ++++-
 .../NoteEditorFeaturedImageDrawer.vue         |   0
 .../NoteEditorMetadataDrawer.vue              | 160 +++++++++
 .../NoteMetadataPropertiesForm.vue            | 272 +++++++++++++++
 .../NotePublicationDrawer.vue                 | 238 ++++++++++++++
 .../notes-rich-editor/initComponents.js       |  10 +-
 15 files changed, 819 insertions(+), 335 deletions(-)
 create mode 100644 notes-webapp/src/main/webapp/WEB-INF/conf/wiki/feature-flags-configuration.xml
 create mode 100644 notes-webapp/src/main/webapp/groovy/webui/workspace/UINotesHeadTemplate.gtmpl
 delete mode 100644 notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue
 rename notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/{ => note-properties}/NoteEditorFeaturedImageDrawer.vue (100%)
 create mode 100644 notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/note-properties/NoteEditorMetadataDrawer.vue
 create mode 100644 notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/note-properties/NoteMetadataPropertiesForm.vue
 create mode 100644 notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/note-publication/NotePublicationDrawer.vue

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 10f9630f41..c4e81abaab 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
@@ -761,8 +761,8 @@ 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_.setLang(note.getLang());
           note_.setTitle(note.getTitle());
           note_.setContent(note.getContent());
           note_.setProperties(notePageProperties);
@@ -783,8 +783,8 @@ public Response updateNoteById(@Parameter(description = "Note id", required = tr
           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_.setLang(note.getLang());
           note_.setTitle(note.getTitle());
           note_.setProperties(notePageProperties);
         }
@@ -799,8 +799,8 @@ public Response updateNoteById(@Parameter(description = "Note id", required = tr
           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_.setLang(note.getLang());
           note_.setContent(note.getContent());
           note_.setProperties(notePageProperties);
         }
@@ -815,8 +815,8 @@ public Response updateNoteById(@Parameter(description = "Note id", required = tr
           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_.setLang(note.getLang());
           note_.setProperties(notePageProperties);
         }
         noteService.createVersionOfNote(note_, identity.getUserId());
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 07685c50a0..52dcd44da0 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
@@ -65,6 +65,13 @@ 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.publication.publish.label=Publish
+notes.publication.label=Choose your publication options
+notes.publication.check.properties.label=Check the teaser
+notes.publication.publish.next.label=Next
+
+
+
 popup.confirm=Confirm
 popup.msg.confirmation=Confirmation
 popup.confirmation.delete=Delete the note
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 1fddf24dba..69324a364d 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
@@ -64,6 +64,11 @@ notes.featuredImage.remove.error.message=Erreur lors de la suppression de l'illu
 notes.featuredImage.remove.success.message=Illustration supprimée avec succès
 notes.featuredImage.size.error.message=La taille de l'illustration doit être inférieure ou égale à 20Mo
 
+notes.publication.publish.label=Publier
+notes.publication.label=Choisir les options de publication
+notes.publication.check.properties.label=Vérifier l'accroche
+notes.publication.publish.next.label=Suivant
+
 popup.confirm=Confirmer
 popup.msg.confirmation=Confirmation
 popup.confirmation.delete=Delete the note
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 e5c8abd60f..2190a629d8 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/notification-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..112f9b2bba
--- /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>NotesEditorPublicationDrawerFeatureProperties</key>
+        <type>org.exoplatform.container.ExtendedPropertyConfigurator</type>
+        <init-params>
+            <properties-param>
+                <name>NotesEditorPublicationDrawerFeatureProperties</name>
+                <description>Publication drawer Feature enablement flag</description>
+                <property name="exo.feature.newPublicationDrawer.enabled"
+                          value="${exo.feature.newPublicationDrawer.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
new file mode 100644
index 0000000000..9d7999e631
--- /dev/null
+++ b/notes-webapp/src/main/webapp/groovy/webui/workspace/UINotesHeadTemplate.gtmpl
@@ -0,0 +1,10 @@
+<%
+  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.newPublicationDrawerEnabled = <%=featureService.isFeatureActiveForUser("newPublicationDrawer", userName)%>;
+</script>
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 ca30c2f91a..eb15d3f0eb 100644
--- a/notes-webapp/src/main/webapp/skin/less/notes/notes.less
+++ b/notes-webapp/src/main/webapp/skin/less/notes/notes.less
@@ -212,7 +212,7 @@
   }
 }
 
-#editorMetadataDrawer {
+#editorMetadataDrawer, #editorPublicationDrawer {
 
   .add-image-area, .image-preview {
     background-color: @primaryBackground !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 2e3bf4cc0b..412a52e4a2 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
@@ -550,7 +550,7 @@ export default {
         if (draftNote.properties) {
           draftNote.properties.draft = true;
           if (this.newTranslation && !this.featuredImageUpdated) {
-            draftNote.properties.featuredImage = null;
+            draftNote.properties.featuredImage = {};
           }
         }
         this.$notesService.saveDraftNote(draftNote, this.parentPageId).then(savedDraftNote => {
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
deleted file mode 100644
index 970319b5bb..0000000000
--- a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorMetadataDrawer.vue
+++ /dev/null
@@ -1,310 +0,0 @@
-<!--
- 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 text-header 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 text-body mb-3">
-                {{ $t('notes.metadata.featuredImage.label') }}
-              </p>
-              <v-btn
-                v-if="!canShowFeaturedImagePreview"
-                name="image-area"
-                class="btn add-image-area d-flex"
-                height="206"
-                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="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%"
-                      contain
-                      :lazy-src="featuredImageLink"
-                      :alt="savedFeaturedImageAltText"
-                      :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 mt-2 mb-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 mt-2 mb-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 text-body mb-3">
-                  {{ $t('notes.metadata.summary.label') }}
-                </p>
-                <v-textarea
-                  v-model="summaryContent"
-                  name="summaryInputEditor"
-                  class="summary-metadata-input pt-0 overflow-auto"
-                  :placeholder="$t('notes.metadata.add.summary.placeholder')"
-                  rows="17"
-                  row-height="8"
-                  dense
-                  outlined
-                  auto-grow />
-                <span
-                  class="d-flex justify-end me-1"
-                  :class="{'error-color': summaryLengthError}">
-                  {{ summaryContent?.length }}/{{ summaryMaxLength }}
-                  <v-icon
-                    class="ms-1 my-auto"
-                    :class="[{ 'success-color': !summaryLengthError }, 'error-color']"
-                    size="16">
-                    fas fa-info-circle
-                  </v-icon>
-                </span>
-              </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="cancelChanges">
-            {{ $t('notes.button.cancel') }}
-          </v-btn>
-          <v-btn
-            :disabled="saveDisabled"
-            class="btn btn-primary"
-            @click="save">
-            {{ $t('notes.button.publish') }}
-          </v-btn>
-        </div>
-      </template>
-    </exo-drawer>
-  </div>
-</template>
-
-<script>
-
-export default {
-  data() {
-    return {
-      maxFileSize: 20 * 1024 * 1024,
-      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: {},
-      removeFeaturedImage: false,
-      summaryMaxLength: 1300
-    };
-  },
-  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: {
-    summaryLengthError() {
-      return this.summaryContent?.length > this.summaryMaxLength;
-    },
-    savedFeaturedImageAltText() {
-      return this.noteObject?.properties.featuredImage?.altText;
-    },
-    saveDisabled() {
-      return (!this.propertiesChanged && !this.imageData && !this.removeFeaturedImage) || this.summaryLengthError;
-    },
-    propertiesChanged() {
-      return JSON.stringify(this.noteObject?.properties || {}) !== JSON.stringify(this.currentNoteProperties || {});
-    },
-    canShowFeaturedImagePreview() {
-      return this.hasFeaturedImageValue || this.imageData?.length;
-    },
-    notedId() {
-      return this.noteObject?.id;
-    },
-    langParam() {
-      return this.noteObject?.lang && `&lang=${this.noteObject?.lang}` || '';
-    },
-    isDraft() {
-      return this.noteObject?.draftPage;
-    },
-    noteFeatureImageUpdatedDate() {
-      return this.noteObject?.properties?.featuredImage?.lastUpdated || 0;
-    },
-    featuredImageLink() {
-      return this.imageData || this.hasFeaturedImageValue
-                            && `${this.illustrationBaseUrl}${this.notedId}?v=${this.noteFeatureImageUpdatedDate}&isDraft=${this.isDraft}${this.langParam}` || '';
-    }
-  },
-  watch: {
-    'noteObject.lang': function () {
-      this.imageData = null;
-    },
-    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;
-    },
-    uploadId() {
-      if (this.uploadId) {
-        this.removeFeaturedImage = false;
-      }
-    },
-  },
-  methods: {
-    resetProperties() {
-      this.featureImageUpdated = false;
-      this.cancelChanges();
-    },
-    imageDataUpdated(data, mimeType) {
-      this.imageData = data;
-      this.mimeType = mimeType;
-    },
-    openFeaturedImageDrawer() {
-      this.$root.$emit('open-featured-image-drawer', {altText: this.featuredImageAltText || 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.removeFeaturedImage = false;
-      this.$refs.metadataDrawer.open();
-    },
-    cancelChanges() {
-      this.close();
-      this.noteObject.properties = structuredClone(this.currentNoteProperties || {});
-      this.summaryContent = this.currentNoteProperties?.summary || '';
-      this.featuredImageAltText = this.savedFeaturedImageAltText;
-      this.hasFeaturedImageValue = this.hasFeaturedImage;
-      this.imageData = null;
-      this.uploadId = null;
-    },
-    close() {
-      this.$refs.metadataDrawer.close();
-    },
-    save() {
-      const savedFeaturedImageId = this.noteObject?.properties?.featuredImage?.id;
-      const properties = {
-        noteId: this.noteObject?.id,
-        summary: this.summaryContent,
-        featuredImage: {
-          id: savedFeaturedImageId,
-          uploadId: this.uploadId,
-          mimeType: this.mimeType,
-          altText: this.featuredImageAltText,
-          toDelete: this.removeFeaturedImage || (!this.uploadId && !savedFeaturedImageId)
-        },
-        draft: this.isDraft || !this.notedId
-      };
-      this.$emit('metadata-updated', properties);
-      this.close();
-    },
-    removeNoteFeaturedImage() {
-      this.featuredImage = null;
-      this.removeFeaturedImage = true;
-      this.hasFeaturedImageValue = false;
-      this.imageData = null;
-      this.$root.$emit('reset-featured-image-data');
-    }
-  }
-};
-</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 7a5b434f8a..7b894e9ddf 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
@@ -30,7 +30,7 @@
       :selected-language="selectedLanguage"
       :translations="translations"
       :is-mobile="isMobile"
-      :post-key="postKey"
+      :post-key="postKey + enablePostKeys"
       :draft-saving-status="draftSavingStatus"
       :publish-button-text="publishButtonText"
       :lang-button-tooltip-text="langButtonTooltipText"
@@ -78,6 +78,13 @@
       ref="featuredImageDrawer"
       :note="noteObject"
       :has-featured-image="hasFeaturedImage" />
+    <note-publication-drawer
+      ref="editorPublicationDrawer"
+      :has-featured-image="hasFeaturedImage"
+      :is-publishing="isPublishing"
+      @publish="postAndPublishNote"
+      @metadata-updated="metadataUpdated"
+      @closed="publicationDrawerClosed" />
   </div>
 </template>
 
@@ -90,7 +97,9 @@ export default {
       initialized: false,
       instanceReady: false,
       noteTitleMaxLength: 500,
-      updatingProperties: null
+      updatingProperties: false,
+      enablePostKeys: 0,
+      isPublishing: false
     };
   },
   props: {
@@ -189,14 +198,15 @@ export default {
     imagesDownloadFolder: {
       type: String,
       default: 'DRIVE_ROOT_NODE/notes/images'
+    },
+    publicationEnabled: {
+      type: Boolean,
+      default: false
     }
   },
   watch: {
     'noteObject.title': function(newVal, oldVal) {
-      if (newVal.length > this.noteTitleMaxLength) {
-        this.displayNoteTitleMaxLengthCheckAlert();
-        this.noteObject.title = oldVal;
-      }
+      this.displayNoteTitleMaxLengthCheckAlert(newVal, oldVal);
       this.updateData();
     },
     'noteObject.content': function () {
@@ -228,6 +238,18 @@ export default {
     },
     saveNoteButtonDisabled() {
       return this.updatingProperties || this.saveButtonDisabled;
+    },
+    newPageDraft() {
+      return !this.noteObject?.id || (this.noteObject?.draftPage && !this.noteObject?.targetPageId);
+    },
+    editMode() {
+      return this.noteObject?.id && !this.newPageDraft;
+    },
+    isTranslation() {
+      return !!this.noteObject?.lang;
+    },
+    newPublicationDrawerEnabled() {
+      return eXo?.env?.portal?.newPublicationDrawerEnabled;
     }
   },
   created() {
@@ -241,6 +263,9 @@ export default {
     document.addEventListener('note-custom-plugins', this.openCustomPluginsDrawer);
   },
   methods: {
+    setPublishing(publishing) {
+      this.isPublishing = publishing;
+    },
     metadataUpdated(properties) {
       this.updatingProperties = true;
       this.noteObject.properties = properties;
@@ -249,7 +274,7 @@ export default {
         this.autoSave();
         this.waitForNoteMetadataUpdate();
       } else {
-        this.updatingProperties = null;
+        this.updatingProperties = false;
       }
     },
     editorClosed(){
@@ -335,8 +360,20 @@ export default {
         }, 200);
       }
     },
-    postNote(toPublish) {
-      this.$emit('post-note', toPublish);
+    postNote() {
+      if (this.newPublicationDrawerEnabled && this.publicationEnabled
+          && !this.isTranslation && !this.editMode) {
+        this.openPublicationDrawer(this.noteObject);
+        return;
+      }
+      this.postAndPublishNote();
+    },
+    postAndPublishNote(note) {
+      if (this.newPublicationDrawerEnabled) {
+        this.noteObject = note;
+        this.updateData();
+      }
+      this.$emit('post-note', false);
     },
     resetEditorData() {
       this.noteObject.title = null;
@@ -508,6 +545,12 @@ export default {
     isImageDrawerClosed() {
       return this.$refs.featuredImageDrawer.isClosed();
     },
+    openPublicationDrawer() {
+      this.$refs.editorPublicationDrawer.open(this.noteObject);
+    },
+    publicationDrawerClosed() {
+      this.enablePostKeys ++;
+    },
     openMetadataDrawer() {
       this.$refs.editorMetadataDrawer.open(this.noteObject);
     },
@@ -517,16 +560,18 @@ export default {
         alertMessage: detail?.message,
       }}));
     },
-    displayNoteTitleMaxLengthCheckAlert(){
-      const messageObject = {
-        type: 'warning',
-        message: this.$t('notes.title.max.length.warning.message', {0: this.noteTitleMaxLength})
-      };
-      this.displayAlert(messageObject);
+    displayNoteTitleMaxLengthCheckAlert(newTitle, oldTitle) {
+      if (newTitle?.length > this.noteTitleMaxLength) {
+        this.noteObject.title = oldTitle;
+        this.displayAlert({
+          type: 'warning',
+          message: this.$t('notes.title.max.length.warning.message', {0: this.noteTitleMaxLength})
+        });
+      }
     },
     waitForNoteMetadataUpdate() {
       setTimeout(() => {
-        this.updatingProperties = null;
+        this.updatingProperties = false;
       }, 1000);
     }
   }
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/note-properties/NoteEditorFeaturedImageDrawer.vue
similarity index 100%
rename from notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteEditorFeaturedImageDrawer.vue
rename to notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/note-properties/NoteEditorFeaturedImageDrawer.vue
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/note-properties/NoteEditorMetadataDrawer.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/note-properties/NoteEditorMetadataDrawer.vue
new file mode 100644
index 0000000000..89fd086cb0
--- /dev/null
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/note-properties/NoteEditorMetadataDrawer.vue
@@ -0,0 +1,160 @@
+<!--
+ 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 text-header font-weight-bold text-color">
+          {{ $t('notes.metadata.properties.label') }}
+        </div>
+      </template>
+      <template slot="content">
+        <div class="pa-5">
+          <note-metadata-properties-form
+            ref="propertiesForm"
+            :note="noteObject"
+            :current-properties="currentNoteProperties"
+            :has-featured-image="hasFeaturedImage"
+            :summary-max-length="summaryMaxLength"
+            @properties-updated="propertiesUpdated" />
+        </div>
+      </template>
+      <template slot="footer">
+        <div class="d-flex width-fit-content ms-auto">
+          <v-btn
+            class="btn me-5"
+            @click="cancelChanges">
+            {{ $t('notes.button.cancel') }}
+          </v-btn>
+          <v-btn
+            :disabled="saveDisabled"
+            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,
+      currentNoteProperties: {},
+      propertiesToSave: null,
+      summaryMaxLength: 1300,
+    };
+  },
+  props: {
+    hasFeaturedImage: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    summaryLengthError() {
+      return this.noteObject?.properties?.summary?.length > this.summaryMaxLength;
+    },
+    propertiesChanged() {
+      return JSON.stringify(this.noteObject?.properties) !== JSON.stringify(this.currentNoteProperties);
+    },
+    saveDisabled() {
+      return (!this.propertiesChanged && !this.imageData) || this.summaryLengthError;
+    }
+  },
+  methods: {
+    propertiesUpdated(properties) {
+      if (!this.noteObject?.properties || !Object.keys(this.noteObject?.properties).length) {
+        this.noteObject.properties = structuredClone(properties || {});
+      }
+      if (!this.noteObject.properties?.featuredImage) {
+        this.noteObject.properties.featuredImage = {};
+      }
+      this.updateCurrentNoteObjectProperties(properties);
+      this.propertiesToSave = properties;
+    },
+    resetProperties() {
+      this.cancelChanges();
+    },
+    closeFeaturedImageDrawerByOverlay() {
+      this.$root.$emit('close-featured-image-byOverlay');
+    },
+    closeDrawersByOverlay() {
+      this.closeFeaturedImageDrawerByOverlay();
+    },
+    open(note) {
+      this.noteObject = note;
+      this.cloneProperties();
+      this.$refs.metadataDrawer.open();
+      this.$refs.propertiesForm?.initProperties();
+    },
+    cloneProperties() {
+      this.currentNoteProperties = structuredClone(
+        this.noteObject?.id &&
+          this.noteObject?.properties || {
+          noteId: 0,
+          summary: '',
+          featuredImage: {uploadId: null, mimeType: null, altText: null},
+          draft: true
+        });
+    },
+    cancelChanges() {
+      this.close();
+      setTimeout(() => {
+        this.$refs.propertiesForm.cancelChanges();
+      }, 1000);
+    },
+    close() {
+      this.$refs.metadataDrawer.close();
+    },
+    save() {
+      this.$emit('metadata-updated', this.propertiesToSave);
+      this.close();
+    },
+    updateCurrentNoteObjectProperties(properties) {
+      this.noteObject.properties.noteId = Number(properties.noteId);
+      this.noteObject.properties.summary = properties.summary;
+      this.noteObject.properties.draft = properties.draft;
+
+      this.noteObject.properties.featuredImage.id = properties?.featuredImage?.id;
+      this.noteObject.properties.featuredImage.uploadId = properties?.featuredImage?.uploadId;
+      this.noteObject.properties.featuredImage.mimeType = properties?.featuredImage?.mimeType;
+      this.noteObject.properties.featuredImage.altText = properties?.featuredImage?.altText;
+      this.noteObject.properties.featuredImage.toDelete = properties?.featuredImage?.toDelete;
+    }
+  }
+};
+</script>
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/note-properties/NoteMetadataPropertiesForm.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/note-properties/NoteMetadataPropertiesForm.vue
new file mode 100644
index 0000000000..498ab83a11
--- /dev/null
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/note-properties/NoteMetadataPropertiesForm.vue
@@ -0,0 +1,272 @@
+<!--
+ 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-form>
+    <label for="image-area">
+      <p class="text-color text-body mb-3">
+        {{ $t('notes.metadata.featuredImage.label') }}
+      </p>
+      <v-btn
+        v-if="!canShowFeaturedImagePreview"
+        name="image-area"
+        class="btn add-image-area d-flex"
+        height="206"
+        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="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%"
+              contain
+              :lazy-src="featuredImageLink"
+              :alt="savedFeaturedImageAltText"
+              :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 mt-2 mb-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 mt-2 mb-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 text-body mb-3">
+          {{ $t('notes.metadata.summary.label') }}
+        </p>
+        <v-textarea
+          v-model="summaryContent"
+          name="summaryInputEditor"
+          class="summary-metadata-input pt-0 overflow-auto"
+          :placeholder="$t('notes.metadata.add.summary.placeholder')"
+          rows="17"
+          row-height="8"
+          dense
+          outlined
+          auto-grow />
+        <span
+          class="d-flex justify-end me-1"
+          :class="{'error-color': summaryLengthError}">
+          {{ summaryContent?.length }}/{{ summaryMaxLength }}
+          <v-icon
+            class="ms-1 my-auto"
+            :class="[{ 'success-color': !summaryLengthError }, 'error-color']"
+            size="16">
+            fas fa-info-circle
+          </v-icon>
+        </span>
+      </div>
+    </label>
+  </v-form>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      initialized: false,
+      noteObject: null,
+      summaryContent: null,
+      imageData: null,
+      uploadId: null,
+      mimeType: null,
+      featuredImageAltText: null,
+      hasFeaturedImageValue: false,
+      removeFeaturedImage: false,
+      illustrationBaseUrl: `${eXo.env.portal.context}/${eXo.env.portal.rest}/notes/illustration/`,
+    };
+  },
+  props: {
+    note: {
+      type: Object,
+      default: null
+    },
+    currentProperties: {
+      type: Object,
+      default: null
+    },
+    hasFeaturedImage: {
+      type: Boolean,
+      default: false
+    },
+    summaryMaxLength: {
+      type: Number,
+      default: 1300
+    }
+  },
+  computed: {
+    summaryLengthError() {
+      return this.summaryContent?.length > this.summaryMaxLength;
+    },
+    savedFeaturedImageAltText() {
+      return this.noteObject?.properties.featuredImage?.altText;
+    },
+    canShowFeaturedImagePreview() {
+      return this.hasFeaturedImageValue || this.imageData?.length;
+    },
+    notedId() {
+      return this.noteObject?.id;
+    },
+    langParam() {
+      return this.noteObject?.lang && `&lang=${this.noteObject?.lang}` || '';
+    },
+    isDraft() {
+      return this.noteObject?.draftPage;
+    },
+    noteFeatureImageUpdatedDate() {
+      return this.noteObject?.properties?.featuredImage?.lastUpdated || 0;
+    },
+    featuredImageLink() {
+      return this.imageData || this.hasFeaturedImageValue
+          && `${this.illustrationBaseUrl}${this.notedId}?v=${this.noteFeatureImageUpdatedDate}&isDraft=${this.isDraft}${this.langParam}` || '';
+    }
+  },
+  watch: {
+    'currentProperties.summary': function () {
+      this.summaryContent = this.currentProperties.summary;
+    },
+    'noteObject.lang': function () {
+      this.imageData = null;
+    },
+    note() {
+      this.noteObject = structuredClone(this.note);
+    },
+    hasFeaturedImage() {
+      this.hasFeaturedImageValue = this.hasFeaturedImage;
+    },
+    imageData() {
+      if (!this.imageData?.length) {
+        this.$root.$emit('reset-featured-image-data');
+      }
+      this.propertiesUpdated();
+    },
+    summaryContent() {
+      if (!this.noteObject?.properties) {
+        this.noteObject.properties = {};
+      }
+      this.noteObject.properties.summary = this.summaryContent;
+      this.propertiesUpdated();
+    },
+    uploadId() {
+      if (this.uploadId) {
+        this.removeFeaturedImage = false;
+      }
+      this.propertiesUpdated();
+    },
+  },
+  created() {
+    this.initProperties();
+    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);
+  },
+  methods: {
+    initProperties() {
+      this.noteObject = structuredClone(this.note);
+      this.hasFeaturedImageValue = this.hasFeaturedImage;
+      this.summaryContent = this.currentProperties?.summary || '';
+    },
+    propertiesUpdated() {
+      const savedFeaturedImageId = this.noteObject?.properties?.featuredImage?.id;
+      const properties = {
+        noteId: this.noteObject?.id,
+        summary: this.summaryContent,
+        featuredImage: {
+          id: savedFeaturedImageId,
+          uploadId: this.uploadId,
+          mimeType: this.mimeType,
+          altText: this.featuredImageAltText
+        },
+        draft: this.isDraft || !this.notedId
+      };
+      if (this.notedId) {
+        properties.featuredImage.toDelete = this.removeFeaturedImage;
+      }
+      this.$emit('properties-updated', properties);
+    },
+    imageDataUpdated(data, mimeType) {
+      this.imageData = data;
+      this.mimeType = mimeType;
+    },
+    openFeaturedImageDrawer() {
+      this.$root.$emit('open-featured-image-drawer', {
+        altText: this.featuredImageAltText || this.savedFeaturedImageAltText,
+        src: this.featuredImageLink
+      });
+    },
+    removeNoteFeaturedImage() {
+      this.featuredImage = null;
+      this.removeFeaturedImage = true;
+      this.hasFeaturedImageValue = false;
+      this.$root.$emit('reset-featured-image-data');
+      this.resetUploadedImage();
+      this.propertiesUpdated();
+    },
+    resetUploadedImage() {
+      this.imageData = null;
+      this.uploadId = null;
+    },
+    cancelChanges() {
+      this.noteObject.properties = structuredClone(this.currentProperties || {});
+      this.summaryContent = this.currentProperties?.summary || '';
+      this.featuredImageAltText = this.savedFeaturedImageAltText;
+      this.hasFeaturedImageValue = this.hasFeaturedImage;
+      this.resetUploadedImage();
+    }
+  }
+};
+</script>
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/note-publication/NotePublicationDrawer.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/note-publication/NotePublicationDrawer.vue
new file mode 100644
index 0000000000..56b03f06b7
--- /dev/null
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/note-publication/NotePublicationDrawer.vue
@@ -0,0 +1,238 @@
+<!--
+ 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="drawer = false" />
+    <exo-drawer
+      id="editorPublicationDrawer"
+      ref="publicationDrawer"
+      v-model="drawer"
+      :right="!$vuetify.rtl"
+      allow-expand
+      show-overlay
+      @expand-updated="expanded = $event"
+      @closed="reset">
+      <template slot="title">
+        <div class="d-flex my-auto text-header font-weight-bold text-color">
+          {{ $t('notes.publication.publish.label') }}
+        </div>
+      </template>
+      <template slot="content">
+        <div class="pa-5">
+          <v-stepper
+            v-model="stepper"
+            :class="expanded && 'flex-row' || 'flex-column'"
+            class="ma-0 d-flex"
+            vertical
+            flat>
+            <div
+              :class="{
+                'col-6': expanded,
+                'flex-grow-1': expanded || stepper === 1,
+                'flex-grow-0': !expanded && stepper !== 1,
+              }"
+              class="flex-shrink-0">
+              <v-stepper-step
+                :step="1"
+                :editable="!expanded"
+                width="100%"
+                class="ma-0 pa-0 position-relative">
+                <div class="d-flex">
+                  <div class="d-flex align-center flex-grow-1 flex-shrink-1 text-truncate text-header">
+                    {{ $t('notes.publication.check.properties.label') }}
+                  </div>
+                </div>
+              </v-stepper-step>
+              <v-slide-y-transition>
+                <div v-show="expanded || stepper === 1">
+                  <div
+                    class="d-flex flex-column mt-8">
+                    <v-scroll-y-transition hide-on-leave>
+                      <div class="mb-2">
+                        <note-metadata-properties-form
+                          ref="propertiesForm"
+                          :note="noteObject"
+                          :current-properties="currentNoteProperties"
+                          :has-featured-image="hasFeaturedImage"
+                          :summary-max-length="1300"
+                          @properties-updated="propertiesUpdated" />
+                      </div>
+                    </v-scroll-y-transition>
+                  </div>
+                </div>
+              </v-slide-y-transition>
+            </div>
+            <div
+              :class="{
+                'col-6': expanded,
+                'mt-8': !expanded && stepper < 2,
+                'mt-4': !expanded && stepper === 2,
+              }"
+              class="flex-grow-0 flex-shrink-0">
+              <v-stepper-step
+                :step="2"
+                :editable="!expanded"
+                width="100%"
+                class="ma-0 pa-0 position-relative">
+                <div class="d-flex">
+                  <div class="d-flex align-center flex-grow-1 flex-shrink-1 text-truncate text-header">
+                    {{ $t('notes.publication.label') }}
+                  </div>
+                </div>
+              </v-stepper-step>
+              <v-slide-y-transition>
+                <div v-show="expanded || stepper === 2">
+                  <div
+                    class="d-flex flex-column mt-8">
+                    <v-scroll-y-transition hide-on-leave>
+                      <div class="mb-2">
+                      </div>
+                    </v-scroll-y-transition>
+                  </div>
+                </div>
+              </v-slide-y-transition>
+            </div>
+          </v-stepper>
+        </div>
+      </template>
+      <template slot="footer">
+        <div class="d-flex width-fit-content ms-auto">
+          <v-btn
+            class="btn me-5"
+            @click="cancel">
+            {{ $t('notes.button.cancel') }}
+          </v-btn>
+          <v-btn
+            class="btn btn-primary"
+            :loading="isPublishing"
+            @click="save">
+            {{ saveButtonLabel }}
+          </v-btn>
+        </div>
+      </template>
+    </exo-drawer>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      stepper: 1,
+      drawer: false,
+      noteObject: null,
+      currentNoteProperties: {},
+      expanded: false,
+    };
+  },
+  props: {
+    hasFeaturedImage: {
+      type: Boolean,
+      default: false
+    },
+    isPublishing: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    saveButtonLabel() {
+      return (this.stepper === 1 && !this.expanded) && this.$t('notes.publication.publish.next.label')
+                                                  || this.$t('notes.button.publish');
+    }
+  },
+  watch: {
+    expanded() {
+      this.stepper = this.expanded && 2 || 1;
+    },
+    isPublishing() {
+      if (!this.isPublishing) {
+        this.close();
+      }
+    }
+  },
+  methods: {
+    propertiesUpdated(properties) {
+      if (!this.noteObject?.properties || !Object.keys(this.noteObject?.properties).length) {
+        this.noteObject.properties = structuredClone(properties || {});
+      }
+      if (!this.noteObject.properties?.featuredImage) {
+        this.noteObject.properties.featuredImage = {};
+      }
+      this.updateCurrentNoteObjectProperties(properties);
+      this.propertiesToSave = properties;
+    },
+    open(noteObject) {
+      this.noteObject = noteObject;
+      this.cloneProperties();
+      this.$refs.publicationDrawer.open();
+      setTimeout(() => {
+        this.$refs.publicationDrawer.toogleExpand();
+      }, 50);
+      this.$refs.propertiesForm?.initProperties();
+    },
+    cloneProperties() {
+      this.currentNoteProperties = structuredClone(
+        this.noteObject?.id &&
+          this.noteObject?.properties || {
+          noteId: 0,
+          summary: '',
+          featuredImage: {uploadId: null, mimeType: null, altText: null},
+          draft: true
+        });
+    },
+    close() {
+      this.stepper = 1;
+      this.$refs.publicationDrawer.close();
+    },
+    reset() {
+      this.$emit('closed');
+    },
+    cancel() {
+      this.close();
+      setTimeout(() => {
+        this.$refs.propertiesForm.cancelChanges();
+      }, 1000);
+    },
+    save() {
+      if (!this.expanded && this.stepper === 1) {
+        this.stepper += 1;
+        return;
+      }
+      this.$emit('metadata-updated', this.noteObject.properties);
+      this.$emit('publish', this.noteObject);
+    },
+    updateCurrentNoteObjectProperties(properties) {
+      this.noteObject.properties.noteId = Number(properties.noteId);
+      this.noteObject.properties.summary = properties.summary;
+      this.noteObject.properties.draft = properties.draft;
+
+      this.noteObject.properties.featuredImage.id = properties?.featuredImage?.id;
+      this.noteObject.properties.featuredImage.uploadId = properties?.featuredImage?.uploadId;
+      this.noteObject.properties.featuredImage.mimeType = properties?.featuredImage?.mimeType;
+      this.noteObject.properties.featuredImage.altText = properties?.featuredImage?.altText;
+      this.noteObject.properties.featuredImage.toDelete = properties?.featuredImage?.toDelete;
+    }
+  }
+};
+</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 91112ea135..55c0e4f829 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,8 +3,10 @@ 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';
+import NoteEditorMetadataDrawer from './components/note-properties/NoteEditorMetadataDrawer.vue';
+import NoteEditorFeaturedImageDrawer from './components/note-properties/NoteEditorFeaturedImageDrawer.vue';
+import NotePublicationDrawer from './components/note-publication/NotePublicationDrawer.vue';
+import NoteMetadataPropertiesForm from './components/note-properties/NoteMetadataPropertiesForm.vue';
 
 const components = {
   'note-custom-plugins': NoteCustomPlugins,
@@ -13,7 +15,9 @@ const components = {
   'note-editor-top-bar': NoteEditorTopBar,
   'note-full-rich-editor': NoteFullRichEditor,
   'note-editor-metadata-drawer': NoteEditorMetadataDrawer,
-  'note-editor-featured-image-drawer': NoteEditorFeaturedImageDrawer
+  'note-editor-featured-image-drawer': NoteEditorFeaturedImageDrawer,
+  'note-publication-drawer': NotePublicationDrawer,
+  'note-metadata-properties-form': NoteMetadataPropertiesForm
 };
 
 for (const key in components) {