bug: Unbullet one list item not the whole list

umaranis · May 6, 2024 · 0815f5a · 0815f5a
1 parent 22ce853
commit 0815f5a
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 12 deletions.
diff --git a/.../svelte-lexical/src/lib/components/toolbar/BlockFormatDropDown/BulletDropDrownItem.svelte b/.../svelte-lexical/src/lib/components/toolbar/BlockFormatDropDown/BulletDropDrownItem.svelte
@@ -1,13 +1,11 @@
 <script lang="ts">
-  import {
-    INSERT_UNORDERED_LIST_COMMAND,
-    REMOVE_LIST_COMMAND,
-  } from '@lexical/list';
+  import {INSERT_UNORDERED_LIST_COMMAND} from '@lexical/list';
   import {getContext} from 'svelte';
   import type {Writable} from 'svelte/store';
   import {getEditor} from '$lib/core/composerContext.js';
   import DropDownItem from '../../generic/dropdown/DropDownItem.svelte';
   import type {blockTypeToBlockName} from './blockTypeToBlockName.js';
+  import {formatParagraph} from './formatParagraph.js';
 
   const blockType: Writable<keyof typeof blockTypeToBlockName> =
     getContext('blockType');
@@ -17,7 +15,7 @@
     if ($blockType !== 'bullet') {
       editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
     } else {
-      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+      formatParagraph(editor);
     }
   };
 </script>

diff --git a/...s/svelte-lexical/src/lib/components/toolbar/BlockFormatDropDown/CheckDropDrownItem.svelte b/...s/svelte-lexical/src/lib/components/toolbar/BlockFormatDropDown/CheckDropDrownItem.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
-  import {INSERT_CHECK_LIST_COMMAND, REMOVE_LIST_COMMAND} from '@lexical/list';
+  import {INSERT_CHECK_LIST_COMMAND} from '@lexical/list';
   import {getContext} from 'svelte';
   import type {Writable} from 'svelte/store';
   import {getEditor} from '$lib/core/composerContext.js';
   import DropDownItem from '../../generic/dropdown/DropDownItem.svelte';
   import type {blockTypeToBlockName} from './blockTypeToBlockName.js';
+  import {formatParagraph} from './formatParagraph.js';
 
   const blockType: Writable<keyof typeof blockTypeToBlockName> =
     getContext('blockType');
@@ -14,7 +15,7 @@
     if ($blockType !== 'check') {
       editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, undefined);
     } else {
-      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+      formatParagraph(editor);
     }
   };
 </script>

diff --git a/.../svelte-lexical/src/lib/components/toolbar/BlockFormatDropDown/NumberDropDrownItem.svelte b/.../svelte-lexical/src/lib/components/toolbar/BlockFormatDropDown/NumberDropDrownItem.svelte
@@ -1,13 +1,11 @@
 <script lang="ts">
-  import {
-    INSERT_ORDERED_LIST_COMMAND,
-    REMOVE_LIST_COMMAND,
-  } from '@lexical/list';
+  import {INSERT_ORDERED_LIST_COMMAND} from '@lexical/list';
   import {getContext} from 'svelte';
   import type {Writable} from 'svelte/store';
   import {getEditor} from '$lib/core/composerContext.js';
   import DropDownItem from '../../generic/dropdown/DropDownItem.svelte';
   import type {blockTypeToBlockName} from './blockTypeToBlockName.js';
+  import {formatParagraph} from './formatParagraph.js';
 
   const blockType: Writable<keyof typeof blockTypeToBlockName> =
     getContext('blockType');
@@ -17,7 +15,7 @@
     if ($blockType !== 'number') {
       editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
     } else {
-      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+      formatParagraph(editor);
     }
   };
 </script>

diff --git a/packages/svelte-lexical/src/lib/components/toolbar/BlockFormatDropDown/formatParagraph.ts b/packages/svelte-lexical/src/lib/components/toolbar/BlockFormatDropDown/formatParagraph.ts
@@ -0,0 +1,9 @@
+import {$setBlocksType} from '@lexical/selection';
+import {$createParagraphNode, $getSelection, type LexicalEditor} from 'lexical';
+
+export function formatParagraph(editor: LexicalEditor) {
+  editor.update(() => {
+    const selection = $getSelection();
+    $setBlocksType(selection, () => $createParagraphNode());
+  });
+}