¿Cómo cambiar el tamaño de fuente de los puntos de una lista desordenada en draftjs?
Tengo un editor de texto enriquecido construido usando draftjs. Implementé funciones para cambiar el tamaño, la fuente y el color del texto en el editor. También implementé la funcionalidad de agregar elementos de lista no ordenada y ordenada.
El problema es que cuando agrego una lista no ordenada u ordenada a un bloque de texto, el tamaño del punto siempre está fijo y no corresponde al tamaño del texto en ese bloque.
Por ejemplo, el tamaño del punto siempre es de 10px, incluso si el texto tiene un tamaño de fuente de 20px, 40px o 10px. ¿Hay alguna manera de hacer que el tamaño del punto sea el mismo que el tamaño del texto en ese bloque?
Los diapositivas de Google exhiben el comportamiento correcto, como el tamaño de la fuente de la viñeta cambia según el tamaño del texto en ese bloque.
Entonces, ¿alguien puede ayudarme a encontrar una solución para este problema donde puedas cambiar el estilo del punto según el estilo del texto en ese bloque?
El problema se explica en la imagen a continuación:
davy.ai
¿Cómo hacer que el tamaño de fuente de las viñetas corresponda al texto en un editor de texto enriquecido utilizando DraftJS?
Si tiene un editor de texto enriquecido construido utilizando DraftJS e implementó las funciones para cambiar el tamaño de fuente, la fuente y el color del texto, pero notó que el tamaño de fuente de las viñetas en las listas no ordenadas o ordenadas no cambia de acuerdo con el tamaño de texto, no se preocupe ya que hay una solución para este problema.
Para hacer que el tamaño de fuente de las viñetas en listas no ordenadas o ordenadas corresponda al tamaño de texto en DraftJS, puede modificar los estilos CSS asociados con los elementos
ULyOLen el componente del editor. Aquí están los pasos a seguir:Defina los estilos CSS para el nombre de clase agregando el siguiente código:
css
/* Ajuste del estilo del elemento de lista no ordenada */
.${NOMBRE_CLASE} ul {
padding-left: 30px;
list-style-type: disc;
font-size: inherit;
}
/* Ajuste del estilo del elemento de lista ordenada */
.${NOMBRE_CLASE} ol {
padding-left: 30px;
list-style-type: decimal;
font-size: inherit;
}
En este ejemplo de código,
NOMBRE_CLASEes el nombre de la clase que agregó al contenedor principal del componente del editor.Esta solución ajusta los estilos de los elementos
ULyOLen el editor, estableciendo su tamaño de fuente como “heredado” de su elemento padre. Esto asegura que el tamaño de fuente de las viñetas en las listas no ordenadas o ordenadas sea el mismo que el tamaño de fuente del texto en el bloque.Tenga en cuenta que puede haber otros factores que afecten el estilo de las listas no ordenadas u ordenadas, por lo que es posible que deba ajustar los estilos CSS en consecuencia. Pero, esta solución debería darle un buen comienzo.