Skip to content

feat(editor): make preview split resizable#1279

Merged
perber merged 2 commits into
perber:mainfrom
ahfoysal:resizable-editor-preview
Jul 14, 2026
Merged

feat(editor): make preview split resizable#1279
perber merged 2 commits into
perber:mainfrom
ahfoysal:resizable-editor-preview

Conversation

@ahfoysal

@ahfoysal ahfoysal commented Jul 7, 2026

Copy link
Copy Markdown
Contributor

Related issue

Fixes #1114

What changed

Added a draggable divider for the desktop editor/preview split and kept the existing stacked/mobile layouts unchanged.

Checklist

  • This is for an issue labeled good first issue / help wanted
  • This PR is focused on a single change
  • I ran npm run format in ui/leafwiki-ui
  • I updated documentation if needed

@ahfoysal
ahfoysal requested a review from perber as a code owner July 7, 2026 06:51
@perber

perber commented Jul 10, 2026

Copy link
Copy Markdown
Owner

@ahfoysal I was able to test it, and it already works pretty well. Just one thing: since you implemented the stacking functionality, could you also add resizing when it is stacked?

@perber perber left a comment

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

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

see comment above

@ahfoysal

Copy link
Copy Markdown
Contributor Author

Done. I added resizing for the stacked editor/preview layout as well: the same divider now uses vertical mouse movement when the preview is stacked, keeps the editor pane percentage clamped, and exposes the current value through aria-valuenow.

Validation:

  • npm test -- MarkdownEditor.test.tsx
  • npx prettier --check src/features/editor/MarkdownEditor.tsx src/features/editor/MarkdownEditor.test.tsx src/test-setup.ts src/index.css
  • npm run lint

@perber
perber self-requested a review July 14, 2026 11:23
@perber
perber merged commit f24e654 into perber:main Jul 14, 2026
9 checks passed
mrchypark added a commit to mrchypark/leafwiki that referenced this pull request Jul 15, 2026
* feat(editor): make preview split resizable (perber#1279)

* feat(tree): drag & drop page/section reordering in the page tree (perber#1307)

Reorder and move pages/sections directly in the sidebar tree by dragging
rows: drop between rows to reorder (insertion indicator), drop onto a
section to move into it (auto-expands collapsed sections on hover), with
optimistic updates and a silent tree re-sync. Same-parent reorders use the
existing sort endpoint; cross-parent drops use the move endpoint, which now
accepts an optional position for atomic move+placement (MoveNodeToPosition;
omitted position appends, so existing callers are unchanged).

Also folds in two fixes surfaced while testing the feature:
- Firefox performed a full page navigation on drop because the post-drag
  click bypasses React's synthetic handlers; click suppression is now a
  native window-level capture listener armed during the drag.
- MarkdownPreview re-parsed and re-rendered the whole article on every
  tree store update (byId identity churn); the rendered markdown element
  is now memoized on the resolved content string.

Fixes perber#1110

* feat(favorites): add per-user favorite pages (perber#1310)

Adds a private, per-user favorites list, separate from the global
editorial "Pinned Pages" flag: any authenticated user (not just
editor/admin) can favorite/unfavorite any page they can read.

Backend: new internal/favorites package (own favorites.db, outside
resync's reach per ADR-0001), AddFavorite/RemoveFavorite/ListFavorites
use cases, PUT/DELETE /api/pages/:id/favorite and GET /api/favorites
routes, cascade cleanup on page delete and user delete.

Frontend: stores/favorites.ts (optimistic add/remove), star toggle on
tree rows and the page viewer header, new "Favorites" sidebar
accordion section between Pinned and Pages, loaded/cleared reactively
off the session user id in App.tsx.

* refactor(sqliteutil): share open/corruption-recovery logic across stores (perber#1311)

Extract the "open → ensure schema → on recoverable SQLite corruption,
wipe and retry once" sequence, previously copy-pasted near-verbatim in
tags, links, properties, and search's store constructors, into a single
sqliteutil.RetryOnCorruption helper. Each store keeps its own opening
mechanics (eager sql.Open, links' lazy Connect(), search's fully lazy
withDB); only the recovery policy is now shared.

* feat(preview): add AutoHotkey syntax highlighting (perber#1312)

Co-authored-by: Chen Zhang <c436zhan@gmail.com>

* test(e2e): stabilize CodeMirror replace flow

* fix: address upstream sync review findings

* fix: guard favorite snapshot visibility

---------

Co-authored-by: Abu Hossain Foysal <ahfoysal30@gmail.com>
Co-authored-by: Aurelio Arcabascio <140868181+arcabaa@users.noreply.github.com>
Co-authored-by: perber <patrick.erber@gmail.com>
Co-authored-by: c436zhan <zc19970919@gmail.com>
Co-authored-by: Chen Zhang <c436zhan@gmail.com>
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.

Feature Request: Make the editor/preview split resizable by dragging the divider

2 participants