How to use the prosemirror-state.PluginKey function in prosemirror-state

import React, { useState, useRef } from 'react';
import { storiesOf } from '@storybook/react';
// import ReactDOM from 'react-dom';
// import { Node, DOMSerializer } from 'prosemirror-model';
// import { ChangeSet, simplifyChanges } from 'prosemirror-changeset';
import { Plugin, PluginKey } from 'prosemirror-state';
import { Transform, Step } from 'prosemirror-transform';
// import { DecorationSet, Decoration } from 'prosemirror-view';

import Editor, { buildSchema } from '../src/index';
// import sampleDoc from './initialDocs/plainDoc';
import emptyDoc from './initialDocs/emptyDoc';
import { adjustSteps2 } from './stepTestStories';

const editorSchema = buildSchema();
const captureStepsPluginKey = new PluginKey('captureSteps');

const createCaptureStepsPlugin = () =>
	new Plugin({
		key: captureStepsPluginKey,
		state: {
			init: () => {
				return [];
			},
			apply: (transaction, value) => {
				console.log('tr is', transaction);
				return [...value, ...transaction.steps];
			},
		},
	});

const createDiffDoc = (doc, schema, hydratedSteps, divergeKey) => {

import { EditorView,  Decoration, DecorationSet } from 'prosemirror-view' // eslint-disable-line
import { Plugin, PluginKey, EditorState, TextSelection } from 'prosemirror-state' // eslint-disable-line
import * as math from '../lib/math.js'
import * as object from '../lib/object.js'
import * as YPos from '../utils/relativePosition.js'

/**
 * @typedef {Map} ProsemirrorMapping
 */

/**
 * The unique prosemirror plugin key for prosemirrorPlugin.
 *
 * @public
 */
export const prosemirrorPluginKey = new PluginKey('yjs')

/**
 * This plugin listens to changes in prosemirror view and keeps yXmlState and view in sync.
 *
 * This plugin also keeps references to the type and the shared document so other plugins can access it.
 * @param {YXmlFragment} yXmlFragment
 * @return {Plugin} Returns a prosemirror plugin that binds to this type
 */
export const prosemirrorPlugin = yXmlFragment => {
  const pluginState = {
    type: yXmlFragment,
    y: yXmlFragment._y,
    binding: null
  }
  let changedInitialContent = false
  const plugin = new Plugin({

items = [],
  onEnter = () => false,
  onChange = () => false,
  onExit = () => false,
  onKeyDown = () => false,
  onFilter = (searchItems, query) => {
    if (!query) {
      return searchItems
    }

    return searchItems
      .filter(item => JSON.stringify(item).toLowerCase().includes(query.toLowerCase()))
  },
}) {
  return new Plugin({
    key: new PluginKey('suggestions'),

    view() {
      return {
        update: (view, prevState) => {
          const prev = this.key.getState(prevState)
          const next = this.key.getState(view.state)

          // See how the state changed
          const moved = prev.active && next.active && 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

new CollaborativePlugin({
			firebaseRef: collabOptions.firebaseRef,
			delayLoadingDocument: collabOptions.delayLoadingDocument,
			isReadOnly: props.isReadOnly,
			initialContent: props.initialContent,
			onError: props.onError,
			initialDocKey: collabOptions.initialDocKey,
			localClientData: collabOptions.clientData,
			localClientId: localClientId,
			onStatusChange: collabOptions.onStatusChange || function() {},
			onUpdateLatestKey: collabOptions.onUpdateLatestKey || function() {},
		}),
	];
};

export const collaborativePluginKey = new PluginKey('collaborative');

class CollaborativePlugin extends Plugin {
	constructor(pluginProps) {
		super({ key: collaborativePluginKey });
		this.pluginProps = pluginProps;

		/* Bind plugin functions */
		this.loadDocument = this.loadDocument.bind(this);
		this.receiveCollabChanges = this.receiveCollabChanges.bind(this);
		this.sendCollabChanges = this.sendCollabChanges.bind(this);
		this.issueDecoTransaction = this.issueDecoTransaction.bind(this);
		this.setResendTimeout = this.setResendTimeout.bind(this);
		this.generateCursorDecorations = this.generateCursorDecorations.bind(this);
		this.generateDiscussionDecorations = this.generateDiscussionDecorations.bind(this);
		this.syncDiscussions = this.syncDiscussions.bind(this);

import {Plugin, PluginKey} from "prosemirror-state"
import {Decoration, DecorationSet} from "prosemirror-view"
import {cellAround, pointsAtCell, setAttr} from "./util"
import {TableMap} from "./tablemap"
import {TableView, updateColumns} from "./tableview"
import {tableNodeTypes} from "./schema"

export const key = new PluginKey("tableColumnResizing")

export function columnResizing({ handleWidth = 5, cellMinWidth = 25, View = TableView, lastColumnResizable = true } = {}) {
  let plugin = new Plugin({
    key,
    state: {
      init(_, state) {
        this.spec.props.nodeViews[tableNodeTypes(state.schema).table.name] =
          (node, view) => new View(node, cellMinWidth, view)
        return new ResizeState(-1, false)
      },
      apply(tr, prev) {
        return prev.apply(tr)
      }
    },
    props: {
      attributes(state) {

doc: this.createDocument(this.options.content),
      plugins: [
        ...this.plugins,
        inputRules({
          rules: this.inputRules,
        }),
        ...this.pasteRules,
        ...this.keymaps,
        keymap({
          Backspace: undoInputRule,
        }),
        keymap(baseKeymap),
        dropCursor(this.options.dropCursor),
        gapCursor(),
        new Plugin({
          key: new PluginKey('editable'),
          props: {
            editable: () => this.options.editable,
          },
        }),
        new Plugin({
          props: {
            attributes: {
              tabindex: 0,
            },
            handleDOMEvents: {
              focus: (view, event) => {
                this.focused = true
                this.emit('focus', {
                  event,
                  state: view.state,
                  view,

'use strict';

var _prosemirrorState = require('prosemirror-state');

var keys = {
  citations: new _prosemirrorState.PluginKey('citations'),
  relativefiles: new _prosemirrorState.PluginKey('relativefiles'),
  mentions: new _prosemirrorState.PluginKey('mentions'),
  firebase: new _prosemirrorState.PluginKey('firebase'),
  track: new _prosemirrorState.PluginKey('track')
};

exports.keys = keys;

exports.getPluginState = function (key, state) {
  return keys[key].getState(state);
};

exports.getPlugin = function (key, state) {
  return keys[key].get(state);
};

import React, { useState, useRef } from 'react';
import ReactDOM from 'react-dom';
import { ChangeSet, simplifyChanges } from 'prosemirror-changeset';
import { Plugin, PluginKey } from 'prosemirror-state';
import { DecorationSet, Decoration } from 'prosemirror-view';

import Editor, { buildSchema, renderStatic } from '../src/index';
import sampleDoc from './initialDocs/imageDoc';
import emptyDoc from './initialDocs/emptyDoc';

const editorSchema = buildSchema();
const captureStepsPluginKey = new PluginKey('captureSteps');

const createCaptureStepsPlugin = () =>
	new Plugin({
		key: captureStepsPluginKey,
		state: {
			init: () => {
				return [];
			},
			apply: (transaction, value) => {
				if (transaction.docChanged) {
					return [...value, ...transaction.steps];
				}
				return value;
			},
		},
	});

public get pluginKey(): PluginKey {
    if (this.pk) {
      return this.pk;
    }
    this.pk = new PluginKey(this.name);
    return this.pk;
  }

import { DecorationSet, Decoration } from "prosemirror-view";
import { Plugin, PluginKey } from "prosemirror-state";

export const linkPluginKey = new PluginKey("link");

const getLink = state => {
  const {
    selection: { $from, $to },
    schema: { marks },
    doc
  } = state;
  const fromLinkMark = $from.marks().find(mark => mark.type === marks.link);
  const toLinkMark = $to.marks().find(mark => mark.type === marks.link);
  let link;
  doc.nodesBetween($from.pos, $to.pos, (node, from) => {
    if (node.marks) {
      const linkMark = node.marks.find(mark => mark.type === marks.link);
      if (linkMark) {
        link = {
          from,