How to use the prosemirror-view.Decoration.widget function in prosemirror-view

/* If cursor color provided - override defaults */
		if (cursorData.cursorColor) {
			innerChildBar.style.backgroundColor = cursorData.cursorColor;
			innerChildCircleSmall.style.backgroundColor = cursorData.cursorColor;
			innerChildCircleBig.style.backgroundColor = cursorData.cursorColor;
			innerStyle += `.name.${formattedDataId}::after { background-color: ${cursorData.cursorColor} !important; } `;
		}
		style.innerHTML = innerStyle;
		// console.timeEnd('redner2');
		const selectionFrom = selection.from;
		const selectionTo = selection.to;
		const selectionHead = selection.head;

		const decorations = [];
		decorations.push(
			Decoration.widget(selectionHead, elem, {
				key: `cursor-widget-${cursorData.id}`,
				lastActive: cursorData.lastActive,
			}),
		);

		if (selectionFrom !== selectionTo) {
			decorations.push(
				Decoration.inline(
					selectionFrom,
					selectionTo,
					{
						class: `cursor-range ${formattedDataId}`,
						style: `background-color: ${cursorData.backgroundColor ||
							'rgba(0, 25, 150, 0.2)'};`,
					},
					{ key: `cursor-inline-${cursorData.id}`, lastActive: cursorData.lastActive },

apply(tr, set) {
      // Adjust decoration positions to changes made by the transaction
      set = set.map(tr.mapping, tr.doc)
      // See if the transaction adds or removes any placeholders
      let action = tr.getMeta(this)
      if (action && action.add) {
        let widget = document.createElement("placeholder")
        let deco = Decoration.widget(action.add.pos, widget, {id: action.add.id})
        set = set.add(tr.doc, [deco])
      } else if (action && action.remove) {
        set = set.remove(set.find(null, null,
                                  spec => spec.id == action.remove.id))
      }
      return set
    }
  },

dom.classList.add(
    `note-${id}`,
    `note-wrapper--${side < 0 ? "start" : "end"}`,
    `note-wrapper--${type}`
  );
  dom.dataset.toggleNoteId = id;
  const cursorAtWidgetAndInsideNote = inside && cursorPos === notePos;
  // If we have a cursor at the note widget position and we're inside a note,
  // we need to ensure that other widgets don't alter its render order, so
  // we keep the sign of the side value and shrink it to ensure it keeps its
  // precedence.
  const sideToRender = cursorAtWidgetAndInsideNote
    ? side - Math.sign(side) / 2
    : 0 - side;
  return Decoration.widget(notePos, dom, {
    // MAX_SAFE_INTEGER is here to order note decorations consistently across
    // plugins without imposing a (realistic) limit on the number of noting
    // plugins that can run concurrently.
    side:
      sideToRender + pluginPriority / Number.MAX_SAFE_INTEGER * Math.sign(side),
    marks: []
  });
};

awareness.forEach((state, userID) => {
        if (state.cursor != null) {
          const username = `User: ${userID}`
          decorations.push(Decoration.widget(state.cursor.from, () => {
            const cursor = document.createElement('span')
            cursor.classList.add('ProseMirror-yjs-cursor')
            const user = document.createElement('div')
            user.insertBefore(document.createTextNode(username), null)
            cursor.insertBefore(user, null)
            return cursor
          }, { key: username }))
          decorations.push(Decoration.inline(state.cursor.from, state.cursor.to, { style: 'background-color: #ffa50070' }))
        }
      })
      return DecorationSet.create(state.doc, decorations)

export default (pos, type) => {
  const span = document.createElement('span');
  span.classList.add('invisible');
  span.classList.add(`invisible--${type}`);
  return Decoration.widget(pos, span, {
    marks: [],
    key: type
  });
};

private createInlineDecoration($pos: ResolvedPos): Decoration[] {
    const decorations: Decoration[] = [];

    const dropCursor = Decoration.widget($pos.pos, this.inlineElement, { key: 'drop-cursor-inline' });
    decorations.push(dropCursor);

    return decorations;
  }
  /**

function commentTooltip(state, dispatch) {
  let sel = state.selection
  if (!sel.empty) return null
  let comments = commentPlugin.getState(state).commentsAt(sel.from)
  if (!comments.length) return null
  return DecorationSet.create(state.doc, [Decoration.widget(sel.from, renderComments(comments, dispatch, state))])
}

lint(doc).forEach(prob => {
    decos.push(Decoration.inline(prob.from, prob.to, {class: "problem"}),
               Decoration.widget(prob.from, lintIcon(prob)))
  })
  return DecorationSet.create(doc, decos)

return {
          ...prev,
          link,
          editDecoration: undefined
        };
      }

      let { createDecoration, editDecoration } = prev;

      if (tr.getMeta("show-add-link-toolbar") === true) {
        const { $from, $to } = newState.selection;
        if ($from.pos === $to.pos) {
          const node = document.createElement("span");
          node.className = "nib-link-marker";
          createDecoration = DecorationSet.create(newState.doc, [
            Decoration.widget($from.pos, node)
          ]);
        } else {
          createDecoration = DecorationSet.create(newState.doc, [
            Decoration.inline($from.pos, $to.pos, {
              class: "nib-link-marker"
            })
          ]);
        }
        return {
          link,
          editorFocusState: prev.editorFocusState,
          createDecoration,
          showAddLinkToolbar: true
        };
      }

apply(tr, set) {
      set = set.map(tr.mapping, tr.doc);
      const action = tr.getMeta(this);
      if (!action) {
        return set;
      }
      if (action.add) {
        const widget = document.createElement('czi-cursor-placeholder');
        widget.className = 'czi-cursor-placeholder';
        const deco = Decoration.widget(action.add.pos, widget, {
          id: PLACE_HOLDER_ID,
        });
        set = set.add(tr.doc, [deco]);
      } else if (action.remove) {
        const found = set.find(null, null, specFinder);
        set = set.remove(found);
      }

      return set;
    },
  },