Editor Toolbar issue fixed

qvacuba · Apr 12, 2021 · 7e1601a · 7e1601a
1 parent 8d495ac
commit 7e1601a
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 73 deletions.
diff --git a/src/Blogifier.Admin/wwwroot/admin/css/app.css b/src/Blogifier.Admin/wwwroot/admin/css/app.css
diff --git a/src/Blogifier.Admin/wwwroot/admin/css/app.css.map b/src/Blogifier.Admin/wwwroot/admin/css/app.css.map
diff --git a/src/Blogifier.Admin/wwwroot/admin/js/editor.js b/src/Blogifier.Admin/wwwroot/admin/js/editor.js
@@ -20,105 +20,105 @@ const
 
 const
   editorToolbar_heading = {
-    name: "editor-toolbar-heading",
+    name: "heading",
     action: EasyMDE.toggleHeadingSmaller,
     icon: editorIcon_heading,
     title: "Heading",
   },
   editorToolbar_bold = {
-    name: "editor-toolbar-bold",
+    name: "bold",
     action: EasyMDE.toggleBold,
     icon: editorIcon_bold,
     title: "Bold",
   },
   editorToolbar_italic = {
-    name: "editor-toolbar-italic",
+    name: "italic",
     action: EasyMDE.toggleItalic,
     icon: editorIcon_italic,
     title: "Italic",
   },
   editorToolbar_strike = {
-    name: "editor-toolbar-strikethrough",
+    name: "strikethrough",
     action: EasyMDE.toggleStrikethrough,
     icon: editorIcon_strikethrough,
     title: "Strikethrough",
   },
   editorToolbar_ul = {
-    name: "editor-toolbar-ul",
+    name: "unordered-list",
     action: EasyMDE.toggleUnorderedList,
     icon: editorIcon_ul,
     title: "List",
   },
   editorToolbar_ol = {
-    name: "editor-toolbar-ol",
+    name: "ordered-list",
     action: EasyMDE.toggleOrderedList,
     icon: editorIcon_ol,
     title: "Numbered List",
   },
   editorToolbar_quote = {
-    name: "editor-toolbar-quote",
+    name: "quote",
     action: EasyMDE.toggleBlockquote,
     icon: editorIcon_blockquote,
     title: "Quote",
   },
   editorToolbar_link = {
-    name: "editor-toolbar-link",
+    name: "link",
     action: EasyMDE.drawLink,
     icon: editorIcon_link,
     title: "Create Link",
   },
   editorToolbar_image = {
-    name: "editor-toolbar-image",
+    name: "image",
     action: insertImage,
     icon: editorIcon_image,
     title: "Insert Image",
   },
   editorToolbar_video = {
-    name: "editor-toolbar-video",
+    name: "insertYoutube",
     action: insertYoutube,
     icon: editorIcon_video,
     title: "Insert Video",
   },
   editorToolbar_table = {
-    name: "editor-toolbar-table",
+    name: "table",
     action: EasyMDE.drawTable,
     icon: editorIcon_table,
     title: "Insert Table",
   },
   editorToolbar_code = {
-    name: "editor-toolbar-code",
+    name: "code",
     action: EasyMDE.toggleCodeBlock,
     icon: editorIcon_code,
     title: "Insert Code",
   },
   editorToolbar_hr = {
-    name: "editor-toolbar-hr",
+    name: "horizontal-rule",
     action: EasyMDE.drawHorizontalRule,
     icon: editorIcon_hr,
     title: "Horizontal Line",
   },
   editorToolbar_clear = {
-    name: "editor-toolbar-clear",
+    name: "clean-block",
     action: EasyMDE.cleanBlock,
     icon: editorIcon_clear,
     title: "Clean block",
   },
   editorToolbar_preview = {
-    name: "editor-toolbar-preview",
-    action: previewAction,
+    name: "preview",
+    action: EasyMDE.togglePreview,
     icon: editorIcon_preview,
     title: "Toggle Preview",
     noDisable: true,
   },
   editorToolbar_sidebyside = {
-    name: "editor-toolbar-sidebyside",
+    name: "side-by-side",
     action: EasyMDE.toggleSideBySide,
     icon: editorIcon_sidebyside,
     title: "Toggle Side by Side",
     noDisable: true,
   },
   editorToolbar_fullscreen = {
-    name: "editor-toolbar-fullscreen",
+    name: "fullscreen",
     action: EasyMDE.toggleFullScreen,
     icon: editorIcon_fullscreen,
     title: "Toggle Fullscreen",
@@ -136,7 +136,6 @@ function getEditor() {
     minHeight: "500px",
     parsingConfig: {
       allowAtxHeaderWithoutSpace: true,
-      strikethrough: false,
       underscoresBreakWords: true
     },
     renderingConfig: {
@@ -185,13 +184,14 @@ function insertYoutube(editor) {
   }
 }
 
-function previewAction() {
-  let editable = document.querySelector('.CodeMirror-scroll');
-  if (easymde.isPreviewActive()) {
-    easymde.togglePreview();
-    editable.classList.remove('d-none');
-  } else {
-    editable.classList.add('d-none');
-    easymde.togglePreview();
-  }
-}
+// function previewAction() {
+//   let editable = document.querySelector('.CodeMirror-scroll');
+//   if (easymde.isPreviewActive()) {
+//     easymde.togglePreview();
+//     editable.classList.remove('d-none');
+//   } else {
+//     editable.classList.add('d-none');
+//     easymde.togglePreview();
+//   }
+// }
+
diff --git a/src/Blogifier.Admin/wwwroot/admin/scss/include/_codemirror.scss b/src/Blogifier.Admin/wwwroot/admin/scss/include/_codemirror.scss
@@ -6,6 +6,11 @@
     width: 1px;
     background-color: #000;
   }
+
+  .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word):not(.cm-string):not(.cm-attribute) {
+    border-bottom: 1px solid red;
+    padding-bottom: 0.125rem;
+  }
 }
 
 .cm-tab {

diff --git a/src/Blogifier.Admin/wwwroot/admin/scss/include/_editor.scss b/src/Blogifier.Admin/wwwroot/admin/scss/include/_editor.scss
@@ -4,6 +4,12 @@
   margin-bottom: 4rem;
   padding-top: 3rem;
 
+  &.sided--no-fullscreen {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
   .CodeMirror {
     box-sizing: border-box;
     height: auto;
@@ -54,12 +60,6 @@
   }
 }
 
-.EasyMDEContainer.sided--no-fullscreen {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-
 .editor-toolbar {
   position: absolute;
   top: 0;
@@ -102,20 +102,24 @@
     cursor: pointer;
     flex-grow: 1;
 
+    &:not(:last-child) {
+      border-right: 1px solid #fff;
+    }
+
     &.active,
     &:hover {
-      background: $gray-100;
+      background: rgba($blogifier, 0.1);
       .bi {
-        fill: $gray-800;
+        fill: $blogifier;
       }
     }
 
     .bi {
-      fill: $gray-600;
+      fill: $gray-800;
       &-blockquote-left,
       &-table,
       &-image {
-        fill: $gray-600;
+        fill: $gray-800;
       }
     }
   }
@@ -128,40 +132,14 @@
   }
 }
 
-// @media only screen and (max-width: 700px) {
-//   .editor-toolbar i.no-mobile {
-//     display: none;
-//   }
-// }
 
-.editor-statusbar {
-  padding: 8px 10px;
-  font-size: 12px;
-  color: #959694;
-  text-align: right;
-
-  span {
-    display: inline-block;
-    min-width: 4em;
-    margin-left: 1em;
-  }
-  .lines:before {
-    content: "lines: ";
-  }
-  .words:before {
-    content: "words: ";
-  }
-  .characters:before {
-    content: "characters: ";
-  }
-}
 
 //
-
 .editor-preview {
   font-size: 1rem;
   padding: 3rem;
   background: #fff;
+
   > p {
     margin-top: 0;
   }
@@ -178,11 +156,15 @@
     max-width: 100%;
   }
   &-full {
+    position: absolute;
     width: 100%;
     height: 100%;
+    top: 0;
+    left: 0;
     z-index: 7;
     overflow: auto;
     display: none;
+    box-sizing: border-box;
   }
   &-side {
     position: fixed;
@@ -216,8 +198,8 @@
     color: $hljs-red;
   }
   .cm-header-1 {
-    font-size: 200%;
-    line-height: 200%;
+    font-size: 175%;
+    line-height: 100%;
   }
   .cm-header-2 {
     font-size: 160%;
@@ -263,7 +245,23 @@ span[data-img-src]::after {
   background-repeat: no-repeat;
 }
 
-.CodeMirror
-  .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) {
-  background: rgba(255, 0, 0, 0.15);
+.editor-statusbar {
+  padding: 8px 10px;
+  font-size: 12px;
+  color: #959694;
+  text-align: right;
+  span {
+    display: inline-block;
+    min-width: 4em;
+    margin-left: 1em;
+  }
+  .lines:before {
+    content: "lines: ";
+  }
+  .words:before {
+    content: "words: ";
+  }
+  .characters:before {
+    content: "characters: ";
+  }
 }