Rapido risalto

Sviluppatore
48

Sì @satonotdead Penso che questo argomento sia andato un po’ fuori tema… Penso che questo argomento potrebbe essere ridotto per riferirsi all’aggiunta di un pulsante di evidenziazione al popup mobile di modifica/citazione

Quindi, ho creato un componente tematico Highlighter Composer Button per lo scopo molto specifico e limitato di fare clic su un pulsante nella barra degli strumenti del compositore per inserire <mark>questo</mark>, e ho anche aggiunto una scorciatoia da tastiera Ctrl-H per comodità.

Ci sono altri 2 componenti di pulsanti del compositore che ti consentono di inserire codice al volo per aggiungere colori di sfondo e testo. Questi altri 2 non sono stati così rapidi e convenienti per me per 2 motivi:

  1. Richiedono di digitare manualmente i colori nel codice inserito affinché funzionino.

  2. Non sempre si integrano bene con altri elementi che uso nei miei post, come le caselle di contenuto scorrevoli:

discourse-highlighter-vs-colour-vs-bolor-bg
discourse-highlighter-vs-colour-vs-bolor-bg3072×1465 297 KB

2 Mi Piace
49

Vuoi aprire un po’ come hai fatto quelle caselle scorrevoli :face_with_peeking_eye:

50

Certo @Jagster, è questo componente del tema…

Ho stilizzato le caselle in questo modo…

/* Scrollable Content Box Shadow */

.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;
}
3 Mi Piace
51

Purtroppo, non potrò usarlo su meta… :stuck_out_tongue:

1 Mi Piace
52

@satonotdead mi dispiace per questo! Ho iniziato a fare brainstorming qui su modi per migliorare il composer, che trovo anche utili. Personalmente, non sono convinto dal suggerimento del post originale di aggiungere un’opzione di evidenziazione accanto a citazione e modifica veloce, quando si seleziona il testo in un post che si sta leggendo. Ha più senso posizionare questa funzionalità nel composer, secondo me.

Ci sono anche suggerimenti generali qui su diversi modi in cui il testo può essere attualmente formattato utilizzando markdown, inclusi vari componenti tematici che sono stati creati nel corso degli anni.

Interessante. Quindi stai suggerendo che il testo evidenziato sarebbe visibile solo all’utente, o sarebbe visibile a tutti? Quindi alcune persone potrebbero vedere il testo evidenziato di tutti? Per me quest’ultima opzione sembra caotica e non molto utile. La prima non credo sia fattibile da implementare.

Discourse Shared Edits potrebbe usare qualcosa del genere, così quando più persone stanno modificando è chiaro chi ha contribuito a quale testo. Ma anche di valore alquanto limitato, secondo me, e potenzialmente caotico.

Fantastico! L’ho installato sul mio sito personale e funziona bene. Bel lavoro!

3 Mi Piace
53

Esatto, @tobiaseigen! Usiamo gli evidenziatori quando stiamo leggendo e vogliamo evidenziare rapidamente parti di testo.

Penso a questo come all’uso della Modifica Veloce dove posso (nella mini finestra di modifica) digitare i tag attorno a un certo testo che ho selezionato per modificarlo…

<mark>un certo testo</mark>

Pensi che funzionerebbe se facessi una copia del componente del tema Highlighter e cambiassi il codice in api-setup.js per inserire il pulsante dell’evidenziatore (o premere h) nel PluginOutlet

quote-button-after

Codice 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 = "Evidenzia Testo";
  I18n.translations[currentLocale].js.composer.this = "this";
  // I18n.translations[currentLocale].js.composer.highlight_button_text = "Evidenzia Testo";

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

  // aggiungi pulsante alla barra degli strumenti
  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" }
  );
});

O è un’impresa vana!?

54

Va bene. Capisco cosa stai cercando di fare.

Se riesci a realizzarlo in un componente tematico, allora procedi pure. Non sono un programmatore, quindi non so come potresti farlo.

2 Mi Piace
55

Entrambi inserisci e elimina

Entrambi <u>inserisci</u> e <del>elimina</del>

Ora devo anche integrare questi nei componenti del tema del pulsante Composer (solo perché, come dice @Lilly – “i gadget sono fantastici!”)

Oi! HTML Formatting Tags

56

Per me questo potrebbe essere una forma di segnalibro più accurato.

Mi chiedo se potresti estendere il sistema di segnalibri per ricordare le sezioni di testo evidenziate?

2 Mi Piace
57

Pensiero molto interessante…