feat: react prosemirror

apps/desktop/package.json

@@ -33,7 +33,9 @@
     "@codemirror/state": "^6.5.4",
     "@codemirror/view": "^6.39.13",
     "@effect/schema": "^0.75.5",
+    "@floating-ui/dom": "^1.7.6",
     "@floating-ui/react": "^0.27.17",
+    "@handlewithcare/react-prosemirror": "^2.8.4",
     "@hypr/api-client": "workspace:*",
     "@hypr/changelog": "workspace:^",
     "@hypr/codemirror": "workspace:^",
@@ -133,6 +135,17 @@
     "nlcst-to-string": "^4.0.0",
     "ollama": "^0.6.3",
     "posthog-js": "^1.358.0",
+    "prosemirror-commands": "^1.7.1",
+    "prosemirror-dropcursor": "^1.8.2",
+    "prosemirror-gapcursor": "^1.4.1",
+    "prosemirror-history": "^1.5.0",
+    "prosemirror-inputrules": "^1.5.1",
+    "prosemirror-keymap": "^1.2.3",
+    "prosemirror-model": "^1.25.4",
+    "prosemirror-schema-list": "^1.5.1",
+    "prosemirror-search": "^1.1.0",
+    "prosemirror-state": "^1.4.4",
+    "prosemirror-view": "^1.41.6",
     "re-resizable": "^6.11.2",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
@@ -147,6 +160,7 @@
     "streamdown": "^2.2.0",
     "tinybase": "^7.3.2",
     "tinytick": "^1.2.8",
+    "tlds": "^1.261.0",
     "unified": "^11.0.5",
     "usehooks-ts": "^3.1.1",
     "vfile": "^6.0.3",

apps/desktop/src/ai/prompts/details.tsx

@@ -1,9 +1,10 @@
 import { useCallback, useEffect, useState } from "react";
 
 import { commands as templateCommands } from "@hypr/plugin-template";
-import { PromptEditor } from "@hypr/tiptap/prompt";
 import { Button } from "@hypr/ui/components/ui/button";
 
+import { PromptEditor } from "./editor";
+
 import * as main from "~/store/tinybase/store/main";
 import {
   AVAILABLE_FILTERS,

apps/desktop/src/ai/prompts/editor.tsx

@@ -0,0 +1,140 @@
+import { EditorState, type Extension } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import CodeMirror from "@uiw/react-codemirror";
+import readOnlyRangesExtension from "codemirror-readonly-ranges";
+import { useCallback, useMemo } from "react";
+
+import { jinjaLanguage, jinjaLinter, readonlyVisuals } from "./jinja";
+
+export interface ReadOnlyRange {
+  from: number;
+  to: number;
+}
+
+interface PromptEditorProps {
+  value: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  readOnly?: boolean;
+  readOnlyRanges?: ReadOnlyRange[];
+  variables?: string[];
+  filters?: string[];
+}
+
+export function PromptEditor({
+  value,
+  onChange,
+  placeholder,
+  readOnly = false,
+  readOnlyRanges = [],
+  variables = [],
+  filters = [],
+}: PromptEditorProps) {
+  const getReadOnlyRanges = useCallback(
+    (_state: EditorState) => {
+      if (readOnly || readOnlyRanges.length === 0) {
+        return [];
+      }
+
+      return readOnlyRanges.map((range) => ({
+        from: range.from,
+        to: range.to,
+      }));
+    },
+    [readOnly, readOnlyRanges],
+  );
+
+  const getRangesForVisuals = useCallback(() => {
+    return readOnlyRanges;
+  }, [readOnlyRanges]);
+
+  const extensions = useMemo(() => {
+    const exts: Extension[] = [
+      jinjaLanguage(variables, filters),
+      jinjaLinter(),
+    ];
+
+    if (!readOnly && readOnlyRanges.length > 0) {
+      exts.push(readOnlyRangesExtension(getReadOnlyRanges));
+      exts.push(readonlyVisuals(getRangesForVisuals));
+    }
+
+    return exts;
+  }, [
+    readOnly,
+    readOnlyRanges,
+    getReadOnlyRanges,
+    getRangesForVisuals,
+    variables,
+    filters,
+  ]);
+
+  const theme = useMemo(
+    () =>
+      EditorView.theme({
+        "&": {
+          height: "100%",
+          fontFamily:
+            "var(--font-mono, 'Menlo', 'Monaco', 'Courier New', monospace)",
+          fontSize: "13px",
+          lineHeight: "1.6",
+        },
+        ".cm-content": {
+          padding: "8px 0",
+        },
+        ".cm-line": {
+          padding: "0 12px",
+        },
+        ".cm-scroller": {
+          overflow: "auto",
+        },
+        "&.cm-focused": {
+          outline: "none",
+        },
+        ".cm-placeholder": {
+          color: "#999",
+          fontStyle: "italic",
+        },
+        ".cm-readonly-region": {
+          backgroundColor: "rgba(0, 0, 0, 0.04)",
+          borderRadius: "2px",
+        },
+        ".cm-tooltip-autocomplete": {
+          border: "1px solid #e5e7eb",
+          borderRadius: "6px",
+          boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+          backgroundColor: "#fff",
+        },
+        ".cm-tooltip-autocomplete ul li": {
+          padding: "4px 8px",
+        },
+        ".cm-tooltip-autocomplete ul li[aria-selected]": {
+          backgroundColor: "#f3f4f6",
+        },
+        ".cm-diagnostic-error": {
+          borderBottom: "2px wavy #ef4444",
+        },
+        ".cm-lintPoint-error:after": {
+          borderBottomColor: "#ef4444",
+        },
+      }),
+    [],
+  );
+
+  return (
+    <CodeMirror
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+      readOnly={readOnly}
+      basicSetup={{
+        lineNumbers: false,
+        foldGutter: false,
+        highlightActiveLineGutter: false,
+        highlightActiveLine: false,
+      }}
+      extensions={[theme, ...extensions]}
+      height="100%"
+    />
+  );
+}