From f231491a545f8897ac270b2008c7d608b3a336d7 Mon Sep 17 00:00:00 2001
From: Lakhan Baheti <lakhanbaheti9@gmail.com>
Date: Mon, 25 Aug 2025 16:29:45 +0530
Subject: [PATCH 1/2] chore: disable image alignment tooltip for touch devices

---
 .../custom-image/components/toolbar/alignment.tsx          | 7 ++++---
 .../extensions/custom-image/components/toolbar/root.tsx    | 1 +
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx
index 3790fa54712..dbbc42e4cfa 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx
@@ -10,11 +10,12 @@ import { IMAGE_ALIGNMENT_OPTIONS } from "../../utils";
 type Props = {
   activeAlignment: TCustomImageAlignment;
   handleChange: (alignment: TCustomImageAlignment) => void;
+  isTouchDevice: boolean;
   toggleToolbarViewStatus: (val: boolean) => void;
 };
 
 export const ImageAlignmentAction: React.FC<Props> = (props) => {
-  const { activeAlignment, handleChange, toggleToolbarViewStatus } = props;
+  const { activeAlignment, handleChange, isTouchDevice, toggleToolbarViewStatus } = props;
   // states
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   // refs
@@ -30,7 +31,7 @@ export const ImageAlignmentAction: React.FC<Props> = (props) => {
 
   return (
     <div ref={dropdownRef} className="h-full relative">
-      <Tooltip tooltipContent="Align">
+      <Tooltip disabled={isTouchDevice} tooltipContent="Align">
         <button
           type="button"
           className="h-full flex items-center gap-1 text-white/60 hover:text-white transition-colors"
@@ -43,7 +44,7 @@ export const ImageAlignmentAction: React.FC<Props> = (props) => {
       {isDropdownOpen && (
         <div className="absolute top-full left-1/2 -translate-x-1/2 mt-0.5 h-7 bg-black/80 flex items-center gap-2 px-2 rounded">
           {IMAGE_ALIGNMENT_OPTIONS.map((option) => (
-            <Tooltip key={option.value} tooltipContent={option.label}>
+            <Tooltip disabled={isTouchDevice} key={option.value} tooltipContent={option.label}>
               <button
                 type="button"
                 className="flex-shrink-0 h-full grid place-items-center text-white/60 hover:text-white transition-colors"
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx
index 297e3b46b92..1011050de7b 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx
@@ -42,6 +42,7 @@ export const ImageToolbarRoot: React.FC<Props> = (props) => {
           <ImageAlignmentAction
             activeAlignment={alignment}
             handleChange={handleAlignmentChange}
+            isTouchDevice={isTouchDevice}
             toggleToolbarViewStatus={setShouldShowToolbar}
           />
         )}

From d48c8632eb50d8e168e74971b968f18073eb9124 Mon Sep 17 00:00:00 2001
From: Lakhan Baheti <lakhanbaheti9@gmail.com>
Date: Mon, 25 Aug 2025 16:42:10 +0530
Subject: [PATCH 2/2] chore: added touch-select-none style

---
 packages/editor/src/styles/editor.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/editor/src/styles/editor.css b/packages/editor/src/styles/editor.css
index e4aabde9ece..fa9d9521f1c 100644
--- a/packages/editor/src/styles/editor.css
+++ b/packages/editor/src/styles/editor.css
@@ -500,3 +500,9 @@ span[data-name][data-type="emoji"] img {
   max-width: 1.25em;
   max-height: 1.25em;
 }
+
+/* touch device styles */
+.touch-select-none {
+  user-select: none;
+  -webkit-user-select: none;
+}