Editor Preview Position

[Alteras]

	Summary	Allows the user to reposition and resize the preview in the composer for Discourse.
	Repository	GitHub - Alteras1/discourse-editor-preview-position: Discourse theme component for users to reposition and resize the preview
	Install Guide	How to install a theme or theme component
	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.

Fullscreen preview

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

https://github.com/Alteras1/discourse-editor-preview-position/raw/main/.github/images/editor-preview-position-fullscreen.gif(image larger than 4 MB)

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

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.

[Heliosurge (Dan DeMontmorency)]

Very nice. Thanks sure members will appreciate this!

[Monikas (JustMonika)]

Modifying the vertical will cause a bug

[Alteras]

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

Fix vertical preview not capping with new topic composer

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

[Lilly]

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

[jordan-vidrine]

This is super nice, thanks for sharing!

[Lilly]

Just wanted to post again about how much I like this component. I do a lot of my daily work on my own instance and it has improved my own Discourse user experience immensely. I really like the wider composer with the previewer on top for my bigger screen desktop monitor. I feel like adapting that view for mobile might be possible (although mobile keyboard may have something to say about it), so I may fork and have a go whenever I have some extra time (ie: like almost never lol).

Nice work and thanks again for sharing this.