Editor Preview Position

:information_source: Summary Allows the user to reposition and resize the preview in the composer for Discourse.
:hammer_and_wrench: Repository GitHub - Alteras1/discourse-editor-preview-position: Discourse theme component for users to reposition and resize the preview
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Allows the user to reposition and resize the preview in the composer for Discourse. Double click the dragbar to reposition the split to be in the center.

preview

Fullscreen preview

https://github.com/Alteras1/discourse-editor-preview-position/raw/main/.github/images/editor-preview-position-fullscreen.gif

Also adds the option to style the composer in the same style as the fullscreen view.

clean composer mode

Settings

Top Bar Preview Button

Moves the preview button to the top bar. Default: true

Screenshots

non fullscreen:


fullscreen:


Allow Top Bottom Previews

Allows the preview to be position above/below the editor. Default: true

Screenshots


Allow Resizable Horizontal Previews

Allow the previews to be resizable along the horizontal axis. Default: true

Allow Resizable Vertical Previews

Allow the previews to be resizable along the vertical axis. Default: true

Clean Composer Style

Alters the composer style to more closely match the fullscreen composer style. Default: false.

Screenshots

Screenshots of the style in different orientations.




This setting is more of a personal preference. During the development of this theme component, I found the differences between the fullscreen and the non fullscreen editor to be distracting. As such, I added this styling to help create a more “unified” experience. By default it is off.

Compatibility & Notes

Only works in Discourse v3.2.0 and above due to usage of api.renderInOutlet() function and new glimmer components.

Since the side by side preview only happens in desktop views, this theme component only applies to desktop views.

The theme I am using in my screenshots is the Graceful theme.

16 Likes

Very nice. Thanks sure members will appreciate this!

1 Like

Modifying the vertical will cause a bug

1 Like

Thank you for the report! Pushed out a fix for it.

Hmm… I just realized that the drag bar is between the toolbar and the new topic fields… Not sure how I feel about that…

2 Likes

Just installed on my test forum. I quite like this. Thanks for sharing :slight_smile:

2 Likes

This is super nice, thanks for sharing!

1 Like