Merge pull request #3500 from yf-yang/add-composing

fix: support composition event in placeholder

Author: 12joan

.changeset/orange-months-sort.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-utils': patch
+---
+
+Hide placeholder during composition

package.json

@@ -146,7 +146,7 @@
     "slate": "0.103.0",
     "slate-history": "0.100.0",
     "slate-hyperscript": "0.100.0",
-    "slate-react": "0.108.0",
+    "slate-react": "0.110.0",
     "slate-test-utils": "1.3.2",
     "tailwindcss": "^3.4.1",
     "ts-jest": "^29.1.2",

packages/plate-utils/package.json

@@ -65,7 +65,7 @@
     "slate": ">=0.103.0",
     "slate-history": ">=0.93.0",
     "slate-hyperscript": ">=0.66.0",
-    "slate-react": ">=0.108.0"
+    "slate-react": ">=0.110.0"
   },
   "publishConfig": {
     "access": "public"

packages/plate-utils/src/react/usePlaceholder.ts

@@ -6,7 +6,7 @@ import {
   queryNode,
 } from '@udecode/slate';
 import { findNodePath } from '@udecode/slate-react';
-import { useFocused, useSelected } from 'slate-react';
+import { useComposing, useFocused, useSelected } from 'slate-react';
 
 import type { PlateElementProps } from './PlateElement';
 
@@ -23,6 +23,7 @@ export const usePlaceholderState = ({
 }: PlaceholderProps) => {
   const focused = useFocused();
   const selected = useSelected();
+  const composing = useComposing();
   const editor = useEditorRef();
 
   const isEmptyBlock = isElementEmpty(editor, element);
@@ -31,7 +32,11 @@ export const usePlaceholderState = ({
     isEmptyBlock &&
     (!query || queryNode([element, findNodePath(editor, element)!], query)) &&
     (!hideOnBlur ||
-      (isCollapsed(editor.selection) && hideOnBlur && focused && selected));
+      (isCollapsed(editor.selection) &&
+        hideOnBlur &&
+        focused &&
+        selected &&
+        !composing));
 
   return {
     enabled,