How to use @remirror/core-utils - 10 common examples

}

  // Exited a suggestion
  if (isExit(compare)) {
    return findExitReason({ $pos, match: compare.prev, state });
  }

  if (isChange(compare)) {
    return { change: createMatchWithReason({ match: compare.next, reason: ChangeReason.Text }) };
  }

  if (isMove(compare)) {
    return {
      change: createMatchWithReason({
        match: compare.next,
        reason: selectionEmpty(state) ? ChangeReason.Move : ChangeReason.SelectionInside,
      }),
    };
  }

  return value;
};

public createDomRef(): HTMLElement {
    const { toDOM } = this.node.type.spec;

    if (toDOM) {
      const domSpec = toDOM(this.node);
      if (isString(domSpec)) {
        return document.createElement(domSpec);
      }

      if (isDOMNode(domSpec)) {
        if (!isElementDOMNode(domSpec)) {
          throw new Error('Invalid HTML Element provided in the DOM Spec');
        }
        return domSpec;
      }

      // Use the outer element string to render the dom node
      return document.createElement(domSpec[0]);
    }
    return this.node.isInline ? document.createElement('span') : document.createElement('div');
  }

public createDomRef(): HTMLElement {
    const { toDOM } = this.node.type.spec;

    if (toDOM) {
      const domSpec = toDOM(this.node);
      if (isString(domSpec)) {
        return document.createElement(domSpec);
      }

      if (isDOMNode(domSpec)) {
        if (!isElementDOMNode(domSpec)) {
          throw new Error('Invalid HTML Element provided in the DOM Spec');
        }
        return domSpec;
      }

      // Use the outer element string to render the dom node
      return document.createElement(domSpec[0]);
    }
    return this.node.isInline ? document.createElement('span') : document.createElement('div');
  }

const findExitReason = ({
  match,
  state,
  $pos,
}: SuggestStateMatchParams & EditorStateParams & ResolvedPosParams) => {
  const { selection } = state;
  const updatedPrev = recheckMatch({ match, state });

  // Exit created a split
  if (!updatedPrev || updatedPrev.queryText.full !== match.queryText.full) {
    return createInsertReason({ prev: match, next: updatedPrev, state });
  }

  // Exit caused by a selection
  if (!selectionEmpty(state) && (selection.from <= match.range.from || selection.to >= match.range.end)) {
    return { exit: createMatchWithReason({ match, reason: ExitReason.SelectionOutside }) };
  }

  // Exit happened at the end of previous suggestion
  if ($pos.pos > match.range.end) {
    return { exit: createMatchWithReason({ match, reason: ExitReason.MoveEnd }) };
  }

  // Exit happened at the start of previous suggestion
  if ($pos.pos <= match.range.from) {
    return { exit: createMatchWithReason({ match, reason: ExitReason.MoveStart }) };
  }

  return {};
};

apply: (tr, decorationSet) => {
          // Map the decoration based on the changes to the document.
          decorationSet = decorationSet.map(tr.mapping, tr.doc);

          // Get tracker updates from the meta data
          const tracker = getPluginMeta(key, tr);

          if (isNullOrUndefined(tracker)) {
            return decorationSet;
          }

          if (tracker.add) {
            const { defaultClassName, defaultElement } = this.options;
            const { className, element = defaultElement } = tracker.add;
            const widget = isString(element) ? document.createElement(element) : element;
            const classNames = className ? [defaultClassName, className] : [defaultClassName];

            widget.classList.add(...classNames);

            const deco = Decoration.widget(tracker.add.pos, widget, {
              id: tracker.add.id,
              type: name,

public apply({ tr, newState }: TransactionParams & CompareStateParams) {
    const { exit } = this.handlerMatches;

    if (!transactionChanged(tr) && !this.removed) {
      return this;
    }

    this.mapIgnoredDecorations(tr);

    // If the previous run was an exit reset the suggestion matches
    if (exit) {
      this.resetState();
    }

    this.prev = this.next;

    // Match against the current selection position
    this.updateReasons({ $pos: tr.selection.$from, state: newState });

    return this;

it('parses the dom for extra attributes', () => {
    const node = fromHTML({
      content: `<p data-run="${run}" title="${title}">hello</p>`,
      schema,
    });

    const expected = doc(custom('hello'));
    expect(node).toEqualProsemirrorNode(expected);
  });

view: view => {
      getPluginState(ctx.pluginKey, view.state).init(view);
      return {};
    },
    props: {

appendTransaction: (transactions, _b, state) => {
      return getPluginState(ctx.pluginKey, state).appendTransaction(transactions);
    },
    state: {

export const getSuggestPluginState = (state: EditorState) =>
  getPluginState(suggestPluginKey, state);