binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WIKI-602] chore: disable image alignment tooltip for touch devices (#7642)

Browse source 
* chore: disable image alignment tooltip for touch devices

* chore: added touch-select-none style
This commit is contained in:
Lakhan Baheti 2025-08-26 02:12:04 +05:30 • committed by GitHub
parent b6cf3a5a8b
commit eb5ac2fc2d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 11 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

7
packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx
View file

@ -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"

1
packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx
View file

@ -42,6 +42,7 @@ export const ImageToolbarRoot: React.FC<Props> = (props) => {
<ImageAlignmentAction
activeAlignment={alignment}
handleChange={handleAlignmentChange}
isTouchDevice={isTouchDevice}
toggleToolbarViewStatus={setShouldShowToolbar}
/>
)}

6
packages/editor/src/styles/editor.css
View file

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