@nuasite/cms 0.7.0 → 0.7.2

package/src/editor/components/block-editor.tsx

@@ -79,33 +79,46 @@ export function BlockEditor({
 
 		const updatePosition = () => {
 			const editorWidth = LAYOUT.BLOCK_EDITOR_WIDTH
+			const editorHeight = LAYOUT.BLOCK_EDITOR_HEIGHT
 			const padding = LAYOUT.VIEWPORT_PADDING
 			const viewportWidth = window.innerWidth
 			const viewportHeight = window.innerHeight
 
 			let top: number
 			let left: number
+			let maxHeight: number
 
 			if (cursor) {
-				top = cursor.y
 				left = cursor.x
 
-				// Keep within viewport bounds
+				// Keep within viewport bounds horizontally
 				if (left + editorWidth > viewportWidth - padding) {
 					left = viewportWidth - editorWidth - padding
 				}
 				if (left < padding) {
 					left = padding
 				}
+
+				const spaceBelow = viewportHeight - cursor.y - padding
+				const spaceAbove = cursor.y - padding
+
+				if (spaceBelow >= editorHeight || spaceBelow >= spaceAbove) {
+					// Open below cursor
+					top = Math.max(padding, Math.min(cursor.y, viewportHeight - padding - 100))
+					maxHeight = viewportHeight - top - padding
+				} else {
+					// Open above cursor — anchor bottom of panel to cursor position
+					const panelHeight = Math.min(spaceAbove, editorHeight)
+					top = cursor.y - panelHeight
+					top = Math.max(padding, top)
+					maxHeight = cursor.y - top
+				}
 			} else {
 				top = viewportHeight / 2
 				left = (viewportWidth - editorWidth) / 2
+				maxHeight = viewportHeight - top - padding
 			}
 
-			// Clamp top so the panel never extends past the viewport bottom
-			top = Math.max(padding, Math.min(top, viewportHeight - padding - 100))
-			const maxHeight = viewportHeight - top - padding
-
 			setEditorPosition({ top, left, maxHeight })
 		}
 

package/src/editor/components/outline.tsx

@@ -121,7 +121,7 @@ export function Outline(
         .element-toolbar::before {
           content: '';
           position: absolute;
-          top: -25px;
+          top: -13px;
           left: -50px;
           right: -50px;
           bottom: 0;

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
 }
 

package/src/tailwind-colors.ts

@@ -1,45 +1,26 @@
 import fs from 'node:fs/promises'
 import path from 'node:path'
+import { DEFAULT_TAILWIND_COLORS, SPECIAL_COLORS } from './color-patterns'
 import { getProjectRoot } from './config'
-import type { Attribute, AvailableColors, AvailableTextStyles, TailwindColor, TextStyleValue } 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 type { AvailableColors, AvailableTextStyles, TailwindColor, TextStyleValue } from './types'
+
+// Re-export all shared detection logic from color-patterns
+export {
+	buildColorClass,
+	COLOR_CLASS_PATTERNS,
+	DEFAULT_TAILWIND_COLORS,
+	extractColorClasses,
+	extractTextStyleClasses,
+	getColorType,
+	GRADIENT_CLASS_PATTERNS,
+	isColorClass,
+	OPACITY_CLASS_PATTERNS,
+	parseColorClass,
+	replaceColorClass,
+	SPECIAL_COLORS,
+	STANDARD_SHADES,
+	TEXT_STYLE_CLASS_PATTERNS,
+} from './color-patterns'
 
 /**
  * Complete Tailwind v4 default color palette with all shade values.
@@ -396,71 +377,6 @@ const DEFAULT_FONT_STYLES: TextStyleValue[] = [
 	{ class: 'italic', label: 'Italic', css: { fontStyle: 'italic' } },
 ]
 
-/**
- * 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.
- */
-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.
- */
-const OPACITY_CLASS_PATTERNS = {
-	bgOpacity: buildOpacityPattern('bg'),
-	textOpacity: buildOpacityPattern('text'),
-	borderOpacity: buildOpacityPattern('border'),
-}
-
-/**
- * Regex patterns to match Tailwind gradient color classes.
- */
-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'),
-}
-
 /**
  * Parse Tailwind v4 CSS config to extract available colors with their values.
  */
@@ -541,7 +457,7 @@ function extractColorsFromCss(content: string): TailwindColor[] {
 			if (!colorName || !value) continue
 
 			// Skip if it's a default color (we already have values for those)
-			if (DEFAULT_TAILWIND_COLORS.includes(colorName as any)) {
+			if ((DEFAULT_TAILWIND_COLORS as readonly string[]).includes(colorName)) {
 				continue
 			}
 
@@ -700,208 +616,3 @@ function extractTextStylesFromCss(content: string): Partial<AvailableTextStyles>
 		fontSize: fontSizes.length > 0 ? fontSizes : undefined,
 	}
 }
-
-/** Flat key names for color class categories */
-const COLOR_FLAT_KEYS: Record<string, string> = {
-	// COLOR_CLASS_PATTERNS keys map directly
-	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.
- */
-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.
- * Pattern: same as extractColorClasses — scan classes, match patterns, return first match per category.
- */
-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 {
-	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}`
-}