From 2f20209d666ebfd8aaa85120b57c826c448ca69d Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 26 Jun 2025 11:58:10 -0400
Subject: [PATCH] feat: add toolbar feature flag to disable toolbar in favor of
 bubble menu
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add toolbar property to ComposerFeatures interface
- Update default features to disable toolbar for inline/full variants
- Add conditional rendering check for toolbar feature flag
- Enable bubble menu by default for better UX

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../admin/composer/ComposerCore.svelte        |  7 ++++-
 .../components/admin/composer/editorConfig.ts | 26 ++++++++++++++++---
 src/lib/components/admin/composer/types.ts    |  2 ++
 3 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/admin/composer/ComposerCore.svelte b/src/lib/components/admin/composer/ComposerCore.svelte
index 19e7aed..a798c2f 100644
--- a/src/lib/components/admin/composer/ComposerCore.svelte
+++ b/src/lib/components/admin/composer/ComposerCore.svelte
@@ -18,6 +18,7 @@
 	import TextStyleDropdown from './TextStyleDropdown.svelte'
 	import MediaInsertDropdown from './MediaInsertDropdown.svelte'
 	import ComposerLinkManager from './ComposerLinkManager.svelte'
+	import ComposerBubbleMenu from './ComposerBubbleMenu.svelte'
 	import { ComposerMediaHandler } from './ComposerMediaHandler.svelte'
 	import { useComposerEvents } from './useComposerEvents.svelte'
 	import { useDropdown } from './useDropdown.svelte'
@@ -259,7 +260,7 @@
 </script>
 
 <div class={`composer composer--${variant} ${className}`}>
-	{#if showToolbar && editor && !isLoading}
+	{#if showToolbar && editor && !isLoading && features.toolbar !== false}
 		<ComposerToolbar
 			bind:this={toolbarRef}
 			{editor}
@@ -286,6 +287,9 @@
 			<TableRowMenu {editor} />
 			<TableColMenu {editor} />
 		{/if}
+		{#if features.bubbleMenu}
+			<ComposerBubbleMenu {editor} {features} />
+		{/if}
 		<ComposerLinkManager bind:this={linkManagerRef} {editor} {features} />
 	{/if}
 
@@ -368,6 +372,7 @@
 
 		&.with-toolbar {
 			border-top: none;
+			margin-top: $unit-2x;
 		}
 
 		// More generous padding for full variant
diff --git a/src/lib/components/admin/composer/editorConfig.ts b/src/lib/components/admin/composer/editorConfig.ts
index 25b20d3..8b0c727 100644
--- a/src/lib/components/admin/composer/editorConfig.ts
+++ b/src/lib/components/admin/composer/editorConfig.ts
@@ -115,6 +115,15 @@ export function getColorCommands(): any[] {
 	return commands.colors?.commands || []
 }
 
+// Get commands for bubble menu
+export function getBubbleMenuCommands(): any[] {
+	const textFormattingCommands = commands['text-formatting']?.commands || []
+	// Return only the essential formatting commands for bubble menu
+	return textFormattingCommands.filter((cmd) =>
+		['bold', 'italic', 'underline', 'strike', 'link'].includes(cmd.name)
+	)
+}
+
 // Commands to exclude from toolbar
 export const excludedCommands = ['colors', 'fonts']
 
@@ -138,6 +147,11 @@ export function shouldShowSlashCommands(variant: ComposerVariant): boolean {
 	return variant !== 'minimal'
 }
 
+// Whether to show bubble menu
+export function shouldShowBubbleMenu(variant: ComposerVariant): boolean {
+	return variant !== 'minimal'
+}
+
 // Default features by variant
 export function getDefaultFeatures(variant: ComposerVariant): ComposerFeatures {
 	if (variant === 'minimal') {
@@ -146,7 +160,9 @@ export function getDefaultFeatures(variant: ComposerVariant): ComposerFeatures {
 			mediaLibrary: false,
 			urlEmbed: false,
 			tables: false,
-			codeBlocks: false
+			codeBlocks: false,
+			bubbleMenu: false,
+			toolbar: true
 		}
 	}
 
@@ -156,7 +172,9 @@ export function getDefaultFeatures(variant: ComposerVariant): ComposerFeatures {
 			mediaLibrary: true,
 			urlEmbed: false,
 			tables: false,
-			codeBlocks: false
+			codeBlocks: false,
+			bubbleMenu: true,
+			toolbar: false
 		}
 	}
 
@@ -166,6 +184,8 @@ export function getDefaultFeatures(variant: ComposerVariant): ComposerFeatures {
 		mediaLibrary: true,
 		urlEmbed: true,
 		tables: true,
-		codeBlocks: true
+		codeBlocks: true,
+		bubbleMenu: true,
+		toolbar: false
 	}
 }
diff --git a/src/lib/components/admin/composer/types.ts b/src/lib/components/admin/composer/types.ts
index 2f6d4eb..a9598a6 100644
--- a/src/lib/components/admin/composer/types.ts
+++ b/src/lib/components/admin/composer/types.ts
@@ -8,6 +8,8 @@ export interface ComposerFeatures {
 	urlEmbed?: boolean
 	tables?: boolean
 	codeBlocks?: boolean
+	bubbleMenu?: boolean
+	toolbar?: boolean
 }
 
 export interface ComposerProps {