Merge pull request #21 from GRA0007/feat/copy-on-click

Copy on click

.changes/copy-to-clipboard.md

@@ -0,0 +1,5 @@
+---
+"obsidian-css-inlay-colors": minor:feat
+---
+
+Adds an option to copy the color to the clipboard on click in reading mode

README.md

@@ -6,7 +6,7 @@
 
 Show inline color hints for CSS colors in Obsidian.
 
-To use, just put any valid CSS color syntax in a code block like so: \`\#8A5CF5\`.
+To use, just put any [valid CSS color syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) in a code block like so: \`\#8A5CF5\`.
 
 <img src="example.jpg" alt="Example of the extension running for all CSS color formats" width="200">
 
@@ -14,6 +14,10 @@ To use, just put any valid CSS color syntax in a code block like so: \`\#8A5CF5\
 
 Enable the color picker setting to change a color using a color picker in live preview mode. Note that the color picker does not support opacity, and will only let you select from sRGB colors. It will attempt to preserve the existing format you have written, as well as any existing opacity.
 
+### Copy On Click
+
+By default, colors can be copied to the clipboard by clicking on them. This only works in reading mode, and can be disabled in the plugin settings.
+
 ### Custom CSS
 
 Customize the inlays by targeting the `.css-color-inlay` class. For example, you can make them circular with the following snippet:

src/preview.ts

@@ -1,4 +1,5 @@
 import { parse } from 'culori'
+import { Notice } from 'obsidian'
 import type { CssColorsPluginSettings } from './settings'
 
 export const inlayPostProcessor =
@@ -23,5 +24,30 @@ export const inlayPostProcessor =
         cls: `css-color-inlay ${settings.hideNames ? 'css-color-name-hidden' : ''}`,
         attr: { style: `--css-color-inlay-color: ${color};` },
       })
+
+      if (settings.copyOnClick) {
+        code.setAttr('aria-label', 'Click to copy')
+        code.setAttr('style', 'cursor: pointer;')
+        code.addEventListener('click', (e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          navigator.clipboard
+            .writeText(color)
+            .then(() => {
+              const toast = document.createDocumentFragment()
+              const toastColor = document.createElement('span')
+              toastColor.className = 'css-color-inlay'
+              toastColor.style = `--css-color-inlay-color: ${color};`
+              toast.append(toastColor)
+              toast.append(
+                document.createTextNode('Copied color to the clipboard'),
+              )
+              new Notice(toast)
+            })
+            .catch(() => {
+              new Notice('Failed to copy color')
+            })
+        })
+      }
     }
   }

src/settings.ts

@@ -5,12 +5,14 @@ export interface CssColorsPluginSettings {
   showInLiveEditor: boolean
   colorPickerEnabled: boolean
   hideNames: boolean
+  copyOnClick: boolean
 }
 
 export const DEFAULT_SETTINGS: CssColorsPluginSettings = {
   showInLiveEditor: true,
   colorPickerEnabled: false,
   hideNames: false,
+  copyOnClick: true,
 }
 
 export class CssColorsSettingsTab extends PluginSettingTab {
@@ -67,5 +69,19 @@ export class CssColorsSettingsTab extends PluginSettingTab {
             await this.plugin.saveSettings()
           }),
       )
+
+    new Setting(containerEl)
+      .setName('Copy on click')
+      .setDesc(
+        'Allows clicking on a color in reading mode to copy it to your clipboard.',
+      )
+      .addToggle((toggle) =>
+        toggle
+          .setValue(this.plugin.settings.copyOnClick)
+          .onChange(async (value) => {
+            this.plugin.settings.copyOnClick = value
+            await this.plugin.saveSettings()
+          }),
+      )
   }
 }