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

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

Hide file tree

Showing 3 changed files with 21 additions and 10 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">
@@ -600,9 +600,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;}');
@@ -627,8 +629,8 @@ export default {
         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_BR,
-        shiftEnterMode: CKEDITOR.ENTER_BR,
+        enterMode: CKEDITOR.ENTER_P,
+        shiftEnterMode: CKEDITOR.ENTER_P,
         toolbar: [
           { name: 'format', items: ['Format'] },
           { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', '-', 'RemoveFormat'] },

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>