refactor(getOrderedToolbarItems): moved to utils file

Author: SoRobby

src/lib/edra/headless/toolbar.svelte

@@ -4,6 +4,7 @@
 	import EdraToolBarIcon from './components/EdraToolBarIcon.svelte';
 	import SearchAndReplace from './components/SearchAndReplace.svelte';
 	import type { Snippet } from 'svelte';
+	import { getOrderedToolbarItems } from '../utils.js';
 
 	interface Props {
 		class?: string;
@@ -16,44 +17,11 @@
 
 	// Special components that are handled separately
 	const specialComponents = ['fontSize', 'quickColor', 'searchAndReplace'];
-	const toolbarItems = getOrderedToolbarItems() as Array<{ type: string; command?: any }>;
+	const toolbarItems = getOrderedToolbarItems(allowedCommands, commands, specialComponents) as Array<{ type: string; command?: any }>;
 	let showSearchAndReplace = $state(false);
 	const colorCommands = commands.colors.commands;
 	const fontCommands = commands.fonts.commands;
 
-	// Function to get ordered toolbar items based on allowedCommands
-	function getOrderedToolbarItems() {
-		if (!allowedCommands?.length) {
-			return [
-				...Object.values(commands).flatMap((group) =>
-					group.commands.map((cmd) => ({ type: 'command', command: cmd }))
-				),
-				...specialComponents.map((comp) => ({ type: comp }))
-			];
-		}
-
-		return allowedCommands
-			.map((cmdName) => {
-				if (specialComponents.includes(cmdName)) {
-					return { type: cmdName };
-				}
-				// Check if it's a group
-				if (commands[cmdName]) {
-					return commands[cmdName].commands.map((cmd) => ({
-						type: 'command',
-						command: cmd
-					}));
-				}
-				// Find individual command
-				const command = Object.values(commands)
-					.flatMap((group) => group.commands)
-					.find((cmd) => cmd.name === cmdName);
-
-				return command ? { type: 'command', command } : null;
-			})
-			.flat()
-			.filter(Boolean);
-	}
 </script>
 
 <div class={`edra-toolbar ${className}`}>

src/lib/edra/shadcn/components/QuickColor.svelte

@@ -26,10 +26,9 @@
 
 	const currentColor = $derived.by(() => editor.getAttributes('textStyle').color);
 	const currentHighlight = $derived.by(() => editor.getAttributes('highlight').color);
-	let isOpen = $state(false);
 </script>
 
-<Popover.Root bind:open={isOpen}>
+<Popover.Root>
 	<Popover.Trigger>
 		<EdraToolTip content="Quick Colors">
 			<Button
@@ -60,7 +59,6 @@
 					style={`color: ${color.value}; background-color: ${color.value}50; border-color: ${color.value};`}
 					title={color.label}
 					onclick={() => {
-						isOpen = false;
 						if (color.value === '' || color.label === 'Default')
 							editor.chain().focus().unsetColor().run();
 						else
@@ -89,7 +87,6 @@
 					style={`background-color: ${color.value}50; border-color: ${color.value};`}
 					title={color.label}
 					onclick={() => {
-						isOpen = false;
 						if (color.value === '' || color.label === 'Default')
 							editor.chain().focus().unsetHighlight().run();
 						else editor.chain().focus().toggleHighlight({ color: color.value }).run();

src/lib/edra/shadcn/toolbar.svelte

@@ -7,6 +7,7 @@
 	import SearchAndReplace from './components/SearchAndReplace.svelte';
 	import type { Snippet } from 'svelte';
 	import { cn } from '$lib/utils.js';
+	import { getOrderedToolbarItems } from '../utils.js';
 
 	interface Props {
 		class?: string;
@@ -19,41 +20,7 @@
 
 	// Special components that are handled separately
 	const specialComponents = ['fontSize', 'quickColor', 'searchAndReplace'];
-	const toolbarItems = getOrderedToolbarItems() as Array<{ type: string; command?: any }>;
-
-	// Function to get ordered toolbar items based on allowedCommands
-	function getOrderedToolbarItems() {
-		if (!allowedCommands?.length) {
-			return [
-				...Object.values(commands).flatMap((group) =>
-					group.commands.map((cmd) => ({ type: 'command', command: cmd }))
-				),
-				...specialComponents.map((comp) => ({ type: comp }))
-			];
-		}
-
-		return allowedCommands
-			.map((cmdName) => {
-				if (specialComponents.includes(cmdName)) {
-					return { type: cmdName };
-				}
-				// Check if it's a group
-				if (commands[cmdName]) {
-					return commands[cmdName].commands.map((cmd) => ({
-						type: 'command',
-						command: cmd
-					}));
-				}
-				// Find individual command
-				const command = Object.values(commands)
-					.flatMap((group) => group.commands)
-					.find((cmd) => cmd.name === cmdName);
-
-				return command ? { type: 'command', command } : null;
-			})
-			.flat()
-			.filter(Boolean);
-	}
+	const toolbarItems = getOrderedToolbarItems(allowedCommands, commands, specialComponents) as Array<{ type: string; command?: any }>;
 </script>
 
 <div

src/lib/edra/utils.ts

@@ -130,6 +130,51 @@ export function focusEditor(editor: Editor | undefined, event?: MouseEvent | Key
 	}
 }
 
+/**
+ * Returns an ordered array of toolbar items based on allowed commands.
+ *
+ * @param allowedCommands - An optional array of allowed command names.
+ * @param commands - An object with command groups. Each group should have a `commands` array.
+ * @param specialComponents - An array of command names that are handled as special components.
+ * @returns An array of toolbar items.
+ */
+export function getOrderedToolbarItems(
+	allowedCommands: string[] | undefined,
+	commands: Record<string, { commands: any[] }>,
+	specialComponents: string[]
+): Array<{ type: string; command?: any }> {
+	if (!allowedCommands?.length) {
+		return [
+			...Object.values(commands).flatMap((group) =>
+				group.commands.map((cmd) => ({ type: 'command', command: cmd }))
+			),
+			...specialComponents.map((comp) => ({ type: comp }))
+		];
+	}
+
+	return allowedCommands
+		.map((cmdName) => {
+			if (specialComponents.includes(cmdName)) {
+				return { type: cmdName };
+			}
+			// Check if it's a group
+			if (commands[cmdName]) {
+				return commands[cmdName].commands.map((cmd) => ({
+					type: 'command',
+					command: cmd
+				}));
+			}
+			// Find individual command
+			const command = Object.values(commands)
+				.flatMap((group) => group.commands)
+				.find((cmd) => cmd.name === cmdName);
+
+			return command ? { type: 'command', command } : null;
+		})
+		.flat()
+		.filter(Boolean) as Array<{ type: string; command?: any }>;
+}
+
 /**
  * Props for Edra's editor component
  */