@use-kona/editor 0.1.10 → 0.1.12

package/dist/plugins/ListsPlugin/ListsPlugin.js

@@ -59,8 +59,9 @@ class ListsPlugin {
                 if (prevList) {
                     const currentDepth = this.getListDepth(editor, path);
                     const prevDepth = this.getListDepth(editor, prevList[1]);
-                    if (this.isList(editor, prevList[0]) && currentDepth === prevDepth) try {
+                    if (this.isList(editor, prevList[0]) && currentDepth === prevDepth && prevList[0].type === node.type) try {
                         Transforms.mergeNodes(editor, {
+                            at: path,
                             match: (n)=>this.isList(editor, n)
                         });
                     } catch (e) {}
@@ -225,16 +226,26 @@ class ListsPlugin {
                     ].includes(n.type)
             });
             else {
-                Transforms.setNodes(editor, {
-                    type: listItemType
-                }, {
-                    mode: 'lowest'
-                });
+                const { selection } = editor;
+                if (!selection) return;
+                const nodes = Array.from(Editor.nodes(editor, {
+                    at: Editor.unhangRange(editor, selection),
+                    match: (n)=>Element.isElement(n),
+                    mode: 'highest'
+                }));
+                if (!nodes.length) return;
                 Transforms.wrapNodes(editor, {
                     type: listType,
                     children: []
                 }, {
-                    match: (n)=>n.type === listItemType
+                    mode: 'highest',
+                    match: (n)=>Element.isElement(n) && n.type === listItemType
+                });
+                Transforms.setNodes(editor, {
+                    type: listItemType
+                }, {
+                    at: nodes[0][1],
+                    split: true
                 });
             }
         });

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

@@ -0,0 +1,3 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+export {};

package/dist/plugins/ListsPlugin/ListsPlugin.spec.js

@@ -0,0 +1,47 @@
+import { createHyperscript, createText } from "slate-hyperscript";
+import { describe, expect, it } from "vitest";
+import { createEditor } from "../../core/createEditor.js";
+import { ListsPlugin } from "./ListsPlugin.js";
+const ListsPlugin_spec_elements = {
+    paragraph: {
+        type: 'paragraph'
+    },
+    numberedList: {
+        type: ListsPlugin.NUMBERED_LIST_ELEMENT
+    },
+    bulletedList: {
+        type: ListsPlugin.BULLETED_LIST_ELEMENT
+    },
+    listItem: {
+        type: ListsPlugin.LIST_ITEM_ELEMENT
+    }
+};
+const jsx = createHyperscript({
+    elements: ListsPlugin_spec_elements,
+    creators: {
+        text: createText
+    }
+});
+const createEditorWithPlugin = (children)=>{
+    const editorState = /*#__PURE__*/ jsx("editor", null, children);
+    const editor = createEditor([
+        new ListsPlugin()
+    ])();
+    editor.children = editorState.children;
+    editor.selection = editorState.selection;
+    return editor;
+};
+describe('ListsPlugin', ()=>{
+    it('should change current block to bulleted list', ()=>{
+        const editor = createEditorWithPlugin(/*#__PURE__*/ jsx("paragraph", null, /*#__PURE__*/ jsx("cursor", null), /*#__PURE__*/ jsx("text", null, "Hello world")));
+        ListsPlugin.toggleList(editor, ListsPlugin.BULLETED_LIST_ELEMENT);
+        const output = /*#__PURE__*/ jsx("editor", null, /*#__PURE__*/ jsx("bulletedList", null, /*#__PURE__*/ jsx("listItem", null, /*#__PURE__*/ jsx("text", null, "Hello world"))), /*#__PURE__*/ jsx("paragraph", null, /*#__PURE__*/ jsx("text", null)));
+        expect(editor.children).toEqual(output.children);
+    });
+    it('should change current block to numbered list', ()=>{
+        const editor = createEditorWithPlugin(/*#__PURE__*/ jsx("paragraph", null, /*#__PURE__*/ jsx("cursor", null), /*#__PURE__*/ jsx("text", null, "Hello world")));
+        ListsPlugin.toggleList(editor, ListsPlugin.NUMBERED_LIST_ELEMENT);
+        const output = /*#__PURE__*/ jsx("editor", null, /*#__PURE__*/ jsx("numberedList", null, /*#__PURE__*/ jsx("listItem", null, /*#__PURE__*/ jsx("text", null, "Hello world"))), /*#__PURE__*/ jsx("paragraph", null, /*#__PURE__*/ jsx("text", null)));
+        expect(editor.children).toEqual(output.children);
+    });
+});

package/dist/plugins/TableOfContentsPlugin/TableOfContentsPlugin.js

@@ -50,7 +50,7 @@ class TableOfContentsPlugin {
                 const element = ReactEditor.toDOMNode(params.editor, node);
                 element?.scrollIntoView({
                     behavior: 'smooth',
-                    block: 'nearest'
+                    block: 'start'
                 });
             };
             return /*#__PURE__*/ jsx("div", {

package/dist/plugins/TableOfContentsPlugin/styles_module.css

@@ -3,6 +3,12 @@
   position: absolute;
   top: 50px;
   right: 8px;
+
+  &:after {
+    content: "";
+    position: absolute;
+    inset: -8px 0 -8px -8px;
+  }
 }
 
 .toc-MJmvGk .max-NR6DEL {
@@ -19,6 +25,7 @@
 
 .mini-iQ6Zfx {
   transform-origin: 100% 0;
+  opacity: .65;
   flex-direction: column;
   align-items: flex-end;
   gap: 4px;
@@ -50,6 +57,7 @@
   transform-origin: 100% 0;
   border-radius: 4px;
   width: max-content;
+  min-width: 120px;
   max-width: 200px;
   max-height: 160px;
   padding: 4px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@use-kona/editor",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "type": "module",
   "exports": {
     ".": "./src/index.ts"
@@ -44,15 +44,15 @@
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "18",
+    "slate": "^0.117.2",
+    "slate-history": "^0.113.1",
+    "slate-hyperscript": "^0.100.0",
+    "slate-react": "^0.117.3",
     "storybook": "^9.0.13",
     "storybook-addon-rslib": "^2.0.2",
     "storybook-react-rsbuild": "^2.0.2",
     "typescript": "^5.8.3",
-    "vitest": "^3.2.4",
-    "slate": "^0.117.2",
-    "slate-history": "^0.113.1",
-    "slate-hyperscript": "^0.100.0",
-    "slate-react": "^0.117.3"
+    "vitest": "^3.2.4"
   },
   "peerDependencies": {
     "react": ">=16.9.0",

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

@@ -0,0 +1,85 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+
+import {
+  createHyperscript,
+  createText,
+  HyperscriptShorthands,
+} from 'slate-hyperscript';
+import { describe, expect, it } 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 },
+};
+
+const jsx = createHyperscript({ elements, creators: { text: createText } });
+
+jsx;
+
+const createEditorWithPlugin = (children: any) => {
+  const editorState = <editor>{children}</editor>;
+  const editor = createEditor([new ListsPlugin()])();
+  editor.children = editorState.children;
+  editor.selection = editorState.selection;
+
+  return editor;
+};
+
+describe('ListsPlugin', () => {
+  it('should change current block to bulleted list', () => {
+    const editor = createEditorWithPlugin(
+      <paragraph>
+        <cursor />
+        <text>Hello world</text>
+      </paragraph>,
+    );
+
+    ListsPlugin.toggleList(editor, ListsPlugin.BULLETED_LIST_ELEMENT);
+
+    const output = (
+      <editor>
+        <bulletedList>
+          <listItem>
+            <text>Hello world</text>
+          </listItem>
+        </bulletedList>
+        <paragraph>
+          <text></text>
+        </paragraph>
+      </editor>
+    );
+
+    expect(editor.children).toEqual(output.children);
+  });
+
+  it('should change current block to numbered list', () => {
+    const editor = createEditorWithPlugin(
+      <paragraph>
+        <cursor />
+        <text>Hello world</text>
+      </paragraph>,
+    );
+
+    ListsPlugin.toggleList(editor, ListsPlugin.NUMBERED_LIST_ELEMENT);
+
+    const output = (
+      <editor>
+        <numberedList>
+          <listItem>
+            <text>Hello world</text>
+          </listItem>
+        </numberedList>
+        <paragraph>
+          <text></text>
+        </paragraph>
+      </editor>
+    );
+
+    expect(editor.children).toEqual(output.children);
+  });
+});

package/src/plugins/ListsPlugin/ListsPlugin.tsx

@@ -44,7 +44,7 @@ export class ListsPlugin implements IPlugin {
 
     editor.normalizeNode = (entry: NodeEntry) => {
       const [node, path] = entry;
-
+      //
       if (this.isList(editor, node as CustomElement)) {
         /* Unwrap lists around non-list-items */
         for (const [child, childPath] of Array.from(
@@ -99,7 +99,7 @@ export class ListsPlugin implements IPlugin {
 
         const prevList =
           prevListItemPath &&
-          Editor.above(editor, {
+          Editor.above<CustomElement>(editor, {
             at: prevListItemPath,
             match: (n) => this.isList(editor, n as CustomElement),
           });
@@ -110,10 +110,12 @@ export class ListsPlugin implements IPlugin {
 
           if (
             this.isList(editor, prevList[0] as CustomElement) &&
-            currentDepth === prevDepth
+            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) {}
@@ -395,11 +397,39 @@ export class ListsPlugin implements IPlugin {
           },
         );
       } else {
-        Transforms.setNodes(editor, { type: listItemType }, { mode: 'lowest' });
+        const { selection } = editor;
+
+        if (!selection) {
+          return;
+        }
+
+        const nodes = Array.from(
+          Editor.nodes(editor, {
+            at: Editor.unhangRange(editor, selection),
+            match: (n) => Element.isElement(n),
+            mode: 'highest',
+          }),
+        );
+
+        if (!nodes.length) {
+          return;
+        }
+
         Transforms.wrapNodes(
           editor,
           { type: listType, children: [] },
-          { match: (n) => (n as CustomElement).type === listItemType },
+          {
+            mode: 'highest',
+            match: (n) => {
+              return Element.isElement(n) && n.type === listItemType;
+            },
+          },
+        );
+
+        Transforms.setNodes(
+          editor,
+          { type: listItemType },
+          { at: nodes[0][1], split: true },
         );
       }
     });

package/src/plugins/TableOfContentsPlugin/TableOfContentsPlugin.tsx

@@ -77,7 +77,7 @@ export class TableOfContentsPlugin implements IPlugin {
           ) as HTMLElement;
           element?.scrollIntoView({
             behavior: 'smooth',
-            block: 'nearest'
+            block: 'start',
           });
         };
 

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

@@ -3,6 +3,15 @@
   top: 50px;
   right: 8px;
   z-index: 3;
+
+  &:after {
+    content: "";
+    position: absolute;
+    top: -8px;
+    left: -8px;
+    bottom: -8px;
+    right: 0;
+  }
 }
 
 .toc .max {
@@ -24,6 +33,7 @@
   gap: 4px;
   transition: all 0.25s;
   transform-origin: top right;
+  opacity: 0.65;
 }
 
 .mini .h1 {
@@ -55,6 +65,7 @@
   transition: all 0.25s;
   transform-origin: top right;
   width: max-content;
+  min-width: 120px;
   max-width: 200px;
   max-height: 160px;
   overflow-y: auto;