feat: 🎸 add bike-style virtual cursor (#1770)

* feat: 🎸 add bike-style virtual cursor

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: Saul-Mirone

Diff for: packages/crepe/package.json

@@ -72,6 +72,7 @@
     "codemirror": "^6.0.1",
     "katex": "^0.16.0",
     "nanoid": "^5.0.9",
+    "prosemirror-virtual-cursor": "^0.4.2",
     "remark-math": "^6.0.0",
     "tslib": "^2.8.1",
     "unist-util-visit": "^5.0.0"

Diff for: packages/crepe/src/feature/cursor/index.ts

@@ -1,10 +1,13 @@
 import { cursor, dropCursorConfig } from '@milkdown/kit/plugin/cursor'
+import { createVirtualCursor } from 'prosemirror-virtual-cursor'
 
 import type { DefineFeature } from '../shared'
+import { $prose } from '@milkdown/kit/utils'
 
 interface CursorConfig {
   color: string | false
   width: number
+  virtual: boolean
 }
 export type CursorFeatureConfig = Partial<CursorConfig>
 
@@ -21,4 +24,11 @@ export const defineFeature: DefineFeature<CursorFeatureConfig> = (
       }))
     })
     .use(cursor)
+
+  if (config?.virtual === false) {
+    return
+  }
+
+  const virtualCursor = createVirtualCursor()
+  editor.use($prose(() => virtualCursor))
 }

Diff for: packages/crepe/src/theme/common/cursor.css

@@ -1,4 +1,5 @@
 @import '@milkdown/kit/prose/gapcursor/style/gapcursor.css';
+@import 'prosemirror-virtual-cursor/style/virtual-cursor.css';
 
 .milkdown {
   .crepe-drop-cursor {
@@ -16,4 +17,8 @@
     box-sizing: border-box;
     border-top: 1px solid var(--crepe-color-on-background);
   }
+
+  .ProseMirror-focused {
+    --prosemirror-virtual-cursor-color: var(--crepe-color-outline);
+  }
 }