How to define another key with the same Mention plugin?

[bahrijar]

Question: How to Define Multiple Plugins with Different Keys in Plate Version 39?

In Plate version 36, I was able to define same plugin with different keys like this:

export const plugins = createPlugins(
  [
    createMentionPlugin({
      key: ELEMENT_MENTION,
      options: {
        trigger: '@'
      }
    }),
    createMentionPlugin({
      key: ELEMENT_SMARTDATA_CHIP,
      component: SmartDataChipElement,
      options: {
        trigger: ELEMENT_SMARTDATA_CHIP,
        createMentionNode: (item: {
          smartDataType: unknown,
          smartDataItem: unknown
        }) => {
          return {
            smartDataType: item?.smartDataType,
            smartDataItem: item?.smartDataItem,
          }
        },
      },
      inject: {
        props: {
          validTypes: [
            ELEMENT_PARAGRAPH,
            ELEMENT_H1,
            ELEMENT_H2,
            ELEMENT_H3
          ],
        },
      },
    })
  ]
) 

In Plate version 39, the plugin setup is significantly different, and I'm struggling to achieve the same functionality because some of the functions I relied on in version 36 are no longer available.

Currently, my code in Plate version 39 looks like this:

export const useMyEditor = ({ value }: { value?: MyValue }) => {
  return usePlateEditor({
    plugins: [
      MentionPlugin,
      // MentionPlugin, mention plugin with different key
      MentionInputPlugin,
    ],
    value: value ?? []
  })
}


const onSelectItem = getMentionOnSelectItem<TMentionItemBase
  & {
    smartDataType: {
      label: string
      value: string
    };
    smartDataItem: {
      label: string
      value: string
    };
  }>({ key: ELEMENT_SMARTDATA_CHIP })

My goal is to define another plugin with a different key and additional functionality, as shown in my Plate version 36 setup. Could anyone help me replicate this in Plate version 39?

Thank you for any guidance you can provide!

[zbeyens]

I'd recommend creating a new plugin using https://platejs.org/docs/combobox.

For example:

export type SmartDataChipConfig = PluginConfig<
  'smart_data_chip',
  TriggerComboboxPluginOptions,
  {},
  {
    insert: {
      smartDataChip: (options: { search: string; value: any }) => void;
    };
  }
>;

export const SmartDataChipInputPlugin = createPlatePlugin({
  key: 'smart_data_chip_input',
  node: { isElement: true, isInline: true, isVoid: true },
});

export const SmartDataChipPlugin = createTPlatePlugin<SmartDataChipConfig>({
  key: 'smart_data_chip',
  extendEditor: withTriggerCombobox,
  node: { isElement: true, isInline: true, isMarkableVoid: true, isVoid: true },
  options: {
    trigger,
    triggerPreviousCharPattern: /^\s?$/,
    createComboboxInput: (trigger) => ({
      children: [{ text: '' }],
      trigger,
      type: SmartDataChipInputPlugin.key,
    }),
  },
  plugins: [SmartDataChipInputPlugin],
}).extendEditorTransforms<SmartDataChipConfig['transforms']>(({ editor, type }) => ({
  insert: {
    smartDataChip: ({ value }) => {
      insertNodes<TSmartDataChipElement>(editor, {
        children: [{ text: '' }],
        type,
        value,
      });
    },
  },
}));

[abhi-bc]

^ this is exactly what I have done in my implementation as well. Works pretty good. I even have to clone and modify getMentionOnSelectItem to work seamlessly with 3 different mention plugins.

[bahrijar]

Yes, I have created a new plugin to resolve my case. Thank you for your response