diff --git a/apps/www/src/registry/default/plate-ui/equation-element.tsx b/apps/www/src/registry/default/plate-ui/equation-element.tsx index 6e63a82cf3..6f8d59bc4a 100644 --- 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( ({ children, className, ...props }, ref) => { const element = useElement(); - const [open, setOpen] = useState(false); + const selected = useSelected(); + const [open, setOpen] = useState(selected); const katexRef = useRef(null); useEquationElement({ @@ -66,6 +68,7 @@ export const EquationElement = withRef( 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 index bfeed147b6..ed976171c8 100644 --- 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(); - const selected = useSelected(); - - useEffect(() => { - setOpen(selected); - }, [selected, setOpen]); if (readOnly) return null; @@ -68,7 +65,7 @@ const EquationPopoverContent = ({ > 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 index 8f5b4b4f13..dfcaa55d39 100644 --- 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( ({ children, className, ...props }, ref) => { const element = useElement(); const katexRef = useRef(null); - const [open, setOpen] = useState(false); + const selected = useSelected(); + const [open, setOpen] = useState(selected); useEquationElement({ element, @@ -75,6 +77,7 @@ export const InlineEquationElement = withRef( , label: 'Equation', value: EquationPlugin.key, @@ -195,6 +196,7 @@ const groups: Group[] = [ value: DatePlugin.key, }, { + focusEditor: false, icon: , label: 'Equation', value: InlineEquationPlugin.key,