Add customizable icon symbol to settings

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)

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<Decoration>();
     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,
     }

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<CopyInlineCodePluginSettings> = {
   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
 

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();
         });
+      });
   }
 }