@12-apps/ui 1.0.0 → 1.3.0

package/src/components/form/RichTextEditor/RichTextEditor.tsx

@@ -1,30 +1,14 @@
-import {
-  Code,
-  FormatBold,
-  FormatItalic,
-  FormatListBulleted,
-  FormatListNumbered,
-  FormatQuote,
-  FormatStrikethrough,
-  FormatUnderlined,
-  Image,
-  Link,
-} from '@mui/icons-material';
 import {
   alpha,
   Box,
-  Divider,
-  IconButton,
   Paper,
-  Toolbar,
-  Tooltip,
-  Typography,
-  useTheme,
-} from '@mui/material';
-import DOMPurify from 'dompurify';
-import React, { forwardRef, useCallback, useEffect,useRef, useState } from 'react';
+  useTheme } from '@mui/material';
+import React, { forwardRef } from 'react';
 
+import type { Theme } from '@mui/material';
+import { useRichTextEditor } from './RichTextEditor.hooks';
 import type { RichTextEditorProps, ToolbarConfig } from './RichTextEditor.types';
+import { RichTextEditorToolbar } from './RichTextEditorToolbar';
 
 const DEFAULT_TOOLBAR: Required<Omit<ToolbarConfig, 'customItems'>> & Pick<ToolbarConfig, 'customItems'> = {
   bold: true,
@@ -37,19 +21,76 @@ const DEFAULT_TOOLBAR: Required<Omit<ToolbarConfig, 'customItems'>> & Pick<Toolb
   image: false,
   codeBlock: false,
   quote: false,
-  customItems: [],
-};
+  customItems: [] };
+
+const RICH_TEXT_DEFAULTS: Partial<RichTextEditorProps> = {
+  value: '',
+  placeholder: 'Start typing...',
+  disabled: false,
+  readOnly: false,
+  toolbar: {},
+  height: 300 };
+
+// Strips explicitly-undefined props before the merge, so `prop={undefined}`
+// still falls back to the default as a destructuring default would.
+const definedProps = (props: RichTextEditorProps): Partial<RichTextEditorProps> =>
+  Object.fromEntries(
+    Object.entries(props).filter(([, v]) => v !== undefined),
+  ) as Partial<RichTextEditorProps>;
+
+// Simple inline formats are a tag swap; lists and the value-carrying formats
+// need their own handling. This was one nine-case switch.
+const editorContentSx = (theme: Theme, disabled: boolean, placeholder?: string, height?: string | number) => ({
+  minHeight: typeof height === 'number' ? `${height}px` : height,
+  p: 2,
+  outline: 'none',
+  cursor: disabled ? 'not-allowed' : 'text',
+  '&:empty::before': {
+    content: `"${placeholder}"`,
+    color: theme.palette.text.disabled,
+    pointerEvents: 'none' },
+  '& p': {
+    margin: '8px 0',
+    '&:first-of-type': { marginTop: 0 },
+    '&:last-of-type': { marginBottom: 0 } },
+  '& ul, & ol': { marginLeft: theme.spacing(2) },
+  '& blockquote': {
+    borderLeft: `4px solid ${theme.palette.primary.main}`,
+    paddingLeft: theme.spacing(2),
+    margin: `${theme.spacing(1)} 0`,
+    fontStyle: 'italic',
+    backgroundColor: alpha(theme.palette.primary.main, 0.05) },
+  '& pre': {
+    backgroundColor: alpha(theme.palette.text.primary, 0.08),
+    padding: theme.spacing(1),
+    borderRadius: 1,
+    fontFamily: 'Monaco, Menlo, "Ubuntu Mono", monospace',
+    fontSize: '0.875rem',
+    overflow: 'auto' },
+  '& a': { color: theme.palette.primary.main, textDecoration: 'underline' } });
+
+const shellSx = (theme: Theme, isFocused: boolean, disabled: boolean) => ({
+  border: `1px solid ${alpha(theme.palette.divider, 0.12)}`,
+  borderRadius: 1,
+  overflow: 'hidden',
+  transition: 'border-color 0.2s ease-in-out',
+  ...(isFocused && {
+    borderColor: theme.palette.primary.main,
+    boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.2)}` }),
+  ...(disabled && {
+    backgroundColor: theme.palette.action.disabledBackground,
+    color: theme.palette.text.disabled }) });
 
 export const RichTextEditor = forwardRef<HTMLDivElement, RichTextEditorProps>(
-  (
-    {
-      value = '',
+  (editorProps, ref) => {
+    const {
+      value,
       onChange,
-      placeholder = 'Start typing...',
-      disabled = false,
-      readOnly = false,
-      toolbar = {},
-      height = 300,
+      placeholder,
+      disabled,
+      readOnly,
+      toolbar,
+      height,
       maxLength,
       onFocus,
       onBlur,
@@ -58,257 +99,18 @@ export const RichTextEditor = forwardRef<HTMLDivElement, RichTextEditorProps>(
       'aria-label': ariaLabel,
       'aria-describedby': ariaDescribedBy,
       ...props
-    },
-    ref
-  ) => {
-    const theme = useTheme();
-    const editorRef = useRef<HTMLDivElement>(null);
-    const [isFocused, setIsFocused] = useState(false);
-    const [content, setContent] = useState(value);
+    } = { ...RICH_TEXT_DEFAULTS, ...definedProps(editorProps) } as RichTextEditorProps;
 
+    const theme = useTheme();
     const toolbarConfig = { ...DEFAULT_TOOLBAR, ...toolbar };
-
-    const handleContentChange = useCallback(() => {
-      if (!editorRef.current) return;
-      
-      const newContent = editorRef.current.innerHTML;
-      const textContent = editorRef.current.textContent || '';
-      
-      if (maxLength && textContent.length > maxLength) {
-        // Restore previous content
-        editorRef.current.innerHTML = content;
-        return;
-      }
-      
-      setContent(newContent);
-      onChange?.(newContent);
-    }, [maxLength, onChange, content]);
-
-    const handleFocus = useCallback(() => {
-      setIsFocused(true);
-      onFocus?.();
-    }, [onFocus]);
-
-    const handleBlur = useCallback(() => {
-      setIsFocused(false);
-      onBlur?.();
-    }, [onBlur]);
-
-    const applyFormat = useCallback((formatType: string, value?: string) => {
-      if (disabled || readOnly || !editorRef.current) return;
-      
-      const selection = window.getSelection();
-      if (!selection || selection.rangeCount === 0) {
-        editorRef.current.focus();
-        return;
-      }
-      
-      const range = selection.getRangeAt(0);
-      
-      switch (formatType) {
-        case 'bold':
-          wrapSelection(range, 'strong');
-          break;
-        case 'italic':
-          wrapSelection(range, 'em');
-          break;
-        case 'underline':
-          wrapSelection(range, 'u');
-          break;
-        case 'strikethrough':
-          wrapSelection(range, 's');
-          break;
-        case 'insertOrderedList':
-          toggleList(range, 'ol');
-          break;
-        case 'insertUnorderedList':
-          toggleList(range, 'ul');
-          break;
-        case 'createLink':
-          if (value) {
-            wrapSelectionWithLink(range, value);
-          }
-          break;
-        case 'insertImage':
-          if (value) {
-            insertImage(range, value);
-          }
-          break;
-        case 'formatBlock':
-          if (value === 'pre') {
-            wrapSelection(range, 'pre');
-          } else if (value === 'blockquote') {
-            wrapSelection(range, 'blockquote');
-          }
-          break;
-      }
-      
-      handleContentChange();
-      editorRef.current.focus();
-    }, [disabled, readOnly, handleContentChange]);
-    
-    const wrapSelection = (range: globalThis.Range, tagName: string) => {
-      const selectedText = range.toString();
-      if (!selectedText) return;
-      
-      const wrapper = document.createElement(tagName);
-      wrapper.appendChild(document.createTextNode(selectedText));
-      
-      range.deleteContents();
-      range.insertNode(wrapper);
-      
-      // Move cursor after inserted element
-      const newRange = document.createRange();
-      newRange.setStartAfter(wrapper);
-      newRange.collapse(true);
-      
-      const selection = window.getSelection();
-      selection?.removeAllRanges();
-      selection?.addRange(newRange);
-    };
-    
-    const wrapSelectionWithLink = (range: globalThis.Range, url: string) => {
-      const selectedText = range.toString();
-      if (!selectedText) return;
-      
-      const link = document.createElement('a');
-      link.href = url.startsWith('http') ? url : `https://${url}`;
-      link.target = '_blank';
-      link.rel = 'noopener noreferrer';
-      link.appendChild(document.createTextNode(selectedText));
-      
-      range.deleteContents();
-      range.insertNode(link);
-      
-      // Move cursor after inserted element
-      const newRange = document.createRange();
-      newRange.setStartAfter(link);
-      newRange.collapse(true);
-      
-      const selection = window.getSelection();
-      selection?.removeAllRanges();
-      selection?.addRange(newRange);
-    };
-    
-    const insertImage = (range: globalThis.Range, src: string) => {
-      const img = document.createElement('img');
-      img.src = src;
-      img.style.maxWidth = '100%';
-      img.style.height = 'auto';
-      
-      range.deleteContents();
-      range.insertNode(img);
-      
-      // Move cursor after inserted element
-      const newRange = document.createRange();
-      newRange.setStartAfter(img);
-      newRange.collapse(true);
-      
-      const selection = window.getSelection();
-      selection?.removeAllRanges();
-      selection?.addRange(newRange);
-    };
-    
-    const toggleList = (range: globalThis.Range, listType: 'ol' | 'ul') => {
-      if (!editorRef.current) return;
-      
-      // Get the parent block element
-      let parentBlock = range.commonAncestorContainer;
-      if (parentBlock.nodeType === globalThis.Node.TEXT_NODE) {
-        parentBlock = parentBlock.parentElement || parentBlock;
-      }
-      
-      // Check if we're already in a list
-      const existingList = (parentBlock as globalThis.Element).closest(listType);
-      if (existingList) {
-        // Remove from list
-        const listItem = (parentBlock as globalThis.Element).closest('li');
-        if (listItem && listItem.parentElement) {
-          const text = document.createTextNode(listItem.textContent || '');
-          listItem.parentElement.replaceChild(text, listItem);
-        }
-      } else {
-        // Create new list
-        const list = document.createElement(listType);
-        const listItem = document.createElement('li');
-        
-        const selectedText = range.toString() || 'List item';
-        listItem.appendChild(document.createTextNode(selectedText));
-        list.appendChild(listItem);
-        
-        range.deleteContents();
-        range.insertNode(list);
-        
-        // Move cursor inside list item
-        const newRange = document.createRange();
-        newRange.selectNodeContents(listItem);
-        newRange.collapse(false);
-        
-        const selection = window.getSelection();
-        selection?.removeAllRanges();
-        selection?.addRange(newRange);
-      }
-    };
-
-    const getToolbarButton = (
-      key: string,
-      icon: React.ReactElement,
-      tooltip: string,
-      command: string,
-      commandValue?: string
-    ) => {
-      if (!toolbarConfig[key as keyof typeof toolbarConfig]) return null;
-
-      const handleClick = () => {
-        if (command === 'createLink') {
-          const url = window.prompt('Enter URL:', 'https://');
-          if (url) {
-            applyFormat(command, url);
-          }
-        } else if (command === 'insertImage') {
-          const src = window.prompt('Enter image URL:');
-          if (src) {
-            applyFormat(command, src);
-          }
-        } else {
-          applyFormat(command, commandValue);
-        }
-      };
-
-      return (
-        <Tooltip key={key} title={tooltip}>
-          <IconButton
-            size="small"
-            onClick={handleClick}
-            disabled={disabled || readOnly}
-            aria-label={tooltip}
-            data-testid={`toolbar-${key}`}
-          >
-            {icon}
-          </IconButton>
-        </Tooltip>
-      );
-    };
-
-    // Sanitize content for security
-    const sanitizedContent = DOMPurify.sanitize(content, {
-      ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'u', 's', 'a', 'img', 'ul', 'ol', 'li', 'blockquote', 'pre', 'code', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span', 'div'],
-      ALLOWED_ATTR: ['href', 'src', 'alt', 'target', 'rel', 'style', 'class'],
-      ALLOW_DATA_ATTR: false,
-      KEEP_CONTENT: true,
-    });
-    
-    // Calculate character count from text content
-    const tempDiv = document.createElement('div');
-    tempDiv.innerHTML = sanitizedContent;
-    const characterCount = tempDiv.textContent?.length || 0;
-    
-    // Update editor content if it was sanitized differently
-    useEffect(() => {
-      if (editorRef.current && editorRef.current.innerHTML !== sanitizedContent) {
-        editorRef.current.innerHTML = sanitizedContent;
-      }
-    }, [sanitizedContent]);
+    const editor = useRichTextEditor({
+      value,
+      onChange,
+      onFocus,
+      onBlur,
+      disabled,
+      readOnly,
+      maxLength });
 
     return (
       <Paper
@@ -316,98 +118,25 @@ export const RichTextEditor = forwardRef<HTMLDivElement, RichTextEditorProps>(
         className={className}
         data-testid={testId || 'rich-text-editor'}
         elevation={1}
-        sx={{
-          border: `1px solid ${alpha(theme.palette.divider, 0.12)}`,
-          borderRadius: 1,
-          overflow: 'hidden',
-          transition: 'border-color 0.2s ease-in-out',
-          ...(isFocused && {
-            borderColor: theme.palette.primary.main,
-            boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.2)}`,
-          }),
-          ...(disabled && {
-            backgroundColor: theme.palette.action.disabledBackground,
-            color: theme.palette.text.disabled,
-          }),
-        }}
+        sx={shellSx(theme, editor.isFocused, Boolean(disabled))}
         {...props}
       >
-        {/* Toolbar */}
-        <Toolbar
-          variant="dense"
-          data-testid="editor-toolbar"
-          sx={{
-            minHeight: 48,
-            px: 1,
-            borderBottom: `1px solid ${theme.palette.divider}`,
-            backgroundColor: alpha(theme.palette.background.paper, 0.8),
-          }}
-        >
-          {getToolbarButton('bold', <FormatBold />, 'Bold', 'bold')}
-          {getToolbarButton('italic', <FormatItalic />, 'Italic', 'italic')}
-          {getToolbarButton('underline', <FormatUnderlined />, 'Underline', 'underline')}
-          {getToolbarButton('strikethrough', <FormatStrikethrough />, 'Strikethrough', 'strikethrough')}
-          
-          {(toolbarConfig.bold || toolbarConfig.italic || toolbarConfig.underline || toolbarConfig.strikethrough) && 
-           (toolbarConfig.orderedList || toolbarConfig.unorderedList) && (
-            <Divider orientation="vertical" flexItem sx={{ mx: 0.5 }} />
-          )}
-          
-          {getToolbarButton('orderedList', <FormatListNumbered />, 'Numbered List', 'insertOrderedList')}
-          {getToolbarButton('unorderedList', <FormatListBulleted />, 'Bulleted List', 'insertUnorderedList')}
-          
-          {(toolbarConfig.orderedList || toolbarConfig.unorderedList) && 
-           (toolbarConfig.link || toolbarConfig.image || toolbarConfig.codeBlock || toolbarConfig.quote) && (
-            <Divider orientation="vertical" flexItem sx={{ mx: 0.5 }} />
-          )}
-          
-          {getToolbarButton('link', <Link />, 'Insert Link', 'createLink')}
-          {getToolbarButton('image', <Image />, 'Insert Image', 'insertImage')}
-          {getToolbarButton('codeBlock', <Code />, 'Code Block', 'formatBlock', 'pre')}
-          {getToolbarButton('quote', <FormatQuote />, 'Quote', 'formatBlock', 'blockquote')}
-          
-          {/* Custom toolbar items */}
-          {toolbarConfig.customItems && toolbarConfig.customItems.length > 0 && (
-            <>
-              <Divider orientation="vertical" flexItem sx={{ mx: 0.5 }} />
-              {toolbarConfig.customItems.map((item) => (
-                <Tooltip key={item.id} title={item.label}>
-                  <IconButton
-                    size="small"
-                    onClick={() => item.action(editorRef.current)}
-                    disabled={item.disabled || disabled || readOnly}
-                    aria-label={item.label}
-                    data-testid={`toolbar-custom-${item.id}`}
-                  >
-                    {item.icon}
-                  </IconButton>
-                </Tooltip>
-              ))}
-            </>
-          )}
-
-          <Box sx={{ flexGrow: 1 }} />
-
-          {/* Character count */}
-          {maxLength && (
-            <Typography
-              variant="caption"
-              color={characterCount > maxLength * 0.8 ? 'error' : 'text.secondary'}
-              sx={{ mr: 1 }}
-              data-testid="editor-counter"
-            >
-              {characterCount}/{maxLength}
-            </Typography>
-          )}
-        </Toolbar>
+        <RichTextEditorToolbar
+          config={toolbarConfig}
+          disabled={Boolean(disabled)}
+          readOnly={Boolean(readOnly)}
+          maxLength={maxLength}
+          characterCount={editor.characterCount}
+          editorRef={editor.editorRef}
+          onFormat={editor.applyFormat}
+        />
 
-        {/* Editor */}
         <Box
-          ref={editorRef}
+          ref={editor.editorRef}
           contentEditable={!disabled && !readOnly}
-          onInput={handleContentChange}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
+          onInput={editor.handleContentChange}
+          onFocus={editor.handleFocus}
+          onBlur={editor.handleBlur}
           role="textbox"
           aria-label={ariaLabel || 'Rich text editor'}
           aria-describedby={ariaDescribedBy}
@@ -415,52 +144,11 @@ export const RichTextEditor = forwardRef<HTMLDivElement, RichTextEditorProps>(
           tabIndex={disabled ? -1 : 0}
           data-testid="editor-content"
           suppressContentEditableWarning
-          sx={{
-            minHeight: typeof height === 'number' ? `${height}px` : height,
-            p: 2,
-            outline: 'none',
-            cursor: disabled ? 'not-allowed' : 'text',
-            '&:empty::before': {
-              content: `"${placeholder}"`,
-              color: theme.palette.text.disabled,
-              pointerEvents: 'none',
-            },
-            '& p': {
-              margin: '8px 0',
-              '&:first-of-type': {
-                marginTop: 0,
-              },
-              '&:last-of-type': {
-                marginBottom: 0,
-              },
-            },
-            '& ul, & ol': {
-              marginLeft: theme.spacing(2),
-            },
-            '& blockquote': {
-              borderLeft: `4px solid ${theme.palette.primary.main}`,
-              paddingLeft: theme.spacing(2),
-              margin: `${theme.spacing(1)} 0`,
-              fontStyle: 'italic',
-              backgroundColor: alpha(theme.palette.primary.main, 0.05),
-            },
-            '& pre': {
-              backgroundColor: alpha(theme.palette.text.primary, 0.08),
-              padding: theme.spacing(1),
-              borderRadius: 1,
-              fontFamily: 'Monaco, Menlo, "Ubuntu Mono", monospace',
-              fontSize: '0.875rem',
-              overflow: 'auto',
-            },
-            '& a': {
-              color: theme.palette.primary.main,
-              textDecoration: 'underline',
-            },
-          }}
+          sx={editorContentSx(theme, Boolean(disabled), placeholder, height)}
         />
       </Paper>
     );
-  }
+  },
 );
 
 RichTextEditor.displayName = 'RichTextEditor';