refactor: update edit menu icon appearance and editor setup function

Author: AyshaHakeem

wiki/public/js/editor.js

@@ -55,20 +55,13 @@ previewToggleBtn.on("click", function () {
 });
 
 function setEditor() {
-  editor.setOption("wrap", true);
-  editor.setOption("showPrintMargin", true);
-  editor.setTheme("ace/theme/tomorrow_night");
-  editor.renderer.lineHeight = 20;
-  frappe.call({
-    method: "wiki.wiki.doctype.wiki_page.wiki_page.convert_html",
-    args: {
-      html: $(".wiki-content").html(),
-    },
-    callback: (r) => {
-      editor.setValue(markdown_content || "", 1);
-    },
+  editor.setOptions({
+    wrap: true,
+    showPrintMargin: true,
+    theme: "ace/theme/tomorrow_night",
   });
-
+  editor.renderer.lineHeight = 20;
+  editor.setValue(markdown_content || "", 1);
   wikiTitleInput.val($(".wiki-title").text() || "");
 }
 

wiki/public/scss/wiki.scss

@@ -40,9 +40,21 @@ body {
 
   // ------------------------------------------
 
-  font-family: InterVariable, ui-sans-serif, system-ui, -apple-system,
-    BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans,
-    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol,
+  font-family:
+    InterVariable,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Helvetica Neue,
+    Arial,
+    Noto Sans,
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    Segoe UI Symbol,
     "Noto Color Emoji";
 
   background-color: var(--background-color);
@@ -316,7 +328,10 @@ body.dark {
   &.active {
     background-color: var(--sidebar-active-item-color);
     border-radius: 0.625rem;
-    box-shadow: 0 0 #0000, 0 0 #0000, 0px 1px 2px rgba(0, 0, 0, 0.1);
+    box-shadow:
+      0 0 #0000,
+      0 0 #0000,
+      0px 1px 2px rgba(0, 0, 0, 0.1);
   }
 
   div {
@@ -858,9 +873,11 @@ h6:hover .feather-link {
 }
 
 .wiki-options {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   width: 2rem;
   height: 2rem;
-  margin-top: 0.5rem;
   margin-left: 0.5rem;
 
   svg {
@@ -872,6 +889,24 @@ h6:hover .feather-link {
   }
 }
 
+.menu {
+  cursor: pointer;
+  font-size: 24px;
+
+  .dots {
+    display: flex;
+    justify-content: space-around;
+    width: 16px;
+
+    .dot {
+      background-color: #333;
+      border-radius: 50%;
+      width: 6px;
+      height: 6px;
+    }
+  }
+}
+
 .wiki-options:hover {
   background-color: var(--gray-200);
   border-radius: 5px;
@@ -953,7 +988,10 @@ h6:hover .feather-link {
   .active {
     color: var(--text-color);
     box-shadow: 1px 0 0 var(--primary) inset;
-    transition: color 0.2s, box-shadow 0.2s linear, transform 0.2s linear;
+    transition:
+      color 0.2s,
+      box-shadow 0.2s linear,
+      transform 0.2s linear;
   }
 
   a {

wiki/wiki/doctype/wiki_page/templates/show.html

@@ -44,14 +44,14 @@ <h5 class="modal-title" id="addGroupModalTitle">Title</h5>
 	</div>
 	{%- endif -%}
 	<div class="dropdown">
-		<div class="dropdown-toggle wiki-options" type="button" role="button" id="wikiOptionsButton" data-toggle="dropdown"
+		<div class="dropdown-toggle wiki-options menu" type="button" role="button" id="wikiOptionsButton" data-toggle="dropdown"
 			aria-label="Wiki Option Button" aria-expanded="false">
 			<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
 				stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-				class="feather feather-more-vertical">
+				class="feather feather-more-horizontal">
+				<circle cx="5" cy="12" r="1"></circle>
 				<circle cx="12" cy="12" r="1"></circle>
-				<circle cx="12" cy="5" r="1"></circle>
-				<circle cx="12" cy="19" r="1"></circle>
+				<circle cx="19" cy="12" r="1"></circle>
 			</svg>
 		</div>
 		<div class="dropdown-menu d-print-none" aria-labelledby="wikiOptionsButton">