initial commit 3??

src/lib/pocketbase.ts

@@ -0,0 +1,5 @@
+import PocketBase from 'pocketbase';
+
+export const pb = new PocketBase('https://pocketbase.ccllc.pro');
+
+export const TASGRID_COLLECTION = 'TasGrid';

src/lib/slash-command.ts

@@ -0,0 +1,26 @@
+import { Extension } from "@tiptap/core";
+import Suggestion from "@tiptap/suggestion";
+
+export const SlashCommands = Extension.create({
+    name: "slashCommands",
+
+    addOptions() {
+        return {
+            suggestion: {
+                char: "/",
+                command: ({ editor, range, props }: any) => {
+                    props.command({ editor, range });
+                },
+            },
+        };
+    },
+
+    addProseMirrorPlugins() {
+        return [
+            Suggestion({
+                editor: this.editor,
+                ...this.options.suggestion,
+            }),
+        ];
+    },
+});

src/lib/slash-renderer.tsx

@@ -0,0 +1,81 @@
+import { render } from "solid-js/web";
+import tippy, { type Instance as TippyInstance } from "tippy.js";
+import { SlashMenu, getSuggestionItems } from "../components/SlashMenu";
+
+export const suggestion = {
+    items: getSuggestionItems,
+
+    render: () => {
+        let component: (() => void) | undefined;
+        let popup: TippyInstance | undefined;
+        let container: HTMLDivElement | undefined;
+        let componentHandlers: { onKeyDown: (e: KeyboardEvent) => boolean } | undefined;
+
+        return {
+            onStart: (props: any) => {
+                container = document.createElement("div");
+
+                component = render(
+                    () => <SlashMenu
+                        items={props.items}
+                        command={props.command}
+                        editor={props.editor}
+                        ref={(h) => componentHandlers = h}
+                    />,
+                    container
+                );
+
+                popup = tippy("body", {
+                    getReferenceClientRect: props.clientRect,
+                    appendTo: () => props.editor.options.element || document.body,
+                    content: container,
+                    showOnCreate: true,
+                    interactive: true,
+                    trigger: "manual",
+                    placement: "bottom-start",
+                })[0];
+            },
+
+            onUpdate(props: any) {
+                // Re-rendering to update items
+                if (component) component();
+
+                component = render(
+                    () => <SlashMenu
+                        items={props.items}
+                        command={props.command}
+                        editor={props.editor}
+                        ref={(h) => componentHandlers = h}
+                    />,
+                    container!
+                );
+
+                if (props.clientRect) {
+                    popup?.setProps({
+                        getReferenceClientRect: props.clientRect,
+                    });
+                }
+            },
+
+            onKeyDown(props: any) {
+                if (props.event.key === "Escape") {
+                    popup?.hide();
+                    return true;
+                }
+
+                return componentHandlers?.onKeyDown(props.event) ?? false;
+            },
+
+            onExit() {
+                if (popup && !popup.state.isDestroyed) {
+                    popup.destroy();
+                }
+                popup = undefined;
+                if (component) {
+                    component();
+                    component = undefined;
+                }
+            },
+        };
+    },
+};

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs))
+}