@use-kona/editor 0.1.11 → 0.1.13

package/dist/core/createEditable.d.ts

@@ -1,4 +1,4 @@
-import { Editor } from 'slate';
+import { type Editor } from 'slate';
 import type { IPlugin } from '../types';
 type Props = {
     readOnly?: boolean;

package/dist/core/createEditor.d.ts

@@ -1,2 +1,4 @@
 import type { IPlugin } from '../types';
-export declare const createEditor: (plugins: IPlugin[]) => () => import("slate").BaseEditor & import("slate-react").ReactEditor;
+export declare const createEditor: (plugins: IPlugin[]) => () => import("slate").BaseEditor & import("slate-react").ReactEditor & {
+    getCommands: <T extends IPlugin>(plugin: new () => T) => T["commands"];
+};

package/dist/core/createEditor.js

@@ -3,11 +3,17 @@ import { withHistory } from "slate-history";
 import { withReact } from "slate-react";
 const createEditor_createEditor = (plugins)=>()=>{
         const baseEditor = withHistory(withReact(createEditor()));
+        const pluginsMap = new Map();
         const editorWithPlugins = plugins.reduce((editor, plugin)=>{
             if (plugin.init) return plugin.init(editor);
             return editor;
         }, baseEditor);
         const { isInline, isVoid, normalizeNode, deleteFragment, deleteBackward, deleteForward } = editorWithPlugins;
+        editorWithPlugins.getCommands = (plugin)=>{
+            const pluginInstance = pluginsMap.get(plugin);
+            if (!pluginInstance) throw new Error(`Plugin ${plugin.name} not found`);
+            return pluginInstance.commands;
+        };
         editorWithPlugins.normalizeNode = (entry)=>{
             const [node, path] = entry;
             const lastElement = editorWithPlugins.children[editorWithPlugins.children.length - 1];
@@ -150,17 +156,21 @@ const createEditor_createEditor = (plugins)=>()=>{
                     const plugin = plugins.find((plugin)=>plugin.blocks?.find((b)=>b.type === node.type));
                     if (plugin) {
                         const match = plugin.blocks?.find((b)=>b.type === node.type);
-                        const result = match?.onBeforeDelete ? await match.onBeforeDelete([
-                            node
-                        ]) : true;
-                        if (!result) return;
-                        Transforms.removeNodes(editorWithPlugins, {
-                            at: path,
-                            match: (n)=>n.type === node.type
-                        });
-                        match?.onDelete?.([
-                            node
-                        ]);
+                        const hasOnBeforeDelete = match?.onBeforeDelete;
+                        if (!hasOnBeforeDelete) return void deleteFragment(options);
+                        {
+                            const result = await match.onBeforeDelete([
+                                node
+                            ]);
+                            if (!result) return;
+                            Transforms.removeNodes(editorWithPlugins, {
+                                at: path,
+                                match: (n)=>n.type === node.type
+                            });
+                            match?.onDelete?.([
+                                node
+                            ]);
+                        }
                     } else Transforms.removeNodes(editorWithPlugins, {
                         at: path,
                         match: (n)=>n.type === node.type

package/dist/elements/BaseElement.d.ts

@@ -1,2 +1,2 @@
-import { RenderElementProps } from 'slate-react';
+import type { RenderElementProps } from 'slate-react';
 export declare const BaseElement: (props: RenderElementProps) => import("react/jsx-runtime").JSX.Element;

package/dist/plugins/AttachmentsPlugin/types.d.ts

@@ -1,6 +1,6 @@
-import { Editor } from 'slate';
-import { RenderElementProps } from 'slate-react';
-import { ReactNode } from 'react';
+import type { Editor } from 'slate';
+import type { RenderElementProps } from 'slate-react';
+import type { ReactNode } from 'react';
 export type Options = {
     onDragEnter?: () => void;
     onDragLeave?: () => void;

package/dist/plugins/BreaksPlugin/BreaksPlugin.d.ts

@@ -7,7 +7,9 @@ type Options = {
 export declare class BreaksPlugin implements IPlugin {
     private options;
     constructor(options: Options);
-    init(editor: Editor): import("slate").BaseEditor & import("slate-react").ReactEditor;
+    init(editor: Editor): import("slate").BaseEditor & import("slate-react").ReactEditor & {
+        getCommands: <T extends IPlugin>(plugin: new () => T) => T["commands"];
+    };
     handlers: {
         onKeyDown: (event: KeyboardEvent, editor: Editor) => void;
     };

package/dist/plugins/CodeBlockPlugin/utils.d.ts

@@ -2,7 +2,7 @@
  * Copied from prism-react-renderer repo
  * https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/utils/normalizeTokens.js
  * */
-import Prism from 'prismjs';
+import type Prism from 'prismjs';
 type PrismToken = Prism.Token;
 type Token = {
     types: string[];

package/dist/plugins/HeadingsPlugin/HeadingsPlugin.d.ts

@@ -1,4 +1,4 @@
-import { Descendant, Editor } from 'slate';
+import { type Descendant, Editor } from 'slate';
 import type { RenderElementProps } from 'slate-react';
 import type { IPlugin } from '../../types';
 export declare class HeadingsPlugin implements IPlugin {

package/dist/plugins/LinksPlugin/LinksPlugin.d.ts

@@ -6,7 +6,9 @@ export declare class LinksPlugin implements IPlugin {
     private options;
     static LINK_TYPE: string;
     constructor(options: Options);
-    init(editor: Editor): import("slate").BaseEditor & import("slate-react").ReactEditor;
+    init(editor: Editor): import("slate").BaseEditor & import("slate-react").ReactEditor & {
+        getCommands: <T extends IPlugin>(plugin: new () => T) => T["commands"];
+    };
     blocks: {
         isInline: boolean;
         type: string;

package/dist/plugins/LinksPlugin/index.d.ts

@@ -1,2 +1,2 @@
 export { LinksPlugin } from './LinksPlugin';
-export { type OptionsMethods } from './types';
+export type { OptionsMethods } from './types';

package/dist/plugins/LinksPlugin/types.d.ts

@@ -1,6 +1,6 @@
-import { LINK_ELEMENT } from './constants';
-import { Editor } from 'slate';
-import { ReactNode } from 'react';
+import type { LINK_ELEMENT } from './constants';
+import type { Editor } from 'slate';
+import type { ReactNode } from 'react';
 export type LinkElement = {
     type: typeof LINK_ELEMENT;
     url: string;

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

@@ -13,7 +13,9 @@ export declare class ListsPlugin implements IPlugin {
     static NUMBERED_LIST_ELEMENT: string;
     static LIST_ITEM_ELEMENT: string;
     constructor(options?: Options);
-    init: (editor: Editor) => import("slate").BaseEditor & import("slate-react").ReactEditor;
+    init: (editor: Editor) => import("slate").BaseEditor & import("slate-react").ReactEditor & {
+        getCommands: <T extends IPlugin>(plugin: new () => T) => T["commands"];
+    };
     blocks: {
         type: string;
         render: (props: RenderElementProps) => import("react/jsx-runtime").JSX.Element;
@@ -23,6 +25,10 @@ export declare class ListsPlugin implements IPlugin {
     handlers: {
         onKeyDown: (event: KeyboardEvent, editor: Editor) => true | undefined;
     };
+    commands: {
+        toggleBulletedList: () => (editor: Editor) => void;
+        toggleNumberedList: () => (editor: Editor) => void;
+    };
     static isListActive: (editor: Editor, type: string) => boolean;
     static isBulletedListActive: (editor: Editor) => boolean;
     static isNumberedListActive: (editor: Editor) => boolean;

package/dist/plugins/ListsPlugin/ListsPlugin.js

@@ -196,6 +196,10 @@ class ListsPlugin {
             }
         }
     };
+    commands = {
+        toggleBulletedList: ()=>(editor)=>ListsPlugin.toggleList(editor, ListsPlugin.BULLETED_LIST_ELEMENT),
+        toggleNumberedList: ()=>(editor)=>ListsPlugin.toggleList(editor, ListsPlugin.NUMBERED_LIST_ELEMENT)
+    };
     static isListActive = (editor, type)=>{
         const { selection } = editor;
         if (!selection) return false;

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/MenuPlugin/Menu.d.ts

@@ -1,2 +1,2 @@
-import { Options } from './types';
+import type { Options } from './types';
 export declare const Menu: (props: Options) => import("react/jsx-runtime").JSX.Element;

package/dist/plugins/MenuPlugin/MenuPlugin.d.ts

@@ -3,5 +3,5 @@ import type { Options } from './types';
 export declare class MenuPlugin implements IPlugin {
     private options;
     constructor(options: Options);
-    ui: (params: UiParams) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | null | undefined;
+    ui: (params: UiParams) => string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
 }

package/dist/plugins/MenuPlugin/types.d.ts

@@ -1,4 +1,4 @@
-import { UiParams } from '../../types';
+import type { UiParams } from '../../types';
 export type Options = {
     renderMenu: (props: UiParams) => React.ReactNode;
 };

package/dist/plugins/NodeIdPlugin/NodeIdPlugin.d.ts

@@ -10,6 +10,8 @@ type Options = {
 export declare class NodeIdPlugin implements IPlugin<Editor, NodeIdBlock> {
     private options;
     constructor(options: Options);
-    init(editor: Editor): import("slate").BaseEditor & import("slate-react").ReactEditor;
+    init(editor: Editor): import("slate").BaseEditor & import("slate-react").ReactEditor & {
+        getCommands: <T extends IPlugin>(plugin: new () => T) => T["commands"];
+    };
 }
 export {};

package/dist/plugins/NodeIdPlugin/NodeIdPlugin.js

@@ -1,8 +1,11 @@
 import { Element, Node, Text } from "slate";
 const assignId = (node, generateId)=>{
     if (Element.isElement(node)) try {
+        if (node.nodeId) return;
         node.nodeId = generateId();
-        node.children.forEach((n)=>assignId(n, generateId));
+        node.children.forEach((n)=>{
+            assignId(n, generateId);
+        });
     } catch  {}
 };
 class NodeIdPlugin {

package/dist/plugins/ShortcutsPlugin/ShortcutsPlugin.d.ts

@@ -19,6 +19,8 @@ export type ChangeMatch = {
 export declare class ShortcutsPlugin implements IPlugin {
     private options;
     constructor(options: Options);
-    init(editor: Editor): import("slate").BaseEditor & import("slate-react").ReactEditor;
+    init(editor: Editor): import("slate").BaseEditor & import("slate-react").ReactEditor & {
+        getCommands: <T extends IPlugin>(plugin: new () => T) => T["commands"];
+    };
 }
 export {};

package/dist/plugins/TableOfContentsPlugin/TableOfContentsPlugin.d.ts

@@ -12,7 +12,9 @@ export declare class TableOfContentsPlugin implements IPlugin {
         headings: NodeEntry<CustomElement>[];
     }>;
     constructor(options: Options);
-    init(editor: Editor): import("slate").BaseEditor & ReactEditor;
+    init(editor: Editor): import("slate").BaseEditor & ReactEditor & {
+        getCommands: <T extends IPlugin>(plugin: new () => T) => T["commands"];
+    };
     ui(params: UiParams): import("react/jsx-runtime").JSX.Element;
 }
 export {};

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/dist/types.d.ts

@@ -15,6 +15,9 @@ export interface IPlugin<TEditor extends Editor = Editor, TBlock extends CustomE
         onPaste?: (event: ClipboardEvent, editor: Editor) => void;
     };
     decorate?: (entry: NodeEntry) => DecoratedRange[];
+    commands?: {
+        [key: string]: (editor: TEditor, ...args: any[]) => void;
+    };
     ui?: (params: UiParams) => ReactNode;
 }
 export type Block<TEditor extends Editor = Editor, TBlock extends CustomElement = CustomElement> = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@use-kona/editor",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "type": "module",
   "exports": {
     ".": "./src/index.ts"
@@ -21,7 +21,6 @@
     "test": "vitest run"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.0.0",
     "@rsbuild/core": "~1.4.0",
     "@rsbuild/plugin-react": "^1.3.2",
     "@rslib/core": "^0.10.4",
@@ -44,15 +43,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/core/createEditable.tsx

@@ -9,10 +9,10 @@ import React, {
   useCallback,
 } from 'react';
 import {
-  DecoratedRange,
-  Descendant,
-  Editor,
-  NodeEntry,
+  type DecoratedRange,
+  type Descendant,
+  type Editor,
+  type NodeEntry,
   Transforms,
 } from 'slate';
 import {

package/src/core/createEditor.ts

@@ -14,6 +14,8 @@ import type { Block, IPlugin } from '../types';
 export const createEditor = (plugins: IPlugin[]) => () => {
   const baseEditor = withHistory(withReact(createBaseEditor()));
 
+  const pluginsMap = new Map<new () => IPlugin, IPlugin>();
+
   const editorWithPlugins = plugins.reduce<Editor>((editor, plugin) => {
     if (plugin.init) {
       return plugin.init(editor);
@@ -31,6 +33,16 @@ export const createEditor = (plugins: IPlugin[]) => () => {
     deleteForward,
   } = editorWithPlugins;
 
+  editorWithPlugins.getCommands = (plugin: new () => IPlugin) => {
+    const pluginInstance = pluginsMap.get(plugin);
+
+    if (!pluginInstance) {
+      throw new Error(`Plugin ${plugin.name} not found`);
+    }
+
+    return pluginInstance.commands;
+  };
+
   editorWithPlugins.normalizeNode = (entry) => {
     const [node, path] = entry;
 
@@ -201,16 +213,18 @@ export const createEditor = (plugins: IPlugin[]) => () => {
     const nodes = Array.from(
       Editor.nodes<CustomElement>(editorWithPlugins, {
         at: selection,
-        match: (n) =>
-          !Editor.isEditor(n) &&
-          Editor.isBlock(editorWithPlugins, n as CustomElement),
+        match: (n) => {
+          return (
+            !Editor.isEditor(n) &&
+            Editor.isBlock(editorWithPlugins, n as CustomElement)
+          );
+        },
         reverse: true,
         mode: 'highest',
         voids: true,
       }),
     );
 
-
     for (const entry of nodes) {
       const [node, path] = entry;
 
@@ -222,18 +236,26 @@ export const createEditor = (plugins: IPlugin[]) => () => {
         const plugin = plugins.find((plugin) =>
           plugin.blocks?.find((b) => b.type === node.type),
         );
+
         if (plugin) {
           const match = plugin.blocks?.find((b) => b.type === node.type);
-          const result = match?.onBeforeDelete
-            ? await match.onBeforeDelete([node])
-            : true;
-          if (result) {
-            Transforms.removeNodes(editorWithPlugins, {
-              at: path,
-              match: (n) => (n as CustomElement).type === node.type,
-            });
-            match?.onDelete?.([node]);
+
+          const hasOnBeforeDelete = match?.onBeforeDelete;
+
+          if (hasOnBeforeDelete) {
+            const result = await match.onBeforeDelete!([node]);
+
+            if (result) {
+              Transforms.removeNodes(editorWithPlugins, {
+                at: path,
+                match: (n) => (n as CustomElement).type === node.type,
+              });
+              match?.onDelete?.([node]);
+            } else {
+              return;
+            }
           } else {
+            deleteFragment(options);
             return;
           }
         } else {

package/src/elements/BaseElement.tsx

@@ -1,4 +1,4 @@
-import { RenderElementProps } from 'slate-react';
+import type { RenderElementProps } from 'slate-react';
 
 export const BaseElement = (props: RenderElementProps) => {
   return <p {...props.attributes}>{props.children}</p>;

package/src/plugins/AttachmentsPlugin/types.ts

@@ -1,6 +1,6 @@
-import { Editor } from 'slate';
-import { RenderElementProps } from 'slate-react';
-import { ReactNode } from 'react';
+import type { Editor } from 'slate';
+import type { RenderElementProps } from 'slate-react';
+import type { ReactNode } from 'react';
 
 export type Options = {
   onDragEnter?: () => void;

package/src/plugins/CodeBlockPlugin/utils.ts

@@ -3,7 +3,7 @@
  * https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/utils/normalizeTokens.js
  * */
 
-import Prism from 'prismjs'
+import type Prism from 'prismjs'
 
 type PrismToken = Prism.Token
 type Token = {

package/src/plugins/HeadingsPlugin/HeadingsPlugin.tsx

@@ -1,4 +1,4 @@
-import { Descendant, Editor, Element, Transforms } from 'slate';
+import { type Descendant, Editor, Element, Transforms } from 'slate';
 import { jsx } from 'slate-hyperscript';
 import type { RenderElementProps } from 'slate-react';
 import type { IPlugin } from '../../types';

package/src/plugins/LinksPlugin/index.ts

@@ -1,2 +1,2 @@
 export { LinksPlugin } from './LinksPlugin';
-export { type OptionsMethods } from './types';
+export type { OptionsMethods } from './types';

package/src/plugins/LinksPlugin/types.ts

@@ -1,6 +1,6 @@
-import { LINK_ELEMENT } from './constants';
-import { Editor } from 'slate';
-import { ReactNode } from 'react';
+import type { LINK_ELEMENT } from './constants';
+import type { Editor } from 'slate';
+import type { ReactNode } from 'react';
 
 export type LinkElement = {
   type: typeof LINK_ELEMENT;

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

@@ -0,0 +1,85 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+
+import {
+  createHyperscript,
+  createText,
+  type 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

@@ -328,6 +328,15 @@ export class ListsPlugin implements IPlugin {
     },
   };
 
+  commands = {
+    toggleBulletedList: () => (editor: Editor) => {
+      return ListsPlugin.toggleList(editor, ListsPlugin.BULLETED_LIST_ELEMENT);
+    },
+    toggleNumberedList: () => (editor: Editor) => {
+      return ListsPlugin.toggleList(editor, ListsPlugin.NUMBERED_LIST_ELEMENT);
+    },
+  };
+
   static isListActive = (editor: Editor, type: string) => {
     const { selection } = editor;
 

package/src/plugins/MenuPlugin/Menu.tsx

@@ -1,5 +1,5 @@
 import { useReadOnly, useSlate } from 'slate-react';
-import { Options } from './types';
+import type { Options } from './types';
 
 export const Menu = (props: Options) => {
   const editor = useSlate();

package/src/plugins/MenuPlugin/types.ts

@@ -1,4 +1,4 @@
-import { UiParams } from '../../types';
+import type { UiParams } from '../../types';
 
 export type Options = {
   renderMenu: (props: UiParams) => React.ReactNode;

package/src/plugins/NodeIdPlugin/NodeIdPlugin.ts

@@ -9,8 +9,14 @@ type NodeIdBlock = CustomElement & {
 const assignId = (node: Node, generateId: () => string) => {
   if (Element.isElement(node)) {
     try {
+      if ((node as NodeIdBlock).nodeId) {
+        return;
+      }
+
       (node as NodeIdBlock).nodeId = generateId();
-      node.children.forEach((n) => assignId(n, generateId));
+      node.children.forEach((n) => {
+        assignId(n, generateId);
+      });
     } catch {}
   }
 };

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;

package/src/types.ts

@@ -1,5 +1,11 @@
 import type { KeyboardEvent, ReactElement, ReactNode } from 'react';
-import type {DecoratedRange, Descendant, Editor, NodeEntry, NodeMatch} from 'slate';
+import type {
+  DecoratedRange,
+  Descendant,
+  Editor,
+  NodeEntry,
+  NodeMatch,
+} from 'slate';
 import type { RenderElementProps, RenderLeafProps } from 'slate-react';
 import type { CustomElement, CustomText } from '../types';
 
@@ -24,6 +30,10 @@ export interface IPlugin<
 
   decorate?: (entry: NodeEntry) => DecoratedRange[];
 
+  commands?: {
+    [key: string]: (editor: TEditor, ...args: any[]) => void;
+  };
+
   ui?: (params: UiParams) => ReactNode;
 }