react-vite-themes/dist/pages/Documentation/RichTextEditorDocumentation.js

A test/experimental React theme system created for learning purposes. Features atomic design components, SCSS variables, and dark/light theme support. Not intended for production use.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState } from 'react';
import { RichTextEditor } from '../../components/atoms/RichTextEditor';
import { Card } from '../../components/atoms/Card';
import { CodeBlock } from '../../components/atoms/CodeBlock';
import { Typography } from '../../components/atoms/Typography';
import { Button } from '../../components/atoms/Button';
export const RichTextEditorDocumentation = () => {
    const [basicValue, setBasicValue] = useState('');
    const [controlledValue, setControlledValue] = useState('<p>This is <strong>controlled</strong> content with <em>formatting</em>.</p>');
    const [customFormatsValue, setCustomFormatsValue] = useState('');
    const [bottomToolbarValue, setBottomToolbarValue] = useState('');
    return (_jsx("div", { className: "bg-background text-text-primary min-h-screen p-8", children: _jsxs("div", { className: "max-w-6xl mx-auto", children: [_jsxs("div", { className: "mb-12", children: [_jsx(Typography, { variant: "h1", size: "xl", weight: "bold", className: "mb-4", children: "Rich Text Editor Component" }), _jsx(Typography, { variant: "p", size: "lg", className: "text-text-secondary max-w-4xl", children: "A powerful rich text editor component with basic formatting options including bold, italic, underline, bullet points, numbered lists, and indentation controls. Perfect for forms that require rich text input." })] }), _jsx(Card, { variant: "neutral", style: "elevated", className: "mb-12 p-6", children: _jsxs(Card.Body, { children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Import" }), _jsx(CodeBlock, { code: "import { RichTextEditor } from '../../components/atoms/RichTextEditor';", language: "typescript" })] }) }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Basic Usage" }), _jsx(Card, { variant: "neutral", style: "elevated", className: "mb-6 p-6", children: _jsxs(Card.Body, { children: [_jsx("div", { className: "mb-4", children: _jsx(RichTextEditor, { placeholder: "Start typing to see the formatting options...", value: basicValue, onChange: setBasicValue, name: 'basic-editor' }) }), _jsx(CodeBlock, { code: `<RichTextEditor
  placeholder="Start typing to see the formatting options..."
  value={basicValue}
  onChange={setBasicValue}
/>`, language: "tsx" })] }) })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Sizes" }), _jsx(Card, { variant: "neutral", style: "elevated", className: "mb-6 p-6", children: _jsxs(Card.Body, { children: [_jsxs("div", { className: "space-y-4 mb-4", children: [_jsxs("div", { children: [_jsx(Typography, { variant: "p", size: "sm", className: "mb-2", children: "Small:" }), _jsx(RichTextEditor, { size: "sm", placeholder: "Small editor" })] }), _jsxs("div", { children: [_jsx(Typography, { variant: "p", size: "sm", className: "mb-2", children: "Medium (default):" }), _jsx(RichTextEditor, { size: "md", placeholder: "Medium editor" })] }), _jsxs("div", { children: [_jsx(Typography, { variant: "p", size: "sm", className: "mb-2", children: "Large:" }), _jsx(RichTextEditor, { size: "lg", placeholder: "Large editor" })] })] }), _jsx(CodeBlock, { code: `<RichTextEditor size="sm" placeholder="Small editor" />
<RichTextEditor size="md" placeholder="Medium editor" />
<RichTextEditor size="lg" placeholder="Large editor" />`, language: "tsx" })] }) })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Controlled Component" }), _jsx(Card, { variant: "neutral", style: "elevated", className: "mb-6 p-6", children: _jsxs(Card.Body, { children: [_jsx("div", { className: "mb-4", children: _jsx(RichTextEditor, { value: controlledValue, onChange: setControlledValue, placeholder: "This content is controlled externally" }) }), _jsxs("div", { className: "mb-4", children: [_jsx(Button, { colorScheme: "outline", size: "sm", onClick: () => setControlledValue('<p>New <strong>controlled</strong> content!</p>'), className: "mr-2", children: "Set New Content" }), _jsx(Button, { colorScheme: "outline", size: "sm", onClick: () => setControlledValue(''), children: "Clear Content" })] }), _jsx(CodeBlock, { code: `const [value, setValue] = useState('<p>Initial <strong>HTML</strong> content</p>');

<RichTextEditor
  value={value}
  onChange={setValue}
  placeholder="This content is controlled externally"
/>`, language: "tsx" })] }) })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Custom Format Options" }), _jsx(Card, { variant: "neutral", style: "elevated", className: "mb-6 p-6", children: _jsxs(Card.Body, { children: [_jsx("div", { className: "mb-4", children: _jsx(RichTextEditor, { value: customFormatsValue, onChange: setCustomFormatsValue, placeholder: "Only bold and italic formatting available", allowedFormats: ['bold', 'italic'] }) }), _jsx(CodeBlock, { code: `<RichTextEditor
  allowedFormats={['bold', 'italic']}
  placeholder="Only bold and italic formatting available"
/>`, language: "tsx" })] }) })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Toolbar Position" }), _jsx(Card, { variant: "neutral", style: "elevated", className: "mb-6 p-6", children: _jsxs(Card.Body, { children: [_jsx("div", { className: "mb-4", children: _jsx(RichTextEditor, { value: bottomToolbarValue, onChange: setBottomToolbarValue, placeholder: "Toolbar at the bottom", toolbarPosition: "bottom" }) }), _jsx(CodeBlock, { code: `<RichTextEditor
  toolbarPosition="bottom"
  placeholder="Toolbar at the bottom"
/>`, language: "tsx" })] }) })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Without Toolbar" }), _jsx(Card, { variant: "neutral", style: "elevated", className: "mb-6 p-6", children: _jsxs(Card.Body, { children: [_jsx("div", { className: "mb-4", children: _jsx(RichTextEditor, { placeholder: "No formatting toolbar - just a simple textarea", showToolbar: false, rows: 3 }) }), _jsx(CodeBlock, { code: `<RichTextEditor
  showToolbar={false}
  placeholder="No formatting toolbar - just a simple textarea"
  rows={3}
/>`, language: "tsx" })] }) })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "States" }), _jsx(Card, { variant: "neutral", style: "elevated", className: "mb-6 p-6", children: _jsxs(Card.Body, { children: [_jsxs("div", { className: "space-y-4 mb-4", children: [_jsxs("div", { children: [_jsx(Typography, { variant: "p", size: "sm", className: "mb-2", children: "Disabled:" }), _jsx(RichTextEditor, { placeholder: "This editor is disabled", disabled: true, value: "<p>Disabled content</p>" })] }), _jsxs("div", { children: [_jsx(Typography, { variant: "p", size: "sm", className: "mb-2", children: "Read Only:" }), _jsx(RichTextEditor, { placeholder: "This editor is read-only", readOnly: true, value: "<p>Read-only content</p>" })] }), _jsxs("div", { children: [_jsx(Typography, { variant: "p", size: "sm", className: "mb-2", children: "Invalid:" }), _jsx(RichTextEditor, { placeholder: "This editor has an error", isInvalid: true, errorMessage: "This field is required" })] })] }), _jsx(CodeBlock, { code: `<RichTextEditor disabled={true} value="<p>Disabled content</p>" />
<RichTextEditor readOnly={true} value="<p>Read-only content</p>" />
<RichTextEditor 
  isInvalid={true} 
  errorMessage="This field is required" 
/>`, language: "tsx" })] }) })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Custom Height" }), _jsx(Card, { variant: "neutral", style: "elevated", className: "mb-6 p-6", children: _jsxs(Card.Body, { children: [_jsx("div", { className: "mb-4", children: _jsx(RichTextEditor, { placeholder: "Custom height editor", minHeight: "200px", maxHeight: "400px", rows: 8 }) }), _jsx(CodeBlock, { code: `<RichTextEditor
  placeholder="Custom height editor"
  minHeight="200px"
  maxHeight="400px"
  rows={8}
/>`, language: "tsx" })] }) })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Props Reference" }), _jsx(Card, { variant: "neutral", style: "elevated", className: "mb-6 p-6", children: _jsx(Card.Body, { children: _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-border-primary", children: [_jsx("th", { className: "text-left p-2 font-semibold", children: "Prop" }), _jsx("th", { className: "text-left p-2 font-semibold", children: "Type" }), _jsx("th", { className: "text-left p-2 font-semibold", children: "Default" }), _jsx("th", { className: "text-left p-2 font-semibold", children: "Description" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { className: "border-b border-border-secondary", children: [_jsx("td", { className: "p-2 font-mono text-sm", children: "value" }), _jsx("td", { className: "p-2 text-sm", children: "string" }), _jsx("td", { className: "p-2 text-sm", children: "-" }), _jsx("td", { className: "p-2 text-sm", children: "Controlled value of the editor" })] }), _jsxs("tr", { className: "border-b border-border-secondary", children: [_jsx("td", { className: "p-2 font-mono text-sm", children: "defaultValue" }), _jsx("td", { className: "p-2 text-sm", children: "string" }), _jsx("td", { className: "p-2 text-sm", children: "''" }), _jsx("td", { className: "p-2 text-sm", children: "Initial value for uncontrolled usage" })] }), _jsxs("tr", { className: "border-b border-border-secondary", children: [_jsx("td", { className: "p-2 font-mono text-sm", children: "placeholder" }), _jsx("td", { className: "p-2 text-sm", children: "string" }), _jsx("td", { className: "p-2 text-sm", children: "'Start typing...'" }), _jsx("td", { className: "p-2 text-sm", children: "Placeholder text when editor is empty" })] }), _jsxs("tr", { className: "border-b border-border-secondary", children: [_jsx("td", { className: "p-2 font-mono text-sm", children: "size" }), _jsx("td", { className: "p-2 text-sm", children: "'sm' | 'md' | 'lg'" }), _jsx("td", { className: "p-2 text-sm", children: "'md'" }), _jsx("td", { className: "p-2 text-sm", children: "Size variant of the editor" })] }), _jsxs("tr", { className: "border-b border-border-secondary", children: [_jsx("td", { className: "p-2 font-mono text-sm", children: "showToolbar" }), _jsx("td", { className: "p-2 text-sm", children: "boolean" }), _jsx("td", { className: "p-2 text-sm", children: "true" }), _jsx("td", { className: "p-2 text-sm", children: "Whether to show the formatting toolbar" })] }), _jsxs("tr", { className: "border-b border-border-secondary", children: [_jsx("td", { className: "p-2 font-mono text-sm", children: "toolbarPosition" }), _jsx("td", { className: "p-2 text-sm", children: "'top' | 'bottom'" }), _jsx("td", { className: "p-2 text-sm", children: "'top'" }), _jsx("td", { className: "p-2 text-sm", children: "Position of the formatting toolbar" })] }), _jsxs("tr", { className: "border-b border-border-secondary", children: [_jsx("td", { className: "p-2 font-mono text-sm", children: "allowedFormats" }), _jsx("td", { className: "p-2 text-sm", children: "Format[]" }), _jsx("td", { className: "p-2 text-sm", children: "All formats" }), _jsx("td", { className: "p-2 text-sm", children: "Array of allowed formatting options" })] }), _jsxs("tr", { className: "border-b border-border-secondary", children: [_jsx("td", { className: "p-2 font-mono text-sm", children: "rows" }), _jsx("td", { className: "p-2 text-sm", children: "number" }), _jsx("td", { className: "p-2 text-sm", children: "4" }), _jsx("td", { className: "p-2 text-sm", children: "Number of rows for height calculation" })] }), _jsxs("tr", { className: "border-b border-border-secondary", children: [_jsx("td", { className: "p-2 font-mono text-sm", children: "minHeight" }), _jsx("td", { className: "p-2 text-sm", children: "string" }), _jsx("td", { className: "p-2 text-sm", children: "-" }), _jsx("td", { className: "p-2 text-sm", children: "Minimum height of the editor" })] }), _jsxs("tr", { className: "border-b border-border-secondary", children: [_jsx("td", { className: "p-2 font-mono text-sm", children: "maxHeight" }), _jsx("td", { className: "p-2 text-sm", children: "string" }), _jsx("td", { className: "p-2 text-sm", children: "-" }), _jsx("td", { className: "p-2 text-sm", children: "Maximum height of the editor" })] }), _jsxs("tr", { className: "border-b border-border-secondary", children: [_jsx("td", { className: "p-2 font-mono text-sm", children: "onChange" }), _jsx("td", { className: "p-2 text-sm", children: "(value: string) => void" }), _jsx("td", { className: "p-2 text-sm", children: "-" }), _jsx("td", { className: "p-2 text-sm", children: "Callback when content changes" })] }), _jsxs("tr", { className: "border-b border-border-secondary", children: [_jsx("td", { className: "p-2 font-mono text-sm", children: "disabled" }), _jsx("td", { className: "p-2 text-sm", children: "boolean" }), _jsx("td", { className: "p-2 text-sm", children: "false" }), _jsx("td", { className: "p-2 text-sm", children: "Whether the editor is disabled" })] }), _jsxs("tr", { className: "border-b border-border-secondary", children: [_jsx("td", { className: "p-2 font-mono text-sm", children: "readOnly" }), _jsx("td", { className: "p-2 text-sm", children: "boolean" }), _jsx("td", { className: "p-2 text-sm", children: "false" }), _jsx("td", { className: "p-2 text-sm", children: "Whether the editor is read-only" })] }), _jsxs("tr", { className: "border-b border-border-secondary", children: [_jsx("td", { className: "p-2 font-mono text-sm", children: "isInvalid" }), _jsx("td", { className: "p-2 text-sm", children: "boolean" }), _jsx("td", { className: "p-2 text-sm", children: "false" }), _jsx("td", { className: "p-2 text-sm", children: "Whether to show invalid state" })] }), _jsxs("tr", { className: "border-b border-border-secondary", children: [_jsx("td", { className: "p-2 font-mono text-sm", children: "errorMessage" }), _jsx("td", { className: "p-2 text-sm", children: "string" }), _jsx("td", { className: "p-2 text-sm", children: "-" }), _jsx("td", { className: "p-2 text-sm", children: "Error message to display" })] })] })] }) }) }) })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Available Format Types" }), _jsx(Card, { variant: "neutral", style: "elevated", className: "mb-6 p-6", children: _jsxs(Card.Body, { children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 mb-4", children: [_jsxs("div", { children: [_jsx(Typography, { variant: "h3", size: "md", weight: "semibold", className: "mb-2", children: "Text Formatting" }), _jsxs("ul", { className: "list-disc list-inside space-y-1 text-sm", children: [_jsxs("li", { children: [_jsx("strong", { children: "bold" }), " - Makes text bold"] }), _jsxs("li", { children: [_jsx("em", { children: "italic" }), " - Makes text italic"] }), _jsxs("li", { children: [_jsx("u", { children: "underline" }), " - Adds underline to text"] })] })] }), _jsxs("div", { children: [_jsx(Typography, { variant: "h3", size: "md", weight: "semibold", className: "mb-2", children: "List & Structure" }), _jsxs("ul", { className: "list-disc list-inside space-y-1 text-sm", children: [_jsxs("li", { children: [_jsx("strong", { children: "bullet" }), " - Creates bullet lists"] }), _jsxs("li", { children: [_jsx("strong", { children: "number" }), " - Creates numbered lists"] }), _jsxs("li", { children: [_jsx("strong", { children: "indent" }), " - Increases indentation"] }), _jsxs("li", { children: [_jsx("strong", { children: "outdent" }), " - Decreases indentation"] })] })] })] }), _jsx(CodeBlock, { code: `type Format = 'bold' | 'italic' | 'underline' | 'bullet' | 'number' | 'indent' | 'outdent';

const allowedFormats: Format[] = ['bold', 'italic', 'bullet'];
<RichTextEditor allowedFormats={allowedFormats} />`, language: "typescript" })] }) })] })] }) }));
};