feat: Replace note content textarea with Tiptap rich text editor supporting markdown and slash commands.

k-notes-frontend/src/components/editor/suggestions.tsx

@@ -0,0 +1,128 @@
+
+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();
+        },
+    };
+};