refactor: clean up names, remove unused util, align with tiptap conventions

- Merged latest changes from main branch and refactored code
- Renamed `showBubbleMenus` to `showBubbleMenu` for consistency with tiptap terminology
- Renamed `showSlashCommand` to `showSlashCommands` to accurately reflect its behavior
- Corrected typo in `SearcnAndReplace`, changed to `SearchAndReplace`
- Removed `getOrderedToolbarItems` utility as a new child-component approach is now used

Author: SoRobby

src/lib/components/custom/demo-editor-settings.svelte

@@ -7,21 +7,21 @@
 
 	interface Props {
 		showToolBar: boolean;
-		showBubbleMenus: boolean;
+		showBubbleMenu: boolean;
 		editable: boolean;
 	}
 
 	let {
 		showToolBar = $bindable(true),
-		showBubbleMenus = $bindable(true),
+		showBubbleMenu = $bindable(true),
 		editable = $bindable(true)
 	}: Props = $props();
 </script>
 
 <Dialog.Root>
 	<Dialog.Trigger class={buttonVariants({ variant: 'outline' })}>
 		<Settings />
-		<span>Demo Settings</span>
+		<span>Editor settings</span>
 	</Dialog.Trigger>
 	<Dialog.Content class="h-fit max-h-[95vh] w-80 max-w-[95vw] p-4">
 		<Dialog.Header class="mb-4">
@@ -31,13 +31,13 @@
 			<div class="flex w-full items-center gap-2">
 				<Checkbox id="toolbar" bind:checked={showToolBar} />
 				<Label for="toolbar" class="w-full cursor-pointer text-sm font-medium leading-none"
-					>Show Editor Toolbar</Label
+					>Show editor toolbar</Label
 				>
 			</div>
 			<div class="flex w-full items-center gap-2">
-				<Checkbox id="menus" bind:checked={showBubbleMenus} />
+				<Checkbox id="menus" bind:checked={showBubbleMenu} />
 				<Label for="menus" class="w-full cursor-pointer text-sm font-medium leading-none"
-					>Show Editor Menus</Label
+					>Show editor bubble menu</Label
 				>
 			</div>
 			<div class="flex w-full items-center gap-2">

src/lib/components/custom/editor-output.svelte

@@ -23,7 +23,7 @@
 
 <Dialog.Root>
 	<Dialog.Trigger class={buttonVariants({ variant: 'outline' })}>
-		<FileJson /> Show Output
+		<FileJson /> Show output
 	</Dialog.Trigger>
 	<Dialog.Content
 		class={cn(
@@ -47,7 +47,9 @@
 			<Dialog.Title>JSON Output</Dialog.Title>
 			<Dialog.Description>Observe the JSON output of the editor content</Dialog.Description>
 		</Dialog.Header>
+
 		<ShikiCode class="size-full overflow-auto" {code} lang="json" />
+		
 		<Button
 			variant="outline"
 			class="ml-auto w-fit"

src/lib/edra/headless/editor.svelte

@@ -45,11 +45,10 @@
 		class: className = '',
 		content = undefined,
 		editable = true,
-		showBubbleMenus = true,
+		showBubbleMenu = true,
 		limit = undefined,
-		editable = true,
 		editor = $bindable<Editor | undefined>(),
-		showSlashCommand = true,
+		showSlashCommands = true,
 		onUpdate,
 		children
 	}: EdraProps = $props();
@@ -77,7 +76,7 @@
 				AudioExtended(AudioExtendedComponent),
 				ImageExtended(ImageExtendedComponent),
 				VideoExtended(VideoExtendedComponent),
-				...(showSlashCommand ? [slashcommand(SlashCommandList)] : [])
+				...(showSlashCommands ? [slashcommand(SlashCommandList)] : [])
 			],
 			{
 				editable,
@@ -90,7 +89,6 @@
 		);
 		return () => editor?.destroy();
 	});
-
 </script>
 
 {#if editor}
@@ -99,7 +97,7 @@
 
 <div class={`edra ${className}`}>
 	{@render children?.()}
-	{#if editor && showBubbleMenus}
+	{#if editor && showBubbleMenu}
 		<LinkMenu {editor} />
 		<TableRowMenu {editor} />
 		<TableColMenu {editor} />

src/lib/edra/headless/toolbar.svelte

@@ -2,7 +2,7 @@
 	import type { Editor } from '@tiptap/core';
 	import { commands } from '../commands/commands.js';
 	import EdraToolBarIcon from './components/EdraToolBarIcon.svelte';
-	import SearcnAndReplace from './components/SearcnAndReplace.svelte';
+	import SearchAndReplace from './components/SearchAndReplace.svelte';
 	import type { Snippet } from 'svelte';
 
 	interface Props {
@@ -15,7 +15,6 @@
 
 	// Special components that are handled separately
 	const specialComponents = ['fontSize', 'quickColor', 'searchAndReplace'];
-	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;
@@ -75,6 +74,6 @@
 				}}
 			/>
 		{/if}
-		<SearcnAndReplace {editor} bind:show={showSearchAndReplace} />
+		<SearchAndReplace {editor} bind:show={showSearchAndReplace} />
 	{/if}
 </div>

src/lib/edra/shadcn/editor.svelte

@@ -43,11 +43,11 @@
 	let {
 		class: className = '',
 		content = undefined,
-		showBubbleMenus = true,
+		showBubbleMenu = true,
 		limit = undefined,
 		editable = true,
 		editor = $bindable<Editor | undefined>(),
-		showSlashCommand = true,
+		showSlashCommands = true,
 		onUpdate,
 		children
 	}: EdraProps = $props();
@@ -75,7 +75,7 @@
 				ImageExtended(ImageExtendedComponent),
 				VideoExtended(VideoExtendedComponent),
 				AudioExtended(AudioExtendedComponent),
-				...(showSlashCommand ? [slashcommand(SlashCommandList)] : [])
+				...(showSlashCommands ? [slashcommand(SlashCommandList)] : [])
 			],
 			{
 				editable,
@@ -97,7 +97,7 @@
 
 <div class={cn('edra', className)}>
 	{@render children?.()}
-	{#if editor && showBubbleMenus}
+	{#if editor && showBubbleMenu}
 		<LinkMenu {editor} />
 		<TableColMenu {editor} />
 		<TableRowMenu {editor} />

src/lib/edra/shadcn/toolbar.svelte

@@ -7,7 +7,6 @@
 	import SearchAndReplace from './components/SearchAndReplace.svelte';
 	import type { Snippet } from 'svelte';
 	import { cn } from '$lib/utils.js';
-	import type { Snippet } from 'svelte';
 
 	interface Props {
 		class?: string;

src/lib/edra/utils.ts

@@ -131,62 +131,17 @@ 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
  */
 export interface EdraProps {
 	class?: string;
 	content?: Content;
 	editable?: boolean;
-	showBubbleMenus?: boolean;
+	showBubbleMenu?: boolean;
 	limit?: number;
 	editor?: Editor;
-	showSlashCommand?: boolean;
+	showSlashCommands?: boolean;
 	/**
 	 * Callback function to be called when the content is updated
 	 * @param content

src/routes/+page.svelte

@@ -13,18 +13,18 @@
 	import DemoEditorSettings from '$lib/components/custom/demo-editor-settings.svelte';
 	import EditorOutput from '$lib/components/custom/editor-output.svelte';
 
+	// Editor states
 	let content = $state<Content>();
 	let editor = $state<Editor>();
+	let showToolBar = $state(true);
+	let showBubbleMenu = $state(true);
+	let editable = $state(true);
 
 	$effect(() => {
-		console.log('Content', content);
+		$inspect('[DEBUG] Content', content);
 		localStorage.setItem('edra-content', JSON.stringify(content));
 	});
 
-	let showToolBar = $state(true);
-	let showBubbleMenus = $state(true);
-	let editable = $state(true);
-
 	$effect(() => {
 		console.log('editable', editable);
 		editor?.setEditable(editable);
@@ -76,14 +76,14 @@
 			</Button>
 		</div>
 		<div class="size-full *:my-2">
-			<div class="text-center text-xl font-bold">Explore Demo</div>
+			<div class="text-center text-xl font-bold">Explore the demo</div>
 			<div class="flex flex-col items-center justify-center gap-4 sm:flex-row">
-				<DemoEditorSettings bind:showToolBar bind:showBubbleMenus bind:editable />
+				<DemoEditorSettings bind:showToolBar bind:showBubbleMenu bind:editable />
 				<EditorOutput code={JSON.stringify(content, null, 2)} />
 			</div>
 		</div>
 	</div>
-	<div class="m-auto flex h-[35rem] w-[95%] flex-col rounded border sm:w-[85%]">
+	<div class="m-auto flex w-[95%] flex-col rounded border sm:w-[85%]">
 		{#if editor}
 			{#if showToolBar}
 				<div transition:slide>
@@ -92,7 +92,14 @@
 			{/if}
 			<EdraBubbleMenu {editor} />
 		{/if}
-		<Edra class="overflow-auto" bind:editor {editable} {showBubbleMenus} {content} {onUpdate} />
+		<Edra
+			class="h-[32rem] min-h-[32rem] overflow-auto"
+			bind:editor
+			{editable}
+			{showBubbleMenu}
+			{content}
+			{onUpdate}
+		/>
 	</div>
 </div>
 

src/routes/examples/headless/+page.svelte

@@ -3,7 +3,6 @@
 	import type { Content, Editor } from '@tiptap/core';
 	import type { Transaction } from '@tiptap/pm/state';
 	import { Edra, EdraToolbar } from '$lib/edra/headless/index.js';
-	import { slide } from 'svelte/transition';
 	import defaultContent from '$lib/default_content.js';
 
 	// Editor states
@@ -38,7 +37,7 @@
 <div class="mx-auto w-[95%] px-4">
 	{#if editor && showToolBar}
 		<div class="rounded-t border-x border-t p-1">
-			<EdraToolbar {editor} allowedCommands={['bulletList', 'headings', 'quickColor']} />
+			<EdraToolbar {editor} />
 		</div>
 	{/if}
 	<div class="rounded-b border">
@@ -49,7 +48,6 @@
 			{content}
 			{onUpdate}
 			{showSlashCommands}
-			allowedBubbleMenuCommands={['link', 'bulletList', 'headings', 'quickColor']}
 		/>
 	</div>
 </div>

src/routes/examples/shadcn/+page.svelte

@@ -2,9 +2,9 @@
 	import { browser } from '$app/environment';
 	import type { Content, Editor } from '@tiptap/core';
 	import type { Transaction } from '@tiptap/pm/state';
-	import { Edra, EdraToolbar } from '$lib/edra/shadcn/index.js';
-	import { slide } from 'svelte/transition';
+	import { Edra, EdraToolbar, EdraBubbleMenu } from '$lib/edra/shadcn/index.js';
 	import defaultContent from '$lib/default_content.js';
+	import FontSize from '$lib/edra/shadcn/components/FontSize.svelte';
 
 	// Editor states
 	let content = $state<Content>();
@@ -14,7 +14,7 @@
 	let showSlashCommands = $state(true);
 
 	$effect(() => {
-		console.log('Content', content);
+		$inspect('[DEBUG] Content', content);
 		localStorage.setItem('edra-content', JSON.stringify(content));
 	});
 
@@ -38,20 +38,20 @@
 <div class="mx-auto w-[95%] px-4">
 	{#if editor && showToolBar}
 		<div class="rounded-t border-x border-t p-1">
-			<EdraToolbar {editor} allowedCommands={['bulletList', 'headings', 'quickColor']} />
+			<EdraToolbar {editor}>
+				<FontSize {editor} />
+			</EdraToolbar>
 		</div>
+		<EdraBubbleMenu {editor} />
 	{/if}
 	<div class="rounded-b border">
 		<Edra
-			class="overflow-auto h-64"
+			class="h-64 overflow-auto"
 			bind:editor
 			{showBubbleMenu}
 			{content}
 			{onUpdate}
 			{showSlashCommands}
-			allowedBubbleMenuCommands={['link', 'bulletList', 'headings', 'quickColor']}
 		/>
 	</div>
 </div>
-
-