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 · Nov 21, 2023 · bdaf4da · bdaf4da
1 parent 0f752dc
commit bdaf4da
Show file tree

Hide file tree

Showing 4 changed files with 177 additions and 5 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,8 +7,7 @@
 @import "Notifications/Style.less";
 @import "Sprites/Style.less";
 @import "UIWikiRichTextEditor/Stylesheet.less";
-@import "../../../ckeditor/skins/common/extendedRichContent.less";
-
+@import "editor.less";
 /************ New css feature notes ****************/
 .customPluginsDrawer {
   z-index: 99999 !important;
@@ -188,6 +187,7 @@
   .notes-application-content {
     overflow: auto;
     min-height: calc(~"100vh - 350px");
+    margin: 4px;
   }
 }
 
@@ -216,6 +216,14 @@
 	  }
   }
 
+  table {
+    width: auto;
+
+    td {
+      padding: 5px;
+    }
+  }
+
   .notes-application {
     min-height: calc(~"100vh - 170px");
 

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
@@ -641,7 +641,32 @@ export default {
           targetField['default'] = '_self';
           targetField.items = targetField.items.filter(t => ['_self', '_blank'].includes(t[1]));
         }
-      });
+        if (ckEditorRemovePlugins) {
+          removePlugins = `${removePlugins},${ckEditorRemovePlugins}`;
+        }
+      }
+
+      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
       CKEDITOR.basePath = '/commons-extension/ckeditor/';
       const self = this;
@@ -657,7 +682,16 @@ export default {
         removeButtons: '',
         enterMode: CKEDITOR.ENTER_P,
         shiftEnterMode: CKEDITOR.ENTER_BR,
-        copyFormatting_allowedContexts: true,
+        toolbar: [
+          { name: 'format', items: ['Format'] },
+          { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', '-', 'RemoveFormat'] },
+          { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Blockquote' ] },
+          { name: 'fontsize', items: ['FontSize'] },
+          { name: 'colors', items: [ 'TextColor' ] },
+          { name: 'align', items: [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] },
+          { name: 'insert' },
+          { name: 'links', items: [ 'simpleLink','InsertOptions'] },
+        ],
         indentBlock: {
           offset: 40,
           unit: 'px'

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
@@ -365,7 +365,7 @@ export default {
               :items="noteChildItems" \
               item-key="noteId"> \
               <template #label="{ item }"> \
-                <v-list-item-title @click="openNoteChild(item)" class="body-2 clickable primary--text"> \
+                <v-list-item-title @click="openNoteChild(item)" class="body-2 content-link clickable primary--text"> \
                 <span>{{ item.name }}</span> \
               </v-list-item-title> \
               </template> \