feat: SlashCommand support renderGroupItem

Author: ljmiaoo

src/extensions/SlashCommand/SlashCommand.ts

@@ -1,17 +1,23 @@
-import type { Editor, Range } from '@tiptap/core';
+import type { Editor, Extensions, Range } from '@tiptap/core';
 import { Extension } from '@tiptap/core';
 import { PluginKey } from '@tiptap/pm/state';
 import { ReactRenderer } from '@tiptap/react';
 import type { SuggestionKeyDownProps, SuggestionProps } from '@tiptap/suggestion';
 import Suggestion from '@tiptap/suggestion';
 import tippy from 'tippy.js';
 
-import { renderGroups } from './groups';
 import CommandsList from '@/extensions/SlashCommand/components/CommandsList';
 
+import { renderGroups } from './groups';
+import { type Group } from './types';
+
+export interface SlashCommandOptions {
+  renderGroupItem?: (extension: Extensions[number], groups:Group[]) => void
+}
+
 const extensionName = 'slashCommand';
 let popup: any;
-export const SlashCommand = Extension.create({
+export const SlashCommand = Extension.create<SlashCommandOptions>({
   name: extensionName,
   priority: 200,
   onCreate() {
@@ -68,7 +74,7 @@ export const SlashCommand = Extension.create({
         items: ({ query, editor }: { query: string, editor: Editor }) => {
           // get options
           // Filter commands
-          const groups = renderGroups(editor.extensionManager.extensions);
+          const groups = renderGroups(editor.extensionManager.extensions, this.options.renderGroupItem);
           const withFilteredCommands = groups.map(group => ({
             ...group,
             commands: group.commands

src/extensions/SlashCommand/groups.ts

@@ -5,9 +5,10 @@ import { actionDialogImage } from '@/extensions/Image/store';
 import { actionDialogVideo } from '@/extensions/Video/store';
 import { localeActions } from '@/locales';
 
+import type { SlashCommandOptions } from './SlashCommand';
 import type { Group } from './types';
 
-export function renderGroups(extensions: Extensions) {
+export function renderGroups(extensions: Extensions, renderGroupItem?: SlashCommandOptions['renderGroupItem']) {
   const groups: Group[] = [
     {
       name: 'format',
@@ -175,6 +176,7 @@ export function renderGroups(extensions: Extensions) {
         },
       });
     }
+    renderGroupItem?.(extension, groups);
   });
 
   return groups;