129 lines
3.8 KiB
TypeScript
129 lines
3.8 KiB
TypeScript
|
|
import { ReactRenderer } from '@tiptap/react';
|
|
import tippy from 'tippy.js';
|
|
import { CommandList } from './command-list';
|
|
import { Heading1, Heading2, Heading3, List, ListOrdered, CheckSquare, Type, Quote, Code } from 'lucide-react';
|
|
|
|
export const getSuggestionItems = ({ query }: { query: string }) => {
|
|
return [
|
|
{
|
|
title: 'Text',
|
|
icon: <Type size={18} />,
|
|
command: ({ editor, range }: any) => {
|
|
editor.chain().focus().deleteRange(range).setParagraph().run();
|
|
},
|
|
},
|
|
{
|
|
title: 'Heading 1',
|
|
icon: <Heading1 size={18} />,
|
|
command: ({ editor, range }: any) => {
|
|
editor.chain().focus().deleteRange(range).setNode('heading', { level: 1 }).run();
|
|
},
|
|
},
|
|
{
|
|
title: 'Heading 2',
|
|
icon: <Heading2 size={18} />,
|
|
command: ({ editor, range }: any) => {
|
|
editor.chain().focus().deleteRange(range).setNode('heading', { level: 2 }).run();
|
|
},
|
|
},
|
|
{
|
|
title: 'Heading 3',
|
|
icon: <Heading3 size={18} />,
|
|
command: ({ editor, range }: any) => {
|
|
editor.chain().focus().deleteRange(range).setNode('heading', { level: 3 }).run();
|
|
},
|
|
},
|
|
{
|
|
title: 'Ordered List',
|
|
icon: <ListOrdered size={18} />,
|
|
command: ({ editor, range }: any) => {
|
|
editor.chain().focus().deleteRange(range).toggleOrderedList().run();
|
|
},
|
|
},
|
|
{
|
|
title: 'Bullet List',
|
|
icon: <List size={18} />,
|
|
command: ({ editor, range }: any) => {
|
|
editor.chain().focus().deleteRange(range).toggleBulletList().run();
|
|
},
|
|
},
|
|
{
|
|
title: 'Task List',
|
|
icon: <CheckSquare size={18} />,
|
|
command: ({ editor, range }: any) => {
|
|
editor.chain().focus().deleteRange(range).toggleTaskList().run();
|
|
},
|
|
},
|
|
{
|
|
title: 'Blockquote',
|
|
icon: <Quote size={18} />,
|
|
command: ({ editor, range }: any) => {
|
|
editor.chain().focus().deleteRange(range).toggleBlockquote().run();
|
|
}
|
|
},
|
|
{
|
|
title: 'Code Block',
|
|
icon: <Code size={18} />,
|
|
command: ({ editor, range }: any) => {
|
|
editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
|
|
}
|
|
}
|
|
].filter((item) => item.title.toLowerCase().startsWith(query.toLowerCase()));
|
|
};
|
|
|
|
export const renderItems = () => {
|
|
let component: any;
|
|
let popup: any;
|
|
|
|
return {
|
|
onStart: (props: any) => {
|
|
component = new ReactRenderer(CommandList, {
|
|
props,
|
|
editor: props.editor,
|
|
});
|
|
|
|
if (!props.clientRect) {
|
|
return;
|
|
}
|
|
|
|
popup = tippy('body', {
|
|
getReferenceClientRect: props.clientRect,
|
|
appendTo: () => document.body,
|
|
content: component.element,
|
|
showOnCreate: true,
|
|
interactive: true,
|
|
trigger: 'manual',
|
|
placement: 'bottom-start',
|
|
});
|
|
},
|
|
|
|
onUpdate(props: any) {
|
|
component.updateProps(props);
|
|
|
|
if (!props.clientRect) {
|
|
return;
|
|
}
|
|
|
|
popup[0].setProps({
|
|
getReferenceClientRect: props.clientRect,
|
|
});
|
|
},
|
|
|
|
onKeyDown(props: any) {
|
|
if (props.event.key === 'Escape') {
|
|
popup[0].hide();
|
|
|
|
return true;
|
|
}
|
|
|
|
return component.ref?.onKeyDown(props);
|
|
},
|
|
|
|
onExit() {
|
|
popup[0].destroy();
|
|
component.destroy();
|
|
},
|
|
};
|
|
};
|