diff --git a/src/copy-code-widget.ts b/src/copy-code-widget.ts index 17f9c06..46a876e 100644 --- a/src/copy-code-widget.ts +++ b/src/copy-code-widget.ts @@ -3,13 +3,16 @@ import { Notice } from "obsidian"; export class CopyWidget extends WidgetType { showOnHover: boolean; - constructor(showOnHover: boolean) { + iconSymbol: string; + + constructor(showOnHover: boolean, iconSymbol: string) { super(); this.showOnHover = showOnHover; + this.iconSymbol = iconSymbol; } toDOM(view: EditorView): HTMLElement { - const icon = createSpan({cls: "copy-to-clipboard-icon", text: "\xa0📋"}) + const icon = createSpan({cls: "copy-to-clipboard-icon", text: `\xa0${this.iconSymbol}`}) icon.toggleClass("show-on-hover", this.showOnHover) icon.onclick = (event) => { const element = (event.target as HTMLElement) diff --git a/src/copy-inline-code-view-plugin.ts b/src/copy-inline-code-view-plugin.ts index 819ff42..aac2a53 100644 --- a/src/copy-inline-code-view-plugin.ts +++ b/src/copy-inline-code-view-plugin.ts @@ -4,7 +4,6 @@ import { Decoration, DecorationSet, EditorView, - PluginSpec, PluginValue, ViewPlugin, ViewUpdate, @@ -15,9 +14,11 @@ import { CopyWidget } from "./copy-code-widget"; class CopyInlineCodeViewPlugin implements PluginValue { decorations: DecorationSet; showOnHover: boolean; + iconSymbol: string; - constructor(view:EditorView, showOnHover: boolean) { + constructor(view:EditorView, showOnHover: boolean, iconSymbol: string) { this.showOnHover = showOnHover; + this.iconSymbol = iconSymbol; this.decorations = this.buildDecorations(view); } @@ -32,6 +33,7 @@ class CopyInlineCodeViewPlugin implements PluginValue { buildDecorations(view: EditorView): DecorationSet { const builder = new RangeSetBuilder(); const showOnHover = this.showOnHover + const iconSymbol = this.iconSymbol; for (const { from, to } of view.visibleRanges) { syntaxTree(view.state).iterate({ from, @@ -42,7 +44,7 @@ class CopyInlineCodeViewPlugin implements PluginValue { node.to + 1, node.to + 1, Decoration.widget({ - widget: new CopyWidget(showOnHover), + widget: new CopyWidget(showOnHover, iconSymbol), }) ); } @@ -54,9 +56,9 @@ class CopyInlineCodeViewPlugin implements PluginValue { } } -export const createCopyPlugin = (showOnHover: boolean) => { +export const createCopyPlugin = (showOnHover: boolean, iconSymbol: string) => { return ViewPlugin.define( - (view: EditorView) => new CopyInlineCodeViewPlugin(view, showOnHover), + (view: EditorView) => new CopyInlineCodeViewPlugin(view, showOnHover, iconSymbol), { decorations: (p) => p.decorations, } diff --git a/src/main.ts b/src/main.ts index bdccb70..d70d173 100644 --- a/src/main.ts +++ b/src/main.ts @@ -5,10 +5,12 @@ import { createCopyPlugin } from './copy-inline-code-view-plugin'; interface CopyInlineCodePluginSettings { showOnHover: boolean; + iconSymbol: string; } const DEFAULT_SETTINGS: Partial = { showOnHover: false, + iconSymbol: '📋' }; export default class CopyInlineCodePlugin extends Plugin { @@ -30,7 +32,7 @@ export default class CopyInlineCodePlugin extends Plugin { } async copyInlineCodeLogic() { - this.registerEditorExtension([createCopyPlugin(this.settings.showOnHover)]); + this.registerEditorExtension([createCopyPlugin(this.settings.showOnHover, this.settings.iconSymbol)]); this.registerMarkdownPostProcessor((element, context) => { const inlineCodes = element.querySelectorAll("*:not(pre) > code"); @@ -39,7 +41,7 @@ export default class CopyInlineCodePlugin extends Plugin { return } - const icon = createSpan({cls: "copy-to-clipboard-icon", text: "\xa0📋"}) + const icon = createSpan({cls: "copy-to-clipboard-icon", text: `\xa0${this.settings.iconSymbol}`}) icon.toggleClass("show-on-hover", this.settings.showOnHover) const textToCopy = code.textContent diff --git a/src/settings.ts b/src/settings.ts index dae4036..b343aa7 100644 --- a/src/settings.ts +++ b/src/settings.ts @@ -15,20 +15,33 @@ export class CopyInlineCodePluginTab extends PluginSettingTab { containerEl.empty(); containerEl.createEl('p', { - cls: 'tasks-setting-important', - text: 'Changing any settings requires a restart of obsidian.', + cls: 'tasks-setting-important', + text: 'Changing any settings requires a restart of obsidian.', }); - + new Setting(containerEl) .setName("Show on hover") .setDesc("Copy icon only visible on hover (restart obsidian after change)") .addToggle((component) => { - component + component .setValue(this.plugin.settings.showOnHover) .onChange(async (value) => { this.plugin.settings.showOnHover = value; await this.plugin.saveSettings(); }) + }); + + new Setting(containerEl) + .setName("Icon Symbol") + .setDesc("Choose the symbol for the icon: 📋 or ⧉ (restart obsidian after change)") + .addDropdown((dropdown) => { + dropdown.addOption('📋', 'Clipboard 📋'); + dropdown.addOption('⧉', 'Square ⧉'); + dropdown.setValue(this.plugin.settings.iconSymbol || '📋'); + dropdown.onChange(async (value) => { + this.plugin.settings.iconSymbol = value; + await this.plugin.saveSettings(); }); + }); } }