[PR #1348] [MERGED] feat: position highlight menu based on device type #1803

New issue

Closed

opened 2026-03-02 11:59:15 +03:00 by kerem · 0 comments

kerem commented

2026-03-02 11:59:15 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/karakeep-app/karakeep/pull/1348
Author: @Mxrk
Created: 5/2/2025
Status: ✅ Merged
Merged: 5/18/2025
Merged by: @MohamedBassem

Base: main ← Head: patch-5

📝 Commits (2)

0370f05 feat: position highlight menu based on device type
a4774d0 fix: re-run prettier

📊 Changes

1 file changed (+17 additions, -6 deletions)

View changed files

📝 apps/web/components/dashboard/preview/BookmarkHtmlHighlighter.tsx (+17 -6)

📄 Description

Hi,

this PR adds the highlight functionality to touch devices, mostly mobile devices for the web version.
The main fix as discussed in the issue #1220 is using onPointerUp={handlePointerUp} instead of onMouseUp.
With that change, the highlight menu appears on e.g. mobile.

Besides that, I also adjusted setMenuPosition to move the menu below the selected text according to the isMobile check as in most cases the device context menu is above. The mobile check was found here and seems to be good for this use case:
https://stackoverflow.com/a/52855084/9950786

Here's how it now looks on mobile:

This doesn't adjust the web version:
Current latest stable after selecting Qualcomm:

My PR:

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/karakeep-app/karakeep/pull/1348 **Author:** [@Mxrk](https://github.com/Mxrk) **Created:** 5/2/2025 **Status:** ✅ Merged **Merged:** 5/18/2025 **Merged by:** [@MohamedBassem](https://github.com/MohamedBassem) **Base:** `main` ← **Head:** `patch-5` --- ### 📝 Commits (2) - [`0370f05`](https://github.com/karakeep-app/karakeep/commit/0370f05e4524813f6a521e094ad6ac099d27da12) feat: position highlight menu based on device type - [`a4774d0`](https://github.com/karakeep-app/karakeep/commit/a4774d06d2c655597e1ee1721fddc2ecd1195870) fix: re-run prettier ### 📊 Changes **1 file changed** (+17 additions, -6 deletions) <details> <summary>View changed files</summary> 📝 `apps/web/components/dashboard/preview/BookmarkHtmlHighlighter.tsx` (+17 -6) </details> ### 📄 Description Hi, this PR adds the highlight functionality to touch devices, mostly mobile devices for the web version. The main fix as discussed in the issue #1220 is using `onPointerUp={handlePointerUp} `instead of `onMouseUp`. With that change, the highlight menu appears on e.g. mobile. Besides that, I also adjusted `setMenuPosition` to move the menu below the selected text according to the `isMobile` check as in most cases the device context menu is above. The mobile check was found here and seems to be good for this use case: https://stackoverflow.com/a/52855084/9950786 Here's how it now looks on mobile: ![image](https://github.com/user-attachments/assets/f0a4a702-b7aa-486e-a89a-086581c8a755) This doesn't adjust the web version: **Current latest stable after selecting Qualcomm:** <img width="380" alt="image" src="https://github.com/user-attachments/assets/fcf25eeb-7475-4262-914c-d1e53c3bfde0" /> **My PR:** <img width="289" alt="image" src="https://github.com/user-attachments/assets/96f79cc8-5ab4-4c94-a446-0b4eda43b6d3" /> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

kerem

2026-03-02 11:59:15 +03:00

closed this issue
added the
pull-request
label

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

starred/karakeep#1803

No description provided.

Rows
Columns