Revamp editor toolbar and extend BBCode support

Author: chijure

src/App.test.tsx

@@ -17,7 +17,7 @@ describe('App', () => {
     const textarea = screen.getByRole('textbox') as HTMLTextAreaElement
     fireEvent.change(textarea, { target: { value: 'texto' } })
     textarea.setSelectionRange(0, 5)
-    await userEvent.click(screen.getByText('[b]'))
+    await userEvent.click(screen.getByRole('button', { name: 'B' }))
     expect(textarea.value.startsWith('[b]')).toBe(true)
     await userEvent.click(screen.getByRole('button', { name: /Limpiar/i }))
     expect(textarea.value).toBe('')

src/App.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { chips, languages, sample, type LanguageId } from './constants'
+import { languages, sample, toolbarButtons, type LanguageId } from './constants'
 import EditorPanel from './components/EditorPanel'
 import LanguageSwitch from './components/LanguageSwitch'
 import PreviewPanel from './components/PreviewPanel'
@@ -33,11 +33,18 @@ function App() {
     const templates: Record<TagKey, string> = {
       bold: `[b]${selected || 'texto'}[/b]`,
       italic: `[i]${selected || 'texto'}[/i]`,
+      underline: `[u]${selected || 'texto'}[/u]`,
+      strike: `[s]${selected || 'texto'}[/s]`,
       link: `[url=${selected ? 'https://example.com' : 'https://example.com'}]${selected || 'enlace'}[/url]`,
       image: `[img]https://placekitten.com/400/240[/img]`,
       quote: `[quote=${selected || 'Autor'}]${selected || 'Texto citado'}[/quote]`,
       code: `[code]const hello = "world";[/code]`,
       list: `[list][*]Item 1[*]Item 2[/list]`,
+      color: `[color=#00bcd4]${selected || 'texto'}[/color]`,
+      size: `[size=18]${selected || 'texto grande'}[/size]`,
+      center: `[center]${selected || 'texto centrado'}[/center]`,
+      left: `[left]${selected || 'texto alineado a la izquierda'}[/left]`,
+      right: `[right]${selected || 'texto alineado a la derecha'}[/right]`,
     }
 
     const snippet = templates[tag] || ''
@@ -104,7 +111,7 @@ function App() {
         <EditorPanel
           title={t('editor')}
           subtitle={t('write_bbcode')}
-          chips={chips}
+          buttons={toolbarButtons}
           textareaRef={textareaRef}
           value={input}
           placeholder={t('placeholder')}

src/components/EditorPanel.tsx

@@ -1,29 +1,29 @@
 import type { ChangeEvent, RefObject } from 'react'
-import type { ChipConfig } from '../constants'
+import type { ButtonConfig } from '../constants'
 import type { TagKey } from '../utils/bbcode'
-import TagChip from './TagChip'
+import ToolbarButton from './ToolbarButton'
 
 type Props = {
   title: string
   subtitle: string
-  chips: ChipConfig[]
+  buttons: ButtonConfig[]
   textareaRef: RefObject<HTMLTextAreaElement | null>
   value: string
   placeholder: string
   onChange: (value: string) => void
   onInsert: (tag: TagKey) => void
 }
 
-const EditorPanel = ({ title, subtitle, chips, textareaRef, value, placeholder, onChange, onInsert }: Props) => (
+const EditorPanel = ({ title, subtitle, buttons, textareaRef, value, placeholder, onChange, onInsert }: Props) => (
   <section className="panel bg-slate-900/60 border border-white/5 rounded-2xl shadow-xl p-4 space-y-3">
     <div className="flex items-center justify-between flex-wrap gap-3">
       <div>
         <p className="text-xs uppercase tracking-[0.2em] text-cyan-200">{title}</p>
         <h2 className="text-xl font-semibold">{subtitle}</h2>
       </div>
-      <div className="flex gap-2 flex-wrap">
-        {chips.map(({ key, label }) => (
-          <TagChip key={key} label={label} onClick={() => onInsert(key)} />
+      <div className="flex gap-2 flex-wrap border border-white/10 bg-white/5 rounded-lg px-2 py-1">
+        {buttons.map(({ key, label, title: hint }) => (
+          <ToolbarButton key={key} label={label} title={hint} onClick={() => onInsert(key)} />
         ))}
       </div>
     </div>

src/components/TagChip.tsx

@@ -0,0 +1,18 @@
+type Props = {
+  label: string
+  title?: string
+  onClick: () => void
+}
+
+const ToolbarButton = ({ label, title, onClick }: Props) => (
+  <button
+    type="button"
+    title={title}
+    onClick={onClick}
+    className="toolbar-btn px-2.5 py-1.5 rounded-md border border-white/10 bg-white/5 text-sm font-semibold transition hover:-translate-y-0.5 hover:border-white/20 hover:bg-white/10"
+  >
+    {label}
+  </button>
+)
+
+export default ToolbarButton

src/components/ToolbarButton.tsx

@@ -1,7 +1,7 @@
 import type { TagKey } from './utils/bbcode'
 
 export type LanguageId = 'es' | 'en'
-export type ChipConfig = { key: TagKey; label: string }
+export type ButtonConfig = { key: TagKey; label: string; title?: string }
 
 export const sample = `[b]BBCode Preview[/b]
 Escribe BBCode y mira el HTML renderizado al instante.
@@ -13,14 +13,21 @@ Escribe BBCode y mira el HTML renderizado al instante.
 
 [code]const greet = () => console.log("hola");[/code]`
 
-export const chips: ChipConfig[] = [
-  { key: 'bold', label: '[b]' },
-  { key: 'italic', label: '[i]' },
-  { key: 'link', label: '[url]' },
-  { key: 'image', label: '[img]' },
-  { key: 'quote', label: '[quote]' },
-  { key: 'code', label: '[code]' },
-  { key: 'list', label: '[list]' },
+export const toolbarButtons: ButtonConfig[] = [
+  { key: 'bold', label: 'B', title: 'Negrita' },
+  { key: 'italic', label: 'I', title: 'Cursiva' },
+  { key: 'underline', label: 'U', title: 'Subrayado' },
+  { key: 'strike', label: 'S', title: 'Tachado' },
+  { key: 'list', label: '• List', title: 'Lista' },
+  { key: 'left', label: 'L', title: 'Alinear izquierda' },
+  { key: 'center', label: 'C', title: 'Centrar' },
+  { key: 'right', label: 'R', title: 'Alinear derecha' },
+  { key: 'quote', label: '❝', title: 'Cita' },
+  { key: 'code', label: '</>', title: 'Código' },
+  { key: 'link', label: 'Link', title: 'Enlace' },
+  { key: 'image', label: 'Img', title: 'Imagen' },
+  { key: 'color', label: 'Color', title: 'Color' },
+  { key: 'size', label: 'Size', title: 'Tamaño' },
 ]
 
 export const languages: Array<{ id: LanguageId; label: string }> = [

src/constants.ts

@@ -44,6 +44,21 @@ body {
   border-color: rgba(0, 0, 0, 0.06);
 }
 
+.toolbar-btn {
+  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease, color 0.15s ease;
+}
+
+.theme-light .toolbar-btn {
+  border-color: rgba(0, 0, 0, 0.08);
+  background: #f7f9fc;
+  color: #0b1223;
+}
+
+.theme-light .toolbar-btn:hover {
+  border-color: rgba(0, 0, 0, 0.16);
+  background: #eef2f7;
+}
+
 .theme-light .chip {
   border-color: rgba(0, 0, 0, 0.08);
   background: #f7f9fc;

src/index.css

@@ -1,4 +1,18 @@
-export type TagKey = 'bold' | 'italic' | 'link' | 'image' | 'quote' | 'code' | 'list'
+export type TagKey =
+  | 'bold'
+  | 'italic'
+  | 'underline'
+  | 'strike'
+  | 'link'
+  | 'image'
+  | 'quote'
+  | 'code'
+  | 'list'
+  | 'color'
+  | 'size'
+  | 'center'
+  | 'left'
+  | 'right'
 
 const escapeHtml = (str: string) =>
   str