Skip to content

fix(mobile): hide dock toggle and remove language selector flags on mobile viewports#124

Merged
ThisIs-Developer merged 1 commit into
mainfrom
feature/find-replace-redesign
May 27, 2026
Merged

fix(mobile): hide dock toggle and remove language selector flags on mobile viewports#124
ThisIs-Developer merged 1 commit into
mainfrom
feature/find-replace-redesign

Conversation

@ThisIs-Developer
Copy link
Copy Markdown
Owner

Overview

This Pull Request introduces a modern, feature-rich Find & Replace panel designed to replace the basic client-side overlay, matching industry standards. The solution is fully integrated into both the Web application and the NeutralinoJS Desktop app container, optimized with GFM AST-aware scoping, visual highlighting overlays, global hotkey interceptions, and a clean, responsive mobile adaptation.


Key Features Implemented

1. Find & Replace Engine & Core Logic

  • Regular Expression Support: Full support for standard and advanced JavaScript regular expressions, including named capture groups (?<name>...), index capture groups $1, lookaheads, lookbehinds, case-insensitive options, and whole-word bounding.
  • Smart Case-Preservation: Tracks case configurations (UPPERCASE, Title Case, lowercase) of matched terms and applies equivalent casing structures to replacement outcomes.
  • Block Delimiter Safeguards: Implements coordinate-based syntax validations. Search-and-replace queries that would break or unbalance Markdown boundaries (such as LaTeX $$ markers or Mermaid diagram declarations) are blocked with a safe error warning.
  • AST-Aware Scope Filtering: Parses markdown text via marked.lexer to map character offsets. Enables users to restrict searches to specific document types, including headings, code snippets, LaTeX blocks, Mermaid diagrams, or plain text.

2. UI/UX & Layout Enhancements

  • Draggable & Dockable Layout: The panel operates as a floating, draggable window over the viewport. It includes a docking toggle button that moves it into a vertical sidebar position, adjusting the split-pane sizes to prevent content overlap.
  • Comparative Diff Preview: Provides a side-by-side, comparative before/after line-based changes review interface for "Replace All" commands, highlighting additions in green and deletions in red.
  • Session History Cache: Caches the last 10 unique search queries in a dropdown list for quick navigation.

3. Mobile View Optimizations

  • Floating-Only Mode: Bypasses docked preferences on mobile layouts (viewport width <= 768px), forcing the panel to open in a floating-only configuration.
  • Responsive Scaling: Constrains the floating panel to calc(100% - 24px) width on mobile screens to maintain editor visibility.
  • Dock Toggle Hiding: Hides the dock/sidebar toggle button on viewports <= 768px using native CSS.
  • Dynamic Resize Undocking: Automatically undocks and floats the active panel if the user resizes a desktop window down to a mobile viewport width.
  • Resizing Logic Protection: Disables touch/mouse split divider dragging on mobile, resetting custom pane inline flex values to preserve pure CSS layouts.
  • Language Selector Flag Cleanup: Stripts country flag emojis from both the mobile menu language dropdown items and the active language label (#mobile-current-lang-label) to ensure a compact, clutter-free mobile UI.

Technical Refinements & Bug Fixes

  • Global Hotkey Interception: Moved shortcut event listeners (Ctrl + F, Ctrl + H, and Escape) to the document-level, globally blocking default browser search overlays and focusing the custom panel.
  • Float Position Resets: Clears inline positioning styles on closing the floating panel, resetting it to the default top-right corner on reopen.
  • Pane Width Recalculations: Integrated a CSS layout variable --dock-width (340px when docked, 0px when floating) to adjust the flex-basis subtraction of the editor and preview panes.
  • Match Highlights & Viewport Centering: Styled normal matches yellow and active matches orange. Applied color: transparent !important to overlay elements to prevent visual text-doubling/blurring. Integrated vertical offset calculations inside selectActiveMatch() to center active matches in the viewport.

Verification & Compilation Outcomes

1. Isolated Unit Tests

We verified the search algorithms and engine mechanics in isolation using test_engine.js:

  • executeSearch simple substring matching: Passed
  • Case sensitivity and Whole Word constraints: Passed
  • preserveCase capitalization parsing: Passed
  • Standard and Named Regex capture group replacements: Passed
  • Sequential AST chronological scope boundary maps: Passed

2. Shared Desktop Compilation

Ran the build compiler node prepare.js inside the desktop-app/ directory to successfully:

  • Synchronize script.js, styles.css, and index.html changes.
  • Download and bundle remote CDN libraries locally for 100% offline desktop app execution.
  • Compile resources into desktop-app/resources/ directories.

Copilot AI review requested due to automatic review settings May 27, 2026 12:38
@vercel
Copy link
Copy Markdown

vercel Bot commented May 27, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
markdown-viwer Ready Ready Preview, Comment May 27, 2026 12:38pm

@ThisIs-Developer ThisIs-Developer merged commit 6e72303 into main May 27, 2026
6 of 7 checks passed
@ThisIs-Developer ThisIs-Developer deleted the feature/find-replace-redesign branch May 27, 2026 12:40
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants