@atlaskit/editor-plugin-synced-block 14.0.18 → 14.0.20

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 (11) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/syncedBlockPlugin.js +4 -3
  3. package/dist/cjs/ui/SyncBlockLabel.compiled.css +8 -0
  4. package/dist/cjs/ui/SyncBlockLabel.js +51 -34
  5. package/dist/es2019/syncedBlockPlugin.js +2 -1
  6. package/dist/es2019/ui/SyncBlockLabel.compiled.css +8 -0
  7. package/dist/es2019/ui/SyncBlockLabel.js +47 -36
  8. package/dist/esm/syncedBlockPlugin.js +2 -1
  9. package/dist/esm/ui/SyncBlockLabel.compiled.css +8 -0
  10. package/dist/esm/ui/SyncBlockLabel.js +52 -35
  11. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/editor-plugin-synced-block
2
2
 
3
+ ## 14.0.20
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 14.0.19
10
+
11
+ ### Patch Changes
12
+
13
+ - [`167dc88b2c79c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/167dc88b2c79c) -
14
+ Show unpublished state in synced-block labels and open the publish tooltip from the whole label,
15
+ behind the `editor-synced-block-same-page-sync` experiment
16
+ - Updated dependencies
17
+
3
18
  ## 14.0.18
4
19
 
5
20
  ### Patch Changes
package/dist/cjs/syncedBlockPlugin.js CHANGED
@@ -7,7 +7,8 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.syncedBlockPlugin = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _react = _interopRequireDefault(require("react"));
10
- var _adfSchema = require("@atlaskit/adf-schema");
10
+ var _syncBlock = require("@atlaskit/adf-schema/sync-block");
11
+ var _bodiedSyncBlock = require("@atlaskit/adf-schema/bodied-sync-block");
11
12
  var _hooks = require("@atlaskit/editor-common/hooks");
12
13
  var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
13
14
  var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
@@ -91,10 +92,10 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
91
92
  nodes: function nodes() {
92
93
  return [{
93
94
  name: 'syncBlock',
94
- node: _adfSchema.syncBlock
95
+ node: _syncBlock.syncBlock
95
96
  }, {
96
97
  name: 'bodiedSyncBlock',
97
- node: _adfSchema.bodiedSyncBlock
98
+ node: _bodiedSyncBlock.bodiedSyncBlock
98
99
  }];
99
100
  },
100
101
  pmPlugins: function pmPlugins() {
package/dist/cjs/ui/SyncBlockLabel.compiled.css ADDED
@@ -0,0 +1,8 @@
1
+ ._11c8wadc{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
+ ._18m915vq{overflow-y:hidden}
3
+ ._1bto1l2s{text-overflow:ellipsis}
4
+ ._1o9zidpf{flex-shrink:0}
5
+ ._1reo15vq{overflow-x:hidden}
6
+ ._1ul9idpf{min-width:0}
7
+ ._o5721q9c{white-space:nowrap}
8
+ ._syazazsu{color:var(--ds-text-subtle,#505258)}
package/dist/cjs/ui/SyncBlockLabel.js CHANGED
@@ -1,3 +1,4 @@
1
+ /* SyncBlockLabel.tsx generated by @compiled/babel-plugin v2.0.0 */
1
2
  "use strict";
2
3
 
3
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,13 +7,13 @@ Object.defineProperty(exports, "__esModule", {
6
7
  value: true
7
8
  });
8
9
  exports.SyncBlockLabel = void 0;
10
+ require("./SyncBlockLabel.compiled.css");
11
+ var _runtime = require("@compiled/react/runtime");
9
12
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
13
  var _react = _interopRequireWildcard(require("react"));
11
14
  var _reactIntl = require("react-intl");
12
- var _button = _interopRequireDefault(require("@atlaskit/button/icon/button"));
13
15
  var _messages = require("@atlaskit/editor-common/messages");
14
16
  var _syncBlock = require("@atlaskit/editor-common/sync-block");
15
- var _statusInformation = _interopRequireDefault(require("@atlaskit/icon/core/status-information"));
16
17
  var _blockSynced = _interopRequireDefault(require("@atlaskit/icon-lab/core/block-synced"));
17
18
  var _compiled = require("@atlaskit/primitives/compiled");
18
19
  var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
@@ -21,6 +22,10 @@ var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden/
21
22
  var _time = require("./utils/time");
22
23
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
23
24
  var SyncBlockLabelDataId = 'sync-block-label';
25
+ var styles = {
26
+ truncatedLabelText: "_11c8wadc _1reo15vq _18m915vq _syazazsu _1ul9idpf _1bto1l2s _o5721q9c",
27
+ unpublishedSuffix: "_11c8wadc _syazazsu _1o9zidpf _o5721q9c"
28
+ };
24
29
  var SyncBlockLabelComponent = function SyncBlockLabelComponent(_ref) {
25
30
  var contentUpdatedAt = _ref.contentUpdatedAt,
26
31
  isSource = _ref.isSource,
@@ -66,31 +71,43 @@ var SyncBlockLabelComponent = function SyncBlockLabelComponent(_ref) {
66
71
  setTooltipContent(tooltipContent);
67
72
  }, [contentUpdatedAt, formatMessage, intl, title, tooltipMessage]);
68
73
  var ariaDescribedById = "sync-block-label-description-".concat(localId);
74
+ var unpublishedParenthetical = unpublishedInfo ? formatMessage(_messages.syncBlockMessages.unpublishedInParentheses) : undefined;
69
75
  var getLabelContent = (0, _react.useMemo)(function () {
70
- if (isUnsyncedBlock) {
71
- return /*#__PURE__*/_react.default.createElement(_compiled.Text, {
76
+ // The parenthetical carries a leading space so the accessible name and copied text read as
77
+ // "… (unpublished)". Flex trims it visually, and the label's own gap provides the spacing.
78
+ var renderUnpublishedLabel = function renderUnpublishedLabel(label) {
79
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
80
+ as: "span",
81
+ xcss: styles.truncatedLabelText
82
+ }, label), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
83
+ as: "span",
84
+ xcss: styles.unpublishedSuffix
85
+ }, " ".concat(unpublishedParenthetical)));
86
+ };
87
+ var renderPlainLabel = function renderPlainLabel(label) {
88
+ return unpublishedParenthetical ? renderUnpublishedLabel(label) : /*#__PURE__*/_react.default.createElement(_compiled.Text, {
72
89
  size: "small",
73
90
  color: "color.text.subtle"
74
- }, formatMessage(_messages.syncBlockMessages.unsyncedBlockLabel));
75
- }
76
- if (isSource) {
77
- return /*#__PURE__*/_react.default.createElement(_compiled.Text, {
91
+ }, label);
92
+ };
93
+ var renderTruncatingTitle = function renderTruncatingTitle(label) {
94
+ return unpublishedParenthetical ? renderUnpublishedLabel(label) : /*#__PURE__*/_react.default.createElement(_compiled.Text, {
95
+ maxLines: 1,
78
96
  size: "small",
79
97
  color: "color.text.subtle"
80
- }, formatMessage((0, _expValEquals.expValEquals)('platform_editor_sync_block_activation', 'isEnabled', true) ? _messages.syncBlockMessages.sourceSyncedBlockLabel : _messages.syncBlockMessages.syncedBlockLabel));
98
+ }, label);
99
+ };
100
+ if (isUnsyncedBlock) {
101
+ return renderPlainLabel(formatMessage(_messages.syncBlockMessages.unsyncedBlockLabel));
102
+ }
103
+ if (isSource) {
104
+ return renderPlainLabel(formatMessage((0, _expValEquals.expValEquals)('platform_editor_sync_block_activation', 'isEnabled', true) ? _messages.syncBlockMessages.sourceSyncedBlockLabel : _messages.syncBlockMessages.syncedBlockLabel));
81
105
  }
82
106
  if (!title) {
83
- return /*#__PURE__*/_react.default.createElement(_compiled.Text, {
84
- size: "small",
85
- color: "color.text.subtle"
86
- }, formatMessage(_messages.syncBlockMessages.syncedBlockLabel));
107
+ return renderPlainLabel(formatMessage(_messages.syncBlockMessages.syncedBlockLabel));
87
108
  }
88
- return /*#__PURE__*/_react.default.createElement(_compiled.Text, {
89
- maxLines: 1,
90
- size: "small",
91
- color: "color.text.subtle"
92
- }, title);
93
- }, [formatMessage, isSource, isUnsyncedBlock, title]);
109
+ return renderTruncatingTitle(title);
110
+ }, [formatMessage, isSource, isUnsyncedBlock, title, unpublishedParenthetical]);
94
111
  var unpublishedTooltipLabel = unpublishedInfo ? formatMessage(unpublishedInfo.variant === 'source' ? _messages.syncBlockMessages.unpublishedSourceAvailabilityTooltip : _messages.syncBlockMessages.unpublishedLocalReferenceAvailabilityTooltip, {
95
112
  sourceType: unpublishedInfo.sourceType
96
113
  }) : undefined;
@@ -100,21 +117,24 @@ var SyncBlockLabelComponent = function SyncBlockLabelComponent(_ref) {
100
117
  ,
101
118
  className: _syncBlock.SyncBlockLabelSharedCssClassName.labelClassName,
102
119
  "aria-describedby": isSource || isUnsyncedBlock ? undefined : ariaDescribedById
103
- }, unpublishedTooltipLabel ? /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
104
- position: "top",
105
- content: unpublishedTooltipLabel
106
- }, /*#__PURE__*/_react.default.createElement(_button.default, {
107
- appearance: "subtle",
108
- icon: _statusInformation.default,
109
- label: unpublishedTooltipLabel,
110
- spacing: "compact",
111
- testId: "sync-block-unpublished-information"
112
- })) : null, /*#__PURE__*/_react.default.createElement(_blockSynced.default, {
120
+ }, /*#__PURE__*/_react.default.createElement(_blockSynced.default, {
113
121
  color: "var(--ds-icon-subtle, #505258)",
114
122
  size: "small",
115
123
  label: ""
116
124
  }), getLabelContent);
117
- var labelWithExistingTooltip = isSource || isUnsyncedBlock ? primaryLabel : /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
125
+ var referenceDescription = !isSource && !isUnsyncedBlock && /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, {
126
+ id: ariaDescribedById
127
+ }, (0, _expValEquals.expValEquals)('platform_editor_sync_block_activation', 'isEnabled', true) ? tooltipMessage : tooltipContent);
128
+ if (unpublishedTooltipLabel) {
129
+ return /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
130
+ position: "top",
131
+ content: unpublishedTooltipLabel
132
+ }, primaryLabel, referenceDescription);
133
+ }
134
+ if (isSource || isUnsyncedBlock) {
135
+ return primaryLabel;
136
+ }
137
+ return /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
118
138
  position: "top",
119
139
  content: tooltipContent
120
140
  // workaround because tooltip adds aria-describedby with a new id every time the tooltip is opened
@@ -125,9 +145,6 @@ var SyncBlockLabelComponent = function SyncBlockLabelComponent(_ref) {
125
145
  // using this to ensure that the 'last edited' time is updated when the tooltip is opened
126
146
  ,
127
147
  onShow: updateTooltipContent
128
- }, primaryLabel, /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, {
129
- id: ariaDescribedById
130
- }, (0, _expValEquals.expValEquals)('platform_editor_sync_block_activation', 'isEnabled', true) ? tooltipMessage : tooltipContent));
131
- return labelWithExistingTooltip;
148
+ }, primaryLabel, referenceDescription);
132
149
  };
133
150
  var SyncBlockLabel = exports.SyncBlockLabel = /*#__PURE__*/_react.default.memo(SyncBlockLabelComponent);
package/dist/es2019/syncedBlockPlugin.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
- import { syncBlock, bodiedSyncBlock } from '@atlaskit/adf-schema';
2
+ import { syncBlock } from '@atlaskit/adf-schema/sync-block';
3
+ import { bodiedSyncBlock } from '@atlaskit/adf-schema/bodied-sync-block';
3
4
  import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
4
5
  import { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
5
6
  import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
package/dist/es2019/ui/SyncBlockLabel.compiled.css ADDED
@@ -0,0 +1,8 @@
1
+ ._11c8wadc{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
+ ._18m915vq{overflow-y:hidden}
3
+ ._1bto1l2s{text-overflow:ellipsis}
4
+ ._1o9zidpf{flex-shrink:0}
5
+ ._1reo15vq{overflow-x:hidden}
6
+ ._1ul9idpf{min-width:0}
7
+ ._o5721q9c{white-space:nowrap}
8
+ ._syazazsu{color:var(--ds-text-subtle,#505258)}
package/dist/es2019/ui/SyncBlockLabel.js CHANGED
@@ -1,16 +1,21 @@
1
+ /* SyncBlockLabel.tsx generated by @compiled/babel-plugin v2.0.0 */
2
+ import "./SyncBlockLabel.compiled.css";
3
+ import { ax, ix } from "@compiled/react/runtime";
1
4
  import React, { useCallback, useMemo, useState } from 'react';
2
5
  import { useIntl } from 'react-intl';
3
- import IconButton from '@atlaskit/button/icon/button';
4
6
  import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
5
7
  import { SyncBlockLabelSharedCssClassName } from '@atlaskit/editor-common/sync-block';
6
- import InformationIcon from '@atlaskit/icon/core/status-information';
7
8
  import BlockSyncedIcon from '@atlaskit/icon-lab/core/block-synced';
8
- import { Text } from '@atlaskit/primitives/compiled';
9
+ import { Box, Text } from '@atlaskit/primitives/compiled';
9
10
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
10
11
  import Tooltip from '@atlaskit/tooltip/Tooltip';
11
12
  import VisuallyHidden from '@atlaskit/visually-hidden/visually-hidden';
12
13
  import { formatElapsedTime } from './utils/time';
13
14
  const SyncBlockLabelDataId = 'sync-block-label';
15
+ const styles = {
16
+ truncatedLabelText: "_11c8wadc _1reo15vq _18m915vq _syazazsu _1ul9idpf _1bto1l2s _o5721q9c",
17
+ unpublishedSuffix: "_11c8wadc _syazazsu _1o9zidpf _o5721q9c"
18
+ };
14
19
  const SyncBlockLabelComponent = ({
15
20
  contentUpdatedAt,
16
21
  isSource,
@@ -56,31 +61,37 @@ const SyncBlockLabelComponent = ({
56
61
  setTooltipContent(tooltipContent);
57
62
  }, [contentUpdatedAt, formatMessage, intl, title, tooltipMessage]);
58
63
  const ariaDescribedById = `sync-block-label-description-${localId}`;
64
+ const unpublishedParenthetical = unpublishedInfo ? formatMessage(messages.unpublishedInParentheses) : undefined;
59
65
  const getLabelContent = useMemo(() => {
66
+ // The parenthetical carries a leading space so the accessible name and copied text read as
67
+ // "… (unpublished)". Flex trims it visually, and the label's own gap provides the spacing.
68
+ const renderUnpublishedLabel = label => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
69
+ as: "span",
70
+ xcss: styles.truncatedLabelText
71
+ }, label), /*#__PURE__*/React.createElement(Box, {
72
+ as: "span",
73
+ xcss: styles.unpublishedSuffix
74
+ }, ` ${unpublishedParenthetical}`));
75
+ const renderPlainLabel = label => unpublishedParenthetical ? renderUnpublishedLabel(label) : /*#__PURE__*/React.createElement(Text, {
76
+ size: "small",
77
+ color: "color.text.subtle"
78
+ }, label);
79
+ const renderTruncatingTitle = label => unpublishedParenthetical ? renderUnpublishedLabel(label) : /*#__PURE__*/React.createElement(Text, {
80
+ maxLines: 1,
81
+ size: "small",
82
+ color: "color.text.subtle"
83
+ }, label);
60
84
  if (isUnsyncedBlock) {
61
- return /*#__PURE__*/React.createElement(Text, {
62
- size: "small",
63
- color: "color.text.subtle"
64
- }, formatMessage(messages.unsyncedBlockLabel));
85
+ return renderPlainLabel(formatMessage(messages.unsyncedBlockLabel));
65
86
  }
66
87
  if (isSource) {
67
- return /*#__PURE__*/React.createElement(Text, {
68
- size: "small",
69
- color: "color.text.subtle"
70
- }, formatMessage(expValEquals('platform_editor_sync_block_activation', 'isEnabled', true) ? messages.sourceSyncedBlockLabel : messages.syncedBlockLabel));
88
+ return renderPlainLabel(formatMessage(expValEquals('platform_editor_sync_block_activation', 'isEnabled', true) ? messages.sourceSyncedBlockLabel : messages.syncedBlockLabel));
71
89
  }
72
90
  if (!title) {
73
- return /*#__PURE__*/React.createElement(Text, {
74
- size: "small",
75
- color: "color.text.subtle"
76
- }, formatMessage(messages.syncedBlockLabel));
91
+ return renderPlainLabel(formatMessage(messages.syncedBlockLabel));
77
92
  }
78
- return /*#__PURE__*/React.createElement(Text, {
79
- maxLines: 1,
80
- size: "small",
81
- color: "color.text.subtle"
82
- }, title);
83
- }, [formatMessage, isSource, isUnsyncedBlock, title]);
93
+ return renderTruncatingTitle(title);
94
+ }, [formatMessage, isSource, isUnsyncedBlock, title, unpublishedParenthetical]);
84
95
  const unpublishedTooltipLabel = unpublishedInfo ? formatMessage(unpublishedInfo.variant === 'source' ? messages.unpublishedSourceAvailabilityTooltip : messages.unpublishedLocalReferenceAvailabilityTooltip, {
85
96
  sourceType: unpublishedInfo.sourceType
86
97
  }) : undefined;
@@ -90,21 +101,24 @@ const SyncBlockLabelComponent = ({
90
101
  ,
91
102
  className: SyncBlockLabelSharedCssClassName.labelClassName,
92
103
  "aria-describedby": isSource || isUnsyncedBlock ? undefined : ariaDescribedById
93
- }, unpublishedTooltipLabel ? /*#__PURE__*/React.createElement(Tooltip, {
94
- position: "top",
95
- content: unpublishedTooltipLabel
96
- }, /*#__PURE__*/React.createElement(IconButton, {
97
- appearance: "subtle",
98
- icon: InformationIcon,
99
- label: unpublishedTooltipLabel,
100
- spacing: "compact",
101
- testId: "sync-block-unpublished-information"
102
- })) : null, /*#__PURE__*/React.createElement(BlockSyncedIcon, {
104
+ }, /*#__PURE__*/React.createElement(BlockSyncedIcon, {
103
105
  color: "var(--ds-icon-subtle, #505258)",
104
106
  size: "small",
105
107
  label: ""
106
108
  }), getLabelContent);
107
- const labelWithExistingTooltip = isSource || isUnsyncedBlock ? primaryLabel : /*#__PURE__*/React.createElement(Tooltip, {
109
+ const referenceDescription = !isSource && !isUnsyncedBlock && /*#__PURE__*/React.createElement(VisuallyHidden, {
110
+ id: ariaDescribedById
111
+ }, expValEquals('platform_editor_sync_block_activation', 'isEnabled', true) ? tooltipMessage : tooltipContent);
112
+ if (unpublishedTooltipLabel) {
113
+ return /*#__PURE__*/React.createElement(Tooltip, {
114
+ position: "top",
115
+ content: unpublishedTooltipLabel
116
+ }, primaryLabel, referenceDescription);
117
+ }
118
+ if (isSource || isUnsyncedBlock) {
119
+ return primaryLabel;
120
+ }
121
+ return /*#__PURE__*/React.createElement(Tooltip, {
108
122
  position: "top",
109
123
  content: tooltipContent
110
124
  // workaround because tooltip adds aria-describedby with a new id every time the tooltip is opened
@@ -115,9 +129,6 @@ const SyncBlockLabelComponent = ({
115
129
  // using this to ensure that the 'last edited' time is updated when the tooltip is opened
116
130
  ,
117
131
  onShow: updateTooltipContent
118
- }, primaryLabel, /*#__PURE__*/React.createElement(VisuallyHidden, {
119
- id: ariaDescribedById
120
- }, expValEquals('platform_editor_sync_block_activation', 'isEnabled', true) ? tooltipMessage : tooltipContent));
121
- return labelWithExistingTooltip;
132
+ }, primaryLabel, referenceDescription);
122
133
  };
123
134
  export const SyncBlockLabel = /*#__PURE__*/React.memo(SyncBlockLabelComponent);
package/dist/esm/syncedBlockPlugin.js CHANGED
@@ -2,7 +2,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
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
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
4
  import React from 'react';
5
- import { syncBlock, bodiedSyncBlock } from '@atlaskit/adf-schema';
5
+ import { syncBlock } from '@atlaskit/adf-schema/sync-block';
6
+ import { bodiedSyncBlock } from '@atlaskit/adf-schema/bodied-sync-block';
6
7
  import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
7
8
  import { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
8
9
  import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
package/dist/esm/ui/SyncBlockLabel.compiled.css ADDED
@@ -0,0 +1,8 @@
1
+ ._11c8wadc{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
+ ._18m915vq{overflow-y:hidden}
3
+ ._1bto1l2s{text-overflow:ellipsis}
4
+ ._1o9zidpf{flex-shrink:0}
5
+ ._1reo15vq{overflow-x:hidden}
6
+ ._1ul9idpf{min-width:0}
7
+ ._o5721q9c{white-space:nowrap}
8
+ ._syazazsu{color:var(--ds-text-subtle,#505258)}
package/dist/esm/ui/SyncBlockLabel.js CHANGED
@@ -1,17 +1,22 @@
1
+ /* SyncBlockLabel.tsx generated by @compiled/babel-plugin v2.0.0 */
1
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
+ import "./SyncBlockLabel.compiled.css";
4
+ import { ax, ix } from "@compiled/react/runtime";
2
5
  import React, { useCallback, useMemo, useState } from 'react';
3
6
  import { useIntl } from 'react-intl';
4
- import IconButton from '@atlaskit/button/icon/button';
5
7
  import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
6
8
  import { SyncBlockLabelSharedCssClassName } from '@atlaskit/editor-common/sync-block';
7
- import InformationIcon from '@atlaskit/icon/core/status-information';
8
9
  import BlockSyncedIcon from '@atlaskit/icon-lab/core/block-synced';
9
- import { Text } from '@atlaskit/primitives/compiled';
10
+ import { Box, Text } from '@atlaskit/primitives/compiled';
10
11
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
11
12
  import Tooltip from '@atlaskit/tooltip/Tooltip';
12
13
  import VisuallyHidden from '@atlaskit/visually-hidden/visually-hidden';
13
14
  import { formatElapsedTime } from './utils/time';
14
15
  var SyncBlockLabelDataId = 'sync-block-label';
16
+ var styles = {
17
+ truncatedLabelText: "_11c8wadc _1reo15vq _18m915vq _syazazsu _1ul9idpf _1bto1l2s _o5721q9c",
18
+ unpublishedSuffix: "_11c8wadc _syazazsu _1o9zidpf _o5721q9c"
19
+ };
15
20
  var SyncBlockLabelComponent = function SyncBlockLabelComponent(_ref) {
16
21
  var contentUpdatedAt = _ref.contentUpdatedAt,
17
22
  isSource = _ref.isSource,
@@ -57,31 +62,43 @@ var SyncBlockLabelComponent = function SyncBlockLabelComponent(_ref) {
57
62
  setTooltipContent(tooltipContent);
58
63
  }, [contentUpdatedAt, formatMessage, intl, title, tooltipMessage]);
59
64
  var ariaDescribedById = "sync-block-label-description-".concat(localId);
65
+ var unpublishedParenthetical = unpublishedInfo ? formatMessage(messages.unpublishedInParentheses) : undefined;
60
66
  var getLabelContent = useMemo(function () {
61
- if (isUnsyncedBlock) {
62
- return /*#__PURE__*/React.createElement(Text, {
67
+ // The parenthetical carries a leading space so the accessible name and copied text read as
68
+ // "… (unpublished)". Flex trims it visually, and the label's own gap provides the spacing.
69
+ var renderUnpublishedLabel = function renderUnpublishedLabel(label) {
70
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
71
+ as: "span",
72
+ xcss: styles.truncatedLabelText
73
+ }, label), /*#__PURE__*/React.createElement(Box, {
74
+ as: "span",
75
+ xcss: styles.unpublishedSuffix
76
+ }, " ".concat(unpublishedParenthetical)));
77
+ };
78
+ var renderPlainLabel = function renderPlainLabel(label) {
79
+ return unpublishedParenthetical ? renderUnpublishedLabel(label) : /*#__PURE__*/React.createElement(Text, {
63
80
  size: "small",
64
81
  color: "color.text.subtle"
65
- }, formatMessage(messages.unsyncedBlockLabel));
66
- }
67
- if (isSource) {
68
- return /*#__PURE__*/React.createElement(Text, {
82
+ }, label);
83
+ };
84
+ var renderTruncatingTitle = function renderTruncatingTitle(label) {
85
+ return unpublishedParenthetical ? renderUnpublishedLabel(label) : /*#__PURE__*/React.createElement(Text, {
86
+ maxLines: 1,
69
87
  size: "small",
70
88
  color: "color.text.subtle"
71
- }, formatMessage(expValEquals('platform_editor_sync_block_activation', 'isEnabled', true) ? messages.sourceSyncedBlockLabel : messages.syncedBlockLabel));
89
+ }, label);
90
+ };
91
+ if (isUnsyncedBlock) {
92
+ return renderPlainLabel(formatMessage(messages.unsyncedBlockLabel));
93
+ }
94
+ if (isSource) {
95
+ return renderPlainLabel(formatMessage(expValEquals('platform_editor_sync_block_activation', 'isEnabled', true) ? messages.sourceSyncedBlockLabel : messages.syncedBlockLabel));
72
96
  }
73
97
  if (!title) {
74
- return /*#__PURE__*/React.createElement(Text, {
75
- size: "small",
76
- color: "color.text.subtle"
77
- }, formatMessage(messages.syncedBlockLabel));
98
+ return renderPlainLabel(formatMessage(messages.syncedBlockLabel));
78
99
  }
79
- return /*#__PURE__*/React.createElement(Text, {
80
- maxLines: 1,
81
- size: "small",
82
- color: "color.text.subtle"
83
- }, title);
84
- }, [formatMessage, isSource, isUnsyncedBlock, title]);
100
+ return renderTruncatingTitle(title);
101
+ }, [formatMessage, isSource, isUnsyncedBlock, title, unpublishedParenthetical]);
85
102
  var unpublishedTooltipLabel = unpublishedInfo ? formatMessage(unpublishedInfo.variant === 'source' ? messages.unpublishedSourceAvailabilityTooltip : messages.unpublishedLocalReferenceAvailabilityTooltip, {
86
103
  sourceType: unpublishedInfo.sourceType
87
104
  }) : undefined;
@@ -91,21 +108,24 @@ var SyncBlockLabelComponent = function SyncBlockLabelComponent(_ref) {
91
108
  ,
92
109
  className: SyncBlockLabelSharedCssClassName.labelClassName,
93
110
  "aria-describedby": isSource || isUnsyncedBlock ? undefined : ariaDescribedById
94
- }, unpublishedTooltipLabel ? /*#__PURE__*/React.createElement(Tooltip, {
95
- position: "top",
96
- content: unpublishedTooltipLabel
97
- }, /*#__PURE__*/React.createElement(IconButton, {
98
- appearance: "subtle",
99
- icon: InformationIcon,
100
- label: unpublishedTooltipLabel,
101
- spacing: "compact",
102
- testId: "sync-block-unpublished-information"
103
- })) : null, /*#__PURE__*/React.createElement(BlockSyncedIcon, {
111
+ }, /*#__PURE__*/React.createElement(BlockSyncedIcon, {
104
112
  color: "var(--ds-icon-subtle, #505258)",
105
113
  size: "small",
106
114
  label: ""
107
115
  }), getLabelContent);
108
- var labelWithExistingTooltip = isSource || isUnsyncedBlock ? primaryLabel : /*#__PURE__*/React.createElement(Tooltip, {
116
+ var referenceDescription = !isSource && !isUnsyncedBlock && /*#__PURE__*/React.createElement(VisuallyHidden, {
117
+ id: ariaDescribedById
118
+ }, expValEquals('platform_editor_sync_block_activation', 'isEnabled', true) ? tooltipMessage : tooltipContent);
119
+ if (unpublishedTooltipLabel) {
120
+ return /*#__PURE__*/React.createElement(Tooltip, {
121
+ position: "top",
122
+ content: unpublishedTooltipLabel
123
+ }, primaryLabel, referenceDescription);
124
+ }
125
+ if (isSource || isUnsyncedBlock) {
126
+ return primaryLabel;
127
+ }
128
+ return /*#__PURE__*/React.createElement(Tooltip, {
109
129
  position: "top",
110
130
  content: tooltipContent
111
131
  // workaround because tooltip adds aria-describedby with a new id every time the tooltip is opened
@@ -116,9 +136,6 @@ var SyncBlockLabelComponent = function SyncBlockLabelComponent(_ref) {
116
136
  // using this to ensure that the 'last edited' time is updated when the tooltip is opened
117
137
  ,
118
138
  onShow: updateTooltipContent
119
- }, primaryLabel, /*#__PURE__*/React.createElement(VisuallyHidden, {
120
- id: ariaDescribedById
121
- }, expValEquals('platform_editor_sync_block_activation', 'isEnabled', true) ? tooltipMessage : tooltipContent));
122
- return labelWithExistingTooltip;
139
+ }, primaryLabel, referenceDescription);
123
140
  };
124
141
  export var SyncBlockLabel = /*#__PURE__*/React.memo(SyncBlockLabelComponent);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-synced-block",
3
- "version": "14.0.18",
3
+ "version": "14.0.20",
4
4
  "description": "SyncedBlock plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -21,12 +21,12 @@
21
21
  "atlaskit:src": "src/index.ts",
22
22
  "dependencies": {
23
23
  "@atlaskit/adf-schema": "^57.2.0",
24
- "@atlaskit/button": "25.3.0",
24
+ "@atlaskit/button": "25.3.1",
25
25
  "@atlaskit/dropdown-menu": "18.3.0",
26
26
  "@atlaskit/editor-json-transformer": "^9.8.0",
27
27
  "@atlaskit/editor-plugin-analytics": "^16.1.0",
28
28
  "@atlaskit/editor-plugin-block-controls": "^17.3.0",
29
- "@atlaskit/editor-plugin-block-menu": "^15.0.0",
29
+ "@atlaskit/editor-plugin-block-menu": "^15.1.0",
30
30
  "@atlaskit/editor-plugin-connectivity": "16.0.0",
31
31
  "@atlaskit/editor-plugin-content-format": "^10.0.0",
32
32
  "@atlaskit/editor-plugin-decorations": "^16.1.0",
@@ -52,7 +52,7 @@
52
52
  "@atlaskit/platform-feature-flags": "^2.2.0",
53
53
  "@atlaskit/primitives": "^22.5.0",
54
54
  "@atlaskit/spinner": "20.4.0",
55
- "@atlaskit/tmp-editor-statsig": "^171.0.0",
55
+ "@atlaskit/tmp-editor-statsig": "^173.0.0",
56
56
  "@atlaskit/tokens": "16.11.1",
57
57
  "@atlaskit/tooltip": "^24.3.0",
58
58
  "@atlaskit/visually-hidden": "^4.4.0",
@@ -64,7 +64,7 @@
64
64
  "memoize-one": "^6.0.0"
65
65
  },
66
66
  "peerDependencies": {
67
- "@atlaskit/editor-common": "^120.10.0",
67
+ "@atlaskit/editor-common": "^120.11.0",
68
68
  "react": "^18.2.0 || ^19.2.0",
69
69
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
70
70
  },