fix: do not sync selected with open state, focuseditor false in slash…

… menu to prevent autoclose
udecode · Dec 27, 2024 · d324b3b · d324b3b
1 parent e51edaf
commit d324b3b
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 10 deletions.
diff --git a/apps/www/src/registry/default/plate-ui/equation-element.tsx b/apps/www/src/registry/default/plate-ui/equation-element.tsx
@@ -8,6 +8,7 @@ import { cn, withRef } from '@udecode/cn';
 import { useElement } from '@udecode/plate-common/react';
 import { useEquationElement } from '@udecode/plate-math/react';
 import { RadicalIcon } from 'lucide-react';
+import { useSelected } from 'slate-react';
 
 import { EquationPopoverContent } from './equation-popover';
 import { PlateElement } from './plate-element';
@@ -17,7 +18,8 @@ export const EquationElement = withRef<typeof PlateElement>(
   ({ children, className, ...props }, ref) => {
     const element = useElement<TEquationElement>();
 
-    const [open, setOpen] = useState(false);
+    const selected = useSelected();
+    const [open, setOpen] = useState(selected);
     const katexRef = useRef<HTMLDivElement | null>(null);
 
     useEquationElement({
@@ -66,6 +68,7 @@ export const EquationElement = withRef<typeof PlateElement>(
           </PopoverTrigger>
 
           <EquationPopoverContent
+            open={open}
             placeholder={`f(x) = \\begin{cases}\n  x^2, &\\quad x > 0 \\\\\n  0, &\\quad x = 0 \\\\\n  -x^2, &\\quad x < 0\n\\end{cases}`}
             isInline={false}
             setOpen={setOpen}

diff --git a/apps/www/src/registry/default/plate-ui/equation-popover.tsx b/apps/www/src/registry/default/plate-ui/equation-popover.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect } from 'react';
+import React from 'react';
 import TextareaAutosize, {
   type TextareaAutosizeProps,
 } from 'react-textarea-autosize';
@@ -17,7 +17,7 @@ import {
 import { useEquationInput } from '@udecode/plate-math/react';
 import { BlockSelectionPlugin } from '@udecode/plate-selection/react';
 import { CornerDownLeftIcon } from 'lucide-react';
-import { useReadOnly, useSelected } from 'slate-react';
+import { useReadOnly } from 'slate-react';
 
 import { Button } from './button';
 import { PopoverContent } from './popover';
@@ -29,20 +29,17 @@ const EquationInput = createPrimitiveComponent(TextareaAutosize)({
 const EquationPopoverContent = ({
   className,
   isInline,
+  open,
   setOpen,
   ...props
 }: {
   isInline: boolean;
+  open: boolean;
   setOpen: (open: boolean) => void;
 } & TextareaAutosizeProps) => {
   const editor = useEditorRef();
   const readOnly = useReadOnly();
   const element = useElement<TEquationElement>();
-  const selected = useSelected();
-
-  useEffect(() => {
-    setOpen(selected);
-  }, [selected, setOpen]);
 
   if (readOnly) return null;
 
@@ -68,7 +65,7 @@ const EquationPopoverContent = ({
     >
       <EquationInput
         className={cn('max-h-[50vh] grow resize-none p-2 text-sm', className)}
-        state={{ isInline, open: true, onClose }}
+        state={{ isInline, open, onClose }}
         autoFocus
         {...props}
       />

diff --git a/apps/www/src/registry/default/plate-ui/inline-equation-element.tsx b/apps/www/src/registry/default/plate-ui/inline-equation-element.tsx
@@ -8,6 +8,7 @@ import { cn, withRef } from '@udecode/cn';
 import { useElement } from '@udecode/plate-common/react';
 import { useEquationElement } from '@udecode/plate-math/react';
 import { RadicalIcon } from 'lucide-react';
+import { useSelected } from 'slate-react';
 
 import { EquationPopoverContent } from './equation-popover';
 import { PlateElement } from './plate-element';
@@ -17,7 +18,8 @@ export const InlineEquationElement = withRef<typeof PlateElement>(
   ({ children, className, ...props }, ref) => {
     const element = useElement<TEquationElement>();
     const katexRef = useRef<HTMLDivElement | null>(null);
-    const [open, setOpen] = useState(false);
+    const selected = useSelected();
+    const [open, setOpen] = useState(selected);
 
     useEquationElement({
       element,
@@ -75,6 +77,7 @@ export const InlineEquationElement = withRef<typeof PlateElement>(
 
           <EquationPopoverContent
             className="my-auto"
+            open={open}
             placeholder="E = mc^2"
             setOpen={setOpen}
             isInline

diff --git a/apps/www/src/registry/default/plate-ui/slash-input-element.tsx b/apps/www/src/registry/default/plate-ui/slash-input-element.tsx
@@ -173,6 +173,7 @@ const groups: Group[] = [
         value: 'action_three_columns',
       },
       {
+        focusEditor: false,
         icon: <RadicalIcon />,
         label: 'Equation',
         value: EquationPlugin.key,
@@ -195,6 +196,7 @@ const groups: Group[] = [
         value: DatePlugin.key,
       },
       {
+        focusEditor: false,
         icon: <RadicalIcon />,
         label: 'Equation',
         value: InlineEquationPlugin.key,