Resalte rápido

[denvergeeks]

Sí @satonotdead Creo que este tema se desvió un poco… Creo que este tema podría podarse para referirse a agregar un botón de resaltado al popup flotante de edición/cita

Así que hice un componente temático Highlighter Composer Button para el propósito muy específico y limitado de hacer clic en un botón en la barra de herramientas del compositor para insertar <mark>esto</mark>, y también agregué un atajo de teclado Ctrl-H por conveniencia.

Hay otros 2 componentes de botones de compositor diferentes que te permiten insertar código sobre la marcha para agregar color de fondo y color de texto. Estos otros 2 no fueron tan rápidos y convenientes para mí por 2 razones:

1. Requieren escribir manualmente los colores dentro del código insertado para que funcionen.

2. No siempre funcionan tan bien con otros elementos que uso en mis publicaciones, como las cajas de contenido desplazables:

[Jagster (Jakke Lehtonen)]

¿Quieres abrir un poco cómo hiciste esas cajas desplazables

[denvergeeks]

Claro @Jagster es este componente de tema…

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

Estilo las cajas de esta manera…

/* Sombra de la caja de contenido desplazable */

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

Desafortunadamente, no podré usarlo en meta…

[tobiaseigen]

@satonotdead ¡lo siento! He empezado a reflexionar aquí sobre formas de mejorar el compositor, lo cual también me resulta útil. Personalmente, no me convence la sugerencia de la publicación original de añadir una opción de resaltado junto a la cita y la edición rápida, al seleccionar texto en una publicación que estás leyendo. Tiene más sentido colocar esta función en el compositor, en mi opinión.

También hay sugerencias generales aquí sobre las diferentes formas en que el texto puede ser formateado actualmente usando markdown, incluyendo varios componentes de tema que se han creado a lo largo de los años.

@pfaffman

Varias personas están trabajando, o pensando, en un documento en particular. El documento está escrito y la discusión es sobre él. Es posible que solo quieras resaltar cosas en él, tal como lo habrías hecho hace 20 años en una pila de papel encuadernado llamada “libro”. Muchas veces querrías resaltar una sección y citarla, pero tal vez solo quieras iluminar cosas en las que pretendes pensar más tarde.

Interesante. Entonces, ¿estás sugiriendo que el texto resaltado solo sería visible para el usuario, o sería visible para todos? ¿Entonces unas pocas personas podrían ver el texto resaltado de todos? Para mí, esto último se siente caótico y no tan útil. Lo primero no creo que sea factible de implementar.

Discourse Shared Edits podría usar algo como esto, para que cuando varias personas estén editando sea claro quién contribuyó con qué texto. Pero también de valor algo limitado, creo, y potencialmente caótico.

@denvergeeks

Así que hice un componente de tema Botón de Compositor de Resaltado para el propósito muy específico y limitado de hacer clic en un botón en la barra de herramientas del compositor para insertar <mark>esto</mark>, y también agregué un atajo de teclado Ctrl-H para mayor comodidad.

¡Impresionante! He instalado esto en mi sitio personal y funciona bien. ¡Buen trabajo!

[denvergeeks]

@tobiaseigen

al seleccionar texto en una publicación que estás leyendo.

¡Exacto, @tobiaseigen! Usamos rotuladores cuando estamos leyendo y queremos resaltar rápidamente partes del texto.

Pienso en esto como si usara la Edición Rápida donde puedo (en la ventana de edición mini) escribir las etiquetas alrededor de \u003cmark\u003ealgún texto\u003c/mark\u003e que he seleccionado para editar…

\u003cmark\u003ealgún texto\u003c/mark\u003e

¿Crees que funcionaría si hago una copia del Componente del Tema Resaltador y cambio el código en api-setup.js para colocar el botón de resaltado (o presionar h) en el 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" }
  );
});

¿O es una misión imposible!?

[tobiaseigen]

Entendido. Comprendo lo que intentas hacer.

Si puedes hacerlo en un componente temático, adelante. No soy programador, así que no sé cómo lo harías.

[denvergeeks]

Ambos insertar y eliminar

Ambos <u>insertar</u> y <del>eliminar</del>

Ahora también debo integrar esto en los componentes del tema del botón de Composer (solo porque, como dice @Lilly: “¡los gadgets son geniales!”)

¡Oye! HTML Formatting Tags

[merefield (Robert)]

Para mí, esto podría ser una forma de marcador más preciso.

Me pregunto si podrías ampliar el sistema de marcadores para recordar secciones resaltadas de texto.

[denvergeeks]

Pensamiento muy interesante…