Update codeblock button icons

GavinRigsby · Feb 28, 2024 · 783ca5d · 783ca5d
1 parent 5d090f6
commit 783ca5d
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 10 deletions.
diff --git a/mystyles.css b/mystyles.css
@@ -30,7 +30,7 @@
     font-family: var(--font-interface);
     position: absolute;
     top: 0;
-    right: 110px;
+    right: 100px;
 }
 
 .markdown-rendered div pre:hover button.markdown-code-edit {

diff --git a/src/main.ts b/src/main.ts
@@ -1,4 +1,4 @@
-import { Plugin, MarkdownRenderer, TFile, MarkdownPostProcessorContext, MarkdownView, parseYaml, requestUrl, Menu, Notice, TAbstractFile, WorkspaceLeaf, Workspace, MarkdownPreviewView, MarkdownPreviewRenderer, TextFileView, App} from 'obsidian';
+import { Plugin, MarkdownRenderer, TFile, MarkdownPostProcessorContext, MarkdownView, parseYaml, requestUrl, Notice, TAbstractFile, WorkspaceLeaf, Workspace, App, setIcon, addIcon} from 'obsidian';
 import { EmbedAndEditSettings, viewType, DEFAULT_SETTINGS} from "./settings";
 import { analyseSrcLines, extractSrcLines, getLocalSource, getFileName} from "./utils";
 import { CodeEditorView } from "./codeEditorView";
@@ -334,6 +334,17 @@ class EmbeddedCode{
 		}else{
 			new Notice(`Cannot locate Refresh Button`);
 		}
+
+		console.log(this.container)
+		let copyButton = this.container.querySelector('.copy-code-button') as HTMLButtonElement;
+		console.log(copyButton)
+		if (copyButton){
+			console.log(copyButton)
+			setIcon(copyButton, 'clipboard');
+			copyButton.ariaLabel = "Copy to Clipboard";
+		}
+
+
 	}
 
 	addTitleLivePreview() {
@@ -389,19 +400,15 @@ class EmbeddedCode{
 
 		// Creates Modify Button
 		let editButton = document.createElement("button");
-		editButton.appendText("Edit")
 		editButton.addClass("markdown-code-edit");
-		pre.append(editButton)
+		setIcon(editButton, 'pencil');
+		editButton.ariaLabel = "Edit Code File";
+		pre.append(editButton);
 
 		let refreshButton = document.createElement("button");
 		refreshButton.addClass("markdown-code-refresh");
+		setIcon(refreshButton, 'code-refresh');
 		refreshButton.ariaLabel = "Refresh Content";
-
-		// cannot use createEl as svg is not accepted
-		// static image with no input 
-		refreshButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20" height="20" viewBox="0 0 30 30">
-<path d="M 15 3 C 12.031398 3 9.3028202 4.0834384 7.2070312 5.875 A 1.0001 1.0001 0 1 0 8.5058594 7.3945312 C 10.25407 5.9000929 12.516602 5 15 5 C 20.19656 5 24.450989 8.9379267 24.951172 14 L 22 14 L 26 20 L 30 14 L 26.949219 14 C 26.437925 7.8516588 21.277839 3 15 3 z M 4 10 L 0 16 L 3.0507812 16 C 3.562075 22.148341 8.7221607 27 15 27 C 17.968602 27 20.69718 25.916562 22.792969 24.125 A 1.0001 1.0001 0 1 0 21.494141 22.605469 C 19.74593 24.099907 17.483398 25 15 25 C 9.80344 25 5.5490109 21.062074 5.0488281 16 L 8 16 L 4 10 z"></path>
-</svg>`;
 		pre.append(refreshButton);  
 	}
 
@@ -512,6 +519,10 @@ export default class EmbedAndEditCode extends Plugin {
 
 		this.addSettingTab(new CodeFilesSettingsTab(this.app, this));
 
+		// Create custom refresh svg as Lucide refresh fills incorrectly in codeblock
+		addIcon("code-refresh", `<g transform="matrix(3.33 0 0 3.33 50 50)"  >
+		<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill-rule: nonzero; opacity: 1;"  transform=" translate(-15, -15)" d="M 15 3 C 12.031398 3 9.3028202 4.0834384 7.2070312 5.875 C 6.92097953443116 6.102722442718219 6.781996312146395 6.468394217532747 6.84458079887411 6.828625043966701 C 6.907165285601823 7.188855870400655 7.161341070445081 7.486222400749947 7.507438614792125 7.604118779359328 C 7.8535361591391695 7.722015157968709 8.236385060652946 7.641647866224133 8.5058594 7.394531200000001 C 10.25407 5.9000929 12.516602 5 15 5 C 20.19656 5 24.450989 8.9379267 24.951172 14 L 22 14 L 26 20 L 30 14 L 26.949219 14 C 26.437925 7.8516588 21.277839 3 15 3 z M 4 10 L 0 16 L 3.0507812 16 C 3.562075 22.148341 8.7221607 27 15 27 C 17.968602 27 20.69718 25.916562 22.792969 24.125 C 23.07902234348135 23.89727811487935 23.21800696636432 23.531605633011267 23.155422803510252 23.17137377040107 C 23.092838640656183 22.811141907790866 22.838662106347986 22.51377449397328 22.492563490644887 22.395878266348475 C 22.14646487494179 22.27798203872367 21.76361505519577 22.35835059547272 21.494141 22.605469 C 19.74593 24.099907 17.483398 25 15 25 C 9.80344 25 5.5490109 21.062074 5.0488281 16 L 8 16 L 4 10 z" stroke-linecap="round" />
+		</g>`)
 
 		this.settings.extensions.forEach(e => {
 			let l = getLanguage(e)