From 783ca5ddada92008ffb32e1f8b9b512a65d93edb Mon Sep 17 00:00:00 2001 From: Gavin Rigsby Date: Wed, 28 Feb 2024 09:46:03 -0800 Subject: [PATCH] Update codeblock button icons --- mystyles.css | 2 +- src/main.ts | 29 ++++++++++++++++++++--------- 2 files changed, 21 insertions(+), 10 deletions(-) diff --git a/mystyles.css b/mystyles.css index 9af9441..83e58a0 100644 --- 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 index 6596909..e8f57d2 100644 --- 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 = ` - -`; 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", ` + + `) this.settings.extensions.forEach(e => { let l = getLanguage(e)