import { RichTextEditor } from '@mantine/tiptap';
import { useEditor } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import '@mantine/tiptap/styles.css';

export default function EditorTest() {
  const editor = useEditor({
    extensions: [StarterKit],
    content: '<p>Prueba aquí. Presiona ENTER o ESPACIO.</p>',
  });

  return (
    <div style={{ padding: 40 }}>
      {editor && (
        <RichTextEditor editor={editor}>
          <RichTextEditor.Toolbar sticky stickyOffset={0}>
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.Bold />
              <RichTextEditor.Italic />
            </RichTextEditor.ControlsGroup>
          </RichTextEditor.Toolbar>
          <RichTextEditor.Content />
        </RichTextEditor>
      )}
    </div>
  );
}
