Select/Menu with TipTap WYSIWYG Editor - Updating Trigger value based on state

[deltasierra96]

Hi. I'm trying to implement a Shopify style WYSIWYG style editor using TipTap in combination with RAC.

In the following example, if a user clicks on a certain type of formatted text, be it bold, italic, underline, etc. the state of the button is styled via a boolean by using editor.isActive('whatever')

Is it possible to update the value in the menu/select trigger to reflect what the user is currently focused on in the editor using the returned boolean?

This is my current implementation

import { Menu, MenuItem, MenuTrigger } from '../../menu';
import { Tooltip } from '../../tooltip';
import { Button } from '../../button';
import { Popover } from '../../popover';
import { type Key, type Selection } from 'react-aria-components';
import { type Editor } from '@tiptap/react';
import React from 'react';

export type FormattingMenuProps = {
  editor: Editor;
};

export const FormattingMenu = ({ editor }: FormattingMenuProps) => {
  const onAction = async (action: Key) => {
    console.log('action', action);
    if (!editor) {
      return null;
    }
    // setSelectedFormatting(
    //   editor.isActive('heading', { level: 1 }) ? 'heading-one' : 'paragraph'
    // );

    switch (action) {
      case 'paragraph':
        editor.chain().focus().setParagraph().run();
        break;
      case 'heading-one':
        editor.chain().focus().setHeading({ level: 1 }).run();
        break;
      case 'heading-two':
        editor.chain().focus().setHeading({ level: 2 }).run();
        break;
      case 'heading-three':
        editor.chain().focus().setHeading({ level: 3 }).run();
        break;
      case 'heading-four':
        editor.chain().focus().setHeading({ level: 4 }).run();
        break;
      case 'heading-five':
        editor.chain().focus().setHeading({ level: 5 }).run();
        break;
      case 'heading-six':
        editor.chain().focus().setHeading({ level: 6 }).run();
        break;
    }
  };

  const [selectedFormatting, setSelectedFormatting] = React.useState<Selection>(
    new Set([
      'paragraph',
      'heading-one',
      'heading-two',
      'heading-three',
      'heading-four',
      'heading-five',
      'heading-six',
    ])
  );
  return (
    <MenuTrigger>
      <Tooltip>
        <Button variant='secondary-ghost' rightIcon='chevron-down' className='min-w-20' size='sm'>
          {selectedFormatting}
        </Button>
        <Tooltip.Content>Formatting</Tooltip.Content>
      </Tooltip>
      <Popover showArrow>
        <div className='flex max-h-full flex-col p-2'>
          <Menu
            onAction={onAction}
            selectionMode='single'
            selectedKeys={selectedFormatting}
            onSelectionChange={setSelectedFormatting}
          >
            <MenuItem
              id='paragraph'
              textValue='Paragraph'
              isSelected={editor.isActive('paragraph')}
            >
              <div className='text-sm'>Paragraph</div>
            </MenuItem>
            <MenuItem
              id='heading-one'
              textValue='Heading 1'
              isSelected={editor.isActive('heading', { level: 1 })}
            >
              <div className='font-heading text-3xl'>Heading 1</div>
            </MenuItem>
            <MenuItem
              id='heading-two'
              textValue='Heading 2'
              isSelected={editor.isActive('heading', { level: 2 })}
            >
              <div className='font-heading text-2xl'>Heading 2</div>
            </MenuItem>
            <MenuItem
              id='heading-three'
              textValue='Heading 3'
              isSelected={editor.isActive('heading', { level: 3 })}
            >
              <div className='font-heading text-xl'>Heading 3</div>
            </MenuItem>
            <MenuItem
              id='heading-four'
              textValue='Heading 4'
              isSelected={editor.isActive('heading', { level: 4 })}
            >
              <div className='font-heading text-lg'>Heading 4</div>
            </MenuItem>
            <MenuItem
              id='heading-five'
              textValue='Heading 5'
              isSelected={editor.isActive('heading', { level: 5 })}
            >
              <div className='font-heading text-base'>Heading 5</div>
            </MenuItem>
            <MenuItem
              id='heading-six'
              textValue='Heading 6'
              isSelected={editor.isActive('heading', { level: 6 })}
            >
              <div className='font-heading text-sm'>Heading 6</div>
            </MenuItem>
          </Menu>
        </div>
      </Popover>
    </MenuTrigger>
  );
};

[reidbarber]

The API for that editor state is a bit difficult to reconcile with selection in collections. One thing I noticed is that multiple nodes could come back as active, but Select only supports single selection. If you're using a component that supports multiple selection like just ListBox, you could do something like

let items = [...];
let selectedKeys = items.filter((item) => editor.isActive(item.name, item.attributes)).map((item) => item.key);
...
<ListBox
  items={items}
  selectedKeys={selectedKeys}
...

The easiest thing would be to use ToggleButton's for this type of UI.

[deltasierra96]

Yeah I thought it was a bit convoluted. I had messed around with both Select and Menu components but I landed on the Select as it at least gave me a "native" feedback via the .

This ultimately was the style of component I was trying to recreate, and due to limited space, I was wanting to have the available formatting options in a menu.