Aqui está uma atualização que moderniza o componente e traz suporte ao editor de texto rico! 
Pode precisar de algum polimento ou pode ter casos extremos imprevistos, mas acredito que seja um bom começo. 
Em resumo
- Adiciona suporte ao editor de texto rico (veja abaixo para uma visão geral detalhada)
- Converte a renderização para um componente glimmer
- Corrige a cor do CSS com callouts aninhados
- Corrige a cor do CSS com alias
- A animação de recolhimento deve ser mais suave
- Adiciona a setting
callout_transition_duration_ms(animação de recolhimento) - Adiciona atalho Ctrl + q para inserir um callout padrão.
Funciona em ambos os editores, e o atalho é adicionado ao modal de Atalhos de Teclado - Chat: Adiciona um botão na barra de ferramentas para inserir um callout padrão
- Preview do Markdown: Adiciona a capacidade de alterar o tipo clicando no ícone
Editor de texto rico
Vamos falar sobre o editor de texto rico e o que esperar!
Criando callouts:
Você tem quatro maneiras de inserir callouts:
- Atalho de teclado
- Barra de ferramentas
- Regras de entrada
/callout<:tipo>!!<tipo>
- Suporte a colar
Vídeo
Editando callouts
Os controles para editar um callout aparecem somente quando você o seleciona antes.
- Seletor de tipo
Ao clicar no ícone, um menu flutuante aparecerá. - Título Personalizado
Suporta formatação em linha e emoji - Recolhimento
Defina callouts como colapsáveis. Pode ser acessado através do menu de opções.Vídeo
Organizando callouts
-
Controles de movimentação
- Desktop
Há uma alça que você arrasta para soltar o callout. - *Dispositivo touch
Você move os callouts para cima/baixo ou os aninha em callouts adjacentes. Está desativado por padrão para evitar inchaço na visualização, já que isso não é algo que você fará com frequência. Você pode alternar nas opções.
Vídeo
- Desktop
-
Navegação por teclado
Isso ajuda a facilitar a movimentação para dentro e para fora de callouts aninhados.
Pode exigir alguns ajustes futuros para tornar o comportamento consistente nesta versão.- ← No início do título, o seletor de callout abrirá automaticamente.
- ↑ ↓ Dentro do corpo de um callout sem parágrafo para pousar, ele criará um; se você sair com conteúdo vazio, o parágrafo será removido.
- Enter Dentro do título move o cursor para o corpo (e cria um se necessário).
Vídeo
-
Clique para inserir
- Em áreas onde não há parágrafo, você pode clicar dentro para abrir um parágrafo.
- Se preferir, você também pode usar botões para abrir um parágrafo dentro ou fora de um callout.
Vídeo
Possivelmente, mais tarde, procurarei por:
- Autocompletar regras de entrada
- Melhorar a cor usando CSS moderno, para garantir consistência e visibilidade, especialmente no modo escuro.
-
Eu gostaria de remover todas as settings e focar na simplicidade primeiro, com personalização avançada apenas com CSS, mas é tarde demais para isso
Agradecimentos especiais a Moin por me dar feedback.
É isso. Me diga o que você acha. Feedback é muito bem-vindo!