Botón Compositor de Resaltado

:information_source: Resumen Un botón resaltador de texto para la barra de herramientas del compositor de Discourse
:eyeglasses: Vista previa Demostración en video
:hammer_and_wrench: Repositorio GitHub - denvergeeks/discourse-highlight-wrap-theme-component: A Text Highlighter Button for the Discourse Composer Toolbar
:question: Guía de instalación Cómo instalar un tema o componente temático
:open_book: ¿Nuevo en los temas de Discourse? Guía para principiantes sobre el uso de temas de Discourse

Instala este componente temático

El botón parece un bolígrafo resaltador… discourse-highlighter-button Es 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>.

:information_source: Ctrl-H es el atajo de teclado que puedes usar en lugar de hacer clic en el botón.

En la configuración puedes anular tanto el color de fondo del resaltador como el color del texto en las partes resaltadas.

¡Muchas gracias a @pfaffman y @merefield y @Lilly y @JammyDodger y @Canapin por su ayuda con esto!

15 Me gusta

Eso es increíble. Bien hecho :clap:t2: :star_struck:

3 Me gusta

esto es muy bueno.

¿dónde se define .d-wrap?
en el mío se muestra de este color con el tema predeterminado… me gustaría que tuviera el color resaltado como en tu video, gracias

image

Parece que es la configuración de la variable de color --highlight-medium en la paleta que está utilizando para ese tema

Así se ve una de mis paletas:

Este componente está utilizando el tono medio del color de resaltado. Puede ver el exacto en su guía de estilo si la tiene habilitada en admin-settings-(styleguide enabled or styleguide admin only) la guía de estilo de los colores del tema está en /styleguide/atoms/colors

2 Me gusta

En realidad, podría valer la pena enviar una PR o una sugerencia para anular el color del resaltado. :slight_smile:

2 Me gusta

Sí, estaba pensando, es mejor tener una configuración para ello.

2 Me gusta

Añadiendo una configuración ahora… vuelvo enseguida

1 me gusta

¿Sería más apropiado usar <mark>mark</mark>? Creo que eso usa el color ‘resaltado’ en la paleta de colores.

<mark>mark</mark>

3 Me gusta

OK, puse una configuración para que por defecto sea #ff8.

1 me gusta

Jaja, estaba a punto de enviarte una PR :slight_smile:

Happy Super Hero Girls GIF by DC

¡Genial, acabo de descargarla, funciona de maravilla! :grinning:

2 Me gusta

Hola @denvergeeks :slight_smile:

Así es como tu estilo difiere (con la configuración predeterminada) de \u003cmark\u003e (que utiliza una variable de colores de Discourse, lo que lo hace legible independientemente del esquema de color que elijas):

En un tema oscuro:

3 Me gusta

Perfecto @Canapin, ¡lo incluiré!

O, si alguien quiere QPR (Pregunta de Revisión de Calidad) eso, házmelo saber ya que puede que no lo haga hoy.

OK, esto ahora usa la sugerencia de @Canapin de usar la etiqueta mark integrada y los valores predeterminados de CSS correspondientes.

Además, ahora proporciona configuraciones para anular tanto el color de fondo (resaltado) como el color del texto en las partes resaltadas. Gracias a @Lilly por ese CSS condicional.

1 me gusta

Estoy intentando crear un selector de color json pero no funciona. Solo obtengo una ventana emergente en blanco con un botón de guardar. :woman_facepalming:t2:
Quizás vea si uno de javascript es posible de alguna manera. La paleta de colores y la interfaz de la insignia tienen funciones de selector de color js, pero tal vez solo funcionen con un plugin.

1 me gusta

Para mí, esas configuraciones no son anulaciones. Deben completarse, de lo contrario, no hace nada.

Y… estoy en el tema predeterminado y, debido a la falta de café por la mañana, estoy en modo lento; no comprobé si eso proviene del tema en sí.

Editar: no, el tema o el esquema de color no juegan ningún papel. Entonces, ¿seguirá el esquema de color y será una anulación, o es una configuración obligatoria?

Intenta actualizar el componente y actualiza la página. No puedo reproducir el error.

¿Está insertando la etiqueta \u003cmark\u003e\u003c/mark\u003e?

Lo actualicé primero antes de intentarlo. Y no, usa wrap. ¿Así que estoy un poco atrasado?

La configuración JSON del selector de color (en un tema/componente) no funciona en Discourse, de hecho.
Creo que una buena práctica sería usar variables de color de Discourse en general en lugar de elegir colores arbitrarios en un tema o componente que no se mezclarán bien dependiendo de los otros temas y colores que los usuarios hayan elegido.

Un usuario creó un selector de color para el compositor hace algún tiempo, pero no estoy seguro de si el código fue lanzado:

2 Me gusta