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

Notes editor is not wysiwyg
Meeds-io · Sep 1, 2023 · 02068db · 02068db
1 parent 5c2956a
commit 02068db
Show file tree

Hide file tree

Showing 4 changed files with 138 additions and 59 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,109 @@
+#notesOverviewApplication {
+
+  .notes-application-content {
+
+    blockquote {
+      font-weight: 400 !important;
+      margin-top: 0 !important;
+      margin-bottom: 0 !important;
+    }
+
+    a {
+      color: #0782C1;
+    }
+
+    ol, ul, dl {
+      margin: 0 0 10px 40px;
+      padding: 0 40px;
+    }
+
+    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;
+    }
+
+    .content-link {
+      font-size: 16px !important;
+    }
+
+    img {
+      margin: 0 10px 10px 0 !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/NotesEditorDashboard.vue b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
@@ -546,13 +546,23 @@ 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 { 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('ul li {list-style: revert; list-style-type: inherit !important;}');
+      CKEDITOR.addCss('blockquote {font-weight: 400;}');
       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
 
@@ -582,6 +592,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
@@ -366,7 +366,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> \