feat: add support for headings

sibiraj-s · May 5, 2020 · 2d7d38e · 2d7d38e
1 parent 02a81d4
commit 2d7d38e
Show file tree

Hide file tree

Showing 14 changed files with 562 additions and 173 deletions.
diff --git a/src/lib/ngx-editor.component.scss b/src/lib/ngx-editor.component.scss
@@ -14,27 +14,98 @@ $icon-size: 30px;
 
 .NgxEditor-MenuBar {
   display: flex;
-  padding: .2rem;
+  padding: 0.2rem;
   border-bottom: 1px solid #ddd;
 
   .NgxEditor-MenuItem {
-    height: $icon-size;
-    width: $icon-size;
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: 0.3s ease-in-out;
-    border-radius: 4px;
 
     &:hover {
       cursor: pointer;
       background-color: #f1f1f1;
     }
 
-    &.NgxEditor-MenuItem__active {
+    &.NgxEditor-MenuItem__Icon {
+      height: $icon-size;
+      width: $icon-size;
+      transition: 0.3s ease-in-out;
+      border-radius: 2px;
+      margin-right: 2px;
 
-      svg {
-        fill: #06c;
+      &.NgxEditor-MenuItem__Active {
+        background-color: #e8f0fe;
+
+        svg {
+          fill: #1a73e8;
+        }
+      }
+    }
+
+    &.NgxEditor-MenuItem__Dropdown-Wrapper {
+      position: relative;
+      max-width: 100px;
+      width: 100%;
+      justify-content: start;
+
+      .NgxEditor-MenuItem__Dropdown {
+        display: flex;
+        align-items: center;
+        width: 100%;
+
+        .NgxEditor-MenuItem__Dropdown-Text {
+          margin-left: 5px;
+        }
+
+        .NgxEditor-MenuItem__Dropdown-Icon {
+          margin-left: auto;
+          position: relative;
+          top: 2px;
+        }
+      }
+
+      .NgxEditor-MenuItem__Dropdown-Menu {
+        position: absolute;
+        left: 0;
+        top: 30px;
+        box-shadow: rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
+        border-radius: 4px;
+        background-color: white;
+        display: none;
+
+        .NgxEditor-MenuItem__Dropdown-Item {
+          cursor: pointer;
+          padding: 0.5rem 1rem;
+          white-space: nowrap;
+
+          &:hover,
+          &.NgxEditor-MenuItem__active {
+            background-color: #f1f1f1;
+          }
+        }
+      }
+
+      &.NgxEditor-MenuItem__Dropdown-Wrapper-Selected,
+      &.NgxEditor-MenuItem__Dropdown-Wrapper-Open {
+        background-color: #e8f0fe;
+        color: #1a73e8;
+      }
+
+      &.NgxEditor-MenuItem__Dropdown-Wrapper-Open {
+        background-color: #e8f0fe;
+        color: #1a73e8;
+
+        .NgxEditor-MenuItem__Dropdown-Icon {
+          svg {
+            fill: #1a73e8;
+          }
+        }
+
+        .NgxEditor-MenuItem__Dropdown-Menu {
+          display: block;
+          color: initial;
+        }
       }
     }
   }
@@ -46,7 +117,7 @@ $icon-size: 30px;
 }
 
 .NgxEditor-Content {
-  padding: .5rem;
+  padding: 0.5rem;
   white-space: pre-wrap;
 
   p {

diff --git a/src/lib/plugins/menu/MenuBarView.ts b/src/lib/plugins/menu/MenuBarView.ts
@@ -3,7 +3,7 @@ import { EditorState } from 'prosemirror-state';
 
 import { Toolbar } from '../../types';
 
-import MenuItems from './MenuItems';
+import { renderMenu } from './menu';
 
 class MenuBarView {
   toolbar: Toolbar;
@@ -26,10 +26,8 @@ class MenuBarView {
     const menuDom = document.createElement('div');
     menuDom.className = 'NgxEditor-MenuBar';
 
-    const menuItems = new MenuItems(this.toolbar, this.view, menuDom);
-    menuItems.render();
-
-    this.updateMenuItems = menuItems.update.bind(menuItems);
+    const { update } = renderMenu(this.toolbar, this.view, menuDom);
+    this.updateMenuItems = update;
 
     this.view.dom.parentNode.insertBefore(menuDom, this.view.dom);
   }

diff --git a/src/lib/plugins/menu/MenuItems.ts b/src/lib/plugins/menu/MenuItems.ts
diff --git a/src/lib/plugins/menu/i18n.ts b/src/lib/plugins/menu/i18n.ts
@@ -0,0 +1,8 @@
+export const labels = {
+  bold: 'Bold',
+  italics: 'Italics',
+  code: 'Code',
+  ordered_list: 'Ordered List',
+  bullet_list: 'Bullet List',
+  heading: 'Heading'
+};