feat: Notes editor is not wysiwyg - EXO-65725 - Meeds-io/MIPs#70 (#713)

Notes editor is not wysiwyg feat: Notes editor is not wysiwyg - EXO-65725 - Meeds-io/MIPs#71 (#721) Notes editor is not wysiwyg fix: Adjust blockquote wysiwyg styles - EXO-65725 - Meeds-io/MIPs#71 (#732) Adjust blockquote wysiwyg styles fix: Adjust blockquote of list of items styles - EXO-65725 - Meeds-io/MIPs#71 (#737) Adjust blockquote of list of items styles fix: blockquotes in notes view mode are not wysiwyg - EXO-65725 - Meeds-io/MIPs#71 (#744) Prior to this change, blockquotes in notes view mode are not wysiwyg in term of font style. The PR makes sure to have the same normal font style in both view and edit mode
Meeds-io · Sep 29, 2023 · 6a6073a · 6a6073a
1 parent 00f9c13
commit 6a6073a
Show file tree

Hide file tree

Showing 6 changed files with 398 additions and 61 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
@@ -0,0 +1,130 @@
+#notesOverviewApplication {
+
+  .notes-application-content {
+
+    blockquote {
+      font-weight: 400 !important;
+      padding: 10px !important;
+      border-left-color: @primaryColor !important;
+      margin: 0 0 10px 0 !important;
+
+      p {
+        margin-bottom: 0 !important;
+        line-height: 1.4 !important;
+        font-size: 16px !important;
+        font-style: normal !important;
+      }
+
+      strong {
+        font-weight: bold;
+      }
+    }
+
+    a {
+      color: #0782C1;
+    }
+
+    ol, ul, dl {
+      margin: 0 0 10px 0 !important;
+      padding: 0 40px !important;
+    }
+
+    ol {
+      list-style-type: decimal;
+
+      & ol {
+        list-style-type: lower-latin;
+
+        & ol {
+          list-style-type: lower-roman;
+
+          & ol {
+            list-style-type: upper-latin;
+
+            & ol {
+              list-style-type: upper-roman;
+            }
+          }
+        }
+      }
+    }
+
+    .video {
+      position: relative;
+      clear: both;
+      width: 80%;
+      height: 0;
+      padding-bottom: 33.74%;
+      margin: 15px auto;
+
+      iframe {
+        position: absolute;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    ul li, ol li {
+      list-style: revert;
+      font-size: 16px;
+      line-height: 1.4;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      font-weight: normal;
+      line-height: 1.2;
+    }
+
+    h1, h2, h3 {
+      font-weight: 500 !important;
+      line-height: 1.2 !important;
+    }
+
+    h1 {
+      font-size: 28px !important;
+      margin-top: 45px !important;
+    }
+
+    h2 {
+      font-size: 23px !important;
+      margin-top: 35px !important;
+    }
+
+    h3 {
+      font-size: 18px !important;
+      margin-top: 25px !important;
+    }
+
+    p, li {
+      line-height: 1.4 !important;
+    }
+
+    p, li, blockquote {
+      font-size: 16px !important;
+    }
+
+    table {
+      margin-top: 0 !important;
+      margin-bottom: 10px !important;
+
+      td {
+        line-height: 1.4 !important;
+        font-size: 16px !important;
+      }
+
+      td:not(:has(p)) {
+        padding-bottom: 10px;
+      }
+    }
+
+    .content-link {
+      font-size: 16px !important;
+    }
+
+    img {
+      margin: 10px !important;
+    }
+
+  }
+}
diff --git a/notes-webapp/src/main/webapp/skin/less/notes/notes.less b/notes-webapp/src/main/webapp/skin/less/notes/notes.less
@@ -7,7 +7,7 @@
 @import "Notifications/Style.less";
 @import "Sprites/Style.less";
 @import "UIWikiRichTextEditor/Stylesheet.less";
-
+@import "editor.less";
 /************ New css feature notes ****************/
 .customPluginsDrawer {
   z-index: 99999 !important;
@@ -193,6 +193,14 @@
   }
 }
 
+#notesOverviewApplication {
+
+  .notes-application-content {
+    overflow: auto;
+    min-height: calc(~"100vh - 350px");
+    margin: 4px;
+  }
+}
 
 #notesOverviewApplication, .notesApplication {
   max-width: 100%;
@@ -218,51 +226,6 @@
 		  margin: 5px auto 0;
 	  }
   }
-  .notes-application-content {
-    overflow: auto;
-    min-height: calc(~"100vh - 350px");
-    .video {
-      position: relative;
-      clear: both;
-      width: 80%;
-      height: 0;
-      padding-bottom: 33.74%;
-      margin: 15px auto;
-
-      iframe {
-        position: absolute;
-        left: 0;
-        width: 100%;
-        height: 100%;
-      }
-    }
-
-    h1, h2, h3 {
-      font-weight: 400 !important;
-    }
-
-    h1 {
-      font-size: 34px !important;
-    }
-
-    h2 {
-      font-size: 28px !important;
-    }
-
-    h3 {
-      font-size: 21.84px !important;
-    }
-
-    p, li {
-      font-size:18.6667px !important;
-      line-height: 1.4 !important;
-    }
-
-    blockquote p {
-      font-size:17.5px !important;
-      font-weight: 300 !important;
-    }
-  }
 
   table {
     width: auto;
@@ -310,13 +273,6 @@
         }
       }
     }
-
-    .notes-application-content {
-      ul li {
-        list-style-position: inside;
-        list-style-type: disc;
-      }
-    }
   }
 
   .notes-tree-items {

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
@@ -336,7 +336,7 @@ export default {
         elementContainer.appendChild(contentSummary);
         elementContainer.appendChild(table);
         div.appendChild(elementContainer);
-        table.setAttribute('width', this.width);
+        table.setAttribute('style', `width:${this.width}px !important`);
         table.setAttribute('border', this.border);
         table.setAttribute('cellPadding', this.internal);
         table.setAttribute('height', this.height);

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
@@ -21,6 +21,16 @@
             <div class="notesFormLeftActions d-inline-flex align-center me-10">
               <img :src="srcImageNote">
               <span class="notesFormTitle ps-2">{{ noteFormTitle }}</span>
+<<<<<<< HEAD
+=======
+              <v-icon
+                v-if="notesMultilingualActive && note.id"
+                size="22"
+                class="primary--text clickable pa-2"
+                @click="showTranslations">
+                fa-language
+              </v-icon>
+>>>>>>> 03711416 (feat: Notes editor is not wysiwyg - EXO-65725 - Meeds-io/MIPs#71 (#721))
             </div>
             <div class="notesFormRightActions pr-7">
               <p class="draftSavingStatus mr-7">{{ draftSavingStatus }}</p>
@@ -546,13 +556,27 @@ export default {
           removePlugins = `${removePlugins},${ckEditorRemovePlugins}`;
         }
       }
-      CKEDITOR.addCss('h1 { font-size: 34px;font-weight: 400;}');
-      CKEDITOR.addCss('h2 { font-size: 28px;font-weight: 400;}');
-      CKEDITOR.addCss('h3 { font-size: 21.84px;font-weight: 400;}');
-      CKEDITOR.addCss('p,li { font-size: 18.6667px;}');
-      CKEDITOR.addCss('blockquote p { font-size: 17.5px;font-weight: 300;}');
+
+      CKEDITOR.addCss('h1 { font-size: 28px;margin-top:45px; }');
+      CKEDITOR.addCss('h2 { font-size: 23px;margin-top:35px; }');
+      CKEDITOR.addCss('h3 { font-size: 18px;margin-top:25px; }');
+      CKEDITOR.addCss('h1, h2, h3 { font-weight: 500; line-height:1.2; }');
+      CKEDITOR.addCss('p,li, table td { line-height:1.4}');
+      CKEDITOR.addCss('p, li, table td, blockquote { font-size: 16px;}');
+      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('table td:not(:has(p)) {padding-bottom: 10px;}');
+      CKEDITOR.addCss('blockquote {font-weight: 400; font-style:normal !important; padding: 10px !important; margin: 0 0 10px 0 !important;}');
+      CKEDITOR.addCss('table {margin-bottom: 10px !important; margin-top: 0 !important;}');
+      CKEDITOR.addCss('td {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;}');
+      CKEDITOR.addCss('ol ol li {list-style-type: lower-latin !important;}');
+      CKEDITOR.addCss('ol ol ol li {list-style-type: lower-roman !important;}');
+      CKEDITOR.addCss('ol ol ol ol li {list-style-type: upper-latin !important;}');
+      CKEDITOR.addCss('ol ol ol ol ol li {list-style-type: upper-roman !important;}');
 
       // this line is mandatory when a custom skin is defined
 
@@ -570,7 +594,7 @@ 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,
+        enterMode: CKEDITOR.ENTER_P,
         shiftEnterMode: CKEDITOR.ENTER_BR,
         toolbar: [
           { name: 'format', items: ['Format'] },
@@ -582,6 +606,10 @@ export default {
           { name: 'insert' },
           { name: 'links', items: [ 'simpleLink','InsertOptions'] },
         ],
+        indentBlock: {
+          offset: 40,
+          unit: 'px'
+        },
         format_tags: 'p;h1;h2;h3',
         autoGrow_minHeight: self.noteFormContentHeight,
         height: self.noteFormContentHeight,