@axure/y-prosemirror 1.3.7-fork.2

package/src/lib.js

@@ -0,0 +1,440 @@
+import { updateYFragment, createNodeFromYElement, yattr2markname, createEmptyMeta } from './plugins/sync-plugin.js' // eslint-disable-line
+import { ySyncPluginKey } from './plugins/keys.js'
+import * as Y from 'yjs'
+import { EditorView } from 'prosemirror-view' // eslint-disable-line
+import { Node, Schema, Fragment } from 'prosemirror-model' // eslint-disable-line
+import * as error from 'lib0/error'
+import * as map from 'lib0/map'
+import * as eventloop from 'lib0/eventloop'
+
+/**
+ * Either a node if type is YXmlElement or an Array of text nodes if YXmlText
+ * @typedef {Map<Y.AbstractType, Node | Array<Node>>} ProsemirrorMapping
+ */
+
+/**
+ * Is null if no timeout is in progress.
+ * Is defined if a timeout is in progress.
+ * Maps from view
+ * @type {Map<EditorView, Map<any, any>>|null}
+ */
+let viewsToUpdate = null
+
+const updateMetas = () => {
+  const ups = /** @type {Map<EditorView, Map<any, any>>} */ (viewsToUpdate)
+  viewsToUpdate = null
+  ups.forEach((metas, view) => {
+    const tr = view.state.tr
+    const syncState = ySyncPluginKey.getState(view.state)
+    if (syncState && syncState.binding && !syncState.binding.isDestroyed) {
+      metas.forEach((val, key) => {
+        tr.setMeta(key, val)
+      })
+      view.dispatch(tr)
+    }
+  })
+}
+
+export const setMeta = (view, key, value) => {
+  if (!viewsToUpdate) {
+    viewsToUpdate = new Map()
+    eventloop.timeout(0, updateMetas)
+  }
+  map.setIfUndefined(viewsToUpdate, view, map.create).set(key, value)
+}
+
+/**
+ * Transforms a Prosemirror based absolute position to a Yjs Cursor (relative position in the Yjs model).
+ *
+ * @param {number} pos
+ * @param {Y.XmlFragment} type
+ * @param {ProsemirrorMapping} mapping
+ * @return {any} relative position
+ */
+export const absolutePositionToRelativePosition = (pos, type, mapping) => {
+  if (pos === 0) {
+    // if the type is later populated, we want to retain the 0 position (hence assoc=-1)
+    return Y.createRelativePositionFromTypeIndex(type, 0, type.length === 0 ? -1 : 0)
+  }
+  /**
+   * @type {any}
+   */
+  let n = type._first === null ? null : /** @type {Y.ContentType} */ (type._first.content).type
+  while (n !== null && type !== n) {
+    if (n instanceof Y.XmlText) {
+      if (n._length >= pos) {
+        return Y.createRelativePositionFromTypeIndex(n, pos, type.length === 0 ? -1 : 0)
+      } else {
+        pos -= n._length
+      }
+      if (n._item !== null && n._item.next !== null) {
+        n = /** @type {Y.ContentType} */ (n._item.next.content).type
+      } else {
+        do {
+          n = n._item === null ? null : n._item.parent
+          pos--
+        } while (n !== type && n !== null && n._item !== null && n._item.next === null)
+        if (n !== null && n !== type) {
+          // @ts-gnore we know that n.next !== null because of above loop conditition
+          n = n._item === null ? null : /** @type {Y.ContentType} */ (/** @type Y.Item */ (n._item.next).content).type
+        }
+      }
+    } else {
+      const pNodeSize = /** @type {any} */ (mapping.get(n) || { nodeSize: 0 }).nodeSize
+      if (n._first !== null && pos < pNodeSize) {
+        n = /** @type {Y.ContentType} */ (n._first.content).type
+        pos--
+      } else {
+        if (pos === 1 && n._length === 0 && pNodeSize > 1) {
+          // edge case, should end in this paragraph
+          return new Y.RelativePosition(n._item === null ? null : n._item.id, n._item === null ? Y.findRootTypeKey(n) : null, null)
+        }
+        pos -= pNodeSize
+        if (n._item !== null && n._item.next !== null) {
+          n = /** @type {Y.ContentType} */ (n._item.next.content).type
+        } else {
+          if (pos === 0) {
+            // set to end of n.parent
+            n = n._item === null ? n : n._item.parent
+            return new Y.RelativePosition(n._item === null ? null : n._item.id, n._item === null ? Y.findRootTypeKey(n) : null, null)
+          }
+          do {
+            n = /** @type {Y.Item} */ (n._item).parent
+            pos--
+          } while (n !== type && /** @type {Y.Item} */ (n._item).next === null)
+          // if n is null at this point, we have an unexpected case
+          if (n !== type) {
+            // We know that n._item.next is defined because of above loop condition
+            n = /** @type {Y.ContentType} */ (/** @type {Y.Item} */ (/** @type {Y.Item} */ (n._item).next).content).type
+          }
+        }
+      }
+    }
+    if (n === null) {
+      throw error.unexpectedCase()
+    }
+    if (pos === 0 && n.constructor !== Y.XmlText && n !== type) { // TODO: set to <= 0
+      return createRelativePosition(n._item.parent, n._item)
+    }
+  }
+  return Y.createRelativePositionFromTypeIndex(type, type._length, type.length === 0 ? -1 : 0)
+}
+
+const createRelativePosition = (type, item) => {
+  let typeid = null
+  let tname = null
+  if (type._item === null) {
+    tname = Y.findRootTypeKey(type)
+  } else {
+    typeid = Y.createID(type._item.id.client, type._item.id.clock)
+  }
+  return new Y.RelativePosition(typeid, tname, item.id)
+}
+
+/**
+ * @param {Y.Doc} y
+ * @param {Y.XmlFragment} documentType Top level type that is bound to pView
+ * @param {any} relPos Encoded Yjs based relative position
+ * @param {ProsemirrorMapping} mapping
+ * @return {null|number}
+ */
+export const relativePositionToAbsolutePosition = (y, documentType, relPos, mapping) => {
+  const decodedPos = Y.createAbsolutePositionFromRelativePosition(relPos, y)
+  if (decodedPos === null || (decodedPos.type !== documentType && !Y.isParentOf(documentType, decodedPos.type._item))) {
+    return null
+  }
+  let type = decodedPos.type
+  let pos = 0
+  if (type.constructor === Y.XmlText) {
+    pos = decodedPos.index
+  } else if (type._item === null || !type._item.deleted) {
+    let n = type._first
+    let i = 0
+    while (i < type._length && i < decodedPos.index && n !== null) {
+      if (!n.deleted) {
+        const t = /** @type {Y.ContentType} */ (n.content).type
+        i++
+        if (t instanceof Y.XmlText) {
+          pos += t._length
+        } else {
+          pos += /** @type {any} */ (mapping.get(t)).nodeSize
+        }
+      }
+      n = /** @type {Y.Item} */ (n.right)
+    }
+    pos += 1 // increase because we go out of n
+  }
+  while (type !== documentType && type._item !== null) {
+    // @ts-ignore
+    const parent = type._item.parent
+    // @ts-ignore
+    if (parent._item === null || !parent._item.deleted) {
+      pos += 1 // the start tag
+      let n = /** @type {Y.AbstractType} */ (parent)._first
+      // now iterate until we found type
+      while (n !== null) {
+        const contentType = /** @type {Y.ContentType} */ (n.content).type
+        if (contentType === type) {
+          break
+        }
+        if (!n.deleted) {
+          if (contentType instanceof Y.XmlText) {
+            pos += contentType._length
+          } else {
+            pos += /** @type {any} */ (mapping.get(contentType)).nodeSize
+          }
+        }
+        n = n.right
+      }
+    }
+    type = /** @type {Y.AbstractType} */ (parent)
+  }
+  return pos - 1 // we don't count the most outer tag, because it is a fragment
+}
+
+/**
+ * Utility function for converting an Y.Fragment to a ProseMirror fragment.
+ *
+ * @param {Y.XmlFragment} yXmlFragment
+ * @param {Schema} schema
+ */
+export const yXmlFragmentToProseMirrorFragment = (yXmlFragment, schema) => {
+  const fragmentContent = yXmlFragment.toArray().map((t) =>
+    createNodeFromYElement(
+      /** @type {Y.XmlElement} */ (t),
+      schema,
+      createEmptyMeta()
+    )
+  ).filter((n) => n !== null)
+  return Fragment.fromArray(fragmentContent)
+}
+
+/**
+ * Utility function for converting an Y.Fragment to a ProseMirror node.
+ *
+ * @param {Y.XmlFragment} yXmlFragment
+ * @param {Schema} schema
+ */
+export const yXmlFragmentToProseMirrorRootNode = (yXmlFragment, schema) =>
+  schema.topNodeType.create(null, yXmlFragmentToProseMirrorFragment(yXmlFragment, schema))
+
+/**
+ * The initial ProseMirror content should be supplied by Yjs. This function transforms a Y.Fragment
+ * to a ProseMirror Doc node and creates a mapping that is used by the sync plugin.
+ *
+ * @param {Y.XmlFragment} yXmlFragment
+ * @param {Schema} schema
+ *
+ * @todo deprecate mapping property
+ */
+export const initProseMirrorDoc = (yXmlFragment, schema) => {
+  const meta = createEmptyMeta()
+  const fragmentContent = yXmlFragment.toArray().map((t) =>
+    createNodeFromYElement(
+      /** @type {Y.XmlElement} */ (t),
+      schema,
+      meta
+    )
+  ).filter((n) => n !== null)
+  const doc = schema.topNodeType.create(null, Fragment.fromArray(fragmentContent))
+  return { doc, meta, mapping: meta.mapping }
+}
+
+/**
+ * Utility method to convert a Prosemirror Doc Node into a Y.Doc.
+ *
+ * This can be used when importing existing content to Y.Doc for the first time,
+ * note that this should not be used to rehydrate a Y.Doc from a database once
+ * collaboration has begun as all history will be lost
+ *
+ * @param {Node} doc
+ * @param {string} xmlFragment
+ * @return {Y.Doc}
+ */
+export function prosemirrorToYDoc (doc, xmlFragment = 'prosemirror') {
+  const ydoc = new Y.Doc()
+  const type = /** @type {Y.XmlFragment} */ (ydoc.get(xmlFragment, Y.XmlFragment))
+  if (!type.doc) {
+    return ydoc
+  }
+
+  prosemirrorToYXmlFragment(doc, type)
+  return type.doc
+}
+
+/**
+ * Utility method to update an empty Y.XmlFragment with content from a Prosemirror Doc Node.
+ *
+ * This can be used when importing existing content to Y.Doc for the first time,
+ * note that this should not be used to rehydrate a Y.Doc from a database once
+ * collaboration has begun as all history will be lost
+ *
+ * Note: The Y.XmlFragment does not need to be part of a Y.Doc document at the time that this
+ * method is called, but it must be added before any other operations are performed on it.
+ *
+ * @param {Node} doc prosemirror document.
+ * @param {Y.XmlFragment} [xmlFragment] If supplied, an xml fragment to be
+ *   populated from the prosemirror state; otherwise a new XmlFragment will be created.
+ * @return {Y.XmlFragment}
+ */
+export function prosemirrorToYXmlFragment (doc, xmlFragment) {
+  const type = xmlFragment || new Y.XmlFragment()
+  const ydoc = type.doc ? type.doc : { transact: (transaction) => transaction(undefined) }
+  updateYFragment(ydoc, type, doc, { mapping: new Map(), isOMark: new Map() })
+  return type
+}
+
+/**
+ * Utility method to convert Prosemirror compatible JSON into a Y.Doc.
+ *
+ * This can be used when importing existing content to Y.Doc for the first time,
+ * note that this should not be used to rehydrate a Y.Doc from a database once
+ * collaboration has begun as all history will be lost
+ *
+ * @param {Schema} schema
+ * @param {any} state
+ * @param {string} xmlFragment
+ * @return {Y.Doc}
+ */
+export function prosemirrorJSONToYDoc (schema, state, xmlFragment = 'prosemirror') {
+  const doc = Node.fromJSON(schema, state)
+  return prosemirrorToYDoc(doc, xmlFragment)
+}
+
+/**
+ * Utility method to convert Prosemirror compatible JSON to a Y.XmlFragment
+ *
+ * This can be used when importing existing content to Y.Doc for the first time,
+ * note that this should not be used to rehydrate a Y.Doc from a database once
+ * collaboration has begun as all history will be lost
+ *
+ * @param {Schema} schema
+ * @param {any} state
+ * @param {Y.XmlFragment} [xmlFragment] If supplied, an xml fragment to be
+ *   populated from the prosemirror state; otherwise a new XmlFragment will be created.
+ * @return {Y.XmlFragment}
+ */
+export function prosemirrorJSONToYXmlFragment (schema, state, xmlFragment) {
+  const doc = Node.fromJSON(schema, state)
+  return prosemirrorToYXmlFragment(doc, xmlFragment)
+}
+
+/**
+ * @deprecated Use `yXmlFragmentToProseMirrorRootNode` instead
+ *
+ * Utility method to convert a Y.Doc to a Prosemirror Doc node.
+ *
+ * @param {Schema} schema
+ * @param {Y.Doc} ydoc
+ * @return {Node}
+ */
+export function yDocToProsemirror (schema, ydoc) {
+  const state = yDocToProsemirrorJSON(ydoc)
+  return Node.fromJSON(schema, state)
+}
+
+/**
+ *
+ * @deprecated Use `yXmlFragmentToProseMirrorRootNode` instead
+ *
+ * Utility method to convert a Y.XmlFragment to a Prosemirror Doc node.
+ *
+ * @param {Schema} schema
+ * @param {Y.XmlFragment} xmlFragment
+ * @return {Node}
+ */
+export function yXmlFragmentToProsemirror (schema, xmlFragment) {
+  const state = yXmlFragmentToProsemirrorJSON(xmlFragment)
+  return Node.fromJSON(schema, state)
+}
+
+/**
+ *
+ * @deprecated Use `yXmlFragmentToProseMirrorRootNode` instead
+ *
+ * Utility method to convert a Y.Doc to Prosemirror compatible JSON.
+ *
+ * @param {Y.Doc} ydoc
+ * @param {string} xmlFragment
+ * @return {Record<string, any>}
+ */
+export function yDocToProsemirrorJSON (
+  ydoc,
+  xmlFragment = 'prosemirror'
+) {
+  return yXmlFragmentToProsemirrorJSON(ydoc.getXmlFragment(xmlFragment))
+}
+
+/**
+ * @deprecated Use `yXmlFragmentToProseMirrorRootNode` instead
+ *
+ * Utility method to convert a Y.Doc to Prosemirror compatible JSON.
+ *
+ * @param {Y.XmlFragment} xmlFragment The fragment, which must be part of a Y.Doc.
+ * @return {Record<string, any>}
+ */
+export function yXmlFragmentToProsemirrorJSON (xmlFragment) {
+  const items = xmlFragment.toArray()
+
+  /**
+   * @param {Y.AbstractType} item
+   */
+  const serialize = item => {
+    /**
+     * @type {Object} NodeObject
+     * @property {string} NodeObject.type
+     * @property {Record<string, string>=} NodeObject.attrs
+     * @property {Array<NodeObject>=} NodeObject.content
+     */
+    let response
+
+    // TODO: Must be a better way to detect text nodes than this
+    if (item instanceof Y.XmlText) {
+      const delta = item.toDelta()
+      response = delta.map(/** @param {any} d */ (d) => {
+        const text = {
+          type: 'text',
+          text: d.insert
+        }
+        if (d.attributes) {
+          text.marks = Object.keys(d.attributes).map((type_) => {
+            const attrs = d.attributes[type_]
+            const type = yattr2markname(type_)
+            const mark = {
+              type
+            }
+            if (Object.keys(attrs)) {
+              mark.attrs = attrs
+            }
+            return mark
+          })
+        }
+        return text
+      })
+    } else if (item instanceof Y.XmlElement) {
+      response = {
+        type: item.nodeName
+      }
+
+      const attrs = item.getAttributes()
+      if (Object.keys(attrs).length) {
+        response.attrs = attrs
+      }
+
+      const children = item.toArray()
+      if (children.length) {
+        response.content = children.map(serialize).flat()
+      }
+    } else {
+      // expected either Y.XmlElement or Y.XmlText
+      error.unexpectedCase()
+    }
+
+    return response
+  }
+
+  return {
+    type: 'doc',
+    content: items.map(serialize)
+  }
+}

package/src/plugins/cursor-plugin.js

@@ -0,0 +1,267 @@
+import * as Y from 'yjs'
+import { Decoration, DecorationSet } from "prosemirror-view"; // eslint-disable-line
+import { Plugin } from "prosemirror-state"; // eslint-disable-line
+import { Awareness } from "y-protocols/awareness"; // eslint-disable-line
+import {
+  absolutePositionToRelativePosition,
+  relativePositionToAbsolutePosition,
+  setMeta
+} from '../lib.js'
+import { yCursorPluginKey, ySyncPluginKey } from './keys.js'
+
+import * as math from 'lib0/math'
+
+/**
+ * Default awareness state filter
+ *
+ * @param {number} currentClientId current client id
+ * @param {number} userClientId user client id
+ * @param {any} _user user data
+ * @return {boolean}
+ */
+export const defaultAwarenessStateFilter = (currentClientId, userClientId, _user) => currentClientId !== userClientId
+
+/**
+ * Default generator for a cursor element
+ *
+ * @param {any} user user data
+ * @return {HTMLElement}
+ */
+export const defaultCursorBuilder = (user) => {
+  const cursor = document.createElement('span')
+  cursor.classList.add('ProseMirror-yjs-cursor')
+  cursor.setAttribute('style', `border-color: ${user.color}`)
+  const userDiv = document.createElement('div')
+  userDiv.setAttribute('style', `background-color: ${user.color}`)
+  userDiv.insertBefore(document.createTextNode(user.name), null)
+  const nonbreakingSpace1 = document.createTextNode('\u2060')
+  const nonbreakingSpace2 = document.createTextNode('\u2060')
+  cursor.insertBefore(nonbreakingSpace1, null)
+  cursor.insertBefore(userDiv, null)
+  cursor.insertBefore(nonbreakingSpace2, null)
+  return cursor
+}
+
+/**
+ * Default generator for the selection attributes
+ *
+ * @param {any} user user data
+ * @return {import('prosemirror-view').DecorationAttrs}
+ */
+export const defaultSelectionBuilder = (user) => {
+  return {
+    style: `background-color: ${user.color}70`,
+    class: 'ProseMirror-yjs-selection'
+  }
+}
+
+const rxValidColor = /^#[0-9a-fA-F]{6}$/
+
+/**
+ * @param {any} state
+ * @param {Awareness} awareness
+ * @param {function(number, number, any):boolean} awarenessFilter
+ * @param {(user: { name: string, color: string }, clientId: number) => Element} createCursor
+ * @param {(user: { name: string, color: string }, clientId: number) => import('prosemirror-view').DecorationAttrs} createSelection
+ * @return {any} DecorationSet
+ */
+export const createDecorations = (
+  state,
+  awareness,
+  awarenessFilter,
+  createCursor,
+  createSelection
+) => {
+  const ystate = ySyncPluginKey.getState(state)
+  const y = ystate.doc
+  const decorations = []
+  if (
+    ystate.snapshot != null || ystate.prevSnapshot != null ||
+    ystate.binding.mapping.size === 0
+  ) {
+    // do not render cursors while snapshot is active
+    return DecorationSet.create(state.doc, [])
+  }
+  awareness.getStates().forEach((aw, clientId) => {
+    if (!awarenessFilter(y.clientID, clientId, aw)) {
+      return
+    }
+
+    if (aw.cursor != null) {
+      const user = aw.user || {}
+      if (user.color == null) {
+        user.color = '#ffa500'
+      } else if (!rxValidColor.test(user.color)) {
+        // We only support 6-digit RGB colors in y-prosemirror
+        console.warn('A user uses an unsupported color format', user)
+      }
+      if (user.name == null) {
+        user.name = `User: ${clientId}`
+      }
+      let anchor = relativePositionToAbsolutePosition(
+        y,
+        ystate.type,
+        Y.createRelativePositionFromJSON(aw.cursor.anchor),
+        ystate.binding.mapping
+      )
+      let head = relativePositionToAbsolutePosition(
+        y,
+        ystate.type,
+        Y.createRelativePositionFromJSON(aw.cursor.head),
+        ystate.binding.mapping
+      )
+      if (anchor !== null && head !== null) {
+        const maxsize = math.max(state.doc.content.size - 1, 0)
+        anchor = math.min(anchor, maxsize)
+        head = math.min(head, maxsize)
+        decorations.push(
+          Decoration.widget(head, () => createCursor(user, clientId), {
+            key: clientId + '',
+            side: 10
+          })
+        )
+        const from = math.min(anchor, head)
+        const to = math.max(anchor, head)
+        decorations.push(
+          Decoration.inline(from, to, createSelection(user, clientId), {
+            inclusiveEnd: true,
+            inclusiveStart: false
+          })
+        )
+      }
+    }
+  })
+  return DecorationSet.create(state.doc, decorations)
+}
+
+/**
+ * A prosemirror plugin that listens to awareness information on Yjs.
+ * This requires that a `prosemirrorPlugin` is also bound to the prosemirror.
+ *
+ * @public
+ * @param {Awareness} awareness
+ * @param {object} opts
+ * @param {function(any, any, any):boolean} [opts.awarenessStateFilter]
+ * @param {(user: any, clientId: number) => HTMLElement} [opts.cursorBuilder]
+ * @param {(user: any, clientId: number) => import('prosemirror-view').DecorationAttrs} [opts.selectionBuilder]
+ * @param {function(any):any} [opts.getSelection]
+ * @param {string} [cursorStateField] By default all editor bindings use the awareness 'cursor' field to propagate cursor information.
+ * @return {any}
+ */
+export const yCursorPlugin = (
+  awareness,
+  {
+    awarenessStateFilter = defaultAwarenessStateFilter,
+    cursorBuilder = defaultCursorBuilder,
+    selectionBuilder = defaultSelectionBuilder,
+    getSelection = (state) => state.selection
+  } = {},
+  cursorStateField = 'cursor'
+) =>
+  new Plugin({
+    key: yCursorPluginKey,
+    state: {
+      init (_, state) {
+        return createDecorations(
+          state,
+          awareness,
+          awarenessStateFilter,
+          cursorBuilder,
+          selectionBuilder
+        )
+      },
+      apply (tr, prevState, _oldState, newState) {
+        const ystate = ySyncPluginKey.getState(newState)
+        const yCursorState = tr.getMeta(yCursorPluginKey)
+        if (
+          (ystate && ystate.isChangeOrigin) ||
+          (yCursorState && yCursorState.awarenessUpdated)
+        ) {
+          return createDecorations(
+            newState,
+            awareness,
+            awarenessStateFilter,
+            cursorBuilder,
+            selectionBuilder
+          )
+        }
+        return prevState.map(tr.mapping, tr.doc)
+      }
+    },
+    props: {
+      decorations: (state) => {
+        return yCursorPluginKey.getState(state)
+      }
+    },
+    view: (view) => {
+      const awarenessListener = () => {
+        // @ts-ignore
+        if (view.docView) {
+          setMeta(view, yCursorPluginKey, { awarenessUpdated: true })
+        }
+      }
+      const updateCursorInfo = () => {
+        const ystate = ySyncPluginKey.getState(view.state)
+        // @note We make implicit checks when checking for the cursor property
+        const current = awareness.getLocalState() || {}
+        if (view.hasFocus()) {
+          const selection = getSelection(view.state)
+          /**
+           * @type {Y.RelativePosition}
+           */
+          const anchor = absolutePositionToRelativePosition(
+            selection.anchor,
+            ystate.type,
+            ystate.binding.mapping
+          )
+          /**
+           * @type {Y.RelativePosition}
+           */
+          const head = absolutePositionToRelativePosition(
+            selection.head,
+            ystate.type,
+            ystate.binding.mapping
+          )
+          if (
+            current.cursor == null ||
+            !Y.compareRelativePositions(
+              Y.createRelativePositionFromJSON(current.cursor.anchor),
+              anchor
+            ) ||
+            !Y.compareRelativePositions(
+              Y.createRelativePositionFromJSON(current.cursor.head),
+              head
+            )
+          ) {
+            awareness.setLocalStateField(cursorStateField, {
+              anchor,
+              head
+            })
+          }
+        } else if (
+          current.cursor != null &&
+          relativePositionToAbsolutePosition(
+            ystate.doc,
+            ystate.type,
+            Y.createRelativePositionFromJSON(current.cursor.anchor),
+            ystate.binding.mapping
+          ) !== null
+        ) {
+          // delete cursor information if current cursor information is owned by this editor binding
+          awareness.setLocalStateField(cursorStateField, null)
+        }
+      }
+      awareness.on('change', awarenessListener)
+      view.dom.addEventListener('focusin', updateCursorInfo)
+      view.dom.addEventListener('focusout', updateCursorInfo)
+      return {
+        update: updateCursorInfo,
+        destroy: () => {
+          view.dom.removeEventListener('focusin', updateCursorInfo)
+          view.dom.removeEventListener('focusout', updateCursorInfo)
+          awareness.off('change', awarenessListener)
+          awareness.setLocalStateField(cursorStateField, null)
+        }
+      }
+    }
+  })