Typix LogoTypix
CoreProviders

EditorCommandProvider

Context provider for the command menu system

EditorCommandProvider provides the command menu state to EditorCommandItem and other command sub-components. This is managed internally by EditorCommand.

Import

import { EditorCommandProvider, useEditorCommand } from '@typix-editor/react';

Context value

PropertyTypeDescription
editorLexicalEditorThe Lexical editor instance
selectedIndexnumberCurrently highlighted item index
setHighlightedIndex(index: number) => voidSet the highlighted item
selectOptionAndCleanUp(option: CommandMenuOption) => voidSelect an option and close the menu
filteredItemsArray<CommandMenuOption>Currently filtered command options

useEditorCommand

Hook to access the command context:

import { useEditorCommand } from '@typix-editor/react';

function CustomCommandItem({ item, index }) {
  const { selectedIndex, selectOptionAndCleanUp } = useEditorCommand();
  const isSelected = selectedIndex === index;

  return (
    <div
      className={isSelected ? 'bg-blue-50' : ''}
      onClick={() => selectOptionAndCleanUp(item)}
    >
      {item.title}
    </div>
  );
}

You typically don't use EditorCommandProvider directly. It's set up by EditorCommand internally.

TypixEditorProvider

Context provider that makes the TypixEditor instance available

cn

Utility for merging CSS class names with Tailwind support

On this page

ImportContext valueuseEditorCommandRelated