[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

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"

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}
           />
         )}

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;
+}