feat: use css variable to override cursor color

README.md

@@ -14,7 +14,7 @@ https://user-images.githubusercontent.com/24715727/202461170-6df71a46-f0a5-492a-
 npm install prosemirror-virtual-cursor
 ```
 
-## Usage 
+## Usage
 
 ```ts
 import 'prosemirror-virtual-cursor/style/virtual-cursor.css'
@@ -24,6 +24,8 @@ import { createVirtualCursor } from 'prosemirror-virtual-cursor'
 const plugin = createVirtualCursor()
 ```
 
+The default color of the cursor is red. You can change it by overriding the CSS variable `--prosemirror-virtual-cursor-color`. You can also copy all the CSS rules from `prosemirror-virtual-cursor/style/virtual-cursor.css` to your own stylesheet and change more things.
+
 ## License
 
 MIT

playground/main.ts

@@ -13,7 +13,7 @@ import { schema } from 'prosemirror-schema-basic'
 import { addListNodes } from 'prosemirror-schema-list'
 import { exampleSetup } from 'prosemirror-example-setup'
 
-import { createVirtualCursor } from 'prosemirror-virtual-cursor'
+import { createVirtualCursor } from '../src/index'
 
 const demoSchema = new Schema({
   nodes: addListNodes(schema.spec.nodes as any, 'paragraph block*', 'block'),

src/index.ts

@@ -113,7 +113,6 @@ export function createVirtualCursor(): Plugin {
 function createCursor(className: string) {
   const span = document.createElement('span')
   span.className = className
-  span.textContent = '\u200B' /* ZERO_WIDTH_SPACE */
   return span
 }
 

style/virtual-cursor.css

@@ -1,6 +1,9 @@
 .ProseMirror {
   /* Hide the native cursor */
   caret-color: transparent;
+
+  /* Color of the virtual cursor */
+  --prosemirror-virtual-cursor-color: red;
 }
 
 .ProseMirror .prosemirror-virtual-cursor {
@@ -10,24 +13,30 @@
   transform: translate(-1px);
   user-select: none;
   animation: prosemirror-virtual-cursor-blink 1s linear infinite;
-  border-left: 2px solid red;
+  animation-delay: 0.5s;
+  border-left: 2px solid var(--prosemirror-virtual-cursor-color);
 }
 
-.ProseMirror .prosemirror-virtual-cursor-right {
-  width: 1ch;
-  border-bottom: 2px solid red;
-  border-left: 2px solid red;
-  border-right: none;
+.ProseMirror .prosemirror-virtual-cursor:before {
+  /* Add a ZERO_WIDTH_SPACE here to make sure the cursor has normal height */
+  content: "\200B";
 }
 
 .ProseMirror .prosemirror-virtual-cursor-left {
   width: 1ch;
   transform: translate(calc(-1ch + -1px));
-  border-bottom: 2px solid red;
-  border-right: 2px solid red;
+  border-bottom: 2px solid var(--prosemirror-virtual-cursor-color);
+  border-right: 2px solid var(--prosemirror-virtual-cursor-color);
   border-left: none;
 }
 
+.ProseMirror .prosemirror-virtual-cursor-right {
+  width: 1ch;
+  border-bottom: 2px solid var(--prosemirror-virtual-cursor-color);
+  border-left: 2px solid var(--prosemirror-virtual-cursor-color);
+  border-right: none;
+}
+
 @keyframes prosemirror-virtual-cursor-blink {
   0% {
     opacity: 1;