@atlaskit/editor-plugin-help-dialog 1.0.1 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/.eslintrc.js +4 -0
  2. package/CHANGELOG.md +16 -0
  3. package/dist/cjs/ui/HelpDialogLoader.js +2 -2
  4. package/dist/cjs/ui/index.js +13 -4
  5. package/dist/cjs/ui/styles.js +9 -10
  6. package/dist/es2019/ui/index.js +8 -3
  7. package/dist/es2019/ui/styles.js +15 -16
  8. package/dist/esm/ui/index.js +12 -3
  9. package/dist/esm/ui/styles.js +7 -8
  10. package/package.json +7 -4
package/.eslintrc.js CHANGED
@@ -4,5 +4,9 @@ module.exports = {
4
4
  '@typescript-eslint/no-explicit-any': 'error',
5
5
  '@atlaskit/design-system/consistent-css-prop-usage': 'warn',
6
6
  '@repo/internal/dom-events/no-unsafe-event-listeners': 'warn',
7
+ '@atlaskit/design-system/ensure-design-token-usage/preview': [
8
+ 'error',
9
+ { domains: ['spacing'], shouldEnforceFallbacks: false },
10
+ ],
7
11
  },
8
12
  };
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/editor-plugin-help-dialog
2
2
 
3
+ ## 1.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#77222](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/77222) [`b924ab2b79f3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b924ab2b79f3) - [ux] Add keyboard shortcuts for center and right text alignment
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies
12
+
13
+ ## 1.0.2
14
+
15
+ ### Patch Changes
16
+
17
+ - [#73177](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/73177) [`22452599ed8f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/22452599ed8f) - Move styling for certain packages to tokens.
18
+
3
19
  ## 1.0.1
4
20
 
5
21
  ### Patch Changes
package/dist/cjs/ui/HelpDialogLoader.js CHANGED
@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.HelpDialogLoader = void 0;
8
8
  var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
9
9
  var _reactLoadable = _interopRequireDefault(require("react-loadable"));
10
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
11
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || (0, _typeof2.default)(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
10
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
11
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
12
12
  var HelpDialogLoader = exports.HelpDialogLoader = (0, _reactLoadable.default)({
13
13
  loader: function loader() {
14
14
  return Promise.resolve().then(function () {
package/dist/cjs/ui/index.js CHANGED
@@ -21,8 +21,8 @@ var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
21
21
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
22
22
  var _commands = require("../commands");
23
23
  var _styles = require("./styles");
24
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
25
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
24
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
25
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
26
26
  /** @jsx jsx */
27
27
 
28
28
  var navigationKeymaps = function navigationKeymaps(_ref) {
@@ -300,10 +300,19 @@ var formatting = exports.formatting = function formatting(_ref2) {
300
300
  keymap: function keymap() {
301
301
  return _keymaps.alignLeft;
302
302
  }
303
+ }].concat((0, _toConsumableArray2.default)((0, _platformFeatureFlags.getBooleanFF)('platform.editor.text-alignment-keyboard-shortcuts') ? [{
304
+ name: formatMessage(_messages.alignmentMessages.alignCenter),
305
+ type: 'alignment',
306
+ keymap: function keymap() {
307
+ return _keymaps.alignCenter;
308
+ }
303
309
  }, {
304
310
  name: formatMessage(_messages.alignmentMessages.alignRight),
305
- type: 'alignment'
306
- }];
311
+ type: 'alignment',
312
+ keymap: function keymap() {
313
+ return _keymaps.alignRight;
314
+ }
315
+ }] : []));
307
316
  };
308
317
  var shortcutNamesWithoutKeymap = ['emoji', 'mention', 'quickInsert'];
309
318
  var otherFormatting = function otherFormatting(_ref3) {
package/dist/cjs/ui/styles.js CHANGED
@@ -11,14 +11,13 @@ var _react = require("@emotion/react");
11
11
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
12
12
  var _colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
13
13
  var colors = _colors;
14
- var _constants = require("@atlaskit/theme/constants");
15
14
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
16
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
17
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
18
- var header = exports.header = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n z-index: ", ";\n min-height: 24px;\n padding: ", " ", ";\n font-size: ", ";\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-shadow: 'none';\n color: ", ";\n background-color: ", ";\n border-radius: ", "px;\n"])), _editorSharedStyles.akEditorUnitZIndex, "var(--ds-space-250, 20px)", "var(--ds-space-500, 40px)", (0, _editorSharedStyles.relativeFontSizeToBase16)(24), "var(--ds-text, ".concat(colors.N400, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N0, ")"), (0, _constants.borderRadius)());
19
- var footer = exports.footer = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n z-index: ", ";\n font-size: ", ";\n line-height: 20px;\n color: ", ";\n padding: ", ";\n text-align: right;\n box-shadow: 'none';\n"])), _editorSharedStyles.akEditorUnitZIndex, (0, _editorSharedStyles.relativeFontSizeToBase16)(14), "var(--ds-text-subtlest, ".concat(colors.N300, ")"), "var(--ds-space-300, 24px)");
20
- var contentWrapper = exports.contentWrapper = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n padding: ", " 44px;\n border-bottom-right-radius: ", "px;\n overflow: auto;\n position: relative;\n color: ", ";\n background-color: ", ";\n"])), "var(--ds-space-250, 20px)", (0, _constants.borderRadius)(), "var(--ds-text-subtle, ".concat(colors.N400, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N0, ")"));
21
- var line = exports.line = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n background: ", ";\n content: '';\n display: block;\n height: 2px;\n left: 0;\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n min-width: 604px;\n"])), "var(--ds-background-neutral-subtle, #fff)");
15
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
16
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
17
+ var header = exports.header = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n z-index: ", ";\n min-height: ", ";\n padding: ", " ", ";\n font-size: ", ";\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-shadow: 'none';\n color: ", ";\n background-color: ", ";\n border-radius: ", ";\n"])), _editorSharedStyles.akEditorUnitZIndex, "var(--ds-space-300, 24px)", "var(--ds-space-250, 20px)", "var(--ds-space-500, 40px)", (0, _editorSharedStyles.relativeFontSizeToBase16)(24), "var(--ds-text, ".concat(colors.N400, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N0, ")"), "var(--ds-border-radius, 3px)");
18
+ var footer = exports.footer = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n z-index: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n padding: ", ";\n text-align: right;\n box-shadow: 'none';\n"])), _editorSharedStyles.akEditorUnitZIndex, (0, _editorSharedStyles.relativeFontSizeToBase16)(14), "var(--ds-space-250, 20px)", "var(--ds-text-subtlest, ".concat(colors.N300, ")"), "var(--ds-space-300, 24px)");
19
+ var contentWrapper = exports.contentWrapper = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n padding: ", " ", ";\n border-bottom-right-radius: ", ";\n overflow: auto;\n position: relative;\n color: ", ";\n background-color: ", ";\n"])), "var(--ds-space-250, 20px)", "var(--ds-space-500, 40px)", "var(--ds-border-radius, 3px)", "var(--ds-text-subtle, ".concat(colors.N400, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N0, ")"));
20
+ var line = exports.line = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n background: ", ";\n content: '';\n display: block;\n height: ", ";\n left: 0;\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n min-width: 604px;\n"])), "var(--ds-background-neutral-subtle, #fff)", "var(--ds-space-025, 2px)");
22
21
  var content = exports.content = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n min-width: 524px;\n width: 100%;\n position: relative;\n display: flex;\n justify-content: space-between;\n"])));
23
22
  var column = exports.column = {
24
23
  width: '44%',
@@ -45,8 +44,8 @@ var title = exports.title = {
45
44
  lineHeight: 1.42857142857143
46
45
  }
47
46
  };
48
- var codeSm = exports.codeSm = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n border-radius: ", "px;\n width: 24px;\n display: inline-block;\n height: 24px;\n line-height: 24px;\n text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), (0, _constants.borderRadius)());
49
- var codeMd = exports.codeMd = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n border-radius: ", "px;\n display: inline-block;\n height: 24px;\n line-height: 24px;\n width: 50px;\n text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), (0, _constants.borderRadius)());
50
- var codeLg = exports.codeLg = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n border-radius: ", "px;\n display: inline-block;\n height: 24px;\n line-height: 24px;\n padding: 0 10px;\n text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), (0, _constants.borderRadius)());
47
+ var codeSm = exports.codeSm = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n border-radius: ", ";\n width: ", ";\n display: inline-block;\n height: ", ";\n line-height: 24px;\n text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), "var(--ds-border-radius, 3px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
48
+ var codeMd = exports.codeMd = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n border-radius: ", ";\n display: inline-block;\n height: ", ";\n line-height: 24px;\n width: 50px;\n text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), "var(--ds-border-radius, 3px)", "var(--ds-space-300, 24px)");
49
+ var codeLg = exports.codeLg = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n border-radius: ", ";\n display: inline-block;\n height: ", ";\n line-height: ", ";\n padding: 0 ", ";\n text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), "var(--ds-border-radius, 3px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-150, 12px)");
51
50
  var shortcutsArray = exports.shortcutsArray = (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n gap: ", ";\n"])), "var(--ds-space-150, 12px)");
52
51
  var componentFromKeymapWrapperStyles = exports.componentFromKeymapWrapperStyles = (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n flex-shrink: 0;\n"])));
package/dist/es2019/ui/index.js CHANGED
@@ -4,7 +4,7 @@ import { useCallback, useEffect } from 'react';
4
4
  import { jsx } from '@emotion/react';
5
5
  import { FormattedMessage, injectIntl } from 'react-intl-next';
6
6
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
7
- import { addInlineComment, addLink, alignLeft, clearFormatting, decreaseMediaSize, focusTableResizer, increaseMediaSize, insertRule, navToEditorToolbar, navToFloatingToolbar, openHelp, pastePlainText, redo, setNormalText, toggleBlockQuote, toggleBold, toggleBulletList, toggleCode, toggleHeading1, toggleHeading2, toggleHeading3, toggleHeading4, toggleHeading5, toggleHeading6, toggleItalic, toggleOrderedList, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleTaskItemCheckbox, toggleUnderline, undo } from '@atlaskit/editor-common/keymaps';
7
+ import { addInlineComment, addLink, alignCenter, alignLeft, alignRight, clearFormatting, decreaseMediaSize, focusTableResizer, increaseMediaSize, insertRule, navToEditorToolbar, navToFloatingToolbar, openHelp, pastePlainText, redo, setNormalText, toggleBlockQuote, toggleBold, toggleBulletList, toggleCode, toggleHeading1, toggleHeading2, toggleHeading3, toggleHeading4, toggleHeading5, toggleHeading6, toggleItalic, toggleOrderedList, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleTaskItemCheckbox, toggleUnderline, undo } from '@atlaskit/editor-common/keymaps';
8
8
  import { alignmentMessages, annotationMessages, blockTypeMessages, listMessages, helpDialogMessages as messages, toolbarInsertBlockMessages, toolbarMessages, undoRedoMessages } from '@atlaskit/editor-common/messages';
9
9
  import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
10
10
  import { browser } from '@atlaskit/editor-common/utils';
@@ -203,10 +203,15 @@ export const formatting = ({
203
203
  name: formatMessage(alignmentMessages.alignLeft),
204
204
  type: 'alignment',
205
205
  keymap: () => alignLeft
206
+ }, ...(getBooleanFF('platform.editor.text-alignment-keyboard-shortcuts') ? [{
207
+ name: formatMessage(alignmentMessages.alignCenter),
208
+ type: 'alignment',
209
+ keymap: () => alignCenter
206
210
  }, {
207
211
  name: formatMessage(alignmentMessages.alignRight),
208
- type: 'alignment'
209
- }];
212
+ type: 'alignment',
213
+ keymap: () => alignRight
214
+ }] : [])];
210
215
  const shortcutNamesWithoutKeymap = ['emoji', 'mention', 'quickInsert'];
211
216
  const otherFormatting = ({
212
217
  formatMessage
package/dist/es2019/ui/styles.js CHANGED
@@ -2,10 +2,9 @@ import { css } from '@emotion/react';
2
2
  import { akEditorUnitZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
3
3
  import * as colors from '@atlaskit/theme/colors';
4
4
  import { N400 } from '@atlaskit/theme/colors';
5
- import { borderRadius } from '@atlaskit/theme/constants';
6
5
  export const header = css`
7
6
  z-index: ${akEditorUnitZIndex};
8
- min-height: 24px;
7
+ min-height: ${"var(--ds-space-300, 24px)"};
9
8
  padding: ${"var(--ds-space-250, 20px)"} ${"var(--ds-space-500, 40px)"};
10
9
  font-size: ${relativeFontSizeToBase16(24)};
11
10
  display: flex;
@@ -14,20 +13,20 @@ export const header = css`
14
13
  box-shadow: 'none';
15
14
  color: ${`var(--ds-text, ${colors.N400})`};
16
15
  background-color: ${`var(--ds-background-neutral-subtle, ${colors.N0})`};
17
- border-radius: ${borderRadius()}px;
16
+ border-radius: ${"var(--ds-border-radius, 3px)"};
18
17
  `;
19
18
  export const footer = css`
20
19
  z-index: ${akEditorUnitZIndex};
21
20
  font-size: ${relativeFontSizeToBase16(14)};
22
- line-height: 20px;
21
+ line-height: ${"var(--ds-space-250, 20px)"};
23
22
  color: ${`var(--ds-text-subtlest, ${colors.N300})`};
24
23
  padding: ${"var(--ds-space-300, 24px)"};
25
24
  text-align: right;
26
25
  box-shadow: 'none';
27
26
  `;
28
27
  export const contentWrapper = css`
29
- padding: ${"var(--ds-space-250, 20px)"} 44px;
30
- border-bottom-right-radius: ${borderRadius()}px;
28
+ padding: ${"var(--ds-space-250, 20px)"} ${"var(--ds-space-500, 40px)"};
29
+ border-bottom-right-radius: ${"var(--ds-border-radius, 3px)"};
31
30
  overflow: auto;
32
31
  position: relative;
33
32
  color: ${`var(--ds-text-subtle, ${colors.N400})`};
@@ -37,7 +36,7 @@ export const line = css`
37
36
  background: ${"var(--ds-background-neutral-subtle, #fff)"};
38
37
  content: '';
39
38
  display: block;
40
- height: 2px;
39
+ height: ${"var(--ds-space-025, 2px)"};
41
40
  left: 0;
42
41
  position: absolute;
43
42
  top: 0;
@@ -83,29 +82,29 @@ export const title = {
83
82
  };
84
83
  export const codeSm = css`
85
84
  background-color: ${`var(--ds-background-neutral, ${colors.N20})`};
86
- border-radius: ${borderRadius()}px;
87
- width: 24px;
85
+ border-radius: ${"var(--ds-border-radius, 3px)"};
86
+ width: ${"var(--ds-space-300, 24px)"};
88
87
  display: inline-block;
89
- height: 24px;
88
+ height: ${"var(--ds-space-300, 24px)"};
90
89
  line-height: 24px;
91
90
  text-align: center;
92
91
  `;
93
92
  export const codeMd = css`
94
93
  background-color: ${`var(--ds-background-neutral, ${colors.N20})`};
95
- border-radius: ${borderRadius()}px;
94
+ border-radius: ${"var(--ds-border-radius, 3px)"};
96
95
  display: inline-block;
97
- height: 24px;
96
+ height: ${"var(--ds-space-300, 24px)"};
98
97
  line-height: 24px;
99
98
  width: 50px;
100
99
  text-align: center;
101
100
  `;
102
101
  export const codeLg = css`
103
102
  background-color: ${`var(--ds-background-neutral, ${colors.N20})`};
104
- border-radius: ${borderRadius()}px;
103
+ border-radius: ${"var(--ds-border-radius, 3px)"};
105
104
  display: inline-block;
106
- height: 24px;
107
- line-height: 24px;
108
- padding: 0 10px;
105
+ height: ${"var(--ds-space-300, 24px)"};
106
+ line-height: ${"var(--ds-space-300, 24px)"};
107
+ padding: 0 ${"var(--ds-space-150, 12px)"};
109
108
  text-align: center;
110
109
  `;
111
110
  export const shortcutsArray = css`
package/dist/esm/ui/index.js CHANGED
@@ -5,7 +5,7 @@ import { useCallback, useEffect } from 'react';
5
5
  import { jsx } from '@emotion/react';
6
6
  import { FormattedMessage, injectIntl } from 'react-intl-next';
7
7
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
8
- import { addInlineComment, addLink, alignLeft, clearFormatting, decreaseMediaSize, focusTableResizer, increaseMediaSize, insertRule, navToEditorToolbar, navToFloatingToolbar, openHelp, pastePlainText, redo, setNormalText, toggleBlockQuote, toggleBold, toggleBulletList, toggleCode, toggleHeading1, toggleHeading2, toggleHeading3, toggleHeading4, toggleHeading5, toggleHeading6, toggleItalic, toggleOrderedList, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleTaskItemCheckbox, toggleUnderline, undo } from '@atlaskit/editor-common/keymaps';
8
+ import { addInlineComment, addLink, alignCenter, alignLeft, alignRight, clearFormatting, decreaseMediaSize, focusTableResizer, increaseMediaSize, insertRule, navToEditorToolbar, navToFloatingToolbar, openHelp, pastePlainText, redo, setNormalText, toggleBlockQuote, toggleBold, toggleBulletList, toggleCode, toggleHeading1, toggleHeading2, toggleHeading3, toggleHeading4, toggleHeading5, toggleHeading6, toggleItalic, toggleOrderedList, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleTaskItemCheckbox, toggleUnderline, undo } from '@atlaskit/editor-common/keymaps';
9
9
  import { alignmentMessages, annotationMessages, blockTypeMessages, listMessages, helpDialogMessages as messages, toolbarInsertBlockMessages, toolbarMessages, undoRedoMessages } from '@atlaskit/editor-common/messages';
10
10
  import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
11
11
  import { browser } from '@atlaskit/editor-common/utils';
@@ -289,10 +289,19 @@ export var formatting = function formatting(_ref2) {
289
289
  keymap: function keymap() {
290
290
  return alignLeft;
291
291
  }
292
+ }].concat(_toConsumableArray(getBooleanFF('platform.editor.text-alignment-keyboard-shortcuts') ? [{
293
+ name: formatMessage(alignmentMessages.alignCenter),
294
+ type: 'alignment',
295
+ keymap: function keymap() {
296
+ return alignCenter;
297
+ }
292
298
  }, {
293
299
  name: formatMessage(alignmentMessages.alignRight),
294
- type: 'alignment'
295
- }];
300
+ type: 'alignment',
301
+ keymap: function keymap() {
302
+ return alignRight;
303
+ }
304
+ }] : []));
296
305
  };
297
306
  var shortcutNamesWithoutKeymap = ['emoji', 'mention', 'quickInsert'];
298
307
  var otherFormatting = function otherFormatting(_ref3) {
package/dist/esm/ui/styles.js CHANGED
@@ -4,11 +4,10 @@ import { css } from '@emotion/react';
4
4
  import { akEditorUnitZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
5
5
  import * as colors from '@atlaskit/theme/colors';
6
6
  import { N400 } from '@atlaskit/theme/colors';
7
- import { borderRadius } from '@atlaskit/theme/constants';
8
- export var header = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n z-index: ", ";\n min-height: 24px;\n padding: ", " ", ";\n font-size: ", ";\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-shadow: 'none';\n color: ", ";\n background-color: ", ";\n border-radius: ", "px;\n"])), akEditorUnitZIndex, "var(--ds-space-250, 20px)", "var(--ds-space-500, 40px)", relativeFontSizeToBase16(24), "var(--ds-text, ".concat(colors.N400, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N0, ")"), borderRadius());
9
- export var footer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n z-index: ", ";\n font-size: ", ";\n line-height: 20px;\n color: ", ";\n padding: ", ";\n text-align: right;\n box-shadow: 'none';\n"])), akEditorUnitZIndex, relativeFontSizeToBase16(14), "var(--ds-text-subtlest, ".concat(colors.N300, ")"), "var(--ds-space-300, 24px)");
10
- export var contentWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n padding: ", " 44px;\n border-bottom-right-radius: ", "px;\n overflow: auto;\n position: relative;\n color: ", ";\n background-color: ", ";\n"])), "var(--ds-space-250, 20px)", borderRadius(), "var(--ds-text-subtle, ".concat(colors.N400, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N0, ")"));
11
- export var line = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n background: ", ";\n content: '';\n display: block;\n height: 2px;\n left: 0;\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n min-width: 604px;\n"])), "var(--ds-background-neutral-subtle, #fff)");
7
+ export var header = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n z-index: ", ";\n min-height: ", ";\n padding: ", " ", ";\n font-size: ", ";\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-shadow: 'none';\n color: ", ";\n background-color: ", ";\n border-radius: ", ";\n"])), akEditorUnitZIndex, "var(--ds-space-300, 24px)", "var(--ds-space-250, 20px)", "var(--ds-space-500, 40px)", relativeFontSizeToBase16(24), "var(--ds-text, ".concat(colors.N400, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N0, ")"), "var(--ds-border-radius, 3px)");
8
+ export var footer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n z-index: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n padding: ", ";\n text-align: right;\n box-shadow: 'none';\n"])), akEditorUnitZIndex, relativeFontSizeToBase16(14), "var(--ds-space-250, 20px)", "var(--ds-text-subtlest, ".concat(colors.N300, ")"), "var(--ds-space-300, 24px)");
9
+ export var contentWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n padding: ", " ", ";\n border-bottom-right-radius: ", ";\n overflow: auto;\n position: relative;\n color: ", ";\n background-color: ", ";\n"])), "var(--ds-space-250, 20px)", "var(--ds-space-500, 40px)", "var(--ds-border-radius, 3px)", "var(--ds-text-subtle, ".concat(colors.N400, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N0, ")"));
10
+ export var line = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n background: ", ";\n content: '';\n display: block;\n height: ", ";\n left: 0;\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n min-width: 604px;\n"])), "var(--ds-background-neutral-subtle, #fff)", "var(--ds-space-025, 2px)");
12
11
  export var content = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n min-width: 524px;\n width: 100%;\n position: relative;\n display: flex;\n justify-content: space-between;\n"])));
13
12
  export var column = {
14
13
  width: '44%',
@@ -35,8 +34,8 @@ export var title = {
35
34
  lineHeight: 1.42857142857143
36
35
  }
37
36
  };
38
- export var codeSm = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n background-color: ", ";\n border-radius: ", "px;\n width: 24px;\n display: inline-block;\n height: 24px;\n line-height: 24px;\n text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), borderRadius());
39
- export var codeMd = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n background-color: ", ";\n border-radius: ", "px;\n display: inline-block;\n height: 24px;\n line-height: 24px;\n width: 50px;\n text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), borderRadius());
40
- export var codeLg = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n background-color: ", ";\n border-radius: ", "px;\n display: inline-block;\n height: 24px;\n line-height: 24px;\n padding: 0 10px;\n text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), borderRadius());
37
+ export var codeSm = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n background-color: ", ";\n border-radius: ", ";\n width: ", ";\n display: inline-block;\n height: ", ";\n line-height: 24px;\n text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), "var(--ds-border-radius, 3px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
38
+ export var codeMd = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n background-color: ", ";\n border-radius: ", ";\n display: inline-block;\n height: ", ";\n line-height: 24px;\n width: 50px;\n text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), "var(--ds-border-radius, 3px)", "var(--ds-space-300, 24px)");
39
+ export var codeLg = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n background-color: ", ";\n border-radius: ", ";\n display: inline-block;\n height: ", ";\n line-height: ", ";\n padding: 0 ", ";\n text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), "var(--ds-border-radius, 3px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-150, 12px)");
41
40
  export var shortcutsArray = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n gap: ", ";\n"])), "var(--ds-space-150, 12px)");
42
41
  export var componentFromKeymapWrapperStyles = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n flex-shrink: 0;\n"])));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-help-dialog",
3
- "version": "1.0.1",
3
+ "version": "1.1.0",
4
4
  "description": "Help Dialog plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -32,16 +32,16 @@
32
32
  ".": "./src/index.ts"
33
33
  },
34
34
  "dependencies": {
35
- "@atlaskit/editor-common": "^78.0.0",
35
+ "@atlaskit/editor-common": "^78.12.0",
36
36
  "@atlaskit/editor-plugin-analytics": "^1.0.0",
37
37
  "@atlaskit/editor-plugin-quick-insert": "^1.0.0",
38
38
  "@atlaskit/editor-prosemirror": "3.0.0",
39
39
  "@atlaskit/editor-shared-styles": "^2.9.0",
40
- "@atlaskit/icon": "^22.0.0",
40
+ "@atlaskit/icon": "^22.1.0",
41
41
  "@atlaskit/modal-dialog": "^12.10.0",
42
42
  "@atlaskit/platform-feature-flags": "^0.2.5",
43
43
  "@atlaskit/theme": "^12.6.0",
44
- "@atlaskit/tokens": "^1.37.0",
44
+ "@atlaskit/tokens": "^1.41.0",
45
45
  "@babel/runtime": "^7.0.0",
46
46
  "@emotion/react": "^11.7.1",
47
47
  "react-intl-next": "npm:react-intl@^5.18.1",
@@ -96,6 +96,9 @@
96
96
  },
97
97
  "platform.editor.a11y-table-resizing_uapcv": {
98
98
  "type": "boolean"
99
+ },
100
+ "platform.editor.text-alignment-keyboard-shortcuts": {
101
+ "type": "boolean"
99
102
  }
100
103
  }
101
104
  }