feat: handle onClick input

Author: winverse

packages/nextra-editor/src/components/sidebar/sidebar-controller/control-input.tsx

@@ -23,7 +23,9 @@ function ControlInput({ type }: Props): ReactElement {
 
   const onClick = (e: React.MouseEvent<HTMLDivElement>) => {
     e.preventDefault()
-    onComplete()
+    if ((e.target as any).tagName !== 'INPUT') {
+      onComplete()
+    }
 
     if (title) {
       dispatchEvent()
@@ -78,6 +80,7 @@ function ControlInput({ type }: Props): ReactElement {
       </span>
       <input
         className={cn(
+          'nextra-add-contents-input',
           'focus-visible:box-shadow-none nx-ml-1 nx-w-full nx-px-1 nx-py-0.5',
           'nx-bg-gray-100 nx-text-gray-600 ',
           'dark:nx-bg-primary-100/5 dark:nx-text-gray-400',

packages/nextra-editor/src/components/sidebar/sortable-tree/sortable-item.tsx

@@ -71,7 +71,7 @@ export const SortableItem = forwardRef<HTMLDivElement, SortableItemProps>((props
           isSeparator && 'nx-cursor-default',
           isSeparator ? classes.separator : classes.link,
           active ? classes.active : classes.inactive,
-          !isDragging && !active && classes.inactiveBgColor,
+          !isControlAction && !isDragging && !active && classes.inactiveBgColor,
           isGhost && classes.ghost,
           clone && classes.clone,
           isControlAction && '!nx-pr-0',

packages/nextra-editor/src/components/sidebar/style.tsx

@@ -10,8 +10,7 @@ export const classes = {
     'contrast-more:nx-border-primary-500 contrast-more:dark:nx-border-primary-500',
   ),
   inactive: cn(
-    'nx-text-gray-500',
-    'dark:nx-text-neutral-400 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50',
+    'nx-text-gray-500 dark:nx-text-neutral-400',
     'contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50',
     'contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50',
   ),

packages/nextra-editor/src/hooks/use-outside-click.ts

@@ -1,12 +1,12 @@
 import { useEffect, useRef } from 'react'
 
-export default function useOutsideClick<T extends Element>(callback: () => any) {
+export default function useOutsideClick<T extends Element>(callback: (event?: MouseEvent) => any) {
   const ref = useRef<T>(null)
 
   useEffect(() => {
     const handleClick = (event: MouseEvent) => {
       if (ref.current && !ref.current.contains(event.target as any)) {
-        callback()
+        callback(event)
       }
     }