Pulse Editor, el editor de Platzi, nos da de muchos componentes propios los cuales ya vienen con una clase por defecto. Esta clase normalmente PulseEditor-{algo} donde {algo} suele ser el nombre del componente en camelCase (PulseEditor-emojiBar por ejemplo) nos permite estilizarlo usando CSS normal.
Resulta que todos estos componentes nos permiten pasarle un nombre de clase personalizado usando el propio estándar className. De esta forma si queremos personalizar la clase del botón <bold/> solo habría que renderizando de esta forma:
<bold classname="<span" class="hljs-string">"myBoldButton" />
Esto va a cambiarle la clase solo a ese componente. Resulta que poder hacer esto también nos habilita a usar librerías de CSS in JS, por ejemplo styled-components, ya que este tipos de librerías pueden extender componentes si estos permiten personalizar el className.
Usando styled-components
Vamos a estilizar una versión simple del editor (sin muchos botones) usando styled-components. Para eso vamos a instalar a nuestro proyecto esta librería.
npm i react react-dom next pulse-editor styled-components
# o con yarn
yarn add react react-dom next pulse-editor styled-components
Este va a ser nuestro editor a estilizar:
import { Editor, ButtonBar, ButtonGroup, Field } from'pulse-editor'import { Bold, Italic, Underline } from'pulse-editor/buttons'exportdefault () =>
<Editor><ButtonBar><ButtonGroup><Bold><strong>Bstrong>Bold>
<Italic><em>Iem>Italic>
<Underline><ins>Uins>Underline>
ButtonGroup>
ButtonBar>
<Field />Editor>
Un editor muy simple que solo cuenta con un área de texto y 3 botones.
Aplicando estilos
Ahora vamos a lo interesante, vamos a estilizar nuestro campo de texto.
import styled from'styled-components'Primero agregamos un import a styled-components, el objeto que importamos (styled) nos permite crear componentes que rendericen etiquetas HTML con estilos. Por ejemplo si queremos crear un
const Wrapper = styled.div`
background-color: red;
max-width: 1000px;
`Como vemos es muy simple, lo genial es que también sirve como una función que recibe un componente.
const WrapperBlue = styled(Wrapper)`
background-color: blue;
`Así es posible usar unos estilos base y extenderlos o tomar un componente normal de React que reciba className y aplicarle estilos.
const StyledField = styled(Field)`
border: 1px solid #058ecd;
width: 100%;
`Luego podemos reemplazar nuestro <field/> por el nuevo <styledfield/> y… ¡Listo!
import { Editor, ButtonBar, ButtonGroup, Field } from'pulse-editor'import { Bold, Italic, Underline } from'pulse-editor/buttons'import styled from'styled-components'const StyledField = styled(Field)`
border: 1px solid #058ecd;
width: 100%;
`exportdefault () =>
<Editor><ButtonBar><ButtonGroup><Bold><strong>Bstrong>Bold>
<Italic><em>Iem>Italic>
<Underline><ins>Uins>Underline>
ButtonGroup>
ButtonBar>
<StyledField />Editor>
Si revisamos nuestro editor el componente <styledfield/> va a tener los estilos que le aplicamos usando styled-components. Vamos a terminar de crear componentes estilizados para todo nuestro editor.
// estilos del editorconst StyledEditor = styled(Editor)`
display: flex;
flex-wrap: wrap;
`// estilos de la barra de botonesconst StyledButtonBar = styled(ButtonBar)`
background-color: #058ecd;
border-radius: 3px 3px 0 0;
box-sizing: border-box;
color: #fff;
display: flex;
padding: 0 0.3em 0.5em;
width: 100%;
`// estilos de los grupos de botonesconst StyledButtonGroup = styled(ButtonGroup)`
border: 1px solid #7dc2e1;
border-radius: 5px;
display: flex;
margin: 0.5em 0.5em 0;
&:first-of-type { border-radius: 5px 0 0 5px; }
&:last-of-type { border-radius: 0 5px 5px 0; }
&:only-of-type { border-radius: 5px; }
`// estilos del campo de textoconst StyledField = styled(Field)`
border: 1px solid #058ecd;
box-sizing: border-box;
font-family: Arial;
font-size: 14px;
line-height: 1.5;
padding: 1em;
width: 100%;
box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.2);
min-height: calc(100vh - 61px);
resize: none;
&:focus { outline: none; }
`// estilos para botonesconst buttonStyles = `
background: none;
border: none;
border-right: 1px solid #7dc2e1;
box-sizing: border-box;
color: #fff;
cursor: pointer;
font-size: 12px;
min-width: 25px;
min-height: 25px;
text-align: center;
transition: all 0.2s;
padding: 0;
`// estilos del botón Boldconst StyledBold = styled(Bold)`
${buttonStyles}
`// estilos del botón Italicconst StyledItalic = styled(Italic)`
${buttonStyles}
`// estilos del botón Underlineconst StyledUnderline = styled(Underline)`
${buttonStyles}
`Entre lo destacable de los estilos de arriba es que se puede ver que styled-components nos permite anidar estilos como por ejemplo usar:
&:focus { outline: none; }
Lo anterior para aplicar la pseudo-clase focus a los estilos de un componente. Otra cosa a destacar es que para los botones creamos un template literal con los estilos generales y luego en cada botón usamos ${buttonStyles} para cargar esos estilos y no estar copiándolos, de esta forma podemos tener un CSS base en una constante y reusarlo donde lo necesitemos.
Si cambiamos nuestros componentes del editor por estos va a quedar de la siguiente forma:
exportdefault () =>
<StyledEditor><StyledButtonBar><StyledButtonGroup><StyledBold><strong>Bstrong>StyledBold>
<StyledItalic><em>Iem>StyledItalic>
<StyledUnderline><ins>Uins>StyledUnderline>
StyledButtonGroup>
StyledButtonBar>
<StyledField />StyledEditor>
Si ahora entramos a nuestro navegador corriendo esta aplicación vamos a ver el editor estilizado de la siguiente forma:
Conclusiones
Como vemos, desde implementar hasta estilizar Pulse Editor es muy simple y completamente personalizable para que podamos dejar nuestro editor a gusto y dar una experiencia personalizada a nuestros usuarios.
Pueden revisar el código de este ejemplo en el repositorio de Pulse Editor.
