Support adding custom class names

[remcohaszing]

In #15 introduced the ability was introduced to generate class names based based on a client ID. This is useful, but I prefer to use predefined classes instead of generating stylesheets at runtime.

[dmonad]

We already have the yRemoteSelection[Head] classes. Note that we have both yRemoteSelection and yRemoteSelection-{clientid}. This PR simply adds another class name to every selection. Why don't you use yRemoteSelection[Head]?

[remcohaszing]

The yRemoteSelection-{clientid} classes require the CSS to be generated in JavaScript, but often it’s more desirable to use pre-existing classes.

Also we use TailwindCSS. In order to use that at all we need to use predefined classes.

In the mean time I figured out I need to color the cursors based on the user who has connected. I think this means my solution proposed here isn’t even flexible enough.

I suggest to make the class name I proposed earlier a function that gets called with the both the selection and the client ID.

const classNames = [
  'border-orange-400',
  'border-green-400',
  'border-sky-400',
  'border-violet-400',
  'border-rose-400',
  'border-amber-400',
  'border-lime-400',
  'border-fuchsia-400'
]

function getClassName(clientId, state) {
  return classNames[state.userId % classNames.length]
}

const awareness = new Awareness(ydoc)
awareness.setLocalStateField('userId', userId)

const binding = new MonacoBinding(ytext, model, new Set([editor]), awareness, getClassName)

[haines]

This results in a parameter type of getClassName: ClassNameGetter | null | undefined, so we get "Object is possibly null" errors when it is invoked.

Dropping the ? produces the correct parameter type getClassName: ClassNameGetter | undefined.

Suggested change

	* @param {ClassNameGetter?} [getClassName]
	* @param {ClassNameGetter} [getClassName]