Skip to content

Commit

Permalink
Merge pull request #311 from pratikb64/update-editor
Browse files Browse the repository at this point in the history 
feat: add disclosure markdown element & change button icons
  • Loading branch information
@pratikb64
pratikb64 authored Jan 7, 2025
2 parents f0ca7ca + a7276bf commit e669156
Show file tree
Hide file tree
Showing 3 changed files with 88 additions and 13 deletions.
9 changes: 9 additions & 0 deletions wiki/public/js/editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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"));
Expand All @@ -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",
Expand Down
10 changes: 8 additions & 2 deletions wiki/public/scss/edit_wiki.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
82 changes: 71 additions & 11 deletions wiki/wiki/doctype/wiki_page/templates/editor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
</div>

0 comments on commit e669156

Please sign in to comment.