From 82c39de7ea33a143c4048a1027862fec72adf7bc Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 26 Jun 2025 12:07:24 -0400
Subject: [PATCH] feat: implement enhanced bubble menu with text styles and
 color pickers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add ComposerBubbleMenu with formatting tools and dropdowns
- Create BubbleTextStyleMenu for paragraph/heading/list selection
- Add BubbleColorPicker with preset palettes and custom color selection
- Use lighter pastel colors for highlight presets
- Implement circle color swatches with even grid spacing
- Add strikethrough support and improved hover states
- Use absolute positioning to prevent scroll issues
- Integrate with existing editor configuration

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../admin/composer/BubbleColorPicker.svelte   | 357 ++++++++++++++
 .../admin/composer/BubbleTextStyleMenu.svelte | 138 ++++++
 .../admin/composer/ComposerBubbleMenu.svelte  | 437 ++++++++++++++++++
 3 files changed, 932 insertions(+)
 create mode 100644 src/lib/components/admin/composer/BubbleColorPicker.svelte
 create mode 100644 src/lib/components/admin/composer/BubbleTextStyleMenu.svelte
 create mode 100644 src/lib/components/admin/composer/ComposerBubbleMenu.svelte

diff --git a/src/lib/components/admin/composer/BubbleColorPicker.svelte b/src/lib/components/admin/composer/BubbleColorPicker.svelte
new file mode 100644
index 0000000..d62ca63
--- /dev/null
+++ b/src/lib/components/admin/composer/BubbleColorPicker.svelte
@@ -0,0 +1,357 @@
+<script lang="ts">
+	import type { Editor } from '@tiptap/core'
+	import ColorPicker, { ChromeVariant } from 'svelte-awesome-color-picker'
+
+	interface Props {
+		editor: Editor
+		isOpen: boolean
+		onClose: () => void
+		mode: 'text' | 'highlight'
+		currentColor?: string
+	}
+
+	const { editor, isOpen, onClose, mode, currentColor = '#000000' }: Props = $props()
+
+	let color = $state(currentColor)
+	let showPicker = $state(false)
+
+	// Preset colors - different sets for text and highlight
+	const textPresetColors = [
+		'#000000', // Black
+		'#4D4D4D', // Gray
+		'#999999', // Light Gray
+		'#F44336', // Red
+		'#E91E63', // Pink
+		'#9C27B0', // Purple
+		'#673AB7', // Deep Purple
+		'#3F51B5', // Indigo
+		'#2196F3', // Blue
+		'#03A9F4', // Light Blue
+		'#00BCD4', // Cyan
+		'#009688', // Teal
+		'#4CAF50', // Green
+		'#8BC34A', // Light Green
+		'#CDDC39', // Lime
+		'#FFEB3B', // Yellow
+		'#FFC107', // Amber
+		'#FF9800', // Orange
+		'#FF5722', // Deep Orange
+		'#795548'  // Brown
+	]
+
+	// Lighter, pastel colors for highlighting
+	const highlightPresetColors = [
+		'#FFF3E0', // Pale Orange
+		'#FFEBEE', // Pale Red
+		'#FCE4EC', // Pale Pink
+		'#F3E5F5', // Pale Purple
+		'#EDE7F6', // Pale Deep Purple
+		'#E8EAF6', // Pale Indigo
+		'#E3F2FD', // Pale Blue
+		'#E1F5FE', // Pale Light Blue
+		'#E0F7FA', // Pale Cyan
+		'#E0F2F1', // Pale Teal
+		'#E8F5E9', // Pale Green
+		'#F1F8E9', // Pale Light Green
+		'#F9FBE7', // Pale Lime
+		'#FFFDE7', // Pale Yellow
+		'#FFF8E1', // Pale Amber
+		'#FFECB3', // Light Amber
+		'#FFE0B2', // Light Orange
+		'#FFCCBC', // Light Deep Orange
+		'#D7CCC8', // Light Brown
+		'#F5F5F5'  // Light Gray
+	]
+
+	const presetColors = $derived(mode === 'text' ? textPresetColors : highlightPresetColors)
+
+	$effect(() => {
+		// Update local color when currentColor prop changes
+		color = currentColor || (mode === 'text' ? '#000000' : '#FFEB3B')
+	})
+
+	function applyColor(selectedColor: string) {
+		if (mode === 'text') {
+			editor.chain().focus().setColor(selectedColor).run()
+		} else {
+			editor.chain().focus().setHighlight({ color: selectedColor }).run()
+		}
+		color = selectedColor
+	}
+
+	function removeColor() {
+		if (mode === 'text') {
+			editor.chain().focus().unsetColor().run()
+		} else {
+			editor.chain().focus().unsetHighlight().run()
+		}
+		onClose()
+	}
+
+	function handlePresetClick(presetColor: string) {
+		applyColor(presetColor)
+		onClose()
+	}
+
+	function handleCustomColor() {
+		applyColor(color)
+		onClose()
+	}
+
+	function handleClickOutside(e: MouseEvent) {
+		if (isOpen) {
+			// Check if click is inside the color picker popup
+			const pickerElement = document.querySelector('.bubble-color-picker')
+			if (pickerElement && !pickerElement.contains(e.target as Node)) {
+				onClose()
+			}
+		}
+	}
+
+	$effect(() => {
+		if (isOpen) {
+			// Add a small delay to prevent immediate closing
+			setTimeout(() => {
+				document.addEventListener('click', handleClickOutside)
+			}, 10)
+			return () => document.removeEventListener('click', handleClickOutside)
+		}
+	})
+</script>
+
+{#if isOpen}
+	<div class="bubble-color-picker">
+		<div class="color-picker-header">
+			<span>{mode === 'text' ? 'Text Color' : 'Highlight Color'}</span>
+			<button class="remove-color-btn" onclick={removeColor}>
+				Remove
+			</button>
+		</div>
+
+		<div class="preset-colors">
+			{#each presetColors as presetColor}
+				<button
+					class="color-preset"
+					style="background-color: {presetColor}"
+					onclick={() => handlePresetClick(presetColor)}
+					title={presetColor}
+				></button>
+			{/each}
+		</div>
+
+		<div class="custom-color-section">
+			{#if !showPicker}
+				<button class="custom-color-btn" onclick={() => showPicker = true}>
+					Custom color...
+				</button>
+			{:else}
+				<div class="custom-picker">
+					<ColorPicker
+						bind:hex={color}
+						components={ChromeVariant}
+						sliderDirection="horizontal"
+						isAlpha={false}
+					/>
+					<button class="apply-custom-btn" onclick={handleCustomColor}>
+						Apply
+					</button>
+				</div>
+			{/if}
+		</div>
+	</div>
+{/if}
+
+<style lang="scss">
+	@import '$styles/variables';
+	@import '$styles/mixins';
+
+	.bubble-color-picker {
+		position: absolute;
+		top: 100%;
+		left: 50%;
+		transform: translateX(-50%);
+		margin-top: 4px;
+		z-index: 50;
+		background: rgba($white, 0.98);
+		backdrop-filter: blur(12px);
+		-webkit-backdrop-filter: blur(12px);
+		border: 1px solid rgba($gray-85, 0.3);
+		border-radius: $corner-radius-md;
+		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+		padding: 12px;
+		width: 260px;
+		animation: dropdownFadeIn 0.15s ease-out;
+	}
+
+	@keyframes dropdownFadeIn {
+		from {
+			opacity: 0;
+			transform: translateY(-4px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	.color-picker-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 12px;
+		padding-bottom: 8px;
+		border-bottom: 1px solid rgba($gray-85, 0.3);
+
+		span {
+			font-size: 13px;
+			font-weight: 500;
+			color: $gray-10;
+		}
+	}
+
+	.remove-color-btn {
+		padding: 4px 8px;
+		background: transparent;
+		border: none;
+		border-radius: $corner-radius-sm;
+		font-size: 12px;
+		color: $gray-30;
+		cursor: pointer;
+		transition: all 0.15s ease;
+
+		&:hover {
+			background: rgba($gray-90, 0.5);
+			color: $gray-20;
+		}
+	}
+
+	.preset-colors {
+		display: grid;
+		grid-template-columns: repeat(5, 40px);
+		grid-auto-rows: 40px;
+		gap: 8px;
+		justify-content: center;
+		margin-bottom: 12px;
+	}
+
+	.color-preset {
+		width: 40px;
+		height: 40px;
+		border: none;
+		border-radius: 50%;
+		cursor: pointer;
+		transition: all 0.15s ease;
+		position: relative;
+
+		&:hover {
+			transform: scale(1.15);
+		}
+
+		&:active {
+			transform: scale(0.95);
+		}
+	}
+
+	.custom-color-section {
+		border-top: 1px solid rgba($gray-85, 0.3);
+		padding-top: 12px;
+	}
+
+	.custom-color-btn {
+		width: 100%;
+		padding: 8px 12px;
+		background: transparent;
+		border: 1px solid rgba($gray-85, 0.3);
+		border-radius: $corner-radius-sm;
+		font-size: 13px;
+		color: $gray-20;
+		cursor: pointer;
+		transition: all 0.15s ease;
+
+		&:hover {
+			background: rgba($gray-90, 0.5);
+			border-color: rgba($gray-80, 0.5);
+		}
+	}
+
+	.custom-picker {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	.apply-custom-btn {
+		padding: 8px 16px;
+		background: $blue-50;
+		border: none;
+		border-radius: $corner-radius-sm;
+		font-size: 13px;
+		font-weight: 500;
+		color: $white;
+		cursor: pointer;
+		transition: all 0.15s ease;
+
+		&:hover {
+			background: $blue-40;
+			transform: translateY(-1px);
+		}
+
+		&:active {
+			transform: translateY(0);
+		}
+	}
+
+	// Override svelte-awesome-color-picker styles
+	:global(.bubble-color-picker .color-picker) {
+		--picker-height: 150px !important;
+		--picker-width: 100% !important;
+		margin-bottom: 8px;
+	}
+
+	:global(.bubble-color-picker .picker) {
+		width: 100% !important;
+		height: 150px !important;
+		margin-bottom: 8px;
+		border-radius: $corner-radius-sm;
+		border: 1px solid rgba($gray-85, 0.3);
+	}
+
+	:global(.bubble-color-picker .chrome-picker) {
+		width: 100%;
+		padding: 0;
+		border: none;
+		background: transparent;
+	}
+
+	:global(.bubble-color-picker .slider) {
+		margin-top: 8px;
+		height: 12px !important;
+		border-radius: 6px;
+	}
+
+	:global(.bubble-color-picker .color-button) {
+		display: none !important;
+	}
+
+	:global(.bubble-color-picker .input) {
+		margin-top: 8px;
+		
+		input {
+			width: 100%;
+			padding: 6px 10px;
+			background: rgba($gray-95, 0.5);
+			border: 1px solid rgba($gray-85, 0.3);
+			border-radius: $corner-radius-sm;
+			font-size: 13px;
+			color: $gray-10;
+			text-align: center;
+			font-family: monospace;
+
+			&:focus {
+				background: rgba($gray-90, 0.5);
+				border-color: rgba($blue-50, 0.5);
+				outline: none;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/lib/components/admin/composer/BubbleTextStyleMenu.svelte b/src/lib/components/admin/composer/BubbleTextStyleMenu.svelte
new file mode 100644
index 0000000..4e2c341
--- /dev/null
+++ b/src/lib/components/admin/composer/BubbleTextStyleMenu.svelte
@@ -0,0 +1,138 @@
+<script lang="ts">
+	import type { Editor } from '@tiptap/core'
+	
+	interface Props {
+		editor: Editor
+		isOpen: boolean
+		onClose: () => void
+		features: any
+	}
+
+	const { editor, isOpen, onClose, features }: Props = $props()
+
+	// Text style options
+	const textStyles = [
+		{ name: 'paragraph', label: 'Paragraph', action: () => editor.chain().focus().setParagraph().run() },
+		{ name: 'heading1', label: 'Heading 1', action: () => editor.chain().focus().toggleHeading({ level: 1 }).run() },
+		{ name: 'heading2', label: 'Heading 2', action: () => editor.chain().focus().toggleHeading({ level: 2 }).run() },
+		{ name: 'heading3', label: 'Heading 3', action: () => editor.chain().focus().toggleHeading({ level: 3 }).run() },
+		{ name: 'bulletList', label: 'Bullet List', action: () => editor.chain().focus().toggleBulletList().run() },
+		{ name: 'orderedList', label: 'Ordered List', action: () => editor.chain().focus().toggleOrderedList().run() },
+		{ name: 'taskList', label: 'Task List', action: () => editor.chain().focus().toggleTaskList().run() },
+		{ name: 'blockquote', label: 'Blockquote', action: () => editor.chain().focus().toggleBlockquote().run() }
+	]
+
+	// Add code block if feature is enabled
+	if (features?.codeBlocks) {
+		textStyles.push({
+			name: 'codeBlock',
+			label: 'Code Block',
+			action: () => editor.chain().focus().toggleCodeBlock().run()
+		})
+	}
+
+	function handleSelect(action: () => void) {
+		action()
+		onClose()
+	}
+
+	function handleClickOutside(e: MouseEvent) {
+		if (isOpen) {
+			const menu = e.currentTarget as HTMLElement
+			if (!menu?.contains(e.target as Node)) {
+				onClose()
+			}
+		}
+	}
+
+	$effect(() => {
+		if (isOpen) {
+			// Small delay to prevent immediate closing
+			setTimeout(() => {
+				document.addEventListener('click', handleClickOutside)
+			}, 10)
+			return () => document.removeEventListener('click', handleClickOutside)
+		}
+	})
+</script>
+
+{#if isOpen}
+	<div class="bubble-text-style-menu">
+		{#each textStyles as style}
+			<button
+				class="text-style-option"
+				class:active={
+					(style.name === 'paragraph' && !editor.isActive('heading') && !editor.isActive('bulletList') && !editor.isActive('orderedList') && !editor.isActive('taskList') && !editor.isActive('blockquote') && !editor.isActive('codeBlock')) ||
+					(style.name === 'heading1' && editor.isActive('heading', { level: 1 })) ||
+					(style.name === 'heading2' && editor.isActive('heading', { level: 2 })) ||
+					(style.name === 'heading3' && editor.isActive('heading', { level: 3 })) ||
+					(style.name === 'bulletList' && editor.isActive('bulletList')) ||
+					(style.name === 'orderedList' && editor.isActive('orderedList')) ||
+					(style.name === 'taskList' && editor.isActive('taskList')) ||
+					(style.name === 'blockquote' && editor.isActive('blockquote')) ||
+					(style.name === 'codeBlock' && editor.isActive('codeBlock'))
+				}
+				onclick={() => handleSelect(style.action)}
+			>
+				{style.label}
+			</button>
+		{/each}
+	</div>
+{/if}
+
+<style lang="scss">
+	@import '$styles/variables';
+	@import '$styles/mixins';
+
+	.bubble-text-style-menu {
+		position: absolute;
+		top: 100%;
+		left: 0;
+		margin-top: 4px;
+		z-index: 50;
+		background: rgba($white, 0.98);
+		backdrop-filter: blur(12px);
+		-webkit-backdrop-filter: blur(12px);
+		border: 1px solid rgba($gray-85, 0.3);
+		border-radius: $corner-radius-md;
+		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+		padding: 4px;
+		min-width: 180px;
+		animation: dropdownFadeIn 0.15s ease-out;
+	}
+
+	@keyframes dropdownFadeIn {
+		from {
+			opacity: 0;
+			transform: translateY(-4px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	.text-style-option {
+		display: block;
+		width: 100%;
+		padding: 8px 12px;
+		background: transparent;
+		border: none;
+		border-radius: $corner-radius-sm;
+		text-align: left;
+		font-size: 13px;
+		color: $gray-10;
+		cursor: pointer;
+		transition: all 0.15s ease;
+
+		&:hover {
+			background: rgba($gray-90, 0.5);
+		}
+
+		&.active {
+			background: rgba($blue-50, 0.1);
+			color: $blue-40;
+			font-weight: 500;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/lib/components/admin/composer/ComposerBubbleMenu.svelte b/src/lib/components/admin/composer/ComposerBubbleMenu.svelte
new file mode 100644
index 0000000..e0198da
--- /dev/null
+++ b/src/lib/components/admin/composer/ComposerBubbleMenu.svelte
@@ -0,0 +1,437 @@
+<script lang="ts">
+	import { BubbleMenu } from 'svelte-tiptap'
+	import { isTextSelection, type Editor } from '@tiptap/core'
+	import type { ShouldShowProps } from '$lib/components/edra/utils'
+	import EdraToolBarIcon from '$lib/components/edra/headless/components/EdraToolBarIcon.svelte'
+	import type { ComposerFeatures } from './types'
+	import { getBubbleMenuCommands, getCurrentTextStyle } from './editorConfig'
+	import Link from 'lucide-svelte/icons/link'
+	import Check from 'lucide-svelte/icons/check'
+	import X from 'lucide-svelte/icons/x'
+	import ChevronDown from 'lucide-svelte/icons/chevron-down'
+	import Type from 'lucide-svelte/icons/type'
+	import Palette from 'lucide-svelte/icons/palette'
+	import Highlighter from 'lucide-svelte/icons/highlighter'
+	import BubbleTextStyleMenu from './BubbleTextStyleMenu.svelte'
+	import BubbleColorPicker from './BubbleColorPicker.svelte'
+
+	interface Props {
+		editor: Editor
+		features: ComposerFeatures
+	}
+
+	const { editor, features }: Props = $props()
+
+	let isLinkMode = $state(false)
+	let linkInput = $state('')
+	let linkInputElement = $state<HTMLInputElement>()
+	let showTextStyleMenu = $state(false)
+	let showColorPicker = $state(false)
+	let showHighlightPicker = $state(false)
+	let textStyleButtonRef = $state<HTMLElement>()
+	let colorButtonRef = $state<HTMLElement>()
+	let highlightButtonRef = $state<HTMLElement>()
+
+	// Get commands for bubble menu
+	const bubbleMenuCommands = getBubbleMenuCommands()
+
+	// Filter out link command as we'll handle it specially
+	const formattingCommands = bubbleMenuCommands.filter((cmd) => cmd.name !== 'link')
+	
+	// Get current text style
+	const currentTextStyle = $derived(editor ? getCurrentTextStyle(editor) : 'Paragraph')
+
+	function shouldShow(props: ShouldShowProps) {
+		const { editor, state } = props
+		const { selection } = state
+		const { empty, from, to } = selection
+
+		// Don't show if not editable
+		if (!editor.isEditable) return false
+
+		// Don't show if selection is empty
+		if (empty) return false
+
+		// Don't show if selection is not text
+		if (!isTextSelection(selection)) return false
+
+		// Don't show in code blocks
+		if (editor.isActive('codeBlock')) return false
+
+		// Don't show if we're in a table (has its own menus)
+		if (editor.isActive('table')) return false
+
+		// Don't show if link menu is already showing
+		if (editor.isActive('link') && !isLinkMode) return false
+
+		// Check if selection contains only whitespace
+		const text = state.doc.textBetween(from, to)
+		if (!text.trim()) return false
+
+		return true
+	}
+
+	function handleLinkClick() {
+		if (editor.isActive('link')) {
+			// If already a link, remove it
+			editor.chain().focus().unsetLink().run()
+		} else {
+			// Enter link mode
+			isLinkMode = true
+			linkInput = ''
+			// Focus input after render
+			setTimeout(() => linkInputElement?.focus(), 0)
+		}
+	}
+
+	function applyLink() {
+		if (linkInput.trim()) {
+			let href = linkInput.trim()
+			// Add protocol if missing
+			if (!/^https?:\/\//i.test(href)) {
+				href = 'https://' + href
+			}
+			editor.chain().focus().setLink({ href, target: '_blank' }).run()
+		}
+		cancelLinkMode()
+	}
+
+	function cancelLinkMode() {
+		isLinkMode = false
+		linkInput = ''
+		editor.commands.focus()
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter') {
+			e.preventDefault()
+			applyLink()
+		} else if (e.key === 'Escape') {
+			e.preventDefault()
+			cancelLinkMode()
+		}
+	}
+
+	// Close all menus when bubble menu hides
+	$effect(() => {
+		return () => {
+			showTextStyleMenu = false
+			showColorPicker = false
+			showHighlightPicker = false
+		}
+	})
+</script>
+
+<BubbleMenu
+	{editor}
+	class="composer-bubble-menu"
+	{shouldShow}
+	pluginKey="composer-bubble-menu"
+	updateDelay={100}
+	tippyOptions={{
+		popperOptions: {
+			placement: 'top',
+			modifiers: [
+				{
+					name: 'preventOverflow',
+					options: {
+						boundary: 'viewport',
+						padding: 8
+					}
+				},
+				{
+					name: 'flip',
+					options: {
+						fallbackPlacements: ['bottom', 'top-start', 'top-end', 'bottom-start', 'bottom-end']
+					}
+				}
+			]
+		},
+		maxWidth: 'calc(100vw - 16px)',
+		duration: [200, 150],
+		animation: 'fade'
+	}}
+>
+	<div class="bubble-menu-content">
+		{#if isLinkMode}
+			<div class="link-input-container">
+				<input
+					bind:this={linkInputElement}
+					bind:value={linkInput}
+					type="url"
+					placeholder="Enter URL..."
+					class="link-input"
+					onkeydown={handleKeydown}
+				/>
+				<button
+					class="bubble-menu-button"
+					onclick={applyLink}
+					disabled={!linkInput.trim()}
+					title="Apply link"
+				>
+					<Check size={16} />
+				</button>
+				<button class="bubble-menu-button" onclick={cancelLinkMode} title="Cancel">
+					<X size={16} />
+				</button>
+			</div>
+		{:else}
+			<div class="formatting-buttons">
+				<!-- Block type indicator -->
+				<div class="dropdown-wrapper">
+					<button
+						bind:this={textStyleButtonRef}
+						class="bubble-menu-button text-style-button"
+						onclick={() => {
+							showTextStyleMenu = !showTextStyleMenu
+							showColorPicker = false
+							showHighlightPicker = false
+						}}
+						title="Text style"
+					>
+						<Type size={16} />
+						<span class="text-style-label">{currentTextStyle}</span>
+						<ChevronDown size={12} />
+					</button>
+					
+					<!-- Text Style Dropdown -->
+					<BubbleTextStyleMenu
+						{editor}
+						isOpen={showTextStyleMenu}
+						onClose={() => showTextStyleMenu = false}
+						{features}
+					/>
+				</div>
+
+				<span class="separator"></span>
+
+				{#each formattingCommands as command}
+					<EdraToolBarIcon {command} {editor} />
+				{/each}
+
+				<button
+					class="bubble-menu-button"
+					class:active={editor.isActive('link')}
+					onclick={handleLinkClick}
+					title="Link (Cmd/Ctrl+K)"
+				>
+					<Link size={16} />
+				</button>
+
+				<span class="separator"></span>
+
+				<!-- Color options -->
+				<div class="dropdown-wrapper">
+					<button
+						bind:this={colorButtonRef}
+						class="bubble-menu-button"
+						onclick={() => {
+							showColorPicker = !showColorPicker
+							showTextStyleMenu = false
+							showHighlightPicker = false
+						}}
+						title="Text color"
+						style={editor.getAttributes('textStyle').color ? `color: ${editor.getAttributes('textStyle').color}` : ''}
+					>
+						<Palette size={16} />
+					</button>
+					
+					<!-- Text Color Picker -->
+					<BubbleColorPicker
+						{editor}
+						isOpen={showColorPicker}
+						onClose={() => showColorPicker = false}
+						mode="text"
+						currentColor={editor.getAttributes('textStyle').color}
+					/>
+				</div>
+
+				<div class="dropdown-wrapper">
+					<button
+						bind:this={highlightButtonRef}
+						class="bubble-menu-button"
+						onclick={() => {
+							showHighlightPicker = !showHighlightPicker
+							showTextStyleMenu = false
+							showColorPicker = false
+						}}
+						title="Highlight color"
+						style={editor.getAttributes('highlight').color ? `background-color: ${editor.getAttributes('highlight').color}` : ''}
+					>
+						<Highlighter size={16} />
+					</button>
+					
+					<!-- Highlight Color Picker -->
+					<BubbleColorPicker
+						{editor}
+						isOpen={showHighlightPicker}
+						onClose={() => showHighlightPicker = false}
+						mode="highlight"
+						currentColor={editor.getAttributes('highlight').color}
+					/>
+				</div>
+			</div>
+		{/if}
+	</div>
+</BubbleMenu>
+
+<style lang="scss">
+	@import '$styles/variables';
+	@import '$styles/mixins';
+
+	:global(.composer-bubble-menu) {
+		z-index: 30;
+	}
+
+	.bubble-menu-content {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		padding: 6px;
+		background: rgba($white, 0.95);
+		backdrop-filter: blur(12px);
+		-webkit-backdrop-filter: blur(12px);
+		border: 1px solid rgba($gray-85, 0.5);
+		border-radius: $corner-radius;
+		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+		animation: bubbleMenuFadeIn 0.2s ease-out;
+	}
+
+	@keyframes bubbleMenuFadeIn {
+		from {
+			opacity: 0;
+			transform: scale(0.95) translateY(4px);
+		}
+		to {
+			opacity: 1;
+			transform: scale(1) translateY(0);
+		}
+	}
+
+	.formatting-buttons {
+		display: flex;
+		align-items: center;
+		gap: 2px;
+	}
+
+	.bubble-menu-button {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 32px;
+		height: 32px;
+		padding: 0 6px;
+		background: transparent;
+		border: none;
+		border-radius: $corner-radius-sm;
+		color: $gray-20;
+		cursor: pointer;
+		transition: all 0.15s ease;
+		gap: 4px;
+
+		&:hover {
+			background: rgba($gray-85, 0.6);
+			transform: translateY(-1px);
+		}
+
+		&:active {
+			background: rgba($gray-85, 0.7);
+			transform: translateY(0);
+		}
+
+		&.active {
+			background: rgba($blue-50, 0.1);
+			color: $blue-40;
+		}
+
+		&:disabled {
+			opacity: 0.5;
+			cursor: not-allowed;
+		}
+
+		&.text-style-button {
+			min-width: auto;
+			padding: 0 8px;
+		}
+	}
+
+	.text-style-label {
+		font-size: 12px;
+		font-weight: 500;
+		white-space: nowrap;
+	}
+
+	.separator {
+		width: 1px;
+		height: 20px;
+		background: rgba($gray-85, 0.3);
+		margin: 0 2px;
+	}
+
+	.dropdown-wrapper {
+		position: relative;
+		display: inline-flex;
+	}
+
+	.link-input-container {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		min-width: 250px;
+	}
+
+	.link-input {
+		flex: 1;
+		padding: 6px 10px;
+		background: rgba($gray-95, 0.5);
+		border: 1px solid rgba($gray-85, 0.3);
+		border-radius: $corner-radius-sm;
+		font-size: 13px;
+		color: $gray-10;
+		outline: none;
+		transition: all 0.15s ease;
+
+		&:focus {
+			background: rgba($gray-90, 0.5);
+			border-color: rgba($blue-50, 0.5);
+		}
+
+		&::placeholder {
+			color: $gray-60;
+		}
+	}
+
+	// Override EdraToolBarIcon styles for bubble menu
+	:global(.bubble-menu-content .edra-command-button) {
+		min-width: 32px;
+		min-height: 32px;
+		background-color: transparent;
+		border-radius: $corner-radius-sm;
+		transition: all 0.15s ease;
+
+		&:hover {
+			background-color: rgba($gray-85, 0.6);
+			transform: translateY(-1px);
+		}
+
+		&:active {
+			background-color: rgba($gray-85, 0.7);
+			transform: translateY(0);
+		}
+
+		&.active {
+			background-color: rgba($blue-50, 0.1);
+			color: $blue-40;
+
+			&:hover {
+				background-color: rgba($blue-50, 0.15);
+			}
+		}
+	}
+
+	:global(.bubble-menu-content .edra-toolbar-icon) {
+		width: 16px;
+		height: 16px;
+		stroke-width: 2px;
+	}
+</style>