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

Basic real preview on the side of the edit window #697

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

rpeyron
Copy link
Contributor

@rpeyron rpeyron commented Dec 11, 2022

This PR adds a feature to get 'real' preview on the side of the editing window:

jekyll-admin-mods

It simply embeds an iframe with the resulting page (as when you click on the view button). So it is a real preview, much more accurate than every WYSIWYG editors can get.
It adds a "Side preview button" that will show the preview on the side, and move side buttons to the bottom to have a larger edit space. You can close the preview and get the original layout back.

You can also force refresh the preview, but if you use the live reload feature of the jekyll live server, it will reload automatically (with a small delay depending on the speed of the page compilation).

I am aware this PR cannot be merged as is (notably because of deactivating tests, as it requires a lot of work to update) but let me know if you are interested in this feature and I may help to get something mergeable in the direction you want.

@ashmaroli
Copy link
Member

Hello @rpeyron
Thank you very much for proposing this enhancement.
I am on board with the idea. The diff looks huge now, so this definitely requires more edits.

@rpeyron
Copy link
Contributor Author

rpeyron commented Dec 11, 2022

Hello @ashmaroli, thanks for your answer.

The diff looks indeed huge, but there are not that many changes ; lots of lines marked as diff are actually indented lines due to nesting existing parts in a parent

section.

Below is a list of major changes:

  • PreviewPanel.js contains code for the preview panel and button to be included in the xxEdit views
  • xxEdit views (DocumentEdit, DraftEdit, PageEdit) are modified in the same way to:
    • add DOM id to the div element that will have the class 'preview' added or removed by the preview/close buttons
    • add a parent div <div className="edit-panel">to be able to style and layout the existing contents with or without the preview panel
    • add the PreviewButton and PreviewPanel
  • preview.scss to add the CSS to style the panel and layout the page accordingly

I guess the way I use to add/remove the preview class and modify the layout is not the best, and you may want to replace that by a more reactish way to do it. The number of changes may also be lowered by maybe creating a common component for xxEdit views.

Please tell me if I can help with the edits to be done.

@ashmaroli
Copy link
Member

ashmaroli commented Dec 12, 2022

@rpeyron On actually trying this out at my end, I would like to leave some suggestions / feedback.

Feedback

  • It is not a good idea to push the side-buttons under the metafields. The buttons getting pushed further down with every front matter entry hampers UX.
  • The iframe isn't currently resizable. So the previews are always for small-screen viewports. Having to scroll down to click "View" to open a tab for large-screen viewport is again a bad UX.

Suggestions

  • The existing MarkdownEditor / SimpleMDE allows a side-by-side "live-preview" of Markdown renders. You could emulate similar behavior for the proposed build-preview / real-preview. That would prevent making changes to existing app layout.
  • The build-preview pane could be made resizable like how Google Chrome (only browser I use currently) has it for device-based renders.

@rpeyron
Copy link
Contributor Author

rpeyron commented Dec 13, 2022

@ashmaroli thanks for your suggestions

  • +1 for the "full screen" mode to avoid moving the buttons (about SimpleMDE, the lack of browser spell checker compatibility is for me a no-go in 2022 ; I have suggested some alternatives in Editors with third parties spell check compatibility / multi editors #696)
  • +1 for a slider between Markdown & preview to move the separation between the 2 columns and resize the preview

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