How to use the @remirror/core.getPluginState function in @remirror/core

const onCompositionStart = ({ state, dispatch, extension }: CompositionParams) => {
  const { empty } = getPluginState(extension.pluginKey, state);

  if (empty) {
    // remove placeholder, since document definitely contains text
    dispatch(setPluginMeta(extension.pluginKey, state.tr, { removePlaceholder: true }));
  }

  return false;
};

update(view, prevState: EditorState) {
          const prev = getPluginState(plugin, prevState);
          const next = getPluginState(plugin, view.state);

          // See how the state changed
          const moved =
            prev.active && next.active && prev.range && next.range && prev.range.from !== next.range.from;
          const started = !prev.active && next.active;
          const stopped = prev.active && !next.active;
          const changed = !started && !stopped && prev.query !== next.query;
          const handleStart = started || moved;
          const handleChange = changed && !moved;
          const handleExit = stopped || moved;

          // Cancel when suggestion isn't active
          if (!handleStart && !handleChange && !handleExit) {
            return;
          }

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

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

decorations(editorState) {
        const { active, range, query } = getPluginState(plugin, editorState);

        if (!active || !range || !(query && query.length)) {
          return null;
        }

        return DecorationSet.create(editorState.doc, [
          Decoration.inline(range.from, range.to, {
            nodeName: decorationsTag,
            class: suggestionClassName,
          }),
        ]);
      },
    },

handleKeyDown(view, event) {
        const { active, range, query } = getPluginState(plugin, view.state);
        if (!active || !(query && query.length)) {
          return false;
        }
        return onKeyDown({ view, event, range });
      },

handleKeyDown(view, event) {
        const state = getPluginState(extension.pluginKey, view.state);
        return state.handleKeyDown(event);
      },

const onCompositionEnd = ({ state, dispatch, extension }: CompositionParams) => {
  const { empty } = getPluginState(extension.pluginKey, state);

  if (!empty) {
    dispatch(
      setPluginMeta(extension.pluginKey, state.tr, {
        applyPlaceholderIfEmpty: true,
      }),
    );
  }

  return false;
};

isDragging: () => {
        return !!getPluginState(this.pluginKey, getState()).isDragging();
      },
    };

update: view => {
          const shouldInsertParagraphAtEnd = getPluginState(
            pluginKey,
            view.state,
          );

          if (!shouldInsertParagraphAtEnd || !ensureTrailingParagraph) {
            return;
          }

          const { pos, node } = shouldInsertParagraphAtEnd;
          view.dispatch(view.state.tr.insert(pos + node.nodeSize, type.create()));
        },
      };