New setting, typo fixes

+ New `ColorFormat` setting #16
+ Fix various typos
+ Update readme

documentation/Colors.md

@@ -90,4 +90,4 @@ Semicolon delimiters can be used with the `RGB` and `HSL` formats.
 ```palette
 rgb(123, 555, 777); rgb(122, 222, 772);
 ```
-</pre>
+</pre>

documentation/PaletteSettings.md

@@ -108,7 +108,6 @@ rgba(var(--color-green-rgb), .5)
 ```
 </pre>
 
-
 ## Aliases
 
 Aliases are names which accompany colors.
@@ -123,4 +122,4 @@ Skipping colors is possible by using empty quotes "".
 #322
 { "aliases": ["grey","black","brown"] }
 ```
-</pre>
+</pre>

documentation/Settings.md

@@ -37,14 +37,22 @@ Purely aesthetic change which toggles whether the corners on palettes are rounde
 
 Toggles whether hover is active while editing.
 
-## Reload Delay
+### Reload Delay
 
 > Default: 5
 
 Modifies the speed at which the palette will reload when resizing or changing.
 Smaller values means the palette will be more responsive, but require more processing.
 It is recommended to keep this value between 0 - 1000.
 
+### Copy Format
+
+> Default: Raw
+
+Changes the format that colors are copied in. `Raw` format copies the entire color as show.
+`Value` format copies only the value contained within a color.
+Example: `RGBA(12, 200, 50);` Only `12, 200, 50` is copied.
+
 ## Palette Defaults
 
 The default values of [Palette Settings](./PaletteSettings.md) if the user does not directly modify them.

src/components/EditorModal.ts

@@ -338,7 +338,7 @@ export class EditorModal extends Modal {
             })
         }
 
-        // Set intiial selectedInput
+        // Set initial selectedInput
         changeSelectedInput(this.selectedInput);
 
         let palettePreview = previewContainer.appendChild(createDiv());

src/components/Palette.ts

@@ -186,7 +186,7 @@ export class Palette {
     }
 
     /**
-     * @returns `user` OR `auto` width based on which is more approperiate
+     * @returns `user` OR `auto` width based on which is more appropriate
      */
     public getPaletteWidth(resizeOffset = 0) {
         const paletteOffset = resizeOffset !== 0 ? resizeOffset : this.dropzone.offsetWidth;
@@ -236,7 +236,7 @@ export class Palette {
             this.settings.gradient ?
             this.createGradientPalette(this.dropzone, colors)
             :
-            this.createColorPalette(this.dropzone, colors, settings, this.pluginSettings.aliasMode);
+            this.createColorPalette(this.dropzone, colors, settings);
 
             // Set width of palettes
             this.setWidth(this.getPaletteWidth());
@@ -251,14 +251,14 @@ export class Palette {
         if(colors.length <= 1) throw new PaletteError(Status.INVALID_GRADIENT);
 
         this.paletteCanvas = new Canvas(container);
-        this.paletteCanvas.emitter.on('click', (hex) => copyToClipboard(hex));
+        this.paletteCanvas.emitter.on('click', async (color) => await copyToClipboard(color.toUpperCase(), this.pluginSettings.copyFormat));
     }
 
-    private createColorPalette(container: HTMLElement, colors: string[], settings: PaletteSettings, aliasMode: AliasMode){
+    private createColorPalette(container: HTMLElement, colors: string[], settings: PaletteSettings){
         for(const [i, color] of colors.entries()){
             const paletteItem = new PaletteItem(container, color, 
                 { 
-                    aliasMode: aliasMode, 
+                    aliasMode: this.pluginSettings.aliasMode, 
                     editMode: this.editMode, 
                     hoverWhileEditing: this.pluginSettings.hoverWhileEditing, 
                     height: settings.height, 
@@ -269,10 +269,7 @@ export class Palette {
                 }
             );
 
-            paletteItem.emitter.on('click', (e: MouseEvent) => {
-                this.createNotice(`Copied ${color}`);
-                navigator.clipboard.writeText(color);
-            })
+            paletteItem.emitter.on('click', async (e: MouseEvent) => await copyToClipboard(color.toUpperCase(), this.pluginSettings.copyFormat));
 
             paletteItem.emitter.on('trash', (e: MouseEvent) => {
                 e.stopPropagation();

src/components/PaletteMRC.ts

@@ -130,7 +130,7 @@ export class PaletteMRC extends MarkdownRenderChild {
      * Calculates colors and settings based on codeblock contents
      */
     private calcColorsAndSettings(input: string) {
-        // Splits input by newline creaitng an array
+        // Splits input by newline creating an array
         const split = input.split('\n')
         // Returns true if palette settings are defined
         const hasSettings = split.some((val) => val.includes(('{')));

src/components/PaletteMenu.ts

@@ -4,7 +4,7 @@ import colorsea from "colorsea";
 import { App, MarkdownPostProcessorContext, Menu, Notice } from "obsidian";
 import { Palette, PaletteSettings } from "./Palette";
 import { Direction } from "settings";
-import { createPaletteBlock, getModifiedSettings } from "utils/basicUtils";
+import { copyToClipboard, createPaletteBlock, getModifiedSettings } from "utils/basicUtils";
 
 export class PaletteMenu extends Menu {
     app: App;
@@ -124,7 +124,7 @@ export class PaletteMenu extends Menu {
                 .setIcon("scissors")
                 .onClick(async () => {
                     // Copy palette to clipboard
-                    await navigator.clipboard.writeText(input);
+                    await copyToClipboard(input, this.palette.pluginSettings.copyFormat);
                     // Remove palette
                     this.onChange(undefined, undefined);
                 })
@@ -136,7 +136,7 @@ export class PaletteMenu extends Menu {
                 .setIcon("copy")
                 .onClick(async () => {
                     // Copy palette to clipboard
-                    await navigator.clipboard.writeText(input);
+                    await copyToClipboard(input, this.palette.pluginSettings.copyFormat);
                 })
         });
     }

src/settings.ts

@@ -13,13 +13,19 @@ export enum AliasMode {
 	Alias = 'Prefer Alias'
 }
 
+export enum CopyFormat {
+	Raw = 'Raw',
+	Value = 'Value'
+}
+
 export interface ColorPaletteSettings {
 	noticeDuration: number;
 	errorPulse: boolean;
 	aliasMode: AliasMode;
 	corners: boolean;
 	hoverWhileEditing: boolean;
 	reloadDelay: number;
+	copyFormat: CopyFormat;
 	height: number;
 	width: number;
 	direction: Direction,
@@ -35,6 +41,7 @@ export const defaultSettings: ColorPaletteSettings = {
 	corners: true,
 	hoverWhileEditing: false,
 	reloadDelay: 5,
+	copyFormat: CopyFormat.Raw,
 	height: 150,
 	width: 700,
 	direction: Direction.Column,
@@ -63,7 +70,7 @@ export class SettingsTab extends PluginSettingTab {
 
 		new Setting(containerEl)
 			.setName("Palette Error Pulse")
-			.setDesc("Whether the affected palette should pulse when encountering an error")
+			.setDesc("Whether the affected palette should pulse when encountering an error.")
 			.addToggle((toggle) => {
 				toggle
 				.setValue(settings.errorPulse)
@@ -75,7 +82,7 @@ export class SettingsTab extends PluginSettingTab {
 
 		new Setting(containerEl)
 			.setName("Notice Duration")
-			.setDesc("How long palette error messages are show for in seconds (0 for indefinite)")
+			.setDesc("How long palette error messages are show for in seconds (0 for indefinite).")
 			.addText((text) => {
 				text
 				.setValue((settings.noticeDuration / 1000).toString())
@@ -133,25 +140,39 @@ export class SettingsTab extends PluginSettingTab {
 			})
 
 		new Setting(containerEl)
-		.setName("Reload Delay")
-		.setDesc("How long it takes in milliseconds for palettes to be updated after changes have been made (Larger values are less responsive).")
-		.addText((text) => {
-			text
-			.setValue(settings.reloadDelay.toString())
-			.onChange(async (value) => {
-				try {
-					// Check if valid number
-					if(!Number.isNaN(Number(value))) {
-						settings.reloadDelay = Number(value);
-						await this.plugin.saveSettings();
+			.setName("Reload Delay")
+			.setDesc("How long it takes in milliseconds for palettes to be updated after changes have been made (Larger values are less responsive).")
+			.addText((text) => {
+				text
+				.setValue(settings.reloadDelay.toString())
+				.onChange(async (value) => {
+					try {
+						// Check if valid number
+						if(!Number.isNaN(Number(value))) {
+							settings.reloadDelay = Number(value);
+							await this.plugin.saveSettings();
+						}
+						else throw new Error('Please enter a number.');
 					}
-					else throw new Error('Please enter a number.');
-				}
-				catch(e) {
-					new Notice(e);
-				}
+					catch(e) {
+						new Notice(e);
+					}
+				});
 			});
-		});
+
+		new Setting(containerEl)
+			.setName('Copy Format')
+			.setDesc('Choice of format when copying colors.')
+			.addDropdown((dropdown) => {
+				dropdown
+				.addOption(CopyFormat.Raw, CopyFormat.Raw)
+				.addOption(CopyFormat.Value, CopyFormat.Value)
+				.setValue(this.plugin.settings.copyFormat)
+				.onChange(async (value) => {
+					settings.copyFormat = value as CopyFormat;
+					await this.plugin.saveSettings();
+				})
+			})
 
 		containerEl.createEl('h2').setText('Palette Defaults');
 

src/utils/basicUtils.ts

@@ -1,7 +1,7 @@
 import colorsea from "colorsea";
 import { PaletteSettings } from "components/Palette";
 import { Notice } from "obsidian";
-import { ColorPaletteSettings, defaultSettings } from "settings";
+import { ColorPaletteSettings, CopyFormat, defaultSettings } from "settings";
 
 /**
  * Get settings without their default values
@@ -124,7 +124,14 @@ export function toNString(array: string[]) {
     return result.trim();
 }
 
-export function copyToClipboard(text: string) {
-    new Notice(`Copied ${text.toUpperCase()}`);
-    navigator.clipboard.writeText(text.toUpperCase());
+export async function copyToClipboard(text: string, copyFormat?: CopyFormat) {
+    let copiedText = text;
+
+    // Copy only color value if CopyFormat is set to value & when not a codeblock
+    if(copyFormat === CopyFormat.Value && !text.includes('`')) {
+        if(copiedText.includes('#')) copiedText = copiedText.split('#')[1];
+        else if(copiedText.includes('(')) copiedText = copiedText.split('(')[1].split(')')[0];
+    }
+    new Notice(`Copied ${copiedText}`);
+    await navigator.clipboard.writeText(copiedText);
 }

src/utils/imageUtils.ts

@@ -61,7 +61,7 @@ export default class CanvasImage extends Canvas {
      */
     public async getPalette(numColors = 7, quality = 10) {
         /*
-        Quanitze has an issue with number of colors which has been addressed here https://github.com/olivierlesnicki/quantize/issues/9
+        Quantize has an issue with number of colors which has been addressed here https://github.com/olivierlesnicki/quantize/issues/9
         `nColors` is a simple fix for this.
         */
         const nColors = numColors <= 7 ? numColors : numColors + 1;