@use-kona/editor 0.1.4 → 0.1.5

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@use-kona/editor",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "type": "module",
   "exports": {
     ".": "./src/index.ts"

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,