From eb5ac2fc2d5608d0cf7580ef09fe7975d694ead4 Mon Sep 17 00:00:00 2001
From: Lakhan Baheti <94619783+1akhanBaheti@users.noreply.github.com>
Date: Tue, 26 Aug 2025 02:12:04 +0530
Subject: [PATCH] [WIKI-602] chore: disable image alignment tooltip for touch
 devices (#7642)

* chore: disable image alignment tooltip for touch devices

* chore: added touch-select-none style
---
 .../custom-image/components/toolbar/alignment.tsx          | 7 ++++---
 .../extensions/custom-image/components/toolbar/root.tsx    | 1 +
 packages/editor/src/styles/editor.css                      | 6 ++++++
 3 files changed, 11 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 3790fa547..dbbc42e4c 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 297e3b46b..1011050de 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}
           />
         )}
diff --git a/packages/editor/src/styles/editor.css b/packages/editor/src/styles/editor.css
index e4aabde9e..fa9d9521f 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;
+}