From 244967fb0eca3a3c0027e8ee3900a353f60c1e00 Mon Sep 17 00:00:00 2001
From: Eric Mika <eric@ericmika.com>
Date: Wed, 18 Sep 2024 21:36:03 -0400
Subject: [PATCH] Prevent color-like strings from changing the Text component
 to a Color component . Addresses #17 .

---
 .eslintrc.cjs                                 |  1 -
 .../tests/TestTextStringDetection.svelte      | 50 +++++++++++++++++++
 src/lib/control/Text.svelte                   |  6 ++-
 3 files changed, 55 insertions(+), 2 deletions(-)
 create mode 100644 src/examples/tests/TestTextStringDetection.svelte

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index d71cb4f..16ac921 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -101,7 +101,6 @@ module.exports = {
 				'@typescript-eslint/no-duplicate-type-constituents': 'off',
 				'@typescript-eslint/no-redundant-type-constituents': 'off',
 				'@typescript-eslint/no-unnecessary-type-arguments': 'off',
-
 				'@typescript-eslint/restrict-plus-operands': 'off',
 				'no-return-assign': 'off',
 				'unicorn/no-null': 'off',
diff --git a/src/examples/tests/TestTextStringDetection.svelte b/src/examples/tests/TestTextStringDetection.svelte
new file mode 100644
index 0000000..0d17f6c
--- /dev/null
+++ b/src/examples/tests/TestTextStringDetection.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+	// Svelte Tweakpane UI's Text component should NOT give color-like string
+	// special treatment, use the Color component instead.
+	//
+	// Related:
+	// https://github.com/kitschpatrol/svelte-tweakpane-ui/issues/17
+
+	import { Text } from '$lib';
+	let sample01 = 'Hi';
+	let sample02 = '1';
+	let sample03 = '0x13';
+	let sample04 = '0x1337';
+	let sample05 = '0xEE1337';
+	let sample06 = '0x1337AA';
+	let sample07 = '0x1337AA13';
+	let sample08 = '#13';
+	let sample09 = '#1337';
+	let sample10 = '#EE1337';
+	let sample11 = '#1337AA';
+	let sample12 = '#1337AA13';
+	let sample13 = '238, 19, 55';
+	let sample14 = '238, 19, 55, 0.5';
+	let sample15 = 'rgb(238, 19, 55)';
+	let sample16 = 'rgba(238, 19, 55, 0.5)';
+	let sample17 = 'True';
+	let sample18 = 'true';
+	let sample19 = 'False';
+	let sample20 = 'false';
+</script>
+
+<Text bind:value={sample01} />
+<Text bind:value={sample02} />
+<Text bind:value={sample03} />
+<Text bind:value={sample04} />
+<Text bind:value={sample05} />
+<Text bind:value={sample06} />
+<Text bind:value={sample07} />
+<Text bind:value={sample08} />
+<Text bind:value={sample09} />
+<Text bind:value={sample10} />
+<Text bind:value={sample11} />
+<Text bind:value={sample12} />
+<Text bind:value={sample13} />
+<Text bind:value={sample14} />
+<Text bind:value={sample15} />
+<Text bind:value={sample16} />
+<Text bind:value={sample17} />
+<Text bind:value={sample18} />
+<Text bind:value={sample19} />
+<Text bind:value={sample20} />
diff --git a/src/lib/control/Text.svelte b/src/lib/control/Text.svelte
index d458824..4af72ee 100644
--- a/src/lib/control/Text.svelte
+++ b/src/lib/control/Text.svelte
@@ -45,6 +45,10 @@
 		change: TextChangeEvent;
 	};
 
+	// Do not allow for automatic detection of hex / color strings
+	// See https://github.com/kitschpatrol/svelte-tweakpane-ui/issues/17
+	const options = { view: 'text' };
+
 	// Tweakpane's implementation only sends updates on blur we extend it to send continues change
 	// updates if desired
 	let ref: GenericInputRef;
@@ -98,4 +102,4 @@ position="inline">`.
 [Text.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/control/Text.svelte)
 -->
 
-<GenericInput bind:value bind:ref on:change {...$$restProps} />
+<GenericInput bind:value bind:ref on:change {options} {...$$restProps} />