Skip to content

Add resizable split, undoable edits, and view switcher - #3

Merged
raj-khan merged 5 commits into
mainfrom
feat/editor-resize-undo
Jun 21, 2026
Merged

raj-khan merged 5 commits into
mainfrom
feat/editor-resize-undo

Conversation

@raj-khan

Copy link
Copy Markdown
Owner

Overview

Three editor UX/UI improvements (plus a formatting pass and a repo-URL fix).

Improvements

1. Resizable split, not just all-or-nothing focus. Replaced the awkward bottom-right focus toggle with:

  • A mouse-draggable divider between the editor and preview (persisted across reloads, keyboard-resizable via arrows/Home/End, double-click to reset).
  • A centered Editor / Split / Preview switcher in the status rail.

Preview behavior handled carefully: minmax(0, …fr) tracks prevent overflow, drag is rAF-throttled, and the memoized preview only reflows on resize (never re-parses).

2. Undoable toolbar edits. Toolbar/shortcut insertions previously wiped the native undo stack because they set the value through React. They now insert via execCommand("insertText"), so Ctrl/Cmd+Z undoes them and React stays in sync via the input event (Tab too).

3. Fixed blank Preview-only view. Hiding the editor let the grid auto-place the preview into the 0px divider track. Panes are now pinned to explicit grid columns so a hidden sibling can't collapse the other.

Also included

  • GitHub repo URL corrected to raj-khan/markdown.software.
  • An editor formatting pass (tabs) on Header/Preview/SettingsMenu.

Verification

Browser-tested at 1440px: pane widths Preview-only 0 / 1440, Editor-only 1440 / 0, Split 717 / 717; image insert → Ctrl+Z restores original; drag persists ratio to localStorage. npm run lint and npm run build pass.

raj-khan added 5 commits June 21, 2026 21:52
Tracks the fraction of width given to the editor pane so a custom split
survives reloads.
Insert via execCommand("insertText") so programmatic edits stay on the
browser's native undo stack (Ctrl/Cmd+Z) and keep React in sync through
the input event. Adds insertAtCursor for plain inserts like Tab.
Replace the corner focus toggle with a draggable divider (persisted,
keyboard-resizable) and a centered Editor/Split/Preview switcher in the
status rail. Pin panes to explicit grid columns so a hidden pane can't
collapse the other to zero width. Wire undoable editor shortcuts.
Also reflects an editor formatting pass (tabs) on the file.
@vercel

vercel Bot commented Jun 21, 2026 •

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
markdowntopdf Ready Ready Preview, Comment Jun 21, 2026 1:54pm

@raj-khan
raj-khan merged commit c69bfdd into main Jun 21, 2026
4 checks passed

This branch was successfully deployed

1 active deployment
Preview — c9b31ae3 Deployed Jun 21, 2026 by vercel[bot]
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.

1 participant