@use-kona/editor 0.1.2 → 0.1.3

package/README.md

@@ -1,23 +1,34 @@
-# Rslib project
+# Kona Editor
 
-## Setup
-
-Install the dependencies:
-
-```bash
-pnpm install
-```
-
-## Get started
-
-Build the library:
+## Installing
 
 ```bash
-pnpm build
+npm install @use-kona/editor
 ```
 
-Build the library in watch mode:
-
-```bash
-pnpm dev
+## Using
+
+```tsx
+import { 
+  KonaEditor, 
+  BasicFormattingPlugin,
+  /* rest of the plugins */
+} from "@use-kona/editor";
+
+const defaultValue = [
+  { type: 'paragraph', children: [{ text: '' }]}
+];
+
+export const Editor = () => {
+  return (
+    <KonaEditor
+      plugins={[
+        new BasicFormattingPlugin(),
+        // rest of the plugins
+      ]}
+      initialValue={defaultValue}
+      onChange={console.log}
+    />
+  )
+}
 ```

package/dist/examples/Emoji.d.ts

@@ -0,0 +1,5 @@
+type Props = {
+    id: string;
+};
+export declare const Emoji: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/examples/Emoji.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import EmojiSelector_module from "./EmojiSelector.module.js";
+const Emoji = (props)=>/*#__PURE__*/ jsx("em-emoji", {
+        class: EmojiSelector_module.emoji,
+        id: props.id,
+        size: "16px"
+    });
+export { Emoji };

package/dist/examples/EmojiSelector.d.ts

@@ -0,0 +1,16 @@
+declare module 'react/jsx-runtime' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'em-emoji': {
+                id: string;
+                size: string | number;
+                class?: string;
+            };
+        }
+    }
+}
+type Props = {
+    onConfirm: (emoji: any, query: any, editor: any) => void;
+};
+export declare const EmojiSelector: (props: Props) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/examples/EmojiSelector.js

@@ -0,0 +1,91 @@
+import { jsx } from "react/jsx-runtime";
+import data from "@emoji-mart/data";
+import { useStore } from "@nanostores/react";
+import clsx from "clsx";
+import { SearchIndex, init } from "emoji-mart";
+import { useEffect, useState } from "react";
+import { useSlateStatic } from "slate-react";
+import EmojiSelector_module from "./EmojiSelector.module.js";
+import { $store } from "./store.js";
+init({
+    data: data,
+    set: 'apple',
+    custom: [
+        {
+            id: 'custom',
+            name: 'Custom',
+            emojis: [
+                {
+                    id: 'kona',
+                    name: 'Kona',
+                    keywords: [
+                        'kona'
+                    ],
+                    skins: [
+                        {
+                            src: '/kona.svg'
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+});
+const EmojiSelector = (props)=>{
+    const { onConfirm } = props;
+    const editor = useSlateStatic();
+    const { emojiSearch } = useStore($store);
+    const [index, setIndex] = useState(-1);
+    const [items, setItems] = useState([]);
+    useEffect(()=>{
+        const search = async ()=>{
+            const emojis = await SearchIndex.search(emojiSearch);
+            setItems(emojis.slice(0, 10));
+            setIndex(0);
+        };
+        search();
+    }, [
+        emojiSearch
+    ]);
+    useEffect(()=>{
+        const handleKeyDown = (event)=>{
+            switch(event.key){
+                case 'ArrowRight':
+                    event.preventDefault();
+                    setIndex((index)=>(index + 1) % items.length);
+                    break;
+                case 'ArrowLeft':
+                    event.preventDefault();
+                    setIndex((index)=>(index - 1 + items.length) % items.length);
+                    break;
+                case 'Enter':
+                    event.preventDefault();
+                    onConfirm(items[index]?.id, emojiSearch, editor);
+                    break;
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown, true);
+        return ()=>{
+            document.removeEventListener('keydown', handleKeyDown, true);
+        };
+    }, [
+        items,
+        index,
+        emojiSearch
+    ]);
+    if (!items.length) return null;
+    return /*#__PURE__*/ jsx("div", {
+        className: EmojiSelector_module.root,
+        children: items.map((item, idx)=>/*#__PURE__*/ jsx("span", {
+                className: clsx(EmojiSelector_module.emoji, {
+                    [EmojiSelector_module.selected]: idx === index
+                }),
+                children: /*#__PURE__*/ jsx("em-emoji", {
+                    class: EmojiSelector_module.emoji,
+                    id: item.id,
+                    size: "20px"
+                })
+            }, item.id))
+    });
+};
+export { EmojiSelector };

package/dist/examples/EmojiSelector.module.js

@@ -0,0 +1,7 @@
+import "./EmojiSelector_module.css";
+const EmojiSelector_module = {
+    root: "root-f7KjwY",
+    emoji: "emoji-kNlwVt",
+    selected: "selected-ONnfU2"
+};
+export { EmojiSelector_module as default };

package/dist/examples/EmojiSelector_module.css

@@ -0,0 +1,36 @@
+.root-f7KjwY {
+  background-color: var(--kona-editor-background-color);
+  border: 1px solid var(--kona-editor-border-color);
+  border-radius: 8px;
+  gap: 4px;
+  padding: 4px;
+  display: flex;
+}
+
+.emoji-kNlwVt {
+  cursor: pointer;
+  vertical-align: text-bottom;
+  border-radius: 4px;
+  justify-content: center;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+
+  & span {
+    justify-content: center;
+    align-items: center;
+    width: 20px;
+    height: 20px;
+    display: inline-flex;
+  }
+
+  &:hover {
+    background-color: var(--kona-editor-alt-background-color);
+  }
+}
+
+.selected-ONnfU2 {
+  background-color: var(--kona-editor-alt-background-color);
+}
+

package/dist/examples/FloatingMenu.d.ts

@@ -6,6 +6,8 @@ type Props = {
         isFloatingMenuOpen: boolean;
         floatingMenuMode: Mode;
         url?: string;
+    } & {
+        [key: string]: unknown;
     }>;
     editor: Editor;
     commands: {

package/dist/examples/Menu.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { HeadingsPlugin, ListsPlugin } from "../plugins/index.js";
+import { CodeBlockPlugin, HeadingsPlugin, ListsPlugin } from "../plugins/index.js";
+import { CodeIcon } from "./icons/code.js";
 import { Heading1Icon } from "./icons/heading1.js";
 import { Heading2Icon } from "./icons/heading2.js";
 import { Heading3Icon } from "./icons/heading3.js";
@@ -68,6 +69,20 @@ const Menu = (props)=>{
                 children: /*#__PURE__*/ jsx(OlIcon, {
                     size: 16
                 })
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: Menu_module.divider
+            }),
+            /*#__PURE__*/ jsx("button", {
+                type: "button",
+                className: getButtonClassName(CodeBlockPlugin.isCodeBlockActive(editor)),
+                onMouseDown: (event)=>{
+                    event.preventDefault();
+                    CodeBlockPlugin.toggleCodeBlock(editor);
+                },
+                children: /*#__PURE__*/ jsx(CodeIcon, {
+                    size: 16
+                })
             })
         ]
     });

package/dist/examples/getCommands.js

@@ -1,5 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { HeadingsPlugin, ListsPlugin } from "../plugins/index.js";
+import { CodeBlockPlugin, HeadingsPlugin, ListsPlugin } from "../plugins/index.js";
+import { CodeIcon } from "./icons/code.js";
 import { Heading1Icon } from "./icons/heading1.js";
 import { Heading2Icon } from "./icons/heading2.js";
 import { Heading3Icon } from "./icons/heading3.js";
@@ -82,6 +83,18 @@ const getCommands = ()=>[
                 actions.removeCommand();
                 ListsPlugin.toggleList(editor, ListsPlugin.NUMBERED_LIST_ELEMENT, ListsPlugin.LIST_ITEM_ELEMENT);
             }
+        },
+        {
+            name: 'code',
+            title: 'Code',
+            commandName: 'code',
+            icon: /*#__PURE__*/ jsx(CodeIcon, {
+                size: 16
+            }),
+            action: (actions, editor)=>{
+                actions.removeCommand();
+                CodeBlockPlugin.toggleCodeBlock(editor);
+            }
         }
     ];
 export { getCommands };

package/dist/examples/getPlugins.d.ts

@@ -1,2 +1,2 @@
-import { BasicFormattingPlugin, BreaksPlugin, CodeBlockPlugin, CommandsPlugin, DnDPlugin, FloatingMenuPlugin, HeadingsPlugin, HighlightsPlugin, LinksPlugin, ListsPlugin, MenuPlugin, NodeIdPlugin, PlaceholderPlugin, ShortcutsPlugin, TableOfContentsPlugin } from '../plugins';
-export declare const getPlugins: () => (BasicFormattingPlugin | BreaksPlugin | CodeBlockPlugin | CommandsPlugin | DnDPlugin | FloatingMenuPlugin | HeadingsPlugin | HighlightsPlugin | LinksPlugin | ListsPlugin | MenuPlugin | NodeIdPlugin | PlaceholderPlugin | ShortcutsPlugin | TableOfContentsPlugin)[];
+import { BasicFormattingPlugin, BreaksPlugin, CodeBlockPlugin, CommandsPlugin, DnDPlugin, EmojiPlugin, FloatingMenuPlugin, HeadingsPlugin, HighlightsPlugin, LinksPlugin, ListsPlugin, MenuPlugin, NodeIdPlugin, PlaceholderPlugin, ShortcutsPlugin, TableOfContentsPlugin } from '../plugins';
+export declare const getPlugins: () => (BasicFormattingPlugin | BreaksPlugin | CodeBlockPlugin | CommandsPlugin | DnDPlugin | EmojiPlugin | FloatingMenuPlugin | HeadingsPlugin | HighlightsPlugin | LinksPlugin | ListsPlugin | MenuPlugin | NodeIdPlugin | PlaceholderPlugin | ShortcutsPlugin | TableOfContentsPlugin)[];

package/dist/examples/getPlugins.js

@@ -1,9 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-import { BasicFormattingPlugin, BreaksPlugin, CodeBlockPlugin, CommandsPlugin, DnDPlugin, FloatingMenuPlugin, HeadingsPlugin, HighlightsPlugin, LinksPlugin, ListsPlugin, MenuPlugin, NodeIdPlugin, PlaceholderPlugin, ShortcutsPlugin, TableOfContentsPlugin } from "../plugins/index.js";
+import { BasicFormattingPlugin, BreaksPlugin, CodeBlockPlugin, CommandsPlugin, DnDPlugin, EmojiPlugin, FloatingMenuPlugin, HeadingsPlugin, HighlightsPlugin, LinksPlugin, ListsPlugin, MenuPlugin, NodeIdPlugin, PlaceholderPlugin, ShortcutsPlugin, TableOfContentsPlugin } from "../plugins/index.js";
 import { Backdrop } from "./Backdrop.js";
 import { CodeBlock } from "./CodeBlock.js";
 import { colors } from "./colors.js";
 import { DragBlock } from "./DragBlock.js";
+import { Emoji } from "./Emoji.js";
+import { EmojiSelector } from "./EmojiSelector.js";
 import { FloatingMenu } from "./FloatingMenu.js";
 import { getCommands } from "./getCommands.js";
 import { getShortcuts } from "./getShortcuts.js";
@@ -44,6 +46,21 @@ const getPlugins = ()=>{
     });
     return [
         new BasicFormattingPlugin(),
+        new EmojiPlugin({
+            ignoreNodes: [
+                CodeBlockPlugin.CODE_LINE_ELEMENT
+            ],
+            onSearch: (query)=>$store.setKey('emojiSearch', query),
+            renderMenu: ({ insertEmoji })=>/*#__PURE__*/ jsx(EmojiSelector, {
+                    onConfirm: (...params)=>{
+                        insertEmoji(...params);
+                        $store.setKey('emojiSearch', '');
+                    }
+                }),
+            renderEmoji: (emoji)=>/*#__PURE__*/ jsx(Emoji, {
+                    id: emoji
+                })
+        }),
         new PlaceholderPlugin({
             focused: 'Write / to open command menu',
             unfocused: 'Write / to open command menu',

package/dist/examples/icons/code.d.ts

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

package/dist/examples/icons/code.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+const CodeIcon = ({ size })=>/*#__PURE__*/ jsxs("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 1.5,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className: "icon icon-tabler icons-tabler-outline icon-tabler-code",
+        children: [
+            /*#__PURE__*/ jsx("path", {
+                stroke: "none",
+                d: "M0 0h24v24H0z",
+                fill: "none"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M7 8l-4 4l4 4"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M17 8l4 4l-4 4"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M14 4l-4 16"
+            })
+        ]
+    });
+export { CodeIcon };

package/dist/examples/icons/drag.d.ts

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

package/dist/examples/store.d.ts

@@ -3,6 +3,7 @@ type Store = {
     isFloatingMenuOpen: boolean;
     floatingMenuMode: FloatingMenuMode;
     url?: string;
+    emojiSearch: string;
 };
 export declare const $store: import("nanostores").PreinitializedMapStore<Store> & object;
 export {};

package/dist/examples/store.js

@@ -1,6 +1,7 @@
 import { map } from "nanostores";
 const $store = map({
     isFloatingMenuOpen: false,
-    floatingMenuMode: 'main'
+    floatingMenuMode: 'main',
+    emojiSearch: ''
 });
 export { $store };

package/dist/examples/text.js

@@ -30,6 +30,9 @@ const text_elements = {
     },
     hlink: {
         type: LinksPlugin.LINK_TYPE
+    },
+    hemoji: {
+        type: 'emoji'
     }
 };
 const creators = {
@@ -42,7 +45,9 @@ const jsx = createHyperscript({
 const text_text = /*#__PURE__*/ jsx("fragment", null, /*#__PURE__*/ jsx("heading1", null, "About"), /*#__PURE__*/ jsx("paragraph", null, /*#__PURE__*/ jsx("htext", {
     bold: true,
     italic: true
-}, "Kona Editor"), ' ', "is a text editor based on Slate.js that I use in", ' ', /*#__PURE__*/ jsx("hlink", {
+}, "Kona Editor"), ' ', "is a text editor based on Slate.js that I use in", ' ', /*#__PURE__*/ jsx("hemoji", {
+    emoji: "kona"
+}, "'"), /*#__PURE__*/ jsx("hlink", {
     url: "https://kona.to"
 }, "Kona calendar"), " for notes and event descriptions. I decided to open-source the editor for a few reasons:"), /*#__PURE__*/ jsx("numberedList", null, /*#__PURE__*/ jsx("listItem", null, "I had a lot of ", /*#__PURE__*/ jsx("htext", {
     strikethrough: true
@@ -56,5 +61,5 @@ const text_text = /*#__PURE__*/ jsx("fragment", null, /*#__PURE__*/ jsx("heading
     underline: true
 }, "underlined"), " and", ' ', /*#__PURE__*/ jsx("htext", {
     strikethrough: true
-}, "strikethrough"), " text"), /*#__PURE__*/ jsx("heading3", null, "BreaksPlugin"), /*#__PURE__*/ jsx("paragraph", null, "Overrides default Slate behavior by breaking custom block types when user presses Enter."), /*#__PURE__*/ jsx("heading3", null, "CodeBlockPlugin"), /*#__PURE__*/ jsx("paragraph", null, "Adds support for code blocks."), /*#__PURE__*/ jsx("heading3", null, "CommandsPlugin"), /*#__PURE__*/ jsx("paragraph", null, "Adds Notion-style menu with custom list of commands"), /*#__PURE__*/ jsx("heading3", null, "DnDPlugin"), /*#__PURE__*/ jsx("paragraph", null, "Allows reordering blocks by drag'n'dropping them"), /*#__PURE__*/ jsx("heading3", null, "FloatingMenuPlugin"), /*#__PURE__*/ jsx("paragraph", null, "Adds menu which is shown when user selects a text"), /*#__PURE__*/ jsx("heading3", null, "HeadingsPlugin"), /*#__PURE__*/ jsx("paragraph", null, "Adds three levels of headings"), /*#__PURE__*/ jsx("heading3", null, "HighlightsPlugin"), /*#__PURE__*/ jsx("paragraph", null, "Allows highlighting selected text with a custom color"), /*#__PURE__*/ jsx("heading3", null, "LinksPlugin"), /*#__PURE__*/ jsx("paragraph", null, "Gives user ability to convert the selected text into a link"), /*#__PURE__*/ jsx("heading3", null, "MenuPlugin"), /*#__PURE__*/ jsx("paragraph", null, "Adds pinned to the top menu with custom commands"), /*#__PURE__*/ jsx("heading3", null, "NodeIdPlugin"), /*#__PURE__*/ jsx("paragraph", null, "Assigns a unique id to each block"), /*#__PURE__*/ jsx("heading3", null, "PlaceholderPlugin"), /*#__PURE__*/ jsx("paragraph", null, "Allows to setup a custom placeholder for the selected line"), /*#__PURE__*/ jsx("heading3", null, "ShortcutsPlugin"), /*#__PURE__*/ jsx("paragraph", null, "Converts some popular markdown shortcuts to a custom node"), /*#__PURE__*/ jsx("heading3", null, "TableOfContentsPlugin"), /*#__PURE__*/ jsx("paragraph", null, "Shows a quick map of headings inside the document"));
+}, "strikethrough"), " text"), /*#__PURE__*/ jsx("heading3", null, "BreaksPlugin"), /*#__PURE__*/ jsx("paragraph", null, "Overrides default Slate behavior by breaking custom block types when user presses Enter."), /*#__PURE__*/ jsx("heading3", null, "CodeBlockPlugin"), /*#__PURE__*/ jsx("paragraph", null, "Adds support for code blocks."), /*#__PURE__*/ jsx("heading3", null, "CommandsPlugin"), /*#__PURE__*/ jsx("paragraph", null, "Adds Notion-style menu with custom list of commands"), /*#__PURE__*/ jsx("heading3", null, "DnDPlugin"), /*#__PURE__*/ jsx("paragraph", null, "Allows reordering blocks by drag'n'dropping them"), /*#__PURE__*/ jsx("heading3", null, "FloatingMenuPlugin"), /*#__PURE__*/ jsx("paragraph", null, "Adds menu which is shown when user selects a text"), /*#__PURE__*/ jsx("heading3", null, "HeadingsPlugin"), /*#__PURE__*/ jsx("paragraph", null, "Adds three levels of headings"), /*#__PURE__*/ jsx("heading3", null, "HighlightsPlugin"), /*#__PURE__*/ jsx("paragraph", null, "Allows highlighting selected text with a custom color"), /*#__PURE__*/ jsx("heading3", null, "LinksPlugin"), /*#__PURE__*/ jsx("paragraph", null, "Gives user ability to convert the selected text into a link"), /*#__PURE__*/ jsx("heading3", null, "MenuPlugin"), /*#__PURE__*/ jsx("paragraph", null, "Adds pinned to the top menu with custom commands"), /*#__PURE__*/ jsx("heading3", null, "NodeIdPlugin"), /*#__PURE__*/ jsx("paragraph", null, "Assigns a unique id to each block"), /*#__PURE__*/ jsx("heading3", null, "PlaceholderPlugin"), /*#__PURE__*/ jsx("paragraph", null, "Allows to setup a custom placeholder for the selected line"), /*#__PURE__*/ jsx("heading3", null, "ShortcutsPlugin"), /*#__PURE__*/ jsx("paragraph", null, "Converts some popular markdown shortcuts to a custom node"), /*#__PURE__*/ jsx("heading3", null, "TableOfContentsPlugin"), /*#__PURE__*/ jsx("paragraph", null, "Shows a quick map of headings inside the document"), /*#__PURE__*/ jsx("heading3", null, "EmojiPlugin"), /*#__PURE__*/ jsx("paragraph", null, "Allows paste emoji to the text"));
 export { text_text as text };

package/dist/plugins/CodeBlockPlugin/CodeBlockPlugin.js

@@ -185,44 +185,45 @@ class CodeBlockPlugin {
         return !!match;
     }
     static toggleCodeBlock = (editor)=>{
-        Editor.withoutNormalizing(editor, ()=>{
-            const node = Editor.above(editor, {
-                match: (n)=>!Editor.isEditor(n) && n.type === CodeBlockPlugin.CODE_ELEMENT,
-                mode: 'highest'
-            });
-            if (node) {
-                Transforms.setNodes(editor, {
-                    type: 'paragraph'
-                }, {
-                    at: node[1],
-                    match: (n)=>n.type === CodeBlockPlugin.CODE_LINE_ELEMENT,
-                    mode: 'lowest'
-                });
-                Transforms.unwrapNodes(editor, {
-                    at: node[1],
-                    match: (n)=>n.type === CodeBlockPlugin.CODE_ELEMENT,
-                    split: true
-                });
-            } else {
-                Transforms.setNodes(editor, {
-                    type: CodeBlockPlugin.CODE_LINE_ELEMENT,
-                    children: [
-                        {
-                            text: ''
-                        }
-                    ]
-                }, {
-                    match: (n)=>Editor.isBlock(editor, n) && 'paragraph' === n.type
-                });
-                Transforms.wrapNodes(editor, {
-                    type: CodeBlockPlugin.CODE_ELEMENT,
-                    language: "javascript",
-                    children: []
-                }, {
-                    match: (n)=>n.type === CodeBlockPlugin.CODE_LINE_ELEMENT
-                });
-            }
+        if (!editor.selection) return;
+        const node = Editor.above(editor, {
+            match: (n)=>!Editor.isEditor(n) && n.type === CodeBlockPlugin.CODE_ELEMENT,
+            mode: 'highest'
         });
+        if (node) {
+            Transforms.setNodes(editor, {
+                type: 'paragraph'
+            }, {
+                at: node[1],
+                match: (n)=>n.type === CodeBlockPlugin.CODE_LINE_ELEMENT,
+                mode: 'lowest'
+            });
+            Transforms.unwrapNodes(editor, {
+                at: node[1],
+                match: (n)=>n.type === CodeBlockPlugin.CODE_ELEMENT,
+                split: true
+            });
+        } else {
+            Transforms.setNodes(editor, {
+                type: CodeBlockPlugin.CODE_LINE_ELEMENT,
+                children: [
+                    {
+                        text: ''
+                    }
+                ]
+            }, {
+                mode: 'lowest'
+            });
+            Transforms.wrapNodes(editor, {
+                type: CodeBlockPlugin.CODE_ELEMENT,
+                language: "javascript",
+                children: []
+            }, {
+                mode: 'highest',
+                match: (n)=>n.type === CodeBlockPlugin.CODE_LINE_ELEMENT,
+                at: editor.selection.focus
+            });
+        }
     };
 }
 export { CodeBlockPlugin };

package/dist/plugins/EmojiPlugin/EmojiPlugin.d.ts

@@ -0,0 +1,28 @@
+import { type MapStore } from 'nanostores';
+import type { ReactNode } from 'react';
+import { Editor } from 'slate';
+import type { IPlugin } from '../../types';
+type Options = {
+    onSearch: (query: string) => void;
+    renderMenu: (actions: {
+        insertEmoji: (emoji: string, query: string, editor: Editor) => void;
+    }) => ReactNode;
+    renderEmoji: (emoji: string) => ReactNode;
+    ignoreNodes?: string[];
+};
+export declare class EmojiPlugin implements IPlugin {
+    options: Options;
+    $store: MapStore<{
+        isOpen: boolean;
+    }>;
+    constructor(options: Options);
+    blocks: {
+        isInline: boolean;
+        isVoid: boolean;
+        type: string;
+        render: (props: any) => import("react/jsx-runtime").JSX.Element;
+    }[];
+    init(editor: any): any;
+    ui(): import("react/jsx-runtime").JSX.Element | null;
+}
+export {};

package/dist/plugins/EmojiPlugin/EmojiPlugin.js

@@ -0,0 +1,83 @@
+import { jsx } from "react/jsx-runtime";
+import { useStore } from "@nanostores/react";
+import { map } from "nanostores";
+import { Editor, Node, Transforms } from "slate";
+import { Menu } from "./Menu.js";
+import styles_module from "./styles.module.js";
+class EmojiPlugin {
+    options;
+    $store;
+    constructor(options){
+        this.options = options;
+        this.$store = map({
+            isOpen: false
+        });
+    }
+    blocks = [
+        {
+            isInline: true,
+            isVoid: true,
+            type: 'emoji',
+            render: (props)=>{
+                const children = this.options.renderEmoji(props.element.emoji);
+                return /*#__PURE__*/ jsx("span", {
+                    ...props.attributes,
+                    className: styles_module.emojiRoot,
+                    children: children
+                });
+            }
+        }
+    ];
+    init(editor) {
+        const { insertText, onChange } = editor;
+        editor.insertText = (text)=>{
+            if (':' === text) this.$store.setKey('isOpen', true);
+            insertText(text);
+        };
+        editor.onChange = (...args)=>{
+            if (this.$store.get().isOpen) {
+                const query = /:([^:]*$)/.exec(getCurrentText(editor));
+                if (query?.[0]) this.options.onSearch(query[1]);
+                else this.$store.setKey('isOpen', false);
+            }
+            return onChange(...args);
+        };
+        return editor;
+    }
+    ui() {
+        const { isOpen } = useStore(this.$store);
+        if (!isOpen) return null;
+        return /*#__PURE__*/ jsx(Menu, {
+            isOpen: isOpen,
+            children: this.options.renderMenu({
+                insertEmoji: (emoji, query, editor)=>{
+                    this.$store.setKey('isOpen', false);
+                    Transforms["delete"](editor, {
+                        at: editor.selection?.focus,
+                        distance: query.length + 1,
+                        reverse: true,
+                        unit: 'character'
+                    });
+                    Transforms.insertNodes(editor, {
+                        type: 'emoji',
+                        emoji,
+                        children: [
+                            {
+                                text: ''
+                            }
+                        ]
+                    });
+                    Transforms.move(editor);
+                }
+            })
+        });
+    }
+}
+const getCurrentText = (editor)=>{
+    const entry = Editor.above(editor, {
+        match: (n)=>Editor.isBlock(editor, n)
+    });
+    if (entry) return Node.string(entry[0]);
+    return '';
+};
+export { EmojiPlugin };

package/dist/plugins/EmojiPlugin/Menu.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from 'react';
+type Props = {
+    isOpen: boolean;
+    children: ReactNode;
+};
+export declare const Menu: (props: Props) => import("react").ReactPortal;
+export {};