feat: move Strikethrough into More Formatting drop down

demos/playground/src/ToolbarPlayground.svelte

@@ -26,6 +26,8 @@
     DropDownAlign,
     InsertHRDropDownItem,
     InsertImageDropDownItem,
+    MoreStylesDropDown,
+    StrikethroughDropDownItem,
   } from 'svelte-lexical';
   import InsertImageDialog from './InsertImageDialog.svelte';
 
@@ -60,9 +62,11 @@
     <BoldButton />
     <ItalicButton />
     <UnderlineButton />
-    <StrikethroughButton />
     <FormatCodeButton />
     <InsertLink />
+    <MoreStylesDropDown>
+      <StrikethroughDropDownItem />
+    </MoreStylesDropDown>
     <Divider />
     <InsertDropDown>
       <InsertHRDropDownItem />

packages/svelte-lexical/src/lib/components/generic/dropdown/DropDownItem.svelte

@@ -5,6 +5,7 @@
   let className: string;
   export {className as class};
   export let title: string | undefined = undefined;
+  export let ariaLabel: string | undefined = undefined;
 
   let ref: HTMLButtonElement;
 
@@ -19,6 +20,12 @@
   });
 </script>
 
-<button class={className} on:click bind:this={ref} {title} type="button">
+<button
+  class={className}
+  on:click
+  bind:this={ref}
+  {title}
+  type="button"
+  aria-label={ariaLabel}>
   <slot />
 </button>

packages/svelte-lexical/src/lib/components/toolbar/MoreStylesDropDown/MoreStylesDropDown.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import {getIsEditable} from '$lib/core/composerContext.js';
+  import DropDown from '$lib/components/generic/dropdown/DropDown.svelte';
+
+  const isEditable = getIsEditable();
+</script>
+
+<DropDown
+  disabled={!$isEditable}
+  buttonClassName="toolbar-item spaced"
+  buttonLabel=""
+  buttonAriaLabel="Formatting options for additional text styles"
+  buttonIconClassName="icon dropdown-more">
+  <slot />
+</DropDown>

packages/svelte-lexical/src/lib/components/toolbar/MoreStylesDropDown/StrikethroughDropDownItem.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import DropDownItem from '$lib/components/generic/dropdown/DropDownItem.svelte';
+
+  import {getActiveEditor} from '$lib/core/composerContext.js';
+  import {FORMAT_TEXT_COMMAND} from 'lexical';
+  import {getContext} from 'svelte';
+  import type {Writable} from 'svelte/store';
+
+  const activeEditor = getActiveEditor();
+
+  const isStrikethrough: Writable<boolean> = getContext('isStrikethrough');
+</script>
+
+<DropDownItem
+  on:click={() => {
+    $activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough');
+  }}
+  class={'item ' + ($isStrikethrough ? 'active dropdown-item-active' : '')}
+  title="Strikethrough"
+  ariaLabel="Format text with a strikethrough">
+  <i class="icon strikethrough" />
+  <span class="text">Strikethrough</span>
+</DropDownItem>

packages/svelte-lexical/src/lib/index.ts

@@ -62,6 +62,8 @@ export {default as FontSizeDropDown} from './components/toolbar/FontSizeDropDown
 export {default as FontSizeEntry} from './components/toolbar/FontSizeEntry.svelte';
 export {default as InsertLink} from './components/toolbar/InsertLink.svelte';
 export {default as CodeLanguageDropDown} from './components/toolbar/CodeLanguageDropDown.svelte';
+export {default as MoreStylesDropDown} from './components/toolbar/MoreStylesDropDown/MoreStylesDropDown.svelte';
+export {default as StrikethroughDropDownItem} from './components/toolbar/MoreStylesDropDown/StrikethroughDropDownItem.svelte';
 // dialogs
 export {default as InsertImageDialog} from './components/toolbar/dialogs/InsertImageDialog.svelte';
 export {default as InsertImageUploadedDialogBody} from './components/toolbar/dialogs/InsertImageUploadedDialogBody.svelte';