+ {/* Formatos de texto */}
+
+
+
+
+
+ {/* Alineación */}
+
+
+
+
+
+ {/* Tamaño de fuente */}
+
+
+
+ {/* Familia de fuente */}
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Toolbar;
diff --git a/frontend/src/components/LexicalEditor/index.tsx b/frontend/src/components/LexicalEditor/index.tsx
new file mode 100644
index 0000000..6a53498
--- /dev/null
+++ b/frontend/src/components/LexicalEditor/index.tsx
@@ -0,0 +1,84 @@
+import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin'
+import { LexicalComposer } from '@lexical/react/LexicalComposer'
+import { ContentEditable } from '@lexical/react/LexicalContentEditable'
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary'
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin'
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'
+
+import ToolbarPlugin from './plugins/ToolbarPlugin'
+import OnChangePlugin from './plugins/OnChangePlugin'
+import { EditorState } from 'lexical'
+
+const placeholder = 'Describe tu Viaje...'
+
+const theme = {
+ code: 'editor-code',
+ heading: {
+ h1: 'editor-heading-h1',
+ h2: 'editor-heading-h2',
+ h3: 'editor-heading-h3',
+ h4: 'editor-heading-h4',
+ h5: 'editor-heading-h5',
+ },
+ image: 'editor-image',
+ link: 'editor-link',
+ list: {
+ listitem: 'editor-listitem',
+ nested: {
+ listitem: 'editor-nested-listitem',
+ },
+ ol: 'editor-list-ol',
+ ul: 'editor-list-ul',
+ },
+ ltr: 'ltr',
+ paragraph: 'editor-paragraph',
+ placeholder: 'editor-placeholder',
+ quote: 'editor-quote',
+ rtl: 'rtl',
+ text: {
+ bold: 'editor-text-bold',
+ code: 'editor-text-code',
+ hashtag: 'editor-text-hashtag',
+ italic: 'editor-text-italic',
+ overflowed: 'editor-text-overflowed',
+ strikethrough: 'editor-text-strikethrough',
+ underline: 'editor-text-underline',
+ underlineStrikethrough: 'editor-text-underlineStrikethrough',
+ },
+}
+
+const editorConfig = {
+ namespace: 'ohmytrip description',
+ nodes: [],
+ onError(error: Error) {
+ throw error
+ },
+ theme: theme,
+}
+
+export default function LexicalEditor({ onChange }: { onChange: (editorState: EditorState) => void }) {
+ return (
+