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 @@ - + + + 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 @@ }); - 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 @@ + + + + + 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 @@ + + + { + $activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough'); + }} + class={'item ' + ($isStrikethrough ? 'active dropdown-item-active' : '')} + title="Strikethrough" + ariaLabel="Format text with a strikethrough"> + + Strikethrough + 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';