From e0411cb6a4958ca831edee5d7f33d1a1759ae42e Mon Sep 17 00:00:00 2001
From: umaranis <mail@umaranis.com>
Date: Sun, 12 May 2024 16:42:51 +1000
Subject: [PATCH] feat: move Strikethrough into More Formatting drop down

---
 demos/playground/src/ToolbarPlayground.svelte |  6 ++++-
 .../generic/dropdown/DropDownItem.svelte      |  9 +++++++-
 .../MoreStylesDropDown.svelte                 | 15 ++++++++++++
 .../StrikethroughDropDownItem.svelte          | 23 +++++++++++++++++++
 packages/svelte-lexical/src/lib/index.ts      |  2 ++
 5 files changed, 53 insertions(+), 2 deletions(-)
 create mode 100644 packages/svelte-lexical/src/lib/components/toolbar/MoreStylesDropDown/MoreStylesDropDown.svelte
 create mode 100644 packages/svelte-lexical/src/lib/components/toolbar/MoreStylesDropDown/StrikethroughDropDownItem.svelte

diff --git a/demos/playground/src/ToolbarPlayground.svelte b/demos/playground/src/ToolbarPlayground.svelte
index d7b4256..b954031 100644
--- a/demos/playground/src/ToolbarPlayground.svelte
+++ b/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 />
diff --git a/packages/svelte-lexical/src/lib/components/generic/dropdown/DropDownItem.svelte b/packages/svelte-lexical/src/lib/components/generic/dropdown/DropDownItem.svelte
index 77ccc82..522bb6f 100644
--- a/packages/svelte-lexical/src/lib/components/generic/dropdown/DropDownItem.svelte
+++ b/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>
diff --git a/packages/svelte-lexical/src/lib/components/toolbar/MoreStylesDropDown/MoreStylesDropDown.svelte b/packages/svelte-lexical/src/lib/components/toolbar/MoreStylesDropDown/MoreStylesDropDown.svelte
new file mode 100644
index 0000000..d01ba65
--- /dev/null
+++ b/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>
diff --git a/packages/svelte-lexical/src/lib/components/toolbar/MoreStylesDropDown/StrikethroughDropDownItem.svelte b/packages/svelte-lexical/src/lib/components/toolbar/MoreStylesDropDown/StrikethroughDropDownItem.svelte
new file mode 100644
index 0000000..06b74cb
--- /dev/null
+++ b/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>
diff --git a/packages/svelte-lexical/src/lib/index.ts b/packages/svelte-lexical/src/lib/index.ts
index 29e415e..26b5993 100644
--- a/packages/svelte-lexical/src/lib/index.ts
+++ b/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';