Questions about focus in rich text

[big-camel]

Rich text usually has its own focus management, and when used with radix-ui, it is found that it will conflict with the focus of rich text.

This generally happens in toolbars, and I want the rich text editor to not lose focus when the toolbar is clicked

export const App = () => {

  return <div>
  <div className="toolbar">
     <Menu>
        ...
        <Menu.Item>menu item</Menu.Item>
        ...
      </Menu>
      <button onMouseDown={e => e.preventDefault() }>button</button>
  </div>
  <div contentEditable={true}></div>
</div>
}

For normal button nodes, it can be prevented by adding preventDefault, but there is no simple processing method in the radix-ui Menu component

For example these codes in the menu

https://github.com/radix-ui/primitives/blob/main/packages/react/menu/src/Menu.tsx#L465
https://github.com/radix-ui/primitives/blob/main/packages/react/menu/src/Menu.tsx#L441
https://github.com/radix-ui/primitives/blob/main/packages/react/menu/src/Menu.tsx#L1057

Is this expected behavior? If not, is there a way to handle such behavior? Or provide unified management focus behavior configuration, maybe I can get it done

[benoitgrelard]

Accessibility in rich text editors is a whole different beast really.
If you do event.preventDefault() on a button, focus won't move to it yes.
How are you thinking about making all of these toolbars accessible for users?
Also, why does it matter if the focus is temporarily moved to a menu if you can restore it to the correct element / text cursor position when closed?

[big-camel]

A very important reason is that I need to preserve the selection. If the selection is moved outside the editing area, I lose the target I need to manipulate.(Although the selection can be recorded in the blur event, the experience is not good.)

Before the user confirms the operation to be performed, no matter how the user moves the mouse, the current selection area should always be displayed.

---

Without thinking too much about complex accessibility issues, just to provide an alternative patch code, my thoughts are:

export const EventHandlerContext = createContent({})

export const useEventHandler = () => {
  const { composeEventHandlers = defaultComposeEventHandlers, fireEvent = (el, mthod, ...args) => {
    if(typeof el[method] === 'function') el[method](...args);
  }} = useContext(EventHandlerContext)

  return useRef({
     composeEventHandlers,
     fireEvent 
  }).current
}

Use EventHandlerContext.Provider where events need to be intercepted

<EventHandlerContext.Provider value={{ fireEvent: (el, method, ...args) => { 
    if(method !== 'focus') {
      defaultFireEvent(el, method, ...args)
    }
  }}}>
  <Menu>
    ...
  </Menu>
</EventHandlerContext.Provider>

[benoitgrelard]

Like I said, I think rich text accessibility is an entirely different can of worms so I don't think our components are well suited to that use case at the moment.

I'm also not sure I'm following your code examples above sorry…

[big-camel]

Thank you!

[felixfeng33]

I encountered the same issue on Plate editor as well.a whole different beast indeed.
Plate is