@atlaskit/editor-core 190.1.14 → 190.1.16

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 (119) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/afm-cc/tsconfig.json +6 -0
  3. package/dist/cjs/plugins/index.js +0 -14
  4. package/dist/cjs/presets/default.js +2 -2
  5. package/dist/cjs/presets/universal.js +4 -2
  6. package/dist/cjs/version-wrapper.js +1 -1
  7. package/dist/es2019/plugins/index.js +0 -2
  8. package/dist/es2019/presets/default.js +1 -1
  9. package/dist/es2019/presets/universal.js +4 -2
  10. package/dist/es2019/version-wrapper.js +1 -1
  11. package/dist/esm/plugins/index.js +0 -2
  12. package/dist/esm/presets/default.js +1 -1
  13. package/dist/esm/presets/universal.js +4 -2
  14. package/dist/esm/version-wrapper.js +1 -1
  15. package/dist/types/plugins/index.d.ts +0 -2
  16. package/dist/types/ui/Appearance/FullPage/StyledComponents.d.ts +2 -2
  17. package/dist/types/ui/ConfigPanel/FormErrorBoundary.d.ts +1 -1
  18. package/dist/types/ui/ContentStyles/index.d.ts +2 -2
  19. package/dist/types-ts4.5/plugins/index.d.ts +0 -2
  20. package/dist/types-ts4.5/ui/Appearance/FullPage/StyledComponents.d.ts +2 -2
  21. package/dist/types-ts4.5/ui/ConfigPanel/FormErrorBoundary.d.ts +1 -1
  22. package/dist/types-ts4.5/ui/ContentStyles/index.d.ts +2 -2
  23. package/package.json +4 -2
  24. package/tsconfig.json +1 -1
  25. package/dist/cjs/plugins/breakout/commands/remove-breakout.js +0 -30
  26. package/dist/cjs/plugins/breakout/commands/set-breakout-mode.js +0 -29
  27. package/dist/cjs/plugins/breakout/index.js +0 -218
  28. package/dist/cjs/plugins/breakout/plugin-key.js +0 -11
  29. package/dist/cjs/plugins/breakout/types.js +0 -5
  30. package/dist/cjs/plugins/breakout/ui/LayoutButton.js +0 -133
  31. package/dist/cjs/plugins/breakout/utils/find-breakout-node.js +0 -42
  32. package/dist/cjs/plugins/breakout/utils/get-breakout-mode.js +0 -24
  33. package/dist/cjs/plugins/breakout/utils/is-breakout-mark-allowed.js +0 -27
  34. package/dist/cjs/plugins/breakout/utils/is-supported-node.js +0 -15
  35. package/dist/cjs/plugins/undo-redo/attach-input-meta.js +0 -26
  36. package/dist/cjs/plugins/undo-redo/commands.js +0 -13
  37. package/dist/cjs/plugins/undo-redo/enums.js +0 -12
  38. package/dist/cjs/plugins/undo-redo/index.js +0 -44
  39. package/dist/cjs/plugins/undo-redo/pm-plugins/keymaps.js +0 -23
  40. package/dist/cjs/plugins/undo-redo/pm-plugins/main.js +0 -14
  41. package/dist/cjs/plugins/undo-redo/pm-plugins/plugin-key.js +0 -8
  42. package/dist/cjs/plugins/undo-redo/types.js +0 -5
  43. package/dist/cjs/plugins/undo-redo/ui/ToolbarUndoRedo/index.js +0 -104
  44. package/dist/es2019/plugins/breakout/commands/remove-breakout.js +0 -22
  45. package/dist/es2019/plugins/breakout/commands/set-breakout-mode.js +0 -23
  46. package/dist/es2019/plugins/breakout/index.js +0 -208
  47. package/dist/es2019/plugins/breakout/plugin-key.js +0 -3
  48. package/dist/es2019/plugins/breakout/types.js +0 -1
  49. package/dist/es2019/plugins/breakout/ui/LayoutButton.js +0 -117
  50. package/dist/es2019/plugins/breakout/utils/find-breakout-node.js +0 -37
  51. package/dist/es2019/plugins/breakout/utils/get-breakout-mode.js +0 -16
  52. package/dist/es2019/plugins/breakout/utils/is-breakout-mark-allowed.js +0 -22
  53. package/dist/es2019/plugins/breakout/utils/is-supported-node.js +0 -9
  54. package/dist/es2019/plugins/undo-redo/attach-input-meta.js +0 -16
  55. package/dist/es2019/plugins/undo-redo/commands.js +0 -7
  56. package/dist/es2019/plugins/undo-redo/enums.js +0 -6
  57. package/dist/es2019/plugins/undo-redo/index.js +0 -32
  58. package/dist/es2019/plugins/undo-redo/pm-plugins/keymaps.js +0 -17
  59. package/dist/es2019/plugins/undo-redo/pm-plugins/main.js +0 -9
  60. package/dist/es2019/plugins/undo-redo/pm-plugins/plugin-key.js +0 -2
  61. package/dist/es2019/plugins/undo-redo/types.js +0 -1
  62. package/dist/es2019/plugins/undo-redo/ui/ToolbarUndoRedo/index.js +0 -94
  63. package/dist/esm/plugins/breakout/commands/remove-breakout.js +0 -24
  64. package/dist/esm/plugins/breakout/commands/set-breakout-mode.js +0 -23
  65. package/dist/esm/plugins/breakout/index.js +0 -211
  66. package/dist/esm/plugins/breakout/plugin-key.js +0 -5
  67. package/dist/esm/plugins/breakout/types.js +0 -1
  68. package/dist/esm/plugins/breakout/ui/LayoutButton.js +0 -126
  69. package/dist/esm/plugins/breakout/utils/find-breakout-node.js +0 -37
  70. package/dist/esm/plugins/breakout/utils/get-breakout-mode.js +0 -18
  71. package/dist/esm/plugins/breakout/utils/is-breakout-mark-allowed.js +0 -22
  72. package/dist/esm/plugins/breakout/utils/is-supported-node.js +0 -9
  73. package/dist/esm/plugins/undo-redo/attach-input-meta.js +0 -20
  74. package/dist/esm/plugins/undo-redo/commands.js +0 -7
  75. package/dist/esm/plugins/undo-redo/enums.js +0 -6
  76. package/dist/esm/plugins/undo-redo/index.js +0 -36
  77. package/dist/esm/plugins/undo-redo/pm-plugins/keymaps.js +0 -17
  78. package/dist/esm/plugins/undo-redo/pm-plugins/main.js +0 -8
  79. package/dist/esm/plugins/undo-redo/pm-plugins/plugin-key.js +0 -2
  80. package/dist/esm/plugins/undo-redo/types.js +0 -1
  81. package/dist/esm/plugins/undo-redo/ui/ToolbarUndoRedo/index.js +0 -93
  82. package/dist/types/plugins/breakout/commands/remove-breakout.d.ts +0 -2
  83. package/dist/types/plugins/breakout/commands/set-breakout-mode.d.ts +0 -3
  84. package/dist/types/plugins/breakout/index.d.ts +0 -12
  85. package/dist/types/plugins/breakout/plugin-key.d.ts +0 -5
  86. package/dist/types/plugins/breakout/types.d.ts +0 -4
  87. package/dist/types/plugins/breakout/ui/LayoutButton.d.ts +0 -17
  88. package/dist/types/plugins/breakout/utils/find-breakout-node.d.ts +0 -9
  89. package/dist/types/plugins/breakout/utils/get-breakout-mode.d.ts +0 -7
  90. package/dist/types/plugins/breakout/utils/is-breakout-mark-allowed.d.ts +0 -9
  91. package/dist/types/plugins/breakout/utils/is-supported-node.d.ts +0 -6
  92. package/dist/types/plugins/undo-redo/attach-input-meta.d.ts +0 -5
  93. package/dist/types/plugins/undo-redo/commands.d.ts +0 -4
  94. package/dist/types/plugins/undo-redo/enums.d.ts +0 -4
  95. package/dist/types/plugins/undo-redo/index.d.ts +0 -3
  96. package/dist/types/plugins/undo-redo/pm-plugins/keymaps.d.ts +0 -2
  97. package/dist/types/plugins/undo-redo/pm-plugins/main.d.ts +0 -2
  98. package/dist/types/plugins/undo-redo/pm-plugins/plugin-key.d.ts +0 -2
  99. package/dist/types/plugins/undo-redo/types.d.ts +0 -6
  100. package/dist/types/plugins/undo-redo/ui/ToolbarUndoRedo/index.d.ts +0 -20
  101. package/dist/types-ts4.5/plugins/breakout/commands/remove-breakout.d.ts +0 -2
  102. package/dist/types-ts4.5/plugins/breakout/commands/set-breakout-mode.d.ts +0 -3
  103. package/dist/types-ts4.5/plugins/breakout/index.d.ts +0 -14
  104. package/dist/types-ts4.5/plugins/breakout/plugin-key.d.ts +0 -5
  105. package/dist/types-ts4.5/plugins/breakout/types.d.ts +0 -4
  106. package/dist/types-ts4.5/plugins/breakout/ui/LayoutButton.d.ts +0 -17
  107. package/dist/types-ts4.5/plugins/breakout/utils/find-breakout-node.d.ts +0 -9
  108. package/dist/types-ts4.5/plugins/breakout/utils/get-breakout-mode.d.ts +0 -7
  109. package/dist/types-ts4.5/plugins/breakout/utils/is-breakout-mark-allowed.d.ts +0 -9
  110. package/dist/types-ts4.5/plugins/breakout/utils/is-supported-node.d.ts +0 -6
  111. package/dist/types-ts4.5/plugins/undo-redo/attach-input-meta.d.ts +0 -5
  112. package/dist/types-ts4.5/plugins/undo-redo/commands.d.ts +0 -4
  113. package/dist/types-ts4.5/plugins/undo-redo/enums.d.ts +0 -4
  114. package/dist/types-ts4.5/plugins/undo-redo/index.d.ts +0 -3
  115. package/dist/types-ts4.5/plugins/undo-redo/pm-plugins/keymaps.d.ts +0 -2
  116. package/dist/types-ts4.5/plugins/undo-redo/pm-plugins/main.d.ts +0 -2
  117. package/dist/types-ts4.5/plugins/undo-redo/pm-plugins/plugin-key.d.ts +0 -2
  118. package/dist/types-ts4.5/plugins/undo-redo/types.d.ts +0 -9
  119. package/dist/types-ts4.5/plugins/undo-redo/ui/ToolbarUndoRedo/index.d.ts +0 -20
@@ -1,117 +0,0 @@
1
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
- /** @jsx jsx */
3
- import React from 'react';
4
- import { css, jsx } from '@emotion/react';
5
- import { B300, N300, N20A } from '@atlaskit/theme/colors';
6
- import { injectIntl } from 'react-intl-next';
7
- import { findParentDomRefOfType, findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
8
- import { Popup } from '@atlaskit/editor-common/ui';
9
- import CollapseIcon from '@atlaskit/icon/glyph/editor/collapse';
10
- import ExpandIcon from '@atlaskit/icon/glyph/editor/expand';
11
- import ToolbarButton from '../../../ui/ToolbarButton';
12
- import { getBreakoutMode } from '../utils/get-breakout-mode';
13
- import { setBreakoutMode } from '../commands/set-breakout-mode';
14
- import { removeBreakout } from '../commands/remove-breakout';
15
- import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
16
- import { isBreakoutMarkAllowed } from '../utils/is-breakout-mark-allowed';
17
- import { getPluginState } from '../plugin-key';
18
- import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
19
- import { isSupportedNodeForBreakout } from '../utils/is-supported-node';
20
- import { layers } from '@atlaskit/theme/constants';
21
- import { getNextBreakoutMode, getTitle } from '@atlaskit/editor-common/utils';
22
- const toolbarButtonWrapper = css`
23
- && button {
24
- background: ${`var(--ds-background-neutral, ${N20A})`};
25
- color: ${`var(--ds-icon, ${N300})`};
26
- :hover {
27
- background: ${`var(--ds-background-neutral-hovered, ${B300})`};
28
- color: ${"var(--ds-icon, white)"} !important;
29
- }
30
- }
31
- `;
32
- function getBreakoutNodeElement(pluginState, selection, editorView) {
33
- if (!pluginState.breakoutNode) {
34
- return undefined;
35
- }
36
- if (selection instanceof NodeSelection && isSupportedNodeForBreakout(selection.node)) {
37
- return findDomRefAtPos(selection.from, editorView.domAtPos.bind(editorView));
38
- }
39
- return findParentDomRefOfType(pluginState.breakoutNode.node.type, editorView.domAtPos.bind(editorView))(selection);
40
- }
41
- class LayoutButton extends React.Component {
42
- constructor(...args) {
43
- super(...args);
44
- _defineProperty(this, "handleClick", breakoutMode => () => {
45
- const {
46
- state,
47
- dispatch
48
- } = this.props.editorView;
49
- if (['wide', 'full-width'].indexOf(breakoutMode) !== -1) {
50
- setBreakoutMode(breakoutMode)(state, dispatch);
51
- } else {
52
- removeBreakout()(state, dispatch);
53
- }
54
- });
55
- }
56
- render() {
57
- const {
58
- intl: {
59
- formatMessage
60
- },
61
- mountPoint,
62
- boundariesElement,
63
- scrollableElement,
64
- editorView,
65
- node
66
- } = this.props;
67
- const {
68
- state
69
- } = editorView;
70
- if (!node || !isBreakoutMarkAllowed(state)) {
71
- return null;
72
- }
73
- const breakoutMode = getBreakoutMode(editorView.state);
74
- const titleMessage = getTitle(breakoutMode);
75
- const title = formatMessage(titleMessage);
76
- const nextBreakoutMode = getNextBreakoutMode(breakoutMode);
77
- const belowOtherPopupsZIndex = layers.layer() - 1;
78
- let pluginState = getPluginState(state);
79
- if (!pluginState) {
80
- return null;
81
- }
82
- let element = getBreakoutNodeElement(pluginState, state.selection, editorView);
83
- if (!element) {
84
- return null;
85
- }
86
- const closestEl = element.querySelector(`.${BreakoutCssClassName.BREAKOUT_MARK_DOM}`);
87
- if (closestEl && closestEl.firstChild) {
88
- element = closestEl.firstChild;
89
- }
90
- return jsx(Popup, {
91
- ariaLabel: title,
92
- target: element,
93
- offset: [5, 0],
94
- alignY: "start",
95
- alignX: "end",
96
- mountTo: mountPoint,
97
- boundariesElement: boundariesElement,
98
- scrollableElement: scrollableElement,
99
- stick: true,
100
- forcePlacement: true,
101
- zIndex: belowOtherPopupsZIndex
102
- }, jsx("div", {
103
- css: toolbarButtonWrapper
104
- }, jsx(ToolbarButton, {
105
- title: title,
106
- testId: titleMessage.id,
107
- onClick: this.handleClick(nextBreakoutMode),
108
- iconBefore: breakoutMode === 'full-width' ? jsx(CollapseIcon, {
109
- label: title
110
- }) : jsx(ExpandIcon, {
111
- label: title
112
- })
113
- })));
114
- }
115
- }
116
- _defineProperty(LayoutButton, "displayName", 'LayoutButton');
117
- export default injectIntl(LayoutButton);
@@ -1,37 +0,0 @@
1
- import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
2
- import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
3
- import { isSupportedNodeForBreakout } from './is-supported-node';
4
-
5
- /**
6
- * Find the nearest parent node to the selection that supports breakout, or if the nearest
7
- * matching parent node is the doc, return undefined.
8
- * For depth, if a node is selected and supports breakout, return the depth of the node.
9
- * @param selection Current editor selection
10
- */
11
- export function findSupportedNodeForBreakout(selection) {
12
- if (selection instanceof NodeSelection) {
13
- const supportsBreakout = isSupportedNodeForBreakout(selection.node);
14
- if (supportsBreakout) {
15
- return {
16
- pos: selection.from,
17
- start: selection.from,
18
- node: selection.node,
19
- // If a selected expand is in a doc, the depth of that expand is 0. Therefore
20
- // we don't need to subtract 1 or instantly return false if the depth is 0
21
- depth: selection.$anchor.depth
22
- };
23
- }
24
- }
25
- const breakoutNode = findParentNode(isSupportedNodeForBreakout)(selection);
26
- if (!breakoutNode || breakoutNode.depth === 0) {
27
- // If this node doesn't exist or the only supporting node is the document
28
- // (with depth 0), then we're not inside a node that supports breakout
29
- return undefined;
30
- }
31
- return {
32
- node: breakoutNode.node,
33
- start: breakoutNode.start,
34
- pos: breakoutNode.pos,
35
- depth: breakoutNode.depth - 1
36
- };
37
- }
@@ -1,16 +0,0 @@
1
- import { findSupportedNodeForBreakout } from './find-breakout-node';
2
- /**
3
- * Get the current mode of the breakout at the selection
4
- * @param state Current EditorState
5
- */
6
- export function getBreakoutMode(state) {
7
- const node = findSupportedNodeForBreakout(state.selection);
8
- if (!node) {
9
- return;
10
- }
11
- const breakoutMark = node.node.marks.find(m => m.type.name === 'breakout');
12
- if (!breakoutMark) {
13
- return;
14
- }
15
- return breakoutMark.attrs.mode;
16
- }
@@ -1,22 +0,0 @@
1
- import { findSupportedNodeForBreakout } from './find-breakout-node';
2
-
3
- /**
4
- * Check if breakout should be allowed for the current selection. If a node is selected,
5
- * can this node be broken out, if text, can the enclosing parent node be broken out.
6
- *
7
- * Currently breakout of a node is not possible if it's nested in anything but the document, however
8
- * this logic supports this changing.
9
- */
10
- export function isBreakoutMarkAllowed(state) {
11
- if (!state.schema.marks.breakout) {
12
- return false;
13
- }
14
- const supportedNodeParent = findSupportedNodeForBreakout(state.selection);
15
- if (!supportedNodeParent) {
16
- return false;
17
- }
18
- // At the moment we can only breakout when the depth is 0, ie. doc is the only node
19
- // that supports breakout. This *could* change though.
20
- const parent = state.selection.$from.node(supportedNodeParent.depth);
21
- return parent.type.allowsMarkType(state.schema.marks.breakout);
22
- }
@@ -1,9 +0,0 @@
1
- const supportedNodesForBreakout = ['codeBlock', 'layoutSection', 'expand'];
2
-
3
- /**
4
- * Check if breakout can be applied to a node
5
- * @param node Node to check
6
- */
7
- export function isSupportedNodeForBreakout(node) {
8
- return supportedNodesForBreakout.indexOf(node.type.name) !== -1;
9
- }
@@ -1,16 +0,0 @@
1
- import { pluginKey as undoPluginKey } from './pm-plugins/plugin-key';
2
- export const attachInputMeta = inputSource => command => (state, dispatch) => {
3
- let customTr = state.tr;
4
- const fakeDispatch = tr => {
5
- customTr = tr;
6
- };
7
- command(state, fakeDispatch);
8
- if (!customTr || !customTr.docChanged) {
9
- return false;
10
- }
11
- customTr.setMeta(undoPluginKey, inputSource);
12
- if (dispatch) {
13
- dispatch(customTr);
14
- }
15
- return true;
16
- };
@@ -1,7 +0,0 @@
1
- import { redo, undo } from '@atlaskit/editor-prosemirror/history';
2
- import { attachInputMeta } from './attach-input-meta';
3
- import { InputSource } from './enums';
4
- export const undoFromKeyboard = attachInputMeta(InputSource.KEYBOARD)(undo);
5
- export const redoFromKeyboard = attachInputMeta(InputSource.KEYBOARD)(redo);
6
- export const undoFromToolbar = attachInputMeta(InputSource.TOOLBAR)(undo);
7
- export const redoFromToolbar = attachInputMeta(InputSource.TOOLBAR)(redo);
@@ -1,6 +0,0 @@
1
- import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
2
- export let InputSource = function (InputSource) {
3
- InputSource[InputSource["TOOLBAR"] = INPUT_METHOD.TOOLBAR] = "TOOLBAR";
4
- InputSource[InputSource["KEYBOARD"] = INPUT_METHOD.KEYBOARD] = "KEYBOARD";
5
- return InputSource;
6
- }({});
@@ -1,32 +0,0 @@
1
- import React from 'react';
2
- import { keymapPlugin } from './pm-plugins/keymaps';
3
- import { createPlugin } from './pm-plugins/main';
4
- // eslint-disable-next-line @atlassian/tangerine/import/entry-points
5
- import ToolbarUndoRedo from './ui/ToolbarUndoRedo';
6
- const undoRedoPlugin = ({
7
- api
8
- }) => ({
9
- name: 'undoRedoPlugin',
10
- pmPlugins() {
11
- return [{
12
- name: 'undoRedoKeyMap',
13
- plugin: () => keymapPlugin()
14
- }, {
15
- name: 'undoRedoPlugin',
16
- plugin: options => createPlugin(options)
17
- }];
18
- },
19
- primaryToolbarComponent({
20
- editorView,
21
- disabled,
22
- isToolbarReducedSpacing
23
- }) {
24
- return /*#__PURE__*/React.createElement(ToolbarUndoRedo, {
25
- isReducedSpacing: isToolbarReducedSpacing,
26
- disabled: disabled,
27
- editorView: editorView,
28
- api: api
29
- });
30
- }
31
- });
32
- export default undoRedoPlugin;
@@ -1,17 +0,0 @@
1
- import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
2
- import { undo, redo, bindKeymapWithCommand, findKeyMapForBrowser, isCapsLockOnAndModifyKeyboardEvent } from '@atlaskit/editor-common/keymaps';
3
- import { redoFromKeyboard, undoFromKeyboard } from '../commands';
4
- import { keydownHandler } from '@atlaskit/editor-prosemirror/keymap';
5
- export function keymapPlugin() {
6
- const list = {};
7
- bindKeymapWithCommand(findKeyMapForBrowser(redo), redoFromKeyboard, list);
8
- bindKeymapWithCommand(undo.common, undoFromKeyboard, list);
9
- return new SafePlugin({
10
- props: {
11
- handleKeyDown(view, event) {
12
- let keyboardEvent = isCapsLockOnAndModifyKeyboardEvent(event);
13
- return keydownHandler(list)(view, keyboardEvent);
14
- }
15
- }
16
- });
17
- }
@@ -1,9 +0,0 @@
1
- import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
2
- import { pluginKey } from './plugin-key';
3
- export const createPlugin = ({
4
- dispatch
5
- }) => {
6
- return new SafePlugin({
7
- key: pluginKey
8
- });
9
- };
@@ -1,2 +0,0 @@
1
- import { PluginKey } from '@atlaskit/editor-prosemirror/state';
2
- export const pluginKey = new PluginKey('undoRedoPlugin');
@@ -1 +0,0 @@
1
- export {};
@@ -1,94 +0,0 @@
1
- /** @jsx jsx */
2
- import { jsx } from '@emotion/react';
3
- import { injectIntl } from 'react-intl-next';
4
- import UndoIcon from '@atlaskit/icon/glyph/undo';
5
- import RedoIcon from '@atlaskit/icon/glyph/redo';
6
- import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
7
- import { undo as undoKeymap, redo as redoKeymap, ToolTipContent, tooltip } from '../../../../keymaps';
8
- import { separatorStyles, buttonGroupStyle } from '@atlaskit/editor-common/styles';
9
- import ToolbarButton, { TOOLBAR_BUTTON } from '../../../../ui/ToolbarButton';
10
- import { undoRedoMessages } from '@atlaskit/editor-common/messages';
11
- import { undoFromToolbar, redoFromToolbar } from '../../commands';
12
- import { getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
13
- const closeTypeAheadAndRunCommand = (editorView, api) => command => {
14
- var _api$typeAhead, _api$typeAhead$action;
15
- if (!editorView) {
16
- return;
17
- }
18
- if (api !== null && api !== void 0 && (_api$typeAhead = api.typeAhead) !== null && _api$typeAhead !== void 0 && (_api$typeAhead$action = _api$typeAhead.actions) !== null && _api$typeAhead$action !== void 0 && _api$typeAhead$action.isOpen(editorView.state)) {
19
- var _api$typeAhead2, _api$typeAhead2$actio;
20
- api === null || api === void 0 ? void 0 : (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 ? void 0 : (_api$typeAhead2$actio = _api$typeAhead2.actions) === null || _api$typeAhead2$actio === void 0 ? void 0 : _api$typeAhead2$actio.close({
21
- attachCommand: command,
22
- insertCurrentQueryAsRawText: false
23
- });
24
- } else {
25
- command(editorView.state, editorView.dispatch);
26
- }
27
- };
28
- const forceFocus = (editorView, api) => command => {
29
- closeTypeAheadAndRunCommand(editorView, api)(command);
30
- if (!editorView.hasFocus()) {
31
- editorView.focus();
32
- }
33
- };
34
- export const ToolbarUndoRedo = ({
35
- disabled,
36
- isReducedSpacing,
37
- editorView,
38
- api,
39
- intl: {
40
- formatMessage
41
- }
42
- }) => {
43
- const {
44
- historyState
45
- } = useSharedPluginState(api, ['history']);
46
- const handleUndo = () => {
47
- forceFocus(editorView, api)(undoFromToolbar);
48
- };
49
- const handleRedo = () => {
50
- forceFocus(editorView, api)(redoFromToolbar);
51
- };
52
- const labelUndo = formatMessage(undoRedoMessages.undo);
53
- const labelRedo = formatMessage(undoRedoMessages.redo);
54
- const {
55
- canUndo,
56
- canRedo
57
- } = historyState !== null && historyState !== void 0 ? historyState : {};
58
- return jsx("span", {
59
- css: buttonGroupStyle
60
- }, jsx(ToolbarButton, {
61
- buttonId: TOOLBAR_BUTTON.UNDO,
62
- spacing: isReducedSpacing ? 'none' : 'default',
63
- onClick: handleUndo,
64
- disabled: !canUndo || disabled,
65
- "aria-label": tooltip(undoKeymap, labelUndo),
66
- "aria-keyshortcuts": getAriaKeyshortcuts(undoKeymap),
67
- title: jsx(ToolTipContent, {
68
- description: labelUndo,
69
- keymap: undoKeymap
70
- }),
71
- iconBefore: jsx(UndoIcon, {
72
- label: ""
73
- }),
74
- testId: "ak-editor-toolbar-button-undo"
75
- }), jsx(ToolbarButton, {
76
- spacing: isReducedSpacing ? 'none' : 'default',
77
- buttonId: TOOLBAR_BUTTON.REDO,
78
- onClick: handleRedo,
79
- disabled: !canRedo || disabled,
80
- title: jsx(ToolTipContent, {
81
- description: labelRedo,
82
- keymap: redoKeymap
83
- }),
84
- iconBefore: jsx(RedoIcon, {
85
- label: ""
86
- }),
87
- testId: "ak-editor-toolbar-button-redo",
88
- "aria-label": tooltip(redoKeymap, labelRedo),
89
- "aria-keyshortcuts": getAriaKeyshortcuts(redoKeymap)
90
- }), jsx("span", {
91
- css: separatorStyles
92
- }));
93
- };
94
- export default injectIntl(ToolbarUndoRedo);
@@ -1,24 +0,0 @@
1
- import { findSupportedNodeForBreakout } from '../utils/find-breakout-node';
2
- import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
3
- export function removeBreakout() {
4
- return function (state, dispatch) {
5
- var node = findSupportedNodeForBreakout(state.selection);
6
- if (!node) {
7
- return false;
8
- }
9
- var marks = node.node.marks.filter(function (m) {
10
- return m.type.name !== 'breakout';
11
- });
12
- var tr = state.tr.setNodeMarkup(node.pos, node.node.type, node.node.attrs, marks);
13
- tr.setMeta('scrollIntoView', false);
14
- if (state.selection instanceof NodeSelection) {
15
- if (state.selection.$anchor.pos === node.pos) {
16
- tr.setSelection(NodeSelection.create(tr.doc, node.pos));
17
- }
18
- }
19
- if (dispatch) {
20
- dispatch(tr);
21
- }
22
- return true;
23
- };
24
- }
@@ -1,23 +0,0 @@
1
- import { findSupportedNodeForBreakout } from '../utils/find-breakout-node';
2
- import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
3
- export function setBreakoutMode(mode) {
4
- return function (state, dispatch) {
5
- var node = findSupportedNodeForBreakout(state.selection);
6
- if (!node) {
7
- return false;
8
- }
9
- var tr = state.tr.setNodeMarkup(node.pos, node.node.type, node.node.attrs, [state.schema.marks.breakout.create({
10
- mode: mode
11
- })]);
12
- tr.setMeta('scrollIntoView', false);
13
- if (state.selection instanceof NodeSelection) {
14
- if (state.selection.$anchor.pos === node.pos) {
15
- tr.setSelection(NodeSelection.create(tr.doc, node.pos));
16
- }
17
- }
18
- if (dispatch) {
19
- dispatch(tr);
20
- }
21
- return true;
22
- };
23
- }
@@ -1,211 +0,0 @@
1
- import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
2
- import _createClass from "@babel/runtime/helpers/createClass";
3
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
4
- 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; }
5
- 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; }
6
- import React from 'react';
7
- import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
8
- import { breakout } from '@atlaskit/adf-schema';
9
- import { calcBreakoutWidthPx } from '@atlaskit/editor-common/utils';
10
- import LayoutButton from './ui/LayoutButton';
11
- import { pluginKey } from './plugin-key';
12
- import { findSupportedNodeForBreakout } from './utils/find-breakout-node';
13
- import { akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
14
- import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
15
- import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
16
- var BreakoutView = /*#__PURE__*/function () {
17
- function BreakoutView(
18
- /**
19
- * Note: this is actually a PMMark -- however our version
20
- * of the prosemirror and prosemirror types mean using PMNode
21
- * is not problematic.
22
- */
23
- mark, view, pluginInjectionApi) {
24
- var _this = this;
25
- _classCallCheck(this, BreakoutView);
26
- _defineProperty(this, "updateWidth", function (widthState) {
27
- // we skip updating the width of breakout nodes if the editorView dom
28
- // element was hidden (to avoid breakout width and button thrashing
29
- // when an editor is hidden, re-rendered and unhidden).
30
- if (widthState === undefined || widthState.width === 0) {
31
- return;
32
- }
33
- var containerStyle = "";
34
- var contentStyle = "";
35
- var breakoutWidthPx = calcBreakoutWidthPx(_this.mark.attrs.mode, widthState.width);
36
- if (widthState.lineLength) {
37
- if (breakoutWidthPx < widthState.lineLength) {
38
- breakoutWidthPx = widthState.lineLength;
39
- }
40
- containerStyle += "\n transform: none;\n display: flex;\n justify-content: center;\n ";
41
-
42
- // There is a delay in the animation because widthState is delayed.
43
- // When the editor goes full width the animation for the editor
44
- // begins and finishes before widthState can update the new dimensions.
45
- contentStyle += "\n min-width: ".concat(breakoutWidthPx, "px;\n transition: min-width 0.5s ").concat(akEditorSwoopCubicBezier, ";\n ");
46
- } else {
47
- // fallback method
48
- // (lineLength is not normally undefined, but might be in e.g. SSR or initial render)
49
- //
50
- // this approach doesn't work well with position: fixed, so
51
- // it breaks things like sticky headers
52
- containerStyle += "width: ".concat(breakoutWidthPx, "px; transform: translateX(-50%); margin-left: 50%;");
53
- }
54
-
55
- // NOTE: This is a hack to ignore mutation since mark NodeView doesn't support
56
- // `ignoreMutation` life-cycle event. @see ED-9947
57
- var viewDomObserver = _this.view.domObserver;
58
- if (viewDomObserver && _this.view.dom) {
59
- viewDomObserver.stop();
60
- setTimeout(function () {
61
- viewDomObserver.start();
62
- }, 0);
63
- }
64
- if (typeof _this.dom.style.cssText !== 'undefined') {
65
- _this.dom.style.cssText = containerStyle;
66
- _this.contentDOM.style.cssText = contentStyle;
67
- } else {
68
- _this.dom.setAttribute('style', containerStyle);
69
- _this.contentDOM.setAttribute('style', contentStyle);
70
- }
71
- });
72
- var contentDOM = document.createElement('div');
73
- contentDOM.className = BreakoutCssClassName.BREAKOUT_MARK_DOM;
74
- var dom = document.createElement('div');
75
- dom.className = BreakoutCssClassName.BREAKOUT_MARK;
76
- dom.setAttribute('data-layout', mark.attrs.mode);
77
- dom.appendChild(contentDOM);
78
- this.dom = dom;
79
- this.mark = mark;
80
- this.view = view;
81
- this.contentDOM = contentDOM;
82
- this.unsubscribe = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.width.sharedState.onChange(function (_ref) {
83
- var nextSharedState = _ref.nextSharedState;
84
- return _this.updateWidth(nextSharedState);
85
- });
86
- this.updateWidth(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.width.sharedState.currentState());
87
- }
88
- _createClass(BreakoutView, [{
89
- key: "destroy",
90
- value:
91
- // NOTE: Lifecycle events doesn't work for mark NodeView. So currently this is a no-op.
92
- // @see https://github.com/ProseMirror/prosemirror/issues/1082
93
- function destroy() {
94
- var _this$unsubscribe;
95
- (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 || _this$unsubscribe.call(this);
96
- }
97
- }]);
98
- return BreakoutView;
99
- }();
100
- function shouldPluginStateUpdate(newBreakoutNode, currentBreakoutNode) {
101
- if (newBreakoutNode && currentBreakoutNode) {
102
- return newBreakoutNode !== currentBreakoutNode;
103
- }
104
- return newBreakoutNode || currentBreakoutNode ? true : false;
105
- }
106
- function createPlugin(pluginInjectionApi, _ref2) {
107
- var dispatch = _ref2.dispatch;
108
- return new SafePlugin({
109
- state: {
110
- init: function init() {
111
- return {
112
- breakoutNode: undefined
113
- };
114
- },
115
- apply: function apply(tr, pluginState) {
116
- var breakoutNode = findSupportedNodeForBreakout(tr.selection);
117
- if (shouldPluginStateUpdate(breakoutNode, pluginState.breakoutNode)) {
118
- var nextPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
119
- breakoutNode: breakoutNode
120
- });
121
- dispatch(pluginKey, nextPluginState);
122
- return nextPluginState;
123
- }
124
- return pluginState;
125
- }
126
- },
127
- key: pluginKey,
128
- props: {
129
- nodeViews: {
130
- // Note: When we upgrade to prosemirror 1.27.2 -- we should
131
- // move this to markViews.
132
- // See the following link for more details:
133
- // https://prosemirror.net/docs/ref/#view.EditorProps.nodeViews.
134
- breakout: function breakout(mark, view) {
135
- return new BreakoutView(mark, view, pluginInjectionApi);
136
- }
137
- }
138
- }
139
- });
140
- }
141
- var LayoutButtonWrapper = function LayoutButtonWrapper(_ref3) {
142
- var _breakoutState$breako, _breakoutState$breako2;
143
- var api = _ref3.api,
144
- editorView = _ref3.editorView,
145
- boundariesElement = _ref3.boundariesElement,
146
- scrollableElement = _ref3.scrollableElement,
147
- mountPoint = _ref3.mountPoint;
148
- // Re-render with `width` (but don't use state) due to https://bitbucket.org/atlassian/%7Bc8e2f021-38d2-46d0-9b7a-b3f7b428f724%7D/pull-requests/24272
149
- var _useSharedPluginState = useSharedPluginState(api, ['width', 'breakout']),
150
- breakoutState = _useSharedPluginState.breakoutState;
151
- return /*#__PURE__*/React.createElement(LayoutButton, {
152
- editorView: editorView,
153
- mountPoint: mountPoint,
154
- boundariesElement: boundariesElement,
155
- scrollableElement: scrollableElement,
156
- node: (_breakoutState$breako = breakoutState === null || breakoutState === void 0 || (_breakoutState$breako2 = breakoutState.breakoutNode) === null || _breakoutState$breako2 === void 0 ? void 0 : _breakoutState$breako2.node) !== null && _breakoutState$breako !== void 0 ? _breakoutState$breako : null
157
- });
158
- };
159
- var breakoutPlugin = function breakoutPlugin(_ref4) {
160
- var options = _ref4.config,
161
- api = _ref4.api;
162
- return {
163
- name: 'breakout',
164
- pmPlugins: function pmPlugins() {
165
- return [{
166
- name: 'breakout',
167
- plugin: function plugin(props) {
168
- return createPlugin(api, props);
169
- }
170
- }];
171
- },
172
- marks: function marks() {
173
- return [{
174
- name: 'breakout',
175
- mark: breakout
176
- }];
177
- },
178
- getSharedState: function getSharedState(editorState) {
179
- if (!editorState) {
180
- return {
181
- breakoutNode: undefined
182
- };
183
- }
184
- var pluginState = pluginKey.getState(editorState);
185
- if (!pluginState) {
186
- return {
187
- breakoutNode: undefined
188
- };
189
- }
190
- return pluginState;
191
- },
192
- contentComponent: function contentComponent(_ref5) {
193
- var editorView = _ref5.editorView,
194
- popupsMountPoint = _ref5.popupsMountPoint,
195
- popupsBoundariesElement = _ref5.popupsBoundariesElement,
196
- popupsScrollableElement = _ref5.popupsScrollableElement;
197
- // This is a bit crappy, but should be resolved once we move to a static schema.
198
- if (options && !options.allowBreakoutButton) {
199
- return null;
200
- }
201
- return /*#__PURE__*/React.createElement(LayoutButtonWrapper, {
202
- api: api,
203
- mountPoint: popupsMountPoint,
204
- editorView: editorView,
205
- boundariesElement: popupsBoundariesElement,
206
- scrollableElement: popupsScrollableElement
207
- });
208
- }
209
- };
210
- };
211
- export default breakoutPlugin;
@@ -1,5 +0,0 @@
1
- import { PluginKey } from '@atlaskit/editor-prosemirror/state';
2
- export var pluginKey = new PluginKey('breakoutPlugin');
3
- export var getPluginState = function getPluginState(state) {
4
- return pluginKey.getState(state) || undefined;
5
- };
@@ -1 +0,0 @@
1
- export {};