From 6077fa126b36e6301cea8bbc35bbdeeebd184046 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 26 Jun 2025 09:02:47 -0400
Subject: [PATCH] refactor: break down EnhancedComposer into focused components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Extract ComposerToolbar component for toolbar UI and logic
- Create TextStyleDropdown and MediaInsertDropdown components
- Extract ComposerMediaHandler for all media operations
- Create ComposerLinkManager for link-related features
- Extract useComposerEvents hook for event handling
- Create editorConfig utility for configuration logic
- Refactor main component from 1,347 to ~300 lines
- Maintain backward compatibility with shim component
- Improve maintainability with single-responsibility components

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 prd/PRD-codebase-cleanup-refactoring.md       |   22 +-
 .../admin/EnhancedComposer.old.svelte         | 1347 ++++++++++++++++
 .../components/admin/EnhancedComposer.svelte  | 1354 +----------------
 .../admin/composer/ComposerCore.svelte        |  377 +++++
 .../admin/composer/ComposerLinkManager.svelte |  197 +++
 .../composer/ComposerMediaHandler.svelte.ts   |  180 +++
 .../admin/composer/ComposerToolbar.svelte     |  209 +++
 .../admin/composer/MediaInsertDropdown.svelte |  118 ++
 .../admin/composer/TextStyleDropdown.svelte   |  134 ++
 .../components/admin/composer/editorConfig.ts |  168 ++
 src/lib/components/admin/composer/index.ts    |   17 +
 src/lib/components/admin/composer/types.ts    |   40 +
 .../composer/useComposerEvents.svelte.ts      |  138 ++
 .../admin/composer/useDropdown.svelte.ts      |   65 +
 14 files changed, 3025 insertions(+), 1341 deletions(-)
 create mode 100644 src/lib/components/admin/EnhancedComposer.old.svelte
 create mode 100644 src/lib/components/admin/composer/ComposerCore.svelte
 create mode 100644 src/lib/components/admin/composer/ComposerLinkManager.svelte
 create mode 100644 src/lib/components/admin/composer/ComposerMediaHandler.svelte.ts
 create mode 100644 src/lib/components/admin/composer/ComposerToolbar.svelte
 create mode 100644 src/lib/components/admin/composer/MediaInsertDropdown.svelte
 create mode 100644 src/lib/components/admin/composer/TextStyleDropdown.svelte
 create mode 100644 src/lib/components/admin/composer/editorConfig.ts
 create mode 100644 src/lib/components/admin/composer/index.ts
 create mode 100644 src/lib/components/admin/composer/types.ts
 create mode 100644 src/lib/components/admin/composer/useComposerEvents.svelte.ts
 create mode 100644 src/lib/components/admin/composer/useDropdown.svelte.ts

diff --git a/prd/PRD-codebase-cleanup-refactoring.md b/prd/PRD-codebase-cleanup-refactoring.md
index e2c51dc..906d863 100644
--- a/prd/PRD-codebase-cleanup-refactoring.md
+++ b/prd/PRD-codebase-cleanup-refactoring.md
@@ -94,22 +94,22 @@ Create a consistent design system by extracting hardcoded values.
 ### Phase 3: Component Refactoring (Weeks 3-4)
 Refactor components to reduce duplication and complexity.
 
-- [-] **Create base components**
+- [x] **Create base components**
   - [x] Extract `BaseModal` component for shared modal logic
   - [x] Create `BaseDropdown` for dropdown patterns
   - [x] Merge `FormField` and `FormFieldWrapper`
-  - [ ] Create `BaseSegmentedController` for shared logic
+  - [x] Create `BaseSegmentedController` for shared logic
 
-- [ ] **Refactor photo grids**
-  - [ ] Create unified `PhotoGrid` component with `columns` prop
-  - [ ] Remove 3 duplicate grid components
-  - [ ] Use composition for layout variations
+- [x] **Refactor photo grids**
+  - [x] Create unified `PhotoGrid` component with `columns` prop
+  - [x] Remove 3 duplicate grid components
+  - [x] Use composition for layout variations
 
-- [ ] **Componentize inline SVGs**
-  - [ ] Create `CloseButton` icon component
-  - [ ] Create `LoadingSpinner` component
-  - [ ] Create `NavigationArrow` components
-  - [ ] Extract other repeated inline SVGs
+- [x] **Componentize inline SVGs**
+  - [x] Create `CloseButton` icon component
+  - [x] Create `LoadingSpinner` component (already existed)
+  - [x] Create `NavigationArrow` components (using existing arrow SVGs)
+  - [x] Extract other repeated inline SVGs (FileIcon, CopyIcon)
 
 ### Phase 4: Complex Refactoring (Weeks 5-6)
 Tackle the most complex components and patterns.
diff --git a/src/lib/components/admin/EnhancedComposer.old.svelte b/src/lib/components/admin/EnhancedComposer.old.svelte
new file mode 100644
index 0000000..30abe9b
--- /dev/null
+++ b/src/lib/components/admin/EnhancedComposer.old.svelte
@@ -0,0 +1,1347 @@
+<script lang="ts">
+	import { type Editor } from '@tiptap/core'
+	import { onMount, setContext } from 'svelte'
+	import { initiateEditor } from '$lib/components/edra/editor.ts'
+	import { getEditorExtensions, EDITOR_PRESETS } from '$lib/components/edra/editor-extensions.js'
+	import { EdraToolbar, EdraBubbleMenu } from '$lib/components/edra/headless/index.js'
+	import LoaderCircle from 'lucide-svelte/icons/loader-circle'
+	import { focusEditor, type EdraProps } from '$lib/components/edra/utils.js'
+	import EdraToolBarIcon from '$lib/components/edra/headless/components/EdraToolBarIcon.svelte'
+	import { commands } from '$lib/components/edra/commands/commands.js'
+	import EnhancedImagePlaceholder from '$lib/components/edra/headless/components/EnhancedImagePlaceholder.svelte'
+	import type { JSONContent } from '@tiptap/core'
+
+	// Import Edra styles
+	import '$lib/components/edra/headless/style.css'
+	import 'katex/dist/katex.min.css'
+	import '$lib/components/edra/editor.css'
+	import '$lib/components/edra/onedark.css'
+
+	// Import menus
+	import LinkMenu from '$lib/components/edra/headless/menus/link-menu.svelte'
+	import TableRowMenu from '$lib/components/edra/headless/menus/table/table-row-menu.svelte'
+	import TableColMenu from '$lib/components/edra/headless/menus/table/table-col-menu.svelte'
+	import UrlConvertDropdown from '$lib/components/edra/headless/components/UrlConvertDropdown.svelte'
+	import LinkContextMenuComponent from '$lib/components/edra/headless/components/LinkContextMenu.svelte'
+	import LinkEditDialog from '$lib/components/edra/headless/components/LinkEditDialog.svelte'
+	import UnifiedMediaModal from './UnifiedMediaModal.svelte'
+	import DragHandle from '$lib/components/edra/drag-handle.svelte'
+	import { mediaSelectionStore } from '$lib/stores/media-selection'
+	import type { Media } from '@prisma/client'
+
+	// Component types
+	type ComposerVariant = 'full' | 'inline' | 'minimal'
+
+	interface Props {
+		variant?: ComposerVariant
+		data?: JSONContent
+		onChange?: (content: JSONContent) => void
+		onCharacterCount?: (count: number) => void
+		placeholder?: string
+		minHeight?: number
+		autofocus?: boolean
+		editable?: boolean
+		class?: string
+		showToolbar?: boolean
+		showSlashCommands?: boolean
+		albumId?: number
+		features?: {
+			imageUpload?: boolean
+			mediaLibrary?: boolean
+			urlEmbed?: boolean
+			tables?: boolean
+			codeBlocks?: boolean
+		}
+	}
+
+	let {
+		variant = 'full',
+		data = $bindable({
+			type: 'doc',
+			content: [{ type: 'paragraph' }]
+		}),
+		onChange,
+		onCharacterCount,
+		placeholder = variant === 'inline' ? "What's on your mind?" : 'Type "/" for commands...',
+		minHeight = variant === 'inline' ? 80 : 400,
+		autofocus = false,
+		editable = true,
+		class: className = '',
+		showToolbar = variant === 'full',
+		showSlashCommands = variant !== 'minimal',
+		albumId,
+		features = {
+			imageUpload: true,
+			mediaLibrary: true,
+			urlEmbed: true,
+			tables: true,
+			codeBlocks: true
+		}
+	}: Props = $props()
+
+	// Set editor context for child components
+	setContext('editorContext', {
+		albumId,
+		contentType: albumId ? 'album' : 'default',
+		isAlbumEditor: !!albumId
+	})
+
+	// State
+	let editor = $state<Editor | undefined>()
+	let element = $state<HTMLElement>()
+	let isLoading = $state(true)
+	let initialized = false
+	const mediaSelectionState = $derived($mediaSelectionStore)
+
+	// Dropdown states
+	let showTextStyleDropdown = $state(false)
+	let showMediaDropdown = $state(false)
+	let dropdownTriggerRef = $state<HTMLElement>()
+	let mediaDropdownTriggerRef = $state<HTMLElement>()
+	let dropdownPosition = $state({ top: 0, left: 0 })
+	let mediaDropdownPosition = $state({ top: 0, left: 0 })
+
+	// URL convert dropdown state
+	let showUrlConvertDropdown = $state(false)
+	let urlConvertDropdownPosition = $state({ x: 0, y: 0 })
+	let urlConvertPos = $state<number | null>(null)
+
+	// Link context menu state
+	let showLinkContextMenu = $state(false)
+	let linkContextMenuPosition = $state({ x: 0, y: 0 })
+	let linkContextUrl = $state<string | null>(null)
+	let linkContextPos = $state<number | null>(null)
+
+	// Link edit dialog state
+	let showLinkEditDialog = $state(false)
+	let linkEditDialogPosition = $state({ x: 0, y: 0 })
+	let linkEditUrl = $state<string>('')
+	let linkEditPos = $state<number | null>(null)
+
+	// Get filtered commands based on variant and features
+	const getFilteredCommands = () => {
+		const filtered = { ...commands }
+
+		// Remove groups based on variant
+		if (variant === 'minimal') {
+			delete filtered['undo-redo']
+			delete filtered['headings']
+			delete filtered['lists']
+			delete filtered['alignment']
+			delete filtered['table']
+			delete filtered['media']
+			delete filtered['fonts']
+		} else if (variant === 'inline') {
+			delete filtered['undo-redo']
+			delete filtered['headings']
+			delete filtered['lists']
+			delete filtered['alignment']
+			delete filtered['table']
+			delete filtered['media']
+		} else {
+			// Full variant - reorganize for toolbar
+			delete filtered['undo-redo']
+			delete filtered['headings'] // In text style dropdown
+			delete filtered['lists'] // In text style dropdown
+			delete filtered['alignment']
+			delete filtered['table']
+			delete filtered['media'] // In media dropdown
+		}
+
+		// Reorganize text formatting for toolbar
+		if (filtered['text-formatting']) {
+			const allCommands = filtered['text-formatting'].commands
+			const basicFormatting = []
+			const advancedFormatting = []
+
+			// Group basic formatting first
+			const basicOrder = ['bold', 'italic', 'underline', 'strike']
+			basicOrder.forEach((name) => {
+				const cmd = allCommands.find((c) => c.name === name)
+				if (cmd) basicFormatting.push(cmd)
+			})
+
+			// Then link and code
+			const advancedOrder = ['link', 'code']
+			advancedOrder.forEach((name) => {
+				const cmd = allCommands.find((c) => c.name === name)
+				if (cmd) advancedFormatting.push(cmd)
+			})
+
+			// Create two groups
+			filtered['basic-formatting'] = {
+				name: 'Basic Formatting',
+				label: 'Basic Formatting',
+				commands: basicFormatting
+			}
+
+			filtered['advanced-formatting'] = {
+				name: 'Advanced Formatting',
+				label: 'Advanced Formatting',
+				commands: advancedFormatting
+			}
+
+			// Remove original text-formatting
+			delete filtered['text-formatting']
+		}
+
+		return filtered
+	}
+
+	// Get media commands, but filter out based on features
+	const getMediaCommands = () => {
+		if (!commands.media) return []
+
+		let mediaCommands = [...commands.media.commands]
+
+		// Filter based on features
+		if (!features.urlEmbed) {
+			mediaCommands = mediaCommands.filter((cmd) => cmd.name !== 'iframe-placeholder')
+		}
+
+		return mediaCommands
+	}
+
+	const filteredCommands = getFilteredCommands()
+	const colorCommands = commands.colors?.commands || []
+	const excludedCommands = ['colors', 'fonts']
+
+	// Get current text style for dropdown
+	const getCurrentTextStyle = (editor: Editor) => {
+		if (editor.isActive('heading', { level: 1 })) return 'Heading 1'
+		if (editor.isActive('heading', { level: 2 })) return 'Heading 2'
+		if (editor.isActive('heading', { level: 3 })) return 'Heading 3'
+		if (editor.isActive('bulletList')) return 'Bullet List'
+		if (editor.isActive('orderedList')) return 'Ordered List'
+		if (editor.isActive('taskList')) return 'Task List'
+		if (editor.isActive('codeBlock')) return 'Code Block'
+		if (editor.isActive('blockquote')) return 'Blockquote'
+		return 'Paragraph'
+	}
+
+	// Derived state for current text style
+	let currentTextStyle = $derived(editor ? getCurrentTextStyle(editor) : 'Paragraph')
+
+	// Calculate dropdown position
+	const updateDropdownPosition = () => {
+		if (dropdownTriggerRef) {
+			const rect = dropdownTriggerRef.getBoundingClientRect()
+			dropdownPosition = {
+				top: rect.bottom + 4,
+				left: rect.left
+			}
+		}
+	}
+
+	// Toggle dropdown with position update
+	const toggleDropdown = () => {
+		if (!showTextStyleDropdown) {
+			updateDropdownPosition()
+		}
+		showTextStyleDropdown = !showTextStyleDropdown
+	}
+
+	// Update media dropdown position
+	const updateMediaDropdownPosition = () => {
+		if (mediaDropdownTriggerRef) {
+			const rect = mediaDropdownTriggerRef.getBoundingClientRect()
+			mediaDropdownPosition = {
+				top: rect.bottom + 4,
+				left: rect.left
+			}
+		}
+	}
+
+	// Toggle media dropdown
+	const toggleMediaDropdown = () => {
+		if (!showMediaDropdown) {
+			updateMediaDropdownPosition()
+		}
+		showMediaDropdown = !showMediaDropdown
+	}
+
+	// Close dropdown when clicking outside
+	const handleClickOutside = (event: MouseEvent) => {
+		const target = event.target as HTMLElement
+		if (!dropdownTriggerRef?.contains(target) && !target.closest('.dropdown-menu-portal')) {
+			showTextStyleDropdown = false
+		}
+		if (!mediaDropdownTriggerRef?.contains(target) && !target.closest('.media-dropdown-portal')) {
+			showMediaDropdown = false
+		}
+		if (!target.closest('.url-convert-dropdown')) {
+			showUrlConvertDropdown = false
+		}
+		if (!target.closest('.link-context-menu')) {
+			showLinkContextMenu = false
+		}
+		if (!target.closest('.link-edit-dialog')) {
+			showLinkEditDialog = false
+		}
+	}
+
+	// URL convert handlers
+	const handleShowUrlConvertDropdown = (pos: number, url: string) => {
+		if (!editor) return
+		const coords = editor.view.coordsAtPos(pos)
+		urlConvertDropdownPosition = { x: coords.left, y: coords.bottom + 5 }
+		urlConvertPos = pos
+		showUrlConvertDropdown = true
+	}
+
+	const handleConvertToEmbed = () => {
+		if (!editor || urlConvertPos === null) return
+		editor.commands.convertLinkToEmbed(urlConvertPos)
+		showUrlConvertDropdown = false
+		urlConvertPos = null
+	}
+
+	// Link context menu handlers
+	const handleShowLinkContextMenu = (
+		pos: number,
+		url: string,
+		coords: { x: number; y: number }
+	) => {
+		if (!editor) return
+		linkContextMenuPosition = { x: coords.x, y: coords.y + 5 }
+		linkContextUrl = url
+		linkContextPos = pos
+		showLinkContextMenu = true
+	}
+
+	const handleConvertLinkToEmbed = () => {
+		if (!editor || linkContextPos === null) return
+		editor.commands.convertLinkToEmbed(linkContextPos)
+		showLinkContextMenu = false
+		linkContextPos = null
+		linkContextUrl = null
+	}
+
+	const handleEditLink = () => {
+		if (!editor || !linkContextUrl) return
+		linkEditUrl = linkContextUrl
+		linkEditPos = linkContextPos
+		linkEditDialogPosition = { ...linkContextMenuPosition }
+		showLinkEditDialog = true
+		showLinkContextMenu = false
+	}
+
+	const handleSaveLink = (newUrl: string) => {
+		if (!editor) return
+		editor.chain().focus().extendMarkRange('link').setLink({ href: newUrl }).run()
+		showLinkEditDialog = false
+		linkEditPos = null
+		linkEditUrl = ''
+	}
+
+	const handleCopyLink = () => {
+		if (!linkContextUrl) return
+		navigator.clipboard.writeText(linkContextUrl)
+		showLinkContextMenu = false
+		linkContextPos = null
+		linkContextUrl = null
+	}
+
+	const handleRemoveLink = () => {
+		if (!editor) return
+		editor.chain().focus().extendMarkRange('link').unsetLink().run()
+		showLinkContextMenu = false
+		linkContextPos = null
+		linkContextUrl = null
+	}
+
+	const handleOpenLink = () => {
+		if (!linkContextUrl) return
+		window.open(linkContextUrl, '_blank', 'noopener,noreferrer')
+		showLinkContextMenu = false
+		linkContextPos = null
+		linkContextUrl = null
+	}
+
+	// Handle media selection from the global store
+	function handleGlobalMediaSelect(media: Media | Media[]) {
+		if (!editor) return
+
+		const selectedMedia = Array.isArray(media) ? media[0] : media
+		if (selectedMedia) {
+			// Set a reasonable default width (max 600px)
+			const displayWidth =
+				selectedMedia.width && selectedMedia.width > 600 ? 600 : selectedMedia.width
+
+			editor
+				.chain()
+				.focus()
+				.insertContent({
+					type: 'image',
+					attrs: {
+						src: selectedMedia.url,
+						alt: selectedMedia.altText || '',
+						title: selectedMedia.description || '',
+						width: displayWidth,
+						height: selectedMedia.height,
+						align: 'center',
+						mediaId: selectedMedia.id?.toString()
+					}
+				})
+				.run()
+		}
+
+		// Close the modal
+		mediaSelectionStore.close()
+
+		// Remove the placeholder if it exists
+		if (editor.storage.imageModal?.placeholderPos !== undefined) {
+			const pos = editor.storage.imageModal.placeholderPos
+			editor
+				.chain()
+				.focus()
+				.deleteRange({ from: pos, to: pos + 1 })
+				.run()
+			editor.storage.imageModal.placeholderPos = undefined
+		}
+	}
+
+	function handleGlobalMediaClose() {
+		mediaSelectionStore.close()
+
+		// Remove the placeholder if user cancelled
+		if (editor && editor.storage.imageModal?.placeholderPos !== undefined) {
+			const pos = editor.storage.imageModal.placeholderPos
+			editor
+				.chain()
+				.focus()
+				.deleteRange({ from: pos, to: pos + 1 })
+				.run()
+			editor.storage.imageModal.placeholderPos = undefined
+		}
+	}
+
+	// Handle paste for images
+	function handlePaste(view: any, event: ClipboardEvent) {
+		const clipboardData = event.clipboardData
+		if (!clipboardData) return false
+
+		// Check for images first
+		const imageItem = Array.from(clipboardData.items).find(
+			(item) => item.type.indexOf('image') === 0
+		)
+		if (imageItem && features.imageUpload) {
+			const file = imageItem.getAsFile()
+			if (!file) return false
+
+			// Check file size (2MB max)
+			const filesize = file.size / 1024 / 1024
+			if (filesize > 2) {
+				alert(`Image too large! File size: ${filesize.toFixed(2)} MB (max 2MB)`)
+				return true
+			}
+
+			// Upload to our media API
+			uploadImage(file)
+			return true // Prevent default paste behavior
+		}
+
+		// Handle text paste - preserve links while stripping other formatting
+		const htmlData = clipboardData.getData('text/html')
+		const plainText = clipboardData.getData('text/plain')
+
+		if (htmlData && plainText) {
+			event.preventDefault()
+
+			// Use editor commands to insert HTML content
+			const editorInstance = (view as any).editor
+			if (editorInstance) {
+				editorInstance
+					.chain()
+					.focus()
+					.insertContent(htmlData, { parseOptions: { preserveWhitespace: false } })
+					.run()
+			} else {
+				// Fallback to plain text
+				const { state, dispatch } = view
+				const { selection } = state
+				const transaction = state.tr.insertText(plainText, selection.from, selection.to)
+				dispatch(transaction)
+			}
+
+			return true
+		}
+
+		return false
+	}
+
+	async function uploadImage(file: File) {
+		if (!editor || !features.imageUpload) return
+
+		// Create a placeholder while uploading
+		const placeholderSrc = URL.createObjectURL(file)
+		editor.commands.insertContent({
+			type: 'image',
+			attrs: {
+				src: placeholderSrc,
+				alt: '',
+				title: '',
+				mediaId: null
+			}
+		})
+
+		try {
+			const auth = localStorage.getItem('admin_auth')
+			if (!auth) {
+				throw new Error('Not authenticated')
+			}
+
+			const formData = new FormData()
+			formData.append('file', file)
+
+			// Add albumId if available
+			if (albumId) {
+				formData.append('albumId', albumId.toString())
+			}
+
+			const response = await fetch('/api/media/upload', {
+				method: 'POST',
+				headers: {
+					Authorization: `Basic ${auth}`
+				},
+				body: formData
+			})
+
+			if (!response.ok) {
+				throw new Error('Upload failed')
+			}
+
+			const media = await response.json()
+
+			// Replace placeholder with actual URL
+			const displayWidth = media.width && media.width > 600 ? 600 : media.width
+
+			editor.commands.insertContent({
+				type: 'image',
+				attrs: {
+					src: media.url,
+					alt: media.filename || '',
+					title: media.description || '',
+					width: displayWidth,
+					height: media.height,
+					align: 'center',
+					mediaId: media.id?.toString()
+				}
+			})
+
+			// Clean up the object URL
+			URL.revokeObjectURL(placeholderSrc)
+		} catch (error) {
+			console.error('Image upload failed:', error)
+			alert('Failed to upload image. Please try again.')
+			// Remove the placeholder on error
+			editor.commands.undo()
+		}
+	}
+
+	// Update content when editor changes
+	function handleUpdate({ editor: updatedEditor, transaction }: any) {
+		// Skip the first update to avoid circular updates
+		if (!initialized) {
+			initialized = true
+			return
+		}
+
+		// Dismiss URL convert dropdown if user types
+		if (showUrlConvertDropdown && transaction.docChanged) {
+			const hasTextChange = transaction.steps.some(
+				(step: any) =>
+					step.toJSON().stepType === 'replace' || step.toJSON().stepType === 'replaceAround'
+			)
+			if (hasTextChange) {
+				showUrlConvertDropdown = false
+				urlConvertPos = null
+			}
+		}
+
+		const json = updatedEditor.getJSON()
+		data = json
+		onChange?.(json)
+
+		// Calculate character count if callback provided
+		if (onCharacterCount) {
+			const text = updatedEditor.getText()
+			onCharacterCount(text.length)
+		}
+	}
+
+	$effect(() => {
+		if (
+			showTextStyleDropdown ||
+			showMediaDropdown ||
+			showUrlConvertDropdown ||
+			showLinkContextMenu ||
+			showLinkEditDialog
+		) {
+			document.addEventListener('click', handleClickOutside)
+			return () => {
+				document.removeEventListener('click', handleClickOutside)
+			}
+		}
+	})
+
+	onMount(() => {
+		// Get extensions with custom options
+		const extensions = getEditorExtensions({
+			showSlashCommands,
+			onShowUrlConvertDropdown: features.urlEmbed ? handleShowUrlConvertDropdown : undefined,
+			onShowLinkContextMenu: handleShowLinkContextMenu,
+			imagePlaceholderComponent: EnhancedImagePlaceholder
+		})
+
+		// Initialize editor storage for image modal
+		const newEditor = initiateEditor(
+			element,
+			data,
+			undefined, // no character limit by default
+			extensions,
+			{
+				editable,
+				onUpdate: handleUpdate,
+				editorProps: {
+					attributes: {
+						class: 'prose prose-sm max-w-none focus:outline-none'
+					},
+					handlePaste: features.imageUpload ? handlePaste : undefined
+				}
+			},
+			placeholder
+		)
+
+		// Initialize storage for image modal
+		newEditor.storage.imageModal = { autoOpen: false }
+
+		editor = newEditor
+
+		// Auto-focus if requested
+		if (autofocus) {
+			setTimeout(() => {
+				newEditor.commands.focus()
+			}, 100)
+		}
+
+		isLoading = false
+
+		return () => editor?.destroy()
+	})
+
+	// Public API
+	export function save(): JSONContent | null {
+		return editor?.getJSON() || null
+	}
+
+	export function clear() {
+		editor?.commands.clearContent()
+	}
+
+	export function focus() {
+		editor?.commands.focus()
+	}
+
+	export function blur() {
+		editor?.commands.blur()
+	}
+
+	export function getContent() {
+		return editor?.getJSON()
+	}
+
+	export function getText() {
+		return editor?.getText() || ''
+	}
+</script>
+
+<div class={`composer composer--${variant} ${className}`}>
+	{#if showToolbar && editor && !isLoading}
+		<div class="editor-toolbar">
+			<div class="edra-toolbar">
+				<!-- Text Style Dropdown -->
+				<div class="text-style-dropdown">
+					<button bind:this={dropdownTriggerRef} class="dropdown-trigger" onclick={toggleDropdown}>
+						<span>{currentTextStyle}</span>
+						<svg
+							width="12"
+							height="12"
+							viewBox="0 0 12 12"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								d="M3 4.5L6 7.5L9 4.5"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+						</svg>
+					</button>
+				</div>
+
+				<span class="separator"></span>
+
+				{#each Object.keys(filteredCommands).filter((key) => !excludedCommands.includes(key)) as keys}
+					{@const groups = filteredCommands[keys].commands}
+					{#each groups as command}
+						<EdraToolBarIcon {command} {editor} />
+					{/each}
+					<span class="separator"></span>
+				{/each}
+
+				{#if features.mediaLibrary}
+					<!-- Media Dropdown -->
+					<div class="text-style-dropdown">
+						<button
+							bind:this={mediaDropdownTriggerRef}
+							class="dropdown-trigger"
+							onclick={toggleMediaDropdown}
+						>
+							<span>Insert</span>
+							<svg
+								width="12"
+								height="12"
+								viewBox="0 0 12 12"
+								fill="none"
+								xmlns="http://www.w3.org/2000/svg"
+							>
+								<path
+									d="M3 4.5L6 7.5L9 4.5"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								/>
+							</svg>
+						</button>
+					</div>
+
+					<span class="separator"></span>
+				{/if}
+
+				{#if colorCommands.length > 0}
+					<EdraToolBarIcon
+						command={colorCommands[0]}
+						{editor}
+						style={`color: ${editor.getAttributes('textStyle').color};`}
+						onclick={() => {
+							const color = editor.getAttributes('textStyle').color
+							const hasColor = editor.isActive('textStyle', { color })
+							if (hasColor) {
+								editor.chain().focus().unsetColor().run()
+							} else {
+								const color = prompt('Enter the color of the text:')
+								if (color !== null) {
+									editor.chain().focus().setColor(color).run()
+								}
+							}
+						}}
+					/>
+					<EdraToolBarIcon
+						command={colorCommands[1]}
+						{editor}
+						style={`background-color: ${editor.getAttributes('highlight').color};`}
+						onclick={() => {
+							const hasHightlight = editor.isActive('highlight')
+							if (hasHightlight) {
+								editor.chain().focus().unsetHighlight().run()
+							} else {
+								const color = prompt('Enter the color of the highlight:')
+								if (color !== null) {
+									editor.chain().focus().setHighlight({ color }).run()
+								}
+							}
+						}}
+					/>
+				{/if}
+			</div>
+		</div>
+	{/if}
+
+	{#if editor}
+		<LinkMenu {editor} />
+		{#if features.tables}
+			<TableRowMenu {editor} />
+			<TableColMenu {editor} />
+		{/if}
+	{/if}
+
+	{#if !editor}
+		<div class="edra-loading">
+			<LoaderCircle class="animate-spin" /> Loading...
+		</div>
+	{/if}
+
+	<div
+		bind:this={element}
+		role="button"
+		tabindex="0"
+		onclick={(event) => focusEditor(editor, event)}
+		onkeydown={(event) => {
+			if (event.key === 'Enter' || event.key === ' ') {
+				focusEditor(editor, event)
+			}
+		}}
+		class="edra-editor"
+		class:with-toolbar={showToolbar}
+		style={`min-height: ${minHeight}px`}
+	></div>
+	
+	{#if editor}
+		<DragHandle {editor} />
+	{/if}
+</div>
+
+<!-- Media Dropdown Portal -->
+{#if showMediaDropdown && features.mediaLibrary}
+	<div
+		class="media-dropdown-portal"
+		style="position: fixed; top: {mediaDropdownPosition.top}px; left: {mediaDropdownPosition.left}px; z-index: 10000;"
+	>
+		<div class="dropdown-menu">
+			<button
+				class="dropdown-item"
+				onclick={() => {
+					if (editor) {
+						// Get current position before inserting placeholder
+						const pos = editor.state.selection.anchor
+
+						// Insert placeholder
+						editor.chain().focus().insertImagePlaceholder().run()
+
+						// Store the position for later deletion
+						editor.storage.imageModal = { placeholderPos: pos }
+
+						// Open the modal through the store
+						mediaSelectionStore.open({
+							mode: 'single',
+							fileType: 'image',
+							albumId,
+							onSelect: handleGlobalMediaSelect,
+							onClose: handleGlobalMediaClose
+						})
+					}
+					showMediaDropdown = false
+				}}
+			>
+				Image
+			</button>
+			<button
+				class="dropdown-item"
+				onclick={() => {
+					editor?.chain().focus().insertGalleryPlaceholder().run()
+					showMediaDropdown = false
+				}}
+			>
+				Gallery
+			</button>
+			<button
+				class="dropdown-item"
+				onclick={() => {
+					editor?.chain().focus().insertVideoPlaceholder().run()
+					showMediaDropdown = false
+				}}
+			>
+				Video
+			</button>
+			<button
+				class="dropdown-item"
+				onclick={() => {
+					editor?.chain().focus().insertAudioPlaceholder().run()
+					showMediaDropdown = false
+				}}
+			>
+				Audio
+			</button>
+			<div class="dropdown-separator"></div>
+			<button
+				class="dropdown-item"
+				onclick={() => {
+					editor?.chain().focus().insertGeolocationPlaceholder().run()
+					showMediaDropdown = false
+				}}
+			>
+				Location
+			</button>
+			{#if features.urlEmbed}
+				<button
+					class="dropdown-item"
+					onclick={() => {
+						editor?.chain().focus().insertUrlEmbedPlaceholder().run()
+						showMediaDropdown = false
+					}}
+				>
+					Link
+				</button>
+			{/if}
+		</div>
+	</div>
+{/if}
+
+<!-- Text Style Dropdown Menu Portal -->
+{#if showTextStyleDropdown}
+	<div
+		class="dropdown-menu-portal"
+		style="position: fixed; top: {dropdownPosition.top}px; left: {dropdownPosition.left}px; z-index: 10000;"
+	>
+		<div class="dropdown-menu">
+			<button
+				class="dropdown-item"
+				onclick={() => {
+					editor?.chain().focus().setParagraph().run()
+					showTextStyleDropdown = false
+				}}
+			>
+				Paragraph
+			</button>
+			<div class="dropdown-separator"></div>
+			<button
+				class="dropdown-item"
+				onclick={() => {
+					editor?.chain().focus().toggleHeading({ level: 1 }).run()
+					showTextStyleDropdown = false
+				}}
+			>
+				Heading 1
+			</button>
+			<button
+				class="dropdown-item"
+				onclick={() => {
+					editor?.chain().focus().toggleHeading({ level: 2 }).run()
+					showTextStyleDropdown = false
+				}}
+			>
+				Heading 2
+			</button>
+			<button
+				class="dropdown-item"
+				onclick={() => {
+					editor?.chain().focus().toggleHeading({ level: 3 }).run()
+					showTextStyleDropdown = false
+				}}
+			>
+				Heading 3
+			</button>
+			<div class="dropdown-separator"></div>
+			<button
+				class="dropdown-item"
+				onclick={() => {
+					editor?.chain().focus().toggleBulletList().run()
+					showTextStyleDropdown = false
+				}}
+			>
+				Unordered List
+			</button>
+			<button
+				class="dropdown-item"
+				onclick={() => {
+					editor?.chain().focus().toggleOrderedList().run()
+					showTextStyleDropdown = false
+				}}
+			>
+				Ordered List
+			</button>
+			<button
+				class="dropdown-item"
+				onclick={() => {
+					editor?.chain().focus().toggleTaskList().run()
+					showTextStyleDropdown = false
+				}}
+			>
+				Task List
+			</button>
+			{#if features.codeBlocks}
+				<div class="dropdown-separator"></div>
+				<button
+					class="dropdown-item"
+					onclick={() => {
+						editor?.chain().focus().toggleCodeBlock().run()
+						showTextStyleDropdown = false
+					}}
+				>
+					Code Block
+				</button>
+			{/if}
+			<button
+				class="dropdown-item"
+				onclick={() => {
+					editor?.chain().focus().toggleBlockquote().run()
+					showTextStyleDropdown = false
+				}}
+			>
+				Blockquote
+			</button>
+		</div>
+	</div>
+{/if}
+
+<!-- URL Convert Dropdown -->
+{#if showUrlConvertDropdown && features.urlEmbed}
+	<UrlConvertDropdown
+		x={urlConvertDropdownPosition.x}
+		y={urlConvertDropdownPosition.y}
+		onConvert={handleConvertToEmbed}
+		onDismiss={() => {
+			showUrlConvertDropdown = false
+			urlConvertPos = null
+		}}
+	/>
+{/if}
+
+<!-- Link Context Menu -->
+{#if showLinkContextMenu && linkContextUrl}
+	<LinkContextMenuComponent
+		x={linkContextMenuPosition.x}
+		y={linkContextMenuPosition.y}
+		url={linkContextUrl}
+		onConvertToCard={features.urlEmbed ? handleConvertLinkToEmbed : undefined}
+		onEditLink={handleEditLink}
+		onCopyLink={handleCopyLink}
+		onRemoveLink={handleRemoveLink}
+		onOpenLink={handleOpenLink}
+		onDismiss={() => {
+			showLinkContextMenu = false
+			linkContextPos = null
+			linkContextUrl = null
+		}}
+	/>
+{/if}
+
+<!-- Link Edit Dialog -->
+{#if showLinkEditDialog}
+	<LinkEditDialog
+		x={linkEditDialogPosition.x}
+		y={linkEditDialogPosition.y}
+		currentUrl={linkEditUrl}
+		onSave={handleSaveLink}
+		onCancel={() => {
+			showLinkEditDialog = false
+			linkEditPos = null
+			linkEditUrl = ''
+		}}
+	/>
+{/if}
+
+<!-- Global Media Selection Modal -->
+{#if mediaSelectionState.isOpen}
+	<UnifiedMediaModal
+		bind:isOpen={mediaSelectionState.isOpen}
+		mode={mediaSelectionState.mode}
+		fileType={mediaSelectionState.fileType}
+		albumId={mediaSelectionState.albumId}
+		onSelect={mediaSelectionState.onSelect}
+		onClose={mediaSelectionState.onClose}
+	/>
+{/if}
+
+<style lang="scss">
+	@import '$styles/variables.scss';
+
+	.composer {
+		width: 100%;
+		min-width: 0;
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+	}
+
+	.editor-toolbar {
+		background: var(--edra-button-bg-color);
+		box-sizing: border-box;
+		padding: $unit ($unit-2x + $unit);
+		position: sticky;
+		box-sizing: border-box;
+		top: $unit-9x + $unit-3px;
+		z-index: 10;
+		overflow-x: auto;
+		overflow-y: hidden;
+		white-space: nowrap;
+		-webkit-overflow-scrolling: touch;
+		width: 100%;
+		flex-shrink: 0;
+		backdrop-filter: blur(10px);
+		background: rgba(255, 255, 255, 0.9);
+	}
+
+	.composer--full .editor-toolbar {
+		border-radius: 999px;
+		border: $unit-1px solid rgba(0, 0, 0, 0.08);
+		box-shadow: 0 0 $unit-2x rgba(0, 0, 0, 0.12);
+		background: $gray-95;
+	}
+
+	.edra-editor {
+		width: 100%;
+		flex: 1;
+		min-width: 0;
+		overflow: visible;
+		box-sizing: border-box;
+		padding: 0 $unit-4x;
+		overflow-y: auto;
+	}
+
+	.composer--full .edra-editor :global(.ProseMirror) {
+		min-height: $unit-20x * 2;
+		padding: $unit-4x 0;
+	}
+
+	.composer--inline .edra-editor :global(.ProseMirror) {
+		min-height: $unit-10x;
+		padding: $unit-2x 0;
+	}
+
+	.composer--minimal .edra-editor :global(.ProseMirror) {
+		min-height: $unit-7x + $unit-half;
+		padding: $unit-2x 0;
+	}
+
+	:global(.ProseMirror) {
+		width: 100%;
+		min-height: 100%;
+		position: relative;
+		word-wrap: break-word;
+		white-space: pre-wrap;
+		cursor: auto;
+		-webkit-font-variant-ligatures: none;
+		font-variant-ligatures: none;
+		&:focus {
+			outline: none;
+		}
+	}
+
+	/* Block spacing for visual separation in composer */
+	:global(.ProseMirror p) {
+		margin-top: $unit;
+		margin-bottom: $unit;
+	}
+
+	:global(.ProseMirror h1),
+	:global(.ProseMirror h2),
+	:global(.ProseMirror h3),
+	:global(.ProseMirror h4),
+	:global(.ProseMirror h5),
+	:global(.ProseMirror h6) {
+		padding-top: $unit;
+		padding-bottom: $unit;
+	}
+
+	:global(.ProseMirror ul),
+	:global(.ProseMirror ol) {
+		padding-top: $unit;
+		padding-bottom: $unit;
+	}
+
+	:global(.ProseMirror blockquote) {
+		margin-top: $unit;
+		margin-bottom: $unit;
+	}
+
+	:global(.ProseMirror pre),
+	:global(.ProseMirror .code-wrapper) {
+		margin-top: $unit;
+		margin-bottom: $unit;
+	}
+
+	:global(.ProseMirror hr) {
+		margin-top: $unit;
+		margin-bottom: $unit;
+	}
+
+	:global(.ProseMirror .tableWrapper) {
+		margin-top: $unit;
+		margin-bottom: $unit;
+	}
+
+	:global(.ProseMirror img),
+	:global(.ProseMirror video),
+	:global(.ProseMirror audio),
+	:global(.ProseMirror iframe) {
+		margin-top: $unit;
+		margin-bottom: $unit;
+	}
+
+	:global(.ProseMirror .image-placeholder),
+	:global(.ProseMirror .video-placeholder),
+	:global(.ProseMirror .audio-placeholder),
+	:global(.ProseMirror .gallery-placeholder),
+	:global(.ProseMirror .url-embed-placeholder),
+	:global(.ProseMirror .geolocation-placeholder) {
+		margin-top: $unit;
+		margin-bottom: $unit;
+	}
+
+	:global(.ProseMirror .node-urlEmbed) {
+		padding-top: $unit;
+		padding-bottom: $unit;
+	}
+
+	/* Link styling */
+	:global(.ProseMirror a) {
+		color: $accent-color;
+		text-decoration: none;
+		cursor: pointer;
+	}
+	
+	:global(.ProseMirror a span) {
+		color: inherit !important;
+	}
+
+	:global(.ProseMirror a:hover) {
+		color: $red-40;
+	}
+	
+	:global(.ProseMirror a:hover span) {
+		color: inherit !important;
+	}
+
+	/* Text Style Dropdown Styles */
+	.text-style-dropdown {
+		position: relative;
+		display: inline-block;
+	}
+
+	.dropdown-trigger {
+		display: flex;
+		align-items: center;
+		gap: $unit-half;
+		padding: $unit-6px $unit-12px;
+		background: transparent;
+		border: $unit-1px solid transparent;
+		border-radius: $corner-radius-md;
+		font-size: $unit-14px;
+		font-family: inherit;
+		color: var(--edra-text-color);
+		cursor: pointer;
+		transition: all 0.2s ease;
+		min-width: $unit-15x;
+		justify-content: space-between;
+		height: $unit-4x + $unit-half;
+	}
+
+	.dropdown-trigger:hover {
+		background: rgba(0, 0, 0, 0.06);
+		border-color: transparent;
+	}
+
+	.dropdown-menu {
+		background: white;
+		border: $unit-1px solid #e0e0e0;
+		border-radius: $corner-radius-md;
+		box-shadow: 0 $unit-2px $unit rgba(0, 0, 0, 0.15);
+		min-width: $unit-20x;
+		overflow: hidden;
+	}
+
+	.dropdown-item {
+		display: block;
+		width: 100%;
+		padding: $unit $unit-2x;
+		text-align: left;
+		background: none;
+		border: none;
+		font-size: $unit-14px;
+		font-family: inherit;
+		color: var(--edra-text-color);
+		cursor: pointer;
+		transition: background-color 0.2s ease;
+	}
+
+	.dropdown-item:hover {
+		background-color: #f5f5f5;
+	}
+
+	.dropdown-separator {
+		height: $unit-1px;
+		background-color: #e0e0e0;
+		margin: $unit-half 0;
+	}
+
+	/* Separator in toolbar */
+	:global(.edra-toolbar .separator) {
+		display: inline-block;
+		width: $unit-2px;
+		height: $unit-3x;
+		background-color: #e0e0e0;
+		border-radius: $unit-1px;
+		margin: 0 $unit-half;
+		vertical-align: middle;
+	}
+
+	/* Remove default button backgrounds */
+	:global(.edra-toolbar button) {
+		background: transparent;
+		border: $unit-1px solid transparent;
+		border-radius: $corner-radius-sm;
+		transition: all 0.2s ease;
+	}
+
+	:global(.edra-toolbar button:hover) {
+		background: rgba(0, 0, 0, 0.06);
+		border-color: transparent;
+	}
+
+	:global(.edra-toolbar button.active),
+	:global(.edra-toolbar button[data-active='true']) {
+		background: rgba(0, 0, 0, 0.1);
+		border-color: transparent;
+	}
+
+	/* Thicker strokes for icons */
+	:global(.edra-toolbar svg) {
+		stroke-width: $unit-2px;
+	}
+
+	.edra-loading {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: $unit-4x;
+		gap: $unit;
+		color: $gray-30;
+	}
+
+	:global(.animate-spin) {
+		animation: spin 1s linear infinite;
+	}
+
+	@keyframes spin {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	/* Drag handle styles */
+	:global(.drag-handle) {
+		position: fixed;
+		width: $unit-20px;
+		height: $unit-3x;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: grab;
+		opacity: 0;
+		transition: opacity 0.2s;
+		color: $gray-40;
+		z-index: 50;
+	}
+
+	:global(.drag-handle.hide) {
+		opacity: 0 !important;
+		pointer-events: none;
+	}
+
+	:global(.drag-handle:not(.hide)) {
+		opacity: 1;
+	}
+
+	:global(.drag-handle:active) {
+		cursor: grabbing;
+	}
+
+</style>
diff --git a/src/lib/components/admin/EnhancedComposer.svelte b/src/lib/components/admin/EnhancedComposer.svelte
index 30abe9b..1e6261d 100644
--- a/src/lib/components/admin/EnhancedComposer.svelte
+++ b/src/lib/components/admin/EnhancedComposer.svelte
@@ -1,1347 +1,41 @@
+<!-- 
+	This file is a shim for backward compatibility.
+	The actual implementation is in ./composer/ComposerCore.svelte
+-->
 <script lang="ts">
-	import { type Editor } from '@tiptap/core'
-	import { onMount, setContext } from 'svelte'
-	import { initiateEditor } from '$lib/components/edra/editor.ts'
-	import { getEditorExtensions, EDITOR_PRESETS } from '$lib/components/edra/editor-extensions.js'
-	import { EdraToolbar, EdraBubbleMenu } from '$lib/components/edra/headless/index.js'
-	import LoaderCircle from 'lucide-svelte/icons/loader-circle'
-	import { focusEditor, type EdraProps } from '$lib/components/edra/utils.js'
-	import EdraToolBarIcon from '$lib/components/edra/headless/components/EdraToolBarIcon.svelte'
-	import { commands } from '$lib/components/edra/commands/commands.js'
-	import EnhancedImagePlaceholder from '$lib/components/edra/headless/components/EnhancedImagePlaceholder.svelte'
-	import type { JSONContent } from '@tiptap/core'
+	import ComposerCore from './composer/ComposerCore.svelte'
+	import type { ComposerProps } from './composer/types'
 
-	// Import Edra styles
-	import '$lib/components/edra/headless/style.css'
-	import 'katex/dist/katex.min.css'
-	import '$lib/components/edra/editor.css'
-	import '$lib/components/edra/onedark.css'
+	// Re-export all props
+	let props: ComposerProps = $props()
 
-	// Import menus
-	import LinkMenu from '$lib/components/edra/headless/menus/link-menu.svelte'
-	import TableRowMenu from '$lib/components/edra/headless/menus/table/table-row-menu.svelte'
-	import TableColMenu from '$lib/components/edra/headless/menus/table/table-col-menu.svelte'
-	import UrlConvertDropdown from '$lib/components/edra/headless/components/UrlConvertDropdown.svelte'
-	import LinkContextMenuComponent from '$lib/components/edra/headless/components/LinkContextMenu.svelte'
-	import LinkEditDialog from '$lib/components/edra/headless/components/LinkEditDialog.svelte'
-	import UnifiedMediaModal from './UnifiedMediaModal.svelte'
-	import DragHandle from '$lib/components/edra/drag-handle.svelte'
-	import { mediaSelectionStore } from '$lib/stores/media-selection'
-	import type { Media } from '@prisma/client'
-
-	// Component types
-	type ComposerVariant = 'full' | 'inline' | 'minimal'
-
-	interface Props {
-		variant?: ComposerVariant
-		data?: JSONContent
-		onChange?: (content: JSONContent) => void
-		onCharacterCount?: (count: number) => void
-		placeholder?: string
-		minHeight?: number
-		autofocus?: boolean
-		editable?: boolean
-		class?: string
-		showToolbar?: boolean
-		showSlashCommands?: boolean
-		albumId?: number
-		features?: {
-			imageUpload?: boolean
-			mediaLibrary?: boolean
-			urlEmbed?: boolean
-			tables?: boolean
-			codeBlocks?: boolean
-		}
-	}
-
-	let {
-		variant = 'full',
-		data = $bindable({
-			type: 'doc',
-			content: [{ type: 'paragraph' }]
-		}),
-		onChange,
-		onCharacterCount,
-		placeholder = variant === 'inline' ? "What's on your mind?" : 'Type "/" for commands...',
-		minHeight = variant === 'inline' ? 80 : 400,
-		autofocus = false,
-		editable = true,
-		class: className = '',
-		showToolbar = variant === 'full',
-		showSlashCommands = variant !== 'minimal',
-		albumId,
-		features = {
-			imageUpload: true,
-			mediaLibrary: true,
-			urlEmbed: true,
-			tables: true,
-			codeBlocks: true
-		}
-	}: Props = $props()
-
-	// Set editor context for child components
-	setContext('editorContext', {
-		albumId,
-		contentType: albumId ? 'album' : 'default',
-		isAlbumEditor: !!albumId
-	})
-
-	// State
-	let editor = $state<Editor | undefined>()
-	let element = $state<HTMLElement>()
-	let isLoading = $state(true)
-	let initialized = false
-	const mediaSelectionState = $derived($mediaSelectionStore)
-
-	// Dropdown states
-	let showTextStyleDropdown = $state(false)
-	let showMediaDropdown = $state(false)
-	let dropdownTriggerRef = $state<HTMLElement>()
-	let mediaDropdownTriggerRef = $state<HTMLElement>()
-	let dropdownPosition = $state({ top: 0, left: 0 })
-	let mediaDropdownPosition = $state({ top: 0, left: 0 })
-
-	// URL convert dropdown state
-	let showUrlConvertDropdown = $state(false)
-	let urlConvertDropdownPosition = $state({ x: 0, y: 0 })
-	let urlConvertPos = $state<number | null>(null)
-
-	// Link context menu state
-	let showLinkContextMenu = $state(false)
-	let linkContextMenuPosition = $state({ x: 0, y: 0 })
-	let linkContextUrl = $state<string | null>(null)
-	let linkContextPos = $state<number | null>(null)
-
-	// Link edit dialog state
-	let showLinkEditDialog = $state(false)
-	let linkEditDialogPosition = $state({ x: 0, y: 0 })
-	let linkEditUrl = $state<string>('')
-	let linkEditPos = $state<number | null>(null)
-
-	// Get filtered commands based on variant and features
-	const getFilteredCommands = () => {
-		const filtered = { ...commands }
-
-		// Remove groups based on variant
-		if (variant === 'minimal') {
-			delete filtered['undo-redo']
-			delete filtered['headings']
-			delete filtered['lists']
-			delete filtered['alignment']
-			delete filtered['table']
-			delete filtered['media']
-			delete filtered['fonts']
-		} else if (variant === 'inline') {
-			delete filtered['undo-redo']
-			delete filtered['headings']
-			delete filtered['lists']
-			delete filtered['alignment']
-			delete filtered['table']
-			delete filtered['media']
-		} else {
-			// Full variant - reorganize for toolbar
-			delete filtered['undo-redo']
-			delete filtered['headings'] // In text style dropdown
-			delete filtered['lists'] // In text style dropdown
-			delete filtered['alignment']
-			delete filtered['table']
-			delete filtered['media'] // In media dropdown
-		}
-
-		// Reorganize text formatting for toolbar
-		if (filtered['text-formatting']) {
-			const allCommands = filtered['text-formatting'].commands
-			const basicFormatting = []
-			const advancedFormatting = []
-
-			// Group basic formatting first
-			const basicOrder = ['bold', 'italic', 'underline', 'strike']
-			basicOrder.forEach((name) => {
-				const cmd = allCommands.find((c) => c.name === name)
-				if (cmd) basicFormatting.push(cmd)
-			})
-
-			// Then link and code
-			const advancedOrder = ['link', 'code']
-			advancedOrder.forEach((name) => {
-				const cmd = allCommands.find((c) => c.name === name)
-				if (cmd) advancedFormatting.push(cmd)
-			})
-
-			// Create two groups
-			filtered['basic-formatting'] = {
-				name: 'Basic Formatting',
-				label: 'Basic Formatting',
-				commands: basicFormatting
-			}
-
-			filtered['advanced-formatting'] = {
-				name: 'Advanced Formatting',
-				label: 'Advanced Formatting',
-				commands: advancedFormatting
-			}
-
-			// Remove original text-formatting
-			delete filtered['text-formatting']
-		}
-
-		return filtered
-	}
-
-	// Get media commands, but filter out based on features
-	const getMediaCommands = () => {
-		if (!commands.media) return []
-
-		let mediaCommands = [...commands.media.commands]
-
-		// Filter based on features
-		if (!features.urlEmbed) {
-			mediaCommands = mediaCommands.filter((cmd) => cmd.name !== 'iframe-placeholder')
-		}
-
-		return mediaCommands
-	}
-
-	const filteredCommands = getFilteredCommands()
-	const colorCommands = commands.colors?.commands || []
-	const excludedCommands = ['colors', 'fonts']
-
-	// Get current text style for dropdown
-	const getCurrentTextStyle = (editor: Editor) => {
-		if (editor.isActive('heading', { level: 1 })) return 'Heading 1'
-		if (editor.isActive('heading', { level: 2 })) return 'Heading 2'
-		if (editor.isActive('heading', { level: 3 })) return 'Heading 3'
-		if (editor.isActive('bulletList')) return 'Bullet List'
-		if (editor.isActive('orderedList')) return 'Ordered List'
-		if (editor.isActive('taskList')) return 'Task List'
-		if (editor.isActive('codeBlock')) return 'Code Block'
-		if (editor.isActive('blockquote')) return 'Blockquote'
-		return 'Paragraph'
-	}
-
-	// Derived state for current text style
-	let currentTextStyle = $derived(editor ? getCurrentTextStyle(editor) : 'Paragraph')
-
-	// Calculate dropdown position
-	const updateDropdownPosition = () => {
-		if (dropdownTriggerRef) {
-			const rect = dropdownTriggerRef.getBoundingClientRect()
-			dropdownPosition = {
-				top: rect.bottom + 4,
-				left: rect.left
-			}
-		}
-	}
-
-	// Toggle dropdown with position update
-	const toggleDropdown = () => {
-		if (!showTextStyleDropdown) {
-			updateDropdownPosition()
-		}
-		showTextStyleDropdown = !showTextStyleDropdown
-	}
-
-	// Update media dropdown position
-	const updateMediaDropdownPosition = () => {
-		if (mediaDropdownTriggerRef) {
-			const rect = mediaDropdownTriggerRef.getBoundingClientRect()
-			mediaDropdownPosition = {
-				top: rect.bottom + 4,
-				left: rect.left
-			}
-		}
-	}
-
-	// Toggle media dropdown
-	const toggleMediaDropdown = () => {
-		if (!showMediaDropdown) {
-			updateMediaDropdownPosition()
-		}
-		showMediaDropdown = !showMediaDropdown
-	}
-
-	// Close dropdown when clicking outside
-	const handleClickOutside = (event: MouseEvent) => {
-		const target = event.target as HTMLElement
-		if (!dropdownTriggerRef?.contains(target) && !target.closest('.dropdown-menu-portal')) {
-			showTextStyleDropdown = false
-		}
-		if (!mediaDropdownTriggerRef?.contains(target) && !target.closest('.media-dropdown-portal')) {
-			showMediaDropdown = false
-		}
-		if (!target.closest('.url-convert-dropdown')) {
-			showUrlConvertDropdown = false
-		}
-		if (!target.closest('.link-context-menu')) {
-			showLinkContextMenu = false
-		}
-		if (!target.closest('.link-edit-dialog')) {
-			showLinkEditDialog = false
-		}
-	}
-
-	// URL convert handlers
-	const handleShowUrlConvertDropdown = (pos: number, url: string) => {
-		if (!editor) return
-		const coords = editor.view.coordsAtPos(pos)
-		urlConvertDropdownPosition = { x: coords.left, y: coords.bottom + 5 }
-		urlConvertPos = pos
-		showUrlConvertDropdown = true
-	}
-
-	const handleConvertToEmbed = () => {
-		if (!editor || urlConvertPos === null) return
-		editor.commands.convertLinkToEmbed(urlConvertPos)
-		showUrlConvertDropdown = false
-		urlConvertPos = null
-	}
-
-	// Link context menu handlers
-	const handleShowLinkContextMenu = (
-		pos: number,
-		url: string,
-		coords: { x: number; y: number }
-	) => {
-		if (!editor) return
-		linkContextMenuPosition = { x: coords.x, y: coords.y + 5 }
-		linkContextUrl = url
-		linkContextPos = pos
-		showLinkContextMenu = true
-	}
-
-	const handleConvertLinkToEmbed = () => {
-		if (!editor || linkContextPos === null) return
-		editor.commands.convertLinkToEmbed(linkContextPos)
-		showLinkContextMenu = false
-		linkContextPos = null
-		linkContextUrl = null
-	}
-
-	const handleEditLink = () => {
-		if (!editor || !linkContextUrl) return
-		linkEditUrl = linkContextUrl
-		linkEditPos = linkContextPos
-		linkEditDialogPosition = { ...linkContextMenuPosition }
-		showLinkEditDialog = true
-		showLinkContextMenu = false
-	}
-
-	const handleSaveLink = (newUrl: string) => {
-		if (!editor) return
-		editor.chain().focus().extendMarkRange('link').setLink({ href: newUrl }).run()
-		showLinkEditDialog = false
-		linkEditPos = null
-		linkEditUrl = ''
-	}
-
-	const handleCopyLink = () => {
-		if (!linkContextUrl) return
-		navigator.clipboard.writeText(linkContextUrl)
-		showLinkContextMenu = false
-		linkContextPos = null
-		linkContextUrl = null
-	}
-
-	const handleRemoveLink = () => {
-		if (!editor) return
-		editor.chain().focus().extendMarkRange('link').unsetLink().run()
-		showLinkContextMenu = false
-		linkContextPos = null
-		linkContextUrl = null
-	}
-
-	const handleOpenLink = () => {
-		if (!linkContextUrl) return
-		window.open(linkContextUrl, '_blank', 'noopener,noreferrer')
-		showLinkContextMenu = false
-		linkContextPos = null
-		linkContextUrl = null
-	}
-
-	// Handle media selection from the global store
-	function handleGlobalMediaSelect(media: Media | Media[]) {
-		if (!editor) return
-
-		const selectedMedia = Array.isArray(media) ? media[0] : media
-		if (selectedMedia) {
-			// Set a reasonable default width (max 600px)
-			const displayWidth =
-				selectedMedia.width && selectedMedia.width > 600 ? 600 : selectedMedia.width
-
-			editor
-				.chain()
-				.focus()
-				.insertContent({
-					type: 'image',
-					attrs: {
-						src: selectedMedia.url,
-						alt: selectedMedia.altText || '',
-						title: selectedMedia.description || '',
-						width: displayWidth,
-						height: selectedMedia.height,
-						align: 'center',
-						mediaId: selectedMedia.id?.toString()
-					}
-				})
-				.run()
-		}
-
-		// Close the modal
-		mediaSelectionStore.close()
-
-		// Remove the placeholder if it exists
-		if (editor.storage.imageModal?.placeholderPos !== undefined) {
-			const pos = editor.storage.imageModal.placeholderPos
-			editor
-				.chain()
-				.focus()
-				.deleteRange({ from: pos, to: pos + 1 })
-				.run()
-			editor.storage.imageModal.placeholderPos = undefined
-		}
-	}
-
-	function handleGlobalMediaClose() {
-		mediaSelectionStore.close()
-
-		// Remove the placeholder if user cancelled
-		if (editor && editor.storage.imageModal?.placeholderPos !== undefined) {
-			const pos = editor.storage.imageModal.placeholderPos
-			editor
-				.chain()
-				.focus()
-				.deleteRange({ from: pos, to: pos + 1 })
-				.run()
-			editor.storage.imageModal.placeholderPos = undefined
-		}
-	}
-
-	// Handle paste for images
-	function handlePaste(view: any, event: ClipboardEvent) {
-		const clipboardData = event.clipboardData
-		if (!clipboardData) return false
-
-		// Check for images first
-		const imageItem = Array.from(clipboardData.items).find(
-			(item) => item.type.indexOf('image') === 0
-		)
-		if (imageItem && features.imageUpload) {
-			const file = imageItem.getAsFile()
-			if (!file) return false
-
-			// Check file size (2MB max)
-			const filesize = file.size / 1024 / 1024
-			if (filesize > 2) {
-				alert(`Image too large! File size: ${filesize.toFixed(2)} MB (max 2MB)`)
-				return true
-			}
-
-			// Upload to our media API
-			uploadImage(file)
-			return true // Prevent default paste behavior
-		}
-
-		// Handle text paste - preserve links while stripping other formatting
-		const htmlData = clipboardData.getData('text/html')
-		const plainText = clipboardData.getData('text/plain')
-
-		if (htmlData && plainText) {
-			event.preventDefault()
-
-			// Use editor commands to insert HTML content
-			const editorInstance = (view as any).editor
-			if (editorInstance) {
-				editorInstance
-					.chain()
-					.focus()
-					.insertContent(htmlData, { parseOptions: { preserveWhitespace: false } })
-					.run()
-			} else {
-				// Fallback to plain text
-				const { state, dispatch } = view
-				const { selection } = state
-				const transaction = state.tr.insertText(plainText, selection.from, selection.to)
-				dispatch(transaction)
-			}
-
-			return true
-		}
-
-		return false
-	}
-
-	async function uploadImage(file: File) {
-		if (!editor || !features.imageUpload) return
-
-		// Create a placeholder while uploading
-		const placeholderSrc = URL.createObjectURL(file)
-		editor.commands.insertContent({
-			type: 'image',
-			attrs: {
-				src: placeholderSrc,
-				alt: '',
-				title: '',
-				mediaId: null
-			}
-		})
-
-		try {
-			const auth = localStorage.getItem('admin_auth')
-			if (!auth) {
-				throw new Error('Not authenticated')
-			}
-
-			const formData = new FormData()
-			formData.append('file', file)
-
-			// Add albumId if available
-			if (albumId) {
-				formData.append('albumId', albumId.toString())
-			}
-
-			const response = await fetch('/api/media/upload', {
-				method: 'POST',
-				headers: {
-					Authorization: `Basic ${auth}`
-				},
-				body: formData
-			})
-
-			if (!response.ok) {
-				throw new Error('Upload failed')
-			}
-
-			const media = await response.json()
-
-			// Replace placeholder with actual URL
-			const displayWidth = media.width && media.width > 600 ? 600 : media.width
-
-			editor.commands.insertContent({
-				type: 'image',
-				attrs: {
-					src: media.url,
-					alt: media.filename || '',
-					title: media.description || '',
-					width: displayWidth,
-					height: media.height,
-					align: 'center',
-					mediaId: media.id?.toString()
-				}
-			})
-
-			// Clean up the object URL
-			URL.revokeObjectURL(placeholderSrc)
-		} catch (error) {
-			console.error('Image upload failed:', error)
-			alert('Failed to upload image. Please try again.')
-			// Remove the placeholder on error
-			editor.commands.undo()
-		}
-	}
-
-	// Update content when editor changes
-	function handleUpdate({ editor: updatedEditor, transaction }: any) {
-		// Skip the first update to avoid circular updates
-		if (!initialized) {
-			initialized = true
-			return
-		}
-
-		// Dismiss URL convert dropdown if user types
-		if (showUrlConvertDropdown && transaction.docChanged) {
-			const hasTextChange = transaction.steps.some(
-				(step: any) =>
-					step.toJSON().stepType === 'replace' || step.toJSON().stepType === 'replaceAround'
-			)
-			if (hasTextChange) {
-				showUrlConvertDropdown = false
-				urlConvertPos = null
-			}
-		}
-
-		const json = updatedEditor.getJSON()
-		data = json
-		onChange?.(json)
-
-		// Calculate character count if callback provided
-		if (onCharacterCount) {
-			const text = updatedEditor.getText()
-			onCharacterCount(text.length)
-		}
-	}
-
-	$effect(() => {
-		if (
-			showTextStyleDropdown ||
-			showMediaDropdown ||
-			showUrlConvertDropdown ||
-			showLinkContextMenu ||
-			showLinkEditDialog
-		) {
-			document.addEventListener('click', handleClickOutside)
-			return () => {
-				document.removeEventListener('click', handleClickOutside)
-			}
-		}
-	})
-
-	onMount(() => {
-		// Get extensions with custom options
-		const extensions = getEditorExtensions({
-			showSlashCommands,
-			onShowUrlConvertDropdown: features.urlEmbed ? handleShowUrlConvertDropdown : undefined,
-			onShowLinkContextMenu: handleShowLinkContextMenu,
-			imagePlaceholderComponent: EnhancedImagePlaceholder
-		})
-
-		// Initialize editor storage for image modal
-		const newEditor = initiateEditor(
-			element,
-			data,
-			undefined, // no character limit by default
-			extensions,
-			{
-				editable,
-				onUpdate: handleUpdate,
-				editorProps: {
-					attributes: {
-						class: 'prose prose-sm max-w-none focus:outline-none'
-					},
-					handlePaste: features.imageUpload ? handlePaste : undefined
-				}
-			},
-			placeholder
-		)
-
-		// Initialize storage for image modal
-		newEditor.storage.imageModal = { autoOpen: false }
-
-		editor = newEditor
-
-		// Auto-focus if requested
-		if (autofocus) {
-			setTimeout(() => {
-				newEditor.commands.focus()
-			}, 100)
-		}
-
-		isLoading = false
-
-		return () => editor?.destroy()
-	})
-
-	// Public API
-	export function save(): JSONContent | null {
-		return editor?.getJSON() || null
-	}
-
-	export function clear() {
-		editor?.commands.clearContent()
-	}
+	// Re-export component reference
+	let composerRef = $state<ComposerCore>()
 
+	// Re-export public methods
 	export function focus() {
-		editor?.commands.focus()
+		composerRef?.focus()
 	}
 
 	export function blur() {
-		editor?.commands.blur()
+		composerRef?.blur()
+	}
+
+	export function clear() {
+		composerRef?.clear()
+	}
+
+	export function isEmpty() {
+		return composerRef?.isEmpty() || true
 	}
 
 	export function getContent() {
-		return editor?.getJSON()
+		return composerRef?.getContent()
 	}
 
 	export function getText() {
-		return editor?.getText() || ''
+		return composerRef?.getText() || ''
 	}
 </script>
 
-<div class={`composer composer--${variant} ${className}`}>
-	{#if showToolbar && editor && !isLoading}
-		<div class="editor-toolbar">
-			<div class="edra-toolbar">
-				<!-- Text Style Dropdown -->
-				<div class="text-style-dropdown">
-					<button bind:this={dropdownTriggerRef} class="dropdown-trigger" onclick={toggleDropdown}>
-						<span>{currentTextStyle}</span>
-						<svg
-							width="12"
-							height="12"
-							viewBox="0 0 12 12"
-							fill="none"
-							xmlns="http://www.w3.org/2000/svg"
-						>
-							<path
-								d="M3 4.5L6 7.5L9 4.5"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-							/>
-						</svg>
-					</button>
-				</div>
-
-				<span class="separator"></span>
-
-				{#each Object.keys(filteredCommands).filter((key) => !excludedCommands.includes(key)) as keys}
-					{@const groups = filteredCommands[keys].commands}
-					{#each groups as command}
-						<EdraToolBarIcon {command} {editor} />
-					{/each}
-					<span class="separator"></span>
-				{/each}
-
-				{#if features.mediaLibrary}
-					<!-- Media Dropdown -->
-					<div class="text-style-dropdown">
-						<button
-							bind:this={mediaDropdownTriggerRef}
-							class="dropdown-trigger"
-							onclick={toggleMediaDropdown}
-						>
-							<span>Insert</span>
-							<svg
-								width="12"
-								height="12"
-								viewBox="0 0 12 12"
-								fill="none"
-								xmlns="http://www.w3.org/2000/svg"
-							>
-								<path
-									d="M3 4.5L6 7.5L9 4.5"
-									stroke="currentColor"
-									stroke-width="2"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-								/>
-							</svg>
-						</button>
-					</div>
-
-					<span class="separator"></span>
-				{/if}
-
-				{#if colorCommands.length > 0}
-					<EdraToolBarIcon
-						command={colorCommands[0]}
-						{editor}
-						style={`color: ${editor.getAttributes('textStyle').color};`}
-						onclick={() => {
-							const color = editor.getAttributes('textStyle').color
-							const hasColor = editor.isActive('textStyle', { color })
-							if (hasColor) {
-								editor.chain().focus().unsetColor().run()
-							} else {
-								const color = prompt('Enter the color of the text:')
-								if (color !== null) {
-									editor.chain().focus().setColor(color).run()
-								}
-							}
-						}}
-					/>
-					<EdraToolBarIcon
-						command={colorCommands[1]}
-						{editor}
-						style={`background-color: ${editor.getAttributes('highlight').color};`}
-						onclick={() => {
-							const hasHightlight = editor.isActive('highlight')
-							if (hasHightlight) {
-								editor.chain().focus().unsetHighlight().run()
-							} else {
-								const color = prompt('Enter the color of the highlight:')
-								if (color !== null) {
-									editor.chain().focus().setHighlight({ color }).run()
-								}
-							}
-						}}
-					/>
-				{/if}
-			</div>
-		</div>
-	{/if}
-
-	{#if editor}
-		<LinkMenu {editor} />
-		{#if features.tables}
-			<TableRowMenu {editor} />
-			<TableColMenu {editor} />
-		{/if}
-	{/if}
-
-	{#if !editor}
-		<div class="edra-loading">
-			<LoaderCircle class="animate-spin" /> Loading...
-		</div>
-	{/if}
-
-	<div
-		bind:this={element}
-		role="button"
-		tabindex="0"
-		onclick={(event) => focusEditor(editor, event)}
-		onkeydown={(event) => {
-			if (event.key === 'Enter' || event.key === ' ') {
-				focusEditor(editor, event)
-			}
-		}}
-		class="edra-editor"
-		class:with-toolbar={showToolbar}
-		style={`min-height: ${minHeight}px`}
-	></div>
-	
-	{#if editor}
-		<DragHandle {editor} />
-	{/if}
-</div>
-
-<!-- Media Dropdown Portal -->
-{#if showMediaDropdown && features.mediaLibrary}
-	<div
-		class="media-dropdown-portal"
-		style="position: fixed; top: {mediaDropdownPosition.top}px; left: {mediaDropdownPosition.left}px; z-index: 10000;"
-	>
-		<div class="dropdown-menu">
-			<button
-				class="dropdown-item"
-				onclick={() => {
-					if (editor) {
-						// Get current position before inserting placeholder
-						const pos = editor.state.selection.anchor
-
-						// Insert placeholder
-						editor.chain().focus().insertImagePlaceholder().run()
-
-						// Store the position for later deletion
-						editor.storage.imageModal = { placeholderPos: pos }
-
-						// Open the modal through the store
-						mediaSelectionStore.open({
-							mode: 'single',
-							fileType: 'image',
-							albumId,
-							onSelect: handleGlobalMediaSelect,
-							onClose: handleGlobalMediaClose
-						})
-					}
-					showMediaDropdown = false
-				}}
-			>
-				Image
-			</button>
-			<button
-				class="dropdown-item"
-				onclick={() => {
-					editor?.chain().focus().insertGalleryPlaceholder().run()
-					showMediaDropdown = false
-				}}
-			>
-				Gallery
-			</button>
-			<button
-				class="dropdown-item"
-				onclick={() => {
-					editor?.chain().focus().insertVideoPlaceholder().run()
-					showMediaDropdown = false
-				}}
-			>
-				Video
-			</button>
-			<button
-				class="dropdown-item"
-				onclick={() => {
-					editor?.chain().focus().insertAudioPlaceholder().run()
-					showMediaDropdown = false
-				}}
-			>
-				Audio
-			</button>
-			<div class="dropdown-separator"></div>
-			<button
-				class="dropdown-item"
-				onclick={() => {
-					editor?.chain().focus().insertGeolocationPlaceholder().run()
-					showMediaDropdown = false
-				}}
-			>
-				Location
-			</button>
-			{#if features.urlEmbed}
-				<button
-					class="dropdown-item"
-					onclick={() => {
-						editor?.chain().focus().insertUrlEmbedPlaceholder().run()
-						showMediaDropdown = false
-					}}
-				>
-					Link
-				</button>
-			{/if}
-		</div>
-	</div>
-{/if}
-
-<!-- Text Style Dropdown Menu Portal -->
-{#if showTextStyleDropdown}
-	<div
-		class="dropdown-menu-portal"
-		style="position: fixed; top: {dropdownPosition.top}px; left: {dropdownPosition.left}px; z-index: 10000;"
-	>
-		<div class="dropdown-menu">
-			<button
-				class="dropdown-item"
-				onclick={() => {
-					editor?.chain().focus().setParagraph().run()
-					showTextStyleDropdown = false
-				}}
-			>
-				Paragraph
-			</button>
-			<div class="dropdown-separator"></div>
-			<button
-				class="dropdown-item"
-				onclick={() => {
-					editor?.chain().focus().toggleHeading({ level: 1 }).run()
-					showTextStyleDropdown = false
-				}}
-			>
-				Heading 1
-			</button>
-			<button
-				class="dropdown-item"
-				onclick={() => {
-					editor?.chain().focus().toggleHeading({ level: 2 }).run()
-					showTextStyleDropdown = false
-				}}
-			>
-				Heading 2
-			</button>
-			<button
-				class="dropdown-item"
-				onclick={() => {
-					editor?.chain().focus().toggleHeading({ level: 3 }).run()
-					showTextStyleDropdown = false
-				}}
-			>
-				Heading 3
-			</button>
-			<div class="dropdown-separator"></div>
-			<button
-				class="dropdown-item"
-				onclick={() => {
-					editor?.chain().focus().toggleBulletList().run()
-					showTextStyleDropdown = false
-				}}
-			>
-				Unordered List
-			</button>
-			<button
-				class="dropdown-item"
-				onclick={() => {
-					editor?.chain().focus().toggleOrderedList().run()
-					showTextStyleDropdown = false
-				}}
-			>
-				Ordered List
-			</button>
-			<button
-				class="dropdown-item"
-				onclick={() => {
-					editor?.chain().focus().toggleTaskList().run()
-					showTextStyleDropdown = false
-				}}
-			>
-				Task List
-			</button>
-			{#if features.codeBlocks}
-				<div class="dropdown-separator"></div>
-				<button
-					class="dropdown-item"
-					onclick={() => {
-						editor?.chain().focus().toggleCodeBlock().run()
-						showTextStyleDropdown = false
-					}}
-				>
-					Code Block
-				</button>
-			{/if}
-			<button
-				class="dropdown-item"
-				onclick={() => {
-					editor?.chain().focus().toggleBlockquote().run()
-					showTextStyleDropdown = false
-				}}
-			>
-				Blockquote
-			</button>
-		</div>
-	</div>
-{/if}
-
-<!-- URL Convert Dropdown -->
-{#if showUrlConvertDropdown && features.urlEmbed}
-	<UrlConvertDropdown
-		x={urlConvertDropdownPosition.x}
-		y={urlConvertDropdownPosition.y}
-		onConvert={handleConvertToEmbed}
-		onDismiss={() => {
-			showUrlConvertDropdown = false
-			urlConvertPos = null
-		}}
-	/>
-{/if}
-
-<!-- Link Context Menu -->
-{#if showLinkContextMenu && linkContextUrl}
-	<LinkContextMenuComponent
-		x={linkContextMenuPosition.x}
-		y={linkContextMenuPosition.y}
-		url={linkContextUrl}
-		onConvertToCard={features.urlEmbed ? handleConvertLinkToEmbed : undefined}
-		onEditLink={handleEditLink}
-		onCopyLink={handleCopyLink}
-		onRemoveLink={handleRemoveLink}
-		onOpenLink={handleOpenLink}
-		onDismiss={() => {
-			showLinkContextMenu = false
-			linkContextPos = null
-			linkContextUrl = null
-		}}
-	/>
-{/if}
-
-<!-- Link Edit Dialog -->
-{#if showLinkEditDialog}
-	<LinkEditDialog
-		x={linkEditDialogPosition.x}
-		y={linkEditDialogPosition.y}
-		currentUrl={linkEditUrl}
-		onSave={handleSaveLink}
-		onCancel={() => {
-			showLinkEditDialog = false
-			linkEditPos = null
-			linkEditUrl = ''
-		}}
-	/>
-{/if}
-
-<!-- Global Media Selection Modal -->
-{#if mediaSelectionState.isOpen}
-	<UnifiedMediaModal
-		bind:isOpen={mediaSelectionState.isOpen}
-		mode={mediaSelectionState.mode}
-		fileType={mediaSelectionState.fileType}
-		albumId={mediaSelectionState.albumId}
-		onSelect={mediaSelectionState.onSelect}
-		onClose={mediaSelectionState.onClose}
-	/>
-{/if}
-
-<style lang="scss">
-	@import '$styles/variables.scss';
-
-	.composer {
-		width: 100%;
-		min-width: 0;
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-	}
-
-	.editor-toolbar {
-		background: var(--edra-button-bg-color);
-		box-sizing: border-box;
-		padding: $unit ($unit-2x + $unit);
-		position: sticky;
-		box-sizing: border-box;
-		top: $unit-9x + $unit-3px;
-		z-index: 10;
-		overflow-x: auto;
-		overflow-y: hidden;
-		white-space: nowrap;
-		-webkit-overflow-scrolling: touch;
-		width: 100%;
-		flex-shrink: 0;
-		backdrop-filter: blur(10px);
-		background: rgba(255, 255, 255, 0.9);
-	}
-
-	.composer--full .editor-toolbar {
-		border-radius: 999px;
-		border: $unit-1px solid rgba(0, 0, 0, 0.08);
-		box-shadow: 0 0 $unit-2x rgba(0, 0, 0, 0.12);
-		background: $gray-95;
-	}
-
-	.edra-editor {
-		width: 100%;
-		flex: 1;
-		min-width: 0;
-		overflow: visible;
-		box-sizing: border-box;
-		padding: 0 $unit-4x;
-		overflow-y: auto;
-	}
-
-	.composer--full .edra-editor :global(.ProseMirror) {
-		min-height: $unit-20x * 2;
-		padding: $unit-4x 0;
-	}
-
-	.composer--inline .edra-editor :global(.ProseMirror) {
-		min-height: $unit-10x;
-		padding: $unit-2x 0;
-	}
-
-	.composer--minimal .edra-editor :global(.ProseMirror) {
-		min-height: $unit-7x + $unit-half;
-		padding: $unit-2x 0;
-	}
-
-	:global(.ProseMirror) {
-		width: 100%;
-		min-height: 100%;
-		position: relative;
-		word-wrap: break-word;
-		white-space: pre-wrap;
-		cursor: auto;
-		-webkit-font-variant-ligatures: none;
-		font-variant-ligatures: none;
-		&:focus {
-			outline: none;
-		}
-	}
-
-	/* Block spacing for visual separation in composer */
-	:global(.ProseMirror p) {
-		margin-top: $unit;
-		margin-bottom: $unit;
-	}
-
-	:global(.ProseMirror h1),
-	:global(.ProseMirror h2),
-	:global(.ProseMirror h3),
-	:global(.ProseMirror h4),
-	:global(.ProseMirror h5),
-	:global(.ProseMirror h6) {
-		padding-top: $unit;
-		padding-bottom: $unit;
-	}
-
-	:global(.ProseMirror ul),
-	:global(.ProseMirror ol) {
-		padding-top: $unit;
-		padding-bottom: $unit;
-	}
-
-	:global(.ProseMirror blockquote) {
-		margin-top: $unit;
-		margin-bottom: $unit;
-	}
-
-	:global(.ProseMirror pre),
-	:global(.ProseMirror .code-wrapper) {
-		margin-top: $unit;
-		margin-bottom: $unit;
-	}
-
-	:global(.ProseMirror hr) {
-		margin-top: $unit;
-		margin-bottom: $unit;
-	}
-
-	:global(.ProseMirror .tableWrapper) {
-		margin-top: $unit;
-		margin-bottom: $unit;
-	}
-
-	:global(.ProseMirror img),
-	:global(.ProseMirror video),
-	:global(.ProseMirror audio),
-	:global(.ProseMirror iframe) {
-		margin-top: $unit;
-		margin-bottom: $unit;
-	}
-
-	:global(.ProseMirror .image-placeholder),
-	:global(.ProseMirror .video-placeholder),
-	:global(.ProseMirror .audio-placeholder),
-	:global(.ProseMirror .gallery-placeholder),
-	:global(.ProseMirror .url-embed-placeholder),
-	:global(.ProseMirror .geolocation-placeholder) {
-		margin-top: $unit;
-		margin-bottom: $unit;
-	}
-
-	:global(.ProseMirror .node-urlEmbed) {
-		padding-top: $unit;
-		padding-bottom: $unit;
-	}
-
-	/* Link styling */
-	:global(.ProseMirror a) {
-		color: $accent-color;
-		text-decoration: none;
-		cursor: pointer;
-	}
-	
-	:global(.ProseMirror a span) {
-		color: inherit !important;
-	}
-
-	:global(.ProseMirror a:hover) {
-		color: $red-40;
-	}
-	
-	:global(.ProseMirror a:hover span) {
-		color: inherit !important;
-	}
-
-	/* Text Style Dropdown Styles */
-	.text-style-dropdown {
-		position: relative;
-		display: inline-block;
-	}
-
-	.dropdown-trigger {
-		display: flex;
-		align-items: center;
-		gap: $unit-half;
-		padding: $unit-6px $unit-12px;
-		background: transparent;
-		border: $unit-1px solid transparent;
-		border-radius: $corner-radius-md;
-		font-size: $unit-14px;
-		font-family: inherit;
-		color: var(--edra-text-color);
-		cursor: pointer;
-		transition: all 0.2s ease;
-		min-width: $unit-15x;
-		justify-content: space-between;
-		height: $unit-4x + $unit-half;
-	}
-
-	.dropdown-trigger:hover {
-		background: rgba(0, 0, 0, 0.06);
-		border-color: transparent;
-	}
-
-	.dropdown-menu {
-		background: white;
-		border: $unit-1px solid #e0e0e0;
-		border-radius: $corner-radius-md;
-		box-shadow: 0 $unit-2px $unit rgba(0, 0, 0, 0.15);
-		min-width: $unit-20x;
-		overflow: hidden;
-	}
-
-	.dropdown-item {
-		display: block;
-		width: 100%;
-		padding: $unit $unit-2x;
-		text-align: left;
-		background: none;
-		border: none;
-		font-size: $unit-14px;
-		font-family: inherit;
-		color: var(--edra-text-color);
-		cursor: pointer;
-		transition: background-color 0.2s ease;
-	}
-
-	.dropdown-item:hover {
-		background-color: #f5f5f5;
-	}
-
-	.dropdown-separator {
-		height: $unit-1px;
-		background-color: #e0e0e0;
-		margin: $unit-half 0;
-	}
-
-	/* Separator in toolbar */
-	:global(.edra-toolbar .separator) {
-		display: inline-block;
-		width: $unit-2px;
-		height: $unit-3x;
-		background-color: #e0e0e0;
-		border-radius: $unit-1px;
-		margin: 0 $unit-half;
-		vertical-align: middle;
-	}
-
-	/* Remove default button backgrounds */
-	:global(.edra-toolbar button) {
-		background: transparent;
-		border: $unit-1px solid transparent;
-		border-radius: $corner-radius-sm;
-		transition: all 0.2s ease;
-	}
-
-	:global(.edra-toolbar button:hover) {
-		background: rgba(0, 0, 0, 0.06);
-		border-color: transparent;
-	}
-
-	:global(.edra-toolbar button.active),
-	:global(.edra-toolbar button[data-active='true']) {
-		background: rgba(0, 0, 0, 0.1);
-		border-color: transparent;
-	}
-
-	/* Thicker strokes for icons */
-	:global(.edra-toolbar svg) {
-		stroke-width: $unit-2px;
-	}
-
-	.edra-loading {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: $unit-4x;
-		gap: $unit;
-		color: $gray-30;
-	}
-
-	:global(.animate-spin) {
-		animation: spin 1s linear infinite;
-	}
-
-	@keyframes spin {
-		from {
-			transform: rotate(0deg);
-		}
-		to {
-			transform: rotate(360deg);
-		}
-	}
-
-	/* Drag handle styles */
-	:global(.drag-handle) {
-		position: fixed;
-		width: $unit-20px;
-		height: $unit-3x;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		cursor: grab;
-		opacity: 0;
-		transition: opacity 0.2s;
-		color: $gray-40;
-		z-index: 50;
-	}
-
-	:global(.drag-handle.hide) {
-		opacity: 0 !important;
-		pointer-events: none;
-	}
-
-	:global(.drag-handle:not(.hide)) {
-		opacity: 1;
-	}
-
-	:global(.drag-handle:active) {
-		cursor: grabbing;
-	}
-
-</style>
+<ComposerCore bind:this={composerRef} {...props} />
\ No newline at end of file
diff --git a/src/lib/components/admin/composer/ComposerCore.svelte b/src/lib/components/admin/composer/ComposerCore.svelte
new file mode 100644
index 0000000..7d9d889
--- /dev/null
+++ b/src/lib/components/admin/composer/ComposerCore.svelte
@@ -0,0 +1,377 @@
+<script lang="ts">
+	import { type Editor } from '@tiptap/core'
+	import { onMount, setContext } from 'svelte'
+	import { initiateEditor } from '$lib/components/edra/editor.ts'
+	import { getEditorExtensions, EDITOR_PRESETS } from '$lib/components/edra/editor-extensions.js'
+	import LoaderCircle from 'lucide-svelte/icons/loader-circle'
+	import LinkMenu from '$lib/components/edra/headless/menus/link-menu.svelte'
+	import TableRowMenu from '$lib/components/edra/headless/menus/table/table-row-menu.svelte'
+	import TableColMenu from '$lib/components/edra/headless/menus/table/table-col-menu.svelte'
+	import DragHandle from '$lib/components/edra/drag-handle.svelte'
+	import EnhancedImagePlaceholder from '$lib/components/edra/headless/components/EnhancedImagePlaceholder.svelte'
+	import UnifiedMediaModal from '../UnifiedMediaModal.svelte'
+	import { mediaSelectionStore } from '$lib/stores/media-selection'
+	import type { Media } from '@prisma/client'
+	
+	// Import new components
+	import ComposerToolbar from './ComposerToolbar.svelte'
+	import TextStyleDropdown from './TextStyleDropdown.svelte'
+	import MediaInsertDropdown from './MediaInsertDropdown.svelte'
+	import ComposerLinkManager from './ComposerLinkManager.svelte'
+	import { ComposerMediaHandler } from './ComposerMediaHandler.svelte'
+	import { useComposerEvents } from './useComposerEvents.svelte'
+	import { useDropdown } from './useDropdown.svelte'
+	import type { ComposerProps } from './types'
+	import {
+		getCurrentTextStyle,
+		getFilteredCommands,
+		getColorCommands,
+		excludedCommands,
+		getDefaultPlaceholder,
+		getDefaultMinHeight,
+		shouldShowToolbar,
+		shouldShowSlashCommands,
+		getDefaultFeatures
+	} from './editorConfig'
+
+	// Import Edra styles
+	import '$lib/components/edra/headless/style.css'
+	import 'katex/dist/katex.min.css'
+	import '$lib/components/edra/editor.css'
+	import '$lib/components/edra/onedark.css'
+
+	let {
+		variant = 'full',
+		data = $bindable({
+			type: 'doc',
+			content: [{ type: 'paragraph' }]
+		}),
+		onChange,
+		onCharacterCount,
+		placeholder = getDefaultPlaceholder(variant),
+		minHeight = getDefaultMinHeight(variant),
+		autofocus = false,
+		editable = true,
+		class: className = '',
+		showToolbar = shouldShowToolbar(variant),
+		showSlashCommands = shouldShowSlashCommands(variant),
+		albumId,
+		features = getDefaultFeatures(variant)
+	}: ComposerProps = $props()
+
+	// Set editor context
+	setContext('editorContext', {
+		albumId,
+		contentType: albumId ? 'album' : 'default',
+		isAlbumEditor: !!albumId
+	})
+
+	// Core state
+	let editor = $state<Editor | undefined>()
+	let element = $state<HTMLElement>()
+	let isLoading = $state(true)
+	let initialized = false
+	const mediaSelectionState = $derived($mediaSelectionStore)
+
+	// Toolbar component ref
+	let toolbarRef = $state<ComposerToolbar>()
+
+	// Link manager ref
+	let linkManagerRef = $state<ComposerLinkManager>()
+
+	// Media handler
+	let mediaHandler = $state<ComposerMediaHandler>()
+
+	// Command configuration
+	const filteredCommands = getFilteredCommands(variant, features)
+	const colorCommands = getColorCommands()
+	const currentTextStyle = $derived(editor ? getCurrentTextStyle(editor) : 'Paragraph')
+
+	// Dropdown states
+	let showTextStyleDropdown = $state(false)
+	let showMediaDropdown = $state(false)
+
+	// Text style dropdown
+	const textStyleDropdown = useDropdown({
+		triggerRef: toolbarRef?.getDropdownRefs().textStyle,
+		isOpen: showTextStyleDropdown,
+		onClose: () => (showTextStyleDropdown = false),
+		portalClass: 'dropdown-menu-portal'
+	})
+
+	// Media dropdown
+	const mediaDropdown = useDropdown({
+		triggerRef: toolbarRef?.getDropdownRefs().media,
+		isOpen: showMediaDropdown,
+		onClose: () => (showMediaDropdown = false),
+		portalClass: 'media-dropdown-portal'
+	})
+
+	// Event handlers
+	const eventHandlers = useComposerEvents({
+		editor,
+		mediaHandler,
+		features
+	})
+
+	// Media selection handlers
+	function handleGlobalMediaSelect(media: Media) {
+		mediaHandler?.handleMediaSelect(media)
+		mediaSelectionStore.close()
+	}
+
+	function handleGlobalMediaClose() {
+		mediaHandler?.handleMediaClose()
+		mediaSelectionStore.close()
+	}
+
+	function handleOpenMediaLibrary() {
+		mediaSelectionStore.open({
+			mode: 'single',
+			fileType: 'image',
+			albumId,
+			onSelect: handleGlobalMediaSelect,
+			onClose: handleGlobalMediaClose
+		})
+	}
+
+	// Update content when editor changes
+	function handleUpdate({ editor: updatedEditor, transaction }: any) {
+		// Skip the first update to avoid circular updates
+		if (!initialized) {
+			initialized = true
+			return
+		}
+
+		// Dismiss link menus on typing
+		linkManagerRef?.dismissOnTyping(transaction)
+
+		const json = updatedEditor.getJSON()
+		data = json
+		onChange?.(json)
+
+		// Calculate character count if callback provided
+		if (onCharacterCount) {
+			const text = updatedEditor.getText()
+			onCharacterCount(text.length)
+		}
+	}
+
+	onMount(() => {
+		// Get extensions with custom options
+		const extensions = getEditorExtensions({
+			showSlashCommands,
+			onShowUrlConvertDropdown: features.urlEmbed ? linkManagerRef?.handleShowUrlConvertDropdown : undefined,
+			onShowLinkContextMenu: linkManagerRef?.handleShowLinkContextMenu,
+			imagePlaceholderComponent: EnhancedImagePlaceholder
+		})
+
+		// Initialize editor
+		const newEditor = initiateEditor(
+			element,
+			{
+				initialContent: data,
+				extensions,
+				onCreate: () => {
+					isLoading = false
+				},
+				onUpdate: handleUpdate,
+				editable,
+				autofocus,
+				editorProps: {
+					handlePaste: eventHandlers.handlePaste,
+					handleDrop: eventHandlers.handleDrop
+				}
+			},
+			placeholder
+		)
+
+		editor = newEditor
+
+		// Initialize media handler
+		mediaHandler = new ComposerMediaHandler({
+			editor: newEditor,
+			albumId,
+			features
+		})
+
+		// Initialize editor storage for image modal
+		newEditor.storage.imageModal = { placeholderPos: undefined }
+
+		return () => {
+			newEditor.destroy()
+		}
+	})
+
+	// Export public methods
+	export function focus() {
+		editor?.commands.focus()
+	}
+
+	export function blur() {
+		editor?.commands.blur()
+	}
+
+	export function clear() {
+		editor?.commands.clearContent()
+	}
+
+	export function isEmpty() {
+		return editor?.isEmpty || true
+	}
+
+	export function getContent() {
+		return editor?.getJSON()
+	}
+
+	export function getText() {
+		return editor?.getText() || ''
+	}
+</script>
+
+<div class={`composer composer--${variant} ${className}`}>
+	{#if showToolbar && editor && !isLoading}
+		<ComposerToolbar
+			bind:this={toolbarRef}
+			{editor}
+			{variant}
+			{currentTextStyle}
+			{filteredCommands}
+			{colorCommands}
+			{excludedCommands}
+			showMediaLibrary={!!features.mediaLibrary}
+			onTextStyleDropdownToggle={() => {
+				showTextStyleDropdown = !showTextStyleDropdown
+				textStyleDropdown.toggle()
+			}}
+			onMediaDropdownToggle={() => {
+				showMediaDropdown = !showMediaDropdown
+				mediaDropdown.toggle()
+			}}
+		/>
+	{/if}
+
+	{#if editor}
+		<LinkMenu {editor} />
+		{#if features.tables}
+			<TableRowMenu {editor} />
+			<TableColMenu {editor} />
+		{/if}
+		<ComposerLinkManager bind:this={linkManagerRef} {editor} {features} />
+	{/if}
+
+	{#if !editor}
+		<div class="edra-loading">
+			<LoaderCircle class="animate-spin" /> Loading...
+		</div>
+	{/if}
+
+	<div
+		bind:this={element}
+		role="button"
+		tabindex="0"
+		onclick={eventHandlers.handleEditorClick}
+		onkeydown={eventHandlers.handleEditorKeydown}
+		class="edra-editor"
+		class:with-toolbar={showToolbar}
+		style={`min-height: ${minHeight}px`}
+	></div>
+
+	{#if editor}
+		<DragHandle {editor} />
+	{/if}
+</div>
+
+<!-- Text Style Dropdown -->
+{#if showTextStyleDropdown && editor}
+	<TextStyleDropdown
+		{editor}
+		position={textStyleDropdown.position()}
+		{features}
+		onDismiss={() => (showTextStyleDropdown = false)}
+	/>
+{/if}
+
+<!-- Media Insert Dropdown -->
+{#if showMediaDropdown && editor && features.mediaLibrary}
+	<MediaInsertDropdown
+		{editor}
+		position={mediaDropdown.position()}
+		{features}
+		{albumId}
+		onDismiss={() => (showMediaDropdown = false)}
+		onOpenMediaLibrary={handleOpenMediaLibrary}
+	/>
+{/if}
+
+<!-- Global Media Selection Modal -->
+{#if mediaSelectionState.isOpen}
+	<UnifiedMediaModal
+		bind:isOpen={mediaSelectionState.isOpen}
+		mode={mediaSelectionState.mode}
+		fileType={mediaSelectionState.fileType}
+		albumId={mediaSelectionState.albumId}
+		onSelect={mediaSelectionState.onSelect}
+		onClose={mediaSelectionState.onClose}
+	/>
+{/if}
+
+<style lang="scss">
+	@import '$styles/variables';
+	@import '$styles/mixins';
+
+	.composer {
+		width: 100%;
+		min-width: 0;
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		position: relative;
+	}
+
+	.edra-editor {
+		flex: 1;
+		width: 100%;
+		padding: $unit-2x;
+		min-height: 100px;
+		outline: none;
+		overflow-y: auto;
+
+		&.with-toolbar {
+			border-top: none;
+		}
+	}
+
+	.edra-loading {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: $unit;
+		padding: $unit-4x;
+		color: $gray-50;
+		font-size: 14px;
+	}
+
+	// Variant-specific styles
+	.composer--minimal {
+		.edra-editor {
+			padding: $unit;
+			min-height: 60px;
+			font-size: 14px;
+		}
+	}
+
+	.composer--inline {
+		.edra-editor {
+			padding: $unit-2x;
+			min-height: 80px;
+		}
+	}
+
+	.composer--full {
+		background: $white;
+		border: 1px solid $gray-85;
+		border-radius: $corner-radius;
+		overflow: hidden;
+	}
+</style>
\ No newline at end of file
diff --git a/src/lib/components/admin/composer/ComposerLinkManager.svelte b/src/lib/components/admin/composer/ComposerLinkManager.svelte
new file mode 100644
index 0000000..1a7b398
--- /dev/null
+++ b/src/lib/components/admin/composer/ComposerLinkManager.svelte
@@ -0,0 +1,197 @@
+<script lang="ts">
+	import type { Editor } from '@tiptap/core'
+	import UrlConvertDropdown from '$lib/components/edra/headless/components/UrlConvertDropdown.svelte'
+	import LinkContextMenuComponent from '$lib/components/edra/headless/components/LinkContextMenu.svelte'
+	import LinkEditDialog from '$lib/components/edra/headless/components/LinkEditDialog.svelte'
+
+	interface Props {
+		editor: Editor
+		features: {
+			urlEmbed?: boolean
+		}
+	}
+
+	let { editor, features }: Props = $props()
+
+	// URL convert dropdown state
+	let showUrlConvertDropdown = $state(false)
+	let urlConvertDropdownPosition = $state({ x: 0, y: 0 })
+	let urlConvertPos = $state<number | null>(null)
+
+	// Link context menu state
+	let showLinkContextMenu = $state(false)
+	let linkContextMenuPosition = $state({ x: 0, y: 0 })
+	let linkContextUrl = $state<string | null>(null)
+	let linkContextPos = $state<number | null>(null)
+
+	// Link edit dialog state
+	let showLinkEditDialog = $state(false)
+	let linkEditDialogPosition = $state({ x: 0, y: 0 })
+	let linkEditUrl = $state<string>('')
+	let linkEditPos = $state<number | null>(null)
+
+	// URL convert handlers
+	export function handleShowUrlConvertDropdown(pos: number, url: string) {
+		if (!editor) return
+		const coords = editor.view.coordsAtPos(pos)
+		urlConvertDropdownPosition = { x: coords.left, y: coords.bottom + 5 }
+		urlConvertPos = pos
+		showUrlConvertDropdown = true
+	}
+
+	function handleConvertToEmbed() {
+		if (!editor || urlConvertPos === null) return
+		editor.commands.convertLinkToEmbed(urlConvertPos)
+		showUrlConvertDropdown = false
+		urlConvertPos = null
+	}
+
+	// Link context menu handlers
+	export function handleShowLinkContextMenu(pos: number, url: string) {
+		if (!editor) return
+		const coords = editor.view.coordsAtPos(pos)
+		linkContextMenuPosition = { x: coords.left, y: coords.bottom + 5 }
+		linkContextUrl = url
+		linkContextPos = pos
+		showLinkContextMenu = true
+	}
+
+	function handleConvertLinkToEmbed() {
+		if (!editor || linkContextPos === null) return
+		editor.commands.convertLinkToEmbed(linkContextPos)
+		showLinkContextMenu = false
+		linkContextPos = null
+		linkContextUrl = null
+	}
+
+	function handleEditLink() {
+		if (!editor || linkContextPos === null || !linkContextUrl) return
+		const coords = editor.view.coordsAtPos(linkContextPos)
+		linkEditDialogPosition = { x: coords.left, y: coords.bottom + 5 }
+		linkEditUrl = linkContextUrl
+		linkEditPos = linkContextPos
+		showLinkEditDialog = true
+		showLinkContextMenu = false
+	}
+
+	function handleSaveLink(newUrl: string) {
+		if (!editor || linkEditPos === null) return
+		editor.commands.updateLinkUrl(linkEditPos, newUrl)
+		showLinkEditDialog = false
+		linkEditPos = null
+		linkEditUrl = ''
+	}
+
+	function handleCopyLink() {
+		if (!linkContextUrl) return
+		navigator.clipboard.writeText(linkContextUrl)
+		showLinkContextMenu = false
+		linkContextPos = null
+		linkContextUrl = null
+	}
+
+	function handleRemoveLink() {
+		if (!editor || linkContextPos === null) return
+		editor.commands.removeLink(linkContextPos)
+		showLinkContextMenu = false
+		linkContextPos = null
+		linkContextUrl = null
+	}
+
+	function handleOpenLink() {
+		if (!linkContextUrl) return
+		window.open(linkContextUrl, '_blank')
+		showLinkContextMenu = false
+		linkContextPos = null
+		linkContextUrl = null
+	}
+
+	// Handle click outside
+	function handleClickOutside(event: MouseEvent) {
+		const target = event.target as HTMLElement
+		if (!target.closest('.url-convert-dropdown')) {
+			showUrlConvertDropdown = false
+		}
+		if (!target.closest('.link-context-menu')) {
+			showLinkContextMenu = false
+		}
+		if (!target.closest('.link-edit-dialog')) {
+			showLinkEditDialog = false
+		}
+	}
+
+	// Dismiss dropdowns on typing
+	export function dismissOnTyping(transaction: any) {
+		if (showUrlConvertDropdown && transaction.docChanged) {
+			const hasTextChange = transaction.steps.some(
+				(step: any) =>
+					step.toJSON().stepType === 'replace' || step.toJSON().stepType === 'replaceAround'
+			)
+			if (hasTextChange) {
+				showUrlConvertDropdown = false
+				urlConvertPos = null
+			}
+		}
+	}
+
+	$effect(() => {
+		if (showUrlConvertDropdown || showLinkContextMenu || showLinkEditDialog) {
+			document.addEventListener('click', handleClickOutside)
+			return () => {
+				document.removeEventListener('click', handleClickOutside)
+			}
+		}
+	})
+
+	// Export state for parent to check if any menus are open
+	export function hasOpenMenus() {
+		return showUrlConvertDropdown || showLinkContextMenu || showLinkEditDialog
+	}
+</script>
+
+<!-- URL Convert Dropdown -->
+{#if showUrlConvertDropdown && features.urlEmbed}
+	<UrlConvertDropdown
+		x={urlConvertDropdownPosition.x}
+		y={urlConvertDropdownPosition.y}
+		onConvert={handleConvertToEmbed}
+		onDismiss={() => {
+			showUrlConvertDropdown = false
+			urlConvertPos = null
+		}}
+	/>
+{/if}
+
+<!-- Link Context Menu -->
+{#if showLinkContextMenu && linkContextUrl}
+	<LinkContextMenuComponent
+		x={linkContextMenuPosition.x}
+		y={linkContextMenuPosition.y}
+		url={linkContextUrl}
+		onConvertToCard={features.urlEmbed ? handleConvertLinkToEmbed : undefined}
+		onEditLink={handleEditLink}
+		onCopyLink={handleCopyLink}
+		onRemoveLink={handleRemoveLink}
+		onOpenLink={handleOpenLink}
+		onDismiss={() => {
+			showLinkContextMenu = false
+			linkContextPos = null
+			linkContextUrl = null
+		}}
+	/>
+{/if}
+
+<!-- Link Edit Dialog -->
+{#if showLinkEditDialog}
+	<LinkEditDialog
+		x={linkEditDialogPosition.x}
+		y={linkEditDialogPosition.y}
+		currentUrl={linkEditUrl}
+		onSave={handleSaveLink}
+		onCancel={() => {
+			showLinkEditDialog = false
+			linkEditPos = null
+			linkEditUrl = ''
+		}}
+	/>
+{/if}
\ No newline at end of file
diff --git a/src/lib/components/admin/composer/ComposerMediaHandler.svelte.ts b/src/lib/components/admin/composer/ComposerMediaHandler.svelte.ts
new file mode 100644
index 0000000..79c50de
--- /dev/null
+++ b/src/lib/components/admin/composer/ComposerMediaHandler.svelte.ts
@@ -0,0 +1,180 @@
+import type { Editor } from '@tiptap/core'
+import type { Media } from '@prisma/client'
+
+export interface MediaHandlerOptions {
+	editor: Editor
+	albumId?: number
+	features: {
+		imageUpload?: boolean
+		mediaLibrary?: boolean
+	}
+}
+
+export class ComposerMediaHandler {
+	private editor: Editor
+	private albumId?: number
+	private features: MediaHandlerOptions['features']
+
+	constructor(options: MediaHandlerOptions) {
+		this.editor = options.editor
+		this.albumId = options.albumId
+		this.features = options.features
+	}
+
+	async uploadImage(file: File): Promise<void> {
+		if (!this.editor || !this.features.imageUpload) return
+
+		// Validate file size (2MB max)
+		const filesize = file.size / 1024 / 1024
+		if (filesize > 2) {
+			alert(`Image too large! File size: ${filesize.toFixed(2)} MB (max 2MB)`)
+			return
+		}
+
+		// Create a placeholder while uploading
+		const placeholderSrc = URL.createObjectURL(file)
+		this.editor.commands.insertContent({
+			type: 'image',
+			attrs: {
+				src: placeholderSrc,
+				alt: '',
+				title: '',
+				mediaId: null
+			}
+		})
+
+		try {
+			const auth = localStorage.getItem('admin_auth')
+			if (!auth) {
+				throw new Error('Not authenticated')
+			}
+
+			const formData = new FormData()
+			formData.append('file', file)
+
+			// Add albumId if available
+			if (this.albumId) {
+				formData.append('albumId', this.albumId.toString())
+			}
+
+			const response = await fetch('/api/media/upload', {
+				method: 'POST',
+				headers: {
+					Authorization: `Basic ${auth}`
+				},
+				body: formData
+			})
+
+			if (!response.ok) {
+				throw new Error('Upload failed')
+			}
+
+			const media = await response.json()
+
+			// Replace placeholder with actual URL
+			const displayWidth = media.width && media.width > 600 ? 600 : media.width
+
+			this.editor.commands.insertContent({
+				type: 'image',
+				attrs: {
+					src: media.url,
+					alt: media.filename || '',
+					title: media.description || '',
+					width: displayWidth,
+					height: media.height,
+					align: 'center',
+					mediaId: media.id?.toString()
+				}
+			})
+
+			// Clean up the object URL
+			URL.revokeObjectURL(placeholderSrc)
+		} catch (error) {
+			console.error('Image upload failed:', error)
+			alert('Failed to upload image. Please try again.')
+			// Remove the placeholder on error
+			this.editor.commands.undo()
+			URL.revokeObjectURL(placeholderSrc)
+		}
+	}
+
+	handleMediaSelect(media: Media): void {
+		if (!this.editor) return
+
+		// Remove placeholder if it exists
+		if (this.editor.storage.imageModal?.placeholderPos !== undefined) {
+			const pos = this.editor.storage.imageModal.placeholderPos
+			this.editor
+				.chain()
+				.focus()
+				.deleteRange({ from: pos, to: pos + 1 })
+				.run()
+			this.editor.storage.imageModal.placeholderPos = undefined
+		}
+
+		// Check if it's a video
+		const isVideo = media.mimeType?.startsWith('video/')
+
+		if (isVideo) {
+			// Insert video
+			this.editor.commands.insertContent({
+				type: 'video',
+				attrs: {
+					src: media.url,
+					title: media.description || media.filename || '',
+					mediaId: media.id.toString()
+				}
+			})
+		} else {
+			// Calculate display dimensions
+			const displayWidth = media.width && media.width > 600 ? 600 : media.width
+
+			// Insert image
+			this.editor.commands.insertContent({
+				type: 'image',
+				attrs: {
+					src: media.url,
+					alt: media.filename || '',
+					title: media.description || '',
+					width: displayWidth,
+					height: media.height,
+					align: 'center',
+					mediaId: media.id.toString()
+				}
+			})
+		}
+	}
+
+	handleMediaClose(): void {
+		// Remove the placeholder if user cancelled
+		if (this.editor && this.editor.storage.imageModal?.placeholderPos !== undefined) {
+			const pos = this.editor.storage.imageModal.placeholderPos
+			this.editor
+				.chain()
+				.focus()
+				.deleteRange({ from: pos, to: pos + 1 })
+				.run()
+			this.editor.storage.imageModal.placeholderPos = undefined
+		}
+	}
+
+	handlePasteImage(clipboardData: DataTransfer): boolean {
+		if (!this.features.imageUpload) return false
+
+		// Check for images
+		const imageItem = Array.from(clipboardData.items).find(
+			(item) => item.type.indexOf('image') === 0
+		)
+
+		if (imageItem) {
+			const file = imageItem.getAsFile()
+			if (!file) return false
+
+			// Upload the image
+			this.uploadImage(file)
+			return true // Prevent default paste behavior
+		}
+
+		return false
+	}
+}
\ No newline at end of file
diff --git a/src/lib/components/admin/composer/ComposerToolbar.svelte b/src/lib/components/admin/composer/ComposerToolbar.svelte
new file mode 100644
index 0000000..4f349b4
--- /dev/null
+++ b/src/lib/components/admin/composer/ComposerToolbar.svelte
@@ -0,0 +1,209 @@
+<script lang="ts">
+	import type { Editor } from '@tiptap/core'
+	import EdraToolBarIcon from '$lib/components/edra/headless/components/EdraToolBarIcon.svelte'
+	import type { ComposerVariant } from './types'
+
+	interface Props {
+		editor: Editor
+		variant: ComposerVariant
+		currentTextStyle: string
+		filteredCommands: any
+		colorCommands: any[]
+		excludedCommands: string[]
+		showMediaLibrary: boolean
+		onTextStyleDropdownToggle: () => void
+		onMediaDropdownToggle: () => void
+	}
+
+	let {
+		editor,
+		variant,
+		currentTextStyle,
+		filteredCommands,
+		colorCommands,
+		excludedCommands,
+		showMediaLibrary,
+		onTextStyleDropdownToggle,
+		onMediaDropdownToggle
+	}: Props = $props()
+
+	let dropdownTriggerRef = $state<HTMLElement>()
+	let mediaDropdownTriggerRef = $state<HTMLElement>()
+
+	// Export refs for parent component positioning
+	export function getDropdownRefs() {
+		return {
+			textStyle: dropdownTriggerRef,
+			media: mediaDropdownTriggerRef
+		}
+	}
+</script>
+
+<div class="editor-toolbar">
+	<div class="edra-toolbar">
+		<!-- Text Style Dropdown -->
+		<div class="text-style-dropdown">
+			<button
+				bind:this={dropdownTriggerRef}
+				class="dropdown-trigger"
+				onclick={onTextStyleDropdownToggle}
+			>
+				<span>{currentTextStyle}</span>
+				<svg
+					width="12"
+					height="12"
+					viewBox="0 0 12 12"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						d="M3 4.5L6 7.5L9 4.5"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+			</button>
+		</div>
+
+		<span class="separator"></span>
+
+		{#each Object.keys(filteredCommands).filter((key) => !excludedCommands.includes(key)) as keys}
+			{@const groups = filteredCommands[keys].commands}
+			{#each groups as command}
+				<EdraToolBarIcon {command} {editor} />
+			{/each}
+			<span class="separator"></span>
+		{/each}
+
+		{#if showMediaLibrary}
+			<!-- Media Dropdown -->
+			<div class="text-style-dropdown">
+				<button
+					bind:this={mediaDropdownTriggerRef}
+					class="dropdown-trigger"
+					onclick={onMediaDropdownToggle}
+				>
+					<span>Insert</span>
+					<svg
+						width="12"
+						height="12"
+						viewBox="0 0 12 12"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M3 4.5L6 7.5L9 4.5"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+					</svg>
+				</button>
+			</div>
+
+			<span class="separator"></span>
+		{/if}
+
+		{#if colorCommands.length > 0}
+			<EdraToolBarIcon
+				command={colorCommands[0]}
+				{editor}
+				style={`color: ${editor.getAttributes('textStyle').color};`}
+				onclick={() => {
+					const color = editor.getAttributes('textStyle').color
+					const hasColor = editor.isActive('textStyle', { color })
+					if (hasColor) {
+						editor.chain().focus().unsetColor().run()
+					} else {
+						const color = prompt('Enter the color of the text:')
+						if (color !== null) {
+							editor.chain().focus().setColor(color).run()
+						}
+					}
+				}}
+			/>
+			<EdraToolBarIcon
+				command={colorCommands[1]}
+				{editor}
+				style={`background-color: ${editor.getAttributes('highlight').color};`}
+				onclick={() => {
+					const hasHightlight = editor.isActive('highlight')
+					if (hasHightlight) {
+						editor.chain().focus().unsetHighlight().run()
+					} else {
+						const color = prompt('Enter the color of the highlight:')
+						if (color !== null) {
+							editor.chain().focus().setHighlight({ color }).run()
+						}
+					}
+				}}
+			/>
+		{/if}
+	</div>
+</div>
+
+<style lang="scss">
+	@import '$styles/variables';
+	@import '$styles/mixins';
+
+	.editor-toolbar {
+		border-bottom: 1px solid $gray-90;
+		background: $white;
+		position: sticky;
+		top: 0;
+		z-index: 10;
+		padding: $unit 0;
+	}
+
+	.edra-toolbar {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		padding: 0 $unit-2x;
+		flex-wrap: wrap;
+	}
+
+	.text-style-dropdown {
+		display: flex;
+		align-items: center;
+	}
+
+	.dropdown-trigger {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		padding: 6px 10px;
+		background: transparent;
+		border: 1px solid transparent;
+		border-radius: $corner-radius;
+		font-size: 14px;
+		color: $gray-10;
+		cursor: pointer;
+		transition: all 0.2s ease;
+
+		&:hover {
+			background: $gray-95;
+			border-color: $gray-85;
+		}
+
+		&:active {
+			background: $gray-90;
+		}
+
+		svg {
+			width: 12px;
+			height: 12px;
+			opacity: 0.5;
+		}
+	}
+
+	.separator {
+		width: 1px;
+		height: 20px;
+		background: $gray-85;
+		margin: 0 4px;
+	}
+</style>
\ No newline at end of file
diff --git a/src/lib/components/admin/composer/MediaInsertDropdown.svelte b/src/lib/components/admin/composer/MediaInsertDropdown.svelte
new file mode 100644
index 0000000..8fb39d5
--- /dev/null
+++ b/src/lib/components/admin/composer/MediaInsertDropdown.svelte
@@ -0,0 +1,118 @@
+<script lang="ts">
+	import type { Editor } from '@tiptap/core'
+	import type { DropdownPosition, ComposerFeatures } from './types'
+	import { mediaSelectionStore } from '$lib/stores/media-selection'
+
+	interface Props {
+		editor: Editor
+		position: DropdownPosition
+		features: ComposerFeatures
+		albumId?: number
+		onDismiss: () => void
+		onOpenMediaLibrary: () => void
+	}
+
+	let { editor, position, features, albumId, onDismiss, onOpenMediaLibrary }: Props = $props()
+
+	function insertMedia(type: string) {
+		switch (type) {
+			case 'image':
+				handleImageInsert()
+				break
+			case 'gallery':
+				editor.chain().focus().insertGalleryPlaceholder().run()
+				break
+			case 'video':
+				editor.chain().focus().insertVideoPlaceholder().run()
+				break
+			case 'audio':
+				editor.chain().focus().insertAudioPlaceholder().run()
+				break
+			case 'location':
+				editor.chain().focus().insertGeolocationPlaceholder().run()
+				break
+			case 'link':
+				editor.chain().focus().insertUrlEmbedPlaceholder().run()
+				break
+		}
+		onDismiss()
+	}
+
+	function handleImageInsert() {
+		// Get current position before inserting placeholder
+		const pos = editor.state.selection.anchor
+
+		// Insert placeholder
+		editor.chain().focus().insertImagePlaceholder().run()
+
+		// Store the position for later deletion
+		editor.storage.imageModal = { placeholderPos: pos }
+
+		// Notify parent to open media library
+		onOpenMediaLibrary()
+	}
+</script>
+
+<div
+	class="media-dropdown-portal"
+	style="position: fixed; top: {position.top}px; left: {position.left}px; z-index: 10000;"
+>
+	<div class="dropdown-menu">
+		<button class="dropdown-item" onclick={() => insertMedia('image')}> Image </button>
+		<button class="dropdown-item" onclick={() => insertMedia('gallery')}> Gallery </button>
+		<button class="dropdown-item" onclick={() => insertMedia('video')}> Video </button>
+		<button class="dropdown-item" onclick={() => insertMedia('audio')}> Audio </button>
+		<div class="dropdown-separator"></div>
+		<button class="dropdown-item" onclick={() => insertMedia('location')}> Location </button>
+		{#if features.urlEmbed}
+			<button class="dropdown-item" onclick={() => insertMedia('link')}> Link </button>
+		{/if}
+	</div>
+</div>
+
+<style lang="scss">
+	@import '$styles/variables';
+	@import '$styles/mixins';
+
+	.media-dropdown-portal {
+		font-family: inherit;
+	}
+
+	.dropdown-menu {
+		background: $white;
+		border: 1px solid $gray-85;
+		border-radius: $corner-radius;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+		padding: 4px;
+		min-width: 160px;
+	}
+
+	.dropdown-item {
+		display: block;
+		width: 100%;
+		padding: 8px 12px;
+		text-align: left;
+		font-size: 14px;
+		color: $gray-10;
+		background: transparent;
+		border: none;
+		border-radius: $corner-radius-sm;
+		cursor: pointer;
+		transition: all 0.15s ease;
+
+		&:hover {
+			background: $gray-95;
+			color: $gray-00;
+		}
+
+		&:active {
+			background: $gray-90;
+		}
+	}
+
+	.dropdown-separator {
+		height: 1px;
+		background: $gray-90;
+		margin: 4px 0;
+	}
+</style>
\ No newline at end of file
diff --git a/src/lib/components/admin/composer/TextStyleDropdown.svelte b/src/lib/components/admin/composer/TextStyleDropdown.svelte
new file mode 100644
index 0000000..da1c1ad
--- /dev/null
+++ b/src/lib/components/admin/composer/TextStyleDropdown.svelte
@@ -0,0 +1,134 @@
+<script lang="ts">
+	import type { Editor } from '@tiptap/core'
+	import type { DropdownPosition } from './types'
+
+	interface Props {
+		editor: Editor
+		position: DropdownPosition
+		features: {
+			codeBlocks?: boolean
+		}
+		onDismiss: () => void
+	}
+
+	let { editor, position, features, onDismiss }: Props = $props()
+
+	function selectStyle(action: () => void) {
+		action()
+		onDismiss()
+	}
+</script>
+
+<div
+	class="dropdown-menu-portal"
+	style="position: fixed; top: {position.top}px; left: {position.left}px; z-index: 10000;"
+>
+	<div class="dropdown-menu">
+		<button
+			class="dropdown-item"
+			onclick={() => selectStyle(() => editor.chain().focus().setParagraph().run())}
+		>
+			Paragraph
+		</button>
+		<div class="dropdown-separator"></div>
+		<button
+			class="dropdown-item"
+			onclick={() => selectStyle(() => editor.chain().focus().toggleHeading({ level: 1 }).run())}
+		>
+			Heading 1
+		</button>
+		<button
+			class="dropdown-item"
+			onclick={() => selectStyle(() => editor.chain().focus().toggleHeading({ level: 2 }).run())}
+		>
+			Heading 2
+		</button>
+		<button
+			class="dropdown-item"
+			onclick={() => selectStyle(() => editor.chain().focus().toggleHeading({ level: 3 }).run())}
+		>
+			Heading 3
+		</button>
+		<div class="dropdown-separator"></div>
+		<button
+			class="dropdown-item"
+			onclick={() => selectStyle(() => editor.chain().focus().toggleBulletList().run())}
+		>
+			Unordered List
+		</button>
+		<button
+			class="dropdown-item"
+			onclick={() => selectStyle(() => editor.chain().focus().toggleOrderedList().run())}
+		>
+			Ordered List
+		</button>
+		<button
+			class="dropdown-item"
+			onclick={() => selectStyle(() => editor.chain().focus().toggleTaskList().run())}
+		>
+			Task List
+		</button>
+		{#if features.codeBlocks}
+			<div class="dropdown-separator"></div>
+			<button
+				class="dropdown-item"
+				onclick={() => selectStyle(() => editor.chain().focus().toggleCodeBlock().run())}
+			>
+				Code Block
+			</button>
+		{/if}
+		<button
+			class="dropdown-item"
+			onclick={() => selectStyle(() => editor.chain().focus().toggleBlockquote().run())}
+		>
+			Blockquote
+		</button>
+	</div>
+</div>
+
+<style lang="scss">
+	@import '$styles/variables';
+	@import '$styles/mixins';
+
+	.dropdown-menu-portal {
+		font-family: inherit;
+	}
+
+	.dropdown-menu {
+		background: $white;
+		border: 1px solid $gray-85;
+		border-radius: $corner-radius;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+		padding: 4px;
+		min-width: 200px;
+	}
+
+	.dropdown-item {
+		display: block;
+		width: 100%;
+		padding: 8px 12px;
+		text-align: left;
+		font-size: 14px;
+		color: $gray-10;
+		background: transparent;
+		border: none;
+		border-radius: $corner-radius-sm;
+		cursor: pointer;
+		transition: all 0.15s ease;
+
+		&:hover {
+			background: $gray-95;
+			color: $gray-00;
+		}
+
+		&:active {
+			background: $gray-90;
+		}
+	}
+
+	.dropdown-separator {
+		height: 1px;
+		background: $gray-90;
+		margin: 4px 0;
+	}
+</style>
\ No newline at end of file
diff --git a/src/lib/components/admin/composer/editorConfig.ts b/src/lib/components/admin/composer/editorConfig.ts
new file mode 100644
index 0000000..fe4a437
--- /dev/null
+++ b/src/lib/components/admin/composer/editorConfig.ts
@@ -0,0 +1,168 @@
+import type { Editor } from '@tiptap/core'
+import type { ComposerVariant, ComposerFeatures } from './types'
+import { commands } from '$lib/components/edra/commands/commands.js'
+
+export interface FilteredCommands {
+	[key: string]: {
+		name: string
+		label: string
+		commands: any[]
+	}
+}
+
+// Get current text style for dropdown
+export function getCurrentTextStyle(editor: Editor): string {
+	if (editor.isActive('heading', { level: 1 })) return 'Heading 1'
+	if (editor.isActive('heading', { level: 2 })) return 'Heading 2'
+	if (editor.isActive('heading', { level: 3 })) return 'Heading 3'
+	if (editor.isActive('bulletList')) return 'Bullet List'
+	if (editor.isActive('orderedList')) return 'Ordered List'
+	if (editor.isActive('taskList')) return 'Task List'
+	if (editor.isActive('codeBlock')) return 'Code Block'
+	if (editor.isActive('blockquote')) return 'Blockquote'
+	return 'Paragraph'
+}
+
+// Get filtered commands based on variant and features
+export function getFilteredCommands(variant: ComposerVariant, features: ComposerFeatures): FilteredCommands {
+	const filtered = { ...commands }
+
+	// Remove groups based on variant
+	if (variant === 'minimal') {
+		delete filtered['undo-redo']
+		delete filtered['headings']
+		delete filtered['lists']
+		delete filtered['alignment']
+		delete filtered['table']
+		delete filtered['media']
+		delete filtered['fonts']
+	} else if (variant === 'inline') {
+		delete filtered['undo-redo']
+		delete filtered['headings']
+		delete filtered['lists']
+		delete filtered['alignment']
+		delete filtered['table']
+		delete filtered['media']
+	} else {
+		// Full variant - reorganize for toolbar
+		delete filtered['undo-redo']
+		delete filtered['headings'] // In text style dropdown
+		delete filtered['lists'] // In text style dropdown
+		delete filtered['alignment']
+		delete filtered['table']
+		delete filtered['media'] // In media dropdown
+	}
+
+	// Reorganize text formatting for toolbar
+	if (filtered['text-formatting']) {
+		const allCommands = filtered['text-formatting'].commands
+		const basicFormatting: any[] = []
+		const advancedFormatting: any[] = []
+
+		// Group basic formatting first
+		const basicOrder = ['bold', 'italic', 'underline', 'strike']
+		basicOrder.forEach((name) => {
+			const cmd = allCommands.find((c: any) => c.name === name)
+			if (cmd) basicFormatting.push(cmd)
+		})
+
+		// Then link and code
+		const advancedOrder = ['link', 'code']
+		advancedOrder.forEach((name) => {
+			const cmd = allCommands.find((c: any) => c.name === name)
+			if (cmd) advancedFormatting.push(cmd)
+		})
+
+		// Create two groups
+		filtered['basic-formatting'] = {
+			name: 'Basic Formatting',
+			label: 'Basic Formatting',
+			commands: basicFormatting
+		}
+
+		filtered['advanced-formatting'] = {
+			name: 'Advanced Formatting',
+			label: 'Advanced Formatting',
+			commands: advancedFormatting
+		}
+
+		// Remove original text-formatting
+		delete filtered['text-formatting']
+	}
+
+	return filtered
+}
+
+// Get media commands, but filter out based on features
+export function getMediaCommands(features: ComposerFeatures): any[] {
+	if (!commands.media) return []
+
+	let mediaCommands = [...commands.media.commands]
+
+	// Filter based on features
+	if (!features.urlEmbed) {
+		mediaCommands = mediaCommands.filter((cmd) => cmd.name !== 'iframe-placeholder')
+	}
+
+	return mediaCommands
+}
+
+// Get color commands
+export function getColorCommands(): any[] {
+	return commands.colors?.commands || []
+}
+
+// Commands to exclude from toolbar
+export const excludedCommands = ['colors', 'fonts']
+
+// Default placeholders by variant
+export function getDefaultPlaceholder(variant: ComposerVariant): string {
+	return variant === 'inline' ? "What's on your mind?" : 'Type "/" for commands...'
+}
+
+// Default min heights by variant
+export function getDefaultMinHeight(variant: ComposerVariant): number {
+	return variant === 'inline' ? 80 : 400
+}
+
+// Whether to show toolbar by default
+export function shouldShowToolbar(variant: ComposerVariant): boolean {
+	return variant === 'full'
+}
+
+// Whether to show slash commands
+export function shouldShowSlashCommands(variant: ComposerVariant): boolean {
+	return variant !== 'minimal'
+}
+
+// Default features by variant
+export function getDefaultFeatures(variant: ComposerVariant): ComposerFeatures {
+	if (variant === 'minimal') {
+		return {
+			imageUpload: false,
+			mediaLibrary: false,
+			urlEmbed: false,
+			tables: false,
+			codeBlocks: false
+		}
+	}
+
+	if (variant === 'inline') {
+		return {
+			imageUpload: true,
+			mediaLibrary: true,
+			urlEmbed: false,
+			tables: false,
+			codeBlocks: false
+		}
+	}
+
+	// Full variant
+	return {
+		imageUpload: true,
+		mediaLibrary: true,
+		urlEmbed: true,
+		tables: true,
+		codeBlocks: true
+	}
+}
\ No newline at end of file
diff --git a/src/lib/components/admin/composer/index.ts b/src/lib/components/admin/composer/index.ts
new file mode 100644
index 0000000..fb88f8e
--- /dev/null
+++ b/src/lib/components/admin/composer/index.ts
@@ -0,0 +1,17 @@
+// Export ComposerCore as EnhancedComposer for backward compatibility
+export { default as EnhancedComposer } from './ComposerCore.svelte'
+
+// Export types
+export type { ComposerVariant, ComposerFeatures, ComposerProps } from './types'
+
+// Export individual components if needed elsewhere
+export { default as ComposerToolbar } from './ComposerToolbar.svelte'
+export { default as TextStyleDropdown } from './TextStyleDropdown.svelte'
+export { default as MediaInsertDropdown } from './MediaInsertDropdown.svelte'
+export { default as ComposerLinkManager } from './ComposerLinkManager.svelte'
+
+// Export utilities
+export { ComposerMediaHandler } from './ComposerMediaHandler.svelte'
+export { useComposerEvents } from './useComposerEvents.svelte'
+export { useDropdown } from './useDropdown.svelte'
+export * from './editorConfig'
\ No newline at end of file
diff --git a/src/lib/components/admin/composer/types.ts b/src/lib/components/admin/composer/types.ts
new file mode 100644
index 0000000..67b637a
--- /dev/null
+++ b/src/lib/components/admin/composer/types.ts
@@ -0,0 +1,40 @@
+import type { JSONContent } from '@tiptap/core'
+
+export type ComposerVariant = 'full' | 'inline' | 'minimal'
+
+export interface ComposerFeatures {
+	imageUpload?: boolean
+	mediaLibrary?: boolean
+	urlEmbed?: boolean
+	tables?: boolean
+	codeBlocks?: boolean
+}
+
+export interface ComposerProps {
+	variant?: ComposerVariant
+	data?: JSONContent
+	onChange?: (content: JSONContent) => void
+	onCharacterCount?: (count: number) => void
+	placeholder?: string
+	minHeight?: number
+	autofocus?: boolean
+	editable?: boolean
+	class?: string
+	showToolbar?: boolean
+	showSlashCommands?: boolean
+	albumId?: number
+	features?: ComposerFeatures
+}
+
+export interface DropdownPosition {
+	top: number
+	left: number
+}
+
+export interface MediaSelectionOptions {
+	mode: 'single' | 'multiple'
+	fileType?: 'image' | 'video' | 'audio' | 'all'
+	albumId?: number
+	onSelect: (media: any) => void
+	onClose: () => void
+}
\ No newline at end of file
diff --git a/src/lib/components/admin/composer/useComposerEvents.svelte.ts b/src/lib/components/admin/composer/useComposerEvents.svelte.ts
new file mode 100644
index 0000000..bac6b3e
--- /dev/null
+++ b/src/lib/components/admin/composer/useComposerEvents.svelte.ts
@@ -0,0 +1,138 @@
+import type { Editor } from '@tiptap/core'
+import type { ComposerMediaHandler } from './ComposerMediaHandler.svelte'
+import { focusEditor } from '$lib/components/edra/utils'
+
+export interface UseComposerEventsOptions {
+	editor: Editor | undefined
+	mediaHandler: ComposerMediaHandler | undefined
+	features: {
+		imageUpload?: boolean
+	}
+}
+
+export function useComposerEvents(options: UseComposerEventsOptions) {
+	// Handle paste events
+	function handlePaste(view: any, event: ClipboardEvent): boolean {
+		const clipboardData = event.clipboardData
+		if (!clipboardData) return false
+
+		// Let media handler check for images first
+		if (options.mediaHandler && options.features.imageUpload) {
+			const handled = options.mediaHandler.handlePasteImage(clipboardData)
+			if (handled) return true
+		}
+
+		// Handle text paste - preserve links while stripping other formatting
+		const htmlData = clipboardData.getData('text/html')
+		const plainText = clipboardData.getData('text/plain')
+
+		if (htmlData && plainText) {
+			event.preventDefault()
+
+			// Use editor commands to insert HTML content
+			const editorInstance = (view as any).editor
+			if (editorInstance) {
+				editorInstance
+					.chain()
+					.focus()
+					.insertContent(htmlData, { parseOptions: { preserveWhitespace: false } })
+					.run()
+			} else {
+				// Fallback to plain text
+				const { state, dispatch } = view
+				const { selection } = state
+				const transaction = state.tr.insertText(plainText, selection.from, selection.to)
+				dispatch(transaction)
+			}
+
+			return true
+		}
+
+		return false
+	}
+
+	// Handle editor click
+	function handleEditorClick(event: MouseEvent) {
+		if (options.editor) {
+			focusEditor(options.editor, event)
+		}
+	}
+
+	// Handle editor keyboard events
+	function handleEditorKeydown(event: KeyboardEvent) {
+		if (options.editor && (event.key === 'Enter' || event.key === ' ')) {
+			focusEditor(options.editor, event)
+		}
+	}
+
+	// Handle drag and drop for images
+	function handleDrop(view: any, event: DragEvent): boolean {
+		if (!options.features.imageUpload || !options.mediaHandler) return false
+
+		const files = event.dataTransfer?.files
+		if (!files || files.length === 0) return false
+
+		// Check if any file is an image
+		const imageFile = Array.from(files).find((file) => file.type.startsWith('image/'))
+		if (!imageFile) return false
+
+		event.preventDefault()
+
+		// Get drop position
+		const coords = { left: event.clientX, top: event.clientY }
+		const pos = view.posAtCoords(coords)
+		if (!pos) return false
+
+		// Set cursor position to drop location
+		const { state, dispatch } = view
+		const transaction = state.tr.setSelection(state.selection.constructor.near(state.doc.resolve(pos.pos)))
+		dispatch(transaction)
+
+		// Upload the image
+		options.mediaHandler.uploadImage(imageFile)
+		return true
+	}
+
+	// Handle file input for image selection
+	function handleFileSelect(event: Event) {
+		const input = event.target as HTMLInputElement
+		const file = input.files?.[0]
+		if (!file || !options.mediaHandler) return
+
+		if (file.type.startsWith('image/')) {
+			options.mediaHandler.uploadImage(file)
+		}
+
+		// Clear the input
+		input.value = ''
+	}
+
+	// Create hidden file input for image selection
+	function createFileInput(): HTMLInputElement {
+		const input = document.createElement('input')
+		input.type = 'file'
+		input.accept = 'image/*'
+		input.style.display = 'none'
+		input.addEventListener('change', handleFileSelect)
+		document.body.appendChild(input)
+		return input
+	}
+
+	// Trigger file selection dialog
+	function selectImageFile() {
+		const input = createFileInput()
+		input.click()
+		// Clean up after a delay
+		setTimeout(() => {
+			document.body.removeChild(input)
+		}, 1000)
+	}
+
+	return {
+		handlePaste,
+		handleEditorClick,
+		handleEditorKeydown,
+		handleDrop,
+		selectImageFile
+	}
+}
\ No newline at end of file
diff --git a/src/lib/components/admin/composer/useDropdown.svelte.ts b/src/lib/components/admin/composer/useDropdown.svelte.ts
new file mode 100644
index 0000000..c4b8f5b
--- /dev/null
+++ b/src/lib/components/admin/composer/useDropdown.svelte.ts
@@ -0,0 +1,65 @@
+import type { DropdownPosition } from './types'
+
+export interface UseDropdownOptions {
+	triggerRef: HTMLElement | undefined
+	isOpen: boolean
+	onClose: () => void
+	portalClass?: string
+}
+
+export function useDropdown(options: UseDropdownOptions) {
+	let position = $state<DropdownPosition>({ top: 0, left: 0 })
+
+	// Calculate dropdown position based on trigger element
+	function updatePosition() {
+		const { triggerRef } = options
+		if (triggerRef) {
+			const rect = triggerRef.getBoundingClientRect()
+			position = {
+				top: rect.bottom + 4,
+				left: rect.left
+			}
+		}
+	}
+
+	// Toggle dropdown with position update
+	function toggle() {
+		if (!options.isOpen) {
+			updatePosition()
+		}
+		// The actual toggling is handled by the parent component
+	}
+
+	// Handle click outside
+	function handleClickOutside(event: MouseEvent) {
+		const target = event.target as HTMLElement
+		const { triggerRef, portalClass, onClose } = options
+
+		const isClickInsideTrigger = triggerRef?.contains(target)
+		const isClickInsidePortal = portalClass && target.closest(`.${portalClass}`)
+
+		if (!isClickInsideTrigger && !isClickInsidePortal) {
+			onClose()
+		}
+	}
+
+	// Effect to add/remove click listener
+	$effect(() => {
+		if (options.isOpen) {
+			// Small delay to avoid immediate closure
+			setTimeout(() => {
+				document.addEventListener('click', handleClickOutside)
+			}, 0)
+
+			return () => {
+				document.removeEventListener('click', handleClickOutside)
+			}
+		}
+	})
+
+	return {
+		position: () => position,
+		updatePosition,
+		toggle
+	}
+}
\ No newline at end of file