@atlaskit/editor-plugin-track-changes 2.2.0 → 2.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/README.md +88 -0
- package/afm-cc/tsconfig.json +6 -1
- package/afm-jira/tsconfig.json +6 -1
- package/afm-post-office/tsconfig.json +6 -1
- package/afm-rovo-extension/tsconfig.json +6 -1
- package/afm-townsquare/tsconfig.json +6 -1
- package/build/tsconfig.json +20 -15
- package/dist/cjs/trackChangesPlugin.js +9 -6
- package/dist/cjs/ui/TrackChangesToolbarButton.js +5 -1
- package/dist/es2019/trackChangesPlugin.js +9 -6
- package/dist/es2019/ui/TrackChangesToolbarButton.js +6 -1
- package/dist/esm/trackChangesPlugin.js +9 -6
- package/dist/esm/ui/TrackChangesToolbarButton.js +5 -1
- package/dist/types/trackChangesPluginType.d.ts +17 -1
- package/dist/types-ts4.5/trackChangesPluginType.d.ts +13 -0
- package/docs/0-intro.tsx +44 -7
- package/package.json +4 -3
- package/tsconfig.json +16 -10
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-track-changes
|
|
2
2
|
|
|
3
|
+
## 2.3.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#193889](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/193889)
|
|
8
|
+
[`6d4374ce318fd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6d4374ce318fd) -
|
|
9
|
+
[EDITOR-1073] Add i18n for Track Changes button & toggle button on toolbar with plugin option
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- Updated dependencies
|
|
14
|
+
|
|
3
15
|
## 2.2.0
|
|
4
16
|
|
|
5
17
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -1 +1,89 @@
|
|
|
1
1
|
# Editor plugin track changes
|
|
2
|
+
|
|
3
|
+
Track changes plugin for @atlaskit/editor-core
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
`import { trackChangesPlugin } from '@atlaskit/editor-plugin-track-changes';`
|
|
8
|
+
|
|
9
|
+
### Dependencies
|
|
10
|
+
|
|
11
|
+
**Required:**
|
|
12
|
+
- `ShowDiffPlugin` - Required for displaying track changes diff view
|
|
13
|
+
|
|
14
|
+
**Optional:**
|
|
15
|
+
- `PrimaryToolbarPlugin` - Required if using `showOnToolbar: true`
|
|
16
|
+
|
|
17
|
+
### Configuration
|
|
18
|
+
|
|
19
|
+
The plugin accepts an optional configuration object:
|
|
20
|
+
|
|
21
|
+
```typescript
|
|
22
|
+
trackChangesPlugin({
|
|
23
|
+
showOnToolbar: true // Shows track changes button in the toolbar (default: false)
|
|
24
|
+
})
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
### Example
|
|
28
|
+
|
|
29
|
+
```typescript
|
|
30
|
+
import React from 'react';
|
|
31
|
+
|
|
32
|
+
import Button from '@atlaskit/button/new';
|
|
33
|
+
import { cssMap } from '@atlaskit/css';
|
|
34
|
+
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
35
|
+
import { ComposableEditor } from '@atlaskit/editor-core/composable-editor';
|
|
36
|
+
import { usePreset } from '@atlaskit/editor-core/use-preset';
|
|
37
|
+
import { basePlugin } from '@atlaskit/editor-plugins/base';
|
|
38
|
+
import { Box } from '@atlaskit/primitives/compiled';
|
|
39
|
+
import { token } from '@atlaskit/tokens';
|
|
40
|
+
|
|
41
|
+
import { showDiffPlugin } from '@atlaskit/editor-plugin-show-diff';
|
|
42
|
+
import { trackChangesPlugin } from '@atlaskit/editor-plugin-track-changes';
|
|
43
|
+
|
|
44
|
+
const styles = cssMap({
|
|
45
|
+
aboveEditor: {
|
|
46
|
+
paddingTop: token('space.100'),
|
|
47
|
+
paddingBottom: token('space.100'),
|
|
48
|
+
},
|
|
49
|
+
everythingContainer: {
|
|
50
|
+
paddingTop: token('space.200'),
|
|
51
|
+
paddingBottom: token('space.200'),
|
|
52
|
+
paddingLeft: token('space.200'),
|
|
53
|
+
paddingRight: token('space.200'),
|
|
54
|
+
},
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
function Editor() {
|
|
58
|
+
const { preset, editorApi } = usePreset(
|
|
59
|
+
(builder) =>
|
|
60
|
+
builder.add(basePlugin).add(showDiffPlugin).add(trackChangesPlugin),
|
|
61
|
+
[],
|
|
62
|
+
);
|
|
63
|
+
|
|
64
|
+
const isSelected = useSharedPluginStateSelector(editorApi, 'trackChanges.isDisplayingChanges');
|
|
65
|
+
|
|
66
|
+
return (
|
|
67
|
+
<Box xcss={styles.everythingContainer}>
|
|
68
|
+
<Box xcss={styles.aboveEditor}>
|
|
69
|
+
<Button
|
|
70
|
+
appearance="primary"
|
|
71
|
+
onClick={() => {
|
|
72
|
+
editorApi?.core.actions.execute(
|
|
73
|
+
editorApi?.trackChanges.commands.toggleChanges,
|
|
74
|
+
);
|
|
75
|
+
}}
|
|
76
|
+
isSelected={isSelected}
|
|
77
|
+
>
|
|
78
|
+
Show Diff
|
|
79
|
+
</Button>
|
|
80
|
+
</Box>
|
|
81
|
+
<ComposableEditor preset={preset} />
|
|
82
|
+
</Box>
|
|
83
|
+
);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
export default Editor;
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/editor/editor-plugin-track-changes).
|
package/afm-cc/tsconfig.json
CHANGED
|
@@ -14,7 +14,12 @@
|
|
|
14
14
|
"../src/**/__tests__/*",
|
|
15
15
|
"../src/**/*.test.*",
|
|
16
16
|
"../src/**/test.*",
|
|
17
|
-
"../src/**/examples.*"
|
|
17
|
+
"../src/**/examples.*",
|
|
18
|
+
"../src/**/examples/*",
|
|
19
|
+
"../src/**/examples/**/*",
|
|
20
|
+
"../src/**/*.stories.*",
|
|
21
|
+
"../src/**/stories/*",
|
|
22
|
+
"../src/**/stories/**/*"
|
|
18
23
|
],
|
|
19
24
|
"references": [
|
|
20
25
|
{
|
package/afm-jira/tsconfig.json
CHANGED
|
@@ -14,7 +14,12 @@
|
|
|
14
14
|
"../src/**/__tests__/*",
|
|
15
15
|
"../src/**/*.test.*",
|
|
16
16
|
"../src/**/test.*",
|
|
17
|
-
"../src/**/examples.*"
|
|
17
|
+
"../src/**/examples.*",
|
|
18
|
+
"../src/**/examples/*",
|
|
19
|
+
"../src/**/examples/**/*",
|
|
20
|
+
"../src/**/*.stories.*",
|
|
21
|
+
"../src/**/stories/*",
|
|
22
|
+
"../src/**/stories/**/*"
|
|
18
23
|
],
|
|
19
24
|
"references": [
|
|
20
25
|
{
|
|
@@ -14,7 +14,12 @@
|
|
|
14
14
|
"../src/**/__tests__/*",
|
|
15
15
|
"../src/**/*.test.*",
|
|
16
16
|
"../src/**/test.*",
|
|
17
|
-
"../src/**/examples.*"
|
|
17
|
+
"../src/**/examples.*",
|
|
18
|
+
"../src/**/examples/*",
|
|
19
|
+
"../src/**/examples/**/*",
|
|
20
|
+
"../src/**/*.stories.*",
|
|
21
|
+
"../src/**/stories/*",
|
|
22
|
+
"../src/**/stories/**/*"
|
|
18
23
|
],
|
|
19
24
|
"references": [
|
|
20
25
|
{
|
|
@@ -14,7 +14,12 @@
|
|
|
14
14
|
"../src/**/__tests__/*",
|
|
15
15
|
"../src/**/*.test.*",
|
|
16
16
|
"../src/**/test.*",
|
|
17
|
-
"../src/**/examples.*"
|
|
17
|
+
"../src/**/examples.*",
|
|
18
|
+
"../src/**/examples/*",
|
|
19
|
+
"../src/**/examples/**/*",
|
|
20
|
+
"../src/**/*.stories.*",
|
|
21
|
+
"../src/**/stories/*",
|
|
22
|
+
"../src/**/stories/**/*"
|
|
18
23
|
],
|
|
19
24
|
"references": [
|
|
20
25
|
{
|
|
@@ -14,7 +14,12 @@
|
|
|
14
14
|
"../src/**/__tests__/*",
|
|
15
15
|
"../src/**/*.test.*",
|
|
16
16
|
"../src/**/test.*",
|
|
17
|
-
"../src/**/examples.*"
|
|
17
|
+
"../src/**/examples.*",
|
|
18
|
+
"../src/**/examples/*",
|
|
19
|
+
"../src/**/examples/**/*",
|
|
20
|
+
"../src/**/*.stories.*",
|
|
21
|
+
"../src/**/stories/*",
|
|
22
|
+
"../src/**/stories/**/*"
|
|
18
23
|
],
|
|
19
24
|
"references": [
|
|
20
25
|
{
|
package/build/tsconfig.json
CHANGED
|
@@ -1,17 +1,22 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
2
|
+
"extends": "../tsconfig",
|
|
3
|
+
"compilerOptions": {
|
|
4
|
+
"target": "es5",
|
|
5
|
+
"paths": {}
|
|
6
|
+
},
|
|
7
|
+
"include": [
|
|
8
|
+
"../src/**/*.ts",
|
|
9
|
+
"../src/**/*.tsx"
|
|
10
|
+
],
|
|
11
|
+
"exclude": [
|
|
12
|
+
"../src/**/__tests__/*",
|
|
13
|
+
"../src/**/*.test.*",
|
|
14
|
+
"../src/**/test.*",
|
|
15
|
+
"../src/**/examples.*",
|
|
16
|
+
"../src/**/examples/*",
|
|
17
|
+
"../src/**/examples/**/*",
|
|
18
|
+
"../src/**/*.stories.*",
|
|
19
|
+
"../src/**/stories/*",
|
|
20
|
+
"../src/**/stories/**/*"
|
|
21
|
+
]
|
|
17
22
|
}
|
|
@@ -10,17 +10,20 @@ var _main = require("./pm-plugins/main");
|
|
|
10
10
|
var _types = require("./pm-plugins/types");
|
|
11
11
|
var _TrackChangesToolbarButton = require("./ui/TrackChangesToolbarButton");
|
|
12
12
|
var trackChangesPlugin = exports.trackChangesPlugin = function trackChangesPlugin(_ref) {
|
|
13
|
-
var
|
|
14
|
-
|
|
13
|
+
var api = _ref.api,
|
|
14
|
+
options = _ref.config;
|
|
15
15
|
var primaryToolbarComponent = function primaryToolbarComponent() {
|
|
16
16
|
return /*#__PURE__*/_react.default.createElement(_TrackChangesToolbarButton.TrackChangesToolbarButton, {
|
|
17
17
|
api: api
|
|
18
18
|
});
|
|
19
19
|
};
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
20
|
+
if ((options === null || options === void 0 ? void 0 : options.showOnToolbar) === true) {
|
|
21
|
+
var _api$primaryToolbar;
|
|
22
|
+
api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || (_api$primaryToolbar = _api$primaryToolbar.actions) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.registerComponent({
|
|
23
|
+
name: 'trackChanges',
|
|
24
|
+
component: primaryToolbarComponent
|
|
25
|
+
});
|
|
26
|
+
}
|
|
24
27
|
return {
|
|
25
28
|
name: 'trackChanges',
|
|
26
29
|
pmPlugins: function pmPlugins() {
|
|
@@ -6,8 +6,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.TrackChangesToolbarButton = void 0;
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _reactIntlNext = require("react-intl-next");
|
|
9
10
|
var _new = require("@atlaskit/button/new");
|
|
10
11
|
var _hooks = require("@atlaskit/editor-common/hooks");
|
|
12
|
+
var _messages = require("@atlaskit/editor-common/messages");
|
|
11
13
|
var _history = _interopRequireDefault(require("@atlaskit/icon-lab/core/history"));
|
|
12
14
|
var TrackChangesToolbarButton = exports.TrackChangesToolbarButton = function TrackChangesToolbarButton(_ref) {
|
|
13
15
|
var _api$trackChanges;
|
|
@@ -21,12 +23,14 @@ var TrackChangesToolbarButton = exports.TrackChangesToolbarButton = function Tra
|
|
|
21
23
|
}),
|
|
22
24
|
isDisplayingChanges = _useSharedPluginState.isDisplayingChanges,
|
|
23
25
|
isShowDiffAvailable = _useSharedPluginState.isShowDiffAvailable;
|
|
26
|
+
var _useIntl = (0, _reactIntlNext.useIntl)(),
|
|
27
|
+
formatMessage = _useIntl.formatMessage;
|
|
24
28
|
var handleClick = _react.default.useCallback(function () {
|
|
25
29
|
api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.trackChanges.commands.toggleChanges);
|
|
26
30
|
}, [api === null || api === void 0 || (_api$trackChanges = api.trackChanges) === null || _api$trackChanges === void 0 ? void 0 : _api$trackChanges.commands, api === null || api === void 0 ? void 0 : api.core.actions]);
|
|
27
31
|
return /*#__PURE__*/_react.default.createElement(_new.IconButton, {
|
|
28
32
|
icon: _history.default,
|
|
29
|
-
label:
|
|
33
|
+
label: formatMessage(_messages.trackChangesMessages.toolbarIconLabel),
|
|
30
34
|
appearance: "subtle",
|
|
31
35
|
isDisabled: !isShowDiffAvailable,
|
|
32
36
|
isSelected: isDisplayingChanges,
|
|
@@ -3,18 +3,21 @@ import { createTrackChangesPlugin, trackChangesPluginKey } from './pm-plugins/ma
|
|
|
3
3
|
import { TOGGLE_TRACK_CHANGES_ACTION as ACTION } from './pm-plugins/types';
|
|
4
4
|
import { TrackChangesToolbarButton } from './ui/TrackChangesToolbarButton';
|
|
5
5
|
export const trackChangesPlugin = ({
|
|
6
|
-
api
|
|
6
|
+
api,
|
|
7
|
+
config: options
|
|
7
8
|
}) => {
|
|
8
|
-
var _api$primaryToolbar, _api$primaryToolbar$a;
|
|
9
9
|
const primaryToolbarComponent = () => {
|
|
10
10
|
return /*#__PURE__*/React.createElement(TrackChangesToolbarButton, {
|
|
11
11
|
api: api
|
|
12
12
|
});
|
|
13
13
|
};
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
if ((options === null || options === void 0 ? void 0 : options.showOnToolbar) === true) {
|
|
15
|
+
var _api$primaryToolbar, _api$primaryToolbar$a;
|
|
16
|
+
api === null || api === void 0 ? void 0 : (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : (_api$primaryToolbar$a = _api$primaryToolbar.actions) === null || _api$primaryToolbar$a === void 0 ? void 0 : _api$primaryToolbar$a.registerComponent({
|
|
17
|
+
name: 'trackChanges',
|
|
18
|
+
component: primaryToolbarComponent
|
|
19
|
+
});
|
|
20
|
+
}
|
|
18
21
|
return {
|
|
19
22
|
name: 'trackChanges',
|
|
20
23
|
pmPlugins() {
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { useIntl } from 'react-intl-next';
|
|
2
3
|
import { IconButton } from '@atlaskit/button/new';
|
|
3
4
|
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
5
|
+
import { trackChangesMessages } from '@atlaskit/editor-common/messages';
|
|
4
6
|
import HistoryIcon from '@atlaskit/icon-lab/core/history';
|
|
5
7
|
export const TrackChangesToolbarButton = ({
|
|
6
8
|
api
|
|
@@ -16,12 +18,15 @@ export const TrackChangesToolbarButton = ({
|
|
|
16
18
|
isShowDiffAvailable: (_states$trackChangesS2 = states.trackChangesState) === null || _states$trackChangesS2 === void 0 ? void 0 : _states$trackChangesS2.isShowDiffAvailable
|
|
17
19
|
};
|
|
18
20
|
});
|
|
21
|
+
const {
|
|
22
|
+
formatMessage
|
|
23
|
+
} = useIntl();
|
|
19
24
|
const handleClick = React.useCallback(() => {
|
|
20
25
|
api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.trackChanges.commands.toggleChanges);
|
|
21
26
|
}, [api === null || api === void 0 ? void 0 : (_api$trackChanges = api.trackChanges) === null || _api$trackChanges === void 0 ? void 0 : _api$trackChanges.commands, api === null || api === void 0 ? void 0 : api.core.actions]);
|
|
22
27
|
return /*#__PURE__*/React.createElement(IconButton, {
|
|
23
28
|
icon: HistoryIcon,
|
|
24
|
-
label:
|
|
29
|
+
label: formatMessage(trackChangesMessages.toolbarIconLabel),
|
|
25
30
|
appearance: "subtle",
|
|
26
31
|
isDisabled: !isShowDiffAvailable,
|
|
27
32
|
isSelected: isDisplayingChanges,
|
|
@@ -3,17 +3,20 @@ import { createTrackChangesPlugin, trackChangesPluginKey } from './pm-plugins/ma
|
|
|
3
3
|
import { TOGGLE_TRACK_CHANGES_ACTION as ACTION } from './pm-plugins/types';
|
|
4
4
|
import { TrackChangesToolbarButton } from './ui/TrackChangesToolbarButton';
|
|
5
5
|
export var trackChangesPlugin = function trackChangesPlugin(_ref) {
|
|
6
|
-
var
|
|
7
|
-
|
|
6
|
+
var api = _ref.api,
|
|
7
|
+
options = _ref.config;
|
|
8
8
|
var primaryToolbarComponent = function primaryToolbarComponent() {
|
|
9
9
|
return /*#__PURE__*/React.createElement(TrackChangesToolbarButton, {
|
|
10
10
|
api: api
|
|
11
11
|
});
|
|
12
12
|
};
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
if ((options === null || options === void 0 ? void 0 : options.showOnToolbar) === true) {
|
|
14
|
+
var _api$primaryToolbar;
|
|
15
|
+
api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || (_api$primaryToolbar = _api$primaryToolbar.actions) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.registerComponent({
|
|
16
|
+
name: 'trackChanges',
|
|
17
|
+
component: primaryToolbarComponent
|
|
18
|
+
});
|
|
19
|
+
}
|
|
17
20
|
return {
|
|
18
21
|
name: 'trackChanges',
|
|
19
22
|
pmPlugins: function pmPlugins() {
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { useIntl } from 'react-intl-next';
|
|
2
3
|
import { IconButton } from '@atlaskit/button/new';
|
|
3
4
|
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
5
|
+
import { trackChangesMessages } from '@atlaskit/editor-common/messages';
|
|
4
6
|
import HistoryIcon from '@atlaskit/icon-lab/core/history';
|
|
5
7
|
export var TrackChangesToolbarButton = function TrackChangesToolbarButton(_ref) {
|
|
6
8
|
var _api$trackChanges;
|
|
@@ -14,12 +16,14 @@ export var TrackChangesToolbarButton = function TrackChangesToolbarButton(_ref)
|
|
|
14
16
|
}),
|
|
15
17
|
isDisplayingChanges = _useSharedPluginState.isDisplayingChanges,
|
|
16
18
|
isShowDiffAvailable = _useSharedPluginState.isShowDiffAvailable;
|
|
19
|
+
var _useIntl = useIntl(),
|
|
20
|
+
formatMessage = _useIntl.formatMessage;
|
|
17
21
|
var handleClick = React.useCallback(function () {
|
|
18
22
|
api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.trackChanges.commands.toggleChanges);
|
|
19
23
|
}, [api === null || api === void 0 || (_api$trackChanges = api.trackChanges) === null || _api$trackChanges === void 0 ? void 0 : _api$trackChanges.commands, api === null || api === void 0 ? void 0 : api.core.actions]);
|
|
20
24
|
return /*#__PURE__*/React.createElement(IconButton, {
|
|
21
25
|
icon: HistoryIcon,
|
|
22
|
-
label:
|
|
26
|
+
label: formatMessage(trackChangesMessages.toolbarIconLabel),
|
|
23
27
|
appearance: "subtle",
|
|
24
28
|
isDisabled: !isShowDiffAvailable,
|
|
25
29
|
isSelected: isDisplayingChanges,
|
|
@@ -8,7 +8,23 @@ export type TrackChangesPlugin = NextEditorPlugin<'trackChanges', {
|
|
|
8
8
|
*/
|
|
9
9
|
toggleChanges: EditorCommand;
|
|
10
10
|
};
|
|
11
|
-
dependencies: [
|
|
11
|
+
dependencies: [
|
|
12
|
+
/**
|
|
13
|
+
* Primary toolbar plugin for registering the track changes button.
|
|
14
|
+
*/
|
|
15
|
+
OptionalPlugin<PrimaryToolbarPlugin>,
|
|
16
|
+
/**
|
|
17
|
+
* Show diff plugin for showing the changes in a diff view.
|
|
18
|
+
*/
|
|
19
|
+
ShowDiffPlugin
|
|
20
|
+
];
|
|
21
|
+
pluginConfiguration?: {
|
|
22
|
+
/**
|
|
23
|
+
* Whether the track changes button should be shown on the toolbar.
|
|
24
|
+
* Defaults to false.
|
|
25
|
+
*/
|
|
26
|
+
showOnToolbar?: boolean;
|
|
27
|
+
};
|
|
12
28
|
sharedState: {
|
|
13
29
|
/**
|
|
14
30
|
* Whether the track changes feature is currently displaying changes.
|
|
@@ -9,9 +9,22 @@ export type TrackChangesPlugin = NextEditorPlugin<'trackChanges', {
|
|
|
9
9
|
toggleChanges: EditorCommand;
|
|
10
10
|
};
|
|
11
11
|
dependencies: [
|
|
12
|
+
/**
|
|
13
|
+
* Primary toolbar plugin for registering the track changes button.
|
|
14
|
+
*/
|
|
12
15
|
OptionalPlugin<PrimaryToolbarPlugin>,
|
|
16
|
+
/**
|
|
17
|
+
* Show diff plugin for showing the changes in a diff view.
|
|
18
|
+
*/
|
|
13
19
|
ShowDiffPlugin
|
|
14
20
|
];
|
|
21
|
+
pluginConfiguration?: {
|
|
22
|
+
/**
|
|
23
|
+
* Whether the track changes button should be shown on the toolbar.
|
|
24
|
+
* Defaults to false.
|
|
25
|
+
*/
|
|
26
|
+
showOnToolbar?: boolean;
|
|
27
|
+
};
|
|
15
28
|
sharedState: {
|
|
16
29
|
/**
|
|
17
30
|
* Whether the track changes feature is currently displaying changes.
|
package/docs/0-intro.tsx
CHANGED
|
@@ -30,11 +30,47 @@ The \`dependencies\`, \`configuration\`, \`state\`, \`actions\`, and \`commands\
|
|
|
30
30
|
below:
|
|
31
31
|
|
|
32
32
|
${code`
|
|
33
|
-
type TrackChangesPlugin = NextEditorPlugin<
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
33
|
+
type TrackChangesPlugin = NextEditorPlugin<
|
|
34
|
+
'trackChanges',
|
|
35
|
+
{
|
|
36
|
+
commands: {
|
|
37
|
+
/**
|
|
38
|
+
* Toggles the displaying of changes in the editor.
|
|
39
|
+
*/
|
|
40
|
+
toggleChanges: EditorCommand;
|
|
41
|
+
};
|
|
42
|
+
dependencies: [
|
|
43
|
+
/**
|
|
44
|
+
* Primary toolbar plugin for registering the track changes button.
|
|
45
|
+
*/
|
|
46
|
+
OptionalPlugin<PrimaryToolbarPlugin>,
|
|
47
|
+
/**
|
|
48
|
+
* Show diff plugin for showing the changes in a diff view.
|
|
49
|
+
*/
|
|
50
|
+
ShowDiffPlugin,
|
|
51
|
+
];
|
|
52
|
+
pluginConfiguration?: {
|
|
53
|
+
/**
|
|
54
|
+
* Whether the track changes button should be shown on the toolbar.
|
|
55
|
+
* Defaults to false.
|
|
56
|
+
*/
|
|
57
|
+
showOnToolbar?: boolean;
|
|
58
|
+
};
|
|
59
|
+
sharedState: {
|
|
60
|
+
/**
|
|
61
|
+
* Whether the track changes feature is currently displaying changes.
|
|
62
|
+
* Defaults to false.
|
|
63
|
+
*/
|
|
64
|
+
isDisplayingChanges: boolean;
|
|
65
|
+
/**
|
|
66
|
+
* If there are changes in the document that determine if track changes button
|
|
67
|
+
* should be enabled.
|
|
68
|
+
* This will only be false initially before any changes in the session.
|
|
69
|
+
*/
|
|
70
|
+
isShowDiffAvailable: boolean;
|
|
71
|
+
};
|
|
72
|
+
}
|
|
73
|
+
>;
|
|
38
74
|
`}
|
|
39
75
|
|
|
40
76
|
### Example Usage
|
|
@@ -51,7 +87,8 @@ import { basePlugin } from '@atlaskit/editor-plugins/base';
|
|
|
51
87
|
import { Box } from '@atlaskit/primitives/compiled';
|
|
52
88
|
import { token } from '@atlaskit/tokens';
|
|
53
89
|
|
|
54
|
-
import {
|
|
90
|
+
import { showDiffPlugin } from '@atlaskit/editor-plugin-show-diff';
|
|
91
|
+
import { trackChangesPlugin } from '@atlaskit/editor-plugin-track-changes';
|
|
55
92
|
|
|
56
93
|
const styles = cssMap({
|
|
57
94
|
aboveEditor: {
|
|
@@ -69,7 +106,7 @@ const styles = cssMap({
|
|
|
69
106
|
function Editor() {
|
|
70
107
|
const { preset, editorApi } = usePreset(
|
|
71
108
|
(builder) =>
|
|
72
|
-
builder.add(basePlugin).add(trackChangesPlugin),
|
|
109
|
+
builder.add(basePlugin).add(showDiffPlugin).add(trackChangesPlugin),
|
|
73
110
|
[],
|
|
74
111
|
);
|
|
75
112
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-track-changes",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.3.0",
|
|
4
4
|
"description": "ShowDiff plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -36,10 +36,11 @@
|
|
|
36
36
|
"@atlaskit/editor-plugin-show-diff": "0.0.0",
|
|
37
37
|
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
38
38
|
"@atlaskit/icon-lab": "^5.2.0",
|
|
39
|
-
"@babel/runtime": "^7.0.0"
|
|
39
|
+
"@babel/runtime": "^7.0.0",
|
|
40
|
+
"react-intl-next": "npm:react-intl@^5.18.1"
|
|
40
41
|
},
|
|
41
42
|
"peerDependencies": {
|
|
42
|
-
"@atlaskit/editor-common": "^107.
|
|
43
|
+
"@atlaskit/editor-common": "^107.14.0",
|
|
43
44
|
"react": "^18.2.0"
|
|
44
45
|
},
|
|
45
46
|
"devDependencies": {
|
package/tsconfig.json
CHANGED
|
@@ -1,12 +1,18 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
2
|
+
"extends": "../../../tsconfig.json",
|
|
3
|
+
"include": [
|
|
4
|
+
"examples/**/*.ts",
|
|
5
|
+
"examples/**/*.tsx",
|
|
6
|
+
"example-helpers/**/*.ts",
|
|
7
|
+
"example-helpers/**/*.tsx",
|
|
8
|
+
"src/**/*.ts",
|
|
9
|
+
"src/**/*.tsx",
|
|
10
|
+
"**/stories.ts",
|
|
11
|
+
"**/stories.tsx",
|
|
12
|
+
"**/stories/*.ts",
|
|
13
|
+
"**/stories/*.tsx",
|
|
14
|
+
"**/stories/**/*.ts",
|
|
15
|
+
"**/stories/**/*.tsx"
|
|
16
|
+
],
|
|
17
|
+
"compilerOptions": {}
|
|
12
18
|
}
|