Mention - custom combobox component

[fbolcic]

Hello,

We are using the mentions feature and want to plug in a custom combobox UI component instead of the one that plate provides.
We are using a design system and have standardised components which we are using in our app. We have a standardised Menu component which we are using for this and similar use cases. So we would like to use this one instead of the one that plate provides - since we have a standardised set of styles which we already defined there.

I see the example in plate docs showcases a MentionCombobox which is defined here in source code. We can see that it relies on another plate component - Combobox. Basically what we would need to do is build our own MentionCombobox that relies on our custom Menu component instead of the plate's Combobox.

So my questions are:

1. Do you think this is even possible without too much rewiring? I see that the Combobox handles all sorts of details internally and I am afraid it is too coupled to plate to allow simply exchanging it for something else.
2. If not, what are our options? I see that the MentionCombobox supports some styling options with onRenderItem and the styles props. Is this then the recommended way to build a custom component?

[12joan]

@zbeyens might be able to provide a more direct answer to your questions, but here's what I did in my own app to replace the combobox used for mentions.

Disclaimers:

• This probably isn't the recommended way of customising the combobox
• There might be non-idiomatic use of the Plate API in this example; I wrote it a while ago
• There's a lot of internal code in this example that won't be relevant to you

Make a custom mention input component with its own combobox:

MentionInputComponent

const MentionInputComponent = ({ editor, attributes, children, element }) => {
  const { futurePartialDocuments, mentionSuggestionsContainerRef } = useContext()

  const handleSelectItem = item => getMentionOnSelectItem({ key: ELEMENT_MENTION })(editor, item)

  const query = getPlainBody(element)
  const [, path] = findMentionInput(editor)

  const matchingDocuments = useMemo(() => futurePartialDocuments.orDefault([]).filter(
    doc => doc.title && includes(doc.title, query)
  ), [futurePartialDocuments, query])

  const suggestions = useMemo(() => [
    ...matchingDocuments.map(doc => ({
      key: doc.id,
      icon: <DocumentIcon size="1.25em" noAriaLabel className="text-primary-500 dark:text-primary-400 data-active:text-white" />,
      label: doc.title,
      onCommit: () => handleSelectItem({
        documentId: doc.id,
        fallbackText: doc.safe_title,
      }),
    })),

    {
      key: 'cancel',
      icon: <DeleteIcon size="1.25em" noAriaLabel className="text-red-500 dark:text-red-400 data-active:text-white" />,
      label: 'Cancel mention',
      onCommit: () => removeMentionInput(editor, path),
    },
  ], [matchingDocuments, path])

  const { inputProps, showSuggestions, suggestionContainerProps, mapSuggestions } = useCombobox({
    query,
    suggestions,
    keyForSuggestion: ({ key }) => key,
    onCommit: ({ onCommit }) => onCommit(),
    completeOnTab: true,
    hideWhenEmptyQuery: false,
  })

  // onFocus and onBlur are intentionally not used
  const { onChange, onKeyDown, onFocus, onBlur, ...restInputProps } = inputProps

  useEditorEvent.onChange(onChange, [onChange])
  useEditorEvent.onKeyDown(onKeyDown, [onKeyDown])

  const comboboxFloating = useComboboxFloating()

  const suggestionsContainer = showSuggestions && (
    <div
      {...comboboxFloating.suggestionsProps}
      {...suggestionContainerProps}
      className="z-20 bg-slate-100/75 dark:bg-slate-700/75 backdrop-blur shadow-lg rounded-lg w-48 max-w-full overflow-y-scroll"
    >
      {mapSuggestions(({ suggestion: { icon, label }, active, suggestionProps }) => (
        <div
          {...suggestionProps}
          data-active={active}
          className="px-3 py-2 data-active:bg-primary-500 dark:data-active:bg-primary-400 data-active:text-white cursor-pointer flex gap-2 items-center"
        >
          {icon}
          <span>{label}</span>
        </div>
      ))}
    </div>
  )

  const mentionSuggestionsContainer = mentionSuggestionsContainerRef.current

  return (
    <>
      <span
        {...attributes}
        {...comboboxFloating.inputProps}
        {...restInputProps}
        className="btn btn-link cursor-text font-medium"
      >
        @{children}
      </span>

      {mentionSuggestionsContainer && createPortal(
        suggestionsContainer,
        mentionSuggestionsContainer,
      )}
    </>
  )
}

Set it as the component for ELEMENT_MENTION_INPUT in createPlugins:

  [ELEMENT_MENTION_INPUT]: MentionInputComponent,

The functions getMentionOnSelectItem, findMentionInput and removeMentionInput are imported from Plate. Other functions are internal. Let me know if you'd like me to explain any of them.

[fbolcic]

Thanks for your prompt reply!

Your solution seems a bit hefty for our purposes ATM, it would be great if @zbeyens has some other ideas.
One more question related to the mentions feature. This is the editor value when we use the mentions:

You can see in the log that the mention is represented as an object that looks like this:

{ type: '@', children: [], value: 'Filip Bolcic' }

On the BE we are parsing the editor value and looking for mentions, which triggers some business logic. Our BE requirement is that the mentions are represented like this:

{{member:id}}

So we need a way to place this info somewhere in the mention node - it can be anywhere, as long as the signature is valid. So something like this would work for us:

{ type: '@', children: [], value: 'Filip Bolcic', mentionKey: '{{23414}}' }

What is the preferred way to achieve this?

[12joan]

You might be able to do that by overriding createMentionNode

[fbolcic]

This works. For others encountering the same issue:

const mentionPlugin = createMentionPlugin<any, EditorValue>({
  ...
  options: {
    trigger: MENTION_TRIGGER,
    createMentionNode: (item: TComboboxItem) => ({ value: item.text, mention: `{{member:${item.key}}}` }),
  },
});

Thank you very much for all your help!

[zbeyens]

We're in the process of extracting styled-components from all the components - unstyled components. We did it for a few plugins like link, media,... The current solution forces you to look at the code and fork only what you need.

I'll assign this task to @TomMorane

[Viktor19931]

is it a way to make mention editable ?