From a7276bf5291465a92f6c7d581bd4b5b897401ed7 Mon Sep 17 00:00:00 2001
From: Pratik <badhepd@gmail.com>
Date: Tue, 7 Jan 2025 15:23:54 +0530
Subject: [PATCH] feat: add disclosure markdown element & change button icons

---
 wiki/public/js/editor.js                      |  9 ++
 wiki/public/scss/edit_wiki.scss               | 10 ++-
 .../doctype/wiki_page/templates/editor.html   | 82 ++++++++++++++++---
 3 files changed, 88 insertions(+), 13 deletions(-)

diff --git a/wiki/public/js/editor.js b/wiki/public/js/editor.js
index 5e93cbdc..c8b0efe7 100644
--- a/wiki/public/js/editor.js
+++ b/wiki/public/js/editor.js
@@ -219,6 +219,11 @@ function insertMarkdown(type) {
     case "table":
       insertion = `${selection}\n| Header 1 | Header 2 |\n| -------- | -------- |\n| Row 1 | Row 1 |\n| Row 2 | Row 2 |`;
       break;
+    case "disclosure":
+      insertion = `\n<details>\n<summary>${
+        selection || "Title"
+      }</summary>\nContent\n</details>`;
+      break;
   }
 
   editor.insert(insertion);
@@ -234,6 +239,9 @@ const mdeUlistBtn = document.querySelector('[data-mde-button="ulist"]');
 const mdeLinkBtn = document.querySelector('[data-mde-button="link"]');
 const mdeImageBtn = document.querySelector('[data-mde-button="image"]');
 const mdeTableBtn = document.querySelector('[data-mde-button="table"]');
+const mdeDisclosureBtn = document.querySelector(
+  '[data-mde-button="disclosure"]'
+);
 
 mdeBoldBtn.addEventListener("click", () => insertMarkdown("bold"));
 mdeItalicBtn.addEventListener("click", () => insertMarkdown("italic"));
@@ -244,6 +252,7 @@ mdeUlistBtn.addEventListener("click", () => insertMarkdown("ulist"));
 mdeLinkBtn.addEventListener("click", () => insertMarkdown("link"));
 mdeImageBtn.addEventListener("click", () => insertMarkdown("image"));
 mdeTableBtn.addEventListener("click", () => insertMarkdown("table"));
+mdeDisclosureBtn.addEventListener("click", () => insertMarkdown("disclosure"));
 
 editor.commands.addCommand({
   name: "bold",
diff --git a/wiki/public/scss/edit_wiki.scss b/wiki/public/scss/edit_wiki.scss
index 3e06d936..046252bd 100644
--- a/wiki/public/scss/edit_wiki.scss
+++ b/wiki/public/scss/edit_wiki.scss
@@ -696,13 +696,19 @@ ul[data-type="taskList"] {
 }
 
 .toolbar button {
-  width: 28px !important;
-  height: 28px !important;
+  width: 26px !important;
+  height: 26px !important;
   background: var(--editor-toolbar-btn-bg-color) !important;
   border: 1px solid #ccc;
   border-radius: 4px !important;
   color: var(--editor-toolbar-btn-color) !important;
   cursor: pointer;
+  padding: 2px !important ;
+
+  svg {
+    width: 18px;
+    height: 18px;
+  }
 }
 
 .toolbar i {
diff --git a/wiki/wiki/doctype/wiki_page/templates/editor.html b/wiki/wiki/doctype/wiki_page/templates/editor.html
index 95ea373e..011ce9dd 100644
--- a/wiki/wiki/doctype/wiki_page/templates/editor.html
+++ b/wiki/wiki/doctype/wiki_page/templates/editor.html
@@ -31,34 +31,94 @@
   <div class="editor-container">
     <div class="toolbar">
       <button data-mde-button="bold" title="Bold">
-        <i class="fa fa-bold"></i>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+          stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bold">
+          <path d="M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8" />
+        </svg>
       </button>
       <button data-mde-button="italic" title="Italic">
-        <i class="fa fa-italic"></i>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+          stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-italic">
+          <line x1="19" x2="10" y1="4" y2="4" />
+          <line x1="14" x2="5" y1="20" y2="20" />
+          <line x1="15" x2="9" y1="4" y2="20" />
+        </svg>
       </button>
       <button data-mde-button="heading" title="Heading">
-        <i class="fa fa-header"></i>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+          stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-heading">
+          <path d="M6 12h12" />
+          <path d="M6 20V4" />
+          <path d="M18 20V4" />
+        </svg>
       </button>
       <button data-mde-button="quote" title="Quote">
-        <i class="fa fa-quote-left"></i>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+          stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-quote">
+          <path
+            d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z" />
+          <path
+            d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z" />
+        </svg>
       </button>
       <button data-mde-button="olist" title="Ordered List">
-        <i class="fa fa-list-ol"></i>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+          stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-list-ordered">
+          <path d="M10 12h11" />
+          <path d="M10 18h11" />
+          <path d="M10 6h11" />
+          <path d="M4 10h2" />
+          <path d="M4 6h1v4" />
+          <path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1" />
+        </svg>
       </button>
       <button data-mde-button="ulist" title="Unordered List">
-        <i class="fa fa-list-ul"></i>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+          stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-list">
+          <path d="M3 12h.01" />
+          <path d="M3 18h.01" />
+          <path d="M3 6h.01" />
+          <path d="M8 12h13" />
+          <path d="M8 18h13" />
+          <path d="M8 6h13" />
+        </svg>
       </button>
       <button data-mde-button="link" title="Link">
-        <i class="fa fa-link"></i>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+          stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link">
+          <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+          <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+        </svg>
       </button>
       <button data-mde-button="image" title="Image">
-        <i class="fa fa-picture-o"></i>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+          stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-image">
+          <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
+          <circle cx="9" cy="9" r="2" />
+          <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
+        </svg>
       </button>
       <button data-mde-button="table" title="Table">
-        <i class="fa fa-table"></i>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+          stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-table">
+          <path d="M12 3v18" />
+          <rect width="18" height="18" x="3" y="3" rx="2" />
+          <path d="M3 9h18" />
+          <path d="M3 15h18" />
+        </svg>
+      </button>
+      <button data-mde-button="disclosure" title="Disclosure">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+          class="lucide lucide-list-collapse">
+          <path d="m3 10 2.5-2.5L3 5" />
+          <path d="m3 19 2.5-2.5L3 14" />
+          <path d="M10 6h11" />
+          <path d="M10 12h11" />
+          <path d="M10 18h11" />
+        </svg>
       </button>
     </div>
     <div id="wiki-editor"></div>
   </div>
-</div>
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
\ No newline at end of file
+</div>
\ No newline at end of file