@atlaskit/editor-core 190.1.7 → 190.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/afm-cc/tsconfig.json +3 -0
- package/dist/cjs/plugins/index.js +0 -7
- package/dist/cjs/presets/universal.js +2 -1
- package/dist/cjs/ui/Addon/ClickAreaInline/index.js +1 -1
- package/dist/cjs/utils/action.js +0 -28
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/plugins/index.js +0 -1
- package/dist/es2019/presets/universal.js +2 -1
- package/dist/es2019/ui/Addon/ClickAreaInline/index.js +1 -1
- package/dist/es2019/utils/action.js +0 -28
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/plugins/index.js +0 -1
- package/dist/esm/presets/universal.js +2 -1
- package/dist/esm/ui/Addon/ClickAreaInline/index.js +1 -1
- package/dist/esm/utils/action.js +0 -28
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/types/plugins/index.d.ts +0 -1
- package/dist/types/utils/action.d.ts +0 -6
- package/dist/types-ts4.5/plugins/index.d.ts +0 -1
- package/dist/types-ts4.5/utils/action.d.ts +0 -6
- package/package.json +2 -1
- package/dist/cjs/commands/index.js +0 -42
- package/dist/cjs/plugins/alignment/commands/index.js +0 -36
- package/dist/cjs/plugins/alignment/index.js +0 -70
- package/dist/cjs/plugins/alignment/pm-plugins/keymap.js +0 -14
- package/dist/cjs/plugins/alignment/pm-plugins/main.js +0 -45
- package/dist/cjs/plugins/alignment/pm-plugins/types.js +0 -5
- package/dist/cjs/plugins/alignment/ui/ToolbarAlignment/icon-map.js +0 -36
- package/dist/cjs/plugins/alignment/ui/ToolbarAlignment/index.js +0 -169
- package/dist/cjs/plugins/alignment/ui/ToolbarAlignment/messages.js +0 -29
- package/dist/cjs/plugins/alignment/ui/ToolbarAlignment/styles.js +0 -13
- package/dist/cjs/plugins/alignment/utils/index.js +0 -27
- package/dist/cjs/ui/Alignment/AlignmentButton/index.js +0 -71
- package/dist/cjs/ui/Alignment/index.js +0 -74
- package/dist/cjs/ui/Alignment/styles.js +0 -11
- package/dist/es2019/commands/index.js +0 -1
- package/dist/es2019/plugins/alignment/commands/index.js +0 -30
- package/dist/es2019/plugins/alignment/index.js +0 -58
- package/dist/es2019/plugins/alignment/pm-plugins/keymap.js +0 -8
- package/dist/es2019/plugins/alignment/pm-plugins/main.js +0 -34
- package/dist/es2019/plugins/alignment/pm-plugins/types.js +0 -1
- package/dist/es2019/plugins/alignment/ui/ToolbarAlignment/icon-map.js +0 -30
- package/dist/es2019/plugins/alignment/ui/ToolbarAlignment/index.js +0 -140
- package/dist/es2019/plugins/alignment/ui/ToolbarAlignment/messages.js +0 -23
- package/dist/es2019/plugins/alignment/ui/ToolbarAlignment/styles.js +0 -14
- package/dist/es2019/plugins/alignment/utils/index.js +0 -15
- package/dist/es2019/ui/Alignment/AlignmentButton/index.js +0 -44
- package/dist/es2019/ui/Alignment/index.js +0 -54
- package/dist/es2019/ui/Alignment/styles.js +0 -7
- package/dist/esm/commands/index.js +0 -1
- package/dist/esm/plugins/alignment/commands/index.js +0 -30
- package/dist/esm/plugins/alignment/index.js +0 -63
- package/dist/esm/plugins/alignment/pm-plugins/keymap.js +0 -8
- package/dist/esm/plugins/alignment/pm-plugins/main.js +0 -36
- package/dist/esm/plugins/alignment/pm-plugins/types.js +0 -1
- package/dist/esm/plugins/alignment/ui/ToolbarAlignment/icon-map.js +0 -29
- package/dist/esm/plugins/alignment/ui/ToolbarAlignment/index.js +0 -163
- package/dist/esm/plugins/alignment/ui/ToolbarAlignment/messages.js +0 -23
- package/dist/esm/plugins/alignment/ui/ToolbarAlignment/styles.js +0 -6
- package/dist/esm/plugins/alignment/utils/index.js +0 -21
- package/dist/esm/ui/Alignment/AlignmentButton/index.js +0 -62
- package/dist/esm/ui/Alignment/index.js +0 -68
- package/dist/esm/ui/Alignment/styles.js +0 -4
- package/dist/types/commands/index.d.ts +0 -1
- package/dist/types/plugins/alignment/commands/index.d.ts +0 -4
- package/dist/types/plugins/alignment/index.d.ts +0 -5
- package/dist/types/plugins/alignment/pm-plugins/keymap.d.ts +0 -2
- package/dist/types/plugins/alignment/pm-plugins/main.d.ts +0 -8
- package/dist/types/plugins/alignment/pm-plugins/types.d.ts +0 -5
- package/dist/types/plugins/alignment/ui/ToolbarAlignment/icon-map.d.ts +0 -6
- package/dist/types/plugins/alignment/ui/ToolbarAlignment/index.d.ts +0 -33
- package/dist/types/plugins/alignment/ui/ToolbarAlignment/messages.d.ts +0 -22
- package/dist/types/plugins/alignment/ui/ToolbarAlignment/styles.d.ts +0 -3
- package/dist/types/plugins/alignment/utils/index.d.ts +0 -3
- package/dist/types/ui/Alignment/AlignmentButton/index.d.ts +0 -17
- package/dist/types/ui/Alignment/index.d.ts +0 -12
- package/dist/types/ui/Alignment/styles.d.ts +0 -1
- package/dist/types-ts4.5/commands/index.d.ts +0 -1
- package/dist/types-ts4.5/plugins/alignment/commands/index.d.ts +0 -4
- package/dist/types-ts4.5/plugins/alignment/index.d.ts +0 -5
- package/dist/types-ts4.5/plugins/alignment/pm-plugins/keymap.d.ts +0 -2
- package/dist/types-ts4.5/plugins/alignment/pm-plugins/main.d.ts +0 -8
- package/dist/types-ts4.5/plugins/alignment/pm-plugins/types.d.ts +0 -5
- package/dist/types-ts4.5/plugins/alignment/ui/ToolbarAlignment/icon-map.d.ts +0 -6
- package/dist/types-ts4.5/plugins/alignment/ui/ToolbarAlignment/index.d.ts +0 -33
- package/dist/types-ts4.5/plugins/alignment/ui/ToolbarAlignment/messages.d.ts +0 -22
- package/dist/types-ts4.5/plugins/alignment/ui/ToolbarAlignment/styles.d.ts +0 -3
- package/dist/types-ts4.5/plugins/alignment/utils/index.d.ts +0 -3
- package/dist/types-ts4.5/ui/Alignment/AlignmentButton/index.d.ts +0 -17
- package/dist/types-ts4.5/ui/Alignment/index.d.ts +0 -12
- package/dist/types-ts4.5/ui/Alignment/styles.d.ts +0 -1
|
@@ -1,140 +0,0 @@
|
|
|
1
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
-
/** @jsx jsx */
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import { jsx } from '@emotion/react';
|
|
5
|
-
import { injectIntl } from 'react-intl-next';
|
|
6
|
-
import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
|
|
7
|
-
import ToolbarButton from '../../../../ui/ToolbarButton';
|
|
8
|
-
import { ArrowKeyNavigationType, DropdownContainer as Dropdown } from '@atlaskit/editor-common/ui-menu';
|
|
9
|
-
import Alignment from '../../../../ui/Alignment';
|
|
10
|
-
import { expandIconWrapper, triggerWrapper, wrapper } from './styles';
|
|
11
|
-
import { separatorStyles } from '@atlaskit/editor-common/styles';
|
|
12
|
-
import { IconMap } from './icon-map';
|
|
13
|
-
import { messages } from './messages';
|
|
14
|
-
export class AlignmentToolbar extends React.Component {
|
|
15
|
-
constructor(...args) {
|
|
16
|
-
super(...args);
|
|
17
|
-
_defineProperty(this, "toolbarItemRef", /*#__PURE__*/React.createRef());
|
|
18
|
-
_defineProperty(this, "state", {
|
|
19
|
-
isOpen: false
|
|
20
|
-
});
|
|
21
|
-
_defineProperty(this, "changeAlignment", (align, togglePopup) => {
|
|
22
|
-
if (togglePopup) {
|
|
23
|
-
this.toggleOpen();
|
|
24
|
-
}
|
|
25
|
-
return this.props.changeAlignment(align);
|
|
26
|
-
});
|
|
27
|
-
_defineProperty(this, "toggleOpen", () => {
|
|
28
|
-
this.setState({
|
|
29
|
-
isOpen: !this.state.isOpen
|
|
30
|
-
});
|
|
31
|
-
});
|
|
32
|
-
_defineProperty(this, "toggleOpenByKeyboard", event => {
|
|
33
|
-
if (event.key === 'Enter' || event.key === ' ') {
|
|
34
|
-
event.preventDefault();
|
|
35
|
-
this.setState({
|
|
36
|
-
isOpen: !this.state.isOpen
|
|
37
|
-
});
|
|
38
|
-
}
|
|
39
|
-
});
|
|
40
|
-
_defineProperty(this, "hide", attrs => {
|
|
41
|
-
if (this.state.isOpen) {
|
|
42
|
-
this.setState({
|
|
43
|
-
isOpen: false
|
|
44
|
-
});
|
|
45
|
-
if ((attrs === null || attrs === void 0 ? void 0 : attrs.event) instanceof KeyboardEvent && attrs.event.key === 'Escape') {
|
|
46
|
-
var _this$toolbarItemRef, _this$toolbarItemRef$;
|
|
47
|
-
(_this$toolbarItemRef = this.toolbarItemRef) === null || _this$toolbarItemRef === void 0 ? void 0 : (_this$toolbarItemRef$ = _this$toolbarItemRef.current) === null || _this$toolbarItemRef$ === void 0 ? void 0 : _this$toolbarItemRef$.focus();
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
});
|
|
51
|
-
_defineProperty(this, "hideOnEscape", () => {
|
|
52
|
-
var _this$toolbarItemRef2, _this$toolbarItemRef3;
|
|
53
|
-
this.hide();
|
|
54
|
-
(_this$toolbarItemRef2 = this.toolbarItemRef) === null || _this$toolbarItemRef2 === void 0 ? void 0 : (_this$toolbarItemRef3 = _this$toolbarItemRef2.current) === null || _this$toolbarItemRef3 === void 0 ? void 0 : _this$toolbarItemRef3.focus();
|
|
55
|
-
});
|
|
56
|
-
}
|
|
57
|
-
render() {
|
|
58
|
-
const {
|
|
59
|
-
isOpen
|
|
60
|
-
} = this.state;
|
|
61
|
-
const {
|
|
62
|
-
popupsMountPoint,
|
|
63
|
-
popupsBoundariesElement,
|
|
64
|
-
popupsScrollableElement,
|
|
65
|
-
isReducedSpacing,
|
|
66
|
-
pluginState,
|
|
67
|
-
disabled,
|
|
68
|
-
intl
|
|
69
|
-
} = this.props;
|
|
70
|
-
const title = intl.formatMessage(messages.alignment);
|
|
71
|
-
return jsx("span", {
|
|
72
|
-
css: wrapper
|
|
73
|
-
}, jsx(Dropdown, {
|
|
74
|
-
mountTo: popupsMountPoint,
|
|
75
|
-
boundariesElement: popupsBoundariesElement,
|
|
76
|
-
scrollableElement: popupsScrollableElement,
|
|
77
|
-
isOpen: isOpen,
|
|
78
|
-
handleClickOutside: event => {
|
|
79
|
-
if (event instanceof MouseEvent) {
|
|
80
|
-
this.hide({
|
|
81
|
-
isOpen: false,
|
|
82
|
-
event
|
|
83
|
-
});
|
|
84
|
-
}
|
|
85
|
-
},
|
|
86
|
-
handleEscapeKeydown: this.hideOnEscape,
|
|
87
|
-
arrowKeyNavigationProviderOptions: {
|
|
88
|
-
type: ArrowKeyNavigationType.MENU
|
|
89
|
-
},
|
|
90
|
-
fitWidth: 112,
|
|
91
|
-
fitHeight: 80,
|
|
92
|
-
closeOnTab: true,
|
|
93
|
-
trigger: jsx(ToolbarButton, {
|
|
94
|
-
spacing: isReducedSpacing ? 'none' : 'default',
|
|
95
|
-
disabled: disabled,
|
|
96
|
-
selected: isOpen,
|
|
97
|
-
title: title,
|
|
98
|
-
className: "align-btn",
|
|
99
|
-
"aria-label": title,
|
|
100
|
-
"aria-expanded": isOpen,
|
|
101
|
-
"aria-haspopup": true,
|
|
102
|
-
onClick: this.toggleOpen,
|
|
103
|
-
onKeyDown: this.toggleOpenByKeyboard,
|
|
104
|
-
iconBefore: jsx("div", {
|
|
105
|
-
css: triggerWrapper
|
|
106
|
-
}, jsx(IconMap, {
|
|
107
|
-
alignment: pluginState.align
|
|
108
|
-
}), jsx("span", {
|
|
109
|
-
css: expandIconWrapper
|
|
110
|
-
}, jsx(ExpandIcon, {
|
|
111
|
-
label: ""
|
|
112
|
-
}))),
|
|
113
|
-
ref: this.toolbarItemRef
|
|
114
|
-
})
|
|
115
|
-
}, jsx(Alignment, {
|
|
116
|
-
onClick: align => this.changeAlignment(align, false),
|
|
117
|
-
selectedAlignment: pluginState.align
|
|
118
|
-
})), jsx("span", {
|
|
119
|
-
css: separatorStyles
|
|
120
|
-
}));
|
|
121
|
-
}
|
|
122
|
-
componentDidUpdate(prevProps) {
|
|
123
|
-
if (this.state.isOpen) {
|
|
124
|
-
// by triggering the keyboard event with a setTimeout, we ensure that the tooltip
|
|
125
|
-
// associated with the alignment button doesn't render until the next render cycle
|
|
126
|
-
// where the popup will be correctly positioned and the relative position of the tooltip
|
|
127
|
-
// will not overlap with the button.
|
|
128
|
-
setTimeout(() => {
|
|
129
|
-
var _this$toolbarItemRef$2;
|
|
130
|
-
const keyboardEvent = new KeyboardEvent('keydown', {
|
|
131
|
-
bubbles: true,
|
|
132
|
-
key: 'ArrowDown'
|
|
133
|
-
});
|
|
134
|
-
(_this$toolbarItemRef$2 = this.toolbarItemRef.current) === null || _this$toolbarItemRef$2 === void 0 ? void 0 : _this$toolbarItemRef$2.dispatchEvent(keyboardEvent);
|
|
135
|
-
}, 0);
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
_defineProperty(AlignmentToolbar, "displayName", 'AlignmentToolbar');
|
|
140
|
-
export default injectIntl(AlignmentToolbar);
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { defineMessages } from 'react-intl-next';
|
|
2
|
-
export const messages = defineMessages({
|
|
3
|
-
alignment: {
|
|
4
|
-
id: 'fabric.editor.alignment',
|
|
5
|
-
defaultMessage: 'Text alignment',
|
|
6
|
-
description: 'Opens drop down menu of options to configure text alignment'
|
|
7
|
-
},
|
|
8
|
-
alignLeft: {
|
|
9
|
-
id: 'fabric.editor.alignLeft',
|
|
10
|
-
defaultMessage: 'Align left',
|
|
11
|
-
description: 'label stating that text is aligned left'
|
|
12
|
-
},
|
|
13
|
-
alignRight: {
|
|
14
|
-
id: 'fabric.editor.alignRight',
|
|
15
|
-
defaultMessage: 'Align Right',
|
|
16
|
-
description: 'label stating that text is aligned right'
|
|
17
|
-
},
|
|
18
|
-
alignCenter: {
|
|
19
|
-
id: 'fabric.editor.alignCenter',
|
|
20
|
-
defaultMessage: 'Align Center',
|
|
21
|
-
description: 'label stating that text is aligned center'
|
|
22
|
-
}
|
|
23
|
-
});
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { css } from '@emotion/react';
|
|
2
|
-
export const triggerWrapper = css`
|
|
3
|
-
display: flex;
|
|
4
|
-
`;
|
|
5
|
-
export const wrapper = css`
|
|
6
|
-
display: flex;
|
|
7
|
-
align-items: center;
|
|
8
|
-
div {
|
|
9
|
-
display: flex;
|
|
10
|
-
}
|
|
11
|
-
`;
|
|
12
|
-
export const expandIconWrapper = css`
|
|
13
|
-
margin-left: ${"var(--ds-space-negative-100, -8px)"};
|
|
14
|
-
`;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
2
|
-
import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
|
|
3
|
-
export const getActiveAlignment = state => {
|
|
4
|
-
if (state.selection instanceof CellSelection) {
|
|
5
|
-
const marks = [];
|
|
6
|
-
state.selection.forEachCell(cell => {
|
|
7
|
-
const mark = cell.firstChild.marks.filter(mark => mark.type === state.schema.marks.alignment)[0];
|
|
8
|
-
marks.push(mark ? mark.attrs.align : 'start');
|
|
9
|
-
});
|
|
10
|
-
return marks.every(mark => mark === marks[0]) ? marks[0] : 'start';
|
|
11
|
-
}
|
|
12
|
-
const node = findParentNodeOfType([state.schema.nodes.paragraph, state.schema.nodes.heading])(state.selection);
|
|
13
|
-
const getMark = node && node.node.marks.filter(mark => mark.type === state.schema.marks.alignment)[0];
|
|
14
|
-
return getMark && getMark.attrs.align || 'start';
|
|
15
|
-
};
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { PureComponent } from 'react';
|
|
4
|
-
import ToolbarButton from '../../ToolbarButton';
|
|
5
|
-
import { ToolTipContent, tooltip } from '../../../keymaps';
|
|
6
|
-
import { getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
|
|
7
|
-
class AlignmentButton extends PureComponent {
|
|
8
|
-
constructor(...args) {
|
|
9
|
-
super(...args);
|
|
10
|
-
_defineProperty(this, "onClick", e => {
|
|
11
|
-
const {
|
|
12
|
-
onClick,
|
|
13
|
-
value
|
|
14
|
-
} = this.props;
|
|
15
|
-
|
|
16
|
-
// detect if the click event comes from keyboard where screenX and screenY are 0
|
|
17
|
-
const isMouseEvent = e instanceof MouseEvent;
|
|
18
|
-
e.preventDefault();
|
|
19
|
-
onClick(value, isMouseEvent);
|
|
20
|
-
});
|
|
21
|
-
}
|
|
22
|
-
render() {
|
|
23
|
-
const {
|
|
24
|
-
label,
|
|
25
|
-
isSelected,
|
|
26
|
-
content,
|
|
27
|
-
shortcut
|
|
28
|
-
} = this.props;
|
|
29
|
-
return /*#__PURE__*/React.createElement(ToolbarButton, {
|
|
30
|
-
disabled: false,
|
|
31
|
-
selected: isSelected,
|
|
32
|
-
title: /*#__PURE__*/React.createElement(ToolTipContent, {
|
|
33
|
-
description: label,
|
|
34
|
-
keymap: shortcut
|
|
35
|
-
}),
|
|
36
|
-
"aria-label": shortcut ? tooltip(shortcut, label) : label,
|
|
37
|
-
"aria-pressed": isSelected,
|
|
38
|
-
"aria-keyshortcuts": getAriaKeyshortcuts(shortcut),
|
|
39
|
-
onClick: this.onClick,
|
|
40
|
-
iconBefore: content
|
|
41
|
-
});
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
export default AlignmentButton;
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
|
-
import { jsx } from '@emotion/react';
|
|
3
|
-
import { PureComponent } from 'react';
|
|
4
|
-
import { injectIntl } from 'react-intl-next';
|
|
5
|
-
import { IconMap } from '../../plugins/alignment/ui/ToolbarAlignment/icon-map';
|
|
6
|
-
import AlignmentButton from './AlignmentButton';
|
|
7
|
-
import { alignmentMessages } from '@atlaskit/editor-common/messages';
|
|
8
|
-
import { alignmentWrapper } from './styles';
|
|
9
|
-
import { alignLeft } from '../../keymaps';
|
|
10
|
-
const alignmentOptions = [{
|
|
11
|
-
title: alignmentMessages.alignLeft,
|
|
12
|
-
shortcut: alignLeft,
|
|
13
|
-
value: 'start'
|
|
14
|
-
}, {
|
|
15
|
-
title: alignmentMessages.alignCenter,
|
|
16
|
-
value: 'center'
|
|
17
|
-
}, {
|
|
18
|
-
title: alignmentMessages.alignRight,
|
|
19
|
-
value: 'end'
|
|
20
|
-
}];
|
|
21
|
-
class Alignment extends PureComponent {
|
|
22
|
-
render() {
|
|
23
|
-
const {
|
|
24
|
-
onClick,
|
|
25
|
-
selectedAlignment,
|
|
26
|
-
className,
|
|
27
|
-
intl
|
|
28
|
-
} = this.props;
|
|
29
|
-
return jsx("div", {
|
|
30
|
-
"data-testid": "alignment-buttons",
|
|
31
|
-
css: alignmentWrapper,
|
|
32
|
-
className: className
|
|
33
|
-
}, alignmentOptions.map(alignment => {
|
|
34
|
-
const {
|
|
35
|
-
value,
|
|
36
|
-
title,
|
|
37
|
-
shortcut
|
|
38
|
-
} = alignment;
|
|
39
|
-
const message = intl.formatMessage(title);
|
|
40
|
-
return jsx(AlignmentButton, {
|
|
41
|
-
content: jsx(IconMap, {
|
|
42
|
-
alignment: value
|
|
43
|
-
}),
|
|
44
|
-
key: value,
|
|
45
|
-
value: value,
|
|
46
|
-
label: message,
|
|
47
|
-
shortcut: shortcut,
|
|
48
|
-
onClick: onClick,
|
|
49
|
-
isSelected: value === selectedAlignment
|
|
50
|
-
});
|
|
51
|
-
}));
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
export default injectIntl(Alignment);
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { addParagraphAtEnd, createParagraphAtEnd, changeImageAlignment, createToggleBlockMarkOnRange, toggleBlockMark, clearEditorContent } from '@atlaskit/editor-common/commands';
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { toggleBlockMark, changeImageAlignment } from '../../../commands';
|
|
2
|
-
import { cascadeCommands } from '../../../utils/action';
|
|
3
|
-
export var isAlignable = function isAlignable(align) {
|
|
4
|
-
return function (state, dispatch) {
|
|
5
|
-
var _state$schema = state.schema,
|
|
6
|
-
_state$schema$nodes = _state$schema.nodes,
|
|
7
|
-
paragraph = _state$schema$nodes.paragraph,
|
|
8
|
-
heading = _state$schema$nodes.heading,
|
|
9
|
-
alignment = _state$schema.marks.alignment;
|
|
10
|
-
return toggleBlockMark(alignment, function () {
|
|
11
|
-
return !align ? undefined : align === 'start' ? false : {
|
|
12
|
-
align: align
|
|
13
|
-
};
|
|
14
|
-
}, [paragraph, heading])(state, dispatch);
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
|
-
export var changeAlignment = function changeAlignment(align) {
|
|
18
|
-
return function (state, dispatch) {
|
|
19
|
-
var _state$schema2 = state.schema,
|
|
20
|
-
_state$schema2$nodes = _state$schema2.nodes,
|
|
21
|
-
paragraph = _state$schema2$nodes.paragraph,
|
|
22
|
-
heading = _state$schema2$nodes.heading,
|
|
23
|
-
alignment = _state$schema2.marks.alignment;
|
|
24
|
-
return cascadeCommands([changeImageAlignment(align), toggleBlockMark(alignment, function () {
|
|
25
|
-
return !align ? undefined : align === 'start' ? false : {
|
|
26
|
-
align: align
|
|
27
|
-
};
|
|
28
|
-
}, [paragraph, heading])])(state, dispatch);
|
|
29
|
-
};
|
|
30
|
-
};
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { alignment } from '@atlaskit/adf-schema';
|
|
3
|
-
import WithPluginState from '../../ui/WithPluginState';
|
|
4
|
-
import { pluginKey, createPlugin } from './pm-plugins/main';
|
|
5
|
-
import { changeAlignment as _changeAlignment } from './commands';
|
|
6
|
-
import ToolbarAlignment from './ui/ToolbarAlignment';
|
|
7
|
-
import { keymapPlugin } from './pm-plugins/keymap';
|
|
8
|
-
export var defaultConfig = {
|
|
9
|
-
align: 'start'
|
|
10
|
-
};
|
|
11
|
-
var alignmentPlugin = function alignmentPlugin() {
|
|
12
|
-
return {
|
|
13
|
-
name: 'alignment',
|
|
14
|
-
marks: function marks() {
|
|
15
|
-
return [{
|
|
16
|
-
name: 'alignment',
|
|
17
|
-
mark: alignment
|
|
18
|
-
}];
|
|
19
|
-
},
|
|
20
|
-
pmPlugins: function pmPlugins() {
|
|
21
|
-
return [{
|
|
22
|
-
name: 'alignmentPlugin',
|
|
23
|
-
plugin: function plugin(_ref) {
|
|
24
|
-
var dispatch = _ref.dispatch;
|
|
25
|
-
return createPlugin(dispatch, defaultConfig);
|
|
26
|
-
}
|
|
27
|
-
}, {
|
|
28
|
-
name: 'annotationKeymap',
|
|
29
|
-
plugin: function plugin() {
|
|
30
|
-
return keymapPlugin();
|
|
31
|
-
}
|
|
32
|
-
}];
|
|
33
|
-
},
|
|
34
|
-
primaryToolbarComponent: function primaryToolbarComponent(_ref2) {
|
|
35
|
-
var editorView = _ref2.editorView,
|
|
36
|
-
popupsMountPoint = _ref2.popupsMountPoint,
|
|
37
|
-
popupsBoundariesElement = _ref2.popupsBoundariesElement,
|
|
38
|
-
popupsScrollableElement = _ref2.popupsScrollableElement,
|
|
39
|
-
disabled = _ref2.disabled,
|
|
40
|
-
isToolbarReducedSpacing = _ref2.isToolbarReducedSpacing;
|
|
41
|
-
return /*#__PURE__*/React.createElement(WithPluginState, {
|
|
42
|
-
plugins: {
|
|
43
|
-
align: pluginKey
|
|
44
|
-
},
|
|
45
|
-
render: function render(_ref3) {
|
|
46
|
-
var align = _ref3.align;
|
|
47
|
-
return /*#__PURE__*/React.createElement(ToolbarAlignment, {
|
|
48
|
-
pluginState: align,
|
|
49
|
-
isReducedSpacing: isToolbarReducedSpacing,
|
|
50
|
-
changeAlignment: function changeAlignment(align) {
|
|
51
|
-
return _changeAlignment(align)(editorView.state, editorView.dispatch);
|
|
52
|
-
},
|
|
53
|
-
disabled: disabled || !align.isEnabled,
|
|
54
|
-
popupsMountPoint: popupsMountPoint,
|
|
55
|
-
popupsBoundariesElement: popupsBoundariesElement,
|
|
56
|
-
popupsScrollableElement: popupsScrollableElement
|
|
57
|
-
});
|
|
58
|
-
}
|
|
59
|
-
});
|
|
60
|
-
}
|
|
61
|
-
};
|
|
62
|
-
};
|
|
63
|
-
export default alignmentPlugin;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { keymap } from '@atlaskit/editor-prosemirror/keymap';
|
|
2
|
-
import { bindKeymapWithCommand, alignLeft } from '../../../keymaps';
|
|
3
|
-
import { changeAlignment } from '../commands';
|
|
4
|
-
export function keymapPlugin() {
|
|
5
|
-
var list = {};
|
|
6
|
-
bindKeymapWithCommand(alignLeft.common, changeAlignment('start'), list);
|
|
7
|
-
return keymap(list);
|
|
8
|
-
}
|
|
@@ -1,36 +0,0 @@
|
|
|
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 { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
5
|
-
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
6
|
-
import { isAlignable } from '../commands';
|
|
7
|
-
import { getActiveAlignment } from '../utils';
|
|
8
|
-
export function createInitialPluginState(editorState, pluginConfig) {
|
|
9
|
-
return {
|
|
10
|
-
align: getActiveAlignment(editorState) || pluginConfig.align,
|
|
11
|
-
isEnabled: true
|
|
12
|
-
};
|
|
13
|
-
}
|
|
14
|
-
export var pluginKey = new PluginKey('alignmentPlugin');
|
|
15
|
-
export function createPlugin(dispatch, pluginConfig) {
|
|
16
|
-
return new SafePlugin({
|
|
17
|
-
key: pluginKey,
|
|
18
|
-
state: {
|
|
19
|
-
init: function init(_config, editorState) {
|
|
20
|
-
return createInitialPluginState(editorState, pluginConfig);
|
|
21
|
-
},
|
|
22
|
-
apply: function apply(_tr, state, _prevState, nextState) {
|
|
23
|
-
var nextPluginState = getActiveAlignment(nextState);
|
|
24
|
-
var isEnabled = isAlignable(nextPluginState)(nextState);
|
|
25
|
-
var newState = _objectSpread(_objectSpread({}, state), {}, {
|
|
26
|
-
align: nextPluginState,
|
|
27
|
-
isEnabled: isEnabled
|
|
28
|
-
});
|
|
29
|
-
if (nextPluginState !== state.align || isEnabled !== state.isEnabled) {
|
|
30
|
-
dispatch(pluginKey, newState);
|
|
31
|
-
}
|
|
32
|
-
return newState;
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
});
|
|
36
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import EditorAlignLeftIcon from '@atlaskit/icon/glyph/editor/align-left';
|
|
2
|
-
import EditorAlignRightIcon from '@atlaskit/icon/glyph/editor/align-right';
|
|
3
|
-
import EditorAlignCenterIcon from '@atlaskit/icon/glyph/editor/align-center';
|
|
4
|
-
import { useIntl } from 'react-intl-next';
|
|
5
|
-
import { messages } from './messages';
|
|
6
|
-
import React from 'react';
|
|
7
|
-
var iconAndMessageMap = {
|
|
8
|
-
start: {
|
|
9
|
-
Component: EditorAlignLeftIcon,
|
|
10
|
-
label: messages.alignLeft
|
|
11
|
-
},
|
|
12
|
-
end: {
|
|
13
|
-
Component: EditorAlignRightIcon,
|
|
14
|
-
label: messages.alignRight
|
|
15
|
-
},
|
|
16
|
-
center: {
|
|
17
|
-
Component: EditorAlignCenterIcon,
|
|
18
|
-
label: messages.alignCenter
|
|
19
|
-
}
|
|
20
|
-
};
|
|
21
|
-
export var IconMap = function IconMap(props) {
|
|
22
|
-
var _iconAndMessageMap$pr = iconAndMessageMap[props.alignment],
|
|
23
|
-
Component = _iconAndMessageMap$pr.Component,
|
|
24
|
-
label = _iconAndMessageMap$pr.label;
|
|
25
|
-
var intl = useIntl();
|
|
26
|
-
return /*#__PURE__*/React.createElement(Component, {
|
|
27
|
-
label: intl.formatMessage(label)
|
|
28
|
-
});
|
|
29
|
-
};
|
|
@@ -1,163 +0,0 @@
|
|
|
1
|
-
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
2
|
-
import _createClass from "@babel/runtime/helpers/createClass";
|
|
3
|
-
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
|
|
4
|
-
import _inherits from "@babel/runtime/helpers/inherits";
|
|
5
|
-
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
6
|
-
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
7
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
8
|
-
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); }; }
|
|
9
|
-
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; } }
|
|
10
|
-
/** @jsx jsx */
|
|
11
|
-
import React from 'react';
|
|
12
|
-
import { jsx } from '@emotion/react';
|
|
13
|
-
import { injectIntl } from 'react-intl-next';
|
|
14
|
-
import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
|
|
15
|
-
import ToolbarButton from '../../../../ui/ToolbarButton';
|
|
16
|
-
import { ArrowKeyNavigationType, DropdownContainer as Dropdown } from '@atlaskit/editor-common/ui-menu';
|
|
17
|
-
import Alignment from '../../../../ui/Alignment';
|
|
18
|
-
import { expandIconWrapper, triggerWrapper, wrapper } from './styles';
|
|
19
|
-
import { separatorStyles } from '@atlaskit/editor-common/styles';
|
|
20
|
-
import { IconMap } from './icon-map';
|
|
21
|
-
import { messages } from './messages';
|
|
22
|
-
export var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
|
|
23
|
-
_inherits(AlignmentToolbar, _React$Component);
|
|
24
|
-
var _super = _createSuper(AlignmentToolbar);
|
|
25
|
-
function AlignmentToolbar() {
|
|
26
|
-
var _this;
|
|
27
|
-
_classCallCheck(this, AlignmentToolbar);
|
|
28
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
29
|
-
args[_key] = arguments[_key];
|
|
30
|
-
}
|
|
31
|
-
_this = _super.call.apply(_super, [this].concat(args));
|
|
32
|
-
_defineProperty(_assertThisInitialized(_this), "toolbarItemRef", /*#__PURE__*/React.createRef());
|
|
33
|
-
_defineProperty(_assertThisInitialized(_this), "state", {
|
|
34
|
-
isOpen: false
|
|
35
|
-
});
|
|
36
|
-
_defineProperty(_assertThisInitialized(_this), "changeAlignment", function (align, togglePopup) {
|
|
37
|
-
if (togglePopup) {
|
|
38
|
-
_this.toggleOpen();
|
|
39
|
-
}
|
|
40
|
-
return _this.props.changeAlignment(align);
|
|
41
|
-
});
|
|
42
|
-
_defineProperty(_assertThisInitialized(_this), "toggleOpen", function () {
|
|
43
|
-
_this.setState({
|
|
44
|
-
isOpen: !_this.state.isOpen
|
|
45
|
-
});
|
|
46
|
-
});
|
|
47
|
-
_defineProperty(_assertThisInitialized(_this), "toggleOpenByKeyboard", function (event) {
|
|
48
|
-
if (event.key === 'Enter' || event.key === ' ') {
|
|
49
|
-
event.preventDefault();
|
|
50
|
-
_this.setState({
|
|
51
|
-
isOpen: !_this.state.isOpen
|
|
52
|
-
});
|
|
53
|
-
}
|
|
54
|
-
});
|
|
55
|
-
_defineProperty(_assertThisInitialized(_this), "hide", function (attrs) {
|
|
56
|
-
if (_this.state.isOpen) {
|
|
57
|
-
_this.setState({
|
|
58
|
-
isOpen: false
|
|
59
|
-
});
|
|
60
|
-
if ((attrs === null || attrs === void 0 ? void 0 : attrs.event) instanceof KeyboardEvent && attrs.event.key === 'Escape') {
|
|
61
|
-
var _this$toolbarItemRef;
|
|
62
|
-
(_this$toolbarItemRef = _this.toolbarItemRef) === null || _this$toolbarItemRef === void 0 || (_this$toolbarItemRef = _this$toolbarItemRef.current) === null || _this$toolbarItemRef === void 0 || _this$toolbarItemRef.focus();
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
});
|
|
66
|
-
_defineProperty(_assertThisInitialized(_this), "hideOnEscape", function () {
|
|
67
|
-
var _this$toolbarItemRef2;
|
|
68
|
-
_this.hide();
|
|
69
|
-
(_this$toolbarItemRef2 = _this.toolbarItemRef) === null || _this$toolbarItemRef2 === void 0 || (_this$toolbarItemRef2 = _this$toolbarItemRef2.current) === null || _this$toolbarItemRef2 === void 0 || _this$toolbarItemRef2.focus();
|
|
70
|
-
});
|
|
71
|
-
return _this;
|
|
72
|
-
}
|
|
73
|
-
_createClass(AlignmentToolbar, [{
|
|
74
|
-
key: "render",
|
|
75
|
-
value: function render() {
|
|
76
|
-
var _this2 = this;
|
|
77
|
-
var isOpen = this.state.isOpen;
|
|
78
|
-
var _this$props = this.props,
|
|
79
|
-
popupsMountPoint = _this$props.popupsMountPoint,
|
|
80
|
-
popupsBoundariesElement = _this$props.popupsBoundariesElement,
|
|
81
|
-
popupsScrollableElement = _this$props.popupsScrollableElement,
|
|
82
|
-
isReducedSpacing = _this$props.isReducedSpacing,
|
|
83
|
-
pluginState = _this$props.pluginState,
|
|
84
|
-
disabled = _this$props.disabled,
|
|
85
|
-
intl = _this$props.intl;
|
|
86
|
-
var title = intl.formatMessage(messages.alignment);
|
|
87
|
-
return jsx("span", {
|
|
88
|
-
css: wrapper
|
|
89
|
-
}, jsx(Dropdown, {
|
|
90
|
-
mountTo: popupsMountPoint,
|
|
91
|
-
boundariesElement: popupsBoundariesElement,
|
|
92
|
-
scrollableElement: popupsScrollableElement,
|
|
93
|
-
isOpen: isOpen,
|
|
94
|
-
handleClickOutside: function handleClickOutside(event) {
|
|
95
|
-
if (event instanceof MouseEvent) {
|
|
96
|
-
_this2.hide({
|
|
97
|
-
isOpen: false,
|
|
98
|
-
event: event
|
|
99
|
-
});
|
|
100
|
-
}
|
|
101
|
-
},
|
|
102
|
-
handleEscapeKeydown: this.hideOnEscape,
|
|
103
|
-
arrowKeyNavigationProviderOptions: {
|
|
104
|
-
type: ArrowKeyNavigationType.MENU
|
|
105
|
-
},
|
|
106
|
-
fitWidth: 112,
|
|
107
|
-
fitHeight: 80,
|
|
108
|
-
closeOnTab: true,
|
|
109
|
-
trigger: jsx(ToolbarButton, {
|
|
110
|
-
spacing: isReducedSpacing ? 'none' : 'default',
|
|
111
|
-
disabled: disabled,
|
|
112
|
-
selected: isOpen,
|
|
113
|
-
title: title,
|
|
114
|
-
className: "align-btn",
|
|
115
|
-
"aria-label": title,
|
|
116
|
-
"aria-expanded": isOpen,
|
|
117
|
-
"aria-haspopup": true,
|
|
118
|
-
onClick: this.toggleOpen,
|
|
119
|
-
onKeyDown: this.toggleOpenByKeyboard,
|
|
120
|
-
iconBefore: jsx("div", {
|
|
121
|
-
css: triggerWrapper
|
|
122
|
-
}, jsx(IconMap, {
|
|
123
|
-
alignment: pluginState.align
|
|
124
|
-
}), jsx("span", {
|
|
125
|
-
css: expandIconWrapper
|
|
126
|
-
}, jsx(ExpandIcon, {
|
|
127
|
-
label: ""
|
|
128
|
-
}))),
|
|
129
|
-
ref: this.toolbarItemRef
|
|
130
|
-
})
|
|
131
|
-
}, jsx(Alignment, {
|
|
132
|
-
onClick: function onClick(align) {
|
|
133
|
-
return _this2.changeAlignment(align, false);
|
|
134
|
-
},
|
|
135
|
-
selectedAlignment: pluginState.align
|
|
136
|
-
})), jsx("span", {
|
|
137
|
-
css: separatorStyles
|
|
138
|
-
}));
|
|
139
|
-
}
|
|
140
|
-
}, {
|
|
141
|
-
key: "componentDidUpdate",
|
|
142
|
-
value: function componentDidUpdate(prevProps) {
|
|
143
|
-
var _this3 = this;
|
|
144
|
-
if (this.state.isOpen) {
|
|
145
|
-
// by triggering the keyboard event with a setTimeout, we ensure that the tooltip
|
|
146
|
-
// associated with the alignment button doesn't render until the next render cycle
|
|
147
|
-
// where the popup will be correctly positioned and the relative position of the tooltip
|
|
148
|
-
// will not overlap with the button.
|
|
149
|
-
setTimeout(function () {
|
|
150
|
-
var _this3$toolbarItemRef;
|
|
151
|
-
var keyboardEvent = new KeyboardEvent('keydown', {
|
|
152
|
-
bubbles: true,
|
|
153
|
-
key: 'ArrowDown'
|
|
154
|
-
});
|
|
155
|
-
(_this3$toolbarItemRef = _this3.toolbarItemRef.current) === null || _this3$toolbarItemRef === void 0 || _this3$toolbarItemRef.dispatchEvent(keyboardEvent);
|
|
156
|
-
}, 0);
|
|
157
|
-
}
|
|
158
|
-
}
|
|
159
|
-
}]);
|
|
160
|
-
return AlignmentToolbar;
|
|
161
|
-
}(React.Component);
|
|
162
|
-
_defineProperty(AlignmentToolbar, "displayName", 'AlignmentToolbar');
|
|
163
|
-
export default injectIntl(AlignmentToolbar);
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { defineMessages } from 'react-intl-next';
|
|
2
|
-
export var messages = defineMessages({
|
|
3
|
-
alignment: {
|
|
4
|
-
id: 'fabric.editor.alignment',
|
|
5
|
-
defaultMessage: 'Text alignment',
|
|
6
|
-
description: 'Opens drop down menu of options to configure text alignment'
|
|
7
|
-
},
|
|
8
|
-
alignLeft: {
|
|
9
|
-
id: 'fabric.editor.alignLeft',
|
|
10
|
-
defaultMessage: 'Align left',
|
|
11
|
-
description: 'label stating that text is aligned left'
|
|
12
|
-
},
|
|
13
|
-
alignRight: {
|
|
14
|
-
id: 'fabric.editor.alignRight',
|
|
15
|
-
defaultMessage: 'Align Right',
|
|
16
|
-
description: 'label stating that text is aligned right'
|
|
17
|
-
},
|
|
18
|
-
alignCenter: {
|
|
19
|
-
id: 'fabric.editor.alignCenter',
|
|
20
|
-
defaultMessage: 'Align Center',
|
|
21
|
-
description: 'label stating that text is aligned center'
|
|
22
|
-
}
|
|
23
|
-
});
|