@use-kona/editor 0.1.25 → 0.1.26

package/dist/plugins/ListsPlugin/ListsPlugin.js

@@ -8,8 +8,9 @@ class ListsPlugin {
     static NUMBERED_LIST_ELEMENT = 'ol';
     static LIST_ITEM_ELEMENT = 'li';
     constructor(options = {}){
-        const { listTypes = [], listItemTypes = [] } = options;
+        const { ignoreBackspaceTypes = [], listTypes = [], listItemTypes = [] } = options;
         this.options = {
+            ignoreBackspaceTypes,
             listTypes: [
                 ListsPlugin.BULLETED_LIST_ELEMENT,
                 ListsPlugin.NUMBERED_LIST_ELEMENT,
@@ -139,7 +140,8 @@ class ListsPlugin {
                 match: (n)=>this.isListItem(editor, n)
             }));
             if ('Backspace' === event.key) {
-                if (selection && match && 1 === this.getListItemDepth(editor, match[1]) && Editor.isStart(editor, selection.anchor, match[1])) {
+                if (selection && match && !this.options.ignoreBackspaceTypes?.includes(match[0].type) && 1 === this.getListItemDepth(editor, match[1]) && Editor.isStart(editor, selection.anchor, match[1])) {
+                    event.preventDefault();
                     Transforms.unwrapNodes(editor, {
                         match: (n)=>this.isList(editor, n),
                         split: true

package/dist/src/plugins/ListsPlugin/ListsPlugin.d.ts

@@ -5,6 +5,7 @@ import type { IPlugin } from '../../types';
 type Options = {
     listTypes?: string[];
     listItemTypes?: string[];
+    ignoreBackspaceTypes?: string[];
 };
 export declare class ListsPlugin implements IPlugin {
     options: Options;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@use-kona/editor",
-  "version": "0.1.25",
+  "version": "0.1.26",
   "type": "module",
   "exports": {
     ".": "./src/index.ts"

package/src/plugins/ListsPlugin/ListsPlugin.spec.tsx

@@ -1,35 +1,44 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 
+import type { KeyboardEvent, ReactNode } from 'react';
+import { Editor } from 'slate';
 import {
   createHyperscript,
   createText,
   type HyperscriptShorthands,
 } from 'slate-hyperscript';
-import { describe, expect, it } from 'vitest';
-import { Editor } from 'slate';
+import { describe, expect, it, vi } from 'vitest';
 import { createEditor } from '../../core/createEditor';
 import { ListsPlugin } from './ListsPlugin';
 
-
 const elements: HyperscriptShorthands = {
   paragraph: { type: 'paragraph' },
   numberedList: { type: ListsPlugin.NUMBERED_LIST_ELEMENT },
   bulletedList: { type: ListsPlugin.BULLETED_LIST_ELEMENT },
   listItem: { type: ListsPlugin.LIST_ITEM_ELEMENT },
+  taskItem: { type: 'task-item' },
 };
 
 const jsx = createHyperscript({ elements, creators: { text: createText } });
 
 jsx;
 
-const createEditorWithPlugin = (children: any) => {
+const createEditorAndPlugin = (
+  children: ReactNode,
+  options: ConstructorParameters<typeof ListsPlugin>[0] = {},
+) => {
   const editorState = <editor>{children}</editor>;
-  const editor = createEditor([new ListsPlugin()])();
+  const plugin = new ListsPlugin(options);
+  const editor = createEditor([plugin])();
   editor.children = editorState.children;
   editor.selection = editorState.selection;
 
-  return editor;
+  return { editor, plugin };
+};
+
+const createEditorWithPlugin = (children: ReactNode) => {
+  return createEditorAndPlugin(children).editor;
 };
 
 describe('ListsPlugin', () => {
@@ -128,13 +137,19 @@ describe('ListsPlugin', () => {
       {
         type: ListsPlugin.NUMBERED_LIST_ELEMENT,
         children: [
-          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'first' }] },
+          {
+            type: ListsPlugin.LIST_ITEM_ELEMENT,
+            children: [{ text: 'first' }],
+          },
         ],
       },
       {
         type: ListsPlugin.NUMBERED_LIST_ELEMENT,
         children: [
-          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'second' }] },
+          {
+            type: ListsPlugin.LIST_ITEM_ELEMENT,
+            children: [{ text: 'second' }],
+          },
         ],
       },
     ];
@@ -146,8 +161,14 @@ describe('ListsPlugin', () => {
       {
         type: ListsPlugin.NUMBERED_LIST_ELEMENT,
         children: [
-          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'first' }] },
-          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'second' }] },
+          {
+            type: ListsPlugin.LIST_ITEM_ELEMENT,
+            children: [{ text: 'first' }],
+          },
+          {
+            type: ListsPlugin.LIST_ITEM_ELEMENT,
+            children: [{ text: 'second' }],
+          },
         ],
       },
     ];
@@ -166,13 +187,19 @@ describe('ListsPlugin', () => {
       {
         type: ListsPlugin.BULLETED_LIST_ELEMENT,
         children: [
-          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'bullet' }] },
+          {
+            type: ListsPlugin.LIST_ITEM_ELEMENT,
+            children: [{ text: 'bullet' }],
+          },
         ],
       },
       {
         type: ListsPlugin.NUMBERED_LIST_ELEMENT,
         children: [
-          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'number' }] },
+          {
+            type: ListsPlugin.LIST_ITEM_ELEMENT,
+            children: [{ text: 'number' }],
+          },
         ],
       },
     ];
@@ -184,13 +211,19 @@ describe('ListsPlugin', () => {
       {
         type: ListsPlugin.BULLETED_LIST_ELEMENT,
         children: [
-          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'bullet' }] },
+          {
+            type: ListsPlugin.LIST_ITEM_ELEMENT,
+            children: [{ text: 'bullet' }],
+          },
         ],
       },
       {
         type: ListsPlugin.NUMBERED_LIST_ELEMENT,
         children: [
-          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'number' }] },
+          {
+            type: ListsPlugin.LIST_ITEM_ELEMENT,
+            children: [{ text: 'number' }],
+          },
         ],
       },
     ];
@@ -242,4 +275,67 @@ describe('ListsPlugin', () => {
 
     expect(editor.children).toEqual(output);
   });
+
+  it('should turn first-level list item into paragraph on Backspace at start', () => {
+    const { editor, plugin } = createEditorAndPlugin(
+      <bulletedList>
+        <listItem>
+          <cursor />
+          <text>Hello world</text>
+        </listItem>
+      </bulletedList>,
+    );
+    const event = {
+      key: 'Backspace',
+      preventDefault: vi.fn(),
+    } as unknown as KeyboardEvent;
+
+    plugin.handlers.onKeyDown(event, editor);
+
+    const output = (
+      <editor>
+        <paragraph>
+          <text>Hello world</text>
+        </paragraph>
+      </editor>
+    );
+
+    expect(event.preventDefault).toHaveBeenCalledOnce();
+    expect(editor.children).toEqual(output.children);
+  });
+
+  it('should ignore configured list item types for Backspace conversion', () => {
+    const { editor, plugin } = createEditorAndPlugin(
+      <bulletedList>
+        <taskItem>
+          <cursor />
+          <text>Hello world</text>
+        </taskItem>
+      </bulletedList>,
+      {
+        ignoreBackspaceTypes: ['task-item'],
+        listItemTypes: ['task-item'],
+      },
+    );
+    const event = {
+      key: 'Backspace',
+      preventDefault: vi.fn(),
+    } as unknown as KeyboardEvent;
+
+    plugin.handlers.onKeyDown(event, editor);
+
+    const output = (
+      <editor>
+        <bulletedList>
+          <taskItem>
+            <text />
+            <text>Hello world</text>
+          </taskItem>
+        </bulletedList>
+      </editor>
+    );
+
+    expect(event.preventDefault).not.toHaveBeenCalled();
+    expect(editor.children).toEqual(output.children);
+  });
 });

package/src/plugins/ListsPlugin/ListsPlugin.tsx

@@ -17,6 +17,7 @@ import styles from './styles.module.css';
 type Options = {
   listTypes?: string[];
   listItemTypes?: string[];
+  ignoreBackspaceTypes?: string[];
 };
 
 export class ListsPlugin implements IPlugin {
@@ -27,9 +28,14 @@ export class ListsPlugin implements IPlugin {
   static LIST_ITEM_ELEMENT = 'li';
 
   constructor(options: Options = {}) {
-    const { listTypes = [], listItemTypes = [] } = options;
+    const {
+      ignoreBackspaceTypes = [],
+      listTypes = [],
+      listItemTypes = [],
+    } = options;
 
     this.options = {
+      ignoreBackspaceTypes,
       listTypes: [
         ListsPlugin.BULLETED_LIST_ELEMENT,
         ListsPlugin.NUMBERED_LIST_ELEMENT,
@@ -239,9 +245,14 @@ export class ListsPlugin implements IPlugin {
         if (
           selection &&
           match &&
+          !this.options.ignoreBackspaceTypes?.includes(
+            (match[0] as CustomElement).type,
+          ) &&
           this.getListItemDepth(editor, match[1]) === 1 &&
           Editor.isStart(editor, selection.anchor, match[1])
         ) {
+          event.preventDefault();
+
           Transforms.unwrapNodes(editor, {
             match: (n) => this.isList(editor, n as CustomElement),
             split: true,