@use-kona/editor 0.1.3 → 0.1.4

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/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.4",
   "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/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 };

package/dist/examples/CodeBlock_module.css

@@ -1,66 +0,0 @@
-.root-qalHKY {
-  background-color: var(--kona-editor-alt-background-color);
-  border-radius: 8px;
-  flex-direction: column;
-  padding: 4px;
-  display: flex;
-}
-
-.button-NFVN8i {
-  cursor: pointer;
-  background-color: #0000;
-  border-radius: 4px;
-  outline: none;
-  justify-content: center;
-  align-items: center;
-  width: 20px;
-  height: 20px;
-  margin: 0;
-  padding: 0;
-  display: inline-flex;
-
-  &:active {
-    transform: scale(.9);
-  }
-}
-
-.menu-tWodT1 {
-  justify-content: space-between;
-  column-gap: 4px;
-  padding: 4px 0;
-  display: flex;
-}
-
-.content-vvTcTm {
-  background-color: var(--kona-editor-background-color);
-  border-radius: 6px;
-  padding: 8px 4px;
-  font-size: 14px;
-}
-
-.customMenu-PLCVVP {
-  background-color: var(--kona-editor-background-color);
-  border: 1px solid var(--kona-editor-border-color);
-  z-index: 21;
-  border-radius: 8px;
-  width: 200px;
-  max-height: 250px;
-  font-size: 12px;
-  position: absolute;
-  overflow-y: auto;
-  box-shadow: 0 1px 3px #00000006;
-
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: none;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: #00000040;
-    border-radius: 10px;
-  }
-}
-

package/dist/examples/DragBlock.d.ts

@@ -1,11 +0,0 @@
-import type { ConnectDragPreview, ConnectDragSource, ConnectDropTarget } from 'react-dnd';
-import type { RenderElementProps } from 'slate-react';
-type Props = {
-    props: RenderElementProps;
-    dragRef: ConnectDragSource;
-    dropRef: ConnectDropTarget;
-    previewRef: ConnectDragPreview;
-    position: 'top' | 'bottom' | null;
-};
-export declare const DragBlock: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/examples/DragBlock.js

@@ -1,38 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import DragBlock_module from "./DragBlock.module.js";
-import { DragHandler } from "./DragHandler.js";
-const DragBlock = (props)=>{
-    const { props: { attributes, element, children }, dragRef: drag, dropRef: drop, previewRef: preview, position } = props;
-    return /*#__PURE__*/ jsx("div", {
-        className: clsx(DragBlock_module.root, {
-            [DragBlock_module.top]: 'top' === position,
-            [DragBlock_module.bottom]: 'bottom' === position
-        }),
-        ...attributes,
-        children: /*#__PURE__*/ jsxs("div", {
-            className: DragBlock_module.block,
-            ref: (e)=>{
-                drop(preview(e));
-            },
-            children: [
-                /*#__PURE__*/ jsx("div", {
-                    className: DragBlock_module.drag,
-                    ref: (element)=>{
-                        drag(element);
-                    },
-                    contentEditable: false,
-                    children: /*#__PURE__*/ jsx(DragHandler, {
-                        attributes: attributes,
-                        element: element,
-                        children: children
-                    })
-                }),
-                /*#__PURE__*/ jsx("div", {
-                    children: children
-                })
-            ]
-        })
-    });
-};
-export { DragBlock };

package/dist/examples/DragBlock.module.js

@@ -1,9 +0,0 @@
-import "./DragBlock_module.css";
-const DragBlock_module = {
-    root: "root-QYAUnT",
-    top: "top-qIwygJ",
-    bottom: "bottom-K22AI8",
-    drag: "drag-v0MSZ1",
-    block: "block-y_k_tl"
-};
-export { DragBlock_module as default };

package/dist/examples/DragBlock_module.css

@@ -1,43 +0,0 @@
-.root-QYAUnT {
-  border-top: 2px solid #0000;
-  border-bottom: 2px solid #0000;
-  position: relative;
-}
-
-.top-qIwygJ {
-  border-top: 2px solid #3498db;
-}
-
-.bottom-K22AI8 {
-  border-bottom: 2px solid #3498db;
-}
-
-.drag-v0MSZ1 {
-  vertical-align: baseline;
-  cursor: move;
-  opacity: 0;
-  width: 16px;
-  line-height: 1.2;
-  transition: opacity .25s;
-  display: inline-block;
-}
-
-.block-y_k_tl {
-  border-radius: 4px;
-  grid-template-columns: 16px 1fr;
-  align-items: start;
-  column-gap: 8px;
-  padding: 4px 8px;
-  transition: background-color .25s;
-  display: grid;
-  position: relative;
-
-  &:hover {
-    background-color: #00000004;
-  }
-
-  &:hover .drag-v0MSZ1 {
-    opacity: 1;
-  }
-}
-

package/dist/examples/DragHandler.d.ts

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