feat: Notes editor is not wysiwyg - EXO-65725 - Meeds-io/MIPs#71

Notes editor is not wysiwyg
Meeds-io · Sep 11, 2023 · 99d2ca9 · 99d2ca9
1 parent b3dca1a
commit 99d2ca9
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 8 deletions.
diff --git a/notes-webapp/src/main/webapp/skin/less/notes/editor.less b/notes-webapp/src/main/webapp/skin/less/notes/editor.less
@@ -4,16 +4,25 @@
 
     blockquote {
       font-weight: 400 !important;
-      margin-top: 0 !important;
-      margin-bottom: 0 !important;
+      padding: 10px 0 0 10px !important;
+      border-left-color: @primaryColor !important;
+      margin: 0 0 10px 0 !important;
+
+      p {
+        margin-bottom: 0 !important;
+      }
+
+      strong {
+        font-weight: bold;
+      }
     }
 
     a {
       color: #0782C1;
     }
 
     ol, ul, dl {
-      margin: 0 0 10px 40px;
+      margin: 0 0 10px 0px;
       padding: 0 40px;
     }
 
@@ -102,7 +111,7 @@
     }
 
     img {
-      margin: 0 10px 10px 0 !important;
+      margin: 10px !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
@@ -24,7 +24,7 @@
               <img :src="srcImageNote">
               <span class="notesFormTitle ps-2">{{ noteFormTitle }}</span>
               <v-icon
-                v-if="notesMultilingualActive && note?.id"
+                v-if="notesMultilingualActive && note.id"
                 size="22"
                 class="primary--text clickable pa-2"
                 @click="showTranslations">
@@ -323,6 +323,10 @@ export default {
     if (this.spaceId) {
       this.init();
     }
+    console.log(`${eXo.env.portal.userName} is editing me`);
+  },
+  beforeDestroy() {
+    console.log(`${eXo.env.portal.userName} exited editing me`);
   },
   methods: {
     init() {
@@ -600,9 +604,11 @@ export default {
       CKEDITOR.addCss('h1, h2, h3 { font-weight: 500; line-height:1.2; }');
       CKEDITOR.addCss('p,li { font-size: 16px; line-height:1.4}');
       CKEDITOR.addCss('p, li, blockquote { font-size: 16px;}');
-      CKEDITOR.addCss('ol, ul, dl {margin: 0 0 10px 40px;padding: 0 40px;}');
+      CKEDITOR.addCss('ol, ul, dl {margin: 0 0 10px 0px;padding: 0 40px;}');
       CKEDITOR.addCss('ul li {list-style: revert; list-style-type: inherit !important;}');
-      CKEDITOR.addCss('blockquote {font-weight: 400;}');
+      CKEDITOR.addCss('blockquote {font-weight: 400; padding: 10px 0 0 10px !important; margin: 0 0 10px 0!important;}');
+      CKEDITOR.addCss('table {margin-bottom: 10px !important; margin-top: 0 !important;}');
+      CKEDITOR.addCss('img {margin:10px !important; }');
       CKEDITOR.addCss('.cke_editable { font-size: 14px; line-height: 1.4 !important;}');
       CKEDITOR.addCss('.placeholder { color: #5f708a!important;}');
       CKEDITOR.addCss('ol li {list-style-type: decimal !important;}');

diff --git a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/TranslationsEditBar.vue b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/TranslationsEditBar.vue
@@ -18,7 +18,7 @@
             color="primary"
             class="ma-1"
             small
-            :outlined="!!selectedTranslation?.value"
+            :outlined="!!selectedTranslation.value"
             @click="changeTranslation({value: ''})">
             {{ $t('notes.label.translation.originalVersion') }}
           </v-chip>