Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 8 commits into
base: main
Choose a base branch
from

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
Copy link

netlify bot commented Mar 17, 2025

Deploy Preview for ap-template-playground ready!

Name Link
🔨 Latest commit 5e17e49
🔍 Latest deploy log https://app.netlify.com/sites/ap-template-playground/deploys/67da9c72d4a1ae0008dd2e01
😎 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 and others added 4 commits March 17, 2025 22:38
…cordproject#259)

* fix(full-reload): Replace <a> tag with <Link> tag to prevent full reloading (accordproject#250)

Signed-off-by: Sahil Khan <[email protected]>

* fix(full-reload): rel attribute is unnecessary for internal links (accordproject#250)

Signed-off-by: Sahil Khan <[email protected]>

* fix(full-reload): Replace <a> tag with <Link> tag to prevent full reloading (accordproject#258)

Signed-off-by: Sahil Khan <[email protected]>

* fix(full-reload): rel attribute is unnecessary for internal links (accordproject#258)

Signed-off-by: Sahil Khan <[email protected]>

---------

Signed-off-by: Sahil Khan <[email protected]>
Signed-off-by: surya4419 <[email protected]>
…roject#189)

* components es-lint and type fixed

Signed-off-by: nitro56565 <[email protected]>

* updated arrow function for tour.start

Signed-off-by: nitro56565 <[email protected]>

---------

Signed-off-by: nitro56565 <[email protected]>
Signed-off-by: surya4419 <[email protected]>
@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

Hi @sanketshevkar ,Thanks for the feedback! I have removed the resize option on mobile, as we are not optimizing for mobile views at the moment. Please check the latest preview deployment and let me know your thoughts!

yashsaraswat2004 and others added 4 commits March 19, 2025 15:58
…ding area. (accordproject#243)

* Formated the code for future use with code maintainability.

Signed-off-by: Owaise Imdad <[email protected]>

* Fab global is added.

Signed-off-by: Owaise Imdad <[email protected]>

---------

Signed-off-by: Owaise Imdad <[email protected]>
Signed-off-by: surya4419 <[email protected]>
* fix(button): fix dark mode toggle click - I201

Signed-off-by: Dharma Teja <[email protected]>

* fix(button): fix dark mode toggle click - I201

Signed-off-by: Dharma Teja <[email protected]>

* fix(button): fix dark mode toggle click - I201

Signed-off-by: Dharma Teja <[email protected]>

* update is checked

Signed-off-by: Dharma Teja <[email protected]>

* feat(editor): add undo redo icons to editor - I204

Signed-off-by: Dharma Teja <[email protected]>

* feat(editor): add undo redo icons to editor - I204

Signed-off-by: Dharma Teja <[email protected]>

* feat(editor): add undo redo icons to editor - I204

Signed-off-by: Dharma Teja <[email protected]>

* feat(editor): add undo redo icons to editor - I204

Signed-off-by: Dharma Teja <[email protected]>

* feat(editor): add undo redo icons to editor - I204

Signed-off-by: Dharma Teja <[email protected]>

* feat(editor): add undo redo icons to editor - I204

Signed-off-by: Dharma Teja <[email protected]>

---------

Signed-off-by: Dharma Teja <[email protected]>
Signed-off-by: surya4419 <[email protected]>
@surya4419 surya4419 force-pushed the surya4419/i234/Add-Resizable-Editor-Preview-Panes branch from e220bc5 to 5e17e49 Compare March 19, 2025 10:29
@surya4419
Copy link
Contributor Author

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

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)
7 participants