Merge pull request #271 from beNative/tisi/reorganize-rich-text-editor-context-menu

Add selection submenu to rich text context menu

Author: beNative

components/ContextMenu.tsx

@@ -1,13 +1,24 @@
 import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 
-export type MenuItem = {
-  label: string;
-  action: () => void;
-  icon?: React.FC<{ className?: string }>;
-  disabled?: boolean;
-  shortcut?: string;
-} | { type: 'separator' };
+export type MenuItem =
+  | {
+      label: string;
+      action: () => void;
+      icon?: React.FC<{ className?: string }>;
+      disabled?: boolean;
+      shortcut?: string;
+      submenu?: never;
+    }
+  | {
+      label: string;
+      submenu: MenuItem[];
+      icon?: React.FC<{ className?: string }>;
+      disabled?: boolean;
+      shortcut?: string;
+      action?: never;
+    }
+  | { type: 'separator' };
 
 interface ContextMenuProps {
   isOpen: boolean;
@@ -20,6 +31,7 @@ const EDGE_MARGIN = 8;
 
 const ContextMenu: React.FC<ContextMenuProps> = ({ isOpen, position, items, onClose }) => {
   const menuRef = useRef<HTMLDivElement>(null);
+  const [openSubmenu, setOpenSubmenu] = useState<string | null>(null);
   const [menuStyle, setMenuStyle] = useState<{ top: number; left: number; maxHeight: number; overflowY: React.CSSProperties['overflowY'] }>({
     top: position.y,
     left: position.x,
@@ -76,6 +88,8 @@ const ContextMenu: React.FC<ContextMenuProps> = ({ isOpen, position, items, onCl
   useEffect(() => {
     if (!isOpen) return;
 
+    setOpenSubmenu(null);
+
     const handleClickOutside = (event: MouseEvent) => {
       if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
         onClose();
@@ -146,6 +160,88 @@ const ContextMenu: React.FC<ContextMenuProps> = ({ isOpen, position, items, onCl
   const overlayRoot = document.getElementById('overlay-root');
   if (!overlayRoot) return null;
 
+  const hasEnabledItem = (menuItems: MenuItem[]): boolean => {
+    return menuItems.some(item => {
+      if ('type' in item) {
+        return false;
+      }
+
+      if ('submenu' in item) {
+        return !item.disabled && hasEnabledItem(item.submenu);
+      }
+
+      return !item.disabled;
+    });
+  };
+
+  const renderItems = (menuItems: MenuItem[], depth = 0) => {
+    return menuItems.map((item, index) => {
+      if ('type' in item) {
+        return <li key={`separator-${depth}-${index}`} className="h-px bg-border-color my-1.5" />;
+      }
+
+      if ('submenu' in item) {
+        const menuKey = `${depth}-${index}`;
+        const isOpen = openSubmenu === menuKey;
+        const hasEnabledSubitem = hasEnabledItem(item.submenu);
+        const Icon = item.icon;
+
+        return (
+          <li
+            key={`${item.label}-${depth}-${index}`}
+            className="relative"
+            onMouseEnter={() => setOpenSubmenu(menuKey)}
+            onMouseLeave={() => setOpenSubmenu(null)}
+          >
+            <button
+              onClick={() => {
+                if (!item.disabled && hasEnabledSubitem) {
+                  setOpenSubmenu(menuKey);
+                }
+              }}
+              disabled={item.disabled || !hasEnabledSubitem}
+              className="w-full flex items-center justify-between text-left px-2 py-1.5 text-xs rounded-md transition-colors text-text-main disabled:text-text-secondary/50 disabled:cursor-not-allowed hover:bg-primary hover:text-primary-text focus:bg-primary focus:text-primary-text focus:outline-none"
+            >
+              <div className="flex items-center gap-3">
+                {Icon && <Icon className="w-4 h-4" />}
+                <span>{item.label}</span>
+              </div>
+              <span className="text-text-secondary">›</span>
+            </button>
+            {isOpen && item.submenu.length > 0 && (
+              <div className="absolute top-0 left-full ml-1 z-10 w-[16.8rem] rounded-md bg-secondary p-1.5 shadow-2xl border border-border-color animate-fade-in-fast">
+                <ul className="space-y-1">{renderItems(item.submenu, depth + 1)}</ul>
+              </div>
+            )}
+          </li>
+        );
+      }
+
+      const { label, action, icon: Icon, disabled, shortcut } = item;
+
+      return (
+        <li key={`${label}-${depth}-${index}`}>
+          <button
+            onClick={() => {
+              if (!disabled) {
+                action();
+                onClose();
+              }
+            }}
+            disabled={disabled}
+            className="w-full flex items-center justify-between text-left px-2 py-1.5 text-xs rounded-md transition-colors text-text-main disabled:text-text-secondary/50 disabled:cursor-not-allowed hover:bg-primary hover:text-primary-text focus:bg-primary focus:text-primary-text focus:outline-none"
+          >
+            <div className="flex items-center gap-3">
+              {Icon && <Icon className="w-4 h-4" />}
+              <span>{label}</span>
+            </div>
+            {shortcut && <span className="text-xs text-text-secondary">{shortcut}</span>}
+          </button>
+        </li>
+      );
+    });
+  };
+
   return ReactDOM.createPortal(
     <div
       ref={menuRef}
@@ -158,30 +254,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({ isOpen, position, items, onCl
       className="fixed z-50 w-[16.8rem] rounded-md bg-secondary p-1.5 shadow-2xl border border-border-color animate-fade-in-fast"
     >
       <ul className="space-y-1">
-        {/* Fix: Restructured the type guard to check for a property on the desired object type directly, which ensures proper type narrowing for the MenuItem union. */}
-        {items.map((item, index) => {
-          if ('label' in item) {
-            const { label, action, icon: Icon, disabled, shortcut } = item;
-
-            return (
-              <li key={label}>
-                <button
-                  onClick={() => { if(!disabled) { action(); onClose(); } }}
-                  disabled={disabled}
-                  className="w-full flex items-center justify-between text-left px-2 py-1.5 text-xs rounded-md transition-colors text-text-main disabled:text-text-secondary/50 disabled:cursor-not-allowed hover:bg-primary hover:text-primary-text focus:bg-primary focus:text-primary-text focus:outline-none"
-                >
-                  <div className="flex items-center gap-3">
-                    {Icon && <Icon className="w-4 h-4" />}
-                    <span>{label}</span>
-                  </div>
-                  {shortcut && <span className="text-xs text-text-secondary">{shortcut}</span>}
-                </button>
-              </li>
-            );
-          } else {
-            return <li key={`separator-${index}`} className="h-px bg-border-color my-1.5" />;
-          }
-        })}
+        {renderItems(items)}
       </ul>
       <style>{`
         @keyframes fade-in-fast {

components/RichTextEditor.tsx

@@ -1585,20 +1585,63 @@ const RichTextEditor = forwardRef<RichTextEditorHandle, RichTextEditorProps>(
         return [];
       }
 
+      const mapActionsToMenuItems = (actions: ToolbarButtonConfig[]) => {
+        const items: ContextMenuItem[] = [];
+        actions.forEach((action, index) => {
+          const previous = actions[index - 1];
+          if (previous && previous.group !== action.group) {
+            items.push({ type: 'separator' });
+          }
+          items.push({
+            label: action.label,
+            action: action.onClick,
+            icon: action.icon,
+            disabled: action.disabled,
+          });
+        });
+        return items;
+      };
+
+      const historyActions = contextActions.filter(action => action.group === 'history');
+      const selectionActions = contextActions.filter(action =>
+        ['inline-format', 'alignment', 'structure', 'utility'].includes(action.group),
+      );
+      const insertActions = contextActions.filter(action => action.group === 'insert');
+
       const items: ContextMenuItem[] = [];
-      contextActions.forEach((action, index) => {
-        const previous = contextActions[index - 1];
-        if (previous && previous.group !== action.group) {
-          items.push({ type: 'separator' });
-        }
+      items.push(...mapActionsToMenuItems(historyActions));
+
+      if (items.length > 0 && selectionActions.length > 0 && items[items.length - 1]?.type !== 'separator') {
+        items.push({ type: 'separator' });
+      }
+
+      if (selectionActions.length > 0) {
         items.push({
-          label: action.label,
-          action: action.onClick,
-          icon: action.icon,
-          disabled: action.disabled,
+          label: 'Selection',
+          submenu: mapActionsToMenuItems(selectionActions),
+          disabled: selectionActions.every(action => action.disabled),
         });
+      }
+
+      if (items.length > 0 && insertActions.length > 0) {
+        items.push({ type: 'separator' });
+      }
+
+      items.push(...mapActionsToMenuItems(insertActions));
+
+      const cleanedItems = items.filter((item, index, array) => {
+        if (item.type !== 'separator') {
+          return true;
+        }
+
+        const isLeadingSeparator = index === 0;
+        const isTrailingSeparator = index === array.length - 1;
+        const isDuplicateSeparator = array[index - 1]?.type === 'separator' || array[index + 1]?.type === 'separator';
+
+        return !isLeadingSeparator && !isTrailingSeparator && !isDuplicateSeparator;
       });
-      return items;
+
+      return cleanedItems;
     }, [contextActions, readOnly]);
 
     const handleScroll = useCallback(