Merge pull request #3595 from WindrunnerMax/fix-mention-interrupt-ime

fix: mention component interrupt IME
udecode · Sep 30, 2024 · 8070409 · 8070409
2 parents 56e0051 + 2fbc926
commit 8070409
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git a/apps/www/content/docs/components/changelog.mdx b/apps/www/content/docs/components/changelog.mdx
@@ -8,10 +8,15 @@ Since Plate UI is not a component library, a changelog is maintained here.
 
 Use the [CLI](https://platejs.org/docs/components/cli) to install the latest version of the components.
 
+## October 2024 #15
+
+### October 1 2024 #15.1
+
+- fix `mention-element`: prevent IME input interruption on MacOS
 
 ## September 2024 #14
 
-### September 29 2024 #15
+### September 29 2024 #14.3
 
 - fix `heading-element`: if the heading is the first block, it should not have a top margin
 

diff --git a/apps/www/src/registry/default/plate-ui/mention-element.tsx b/apps/www/src/registry/default/plate-ui/mention-element.tsx
@@ -5,8 +5,11 @@ import type { TMentionElement } from '@udecode/plate-mention';
 import { cn, withRef } from '@udecode/cn';
 import { getHandler } from '@udecode/plate-common';
 import { PlateElement, useElement } from '@udecode/plate-common/react';
+import { IS_APPLE } from '@udecode/utils';
 import { useFocused, useSelected } from 'slate-react';
 
+import { useMounted } from '@/hooks/use-mounted';
+
 export const MentionElement = withRef<
   typeof PlateElement,
   {
@@ -18,6 +21,7 @@ export const MentionElement = withRef<
   const element = useElement<TMentionElement>();
   const selected = useSelected();
   const focused = useFocused();
+  const mounted = useMounted();
 
   return (
     <PlateElement
@@ -35,9 +39,21 @@ export const MentionElement = withRef<
       contentEditable={false}
       {...props}
     >
-      {prefix}
-      {renderLabel ? renderLabel(element) : element.value}
-      {children}
+      {mounted && IS_APPLE ? (
+        // Mac OS IME https://github.com/ianstormtaylor/slate/issues/3490
+        <React.Fragment>
+          {children}
+          {prefix}
+          {renderLabel ? renderLabel(element) : element.value}
+        </React.Fragment>
+      ) : (
+        // Others like Android https://github.com/ianstormtaylor/slate/pull/5360
+        <React.Fragment>
+          {prefix}
+          {renderLabel ? renderLabel(element) : element.value}
+          {children}
+        </React.Fragment>
+      )}
     </PlateElement>
   );
 });