mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-24 13:54:57 +00:00
johndoe6345789
89f83a7476
- Email components (Phase 2 COMPLETE): * Fixed 18 broken imports: @metabuilder/fakemui/hooks → ../../../src/utils/useAccessible * Renamed email-wip/ → email/ (production-ready) * Enabled exports in react/components/index.ts * All 22 email components now production-ready (1244 lines) - Cleanup: * Removed wip/ directory (duplicate of src/utils/accessibility) * Preserved 15 Python/PyQt6 implementation files (full implementations, not stubs) * Moved 7 markdown files to fakemui/docs/ (better organization) - Documentation: * Updated CLAUDE.md: Phase 2 email complete, added deletion safety gotcha * Created plan: txt/FAKEMUI_REORGANIZATION_PLAN_2026-02-01.txt Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
// fakemui/react/components/email/inputs/BodyEditor.tsx
|
|
import React, { forwardRef } from 'react'
|
|
import { Box } from '../../layout/Box'
|
|
import { useAccessible } from '../../../../src/utils/useAccessible'
|
|
|
|
export interface BodyEditorProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
mode?: 'plain' | 'html'
|
|
onModeChange?: (mode: 'plain' | 'html') => void
|
|
testId?: string
|
|
}
|
|
|
|
export const BodyEditor = forwardRef<HTMLTextAreaElement, BodyEditorProps>(
|
|
({ mode = 'plain', onModeChange, testId: customTestId, ...props }, ref) => {
|
|
const accessible = useAccessible({
|
|
feature: 'email',
|
|
component: 'body-editor',
|
|
identifier: customTestId || 'body'
|
|
})
|
|
|
|
return (
|
|
<Box className="body-editor">
|
|
<div className="body-editor-toolbar">
|
|
<button
|
|
type="button"
|
|
className={`mode-btn ${mode === 'plain' ? 'mode-btn--active' : ''}`}
|
|
onClick={() => onModeChange?.('plain')}
|
|
>
|
|
Plain Text
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={`mode-btn ${mode === 'html' ? 'mode-btn--active' : ''}`}
|
|
onClick={() => onModeChange?.('html')}
|
|
>
|
|
HTML
|
|
</button>
|
|
</div>
|
|
<textarea
|
|
ref={ref}
|
|
className="body-editor-textarea"
|
|
placeholder="Write your message here..."
|
|
{...accessible}
|
|
{...props}
|
|
/>
|
|
</Box>
|
|
)
|
|
}
|
|
)
|
|
|
|
BodyEditor.displayName = 'BodyEditor'
|