diff --git a/packages/slate-editor/src/extensions/snippet/lib/useFloatingSnippetInput.ts b/packages/slate-editor/src/extensions/snippet/lib/useFloatingSnippetInput.ts index 61209f4cc..7755088af 100644 --- a/packages/slate-editor/src/extensions/snippet/lib/useFloatingSnippetInput.ts +++ b/packages/slate-editor/src/extensions/snippet/lib/useFloatingSnippetInput.ts @@ -3,6 +3,8 @@ import type { DocumentNode } from '@prezly/slate-types'; import type { SlateEditor } from '@udecode/plate-common'; import { useState } from 'react'; +import { useFunction } from '#lib'; + import { EventsEditor } from '#modules/events'; interface State { @@ -13,29 +15,29 @@ interface Actions { close: () => void; open: () => void; rootClose: () => void; - submit: (node: DocumentNode) => Promise; + submit: (node: DocumentNode) => void; } export function useFloatingSnippetInput(editor: SlateEditor): [State, Actions] { const [isOpen, setIsOpen] = useState(false); const savedSelection = useSavedSelection(); - function close() { + const close = useFunction(() => { savedSelection.restore(editor, { focus: true }); setIsOpen(false); - } + }); - function rootClose() { + const rootClose = useFunction(() => { setIsOpen(false); - } + }); - function open() { + const open = useFunction(() => { EventsEditor.dispatchEvent(editor, 'snippet-dialog-opened'); setIsOpen(true); savedSelection.save(editor); - } + }); - async function submit(node: DocumentNode) { + const submit = useFunction((node: DocumentNode) => { EventsEditor.dispatchEvent(editor, 'snippet-dialog-submitted'); close(); @@ -56,7 +58,7 @@ export function useFloatingSnippetInput(editor: SlateEditor): [State, Actions] { type: 'error', }); } - } + }); return [{ isOpen }, { close, open, rootClose, submit }]; } diff --git a/packages/slate-editor/src/modules/components/FloatingSnippetInput/FloatingSnippetInput.tsx b/packages/slate-editor/src/modules/components/FloatingSnippetInput/FloatingSnippetInput.tsx index 04434c25d..27b0a98dd 100644 --- a/packages/slate-editor/src/modules/components/FloatingSnippetInput/FloatingSnippetInput.tsx +++ b/packages/slate-editor/src/modules/components/FloatingSnippetInput/FloatingSnippetInput.tsx @@ -1,5 +1,5 @@ import type { ReactNode, RefObject } from 'react'; -import React from 'react'; +import React, { memo } from 'react'; import { FloatingContainer } from '#modules/components'; @@ -13,7 +13,7 @@ interface Props { renderInput: () => ReactNode; } -export function FloatingSnippetInput({ +function FloatingSnippetInputComponent({ availableWidth, containerRef, onClose, @@ -34,3 +34,5 @@ export function FloatingSnippetInput({ ); } + +export const FloatingSnippetInput = memo(FloatingSnippetInputComponent); diff --git a/packages/slate-editor/src/modules/editor/Editor.tsx b/packages/slate-editor/src/modules/editor/Editor.tsx index f36a4ddae..7f5b1aabd 100644 --- a/packages/slate-editor/src/modules/editor/Editor.tsx +++ b/packages/slate-editor/src/modules/editor/Editor.tsx @@ -850,6 +850,15 @@ export const Editor = forwardRef((props, forwardedRef) = props.onChange(editor.serialize(value) as Value); }); + const floatingSnippetRenderInput = useFunction(() => { + return ( + withSnippets && + withSnippets.renderInput({ + onCreate: submitFloatingSnippetInput, + }) + ); + }); + return (
((props, forwardedRef) = containerRef={containerRef} onClose={closeFloatingSnippetInput} onRootClose={rootCloseFloatingSnippetInput} - renderInput={() => - withSnippets.renderInput({ - onCreate: submitFloatingSnippetInput, - }) - } + renderInput={floatingSnippetRenderInput} /> )}