@mythrantic/svelte-rich-text 1.2.0 → 1.2.2

package/dist/components/ValiantRichText/editor.css

@@ -22,7 +22,7 @@
 	--border-color: #e2e8f0;
 	--border-color-hover: #cbd5e1;
 	--code-bg: #f1f5f9;
-	--codeblock-bg: #1e293b;
+	--codeblock-bg: #f8fafc;
 	--table-border: #e2e8f0;
 	--table-bg-selected: #f0f9ff;
 	--table-bg-hover: #f8fafc;
@@ -529,3 +529,73 @@ input[type='checkbox'] {
 	color: var(--color-destructive);
 	border: 1px solid darkred;
 }
+
+/* Code Block UI Controls */
+.code-wrapper-select {
+	padding: 0.375rem 0.5rem;
+	border-radius: 0.375rem;
+	border: 1px solid rgba(0, 0, 0, 0.15);
+	background-color: rgba(0, 0, 0, 0.05);
+	color: inherit;
+	font-size: 0.875rem;
+	cursor: pointer;
+	transition:
+		background-color 0.2s ease,
+		border-color 0.2s ease;
+	font-family: inherit;
+}
+
+.code-wrapper-select:hover {
+	background-color: rgba(0, 0, 0, 0.1);
+	border-color: rgba(0, 0, 0, 0.2);
+}
+
+.code-wrapper-select:focus {
+	outline: none;
+	border-color: var(--color-primary);
+	box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.1);
+}
+
+/* Copy Button */
+.code-wrapper-copy {
+	padding: 0.375rem 0.75rem;
+	border-radius: 0.375rem;
+	border: 1px solid rgba(0, 0, 0, 0.15);
+	background-color: rgba(0, 0, 0, 0.05);
+	color: inherit;
+	font-size: 0.875rem;
+	font-weight: 500;
+	cursor: pointer;
+	transition:
+		background-color 0.2s ease,
+		border-color 0.2s ease;
+	font-family: inherit;
+}
+
+.code-wrapper-copy:hover {
+	background-color: rgba(0, 0, 0, 0.1);
+	border-color: rgba(0, 0, 0, 0.2);
+}
+
+.code-wrapper-copy:active {
+	background-color: rgba(0, 0, 0, 0.15);
+}
+
+.code-wrapper-copy-text {
+	white-space: nowrap;
+}
+
+.code-wrapper-copy-text.copied {
+	color: var(--color-primary);
+	font-weight: 600;
+}
+
+/* Code block text - always dark for readability on light background */
+.code-wrapper {
+	color: #1e1e1e;
+}
+
+.code-wrapper code {
+	color: #1e1e1e;
+	background-color: transparent;
+}

package/dist/components/ValiantRichText/headless/editor.svelte

@@ -98,7 +98,7 @@
 	// Reactively update theme classes when theme or themeMode changes
 	$effect(() => {
 		if (element) {
-			// Remove all old theme classes
+			// Remove all theme classes
 			element.classList.remove(
 				'theme-default-light',
 				'theme-default-dark',
@@ -109,12 +109,13 @@
 				'theme-inherit'
 			);
 
-			// Add new theme class if theme is not 'inherit'. if it's 'inherit', we rely on the parent element's theme and don't add any class
-			if (theme !== 'inherit') {
-				element.classList.add(`theme-${theme}-${themeMode}`);
-				element.setAttribute('data-theme', theme);
-				element.setAttribute('data-mode', themeMode);
-			}
+			// Add appropriate theme class
+			// For specific themes, add the full theme class
+			// For inherit, add theme-inherit class which provides fallback values
+			// but parent's CSS variables will cascade through and override them
+			element.classList.add(`theme-${theme}${theme === 'inherit' ? '' : `-${themeMode}`}`);
+			element.setAttribute('data-theme', theme);
+			element.setAttribute('data-mode', themeMode);
 		}
 	});
 
@@ -160,5 +161,5 @@
 			focusEditor(editor, event);
 		}
 	}}
-	class={`edra-editor ${className}`}
+	class={`edra-editor valiant-editor ${className}`}
 ></div>

package/dist/components/ValiantRichText/themes/default-light.css

@@ -23,7 +23,7 @@
 	--border-color: #e2e8f0;
 	--border-color-hover: #cbd5e1;
 	--code-bg: #f1f5f9;
-	--codeblock-bg: #1e293b;
+	--codeblock-bg: #f8fafc;
 	--table-border: #e2e8f0;
 	--table-bg-selected: #f0f9ff;
 	--table-bg-hover: #f8fafc;
@@ -56,7 +56,7 @@
 	--border-color: #e2e8f0;
 	--border-color-hover: #cbd5e1;
 	--code-bg: #f1f5f9;
-	--codeblock-bg: #1e293b;
+	--codeblock-bg: #f8fafc;
 	--table-border: #e2e8f0;
 	--table-bg-selected: #f0f9ff;
 	--table-bg-hover: #f8fafc;

package/dist/components/ValiantRichText/themes/inherit.css

@@ -1,67 +1,13 @@
-/* Inherit Theme - Inherits from host website */
-:root.theme-inherit {
-	/* These will be inherited from the host website or use fallback system colors */
-	--color-background: var(--host-bg, #ffffff);
-	--color-foreground: var(--host-fg, #000000);
-	--color-muted: var(--host-muted, #f5f5f5);
-	--color-muted-foreground: var(--host-muted-fg, #666666);
-	--color-primary: var(--host-primary, #3b82f6);
-	--color-primary-light: var(--host-primary-light, #60a5fa);
-	--color-primary-dark: var(--host-primary-dark, #1d4ed8);
-	--color-secondary: var(--host-secondary, #f5f5f5);
-	--color-secondary-foreground: var(--host-secondary-fg, #000000);
-	--color-accent: var(--host-accent, #3b82f6);
-	--color-accent-light: var(--host-accent-light, #60a5fa);
-	--color-accent-dark: var(--host-accent-dark, #1d4ed8);
-	--color-destructive: var(--host-destructive, #ef4444);
-	--color-input: var(--host-input, #f0f0f0);
-	--color-border: var(--host-border, #e0e0e0);
-
-	/* Semantic colors */
-	--blockquote-color: var(--host-blockquote, #666666);
-	--blockquote-border: var(--host-blockquote-border, #3b82f6);
-	--border-color: var(--host-border, #e0e0e0);
-	--border-color-hover: var(--host-border-hover, #ccc);
-	--code-bg: var(--host-code-bg, #f5f5f5);
-	--codeblock-bg: var(--host-codeblock-bg, #1e1e1e);
-	--table-border: var(--host-table-border, #e0e0e0);
-	--table-bg-selected: var(--host-table-selected, #e3f2fd);
-	--table-bg-hover: var(--host-table-hover, #f5f5f5);
-	--highlight-color: var(--host-highlight, #fffacd);
-	--highlight-border: var(--host-highlight-border, #ffd700);
-	--search-result-bg: var(--host-search-result, #ffeb3b);
-	--search-result-current-bg: var(--host-search-result-current, #ffd700);
-	--task-completed-color: var(--host-task-complete, #999999);
-}
+/* Inherit Theme - Inherits CSS variables from parent container */
+/* This theme class provides NO hardcoded values, allowing parent CSS variables to cascade through */
+/* Parent must define these CSS variables for proper styling:
+   - --color-background, --color-foreground
+   - --color-primary, --color-secondary
+   - --color-border, --codeblock-bg
+   - And other theme variables as needed
+*/
 
 .valiant-editor.theme-inherit {
-	--color-background: var(--host-bg, #ffffff);
-	--color-foreground: var(--host-fg, #000000);
-	--color-muted: var(--host-muted, #f5f5f5);
-	--color-muted-foreground: var(--host-muted-fg, #666666);
-	--color-primary: var(--host-primary, #3b82f6);
-	--color-primary-light: var(--host-primary-light, #60a5fa);
-	--color-primary-dark: var(--host-primary-dark, #1d4ed8);
-	--color-secondary: var(--host-secondary, #f5f5f5);
-	--color-secondary-foreground: var(--host-secondary-fg, #000000);
-	--color-accent: var(--host-accent, #3b82f6);
-	--color-accent-light: var(--host-accent-light, #60a5fa);
-	--color-accent-dark: var(--host-accent-dark, #1d4ed8);
-	--color-destructive: var(--host-destructive, #ef4444);
-	--color-input: var(--host-input, #f0f0f0);
-	--color-border: var(--host-border, #e0e0e0);
-	--blockquote-color: var(--host-blockquote, #666666);
-	--blockquote-border: var(--host-blockquote-border, #3b82f6);
-	--border-color: var(--host-border, #e0e0e0);
-	--border-color-hover: var(--host-border-hover, #ccc);
-	--code-bg: var(--host-code-bg, #f5f5f5);
-	--codeblock-bg: var(--host-codeblock-bg, #1e1e1e);
-	--table-border: var(--host-table-border, #e0e0e0);
-	--table-bg-selected: var(--host-table-selected, #e3f2fd);
-	--table-bg-hover: var(--host-table-hover, #f5f5f5);
-	--highlight-color: var(--host-highlight, #fffacd);
-	--highlight-border: var(--host-highlight-border, #ffd700);
-	--search-result-bg: var(--host-search-result, #ffeb3b);
-	--search-result-current-bg: var(--host-search-result-current, #ffd700);
-	--task-completed-color: var(--host-task-complete, #999999);
+	/* Empty - relies entirely on parent CSS variables cascading down */
+	/* Fallback values are provided by :root variables in editor.css */
 }

package/dist/components/ValiantRichText/themes/modern-light.css

@@ -23,7 +23,7 @@
 	--border-color: #e5e5e5;
 	--border-color-hover: #d0d0d0;
 	--code-bg: #f5f5f5;
-	--codeblock-bg: #1a1a1a;
+	--codeblock-bg: #f5f5f5;
 	--table-border: #e5e5e5;
 	--table-bg-selected: #fce7f3;
 	--table-bg-hover: #fef2f8;
@@ -55,7 +55,7 @@
 	--border-color: #e5e5e5;
 	--border-color-hover: #d0d0d0;
 	--code-bg: #f5f5f5;
-	--codeblock-bg: #1a1a1a;
+	--codeblock-bg: #f5f5f5;
 	--table-border: #e5e5e5;
 	--table-bg-selected: #fce7f3;
 	--table-bg-hover: #fef2f8;

package/dist/components/ValiantRichText/themes/professional-light.css

@@ -23,7 +23,7 @@
 	--border-color: #e5e7eb;
 	--border-color-hover: #d1d5db;
 	--code-bg: #f3f4f6;
-	--codeblock-bg: #1f2937;
+	--codeblock-bg: #f3f4f6;
 	--table-border: #e5e7eb;
 	--table-bg-selected: #dbeafe;
 	--table-bg-hover: #f0f9ff;
@@ -55,7 +55,7 @@
 	--border-color: #e5e7eb;
 	--border-color-hover: #d1d5db;
 	--code-bg: #f3f4f6;
-	--codeblock-bg: #1f2937;
+	--codeblock-bg: #f3f4f6;
 	--table-border: #e5e7eb;
 	--table-bg-selected: #dbeafe;
 	--table-bg-hover: #f0f9ff;

package/dist/components/ValiantRichText/types.d.ts

@@ -2,7 +2,6 @@ import type { Content, Editor } from '@tiptap/core';
 import type { EditorState } from '@tiptap/pm/state';
 import type { EditorView } from '@tiptap/pm/view';
 import type { Snippet } from 'svelte';
-import type { Theme, ThemeMode } from '../../stores/theme.js';
 export interface EdraEditorProps {
     content?: Content;
     editable?: boolean;
@@ -10,8 +9,8 @@ export interface EdraEditorProps {
     autofocus?: boolean;
     onUpdate?: () => void;
     class?: string;
-    theme?: Theme;
-    themeMode?: ThemeMode;
+    theme?: 'default' | 'modern' | 'professional' | 'inherit';
+    themeMode?: 'light' | 'dark';
 }
 export interface EdraToolbarProps {
     editor: Editor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mythrantic/svelte-rich-text",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/",