feat: added a twist

2026-04-01 00:53:55 +02:00
parent 0b7deee59e
commit b40c6436cd
76 changed files with 15121 additions and 64 deletions
--- a/frontend/src/routes/EditorView.tsx
+++ b/frontend/src/routes/EditorView.tsx
@@ -0,0 +1,150 @@
+import { useEffect, useRef, useState, useCallback, useMemo } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { toast } from "sonner";
+import { autocompletion } from "@codemirror/autocomplete";
+import { useEditorStore } from "@/stores/editorStore";
+import { usePagesStore } from "@/stores/pagesStore";
+import { useUnsavedGuard } from "@/hooks/useUnsavedGuard";
+import { useCompile } from "@/hooks/useCompile";
+import { uframeHighlight } from "@/components/editor/uframeHighlight";
+import { uframeCommandSource } from "@/components/editor/uframeCommands";
+import EditorPane from "@/components/editor/EditorPane";
+import PreviewPane from "@/components/editor/PreviewPane";
+import ToolBar from "@/components/editor/ToolBar";
+import {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+} from "@/components/ui/resizable";
+
+export default function EditorView() {
+  const { name } = useParams<{ name: string }>();
+  const navigate = useNavigate();
+  const isNew = !name;
+
+  const ufSource = useEditorStore((s) => s.ufSource);
+  const isDirty = useEditorStore((s) => s.isDirty);
+  const setSource = useEditorStore((s) => s.setSource);
+  const setDirty = useEditorStore((s) => s.setDirty);
+  const setCurrentPage = useEditorStore((s) => s.setCurrentPage);
+  const reset = useEditorStore((s) => s.reset);
+
+  const { fetchPages } = usePagesStore();
+  const [pageName, setPageName] = useState(name ?? "");
+  const [saving, setSaving] = useState(false);
+
+  // µFrame extensions: syntax highlighting + slash commands
+  const extensions = useMemo(
+    () => [
+      ...uframeHighlight(),
+      autocompletion({
+        override: [uframeCommandSource],
+        icons: false,
+      }),
+    ],
+    [],
+  );
+
+  // Auto-compile on source changes
+  useCompile();
+  useUnsavedGuard();
+
+  // Fetch pages for backlinks
+  useEffect(() => {
+    fetchPages();
+  }, []);
+
+  // Load page on mount / route change
+  useEffect(() => {
+    reset();
+    if (name) {
+      setPageName(name);
+      fetch(`/api/pages/${name}`)
+        .then((r) => r.json())
+        .then((data) => {
+          if (data.source != null) {
+            useEditorStore.setState({
+              ufSource: data.source,
+              isDirty: false,
+              currentPage: data,
+            });
+          }
+        });
+    }
+    return () => reset();
+  }, [name]);
+
+  const handleSave = useCallback(
+    async (publish: boolean) => {
+      const slug = pageName
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9_-]/g, "-");
+      if (!slug) {
+        toast.error("Enter a page name.");
+        return;
+      }
+      setSaving(true);
+      try {
+        const res = await fetch(`/api/pages/${slug}`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ source: ufSource, publish }),
+        });
+        if (!res.ok) throw new Error(await res.text());
+        const meta = await res.json();
+        setCurrentPage(meta);
+        setDirty(false);
+        fetchPages();
+        toast.success(publish ? "Published" : "Draft saved");
+        if (isNew) navigate(`/editor/${slug}`, { replace: true });
+      } catch (e) {
+        toast.error(`Save failed: ${e}`);
+      } finally {
+        setSaving(false);
+      }
+    },
+    [pageName, ufSource, isNew, navigate],
+  );
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "s") {
+        e.preventDefault();
+        handleSave(false);
+      }
+      if ((e.metaKey || e.ctrlKey) && e.key === "p") {
+        e.preventDefault();
+        handleSave(true);
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [handleSave]);
+
+  return (
+    <div className="flex flex-col h-full">
+      <ToolBar
+        pageName={pageName}
+        onNameChange={isNew ? setPageName : undefined}
+        onSaveDraft={() => handleSave(false)}
+        onPublish={() => handleSave(true)}
+        saving={saving}
+        isDirty={isDirty}
+      />
+      <ResizablePanelGroup orientation="horizontal" className="flex-1">
+        <ResizablePanel defaultSize={50} minSize={20}>
+          <EditorPane
+            value={ufSource}
+            onChange={setSource}
+            extensions={extensions}
+          />
+        </ResizablePanel>
+        <ResizableHandle />
+        <ResizablePanel defaultSize={50} minSize={20}>
+          <PreviewPane />
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </div>
+  );
+}