From e0066625259c4b047e453e77af0fcaff5c17dcdf Mon Sep 17 00:00:00 2001
From: WindrunnerMax <651525974@qq.com>
Date: Mon, 30 Sep 2024 23:03:10 +0800
Subject: [PATCH 1/3] fix: prevent IME input interruption on MacOS

---
 .../default/plate-ui/mention-element.tsx      | 27 ++++++++++++++++---
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/apps/www/src/registry/default/plate-ui/mention-element.tsx b/apps/www/src/registry/default/plate-ui/mention-element.tsx
index d8eaebd77a..33038372ef 100644
--- a/apps/www/src/registry/default/plate-ui/mention-element.tsx
+++ b/apps/www/src/registry/default/plate-ui/mention-element.tsx
@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 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';
 
 export const MentionElement = withRef<
@@ -18,6 +19,12 @@ export const MentionElement = withRef<
   const element = useElement<TMentionElement>();
   const selected = useSelected();
   const focused = useFocused();
+  const [isMacEnv, setIsMacEnv] = React.useState(false);
+
+  useEffect(() => {
+    // Avoid ssr hydration mismatch
+    setIsMacEnv(IS_APPLE);
+  }, []);
 
   return (
     <PlateElement
@@ -35,9 +42,21 @@ export const MentionElement = withRef<
       contentEditable={false}
       {...props}
     >
-      {prefix}
-      {renderLabel ? renderLabel(element) : element.value}
-      {children}
+      {isMacEnv ? (
+        // 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>
   );
 });

From f6ef963ee2d0c77b77668689b0c79d62ed9cc698 Mon Sep 17 00:00:00 2001
From: WindrunnerMax <651525974@qq.com>
Date: Mon, 30 Sep 2024 23:15:34 +0800
Subject: [PATCH 2/3] chore: plate ui changelog

---
 apps/www/content/docs/components/changelog.mdx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/apps/www/content/docs/components/changelog.mdx b/apps/www/content/docs/components/changelog.mdx
index 17d3c1f03f..07b7405781 100644
--- 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
 

From 2fbc9268e0e2d918cc032607ee86a8b5bca8866b Mon Sep 17 00:00:00 2001
From: WindrunnerMax <651525974@qq.com>
Date: Tue, 1 Oct 2024 07:34:55 +0800
Subject: [PATCH 3/3] fix: explicit state

---
 .../registry/default/plate-ui/mention-element.tsx   | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/apps/www/src/registry/default/plate-ui/mention-element.tsx b/apps/www/src/registry/default/plate-ui/mention-element.tsx
index 33038372ef..724e2af49e 100644
--- a/apps/www/src/registry/default/plate-ui/mention-element.tsx
+++ b/apps/www/src/registry/default/plate-ui/mention-element.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 
 import type { TMentionElement } from '@udecode/plate-mention';
 
@@ -8,6 +8,8 @@ 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,
   {
@@ -19,12 +21,7 @@ export const MentionElement = withRef<
   const element = useElement<TMentionElement>();
   const selected = useSelected();
   const focused = useFocused();
-  const [isMacEnv, setIsMacEnv] = React.useState(false);
-
-  useEffect(() => {
-    // Avoid ssr hydration mismatch
-    setIsMacEnv(IS_APPLE);
-  }, []);
+  const mounted = useMounted();
 
   return (
     <PlateElement
@@ -42,7 +39,7 @@ export const MentionElement = withRef<
       contentEditable={false}
       {...props}
     >
-      {isMacEnv ? (
+      {mounted && IS_APPLE ? (
         // Mac OS IME https://github.com/ianstormtaylor/slate/issues/3490
         <React.Fragment>
           {children}