Destaque Rápido

[denvergeeks]

Sim @satonotdead Acho que este tópico saiu um pouco dos trilhos… Acho que este tópico pode ser podado para se referir à adição de um botão de destaque ao popup flutuante de edição/citação

Então, criei um componente de tema Highlighter Composer Button para o propósito muito específico e limitado de clicar em um botão na barra de ferramentas do compositor para inserir <mark>isto</mark>, e também adicionei um atalho de teclado Ctrl-H para conveniência.

Existem 2 outros componentes de botão de compositor diferentes que permitem inserir código rapidamente para adicionar cores de fundo e de texto. Esses outros 2 não foram tão rápidos e convenientes para mim por 2 motivos:

1. Eles exigem a digitação manual de suas cores no código inserido para funcionar.

2. Eles nem sempre funcionam tão bem com outros elementos que uso em minhas postagens, como caixas de conteúdo roláveis:

[Jagster (Jakke Lehtonen)]

Você quer abrir um pouco como você fez aquelas caixas roláveis

[denvergeeks]

Claro @Jagster é este componente de tema…

GitHub - discourse/Scrollable-post-content: A Discourse theme component that allows you to add...

Eu estilizo as caixas assim…

/* Sombra da Caixa de Conteúdo Rolável */

.scrollable-content {
    border-left: none !important;
    background-color: var(--secondary) !important;
    padding: 1em 0.5em 1em 1em !important;
    box-shadow: 0 1.36px 8.896px #c4b59d, 0 0 1px !important;
    border-radius: 4px !important;
    margin: 0 8.896px !important;
}

.scrollable-content-inner {
    padding-right: 15px !important;
}

.scrollable-content-inner h1,
.scrollable-content-inner h2,
.scrollable-content-inner h3,
.scrollable-content-inner h4,
.scrollable-content-inner h5,
.scrollable-content-inner h6 {
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
}

[Canapin (Coin-coin le Canapin)]

Infelizmente, não poderei usá-lo no meta…

[tobiaseigen]

@satonotdead desculpe por isso! Comecei a ter ideias aqui sobre maneiras de melhorar o composer, o que também estou achando útil. Pessoalmente, não estou convencido da sugestão da postagem original de adicionar uma opção de destaque ao lado de citação e edição rápida, ao selecionar texto em uma postagem que você está lendo. Faz mais sentido colocar esse recurso no composer, na minha opinião.

Existem também sugestões gerais aqui sobre diferentes maneiras pelas quais o texto pode ser formatado usando markdown, incluindo vários componentes de tema que foram criados ao longo dos anos.

@pfaffman

Várias pessoas estão trabalhando ou pensando em um documento específico. O documento está escrito e a discussão é sobre ele. Você pode querer destacar coisas nele, assim como faria há 20 anos em uma pilha de papel encadernado chamada “livro”. Muitas vezes, você gostaria de destacar uma seção e citá-la, mas pode apenas querer destacar coisas que pretende pensar mais tarde.

Interessante. Então você está sugerindo que o texto destacado seria visível apenas para o usuário, ou seria visível para todos? Então algumas pessoas poderiam ver o texto destacado de todos? Para mim, o último parece caótico e não muito útil. O primeiro eu não acho que seja viável de implementar.

Discourse Shared Edits poderia usar algo assim, então quando várias pessoas estão editando, fica claro quem contribuiu com qual texto. Mas também de valor um tanto limitado, acho, e potencialmente caótico.

@denvergeeks

Então, eu fiz um componente de tema Highlighter Composer Button para o propósito muito específico e limitado de clicar em um botão na barra de ferramentas do composer para inserir \u003cmark\u003ethis\u003c/mark\u003e, e também adicionei um atalho de teclado \u003ckbd\u003eCtrl-H\u003c/kbd\u003e para conveniência.

Incrível! Instalei isso no meu site pessoal e funciona bem. Bom trabalho!

[denvergeeks]

@tobiaseigen

ao selecionar texto em uma postagem que você está lendo.

Exatamente, @tobiaseigen! Usamos marcadores quando estamos lendo e queremos destacar rapidamente partes do texto.

Eu penso nisso como eu uso a Edição Rápida onde posso (na janela de edição mini) digitar as tags em volta de \u003cmark\u003ealgum texto\u003c/mark\u003e que selecionei para editar…

\u003cmark\u003ealgum texto\u003c/mark\u003e

Você acha que funcionaria se eu fizesse uma cópia do Componente Tema Marcador e alterasse o código em api-setup.js para colocar o botão de marcador (Ou pressionar h) no PluginOutlet

quote-button-after

Código de api-setup.js

import { apiInitializer } from "discourse/lib/api";
import loadScript from "discourse/lib/load-script";
import I18n from "I18n";

async function applyHighlight(element) {
  const highlights = element.querySelectorAll("mark");
  if (!highlights.length) {
    return;
  }
}

export default apiInitializer("0.11.1", (api) => {
  const { iconNode } = require("discourse-common/lib/icon-library");
  let icon = iconNode("highlighter");
  const currentLocale = I18n.currentLocale();
  // I18n.translations[currentLocale].js.highlight_button_title = I18n.t(themePrefix("composer_highlight_button_title"));
  // I18n.translations[currentLocale].js.composer.highlight_button_text = I18n.t(themePrefix("composer_highlight_button_text"));
  I18n.translations[currentLocale].js.highlight_button_title = "Highlight Text";
  I18n.translations[currentLocale].js.composer.this = "this";
  // I18n.translations[currentLocale].js.composer.highlight_button_text = "Highlight Text";

  api.modifyClass("controller:composer", {
    pluginId: "highlight",
    actions: {
      highlightButton() {
        this.get("toolbarEvent").applySurround("\n" + `<mark>` + "\n</mark>\n");
      },
    },
  });

  // add button to the toolbar
  api.onToolbarCreate((toolbar) => {
    toolbar.addButton({
      id: "composer_highlight_button",
      group: "extras",
      icon: "highlighter",
      shortcut: "H",
      preventFocus: true,
      trimLeading: true,
      title: "highlight_button_title",
      // perform: e => e.applySurround('[wrap=highlight]', '[/wrap]', 'this')
      perform: (e) => e.applySurround("<mark>", "</mark>", "this"),
    });
  });

  api.decorateCookedElement(
    async (elem, helper) => {
      const id = helper ? `post_${helper.getModel().id}` : "composer";
      applyHighlight(elem, id);
    },
    { id: "wrap-mark" }
  );
});

Ou é uma empreitada inútil!?

[tobiaseigen]

Certo. Entendo o que você está tentando fazer.

Se você conseguir fazer isso em um componente de tema, vá em frente. Eu não sou programador, então não sei como você faria isso.

[denvergeeks]

Ambos inserir e excluir

Ambos <u>inserir</u> e <del>excluir</del>

Agora eu devo também incorporar isso em Componentes de Tema de Botão do Composer (apenas porque, como diz @Lilly – “gadgets são legais!”

Oi! HTML Formatting Tags

[merefield (Robert)]

Para mim, isso poderia ser uma forma de marcador mais preciso.

Gostaria de saber se você poderia estender o sistema de marcação para lembrar seções de texto realçadas?

[denvergeeks]

Pensamento muito interessante…