@atlaskit/editor-plugin-track-changes 2.1.1 → 2.3.0

package/docs/0-intro.tsx

@@ -30,11 +30,47 @@ The \`dependencies\`, \`configuration\`, \`state\`, \`actions\`, and \`commands\
 below:
 
 ${code`
-type TrackChangesPlugin = NextEditorPlugin<'trackChanges', {
-	commands: {
-		toggleChanges: EditorCommand
-	}
-}>;
+type TrackChangesPlugin = NextEditorPlugin<
+  'trackChanges',
+  {
+    commands: {
+      /**
+       * Toggles the displaying of changes in the editor.
+       */
+      toggleChanges: EditorCommand;
+    };
+    dependencies: [
+      /**
+       * Primary toolbar plugin for registering the track changes button.
+       */
+      OptionalPlugin<PrimaryToolbarPlugin>,
+      /**
+       * Show diff plugin for showing the changes in a diff view.
+       */
+      ShowDiffPlugin,
+    ];
+    pluginConfiguration?: {
+      /**
+       * Whether the track changes button should be shown on the toolbar.
+       * Defaults to false.
+       */
+      showOnToolbar?: boolean;
+    };
+    sharedState: {
+      /**
+       * Whether the track changes feature is currently displaying changes.
+       * Defaults to false.
+       */
+      isDisplayingChanges: boolean;
+      /**
+       * If there are changes in the document that determine if track changes button
+       * should be enabled.
+       * This will only be false initially before any changes in the session.
+       */
+      isShowDiffAvailable: boolean;
+    };
+  }
+>;
 `}
 
   ### Example Usage
@@ -51,7 +87,8 @@ import { basePlugin } from '@atlaskit/editor-plugins/base';
 import { Box } from '@atlaskit/primitives/compiled';
 import { token } from '@atlaskit/tokens';
 
-import { trackChangesPlugin } from '../src/trackChangesPlugin';
+import { showDiffPlugin } from '@atlaskit/editor-plugin-show-diff';
+import { trackChangesPlugin } from '@atlaskit/editor-plugin-track-changes';
 
 const styles = cssMap({
 	aboveEditor: {
@@ -69,7 +106,7 @@ const styles = cssMap({
 function Editor() {
 	const { preset, editorApi } = usePreset(
 		(builder) =>
-			builder.add(basePlugin).add(trackChangesPlugin),
+			builder.add(basePlugin).add(showDiffPlugin).add(trackChangesPlugin),
 		[],
 	);
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-track-changes",
-	"version": "2.1.1",
+	"version": "2.3.0",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,13 +31,16 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
+		"@atlaskit/button": "^23.3.0",
+		"@atlaskit/editor-plugin-primary-toolbar": "^4.1.0",
+		"@atlaskit/editor-plugin-show-diff": "0.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/tokens": "^5.6.0",
+		"@atlaskit/icon-lab": "^5.2.0",
 		"@babel/runtime": "^7.0.0",
-		"prosemirror-changeset": "^2.2.1"
+		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.12.0",
+		"@atlaskit/editor-common": "^107.14.0",
 		"react": "^18.2.0"
 	},
 	"devDependencies": {

package/tsconfig.json

@@ -1,12 +1,18 @@
 {
-	"extends": "../../../tsconfig.json",
-	"include": [
-		"examples/**/*.ts",
-		"examples/**/*.tsx",
-		"example-helpers/**/*.ts",
-		"example-helpers/**/*.tsx",
-		"src/**/*.ts",
-		"src/**/*.tsx"
-	],
-	"compilerOptions": {}
+  "extends": "../../../tsconfig.json",
+  "include": [
+    "examples/**/*.ts",
+    "examples/**/*.tsx",
+    "example-helpers/**/*.ts",
+    "example-helpers/**/*.tsx",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "**/stories.ts",
+    "**/stories.tsx",
+    "**/stories/*.ts",
+    "**/stories/*.tsx",
+    "**/stories/**/*.ts",
+    "**/stories/**/*.tsx"
+  ],
+  "compilerOptions": {}
 }

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

@@ -1,55 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createInlineChangedDecoration = exports.createDeletedContentDecoration = void 0;
-var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
-var _model = require("@atlaskit/editor-prosemirror/model");
-var _view = require("@atlaskit/editor-prosemirror/view");
-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
- *
- * @param change Changeset "change" containing information about the change content + range
- * @returns Prosemirror inline decoration
- */
-var createInlineChangedDecoration = exports.createInlineChangedDecoration = function createInlineChangedDecoration(change) {
-  return _view.Decoration.inline(change.fromB, change.toB, {
-    style: style
-  }, {});
-};
-var deletedContentStyle = (0, _lazyNodeView.convertToInlineCss)({
-  color: "var(--ds-text-accent-gray, #44546F)",
-  textDecoration: 'line-through'
-});
-
-/**
- * Creates a widget to represent the deleted content in the editor
- *
- * @param props.change Changeset "change" containing information about the change content + range
- * @param props.doc Baseline doc to compare against
- * @param props.tr The relevant transaction this decoration is being created against
- * @returns Prosemirror widget decoration
- */
-var createDeletedContentDecoration = exports.createDeletedContentDecoration = function createDeletedContentDecoration(_ref) {
-  var change = _ref.change,
-    doc = _ref.doc,
-    tr = _ref.tr;
-  var dom = document.createElement('span');
-  dom.setAttribute('style', deletedContentStyle);
-  dom.appendChild(_model.DOMSerializer.fromSchema(tr.doc.type.schema).serializeFragment(doc.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.
-  return _view.Decoration.widget(change.fromB, dom, {
-    marks: []
-  });
-};

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

@@ -1,48 +0,0 @@
-import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
-import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
-import { Decoration } from '@atlaskit/editor-prosemirror/view';
-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
- *
- * @param change Changeset "change" containing information about the change content + range
- * @returns Prosemirror inline decoration
- */
-export const createInlineChangedDecoration = change => Decoration.inline(change.fromB, change.toB, {
-  style
-}, {});
-const deletedContentStyle = convertToInlineCss({
-  color: "var(--ds-text-accent-gray, #44546F)",
-  textDecoration: 'line-through'
-});
-
-/**
- * Creates a widget to represent the deleted content in the editor
- *
- * @param props.change Changeset "change" containing information about the change content + range
- * @param props.doc Baseline doc to compare against
- * @param props.tr The relevant transaction this decoration is being created against
- * @returns Prosemirror widget decoration
- */
-export const createDeletedContentDecoration = ({
-  change,
-  doc,
-  tr
-}) => {
-  const dom = document.createElement('span');
-  dom.setAttribute('style', deletedContentStyle);
-  dom.appendChild(DOMSerializer.fromSchema(tr.doc.type.schema).serializeFragment(doc.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.
-  return Decoration.widget(change.fromB, dom, {
-    marks: []
-  });
-};

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

@@ -1,49 +0,0 @@
-import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
-import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
-import { Decoration } from '@atlaskit/editor-prosemirror/view';
-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
- *
- * @param change Changeset "change" containing information about the change content + range
- * @returns Prosemirror inline decoration
- */
-export var createInlineChangedDecoration = function createInlineChangedDecoration(change) {
-  return Decoration.inline(change.fromB, change.toB, {
-    style: style
-  }, {});
-};
-var deletedContentStyle = convertToInlineCss({
-  color: "var(--ds-text-accent-gray, #44546F)",
-  textDecoration: 'line-through'
-});
-
-/**
- * Creates a widget to represent the deleted content in the editor
- *
- * @param props.change Changeset "change" containing information about the change content + range
- * @param props.doc Baseline doc to compare against
- * @param props.tr The relevant transaction this decoration is being created against
- * @returns Prosemirror widget decoration
- */
-export var createDeletedContentDecoration = function createDeletedContentDecoration(_ref) {
-  var change = _ref.change,
-    doc = _ref.doc,
-    tr = _ref.tr;
-  var dom = document.createElement('span');
-  dom.setAttribute('style', deletedContentStyle);
-  dom.appendChild(DOMSerializer.fromSchema(tr.doc.type.schema).serializeFragment(doc.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.
-  return Decoration.widget(change.fromB, dom, {
-    marks: []
-  });
-};

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

@@ -1,26 +0,0 @@
-import type { Change } from 'prosemirror-changeset';
-import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import type { Transaction } from '@atlaskit/editor-prosemirror/state';
-import { Decoration } from '@atlaskit/editor-prosemirror/view';
-/**
- * Inline decoration used for insertions as the content already exists in the document
- *
- * @param change Changeset "change" containing information about the change content + range
- * @returns Prosemirror inline decoration
- */
-export declare const createInlineChangedDecoration: (change: Change) => Decoration;
-interface DeletedContentDecorationProps {
-    change: Change;
-    doc: PMNode;
-    tr: Transaction;
-}
-/**
- * Creates a widget to represent the deleted content in the editor
- *
- * @param props.change Changeset "change" containing information about the change content + range
- * @param props.doc Baseline doc to compare against
- * @param props.tr The relevant transaction this decoration is being created against
- * @returns Prosemirror widget decoration
- */
-export declare const createDeletedContentDecoration: ({ change, doc, tr, }: DeletedContentDecorationProps) => Decoration;
-export {};

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

@@ -1,26 +0,0 @@
-import type { Change } from 'prosemirror-changeset';
-import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import type { Transaction } from '@atlaskit/editor-prosemirror/state';
-import { Decoration } from '@atlaskit/editor-prosemirror/view';
-/**
- * Inline decoration used for insertions as the content already exists in the document
- *
- * @param change Changeset "change" containing information about the change content + range
- * @returns Prosemirror inline decoration
- */
-export declare const createInlineChangedDecoration: (change: Change) => Decoration;
-interface DeletedContentDecorationProps {
-    change: Change;
-    doc: PMNode;
-    tr: Transaction;
-}
-/**
- * Creates a widget to represent the deleted content in the editor
- *
- * @param props.change Changeset "change" containing information about the change content + range
- * @param props.doc Baseline doc to compare against
- * @param props.tr The relevant transaction this decoration is being created against
- * @returns Prosemirror widget decoration
- */
-export declare const createDeletedContentDecoration: ({ change, doc, tr, }: DeletedContentDecorationProps) => Decoration;
-export {};