jackyzha0/cursor-chat

💬 cursor chat à la Figma for digital co-existing + presence

cursor-chat

💬 (63.4kB) lightweight cursor chat à la Figma for digital co-existing + presence

As a warning, this library is for experimental purposes and should not be used in production (but very suitable for personal websites and playful experiments!).

Built on top of yjs and perfect-cursors

For a React version of this library, check out y-presence.

Demo

Press / to start chatting and esc

Usage

Include this fragment in your HTML somewhere to include the base HTML divs, the compiled JavaScript bundle, and the styling.

<div id="cursor-chat-layer">
  <input type="text" id="cursor-chat-box">
</div>
<script type="module">
  import { initCursorChat } from 'https://esm.sh/cursor-chat'
  initCursorChat("your-room-name-here")
</script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/cursor-chat/dist/style.css"/>

cursor-chat's Issues

Fix cursor deletion on stale

cursor-chat/src/main.ts

Line 93 in 6a5b1ff

this.others.delete(concrete.id)

should delete from this.replicated_cursors instead

improvements

• should be able to type "/" while typing
• should have some subtle indicator on webpage when there are multiple people in the same room that instructs using "/" to type to each other
• the typing UX should match what other people see (also so you can see all that you have typed), with some subtle outline to indicate that its your active one
  

Fix cursor-chat div expanding page size

When initializing all the cursors, some old cursors might have document height much larger than the current size. Either don't render new cursors right away or ignore cursor events outside of document size

Chat box is sometimes offset incorrectly

Should be fixed if you add the following:

  top: 0px;
  left: 0px;

to #cursor-chat-layer (too lazy to make a PR).

Example:

(My cursor is at the top right of the selected text)