Skip to content

feat(editor): add resizable editor/preview panes #279

Merged
sanketshevkar merged 3 commits intoaccordproject:mainfrom
surya4419:surya4419/i234/Add-Resizable-Editor-Preview-Panes
Mar 29, 2025
Merged

feat(editor): add resizable editor/preview panes #279
sanketshevkar merged 3 commits intoaccordproject:mainfrom
surya4419:surya4419/i234/Add-Resizable-Editor-Preview-Panes

Conversation

@surya4419
Copy link
Contributor

Closes #234

This PR implements a resizable editor and preview pane feature, similar to LeetCode's interface. Users can now adjust the width of the editor and preview panes by dragging a divider between them. The preferred pane sizes are saved in local storage, ensuring persistence across sessions.

Changes

  • Added a draggable divider between the editor and preview panes.
  • Implemented event listeners to track mouse movement and resize panes dynamically.
  • Stored pane size preferences in local storage for a consistent user experience.
  • Ensured real-time updates to pane sizes during resizing.

Screenshots or Video

After changes

Template.Playground.-.Personal.-.Microsoft_.Edge.2025-03-17.18-23-49.mp4

Related Issues

Author Checklist

  • Ensure you provide a DCO sign-off for your commits using the --signoff option of git commit.
  • Vital features and changes captured in unit and/or integration tests
  • Commits messages follow AP format
  • Extend the documentation, if necessary
  • Merging to main from fork:branchname

@surya4419 surya4419 requested a review from a team as a code owner March 17, 2025 13:47
@netlify
Copy link

netlify bot commented Mar 17, 2025

Deploy Preview for ap-template-playground ready!

Name Link
🔨 Latest commit 54b104d
🔍 Latest deploy log https://app.netlify.com/sites/ap-template-playground/deploys/67e5605703341300080449f0
😎 Deploy Preview https://deploy-preview-279--ap-template-playground.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@surya4419
Copy link
Contributor Author

Hey @DianaLease , when you have some time, could you please review my PR? I'd love to get your feedback. Thanks!

@surya4419 surya4419 force-pushed the surya4419/i234/Add-Resizable-Editor-Preview-Panes branch from 2d8645b to aea37ef Compare March 17, 2025 17:08
@surya4419
Copy link
Contributor Author

surya4419 commented Mar 17, 2025

Hi @sanketshevkar @DianaLease ,Thanks for the feedback! I have removed the resize option on mobile screen. when you have some time, could you please review my PR? I'd love to get your feedback. Thanks!

@surya4419 surya4419 force-pushed the surya4419/i234/Add-Resizable-Editor-Preview-Panes branch from e220bc5 to 5e17e49 Compare March 19, 2025 10:29
…lity

Signed-off-by: surya4419 <suryaa4419@gmail.com>
@surya4419 surya4419 force-pushed the surya4419/i234/Add-Resizable-Editor-Preview-Panes branch from 519ef1b to 0713198 Compare March 27, 2025 07:26
surya4419 and others added 2 commits March 27, 2025 19:56
…cordproject#281)

* feat(editor): Add auto-pairing for curly braces in Concerto model section

Signed-off-by: surya4419 <suryaa4419@gmail.com>

* feat(editor): Add auto-pairing for curly braces in Concerto model section

Signed-off-by: surya4419 <suryaa4419@gmail.com>

* feat(editor): Add auto-pairing for curly braces in Concerto model section

Signed-off-by: surya4419 <suryaa4419@gmail.com>

---------

Signed-off-by: surya4419 <suryaa4419@gmail.com>
…lity

Signed-off-by: surya4419 <suryaa4419@gmail.com>
@surya4419
Copy link
Contributor Author

Hi @sanketshevkar , Please review my PR. Thanks!

@sanketshevkar sanketshevkar merged commit 36bc401 into accordproject:main Mar 29, 2025
7 checks passed
@surya4419 surya4419 deleted the surya4419/i234/Add-Resizable-Editor-Preview-Panes branch March 30, 2025 05:09
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.

Add Resizable Editor/Preview Panes (LeetCode-Style)

3 participants