@use-kona/editor 0.1.8-rc.2 → 0.1.8-rc.4

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

@@ -9,6 +9,7 @@ type Options = {
     }) => ReactNode;
     renderEmoji: (emoji: string) => ReactNode;
     ignoreNodes?: string[];
+    portalTarget?: Element | null;
 };
 export declare class EmojiPlugin implements IPlugin {
     options: Options;

package/dist/plugins/EmojiPlugin/EmojiPlugin.js

@@ -49,6 +49,7 @@ class EmojiPlugin {
         if (!isOpen) return null;
         return /*#__PURE__*/ jsx(Menu, {
             isOpen: isOpen,
+            portalTarget: this.options.portalTarget,
             children: this.options.renderMenu({
                 insertEmoji: (emoji, query, editor)=>{
                     this.$store.setKey('isOpen', false);

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

@@ -2,6 +2,7 @@ import { type ReactNode } from 'react';
 type Props = {
     isOpen: boolean;
     children: ReactNode;
+    portalTarget?: Element | null;
 };
 export declare const Menu: (props: Props) => import("react").ReactPortal;
 export {};

package/dist/plugins/EmojiPlugin/Menu.js

@@ -4,7 +4,7 @@ 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 { isOpen, children, portalTarget } = props;
     const isFocused = useFocused();
     const selection = useSlateSelection();
     const ref = useRef(null);
@@ -48,6 +48,6 @@ const Menu = (props)=>{
         style: style,
         className: styles_module.root,
         children: children
-    }), document.body);
+    }), portalTarget || document.body);
 };
 export { Menu };

package/dist/utils.js

@@ -2,7 +2,7 @@ import { Text } from "slate";
 const isEmpty = (children)=>{
     const [first] = children || [];
     if (Text.isText(first)) return '' === first.text.trim();
-    if (children && children.length <= 1 && Text.isText(first?.children?.[0])) return first.children.every((child)=>'' === child.text.trim());
+    if (children && children.length <= 1 && Text.isText(first?.children?.[0])) return first.children.every((child)=>child.text?.trim() === '');
     return false;
 };
 export { isEmpty };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@use-kona/editor",
-  "version": "0.1.8-rc.2",
+  "version": "0.1.8-rc.4",
   "type": "module",
   "exports": {
     ".": "./src/index.ts"

package/src/plugins/EmojiPlugin/EmojiPlugin.tsx

@@ -15,6 +15,7 @@ type Options = {
   }) => ReactNode;
   renderEmoji: (emoji: string) => ReactNode;
   ignoreNodes?: string[];
+  portalTarget?: Element | null;
 };
 
 export class EmojiPlugin implements IPlugin {
@@ -80,7 +81,7 @@ export class EmojiPlugin implements IPlugin {
     }
 
     return (
-      <Menu isOpen={isOpen}>
+      <Menu isOpen={isOpen} portalTarget={this.options.portalTarget}>
         {this.options.renderMenu({
           insertEmoji: (emoji, query, editor) => {
             this.$store.setKey('isOpen', false);

package/src/plugins/EmojiPlugin/Menu.tsx

@@ -1,7 +1,8 @@
 import {
   type CSSProperties,
   type ReactNode,
-  useLayoutEffect, useRef,
+  useLayoutEffect,
+  useRef,
   useState,
 } from 'react';
 import { createPortal } from 'react-dom';
@@ -11,10 +12,11 @@ import styles from './styles.module.css';
 type Props = {
   isOpen: boolean;
   children: ReactNode;
+  portalTarget?: Element | null;
 };
 
 export const Menu = (props: Props) => {
-  const { isOpen, children } = props;
+  const { isOpen, children, portalTarget } = props;
 
   const isFocused = useFocused();
   const selection = useSlateSelection();
@@ -67,11 +69,10 @@ export const Menu = (props: Props) => {
     }
   }, []);
 
-
   return createPortal(
     <div ref={ref} style={style} className={styles.root}>
       {children}
     </div>,
-    document.body,
+    portalTarget || document.body,
   );
 };

package/src/utils.ts

@@ -8,7 +8,7 @@ export const isEmpty = (children: Descendant[]) => {
   }
 
   if (children && children.length <= 1 && Text.isText(first?.children?.[0])) {
-    return first.children.every((child) => child.text.trim() === '');
+    return first.children.every((child) => child.text?.trim() === '');
   }
 
   return false;