Split Command into two components: CommandProvider and Command

[shincurry]

Split Command into two components: CommandProvider and Command:

• CommandProvider: stores and states.
• Command: UI business

Why is this proposal, What is the problem?

https://codesandbox.io/s/frosty-sunset-ft5mjy

When I use cmdk to implement spotlight in my web application, I try to define the command items required by each page/module under their respective module structure through Portal.

I created a SpotlightContext to expose slot ref which binding cmdk-list element to portal, and define command items using createPortal.

This means that components like Command.Group and Command.Item from createPortal are not inside Command component (although rendered through createPortal, they are actually inside on the DOM), so Command.Group and Command.Item cannot get the CommandContext and StoreContext. it will throw error:

TypeError
Cannot read properties of undefined (reading 'subscribe')

This is because the children of SpotlightProvider are placed outside the Command. (In React, not the actual DOM)

A workaround is to put the children inside the Command, but this will cause some problems: the internal implementation of the Command has additional processing for the onKeyDown event. For example, if there are components such as the editor inside the children, the editor will not be able to wrap by Enter key press. So this workaround is not acceptable.

How to solve it?

The idea is simple, separate context states and ui into two components: CommandProvider and Command, then developers can decide whether to place these two parts separately.

  function SpotlightProvider({children}) {
    return (
      {/* //... */}
      <CommandProvider>
        {children} {/* <------------------------------------  */
        <Command>
          <Command.List ref={slotRef}>
            {/* //... */}
          </Command.List>
        </Command>
        {/* //... */}

        {createPortal(
          <Command.Item>
            {/* //... */}
          </Command.Item>
        ), slotRef.current}
      </CommandProvider>
    )
  }