Pré-visualização da posição do editor

[Alteras (Steven Chang)]

	Resumo	Permite ao usuário reposicionar e redimensionar a pré-visualização no composer para o Discourse.
	Repositório	GitHub - Alteras1/discourse-editor-preview-position: Discourse theme component for users to reposition and resize the preview
	Guia de Instalação	Como instalar um tema ou componente de tema
	Novo em Temas do Discourse?	Guia para iniciantes no uso de Temas do Discourse

Instale este componente de tema

Permite ao usuário reposicionar e redimensionar a pré-visualização no composer para o Discourse. Dê um duplo clique na barra de arrastar para reposicionar a divisão ao centro.

Pré-visualização em tela cheia

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 10 MB)

Também adiciona a opção de estilizar o composer no mesmo estilo da visualização em tela cheia.

Configurações

Botão de Pré-visualização na Barra Superior

Move o botão de pré-visualização para a barra superior. Padrão: true

Capturas de tela

não tela cheia:

tela cheia:

Permitir Pré-visualizações Superior/Inferior

Permite que a pré-visualização seja posicionada acima/abaixo do editor. Padrão: true

Capturas de tela

Permitir Pré-visualizações Horizontais Redimensionáveis

Permite que as pré-visualizações sejam redimensionáveis ao longo do eixo horizontal. Padrão: true

Permitir Pré-visualizações Verticais Redimensionáveis

Permite que as pré-visualizações sejam redimensionáveis ao longo do eixo vertical. Padrão: true

Estilo de Composer Limpo

Altera o estilo do composer para corresponder mais de perto ao estilo do composer em tela cheia. Padrão: false.

Capturas de tela

Capturas de tela do estilo em diferentes orientações.

Esta configuração é mais uma preferência pessoal. Durante o desenvolvimento deste componente de tema, achei as diferenças entre o editor em tela cheia e o não em tela cheia distrativas. Como tal, adicionei esta estilização para ajudar a criar uma experiência mais “unificada”. Por padrão, está desativado.

Compatibilidade e Notas

Funciona apenas no Discourse v3.2.0 e superior devido ao uso da função api.renderInOutlet() e novos componentes glimmer.

Como a pré-visualização lado a lado só ocorre em visualizações de desktop, este componente de tema se aplica apenas a visualizações de desktop.

Da mesma forma, como o Rich Text Editor não tem uma pré-visualização separada, este componente é desativado no modo RTE.

O tema que estou usando em minhas capturas de tela é o tema Graceful.

[Heliosurge (Dan DeMontmorency)]

Muito bom. Tenho certeza que os membros apreciarão isso!

[Monikas (JustMonika)]

Modificar o vertical causará um bug

[Alteras (Steven Chang)]

Obrigado pelo relatório! Lancei uma correção para ele.

Fix vertical preview not capping with new topic composer

Hmm… Acabei de perceber que a barra de arrastar está entre a barra de ferramentas e os campos de novo tópico… Não tenho certeza do que pensar sobre isso…

[Lilly (Lillian Louis)]

Acabei de instalar no meu fórum de teste. Gostei bastante. Obrigado por compartilhar

[jordan.vidrine]

Isso é muito legal, obrigado por compartilhar!

[Lilly (Lillian Louis)]

Só queria postar novamente sobre o quanto gosto deste componente. Faço muito do meu trabalho diário na minha própria instância e isso melhorou imensamente a minha própria experiência de usuário no Discourse. Gosto muito do editor mais amplo com o preview no topo para o meu monitor de desktop maior. Sinto que adaptar essa visualização para mobile pode ser possível (embora o teclado do celular possa ter algo a dizer sobre isso), então posso fazer um fork e tentar sempre que tiver um tempo extra (ou seja, quase nunca lol).

Bom trabalho e obrigado novamente por compartilhar isso.

[MihirR (Mihir)]

Apenas uma confirmação rápida, isto é projetado principalmente para Desktop?

[Alteras (Steven Chang)]

Sim, foi projetado para desktop.