@atlaskit/editor-plugin-annotation 0.1.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/.eslintrc.js +18 -0
- package/CHANGELOG.md +1 -0
- package/LICENSE.md +13 -0
- package/README.md +30 -0
- package/dist/cjs/commands/index.js +150 -0
- package/dist/cjs/commands/transform.js +86 -0
- package/dist/cjs/index.js +12 -0
- package/dist/cjs/nodeviews/index.js +59 -0
- package/dist/cjs/plugin.js +132 -0
- package/dist/cjs/pm-plugins/inline-comment.js +246 -0
- package/dist/cjs/pm-plugins/keymap.js +15 -0
- package/dist/cjs/pm-plugins/plugin-factory.js +107 -0
- package/dist/cjs/pm-plugins/reducer.js +84 -0
- package/dist/cjs/pm-plugins/types.js +17 -0
- package/dist/cjs/toolbar.js +59 -0
- package/dist/cjs/types.js +20 -0
- package/dist/cjs/ui/AnnotationViewWrapper.js +39 -0
- package/dist/cjs/ui/InlineCommentView.js +149 -0
- package/dist/cjs/utils.js +372 -0
- package/dist/es2019/commands/index.js +123 -0
- package/dist/es2019/commands/transform.js +64 -0
- package/dist/es2019/index.js +1 -0
- package/dist/es2019/nodeviews/index.js +31 -0
- package/dist/es2019/plugin.js +127 -0
- package/dist/es2019/pm-plugins/inline-comment.js +181 -0
- package/dist/es2019/pm-plugins/keymap.js +9 -0
- package/dist/es2019/pm-plugins/plugin-factory.js +108 -0
- package/dist/es2019/pm-plugins/reducer.js +94 -0
- package/dist/es2019/pm-plugins/types.js +11 -0
- package/dist/es2019/toolbar.js +53 -0
- package/dist/es2019/types.js +14 -0
- package/dist/es2019/ui/AnnotationViewWrapper.js +15 -0
- package/dist/es2019/ui/InlineCommentView.js +145 -0
- package/dist/es2019/utils.js +334 -0
- package/dist/esm/commands/index.js +143 -0
- package/dist/esm/commands/transform.js +80 -0
- package/dist/esm/index.js +1 -0
- package/dist/esm/nodeviews/index.js +52 -0
- package/dist/esm/plugin.js +120 -0
- package/dist/esm/pm-plugins/inline-comment.js +239 -0
- package/dist/esm/pm-plugins/keymap.js +9 -0
- package/dist/esm/pm-plugins/plugin-factory.js +101 -0
- package/dist/esm/pm-plugins/reducer.js +77 -0
- package/dist/esm/pm-plugins/types.js +11 -0
- package/dist/esm/toolbar.js +52 -0
- package/dist/esm/types.js +14 -0
- package/dist/esm/ui/AnnotationViewWrapper.js +32 -0
- package/dist/esm/ui/InlineCommentView.js +142 -0
- package/dist/esm/utils.js +345 -0
- package/dist/types/commands/index.d.ts +15 -0
- package/dist/types/commands/transform.d.ts +11 -0
- package/dist/types/index.d.ts +3 -0
- package/dist/types/nodeviews/index.d.ts +11 -0
- package/dist/types/plugin.d.ts +6 -0
- package/dist/types/pm-plugins/inline-comment.d.ts +3 -0
- package/dist/types/pm-plugins/keymap.d.ts +3 -0
- package/dist/types/pm-plugins/plugin-factory.d.ts +2 -0
- package/dist/types/pm-plugins/reducer.d.ts +3 -0
- package/dist/types/pm-plugins/types.d.ts +78 -0
- package/dist/types/toolbar.d.ts +5 -0
- package/dist/types/types.d.ts +100 -0
- package/dist/types/ui/AnnotationViewWrapper.d.ts +10 -0
- package/dist/types/ui/InlineCommentView.d.ts +12 -0
- package/dist/types/utils.d.ts +44 -0
- package/dist/types-ts4.5/commands/index.d.ts +15 -0
- package/dist/types-ts4.5/commands/transform.d.ts +11 -0
- package/dist/types-ts4.5/index.d.ts +3 -0
- package/dist/types-ts4.5/nodeviews/index.d.ts +11 -0
- package/dist/types-ts4.5/plugin.d.ts +6 -0
- package/dist/types-ts4.5/pm-plugins/inline-comment.d.ts +3 -0
- package/dist/types-ts4.5/pm-plugins/keymap.d.ts +3 -0
- package/dist/types-ts4.5/pm-plugins/plugin-factory.d.ts +2 -0
- package/dist/types-ts4.5/pm-plugins/reducer.d.ts +3 -0
- package/dist/types-ts4.5/pm-plugins/types.d.ts +78 -0
- package/dist/types-ts4.5/toolbar.d.ts +5 -0
- package/dist/types-ts4.5/types.d.ts +102 -0
- package/dist/types-ts4.5/ui/AnnotationViewWrapper.d.ts +10 -0
- package/dist/types-ts4.5/ui/InlineCommentView.d.ts +12 -0
- package/dist/types-ts4.5/utils.d.ts +44 -0
- package/package.json +106 -0
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { AnnotationTypes } from '@atlaskit/adf-schema';
|
|
2
|
+
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
3
|
+
import { applyMarkOnRange } from '@atlaskit/editor-common/mark';
|
|
4
|
+
import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
5
|
+
import { getDraftCommandAnalyticsPayload, getPluginState, getSelectionPositions } from '../utils';
|
|
6
|
+
var addAnnotationMark = function addAnnotationMark(id) {
|
|
7
|
+
return function (transaction, state) {
|
|
8
|
+
var inlineCommentState = getPluginState(state);
|
|
9
|
+
var _getSelectionPosition = getSelectionPositions(state, inlineCommentState),
|
|
10
|
+
from = _getSelectionPosition.from,
|
|
11
|
+
to = _getSelectionPosition.to,
|
|
12
|
+
head = _getSelectionPosition.head;
|
|
13
|
+
var annotationMark = state.schema.marks.annotation.create({
|
|
14
|
+
id: id,
|
|
15
|
+
type: AnnotationTypes.INLINE_COMMENT
|
|
16
|
+
});
|
|
17
|
+
// Apply the mark only to text node in the range.
|
|
18
|
+
var tr = applyMarkOnRange(from, to, false, annotationMark, transaction);
|
|
19
|
+
// set selection back to the end of annotation once annotation mark is applied
|
|
20
|
+
tr.setSelection(TextSelection.create(tr.doc, head));
|
|
21
|
+
return tr;
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
var addInlineComment = function addInlineComment(editorAnalyticsAPI) {
|
|
25
|
+
return function (id) {
|
|
26
|
+
return function (transaction, state) {
|
|
27
|
+
var tr = addAnnotationMark(id)(transaction, state);
|
|
28
|
+
// add insert analytics step to transaction
|
|
29
|
+
tr = addInsertAnalytics(editorAnalyticsAPI)(tr, state);
|
|
30
|
+
// add close analytics step to transaction
|
|
31
|
+
tr = addOpenCloseAnalytics(editorAnalyticsAPI)(false, INPUT_METHOD.TOOLBAR)(tr, state);
|
|
32
|
+
return tr;
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
};
|
|
36
|
+
var addOpenCloseAnalytics = function addOpenCloseAnalytics(editorAnalyticsAPI) {
|
|
37
|
+
return function (drafting) {
|
|
38
|
+
var method = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : INPUT_METHOD.TOOLBAR;
|
|
39
|
+
return function (transaction, state) {
|
|
40
|
+
var draftingPayload = getDraftCommandAnalyticsPayload(drafting, method)(state);
|
|
41
|
+
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(draftingPayload)(transaction);
|
|
42
|
+
return transaction;
|
|
43
|
+
};
|
|
44
|
+
};
|
|
45
|
+
};
|
|
46
|
+
var addInsertAnalytics = function addInsertAnalytics(editorAnalyticsAPI) {
|
|
47
|
+
return function (transaction, state) {
|
|
48
|
+
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
|
|
49
|
+
action: ACTION.INSERTED,
|
|
50
|
+
actionSubject: ACTION_SUBJECT.ANNOTATION,
|
|
51
|
+
eventType: EVENT_TYPE.TRACK,
|
|
52
|
+
actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT
|
|
53
|
+
})(transaction);
|
|
54
|
+
return transaction;
|
|
55
|
+
};
|
|
56
|
+
};
|
|
57
|
+
var addResolveAnalytics = function addResolveAnalytics(editorAnalyticsAPI) {
|
|
58
|
+
return function (method) {
|
|
59
|
+
return function (transaction, state) {
|
|
60
|
+
var resolvedPayload = {
|
|
61
|
+
action: ACTION.RESOLVED,
|
|
62
|
+
actionSubject: ACTION_SUBJECT.ANNOTATION,
|
|
63
|
+
actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
|
|
64
|
+
eventType: EVENT_TYPE.TRACK,
|
|
65
|
+
attributes: {
|
|
66
|
+
method: method
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(resolvedPayload)(transaction);
|
|
70
|
+
return transaction;
|
|
71
|
+
};
|
|
72
|
+
};
|
|
73
|
+
};
|
|
74
|
+
export default {
|
|
75
|
+
addAnnotationMark: addAnnotationMark,
|
|
76
|
+
addInlineComment: addInlineComment,
|
|
77
|
+
addOpenCloseAnalytics: addOpenCloseAnalytics,
|
|
78
|
+
addInsertAnalytics: addInsertAnalytics,
|
|
79
|
+
addResolveAnalytics: addResolveAnalytics
|
|
80
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { annotationPlugin } from './plugin';
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
2
|
+
import _createClass from "@babel/runtime/helpers/createClass";
|
|
3
|
+
import _inherits from "@babel/runtime/helpers/inherits";
|
|
4
|
+
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
5
|
+
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
6
|
+
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
7
|
+
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
8
|
+
import React from 'react';
|
|
9
|
+
import ReactNodeView from '@atlaskit/editor-common/react-node-view';
|
|
10
|
+
import { AnnotationSharedClassNames } from '@atlaskit/editor-common/styles';
|
|
11
|
+
export var AnnotationNodeView = /*#__PURE__*/function (_ReactNodeView) {
|
|
12
|
+
_inherits(AnnotationNodeView, _ReactNodeView);
|
|
13
|
+
var _super = _createSuper(AnnotationNodeView);
|
|
14
|
+
function AnnotationNodeView() {
|
|
15
|
+
_classCallCheck(this, AnnotationNodeView);
|
|
16
|
+
return _super.apply(this, arguments);
|
|
17
|
+
}
|
|
18
|
+
_createClass(AnnotationNodeView, [{
|
|
19
|
+
key: "createDomRef",
|
|
20
|
+
value: function createDomRef() {
|
|
21
|
+
return document.createElement('span');
|
|
22
|
+
}
|
|
23
|
+
}, {
|
|
24
|
+
key: "getContentDOM",
|
|
25
|
+
value: function getContentDOM() {
|
|
26
|
+
var dom = document.createElement('span');
|
|
27
|
+
dom.className = 'ak-editor-annotation';
|
|
28
|
+
return {
|
|
29
|
+
dom: dom
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
}, {
|
|
33
|
+
key: "render",
|
|
34
|
+
value: function render(_props, forwardRef) {
|
|
35
|
+
return (
|
|
36
|
+
/*#__PURE__*/
|
|
37
|
+
// all inline comment states are now set in decorations at ../pm-plugins/inline-comment.ts
|
|
38
|
+
React.createElement("span", {
|
|
39
|
+
"data-mark-type": "annotation",
|
|
40
|
+
ref: forwardRef
|
|
41
|
+
})
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
}]);
|
|
45
|
+
return AnnotationNodeView;
|
|
46
|
+
}(ReactNodeView);
|
|
47
|
+
export var getAnnotationViewClassname = function getAnnotationViewClassname(isUnresolved, hasFocus) {
|
|
48
|
+
if (!isUnresolved) {
|
|
49
|
+
return;
|
|
50
|
+
}
|
|
51
|
+
return hasFocus ? AnnotationSharedClassNames.focus : AnnotationSharedClassNames.blur;
|
|
52
|
+
};
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { annotation } from '@atlaskit/adf-schema';
|
|
3
|
+
import { AnnotationUpdateEmitter } from '@atlaskit/editor-common/annotation';
|
|
4
|
+
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
5
|
+
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
6
|
+
import { inlineCommentPlugin } from './pm-plugins/inline-comment';
|
|
7
|
+
import { keymapPlugin } from './pm-plugins/keymap';
|
|
8
|
+
import { buildToolbar } from './toolbar';
|
|
9
|
+
import { InlineCommentView } from './ui/InlineCommentView';
|
|
10
|
+
import { getPluginState, stripNonExistingAnnotations } from './utils';
|
|
11
|
+
export var annotationPlugin = function annotationPlugin(_ref) {
|
|
12
|
+
var annotationProviders = _ref.config,
|
|
13
|
+
api = _ref.api;
|
|
14
|
+
return {
|
|
15
|
+
name: 'annotation',
|
|
16
|
+
marks: function marks() {
|
|
17
|
+
return [{
|
|
18
|
+
name: 'annotation',
|
|
19
|
+
mark: annotation
|
|
20
|
+
}];
|
|
21
|
+
},
|
|
22
|
+
actions: {
|
|
23
|
+
stripNonExistingAnnotations: stripNonExistingAnnotations
|
|
24
|
+
},
|
|
25
|
+
getSharedState: function getSharedState(editorState) {
|
|
26
|
+
if (!editorState) {
|
|
27
|
+
return undefined;
|
|
28
|
+
}
|
|
29
|
+
return getPluginState(editorState) || undefined;
|
|
30
|
+
},
|
|
31
|
+
pmPlugins: function pmPlugins() {
|
|
32
|
+
return [{
|
|
33
|
+
name: 'annotation',
|
|
34
|
+
plugin: function plugin(_ref2) {
|
|
35
|
+
var dispatch = _ref2.dispatch,
|
|
36
|
+
portalProviderAPI = _ref2.portalProviderAPI,
|
|
37
|
+
eventDispatcher = _ref2.eventDispatcher;
|
|
38
|
+
if (annotationProviders) {
|
|
39
|
+
var _api$analytics;
|
|
40
|
+
return inlineCommentPlugin({
|
|
41
|
+
dispatch: dispatch,
|
|
42
|
+
portalProviderAPI: portalProviderAPI,
|
|
43
|
+
eventDispatcher: eventDispatcher,
|
|
44
|
+
provider: annotationProviders.inlineComment,
|
|
45
|
+
editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
}, {
|
|
51
|
+
name: 'annotationKeymap',
|
|
52
|
+
plugin: function plugin() {
|
|
53
|
+
if (annotationProviders) {
|
|
54
|
+
var _api$analytics2;
|
|
55
|
+
return keymapPlugin(api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions);
|
|
56
|
+
}
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
}];
|
|
60
|
+
},
|
|
61
|
+
pluginsOptions: {
|
|
62
|
+
floatingToolbar: function floatingToolbar(state, intl) {
|
|
63
|
+
if (getBooleanFF('platform.editor.enable-selection-toolbar_ucdwd') || !annotationProviders) {
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
66
|
+
var pluginState = getPluginState(state);
|
|
67
|
+
if (pluginState && pluginState.isVisible && !pluginState.bookmark && !pluginState.mouseData.isSelecting) {
|
|
68
|
+
var _api$analytics3;
|
|
69
|
+
var isToolbarAbove = annotationProviders.inlineComment.isToolbarAbove;
|
|
70
|
+
return buildToolbar(api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions)(state, intl, isToolbarAbove);
|
|
71
|
+
}
|
|
72
|
+
},
|
|
73
|
+
selectionToolbar: function selectionToolbar(state, intl) {
|
|
74
|
+
if (!getBooleanFF('platform.editor.enable-selection-toolbar_ucdwd') || !annotationProviders) {
|
|
75
|
+
return;
|
|
76
|
+
}
|
|
77
|
+
var pluginState = getPluginState(state);
|
|
78
|
+
if (pluginState && pluginState.isVisible && !pluginState.bookmark && !pluginState.mouseData.isSelecting) {
|
|
79
|
+
var _api$analytics4;
|
|
80
|
+
var isToolbarAbove = annotationProviders.inlineComment.isToolbarAbove;
|
|
81
|
+
return buildToolbar(api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions)(state, intl, isToolbarAbove);
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
contentComponent: function contentComponent(_ref3) {
|
|
86
|
+
var editorView = _ref3.editorView,
|
|
87
|
+
dispatchAnalyticsEvent = _ref3.dispatchAnalyticsEvent;
|
|
88
|
+
if (!annotationProviders) {
|
|
89
|
+
return null;
|
|
90
|
+
}
|
|
91
|
+
return /*#__PURE__*/React.createElement(AnnotationContentComponent, {
|
|
92
|
+
api: api,
|
|
93
|
+
editorView: editorView,
|
|
94
|
+
annotationProviders: annotationProviders,
|
|
95
|
+
dispatchAnalyticsEvent: dispatchAnalyticsEvent
|
|
96
|
+
});
|
|
97
|
+
}
|
|
98
|
+
};
|
|
99
|
+
};
|
|
100
|
+
function AnnotationContentComponent(_ref4) {
|
|
101
|
+
var _api$analytics5;
|
|
102
|
+
var api = _ref4.api,
|
|
103
|
+
editorView = _ref4.editorView,
|
|
104
|
+
annotationProviders = _ref4.annotationProviders,
|
|
105
|
+
dispatchAnalyticsEvent = _ref4.dispatchAnalyticsEvent;
|
|
106
|
+
var _useSharedPluginState = useSharedPluginState(api, ['annotation']),
|
|
107
|
+
inlineCommentState = _useSharedPluginState.annotationState;
|
|
108
|
+
if (inlineCommentState && !inlineCommentState.isVisible) {
|
|
109
|
+
return null;
|
|
110
|
+
}
|
|
111
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
112
|
+
"data-editor-popup": "true"
|
|
113
|
+
}, /*#__PURE__*/React.createElement(InlineCommentView, {
|
|
114
|
+
providers: annotationProviders,
|
|
115
|
+
editorView: editorView,
|
|
116
|
+
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
|
117
|
+
editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions
|
|
118
|
+
}));
|
|
119
|
+
}
|
|
120
|
+
export { AnnotationUpdateEmitter };
|
|
@@ -0,0 +1,239 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
|
|
3
|
+
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
4
|
+
import { AnnotationTypes } from '@atlaskit/adf-schema';
|
|
5
|
+
import { RESOLVE_METHOD } from '@atlaskit/editor-common/analytics';
|
|
6
|
+
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
7
|
+
import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
8
|
+
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
9
|
+
import { clearDirtyMark, closeComponent, setInlineCommentsVisibility, setSelectedAnnotation, updateInlineCommentResolvedState, updateMouseState } from '../commands';
|
|
10
|
+
import { AnnotationNodeView, getAnnotationViewClassname } from '../nodeviews';
|
|
11
|
+
import { getAllAnnotations, getPluginState, inlineCommentPluginKey } from '../utils';
|
|
12
|
+
import { createPluginState } from './plugin-factory';
|
|
13
|
+
var fetchProviderStates = /*#__PURE__*/function () {
|
|
14
|
+
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(provider, annotationIds) {
|
|
15
|
+
var data, result;
|
|
16
|
+
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
17
|
+
while (1) switch (_context.prev = _context.next) {
|
|
18
|
+
case 0:
|
|
19
|
+
_context.next = 2;
|
|
20
|
+
return provider.getState(annotationIds);
|
|
21
|
+
case 2:
|
|
22
|
+
data = _context.sent;
|
|
23
|
+
result = {};
|
|
24
|
+
data.forEach(function (annotation) {
|
|
25
|
+
if (annotation.annotationType === AnnotationTypes.INLINE_COMMENT) {
|
|
26
|
+
result[annotation.id] = annotation.state.resolved;
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
return _context.abrupt("return", result);
|
|
30
|
+
case 6:
|
|
31
|
+
case "end":
|
|
32
|
+
return _context.stop();
|
|
33
|
+
}
|
|
34
|
+
}, _callee);
|
|
35
|
+
}));
|
|
36
|
+
return function fetchProviderStates(_x, _x2) {
|
|
37
|
+
return _ref.apply(this, arguments);
|
|
38
|
+
};
|
|
39
|
+
}();
|
|
40
|
+
|
|
41
|
+
// fetchState is unable to return a command as it's runs async and may dispatch at a later time
|
|
42
|
+
// Requires `editorView` instead of the decomposition as the async means state may end up stale
|
|
43
|
+
var fetchState = /*#__PURE__*/function () {
|
|
44
|
+
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(provider, annotationIds, editorView, editorAnalyticsAPI) {
|
|
45
|
+
var inlineCommentStates;
|
|
46
|
+
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
|
|
47
|
+
while (1) switch (_context2.prev = _context2.next) {
|
|
48
|
+
case 0:
|
|
49
|
+
if (!(!annotationIds || !annotationIds.length)) {
|
|
50
|
+
_context2.next = 2;
|
|
51
|
+
break;
|
|
52
|
+
}
|
|
53
|
+
return _context2.abrupt("return");
|
|
54
|
+
case 2:
|
|
55
|
+
_context2.next = 4;
|
|
56
|
+
return fetchProviderStates(provider, annotationIds);
|
|
57
|
+
case 4:
|
|
58
|
+
inlineCommentStates = _context2.sent;
|
|
59
|
+
if (editorView.dispatch) {
|
|
60
|
+
updateInlineCommentResolvedState(editorAnalyticsAPI)(inlineCommentStates)(editorView.state, editorView.dispatch);
|
|
61
|
+
}
|
|
62
|
+
case 6:
|
|
63
|
+
case "end":
|
|
64
|
+
return _context2.stop();
|
|
65
|
+
}
|
|
66
|
+
}, _callee2);
|
|
67
|
+
}));
|
|
68
|
+
return function fetchState(_x3, _x4, _x5, _x6) {
|
|
69
|
+
return _ref2.apply(this, arguments);
|
|
70
|
+
};
|
|
71
|
+
}();
|
|
72
|
+
var initialState = function initialState() {
|
|
73
|
+
var disallowOnWhitespace = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
|
74
|
+
return {
|
|
75
|
+
annotations: {},
|
|
76
|
+
selectedAnnotations: [],
|
|
77
|
+
mouseData: {
|
|
78
|
+
isSelecting: false
|
|
79
|
+
},
|
|
80
|
+
disallowOnWhitespace: disallowOnWhitespace,
|
|
81
|
+
isInlineCommentViewClosed: false,
|
|
82
|
+
isVisible: true,
|
|
83
|
+
skipSelectionHandling: false
|
|
84
|
+
};
|
|
85
|
+
};
|
|
86
|
+
var hideToolbar = function hideToolbar(state, dispatch) {
|
|
87
|
+
return function () {
|
|
88
|
+
updateMouseState({
|
|
89
|
+
isSelecting: true
|
|
90
|
+
})(state, dispatch);
|
|
91
|
+
};
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
// Subscribe to updates from consumer
|
|
95
|
+
var onResolve = function onResolve(editorAnalyticsAPI) {
|
|
96
|
+
return function (state, dispatch) {
|
|
97
|
+
return function (annotationId) {
|
|
98
|
+
updateInlineCommentResolvedState(editorAnalyticsAPI)(_defineProperty({}, annotationId, true), RESOLVE_METHOD.CONSUMER)(state, dispatch);
|
|
99
|
+
};
|
|
100
|
+
};
|
|
101
|
+
};
|
|
102
|
+
var onUnResolve = function onUnResolve(editorAnalyticsAPI) {
|
|
103
|
+
return function (state, dispatch) {
|
|
104
|
+
return function (annotationId) {
|
|
105
|
+
updateInlineCommentResolvedState(editorAnalyticsAPI)(_defineProperty({}, annotationId, false))(state, dispatch);
|
|
106
|
+
};
|
|
107
|
+
};
|
|
108
|
+
};
|
|
109
|
+
var onMouseUp = function onMouseUp(state, dispatch) {
|
|
110
|
+
return function (e) {
|
|
111
|
+
var _ref3 = getPluginState(state) || {},
|
|
112
|
+
mouseData = _ref3.mouseData;
|
|
113
|
+
if (mouseData !== null && mouseData !== void 0 && mouseData.isSelecting) {
|
|
114
|
+
updateMouseState({
|
|
115
|
+
isSelecting: false
|
|
116
|
+
})(state, dispatch);
|
|
117
|
+
}
|
|
118
|
+
};
|
|
119
|
+
};
|
|
120
|
+
var onSetVisibility = function onSetVisibility(view) {
|
|
121
|
+
return function (isVisible) {
|
|
122
|
+
var state = view.state,
|
|
123
|
+
dispatch = view.dispatch;
|
|
124
|
+
setInlineCommentsVisibility(isVisible)(state, dispatch);
|
|
125
|
+
if (isVisible) {
|
|
126
|
+
// PM retains focus when we click away from the editor.
|
|
127
|
+
// This will restore the visual aspect of the selection,
|
|
128
|
+
// otherwise it will seem a floating toolbar will appear
|
|
129
|
+
// for no reason.
|
|
130
|
+
view.focus();
|
|
131
|
+
}
|
|
132
|
+
};
|
|
133
|
+
};
|
|
134
|
+
export var inlineCommentPlugin = function inlineCommentPlugin(options) {
|
|
135
|
+
var provider = options.provider,
|
|
136
|
+
portalProviderAPI = options.portalProviderAPI,
|
|
137
|
+
eventDispatcher = options.eventDispatcher;
|
|
138
|
+
return new SafePlugin({
|
|
139
|
+
key: inlineCommentPluginKey,
|
|
140
|
+
state: createPluginState(options.dispatch, initialState(provider.disallowOnWhitespace)),
|
|
141
|
+
view: function view(editorView) {
|
|
142
|
+
// Get initial state
|
|
143
|
+
// Need to pass `editorView` to mitigate editor state going stale
|
|
144
|
+
fetchState(provider, getAllAnnotations(editorView.state.doc), editorView, options.editorAnalyticsAPI);
|
|
145
|
+
var resolve = function resolve(annotationId) {
|
|
146
|
+
return onResolve(options.editorAnalyticsAPI)(editorView.state, editorView.dispatch)(annotationId);
|
|
147
|
+
};
|
|
148
|
+
var unResolve = function unResolve(annotationId) {
|
|
149
|
+
return onUnResolve(options.editorAnalyticsAPI)(editorView.state, editorView.dispatch)(annotationId);
|
|
150
|
+
};
|
|
151
|
+
var mouseUp = function mouseUp(event) {
|
|
152
|
+
return onMouseUp(editorView.state, editorView.dispatch)(event);
|
|
153
|
+
};
|
|
154
|
+
var setVisibility = function setVisibility(isVisible) {
|
|
155
|
+
return onSetVisibility(editorView)(isVisible);
|
|
156
|
+
};
|
|
157
|
+
var setSelectedAnnotationFn = function setSelectedAnnotationFn(annotationId) {
|
|
158
|
+
if (!annotationId) {
|
|
159
|
+
closeComponent()(editorView.state, editorView.dispatch);
|
|
160
|
+
} else {
|
|
161
|
+
setSelectedAnnotation(annotationId)(editorView.state, editorView.dispatch);
|
|
162
|
+
}
|
|
163
|
+
};
|
|
164
|
+
var updateSubscriber = provider.updateSubscriber;
|
|
165
|
+
if (updateSubscriber) {
|
|
166
|
+
updateSubscriber.on('resolve', resolve).on('delete', resolve).on('unresolve', unResolve).on('create', unResolve).on('setvisibility', setVisibility).on('setselectedannotation', setSelectedAnnotationFn);
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
170
|
+
editorView.root.addEventListener('mouseup', mouseUp);
|
|
171
|
+
return {
|
|
172
|
+
update: function update(view, _prevState) {
|
|
173
|
+
var _ref4 = getPluginState(view.state) || {},
|
|
174
|
+
dirtyAnnotations = _ref4.dirtyAnnotations;
|
|
175
|
+
if (!dirtyAnnotations) {
|
|
176
|
+
return;
|
|
177
|
+
}
|
|
178
|
+
clearDirtyMark()(view.state, view.dispatch);
|
|
179
|
+
fetchState(provider, getAllAnnotations(view.state.doc), view, options.editorAnalyticsAPI);
|
|
180
|
+
},
|
|
181
|
+
destroy: function destroy() {
|
|
182
|
+
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
183
|
+
editorView.root.removeEventListener('mouseup', mouseUp);
|
|
184
|
+
if (updateSubscriber) {
|
|
185
|
+
updateSubscriber.off('resolve', resolve).off('delete', resolve).off('unresolve', unResolve).off('create', unResolve).off('setvisibility', setVisibility).off('setselectedannotation', setSelectedAnnotationFn);
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
};
|
|
189
|
+
},
|
|
190
|
+
props: {
|
|
191
|
+
nodeViews: {
|
|
192
|
+
annotation: function annotation(node, view, getPos) {
|
|
193
|
+
return new AnnotationNodeView(node, view, getPos, portalProviderAPI, eventDispatcher) // resolved
|
|
194
|
+
.init();
|
|
195
|
+
}
|
|
196
|
+
},
|
|
197
|
+
handleDOMEvents: {
|
|
198
|
+
mousedown: function mousedown(view) {
|
|
199
|
+
var pluginState = getPluginState(view.state);
|
|
200
|
+
if (!(pluginState !== null && pluginState !== void 0 && pluginState.mouseData.isSelecting)) {
|
|
201
|
+
hideToolbar(view.state, view.dispatch)();
|
|
202
|
+
}
|
|
203
|
+
return false;
|
|
204
|
+
}
|
|
205
|
+
},
|
|
206
|
+
decorations: function decorations(state) {
|
|
207
|
+
// highlight comments, depending on state
|
|
208
|
+
var _ref5 = getPluginState(state) || {},
|
|
209
|
+
draftDecorationSet = _ref5.draftDecorationSet,
|
|
210
|
+
annotations = _ref5.annotations,
|
|
211
|
+
selectedAnnotations = _ref5.selectedAnnotations,
|
|
212
|
+
isVisible = _ref5.isVisible,
|
|
213
|
+
isInlineCommentViewClosed = _ref5.isInlineCommentViewClosed;
|
|
214
|
+
var decorations = draftDecorationSet !== null && draftDecorationSet !== void 0 ? draftDecorationSet : DecorationSet.empty;
|
|
215
|
+
var focusDecorations = [];
|
|
216
|
+
state.doc.descendants(function (node, pos) {
|
|
217
|
+
node.marks.filter(function (mark) {
|
|
218
|
+
return mark.type === state.schema.marks.annotation;
|
|
219
|
+
}).forEach(function (mark) {
|
|
220
|
+
var isSelected = getBooleanFF('platform.editor.annotation.decouple-inline-comment-closed_flmox') ? !isInlineCommentViewClosed && !!(selectedAnnotations !== null && selectedAnnotations !== void 0 && selectedAnnotations.some(function (selectedAnnotation) {
|
|
221
|
+
return selectedAnnotation.id === mark.attrs.id;
|
|
222
|
+
})) : !!(selectedAnnotations !== null && selectedAnnotations !== void 0 && selectedAnnotations.some(function (selectedAnnotation) {
|
|
223
|
+
return selectedAnnotation.id === mark.attrs.id;
|
|
224
|
+
}));
|
|
225
|
+
var isUnresolved = !!annotations && annotations[mark.attrs.id] === false;
|
|
226
|
+
if (isVisible) {
|
|
227
|
+
focusDecorations.push(Decoration.inline(pos, pos + node.nodeSize, {
|
|
228
|
+
class: "".concat(getAnnotationViewClassname(isUnresolved, isSelected), " ").concat(isUnresolved),
|
|
229
|
+
nodeName: 'span'
|
|
230
|
+
}));
|
|
231
|
+
}
|
|
232
|
+
});
|
|
233
|
+
});
|
|
234
|
+
decorations = decorations.add(state.doc, focusDecorations);
|
|
235
|
+
return decorations;
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
});
|
|
239
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
2
|
+
import { addInlineComment, bindKeymapWithCommand } from '@atlaskit/editor-common/keymaps';
|
|
3
|
+
import { keymap } from '@atlaskit/editor-prosemirror/keymap';
|
|
4
|
+
import { setInlineCommentDraftState } from '../commands';
|
|
5
|
+
export function keymapPlugin(editorAnalyticsAPI) {
|
|
6
|
+
var list = {};
|
|
7
|
+
bindKeymapWithCommand(addInlineComment.common, setInlineCommentDraftState(editorAnalyticsAPI)(true, INPUT_METHOD.SHORTCUT), list);
|
|
8
|
+
return keymap(list);
|
|
9
|
+
}
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
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; }
|
|
3
|
+
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; }
|
|
4
|
+
import { pluginFactory } from '@atlaskit/editor-common/utils';
|
|
5
|
+
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
6
|
+
import { findAnnotationsInSelection, inlineCommentPluginKey, isSelectedAnnotationsChanged } from '../utils';
|
|
7
|
+
import reducer from './reducer';
|
|
8
|
+
var handleDocChanged = function handleDocChanged(tr, prevPluginState) {
|
|
9
|
+
if (!tr.getMeta('replaceDocument')) {
|
|
10
|
+
return getBooleanFF('platform.editor.annotation.decouple-inline-comment-closed_flmox') ? getSelectionChangedHandler(false)(tr, prevPluginState) : handleSelectionChanged(tr, prevPluginState);
|
|
11
|
+
}
|
|
12
|
+
return _objectSpread(_objectSpread({}, prevPluginState), {}, {
|
|
13
|
+
dirtyAnnotations: true
|
|
14
|
+
});
|
|
15
|
+
};
|
|
16
|
+
var handleSelectionChanged = function handleSelectionChanged(tr, pluginState) {
|
|
17
|
+
if (pluginState.skipSelectionHandling) {
|
|
18
|
+
return _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
19
|
+
skipSelectionHandling: false
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
var selectedAnnotations = findAnnotationsInSelection(tr.selection, tr.doc);
|
|
23
|
+
var changed = selectedAnnotations.length !== pluginState.selectedAnnotations.length || selectedAnnotations.some(function (annotationInfo) {
|
|
24
|
+
return !pluginState.selectedAnnotations.some(function (aInfo) {
|
|
25
|
+
return aInfo.type === annotationInfo.id;
|
|
26
|
+
});
|
|
27
|
+
});
|
|
28
|
+
if (changed) {
|
|
29
|
+
return _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
30
|
+
selectedAnnotations: selectedAnnotations
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
return pluginState;
|
|
34
|
+
};
|
|
35
|
+
var getSelectionChangedHandler = function getSelectionChangedHandler(reopenCommentView) {
|
|
36
|
+
return function (tr, pluginState) {
|
|
37
|
+
/**
|
|
38
|
+
* If feature flag is **OFF** we want to keep the old behavior. Note that
|
|
39
|
+
* reopenCommentView is not relevant here when using old behaviour.
|
|
40
|
+
*
|
|
41
|
+
* Feature flag is evaluated here rather than directly in onSelectionChanged where it is assigned
|
|
42
|
+
* to prevent the plugin from setting up the handler before the feature flag is evaluated.
|
|
43
|
+
*
|
|
44
|
+
* This comment / logic can be cleaned up once the feature flag is removed.
|
|
45
|
+
*/
|
|
46
|
+
if (!getBooleanFF('platform.editor.annotation.decouple-inline-comment-closed_flmox')) {
|
|
47
|
+
return handleSelectionChanged(tr, pluginState);
|
|
48
|
+
}
|
|
49
|
+
if (pluginState.skipSelectionHandling) {
|
|
50
|
+
return _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
51
|
+
skipSelectionHandling: false
|
|
52
|
+
}, reopenCommentView && {
|
|
53
|
+
isInlineCommentViewClosed: false
|
|
54
|
+
});
|
|
55
|
+
}
|
|
56
|
+
var selectedAnnotations = findAnnotationsInSelection(tr.selection, tr.doc);
|
|
57
|
+
if (selectedAnnotations.length === 0) {
|
|
58
|
+
return _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
59
|
+
selectedAnnotations: selectedAnnotations,
|
|
60
|
+
isInlineCommentViewClosed: true
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
if (isSelectedAnnotationsChanged(selectedAnnotations, pluginState.selectedAnnotations)) {
|
|
64
|
+
return _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
65
|
+
selectedAnnotations: selectedAnnotations
|
|
66
|
+
}, reopenCommentView && {
|
|
67
|
+
isInlineCommentViewClosed: false
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
return _objectSpread(_objectSpread({}, pluginState), reopenCommentView && {
|
|
71
|
+
isInlineCommentViewClosed: false
|
|
72
|
+
});
|
|
73
|
+
};
|
|
74
|
+
};
|
|
75
|
+
var _pluginFactory = pluginFactory(inlineCommentPluginKey, reducer, {
|
|
76
|
+
onSelectionChanged: getSelectionChangedHandler(true),
|
|
77
|
+
onDocChanged: handleDocChanged,
|
|
78
|
+
mapping: function mapping(tr, pluginState) {
|
|
79
|
+
var draftDecorationSet = pluginState.draftDecorationSet,
|
|
80
|
+
bookmark = pluginState.bookmark;
|
|
81
|
+
var mappedDecorationSet, mappedBookmark;
|
|
82
|
+
if (draftDecorationSet) {
|
|
83
|
+
mappedDecorationSet = draftDecorationSet.map(tr.mapping, tr.doc);
|
|
84
|
+
}
|
|
85
|
+
if (bookmark) {
|
|
86
|
+
mappedBookmark = bookmark.map(tr.mapping);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
// return same pluginState if mappings did not change
|
|
90
|
+
if (mappedBookmark === bookmark && mappedDecorationSet === draftDecorationSet) {
|
|
91
|
+
return pluginState;
|
|
92
|
+
}
|
|
93
|
+
return _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
94
|
+
draftDecorationSet: mappedDecorationSet,
|
|
95
|
+
bookmark: mappedBookmark
|
|
96
|
+
});
|
|
97
|
+
}
|
|
98
|
+
}),
|
|
99
|
+
createPluginState = _pluginFactory.createPluginState,
|
|
100
|
+
createCommand = _pluginFactory.createCommand;
|
|
101
|
+
export { createPluginState, createCommand };
|