initial commit 3??

2026-01-30 14:10:11 -06:00
parent 34bbe8e98f
commit f2a75c954f
42 changed files with 3935 additions and 1 deletions
@@ -0,0 +1,164 @@
+import { type Component, createSignal, For, createEffect } from "solid-js";
+import {
+    Heading1, Heading2, Heading3,
+    List, ListTodo, Type,
+    Code, Quote
+} from "lucide-solid";
+import { cn } from "@/lib/utils";
+
+export interface CommandItem {
+    title: string;
+    description: string;
+    icon: any;
+    command: (props: { editor: any; range: any }) => void;
+}
+
+export const getSuggestionItems = ({ query }: { query: string }): CommandItem[] => {
+    return [
+        {
+            title: "Text",
+            description: "Just start typing with plain text.",
+            icon: Type,
+            command: ({ editor, range }: { editor: any, range: any }) => {
+                editor.chain().focus().deleteRange(range).setNode("paragraph").run();
+            },
+        },
+        {
+            title: "Heading 1",
+            description: "Big section heading.",
+            icon: Heading1,
+            command: ({ editor, range }: { editor: any, range: any }) => {
+                editor.chain().focus().deleteRange(range).setNode("heading", { level: 1 }).run();
+            },
+        },
+        {
+            title: "Heading 2",
+            description: "Medium section heading.",
+            icon: Heading2,
+            command: ({ editor, range }: { editor: any, range: any }) => {
+                editor.chain().focus().deleteRange(range).setNode("heading", { level: 2 }).run();
+            },
+        },
+        {
+            title: "Heading 3",
+            description: "Small section heading.",
+            icon: Heading3,
+            command: ({ editor, range }: { editor: any, range: any }) => {
+                editor.chain().focus().deleteRange(range).setNode("heading", { level: 3 }).run();
+            },
+        },
+        {
+            title: "Bullet List",
+            description: "Create a simple bulleted list.",
+            icon: List,
+            command: ({ editor, range }: { editor: any, range: any }) => {
+                editor.chain().focus().deleteRange(range).toggleBulletList().run();
+            },
+        },
+        {
+            title: "Task List",
+            description: "Track tasks with a checklist.",
+            icon: ListTodo,
+            command: ({ editor, range }: { editor: any, range: any }) => {
+                editor.chain().focus().deleteRange(range).toggleTaskList().run();
+            },
+        },
+        {
+            title: "Code Block",
+            description: "Capture a code snippet.",
+            icon: Code,
+            command: ({ editor, range }: { editor: any, range: any }) => {
+                editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
+            },
+        },
+        {
+            title: "Blockquote",
+            description: "Capture a quote.",
+            icon: Quote,
+            command: ({ editor, range }: { editor: any, range: any }) => {
+                editor.chain().focus().deleteRange(range).toggleBlockquote().run();
+            },
+        },
+    ].filter(item => item.title.toLowerCase().startsWith(query.toLowerCase()));
+};
+
+export const SlashMenu: Component<{
+    items: CommandItem[];
+    command: (item: CommandItem) => void;
+    editor: any;
+    ref: (handlers: { onKeyDown: (e: KeyboardEvent) => boolean }) => void;
+}> = (props) => {
+    const [selectedIndex, setSelectedIndex] = createSignal(0);
+
+    // Auto-select the first item when the list changes (filtering)
+    createEffect(() => {
+        // We track props.items. When it changes, we reset.
+        props.items;
+        setSelectedIndex(0);
+    });
+
+    const selectItem = (index: number) => {
+        const item = props.items[index];
+        if (item) {
+            props.command(item);
+        }
+    };
+
+    // Expose handlers to the parent via the ref prop
+    props.ref({
+        onKeyDown: (e: KeyboardEvent) => {
+            if (e.key === "ArrowUp") {
+                setSelectedIndex((prev) => (prev + props.items.length - 1) % props.items.length);
+                return true;
+            }
+            if (e.key === "ArrowDown") {
+                setSelectedIndex((prev) => (prev + 1) % props.items.length);
+                return true;
+            }
+            if (e.key === "Enter") {
+                selectItem(selectedIndex());
+                return true;
+            }
+            return false;
+        }
+    });
+
+    return (
+        <div
+            class="z-[200] w-64 bg-popover border border-border rounded-lg shadow-xl overflow-hidden p-1 bg-background pointer-events-auto"
+            onMouseDown={(e) => e.stopPropagation()}
+            onWheel={(e) => e.stopPropagation()}
+        >
+            <div class="max-h-[300px] overflow-y-auto scrollbar-thin scrollbar-thumb-muted-foreground/20 overscroll-contain">
+                <For each={props.items}>
+                    {(item, index) => (
+                        <button
+                            class={cn(
+                                "flex items-center gap-3 w-full px-2 py-1.5 text-left rounded-md transition-colors outline-none",
+                                index() === selectedIndex() ? "bg-accent text-accent-foreground" : "hover:bg-muted"
+                            )}
+                            onMouseDown={(e) => {
+                                // Prevent editor focus loss and side-sheet closure
+                                e.preventDefault();
+                                e.stopPropagation();
+                                selectItem(index());
+                            }}
+                            onMouseEnter={() => setSelectedIndex(index())}
+                        >
+                            <div class="flex items-center justify-center w-8 h-8 rounded border border-border bg-muted/50 text-muted-foreground shrink-0">
+                                <item.icon size={16} />
+                            </div>
+                            <div class="flex flex-col min-w-0 overflow-hidden">
+                                <span class="text-sm font-medium leading-none">{item.title}</span>
+                                <span class="text-[11px] text-muted-foreground truncate mt-1">{item.description}</span>
+                            </div>
+                        </button>
+                    )}
+                </For>
+                {props.items.length === 0 && (
+                    <div class="p-2 text-xs text-muted-foreground text-center">No results found</div>
+                )}
+            </div>
+        </div>
+    );
+};