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 17, 2023 · a3f1218 · a3f1218
1 parent c046d1e
commit a3f1218
Show file tree

Hide file tree

Showing 5 changed files with 165 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;
@@ -180,6 +180,14 @@
   }
 }
 
+#notesOverviewApplication {
+
+  .notes-application-content {
+    overflow: auto;
+    min-height: calc(~"100vh - 350px");
+    margin: 4px;
+  }
+}
 
 #notesOverviewApplication, .notesApplication {
   max-width: 100%;
@@ -205,51 +213,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;
@@ -297,13 +260,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
@@ -533,13 +533,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
 
@@ -557,7 +571,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'] },
@@ -569,6 +583,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,

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
@@ -354,7 +354,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> \