Surlignage rapide

[denvergeeks]

Ouais @satonotdead Je pense que ce sujet a un peu dévié… Je pense que ce sujet pourrait être élagué pour se référer à l’ajout d’un bouton de surlignage dans la popup flottante d’édition/citation

J’ai donc créé un composant de thème Highlighter Composer Button dans le but très spécifique et limité de cliquer sur un bouton dans la barre d’outils du compositeur pour insérer \u003cmark\u003ethis\u003c/mark\u003e, et j’ai également ajouté un raccourci clavier \u003ckbd\u003eCtrl-H\u003c/kbd\u003e pour plus de commodité.

Il existe 2 autres composants de bouton de compositeur différents qui vous permettent tous deux d’insérer du code à la volée pour ajouter des couleurs d’arrière-plan et de texte. Ces 2 autres n’étaient pas aussi rapides et pratiques pour moi pour 2 raisons :

1. Ils nécessitent de taper manuellement vos couleurs dans le code inséré pour fonctionner.

2. Ils ne s’intègrent pas toujours aussi bien avec d’autres éléments que j’utilise dans mes publications, tels que les boîtes de contenu défilantes :

[Jagster (Jakke Lehtonen)]

Voulez-vous ouvrir un peu comment avez-vous fait ces boîtes déroulantes

[denvergeeks]

Bien sûr @Jagster, c’est ce composant de thème…

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

Je style les boîtes comme ceci…

/* Ombre de la boîte de contenu déroulante */

.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)]

Malheureusement, je ne pourrai pas l’utiliser sur meta…

[tobiaseigen]

@satonotdead désolé pour ça ! J’ai commencé à réfléchir ici à des moyens d’améliorer l’éditeur, ce que je trouve également utile. Personnellement, je ne suis pas convaincu par la suggestion de l’article original d’ajouter une option de surlignage à côté de la citation et de l’édition rapide, lors de la sélection de texte dans un article que vous lisez. Il est plus logique de placer cette fonctionnalité dans l’éditeur, à mon avis.

Il y a aussi des suggestions générales ici sur les différentes façons dont le texte peut actuellement être formaté à l’aide de markdown, y compris divers composants de thème qui ont été créés au fil des ans.

@pfaffman

Plusieurs personnes travaillent sur un document particulier, ou y pensent. Le document est écrit et la discussion porte sur lui. Vous pourriez simplement vouloir mettre en évidence des éléments dans ce document, tout comme vous l’auriez fait il y a 20 ans dans un tas de papier relié appelé un « livre ». Souvent, vous voudriez mettre en évidence une section et la citer, mais vous pourriez simplement vouloir mettre en évidence des éléments sur lesquels vous avez l’intention de réfléchir davantage plus tard.

Intéressant. Suggérez-vous donc que le texte mis en surbrillance ne serait visible que par l’utilisateur, ou serait-il visible par tout le monde ? Ainsi, quelques personnes pourraient voir le texte mis en surbrillance de tout le monde ? Pour moi, ce dernier semble chaotique et pas très utile. Le premier, je ne pense pas qu’il soit réalisable à mettre en œuvre.

Discourse Shared Edits pourrait utiliser quelque chose comme ça, donc lorsque plusieurs personnes éditent, il est clair qui a contribué quel texte. Mais aussi d’une valeur quelque peu limitée, je pense, et potentiellement chaotique.

@denvergeeks

J’ai donc créé un composant de thème Highlighter Composer Button dans le but très spécifique et limité de cliquer sur un bouton dans la barre d’outils de l’éditeur pour insérer <mark>ceci</mark>, et j’ai également ajouté un raccourci clavier Ctrl-H pour plus de commodité.

Génial ! Je l’ai installé sur mon site personnel et cela fonctionne bien. Beau travail !

[denvergeeks]

@tobiaseigen

lors de la sélection de texte dans un message que vous lisez.

Exactement, @tobiaseigen ! Nous utilisons des surligneurs lorsque nous lisons et que nous voulons rapidement mettre en évidence des portions de texte.

Je pense à cela comme à l’utilisation de l’édition rapide où je peux (dans la mini-fenêtre d’édition) taper les balises autour de \u003cmark\u003e du texte sélectionné à modifier…\u003c/mark\u003e

\u003cmark\u003e du texte sélectionné à modifier...\u003c/mark\u003e

Pensez-vous que cela fonctionnerait si je faisais une copie du composant de thème Surligneur et que je modifiais le code dans api-setup.js pour placer le bouton Surligneur (ou appuyer sur h) dans le PluginOutlet

quote-button-after

Code 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 = "Surligner le texte";
  I18n.translations[currentLocale].js.composer.this = "ceci";
  // I18n.translations[currentLocale].js.composer.highlight_button_text = "Surligner le texte";

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

  // ajouter le bouton à la barre d'outils
  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]', 'ceci')
      perform: (e) => e.applySurround("<mark>", "</mark>", "ceci"),
    });
  });

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

Ou est-ce une entreprise vouée à l’échec !?

[tobiaseigen]

D’accord. Je comprends ce que vous cherchez à faire.

Si vous pouvez le faire dans un composant de thème, alors allez-y. Je ne suis pas programmeur, donc je ne sais pas comment vous pourriez le faire.

[denvergeeks]

Les deux insérer et supprimer

Les deux <ins>insérer</ins> et <del>supprimer</del>

Maintenant, je dois aussi intégrer cela dans les composants thématiques de boutons Composer (juste parce que, comme le dit @Lilly – « les gadgets sont cool ! »

Salut ! HTML Formatting Tags

[merefield (Robert)]

Pour moi, cela pourrait être une forme de marque-page plus précis.

Je me demande si vous pourriez étendre le système de marque-pages pour mémoriser les sections de texte mises en surbrillance ?

[denvergeeks]

Pensée très intéressante…