add logic to toggle css

src/copy-code-widget.ts

@@ -2,13 +2,15 @@ import { EditorView, WidgetType } from "@codemirror/view";
 import { Notice } from "obsidian";
 
 export class CopyWidget extends WidgetType {
-    constructor() {
-        super();
-    }
+  showOnHover: boolean;
+  constructor(showOnHover: boolean) { 
+    super();
+    this.showOnHover = showOnHover;
+  }
 
   toDOM(view: EditorView): HTMLElement {
-    const icon = createSpan({cls: "copy-to-clipboard-icon", text: "a \xa0📋"})
-
+    const icon = createSpan({cls:  "copy-to-clipboard-icon", text: "\xa0📋"})
+    icon.toggleClass("show-on-hover", this.showOnHover)
     icon.onclick = (event) => {
         const element = (event.target as HTMLElement)
         let previousElement = element.previousElementSibling

src/copy-inline-code-view-plugin.ts

@@ -11,10 +11,13 @@ import {
 } from "@codemirror/view";
 import { CopyWidget } from "./copy-code-widget";
 
+
 class CopyInlineCodeViewPlugin implements PluginValue {
   decorations: DecorationSet;
+  showOnHover: boolean;
 
-  constructor(view: EditorView) {
+  constructor(view:EditorView, showOnHover: boolean) {
+    this.showOnHover = showOnHover;
     this.decorations = this.buildDecorations(view);
   }
 
@@ -28,7 +31,7 @@ class CopyInlineCodeViewPlugin implements PluginValue {
 
   buildDecorations(view: EditorView): DecorationSet {
     const builder = new RangeSetBuilder<Decoration>();
-
+    const showOnHover = this.showOnHover
     for (const { from, to } of view.visibleRanges) {
       syntaxTree(view.state).iterate({
         from,
@@ -39,7 +42,7 @@ class CopyInlineCodeViewPlugin implements PluginValue {
               node.to + 1,
               node.to + 1,
               Decoration.widget({
-                widget: new CopyWidget(),
+                widget: new CopyWidget(showOnHover),
               })
             );
           }
@@ -51,11 +54,11 @@ class CopyInlineCodeViewPlugin implements PluginValue {
   }
 }
 
-const pluginSpec: PluginSpec<CopyInlineCodeViewPlugin> = {
-  decorations: (value: CopyInlineCodeViewPlugin) => value.decorations,
+export const createCopyPlugin = (showOnHover: boolean) => {
+  return ViewPlugin.define(
+    (view: EditorView) => new CopyInlineCodeViewPlugin(view, showOnHover),
+    {
+      decorations: (p) => p.decorations,
+    }
+  );
 };
-
-export const copyPlugin = ViewPlugin.fromClass(
-  CopyInlineCodeViewPlugin,
-  pluginSpec
-);

src/main.ts

@@ -1,6 +1,6 @@
 import { CopyInlineCodePluginTab } from "./settings";
 import { Notice, Plugin } from 'obsidian';
-import { copyPlugin as copyInlineCodePlugin } from './copy-inline-code-view-plugin';
+import { createCopyPlugin } from './copy-inline-code-view-plugin';
 
 
 interface CopyInlineCodePluginSettings {
@@ -16,9 +16,6 @@ export default class CopyInlineCodePlugin extends Plugin {
 
   async onload() {
     await this.loadSettings();
-
-    
-
     this.addSettingTab(new CopyInlineCodePluginTab(this.app, this));
     this.copyInlineCodeLogic();
     
@@ -33,7 +30,7 @@ export default class CopyInlineCodePlugin extends Plugin {
   }
 
   async copyInlineCodeLogic() {
-    this.registerEditorExtension([copyInlineCodePlugin]);
+    this.registerEditorExtension([createCopyPlugin(this.settings.showOnHover)]);
 		this.registerMarkdownPostProcessor((element, context) => {
 			const inlineCodes = element.querySelectorAll("*:not(pre) > code");
 			
@@ -43,7 +40,8 @@ export default class CopyInlineCodePlugin extends Plugin {
 				}
 
 				const icon = createSpan({cls: "copy-to-clipboard-icon", text: "\xa0📋"})
-				const textToCopy = code.textContent
+        icon.toggleClass("show-on-hover", this.settings.showOnHover)
+        const textToCopy = code.textContent
 
 				icon.onclick = (event) => {			
 					if(textToCopy) {

src/settings.ts

@@ -17,7 +17,7 @@ export class CopyInlineCodePluginTab extends PluginSettingTab {
 
     new Setting(containerEl)
       .setName("Show on hover")
-      .setDesc("Copy icon only visible on hover")
+      .setDesc("Copy icon only visible on hover (restart obsidian after change)")
       .addToggle((component) => {
           component
           .setValue(this.plugin.settings.showOnHover)

styles.css

@@ -1,3 +1,17 @@
 .copy-to-clipboard-icon {
     cursor: pointer
 }
+
+.show-on-hover {
+    cursor: pointer;
+    opacity: 0;
+}
+
+/* Source Mode */
+.cm-line:hover .show-on-hover {
+    opacity: 1.0;
+}
+/* Reading Mode */
+code:hover .show-on-hover {
+    opacity: 1.0;
+}