@use-kona/editor 0.1.3 → 0.1.5

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

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

package/dist/plugins/CommandsPlugin/Menu.js

@@ -16,6 +16,7 @@ const Menu = (props)=>{
     const selection = useSlateSelection();
     const editor = useSlate();
     const isFocused = useFocused();
+    const ref = useRef(null);
     const entry = Editor.above(editor, {
         match: (n)=>Editor.isBlock(editor, n)
     });
@@ -95,7 +96,8 @@ const Menu = (props)=>{
     }, [
         store.filter
     ]);
-    const handleMenuLayout = (element)=>{
+    useLayoutEffect(()=>{
+        const element = ref.current;
         if (element) {
             const { height, top } = element.getBoundingClientRect();
             const domSelection = window.getSelection();
@@ -106,7 +108,7 @@ const Menu = (props)=>{
                     top: `${top - height - (rect?.height ?? 22)}px`
                 }));
         }
-    };
+    }, []);
     if (!commands.length) return null;
     if (entry && ignoreNodes.includes(entry[0].type)) return null;
     return /*#__PURE__*/ createPortal(renderMenu(/*#__PURE__*/ jsxs(Fragment, {
@@ -118,7 +120,7 @@ const Menu = (props)=>{
                 }
             }),
             /*#__PURE__*/ jsx("div", {
-                ref: handleMenuLayout,
+                ref: ref,
                 style: style,
                 className: styles_module.menu,
                 onMouseDown: (event)=>{

package/dist/plugins/EmojiPlugin/Menu.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { useLayoutEffect, useState } from "react";
+import { useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useFocused, useSlateSelection } from "slate-react";
 import styles_module from "./styles.module.js";
@@ -7,6 +7,7 @@ const Menu = (props)=>{
     const { isOpen, children } = props;
     const isFocused = useFocused();
     const selection = useSlateSelection();
+    const ref = useRef(null);
     const [style, setStyle] = useState({});
     useLayoutEffect(()=>{
         if (!selection || !isFocused) return void setStyle(void 0);
@@ -29,7 +30,8 @@ const Menu = (props)=>{
         isFocused,
         isOpen
     ]);
-    const handleMenuLayout = (element)=>{
+    useLayoutEffect(()=>{
+        const element = ref.current;
         if (element) {
             const { height, top } = element.getBoundingClientRect();
             const domSelection = window.getSelection();
@@ -40,9 +42,9 @@ const Menu = (props)=>{
                     top: `${top - height - (rect?.height ?? 22)}px`
                 }));
         }
-    };
+    }, []);
     return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx("div", {
-        ref: handleMenuLayout,
+        ref: ref,
         style: style,
         className: styles_module.root,
         children: children

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

@@ -1,7 +1,7 @@
 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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@use-kona/editor",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "type": "module",
   "exports": {
     ".": "./src/index.ts"
@@ -22,8 +22,6 @@
   },
   "devDependencies": {
     "@biomejs/biome": "2.0.0",
-    "@emoji-mart/data": "^1.2.1",
-    "@emoji-mart/react": "^1.1.1",
     "@rsbuild/core": "~1.4.0",
     "@rsbuild/plugin-react": "^1.3.2",
     "@rslib/core": "^0.10.4",
@@ -41,7 +39,6 @@
     "@types/is-url": "^1.2.32",
     "@types/react": "^19.1.8",
     "@types/react-dom": "18",
-    "emoji-mart": "^5.6.0",
     "jsdom": "^26.1.0",
     "react": "^18.3.1",
     "react-dnd": "^16.0.1",
@@ -51,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",
@@ -66,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';

package/src/plugins/CodeBlockPlugin/index.ts

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

package/src/plugins/CommandsPlugin/Menu.tsx

@@ -35,6 +35,7 @@ export const Menu = (props: Props) => {
   const selection = useSlateSelection();
   const editor = useSlate() as Editor;
   const isFocused = useFocused();
+  const ref = useRef<HTMLDivElement>(null)
 
   const entry = Editor.above<CustomElement>(editor, {
     match: (n) => Editor.isBlock(editor, n as CustomElement),
@@ -137,7 +138,8 @@ export const Menu = (props: Props) => {
     }
   }, [store.filter]);
 
-  const handleMenuLayout = (element: HTMLDivElement) => {
+  useLayoutEffect(() => {
+    const element = ref.current;
     if (element) {
       const { height, top } = element.getBoundingClientRect();
 
@@ -152,7 +154,7 @@ export const Menu = (props: Props) => {
         }));
       }
     }
-  };
+  }, []);
 
   if (!commands.length) {
     return null;
@@ -174,7 +176,7 @@ export const Menu = (props: Props) => {
           />
         )}
         <div
-          ref={handleMenuLayout}
+          ref={ref}
           style={style}
           className={styles.menu}
           onMouseDown={(event) => {

package/src/plugins/EmojiPlugin/Menu.tsx

@@ -1,7 +1,7 @@
 import {
   type CSSProperties,
   type ReactNode,
-  useLayoutEffect,
+  useLayoutEffect, useRef,
   useState,
 } from 'react';
 import { createPortal } from 'react-dom';
@@ -18,6 +18,7 @@ export const Menu = (props: Props) => {
 
   const isFocused = useFocused();
   const selection = useSlateSelection();
+  const ref = useRef<HTMLDivElement>(null);
 
   const [style, setStyle] = useState<CSSProperties | undefined>({});
 
@@ -48,7 +49,8 @@ export const Menu = (props: Props) => {
     }, 0);
   }, [selection, isFocused, isOpen]);
 
-  const handleMenuLayout = (element: HTMLDivElement) => {
+  useLayoutEffect(() => {
+    const element = ref.current;
     if (element) {
       const { height, top } = element.getBoundingClientRect();
 
@@ -63,10 +65,11 @@ export const Menu = (props: Props) => {
         }));
       }
     }
-  };
+  }, []);
+
 
   return createPortal(
-    <div ref={handleMenuLayout} style={style} className={styles.root}>
+    <div ref={ref} style={style} className={styles.root}>
       {children}
     </div>,
     document.body,

package/src/plugins/FloatingMenuPlugin/FloatingMenu.tsx

@@ -117,28 +117,19 @@ export const FloatingMenu = (props: Props) => {
   }
 
   return createPortal(
-    <>
-      <div
-        onMouseDown={() => {
-          setStyle(undefined);
-        }}
-      >
-        {options.renderBackdrop?.({ onClose, onUpdate: handleUpdate })}
-      </div>
-      <div
-        ref={ref}
-        style={{
-          ...style,
-          display: 'block',
-        }}
-        className={styles.root}
-        onMouseDown={(event) => {
-          event.preventDefault();
-        }}
-      >
-        {options.renderMenu(editor, { onClose, onUpdate: handleUpdate })}
-      </div>
-    </>,
+    <div
+      ref={ref}
+      style={{
+        ...style,
+        display: 'block',
+      }}
+      className={styles.root}
+      onMouseDown={(event) => {
+        event.preventDefault();
+      }}
+    >
+      {options.renderMenu(editor, { onClose, onUpdate: handleUpdate })}
+    </div>,
     document.body,
   );
 };

package/src/plugins/FloatingMenuPlugin/types.ts

@@ -4,7 +4,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/src/plugins/HighlightsPlugin/HighlightsPlugin.tsx

@@ -27,6 +27,10 @@ export class HighlightsPlugin implements IPlugin {
     return marks ? marks.highlight === color : false;
   }
 
+  static removeHighlight(editor: Editor) {
+    Editor.removeMark(editor, 'highlight');
+  }
+
   leafs = [
     {
       render: (props: RenderLeafProps) => {

package/src/plugins/index.ts

@@ -1,7 +1,7 @@
 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';

package/dist/examples/Backdrop.d.ts

@@ -1,5 +0,0 @@
-type Props = {
-    onClose: () => void;
-};
-export declare const Backdrop: (props: Props) => import("react/jsx-runtime").JSX.Element | null;
-export {};

package/dist/examples/Backdrop.js

@@ -1,13 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useStore } from "@nanostores/react";
-import Backdrop_module from "./Backdrop.module.js";
-import { $store } from "./store.js";
-const Backdrop = (props)=>{
-    const { isFloatingMenuOpen } = useStore($store);
-    const { onClose } = props;
-    return isFloatingMenuOpen ? /*#__PURE__*/ jsx("div", {
-        className: Backdrop_module.root,
-        onClick: onClose
-    }) : null;
-};
-export { Backdrop };

package/dist/examples/Backdrop.module.js

@@ -1,5 +0,0 @@
-import "./Backdrop_module.css";
-const Backdrop_module = {
-    root: "root-f5Zwn7"
-};
-export { Backdrop_module as default };

package/dist/examples/Backdrop_module.css

@@ -1,6 +0,0 @@
-.root-f5Zwn7 {
-  z-index: 1;
-  position: fixed;
-  inset: 0;
-}
-

package/dist/examples/CodeBlock.d.ts

@@ -1,12 +0,0 @@
-import { type ReactNode } from 'react';
-import type { CustomElement } from '../../types';
-type Props = {
-    value: string;
-    onChange: (value: string) => void;
-    params: {
-        element: CustomElement;
-        Content: () => ReactNode;
-    };
-};
-export declare const CodeBlock: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/examples/CodeBlock.js

@@ -1,163 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useMemo } from "react";
-import { Node } from "slate";
-import CodeBlock_module from "./CodeBlock.module.js";
-import { CheckIcon } from "./icons/check.js";
-import { CopyIcon } from "./icons/copy.js";
-import { Button } from "./ui/Button/index.js";
-import { Dropdown } from "./ui/Dropdown/index.js";
-import { Menu } from "./ui/Menu/index.js";
-const languages = [
-    {
-        value: "javascript",
-        label: 'JavaScript'
-    },
-    {
-        value: "typescript",
-        label: 'TypeScript'
-    },
-    {
-        value: 'jsx',
-        label: 'JSX'
-    },
-    {
-        value: 'tsx',
-        label: 'TSX'
-    },
-    {
-        value: 'html',
-        label: 'HTML'
-    },
-    {
-        value: 'css',
-        label: 'CSS'
-    },
-    {
-        value: 'json',
-        label: 'JSON'
-    },
-    {
-        value: 'python',
-        label: 'Python'
-    },
-    {
-        value: 'java',
-        label: 'Java'
-    },
-    {
-        value: 'c',
-        label: 'C'
-    },
-    {
-        value: 'cpp',
-        label: 'C++'
-    },
-    {
-        value: 'csharp',
-        label: 'C#'
-    },
-    {
-        value: 'go',
-        label: 'Go'
-    },
-    {
-        value: 'rust',
-        label: 'Rust'
-    },
-    {
-        value: 'ruby',
-        label: 'Ruby'
-    },
-    {
-        value: 'php',
-        label: 'PHP'
-    },
-    {
-        value: 'bash',
-        label: 'Bash'
-    },
-    {
-        value: 'sql',
-        label: 'SQL'
-    },
-    {
-        value: 'markdown',
-        label: 'Markdown'
-    },
-    {
-        value: 'yaml',
-        label: 'YAML'
-    },
-    {
-        value: 'plaintext',
-        label: 'Plain Text'
-    }
-];
-const CodeBlock = (props)=>{
-    const { value: language, onChange, params: { element, Content } } = props;
-    const handleCopyClick = ()=>{
-        const text = Array.from(Node.texts(element)).map((nodeEntry)=>nodeEntry[0].text).join('\n');
-        navigator.clipboard.writeText(text);
-    };
-    const menuConfig = useMemo(()=>({
-            items: languages.map(({ label, value })=>({
-                    render: ()=>/*#__PURE__*/ jsxs(Fragment, {
-                            children: [
-                                /*#__PURE__*/ jsx(Menu.Icon, {
-                                    children: value === language && /*#__PURE__*/ jsx(CheckIcon, {
-                                        size: 16
-                                    })
-                                }),
-                                /*#__PURE__*/ jsx(Menu.Title, {
-                                    children: label
-                                })
-                            ]
-                        }),
-                    onSelect: ()=>{
-                        onChange(value);
-                    }
-                }))
-        }), [
-        language
-    ]);
-    return /*#__PURE__*/ jsxs("div", {
-        className: CodeBlock_module.root,
-        children: [
-            /*#__PURE__*/ jsxs("div", {
-                className: CodeBlock_module.menu,
-                children: [
-                    /*#__PURE__*/ jsx(Dropdown, {
-                        config: menuConfig,
-                        Menu: /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx("div", {
-                                ...props,
-                                ref: ref,
-                                className: [
-                                    CodeBlock_module.customMenu,
-                                    props.className
-                                ].join(' ')
-                            })),
-                        children: ({ ref, onClick })=>/*#__PURE__*/ jsx(Button, {
-                                ref: ref,
-                                size: "sm",
-                                onClick: onClick,
-                                children: languages.find((l)=>l.value === language)?.label || 'Select language'
-                            })
-                    }),
-                    /*#__PURE__*/ jsx(Button, {
-                        size: "sm",
-                        type: "button",
-                        onClick: handleCopyClick,
-                        children: /*#__PURE__*/ jsx(CopyIcon, {
-                            size: 16
-                        })
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsx("div", {
-                className: CodeBlock_module.content,
-                children: /*#__PURE__*/ jsx(Content, {})
-            })
-        ]
-    });
-};
-export { CodeBlock };

package/dist/examples/CodeBlock.module.js

@@ -1,9 +0,0 @@
-import "./CodeBlock_module.css";
-const CodeBlock_module = {
-    root: "root-qalHKY",
-    button: "button-NFVN8i",
-    menu: "menu-tWodT1",
-    content: "content-vvTcTm",
-    customMenu: "customMenu-PLCVVP"
-};
-export { CodeBlock_module as default };