@use-kona/editor 0.1.21 → 0.1.22

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

@@ -7,9 +7,11 @@ import {
   type HyperscriptShorthands,
 } from 'slate-hyperscript';
 import { describe, expect, it } from 'vitest';
+import { Editor } from 'slate';
 import { createEditor } from '../../core/createEditor';
 import { ListsPlugin } from './ListsPlugin';
 
+
 const elements: HyperscriptShorthands = {
   paragraph: { type: 'paragraph' },
   numberedList: { type: ListsPlugin.NUMBERED_LIST_ELEMENT },
@@ -48,9 +50,6 @@ describe('ListsPlugin', () => {
             <text>Hello world</text>
           </listItem>
         </bulletedList>
-        <paragraph>
-          <text></text>
-        </paragraph>
       </editor>
     );
 
@@ -74,12 +73,173 @@ describe('ListsPlugin', () => {
             <text>Hello world</text>
           </listItem>
         </numberedList>
-        <paragraph>
-          <text></text>
-        </paragraph>
       </editor>
     );
 
     expect(editor.children).toEqual(output.children);
   });
+
+  it('should merge two adjacent bulleted lists during normalization', () => {
+    const editor = createEditorWithPlugin(
+      <paragraph>
+        <text />
+      </paragraph>,
+    );
+
+    editor.children = [
+      {
+        type: ListsPlugin.BULLETED_LIST_ELEMENT,
+        children: [
+          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'one' }] },
+        ],
+      },
+      {
+        type: ListsPlugin.BULLETED_LIST_ELEMENT,
+        children: [
+          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'two' }] },
+        ],
+      },
+    ];
+    editor.selection = null;
+
+    Editor.normalize(editor, { force: true });
+
+    const output = [
+      {
+        type: ListsPlugin.BULLETED_LIST_ELEMENT,
+        children: [
+          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'one' }] },
+          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'two' }] },
+        ],
+      },
+    ];
+
+    expect(editor.children).toEqual(output);
+  });
+
+  it('should merge two adjacent numbered lists during normalization', () => {
+    const editor = createEditorWithPlugin(
+      <paragraph>
+        <text />
+      </paragraph>,
+    );
+
+    editor.children = [
+      {
+        type: ListsPlugin.NUMBERED_LIST_ELEMENT,
+        children: [
+          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'first' }] },
+        ],
+      },
+      {
+        type: ListsPlugin.NUMBERED_LIST_ELEMENT,
+        children: [
+          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'second' }] },
+        ],
+      },
+    ];
+    editor.selection = null;
+
+    Editor.normalize(editor, { force: true });
+
+    const output = [
+      {
+        type: ListsPlugin.NUMBERED_LIST_ELEMENT,
+        children: [
+          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'first' }] },
+          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'second' }] },
+        ],
+      },
+    ];
+
+    expect(editor.children).toEqual(output);
+  });
+
+  it('should not merge lists of different types', () => {
+    const editor = createEditorWithPlugin(
+      <paragraph>
+        <text />
+      </paragraph>,
+    );
+
+    editor.children = [
+      {
+        type: ListsPlugin.BULLETED_LIST_ELEMENT,
+        children: [
+          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'bullet' }] },
+        ],
+      },
+      {
+        type: ListsPlugin.NUMBERED_LIST_ELEMENT,
+        children: [
+          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'number' }] },
+        ],
+      },
+    ];
+    editor.selection = null;
+
+    Editor.normalize(editor, { force: true });
+
+    const output = [
+      {
+        type: ListsPlugin.BULLETED_LIST_ELEMENT,
+        children: [
+          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'bullet' }] },
+        ],
+      },
+      {
+        type: ListsPlugin.NUMBERED_LIST_ELEMENT,
+        children: [
+          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: 'number' }] },
+        ],
+      },
+    ];
+
+    expect(editor.children).toEqual(output);
+  });
+
+  it('should merge multiple adjacent lists of same type', () => {
+    const editor = createEditorWithPlugin(
+      <paragraph>
+        <text />
+      </paragraph>,
+    );
+
+    editor.children = [
+      {
+        type: ListsPlugin.BULLETED_LIST_ELEMENT,
+        children: [
+          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: '1' }] },
+        ],
+      },
+      {
+        type: ListsPlugin.BULLETED_LIST_ELEMENT,
+        children: [
+          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: '2' }] },
+        ],
+      },
+      {
+        type: ListsPlugin.BULLETED_LIST_ELEMENT,
+        children: [
+          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: '3' }] },
+        ],
+      },
+    ];
+    editor.selection = null;
+
+    Editor.normalize(editor, { force: true });
+
+    const output = [
+      {
+        type: ListsPlugin.BULLETED_LIST_ELEMENT,
+        children: [
+          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: '1' }] },
+          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: '2' }] },
+          { type: ListsPlugin.LIST_ITEM_ELEMENT, children: [{ text: '3' }] },
+        ],
+      },
+    ];
+
+    expect(editor.children).toEqual(output);
+  });
 });

package/src/plugins/ListsPlugin/ListsPlugin.tsx

@@ -44,8 +44,15 @@ export class ListsPlugin implements IPlugin {
 
     editor.normalizeNode = (entry: NodeEntry) => {
       const [node, path] = entry;
-      //
+
       if (this.isList(editor, node as CustomElement)) {
+        if ((node as CustomElement).children.length === 0) {
+          Transforms.removeNodes(editor, {
+            at: path,
+          });
+          return;
+        }
+
         /* Unwrap lists around non-list-items */
         for (const [child, childPath] of Array.from(
           Node.children(editor, path),
@@ -64,6 +71,7 @@ export class ListsPlugin implements IPlugin {
         }
       }
 
+      /* Wrap list items in list if they are not already wrapped */
       if (this.isListItem(editor, node as CustomElement)) {
         const parent = Editor.above(editor, {
           at: path,
@@ -87,39 +95,17 @@ export class ListsPlugin implements IPlugin {
         }
       }
 
-      if (this.isList(editor, node as CustomElement)) {
-        if (!Path.hasPrevious(path)) {
-          normalizeNode(entry);
-          return;
-        }
-
-        const prevListItemPath = Editor.before(editor, path, {
-          unit: 'block',
-        });
-
-        const prevList =
-          prevListItemPath &&
-          Editor.above<CustomElement>(editor, {
-            at: prevListItemPath,
-            match: (n) => this.isList(editor, n as CustomElement),
-          });
+      /* Merge adjacent lists */
+      if (this.isList(editor, node as CustomElement) && Path.hasPrevious(path)) {
+        const prevPath = Path.previous(path);
+        const prevNode = Node.get(editor, prevPath) as CustomElement;
 
-        if (prevList) {
-          const currentDepth = this.getListDepth(editor, path);
-          const prevDepth = this.getListDepth(editor, prevList[1]);
-
-          if (
-            this.isList(editor, prevList[0] as CustomElement) &&
-            currentDepth === prevDepth &&
-            prevList[0].type === (node as CustomElement).type
-          ) {
-            try {
-              Transforms.mergeNodes(editor, {
-                at: path,
-                match: (n) => this.isList(editor, n as CustomElement),
-              });
-            } catch (e) {}
-          }
+        if (
+          this.isList(editor, prevNode) &&
+          prevNode.type === (node as CustomElement).type
+        ) {
+          Transforms.mergeNodes(editor, { at: path });
+          return;
         }
       }
 
@@ -424,22 +410,20 @@ export class ListsPlugin implements IPlugin {
           return;
         }
 
+        Transforms.setNodes(
+          editor,
+          { type: listItemType },
+          { at: nodes[0][1], split: true },
+        );
+
         Transforms.wrapNodes(
           editor,
           { type: listType, children: [] },
           {
-            mode: 'highest',
-            match: (n) => {
-              return Element.isElement(n) && n.type === listItemType;
-            },
+            at: nodes[0][1],
+            match: (n) => (n as CustomElement).type === listItemType,
           },
         );
-
-        Transforms.setNodes(
-          editor,
-          { type: listItemType },
-          { at: nodes[0][1], split: true },
-        );
       }
     });
   };
@@ -464,26 +448,6 @@ export class ListsPlugin implements IPlugin {
     return 0;
   };
 
-  private getListDepth = (editor: Editor, path?: Path) => {
-    if (path) {
-      const node = Node.get(editor, path) as CustomElement;
-      if (!this.isList(editor, node)) {
-        return 0;
-      }
-
-      let count = 0;
-      let parent = Editor.parent(editor, path);
-
-      while (parent && this.isList(editor, parent[0] as CustomElement)) {
-        count++;
-        parent = Editor.parent(editor, parent[1]);
-      }
-
-      return count;
-    }
-    return 0;
-  };
-
   private getListItem = (editor: Editor, path?: Path) => {
     if (path) {
       const node = Node.get(editor, path) as CustomElement;

package/src/plugins/ListsPlugin/styles.module.css

@@ -1,5 +1,6 @@
 .list {
   padding: 0;
+  margin: 0;
 
   & & {
     margin-left: 32px;

package/src/plugins/TableOfContentsPlugin/TableOfContentsPlugin.tsx

@@ -1,7 +1,7 @@
 import { useStore } from '@nanostores/react';
 import { type MapStore, map } from 'nanostores';
 import { type MouseEvent, useEffect } from 'react';
-import { Editor, type NodeEntry, Operation } from 'slate';
+import { Editor, type NodeEntry, Operation, Text } from 'slate';
 import { ReactEditor } from 'slate-react';
 import type { CustomElement } from '../../../types';
 import type { IPlugin, UiParams } from '../../types';
@@ -87,7 +87,7 @@ export class TableOfContentsPlugin implements IPlugin {
             className={styles[`h${level}`]}
             onMouseDown={handleMouseDown}
           >
-            {node.children[0].text}
+            {Text.isText(node.children[0]) ? node.children[0].text : ''}
           </div>
         );
       },

package/src/utils.ts

@@ -7,8 +7,10 @@ export const isEmpty = (children: Descendant[]) => {
     return first.text.trim() === '';
   }
 
-  if (children && children.length <= 1 && Text.isText(first?.children?.[0])) {
-    return first.children.every((child) => child.text?.trim() === '');
+  if (children && children.length <= 1 && first && 'children' in first) {
+    return first.children.every(
+      (child) => Text.isText(child) && child.text?.trim() === '',
+    );
   }
 
   return false;

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2025 Kona
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/dist/plugins/CommandsPlugin/resolveCommands.spec.d.ts

@@ -1 +0,0 @@
-export {};