@use-kona/editor 0.1.2 → 0.1.4

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

@@ -3,7 +3,6 @@ export { deserialize } from './core/deserialize';
 export { serialize } from './core/serialize';
 export { defaultValue } from './defaultValue';
 export * from './editor';
-export { ExampleEditor } from './examples/Editor';
 export * from './plugins';
 export type { EditorRef, IPlugin } from './types';
 export { isEmpty } from './utils';

package/dist/index.js

@@ -1,8 +1,7 @@
 import { deserialize } from "./core/deserialize.js";
 import { serialize } from "./core/serialize.js";
 import { defaultValue } from "./defaultValue.js";
-import { ExampleEditor } from "./examples/Editor.js";
 import { isEmpty } from "./utils.js";
 export * from "./editor.js";
 export * from "./plugins/index.js";
-export { ExampleEditor, defaultValue, deserialize, isEmpty, serialize };
+export { defaultValue, deserialize, isEmpty, serialize };

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/CodeBlockPlugin/index.d.ts

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

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 {};

package/dist/plugins/EmojiPlugin/Menu.js

@@ -0,0 +1,51 @@
+import { jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { useFocused, useSlateSelection } from "slate-react";
+import styles_module from "./styles.module.js";
+const Menu = (props)=>{
+    const { isOpen, children } = props;
+    const isFocused = useFocused();
+    const selection = useSlateSelection();
+    const [style, setStyle] = useState({});
+    useLayoutEffect(()=>{
+        if (!selection || !isFocused) return void setStyle(void 0);
+        setTimeout(()=>{
+            const domSelection = window.getSelection();
+            const domRange = domSelection?.getRangeAt(0);
+            const rect = domRange?.getBoundingClientRect();
+            isOpen ? setStyle({
+                opacity: 1,
+                transform: 'scale(1)',
+                top: `${(rect?.top || 0) + window.scrollY + (rect?.height || 0) + 2}px`,
+                left: `${(rect?.left || 0) + window.scrollX + (rect?.width || 0) / 2}px`
+            }) : setStyle({
+                opacity: 0,
+                transform: 'scale(0.9)'
+            });
+        }, 0);
+    }, [
+        selection,
+        isFocused,
+        isOpen
+    ]);
+    const handleMenuLayout = (element)=>{
+        if (element) {
+            const { height, top } = element.getBoundingClientRect();
+            const domSelection = window.getSelection();
+            const domRange = domSelection?.getRangeAt(0);
+            const rect = domRange?.getBoundingClientRect();
+            if (top + height >= window.innerHeight) setStyle((style)=>({
+                    ...style,
+                    top: `${top - height - (rect?.height ?? 22)}px`
+                }));
+        }
+    };
+    return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx("div", {
+        ref: handleMenuLayout,
+        style: style,
+        className: styles_module.root,
+        children: children
+    }), document.body);
+};
+export { Menu };

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

@@ -0,0 +1 @@
+export { EmojiPlugin } from './EmojiPlugin';

package/dist/plugins/EmojiPlugin/index.js

@@ -0,0 +1,2 @@
+import { EmojiPlugin } from "./EmojiPlugin.js";
+export { EmojiPlugin };

package/dist/plugins/EmojiPlugin/styles.module.js

@@ -0,0 +1,7 @@
+import "./styles_module.css";
+const styles_module = {
+    root: "root-LWInsU",
+    "emoji-root": "emoji-root-rs2hSK",
+    emojiRoot: "emoji-root-rs2hSK"
+};
+export { styles_module as default };

package/dist/plugins/EmojiPlugin/styles_module.css

@@ -0,0 +1,11 @@
+.root-LWInsU {
+  z-index: 2;
+  position: absolute;
+}
+
+.emoji-root-rs2hSK {
+  vertical-align: text-bottom;
+  height: 24px;
+  display: inline-flex;
+}
+

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

@@ -0,0 +1,7 @@
+export type EmojiElement = {
+    type: 'emoji';
+    emoji: string;
+    children: [{
+        text: string;
+    }];
+};

package/dist/plugins/FloatingMenuPlugin/FloatingMenu.js

@@ -1,4 +1,4 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { Editor, Range } from "slate";
@@ -57,33 +57,20 @@ const FloatingMenu = (props)=>{
         });
     };
     if (!isVisible) return null;
-    return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ jsx("div", {
-                onMouseDown: ()=>{
-                    setStyle(void 0);
-                },
-                children: options.renderBackdrop?.({
-                    onClose,
-                    onUpdate: handleUpdate
-                })
-            }),
-            /*#__PURE__*/ jsx("div", {
-                ref: ref,
-                style: {
-                    ...style,
-                    display: 'block'
-                },
-                className: styles_module.root,
-                onMouseDown: (event)=>{
-                    event.preventDefault();
-                },
-                children: options.renderMenu(editor, {
-                    onClose,
-                    onUpdate: handleUpdate
-                })
-            })
-        ]
+    return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx("div", {
+        ref: ref,
+        style: {
+            ...style,
+            display: 'block'
+        },
+        className: styles_module.root,
+        onMouseDown: (event)=>{
+            event.preventDefault();
+        },
+        children: options.renderMenu(editor, {
+            onClose,
+            onUpdate: handleUpdate
+        })
     }), document.body);
 };
 export { FloatingMenu };

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

@@ -3,7 +3,10 @@ import type { Editor } from 'slate';
 export type Options = {
     ignoreNodes?: string[];
     renderMenu: (editor: Editor, commands: Commands) => ReactNode;
-    renderBackdrop: (commands: {
+    /**
+     * @deprecated
+     */
+    renderBackdrop?: (commands: {
         onClose: () => void;
         onUpdate: () => void;
     }) => ReactNode;

package/dist/plugins/HighlightsPlugin/HighlightsPlugin.d.ts

@@ -9,6 +9,7 @@ export declare class HighlightsPlugin implements IPlugin {
     constructor(options: Options);
     static toggleHighlight(editor: Editor, color: string): void;
     static isHighlightActive(editor: Editor, color: string): boolean;
+    static removeHighlight(editor: Editor): void;
     leafs: {
         render: (props: RenderLeafProps) => import("react/jsx-runtime").JSX.Element;
     }[];

package/dist/plugins/HighlightsPlugin/HighlightsPlugin.js

@@ -14,6 +14,9 @@ class HighlightsPlugin {
         const marks = Editor.marks(editor);
         return marks ? marks.highlight === color : false;
     }
+    static removeHighlight(editor) {
+        Editor.removeMark(editor, 'highlight');
+    }
     leafs = [
         {
             render: (props)=>{

package/dist/plugins/ListsPlugin/styles_module.css

@@ -1,5 +1,9 @@
 .list-YEmg4D {
   padding: 0;
+
+  & & {
+    margin-left: 32px;
+  }
 }
 
 .listItem-lLiZlv {

package/dist/plugins/PlaceholderPlugin/PlaceholderPlugin.js

@@ -14,7 +14,9 @@ class PlaceholderPlugin {
                 const isReadOnly = useReadOnly();
                 const isFocused = useFocused();
                 const entity = Editor.above(editor, {
-                    mode: 'lowest'
+                    at: editor.selection?.focus,
+                    mode: 'lowest',
+                    voids: true
                 });
                 const firstEntity = Editor.above(editor, {
                     mode: 'lowest',
@@ -24,14 +26,15 @@ class PlaceholderPlugin {
                     ]
                 });
                 if (entity && this.options.ignoreNodes?.includes(entity[0].type)) return props.children;
-                const isEmpty = !entity || '' === Node.string(entity[0]);
+                const hasVoids = entity?.[0].children.some((n)=>Editor.isVoid(editor, n));
+                const isEmpty = (!entity || '' === Node.string(entity[0])) && !hasVoids && !Editor.isVoid(editor, entity?.[0]);
                 const isEditorEmpty = !firstEntity || '' === Node.string(firstEntity[0]) && editor.children.length <= 1;
                 const isVisible = isEmpty && !isReadOnly && isSelected || isEditorEmpty;
                 return /*#__PURE__*/ jsx(Fragment, {
                     children: /*#__PURE__*/ jsx("span", {
                         ...props.attributes,
                         children: /*#__PURE__*/ jsx("span", {
-                            className: isVisible ? styles_module.placeholder : void 0,
+                            className: isVisible ? styles_module.placeholder : styles_module.hidden,
                             "data-placeholder": isFocused ? this.options.focused : this.options.unfocused,
                             children: props.children
                         })

package/dist/plugins/PlaceholderPlugin/styles.module.js

@@ -1,5 +1,6 @@
 import "./styles_module.css";
 const styles_module = {
+    hidden: "hidden-vT5wYn",
     placeholder: "placeholder-F_8jdT"
 };
 export { styles_module as default };

package/dist/plugins/PlaceholderPlugin/styles_module.css

@@ -1,3 +1,7 @@
+.hidden-vT5wYn.placeholder-F_8jdT {
+  display: none;
+}
+
 .placeholder-F_8jdT {
   position: relative;
 }

package/dist/plugins/index.d.ts

@@ -1,9 +1,10 @@
 export { AttachmentsPlugin } from './AttachmentsPlugin';
 export { BasicFormattingPlugin } from './BasicFormattingPlugin';
 export { BreaksPlugin } from './BreaksPlugin';
-export { CodeBlockPlugin } from './CodeBlockPlugin';
+export { CodeBlockPlugin, type CodeElement } from './CodeBlockPlugin';
 export { type Command, CommandsPlugin } from './CommandsPlugin';
 export { DnDPlugin } from './DnDPlugin';
+export { EmojiPlugin } from './EmojiPlugin';
 export { type Commands, FloatingMenuPlugin } from './FloatingMenuPlugin';
 export { HeadingsPlugin } from './HeadingsPlugin';
 export { HighlightsPlugin } from './HighlightsPlugin';

package/dist/plugins/index.js

@@ -4,6 +4,7 @@ import { BreaksPlugin } from "./BreaksPlugin/index.js";
 import { CodeBlockPlugin } from "./CodeBlockPlugin/index.js";
 import { CommandsPlugin } from "./CommandsPlugin/index.js";
 import { DnDPlugin } from "./DnDPlugin/index.js";
+import { EmojiPlugin } from "./EmojiPlugin/index.js";
 import { FloatingMenuPlugin } from "./FloatingMenuPlugin/index.js";
 import { HeadingsPlugin } from "./HeadingsPlugin/index.js";
 import { HighlightsPlugin } from "./HighlightsPlugin/index.js";
@@ -14,4 +15,4 @@ import { NodeIdPlugin } from "./NodeIdPlugin/index.js";
 import { PlaceholderPlugin } from "./PlaceholderPlugin/index.js";
 import { ShortcutsPlugin } from "./ShortcutsPlugin/index.js";
 import { TableOfContentsPlugin } from "./TableOfContentsPlugin/index.js";
-export { AttachmentsPlugin, BasicFormattingPlugin, BreaksPlugin, CodeBlockPlugin, CommandsPlugin, DnDPlugin, FloatingMenuPlugin, HeadingsPlugin, HighlightsPlugin, LinksPlugin, ListsPlugin, MenuPlugin, NodeIdPlugin, PlaceholderPlugin, ShortcutsPlugin, TableOfContentsPlugin };
+export { AttachmentsPlugin, BasicFormattingPlugin, BreaksPlugin, CodeBlockPlugin, CommandsPlugin, DnDPlugin, EmojiPlugin, FloatingMenuPlugin, HeadingsPlugin, HighlightsPlugin, LinksPlugin, ListsPlugin, MenuPlugin, NodeIdPlugin, PlaceholderPlugin, ShortcutsPlugin, TableOfContentsPlugin };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@use-kona/editor",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "type": "module",
   "exports": {
     ".": "./src/index.ts"
@@ -48,13 +48,21 @@
     "storybook-addon-rslib": "^2.0.2",
     "storybook-react-rsbuild": "^2.0.2",
     "typescript": "^5.8.3",
-    "vitest": "^3.2.4"
+    "vitest": "^3.2.4",
+    "slate": "^0.117.2",
+    "slate-history": "^0.113.1",
+    "slate-hyperscript": "^0.100.0",
+    "slate-react": "^0.117.3"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "18"
+    "react-dom": "18",
+    "slate": "^0.117.2",
+    "slate-history": "^0.113.1",
+    "slate-hyperscript": "^0.100.0",
+    "slate-react": "^0.117.3"
   },
   "dependencies": {
     "@nanostores/react": "^1.0.0",
@@ -63,10 +71,6 @@
     "is-hotkey": "^0.2.0",
     "is-url": "^1.2.4",
     "nanostores": "^1.0.1",
-    "prismjs": "^1.30.0",
-    "slate": "^0.117.2",
-    "slate-history": "^0.113.1",
-    "slate-hyperscript": "^0.100.0",
-    "slate-react": "^0.117.3"
+    "prismjs": "^1.30.0"
   }
 }

package/src/index.ts

@@ -3,7 +3,6 @@ export { deserialize } from './core/deserialize';
 export { serialize } from './core/serialize';
 export { defaultValue } from './defaultValue';
 export * from './editor';
-export { ExampleEditor } from './examples/Editor';
 export * from './plugins';
 export type { EditorRef, IPlugin } from './types';
 export { isEmpty } from './utils';