@atlaskit/editor-plugin-track-changes 1.0.0 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-track-changes
 
+## 2.0.0
+
+### Major Changes
+
+- [#185139](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/185139)
+  [`710f9b65a743a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/710f9b65a743a) -
+  [EDITOR-1014] Setup basic plugin diffing functionality and documentation
+
 ## 1.0.0
 
 ### Major Changes

package/dist/cjs/pm-plugins/main.js

@@ -1,28 +1,107 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.trackChangesPluginKey = exports.createTrackChangesPlugin = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _prosemirrorChangeset = require("prosemirror-changeset");
+var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
-var trackChangesPluginKey = exports.trackChangesPluginKey = new _state.PluginKey('showDiffPlugin');
-
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-
+var _view = require("@atlaskit/editor-prosemirror/view");
+var _types = require("./types");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var trackChangesPluginKey = exports.trackChangesPluginKey = new _state.PluginKey('trackChangesPlugin');
 var createTrackChangesPlugin = exports.createTrackChangesPlugin = function createTrackChangesPlugin() {
   return new _safePlugin.SafePlugin({
     key: trackChangesPluginKey,
     state: {
-      init: function init() {
-        return {};
+      init: function init(_, _ref) {
+        var doc = _ref.doc;
+        return {
+          changes: _prosemirrorChangeset.ChangeSet.create(doc),
+          shouldChangesBeDispalyed: false,
+          baselineDoc: doc,
+          numOfChanges: 0
+        };
       },
-      apply: function apply(tr, currentPluginState) {
-        var meta = tr.getMeta(trackChangesPluginKey);
-        if (meta) {
-          return meta;
+      apply: function apply(tr, state, oldState, newState) {
+        var metadata = tr.getMeta(trackChangesPluginKey);
+        if (metadata) {
+          if (metadata.action === _types.TOGGLE_TRACK_CHANGES_ACTION.TOGGLE_TRACK_CHANGES) {
+            return _objectSpread(_objectSpread({}, state), {}, {
+              baselineDoc: state.shouldChangesBeDispalyed ? tr.doc : state.baselineDoc,
+              shouldChangesBeDispalyed: !state.shouldChangesBeDispalyed,
+              changes: state.shouldChangesBeDispalyed ? _prosemirrorChangeset.ChangeSet.create(tr.doc) : state.changes
+            });
+          }
+        }
+        if (!tr.docChanged || tr.getMeta('isRemote')) {
+          // If no document changes, return the old changeSet
+          return state;
+        }
+
+        // Create a new ChangeSet based on document changes
+        return _objectSpread(_objectSpread({}, state), {}, {
+          shouldChangesBeDispalyed: false,
+          changes: state.changes.addSteps(tr.doc,
+          // The new document
+          tr.mapping.maps,
+          // The set of changes
+          tr.docs[0].content // The old document
+          )
+        });
+      }
+    },
+    props: {
+      decorations: function decorations(state) {
+        var pluginState = trackChangesPluginKey.getState(state);
+        if (pluginState && pluginState.shouldChangesBeDispalyed && pluginState.changes) {
+          var decoration = _view.DecorationSet.empty;
+          var decorations = [];
+          var changes = (0, _prosemirrorChangeset.simplifyChanges)(pluginState.changes.changes, state.doc);
+          var tr = state.tr;
+          changes.forEach(function (change) {
+            if (change.inserted.length > 0) {
+              var style = (0, _lazyNodeView.convertToInlineCss)({
+                background: "var(--ds-background-accent-purple-subtlest, #F3F0FF)",
+                textDecoration: 'underline',
+                textDecorationStyle: 'dotted',
+                textDecorationThickness: "var(--ds-space-025, 2px)",
+                textDecorationColor: "var(--ds-border-accent-purple, #8270DB)"
+              });
+
+              // Inline decoration used for insertions as the content already exists in the document
+              // and we just want to style it.
+              var insertionInlineDecoration = _view.Decoration.inline(change.fromB, change.toB, {
+                style: style
+              }, {});
+              decorations.push(insertionInlineDecoration);
+            }
+            if (change.deleted.length > 0) {
+              var dom = document.createElement('span');
+              var _style = (0, _lazyNodeView.convertToInlineCss)({
+                color: "var(--ds-text-accent-gray, #44546F)",
+                textDecoration: 'line-through'
+              });
+              dom.setAttribute('style', _style);
+              dom.appendChild(_model.DOMSerializer.fromSchema(tr.doc.type.schema).serializeFragment(pluginState === null || pluginState === void 0 ? void 0 : pluginState.baselineDoc.slice(change.fromA, change.toA).content));
+
+              // Widget decoration used for deletions as the content is not in the document
+              // and we want to display the deleted content with a style.
+              var deletionWidgetDecoration = _view.Decoration.widget(change.fromB, dom, {
+                marks: []
+              });
+              decorations.push(deletionWidgetDecoration);
+            }
+          });
+          return decoration.add(tr.doc, decorations);
         }
-        return currentPluginState;
+        return undefined;
       }
     }
   });

package/dist/cjs/pm-plugins/types.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TOGGLE_TRACK_CHANGES_ACTION = void 0;
+var TOGGLE_TRACK_CHANGES_ACTION = exports.TOGGLE_TRACK_CHANGES_ACTION = /*#__PURE__*/function (TOGGLE_TRACK_CHANGES_ACTION) {
+  TOGGLE_TRACK_CHANGES_ACTION["TOGGLE_TRACK_CHANGES"] = "TOGGLE_TRACK_CHANGES";
+  return TOGGLE_TRACK_CHANGES_ACTION;
+}({});

package/dist/cjs/trackChangesPlugin.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.trackChangesPlugin = void 0;
 var _main = require("./pm-plugins/main");
+var _types = require("./pm-plugins/types");
 var trackChangesPlugin = exports.trackChangesPlugin = function trackChangesPlugin() {
   return {
     name: 'trackChanges',
@@ -15,10 +16,23 @@ var trackChangesPlugin = exports.trackChangesPlugin = function trackChangesPlugi
       }];
     },
     commands: {
-      setBaseline: function setBaseline(_ref) {
+      toggleChanges: function toggleChanges(_ref) {
         var tr = _ref.tr;
-        return tr.setMeta('setBaseline', true);
+        return tr.setMeta(_main.trackChangesPluginKey, {
+          action: _types.TOGGLE_TRACK_CHANGES_ACTION.TOGGLE_TRACK_CHANGES
+        });
       }
+    },
+    getSharedState: function getSharedState(editorState) {
+      var _trackChangesPluginKe;
+      if (!editorState) {
+        return {
+          isDisplayingChanges: false
+        };
+      }
+      return {
+        isDisplayingChanges: Boolean((_trackChangesPluginKe = _main.trackChangesPluginKey.getState(editorState)) === null || _trackChangesPluginKe === void 0 ? void 0 : _trackChangesPluginKe.enable)
+      };
     }
   };
 };

package/dist/es2019/pm-plugins/main.js

@@ -1,22 +1,100 @@
+import { ChangeSet, simplifyChanges } from 'prosemirror-changeset';
+import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-export const trackChangesPluginKey = new PluginKey('showDiffPlugin');
-
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-
+import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { TOGGLE_TRACK_CHANGES_ACTION as ACTION } from './types';
+export const trackChangesPluginKey = new PluginKey('trackChangesPlugin');
 export const createTrackChangesPlugin = () => {
   return new SafePlugin({
     key: trackChangesPluginKey,
     state: {
-      init() {
-        return {};
+      init(_, {
+        doc
+      }) {
+        return {
+          changes: ChangeSet.create(doc),
+          shouldChangesBeDispalyed: false,
+          baselineDoc: doc,
+          numOfChanges: 0
+        };
       },
-      apply: (tr, currentPluginState) => {
-        const meta = tr.getMeta(trackChangesPluginKey);
-        if (meta) {
-          return meta;
+      apply(tr, state, oldState, newState) {
+        const metadata = tr.getMeta(trackChangesPluginKey);
+        if (metadata) {
+          if (metadata.action === ACTION.TOGGLE_TRACK_CHANGES) {
+            return {
+              ...state,
+              baselineDoc: state.shouldChangesBeDispalyed ? tr.doc : state.baselineDoc,
+              shouldChangesBeDispalyed: !state.shouldChangesBeDispalyed,
+              changes: state.shouldChangesBeDispalyed ? ChangeSet.create(tr.doc) : state.changes
+            };
+          }
+        }
+        if (!tr.docChanged || tr.getMeta('isRemote')) {
+          // If no document changes, return the old changeSet
+          return state;
+        }
+
+        // Create a new ChangeSet based on document changes
+        return {
+          ...state,
+          shouldChangesBeDispalyed: false,
+          changes: state.changes.addSteps(tr.doc,
+          // The new document
+          tr.mapping.maps,
+          // The set of changes
+          tr.docs[0].content // The old document
+          )
+        };
+      }
+    },
+    props: {
+      decorations: state => {
+        const pluginState = trackChangesPluginKey.getState(state);
+        if (pluginState && pluginState.shouldChangesBeDispalyed && pluginState.changes) {
+          const decoration = DecorationSet.empty;
+          const decorations = [];
+          const changes = simplifyChanges(pluginState.changes.changes, state.doc);
+          const tr = state.tr;
+          changes.forEach(change => {
+            if (change.inserted.length > 0) {
+              const style = convertToInlineCss({
+                background: "var(--ds-background-accent-purple-subtlest, #F3F0FF)",
+                textDecoration: 'underline',
+                textDecorationStyle: 'dotted',
+                textDecorationThickness: "var(--ds-space-025, 2px)",
+                textDecorationColor: "var(--ds-border-accent-purple, #8270DB)"
+              });
+
+              // Inline decoration used for insertions as the content already exists in the document
+              // and we just want to style it.
+              const insertionInlineDecoration = Decoration.inline(change.fromB, change.toB, {
+                style
+              }, {});
+              decorations.push(insertionInlineDecoration);
+            }
+            if (change.deleted.length > 0) {
+              const dom = document.createElement('span');
+              const style = convertToInlineCss({
+                color: "var(--ds-text-accent-gray, #44546F)",
+                textDecoration: 'line-through'
+              });
+              dom.setAttribute('style', style);
+              dom.appendChild(DOMSerializer.fromSchema(tr.doc.type.schema).serializeFragment(pluginState === null || pluginState === void 0 ? void 0 : pluginState.baselineDoc.slice(change.fromA, change.toA).content));
+
+              // Widget decoration used for deletions as the content is not in the document
+              // and we want to display the deleted content with a style.
+              const deletionWidgetDecoration = Decoration.widget(change.fromB, dom, {
+                marks: []
+              });
+              decorations.push(deletionWidgetDecoration);
+            }
+          });
+          return decoration.add(tr.doc, decorations);
         }
-        return currentPluginState;
+        return undefined;
       }
     }
   });

package/dist/es2019/pm-plugins/types.js

@@ -0,0 +1,4 @@
+export let TOGGLE_TRACK_CHANGES_ACTION = /*#__PURE__*/function (TOGGLE_TRACK_CHANGES_ACTION) {
+  TOGGLE_TRACK_CHANGES_ACTION["TOGGLE_TRACK_CHANGES"] = "TOGGLE_TRACK_CHANGES";
+  return TOGGLE_TRACK_CHANGES_ACTION;
+}({});

package/dist/es2019/trackChangesPlugin.js

@@ -1,4 +1,5 @@
-import { createTrackChangesPlugin } from './pm-plugins/main';
+import { createTrackChangesPlugin, trackChangesPluginKey } from './pm-plugins/main';
+import { TOGGLE_TRACK_CHANGES_ACTION as ACTION } from './pm-plugins/types';
 export const trackChangesPlugin = () => ({
   name: 'trackChanges',
   pmPlugins() {
@@ -8,10 +9,23 @@ export const trackChangesPlugin = () => ({
     }];
   },
   commands: {
-    setBaseline: ({
+    toggleChanges: ({
       tr
     }) => {
-      return tr.setMeta('setBaseline', true);
+      return tr.setMeta(trackChangesPluginKey, {
+        action: ACTION.TOGGLE_TRACK_CHANGES
+      });
     }
+  },
+  getSharedState: editorState => {
+    var _trackChangesPluginKe;
+    if (!editorState) {
+      return {
+        isDisplayingChanges: false
+      };
+    }
+    return {
+      isDisplayingChanges: Boolean((_trackChangesPluginKe = trackChangesPluginKey.getState(editorState)) === null || _trackChangesPluginKe === void 0 ? void 0 : _trackChangesPluginKe.enable)
+    };
   }
 });

package/dist/esm/pm-plugins/main.js

@@ -1,22 +1,100 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { ChangeSet, simplifyChanges } from 'prosemirror-changeset';
+import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-export var trackChangesPluginKey = new PluginKey('showDiffPlugin');
-
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-
+import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { TOGGLE_TRACK_CHANGES_ACTION as ACTION } from './types';
+export var trackChangesPluginKey = new PluginKey('trackChangesPlugin');
 export var createTrackChangesPlugin = function createTrackChangesPlugin() {
   return new SafePlugin({
     key: trackChangesPluginKey,
     state: {
-      init: function init() {
-        return {};
+      init: function init(_, _ref) {
+        var doc = _ref.doc;
+        return {
+          changes: ChangeSet.create(doc),
+          shouldChangesBeDispalyed: false,
+          baselineDoc: doc,
+          numOfChanges: 0
+        };
       },
-      apply: function apply(tr, currentPluginState) {
-        var meta = tr.getMeta(trackChangesPluginKey);
-        if (meta) {
-          return meta;
+      apply: function apply(tr, state, oldState, newState) {
+        var metadata = tr.getMeta(trackChangesPluginKey);
+        if (metadata) {
+          if (metadata.action === ACTION.TOGGLE_TRACK_CHANGES) {
+            return _objectSpread(_objectSpread({}, state), {}, {
+              baselineDoc: state.shouldChangesBeDispalyed ? tr.doc : state.baselineDoc,
+              shouldChangesBeDispalyed: !state.shouldChangesBeDispalyed,
+              changes: state.shouldChangesBeDispalyed ? ChangeSet.create(tr.doc) : state.changes
+            });
+          }
+        }
+        if (!tr.docChanged || tr.getMeta('isRemote')) {
+          // If no document changes, return the old changeSet
+          return state;
+        }
+
+        // Create a new ChangeSet based on document changes
+        return _objectSpread(_objectSpread({}, state), {}, {
+          shouldChangesBeDispalyed: false,
+          changes: state.changes.addSteps(tr.doc,
+          // The new document
+          tr.mapping.maps,
+          // The set of changes
+          tr.docs[0].content // The old document
+          )
+        });
+      }
+    },
+    props: {
+      decorations: function decorations(state) {
+        var pluginState = trackChangesPluginKey.getState(state);
+        if (pluginState && pluginState.shouldChangesBeDispalyed && pluginState.changes) {
+          var decoration = DecorationSet.empty;
+          var decorations = [];
+          var changes = simplifyChanges(pluginState.changes.changes, state.doc);
+          var tr = state.tr;
+          changes.forEach(function (change) {
+            if (change.inserted.length > 0) {
+              var style = convertToInlineCss({
+                background: "var(--ds-background-accent-purple-subtlest, #F3F0FF)",
+                textDecoration: 'underline',
+                textDecorationStyle: 'dotted',
+                textDecorationThickness: "var(--ds-space-025, 2px)",
+                textDecorationColor: "var(--ds-border-accent-purple, #8270DB)"
+              });
+
+              // Inline decoration used for insertions as the content already exists in the document
+              // and we just want to style it.
+              var insertionInlineDecoration = Decoration.inline(change.fromB, change.toB, {
+                style: style
+              }, {});
+              decorations.push(insertionInlineDecoration);
+            }
+            if (change.deleted.length > 0) {
+              var dom = document.createElement('span');
+              var _style = convertToInlineCss({
+                color: "var(--ds-text-accent-gray, #44546F)",
+                textDecoration: 'line-through'
+              });
+              dom.setAttribute('style', _style);
+              dom.appendChild(DOMSerializer.fromSchema(tr.doc.type.schema).serializeFragment(pluginState === null || pluginState === void 0 ? void 0 : pluginState.baselineDoc.slice(change.fromA, change.toA).content));
+
+              // Widget decoration used for deletions as the content is not in the document
+              // and we want to display the deleted content with a style.
+              var deletionWidgetDecoration = Decoration.widget(change.fromB, dom, {
+                marks: []
+              });
+              decorations.push(deletionWidgetDecoration);
+            }
+          });
+          return decoration.add(tr.doc, decorations);
         }
-        return currentPluginState;
+        return undefined;
       }
     }
   });

package/dist/esm/pm-plugins/types.js

@@ -0,0 +1,4 @@
+export var TOGGLE_TRACK_CHANGES_ACTION = /*#__PURE__*/function (TOGGLE_TRACK_CHANGES_ACTION) {
+  TOGGLE_TRACK_CHANGES_ACTION["TOGGLE_TRACK_CHANGES"] = "TOGGLE_TRACK_CHANGES";
+  return TOGGLE_TRACK_CHANGES_ACTION;
+}({});

package/dist/esm/trackChangesPlugin.js

@@ -1,4 +1,5 @@
-import { createTrackChangesPlugin } from './pm-plugins/main';
+import { createTrackChangesPlugin, trackChangesPluginKey } from './pm-plugins/main';
+import { TOGGLE_TRACK_CHANGES_ACTION as ACTION } from './pm-plugins/types';
 export var trackChangesPlugin = function trackChangesPlugin() {
   return {
     name: 'trackChanges',
@@ -9,10 +10,23 @@ export var trackChangesPlugin = function trackChangesPlugin() {
       }];
     },
     commands: {
-      setBaseline: function setBaseline(_ref) {
+      toggleChanges: function toggleChanges(_ref) {
         var tr = _ref.tr;
-        return tr.setMeta('setBaseline', true);
+        return tr.setMeta(trackChangesPluginKey, {
+          action: ACTION.TOGGLE_TRACK_CHANGES
+        });
       }
+    },
+    getSharedState: function getSharedState(editorState) {
+      var _trackChangesPluginKe;
+      if (!editorState) {
+        return {
+          isDisplayingChanges: false
+        };
+      }
+      return {
+        isDisplayingChanges: Boolean((_trackChangesPluginKe = trackChangesPluginKey.getState(editorState)) === null || _trackChangesPluginKe === void 0 ? void 0 : _trackChangesPluginKe.enable)
+      };
     }
   };
 };

package/dist/types/pm-plugins/main.d.ts

@@ -1,6 +1,12 @@
+import { ChangeSet } from 'prosemirror-changeset';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 export declare const trackChangesPluginKey: PluginKey<any>;
-type TrackChangesPluginState = {};
+type TrackChangesPluginState = {
+    shouldChangesBeDispalyed: boolean;
+    baselineDoc: PMNode;
+    changes: ChangeSet;
+};
 export declare const createTrackChangesPlugin: () => SafePlugin<TrackChangesPluginState>;
 export {};

package/dist/types/pm-plugins/types.d.ts

@@ -0,0 +1,3 @@
+export declare enum TOGGLE_TRACK_CHANGES_ACTION {
+    TOGGLE_TRACK_CHANGES = "TOGGLE_TRACK_CHANGES"
+}

package/dist/types/trackChangesPluginType.d.ts

@@ -1,2 +1,16 @@
-import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
-export type TrackChangesPlugin = NextEditorPlugin<'trackChanges'>;
+import type { EditorCommand, NextEditorPlugin } from '@atlaskit/editor-common/types';
+export type TrackChangesPlugin = NextEditorPlugin<'trackChanges', {
+    commands: {
+        /**
+         * Toggles the displaying of changes in the editor.
+         */
+        toggleChanges: EditorCommand;
+    };
+    sharedState: {
+        /**
+         * Whether the track changes feature is currently displaying changes.
+         * Defaults to false.
+         */
+        isDisplayingChanges: boolean;
+    };
+}>;

package/dist/types-ts4.5/pm-plugins/main.d.ts

@@ -1,6 +1,12 @@
+import { ChangeSet } from 'prosemirror-changeset';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 export declare const trackChangesPluginKey: PluginKey<any>;
-type TrackChangesPluginState = {};
+type TrackChangesPluginState = {
+    shouldChangesBeDispalyed: boolean;
+    baselineDoc: PMNode;
+    changes: ChangeSet;
+};
 export declare const createTrackChangesPlugin: () => SafePlugin<TrackChangesPluginState>;
 export {};

package/dist/types-ts4.5/pm-plugins/types.d.ts

@@ -0,0 +1,3 @@
+export declare enum TOGGLE_TRACK_CHANGES_ACTION {
+    TOGGLE_TRACK_CHANGES = "TOGGLE_TRACK_CHANGES"
+}

package/dist/types-ts4.5/trackChangesPluginType.d.ts

@@ -1,2 +1,16 @@
-import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
-export type TrackChangesPlugin = NextEditorPlugin<'trackChanges'>;
+import type { EditorCommand, NextEditorPlugin } from '@atlaskit/editor-common/types';
+export type TrackChangesPlugin = NextEditorPlugin<'trackChanges', {
+    commands: {
+        /**
+         * Toggles the displaying of changes in the editor.
+         */
+        toggleChanges: EditorCommand;
+    };
+    sharedState: {
+        /**
+         * Whether the track changes feature is currently displaying changes.
+         * Defaults to false.
+         */
+        isDisplayingChanges: boolean;
+    };
+}>;

package/docs/0-intro.tsx

@@ -30,7 +30,72 @@ The \`dependencies\`, \`configuration\`, \`state\`, \`actions\`, and \`commands\
 below:
 
 ${code`
-type TrackChangesPlugin = NextEditorPlugin<'trackChanges'>;
+type TrackChangesPlugin = NextEditorPlugin<'trackChanges', {
+	commands: {
+		toggleChanges: EditorCommand
+	}
+}>;
+`}
+
+  ### Example Usage
+---
+${code`
+import React from 'react';
+
+import Button from '@atlaskit/button/new';
+import { cssMap } from '@atlaskit/css';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { ComposableEditor } from '@atlaskit/editor-core/composable-editor';
+import { usePreset } from '@atlaskit/editor-core/use-preset';
+import { basePlugin } from '@atlaskit/editor-plugins/base';
+import { Box } from '@atlaskit/primitives/compiled';
+import { token } from '@atlaskit/tokens';
+
+import { trackChangesPlugin } from '../src/trackChangesPlugin';
+
+const styles = cssMap({
+	aboveEditor: {
+		paddingTop: token('space.100'),
+		paddingBottom: token('space.100'),
+	},
+	everythingContainer: {
+		paddingTop: token('space.200'),
+		paddingBottom: token('space.200'),
+		paddingLeft: token('space.200'),
+		paddingRight: token('space.200'),
+	},
+});
+
+function Editor() {
+	const { preset, editorApi } = usePreset(
+		(builder) =>
+			builder.add(basePlugin).add(trackChangesPlugin),
+		[],
+	);
+
+	const isSelected = useSharedPluginStateSelector(editorApi, 'trackChanges.isDisplayingChanges');
+
+	return (
+		<Box xcss={styles.everythingContainer}>
+			<Box xcss={styles.aboveEditor}>
+				<Button
+					appearance="primary"
+					onClick={() => {
+						editorApi?.core.actions.execute(
+							editorApi?.trackChanges.commands.toggleChanges,
+						);
+					}}
+					isSelected={isSelected}
+				>
+					Show Diff
+				</Button>
+			</Box>
+			<ComposableEditor preset={preset} />
+		</Box>
+	);
+}
+
+export default Editor;
 `}
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-track-changes",
-	"version": "1.0.0",
+	"version": "2.0.0",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,7 +32,9 @@
 	},
 	"dependencies": {
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@babel/runtime": "^7.0.0"
+		"@atlaskit/tokens": "^5.5.0",
+		"@babel/runtime": "^7.0.0",
+		"prosemirror-changeset": "^2.2.1"
 	},
 	"peerDependencies": {
 		"@atlaskit/editor-common": "^107.7.0",