@nuasite/cms 0.7.1 → 0.7.3

package/package.json

@@ -14,7 +14,7 @@
     "directory": "packages/astro-cms"
   },
   "license": "Apache-2.0",
-  "version": "0.7.1",
+  "version": "0.7.3",
   "module": "src/index.ts",
   "types": "src/index.ts",
   "type": "module",

package/src/color-patterns.ts

@@ -0,0 +1,312 @@
+import type { Attribute } from './types'
+
+/**
+ * Default Tailwind CSS v4 color names.
+ */
+export const DEFAULT_TAILWIND_COLORS = [
+	'slate',
+	'gray',
+	'zinc',
+	'neutral',
+	'stone',
+	'red',
+	'orange',
+	'amber',
+	'yellow',
+	'lime',
+	'green',
+	'emerald',
+	'teal',
+	'cyan',
+	'sky',
+	'blue',
+	'indigo',
+	'violet',
+	'purple',
+	'fuchsia',
+	'pink',
+	'rose',
+] as const
+
+/**
+ * Standard Tailwind color shades.
+ */
+export const STANDARD_SHADES = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'] as const
+
+/**
+ * Special color values that don't have shades.
+ */
+export const SPECIAL_COLORS = ['transparent', 'current', 'inherit', 'white', 'black'] as const
+
+/**
+ * Non-color utility suffixes that should not be matched as custom colors.
+ * These follow the pattern `prefix-word-number` but are not colors.
+ */
+const NON_COLOR_SUFFIXES = ['opacity'] as const
+
+/**
+ * Build a regex pattern for matching color classes.
+ * Matches:
+ * - Default colors with optional shades: bg-blue-500, bg-white
+ * - Custom theme colors with shades: bg-primary-500
+ * - Arbitrary hex values: bg-[#41b883], bg-[#fff]
+ * - Arbitrary rgb/hsl values: bg-[rgb(255,0,0)], bg-[hsl(0,100%,50%)]
+ * Excludes non-color utilities like opacity.
+ */
+function buildColorPattern(prefix: string): RegExp {
+	const colorNames = [...DEFAULT_TAILWIND_COLORS, ...SPECIAL_COLORS].join('|')
+	const excluded = NON_COLOR_SUFFIXES.join('|')
+	// Arbitrary value patterns for colors
+	const arbitraryHex = '\\[#[0-9a-fA-F]{3,8}\\]'
+	const arbitraryFunc = '\\[(?:rgba?|hsla?)\\([^\\]]+\\)\\]'
+	// Match: prefix-(colorName[-shade]?) OR prefix-(customColor-shade) OR prefix-[arbitrary] but NOT prefix-(excluded-number)
+	return new RegExp(`^${prefix}-((?:${colorNames})(?:-(\\d+))?|(?!(?:${excluded})-)(\\w+)-(\\d+)|${arbitraryHex}|${arbitraryFunc})$`)
+}
+
+/**
+ * Build a regex pattern for matching opacity classes.
+ */
+function buildOpacityPattern(prefix: string): RegExp {
+	return new RegExp(`^${prefix}-opacity-(\\d+)$`)
+}
+
+/**
+ * Regex patterns to match Tailwind color classes.
+ */
+export const COLOR_CLASS_PATTERNS = {
+	bg: buildColorPattern('bg'),
+	text: buildColorPattern('text'),
+	border: buildColorPattern('border'),
+	hoverBg: buildColorPattern('hover:bg'),
+	hoverText: buildColorPattern('hover:text'),
+	hoverBorder: buildColorPattern('hover:border'),
+}
+
+/**
+ * Regex patterns to match Tailwind opacity classes.
+ */
+export const OPACITY_CLASS_PATTERNS = {
+	bgOpacity: buildOpacityPattern('bg'),
+	textOpacity: buildOpacityPattern('text'),
+	borderOpacity: buildOpacityPattern('border'),
+}
+
+/**
+ * Regex patterns to match Tailwind gradient color classes.
+ */
+export const GRADIENT_CLASS_PATTERNS = {
+	from: buildColorPattern('from'),
+	via: buildColorPattern('via'),
+	to: buildColorPattern('to'),
+	hoverFrom: buildColorPattern('hover:from'),
+	hoverVia: buildColorPattern('hover:via'),
+	hoverTo: buildColorPattern('hover:to'),
+}
+
+/** Flat key names for color class categories */
+const COLOR_FLAT_KEYS: Record<string, string> = {
+	bg: 'bg',
+	text: 'text',
+	border: 'border',
+	hoverBg: 'hoverBg',
+	hoverText: 'hoverText',
+	hoverBorder: 'hoverBorder',
+}
+
+const GRADIENT_FLAT_KEYS: Record<string, string> = {
+	from: 'gradientFrom',
+	via: 'gradientVia',
+	to: 'gradientTo',
+	hoverFrom: 'hoverGradientFrom',
+	hoverVia: 'hoverGradientVia',
+	hoverTo: 'hoverGradientTo',
+}
+
+/**
+ * Extract color classes from an element's class attribute.
+ * Returns a flat Record<string, Attribute> with keys like bg, text, gradientFrom, bgOpacity, etc.
+ */
+export function extractColorClasses(classAttr: string | null | undefined): Record<string, Attribute> | undefined {
+	if (!classAttr) return undefined
+
+	const classes = classAttr.split(/\s+/).filter(Boolean)
+	const result: Record<string, Attribute> = {}
+
+	for (const cls of classes) {
+		let matched = false
+
+		// Check color patterns
+		for (const [key, pattern] of Object.entries(COLOR_CLASS_PATTERNS)) {
+			if (pattern.test(cls)) {
+				const flatKey = COLOR_FLAT_KEYS[key]
+				if (flatKey && !(flatKey in result)) {
+					result[flatKey] = { value: cls }
+				}
+				matched = true
+				break
+			}
+		}
+
+		// Check gradient patterns
+		if (!matched) {
+			for (const [key, pattern] of Object.entries(GRADIENT_CLASS_PATTERNS)) {
+				if (pattern.test(cls)) {
+					const flatKey = GRADIENT_FLAT_KEYS[key]
+					if (flatKey && !(flatKey in result)) {
+						result[flatKey] = { value: cls }
+					}
+					matched = true
+					break
+				}
+			}
+		}
+
+		// Check opacity patterns
+		if (!matched) {
+			for (const [key, pattern] of Object.entries(OPACITY_CLASS_PATTERNS)) {
+				if (pattern.test(cls)) {
+					if (!(key in result)) {
+						result[key] = { value: cls }
+					}
+					break
+				}
+			}
+		}
+	}
+
+	return Object.keys(result).length > 0 ? result : undefined
+}
+
+/**
+ * Regex patterns for matching text style classes on elements.
+ */
+export const TEXT_STYLE_CLASS_PATTERNS: Record<string, RegExp> = {
+	fontWeight: /^font-(thin|extralight|light|normal|medium|semibold|bold|extrabold|black)$/,
+	fontStyle: /^(italic|not-italic)$/,
+	textDecoration: /^(underline|overline|line-through|no-underline)$/,
+	fontSize: /^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/,
+}
+
+/**
+ * Extract text style classes from an element's class attribute.
+ * Returns a Record<string, Attribute> with keys: fontWeight, fontStyle, textDecoration, fontSize.
+ */
+export function extractTextStyleClasses(classAttr: string | null | undefined): Record<string, Attribute> | undefined {
+	if (!classAttr) return undefined
+
+	const classes = classAttr.split(/\s+/).filter(Boolean)
+	const result: Record<string, Attribute> = {}
+
+	for (const cls of classes) {
+		for (const [key, pattern] of Object.entries(TEXT_STYLE_CLASS_PATTERNS)) {
+			if (pattern.test(cls) && !(key in result)) {
+				result[key] = { value: cls }
+				break
+			}
+		}
+	}
+
+	return Object.keys(result).length > 0 ? result : undefined
+}
+
+/**
+ * Check if a class is a color class (including gradient colors).
+ */
+export function isColorClass(className: string): boolean {
+	return Object.values(COLOR_CLASS_PATTERNS).some(pattern => pattern.test(className))
+		|| Object.values(GRADIENT_CLASS_PATTERNS).some(pattern => pattern.test(className))
+}
+
+/**
+ * Generate a new class string with a color class replaced.
+ */
+export function replaceColorClass(
+	currentClasses: string,
+	oldColorClass: string,
+	newColorClass: string,
+): string {
+	const classes = currentClasses.split(/\s+/).filter(Boolean)
+	const newClasses = classes.map(cls => cls === oldColorClass ? newColorClass : cls)
+	return newClasses.join(' ')
+}
+
+/**
+ * Get the color type from a color class.
+ * Returns the flat key name (e.g., 'bg', 'gradientFrom', 'bgOpacity').
+ */
+export function getColorType(colorClass: string): string | undefined {
+	for (const [key, pattern] of Object.entries(COLOR_CLASS_PATTERNS)) {
+		if (pattern.test(colorClass)) {
+			return COLOR_FLAT_KEYS[key]
+		}
+	}
+	for (const [key, pattern] of Object.entries(GRADIENT_CLASS_PATTERNS)) {
+		if (pattern.test(colorClass)) {
+			return GRADIENT_FLAT_KEYS[key]
+		}
+	}
+	for (const [key, pattern] of Object.entries(OPACITY_CLASS_PATTERNS)) {
+		if (pattern.test(colorClass)) {
+			return key
+		}
+	}
+	return undefined
+}
+
+/**
+ * Parse a color class into its components.
+ */
+export function parseColorClass(colorClass: string): {
+	prefix: string
+	colorName: string
+	shade?: string
+	isHover: boolean
+	isArbitrary?: boolean
+} | undefined {
+	// Verify this is actually a color class using the comprehensive patterns
+	const isColor = Object.values(COLOR_CLASS_PATTERNS).some(p => p.test(colorClass))
+		|| Object.values(GRADIENT_CLASS_PATTERNS).some(p => p.test(colorClass))
+	if (!isColor) return undefined
+
+	const isHover = colorClass.startsWith('hover:')
+	const classWithoutHover = isHover ? colorClass.slice(6) : colorClass
+
+	// Try matching standard color classes (default colors, custom theme colors, and gradients)
+	const standardMatch = classWithoutHover.match(/^(bg|text|border|from|via|to)-([a-z]+)(?:-(\d+))?$/)
+	if (standardMatch) {
+		return {
+			prefix: isHover ? `hover:${standardMatch[1]}` : standardMatch[1]!,
+			colorName: standardMatch[2]!,
+			shade: standardMatch[3],
+			isHover,
+		}
+	}
+
+	// Try matching arbitrary value classes like bg-[#41b883] or from-[#41b883]
+	const arbitraryMatch = classWithoutHover.match(/^(bg|text|border|from|via|to)-(\[.+\])$/)
+	if (arbitraryMatch) {
+		return {
+			prefix: isHover ? `hover:${arbitraryMatch[1]}` : arbitraryMatch[1]!,
+			colorName: arbitraryMatch[2]!,
+			shade: undefined,
+			isHover,
+			isArbitrary: true,
+		}
+	}
+
+	return undefined
+}
+
+/**
+ * Build a color class from components.
+ */
+export function buildColorClass(
+	prefix: string,
+	colorName: string,
+	shade?: string,
+): string {
+	if (shade) {
+		return `${prefix}-${colorName}-${shade}`
+	}
+	return `${prefix}-${colorName}`
+}

package/src/editor/color-utils.ts

@@ -1,42 +1,27 @@
-import type { Attribute, AvailableColors, TailwindColor } from './types'
-
-/**
- * Default Tailwind CSS v4 color names.
- */
-export const DEFAULT_TAILWIND_COLORS = [
-	'slate',
-	'gray',
-	'zinc',
-	'neutral',
-	'stone',
-	'red',
-	'orange',
-	'amber',
-	'yellow',
-	'lime',
-	'green',
-	'emerald',
-	'teal',
-	'cyan',
-	'sky',
-	'blue',
-	'indigo',
-	'violet',
-	'purple',
-	'fuchsia',
-	'pink',
-	'rose',
-] as const
-
-/**
- * Standard Tailwind color shades.
- */
-export const STANDARD_SHADES = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'] as const
-
-/**
- * Special color values that don't have shades.
- */
-export const SPECIAL_COLORS = ['transparent', 'current', 'inherit', 'white', 'black'] as const
+import {
+	buildColorClass,
+	COLOR_CLASS_PATTERNS,
+	DEFAULT_TAILWIND_COLORS,
+	extractColorClasses,
+	isColorClass,
+	parseColorClass,
+	SPECIAL_COLORS,
+	STANDARD_SHADES,
+} from '../color-patterns'
+import type { Attribute, AvailableColors } from './types'
+
+// Re-export shared detection logic for consumers
+export {
+	buildColorClass,
+	COLOR_CLASS_PATTERNS,
+	DEFAULT_TAILWIND_COLORS,
+	extractColorClasses,
+	getColorType,
+	isColorClass,
+	parseColorClass,
+	SPECIAL_COLORS,
+	STANDARD_SHADES,
+} from '../color-patterns'
 
 /**
  * Map of Tailwind color names to their CSS color values for preview.
@@ -97,140 +82,12 @@ export const SHADE_LIGHTNESS: Record<string, number> = {
 	'950': 0.05,
 }
 
-/**
- * Non-color text-* utility classes that should NOT be treated as color classes.
- * These are Tailwind utilities like text alignment, sizing, wrapping, etc.
- */
-const NON_COLOR_TEXT_CLASSES = new Set([
-	// Text alignment
-	'text-left',
-	'text-center',
-	'text-right',
-	'text-justify',
-	'text-start',
-	'text-end',
-	// Text wrapping
-	'text-wrap',
-	'text-nowrap',
-	'text-balance',
-	'text-pretty',
-	// Text overflow
-	'text-ellipsis',
-	'text-clip',
-	// Text transform (these don't start with text- but just in case)
-])
-
-/**
- * Regex patterns to match Tailwind color classes.
- */
-const COLOR_CLASS_PATTERNS = {
-	bg: /^bg-([a-z]+)(?:-(\d+))?$/,
-	text: /^text-([a-z]+)(?:-(\d+))?$/,
-	border: /^border-([a-z]+)(?:-(\d+))?$/,
-	hoverBg: /^hover:bg-([a-z]+)(?:-(\d+))?$/,
-	hoverText: /^hover:text-([a-z]+)(?:-(\d+))?$/,
-}
-
-/**
- * Check if a class is a text color class (not a non-color text utility).
- */
-function isTextColorClass(className: string): boolean {
-	if (NON_COLOR_TEXT_CLASSES.has(className)) {
-		return false
-	}
-	return COLOR_CLASS_PATTERNS.text.test(className)
-}
-
-/**
- * Parse a color class into its components.
- */
-export function parseColorClass(colorClass: string): {
-	prefix: string
-	colorName: string
-	shade?: string
-	isHover: boolean
-} | undefined {
-	// Exclude non-color text utility classes
-	if (NON_COLOR_TEXT_CLASSES.has(colorClass)) {
-		return undefined
-	}
-
-	const isHover = colorClass.startsWith('hover:')
-	const classWithoutHover = isHover ? colorClass.slice(6) : colorClass
-
-	// Also check hover variants of non-color text classes
-	if (isHover && NON_COLOR_TEXT_CLASSES.has(`text-${classWithoutHover.slice(5)}`)) {
-		return undefined
-	}
-
-	const match = classWithoutHover.match(/^(bg|text|border)-([a-z]+)(?:-(\d+))?$/)
-
-	if (!match) return undefined
-
-	return {
-		prefix: isHover ? `hover:${match[1]}` : match[1]!,
-		colorName: match[2]!,
-		shade: match[3],
-		isHover,
-	}
-}
-
-/**
- * Build a color class from components.
- */
-export function buildColorClass(
-	prefix: string,
-	colorName: string,
-	shade?: string,
-): string {
-	if (shade) {
-		return `${prefix}-${colorName}-${shade}`
-	}
-	return `${prefix}-${colorName}`
-}
-
-/**
- * Get the color type from a color class.
- */
-export function getColorType(colorClass: string): keyof typeof COLOR_CLASS_PATTERNS | undefined {
-	for (const [key, pattern] of Object.entries(COLOR_CLASS_PATTERNS)) {
-		// For text type, use the helper to exclude non-color text utilities
-		if (key === 'text' || key === 'hoverText') {
-			if (key === 'text' && isTextColorClass(colorClass)) {
-				return key as keyof typeof COLOR_CLASS_PATTERNS
-			}
-			if (key === 'hoverText' && colorClass.startsWith('hover:') && isTextColorClass(colorClass.slice(6))) {
-				return key as keyof typeof COLOR_CLASS_PATTERNS
-			}
-		} else if (pattern.test(colorClass)) {
-			return key as keyof typeof COLOR_CLASS_PATTERNS
-		}
-	}
-	return undefined
-}
-
-/**
- * Check if a class is a color class.
- */
-export function isColorClass(className: string): boolean {
-	// Check text color separately to exclude non-color text utilities
-	if (COLOR_CLASS_PATTERNS.text.test(className)) {
-		return isTextColorClass(className)
-	}
-	if (COLOR_CLASS_PATTERNS.hoverText.test(className)) {
-		return isTextColorClass(className.slice(6)) // Remove 'hover:' prefix
-	}
-	return Object.entries(COLOR_CLASS_PATTERNS)
-		.filter(([key]) => key !== 'text' && key !== 'hoverText')
-		.some(([, pattern]) => pattern.test(className))
-}
-
 /**
  * Get a preview CSS color for a Tailwind color.
  */
 export function getColorPreview(colorName: string, shade?: string): string {
 	// Special colors without shades
-	if (SPECIAL_COLORS.includes(colorName as any)) {
+	if ((SPECIAL_COLORS as readonly string[]).includes(colorName)) {
 		return COLOR_PREVIEW_MAP[colorName] || colorName
 	}
 
@@ -293,27 +150,19 @@ export function replaceColorClass(
 	const classes = element.className.split(/\s+/).filter(Boolean)
 	const pattern = COLOR_CLASS_PATTERNS[colorType]
 
+	const prefix = colorType === 'hoverBg'
+		? 'hover:bg'
+		: colorType === 'hoverText'
+			? 'hover:text'
+			: colorType
+	const newClass = buildColorClass(prefix, newColorName, newShade)
+
 	let oldClass: string | undefined
 	const newClasses: string[] = []
 
 	for (const cls of classes) {
-		// For text types, use the helper to exclude non-color text utilities
-		let isColorMatch: boolean
-		if (colorType === 'text') {
-			isColorMatch = isTextColorClass(cls)
-		} else if (colorType === 'hoverText') {
-			isColorMatch = cls.startsWith('hover:') && isTextColorClass(cls.slice(6))
-		} else {
-			isColorMatch = pattern.test(cls)
-		}
-		if (isColorMatch) {
+		if (pattern.test(cls)) {
 			oldClass = cls
-			// Build the new class with the same prefix
-			const isHover = colorType.startsWith('hover')
-			const prefix = isHover
-				? colorType.replace('hover', 'hover:').toLowerCase().replace('hover:bg', 'hover:bg').replace('hover:text', 'hover:text')
-				: colorType
-			const newClass = buildColorClass(prefix, newColorName, newShade)
 			newClasses.push(newClass)
 		} else {
 			newClasses.push(cls)
@@ -324,12 +173,6 @@ export function replaceColorClass(
 		return undefined
 	}
 
-	const newClass = buildColorClass(
-		colorType.startsWith('hover') ? `hover:${colorType.slice(5).toLowerCase()}` : colorType,
-		newColorName,
-		newShade,
-	)
-
 	element.className = newClasses.join(' ')
 
 	return { oldClass, newClass }
@@ -339,30 +182,7 @@ export function replaceColorClass(
  * Get the current color classes from an element as Record<string, Attribute>.
  */
 export function getElementColorClasses(element: HTMLElement): Record<string, Attribute> {
-	const classes = element.className.split(/\s+/).filter(Boolean)
-	const colorClasses: Record<string, Attribute> = {}
-
-	for (const cls of classes) {
-		for (const [key, pattern] of Object.entries(COLOR_CLASS_PATTERNS)) {
-			// For text types, use the helper to exclude non-color text utilities
-			let isColorMatch: boolean
-			if (key === 'text') {
-				isColorMatch = isTextColorClass(cls)
-			} else if (key === 'hoverText') {
-				isColorMatch = cls.startsWith('hover:') && isTextColorClass(cls.slice(6))
-			} else {
-				isColorMatch = pattern.test(cls)
-			}
-			if (isColorMatch) {
-				if (!(key in colorClasses)) {
-					colorClasses[key] = { value: cls }
-				}
-				break
-			}
-		}
-	}
-
-	return colorClasses
+	return extractColorClasses(element.className) ?? {}
 }
 
 /**
@@ -401,30 +221,20 @@ export function applyColorChange(
 	const classes = element.className.split(/\s+/).filter(Boolean)
 	const pattern = COLOR_CLASS_PATTERNS[colorType]
 
-	let oldClass: string | undefined
-	const newClasses: string[] = []
-
 	// Determine the new class prefix
 	const prefix = colorType === 'hoverBg'
 		? 'hover:bg'
 		: colorType === 'hoverText'
-		? 'hover:text'
-		: colorType
+			? 'hover:text'
+			: colorType
 	const newClass = buildColorClass(prefix, newColorName, newShade)
 
+	let oldClass: string | undefined
+	const newClasses: string[] = []
+
 	for (const cls of classes) {
-		// For text types, use the helper to exclude non-color text utilities
-		let isColorMatch: boolean
-		if (colorType === 'text') {
-			isColorMatch = isTextColorClass(cls)
-		} else if (colorType === 'hoverText') {
-			isColorMatch = cls.startsWith('hover:') && isTextColorClass(cls.slice(6))
-		} else {
-			isColorMatch = pattern.test(cls)
-		}
-		if (isColorMatch) {
+		if (pattern.test(cls)) {
 			oldClass = cls
-			// Replace with new class
 			newClasses.push(newClass)
 		} else {
 			newClasses.push(cls)
@@ -456,10 +266,10 @@ export function applyColorChange(
 			const styleProperty = colorType === 'bg'
 				? 'backgroundColor'
 				: colorType === 'text'
-				? 'color'
-				: colorType === 'border'
-				? 'borderColor'
-				: 'color'
+					? 'color'
+					: colorType === 'border'
+						? 'borderColor'
+						: 'color'
 			element.style[styleProperty] = cssValue
 		}
 	}
@@ -540,7 +350,7 @@ export function getAllColorsWithShades(availableColors: AvailableColors | undefi
 
 	return availableColors.colors.map(color => {
 		const shades = Object.keys(color.values)
-		const isSpecial = SPECIAL_COLORS.includes(color.name as any)
+		const isSpecial = (SPECIAL_COLORS as readonly string[]).includes(color.name)
 
 		return {
 			name: color.name,

package/src/editor/dom.ts

@@ -231,6 +231,15 @@ export function getEditableHtmlFromElement(el: HTMLElement): string {
 		child.removeAttribute('contenteditable')
 	})
 
+	// Clean up styled spans — strip editor-only attributes and inline preview styles
+	// (Tailwind classes are the source of truth for styling)
+	clone.querySelectorAll('[data-cms-styled]').forEach(span => {
+		span.removeAttribute('style')
+		span.removeAttribute('data-cms-styled')
+		span.removeAttribute('data-cms-hover-bg')
+		span.removeAttribute('data-cms-hover-text')
+	})
+
 	return clone.innerHTML
 }