@atlaskit/editor-plugin-copy-button 0.1.0 → 0.2.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.
Files changed (46) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/cjs/commands.js +172 -0
  3. package/dist/cjs/index.js +8 -1
  4. package/dist/cjs/plugin.js +28 -0
  5. package/dist/cjs/pm-plugins/main.js +104 -0
  6. package/dist/cjs/pm-plugins/plugin-key.js +9 -0
  7. package/dist/cjs/toolbar.js +103 -0
  8. package/dist/cjs/types.js +3 -3
  9. package/dist/cjs/utils.js +22 -0
  10. package/dist/es2019/commands.js +158 -0
  11. package/dist/es2019/index.js +1 -1
  12. package/dist/es2019/plugin.js +19 -0
  13. package/dist/es2019/pm-plugins/main.js +97 -0
  14. package/dist/es2019/pm-plugins/plugin-key.js +2 -0
  15. package/dist/es2019/toolbar.js +85 -0
  16. package/dist/es2019/types.js +3 -1
  17. package/dist/es2019/utils.js +15 -0
  18. package/dist/esm/commands.js +160 -0
  19. package/dist/esm/index.js +1 -1
  20. package/dist/esm/plugin.js +20 -0
  21. package/dist/esm/pm-plugins/main.js +96 -0
  22. package/dist/esm/pm-plugins/plugin-key.js +2 -0
  23. package/dist/esm/toolbar.js +94 -0
  24. package/dist/esm/types.js +3 -1
  25. package/dist/esm/utils.js +14 -0
  26. package/dist/types/commands.d.ts +10 -0
  27. package/dist/types/index.d.ts +1 -0
  28. package/dist/types/plugin.d.ts +2 -0
  29. package/dist/types/pm-plugins/main.d.ts +4 -0
  30. package/dist/types/pm-plugins/plugin-key.d.ts +2 -0
  31. package/dist/types/toolbar.d.ts +13 -0
  32. package/dist/types/types.d.ts +10 -2
  33. package/dist/types/utils.d.ts +7 -0
  34. package/dist/types-ts4.5/commands.d.ts +10 -0
  35. package/dist/types-ts4.5/index.d.ts +1 -0
  36. package/dist/types-ts4.5/plugin.d.ts +2 -0
  37. package/dist/types-ts4.5/pm-plugins/main.d.ts +4 -0
  38. package/dist/types-ts4.5/pm-plugins/plugin-key.d.ts +2 -0
  39. package/dist/types-ts4.5/toolbar.d.ts +13 -0
  40. package/dist/types-ts4.5/types.d.ts +12 -2
  41. package/dist/types-ts4.5/utils.d.ts +7 -0
  42. package/package.json +9 -3
  43. package/report.api.md +32 -1
  44. package/tmp/api-report-tmp.d.ts +18 -1
  45. package/toolbar/package.json +15 -0
  46. package/utils/package.json +15 -0
@@ -0,0 +1,97 @@
1
+ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
2
+ import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
3
+ import { copyButtonPluginKey } from './plugin-key';
4
+ function getMarkSelectionDecorationStartAndEnd({
5
+ markType,
6
+ transaction
7
+ }) {
8
+ const headResolvedPos = transaction.selection.$head;
9
+ const textNodeIndex = transaction.selection.$head.index();
10
+ const textNode = headResolvedPos.parent.maybeChild(textNodeIndex);
11
+ let textNodeOffset = 0;
12
+ headResolvedPos.parent.forEach((_node, nodeOffset, index) => {
13
+ if (index === textNodeIndex) {
14
+ textNodeOffset = nodeOffset;
15
+ }
16
+ });
17
+ const start = headResolvedPos.start(headResolvedPos.depth) + textNodeOffset;
18
+ const end = start + textNode.text.length;
19
+ return {
20
+ start,
21
+ end,
22
+ markType
23
+ };
24
+ }
25
+ export function copyButtonPlugin() {
26
+ return new SafePlugin({
27
+ key: copyButtonPluginKey,
28
+ state: {
29
+ init() {
30
+ return {
31
+ copied: false,
32
+ markSelection: undefined
33
+ };
34
+ },
35
+ apply(tr, currentPluginState) {
36
+ const meta = tr.getMeta(copyButtonPluginKey);
37
+ if ((meta === null || meta === void 0 ? void 0 : meta.copied) !== undefined) {
38
+ return {
39
+ copied: meta.copied,
40
+ markSelection: undefined
41
+ };
42
+ }
43
+ if (meta !== null && meta !== void 0 && meta.showSelection) {
44
+ return {
45
+ copied: currentPluginState.copied,
46
+ markSelection: getMarkSelectionDecorationStartAndEnd({
47
+ markType: meta.markType,
48
+ transaction: tr
49
+ })
50
+ };
51
+ }
52
+ if (meta !== null && meta !== void 0 && meta.removeSelection) {
53
+ return {
54
+ copied: currentPluginState.copied,
55
+ markSelection: undefined
56
+ };
57
+ }
58
+ if (currentPluginState.markSelection) {
59
+ return {
60
+ copied: currentPluginState.copied,
61
+ markSelection: getMarkSelectionDecorationStartAndEnd({
62
+ markType: currentPluginState.markSelection.markType,
63
+ transaction: tr
64
+ })
65
+ };
66
+ }
67
+ return currentPluginState;
68
+ }
69
+ },
70
+ props: {
71
+ decorations(_state) {
72
+ // Showing visual hints for the hyperlink copy button has been disabled
73
+ // due to an issue where invalid hyperlink marks cause the floating toolbar
74
+ // to jump around when the copy button is hovered.
75
+ // See the following bug for details -- once that is resolved -- the visual
76
+ // hints can be re enabled.
77
+ // https://product-fabric.atlassian.net/browse/DTR-722
78
+
79
+ // const copyButtonPluginState = copyButtonPluginKey.getState(
80
+ // state,
81
+ // ) as CopyButtonPluginState;
82
+ // if (copyButtonPluginState.markSelection) {
83
+ // const { start, end } = copyButtonPluginState.markSelection;
84
+
85
+ // return DecorationSet.create(state.doc, [
86
+ // Decoration.inline(start, end, {
87
+ // class: 'ProseMirror-fake-text-selection',
88
+ // }),
89
+ // ]);
90
+ // }
91
+
92
+ return DecorationSet.empty;
93
+ }
94
+ }
95
+ });
96
+ }
97
+ export default copyButtonPlugin;
@@ -0,0 +1,2 @@
1
+ import { PluginKey } from '@atlaskit/editor-prosemirror/state';
2
+ export const copyButtonPluginKey = new PluginKey('copyButtonPlugin');
@@ -0,0 +1,85 @@
1
+ import commonMessages from '@atlaskit/editor-common/messages';
2
+ import CopyIcon from '@atlaskit/icon/glyph/copy';
3
+ import { createToolbarCopyCommandForMark, createToolbarCopyCommandForNode, getProvideMarkVisualFeedbackForCopyButtonCommand, removeMarkVisualFeedbackForCopyButtonCommand, resetCopiedState } from './commands';
4
+ import { copyButtonPluginKey } from './pm-plugins/plugin-key';
5
+
6
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
7
+ function isSeparator(item) {
8
+ return (item === null || item === void 0 ? void 0 : item.type) === 'separator';
9
+ }
10
+ function isNodeOptions(options) {
11
+ return 'nodeType' in options && options.nodeType !== undefined;
12
+ }
13
+ export function getCopyButtonConfig(options, hoverDecoration, editorAnalyticsApi) {
14
+ const {
15
+ state,
16
+ formatMessage,
17
+ onMouseEnter,
18
+ onMouseLeave,
19
+ onFocus,
20
+ onBlur
21
+ } = options;
22
+ const copyButtonState = copyButtonPluginKey.getState(state);
23
+ let buttonActionHandlers;
24
+ if (isNodeOptions(options)) {
25
+ buttonActionHandlers = {
26
+ onClick: createToolbarCopyCommandForNode(options.nodeType, editorAnalyticsApi),
27
+ // Note for future changes: these two handlers should perform
28
+ // the same action.
29
+ onMouseEnter: onMouseEnter || (hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(options.nodeType, true, 'ak-editor-selected-node')),
30
+ onFocus: onFocus || (hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(options.nodeType, true, 'ak-editor-selected-node')),
31
+ // Note for future changes: these two handlers should perform
32
+ // the same action.
33
+ onMouseLeave: resetCopiedState(options.nodeType, hoverDecoration, onMouseLeave),
34
+ onBlur: resetCopiedState(options.nodeType, hoverDecoration, onBlur)
35
+ };
36
+ } else {
37
+ buttonActionHandlers = {
38
+ onClick: createToolbarCopyCommandForMark(options.markType, editorAnalyticsApi),
39
+ onMouseEnter: getProvideMarkVisualFeedbackForCopyButtonCommand(options.markType),
40
+ onFocus: getProvideMarkVisualFeedbackForCopyButtonCommand(options.markType),
41
+ onMouseLeave: removeMarkVisualFeedbackForCopyButtonCommand,
42
+ onBlur: removeMarkVisualFeedbackForCopyButtonCommand
43
+ };
44
+ }
45
+ return {
46
+ id: 'editor.floatingToolbar.copy',
47
+ type: 'button',
48
+ appearance: 'subtle',
49
+ icon: CopyIcon,
50
+ title: formatMessage(copyButtonState !== null && copyButtonState !== void 0 && copyButtonState.copied ? commonMessages.copiedToClipboard : commonMessages.copyToClipboard),
51
+ ...buttonActionHandlers,
52
+ hideTooltipOnClick: false,
53
+ tabIndex: null
54
+ // TODO select and delete styling needs to be removed when keyboard cursor moves away
55
+ // problem already exist with delete as well
56
+ };
57
+ }
58
+
59
+ export const showCopyButton = state => {
60
+ return state &&
61
+ // Check if the Copy button plugin is enabled
62
+ // @ts-ignore copyButtonPluginKey.key
63
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
64
+ state.plugins.find(p => p.key === copyButtonPluginKey.key);
65
+ };
66
+
67
+ /**
68
+ * Process floatingToolbar items for copyButton
69
+ *
70
+ * If copy button plugin not enabled, remove copy button item from toolbar items
71
+ * else process copy button to standard floatingtoobarbutton
72
+ */
73
+ export const processCopyButtonItems = editorAnalyticsApi => state => {
74
+ return (items, hoverDecoration) => items.flatMap(item => {
75
+ switch (item.type) {
76
+ case 'copy-button':
77
+ if (item !== null && item !== void 0 && item.hidden || !showCopyButton(state)) {
78
+ return [];
79
+ }
80
+ return item === null || item === void 0 ? void 0 : item.items.map(copyButtonItem => isSeparator(copyButtonItem) ? copyButtonItem : getCopyButtonConfig(copyButtonItem, hoverDecoration, editorAnalyticsApi));
81
+ default:
82
+ return [item];
83
+ }
84
+ });
85
+ };
@@ -1 +1,3 @@
1
- export {};
1
+ import { processCopyButtonItems } from './toolbar';
2
+ const editorAnalyticsApi = undefined;
3
+ const processCopyButtonItemsWithAnalytics = processCopyButtonItems(editorAnalyticsApi);
@@ -0,0 +1,15 @@
1
+ import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
2
+ import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
3
+ export function getSelectedNodeOrNodeParentByNodeType({
4
+ nodeType,
5
+ selection
6
+ }) {
7
+ let node = findSelectedNodeOfType(nodeType)(selection);
8
+ if (!node) {
9
+ node = findParentNodeOfType(nodeType)(selection);
10
+ }
11
+ return node;
12
+ }
13
+ export const toDOM = (node, schema) => {
14
+ return DOMSerializer.fromSchema(schema).serializeNode(node);
15
+ };
@@ -0,0 +1,160 @@
1
+ import { ACTION, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
2
+ import { copyHTMLToClipboard, copyHTMLToClipboardPolyfill, getAnalyticsPayload } from '@atlaskit/editor-common/clipboard';
3
+ import { browser } from '@atlaskit/editor-common/utils';
4
+ import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
5
+ import { copyButtonPluginKey } from './pm-plugins/plugin-key';
6
+ import { getSelectedNodeOrNodeParentByNodeType, toDOM } from './utils';
7
+ export function createToolbarCopyCommandForMark(markType, editorAnalyticsApi) {
8
+ function command(state, dispatch) {
9
+ var textNode = state.tr.selection.$head.parent.maybeChild(state.tr.selection.$head.index());
10
+ if (!textNode) {
11
+ return false;
12
+ }
13
+ if (dispatch) {
14
+ // As calling copyHTMLToClipboard causes side effects -- we only run this when
15
+ // dispatch is provided -- as otherwise the consumer is only testing to see if
16
+ // the action is availble.
17
+ var domNode = toDOM(textNode, state.schema);
18
+ if (domNode) {
19
+ var div = document.createElement('div');
20
+ var p = document.createElement('p');
21
+ div.appendChild(p);
22
+ p.appendChild(domNode);
23
+ // The "1 1" refers to the start and end depth of the slice
24
+ // since we're copying the text inside a paragraph, it will always be 1 1
25
+ // https://github.com/ProseMirror/prosemirror-view/blob/master/src/clipboard.ts#L32
26
+ div.firstChild.setAttribute('data-pm-slice', '1 1 []');
27
+
28
+ // If we're copying a hyperlink, we'd copy the url as the fallback plain text
29
+ var linkUrl = domNode.getAttribute('href');
30
+ copyHTMLToClipboard(div, markType.name === 'link' && linkUrl ? linkUrl : undefined);
31
+ }
32
+ var copyToClipboardTr = state.tr;
33
+ copyToClipboardTr.setMeta(copyButtonPluginKey, {
34
+ copied: true
35
+ });
36
+ var analyticsPayload = getAnalyticsPayload(state, ACTION.COPIED);
37
+ if (analyticsPayload && editorAnalyticsApi) {
38
+ var _editorAnalyticsApi$a;
39
+ analyticsPayload.attributes.inputMethod = INPUT_METHOD.FLOATING_TB;
40
+ analyticsPayload.attributes.markType = markType.name;
41
+ editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : (_editorAnalyticsApi$a = editorAnalyticsApi.attachAnalyticsEvent) === null || _editorAnalyticsApi$a === void 0 ? void 0 : _editorAnalyticsApi$a.call(editorAnalyticsApi, analyticsPayload)(copyToClipboardTr);
42
+ }
43
+ dispatch(copyToClipboardTr);
44
+ }
45
+ return true;
46
+ }
47
+ return command;
48
+ }
49
+ export function getProvideMarkVisualFeedbackForCopyButtonCommand(markType) {
50
+ function provideMarkVisualFeedbackForCopyButtonCommand(state, dispatch) {
51
+ var tr = state.tr;
52
+ tr.setMeta(copyButtonPluginKey, {
53
+ showSelection: true,
54
+ markType: markType
55
+ });
56
+ if (dispatch) {
57
+ dispatch(tr);
58
+ }
59
+ return true;
60
+ }
61
+ return provideMarkVisualFeedbackForCopyButtonCommand;
62
+ }
63
+ export function removeMarkVisualFeedbackForCopyButtonCommand(state, dispatch) {
64
+ var tr = state.tr;
65
+ tr.setMeta(copyButtonPluginKey, {
66
+ removeSelection: true
67
+ });
68
+ var copyButtonState = copyButtonPluginKey.getState(state);
69
+ if (copyButtonState !== null && copyButtonState !== void 0 && copyButtonState.copied) {
70
+ tr.setMeta(copyButtonPluginKey, {
71
+ copied: false
72
+ });
73
+ }
74
+ if (dispatch) {
75
+ dispatch(tr);
76
+ }
77
+ return true;
78
+ }
79
+ export var createToolbarCopyCommandForNode = function createToolbarCopyCommandForNode(nodeType, editorAnalyticsApi) {
80
+ return function (state, dispatch) {
81
+ var tr = state.tr,
82
+ schema = state.schema;
83
+
84
+ // This command should only be triggered by the Copy button in the floating toolbar
85
+ // which is only visible when selection is inside the target node
86
+ var contentNodeWithPos = getSelectedNodeOrNodeParentByNodeType({
87
+ nodeType: nodeType,
88
+ selection: tr.selection
89
+ });
90
+ if (!contentNodeWithPos) {
91
+ return false;
92
+ }
93
+ var copyToClipboardTr = tr;
94
+ copyToClipboardTr.setMeta(copyButtonPluginKey, {
95
+ copied: true
96
+ });
97
+ var analyticsPayload = getAnalyticsPayload(state, ACTION.COPIED);
98
+ if (analyticsPayload && editorAnalyticsApi) {
99
+ var _editorAnalyticsApi$a2;
100
+ analyticsPayload.attributes.inputMethod = INPUT_METHOD.FLOATING_TB;
101
+ analyticsPayload.attributes.nodeType = contentNodeWithPos.node.type.name;
102
+ editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : (_editorAnalyticsApi$a2 = editorAnalyticsApi.attachAnalyticsEvent) === null || _editorAnalyticsApi$a2 === void 0 ? void 0 : _editorAnalyticsApi$a2.call(editorAnalyticsApi, analyticsPayload)(copyToClipboardTr);
103
+ }
104
+ if (dispatch) {
105
+ // As calling copyHTMLToClipboard causes side effects -- we only run this when
106
+ // dispatch is provided -- as otherwise the consumer is only testing to see if
107
+ // the action is availble.
108
+ var domNode = toDOM(contentNodeWithPos.node, schema);
109
+ if (domNode) {
110
+ var div = document.createElement('div');
111
+ div.appendChild(domNode);
112
+
113
+ // if copying inline content
114
+ if (contentNodeWithPos.node.type.inlineContent) {
115
+ // The "1 1" refers to the start and end depth of the slice
116
+ // since we're copying the text inside a paragraph, it will always be 1 1
117
+ // https://github.com/ProseMirror/prosemirror-view/blob/master/src/clipboard.ts#L32
118
+ div.firstChild.setAttribute('data-pm-slice', '1 1 []');
119
+ } else {
120
+ // The "0 0" refers to the start and end depth of the slice
121
+ // since we're copying the block node only, it will always be 0 0
122
+ // https://github.com/ProseMirror/prosemirror-view/blob/master/src/clipboard.ts#L32
123
+ div.firstChild.setAttribute('data-pm-slice', '0 0 []');
124
+ }
125
+ // ED-17083 safari seems have bugs for extension copy because exntension do not have a child text(innerText) and it will not recognized as html in clipboard, this could be merge into one if this extension fixed children issue or safari fix the copy bug
126
+ // MEX-2528 safari has a bug related to the mediaSingle node with border or link. The image tag within the clipboard is not recognized as HTML when using the ClipboardItem API. To address this, we have to switch to ClipboardPolyfill
127
+ if (browser.safari && state.selection instanceof NodeSelection && (state.selection.node.type === state.schema.nodes.extension || state.selection.node.type === state.schema.nodes.mediaSingle)) {
128
+ copyHTMLToClipboardPolyfill(div);
129
+ } else {
130
+ copyHTMLToClipboard(div);
131
+ }
132
+ }
133
+ copyToClipboardTr.setMeta('scrollIntoView', false);
134
+ dispatch(copyToClipboardTr);
135
+ }
136
+ return true;
137
+ };
138
+ };
139
+ export var resetCopiedState = function resetCopiedState(nodeType, hoverDecoration, onMouseLeave) {
140
+ return function (state, dispatch) {
141
+ var customTr = state.tr;
142
+
143
+ // Avoid multipe dispatch
144
+ // https://product-fabric.atlassian.net/wiki/spaces/E/pages/2241659456/All+about+dispatch+and+why+there+shouldn+t+be+multiple#How-do-I-avoid-them%3F
145
+ var customDispatch = function customDispatch(tr) {
146
+ customTr = tr;
147
+ };
148
+ onMouseLeave ? onMouseLeave(state, customDispatch) : hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false)(state, customDispatch);
149
+ var copyButtonState = copyButtonPluginKey.getState(state);
150
+ if (copyButtonState !== null && copyButtonState !== void 0 && copyButtonState.copied) {
151
+ customTr.setMeta(copyButtonPluginKey, {
152
+ copied: false
153
+ });
154
+ }
155
+ if (dispatch) {
156
+ dispatch(customTr);
157
+ }
158
+ return true;
159
+ };
160
+ };
package/dist/esm/index.js CHANGED
@@ -1 +1 @@
1
- export {};
1
+ export { copyButtonPlugin } from './plugin';
@@ -0,0 +1,20 @@
1
+ import createPlugin from './pm-plugins/main';
2
+ import { processCopyButtonItems } from './toolbar';
3
+ export var copyButtonPlugin = function copyButtonPlugin(_ref) {
4
+ var _api$analytics;
5
+ var api = _ref.api;
6
+ return {
7
+ name: 'copyButton',
8
+ pmPlugins: function pmPlugins() {
9
+ return [{
10
+ name: 'copyButton',
11
+ plugin: function plugin() {
12
+ return createPlugin();
13
+ }
14
+ }];
15
+ },
16
+ actions: {
17
+ processCopyButtonItems: processCopyButtonItems(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)
18
+ }
19
+ };
20
+ };
@@ -0,0 +1,96 @@
1
+ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
2
+ import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
3
+ import { copyButtonPluginKey } from './plugin-key';
4
+ function getMarkSelectionDecorationStartAndEnd(_ref) {
5
+ var markType = _ref.markType,
6
+ transaction = _ref.transaction;
7
+ var headResolvedPos = transaction.selection.$head;
8
+ var textNodeIndex = transaction.selection.$head.index();
9
+ var textNode = headResolvedPos.parent.maybeChild(textNodeIndex);
10
+ var textNodeOffset = 0;
11
+ headResolvedPos.parent.forEach(function (_node, nodeOffset, index) {
12
+ if (index === textNodeIndex) {
13
+ textNodeOffset = nodeOffset;
14
+ }
15
+ });
16
+ var start = headResolvedPos.start(headResolvedPos.depth) + textNodeOffset;
17
+ var end = start + textNode.text.length;
18
+ return {
19
+ start: start,
20
+ end: end,
21
+ markType: markType
22
+ };
23
+ }
24
+ export function copyButtonPlugin() {
25
+ return new SafePlugin({
26
+ key: copyButtonPluginKey,
27
+ state: {
28
+ init: function init() {
29
+ return {
30
+ copied: false,
31
+ markSelection: undefined
32
+ };
33
+ },
34
+ apply: function apply(tr, currentPluginState) {
35
+ var meta = tr.getMeta(copyButtonPluginKey);
36
+ if ((meta === null || meta === void 0 ? void 0 : meta.copied) !== undefined) {
37
+ return {
38
+ copied: meta.copied,
39
+ markSelection: undefined
40
+ };
41
+ }
42
+ if (meta !== null && meta !== void 0 && meta.showSelection) {
43
+ return {
44
+ copied: currentPluginState.copied,
45
+ markSelection: getMarkSelectionDecorationStartAndEnd({
46
+ markType: meta.markType,
47
+ transaction: tr
48
+ })
49
+ };
50
+ }
51
+ if (meta !== null && meta !== void 0 && meta.removeSelection) {
52
+ return {
53
+ copied: currentPluginState.copied,
54
+ markSelection: undefined
55
+ };
56
+ }
57
+ if (currentPluginState.markSelection) {
58
+ return {
59
+ copied: currentPluginState.copied,
60
+ markSelection: getMarkSelectionDecorationStartAndEnd({
61
+ markType: currentPluginState.markSelection.markType,
62
+ transaction: tr
63
+ })
64
+ };
65
+ }
66
+ return currentPluginState;
67
+ }
68
+ },
69
+ props: {
70
+ decorations: function decorations(_state) {
71
+ // Showing visual hints for the hyperlink copy button has been disabled
72
+ // due to an issue where invalid hyperlink marks cause the floating toolbar
73
+ // to jump around when the copy button is hovered.
74
+ // See the following bug for details -- once that is resolved -- the visual
75
+ // hints can be re enabled.
76
+ // https://product-fabric.atlassian.net/browse/DTR-722
77
+
78
+ // const copyButtonPluginState = copyButtonPluginKey.getState(
79
+ // state,
80
+ // ) as CopyButtonPluginState;
81
+ // if (copyButtonPluginState.markSelection) {
82
+ // const { start, end } = copyButtonPluginState.markSelection;
83
+
84
+ // return DecorationSet.create(state.doc, [
85
+ // Decoration.inline(start, end, {
86
+ // class: 'ProseMirror-fake-text-selection',
87
+ // }),
88
+ // ]);
89
+ // }
90
+
91
+ return DecorationSet.empty;
92
+ }
93
+ }
94
+ });
95
+ }
96
+ export default copyButtonPlugin;
@@ -0,0 +1,2 @@
1
+ import { PluginKey } from '@atlaskit/editor-prosemirror/state';
2
+ export var copyButtonPluginKey = new PluginKey('copyButtonPlugin');
@@ -0,0 +1,94 @@
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 commonMessages from '@atlaskit/editor-common/messages';
5
+ import CopyIcon from '@atlaskit/icon/glyph/copy';
6
+ import { createToolbarCopyCommandForMark, createToolbarCopyCommandForNode, getProvideMarkVisualFeedbackForCopyButtonCommand, removeMarkVisualFeedbackForCopyButtonCommand, resetCopiedState } from './commands';
7
+ import { copyButtonPluginKey } from './pm-plugins/plugin-key';
8
+
9
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
10
+ function isSeparator(item) {
11
+ return (item === null || item === void 0 ? void 0 : item.type) === 'separator';
12
+ }
13
+ function isNodeOptions(options) {
14
+ return 'nodeType' in options && options.nodeType !== undefined;
15
+ }
16
+ export function getCopyButtonConfig(options, hoverDecoration, editorAnalyticsApi) {
17
+ var state = options.state,
18
+ formatMessage = options.formatMessage,
19
+ onMouseEnter = options.onMouseEnter,
20
+ onMouseLeave = options.onMouseLeave,
21
+ onFocus = options.onFocus,
22
+ onBlur = options.onBlur;
23
+ var copyButtonState = copyButtonPluginKey.getState(state);
24
+ var buttonActionHandlers;
25
+ if (isNodeOptions(options)) {
26
+ buttonActionHandlers = {
27
+ onClick: createToolbarCopyCommandForNode(options.nodeType, editorAnalyticsApi),
28
+ // Note for future changes: these two handlers should perform
29
+ // the same action.
30
+ onMouseEnter: onMouseEnter || (hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(options.nodeType, true, 'ak-editor-selected-node')),
31
+ onFocus: onFocus || (hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(options.nodeType, true, 'ak-editor-selected-node')),
32
+ // Note for future changes: these two handlers should perform
33
+ // the same action.
34
+ onMouseLeave: resetCopiedState(options.nodeType, hoverDecoration, onMouseLeave),
35
+ onBlur: resetCopiedState(options.nodeType, hoverDecoration, onBlur)
36
+ };
37
+ } else {
38
+ buttonActionHandlers = {
39
+ onClick: createToolbarCopyCommandForMark(options.markType, editorAnalyticsApi),
40
+ onMouseEnter: getProvideMarkVisualFeedbackForCopyButtonCommand(options.markType),
41
+ onFocus: getProvideMarkVisualFeedbackForCopyButtonCommand(options.markType),
42
+ onMouseLeave: removeMarkVisualFeedbackForCopyButtonCommand,
43
+ onBlur: removeMarkVisualFeedbackForCopyButtonCommand
44
+ };
45
+ }
46
+ return _objectSpread(_objectSpread({
47
+ id: 'editor.floatingToolbar.copy',
48
+ type: 'button',
49
+ appearance: 'subtle',
50
+ icon: CopyIcon,
51
+ title: formatMessage(copyButtonState !== null && copyButtonState !== void 0 && copyButtonState.copied ? commonMessages.copiedToClipboard : commonMessages.copyToClipboard)
52
+ }, buttonActionHandlers), {}, {
53
+ hideTooltipOnClick: false,
54
+ tabIndex: null
55
+ // TODO select and delete styling needs to be removed when keyboard cursor moves away
56
+ // problem already exist with delete as well
57
+ });
58
+ }
59
+
60
+ export var showCopyButton = function showCopyButton(state) {
61
+ return state &&
62
+ // Check if the Copy button plugin is enabled
63
+ // @ts-ignore copyButtonPluginKey.key
64
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
65
+ state.plugins.find(function (p) {
66
+ return p.key === copyButtonPluginKey.key;
67
+ });
68
+ };
69
+
70
+ /**
71
+ * Process floatingToolbar items for copyButton
72
+ *
73
+ * If copy button plugin not enabled, remove copy button item from toolbar items
74
+ * else process copy button to standard floatingtoobarbutton
75
+ */
76
+ export var processCopyButtonItems = function processCopyButtonItems(editorAnalyticsApi) {
77
+ return function (state) {
78
+ return function (items, hoverDecoration) {
79
+ return items.flatMap(function (item) {
80
+ switch (item.type) {
81
+ case 'copy-button':
82
+ if (item !== null && item !== void 0 && item.hidden || !showCopyButton(state)) {
83
+ return [];
84
+ }
85
+ return item === null || item === void 0 ? void 0 : item.items.map(function (copyButtonItem) {
86
+ return isSeparator(copyButtonItem) ? copyButtonItem : getCopyButtonConfig(copyButtonItem, hoverDecoration, editorAnalyticsApi);
87
+ });
88
+ default:
89
+ return [item];
90
+ }
91
+ });
92
+ };
93
+ };
94
+ };
package/dist/esm/types.js CHANGED
@@ -1 +1,3 @@
1
- export {};
1
+ import { processCopyButtonItems } from './toolbar';
2
+ var editorAnalyticsApi = undefined;
3
+ var processCopyButtonItemsWithAnalytics = processCopyButtonItems(editorAnalyticsApi);
@@ -0,0 +1,14 @@
1
+ import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
2
+ import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
3
+ export function getSelectedNodeOrNodeParentByNodeType(_ref) {
4
+ var nodeType = _ref.nodeType,
5
+ selection = _ref.selection;
6
+ var node = findSelectedNodeOfType(nodeType)(selection);
7
+ if (!node) {
8
+ node = findParentNodeOfType(nodeType)(selection);
9
+ }
10
+ return node;
11
+ }
12
+ export var toDOM = function toDOM(node, schema) {
13
+ return DOMSerializer.fromSchema(schema).serializeNode(node);
14
+ };
@@ -0,0 +1,10 @@
1
+ import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
2
+ import type { Command, CommandDispatch } from '@atlaskit/editor-common/types';
3
+ import type { HoverDecorationHandler } from '@atlaskit/editor-plugin-decorations';
4
+ import type { MarkType, NodeType } from '@atlaskit/editor-prosemirror/model';
5
+ import type { EditorState } from '@atlaskit/editor-prosemirror/state';
6
+ export declare function createToolbarCopyCommandForMark(markType: MarkType, editorAnalyticsApi: EditorAnalyticsAPI | undefined): Command;
7
+ export declare function getProvideMarkVisualFeedbackForCopyButtonCommand(markType: MarkType): (state: EditorState, dispatch: CommandDispatch | undefined) => boolean;
8
+ export declare function removeMarkVisualFeedbackForCopyButtonCommand(state: EditorState, dispatch: CommandDispatch | undefined): boolean;
9
+ export declare const createToolbarCopyCommandForNode: (nodeType: NodeType | Array<NodeType>, editorAnalyticsApi: EditorAnalyticsAPI | undefined) => Command;
10
+ export declare const resetCopiedState: (nodeType: NodeType | Array<NodeType>, hoverDecoration: HoverDecorationHandler | undefined, onMouseLeave?: Command) => Command;
@@ -1 +1,2 @@
1
1
  export type { CopyButtonPlugin, CopyButtonPluginState } from './types';
2
+ export { copyButtonPlugin } from './plugin';
@@ -0,0 +1,2 @@
1
+ import type { CopyButtonPlugin } from './types';
2
+ export declare const copyButtonPlugin: CopyButtonPlugin;
@@ -0,0 +1,4 @@
1
+ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
2
+ import type { CopyButtonPluginState } from '../types';
3
+ export declare function copyButtonPlugin(): SafePlugin<CopyButtonPluginState>;
4
+ export default copyButtonPlugin;
@@ -0,0 +1,2 @@
1
+ import { PluginKey } from '@atlaskit/editor-prosemirror/state';
2
+ export declare const copyButtonPluginKey: PluginKey<any>;
@@ -0,0 +1,13 @@
1
+ import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
2
+ import type { Command, FloatingToolbarButton, FloatingToolbarItem, MarkOptions, NodeOptions } from '@atlaskit/editor-common/types';
3
+ import type { HoverDecorationHandler } from '@atlaskit/editor-plugin-decorations';
4
+ import type { EditorState } from '@atlaskit/editor-prosemirror/state';
5
+ export declare function getCopyButtonConfig(options: MarkOptions | NodeOptions, hoverDecoration: HoverDecorationHandler | undefined, editorAnalyticsApi: EditorAnalyticsAPI | undefined): FloatingToolbarButton<Command>;
6
+ export declare const showCopyButton: (state?: EditorState) => import("prosemirror-state").Plugin<any> | undefined;
7
+ /**
8
+ * Process floatingToolbar items for copyButton
9
+ *
10
+ * If copy button plugin not enabled, remove copy button item from toolbar items
11
+ * else process copy button to standard floatingtoobarbutton
12
+ */
13
+ export declare const processCopyButtonItems: (editorAnalyticsApi?: EditorAnalyticsAPI | undefined) => (state: EditorState) => (items: Array<FloatingToolbarItem<Command>>, hoverDecoration: HoverDecorationHandler | undefined) => Array<FloatingToolbarItem<Command>>;