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

// 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 },
				),
			);
		}
		return decorations;
	};

// 	style.innerHTML = innerStyle;

				/* This custom Decoration funkiness is because we don't want the cursor to */
				/* be contenteditable="false". This will break spellcheck. So instead */
				/* we do a bunch of specific :after elements and custom styles */
				/* to build the rich cursor UI */
				// return new Decoration(from, from, new CursorType(elem, {}));
				// return new Decoration.widget(from, elem);
				// return Decoration.widget(from, elem, {
				// 	stopEvent: (event)=> {
				// 		console.log('Heyo', event);
				// 	},
				// 	key: `cursor-${data.id}`,
				// });
			}
			return Decoration.inline(from, to, {
				class: `collab-selection ${data.id}`,
				style: `background-color: ${data.backgroundColor || 'rgba(0, 25, 150, 0.2)'};`,
			});
		}).filter((dec) => {
			return !!dec;

const currentLine = currentNode.text.replace(/\s/g, ' ');
				const nextChIndex = currentPos.parentOffset;

				const nextCh = currentLine.length > nextChIndex ? currentLine.charAt(nextChIndex) : ' ';

				const prevChars = currentLine.substring(0, currentPos.parentOffset);
				// const startIndex = Math.max(prevChars.lastIndexOf(' ') + 1, prevChars.lastIndexOf(' ') + 1);
				const startIndex = prevChars.lastIndexOf(' ') + 1;
				const startLetter = currentLine.charAt(startIndex);
				// const shouldMark = startLetter === '@' && (nextCh.charCodeAt(0) === 32 || nextCh.charCodeAt(0) === 160);
				const shouldMark = startLetter === '@' && nextCh.charCodeAt(0) === 32;
				if (shouldMark) {
					const substring = currentLine.substring(startIndex + 1, nextChIndex) || ' ';
					const start = currentPos.pos - currentPos.parentOffset + startIndex;
					const end = currentPos.pos - currentPos.parentOffset + startIndex + 1 + substring.length;
					const decorations = [Decoration.inline(start, end, { class: 'mention-marker' })];
					const decos = DecorationSet.create(editorState.doc, decorations);

					// updateMentions(currentLine.substring(start - 1, currentPos.pos) || ' ');
					updateMentions(substring);
					return { decos: decos, start, end };
				}

			}
			updateMentions('');
			return { decos: DecorationSet.empty, start: null, end: null };
		}
	},

editorState.doc,
				uncompressSelectionJSON(discussionData.selection),
			);
		} catch (err) {
			return [];
		}

		if (
			discussionData.currentKey === this.mostRecentRemoteKey &&
			!sendableSteps(editorState) &&
			!alreadyHandled
		) {
			const highlightTo = selection.to;
			const elem = document.createElement('span');
			elem.className = `discussion-mount dm-${discussionData.id}`;
			const inlineDecoration = Decoration.inline(
				selection.from,
				selection.to,
				{
					class: `discussion-range d-${discussionData.id}`,
					// style: `background-color: ${'rgba(50, 25, 50, 0.2)'};`,
				},
				{ key: `discussion-inline-${discussionData.id}` },
			);
			const widgetDecoration = Decoration.widget(highlightTo, elem, {
				stopEvent: () => {
					return true;
				},
				key: `discussion-widget-${discussionData.id}`,
				marks: [],
			});
			return [inlineDecoration, widgetDecoration];

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)

public addIgnored = ({ from, char, name, specific = false }: AddIgnoredParams) => {
    const to = from + char.length;
    const suggester = this.suggesters.find(val => val.name === name);

    if (!suggester) {
      throw new Error(`No suggester exists for the name provided: ${name}`);
    }

    const attrs = suggester.ignoredClassName ? { class: suggester.ignoredClassName } : {};

    const decoration = Decoration.inline(
      from,
      to,
      { nodeName: suggester.ignoredTag, ...attrs },
      { char, name, specific },
    );

    this.ignored = this.ignored.add(this.view.state.doc, [decoration]);
  };

apply(tr, set) {
      set = set.map(tr.mapping, tr.doc);
      const action = tr.getMeta(this);

      if (!action) {
        return set;
      }

      if (action.add) {
        const deco = Decoration.inline(
          action.add.from,
          action.add.to,
          {
            class: 'czi-selection-placeholder',
          },
          {
            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;

decorations(editorState) {
        const { active, range } = this.getState(editorState);

        if (!active) return null;

        return DecorationSet.create(editorState.doc, [
          Decoration.inline(range.from, range.to, {
            nodeName: 'span',
            class: suggestionClass,
            style: debug ? 'background: rgba(0, 0, 255, 0.05); color: blue; border: 2px solid blue;' : null,
          }),
        ]);
      },
    },

function ([ clientID, { from, to } ]) {
              if (clientID === selfClientID) {
                return null;
              }
              if (from === to) {
                  let elem = document.createElement('span')
                  elem.className = "collab-cursor";
                  elem.style.borderLeft = `1px solid ${stringToColor(clientID)}`
                  return Decoration.widget(from, elem)
              } else {
                  return Decoration.inline(from, to, {
                      style: `background-color: ${stringToColor(clientID, 0.2)};`,
                  })
              }
          }
        ));

return this.results.map(deco => (
      Decoration.inline(deco.from, deco.to, { class: this.options.findClass })
    ))
  }