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
.
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.
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:
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.